/* Shared arenas: who you are, who's here, rooms, quick chat and the round podium. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.identity-card{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 10px 8px 8px;border-radius:var(--radius);background:#faf1d70d;border:1px solid #faf1d71a}
.identity-avatar{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d6 0 12%,var(--yellow) 13% 58%,#c79a3c 100%);box-shadow:0 0 0 2px #17152e,0 0 0 3px #f4dc7866}
.identity-card[data-kind="account"] .identity-avatar{background:radial-gradient(circle at 35% 30%,#effffb 0 12%,var(--mint) 13% 58%,#4d9f8f 100%);box-shadow:0 0 0 2px #17152e,0 0 0 3px #9edfd088}
.identity-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.identity-copy strong{font:600 16px/1.2 Fredoka,sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.identity-copy small{font-size:11px;color:var(--muted)}
.identity-card[data-kind="guest"] #account-open{color:var(--yellow);font-weight:600}
.identity-card #account-open{flex:none;min-height:40px;padding:6px 4px}
.multiplayer{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.multiplayer .secondary{flex:1 1 150px;margin:0;min-height:44px;font:600 14px Fredoka,sans-serif;color:var(--mint);border-color:#9edfd066}
.multiplayer .secondary:hover{background:#9edfd014}
.join-room{display:flex;flex:1 1 150px;gap:6px}
.join-room input{flex:1;min-width:0;min-height:44px;border-radius:var(--radius);border:1px solid #bac8dc40;background:#0b0a1a66;color:var(--ink);padding:0 12px;font:600 15px Fredoka,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.join-room input::placeholder{letter-spacing:.02em;text-transform:none;color:#bac8dc90;font-weight:500}
.join-room button{min-height:44px;padding:0 14px;border-radius:var(--radius);border:0;background:#faf1d71f;color:var(--ink);font:600 14px Fredoka,sans-serif}
.join-room button:hover{background:#faf1d733}
.room-status{flex-basis:100%;margin:0;font-size:13px;color:var(--muted);text-align:center}
.room-status strong{color:var(--mint);letter-spacing:.12em}
.room-status .text-button{min-height:36px;color:var(--yellow)}
.room-message{flex-basis:100%;margin:0;font-size:12px;color:var(--coral);text-align:center}
.room-message:empty{display:none}
.online-count{margin:10px 0 0;font-size:12px;text-align:center;color:var(--mint)}
.online-count::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 0 #9edfd080;animation:live-dot 2s infinite}
@keyframes live-dot{70%{box-shadow:0 0 0 7px #9edfd000}100%{box-shadow:0 0 0 0 #9edfd000}}
.room-chip{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:999px;border:1px solid #9edfd066;background:#17152e99;color:var(--muted);font-size:12px}
.room-chip strong{color:var(--mint);letter-spacing:.12em;font-family:Fredoka,sans-serif}
.room-chip svg{width:15px;height:15px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round}
.room-chip:hover{background:#9edfd01a}
.bot-tag{margin-left:5px;padding:0 4px;border-radius:4px;background:#bac8dc22;color:#bac8dcb0;font-size:9px;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.pause-room{font-size:14px;color:var(--muted)}
.pause-room strong{color:var(--mint);letter-spacing:.12em}
.pause-room .text-button{min-height:36px;color:var(--yellow)}
.roster{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.roster li{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#faf1d70f;font-size:12px;color:var(--ink)}
.roster .leader-dot,.round-podium .leader-dot{width:8px;height:8px;border-radius:50%;flex:none}
/* Quick chat: a speech button beside Brake and a tray of owned emotes. */
.emote-button{pointer-events:auto;display:grid;place-items:center;width:52px;height:52px;margin-right:10px;border-radius:50%;border:1px solid #faf1d740;background:var(--surface);color:var(--ink)}
.emote-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.emote-button[aria-expanded="true"]{border-color:var(--yellow);color:var(--yellow)}
.burn-controls{display:flex;align-items:center}
.emote-tray{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(max(26px,env(safe-area-inset-bottom)) + 70px);z-index:6;display:grid;grid-template-columns:repeat(4,58px);gap:6px;padding:8px;border-radius:18px;background:var(--surface);box-shadow:0 14px 40px #08132190;max-height:50vh;overflow:auto}
.emote-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;border:0;border-radius:12px;background:#faf1d70d;color:var(--ink)}
.emote-choice span{font-size:24px;line-height:1}
.emote-choice small{font-size:10px;color:var(--muted);max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emote-choice:hover,.emote-choice:focus-visible{background:#f4dc7826}
/* Round podium on the results card, with the countdown to the shared restart. */
.round-panel{margin:6px 0 10px;padding:12px;border-radius:16px;background:#0b0a1a55}
.round-podium{list-style:none;margin:0;padding:0;text-align:left}
.round-podium li{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:13px;color:var(--muted)}
.round-podium li.is-winner{color:var(--yellow);font-weight:600}
.round-podium li.is-you{color:var(--ink)}
.round-podium li.is-you.is-winner{color:var(--yellow)}
.round-podium strong{margin-left:auto;font-variant-numeric:tabular-nums}
.podium-place{width:28px;font:600 13px Fredoka,sans-serif}
.round-countdown{margin:8px 0 0;font:600 17px Fredoka,sans-serif;color:var(--mint);text-align:center}
.round-countdown:empty{display:none}
#results.waiting .result-stats,#results.waiting #result-progress,#results.waiting #result-upgrades,#results.waiting #result-bonus,#results.waiting #earned,#results.waiting #best{display:none}
/* Account panel */
.account-panel{max-height:calc(100% - 40px);overflow:auto;text-align:left}
.account-panel .workshop-header h2{font-size:34px;margin:0}
.account-intro{color:var(--muted);font-size:14px;line-height:1.5;margin:6px 0 14px}
.account-intro strong{color:var(--yellow)}
.account-form{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.account-form label{font-size:12px;color:var(--muted);margin-top:6px}
.account-form input,.account-form select{min-height:46px;border-radius:12px;border:1px solid #bac8dc40;background:#0b0a1a66;color:var(--ink);padding:0 12px;font:500 16px system-ui,sans-serif}
.account-form input:focus-visible,.account-form select:focus-visible,.join-room input:focus-visible{outline:2px solid var(--yellow);outline-offset:1px}
.account-form .primary{margin-top:12px;min-height:50px;font-size:18px}
.account-fine{font-size:11px;color:#bac8dc99;line-height:1.5;margin:8px 0 0}
.account-fine a{color:var(--mint)}
.account-warning{font-size:12px;color:var(--coral);line-height:1.45;margin:8px 0 0}
.account-message{font-size:13px;margin:12px 0 0;color:var(--muted);min-height:1em}
.account-message[data-tone="good"]{color:var(--mint)}
.account-message[data-tone="bad"]{color:var(--coral)}
.account-panel .save-options{margin-top:16px}
#account-signed .text-button{color:var(--coral)}
@media(max-width:760px){
  .identity-card{margin-bottom:8px;padding:6px 8px 6px 6px}
  .identity-avatar{width:26px;height:26px}
  .multiplayer{margin-top:8px;gap:6px}
  .multiplayer .secondary,.join-room input,.join-room button{min-height:42px}
  .online-count{margin-top:6px}
  .emote-button{width:48px;height:48px;margin-right:8px}
  .emote-tray{grid-template-columns:repeat(4,54px);right:16px;bottom:calc(max(22px,env(safe-area-inset-bottom)) + 66px)}
  .room-chip span{display:none}
}
@media(max-height:520px) and (min-width:761px){.multiplayer,.online-count{display:none}}
@media(prefers-reduced-motion:reduce){.online-count::before{animation:none}}
/* The room-code input must not force the friends row to wrap. */
.join-room{min-width:0}.join-room input{width:7ch}
@media(min-width:761px){.multiplayer .secondary,.join-room{flex:1 1 0}}
/* Laptop heights: keep the whole home card (title to footer) on screen. */
@media(min-width:761px) and (max-height:940px){
  .entry h1{font-size:clamp(40px,4.3vw,58px);margin-bottom:14px}
  .entry .rules{display:none}
  .entry .intro{margin:0 0 12px}
  .entry .home-records{margin:6px 0 10px}
  .entry .session-note{margin:8px 0 2px}
  .entry .distribution-links{margin:2px 0}
}
/* The chat button stays a circle beside Brake and Boost at every width. */
body .burn-controls .emote-button,body[data-playing=true] .burn-controls .emote-button{flex:0 0 auto;width:52px;min-width:0;height:52px;min-height:0;margin:0;padding:0;border-radius:50%}
@media(max-width:760px){body .burn-controls .emote-button,body[data-playing=true] .burn-controls .emote-button{width:48px;height:48px}}
/* The room chip belongs to the arena; at home the room row shows the code. */
body:not([data-playing="true"]) .room-chip{display:none}
#mode-label{white-space:nowrap}
@media(max-width:760px){body[data-playing="true"] .wordmark .byline{display:none}}
/* Long guest names never push scores off the phone leaderboard. */
.leaders li>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A results card with the podium stays on one screen. */
#results.has-round h2{font-size:34px;margin-bottom:8px}
#results.has-round .result-stats{margin:12px 0;gap:26px}
#results.has-round .result-stats strong{font-size:28px}
#results.has-round #result-upgrades,#results.has-round #result-progress{display:none}
#results.has-round>p{margin:8px 0 12px}
#results{max-height:calc(100% - 96px);overflow:auto}
/* Erasure sits at the bottom, behind a disclosure and a confirmation. */
.erase-options{margin-top:18px;border-top:1px solid #bac8dc25;padding-top:10px}
.erase-options summary{cursor:pointer;font-size:12px;color:#ff9e8ccc;min-height:36px;display:flex;align-items:center}
.erase-confirm{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.erase-confirm input{min-height:0;width:18px;height:18px}
.secondary.danger{color:var(--coral);border-color:#ff9e8c80}
/* Programmatic focus on a heading moves the reader, it isn't a control. */
h2[tabindex="-1"]:focus{outline:none}
/* Over the painted nebula the menu bar fades out instead of sitting as a solid strip. */
body:not([data-playing=true]) .topbar{background:linear-gradient(180deg,var(--sky-deep,#04071f) 0%,color-mix(in srgb,var(--sky-deep,#04071f) 82%,transparent) 55%,transparent 100%)}
#results{max-height:calc(100% - 150px);top:calc(50% + 28px)}
.pause-ping{margin-top:-4px;font-variant-numeric:tabular-nums}