/* Kick! - aplexotools.com/kick. Self-contained: local fonts and icons, no external requests.
   Motion: the script puts `calm` on <html> when effects should be trimmed (Motion = Calm, or Auto on a device
   that asks for less motion). Cast bars, cooldowns and health are driven from the engine every frame by the
   script with transforms only, so they always move. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('fonts/sora-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #0a0910; --surface: #14121c; --surface-2: #1a1826; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #f2f0f8; --muted: #a8a4b9; --dim: #716d82;
  --purple: #a335ee; --orange: #ff8000; --pink: #e268a8; --gold: #e5cc80; --red: #f43f5e; --teal: #2dd4bf; --blue: #0070dd; --green: #1eff00;
  --parse: linear-gradient(90deg, var(--purple), var(--pink) 55%, var(--gold));
  --display: Sora, Inter, system-ui, sans-serif; --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1); --bounce: cubic-bezier(.34,1.56,.64,1);
  /* the WoW cast-bar language */
  --cast-a: #ffd56a; --cast-b: #f0a020; --cast-c: #b86f05;
  --chan-a: #7ef0a0; --chan-b: #2fbf63; --chan-c: #176f39;
  --shield-a: #a9adb8; --shield-b: #6b6f7a; --shield-c: #3c3f48;
  --interrupted: #d8352f;
  --cls: #fff468; --cls-rgb: 255 244 104;
  --fire: #ff7a2a; --frost: #5ec8ff; --arcane: #c56cff; --shadow: #9b6dff; --nature: #7fd13b;
  --top-h: 56px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { margin: 0; color: var(--text); font: 15px/1.5 var(--font); overflow: hidden; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 8px; }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
