/* ==========================================================================
   LTLcade — The Limetree Labs Arcade
   Brand: dark teal #0F3540 · lime #8EC84F · wordmark teal #1E6E77
   Type: Press Start 2P (arcade) · Space Grotesk (UI) · Space Mono (numbers)
   ========================================================================== */
:root {
  --ink: #EAF7EE;
  --ink-2: #A9C6C2;
  --ink-3: #6E9A98;
  --bg: #040D10;
  --bg-2: #06171C;
  --panel: #0A2128;
  --panel-2: #0D2A33;
  --line: rgba(142, 200, 79, 0.16);
  --line-2: rgba(142, 200, 79, 0.32);
  --teal: #0F3540;
  --teal-mid: #1E6E77;
  --lime: #8EC84F;
  --lime-hot: #B6F36A;
  --gold: #FFD24D;
  --silver: #C9D6E2;
  --bronze: #E09A5A;
  --magenta: #FF3EA5;
  --cyan: #3EF2FF;
  --red: #FF4D5E;
  --arcade: "Press Start 2P", "Space Mono", monospace;
  --sans: "Space Grotesk", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.in-game { overflow: hidden; }
a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--lime-hot); }
kbd {
  font-family: var(--mono); font-size: 0.78em; line-height: 1;
  display: inline-block; padding: 3px 6px; margin: 0 2px;
  border: 1px solid var(--line-2); border-bottom-width: 3px; border-radius: 5px;
  background: #0b242b; color: var(--ink);
}
code { font-family: var(--mono); color: var(--lime-hot); background: rgba(142,200,79,.08); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }
.muted { color: var(--ink-3); }
.crown { color: var(--gold); text-shadow: 0 0 10px rgba(255, 210, 77, .6); }

/* ---------- animated backdrop ---------- */
#bg-fx {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(30, 110, 119, .35), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(142, 200, 79, .10), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(255, 62, 165, .08), transparent 60%),
    var(--bg);
}
#bg-fx::after {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%;
  background-image:
    linear-gradient(rgba(142, 200, 79, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 200, 79, .22) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, rgba(0,0,0,.65), transparent 85%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.65), transparent 85%);
  animation: gridscroll 4s linear infinite;
}
@keyframes gridscroll { to { background-position: 0 60px, 0 0; } }
body.in-game #bg-fx::after { display: none; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--arcade); font-size: 10px; letter-spacing: .04em;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  color: var(--ink); background: #0d2a33; border: 1px solid var(--line-2);
  box-shadow: 0 3px 0 #031014, inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .08s, box-shadow .08s, background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.btn:hover { border-color: var(--lime); color: #fff; background: #113642; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #031014; }
