/* Kong Empires — UI stylesheet: Bananza-inspired sticker UI (thick dark outline + cream inner ring + hard offset shadow) */

/* ================================================================ tokens (overwritten from KE.PALETTE at init) */
:root {
  --ol: #2a1206; --ol2: #5a2a10; --cream: #fff8e6;
  --banana: #ffd21f; --banana-l: #fff27a; --banana-d: #e08a00; --gold: #ffc61a; --gold-shine: #fff6b0;
  --orange: #ff8a1c; --hot: #ff5a1f; --magenta: #e43f9a; --purple: #7b3fe4; --teal: #18c4b8; --sky: #5fd0ff;
  --leaf: #4fc63a; --leaf-d: #1f7a2a; --storm: #5a1fa8; --storm-glow: #c86bff; --danger: #ff3b3b; --ok: #5fe35a; --water: #2bb8e8;
  --deep: #1462b8; --jungle: #2f9a3a; --white: #fff;
  --lilac: #e5d3e6; --danger-l: #ffb0a5;          /* text tints: mixed from the palette in applyPalette (cream>purple, danger>cream) */
  --night-a: #7a54ea; --night-b: #5631b6; --night-c: #3a1d86; --night-d: #26115e;
  /* derived tints: every colour below is a mix of the palette tokens above (KE.PALETTE, written by applyPalette) */
  --cream-l: color-mix( in srgb, var(--cream) 45%, var(--white) );
  --cream-d: color-mix( in srgb, var(--cream) 80%, var(--banana-d) );
  --grey: color-mix( in srgb, var(--cream) 48%, var(--ol) );
  --storm-l: color-mix( in srgb, var(--storm-glow) 55%, var(--white) );
  --violet: color-mix( in srgb, var(--purple) 86%, var(--magenta) );
  --leaf-l: color-mix( in srgb, var(--leaf) 60%, var(--white) );
  --leaf-dd: color-mix( in srgb, var(--leaf-d) 75%, var(--ol) );
  --danger-d: color-mix( in srgb, var(--danger) 62%, var(--ol) );
  --track: color-mix( in srgb, var(--night-d) 55%, var(--ol) );
  --g-coin: radial-gradient( circle at 35% 30%, var(--white) 0%, color-mix( in srgb, var(--cream) 82%, var(--banana) ) 60%, color-mix( in srgb, var(--cream) 62%, var(--orange) ) 100% );
  --g-coin-gold: radial-gradient( circle at 35% 30%, var(--white), color-mix( in srgb, var(--gold-shine) 70%, var(--banana-l) ) 60%, color-mix( in srgb, var(--gold) 70%, var(--orange) ) );
  --g-keycap: linear-gradient( var(--cream-l), var(--cream-d) );
  --font: 'Arial Black', 'Segoe UI Black', 'Arial Rounded MT Bold', Impact, 'Trebuchet MS', sans-serif;
  --font2: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --s: 1; --fit: 1;
  /* HUD micro-labels never render below ~12 px on screen (the HUD is scaled by --s; narrow windows take it to ~0.76) */
  --lbl: clamp( 14px, calc( 12.2px / var(--s) ), 16px );
  --stk-ring: inset 0 0 0 2.5px var(--cream);
  --stk-base: inset 0 -8px 0 2.5px rgba(16, 4, 40, 0.32);
  --dots: radial-gradient( circle, rgba(255, 255, 255, 0.085) 1.4px, transparent 1.9px ) 0 0 / 9px 9px;
  --g-night: linear-gradient( 172deg, var(--night-a) 0%, var(--night-b) 34%, var(--night-c) 72%, var(--night-d) 100% );
  --g-gold: linear-gradient( 180deg, var(--gold-shine) 0%, color-mix( in srgb, var(--banana) 75%, var(--banana-l) ) 26%, var(--gold) 58%, color-mix( in srgb, var(--orange) 75%, var(--gold) ) 100% );
  --g-teal: linear-gradient( 180deg, color-mix( in srgb, var(--teal) 40%, var(--white) ) 0%, color-mix( in srgb, var(--teal) 85%, var(--white) ) 40%, color-mix( in srgb, var(--teal) 78%, var(--ol) ) 100% );
  --g-mag: linear-gradient( 180deg, color-mix( in srgb, var(--magenta) 50%, var(--white) ) 0%, color-mix( in srgb, var(--magenta) 90%, var(--white) ) 42%, color-mix( in srgb, var(--magenta) 75%, var(--ol) ) 100% );
  --g-red: linear-gradient( 180deg, var(--danger-l) 0%, color-mix( in srgb, var(--danger) 88%, var(--orange) ) 44%, color-mix( in srgb, var(--danger) 72%, var(--ol) ) 100% );
  --g-purple: linear-gradient( 180deg, color-mix( in srgb, var(--storm-glow) 65%, var(--white) ) 0%, color-mix( in srgb, var(--purple) 80%, var(--storm-glow) ) 42%, var(--storm) 100% );
  --g-btn: linear-gradient( 180deg, color-mix( in srgb, var(--night-a) 82%, var(--white) ) 0%, color-mix( in srgb, var(--night-a) 40%, var(--night-b) ) 48%, color-mix( in srgb, var(--night-b) 50%, var(--night-c) ) 100% );
}

/* ================================================================ base */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--track); user-select: none; -webkit-user-select: none; }
body { font-family: var(--font2); color: var(--cream); }
#game { position: fixed; inset: 0; display: block; cursor: default; }
#ui { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; font-family: var(--font); font-weight: 900; color: var(--cream); line-height: 1.1; }
/* Input's sticker cursors follow the pointer over every DOM surface (set by ui.js once Input built them): pointer on panels,
   the grabbing hand on anything clickable */
#ui { cursor: var(--cur-ptr, default); }
#ui .btn, #ui .cell, #ui .so-port, #ui .rb, #ui .rcard, #ui .vol input, #ui [data-act] { cursor: var(--cur-hand, pointer); }
#ui .btn.off, #ui .btn[disabled] { cursor: var(--cur-ptr, default); }
#ui .seed-in { cursor: text; }
#ui [hidden] { display: none !important; }
/* copy for one input only: .k-only ( keyboard and mouse ) and .t-only ( touch: css/touch.css swaps them on body.ke-touch ) */
#ui .t-only { display: none; }
#ui img { -webkit-user-drag: none; }
#ui[data-mode="menu"] .hud, #ui[data-mode="menu"] #minimap-wrap, #ui[data-mode="menu"] .banner-lane,
#ui[data-mode="menu"] .vignette, #ui[data-mode="menu"] .defeat { display: none !important; }

/* outlined cartoon text: stroke painted under the fill + hard drop */
.ol { -webkit-text-stroke: var(--sw, 4px) var(--ol); paint-order: stroke fill; text-shadow: 0 var(--sd, 3px) 0 var(--ol); }
/* subtitle sticker: heavy outlined type on its own dark pill (the pill is the wrapper, so the text always sits on it),
   legible on any backdrop: victory sunburst, defeat card */
.subpill {
  display: inline-block; padding: 8px 18px 9px; border: 3px solid var(--ol); border-radius: 14px; background: color-mix( in srgb, var(--track) 82%, transparent );
  box-shadow: inset 0 0 0 1.5px color-mix( in srgb, var(--cream) 55%, transparent ), 3px 4px 0 var(--ol);
}
.subpill > .ol { font: 900 17px/1.35 var(--font); letter-spacing: 0.02em; color: var(--cream); --sw: 4px; --sd: 2px; }

/* sticker panels */
.stk { position: relative; border: 4px solid var(--ol); border-radius: 22px; box-shadow: var(--stk-ring), var(--stk-base), 5px 6px 0 0 var(--ol); }
.stk-night { background: var(--dots), var(--g-night); color: var(--cream); }
.stk-gold { background: var(--g-gold); }

/* tilted label tabs */
.tab {
  position: absolute; top: -18px; left: 18px; z-index: 3; padding: 5px 13px 6px; white-space: nowrap;
  font: 900 15.5px/1 var(--font); letter-spacing: 0.05em; color: var(--cream); --sw: 4px; --sd: 2px;
  border: 3px solid var(--ol); border-radius: 11px; transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1.5px rgba(255, 248, 230, 0.9), 3px 3px 0 var(--ol);
}
.tab-mag { background: var(--g-mag); }
.tab-teal { background: var(--g-teal); }
.tab-gold { background: var(--g-gold); }

/* glyphs: outline pass, fill pass, dark details */
.gl { display: block; width: 1em; height: 1em; overflow: visible; flex: none; }
.gl-o { fill: var(--ol); stroke: var(--ol); stroke-width: 4.6; stroke-linejoin: round; }
.gl-f { fill: currentColor; }
.gl-d { fill: var(--ol); }

/* comic bursts */
.bz { display: block; overflow: visible; }
.bz polygon { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bz .bz-o { stroke: var(--ol); stroke-width: 5px; }
.bz .bz-i { stroke: var(--cream); stroke-width: 3px; stroke-opacity: 0.85; }
.bz .bz-d { stroke: none; }
.ke-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bz-gold .bz-o { fill: var(--orange); }
.bz-gold .bz-i { fill: var(--banana); }
.bz-red .bz-o { fill: var(--danger-d); }
.bz-red .bz-i { fill: var(--danger); }

/* tribe badges */
.badge {
  --tc: var(--grey); --tl: var(--cream-d); --td: var(--ol2); --bs: 44px;
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--bs); height: var(--bs);
  border-radius: 50%; border: 3px solid var(--ol); color: var(--cream); font-size: calc( var(--bs) * 0.52 );
  background: radial-gradient( circle at 34% 28%, var(--tl) 0%, var(--tc) 46%, var(--td) 100% );
  box-shadow: inset 0 0 0 2px var(--cream), inset -2px -4px 0 2px rgba(0, 0, 0, 0.18), 2px 3px 0 var(--ol);
}
.badge::after {
  content: ''; position: absolute; left: 20%; top: 11%; width: 34%; height: 22%; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); transform: rotate(-28deg); pointer-events: none;
}
.badge .gl { position: relative; z-index: 1; }
.b-storm { --tc: var(--purple); --tl: var(--storm-glow); --td: var(--storm); }
.b-croc { --tc: var(--jungle); --tl: var(--leaf-l); --td: var(--leaf-dd); }
.b-tnt { --tc: color-mix( in srgb, var(--danger) 85%, var(--ol) ); --tl: color-mix( in srgb, var(--orange) 50%, var(--white) ); --td: var(--danger-d); }
.b-tnt .gl-f { fill: var(--banana); }
.b-unk { --tc: color-mix( in srgb, var(--grey) 70%, var(--purple) ); --tl: var(--lilac); --td: color-mix( in srgb, var(--grey) 40%, var(--ol) ); }

/* keycaps */
kbd {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; margin: 0 2px; vertical-align: middle;
  border: 3px solid var(--ol); border-radius: 8px; background: var(--g-keycap); color: var(--ol);
  font: 900 15.5px/1 var(--font); box-shadow: 0 3px 0 var(--ol); -webkit-text-stroke: 0; text-shadow: none; white-space: nowrap;
}

/* ================================================================ buttons */
.btn {
  position: relative; pointer-events: auto; outline: none; padding: 12px 22px;
  font: 900 18px/1 var(--font); letter-spacing: 0.03em; color: var(--cream);
  -webkit-text-stroke: 4px var(--ol); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ol);
  border: 4px solid var(--ol); border-radius: 16px; background: var(--dots), var(--g-btn);
  box-shadow: inset 0 0 0 2px var(--cream), inset 0 -6px 0 2px rgba(0, 0, 0, 0.22), 3px 4px 0 var(--ol);
  white-space: nowrap; transition: filter 0.15s, transform 0.12s;
}
.btn::before {
  content: ''; position: absolute; left: 9%; right: 9%; top: 4px; height: 36%; border-radius: 999px; pointer-events: none;
  background: linear-gradient( rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.04) );
}
.btn .gl { display: inline-block; vertical-align: -0.16em; }
/* hover lifts the sticker 2 px off its deeper shadow, so the press (translate 2px 3px) has somewhere to travel */
.btn:hover {
  filter: brightness(1.12) saturate(1.12); animation: wobble 0.45s ease-in-out; transform: translateY(-2px) scale(1.04);
  box-shadow: inset 0 0 0 2px var(--cream), inset 0 -6px 0 2px rgba(0, 0, 0, 0.22), 3px 7px 0 var(--ol);
}
.btn:active { transform: translate(2px, 3px) scale(0.98); box-shadow: inset 0 0 0 2px var(--cream), inset 0 -3px 0 2px rgba(0, 0, 0, 0.22), 1px 1px 0 var(--ol); }
.btn.gold { background: var(--g-gold); }
.btn.teal { background: var(--dots), var(--g-teal); }
.btn.red { background: var(--dots), var(--g-red); }
.btn.mid { font-size: 20px; padding: 14px 26px; border-radius: 18px; }
.btn.big { font-size: 24px; padding: 16px 26px; border-radius: 20px; width: 100%; }
.btn.small { font-size: 15px; padding: 10px 16px; border-radius: 14px; }
.btn.off, .btn[disabled] { filter: grayscale(0.85) brightness(0.72); animation: none; transform: none; }
.btn:focus-visible { outline: 4px solid var(--teal); outline-offset: 3px; }
.btn.teal:focus-visible { outline-color: var(--banana); }
.btn > kbd { margin: -6px -4px -6px 12px; vertical-align: 0.1em; }
/* RESTART / QUIT armed by a first press: "SURE?" pulses until the confirming second press (or it times out) */
.b-sure { display: none; }
.btn.armed .b-l { display: none; }
.btn.armed .b-sure { display: inline; color: var(--banana); }
.btn.armed { animation: armedPulse 0.5s ease-in-out infinite alternate; }
.btn.armed > kbd { background: var(--g-gold); }
@keyframes armedPulse { from { transform: scale(1); } to { transform: scale(1.04) rotate(-1deg); } }
.btn-row { display: flex; gap: 16px; justify-content: center; }