kbd { font: 600 11px var(--font); letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
.lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.link-btn { background: none; border: 0; padding: 0; color: var(--pink); font-weight: 600; font-size: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ---------- stage ---------- */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0b0a12; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage canvas.off { display: none; }
.plates { position: absolute; inset: 0; pointer-events: none; }
.fct { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--flash, #fff); }
.flash.go { animation: flash .35s ease-out both; }
@keyframes flash { 0% { opacity: .26; } 100% { opacity: 0; } }
.vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at center, transparent 50%, rgba(200,20,30,.55) 100%); }
.vignette.low { opacity: 1; animation: heartbeat 1.1s ease-in-out infinite; }
.vignette.cc { opacity: 1; background: radial-gradient(ellipse at center, transparent 45%, var(--ccv, rgba(200,160,255,.5)) 100%); animation: none; }
@keyframes heartbeat { 0%, 100% { opacity: .55; } 30% { opacity: 1; } }
html.calm .vignette.low { animation: none; opacity: .8; }
html.calm .flash.go { animation-name: flash-calm; }
@keyframes flash-calm { 0% { opacity: .22; } 100% { opacity: 0; } }
body.s-start .stage { filter: saturate(.8) brightness(.55); }
body.s-over .stage { filter: saturate(.6) brightness(.5); }

/* ---------- nameplates ---------- */
.plate { position: absolute; left: 0; top: 0; width: 180px; pointer-events: auto; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; padding: 6px 4px 36px; margin: -6px -4px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: center; -webkit-tap-highlight-color: transparent; transition: opacity .35s; }
.plate.gone { opacity: 0; pointer-events: none; }
.plate:focus-visible { outline-offset: -2px; }
.plate-name { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 12.5px/1.2 var(--font); color: #ffd9a8; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.plate-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plate.boss .plate-name { font-size: 14px; color: #ffbe6e; letter-spacing: .01em; }
.plate-name .aura { width: 16px; height: 16px; border-radius: 3px; border: 1px solid #000; display: none; }
.plate.hasted .plate-name .aura { display: block; box-shadow: 0 0 6px #ff5a2a; }
.plate kbd { position: absolute; left: -6px; top: -4px; z-index: 2; font: 700 12px var(--display); padding: 2px 7px; border-radius: 7px; background: rgba(8,7,13,.92); border-color: rgba(255,255,255,.35); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6); }
html.no-slotkeys .plate kbd, html.touch .plate kbd { display: none; }
.plate.hover .plate-hp, .plate.hover .castbar { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 2px rgba(220,240,255,.75), 0 0 14px rgba(200,230,255,.5); }
.plate.hover .plate-name { color: #fff; }
.plate.hover kbd { border-color: #fff; }
.plate-hp { position: relative; height: 7px; border-radius: 2px; background: #1a171f; border: 1px solid rgba(0,0,0,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.09); overflow: hidden; }
.plate-hp i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(180deg, #ff6b6b, #c81e1e 60%, #8a1010); }
.plate.target .plate-hp { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 10px rgba(255,255,255,.25); }
.plate.target .plate-name { color: #fff; }
.plate.locked .plate-hp i { filter: grayscale(.4) brightness(.8); }
.castbar { position: absolute; left: 4px; right: 4px; top: calc(100% - 32px); height: 22px; margin-left: 24px; border-radius: 2px; background: #141219; border: 1px solid rgba(0,0,0,.95); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 4px 14px -4px rgba(0,0,0,.9); opacity: 0; overflow: visible; }
.castbar.on { opacity: 1; }
.castbar .cb-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); border-radius: 1px; background: linear-gradient(180deg, var(--cast-a), var(--cast-b) 55%, var(--cast-c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.castbar .cb-spark { position: absolute; left: 0; top: -7px; width: 14px; height: 36px; margin-left: -7px; pointer-events: none; opacity: .95; background: radial-gradient(ellipse 45% 50% at 50% 50%, #fff 0%, rgba(255,255,255,.75) 35%, rgba(255,230,160,.25) 60%, transparent 75%); mix-blend-mode: screen; }
.castbar .cb-icon { position: absolute; left: -25px; top: -2px; width: 24px; height: 24px; border: 1px solid #000; background: #000; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.castbar .cb-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.castbar .cb-name, .castbar .cb-time { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font: 600 11.5px var(--font); color: #fff; text-shadow: 0 1px 1px #000, 0 0 4px rgba(0,0,0,.9); white-space: nowrap; pointer-events: none; }
.castbar .cb-name { left: 6px; right: 34px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 20px; }
.castbar .cb-time { right: 5px; font-variant-numeric: tabular-nums; font-size: 11px; }
.castbar.channel .cb-fill { background: linear-gradient(180deg, var(--chan-a), var(--chan-b) 55%, var(--chan-c)); transform-origin: left center; }
.castbar.shield { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.castbar.shield .cb-fill { background: linear-gradient(180deg, var(--shield-a), var(--shield-b) 55%, var(--shield-c)); }
.castbar.shield .cb-spark { opacity: .45; }
.castbar.shield .cb-name { color: #e6e8ee; }
.castbar.shield .cb-icon { border-color: #d7dae3; box-shadow: 0 0 0 1px #000, 0 0 8px rgba(255,255,255,.25); }
.castbar.shield .cb-icon::before { content: ""; position: absolute; inset: -8px -7px -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 44'%3E%3Cpath d='M20 2 4 8v13c0 10 7 17 16 21 9-4 16-11 16-21V8z' fill='none' stroke='%23e4e7ef' stroke-width='3.2' stroke-linejoin='round'/%3E%3Cpath d='M20 2 4 8v13c0 10 7 17 16 21 9-4 16-11 16-21V8z' fill='none' stroke='%23000' stroke-opacity='.8' stroke-width='5.5' stroke-linejoin='round'/%3E%3Cpath d='M20 2 4 8v13c0 10 7 17 16 21 9-4 16-11 16-21V8z' fill='none' stroke='%23e4e7ef' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
/* heavy: the big uninterruptible attack that only Stop answers. Red, framed, impossible to confuse with the calm grey shield. */
.castbar.heavy { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff3b3b, 0 0 16px rgba(255,40,40,.55); animation: heavy-pulse .6s ease-in-out infinite alternate; }
.castbar.heavy .cb-fill { background: linear-gradient(180deg, #ff8a7a, #e0261e 55%, #7a0c0c); }
.castbar.heavy .cb-icon { border-color: #ff5a5a; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255,60,60,.7); }
.castbar.heavy .cb-icon::after { content: "!"; position: absolute; left: -9px; top: -10px; width: 16px; height: 16px; border-radius: 50%; background: #ff2a2a; color: #fff; font: 800 12px/16px var(--display); text-align: center; box-shadow: 0 0 0 2px #000; }
.castbar.heavy .cb-name { color: #fff; font-weight: 700; }
@keyframes heavy-pulse { from { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff3b3b, 0 0 10px rgba(255,40,40,.4); } to { box-shadow: 0 0 0 1px #000, 0 0 0 2px #ff7b6b, 0 0 22px rgba(255,60,60,.8); } }
html.calm .castbar.heavy { animation: none; }
.plate.heavy .plate-name { color: #ff8a8a; }
.plate.soon .plate-hp { box-shadow: 0 0 0 1px rgba(255,80,80,.6), 0 0 10px rgba(255,40,40,.4); animation: soon-pulse .5s ease-in-out infinite alternate; }
.plate.soon .plate-name::after { content: "winding up"; margin-left: 6px; font: 700 10px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #ff8a8a; }
@keyframes soon-pulse { to { box-shadow: 0 0 0 2px rgba(255,80,80,.9), 0 0 16px rgba(255,40,40,.7); } }
html.calm .plate.soon .plate-hp { animation: none; }
/* the Stop window marked on the first heavy cast bar: press while the spark is inside the green zone */
.castbar .cb-win { position: absolute; top: -3px; bottom: -3px; left: var(--wl, 0%); width: var(--ww, 0%); display: none; border-left: 2px solid #9dffb0; border-right: 2px solid #9dffb0; background: rgba(120,255,140,.22); pointer-events: none; }
.castbar.heavy.win .cb-win { display: block; }
.castbar.heavy.win .cb-win::after { content: "STOP"; position: absolute; left: 50%; top: -14px; translate: -50% 0; font: 800 9px var(--display); letter-spacing: .1em; color: #9dffb0; text-shadow: 0 1px 2px #000; }
.plate-name .buff { width: 16px; height: 16px; border-radius: 3px; border: 1px solid #6fd36f; box-shadow: 0 0 6px rgba(110,220,110,.6); display: none; }
.plate.buffed .plate-name .buff { display: block; animation: buff-in .3s var(--bounce); }
@keyframes buff-in { from { transform: scale(.4); } }
.castbar.done .cb-fill { transform: scaleX(1) !important; background: linear-gradient(180deg, #ff6a5e, var(--interrupted) 55%, #8f1a14); }
.castbar.done .cb-spark { display: none; }
.castbar.done .cb-time { display: none; }
.castbar.done .cb-name { right: 6px; text-align: center; font-weight: 700; letter-spacing: .02em; }
.castbar.landed .cb-fill { transform: scaleX(1) !important; filter: brightness(1.5); }
.castbar.fade { transition: opacity .35s; opacity: 0; }
.castbar.pop { animation: cb-pop .3s var(--ease); }
@keyframes cb-pop { 0% { transform: scale(1.06); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
html.calm .castbar.pop { animation: none; }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--top-h) + var(--sat) + 4px) max(14px, var(--sar)) calc(14px + var(--sab)) max(14px, var(--sal)); }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; }
.hbox { display: flex; flex-direction: column; min-width: 0; }
.hbox.score b { font: 800 clamp(26px, 4vw, 38px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff6d6, #ffd166 55%, #e59b1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.hbox.score .target-line { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: 600 11px var(--font); color: var(--muted); text-shadow: 0 1px 2px #000; white-space: nowrap; max-width: 36vw; overflow: hidden; text-overflow: ellipsis; }
.hbox.score .target-line::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--gold); flex: none; }
.hbox.score .target-line.passed { color: #8cff8c; }
.hbox.score .target-line.passed::before { border-bottom-color: #8cff8c; transform: rotate(180deg); }
.hbox.pull { align-items: center; text-align: center; }
.hbox.pull b { font: 700 15px var(--display); color: #fff; text-shadow: 0 1px 2px #000; }
.hbox.pull small { color: var(--muted); font-size: 12px; text-shadow: 0 1px 2px #000; }
.hbox.combo { align-items: flex-end; text-align: right; }
.hbox.combo b { font: 800 clamp(26px, 4vw, 38px)/1 var(--display); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 18px rgba(255,255,255,.15); transform-origin: right center; transform: scale(var(--cs, 1)); transition: transform .12s var(--bounce), color .3s; font-variant-numeric: tabular-nums; }
.hbox.combo em { font: 700 13px var(--display); font-style: normal; color: var(--muted); text-shadow: 0 1px 2px #000; }
.hbox.combo.c1 b { color: #fff; } .hbox.combo.c2 b { color: #ffe9a8; } .hbox.combo.c3 b { color: #ffcf5a; } .hbox.combo.c4 b { color: #ff9f2a; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 22px rgba(255,140,0,.6); } .hbox.combo.c5 b { color: #ff5db1; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 26px rgba(255,80,170,.8); }
.hbox.combo.c4 em, .hbox.combo.c5 em { color: #ffd166; }
.hbox.combo.c5 em { color: #ff8ccf; }
.hbox.combo.hit b { animation: combo-hit .25s var(--bounce); }
@keyframes combo-hit { 0% { transform: scale(calc(var(--cs, 1) * 1.35)); } 100% { transform: scale(var(--cs, 1)); } }
.hbox.combo.broke b { animation: combo-broke .5s var(--ease); color: #ff5d6c; }
@keyframes combo-broke { 0% { transform: scale(1.1) translateX(-4px); } 25% { transform: translateX(5px); } 50% { transform: translateX(-4px); } 100% { transform: none; } }

.banner { position: absolute; left: 0; right: 0; top: calc(var(--top-h) + var(--sat) + 44px); text-align: center; pointer-events: none; padding: 0 16px; }
.banner b { display: block; font: 800 clamp(22px, 4.4vw, 38px)/1.1 var(--display); color: #ffd100; letter-spacing: -.01em; text-shadow: 0 2px 0 #4a2c00, 0 0 2px #000, 0 0 24px rgba(255,170,0,.45), 2px 2px 0 rgba(0,0,0,.8); text-wrap: balance; }
.banner span { display: block; font: 600 clamp(12px, 1.5vw, 15px) var(--font); color: #fff; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.8); margin-top: 2px; }
.banner.boss b { color: #ff4a3d; text-shadow: 0 2px 0 #3a0000, 0 0 2px #000, 0 0 30px rgba(255,40,40,.6), 2px 2px 0 rgba(0,0,0,.8); }
.banner.good b { color: #8cff8c; text-shadow: 0 2px 0 #0b3a0b, 0 0 2px #000, 0 0 30px rgba(80,255,80,.5), 2px 2px 0 rgba(0,0,0,.8); }
.banner.show { animation: banner 2.4s var(--ease) both; }
@keyframes banner { 0% { opacity: 0; transform: scale(1.35); } 10% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-22px); } }
html.calm .banner.show { animation-name: banner-calm; }
@keyframes banner-calm { 0% { opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

.ui-error { position: absolute; left: 0; right: 0; top: calc(var(--top-h) + var(--sat) + 62px); text-align: center; font: 600 clamp(14px, 1.9vw, 18px) var(--font); color: #ff2a2a; text-shadow: 0 1px 1px #000, 0 0 6px rgba(0,0,0,.9); opacity: 0; pointer-events: none; padding: 0 16px; }
.ui-error.show { animation: uierr 1.4s ease-out both; }
@keyframes uierr { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }

.milestone { position: absolute; left: 50%; top: 18%; translate: -50% -50%; pointer-events: none; padding: 8px 20px; border-radius: 999px; font: 800 clamp(18px, 3vw, 26px) var(--display); color: #fff; white-space: nowrap; background: linear-gradient(135deg, #ff8000, #e268a8); box-shadow: 0 20px 50px -14px rgba(255,128,0,.8), inset 0 1px 0 rgba(255,255,255,.3); animation: milestone 1.5s var(--ease) both; }
.milestone.gold { background: linear-gradient(135deg, #e5cc80, #ff8000); }
.milestone small { display: block; font: 600 12px var(--font); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
@keyframes milestone { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: scale(1.08); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-36px) scale(.95); } }
html.calm .milestone { animation-name: banner-calm; }

/* loss of control (WoW's big "Polymorphed" frame) */
.loc { position: absolute; left: 50%; top: 48%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; animation: loc-in .3s var(--bounce) both; }
.loc-icon { position: relative; width: 72px; height: 72px; border-radius: 10px; border: 2px solid #ff3b3b; background: #000; overflow: hidden; box-shadow: 0 0 0 2px #000, 0 0 30px rgba(255,40,40,.6); }
.loc-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loc-icon i { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.75) var(--sw, 0%), transparent 0); }
.loc b { font: 800 clamp(20px, 3.4vw, 30px) var(--display); color: #ff4a4a; text-shadow: 0 2px 0 #3a0000, 0 0 2px #000, 2px 2px 0 rgba(0,0,0,.8), 0 0 20px rgba(255,0,0,.5); letter-spacing: -.01em; }
.loc span { font: 700 18px var(--display); color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
@keyframes loc-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* pull timer */
.countdown { position: absolute; left: 50%; top: 40%; translate: -50% -50%; text-align: center; pointer-events: none; }
.countdown b { display: block; font: 800 clamp(64px, 14vw, 120px)/1 var(--display); color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 40px rgba(255,210,80,.5); }
.countdown b.tick { animation: cd-tick .9s var(--ease) both; }
@keyframes cd-tick { 0% { transform: scale(1.5); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { opacity: .9; } }
.countdown span { display: block; font: 700 clamp(14px, 2vw, 18px) var(--display); letter-spacing: .18em; text-transform: uppercase; color: #ffd166; text-shadow: 0 1px 2px #000; margin-top: 4px; }
.countdown i { display: block; width: min(60vw, 320px); height: 10px; margin: 14px auto 0; border-radius: 4px; background: #1a171f; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; position: relative; }
.countdown i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 1)); background: linear-gradient(180deg, #ff9d5c, #ff5a2a 60%, #b8321a); }
.hint-line { position: absolute; left: 0; right: 0; bottom: calc(200px + var(--sab)); text-align: center; margin: 0; padding: 0 16px; font: 600 13px var(--font); color: #ffe6b8; text-shadow: 0 1px 2px #000; pointer-events: none; }

/* the Stop window: boss-mod style bar above the action bar */
.stopwin { position: absolute; left: 50%; bottom: calc(132px + var(--sab)); translate: -50% 0; display: flex; align-items: center; gap: 10px; min-width: min(360px, 80vw); padding: 8px 12px 8px 8px; border-radius: 12px; background: rgba(10,8,14,.88); border: 1px solid rgba(255,80,80,.5); box-shadow: 0 10px 30px -10px rgba(0,0,0,.9), 0 0 0 1px #000; pointer-events: none; animation: loc-in .25s var(--bounce) both; }
.stopwin img { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(255,80,80,.6); }
.stopwin-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.stopwin b { font: 700 13px var(--display); color: #ffb3a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stopwin-bar { display: block; position: relative; height: 10px; border-radius: 3px; background: #1a1016; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
.stopwin-bar em { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(180deg, #ffb46a, #ff7a2a 55%, #a33d0c); }
.stopwin span { font: 700 15px var(--display); color: #fff; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.stopwin.now { border-color: rgba(120,255,140,.7); box-shadow: 0 10px 30px -10px rgba(0,0,0,.9), 0 0 0 1px #000, 0 0 24px rgba(80,255,120,.35); }
.stopwin.now b { color: #9dffb0; }
.stopwin.now .stopwin-bar em { background: linear-gradient(180deg, #a6ffb8, #2fd05a 55%, #137a2a); }
.stopwin.nocd { border-color: rgba(255,80,80,.7); }
.stopwin.nocd b { color: #ff8a8a; }
.ab.stop.soon { box-shadow: 0 0 0 2px #ff9a4a, 0 0 0 3px #000, 0 0 18px rgba(255,140,40,.6); }
.ab.stop.call { box-shadow: 0 0 0 2px #6dff8a, 0 0 0 3px #000, 0 0 24px rgba(80,255,120,.8); animation: call .35s ease-in-out infinite alternate; }
@keyframes call { from { transform: scale(1); } to { transform: scale(1.07); } }
html.calm .ab.stop.call { animation: none; }
.bigtimer { position: relative; width: clamp(120px, 14vw, 170px); height: 14px; margin-top: 6px; border-radius: 3px; background: rgba(10,8,14,.8); border: 1px solid #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
.bigtimer i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(180deg, #ff9a6a, #d9442a 55%, #7a1a0c); opacity: .85; }
.bigtimer span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 6px; font: 600 10.5px var(--font); color: #fff; text-shadow: 0 1px 1px #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.banner.warn b { font-size: clamp(18px, 3.4vw, 30px); color: #ff5a4a; text-shadow: 0 2px 0 #3a0000, 0 0 2px #000, 0 0 24px rgba(255,40,40,.55), 2px 2px 0 rgba(0,0,0,.8); }
.hud-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; padding-bottom: 18px; }
.unit { display: flex; align-items: center; gap: 10px; pointer-events: auto; min-width: 0; }
.portrait { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2a2638, #110f18 72%); box-shadow: 0 0 0 3px var(--cls), 0 0 0 5px rgba(0,0,0,.6), 0 8px 20px -6px rgb(var(--cls-rgb) / .7); font: 800 24px var(--display); color: var(--cls); overflow: hidden; }
.portrait svg { width: 100%; height: 100%; display: block; }
.portrait.cc { animation: portrait-pop .4s var(--bounce); }
@keyframes portrait-pop { 0% { transform: scale(.7) rotate(-15deg); } 100% { transform: none; } }
.unit-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.unit-text b { font: 700 13.5px var(--display); color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.hpbar { position: relative; width: clamp(140px, 18vw, 220px); height: 18px; border-radius: 3px; background: #1a171f; border: 1px solid rgba(0,0,0,.95); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 14px -4px rgba(0,0,0,.9); overflow: hidden; }
.hpbar i { position: absolute; inset: 0; transform-origin: left; }
#hpGhost { background: rgba(255,255,255,.6); transition: transform .5s ease-out .12s; }
#hpFill { background: linear-gradient(180deg, #6ff07d, #27b240 55%, #137a28); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.unit.low #hpFill { background: linear-gradient(180deg, #ff8a7a, #e03a2a 55%, #8a1010); }
.unit.low .hpbar { animation: hp-low .9s ease-in-out infinite; }
@keyframes hp-low { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,80,80,.4); } 50% { box-shadow: 0 0 0 2px rgba(255,80,80,.9), 0 0 16px rgba(255,40,40,.6); } }
html.calm .unit.low .hpbar { animation: none; box-shadow: 0 0 0 2px rgba(255,80,80,.8); }
.hpbar span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11.5px var(--font); color: #fff; text-shadow: 0 1px 1px #000; font-variant-numeric: tabular-nums; }
.unit.heal .hpbar { animation: hp-heal .5s ease-out; }
@keyframes hp-heal { 0% { box-shadow: 0 0 0 2px #8cff8c, 0 0 18px #4bff6a; } 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.12); } }

.actionbar { display: flex; gap: 30px; justify-self: center; pointer-events: auto; }
.ab { position: relative; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 10px; background: #0b0a10; box-shadow: 0 0 0 2px #2a2535, 0 0 0 3px #000, 0 10px 24px -8px rgba(0,0,0,.9); overflow: visible; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .08s; }
.ab img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; pointer-events: none; }
.ab:active img, .ab.pressed img { filter: brightness(.7); }
.ab:active { transform: scale(.95); }
.ab .cd { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: conic-gradient(rgba(0,0,0,.72) var(--sw, 0%), transparent 0); }
.ab .cd-num { position: absolute; inset: 0; display: grid; place-items: center; font: 700 22px var(--display); color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000; pointer-events: none; font-variant-numeric: tabular-nums; }
.ab kbd { position: absolute; top: 2px; right: 2px; font-size: 10px; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.75); border-color: rgba(255,255,255,.2); pointer-events: none; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab .ab-name { position: absolute; left: 50%; top: calc(100% + 6px); translate: -50% 0; font: 600 11px var(--font); color: var(--muted); white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; pointer-events: none; }
.ab.ready::after { content: ""; position: absolute; inset: -4px; border-radius: 13px; pointer-events: none; border: 2px solid #ffd54a; box-shadow: 0 0 14px #ffb300, inset 0 0 10px rgba(255,200,60,.6); animation: proc .5s ease-out both; }
@keyframes proc { 0% { opacity: 1; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1); } }
.ab.cc img { filter: grayscale(1) brightness(.5); }
.ab.cc::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(200,30,30,.25); pointer-events: none; }
.ab.kick { box-shadow: 0 0 0 2px rgb(var(--cls-rgb) / .55), 0 0 0 3px #000, 0 10px 24px -8px rgba(0,0,0,.9); }
.ab.stop { box-shadow: 0 0 0 2px #3a3350, 0 0 0 3px #000, 0 10px 24px -8px rgba(0,0,0,.9); }
.leave { justify-self: end; align-self: start; pointer-events: auto; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: var(--muted); font-size: 12px; font-weight: 600; opacity: .7; }
.leave:hover { opacity: 1; color: #fff; }
body.shaking .hud .hud-top { transition: none; }

/* floating combat text */
.fct span { position: absolute; left: 0; top: 0; translate: var(--x) var(--y); transform: translate(-50%, -50%); white-space: nowrap; font: 800 17px var(--display); color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000, 1px 1px 0 #000; animation: fct 1s ease-out both; will-change: transform, opacity; letter-spacing: -.01em; }
.fct .pts { color: #fff; }
.fct .good { color: #ffe08a; font-size: 20px; }
.fct .clutch { color: #ffd100; font-size: 26px; text-shadow: 0 2px 0 #4a2c00, 0 0 2px #000, 0 0 18px rgba(255,180,0,.7); animation-name: fct-big; animation-duration: 1.3s; }
.fct .quick { color: #8cffb0; font-size: 22px; animation-name: fct-big; }
.fct .dmg { color: #ff4a4a; font-size: 22px; animation-name: fct-dmg; }
.fct .crit { font-size: 30px; }
.fct .heal { color: #7dff8a; }
.fct .waste { color: #c7c7c7; font-size: 16px; font-weight: 700; }
.fct .immune { color: #e6e6e6; font-size: 20px; letter-spacing: .04em; }
.fct .stop { color: var(--cls); font-size: 22px; animation-name: fct-big; }
.fct .flaw { color: #ffd100; font-size: 28px; animation-name: fct-big; animation-duration: 1.6s; text-shadow: 0 2px 0 #4a2c00, 0 0 2px #000, 0 0 24px rgba(255,180,0,.8); }
.fct .cc { color: #d8a8ff; font-size: 18px; }
.fct .haste { color: #ff8a5a; font-size: 18px; }
@keyframes fct { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 25% { transform: translate(-50%, -55%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(.95); } }
@keyframes fct-big { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 30% { transform: translate(-50%, -55%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -170%) scale(1); } }
@keyframes fct-dmg { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 20% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, 60%) scale(.9); } }
html.calm .fct span { animation-name: fct-calm !important; }
@keyframes fct-calm { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%); } }

/* ---------- header ---------- */
.top { position: fixed; left: 0; right: 0; top: 0; z-index: 30; /* above the start and result screens (20), below the dialogs (50): its buttons can be clicked on every screen */ display: flex; align-items: center; gap: 10px; height: calc(var(--top-h) + var(--sat)); padding: var(--sat) max(14px, var(--sar)) 0 max(14px, var(--sal)); background: linear-gradient(180deg, rgba(10,9,16,.85), rgba(10,9,16,0)); pointer-events: none; }
.top > * { pointer-events: auto; }
/* the bar is see-through at rest; while the start or the result screen is scrolled under it (.solid, set by the script)
   a dark strip fades in behind its buttons, so the text and pills that pass under it do not show through them */
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,9,16,.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 14px 22px -16px rgba(0,0,0,.9); opacity: 0; transition: opacity .18s; }
.top.solid::before { opacity: 1; }
body.s-game .top { opacity: .55; transition: opacity .3s; }
body.s-game .top:hover { opacity: 1; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -10px rgba(226,104,168,.8); }
.crumb { color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; }
.crumb .sep { color: var(--dim); margin: 0 10px 0 2px; }
.top-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(10,9,16,.55); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,.09); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn .off { display: none; }
.icon-btn[aria-pressed="true"] .on { display: none; }
.icon-btn[aria-pressed="true"] .off { display: block; }
.discord-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: #5865F2; color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(88,101,242,.9); transition: filter .15s, transform .15s var(--ease); }
.discord-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.discord-btn .ic { width: 20px; height: 20px; stroke: none; }
.discord-btn.big { height: 44px; padding: 0 18px; font-size: 14.5px; }
.avatar-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); background: #2a2440; overflow: hidden; cursor: pointer; }
.avatar-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tag-unranked { font: 600 11px var(--font); letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,200,80,.5); color: #ffd166; background: rgba(255,170,0,.1); }
@media (max-width: 640px) { .brand span, .crumb { display: none; } .top-actions { gap: 4px; } .icon-btn { width: 36px; height: 36px; } .discord-btn span { display: none; } .discord-btn { padding: 0 10px; } }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.screen.start { padding: calc(var(--top-h) + var(--sat) + 8px) max(16px, var(--sar)) calc(24px + var(--sab)) max(16px, var(--sal)); display: flex; flex-direction: column; background: radial-gradient(900px 560px at 15% -10%, rgba(163,53,238,.25), transparent 62%), radial-gradient(700px 480px at 100% 10%, rgba(226,104,168,.14), transparent 60%), rgba(8,7,13,.45); animation: fade .3s both; }
@keyframes fade { from { opacity: 0; } }
.start-inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; width: min(100%, 1040px); align-items: start; margin: auto; flex: none; }
.start-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.logo-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.logo { margin: 0; font: 800 clamp(48px, 9vw, 82px)/.95 var(--display); letter-spacing: -.05em; }
.logo-word { background: linear-gradient(180deg, #fff6d6 0%, #ffd166 45%, #ff8a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); display: inline-block; transform: skewX(-6deg); }
.logo-word i { font-style: normal; background: linear-gradient(180deg, #ffb6dd, #e268a8 60%, #a335ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { margin: 0; color: var(--muted); font-size: clamp(13.5px, 1.5vw, 15.5px); max-width: 48ch; text-wrap: balance; }

.howto { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(229,204,128,.3); background: linear-gradient(135deg, rgba(229,204,128,.1), transparent 60%), rgba(0,0,0,.3); }
.howto-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.howto-bars.three { grid-template-columns: 1fr 1fr 1fr; }
.plate.demo .castbar.heavy { animation: none; }
.plate.demo .castbar.heavy .cb-fill { transform: scaleX(.5); } .plate.demo .castbar.heavy .cb-spark { left: 50%; }
.plate.demo p b { color: var(--text); }
.plate.demo { position: relative; transform: none; width: auto; padding: 0 0 0 26px; margin: 0; cursor: default; pointer-events: none; display: flex; flex-direction: column; }
.plate.demo .plate-name { justify-content: flex-start; margin-bottom: 4px; font-size: 12px; }
.plate.demo .castbar { position: relative; top: auto; left: 0; right: auto; margin-left: 0; opacity: 1; width: min(100%, 210px); }
.plate.demo .castbar .cb-fill { transform: scaleX(.62); }
.plate.demo .castbar .cb-spark { left: 62%; }
.plate.demo .castbar.shield .cb-fill { transform: scaleX(.7); }
.plate.demo .castbar.shield .cb-spark { left: 70%; }
.plate.demo p { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.howto-keys { margin: 0; font-size: 12.5px; color: var(--muted); }
.howto-keys kbd { margin: 0 2px; }

.pick { display: flex; flex-direction: column; gap: 10px; }
.pick-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pick-head b { font: 700 18px var(--display); color: var(--cls); }
.pick-head small { color: var(--muted); font-size: 13px; }
.classes { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; }
.cls { position: relative; aspect-ratio: 1; padding: 0; border-radius: 12px; border: 2px solid rgb(var(--c-rgb) / .35); background: #0b0a10; overflow: hidden; transition: transform .15s var(--bounce), border-color .15s, box-shadow .15s; }
.cls img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 8px; object-fit: cover; filter: saturate(.7) brightness(.8); transition: filter .15s; pointer-events: none; }
.cls::after { content: ""; position: absolute; left: 50%; bottom: 3px; translate: -50% 0; width: 55%; height: 3px; border-radius: 2px; background: var(--c); opacity: .9; }
.cls:hover { transform: translateY(-2px); border-color: rgb(var(--c-rgb) / .7); }
.cls:hover img { filter: none; }
.cls[aria-checked="true"] { border-color: var(--c); box-shadow: 0 0 0 1px #000, 0 0 22px -4px var(--c); transform: scale(1.08); z-index: 1; }
.cls[aria-checked="true"] img { filter: none; }

/* controls strip: the keys, clickable to rebind */
.controls { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.25); }
.controls-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.keychip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 12.5px var(--font); cursor: pointer; transition: background .15s, color .15s; }
.keychip:hover { background: rgba(255,255,255,.06); color: var(--text); }
.keychip kbd { font-size: 12px; padding: 3px 8px; border-radius: 7px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; min-width: 28px; text-align: center; transition: background .15s, border-color .15s; }
.keychip:hover kbd { border-color: var(--pink); background: rgba(226,104,168,.15); }
.keychip.listening kbd { border-color: var(--pink); color: var(--pink); animation: listen 1s ease-in-out infinite; }
.keychip.unbound kbd { color: #ff7a7a; border-color: rgba(255,90,90,.5); }
.keychip .kgroup { display: inline-flex; gap: 3px; }
.controls-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 12.5px; color: var(--muted); }
.opt { display: inline-flex; align-items: center; gap: 8px; }
.opt select { padding: 5px 28px 5px 10px; font-size: 12.5px; border-radius: 9px; background-position: right 8px center; }
.opt.check { cursor: pointer; position: relative; }
.opt.check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt.check .box { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); display: inline-grid; place-items: center; flex: none; }
.opt.check input:checked + .box { background: linear-gradient(135deg, #b23ef0, #e0659d); border-color: transparent; }
.opt.check input:checked + .box::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.opt.check input:focus-visible + .box { outline: 2px solid var(--pink); outline-offset: 2px; }
.opt.wide { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 500; }
.controls-touch { margin: 0; font-size: 12.5px; color: var(--muted); }
.bind-bar { position: fixed; left: 50%; top: calc(var(--top-h) + var(--sat) + 10px); translate: -50% 0; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border-radius: 14px; background: #f2f0f8; color: #0a0910; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9), 0 0 0 3px rgba(226,104,168,.5); text-align: center; max-width: calc(100vw - 32px); }
.bind-bar b { font: 700 15px var(--display); }
.bind-bar span { font-size: 12.5px; color: #4a4560; }
.bind-bar kbd { color: #0a0910; background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.25); }
.bind-bar .link-btn { color: #b23ef0; }

.start-row { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid var(--line); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
.seg span small { display: block; font-size: 11px; font-weight: 500; color: var(--dim); white-space: normal; }
.seg input:checked + span { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.seg input:checked + span small { color: var(--muted); }
.seg input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.seg input:hover:not(:checked) + span { color: var(--text); background: rgba(255,255,255,.05); }
.seg input:disabled + span { opacity: .45; }
.seg.small span { padding: 6px 10px; font-size: 12.5px; }
.seg.mode { flex: 1 1 300px; }
.seg span b { font-weight: inherit; }
.seg.mode label.done span b { color: var(--gold); }
.seg.mode label.done span small { color: var(--muted); }
.seg.mode span { padding: 8px 10px; }
.play { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 10px 22px; border: 0; border-radius: 16px; color: #0b0a10; font: 800 24px var(--display); letter-spacing: -.01em; background: linear-gradient(135deg, color-mix(in srgb, var(--cls) 80%, white 20%), var(--cls) 50%, color-mix(in srgb, var(--cls) 70%, black 30%)); box-shadow: 0 14px 34px -12px rgb(var(--cls-rgb) / .9), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .15s var(--ease), filter .15s; }
.play:hover { transform: translateY(-2px); filter: brightness(1.08); }
.play:active { transform: translateY(0) scale(.98); }
.play[disabled] { opacity: .6; cursor: progress; transform: none; }
.play-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.25); display: grid; place-items: center; }
.play-icon svg { width: 20px; height: 20px; }
.play-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.play-text small { font: 600 11px var(--font); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.offline-note { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,200,80,.4); background: rgba(255,170,0,.1); color: #ffe2a8; font-size: 13px; }

.start-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.side-card { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 50%), rgba(14,12,20,.75); }
.side-card h2 { margin: 0 0 10px; font: 600 11.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.side-card h2 .link-btn { text-transform: none; letter-spacing: 0; font-size: 12px; }
.bests-list, .preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bests-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 13px; }
.bests-list li span { color: var(--muted); }
.bests-list li b { font: 700 15px var(--display); font-variant-numeric: tabular-nums; }
.bests-list li small { color: var(--dim); font-size: 12px; min-width: 38px; text-align: right; }
.bests-list li small.rank { color: var(--gold); font-weight: 700; }
.bests-list .empty, .preview-list .empty { color: var(--dim); font-size: 13px; padding: 6px 2px; display: block; }
.preview-list li { display: grid; grid-template-columns: 22px 28px 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 5px 6px; border-radius: 10px; }
.preview-list li.me { background: rgb(var(--cls-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--cls-rgb) / .35); }
.preview-list .rk { color: var(--dim); font-weight: 700; font-size: 12px; text-align: right; }
.preview-list img { width: 26px; height: 26px; border-radius: 50%; background: #2a2440; }
.preview-list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.preview-list .nm i { font-style: normal; display: block; font-size: 11px; font-weight: 500; }
.preview-list .sc { font: 700 14px var(--display); font-variant-numeric: tabular-nums; }
.side-note { margin: 10px 0 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.rival { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(229,204,128,.3); background: rgba(229,204,128,.07); font-size: 13px; color: var(--muted); }
.rival img { width: 28px; height: 28px; border-radius: 50%; background: #2a2440; flex: none; }
.rival b { color: var(--text); }
.rival i { font-style: normal; color: var(--gold); font-weight: 700; font-family: var(--display); }
.over-card .passed { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(140,255,140,.35); background: linear-gradient(135deg, rgba(140,255,140,.12), transparent 70%), rgba(0,0,0,.2); animation: pop .5s var(--ease) both .15s; }
.over-card .passed .passed-title { font: 800 clamp(18px, 3vw, 24px) var(--display); color: #8cff8c; text-shadow: 0 1px 0 #0b3a0b, 0 0 18px rgba(80,255,80,.4); letter-spacing: -.01em; }
.over-card .passed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.over-card .passed li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.over-card .passed li img { width: 26px; height: 26px; border-radius: 50%; background: #2a2440; }
.over-card .passed li b { color: var(--text); }
.over-card .passed small { color: var(--dim); font-size: 12px; }
.over-rival { margin: 0 0 12px; font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.over-rival img { width: 22px; height: 22px; border-radius: 50%; background: #2a2440; }
.over-rival b { color: var(--gold); font-family: var(--display); }
/* after the daily fight: today's board under the result (the try is spent, the board is what there is to look at) */
.over-daily { margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(94,200,255,.25); background: rgba(94,200,255,.06); text-align: left; }
.over-daily h3 { margin: 0 0 6px; font: 700 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #9fdcff; }
.over-daily p { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.over-daily .preview-list { gap: 2px; }

/* over */
.screen.over { display: grid; place-items: center; padding: calc(var(--top-h) + var(--sat)) 16px calc(16px + var(--sab)); background: radial-gradient(60% 55% at 50% 40%, rgb(var(--cls-rgb) / .18), transparent 70%), rgba(6,5,10,.6); animation: fade .35s both; }
.over-card { position: relative; width: min(100%, 580px); padding: 26px 24px 20px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), rgba(16,14,24,.92); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); animation: pop .5s var(--ease) both; }
.over-card.is-record { box-shadow: 0 40px 100px -30px rgb(var(--cls-rgb) / .7), 0 0 0 1px rgba(0,0,0,.4), 0 0 0 2px rgb(var(--cls-rgb) / .35); }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.94); } 60% { transform: translateY(-3px) scale(1.01); } to { opacity: 1; transform: none; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin: 0 0 8px; }
.eyebrow::before, .eyebrow::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--parse); }
.over-title { margin: 0 0 6px; font: 800 clamp(26px, 5vw, 36px)/1.1 var(--display); letter-spacing: -.03em; }
.over-score { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 8px; }
.over-score b { font: 800 clamp(48px, 10vw, 76px)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff6d6, #ffd166 55%, #e59b1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.record { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: 700 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #0b0a10; background: linear-gradient(135deg, #ffe08a, #ff8000); box-shadow: 0 10px 24px -10px rgba(255,140,0,.9); animation: record-in .6s var(--bounce) both .3s; }
@keyframes record-in { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: none; } }
.over-places { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.over-places b { color: var(--gold); font-family: var(--display); }
.claim { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 14px; padding: 14px; border-radius: 16px; border: 1px solid rgba(88,101,242,.5); background: rgba(88,101,242,.12); }
.claim p { margin: 0; font-size: 13.5px; color: #dfe2ff; }
.claim p b { color: #fff; font-family: var(--display); font-size: 15px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.stats div { padding: 8px 6px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.stats b { display: block; font: 700 18px var(--display); font-variant-numeric: tabular-nums; }
.stats span { display: block; font-size: 11px; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.stats div.bad b { color: #ff7a7a; }
.stats div.gold b { color: var(--gold); }
.over-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255,170,0,.1); border: 1px solid rgba(255,200,80,.35); color: #ffe2a8; font-size: 12.5px; }
.over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.share-line { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px dashed var(--line-2); color: var(--muted); font-size: 12.5px; user-select: all; -webkit-user-select: all; word-break: break-word; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease), filter .15s; }
.btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); }
.btn.primary { border-color: transparent; color: #0b0a10; background: linear-gradient(135deg, color-mix(in srgb, var(--cls) 80%, white 20%), var(--cls) 50%, color-mix(in srgb, var(--cls) 70%, black 30%)); box-shadow: 0 10px 28px -12px rgb(var(--cls-rgb) / .9), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary kbd { color: inherit; border-color: rgba(0,0,0,.3); background: rgba(0,0,0,.15); }
.btn.primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn.big { padding: 13px 22px; font-size: 16px; border-radius: 14px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255,255,255,.05); }
.btn.danger { border-color: rgba(244,63,94,.4); color: #ffb4c0; }
.btn.danger:hover { background: rgba(244,63,94,.15); border-color: var(--red); }
.btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.win-actions.left { justify-content: flex-start; }

/* ---------- dialogs ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; animation: fade .2s both; background: rgba(6,5,10,.7); }
.dlg { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px 24px 22px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--surface); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); animation: pop .4s var(--ease) both; outline: none; scrollbar-width: thin; }
.dlg.wide { width: min(100%, 640px); }
.close-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.close-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
.dlg-title { margin: 0 0 14px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; }
html.calm .overlay, html.calm .dlg, html.calm .screen, html.calm .over-card, html.calm .record { animation: none; }

/* leaderboards */
.board-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
select { appearance: none; -webkit-appearance: none; padding: 8px 32px 8px 12px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0,0,0,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a4b9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; max-width: 100%; }
select option { background: #1a1826; color: var(--text); }
.board-note { margin: 0 0 8px; color: var(--dim); font-size: 12.5px; min-height: 1.2em; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.board li { display: grid; grid-template-columns: 30px 32px minmax(0, 1fr) 76px 52px 52px; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; font-size: 13.5px; }
.board li.head { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding-bottom: 2px; }
.board li.head span { text-align: right; } .board li.head span:nth-child(3) { text-align: left; }
.board li:not(.head):nth-child(even) { background: rgba(255,255,255,.025); }
.board li.me { background: rgb(var(--cls-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--cls-rgb) / .4); }
.board li.gap { display: block; text-align: center; color: var(--dim); padding: 2px; letter-spacing: .3em; }
.board .rk { font: 700 13px var(--display); color: var(--dim); text-align: right; }
.board li:nth-child(2) .rk, .board .rk.top1 { color: #ffd166; } .board .rk.top2 { color: #d9dbe3; } .board .rk.top3 { color: #d98f5a; }
.board img { width: 30px; height: 30px; border-radius: 50%; background: #2a2440; display: block; }
.board .nm { min-width: 0; display: flex; flex-direction: column; }
.board .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board .nm i { font-style: normal; font-size: 11.5px; font-weight: 600; }
.board .sc { font: 700 15px var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.board .n { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 13px; }
.board .empty { display: block; color: var(--dim); padding: 14px 6px; text-align: center; }
@media (max-width: 480px) { .board li { grid-template-columns: 24px 28px minmax(0, 1fr) 64px 40px; } .board li > :nth-child(6) { display: none; } .board img { width: 26px; height: 26px; } }

/* settings */
.settings-body { display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; flex-direction: column; gap: 8px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lbl2, .row-head label { font-weight: 600; font-size: 14px; }
.lbl-hint { color: var(--dim); font-size: 12px; }
.row-note { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.keyrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 13px; }
.keybtn { min-width: 64px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(0,0,0,.35); color: #fff; font: 600 12.5px var(--font); cursor: pointer; text-align: center; }
.keybtn:hover { border-color: rgba(255,255,255,.3); }
.keybtn.listening { border-color: var(--pink); color: var(--pink); animation: listen 1s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 3px rgba(226,104,168,.3); } }
input[type="range"] { width: 100%; accent-color: var(--pink); }
.toggles { gap: 12px; }
.switch { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch .track { flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--line-2); position: relative; transition: background .2s, border-color .2s; margin-top: 1px; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: linear-gradient(135deg, #b23ef0, #e0659d); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--pink); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 1px; }
.switch-text small { color: var(--dim); font-size: 12px; font-weight: 400; }

/* help */
.help { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--muted); }
.help h3 { margin: 0 0 4px; font: 700 14.5px var(--display); color: var(--text); }
.help p { margin: 0; line-height: 1.5; }
.help b { color: var(--text); }
.help-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.help-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.sw { flex: none; width: 34px; height: 12px; margin-top: 5px; border-radius: 2px; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.sw.cast { background: linear-gradient(180deg, var(--cast-a), var(--cast-b) 55%, var(--cast-c)); }
.sw.channel { background: linear-gradient(180deg, var(--chan-a), var(--chan-b) 55%, var(--chan-c)); }
.sw.shield { background: linear-gradient(180deg, var(--shield-a), var(--shield-b) 55%, var(--shield-c)); }
.sw.heavy { background: linear-gradient(180deg, #ff8a7a, #e0261e 55%, #7a0c0c); box-shadow: 0 0 0 1px #ff3b3b; }
.sw.cc { background: linear-gradient(180deg, #e7c1ff, #a657e8); }
.sw.haste { background: linear-gradient(180deg, #ffb18a, #ff5a2a); }

/* account */
.account-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.account-row img { width: 48px; height: 48px; border-radius: 50%; background: #2a2440; }
.account-row b { display: block; font: 700 16px var(--display); }
.account-row small { color: var(--dim); font-size: 12px; }
.confirm { margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px solid rgba(244,63,94,.4); background: rgba(244,63,94,.08); }
.confirm p { margin: 0; font-size: 13.5px; color: #ffd4db; }

/* ---------- live rail (start screen) and ladder (fight): wide screens only ----------
   Both are display:none unless the viewport is at least 1500 px wide and 700 px tall, so narrower screens keep
   their exact layout. The rail is the third grid column; the main and bests columns keep their sizes. */
.rail, .ladder { display: none; }
@media (min-width: 1500px) and (min-height: 700px) {
  .start:not(.no-rail) .start-inner { grid-template-columns: minmax(0, 1fr) 320px 340px; width: min(100%, 1404px); }
  .start:not(.no-rail) .start-side .board-preview { display: none; }   /* the rail shows the same five names, larger */
  .rail:not([hidden]) { display: flex; }
  .ladder:not([hidden]) { display: block; }
}
.rail { flex-direction: column; gap: 10px; min-width: 0; align-self: start; max-height: calc(100dvh - var(--top-h) - var(--sat) - 40px); padding: 14px 16px 12px; border-radius: 20px; border: 1px solid rgba(229,204,128,.22); background: linear-gradient(180deg, rgba(229,204,128,.07), transparent 30%), rgba(12,10,18,.82); box-shadow: 0 30px 80px -40px rgba(0,0,0,.9); animation: fade .4s both; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rail-live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rail-live i { width: 8px; height: 8px; border-radius: 50%; background: #5bff8a; box-shadow: 0 0 0 0 rgba(91,255,138,.6); animation: live 1.8s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(91,255,138,.6); } 70% { box-shadow: 0 0 0 7px rgba(91,255,138,0); } 100% { box-shadow: 0 0 0 0 rgba(91,255,138,0); } }
html.calm .rail-live i { animation: none; }
.rail-activity { font-size: 11.5px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail-activity b { color: var(--muted); font-weight: 600; }
.rail-activity.bump b { animation: act-bump .5s var(--bounce); display: inline-block; }
@keyframes act-bump { 40% { transform: scale(1.3); color: #fff; } }
/* hero: the week's number one */
.rail-hero { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(229,204,128,.35); background: linear-gradient(135deg, rgba(229,204,128,.16), rgba(255,128,0,.06) 50%, transparent), rgba(0,0,0,.25); padding: 12px 14px 12px; }
.rail-hero .crown { display: flex; align-items: center; gap: 6px; font: 700 10.5px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; white-space: nowrap; }
.rail-hero .crown svg { width: 14px; height: 14px; flex: none; }
.rail-hero .who .clsline small { color: var(--dim); font-weight: 500; }
.rail-hero .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rail-hero .who img.av { width: 44px; height: 44px; border-radius: 50%; background: #2a2440; box-shadow: 0 0 0 2px var(--c, var(--gold)), 0 0 0 4px rgba(0,0,0,.5); flex: none; }
.rail-hero .who .nm { min-width: 0; flex: 1; }
.rail-hero .who b { display: block; font: 800 18px/1.1 var(--display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-hero .who .clsline { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--c, var(--muted)); }
.rail-hero .who .clsline img { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--c, var(--line-2)); }
.rail-hero .num { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; }
.rail-hero .num b { font: 800 30px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff6d6, #ffd166 55%, #e59b1a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rail-hero .num small { color: var(--muted); font-size: 12px; }
.rail-hero .beat { margin-top: 10px; width: 100%; justify-content: center; padding: 9px 12px; font-size: 13.5px; }
.rail-hero .season { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.rail-hero .season b { color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-hero .season img { width: 16px; height: 16px; border-radius: 50%; }
.rail-hero.new-leader::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,230,150,.45) 50%, transparent 80%); transform: translateX(-120%); animation: sweep 1.3s var(--ease) .1s 2; pointer-events: none; }
@keyframes sweep { to { transform: translateX(120%); } }
.rail-hero.new-leader { animation: hero-pop .7s var(--bounce); box-shadow: 0 0 0 1px rgba(255,220,120,.6), 0 0 36px -6px rgba(255,200,80,.7); }
@keyframes hero-pop { 0% { transform: scale(.96); } 50% { transform: scale(1.03); } 100% { transform: none; } }
.rail-hero .ribbon { position: absolute; top: 10px; right: -34px; transform: rotate(32deg); padding: 3px 40px; font: 800 10px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #0b0a10; background: linear-gradient(90deg, #ffe08a, #ff8000); box-shadow: 0 4px 12px rgba(0,0,0,.5); animation: ribbon-in .5s var(--bounce) both; }
@keyframes ribbon-in { from { opacity: 0; transform: rotate(32deg) translateY(-20px); } }
.rail-hero .took { margin: 6px 0 0; font-size: 11.5px; color: #ffd9a8; }
html.calm .rail-hero.new-leader, html.calm .rail-hero.new-leader::before, html.calm .rail-hero .ribbon { animation: none; }
/* empty states */
.rail-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 16px; border: 1px dashed rgba(229,204,128,.35); background: rgba(229,204,128,.05); }
.rail-empty b { font: 800 17px/1.2 var(--display); letter-spacing: -.02em; }
.rail-empty p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.rail-empty .beat { padding: 8px 14px; font-size: 13px; }
/* week list: rows two to five */
.rail-week, .rail-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rail-row { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; position: relative; }
.rail-row:hover { background: rgba(255,255,255,.06); }
.rail-row:hover .sc::after { content: "beat it"; margin-left: 8px; font: 700 10px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.rail-row .rk { font: 700 12px var(--display); color: var(--dim); text-align: right; }
.rail-row img.av { width: 28px; height: 28px; border-radius: 50%; background: #2a2440; box-shadow: 0 0 0 1.5px var(--c, transparent); }
.rail-row .nm { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rail-row .nm b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.rail-row .nm i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--c, var(--dim)); }
.rail-row .sc { font: 700 14px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-row.me { background: rgb(var(--cls-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--cls-rgb) / .35); }
.rail-row.up::after { content: "▲"; position: absolute; right: 6px; top: -4px; font-size: 9px; color: #8cff8c; animation: fct-calm 2.4s both; }
.rail-row.moved { animation: row-flash 1.2s var(--ease); }
@keyframes row-flash { 0%, 30% { background: rgba(229,204,128,.18); } 100% { background: transparent; } }
/* daily leader */
.rail-daily { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(94,200,255,.25); background: rgba(94,200,255,.06); min-height: 46px; }
.rail-daily .tag { font: 700 10px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #9fdcff; white-space: nowrap; }
.rail-daily img.av { width: 26px; height: 26px; border-radius: 50%; background: #2a2440; box-shadow: 0 0 0 1.5px var(--c, transparent); }
.rail-daily .nm { min-width: 0; flex: 1; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-daily .nm b { color: var(--text); font-weight: 600; }
.rail-daily .sc { font: 700 13px var(--display); font-variant-numeric: tabular-nums; }
.rail-daily .go { padding: 5px 9px; font-size: 11.5px; border-radius: 8px; }
.rail-daily.none .nm { color: var(--dim); }
/* latest runs feed */
.rail-feedwrap { display: flex; flex-direction: column; min-height: 0; flex: 0 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent); padding-bottom: 14px; }
.rail-sub { margin: 2px 0 6px; font: 600 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rail-feed { gap: 2px; }
.rail-feed .empty { font-size: 12.5px; color: var(--dim); padding: 6px 8px; }
.feed-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.feed-row:hover { background: rgba(255,255,255,.06); }
.feed-row img.av { width: 24px; height: 24px; border-radius: 50%; background: #2a2440; box-shadow: 0 0 0 1.5px var(--c, transparent); }
.feed-row .txt { min-width: 0; font-size: 12.5px; color: var(--muted); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feed-row .txt b { color: var(--text); font-weight: 600; }
.feed-row .txt .pts { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--display); }
.feed-row .txt .pb { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 5px; font: 800 9.5px/16px var(--display); letter-spacing: .08em; color: #0b0a10; background: linear-gradient(90deg, #ffe08a, #ff8000); vertical-align: 1px; }
.feed-row .txt .daily { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 5px; font: 700 9.5px/16px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #9fdcff; border: 1px solid rgba(159,220,255,.5); vertical-align: 1px; }
.feed-row .ago { font-size: 11px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 2px; }
.feed-row img.av { margin-top: 1px; }
.feed-row.fresh { animation: feed-in .6s var(--ease) both, row-flash 2s var(--ease) both; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-10px); } }
html.calm .feed-row.fresh, html.calm .rail-row.moved { animation: none; }
.rail-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.rail-foot b { color: var(--text); font-family: var(--display); }
.rail .btn.primary.beat { color: #0b0a10; }

/* the fight ladder: quiet, at the right edge, beside the right-most figure and below the nameplates */
.ladder { position: absolute; right: 14px; top: 46%; width: 190px; pointer-events: none; padding: 6px 4px; border-radius: 12px; background: rgba(8,7,13,.55); border: 1px solid rgba(255,255,255,.07); }
.ladder ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ladder li { display: grid; grid-template-columns: 26px 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 8px; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.ladder li .rk { font: 700 11px var(--display); color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.ladder li img { width: 20px; height: 20px; border-radius: 50%; background: #2a2440; }
.ladder li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.ladder li .sc { font: 700 11.5px var(--display); font-variant-numeric: tabular-nums; color: var(--muted); }
.ladder li.below { opacity: .55; }
.ladder li.below .nm { color: var(--muted); }
.ladder li.me { background: rgb(var(--cls-rgb) / .16); box-shadow: inset 0 0 0 1px rgb(var(--cls-rgb) / .5); color: #fff; }
.ladder li.me .rk { color: var(--cls); }
.ladder li.me .nm { color: #fff; }
.ladder li.me .sc { color: var(--cls); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.ladder li.me .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--cls); display: grid; place-items: center; font: 800 10px var(--display); color: #0b0a10; }
.ladder li.gap { justify-content: center; display: flex; color: var(--dim); font-size: 10px; letter-spacing: .3em; padding: 0; }
.ladder li.just { animation: ladder-passed 1.4s var(--ease) both; }
@keyframes ladder-passed { 0% { background: rgba(140,255,140,.3); transform: translateY(-100%); } 35% { transform: none; } 100% { background: transparent; } }
.ladder li.me.climb { animation: ladder-climb .45s var(--bounce) both; }
@keyframes ladder-climb { from { transform: translateY(100%); } }
.ladder.lead li.me { box-shadow: inset 0 0 0 1px #ffd166, 0 0 14px rgba(255,209,102,.35); }
html.calm .ladder li.just, html.calm .ladder li.me.climb { animation: none; }
@media (min-width: 1700px) { .ladder { width: 220px; right: 20px; } .ladder li { font-size: 12.5px; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sab)); translate: -50% 0; z-index: 60; padding: 10px 16px; border-radius: 12px; background: #f2f0f8; color: #0a0910; font-weight: 600; font-size: 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: none; }

/* ---------- a start screen that gets out of the way ----------
   The how-to is for the first visit (it leaves after the first finished run and stays on the ? button); the keys are one
   quiet line that opens; on a phone the mode and Pull are a bar at the bottom edge, on the first screen and always in reach. */
.howto-more .link-btn { white-space: nowrap; }
.controls { padding: 0; border-color: transparent; background: none; gap: 0; }
.controls.open { padding: 8px 12px 10px; border-color: var(--line); background: rgba(0,0,0,.25); gap: 8px; }
.keys-line { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; width: 100%; padding: 3px 2px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 12.5px var(--font); text-align: left; cursor: pointer; }
.keys-line:hover { color: var(--text); }
.keys-line:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.keys-line kbd { margin: 0 2px; }
.keys-line-more { color: var(--pink); font-weight: 600; white-space: nowrap; }
.keys-line-more::after { content: " \25BE"; }
.controls.open .keys-line-more::after { content: " \25B4"; }
.controls-more { display: flex; flex-direction: column; gap: 8px; }
.play-text small { white-space: nowrap; }
.seg.mode { flex: 1.7 1 340px; }   /* three chips: Endless, Daily fight, Training */
.seg.mode span small { text-wrap: balance; }
@media (max-width: 640px) {
  .screen.start { padding-bottom: calc(92px + var(--sab)); }
  .start-row { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; flex-wrap: nowrap; gap: 8px; padding: 8px max(10px, var(--sar)) calc(8px + var(--sab)) max(10px, var(--sal)); background: linear-gradient(180deg, rgba(10,9,16,.86), rgba(10,9,16,.97)); border-top: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .start-row .seg.mode { flex: 1 1 0; min-width: 0; }
  .start-row .seg.mode span { display: grid; align-content: center; height: 100%; padding: 6px 4px; font-size: 12.5px; white-space: normal; line-height: 1.15; }
  .start-row .seg.mode span small { display: none; }
  .start-row .play { flex: 0 0 auto; min-width: 136px; min-height: 58px; padding: 8px 14px; gap: 8px; font-size: 21px; }
  .start-row .play-icon { width: 28px; height: 28px; }
  .start-row .play-text small { font-size: 9.5px; letter-spacing: .06em; }
  body.s-start .toast { bottom: calc(96px + var(--sab)); }
}

/* ---------- death recap ----------
   The over screen opens with what killed you and what would have saved you: the last seconds as a strip (above the line
   what landed, below it what you pressed), the last hits with the fact that let each through, and one line of advice.
   Then three numbers (pull, score, best combo) and the place; the other numbers open on a tap. */
.recap { margin: 4px 0 14px; padding: 11px 13px 10px; border-radius: 16px; border: 1px solid rgba(255,90,90,.34); background: linear-gradient(180deg, rgba(255,60,60,.11), transparent 70%), rgba(0,0,0,.3); text-align: left; }
.recap h3 { margin: 0 0 9px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 700 11px var(--display); letter-spacing: .13em; text-transform: uppercase; color: #ff9d9d; }
.recap h3 .who { color: var(--who, #fff); }
.recap h3 small { font: 500 10.5px var(--font); letter-spacing: 0; text-transform: none; color: var(--dim); }
.recap-strip { position: relative; height: 70px; margin: 0 2px 8px 30px; }
.rs-row { position: absolute; left: 0; right: 0; }
.rs-row.hits { top: 0; height: 30px; }
.rs-row.presses { top: 36px; height: 18px; }
.rs-row::before { position: absolute; right: 100%; top: 50%; translate: -6px -50%; width: 24px; text-align: right; font: 600 8.5px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.rs-row.hits::before { content: "hit"; }
.rs-row.presses::before { content: "you"; }
.rs-m { position: absolute; top: 0; translate: -100% 0; display: block; font-style: normal; animation: rs-pop .34s var(--bounce) both; animation-delay: calc(var(--i, 0) * 60ms + 250ms); }
@keyframes rs-pop { from { opacity: 0; scale: .3; } }
.rs-row.hits .rs-m img { display: block; width: 28px; height: 28px; border-radius: 6px; border: 1.5px solid #ff6a6a; background: #1a1420; }
.rs-row.hits .rs-m b { position: absolute; right: -4px; bottom: -5px; padding: 0 3px; border-radius: 5px; background: rgba(150,18,18,.94); color: #fff; font: 800 10px/1.3 var(--display); }
.rs-row.hits .rs-m.killing img { border-color: #fff; box-shadow: 0 0 0 2px #ff3b3b, 0 0 14px rgba(255,50,50,.8); animation: rs-kill 1.2s ease-in-out 3 .8s; }
@keyframes rs-kill { 50% { box-shadow: 0 0 0 2px #ff3b3b, 0 0 26px 4px rgba(255,60,60,.95); } }
.rs-row.presses .rs-m img { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #6ee787; background: #1a1420; }
.rs-row.presses .rs-m.bad img { border-color: #ff7a7a; filter: grayscale(.7) brightness(.7); }
.rs-row.presses .rs-m.bad::after { content: "\2715"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 12px/1 var(--font); color: #ff6a6a; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.rs-row.presses .rs-m.no img { border-color: #888; filter: grayscale(1) brightness(.55); }
.rs-axis { position: absolute; left: 0; right: 0; top: 58px; height: 12px; border-top: 1px solid var(--line-2); }
.rs-axis i { position: absolute; top: 3px; translate: -50% 0; font: 500 9.5px/1 var(--font); font-style: normal; color: var(--dim); white-space: nowrap; }
.rs-axis i::before { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 4px; background: var(--line-2); }
.rs-axis i.end { translate: -100% 0; color: #ff9d9d; }
.rs-axis i.end::before { left: 100%; background: #ff6a6a; }
.recap-hits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.recap-hits li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.035); animation: recap-rise .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 300ms); }
.recap-hits li.killing { background: rgba(255,70,70,.13); box-shadow: inset 0 0 0 1px rgba(255,90,90,.42); }
.recap-hits img { width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); }
.rh-head { margin: 0; font-size: 13px; color: var(--text); }
.rh-head b.dmg { color: #ff8a8a; font-family: var(--display); }
.rh-head span { margin-left: 7px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.recap-hits li.killing .rh-head span { color: #ff9d9d; font-weight: 600; }
.rh-why { margin: 2px 0 0; font-size: 12.5px; line-height: 1.42; color: var(--muted); }
.recap-fix { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(110,231,135,.32); background: rgba(110,231,135,.08); color: #d6f5dc; font-size: 12.5px; line-height: 1.42; }
.recap-fix b { color: #8cff9c; }
@keyframes recap-rise { from { opacity: 0; transform: translateY(8px); } }
html.calm .rs-m, html.calm .recap-hits li, html.calm .rs-row.hits .rs-m.killing img { animation: none; }
.over-heads { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 2px 0 8px; }
.over-heads .over-score { margin: 0; }
.over-heads .head b { display: block; font: 800 clamp(22px, 4.6vw, 30px)/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.over-heads .head.gold b { color: var(--gold); }
.over-heads .head span { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.more-stats { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer; }
.more-stats:hover { color: var(--text); background: rgba(255,255,255,.05); }
.more-stats::after { content: "\25BE"; }
.more-stats[aria-expanded="true"]::after { content: "\25B4"; }
.over-card .stats { grid-template-columns: repeat(4, 1fr); }
/* the way on stays in reach when the card is taller than the screen (a recap, a claim and a daily board can be) */
.over-card > .over-actions:not(.minor) { position: sticky; bottom: 0; z-index: 2; margin: 0 -10px; padding: 8px 10px; border-radius: 14px; background: rgb(16,14,24); }
.over-actions.minor { margin-top: 2px; }
.over-actions.minor .more-stats { margin: 0; padding: 11px 16px; font-size: 14px; }
.over-card .stats { margin: 8px 0 0; }
.claim { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 10px 14px; gap: 8px 14px; }
.claim p { flex: 1 1 240px; text-align: left; }
.claim .discord-btn.big { flex: 0 0 auto; }
.recap-hits li.brief { padding: 4px 8px; grid-template-columns: 22px minmax(0, 1fr); align-items: center; }
.recap-hits li.brief img { width: 22px; height: 22px; }
.recap-hits li.brief .rh-head { font-size: 12.5px; color: var(--muted); }
html.touch .over-actions kbd { display: none; }
@media (max-width: 640px) {
  .over-card { padding-left: 14px; padding-right: 14px; }
  .over-card .stats { grid-template-columns: repeat(3, 1fr); }
  .recap { padding: 10px 10px 9px; }
  .recap-strip { margin-left: 26px; }
  .claim p { text-align: center; }
  .over-card > .over-actions:not(.minor) { flex-wrap: nowrap; margin: 0 -8px; padding: 8px; }
  .over-card > .over-actions:not(.minor) .btn.big { flex: 1 1 auto; padding: 13px 12px; white-space: nowrap; }
  .over-card > .over-actions:not(.minor) .btn { padding: 11px 13px; }
  .over-actions #shareBtn span { display: none; }
}

/* ---------- the training pull ----------
   Six lessons, one kind of cast at a time. The coach says the word and what to do; a dot per lesson fills as it is learned. */
.coach { position: absolute; left: 50%; bottom: calc(204px + var(--sab)); translate: -50% 0; width: min(560px, calc(100% - 28px)); padding: 10px 14px 9px; border-radius: 16px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,30,.94), rgba(10,8,14,.94)); border: 1px solid rgba(229,204,128,.5); box-shadow: 0 18px 50px -18px rgba(0,0,0,.9), 0 0 0 1px #000; }
.coach.in { animation: coach-in .45s var(--bounce) both; }
@keyframes coach-in { from { opacity: 0; scale: .86; } }
.coach.again { border-color: rgba(255,176,0,.75); }
.coach.k-heavy { border-color: rgba(255,59,59,.65); } .coach.k-channel { border-color: rgba(60,220,110,.55); } .coach.k-shield { border-color: rgba(190,190,200,.5); }
.coach-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.coach-step { font: 700 10.5px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.coach b { font: 800 clamp(18px, 3vw, 24px)/1.1 var(--display); letter-spacing: -.01em; color: #ffd166; }
.coach.k-shield b { color: #c9ccd6; } .coach.k-channel b { color: #5fe08a; } .coach.k-heavy b { color: #ff7a7a; } .coach.k-cc b { color: #d9a8ff; }
.coach p { margin: 4px 0 6px; font: 500 13.5px/1.4 var(--font); color: var(--text); text-wrap: balance; }
.coach ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 6px; }
.coach ol li { width: 18px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); transition: background .3s; }
.coach ol li.now { background: rgba(255,255,255,.55); } .coach ol li.done { background: #6ee787; }
html.calm .coach.in { animation: none; }
*:has(> .stopwin:not([hidden])) > .coach { bottom: calc(196px + var(--sab)); }
.hud.training .hbox.score > *, .hud.training .hbox.combo em { visibility: hidden; }
.hud.training .hint-line { display: none; }
.train-result { margin: 4px 0 14px; text-align: left; }
.train-result ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.train-result li { display: grid; grid-template-columns: 22px 118px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 13px; color: var(--muted); }
.train-result li i { font-style: normal; font-weight: 800; color: var(--dim); text-align: center; }
.train-result li b { color: var(--text); font-family: var(--display); }
.train-result li.done { background: rgba(110,231,135,.08); box-shadow: inset 0 0 0 1px rgba(110,231,135,.28); }
.train-result li.done i { color: #6ee787; }
.train-result p { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--dim); }
.over.is-training #shareBtn, .over.is-training #overBoardsBtn, .over.is-training #moreStats, .over.is-training #overKeysBtn { display: none; }
.over:not(.is-training) #trainAgainBtn { display: none; }
.train-offer { margin: 0 0 12px; }
.seg.mode label.suggest span { box-shadow: inset 0 0 0 1px rgba(229,204,128,.6); }
.seg.mode label.suggest span b { color: #ffd166; }
@media (max-width: 640px) {
  .coach { bottom: calc(214px + var(--sab)); padding: 8px 10px 8px; }
  *:has(> .stopwin:not([hidden])) > .coach { bottom: calc(214px + var(--sab)); }
  .coach p { font-size: 12.5px; margin: 3px 0 5px; }
  .train-result li { grid-template-columns: 18px minmax(0, 1fr); }
  .train-result li span { grid-column: 2; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .start-inner { grid-template-columns: 1fr; }
  .start-side { flex-direction: row; }
  .start-side .side-card { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 640px) {
  .start-side { flex-direction: column; }
  .classes { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .howto-bars, .howto-bars.three { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .keys { grid-template-columns: 1fr; }
  .hud { padding-left: max(10px, var(--sal)); padding-right: max(10px, var(--sar)); }
  .hud-top { grid-template-columns: 1fr auto 1fr; }
  .hbox.pull small { display: none; }
  .hud-bottom { grid-template-columns: 1fr; grid-template-areas: "unit" "bar"; gap: 10px; }
  .unit { grid-area: unit; justify-self: center; }
  .unit-text b { display: none; }
  .portrait { width: 40px; height: 40px; font-size: 18px; }
  .hpbar { width: min(60vw, 240px); }
  .actionbar { grid-area: bar; width: 100%; justify-content: space-between; }
  .ab { width: 76px; height: 76px; }
  .ab .ab-name { display: none; }
  .ab kbd { display: none; }
  /* between the two thumb buttons, clear of the raid-warning text at the top */
  .leave { position: fixed; top: auto; right: auto; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: rgba(0,0,0,.5); display: none; }
  body.s-game .leave { display: block; }
  .plate-name { font-size: 11.5px; }
  .castbar { height: 20px; }
  .castbar .cb-name { font-size: 10.5px; right: 28px; }
  .castbar .cb-time { font-size: 10px; }
  .fct span { font-size: 15px; }
  .fct .clutch { font-size: 22px; } .fct .flaw { font-size: 22px; } .fct .dmg { font-size: 18px; }
  .banner { top: 20%; }
  .loc-icon { width: 60px; height: 60px; }
  .stopwin { bottom: calc(150px + var(--sab)); min-width: min(300px, 86vw); }
  .bigtimer { width: 110px; }
}
@media (max-height: 540px) {
  :root { --top-h: 44px; }
  .brand img { width: 26px; height: 26px; } .icon-btn { width: 32px; height: 32px; } .discord-btn { height: 32px; }
  .screen.start { padding-top: calc(var(--top-h) + var(--sat) + 4px); }
  .start-main { gap: 10px; }
  .logo { font-size: clamp(34px, 7vh, 52px); }
  .howto { padding: 10px 12px; } .howto-bars { gap: 10px; } .plate.demo p { margin-top: 6px; font-size: 12px; } .howto-bars.three { grid-template-columns: 1fr 1fr 1fr; }
  .cls { border-radius: 9px; } .cls img { border-radius: 6px; }
  .play { min-height: 52px; font-size: 20px; }
  .seg.mode span { padding: 6px 8px; } .seg.mode span small { display: none; }
  .side-card { padding: 12px 14px; }
  .hud-top { gap: 6px; }
  .hbox.score b, .hbox.combo b { font-size: 24px; }
  .ab { width: 52px; height: 52px; } .ab .cd-num { font-size: 18px; } .ab .ab-name { display: none; }
  .portrait { width: 42px; height: 42px; font-size: 18px; } .hpbar { height: 15px; }
  .banner { top: 18%; } .banner b { font-size: clamp(20px, 5vh, 32px); }
  .loc { top: 44%; } .loc-icon { width: 52px; height: 52px; } .loc b { font-size: 20px; }
  .countdown b { font-size: clamp(44px, 16vh, 80px); }
  .over-card { padding: 16px 18px 14px; } .over-score b { font-size: 44px; } .over-score { margin: 0 0 4px; } .stats div { padding: 5px 4px; } .stats b { font-size: 15px; }
  .over-title { font-size: 22px; } .eyebrow { margin-bottom: 4px; }
  .stopwin { bottom: calc(96px + var(--sab)); padding: 5px 10px 5px 6px; }
}
@media (max-width: 640px) and (max-height: 540px) {
  .ab { width: 56px; height: 56px; }
  .hud-bottom { grid-template-columns: auto 1fr; grid-template-areas: "unit bar"; }
  .actionbar { justify-content: flex-end; }
}
@media (hover: none) and (pointer: coarse) {
  .plate { padding-bottom: 44px; }
}

/* the small print at the bottom of the start screen */
.legal { grid-column: 1 / -1; margin: 0; padding: 4px 2px 0; color: var(--dim); font-size: 12px; line-height: 1.5; text-align: center; }
.legal a { color: var(--muted); }
.legal a:hover { color: var(--text); }

/* ---------- leaving the daily fight asks first ----------
   It is the day's one try, so one slip of Esc or one tap on Leave must not end it: the first press only asks (the fight
   goes on meanwhile, nothing pauses), the bar under the question runs out, and a second press before it does leaves.
   It stands above the hint line, over the floor: never over a name plate, whose cast bar must stay readable. */
.leave-ask { position: absolute; left: 50%; bottom: calc(238px + var(--sab)); translate: -50% 0; z-index: 6; box-sizing: border-box; width: max-content; max-width: min(92vw, 440px); margin: 0; padding: 11px 18px 15px; border-radius: 14px; text-align: center; font: 600 13.5px/1.4 var(--font); color: #f3eedf; background: rgba(14,10,18,.95); border: 1px solid rgba(255,209,102,.75); box-shadow: 0 16px 44px -12px #000, 0 0 0 1px #000, 0 0 30px -6px rgba(255,190,80,.6); pointer-events: none; overflow: hidden; animation: leave-ask-in .22s var(--ease) both; }
.leave-ask b { display: block; margin-bottom: 3px; font: 800 17px/1.2 var(--display); letter-spacing: -.01em; color: #ffd166; }
.leave-ask kbd { display: inline-block; margin: 0 2px; padding: 0 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); font: 700 12px var(--font); color: #fff; }
.leave-ask::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #ffd166, #ff9d5c); transform-origin: left; animation: leave-ask-run 3.5s linear both; }
@keyframes leave-ask-in { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes leave-ask-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html.calm .leave-ask { animation: none; }
.leave.armed, .leave.armed:hover { opacity: 1; color: #1a1205; background: #ffd166; border-color: #ffd166; box-shadow: 0 0 0 3px rgba(255,209,102,.3); }

/* ---------- a first visit waits for the server ----------
   A browser that has not fought here yet: the part of the start screen that depends on who is looking (the how-to, the
   mode that is picked) is held back until the server has answered, since the account may have fought on another device.
   The page's head sets first-hold before the first paint and the script takes it away, so nothing flashes and nothing
   jumps: that part comes in together. Should the script never run, it shows by itself after three seconds. */
html.first-hold .start-main > :not(.logo-row) { opacity: 0; pointer-events: none; animation: first-late .3s ease 3s forwards; }
html.first-in .start-main > :not(.logo-row) { animation: first-in .32s ease both; }
@keyframes first-late { from { opacity: 0; } to { opacity: 1; } }
@keyframes first-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.calm.first-in .start-main > :not(.logo-row) { animation: none; }

/* ---------- the over card on a short screen ----------
   The strip already shows the earlier hits (icon, damage, when): on a desktop window too short for the whole card their
   one-line repeats under it are left out, so the killing blow, the advice and the numbers fit without scrolling. */
@media (min-width: 641px) and (max-height: 960px) {
  .recap-hits li.brief { display: none; }
}