.btn-primary { background: var(--lime); color: #082015; border-color: var(--lime-hot); box-shadow: 0 3px 0 #3e6a1c, 0 0 24px rgba(142,200,79,.35); }
.btn-primary:hover { background: var(--lime-hot); color: #082015; }
.btn kbd { font-size: 9px; padding: 2px 4px; background: rgba(0,0,0,.2); border-color: rgba(0,0,0,.3); color: inherit; }
.tool {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 16px;
  background: #0b242b; border: 1px solid var(--line); color: var(--ink);
}
.tool:hover { border-color: var(--lime); }
.tool.off { opacity: .6; }
.link { background: none; border: 0; color: var(--lime); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: linear-gradient(to bottom, rgba(4, 13, 16, .96), rgba(4, 13, 16, .82));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.logo-mark { width: 40px; height: 40px; filter: drop-shadow(0 0 8px rgba(142,200,79,.55)); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.logo-word { font-family: var(--arcade); font-size: 22px; letter-spacing: .02em; }
.w-ltl { color: var(--lime); text-shadow: 0 0 6px rgba(142,200,79,.9), 0 0 22px rgba(142,200,79,.5); }
.w-cade { color: #fff; text-shadow: 0 0 6px rgba(62,242,255,.8), 0 0 24px rgba(62,242,255,.45); animation: flicker 6s infinite; }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } 97% { opacity: 1; } }
.tabs { display: flex; gap: 6px; margin-left: 8px; }
.tab {
  font-family: var(--arcade); font-size: 10px; color: var(--ink-2);
  padding: 10px 14px; border-radius: 999px; border: 1px solid transparent;
}
.tab:hover { color: #fff; border-color: var(--line); }
.tab.on { color: #082015; background: var(--lime); box-shadow: 0 0 18px rgba(142,200,79,.4); }
.top-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.player-chip {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: #0b242b; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: 14px;
}
.player-chip:hover { border-color: var(--lime); }
.pc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.player-chip.anon .pc-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: blink 1s steps(2) infinite; }
.player-chip.anon .pc-name { font-family: var(--arcade); font-size: 9px; color: var(--gold); }

/* ---------- ticker ---------- */
.ticker {
  overflow: hidden; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(142,200,79,.07), rgba(30,110,119,.09), rgba(142,200,79,.07));
  font-size: 13px; color: var(--ink-2);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { display: inline-block; padding: 9px 0; animation: tick 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { margin: 0 6px; }
.tk b { color: var(--ink); }
.tk em { font-style: normal; font-family: var(--mono); font-weight: 700; }
.tk i { color: var(--ink-3); font-style: normal; font-size: 11px; margin-left: 4px; }
.ticker .sep { color: var(--lime); margin: 0 14px; opacity: .6; }

main { padding: 0 clamp(16px, 4vw, 40px) 40px; max-width: 1480px; margin: 0 auto; }

/* ---------- hero ---------- */
.hero { padding: 36px 0 26px; display: grid; grid-template-columns: 1fr; gap: 14px; }
.hero-title { font-family: var(--arcade); font-size: clamp(20px, 3.6vw, 38px); line-height: 1.35; margin: 0; }
.neon-lime { color: var(--lime-hot); text-shadow: 0 0 6px rgba(182,243,106,.9), 0 0 30px rgba(142,200,79,.6); animation: blinkSoft 2.4s ease-in-out infinite; }
@keyframes blinkSoft { 50% { opacity: .75; } }
.hero-sub { color: var(--ink-2); font-size: .45em; display: inline-block; vertical-align: middle; }
.hero-copy { max-width: 760px; color: var(--ink-2); font-size: 16px; margin: 0; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hs { padding: 10px 16px; border-radius: 12px; background: rgba(10,33,40,.75); border: 1px solid var(--line); min-width: 110px; }
.hs b { display: block; font-family: var(--mono); font-size: 22px; color: #fff; line-height: 1.1; }
.hs label { font-family: var(--arcade); font-size: 8px; color: var(--ink-3); letter-spacing: .06em; }
.hs.me { border-color: rgba(142,200,79,.35); background: rgba(142,200,79,.07); }
.hs.me b { color: var(--lime-hot); }

/* ---------- game grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.card {
  --gc: var(--lime);
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #0c2730, #081c22);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s, border-color .2s;
  outline: none;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 0%, transparent);
  transition: box-shadow .2s;
}
.card:hover, .card.sel, .card:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--gc) 70%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--gc) 60%, transparent), 0 0 34px color-mix(in srgb, var(--gc) 35%, transparent);
}
.card-screen { position: relative; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.card-screen canvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
.card-glare {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55)),
    linear-gradient(160deg, rgba(255,255,255,.10), transparent 35%);
}
.card-top {
  position: absolute; left: 10px; bottom: 10px; right: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff;
  padding: 5px 9px; border-radius: 8px; width: max-content; max-width: calc(100% - 20px);
  background: rgba(3,12,15,.78); border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-top .open { font-family: var(--arcade); font-size: 8px; color: var(--gold); animation: blink 1.2s steps(2) infinite; }
.card-body { padding: 14px 16px 16px; }
.card-genre { font-family: var(--arcade); font-size: 8px; color: var(--gc); letter-spacing: .08em; text-shadow: 0 0 10px color-mix(in srgb, var(--gc) 60%, transparent); }
.card-title { font-family: var(--arcade); font-size: 15px; margin: 8px 0 6px; line-height: 1.35; color: #fff; }
.card-tag { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; min-height: 42px; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.card-best label { display: block; font-family: var(--arcade); font-size: 7px; color: var(--ink-3); }
.card-best b { font-family: var(--mono); font-size: 18px; color: var(--lime-hot); }
.btn-play { background: var(--gc); color: #061114; border-color: transparent; box-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 18px color-mix(in srgb, var(--gc) 40%, transparent); }
.btn-play:hover { color: #061114; filter: brightness(1.12); background: var(--gc); }

/* ---------- section/hall ---------- */
.section-title { font-family: var(--arcade); font-size: clamp(16px, 2.4vw, 24px); margin: 34px 0 18px; color: #fff; text-shadow: 0 0 18px rgba(142,200,79,.4); }
.section-title.sm { font-size: 15px; margin-top: 40px; }
.hall-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #0b242b; border: 1px solid var(--line); }
.seg button { font-family: var(--arcade); font-size: 9px; padding: 9px 14px; border-radius: 999px; border: 0; background: none; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--lime); color: #082015; }
.panel { background: rgba(10, 33, 40, .82); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.panel h3 { font-family: var(--arcade); font-size: 11px; margin: 0 0 14px; color: var(--lime); line-height: 1.5; }
.panel h3 small { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; margin-bottom: 22px; max-width: 900px; margin-inline: auto; }
.pod { text-align: center; position: relative; }
.pod-name { font-weight: 700; font-size: 18px; color: #fff; }
.pod-pts { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--lime-hot); }
.pod-pts small { font-size: 12px; color: var(--ink-3); }
.pod-sub { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.pod-crown { font-size: 34px; color: var(--gold); text-shadow: 0 0 20px rgba(255,210,77,.8); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.pod-base { font-family: var(--arcade); font-size: 28px; color: #061114; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; }
.p1 .pod-base { height: 120px; background: linear-gradient(180deg, #ffe58a, #c99a1a); box-shadow: 0 0 40px rgba(255,210,77,.35); }
.p2 .pod-base { height: 86px; background: linear-gradient(180deg, #eef4fa, #8fa3b5); }
.p3 .pod-base { height: 64px; background: linear-gradient(180deg, #f3b47c, #a5612a); }
.pod.empty { opacity: .35; }
.pod.me .pod-name { color: var(--lime-hot); }
.empty-big { grid-column: 1 / -1; text-align: center; font-family: var(--arcade); font-size: 12px; color: var(--ink-3); padding: 30px; }
.hall-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
.mt { width: 100%; border-collapse: collapse; }
.mt th { font-family: var(--arcade); font-size: 8px; color: var(--ink-3); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); }
.mt td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.mt .num { text-align: right; font-family: var(--mono); }
.mt .pts { color: var(--lime-hot); font-weight: 700; font-size: 16px; }
.mt .rk { font-family: var(--arcade); font-size: 11px; color: var(--ink-3); width: 36px; }
.mt .rk.r1 { color: var(--gold); } .mt .rk.r2 { color: var(--silver); } .mt .rk.r3 { color: var(--bronze); }
.mt .nm { font-weight: 700; }
.mrow { cursor: pointer; }
.mrow:hover td { background: rgba(142,200,79,.05); }
.mrow.me td { background: rgba(142,200,79,.09); }
.mrow.me .nm { color: var(--lime-hot); }
.bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-mid), var(--lime)); border-radius: inherit; }
.mbests { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding: 4px 0 10px; }
.mb { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-2); padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.2); border-left: 3px solid var(--gc); }
.mb b { font-family: var(--mono); color: #fff; font-size: 13px; }
.mb b small { color: var(--ink-3); font-weight: 400; }
.mb.none { opacity: .45; }
.mb i { display: none; }
.champ { display: grid; grid-template-columns: 10px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--ink); }
.champ:hover { background: rgba(255,255,255,.03); color: #fff; }
.champ i { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 10px var(--gc); align-self: center; }
.champ .ct { font-family: var(--arcade); font-size: 8px; color: var(--gc); }
.champ .cn { grid-column: 2; font-weight: 700; font-size: 14px; }
.champ .cn em { color: var(--ink-3); font-weight: 400; }
.champ .cs { grid-row: 1 / 3; grid-column: 3; align-self: center; font-family: var(--mono); font-weight: 700; color: var(--gold); }
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.board h4 { display: flex; align-items: center; gap: 8px; font-family: var(--arcade); font-size: 10px; margin: 0 0 10px; color: #fff; line-height: 1.4; }
.board h4 i { width: 10px; height: 10px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 10px var(--gc); flex: none; }
.board h4 a { margin-left: auto; font-size: 8px; color: var(--gc); }

/* ---------- board lists (shared) ---------- */
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 6px; border-radius: 6px; font-size: 14px; }
.board-list li:nth-child(odd) { background: rgba(255,255,255,.025); }
.board-list .rk { font-family: var(--arcade); font-size: 9px; color: var(--ink-3); }
.board-list .r1 .rk { color: var(--gold); } .board-list .r2 .rk { color: var(--silver); } .board-list .r3 .rk { color: var(--bronze); }
.board-list .r1 .nm::after { content: " ♛"; color: var(--gold); }
.board-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .sc { font-family: var(--mono); font-weight: 700; color: #fff; }
.board-list li.me { background: rgba(142,200,79,.14); outline: 1px solid rgba(142,200,79,.35); }
.board-list li.me .nm { color: var(--lime-hot); font-weight: 700; }
.board-list li.empty { display: block; color: var(--ink-3); font-size: 13px; text-align: center; padding: 14px; }

/* ---------- how ---------- */
.how-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.how-grid p { color: var(--ink-2); margin: 0; }
.how-grid b { color: #fff; }

/* ---------- footer ---------- */
.foot { display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 18px clamp(16px, 4vw, 40px); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }
.mode { font-family: var(--mono); }
.mode.on { color: var(--lime); }
.mode.local { color: var(--gold); }

/* ---------- name modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(2, 8, 10, .78); backdrop-filter: blur(6px); padding: 16px; }
.modal-card { width: min(460px, 100%); text-align: center; padding: 28px 26px 22px; border-radius: 18px; background: linear-gradient(180deg, #0f2f39, #0a2128); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(142,200,79,.15); }
.modal-card h2 { font-family: var(--arcade); font-size: 20px; margin: 14px 0 10px; color: var(--gold); text-shadow: 0 0 16px rgba(255,210,77,.6); animation: blink 1.1s steps(2) infinite; }
.modal-card p { color: var(--ink-2); margin: 0 0 16px; }
.modal-card small { display: block; color: var(--ink-3); margin-top: 12px; }
.modal-card input, .name-form input, .inline-name input {
  width: 100%; padding: 14px 16px; border-radius: 10px; border: 2px solid var(--line-2);
  background: #041015; color: #fff; font-family: var(--mono); font-size: 18px; text-align: center; outline: none;
}
.modal-card input:focus, .name-form input:focus, .inline-name input:focus { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(142,200,79,.15); }
.err { color: var(--red); font-size: 13px; min-height: 20px; margin: 6px 0; }
.row { display: flex; gap: 10px; justify-content: center; }
.coin-slot { width: 64px; height: 84px; margin: 0 auto; border-radius: 10px; background: linear-gradient(180deg, #2a3a40, #11191c); border: 2px solid #3b5158; display: grid; place-items: center; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.coin-slot span { width: 8px; height: 42px; border-radius: 4px; background: #000; box-shadow: 0 0 12px rgba(255,77,94,.85), inset 0 0 4px rgba(255,77,94,.9); }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 1s steps(2) infinite; }

/* ==========================================================================
   GAME SCREEN
   ========================================================================== */
#game-screen { position: fixed; inset: 0; z-index: 50; background: #020809; }
.gs { --gc: var(--lime); height: 100%; display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 50% 30%, color-mix(in srgb, var(--gc) 9%, #03100f), #020809 70%); }
.gs-hud {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--gc) 25%, transparent);
  background: rgba(3, 12, 15, .9); min-height: 64px;
}
.gs-back { font-family: var(--arcade); font-size: 9px; padding: 10px 12px; border-radius: 10px; cursor: pointer; background: #0b242b; color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.gs-back:hover { color: #fff; border-color: var(--lime); }
.gs-name { font-family: var(--arcade); font-size: 12px; color: var(--gc); text-shadow: 0 0 12px color-mix(in srgb, var(--gc) 70%, transparent); white-space: nowrap; }
.hud { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.hud-extra { display: contents; }
.hud-item { padding: 4px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); text-align: center; min-width: 76px; transition: transform .12s; }
.hud-item label { display: block; font-family: var(--arcade); font-size: 7px; color: var(--ink-3); letter-spacing: .06em; }
.hud-item b { font-family: var(--mono); font-size: 18px; color: #fff; white-space: nowrap; }
.hud-item b small { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.hud-score { border-color: color-mix(in srgb, var(--gc) 45%, transparent); background: color-mix(in srgb, var(--gc) 9%, transparent); min-width: 130px; }
.hud-score b { color: var(--gc); font-size: 22px; text-shadow: 0 0 12px color-mix(in srgb, var(--gc) 60%, transparent); }
.hud-best b { color: var(--lime-hot); }
.hud-best.beat { border-color: var(--lime); animation: pulse 0.8s ease-in-out 3; }
.hud-best.beat label::after { content: " ★ NEW"; color: var(--lime-hot); }
.hud-hi b { color: var(--gold); }
.hud-lives b { color: var(--red); letter-spacing: 2px; }
.bump { animation: bump .18s ease-out; }
@keyframes bump { 50% { transform: scale(1.08); } }
@keyframes pulse { 50% { box-shadow: 0 0 22px rgba(142,200,79,.55); } }
.gs-tools { display: flex; gap: 8px; }
.gs-main { flex: 1; display: flex; min-height: 0; }
.gs-stage { flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; padding: 16px; position: relative; }
.gs-frame {
  position: relative; border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 55%, #000), 0 0 40px color-mix(in srgb, var(--gc) 25%, transparent), 0 30px 80px rgba(0,0,0,.7);
  --fs: 1;
}
.gs-canvas { display: block; touch-action: none; outline: none; }
.pointer-game .gs-canvas { cursor: crosshair; }
.crt { position: absolute; inset: 0; pointer-events: none; display: none; }
.crt-on .crt {
  display: block;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(130% 110% at 50% 50%, transparent 62%, rgba(0,0,0,.45) 100%);
  mix-blend-mode: multiply;
}
.crt-on .crt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(255,255,255,.05), transparent 30%); animation: crtflick 0.15s infinite alternate; }
@keyframes crtflick { from { opacity: .7; } to { opacity: 1; } }

/* side panel */
.gs-side { width: 300px; flex: none; overflow-y: auto; padding: 16px 16px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.gs-side section { background: rgba(10,33,40,.7); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.gs-side h3 { font-family: var(--arcade); font-size: 9px; color: var(--gc); margin: 0 0 10px; display: flex; gap: 6px; align-items: center; }
.gs-side h3 small { margin-left: auto; color: var(--ink-3); font-size: 7px; }
.gs-side ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.gs-side li { margin-bottom: 4px; }
.gs-side dl, .ov-col dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 13px; align-items: center; }
.gs-side dd, .ov-col dd { margin: 0; color: var(--ink-2); }
.gs-side .board-list li { font-size: 13px; padding: 5px 4px; }

/* overlays */
.gs-overlay { position: absolute; inset: 0; display: none; place-items: center; padding: calc(16px * var(--fs)); z-index: 2; }
.gs-overlay.show { display: grid; background: rgba(2, 10, 12, .72); backdrop-filter: blur(3px); animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; } }
.ov-card { width: min(640px, 100%); max-height: 100%; overflow-y: auto; text-align: center; font-size: calc(15px * var(--fs)); scrollbar-width: thin; }
.ov-card.small { width: min(380px, 100%); }
.ov-kicker { font-family: var(--arcade); font-size: calc(9px * var(--fs)); color: var(--ink-3); letter-spacing: .12em; }
.ov-h { font-family: var(--arcade); font-size: calc(22px * var(--fs)); margin: calc(10px * var(--fs)) 0; color: #fff; text-shadow: 0 0 10px var(--gc), 0 0 30px color-mix(in srgb, var(--gc) 60%, transparent); line-height: 1.3; }
.ov-h.big { font-size: calc(30px * var(--fs)); color: var(--gc); text-shadow: 0 0 8px color-mix(in srgb, var(--gc) 90%, transparent), 0 0 34px color-mix(in srgb, var(--gc) 55%, transparent); }
.ov-tag { color: var(--ink-2); margin: 0 0 calc(14px * var(--fs)); }
.ov-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(14px * var(--fs)); text-align: left; margin: 0 0 calc(12px * var(--fs)); }
.ov-col { background: rgba(10,33,40,.75); border: 1px solid var(--line); border-radius: 12px; padding: calc(12px * var(--fs)); }
.ov-col h3 { font-family: var(--arcade); font-size: calc(8px * var(--fs)); color: var(--gc); margin: 0 0 8px; }
.ov-col ul { margin: 0; padding-left: 16px; color: var(--ink-2); font-size: calc(13px * var(--fs)); }
.ov-col li { margin-bottom: 4px; }
.ov-col dl { font-size: calc(12px * var(--fs)); }
.ov-player { color: var(--ink-2); font-size: calc(13px * var(--fs)); margin: calc(8px * var(--fs)) 0 calc(14px * var(--fs)); }
.ov-player b { color: var(--lime-hot); }
.ov-player.warn { color: var(--gold); }
.btn-start { font-size: calc(13px * var(--fs)); padding: calc(16px * var(--fs)) calc(28px * var(--fs)); background: var(--gc); color: #061114; border: 0; box-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--gc) 50%, transparent); }
.btn-start:hover { background: var(--gc); color: #061114; filter: brightness(1.15); }
.ov-menu { display: grid; gap: 10px; margin: 16px 0; }
.ov-toggle { display: block; color: var(--ink-2); font-size: 13px; margin: 6px 0; cursor: pointer; }
.ov-hint { color: var(--ink-3); font-size: 12px; }
.go-title { color: var(--red); text-shadow: 0 0 10px rgba(255,77,94,.9), 0 0 30px rgba(255,77,94,.5); }
.go-score { font-family: var(--mono); font-weight: 700; font-size: calc(56px * var(--fs)); line-height: 1.1; color: #fff; text-shadow: 0 0 20px color-mix(in srgb, var(--gc) 80%, transparent); }
.go-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: calc(10px * var(--fs)) 0; }
.chip { padding: 6px 12px; border-radius: 10px; background: rgba(10,33,40,.85); border: 1px solid var(--line); }
.chip label { display: block; font-family: var(--arcade); font-size: calc(7px * var(--fs)); color: var(--ink-3); }
.chip b { font-family: var(--mono); font-size: calc(15px * var(--fs)); }
.go-result { min-height: 34px; margin: calc(8px * var(--fs)) 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.go-result .pending { color: var(--ink-3); font-family: var(--arcade); font-size: calc(9px * var(--fs)); animation: blink 0.8s steps(2) infinite; }
.go-result .warn { color: var(--gold); }
.badge { font-family: var(--arcade); font-size: calc(9px * var(--fs)); padding: 8px 12px; border-radius: 8px; background: rgba(142,200,79,.15); color: var(--lime-hot); border: 1px solid rgba(142,200,79,.4); line-height: 1.4; }
.badge.gold { background: rgba(255,210,77,.16); color: var(--gold); border-color: rgba(255,210,77,.6); box-shadow: 0 0 24px rgba(255,210,77,.35); animation: pulse 1s ease-in-out infinite; }
.badge.silver { background: rgba(201,214,226,.12); color: #fff; border-color: rgba(201,214,226,.5); }
.badge.pb { background: rgba(182,243,106,.18); color: var(--lime-hot); border-color: var(--lime); }
.badge.dim { background: rgba(255,255,255,.04); color: var(--ink-2); border-color: rgba(255,255,255,.1); }
.go-board { max-width: 420px; margin: calc(8px * var(--fs)) auto calc(14px * var(--fs)); text-align: left; font-size: calc(13px * var(--fs)); }
.go-board li { font-size: calc(13px * var(--fs)); padding: 4px 6px; }
.go-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.inline-name { display: grid; grid-template-columns: 1fr auto; gap: 8px; max-width: 440px; margin: 0 auto 10px; }
.inline-name .err { grid-column: 1 / -1; }
.name-pop { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2,10,12,.85); z-index: 3; padding: 16px; }
.name-form { width: min(420px, 100%); background: linear-gradient(180deg, #0f2f39, #0a2128); border: 1px solid var(--line-2); border-radius: 14px; padding: 20px; text-align: center; }
.name-form h3 { font-family: var(--arcade); font-size: 14px; color: var(--gold); margin: 0 0 8px; }
.name-form p { color: var(--ink-2); font-size: 13px; margin: 0 0 12px; }

/* touch controls */
.gs-touch { display: none; }
body.touch .gs-touch {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px calc(14px + env(safe-area-inset-bottom)); gap: 16px; user-select: none; -webkit-user-select: none; touch-action: none;
}
.gs-touch:empty { display: none !important; }
.tc-left, .tc-right { display: flex; align-items: center; gap: 14px; }
.tc-right { flex-direction: row-reverse; }
.tc-dpad { position: relative; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 2px solid rgba(255,255,255,.1); touch-action: none; }
.tc-dpad-h { height: 92px; width: 180px; border-radius: 46px; }
.tc-dpad-v { width: 92px; border-radius: 46px; }
.tc-dpad span { position: absolute; color: rgba(255,255,255,.35); font-size: 16px; }
.tc-dpad .u { top: 8px; left: 50%; transform: translateX(-50%); }
.tc-dpad .d { bottom: 8px; left: 50%; transform: translateX(-50%); }
.tc-dpad .l { left: 10px; top: 50%; transform: translateY(-50%); }
.tc-dpad .r { right: 10px; top: 50%; transform: translateY(-50%); }
.tc-dpad-h .u, .tc-dpad-h .d, .tc-dpad-v .l, .tc-dpad-v .r { display: none; }
.tc-dpad .knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2b5560, #0e2a32); border: 2px solid color-mix(in srgb, var(--gc) 50%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--gc) 30%, transparent); transition: transform .05s; }
.tc-btn { width: 78px; height: 78px; border-radius: 50%; font-family: var(--arcade); font-size: 9px; color: #061114; border: 0; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gc) 100%, #fff 30%), var(--gc)); box-shadow: 0 5px 0 rgba(0,0,0,.5), 0 0 18px color-mix(in srgb, var(--gc) 40%, transparent); touch-action: none; }
.tc-btn + .tc-btn { width: 64px; height: 64px; background: radial-gradient(circle at 35% 30%, #c8d6dc, #6b8790); }
.tc-btn.on { transform: translateY(4px) scale(.96); box-shadow: 0 1px 0 rgba(0,0,0,.5); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .gs-side { display: none; }
  .hall-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .top { flex-wrap: wrap; gap: 10px 14px; padding-top: 10px; padding-bottom: 10px; }
  .tabs { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .tab { font-size: 9px; padding: 9px 11px; white-space: nowrap; }
  .logo-word { font-size: 17px; }
  .logo-mark { width: 32px; height: 32px; }
  .player-chip { font-size: 12px; padding: 6px 10px 6px 8px; max-width: 160px; }
  .pc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gs-name { display: none; }
  .gs-hud { gap: 8px; padding: 8px 10px; min-height: 0; flex-wrap: wrap; }
  .hud { order: 3; flex: 1 1 100%; width: 100%; gap: 6px; }
  .hud-item { min-width: 0; padding: 3px 8px; }
  .hud-item b { font-size: 14px; }
  .hud-score { min-width: 0; }
  .hud-score b { font-size: 16px; }
  .gs-tools { margin-left: auto; }
  .tool { width: 36px; height: 36px; }
  .gs-stage { padding: 8px; }
  .ov-cols { grid-template-columns: 1fr; }
  .podium { gap: 8px; }
  .pod-name { font-size: 14px; }
  .pod-pts { font-size: 18px; }
  .foot-keys { display: none; }
  .hero { padding-top: 22px; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .hud-best { display: none; }
  .tc-dpad { width: 130px; height: 130px; }
  .tc-dpad-h { height: 84px; width: 160px; }
  .tc-btn { width: 70px; height: 70px; }
  .tc-btn + .tc-btn { width: 58px; height: 58px; }
  .tc-right { gap: 8px; }
  body.touch .gs-touch { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .tc-right:has(.tc-btn:nth-child(3)) .tc-btn { width: 60px; height: 60px; font-size: 8px; }
  .tc-left:has(+ .tc-right .tc-btn:nth-child(3)) .tc-dpad { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  .ticker-track { animation: tick 120s linear infinite !important; animation-iteration-count: infinite !important; animation-duration: 120s !important; }
}