/* Asteroiden on the board: deep space behind everything (the canvas), cream cards, teal, orange and gold, Fredoka for
   what the class reads from afar. Only transform and opacity move (the canvas does the rest). */
:root { --space: #070D24; --navy: #0B1430; --deep: #0E1E46; --cream: #FFF7E8; --cream-2: #F6E9CF; --sea: #1FB5A8; --sea-d: #12897F; --orange: #FF7B3A; --orange-d: #C4501A; --sun: #F3B530; --ice: #9EE7FF; --star: #EAF3FF;
  --game: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif; }
html, body { height: 100%; }
body.ast { margin: 0; overflow: hidden; background: var(--space); color: var(--star); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at 50% 45%, transparent 52%, rgba(255,58,40,.38) 100%); opacity: 0; transition: opacity .6s; }
.vignette.is-on { opacity: 1; animation: alarm 1.1s ease-in-out infinite alternate; }
@keyframes alarm { from { opacity: .55; } to { opacity: 1; } }

/* the top bar, in the lobby and at the end */
.ast-top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: max(12px, env(safe-area-inset-top)) clamp(12px, 2vw, 28px) 0; pointer-events: none; }
.ast-top > * { pointer-events: auto; }
.is-intro .ast-top, .is-fight .ast-top { display: none; }
.ast-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 16px 7px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--star); font-weight: 800; font-size: 14px; text-decoration: none; }
.ast-back:hover { background: rgba(255,255,255,.14); }
.ast-back svg { width: 18px; height: 18px; }
.ast-top-right { display: flex; gap: 8px; align-items: center; }