@keyframes wobble {
  0% { transform: translateY(0) rotate(0) scale(1); }
  25% { transform: translateY(-3px) rotate(-3.5deg) scale(1.08, 1.02); }
  50% { transform: translateY(-2px) rotate(2.5deg) scale(1.03, 1.07); }
  75% { transform: translateY(-2px) rotate(-1.2deg) scale(1.05); }
  100% { transform: translateY(-2px) rotate(0) scale(1.04); }
}

/* ================================================================ HUD layers */
.hud { position: absolute; inset: 0; z-index: 2; }
.vignette { z-index: 1; }
#minimap-wrap { z-index: 2; }
.banner-lane { z-index: 4; }
.defeat { z-index: 5; }
.pause { z-index: 6; }
.end { z-index: 7; }
.menu { z-index: 8; }
.tip { z-index: 20; }

/* ---------------- top-left stats chip */
.hs {
  position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 12px;
  padding: 9px 20px 11px 10px; border-radius: 22px; transform: scale(var(--s)); transform-origin: 0 0;
}
.hs-b { --bs: 54px; }
.hs-name { font-size: 15px; color: var(--banana); --sw: 4px; --sd: 2px; letter-spacing: 0.05em; }
.hs-row { display: flex; gap: 16px; margin-top: 5px; }
.hs-item { display: flex; align-items: center; gap: 6px; }
.hs-item b { font-size: 24px; --sw: 5px; --sd: 3px; }
.hs-item i { font: 900 var(--lbl)/1 var(--font); font-style: normal; letter-spacing: 0.05em; opacity: 0.9; margin-top: 6px; }
.hs-ico { font-size: 24px; }
.hs-ico-bow { color: var(--banana); transform: rotate(-20deg); }
.hs-ico-skull { color: var(--cream); }
.hs-out {
  position: absolute; right: -16px; top: -14px; display: flex; align-items: center; gap: 4px; padding: 5px 10px;
  font-size: var(--lbl); border: 3px solid var(--ol); border-radius: 12px; background: var(--g-red); transform: rotate(9deg);
  box-shadow: inset 0 0 0 1.5px var(--cream), 2px 3px 0 var(--ol); --sw: 4px; --sd: 2px;
}
.hs-out b { font-size: 18px; color: var(--banana); }

/* ---------------- top centre: storm + clock + roster */
.top { position: absolute; left: 50%; top: 12px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 0; }
.storm {
  display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px 0 0; margin-left: 30px;
  border-radius: 32px; background: var(--g-gold);
}
.storm::before {
  content: ''; position: absolute; left: 36px; right: 18px; top: 5px; height: 34%; border-radius: 999px;
  background: linear-gradient( rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) ); pointer-events: none;
}
.storm-ico {
  position: relative; display: grid; place-items: center; width: 66px; height: 66px; margin-left: -32px; flex: none;
  border-radius: 50%; border: 4px solid var(--ol); font-size: 36px; color: var(--banana);
  background: radial-gradient( circle at 35% 30%, var(--storm-l) 0%, var(--purple) 42%, var(--storm) 100% );
  box-shadow: inset 0 0 0 2.5px var(--cream), 3px 4px 0 var(--ol);
}
.storm-txt { position: relative; display: flex; align-items: baseline; gap: 12px; }
.storm-lbl { font-size: 18px; letter-spacing: 0.03em; --sw: 5px; --sd: 3px; white-space: nowrap; }
.storm-time { min-width: 76px; font-size: 32px; color: var(--white); --sw: 6px; --sd: 3px; font-variant-numeric: tabular-nums; }
.storm-pips { position: relative; display: flex; gap: 5px; margin-left: 2px; }
.storm-pips i { width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--ol); background: rgba(42, 18, 6, 0.28); }
.storm-pips i.on { background: var(--purple); box-shadow: inset 0 0 0 1.5px var(--storm-glow); }
.storm-pips i.cur { background: var(--magenta); box-shadow: inset 0 0 0 1.5px var(--cream); }
.storm.st-soon { background: var(--g-mag); }
.storm.st-shrink { background: var(--g-red); animation: stormPulse 1s ease-in-out infinite; }
.storm.st-final { background: var(--dots), var(--g-purple); }
.storm.st-shrink .storm-ico { animation: boltShake 0.5s ease-in-out infinite; }
@keyframes stormPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes boltShake { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg) scale(1.06); } }

.clock {
  position: absolute; right: -24px; top: 44px; z-index: 2; padding: 4px 10px 5px; font-size: var(--lbl); --sw: 4px; --sd: 2px;
  border: 3px solid var(--ol); border-radius: 11px; background: var(--g-teal); transform: rotate(5deg);
  box-shadow: inset 0 0 0 1.5px var(--cream), 2px 3px 0 var(--ol); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.clock-l { font-size: var(--lbl); letter-spacing: 0.06em; --sw: 3px; }

.roster { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* roster badges are <button>s (click: centre the camera on that tribe / watch it while spectating): drop the UA button look */
.rb {
  position: relative; display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit;
  -webkit-appearance: none; appearance: none; outline: none; pointer-events: auto; transition: transform 0.2s;
}
.rb:hover { transform: translateY(-3px) scale(1.06); }
.rb:active { transform: translateY(1px) scale(0.94); transition-duration: 0.06s; }
.rb.off:hover, .rb.off:active { transform: none; }
#ui .rb.off { cursor: var(--cur-ptr, default); }
.rb:focus-visible .badge { outline: 3px solid var(--teal); outline-offset: 4px; }
.rb .badge { --bs: 46px; display: grid; }   /* block-level: no inline baseline gap inside the button */
.rb.me .badge { --bs: 56px; box-shadow: inset 0 0 0 2px var(--cream), inset -2px -4px 0 2px rgba(0, 0, 0, 0.18), 0 0 0 4px var(--banana), 0 0 0 7px var(--ol), 3px 6px 0 6px var(--ol); }
/* the tribe the spectate camera follows */
.rb.watch .badge { box-shadow: inset 0 0 0 2px var(--cream), inset -2px -4px 0 2px rgba(0, 0, 0, 0.18), 0 0 0 4px var(--teal), 0 0 0 7px var(--ol), 3px 6px 0 6px var(--ol); }
.rb.watch { transform: translateY(-3px); }
.rb-n {
  position: absolute; right: -7px; bottom: -6px; z-index: 2; min-width: 25px; height: 25px; padding: 0 5px;
  display: grid; place-items: center; font-size: var(--lbl); --sw: 3px; --sd: 0;
  border: 2.5px solid var(--cream); border-radius: 13px; background: var(--ol); font-variant-numeric: tabular-nums;
}
.rb-x { position: absolute; inset: -4px; display: none; place-items: center; z-index: 3; font-size: 40px; color: var(--danger); }
.rb-place {
  position: absolute; left: 50%; bottom: -16px; z-index: 4; display: none; padding: 2px 6px; font-size: var(--lbl); --sw: 3px; --sd: 0;
  border: 2.5px solid var(--ol); border-radius: 8px; background: var(--g-red); transform: translateX(-50%) rotate(-5deg);
}
.rb-you {
  position: absolute; left: 50%; top: -16px; z-index: 4; padding: 2px 7px 3px; font-size: var(--lbl); --sw: 3px; --sd: 1px;
  border: 2.5px solid var(--ol); border-radius: 8px; background: var(--g-gold); transform: translateX(-50%) rotate(-5deg);
  box-shadow: 2px 2px 0 var(--ol);
}
.rb.out .badge { filter: grayscale(1) brightness(0.62); }
.rb.out .rb-n { display: none; }
.rb.out .rb-x { display: grid; animation: stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.rb.out .rb-place { display: block; }
@keyframes stamp { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.mini-lane { position: relative; width: 0; height: 0; }
.mini {
  position: absolute; left: 0; top: 16px; display: flex; align-items: center; gap: 8px; padding: 6px 18px 7px 8px; white-space: nowrap;
  border: 4px solid var(--ol); border-radius: 22px; background: var(--g-gold); transform: translateX(-50%) rotate(-2deg);
  box-shadow: var(--stk-ring), 4px 5px 0 var(--ol); animation: miniIn 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
.mini.bye { animation: miniOut 0.35s ease-in forwards; }
.mini-ico { display: grid; place-items: center; font-size: 34px; color: var(--banana); }
.mini-tx { display: flex; align-items: baseline; gap: 8px; }
.m-level .mini-ico { animation: spinStar 1.2s ease-in-out infinite; }
/* start + in-view drops: a coin icon and a stacked title / subtitle */
.m-start, .m-drop { padding: 5px 20px 6px 6px; }
.m-start { background: var(--dots), var(--g-mag); }
.m-drop { background: var(--dots), var(--g-teal); }
.m-start .mini-ico, .m-drop .mini-ico {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ol);
  background: var(--g-coin-gold); box-shadow: 2px 3px 0 var(--ol); animation: bob 2.2s ease-in-out infinite;
}
.m-start .mini-ico img, .m-drop .mini-ico img { width: 38px; height: 38px; object-fit: contain; }
.m-start .mini-tx, .m-drop .mini-tx { flex-direction: column; align-items: flex-start; gap: 3px; }
.m-start .mini-t { color: var(--banana); font-size: 26px; }
.mini-t { font-size: 22px; --sw: 5px; }
.mini-s { font: 900 15px/1 var(--font); --sw: 4px; --sd: 1px; }
.m-zone { background: var(--dots), var(--g-purple); }
.m-zone .mini-ico, .m-level .mini-ico { font-size: 30px; }
/* kill streak: DOUBLE KO! / TRIPLE KO! / BANANARAMA! (a bigger streak re-stamps the strip: .again) */
.m-streak { padding: 5px 20px 6px 6px; background: var(--dots), var(--g-red); }
.m-streak .mini-ico {
  width: 46px; height: 46px; font-size: 28px; color: var(--cream); border: 3px solid var(--ol); border-radius: 50%; box-shadow: 2px 3px 0 var(--ol);
  background: radial-gradient( circle at 35% 30%, color-mix( in srgb, var(--orange) 45%, var(--white) ) 0%, var(--hot) 48%, var(--danger-d) 100% );
}
.m-streak .mini-t { color: var(--banana); font-size: 27px; }
.mini.again:not(.bye) { animation: miniAgain 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes miniAgain { 0% { transform: translateX(-50%) rotate(-6deg) scale(1.4); } 100% { transform: translateX(-50%) rotate(-2deg); } }
@keyframes miniIn { 0% { transform: translateX(-50%) translateY(-30px) scale(0.3) rotate(-12deg); opacity: 0; } 100% { transform: translateX(-50%) rotate(-2deg); opacity: 1; } }
@keyframes miniOut { to { transform: translateX(-50%) translateY(-16px) scale(0.8); opacity: 0; } }
@keyframes spinStar { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(14deg) scale(1.15); } }

/* ---------------- killfeed (top-right) */
.killfeed { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transform: scale(var(--s)); transform-origin: 100% 0; }
.kf {
  display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 6px; white-space: nowrap;
  border: 3px solid var(--ol); border-radius: 22px; background: var(--dots), var(--g-night);
  box-shadow: inset 0 0 0 2px rgba(255, 248, 230, 0.85), 3px 4px 0 var(--ol);
  animation: kfIn 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) backwards; transition: opacity 0.4s, transform 0.4s;
}
.kf.mine { background: var(--g-gold); }
.kf.lost { background: var(--dots), var(--g-red); }
.kf-x { margin-left: 4px; padding: 3px 7px 4px; font-size: var(--lbl); --sw: 3px; --sd: 1px; border: 2.5px solid var(--ol); border-radius: 10px; background: var(--g-mag); transform: rotate(6deg); }
.kf-x:empty { display: none; }
.kf-x.pop { animation: popIn 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
/* the player's rows say it with a shape too: star coin = your KO, skull coin = an archer you lost */
.kf-tag {
  display: grid; place-items: center; width: 27px; height: 27px; flex: none; margin-right: 1px; font-size: 16px;
  border: 2.5px solid var(--ol); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cream);
}
.kt-mine { background: var(--g-mag); color: var(--banana); }
.kt-lost { background: var(--g-night); color: var(--cream); }
.kf.bye { opacity: 0; transform: translateX(46px); }
.kf-b { --bs: 30px; }
.kf-n { font-size: var(--lbl); --sw: 4px; --sd: 2px; letter-spacing: 0.03em; }
.kf-i { font-size: 26px; margin: 0 4px; }
.kf-banana { color: var(--banana); transform: rotate(-15deg); }
.kf-storm { color: var(--storm-glow); }
.kf-blast { color: var(--orange); }
.kf-burn { color: var(--hot); }
.kf-bite { color: var(--leaf-l); }
@keyframes kfIn { 0% { transform: translateX(120%) scale(0.8); opacity: 0; } 60% { transform: translateX(-8%) scale(1.05); opacity: 1; } 100% { transform: none; } }

/* ---------------- minimap frame (bottom-left; canvas stays exactly 280x140 CSS px, the frame scales with the HUD: ~310 px * --s wide) */
#minimap-wrap {
  position: absolute; left: 14px; bottom: 14px; width: auto; height: auto; padding: 11px; border-radius: 26px; pointer-events: auto;
  transform: scale(var(--s)); transform-origin: 0 100%;
}
#minimap {
  display: block; width: 280px; height: 140px; border-radius: 14px;
  background: var(--dots), radial-gradient( ellipse at 50% 55%, color-mix( in srgb, var(--water) 55%, var(--deep) ) 0%, color-mix( in srgb, var(--deep) 75%, var(--ol) ) 55%, color-mix( in srgb, var(--deep) 45%, var(--night-d) ) 100% );
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--ol);
}
/* glass bevel over the canvas (an inset shadow on the canvas itself would sit under its pixels): ink line, cream ring, top shade */
.mm-bevel {
  position: absolute; left: 11px; top: 11px; z-index: 1; width: 280px; height: 140px; border-radius: 14px; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--ol), inset 0 0 0 4.5px var(--cream), inset 0 0 0 6px color-mix( in srgb, var(--ol) 45%, transparent ),
    inset 0 9px 10px -5px rgba(16, 4, 40, 0.5);
}
.mm-bevel::after {
  content: ''; position: absolute; left: 16px; right: 46%; top: 7px; height: 11px; border-radius: 999px;
  background: linear-gradient( rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) );
}
/* compass coin in the canvas' empty bottom-right corner; the red needle points to world north (screen up-right in iso) */
.mm-n {
  position: absolute; right: 19px; bottom: 19px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; pointer-events: none;
  border: 2.5px solid var(--ol); border-radius: 50%; background: var(--g-night); box-shadow: inset 0 0 0 1.5px var(--cream), 1px 2px 0 var(--ol);
}
.mm-n b { position: relative; z-index: 1; font-size: 13px; line-height: 1; color: var(--cream); --sw: 3px; --sd: 1px; }
.mm-n i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--n-rot, -27deg)); }
.mm-n i::before, .mm-n i::after { content: ''; position: absolute; clip-path: polygon( 0 0, 100% 50%, 0 100% ); }
.mm-n i::before { left: 9px; top: -8px; width: 15px; height: 16px; background: var(--ol); }
.mm-n i::after { left: 11px; top: -5px; width: 9px; height: 10px; background: var(--danger); }
.mm-tab { left: 16px; top: -18px; }
.mm-storm {
  position: absolute; right: 14px; top: -18px; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 3px 10px 4px 4px;
  border: 3px solid var(--ol); border-radius: 13px; background: var(--g-purple); transform: rotate(3deg);
  box-shadow: inset 0 0 0 1.5px var(--cream), 2px 3px 0 var(--ol);
}
.mm-storm.hot { background: var(--g-red); }
.mm-ico { font-size: 20px; color: var(--banana); }
.mm-time { font-size: 14px; --sw: 4px; --sd: 2px; font-variant-numeric: tabular-nums; }

