.home-actions { top:auto; bottom:145px; display:grid; gap:12px; }
.party-menu-button { width:100%; --button-fill:#8b63e9; --button-lip:#6545b0; min-height:54px; font-size:21px; }
.party-menu-button small { font:700 9px 'DM Sans',sans-serif; opacity:.85; max-width:45px; line-height:1.3; text-align:left; }
#party-root { position:absolute; inset:0; pointer-events:none; color:#234366; }
#party-root[hidden] { display:none; }
#party-root button,#party-root input,#party-root select { pointer-events:auto; }
.party-screen { position:absolute; inset:0; overflow-y:auto; pointer-events:auto; background:radial-gradient(ellipse at 50% 33%,#f3fcff70,transparent 50%),linear-gradient(155deg,#e3f9ff,#b7e2ff 62%,#ded8ff); padding:22px max(20px,calc((100% - 760px)/2)) 32px; }
.party-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; min-height:40px; margin-bottom:16px; }
.party-header .text-button { justify-self:start; padding:8px 10px; font-size:12px; background:#ffffff66; border-radius:14px; }
.party-header .eyebrow { letter-spacing:.12em; font-size:12px; }
.party-connected { justify-self:end; font:600 14px Fredoka,sans-serif; white-space:nowrap; background:#ffffff70; border:2px solid #ffffffa8; padding:5px 11px; border-radius:14px; }
.party-entry-card { width:min(360px,100%); margin:28px auto 0; text-align:center; }
.party-kicker { font-size:10px; font-weight:800; letter-spacing:.17em; color:#5f57a1; }
.party-entry h1,.party-results h1 { font-family:Fredoka,sans-serif; font-size:clamp(60px,9vh,86px); line-height:.91; letter-spacing:-.035em; margin:20px 0 34px; color:#fff; text-shadow:0 5px 0 #508ccc,2px 0 #508ccc,-2px 0 #508ccc,0 -2px #508ccc; transform:rotate(-3deg); }
.party-entry h1 em { color:#ffdc58; font-style:normal; text-shadow:0 5px 0 #d58a34,2px 0 #d58a34,-2px 0 #d58a34,0 -2px #d58a34; }
.party-field { display:block; text-align:left; font-size:10px; font-weight:800; letter-spacing:.11em; margin:18px 0 16px; }
.party-field input { display:block; width:100%; margin-top:7px; padding:13px 16px; min-height:52px; border:2px solid #abcbe5; background:#ffffffe6; color:#25446a; border-radius:16px; font:600 19px Fredoka,sans-serif; outline:none; box-shadow:inset 0 3px 0 #b6d8ef26; }
.party-field input:focus { border-color:#8b63e9; box-shadow:0 0 0 4px #8b63e929; }
.party-name-field small { display:block; margin:8px 2px 0; color:#d43d56; font:600 15px Fredoka,sans-serif; letter-spacing:0; }
.party-name-field small:empty { display:none; }
.party-name-field.name-error input { border-color:#ec6273; box-shadow:0 0 0 4px #ec627326; }
.party-name-field.name-flash input { animation:name-flash .45s ease-out; }
@keyframes name-flash { 0%,50% { background:#ffd6dc; transform:translateX(-4px); } 25%,75% { transform:translateX(4px); } 100% { transform:translateX(0); } }
.reduced-motion .party-name-field.name-flash input { animation:none; background:#ffe9ed; }
@media(prefers-reduced-motion:reduce) { .party-name-field.name-flash input { animation:none; background:#ffe9ed; } }
#party-code-input { text-transform:uppercase; letter-spacing:.15em; }
.party-divider { display:flex; align-items:center; gap:16px; margin:28px 0 6px; font-size:10px; font-weight:800; color:#6b85a1; }
.party-divider:before,.party-divider:after { content:''; flex:1; height:1px; background:#9bbdd3; }
.party-error { font-size:12px!important; line-height:1.4; text-align:center; color:#715284; margin:16px 0 0!important; }
.party-error:empty { display:none; }
.party-join-row { display:flex; align-items:flex-end; gap:14px; }
.party-join-row .party-field { flex:1; min-width:0; margin:12px 0 0; }
.party-join-row .party-join-button { min-height:52px; margin-bottom:4px; font-size:19px; padding:10px 20px; }
.party-code-row { display:flex; justify-content:center; align-items:center; gap:22px; width:max-content; max-width:100%; margin:22px auto 0; padding:12px 17px 12px 24px; background:#ffffff8c; border:2px solid #ffffffde; border-radius:22px 27px 25px 18px; box-shadow:0 5px 0 #8cb8d91a; transform:rotate(-1deg); }
.party-code-row .eyebrow { display:block; font-size:9px; letter-spacing:.13em; color:#6983a4; }
.party-room-code { display:block; background:none; border:0; color:#6c50b8; font:600 44px Fredoka,sans-serif; padding:0; letter-spacing:.09em; white-space:nowrap; cursor:pointer; line-height:1.12; }
.party-code-row .secondary { font-size:12px; min-height:42px; padding:8px 13px; transform:rotate(3deg); }
.party-stage { position:relative; width:100%; max-width:700px; height:clamp(250px,35vh,310px); margin:10px auto 12px; }
.party-stage:has(.party-player-label:nth-child(5)) { height:clamp(350px,47vh,430px); }
#party-lobby-canvas { width:100%; height:calc(100% - 52px); display:block; }
.party-player-label { position:absolute; transform:translate(-50%,0); text-align:center; width:125px; pointer-events:none; }
.party-player-label strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 16px Fredoka,sans-serif; }
.party-player-label i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
.party-player-label small { font-size:9px; font-weight:800; letter-spacing:.04em; color:#677b95; }
.party-player-label .is-ready { color:#16876e; }
.party-stage-invite { text-align:center; font-size:11px; color:#687fa1; margin:19px 0 0; }
.party-lobby-controls { max-width:500px; margin:auto; padding:22px; background:#ffffffa6; border:2px solid #ffffff; border-radius:28px; box-shadow:0 8px 30px #6b9fc21a; }
.party-settings { display:flex; gap:22px; }
.party-setting { flex:1; min-width:0; }
.party-setting>span { display:block; font-size:9px; letter-spacing:.12em; font-weight:800; color:#6f7e9a; margin:0 0 9px 3px; }
.party-choices { display:flex; align-items:stretch; gap:5px; }
.party-choice { flex:1; min-width:0; min-height:40px; border:2px solid transparent; border-radius:12px; padding:8px 6px; color:#647590; background:#dcebf9; font:600 12px Fredoka,sans-serif; cursor:pointer; box-shadow:0 3px 0 #bccfe3; transition:transform .18s ease,background .18s ease; }
.party-choice[aria-pressed="true"] { background:#8b6bd2; color:#fff; border-color:#fff; box-shadow:0 3px 0 #62499e; transform:rotate(-2deg); }
.party-choice:disabled { opacity:1; cursor:default; }
.party-rule { text-align:center; line-height:1.5; font:600 13px Fredoka,sans-serif; color:#627295; margin:20px 0; }
.party-rule span { display:block; font:500 10px 'DM Sans',sans-serif; color:#7a89a3; margin-top:3px; }
.party-lobby-actions { display:flex; gap:16px; align-items:center; justify-content:center; }
.party-lobby-actions .ready-button { flex:0 0 36%; font-size:17px; padding:12px 8px; min-height:52px; }
.party-lobby-actions .party-start-button { flex:1; font-size:22px; padding:12px; min-height:58px; }
.ready-button { --button-fill:#87a6d3; --button-lip:#627fae; }
.ready-button[aria-pressed="true"] { --button-fill:#4dc7a5; --button-lip:#278f77; }
.party-screen .primary,.party-screen .secondary { border-radius:19px 23px 21px 17px; transition:transform .18s cubic-bezier(.2,1.8,.5,1),box-shadow .18s ease; }
.party-host-button { font-size:24px; min-height:62px; }
.party-button-badge { display:inline-flex; flex:none; align-items:center; justify-content:center; width:28px; height:28px; background:#ffffffb3; border-radius:9px; color:#ad6b22; -webkit-text-stroke:0; font:600 24px Fredoka,sans-serif; transform:rotate(-9deg); box-shadow:0 2px 0 #be812926; }
.party-screen button:focus-visible { outline:3px solid #7156b8; outline-offset:5px; }
@media(hover:hover) { .party-screen .primary:hover:not(:disabled),.party-screen .secondary:hover:not(:disabled) { transform:translateY(-3px) rotate(-2deg); } .party-choice:hover:not(:disabled) { transform:translateY(-2px); } }
.party-screen .primary:active:not(:disabled),.party-screen .secondary:active:not(:disabled) { transform:translateY(4px) scale(.97); }
.party-choice:active:not(:disabled) { transform:translateY(3px); box-shadow:none; }
.party-wait { font-size:12px; text-align:center; font-weight:700; }
.party-race-hud { position:absolute; inset:0; }
.party-race-top { display:flex; align-items:flex-start; justify-content:space-between; padding:max(18px,env(safe-area-inset-top)) 20px 0; }
.party-leave { border:0; border-radius:20px; padding:10px 12px; background:#fff9; color:#294e77; font-size:10px; font-weight:800; cursor:pointer; }
.party-race-top>div { position:absolute; left:50%; transform:translateX(-50%); text-align:center; }
.party-race-top>div>span { display:block; font-size:10px; font-weight:800; letter-spacing:.16em; }
#party-timer { font:600 32px Fredoka,sans-serif; color:#fff; text-shadow:0 2px #4882ae,1px 0 #4882ae,-1px 0 #4882ae; font-variant-numeric:tabular-nums; }
.party-live { color:#167f73; background:#e8fff2dc; border:1px solid #fff; padding:5px 9px; border-radius:14px; font-size:9px; font-weight:800; letter-spacing:.1em; }
.party-leaderboard { position:absolute; right:20px; top:86px; width:216px; border:1px solid #ffffffb3; border-radius:16px; background:#eefdffda; padding:12px 12px 8px; backdrop-filter:blur(8px); box-shadow:0 5px 22px #204c7115; }
.party-board-title { display:block; font-size:9px; font-weight:800; letter-spacing:.07em; margin-bottom:7px; color:#5d7896; }
.party-leaderboard ol { list-style:none; margin:0; padding:0; }
.party-leaderboard li { display:flex; align-items:center; gap:6px; padding:7px 1px; border-bottom:1px solid #a9cce733; font-size:11px; font-variant-numeric:tabular-nums; transition:background .25s; }
.party-leaderboard li>b { width:17px; color:var(--player-color); -webkit-text-stroke:.4px #274368; }
.party-leaderboard li>span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-leaderboard li>strong { font-size:11px; }
.party-leaderboard li>i { width:7px; color:#258d76; font-style:normal; }
.party-leaderboard li:has(i:not(:empty)) { animation:party-rank-shift .25s ease-out; }
.party-leaderboard .is-local { background:#badaf14d; border-radius:6px; font-weight:800; }
.party-expand { display:none; width:100%; font-size:8px; font-weight:800; background:none; border:0; padding:8px; color:#597498; cursor:pointer; }
.party-countdown { position:absolute; left:50%; top:43%; transform:translate(-50%,-50%); color:#fff; font:700 135px Fredoka,sans-serif; text-shadow:0 8px 0 #7855b5,3px 0 #7855b5,-3px 0 #7855b5,0 -3px #7855b5; animation:party-count .7s ease-out; }
.party-countdown.hop { font-size:110px; color:#ffdf61; text-shadow:0 8px #d89732,3px 0 #d89732,-3px 0 #d89732,0 -3px #d89732; }
.party-race-status { position:absolute; left:50%; transform:translateX(-50%); bottom:80px; padding:9px 18px; border-radius:18px; background:#fffD; text-align:center; font:600 17px Fredoka,sans-serif; max-width:90%; width:max-content; }
.party-race-status:empty { display:none; }
.party-spectate { position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:12px; max-width:94%; padding:10px 16px; border-radius:24px; background:#eff9fff2; box-shadow:0 6px 20px #28517b20; }
.party-spectate[hidden],.party-spectate button[hidden],.party-controls-hint[hidden] { display:none; }
.party-spectate span { font:600 14px Fredoka,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-spectate button { font-size:13px; padding:8px 14px; white-space:nowrap; }
.party-live.is-out { color:#935479; }
.party-controls-hint { position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); left:0; right:0; text-align:center; font-size:9px; font-weight:800; color:#356493; letter-spacing:.04em; }
.party-results-card { max-width:520px; margin:35px auto; text-align:center; }
.party-results h1 { font-size:64px; margin:15px 0; }
.party-results-card>p { font-size:13px; }
.party-result-list { list-style:none; padding:0; margin:25px 0; }
.party-result-list li { display:flex; align-items:center; gap:12px; min-height:72px; background:#ffffffbd; border:2px solid #ffffffd4; border-radius:20px; padding:6px 15px; margin:8px 0; }
.party-result-list li.is-local { border-color:#9170dc; background:#fff; }
.party-result-list li>b { width:28px; font-size:26px; }
.party-result-list canvas { width:67px; height:50px; }
.party-result-list li>span { flex:1; text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; font:600 18px Fredoka,sans-serif; }
.party-result-list small { display:block; font:800 8px 'DM Sans',sans-serif; color:#7b76a2; letter-spacing:.12em; }
.party-result-list li>strong { font:600 20px Fredoka,sans-serif; white-space:nowrap; }
.party-result-actions>div { display:flex; gap:14px; margin-top:16px; }
.party-result-actions>div>button { flex:1; font-size:14px; }
@keyframes party-count { from { transform:translate(-50%,-50%) scale(1.4); opacity:.3; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
@keyframes party-rank-shift { from { transform:translateY(4px); background:#ceecff; } to { transform:translateY(0); } }
@media(max-width:640px) {
  .home-actions { bottom:135px; gap:10px; }
  .party-menu-button { min-height:50px; font-size:20px; }
  .party-screen { padding:16px 16px 28px; }
  .party-header .eyebrow { font-size:10px; }
  .party-entry-card { margin-top:24px; max-width:330px; }
  .party-lobby-controls { padding:18px 16px; }
  .party-stage { height:clamp(230px,31vh,270px); }
  .party-player-label { width:82px; }
  .party-player-label strong { font-size:12px; }
  .party-player-label small { font-size:8px; }
  .party-code-row { gap:20px; margin-top:16px; }
  .party-code-row>div { min-width:0; }
  .party-room-code { font-size:40px; }
  .party-settings { gap:14px; flex-direction:column; }
  .party-setting { display:flex; align-items:center; gap:12px; }
  .party-setting>span { width:42px; flex:none; margin:0; }
  .party-choices { flex:1; gap:7px; }
  .party-choice { min-height:36px; padding:7px 5px; }
  .party-rule { margin:17px 0; }
  .party-lobby-actions { gap:12px; }
  .party-lobby-actions .ready-button { font-size:15px; }
  .party-lobby-actions .party-start-button { font-size:18px; padding:10px 8px; }
  .party-start-button .party-button-badge { width:23px; height:23px; font-size:21px; }
  .party-leaderboard { right:12px; top:76px; width:166px; padding:9px 8px 2px; }
  .party-leaderboard li { font-size:10px; gap:4px; }
  .party-leaderboard li>strong { font-size:10px; }
  .party-leaderboard .party-extra-rank { display:none; }
  .party-expanded .party-leaderboard .party-extra-rank { display:flex; }
  .party-expand { display:block; }
  .party-results-card { margin-top:26px; }
  .party-result-list li { gap:5px; padding:6px 10px; }
  .party-result-list li>span { font-size:16px; }
  .party-result-list li>strong { font-size:18px; }
}
@media(max-height:700px) {
  .home-actions { bottom:112px; }
  .party-entry-card { margin-top:8px; }
  .party-entry h1 { font-size:62px; margin:12px 0 24px; }
  .party-field { margin:10px 0; }
  .party-divider { margin-top:23px; }
  .party-stage { height:225px; margin-top:4px; margin-bottom:4px; }
  .party-code-row { margin-top:8px; padding-top:9px; padding-bottom:9px; }
  .party-lobby-controls { padding:16px; }
  .party-lobby .party-header { margin-bottom:8px; }
  .party-lobby .party-rule span { display:none; }
  .party-lobby .party-rule { margin:14px 0; }
}
@media(orientation:landscape) and (max-height:500px) {
  .home-actions { bottom:76px; grid-template-columns:1fr 1fr; width:min(480px,70vw); }
  .party-menu-button { min-height:44px; font-size:17px; }
  .party-menu-button small { display:none; }
}
.reduced-motion .party-countdown,.reduced-motion .party-leaderboard li { animation:none!important; }
.reduced-motion .party-screen button { transition:none!important; }
.hop-loading {
  position:fixed; z-index:150; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(290px,calc(100vw - 48px)); box-sizing:border-box; padding:23px 26px 21px;
  display:grid; justify-items:center; gap:14px; pointer-events:none;
  color:#29496c; background:#f5fcfff5; border:3px solid white; border-radius:28px;
  box-shadow:0 10px 0 #a9cce66b,0 20px 65px #304b7140;
  font-family:'Fredoka',sans-serif; text-align:center;
}
.hop-loading[hidden] { display:none; }
.hop-loading strong { font-size:23px; font-weight:600; }
.hop-loading small { font:500 13px/1.4 'DM Sans',sans-serif; color:#617b95; }
.hop-loading-dot {
  width:28px; height:28px; border-radius:50% 50% 44% 44%; background:#69c9fa;
  box-shadow:inset -4px -5px 0 #419fdf,inset 4px 4px 0 #a4e9ff;
  animation:loading-hop .7s ease-in-out infinite alternate;
}
.hop-loading-track { width:100%; height:10px; border-radius:10px; background:#dcebf7; overflow:hidden; }
.hop-loading-track i { display:block; height:100%; width:40%; border-radius:inherit; background:linear-gradient(90deg,#619aff,#ad7deb); animation:loading-slide 1.15s ease-in-out infinite alternate; }
@keyframes loading-slide { from { transform:translateX(-75%); } to { transform:translateX(225%); } }
@keyframes loading-hop { from { transform:translateY(3px) scale(1.08,.9); } to { transform:translateY(-4px) scale(.96,1.05); } }
.reduced-motion .hop-loading-dot,.reduced-motion .hop-loading-track i { animation:none; }
@media(prefers-reduced-motion:reduce) { .hop-loading-dot,.hop-loading-track i { animation:none; } }
@media(prefers-reduced-motion:reduce) { .party-countdown,.party-leaderboard li { animation:none!important; } .party-screen button { transition:none!important; } }