/* ---------- the lobby ---------- */
.lobby { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.2vh, 26px); padding: 64px 0 76px clamp(16px, 4.5vw, 72px); width: min(38vw, 620px); box-sizing: content-box; pointer-events: none; }
.lobby > * { pointer-events: auto; }
.join-card { background: var(--cream); color: var(--navy); border-radius: clamp(20px, 2.2vw, 34px); padding: clamp(14px, 2.2vw, 34px) clamp(16px, 2.6vw, 40px); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4) inset; animation: cardIn .7s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.join-head { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); }
.join-rocket { width: clamp(34px, 3.6vw, 60px); height: auto; flex: none; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.join-head p { margin: 0; display: grid; font-family: var(--game); font-weight: 600; font-size: clamp(15px, 1.5vw, 26px); line-height: 1.15; }
.join-head b { color: var(--sea-d); font-weight: 700; font-size: clamp(20px, 2.4vw, 42px); letter-spacing: -.01em; overflow-wrap: anywhere; }
.join-main { display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 1.6vw, 28px); margin-top: clamp(6px, 1vh, 14px); }
.join-code { margin: 0; font-family: var(--game); font-weight: 700; font-size: clamp(54px, 8.4vw, 170px); line-height: .95; letter-spacing: .02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.join-qr { flex: none; width: clamp(84px, 9.6vw, 180px); aspect-ratio: 1; padding: 6px; border-radius: 16px; background: #FFFCF4; box-shadow: 0 0 0 1px rgba(11,20,48,.08); }
.join-qr svg { display: block; width: 100%; height: 100%; }
.join-card.is-demo .join-main { display: none; }
.join-demo { margin-top: 10px; }
.join-demo-txt { margin: 0 0 12px; font-weight: 700; font-size: clamp(14px, 1.15vw, 19px); line-height: 1.45; color: #2A3A5E; }
.join-demo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.join-demo .btn-ghost { color: var(--navy); border-color: rgba(11,20,48,.3); }
.join-demo .btn-ghost:hover { background: rgba(11,20,48,.06); }
.lobby-count { margin: 0; display: flex; align-items: center; justify-content: center; gap: clamp(8px, .8vw, 14px); font-family: var(--game); font-weight: 600; font-size: clamp(18px, 2.3vw, 42px); color: #FFFFFF; }
.lobby-count svg { width: clamp(38px, 3.6vw, 64px); height: auto; }
.lobby-count b { color: var(--sun); font-weight: 700; font-size: 1.3em; font-variant-numeric: tabular-nums; }
.lobby-go { display: grid; justify-items: center; gap: 8px; }
.go-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-width: min(100%, 15ch); padding: .38em 1.3em .42em 1em; border: 0; border-radius: var(--r-pill); background: linear-gradient(180deg, #FF9C55, #FF7B3A); color: #FFFFFF; font-family: var(--game); font-weight: 700; font-size: clamp(24px, 3.4vw, 60px); letter-spacing: .01em; cursor: pointer; box-shadow: 0 .12em 0 var(--orange-d), 0 .5em 1.2em -.4em rgba(255,123,58,.75); transition: transform .1s, opacity .2s; }
.go-btn svg { width: 1.15em; height: 1.15em; flex: none; }
.go-btn::before, .go-btn::after { content: ""; position: absolute; top: 50%; width: .9em; height: 1.4em; transform: translateY(-50%); background:
  linear-gradient(var(--sun), var(--sun)) 0 0 / .5em .1em no-repeat, linear-gradient(var(--sun), var(--sun)) 0 50% / .7em .1em no-repeat, linear-gradient(var(--sun), var(--sun)) 0 100% / .5em .1em no-repeat; border-radius: 2px; opacity: .95; }
.go-btn::before { right: calc(100% + .3em); transform: translateY(-50%) scaleX(-1); }
.go-btn::after { left: calc(100% + .3em); }
.go-btn:not(:disabled):hover { transform: translateY(-2px); }
.go-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 .04em 0 var(--orange-d); }
.go-btn:disabled { cursor: default; opacity: .45; filter: saturate(.4); }
.go-btn:disabled::before, .go-btn:disabled::after { display: none; }
.go-btn:not(:disabled) { animation: goPulse 1.8s ease-in-out infinite; }
@keyframes goPulse { 50% { transform: scale(1.035); } }
.go-sm { font-size: clamp(20px, 2.2vw, 34px); animation: none !important; }
.go-sm::before, .go-sm::after { display: none; }
.lobby-why { margin: 0; min-height: 1.3em; font-weight: 700; font-size: clamp(13px, 1.05vw, 17px); color: #B9C8E8; text-align: center; }
.lobby-bar { position: fixed; left: clamp(16px, 4.5vw, 72px); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: calc(100vw - 32px - 120px); }
.lobby-list { display: inline-flex; align-items: center; gap: 12px; max-width: min(560px, 100%); padding: 8px 10px 8px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,.16); background: rgba(9,18,46,.72); color: var(--star); text-align: left; cursor: pointer; }
.lobby-list:hover { background: rgba(20,36,82,.85); }
.lobby-list-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(31,181,168,.18); color: #5CE1D3; flex: none; }
.lobby-list-ico svg { width: 24px; height: 24px; }
.lobby-list-txt { display: grid; min-width: 0; }
.lobby-list-txt b { font-weight: 900; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-list-txt small { font-weight: 700; font-size: 12.5px; color: #A9B8DA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-list-edit { flex: none; padding: 6px 12px; border-radius: var(--r-pill); background: var(--sun); color: var(--navy); font-weight: 900; font-size: 13px; }
.lobby-mode { border: 0; background: none; padding: 4px; color: #A9C6FF; font-weight: 800; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- the settings ---------- */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(440px, 100vw); background: #101A3A; color: var(--star); border-left: 1px solid rgba(255,255,255,.1); box-shadow: -30px 0 60px -30px rgba(0,0,0,.8); transform: translateX(104%); transition: transform .26s cubic-bezier(.3,.9,.4,1); overflow-y: auto; overscroll-behavior: contain; }
.drawer.is-open { transform: none; }
.drawer-in { display: grid; gap: 18px; padding: 18px 20px 30px; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer-head h2 { margin: 0; font-family: var(--game); font-weight: 700; font-size: 24px; }
.set-row { display: grid; gap: 8px; justify-items: start; }
.set-row .mini-lbl { color: #9FB2DA; }
.set-row .dd, .set-row .dd-btn { max-width: 100%; }
.set-sw { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.drawer .segc { background: rgba(255,255,255,.07); }
.drawer .segc button { color: var(--star); }
.drawer .segc button[aria-checked="true"] { background: var(--sea); color: #06201D; }
.weapon-set { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.wpn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--star); text-align: left; cursor: pointer; opacity: .6; }
.wpn.is-on { opacity: 1; border-color: var(--sea); background: rgba(31,181,168,.14); }
.wpn:disabled { cursor: not-allowed; opacity: .35; }
.wpn-ico svg { width: 44px; height: 33px; display: block; }
.wpn-txt { display: grid; min-width: 0; }
.wpn-txt b { font-size: 14.5px; font-weight: 900; }
.wpn-txt small { font-size: 12px; font-weight: 700; color: #A9B8DA; line-height: 1.25; }
.pupil-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pupil-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.07); font-weight: 800; font-size: 14px; }
.pupil-list li.is-off { opacity: .5; }
.pupil-list li.is-none { padding: 6px 12px; color: #A9B8DA; }
.pupil-list i { width: 10px; height: 10px; border-radius: 50%; }
.x-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--star); cursor: pointer; }
.x-btn:hover { background: rgba(255,255,255,.16); }
.x-btn svg { width: 20px; height: 20px; }
.x-sm { width: 26px; height: 26px; }
.x-sm svg { width: 14px; height: 14px; }

/* ---------- the fight ---------- */
.hud { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.hud-top { position: absolute; top: max(1.6vh, env(safe-area-inset-top)); left: 50%; width: min(62vw, 880px); transform: translateX(-50%); text-align: center; }
.hud-time { margin: 0; display: flex; align-items: center; justify-content: center; gap: .45em; font-family: var(--game); font-weight: 700; font-size: clamp(22px, 3.3vw, 60px); line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: #FFF6E6; text-shadow: 0 3px 0 rgba(4,8,24,.6); }
.hud-time b { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.3ch; text-align: left; }
.hud-time i { width: 1.1em; height: .14em; border-radius: 1em; background: linear-gradient(90deg, transparent, var(--sea)); }
.hud-time i:last-child { transform: scaleX(-1); }
.hud-time.is-hot { color: #FFB199; }
.hud-time.is-hot b { color: #FF7A59; }
.hp { position: relative; margin: clamp(4px, .9vh, 12px) auto 0; height: clamp(24px, 3.4vw, 46px); border-radius: var(--r-pill); border: clamp(2px, .25vw, 4px) solid #E3F4FF; background: rgba(8,18,46,.85); overflow: hidden; box-shadow: 0 6px 24px -8px rgba(0,0,0,.7); }
.hp-fill { position: absolute; inset: 3px; border-radius: var(--r-pill); background: linear-gradient(180deg, #43DCCB, #17A596); transform-origin: left center; transition: transform .45s cubic-bezier(.3,.9,.4,1); }
.hp::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), rgba(8,18,46,.85) calc(10% - 3px) 10%); pointer-events: none; }
.hp.is-low .hp-fill { background: linear-gradient(180deg, #FFB067, #FF6A3D); }
.hp-txt { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .35em; font-family: var(--game); font-weight: 700; font-size: clamp(13px, 1.65vw, 28px); letter-spacing: .05em; text-transform: uppercase; color: #FFFFFF; text-shadow: 0 2px 0 rgba(4,8,24,.7), 0 0 8px rgba(4,8,24,.6); }
.hud-code { position: absolute; top: max(1.6vh, env(safe-area-inset-top)); right: clamp(10px, 1.8vw, 30px); display: grid; justify-items: center; padding: clamp(6px, .8vw, 12px) clamp(12px, 1.6vw, 26px); border-radius: clamp(14px, 1.4vw, 22px); background: var(--cream); color: var(--navy); font-family: var(--game); box-shadow: 0 10px 30px -12px rgba(0,0,0,.7); }
.hud-code small { font-weight: 700; font-size: clamp(11px, 1.1vw, 20px); letter-spacing: .08em; }
.hud-code b { font-weight: 700; font-size: clamp(22px, 3vw, 54px); line-height: 1; font-variant-numeric: tabular-nums; }
.is-demo .hud-code b { font-size: clamp(16px, 1.8vw, 30px); }
.feed { position: absolute; left: clamp(10px, 1.4vw, 24px); top: calc(max(1.6vh, env(safe-area-inset-top)) + clamp(66px, 9.5vw, 140px)); width: clamp(180px, 19vw, 340px); padding: clamp(8px, .9vw, 16px) clamp(10px, 1.1vw, 18px); border-radius: clamp(14px, 1.3vw, 22px); background: rgba(8,18,48,.8); border: 2px solid rgba(120,200,255,.32); }
.feed h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid rgba(120,200,255,.22); font-family: var(--game); font-weight: 600; font-size: clamp(12px, 1.15vw, 20px); letter-spacing: .06em; text-transform: uppercase; }
.feed h3 svg { width: 1.2em; height: 1.2em; color: #CFEFFF; }
.feed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.feed:has(ol:empty) { display: none; }
.feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-family: var(--game); font-weight: 600; font-size: clamp(13px, 1.25vw, 22px); animation: feedIn .3s ease-out both; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-8px); } }
.feed li i { width: .75em; height: .75em; border-radius: 50%; }
.feed li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed li b { color: #7FF0E3; font-weight: 700; font-variant-numeric: tabular-nums; }
.shield-meter { position: absolute; top: calc(max(1.6vh, env(safe-area-inset-top)) + clamp(60px, 8.6vw, 128px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(8,30,60,.85); border: 2px solid rgba(158,231,255,.6); font-family: var(--game); font-weight: 700; font-size: clamp(13px, 1.3vw, 22px); color: var(--ice); animation: popIn .4s cubic-bezier(.2,1.4,.4,1) both; }
.sm-track { position: relative; width: clamp(120px, 16vw, 280px); height: .7em; border-radius: var(--r-pill); background: rgba(158,231,255,.18); overflow: hidden; }
.sm-track i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #BFF3FF, #6FD8FF); transform-origin: left center; transform: scaleX(0); transition: transform .25s; }
.shield-meter b { font-variant-numeric: tabular-nums; color: #FFFFFF; }
.boost { position: absolute; top: calc(max(1.6vh, env(safe-area-inset-top)) + clamp(64px, 7.4vw, 124px)); right: clamp(10px, 1.8vw, 30px); padding: 6px 16px; border-radius: var(--r-pill); background: linear-gradient(180deg, #FFD36E, #F3B530); color: var(--navy); font-family: var(--game); font-weight: 700; font-size: clamp(14px, 1.5vw, 26px); box-shadow: 0 0 0 4px rgba(243,181,48,.25); animation: popIn .4s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes popIn { from { opacity: 0; transform: translateX(var(--tx, 0)) scale(.6); } }
.shield-meter { --tx: -50%; }

/* banners in the middle, the 3-2-1, the pause */
.banner { position: fixed; left: 50%; top: 52%; z-index: 30; display: grid; justify-items: center; gap: .3em; width: min(92vw, 1100px); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.banner b { font-family: var(--game); font-weight: 700; font-size: clamp(34px, 6.2vw, 116px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: #FFF6E6; text-shadow: 0 .06em 0 #0B1430, 0 0 .5em rgba(46,196,182,.55); }
.banner span { font-family: var(--game); font-weight: 600; font-size: clamp(16px, 2.1vw, 38px); color: #FFFFFF; text-shadow: 0 2px 0 rgba(4,8,24,.7); padding: .15em .7em; border-radius: var(--r-pill); background: rgba(8,18,48,.7); }
.banner.is-on { animation: bannerIn .55s cubic-bezier(.2,1.4,.4,1) both; }
.banner.is-off { animation: bannerOut .4s ease-in forwards; }
@keyframes bannerIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
@keyframes bannerOut { to { opacity: 0; transform: translate(-50%, -50%) scale(1.08); } }
.count3 { position: fixed; left: 50%; top: 50%; z-index: 31; transform: translate(-50%, -50%); font-family: var(--game); font-weight: 700; font-size: clamp(110px, 24vh, 300px); line-height: 1; color: #FFF6E6; text-shadow: 0 .05em 0 #0B1430, 0 0 .4em rgba(46,196,182,.7); pointer-events: none; }
.count3.is-pop { animation: count .9s cubic-bezier(.2,1.2,.4,1) both; }
.count3.is-go { color: var(--sun); text-shadow: 0 .05em 0 #0B1430, 0 0 .4em rgba(243,181,48,.8); text-transform: uppercase; font-size: clamp(70px, 16vh, 220px); }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
.paused { position: fixed; inset: 0; z-index: 32; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgba(4,8,24,.55); text-align: center; }
.paused b { font-family: var(--game); font-weight: 700; font-size: clamp(48px, 9vw, 150px); color: #FFF6E6; letter-spacing: .06em; }
.paused span { font-weight: 800; font-size: clamp(15px, 1.6vw, 26px); color: #CFDDFF; }

/* ---------- the end ---------- */
.outcome { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: clamp(10px, 2.2vh, 24px); padding: 64px 16px 24px; pointer-events: none; overflow-y: auto; }
.outcome > * { pointer-events: auto; }
.ribbon { position: relative; padding: .2em 1em .26em; border-radius: .3em; background: linear-gradient(180deg, #2CC6B7, #169C90); color: #FFF6E6; font-family: var(--game); font-weight: 700; font-size: clamp(28px, 4.6vw, 88px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-align: center; text-shadow: 0 .05em 0 rgba(6,40,36,.6); box-shadow: 0 .12em 0 #0E6F66, 0 .4em 1em -.2em rgba(0,0,0,.6); opacity: 0; transform: scale(.5) rotate(-3deg); transition: transform .6s cubic-bezier(.2,1.5,.4,1), opacity .3s; }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: .3em; z-index: -1; width: .9em; height: 100%; background: #0E7D73; }
.ribbon::before { left: -.6em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); }
.ribbon::after { right: -.6em; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.ribbon.is-lose { background: linear-gradient(180deg, #FF8A5B, #D9542A); box-shadow: 0 .12em 0 #8F3013, 0 .4em 1em -.2em rgba(0,0,0,.6); }
.ribbon.is-lose::before, .ribbon.is-lose::after { background: #A83E1C; }
.ribbon.is-stopped { background: linear-gradient(180deg, #5C6F99, #3B4B6B); box-shadow: 0 .12em 0 #262F45; font-size: clamp(24px, 4vw, 64px); }
.ribbon.is-stopped::before, .ribbon.is-stopped::after { background: #2B3650; }
.ribbon.is-in { opacity: 1; transform: none; }
.results { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 40px); width: min(1060px, 94vw); padding: clamp(16px, 2.2vw, 34px) clamp(16px, 2.6vw, 40px); border-radius: clamp(20px, 2vw, 32px); background: var(--cream); color: var(--navy); box-shadow: 0 30px 70px -26px rgba(0,0,0,.8); opacity: 0; transform: translateY(40px); transition: transform .6s cubic-bezier(.2,1.2,.4,1), opacity .4s; }
.results.is-in { opacity: 1; transform: none; }
.res-top h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--game); font-weight: 700; font-size: clamp(18px, 2vw, 32px); text-transform: uppercase; letter-spacing: .02em; }
.res-top h2 svg { width: 1.3em; height: 1.3em; }
.top-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.top-list li { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 12px; padding: 4px 12px; border-radius: 16px; font-family: var(--game); font-weight: 600; font-size: clamp(16px, 1.75vw, 30px); }
.top-list li > i { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--sea); color: #FFFFFF; font-style: normal; font-size: .8em; font-weight: 700; }
.top-list li.r1 { background: #FCE7B8; }
.top-list li.r1 > i { background: var(--sun); }
.top-list li.r3 > i { background: var(--orange); }
.top-list li.r5 > i { background: var(--navy); }
.top-list li.is-none { display: block; color: #5A6A8E; font-size: 18px; }
.tl-dot { width: .55em; height: .55em; border-radius: 50%; }
.tl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-crown { width: 1.2em; height: 1.2em; }
.top-list li:not(.r1) { grid-template-columns: auto auto 1fr auto; }
#allBtn { color: var(--sea-d); }
.res-side { display: grid; align-content: start; gap: 16px; border-left: 2px solid rgba(11,20,48,.08); padding-left: clamp(14px, 2.4vw, 40px); }
.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.award { display: grid; justify-items: center; gap: 4px; text-align: center; animation: awardIn .6s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--d) + .3s); }
@keyframes awardIn { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
.award-medal svg { width: clamp(56px, 6vw, 100px); height: auto; display: block; }
.award-name { margin-top: -10px; padding: 3px 12px; border-radius: 8px; background: var(--sea); color: #FFFFFF; font-family: var(--game); font-weight: 600; font-size: clamp(12px, 1.15vw, 18px); box-shadow: 0 3px 0 rgba(11,20,48,.2); }
.aw-accuracy .award-name { background: var(--orange); }
.aw-spelling .award-name { background: var(--sun); color: var(--navy); }
.aw-revenge .award-name { background: #8B5CF6; }
.award-who { display: inline-flex; align-items: center; gap: 6px; font-family: var(--game); font-weight: 700; font-size: clamp(15px, 1.5vw, 24px); }
.award-who i { width: .6em; height: .6em; border-radius: 50%; }
.award small { font-weight: 800; color: #5A6A8E; font-size: 13px; }
.hard h3 { margin: 0 0 6px; font-family: var(--game); font-weight: 600; font-size: clamp(15px, 1.4vw, 22px); }
.hard ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.hard li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: baseline; padding: 4px 10px; border-radius: 10px; background: rgba(11,20,48,.05); font-weight: 800; font-size: 15px; }
.hard li b { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--sea-d); }
.hard li small { color: #B4401A; font-weight: 900; }
.hard .btn-soft { background: rgba(11,20,48,.08); color: var(--navy); }
.res-sum { margin: 0; font-weight: 800; font-size: 15px; color: #3C4C70; }
.res-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; opacity: 0; transform: translateY(20px); transition: transform .5s .15s, opacity .4s .15s; }
.res-actions.is-in { opacity: 1; transform: none; }
.on-dark { color: var(--star); border-color: rgba(255,255,255,.4); }
.on-dark:hover { background: rgba(255,255,255,.1); }

/* everyone's results */
.sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4,8,24,.7); }
.sheet-in { width: min(720px, 100%); max-height: 86vh; overflow: auto; padding: 18px 20px; border-radius: 24px; background: #101A3A; }
.all-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-weight: 800; font-size: 15px; }
.all-table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #9FB2DA; padding: 6px 8px; }
.all-table td { padding: 7px 8px; border-top: 1px solid rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.all-table td i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }

/* the teacher's dock */
.dock { position: fixed; right: clamp(10px, 1.4vw, 24px); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 35; display: flex; gap: 8px; transition: opacity .4s; }
.dock-btn { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill); background: rgba(8,18,48,.78); color: var(--star); font-weight: 900; font-size: 14px; cursor: pointer; }
.dock-btn:hover { background: rgba(26,44,96,.95); }
.dock-btn svg { width: 22px; height: 22px; }
.dock-btn.is-armed { background: #C2410C; border-color: #FF9E85; }
.dock-btn .i-play, .is-paused .dock-btn .i-pause { display: none; }
.is-paused .dock-btn .i-play { display: inline; }
.dock-btn .i-off, .is-mute .dock-btn .i-on { display: none; }
.is-mute .dock-btn .i-off { display: inline; }
.is-lobby #pauseBtn, .is-lobby #moreBtn, .is-lobby #stopBtn, .is-end #pauseBtn, .is-end #moreBtn, .is-end #stopBtn, .is-intro #pauseBtn, .is-intro #moreBtn { display: none; }
.is-idle.is-fight .dock { opacity: .2; }
.is-idle.is-fight { cursor: none; }
.link-lost { position: fixed; top: 12px; left: 50%; z-index: 60; transform: translateX(-50%); margin: 0; padding: 8px 18px; border-radius: var(--r-pill); background: #B4401A; color: #FFFFFF; font-weight: 900; font-size: 14px; }

/* a screen standing up (a phone or a tall board): the join card above the globe */
@media (max-aspect-ratio: 9/10) {
  .lobby { width: auto; right: 0; padding: 64px 16px 0; justify-content: flex-start; gap: 12px; }
  .join-code { font-size: clamp(54px, 18vw, 120px); }
  .join-qr { width: clamp(84px, 24vw, 150px); }
  .join-head p { font-size: 16px; } .join-head b { font-size: 22px; }
  .lobby-count { font-size: 20px; }
  .go-btn { font-size: 26px; }
  .lobby-bar { left: 16px; right: 16px; max-width: none; bottom: 76px; justify-content: center; }
  .dock { bottom: 14px; }
  .hud-top { width: calc(100vw - 150px); left: 16px; transform: none; }
  .hud-time { justify-content: flex-start; font-size: 20px; }
  .feed { display: none; }
  .results { grid-template-columns: 1fr; }
  .res-side { border-left: 0; padding-left: 0; }
}
@media (max-height: 520px) and (min-aspect-ratio: 9/10) {
  .lobby { padding-top: 54px; padding-bottom: 64px; gap: 8px; }
  .join-code { font-size: clamp(44px, 8vw, 120px); }
}
@media (prefers-reduced-motion: reduce) {
  .join-rocket, .go-btn:not(:disabled), .vignette.is-on { animation: none; }
}