/* ---------------- selection panel (bottom-centre): 138 px tall, 112 px inside ( the cards, the portrait and the info column fit it ) */
.sel {
  position: absolute; left: max( 50%, calc( 26px + 550px * var(--s) ) ); bottom: 14px; width: 480px; height: 138px; padding: 16px 16px 10px;
  border-radius: 28px; pointer-events: auto; transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 100%;
}
.sel-empty { display: flex; align-items: center; gap: 16px; height: 100%; padding: 0 8px; }
.se-art { font-size: 58px; color: var(--banana); transform: rotate(-14deg); animation: bob 2.6s ease-in-out infinite; }
.se-title { font-size: 23px; color: var(--banana); --sw: 6px; --sd: 3px; }
.se-hint { margin-top: 6px; font: 700 15px/1.35 var(--font2); color: var(--cream); }
@keyframes bob { 0%, 100% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-6px); } }

.sel-one { display: flex; gap: 16px; height: 100%; }
.so-port {
  position: relative; width: 98px; height: 98px; margin-top: 2px; flex: none; border: 4px solid var(--ol); border-radius: 24px;
  background: radial-gradient( circle at 40% 28%, var(--tl, var(--cream-d)) 0%, var(--tc, var(--grey)) 50%, var(--td, var(--ol2)) 100% );
  box-shadow: inset 0 0 0 2.5px var(--cream), inset 0 -10px 0 2.5px rgba(0, 0, 0, 0.18), 3px 4px 0 var(--ol);
  pointer-events: auto; transition: transform 0.15s, filter 0.15s;
}
.so-port:hover { transform: rotate(-2deg) scale(1.04); filter: brightness(1.08); }
.so-port:active { transform: rotate(1deg) scale(0.95); filter: brightness(0.94); transition-duration: 0.06s; }
.so-img { position: absolute; left: 6px; top: 4px; width: calc(100% - 12px); height: calc(100% - 14px); object-fit: contain; }
.so-port .stars { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); font-size: 21px; }
.stars { display: flex; gap: 1px; }
.stars .gl-f { fill: color-mix( in srgb, var(--grey) 60%, var(--purple) ); }
.stars[data-lv="1"] .st:nth-child(-n+1) .gl-f, .stars[data-lv="2"] .st:nth-child(-n+2) .gl-f, .stars[data-lv="3"] .st .gl-f { fill: var(--banana); }
.so-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.so-head { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.so-name { font-size: 25px; color: var(--banana); --sw: 6px; --sd: 3px; letter-spacing: 0.02em; }
.so-tag { padding: 4px 9px 5px; font-size: var(--lbl); --sw: 3px; --sd: 1px; border: 3px solid var(--ol); border-radius: 9px; background: var(--tc, var(--grey)); transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--ol); }
.so-tag.enemy { background: var(--g-red); }
.so-sub { margin-top: -3px; font: 700 15px/1 var(--font2); color: var(--cream); text-shadow: 0 1px 0 rgba(26, 8, 60, 0.6); }
.sel-one.inspect .so-name { color: var(--danger-l); }
.hp {
  position: relative; height: 23px; border: 3px solid var(--ol); border-radius: 12px; overflow: hidden;
  background: linear-gradient( var(--track), var(--night-c) ); box-shadow: 2px 3px 0 var(--ol);
}
.hp-fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--hp, 1)); transition: transform 0.25s;
  background: linear-gradient( 180deg, color-mix( in srgb, var(--ok) 45%, var(--cream) ) 0%, var(--ok) 38%, var(--leaf) 72%, var(--leaf-d) 100% );
}
.hp-fill::after { content: ''; position: absolute; left: 6px; right: 6px; top: 3px; height: 30%; border-radius: 9px; background: rgba(255, 255, 255, 0.5); }
.hp.mid .hp-fill { background: linear-gradient( 180deg, var(--gold-shine) 0%, var(--banana) 40%, var(--banana-d) 100% ); }
.hp.low .hp-fill { background: linear-gradient( 180deg, var(--danger-l) 0%, var(--danger) 40%, var(--danger-d) 100% ); }
.hp-txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; --sw: 4px; --sd: 1px; font-variant-numeric: tabular-nums; }
.so-stats { display: flex; gap: 10px; }
.so-st { display: flex; align-items: center; gap: 5px; font-size: 20px; }
.so-st b { font-size: 18px; --sw: 4px; --sd: 2px; }
.so-st i { font: 900 var(--lbl)/1 var(--font); font-style: normal; letter-spacing: 0.04em; opacity: 0.9; margin-top: 5px; }
.so-st:nth-child(2) .gl { color: var(--banana); }
.so-st { position: relative; }
/* veterancy chip: the level's bonus, hung over the stat label ( right end ), clear of the number */
.so-up { position: absolute; right: -10px; top: -12px; padding: 1px 4px 2px; font: 900 11px/1 var(--font); font-style: normal; --sw: 3px; --sd: 0px; color: var(--cream);
  border: 2px solid var(--ol); border-radius: 6px; background: var(--g-teal); transform: rotate(-6deg); pointer-events: none; }
.so-st:nth-child(3) .gl { color: var(--sky); }
.so-buffs { position: absolute; right: 18px; top: 12px; display: flex; gap: 8px; }
.bf { position: relative; width: 32px; height: 32px; pointer-events: auto; animation: popIn 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.bf-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient( var(--bc, var(--banana)) calc( var(--f, 1) * 1turn ), color-mix( in srgb, var(--track) 60%, transparent ) 0 );
  -webkit-mask: radial-gradient( circle, transparent 60%, #000 62% ); mask: radial-gradient( circle, transparent 60%, #000 62% );
}
.bf-ico { position: relative; width: 100%; height: 100%; padding: 3px; border-radius: 50%; border: 3px solid var(--ol); background: var(--g-coin); object-fit: contain; }
.bf-t { position: absolute; right: -9px; bottom: -8px; font-size: var(--lbl); --sw: 4px; --sd: 1px; }
.bf[data-b="golden"] { --bc: var(--banana); }
.bf[data-b="pepper"] { --bc: var(--hot); }
.bf[data-b="coconut"] { --bc: var(--teal); }
.bf[data-b="pound"] { --bc: var(--magenta); }
@keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.sel-many { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
/* a centred row exactly --cols cells wide (ui.js): 2-8 archers as name cards; 9+ as a fanned deck ( .deck, below ) */
.sm-grid {
  --cw: 32px; --ch: 54px; --ih: 40px; --gx: 4px; --gy: 6px;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--gy) var(--gx);
  width: calc( var(--cols, 12) * ( var(--cw) + var(--gx) ) - var(--gx) + 0.5px );
}
/* the 480 px panel has 440 px inside: 8 x 52 + 7 x 3 = 437 (g8) */
.sm-grid.g8 { --cw: 52px; --gx: 3px; --ch: 98px; --ih: 58px; }
/* portrait cells are <button>s (click: select only this archer, Shift+click: drop it) */
.cell {
  position: relative; flex: none; width: var(--cw); height: var(--ch); margin: 0; padding: 0; pointer-events: auto; overflow: hidden;
  font: inherit; color: inherit; line-height: inherit; text-align: center; -webkit-appearance: none; appearance: none; outline: none;
  border: 3px solid var(--ol); border-radius: 11px;
  background: radial-gradient( circle at 45% 30%, var(--tl, var(--cream-d)) 0%, var(--tc, var(--grey)) 55%, var(--td, var(--ol2)) 100% );
  box-shadow: inset 0 0 0 1.5px var(--cream);
  animation: popIn 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
.cell:hover { transform: translateY(-3px); filter: brightness(1.15); }
.cell:active { transform: translateY(1px) scale(0.94); filter: brightness(0.95); }
.cell:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.c-img { position: absolute; left: 0; top: 1px; width: 100%; height: var(--ih); object-fit: contain; }
/* shrink-to-fit and centred; ui.js measureNames measures the painted ink ( stroke included ): one wider than the cell squeezes
   by --nk, and --nx centres the ink rather than the advance box ( the trailing negative letter-spacing, an overhanging K ) */
.c-name { display: none; position: absolute; left: 50%; bottom: 20px; transform: translateX(calc(-50% + var(--nx, 0px))) scaleX(var(--nk, 1)); font-size: var(--lbl); --sw: 3px; --sd: 1px; letter-spacing: -0.06em; white-space: nowrap; }
.g8 .c-name { display: block; }
.g8 .c-hp { left: 4px; right: 4px; bottom: 4px; height: 12px; border-radius: 5px; }
.g8 .c-hp::after { content: ''; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--cream); pointer-events: none; }
.g8 .c-lv { font-size: var(--lbl); left: 3px; top: 2px; }
.c-hp { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 8px; border: 2px solid var(--ol); border-radius: 4px; background: var(--track); overflow: hidden; }
.c-hp i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--hp, 1)); background: var(--ok); }
.c-hp.mid i { background: var(--banana); }
.c-hp.low i { background: var(--danger); }
.c-lv { position: absolute; left: 2px; top: 0; font: 900 12px/1 'Segoe UI Symbol', var(--font); color: var(--banana); -webkit-text-stroke: 2.5px var(--ol); paint-order: stroke fill; letter-spacing: -1px; }
/* a wide name squeezes instead of clipping (ui.js measures once per name change) */
/* buff chip: the strongest active buff's icon in the top-right corner (a shape cue; the banana ring stays as the colour cue) */
.c-bf {
  display: none; position: absolute; right: 1px; top: 1px; z-index: 2; width: 20px; height: 20px; padding: 0; object-fit: contain;
  border: 2px solid var(--ol); border-radius: 50%; background: var(--g-coin); box-shadow: 1px 1px 0 var(--ol);
}
.g8 .c-bf { width: 24px; height: 24px; right: 2px; top: 2px; }
.cell.buffed .c-bf { display: block; }
.cell.buffed { box-shadow: inset 0 0 0 1.5px var(--cream), 0 0 0 2px var(--banana); }
/* below 34 % hp the face greys out and a red ring pulses (opacity only: compositor-cheap) */
.cell.low .c-img { filter: saturate(0.2) brightness(0.86) contrast(0.95); }
.cell.low::after {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 8px; pointer-events: none;
  box-shadow: inset 0 0 0 2.5px var(--danger), inset 0 -14px 16px -10px color-mix( in srgb, var(--danger) 70%, transparent );
  animation: lowPulse 0.75s ease-in-out infinite alternate;
}
@keyframes lowPulse { from { opacity: 1; } to { opacity: 0.3; } }
/* level 3 veterans wear a gold frame */
.cell.lv3 { border-color: color-mix( in srgb, var(--gold) 30%, var(--ol) ); box-shadow: inset 0 0 0 2px var(--gold-shine), inset 0 0 0 4.5px var(--gold), inset 0 0 0 5.5px var(--ol); }
.cell.lv3.buffed { box-shadow: inset 0 0 0 2px var(--gold-shine), inset 0 0 0 4.5px var(--gold), inset 0 0 0 5.5px var(--ol), 0 0 0 2px var(--banana); }
/* 9+ selected: a fanned deck ( ui.js renderMany sets --x / --r / --y / --i per card and --dw ). The first card sits in front
   on the left; each card behind shows its right-hand strip, where its stars and a vertical hp bar live, so health and level
   read on every card. Hover lifts a card clear of the fan; the badge counts the whole selection */
.sm-grid.deck { --cw: 52px; --ch: 98px; --ih: 64px; display: block; position: relative; width: var(--dw, 440px); height: var(--ch); margin-top: 2px; }
.deck .cell {
  position: absolute; left: 0; top: 0; z-index: calc( 40 - var(--i, 0) ); transform-origin: 50% 130%;
  transform: translate( var(--x, 0px), var(--y, 0px) ) rotate( var(--r, 0deg) );
  box-shadow: inset 0 0 0 1.5px var(--cream), 3px 2px 0 rgba(26, 8, 60, 0.6);
  transition: transform 0.18s cubic-bezier(0.2, 1.3, 0.4, 1), filter 0.15s; animation-name: deckIn;
}
.deck .cell:hover { z-index: 60; transform: translate( var(--x, 0px), calc( var(--y, 0px) - 12px ) ) rotate( 0deg ); filter: brightness(1.12); }
.deck .cell:active { transform: translate( var(--x, 0px), calc( var(--y, 0px) - 8px ) ) scale(0.95); filter: brightness(0.95); transition-duration: 0.06s; }
.deck .cell:focus-visible { z-index: 60; }
.deck .cell.lv3 { box-shadow: inset 0 0 0 2px var(--gold-shine), inset 0 0 0 4.5px var(--gold), inset 0 0 0 5.5px var(--ol), 3px 2px 0 rgba(26, 8, 60, 0.6); }
.deck .cell.buffed { box-shadow: inset 0 0 0 1.5px var(--cream), 0 0 0 2px var(--banana), 3px 2px 0 rgba(26, 8, 60, 0.6); }
.deck .cell.lv3.buffed { box-shadow: inset 0 0 0 2px var(--gold-shine), inset 0 0 0 4.5px var(--gold), inset 0 0 0 5.5px var(--ol), 0 0 0 2px var(--banana), 3px 2px 0 rgba(26, 8, 60, 0.6); }
.deck .c-img { left: -4px; top: 3px; width: calc(100% - 6px); }
.deck .c-lv { left: auto; right: 2px; top: 3px; font-size: 13px; line-height: 13px; letter-spacing: 0; writing-mode: vertical-rl; text-orientation: upright; }
.deck .c-hp { left: auto; right: 3px; top: 46px; bottom: 4px; width: 11px; height: auto; border-radius: 5px; }
.deck .c-hp::after { content: ''; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--cream); pointer-events: none; }
.deck .c-hp i { transform-origin: 50% 100%; transform: scaleY(var(--hp, 1)); }
.deck .c-bf { left: 2px; right: auto; top: auto; bottom: 3px; width: 22px; height: 22px; }
.sm-count { display: none; }
.sel-many:has( .deck ) .sm-count {
  display: grid; place-items: center; position: absolute; right: calc( 50% - var(--dw, 440px) / 2 - 14px ); top: -14px; z-index: 70; min-width: 40px; height: 32px;
  padding: 0 8px 2px; font-size: 19px; --sw: 4px; --sd: 2px; color: var(--cream); pointer-events: none; font-variant-numeric: tabular-nums;
  border: 3px solid var(--ol); border-radius: 16px; background: var(--g-mag); transform: rotate(-8deg); box-shadow: inset 0 0 0 1.5px var(--cream), 2px 3px 0 var(--ol);
}
@keyframes deckIn { 0% { scale: 0.5; opacity: 0; } 100% { scale: 1; opacity: 1; } }

/* ---------------- ability bar (bottom-right): 138 px tall like .sel, 112 px inside ( 64 px abilities + 8 + 40 px commands ) */
.abil {
  position: absolute; right: 14px; bottom: 14px; width: 360px; height: 138px; padding: 16px 16px 10px;
  display: flex; flex-direction: column; gap: 8px; border-radius: 28px; pointer-events: auto;
  transform: scale(var(--s)); transform-origin: 100% 100%;
}
.ab-row { display: flex; gap: 12px; justify-content: space-between; }
.ab {
  flex: 1; height: 64px; padding: 0; display: grid; place-items: center; border-radius: 20px;
  background: var(--g-gold); -webkit-text-stroke: 0; text-shadow: none;
}
.ab::before { z-index: 1; }
.ab-ico { position: relative; z-index: 0; width: 52px; height: 52px; object-fit: contain; }
.ab-sweep {
  position: absolute; inset: 2px; z-index: 2; border-radius: 15px; pointer-events: none;
  background: conic-gradient( transparent calc( ( 1 - var(--cd, 0) ) * 1turn ), color-mix( in srgb, var(--track) 80%, transparent ) 0 );
}
.ab-cd { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-size: 28px; --sw: 7px; --sd: 3px; color: var(--white); }
/* off cooldown: ui.js pops the button and blows this gold ring out of it (WAAPI, opacity + transform only) */
.ab-flash {
  position: absolute; inset: -7px; z-index: 5; border-radius: 25px; pointer-events: none; opacity: 0;
  border: 4px solid var(--banana-l); box-shadow: 0 0 0 2px var(--ol), inset 0 0 0 2px var(--ol), 0 0 18px 4px color-mix( in srgb, var(--gold) 70%, transparent );
}
.ab .key, .cmd .key, .sp-arr .key {
  position: absolute; right: -9px; bottom: -9px; z-index: 4; width: 27px; height: 27px; display: grid; place-items: center;
  font-size: var(--lbl); --sw: 3px; --sd: 1px; border: 3px solid var(--ol); border-radius: 9px; background: var(--g-night);
  box-shadow: inset 0 0 0 1.5px var(--cream), 2px 2px 0 var(--ol);
}
.ab-n {
  position: absolute; right: -8px; top: -9px; z-index: 4; padding: 3px 6px 4px; font-size: var(--lbl); --sw: 3px; --sd: 1px;
  border: 2.5px solid var(--ol); border-radius: 10px; background: var(--g-mag); transform: rotate(6deg);
}
.ab-n::before { content: 'x'; }
.ab-n:empty { display: none; }
.ab.ready { box-shadow: inset 0 0 0 2px var(--cream), inset 0 -6px 0 2px rgba(0, 0, 0, 0.18), 3px 4px 0 var(--ol), 0 0 0 3px rgba(255, 242, 122, 0.55); }
/* armed: Input is waiting for the target click of this ability / attack-move */
.ab.arm, .cmd.arm {
  box-shadow: inset 0 0 0 2px var(--cream), inset 0 -6px 0 2px rgba(0, 0, 0, 0.18), 0 0 0 4px var(--magenta), 3px 4px 0 4px var(--ol);
  animation: armPulse 0.7s ease-in-out infinite; transform: translateY(-3px);
}
@keyframes armPulse { 50% { box-shadow: inset 0 0 0 2px var(--cream), inset 0 -6px 0 2px rgba(0, 0, 0, 0.18), 0 0 0 6px var(--banana), 3px 4px 0 6px var(--ol); } }
.cmd-row { display: flex; gap: 10px; }
.cmd {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 22px 0 3px; display: flex; align-items: center; gap: 1px; border-radius: 14px;
  font-size: var(--lbl); --sw: 3px; --sd: 2px; -webkit-text-stroke: 0; text-shadow: none;
  background: var(--dots), var(--g-teal);
}
.cmd-ico { width: 21px; height: 21px; object-fit: contain; position: relative; flex: none; }
.cmd-l { position: relative; letter-spacing: -0.03em; }
.cmd .key { width: 25px; height: 25px; right: -8px; bottom: -8px; font-size: var(--lbl); border-radius: 8px; }
.ab.off .ab-sweep, .ab.off .ab-n { display: none; }

#ui.out .sel, #ui.out .abil, #ui.over .sel, #ui.over .abil, #ui.over .toasts, #ui.over .spectate { display: none; }
#ui.ended .hud, #ui.ended #minimap-wrap, #ui.ended .banner-lane, #ui.ended .vignette { display: none; }

/* ---------------- toasts (bottom-right, stacked above the ability bar: the screen centre, where a camera-centred fight sits, stays clear) */
.toasts {
  position: absolute; right: 14px; bottom: calc( 30px + 138px * var(--s) ); display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  transform: scale(var(--s)); transform-origin: 100% 100%;
}
#ui.out .toasts { bottom: calc( 30px + 90px * var(--s) ); }
#ui.coach-abil .toasts { bottom: calc( 30px + 234px * var(--s) ); }

/* ---------------- coach marks: one contextual tip sticker at a time, pointing at the panel it is about (ui.js updateHints).
   Click-through (only the x takes the pointer), so it never blocks play; gone while the player is out or the match is over */
.coach {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 470px; padding: 10px 18px 12px 10px;
  border: 4px solid var(--ol); border-radius: 22px; background: var(--dots), var(--g-night); color: var(--cream);
  box-shadow: var(--stk-ring), var(--stk-base), 5px 6px 0 0 var(--ol); pointer-events: none; animation: coachIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
.coach::after {
  content: ''; position: absolute; left: calc( 50% - 11px ); bottom: -14px; width: 18px; height: 18px; transform: rotate(45deg);
  border: solid var(--ol); border-width: 0 4px 4px 0; border-bottom-right-radius: 5px; background: var(--night-d);
}
.coach.at-sel { left: max( 50%, calc( 26px + 550px * var(--s) ) ); bottom: calc( 14px + 162px * var(--s) ); transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 100%; }
.coach.at-abil { right: 14px; bottom: calc( 14px + 162px * var(--s) ); transform: scale(var(--s)); transform-origin: 100% 100%; }
.coach.at-abil::after { left: auto; right: 160px; }
.coach.at-map { left: 14px; bottom: calc( 14px + 194px * var(--s) ); transform: scale(var(--s)); transform-origin: 0 100%; }
.coach.at-map::after { left: 132px; }
.co-ico {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; font-size: 26px; color: var(--cream);
  border: 3px solid var(--ol); border-radius: 50%; background: var(--g-gold); box-shadow: 2px 3px 0 var(--ol); transform: rotate(-8deg);
}
.coach.h-storm .co-ico { background: var(--g-red); }
.co-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.co-t { font-size: 19px; color: var(--banana); --sw: 5px; --sd: 2px; letter-spacing: 0.02em; white-space: nowrap; }
.co-s { font: 700 15px/1.3 var(--font2); color: var(--cream); }
.co-keys { display: flex; flex: none; align-items: center; }
.btn.co-x {
  position: absolute; right: -13px; top: -13px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  font-size: 15px; border-width: 3px; border-radius: 50%; background: var(--g-red); color: var(--cream); pointer-events: auto;
}
.coach.ok { background: var(--dots), var(--g-teal); }
.coach.ok::after { background: color-mix( in srgb, var(--teal) 78%, var(--ol) ); }
.coach.ok .co-t { color: var(--cream); }
.coach.ok .co-x { display: none; }
#ui.out .coach, #ui.over .coach { display: none; }
@keyframes coachIn { 0% { opacity: 0; translate: 0 16px; } 100% { opacity: 1; translate: 0 0; } }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 5px 20px 5px 5px; white-space: nowrap;
  border: 3px solid var(--ol); border-radius: 28px; background: var(--dots), var(--g-night);
  box-shadow: inset 0 0 0 2px var(--cream), 3px 4px 0 var(--ol);
  animation: toastIn 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) backwards; transition: opacity 0.35s, transform 0.35s;
}
.toast.bye { opacity: 0; transform: translateY(-14px) scale(0.9); }
.t-ico {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; color: var(--banana);
  border: 3px solid var(--ol); background: var(--g-coin);
}
.t-ico img { width: 34px; height: 34px; object-fit: contain; }
/* long text ends in an ellipsis (the padding / negative margin keeps the outline stroke inside the clip) */
.t-txt {
  display: block; max-width: 520px; overflow: hidden; text-overflow: ellipsis; padding: 3px 4px 5px; margin: -3px -4px -5px;
  font-size: 17px; --sw: 4px; --sd: 2px; letter-spacing: 0.02em;
}
/* hotkey hint on alert toasts: [Home] LOOK (Input jumps the camera to KE.UI.lastAlert) */
.t-key { display: flex; align-items: center; gap: 2px; margin-left: 2px; padding-left: 10px; border-left: 3px solid color-mix( in srgb, var(--ol) 45%, transparent ); }
.t-key .ol { font-size: 15px; --sw: 4px; --sd: 2px; letter-spacing: 0.04em; }
.t-pickup, .t-level { background: var(--g-gold); }
.t-recruit { background: var(--dots), var(--g-teal); }
.t-warn { background: var(--dots), var(--g-red); }
.t-warn .t-ico { color: var(--danger); }
.t-storm { background: var(--dots), var(--g-purple); }
.t-storm .t-ico { color: var(--purple); }
.t-err { background: var(--dots), var(--g-red); padding-right: 16px; }
.t-err .t-ico { width: 34px; height: 34px; font-size: 18px; color: var(--danger); }
.t-err .t-txt { font-size: 15px; }
@keyframes toastIn { 0% { transform: translateY(30px) scale(0.5); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------------- spectating bar: WATCHING <badge> TRIBE with prev / next (arrows, Tab), tribes left, play again, menu */
/* centred, or pushed right of the scaled minimap (14 + 310 s) like .sel: the bar is ~840 px wide at --s 1 (half-width term below) */
.spectate {
  position: absolute; left: max( 50%, calc( 36px + 730px * var(--s) ) ); bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px 12px;
  border-radius: 28px; pointer-events: auto; transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 100%; white-space: nowrap;
}
.sp-eye { display: grid; place-items: center; width: 46px; height: 46px; flex: none; font-size: 30px; color: var(--cream); border: 3px solid var(--ol); border-radius: 50%; background: var(--g-mag); box-shadow: 2px 3px 0 var(--ol); }
.btn.sp-arr { width: 44px; height: 44px; padding: 0; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 50%; background: var(--dots), var(--g-teal); color: var(--cream); }
.sp-arr .gl { margin-left: 3px; }
.sp-prev .gl { margin: 0 3px 0 0; transform: scaleX(-1); }
.sp-arr .key { width: 30px; height: 30px; right: -10px; bottom: -10px; font-size: 17px; border-radius: 9px; font-family: 'Segoe UI Symbol', var(--font); }
.sp-who { display: flex; align-items: center; gap: 9px; width: 238px; flex: none; }
.sp-b { --bs: 44px; }
.sp-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-lbl { font: 900 var(--lbl)/1 var(--font); letter-spacing: 0.08em; color: var(--banana); --sw: 3px; --sd: 1px; }
.sp-name { font-size: 20px; line-height: 1; white-space: nowrap; transform-origin: 0 50%; --sw: 5px; --sd: 2px; }
.sp-name.tight { transform: scaleX(0.8); }
.sp-n { display: flex; align-items: center; gap: 6px; margin: 0 4px; }
.sp-n b { font-size: 28px; --sw: 5px; --sd: 2px; font-variant-numeric: tabular-nums; }
.sp-n i { font: 900 var(--lbl)/1.05 var(--font); font-style: normal; letter-spacing: 0.05em; color: var(--cream); }

/* ---------------- storm-danger vignette */
.vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s;
  background:
    radial-gradient( ellipse 78% 72% at 50% 50%, transparent 52%, color-mix( in srgb, var(--storm-glow) 28%, transparent ) 70%, color-mix( in srgb, var(--purple) 62%, transparent ) 87%, color-mix( in srgb, var(--storm) 92%, transparent ) 100% );
}
.vignette.on { opacity: 1; animation: vig 1.1s ease-in-out infinite; }
@keyframes vig { 50% { opacity: 0.5; } }

/* ================================================================ announcer: compact comic cards hanging from the roster;
   after a beat they shrink and fly (X and Y on separate easings = an arc) into the HUD widget they concern.
   --bl-top / --bl (ui.js onResize): the lane starts just under the roster's place tags and the card shrinks so its
   bottom stays above 36% of the screen height, clear of a camera-centred squad (and of every HUD panel) */
.banner-lane { position: absolute; left: 50%; top: var(--bl-top, 160px); width: 0; height: 0; transform: scale(var(--bl, 1)); pointer-events: none; }
.banner-lane.mid { top: 40%; transform: scale(var(--s)); }
#ui.over .banner-lane.mid { top: 22%; }
.banner { position: absolute; left: -350px; top: 0; width: 700px; height: 170px; }
.bn-fly { position: absolute; inset: 0; display: grid; place-items: center; transform-origin: 50% 0; animation: slam 0.5s cubic-bezier(0.25, 1, 0.4, 1) backwards; }
.banner.bye .bn-fly { animation: bannerOut 0.3s ease-in forwards; }
.banner.dock { animation: dockX 0.44s cubic-bezier(0.3, 0, 0.6, 1) forwards; }
.banner.dock .bn-fly { transform-origin: 50% 50%; animation: dockY 0.44s cubic-bezier(0.45, -0.35, 0.7, 1) forwards; }
.bn-burst { position: absolute; inset: 0; width: 100%; height: 100%; animation: burstWiggle 2.6s ease-in-out infinite; }
.bn-burst .bz-o { fill: var(--banana); stroke-width: 5px; }
.bn-burst .bz-i { fill: var(--orange); stroke-width: 3px; }
.bn-ribbon { position: relative; display: flex; align-items: center; gap: 12px; transform: rotate(-3deg); }
.bn-texts { display: flex; flex-direction: column; align-items: center; }
.bn-text { font-size: 40px; letter-spacing: 0.02em; white-space: nowrap; color: var(--cream); --sw: 9px; --sd: 4px; }
.bn-text.long { font-size: 32px; --sw: 8px; --sd: 4px; }
.bn-text.xlong { font-size: 27px; --sw: 7px; --sd: 3px; }
.bn-text.xxlong { font-size: 23px; --sw: 6px; --sd: 3px; }
.bn-sub {
  margin-top: 4px; padding: 4px 12px 5px; font-size: 17px; letter-spacing: 0.03em; --sw: 4px; --sd: 2px; white-space: nowrap;
  border: 3px solid var(--ol); border-radius: 10px; background: var(--g-night); box-shadow: inset 0 0 0 1.5px var(--cream), 3px 3px 0 var(--ol); transform: rotate(2deg);
}
.bn-sub kbd { margin: -5px -5px -5px 10px; }
.bn-badges { display: flex; }
.bn-badges .badge + .badge { margin-left: -20px; }
.bn-badge { --bs: 58px; }
.bn-ico { display: grid; place-items: center; width: 62px; height: 62px; flex: none; border-radius: 50%; border: 4px solid var(--ol); background: var(--g-coin); box-shadow: 3px 4px 0 var(--ol); }
.bn-ico img { width: 48px; height: 48px; object-fit: contain; }
.bn-bolt { font-size: 40px; color: var(--banana); background: radial-gradient( circle at 35% 30%, var(--storm-l) 0%, var(--purple) 45%, var(--storm) 100% ); box-shadow: inset 0 0 0 3px var(--cream), 3px 4px 0 var(--ol); animation: boltShake 0.45s ease-in-out infinite; }
.bn-place { position: relative; width: 78px; height: 66px; flex: none; display: grid; place-items: center; transform: rotate(8deg); }
.bn-place .bz { position: absolute; inset: 0; width: 100%; height: 100%; }
.bn-place b { position: relative; font-size: 26px; color: var(--banana); --sw: 6px; --sd: 3px; }
.bn-crown { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--ol); background: radial-gradient( circle at 35% 30%, color-mix( in srgb, var(--magenta) 50%, var(--white) ) 0%, var(--magenta) 45%, color-mix( in srgb, var(--magenta) 55%, var(--ol) ) 100% ); box-shadow: inset 0 0 0 3px var(--cream), 4px 5px 0 var(--ol); }
.bn-crown-gl { font-size: 68px; color: var(--banana); animation: spinStar 1.4s ease-in-out infinite; }
.b-storm .bn-burst .bz-o { fill: var(--magenta); }
.b-storm .bn-burst .bz-i { fill: var(--purple); }
.b-elim .bn-burst .bz-o { fill: color-mix( in srgb, var(--orange) 60%, var(--hot) ); }
.b-elim .bn-burst .bz-i { fill: color-mix( in srgb, var(--danger) 85%, var(--ol) ); }
.b-elim .bn-text { color: var(--banana); }
.b-drop .bn-burst .bz-o { fill: var(--sky); }
.b-drop .bn-burst .bz-i { fill: var(--teal); }
/* a hunter sent at the player ( ai:hunt ): danger red; the last stage's golden drop: gold */
.b-hunt .bn-burst .bz-o { fill: color-mix( in srgb, var(--danger) 80%, var(--hot) ); }
.b-hunt .bn-burst .bz-i { fill: var(--danger-d); }
.b-hunt .bn-text { color: var(--cream); }
.b-golden .bn-burst .bz-o { fill: var(--banana); }
.b-golden .bn-burst .bz-i { fill: color-mix( in srgb, var(--orange) 70%, var(--banana) ); }
.b-golden .bn-text { color: var(--white); }
/* f-play2: which tribe the player is this match: the tribe's own colours ( --tc / --td, set on the card by ui.js ) */
.b-you .bn-burst .bz-o { fill: var(--tc, var(--banana)); }
.b-you .bn-burst .bz-i { fill: var(--td, var(--orange)); }
.b-you .bn-text { color: var(--white); }
.b-you .bn-sub { color: color-mix( in srgb, var(--tl, var(--cream)) 60%, var(--white) ); }
/* victory is the one announcement that owns the screen centre (full size) */
.banner.b-victory { left: -560px; top: -135px; width: 1120px; height: 270px; }
.b-victory .bn-ribbon { gap: 20px; }
.b-victory .bn-text { font-size: 64px; --sw: 13px; --sd: 7px; color: var(--white); }
.b-victory .bn-text.long, .b-victory .bn-text.xlong, .b-victory .bn-text.xxlong { font-size: 46px; --sw: 11px; --sd: 6px; }
.b-victory .bn-sub { margin-top: 6px; padding: 5px 16px 6px; font-size: 18px; border-radius: 12px; }
.b-victory .bn-burst .bz-o { fill: var(--orange); stroke-width: 6px; }
.b-victory .bn-burst .bz-i { fill: var(--banana); }
/* the card drops in from above its rest spot (origin: its top edge), so even mid-slam it never reaches further down */
@keyframes slam {
  0% { transform: translateY(-46px) scale(1.16) rotate(-4deg); opacity: 0; }
  40% { transform: scale(0.93) rotate(1.5deg); opacity: 1; }
  62% { transform: scale(1.04, 1) rotate(-1deg); }
  80% { transform: scale(0.99); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes bannerOut { to { transform: scale(1.12) translateY(-24px); opacity: 0; } }
@keyframes burstWiggle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(1.5deg) scale(1.03); } }
@keyframes dockX { to { transform: translateX(var(--dx, 0)); } }
@keyframes dockY {
  0% { transform: none; opacity: 1; }
  18% { transform: scale(1.08); }
  100% { transform: translateY(var(--dy, 0)) scale(0.08) rotate(-20deg); opacity: 0.85; }
}
/* the HUD widget that received a docked card squashes and flashes */
#ui .thunk { animation: thunk 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes thunk { 0% { transform: scale(1.28); filter: brightness(1.7); } 55% { transform: scale(0.92); filter: brightness(1.1); } 100% { transform: none; filter: none; } }
/* minimap pings: teal where a supply-drop card landed, red where the player's archers are hit out of view */
.mm-ping { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; --pc: var(--teal); }
.mm-ping::before, .mm-ping::after {
  content: ''; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--ol); box-shadow: inset 0 0 0 2px var(--pc); animation: ping 0.9s ease-out 3 both;
}
.mm-ping::after { animation-delay: 0.3s; }
.mm-ping.alert { --pc: var(--danger); }
.mm-ping.alert::before {
  left: -7px; top: -7px; width: 14px; height: 14px; background: var(--danger); box-shadow: inset 0 0 0 2px var(--danger-l), 0 0 0 2px var(--ol);
  border-width: 2px; animation: alertDot 0.45s steps(1) 6 both;
}
.mm-ping.alert::after { animation-delay: 0s; animation-iteration-count: 3; }
.mm-ping.gold { --pc: var(--banana); }   /* the last stage's golden drop ( ui.js keeps it 2 x PING_MS: all 3 rings play ) */
@keyframes alertDot { 0% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ping { 0% { transform: scale(0.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* ================================================================ overlays (defeat, pause, end) */
.overlay { position: absolute; inset: 0; pointer-events: none; }
.ov-dim {
  position: absolute; inset: 0; pointer-events: auto; animation: fadeIn 0.3s ease-out backwards;
  background:
    radial-gradient( circle, rgba(255, 255, 255, 0.05) 1.6px, transparent 2.1px ) 0 0 / 11px 11px,
    radial-gradient( ellipse at 50% 45%, rgba(60, 20, 120, 0.5) 0%, rgba(22, 6, 50, 0.86) 100% );
}
.ov-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--s)); }
.ov-fit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--fit)); }
.card { pointer-events: auto; }
.card-burst { position: absolute; left: 50%; top: -70px; width: 380px; height: 130px; display: grid; place-items: center; transform: translateX(-50%) rotate(-3deg); }
.card-burst .bz { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-burst span { position: relative; font-size: 46px; color: var(--cream); --sw: 10px; --sd: 5px; letter-spacing: 0.03em; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes cardIn { 0% { transform: translateY(60px) scale(0.6) rotate(-4deg); opacity: 0; } 60% { transform: translateY(-8px) scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: none; } }

/* ---------------- defeat card */
.defeat::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at 50% 50%, rgba(80, 0, 30, 0.15) 30%, rgba(60, 0, 30, 0.6) 100% ); animation: fadeIn 0.4s; }
.defeat .ov-stage { top: 50%; }
.defeat-card {
  width: 740px; padding: 64px 36px 30px; border-radius: 34px; text-align: center;
  animation: cardIn 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.defeat-card .btn-row { gap: 12px; }
.defeat-card .btn.mid { padding: 14px 19px; }
.df-skull {
  position: absolute; left: 50%; top: -58px; width: 108px; height: 108px; display: grid; place-items: center; font-size: 70px; color: var(--cream);
  border: 4px solid var(--ol); border-radius: 50%; background: var(--g-red); transform: translateX(-50%) rotate(-8deg);
  box-shadow: inset 0 0 0 3px var(--cream), 4px 5px 0 var(--ol);
}
.df-title { font-size: 38px; color: var(--banana); --sw: 9px; --sd: 5px; }
.df-b { --bs: 30px; display: inline-block; vertical-align: middle; margin: -6px 2px 0; }
.df-place { position: relative; width: 200px; height: 140px; margin: 6px auto 4px; display: grid; place-items: center; transform: rotate(-4deg); }
.df-place .bz { position: absolute; inset: 0; width: 100%; height: 100%; }
.df-place b { position: relative; font-size: 64px; color: var(--white); --sw: 11px; --sd: 6px; }
.df-pill { max-width: 540px; margin-bottom: 24px; }

/* ---------------- pause */
.pause-card {
  width: 460px; padding: 82px 34px 30px; display: flex; flex-direction: column; gap: 14px; border-radius: 34px;
  animation: cardIn 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.pause-set { padding: 10px 14px 8px; border: 3px solid var(--ol); border-radius: 18px; background: rgba(20, 6, 50, 0.55); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25); }
.pause-card.set-open [data-act="restart"], .pause-card.set-open [data-act="quit"] { display: none; }

/* ---------------- end screen */
.end-dim { background:
  radial-gradient( circle, rgba(255, 255, 255, 0.05) 1.6px, transparent 2.1px ) 0 0 / 11px 11px,
  radial-gradient( ellipse at 50% 30%, rgba(90, 30, 160, 0.72) 0%, rgba(20, 5, 45, 0.94) 100% ); }
.end.won .end-dim { background:
  radial-gradient( circle, rgba(255, 255, 255, 0.06) 1.6px, transparent 2.1px ) 0 0 / 11px 11px,
  radial-gradient( ellipse at 50% 26%, rgba(255, 170, 40, 0.75) 0%, rgba(200, 60, 120, 0.7) 45%, rgba(40, 10, 80, 0.95) 100% ); }
.end-rays {
  position: absolute; left: 50%; top: 22%; width: 2600px; height: 2600px; margin: -1300px 0 0 -1300px; pointer-events: none;
  background: repeating-conic-gradient( rgba(255, 255, 255, 0.07) 0deg 8deg, transparent 8deg 16deg );
  -webkit-mask: radial-gradient( circle, #000 0%, transparent 55% ); mask: radial-gradient( circle, #000 0%, transparent 55% );
  animation: spin 70s linear infinite;
}
.end.won .end-rays { background: repeating-conic-gradient( rgba(255, 236, 140, 0.2) 0deg 8deg, transparent 8deg 16deg ); }
/* 1580 px: standings, the tribe's stats and the squad list side by side inside the 1600 x 900 stage ( .ov-fit scales it ) */
.end-card { position: relative; width: 1580px; height: 800px; pointer-events: auto; }
.end-head { position: relative; height: 250px; display: flex; align-items: center; justify-content: center; gap: 28px; animation: cardIn 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
.end-crown { display: none; position: absolute; left: 50%; top: -66px; z-index: 2; font-size: 96px; color: var(--banana); transform: translateX(-50%) rotate(-8deg); animation: crownBob 2s ease-in-out infinite; }
.end.won .end-crown { display: block; }
.end.won .end-head { padding-top: 30px; }
.end-place { position: relative; width: 250px; height: 200px; display: grid; place-items: center; transform: rotate(-5deg); flex: none; }
.end-place .bz { position: absolute; inset: 0; width: 100%; height: 100%; animation: burstWiggle 2.4s ease-in-out infinite; }
.end:not(.won) .end-place .bz-o { fill: var(--magenta); }
.end:not(.won) .end-place .bz-i { fill: var(--purple); }
.end-place b { position: relative; font-size: 96px; color: var(--white); --sw: 14px; --sd: 8px; }
.end-titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.end-title { font-size: 62px; color: var(--banana); --sw: 13px; --sd: 7px; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
.end-pill { align-self: flex-start; max-width: 700px; }
.subpill > .end-sub { font-size: 18px; }
@keyframes crownBob { 0%, 100% { transform: translateX(-50%) rotate(-8deg) translateY(0); } 50% { transform: translateX(-50%) rotate(6deg) translateY(-8px); } }
.end-body { display: flex; gap: 30px; margin-top: 26px; height: 400px; }
.end-table { flex: 1.22; padding: 34px 22px 18px; border-radius: 30px; animation: cardIn 0.4s 0.05s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
.end-stats { flex: 1.13; padding: 34px 22px 18px; border-radius: 30px; animation: cardIn 0.4s 0.1s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
.et-head, .et-row { display: grid; grid-template-columns: 74px 1fr 64px 76px 64px; align-items: center; gap: 8px; }
.et-head { padding: 0 12px 8px; font: 900 15.5px/1 var(--font); letter-spacing: 0.05em; color: var(--cream); text-shadow: 0 2px 0 rgba(26, 8, 60, 0.7); }
.et-head span:nth-child(n+3) { text-align: center; }
.et-row {
  height: 48px; margin-bottom: 6px; padding: 0 12px; border: 3px solid var(--ol); border-radius: 16px;
  background: rgba(20, 6, 50, 0.5); box-shadow: 2px 3px 0 var(--ol); animation: rowIn 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
  animation-delay: calc( 0.1s + var(--i) * 0.035s );
}
/* the winner's row is solid gold with ink type (~12:1); the player's own row, when it did not win, is teal */
.et-row.first { background: var(--g-gold); }
.et-row.me:not(.first) { background: var(--dots), var(--g-teal); }
.et-place { display: flex; align-items: center; gap: 2px; font-size: 22px; --sw: 5px; --sd: 2px; }
.et-place .gl { font-size: 20px; color: var(--banana); }
.et-tribe { display: flex; align-items: center; gap: 10px; min-width: 0; }
.et-b { --bs: 34px; }
.et-name { font-size: 17px; --sw: 5px; --sd: 2px; white-space: nowrap; }
.et-row.me .et-name { color: var(--cream) !important; }
.et-row.first .et-name, .et-row.first .et-v, .et-row.first .et-place { color: var(--ol) !important; --sw: 0px; --sd: 0px; }
.et-row.first .et-place .gl { color: var(--ol); }
.et-v { text-align: center; font-size: 18px; --sw: 4px; --sd: 2px; font-variant-numeric: tabular-nums; }
@keyframes rowIn { 0% { transform: translateX(-40px) scale(0.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.es-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 10px; }
.es {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0;
  height: 78px; padding: 0 8px; border: 3px solid var(--ol); border-radius: 18px; background: rgba(20, 6, 50, 0.5); box-shadow: 2px 3px 0 var(--ol);
  animation: rowIn 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; animation-delay: calc( 0.14s + var(--i) * 0.03s );
}
.es-ico { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; font-size: 26px; border-radius: 50%; border: 3px solid var(--ol); background: var(--g-gold); color: var(--cream); }
/* child 1 is the MVP tile: the nine stat tiles keep gold / teal / magenta across each row */
.es:nth-child(3n) .es-ico { background: var(--g-teal); }
.es:nth-child(3n+4) .es-ico { background: var(--g-mag); }
.es-v, .es-n { font-size: 25px; white-space: nowrap; --sw: 5px; --sd: 3px; color: var(--banana); align-self: end; font-variant-numeric: tabular-nums; }
.es-l { font: 900 15.5px/1 var(--font); letter-spacing: 0.01em; color: var(--lilac); align-self: start; margin-top: 3px; white-space: nowrap; }
/* MVP: the player's archer with the most KOs, across the whole first row (portrait, name, KOs) */
.es.es-mvp { position: relative; grid-column: 1 / -1; grid-template-columns: 60px 1fr; padding: 0 12px; background: linear-gradient( 90deg, rgba(255, 210, 31, 0.3), rgba(20, 6, 50, 0.5) 70% ); }
.es-port { grid-row: span 2; width: 60px; height: 60px; padding: 2px; border: 3px solid var(--ol); border-radius: 50%; background: var(--g-gold); object-fit: contain; box-shadow: 2px 3px 0 var(--ol); }
.es-mvp .es-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-bottom: 3px; }
.es-mvp .es-l { color: var(--cream); }
.es-mvp-tag {
  position: absolute; right: 14px; top: -12px; padding: 3px 10px 4px; font-size: 16px; --sw: 3px; --sd: 1px; color: var(--cream);
  border: 3px solid var(--ol); border-radius: 9px; background: var(--g-red); transform: rotate(4deg); box-shadow: 2px 2px 0 var(--ol);
}
/* the player's archers by KOs ( ui.js showEnd: one ranking with the MVP tile, so the gold row is the MVP ); the fallen grey out */
.end-squad { flex: none; width: 320px; display: flex; flex-direction: column; padding: 34px 14px 16px; border-radius: 30px; animation: cardIn 0.4s 0.15s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
.ek-head { display: flex; justify-content: space-between; padding: 0 14px 8px 12px; font: 900 15.5px/1 var(--font); letter-spacing: 0.05em; color: var(--cream); text-shadow: 0 2px 0 rgba(26, 8, 60, 0.7); }
.ek-rows { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-right: -6px; padding: 0 6px 4px 0; scrollbar-width: thin; scrollbar-color: var(--lilac) transparent; }
.ek-row {
  display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; column-gap: 7px; height: 36px; margin-bottom: 5px; padding: 0 12px 0 6px;
  border: 3px solid var(--ol); border-left: 7px solid var(--tc, var(--grey)); border-radius: 13px; background: rgba(20, 6, 50, 0.5); box-shadow: 2px 3px 0 var(--ol);
  animation: rowIn 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; animation-delay: calc( 0.24s + var(--i) * 0.035s );
}
.ek-row.mvp { background: var(--g-gold); }
.ek-rk { text-align: center; font-size: 16px; --sw: 4px; --sd: 1px; color: var(--cream); font-variant-numeric: tabular-nums; }
.ek-rk .gl { font-size: 20px; color: var(--ol); vertical-align: -3px; }
.ek-port { width: 30px; height: 30px; padding: 1px; border: 2.5px solid var(--ol); border-radius: 50%; object-fit: contain;
  background: radial-gradient( circle at 40% 30%, var(--tl, var(--cream-d)) 0%, var(--tc, var(--grey)) 60%, var(--td, var(--ol2)) 100% ); }
.ek-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ek-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; --sw: 4px; --sd: 2px; color: var(--tl, var(--cream)); padding-bottom: 1px; }
.ek-sub { display: flex; align-items: center; gap: 4px; flex: none; }
.ek-lv { font: 900 13px/1 'Segoe UI Symbol', var(--font); font-style: normal; color: var(--banana); -webkit-text-stroke: 2.5px var(--ol); paint-order: stroke fill; letter-spacing: -1px; }
.ek-tag { padding: 2px 4px 3px; font: 900 10.5px/1 var(--font); font-style: normal; letter-spacing: 0.04em; --sw: 3px; --sd: 0px; color: var(--cream); border: 2px solid var(--ol); border-radius: 6px; background: var(--g-red); transform: rotate(-4deg); }
.ek-v { min-width: 30px; text-align: right; font-size: 20px; --sw: 4px; --sd: 2px; color: var(--banana); font-variant-numeric: tabular-nums; }
.ek-row.mvp .ek-n, .ek-row.mvp .ek-v, .ek-row.mvp .ek-rk { color: var(--ol); --sw: 0px; --sd: 0px; }
.ek-row.fallen:not(.mvp) { background: rgba(20, 6, 50, 0.32); }
.ek-row.fallen .ek-port { filter: grayscale(1) brightness(0.8); }
.ek-row.fallen:not(.mvp) .ek-n { color: var(--lilac); }
/* 9+ archers ( ui.js SQUAD_ROWS ): a wider card with two compact columns ranked down the left one first ( --rows per column );
   ui.js fitSquad sets the row height --rh to fill the list, and past its minimum the list scrolls under .ek-more. The fallen
   keep their grey row and portrait, without the FALLEN tag */
.ek-h { display: flex; justify-content: space-between; flex: 1; }
.ek-h2 { display: none; }
.end-body:has( .end-squad.cols ) { gap: 22px; }
.end-squad.cols { width: 410px; padding-left: 12px; padding-right: 12px; }
.end-squad.cols .ek-head { gap: 16px; padding: 0 10px 6px 8px; }
.end-squad.cols .ek-h2 { display: flex; }
.end-squad.cols .ek-rows { display: grid; grid-auto-flow: column; grid-template-rows: repeat( var(--rows, 10), var(--rh, 28px) ); grid-template-columns: 1fr 1fr; gap: 3px 6px; align-content: start; }
.end-squad.cols .ek-row { height: var(--rh, 28px); margin: 0; grid-template-columns: 18px calc( var(--rh, 28px) - 6px ) 1fr auto; column-gap: 4px; padding: 0 7px 0 3px; border-width: 2.5px; border-left-width: 6px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ol); }
.end-squad.cols .ek-rk { font-size: 13px; --sw: 3px; }
.end-squad.cols .ek-rk .gl { font-size: 16px; }
.end-squad.cols .ek-port { width: calc( var(--rh, 28px) - 6px ); height: calc( var(--rh, 28px) - 6px ); border-width: 2px; }
.end-squad.cols .ek-n { font-size: 13.5px; --sw: 3px; --sd: 1px; }
.end-squad.cols .ek-lv { font-size: 10.5px; -webkit-text-stroke-width: 2px; }
.end-squad.cols .ek-tag { display: none; }
.end-squad.cols .ek-v { min-width: 18px; font-size: 16px; --sw: 3px; }
.end-squad.cols .ek-row.mvp :is( .ek-n, .ek-v, .ek-rk ) { --sw: 0px; --sd: 0px; }
.ek-more { flex: none; margin-top: 4px; text-align: center; font: 900 13px/1 var(--font); letter-spacing: 0.06em; color: var(--banana); --sw: 3px; --sd: 1px; }
.end-btns { margin-top: 30px; }
.end-btns .btn { width: 300px; animation: cardIn 0.4s 0.16s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }

/* ================================================================ tooltip */
.tip {
  position: fixed; left: 0; top: 0; max-width: 320px; padding: 12px 16px 14px; border-radius: 16px; pointer-events: none;
  font: 700 14px/1.4 var(--font2); box-shadow: var(--stk-ring), 4px 5px 0 var(--ol); transform-origin: 0 0;
}
.tip-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.tip-n { font: 900 18px/1.1 var(--font); color: var(--banana); --sw: 4px; --sd: 2px; }
.tip-d { color: var(--cream); }
.tip-m { margin-top: 6px; font: 900 var(--lbl)/1 var(--font); letter-spacing: 0.04em; color: var(--banana-l); }

/* ================================================================ main menu */
.menu { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; }
.mn-bg { position: absolute; inset: 0; background: radial-gradient( ellipse 72% 64% at 50% 30%, rgba(255, 196, 70, 0.42) 0%, rgba(255, 110, 60, 0.18) 38%, rgba(70, 22, 130, 0.62) 72%, rgba(24, 8, 58, 0.9) 100% ); }
.mn-rays {
  position: absolute; left: 50%; top: 24%; width: 2800px; height: 2800px; margin: -1400px 0 0 -1400px;
  background: repeating-conic-gradient( rgba(255, 228, 120, 0.15) 0deg 9deg, rgba(255, 228, 120, 0) 9deg 18deg );
  -webkit-mask: radial-gradient( circle, #000 0%, rgba(0, 0, 0, 0.5) 28%, transparent 56% ); mask: radial-gradient( circle, #000 0%, rgba(0, 0, 0, 0.5) 28%, transparent 56% );
  animation: spin 100s linear infinite;
}
.mn-pattern {
  position: absolute; inset: -120px; opacity: 0.9; animation: drift 40s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Cpath d='M14 40c10 14 34 15 46-10 1-3 3-5 2-7-3 1-5 3-6 5-8 15-24 19-40 10z'/%3E%3Cpath transform='translate(70 70) rotate(35 30 30)' d='M14 40c10 14 34 15 46-10 1-3 3-5 2-7-3 1-5 3-6 5-8 15-24 19-40 10z'/%3E%3Ccircle cx='110' cy='22' r='3'/%3E%3Ccircle cx='30' cy='112' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.mn-vig { position: absolute; inset: 0; background: radial-gradient( ellipse 90% 85% at 50% 45%, transparent 60%, rgba(14, 4, 34, 0.75) 100% ); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translate(140px, 140px); } }

.mn-floaters { position: absolute; inset: 0; pointer-events: none; }
.floater {
  position: absolute; width: 90px; left: calc( 6% + var(--i) * 14% ); top: 100%;
  animation: floatUp calc( 16s + var(--i) * 2.3s ) linear infinite; animation-delay: calc( var(--i) * -4.1s ); opacity: 0.8;
}
.floater:nth-child(2n) { width: 60px; opacity: 0.6; }
.floater .banana-svg { width: 100%; display: block; animation: spinSlow calc( 5s + var(--i) * 0.7s ) ease-in-out infinite alternate; }
@keyframes floatUp { to { transform: translateY( calc( -100vh - 160px ) ); } }
@keyframes spinSlow { from { transform: rotate(-30deg); } to { transform: rotate(40deg); } }

.mn-leaves { position: absolute; width: 360px; pointer-events: none; animation: sway 5s ease-in-out infinite; }
.mn-leaves .leaf-svg { width: 100%; display: block; }
.l-tl { left: -40px; top: -40px; transform-origin: 0 0; }
.l-tr { right: -40px; top: -40px; transform-origin: 100% 0; animation-delay: -2.5s; }
@keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }

.mn-stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; margin: -450px 0 0 -800px; transform: scale(var(--fit)); }

/* ---------------- logo: per-letter layers (outline+extrude, extrude colour, cream ring, gradient face) */
.logo { position: absolute; left: 50%; top: 18px; width: 980px; height: 350px; margin-left: -490px; animation: logoIn 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.logo-burst { position: absolute; left: 50%; top: 47%; width: 960px; height: 390px; transform: translate(-50%, -50%); }
.logo-burst .bz { width: 100%; height: 100%; animation: burstWiggle 4s ease-in-out infinite; }
.bz-logo .bz-o { fill: var(--magenta); stroke-width: 6px; }
.bz-logo .bz-i { fill: var(--violet); stroke: var(--cream); stroke-width: 4px; }
.logo-line { position: relative; display: flex; justify-content: center; line-height: 0.92; letter-spacing: -0.01em; }
.l1 { font-size: 176px; margin-top: 18px; }
.l2 { font-size: 104px; margin-top: -4px; }
.lt { position: relative; display: inline-block; transform-origin: 50% 85%; animation: ltWob 2.8s ease-in-out infinite; animation-delay: calc( var(--i) * -0.25s ); }
.lt > span { display: block; }
.lt-o, .lt-e, .lt-c { position: absolute; left: 0; top: 0; }
.lt-o { color: var(--ol); -webkit-text-stroke: 0.21em var(--ol); text-shadow: 0 0.1em 0 var(--ol), 0.04em 0.15em 0 rgba(20, 4, 40, 0.45); }
.lt-e { top: 0.075em; color: #d2560e; -webkit-text-stroke: 0.07em #b8460a; }
.lt-c { color: var(--cream); -webkit-text-stroke: 0.105em var(--cream); }
.lt-f {
  position: relative; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient( 180deg, #fffde6 0%, #fff27a 20%, #ffd21f 45%, #ffad18 70%, #ff7a1c 100% );
}
.l2 .lt-f { background-image: linear-gradient( 180deg, #fffde6 0%, #8ff7ea 22%, #2fd8c9 50%, #12a3c4 78%, #2e6ad8 100% ); }
.l2 .lt-e { color: #2b4ab0; -webkit-text-stroke: 0.07em #213a96; }
@keyframes ltWob { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-7px); } }
@keyframes logoIn { 0% { transform: scale(0.2) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.logo-banana { position: absolute; right: 64px; top: 26px; width: 180px; transform: rotate(-24deg); animation: bananaBob 3.2s ease-in-out infinite; }
.logo-banana .banana-svg { width: 100%; display: block; }
@keyframes bananaBob { 0%, 100% { transform: rotate(-24deg) translateY(0); } 50% { transform: rotate(-14deg) translateY(-10px); } }
.logo-sub { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%) rotate(-2deg); }
.logo-sub span {
  position: relative; display: block; padding: 10px 34px 12px; font-size: 30px; letter-spacing: 0.1em; white-space: nowrap; --sw: 7px; --sd: 4px;
  border: 4px solid var(--ol); border-radius: 14px; background: var(--dots), var(--g-night);
  box-shadow: inset 0 0 0 2.5px var(--cream), 5px 6px 0 var(--ol);
}
.logo-sub::before, .logo-sub::after {
  content: ''; position: absolute; top: 14px; width: 54px; height: 50px; border: 4px solid var(--ol); background: var(--g-mag); z-index: -1;
}
.logo-sub::before { left: -38px; border-radius: 10px 0 0 10px; clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, 30% 50% ); }
.logo-sub::after { right: -38px; border-radius: 0 10px 10px 0; clip-path: polygon( 0 0, 100% 0, 70% 50%, 100% 100%, 0 100% ); }

/* ---------------- menu body */
.mn-row { position: absolute; left: 0; right: 0; top: 396px; display: flex; justify-content: center; align-items: flex-start; gap: 56px; }
.card.mn-setup, .card.mn-sound { width: 430px; min-height: 272px; padding: 28px 26px 20px; border-radius: 30px; animation: cardIn 0.6s 0.15s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
.mn-sound { animation-delay: 0.25s !important; }
.fld + .fld { margin-top: 10px; }
.fld-l { margin-bottom: 7px; font-size: 15.5px; letter-spacing: 0.08em; color: var(--banana); --sw: 4px; --sd: 2px; }
.pills { display: flex; gap: 8px; }
.pill { flex: 1; padding: 12px 0 13px; font-size: 17px; border-radius: 14px; }
.pill.on { background: var(--g-gold); transform: translateY(-3px) rotate(-2deg); }
.pill.on:hover { transform: translateY(-3px) rotate(-2deg) scale(1.04); }
.seed { display: flex; gap: 10px; }
.seed-in {
  flex: 1; min-width: 0; height: 50px; padding: 0 16px; pointer-events: auto; user-select: text; -webkit-user-select: text; outline: none;
  font: 900 19px/1 var(--font); color: var(--ol); letter-spacing: 0.04em;
  border: 4px solid var(--ol); border-radius: 15px; background: var(--g-keycap);
  box-shadow: inset 0 4px 0 rgba(42, 18, 6, 0.14), 3px 4px 0 var(--ol);
}
.seed-in::placeholder { color: rgba(42, 18, 6, 0.6); }
.seed-in:focus { box-shadow: inset 0 4px 0 rgba(42, 18, 6, 0.14), 3px 4px 0 var(--ol), 0 0 0 4px var(--teal); }
.dice { width: 54px; height: 50px; padding: 0; display: grid; place-items: center; font-size: 30px; background: var(--g-gold); color: var(--cream); }

.mn-center { width: 420px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 6px; }
.play-wrap { position: relative; width: 400px; height: 190px; display: grid; place-items: center; }
.play-burst { position: absolute; left: 50%; top: 50%; width: 520px; height: 250px; transform: translate(-50%, -50%); pointer-events: none; animation: playBurst 3s ease-in-out infinite; }
.play-burst .bz { width: 100%; height: 100%; }
.bz-play .bz-o { fill: var(--teal); stroke-width: 5px; }
.bz-play .bz-i { fill: color-mix( in srgb, var(--teal) 45%, var(--white) ); stroke-width: 3px; }
.btn.play {
  width: 340px; height: 132px; padding: 0; border-radius: 34px; overflow: hidden; font-size: 82px;
  -webkit-text-stroke: 0; text-shadow: none; box-shadow: inset 0 0 0 3px var(--cream), inset 0 -12px 0 3px rgba(150, 50, 0, 0.3), 6px 8px 0 var(--ol);
}
.play-t { position: relative; z-index: 2; display: block; color: var(--cream); --sw: 15px; --sd: 8px; letter-spacing: 0.02em; transform-origin: 50% 80%; animation: playBounce 1.5s ease-in-out infinite; }
.play-shine {
  position: absolute; top: -20px; bottom: -20px; left: -40%; width: 26%; z-index: 1; pointer-events: none;
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.75), transparent ); transform: skewX(-20deg);
  animation: shine 2.8s ease-in-out infinite;
}
@keyframes playBounce { 0%, 100% { transform: rotate(-3deg) translateY(2px) scale(1); } 45% { transform: rotate(-3deg) translateY(-9px) scale(0.97, 1.05); } 60% { transform: rotate(-3deg) translateY(3px) scale(1.07, 0.92); } 75% { transform: rotate(-3deg) translateY(-1px) scale(0.99, 1.02); } }
@keyframes playBurst { 0%, 100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); } 50% { transform: translate(-50%, -50%) rotate(3deg) scale(1.05); } }
/* PLAY hover: the button grows and tilts inside a banana glow ring, the burst behind it swells and spins up */
.btn.play:hover {
  transform: scale(1.08) rotate(-2deg); animation: playHover 0.42s cubic-bezier(0.2, 1.6, 0.4, 1); filter: brightness(1.08) saturate(1.15);
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 -12px 0 3px rgba(150, 50, 0, 0.3), 0 0 0 6px var(--banana-l), 0 0 0 9px var(--ol), 6px 10px 0 9px var(--ol);
}
.btn.play:active {
  transform: translate(2px, 3px) scale(1.03) rotate(-2deg); animation: none;
  box-shadow: inset 0 0 0 3px var(--cream), inset 0 -6px 0 3px rgba(150, 50, 0, 0.3), 0 0 0 6px var(--banana-l), 0 0 0 9px var(--ol), 2px 3px 0 9px var(--ol);
}
.btn.play:hover .play-shine { animation-duration: 1.1s; }
.play-wrap:hover .play-burst { transform: translate(-50%, -50%) scale(1.14); animation: playBurstHot 1.1s ease-in-out infinite; }
@keyframes playHover { 0% { transform: scale(1) rotate(0); } 55% { transform: scale(1.13) rotate(-3.5deg); } 100% { transform: scale(1.08) rotate(-2deg); } }
@keyframes playBurstHot { 0%, 100% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.12); } 50% { transform: translate(-50%, -50%) rotate(5deg) scale(1.2); } }
@keyframes shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.play-hint { position: relative; margin-top: -30px; padding: 5px 12px 6px; font: 700 15.5px/1 var(--font2); color: var(--cream); border-radius: 12px; background: rgba(20, 6, 50, 0.7); }
.mn-center .btn.mid { margin-top: 4px; }

/* settings block (menu card + pause card): a VOLUME / AUDIO / SCREEN tab strip over stacked pages; the inactive pages stay
   laid out (visibility only), so the block always has the tallest page's height and the card never jumps */
.set-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 6px; border: 3px solid var(--ol); border-radius: 15px; background: rgba(20, 6, 50, 0.55); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25); }
.btn.stab { flex: 1; padding: 7px 0 8px; font-size: 15.5px; letter-spacing: 0.04em; border-width: 3px; border-radius: 11px; -webkit-text-stroke-width: 3px; box-shadow: inset 0 0 0 1.5px var(--cream), 2px 2px 0 var(--ol); }
.btn.stab:not(.on) { background: transparent; box-shadow: none; border-color: transparent; color: var(--lilac); }
.btn.stab:not(.on)::before { display: none; }
.btn.stab.on { background: var(--dots), var(--g-teal); }
.set-pages { display: grid; }
/* every page stretches to the tallest one and spreads its rows evenly (SCREEN holds five rows in the VOLUME page's height) */
.set-page { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-around; }
.set-page:not(.on) { visibility: hidden; }
.vol { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: 12px; margin: 3px 0; pointer-events: auto; }
.vol-l { font-size: 15.5px; letter-spacing: 0.04em; --sw: 4px; --sd: 2px; }
.vol-v { text-align: right; font-size: 16px; --sw: 4px; --sd: 2px; color: var(--banana); font-variant-numeric: tabular-nums; }
.vol input { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; pointer-events: auto; }
.vol input:focus { outline: none; }
.vol input:focus-visible::-webkit-slider-thumb { box-shadow: inset 0 0 0 2px var(--cream), 2px 3px 0 var(--ol), 0 0 0 4px var(--teal); }
.set-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin: 2px 0; }
.set-row .pills { gap: 7px; }
.set-l { font-size: 15.5px; letter-spacing: 0.02em; --sw: 4px; --sd: 2px; }
.set-note { margin-top: 6px; }
.set-n { font: 700 15px/1.3 var(--font2); color: var(--cream); }
.btn.opt, .btn.set-btn { flex: 1; min-width: 0; padding: 4px 0 5px; font-size: 15.5px; border-width: 3px; border-radius: 12px; -webkit-text-stroke-width: 3px; }
.btn.opt.on { background: var(--g-gold); transform: translateY(-2px) rotate(-2deg); }
.btn.opt.on:hover { transform: translateY(-2px) rotate(-2deg) scale(1.04); }
.vol input::-webkit-slider-runnable-track {
  height: 20px; border: 3px solid var(--ol); border-radius: 11px; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25), 2px 3px 0 var(--ol);
  background: linear-gradient( 90deg, var(--orange) 0%, var(--banana) calc( var(--v, 50) * 1% ), var(--track) calc( var(--v, 50) * 1% ) );
}
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 32px; height: 32px; margin-top: -9px; border-radius: 50%; border: 3px solid var(--ol);
  background: radial-gradient( circle at 35% 30%, var(--white) 0 10%, var(--banana) 35%, var(--orange) 80% ); box-shadow: inset 0 0 0 2px var(--cream), 2px 3px 0 var(--ol);
}
.vol input::-moz-range-track { height: 14px; border: 3px solid var(--ol); border-radius: 11px; background: linear-gradient( 90deg, var(--orange) 0%, var(--banana) calc( var(--v, 50) * 1% ), var(--track) calc( var(--v, 50) * 1% ) ); }
.vol input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ol); background: radial-gradient( circle at 35% 30%, var(--white) 0 10%, var(--banana) 35%, var(--orange) 80% ); }

/* ---------------- roster strip */
.mn-roster { position: absolute; left: 0; right: 0; top: 724px; display: flex; justify-content: center; gap: 20px; }
.rcard {
  position: relative; width: 198px; height: 156px; padding-top: 4px; text-align: center; border: 4px solid var(--ol); border-radius: 26px;
  background: var(--dots), radial-gradient( circle at 50% 26%, var(--tl) 0%, var(--tc) 46%, var(--td) 100% );
  box-shadow: inset 0 0 0 2.5px var(--cream), inset 0 -12px 0 2.5px rgba(0, 0, 0, 0.2), 5px 6px 0 var(--ol);
  transform: rotate(var(--r)); transition: transform 0.25s cubic-bezier(0.2, 1.6, 0.4, 1), filter 0.25s;
  animation: rcIn 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) backwards; animation-delay: calc( 0.3s + var(--i, 0) * 0.05s );
}
.rcard:hover { transform: rotate(0) translateY(-10px) scale(1.06); }
.rcard:active { transform: rotate(0) translateY(-6px) scale(0.98); transition-duration: 0.06s; }
.rc-port { height: 102px; display: grid; place-items: center; }
.rc-img { width: 108px; height: 102px; object-fit: contain; }
.rc-badge { position: absolute; left: -14px; top: -16px; --bs: 48px; }
.rc-name { margin-top: 2px; padding: 0 8px; font-size: 16px; line-height: 1.05; --sw: 5px; --sd: 2px; }
.rc-tag {
  position: absolute; right: -12px; top: -15px; padding: 4px 9px 5px; font-size: 15.5px; --sw: 3px; --sd: 1px;
  border: 3px solid var(--ol); border-radius: 10px; background: var(--g-night); transform: rotate(8deg); box-shadow: 2px 2px 0 var(--ol);
}
.rc-off { display: none; position: absolute; left: 50%; top: 38%; padding: 6px 12px; font-size: 18px; --sw: 5px; border: 3px solid var(--ol); border-radius: 10px; background: var(--g-red); transform: translate(-50%, -50%) rotate(-12deg); white-space: nowrap; }
.rcard.off { filter: grayscale(0.85) brightness(0.62); transform: rotate(var(--r)) scale(0.92); }
.rcard.off .rc-off { display: block; filter: grayscale(0) brightness(1.4); }
@keyframes rcIn { 0% { transform: translateY(80px) scale(0.6); opacity: 0; } 100% { transform: rotate(var(--r)); opacity: 1; } }

/* ---------------- how to play */
.howto { position: absolute; inset: 0; z-index: 10; }
/* the card + the 76 px burst hanging above it are centred together, so the burst never leaves the top of the screen */
.howto .ov-fit { top: calc( 50% + 38px * var(--fit) ); }
.howto-card {
  width: 1440px; padding: 64px 40px 26px; border-radius: 36px;
  animation: cardIn 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.howto-card .card-burst { width: 540px; height: 140px; top: -76px; }
.x-btn { position: absolute; right: -18px; top: -18px; width: 60px; height: 60px; padding: 0; display: grid; place-items: center; font-size: 30px; border-radius: 50%; background: var(--dots), var(--g-red); }
.ht-intro { margin: 0 0 12px; padding: 8px 16px 9px; text-align: center; font: 700 18px/1.4 var(--font2); color: var(--cream); border-radius: 14px; background: rgba(20, 6, 50, 0.45); }
.ht-intro b { color: var(--banana); }
.ht-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; }
.ht-h { margin: 0 0 9px; font-size: 22px; letter-spacing: 0.08em; color: var(--banana); --sw: 5px; --sd: 3px; }
.ht-h2 { margin-top: 14px; }
.hk { display: grid; grid-template-columns: 176px 1fr; align-items: center; gap: 12px; min-height: 38px; padding: 3px 10px; border-radius: 12px; font: 700 16px/1.3 var(--font2); }
.hk:nth-child(odd) { background: rgba(20, 6, 50, 0.35); }
.hk-keys { display: flex; align-items: center; flex-wrap: wrap; }
.hk-keys i { font: 900 15.5px/1 var(--font); font-style: normal; color: var(--banana); margin: 0 1px; }
.hk-t kbd { min-width: 26px; height: 26px; }
.gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.gd { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 3px solid var(--ol); border-radius: 16px; background: rgba(20, 6, 50, 0.45); box-shadow: 2px 3px 0 var(--ol); }
.gd-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; border: 3px solid var(--ol); background: var(--g-coin); box-shadow: inset 0 0 0 2px var(--cream); }
.gd-ico img { width: 42px; height: 42px; object-fit: contain; }
.gd > span:last-child { display: flex; flex-direction: column; gap: 3px; font: 700 15.5px/1.25 var(--font2); color: var(--cream); }
.gd b { font: 900 16px/1.1 var(--font); color: var(--banana); --sw: 4px; --sd: 2px; }
.gd-storm { font-size: 34px; color: var(--banana); display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient( circle at 35% 30%, var(--storm-l) 0%, var(--purple) 45%, var(--storm) 100% ); }
.gd-stars { font-size: 34px; color: var(--banana); }

/* ================================================================ motion preference */
/* MOTION: REDUCED (SCREEN settings; seeded from prefers-reduced-motion, persisted) puts .calm on #ui */
#ui.calm *, #ui.calm *::before, #ui.calm *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }