:root {
  --ink: #1b1530;
  --cream: #fff8e7;
  --lime: #9be22e;
  --yellow: #ffd23f;
  --pink: #ff3d7f;
  --red: #ff2d4b;
  --cyan: #4cc9f0;
  --display: "Lilita One", "Arial Black", Impact, sans-serif;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --stroke: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 6px 0 rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #241d38; color: var(--cream); font-family: var(--body); user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.hidden { display: none !important; }

/* ------------------------------------------------------------------ HUD */
#hud { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 18px 26px; }
.hud-label { font: 900 13px/1 var(--body); letter-spacing: .18em; color: var(--cream); text-shadow: 0 2px 0 var(--ink); opacity: .9; }
.hud-label.small { margin-top: 6px; font-size: 12px; }
.hud-score { font: 46px/1 var(--display); color: #fff; text-shadow: var(--stroke); margin-top: 4px; font-variant-numeric: tabular-nums; transform-origin: left center; }
.hud-score.bump { animation: bump .18s ease-out; }
.hud-right { justify-self: end; text-align: right; }
.hud-kills { font: 38px/1 var(--display); color: var(--lime); text-shadow: var(--stroke); margin-top: 4px; }
.timer { font: 74px/1 var(--display); color: #fff; text-shadow: var(--stroke); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; transition: color .2s; }
.timer.warn { color: var(--yellow); }
.timer.urgent { color: var(--red); font-size: 104px; }
.timer.pulse { animation: tpulse .45s ease-out; }
@keyframes tpulse { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes bump { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }

.combo { margin-top: 10px; opacity: 0; transform: translateX(-12px) scale(.9); transition: opacity .15s, transform .15s; transform-origin: left center; }
.combo.on { opacity: 1; transform: none; }
.combo.punch { animation: punch .22s ease-out; }
@keyframes punch { 0% { transform: scale(1.4) rotate(-4deg); } 100% { transform: scale(1); } }
.combo-row { display: flex; align-items: baseline; gap: 8px; }
#combo-count { font: 44px/1 var(--display); color: var(--yellow); text-shadow: var(--stroke); }
.combo.hot #combo-count { color: var(--pink); }
.combo-word { font: 22px/1 var(--display); color: #fff; text-shadow: var(--stroke); }
.combo-bar { width: 150px; height: 8px; background: rgba(27,21,48,.6); border: 2px solid var(--ink); border-radius: 6px; margin-top: 6px; overflow: hidden; }
.combo-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--yellow), var(--pink)); transform-origin: left; }
.combo-mult { font: 800 13px/1 var(--body); margin-top: 5px; color: var(--cream); text-shadow: 0 2px 0 var(--ink); letter-spacing: .05em; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transition: transform .08s, border-color .08s; }
#crosshair i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
#crosshair.hit { transform: scale(1.5); border-color: var(--lime); }
#crosshair.target { border-color: var(--yellow); }

/* -------------------------------------------------------- popups/banners */
#popups { position: absolute; inset: 0; overflow: hidden; }
.pop { position: absolute; left: 0; top: 0; font: 30px/1 var(--display); color: #fff; text-shadow: var(--stroke); white-space: nowrap; will-change: transform, opacity; }
.pop small { display: block; font-size: 16px; color: var(--cyan); text-align: center; }
.pop.big { font-size: 40px; color: var(--yellow); }

#banners { position: absolute; left: 0; right: 0; top: 24%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.banner { font: 54px/1 var(--display); color: #fff; text-shadow: var(--stroke); animation: bannerIn .9s cubic-bezier(.2,1.6,.4,1) forwards; text-align: center; }
.banner small { display: block; font: 900 20px/1.2 var(--body); color: var(--lime); text-shadow: 0 2px 0 var(--ink); }
.banner.multi { font-size: 72px; color: var(--yellow); }
.banner.multi.huge { font-size: 92px; color: var(--pink); }
.banner.combo { font-size: 40px; color: var(--yellow); }
.banner.info { font-size: 46px; color: var(--red); }
.banner.record { font-size: 50px; color: var(--lime); }
@keyframes bannerIn {
  0% { transform: scale(2.2) rotate(-6deg); opacity: 0; }
  18% { transform: scale(.92) rotate(2deg); opacity: 1; }
  30% { transform: scale(1) rotate(0); }
  78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9) translateY(-18px); }
}

#countdown { position: absolute; inset: 0; display: grid; place-items: center; }
#countdown span { font: 200px/1 var(--display); color: #fff; text-shadow: var(--stroke); animation: countIn .9s ease-out forwards; }
#countdown span.go { color: var(--lime); font-size: 170px; }
@keyframes countIn { 0% { transform: scale(2.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.85); opacity: 0; } }
#stamp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); font: 150px/1 var(--display); color: var(--red); text-shadow: var(--stroke); animation: stamp .35s cubic-bezier(.2,1.8,.4,1); }
@keyframes stamp { 0% { transform: translate(-50%, -50%) scale(3) rotate(-8deg); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; } }

/* ----------------------------------------------------- screen effects */
#vignette { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(ellipse at center, transparent 50%, rgba(255,20,60,.55) 100%); }
#vignette.on { opacity: 1; animation: vig 1s ease-in-out infinite; }
#vignette.urgent { animation-duration: .5s; }
@keyframes vig { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#flash.go { animation: flash .25s ease-out; }
@keyframes flash { 0% { opacity: .45; } 100% { opacity: 0; } }
#speedlines { position: absolute; inset: -10%; opacity: 0; transition: opacity .25s;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.0) 0deg 5deg, rgba(255,255,255,.22) 5deg 6deg);
  -webkit-mask: radial-gradient(circle at center, transparent 34%, #000 70%); mask: radial-gradient(circle at center, transparent 34%, #000 70%); }
#speedlines.on { opacity: 1; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(6deg); } }

/* ------------------------------------------------------------- screens */
.screen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto; background: radial-gradient(ellipse at center, rgba(36,29,56,.35), rgba(20,14,36,.82)); padding: 16px; overflow: auto; }
.menu-card { width: min(640px, 100%); background: rgba(27,21,48,.86); border: 4px solid var(--ink); border-radius: 28px; padding: 28px 30px 24px; text-align: center; box-shadow: 0 12px 0 rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.06); }
.menu-card.small { width: min(380px, 100%); display: grid; gap: 12px; }
.menu-card h2 { font: 64px/1 var(--display); margin: 0 0 8px; color: var(--yellow); text-shadow: var(--stroke); }
.logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.logo-fly { width: 96px; height: 72px; animation: hover 1.6s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(4px, -6px) rotate(4deg); } }
.logo h1 { font: 92px/1 var(--display); margin: 0; color: #fff; text-shadow: var(--stroke); letter-spacing: .02em; }
.logo h1 span { color: var(--lime); }
.tagline { font: 800 18px/1.3 var(--body); margin: 8px 0 18px; color: var(--cream); }
.btn { pointer-events: auto; font: 28px/1 var(--display); color: #fff; background: #4b3f72; border: 4px solid var(--ink); border-radius: 18px; padding: 12px 26px; cursor: pointer; box-shadow: 0 6px 0 var(--ink); text-shadow: 0 2px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s; }
.btn:hover { background: #5d4f8c; transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn small { font: 900 12px/1 var(--body); opacity: .75; margin-left: 6px; letter-spacing: .1em; }
.btn-play { background: var(--lime); color: var(--ink); text-shadow: none; font-size: 40px; padding: 14px 54px; }
.btn-play:hover { background: #b3f048; }
.menu-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 22px 0 16px; }
.menu-stats div { background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px 4px; }
.menu-stats b { display: block; font: 28px/1 var(--display); color: var(--yellow); }
.menu-stats span { font: 900 10px/1.2 var(--body); letter-spacing: .12em; opacity: .8; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font: 800 13px/1 var(--body); opacity: .9; }
kbd { display: inline-block; font: 900 11px/1 var(--body); background: var(--cream); color: var(--ink); border-radius: 6px; padding: 4px 6px; margin-right: 3px; box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.hint { font: 700 13px/1.4 var(--body); opacity: .7; margin: 14px 0 0; }

.results-card { width: min(600px, 100%); }
.r-title { font: 900 14px/1 var(--body); letter-spacing: .25em; opacity: .85; }
.r-score { font: 110px/1 var(--display); color: #fff; text-shadow: var(--stroke); margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.r-rank { font: 30px/1.1 var(--display); color: var(--lime); text-shadow: 0 3px 0 var(--ink); margin: 6px 0 16px; }
.r-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.r-grid div { background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column-reverse; gap: 6px; }
.r-grid b { font: 30px/1 var(--display); color: var(--yellow); }
.r-grid span { font: 900 10px/1.2 var(--body); letter-spacing: .1em; opacity: .8; }
.r-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.newhigh { font: 40px/1 var(--display); color: var(--ink); background: var(--yellow); display: inline-block; padding: 8px 18px; border-radius: 12px; border: 4px solid var(--ink); transform: rotate(-3deg); margin-bottom: 10px; animation: newhigh .7s cubic-bezier(.2,1.8,.4,1), wobble 1.2s ease-in-out .7s infinite; }
@keyframes newhigh { 0% { transform: scale(3) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(2deg) scale(1.06); } }

#lockhint { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); font: 900 16px/1 var(--body); background: rgba(27,21,48,.85); padding: 10px 16px; border-radius: 12px; border: 2px solid var(--ink); }

/* --------------------------------------------------------------- debug */
#debug { position: absolute; right: 12px; top: 120px; width: 300px; background: rgba(10,10,20,.88); border: 2px solid #ff3d7f; border-radius: 10px; padding: 10px; font: 12px/1.35 ui-monospace, Consolas, monospace; color: #cfe; pointer-events: auto; }
.dbg-head { font-weight: 700; color: #ff3d7f; margin-bottom: 6px; }
.dbg-head small { color: #889; font-weight: 400; }
#dbg-stats { margin: 0 0 8px; white-space: pre-wrap; }
.dbg-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dbg-buttons button { font: 11px/1.2 ui-monospace, Consolas, monospace; background: #1f2340; color: #dfe; border: 1px solid #3b4170; border-radius: 6px; padding: 5px 4px; cursor: pointer; text-align: left; }
.dbg-buttons button:hover { background: #2d3360; }
.dbg-buttons button.on { background: #6b1d45; border-color: #ff3d7f; }
.dbg-buttons kbd { margin-right: 4px; }

@media (max-width: 700px) {
  .logo h1 { font-size: 58px; }
  .menu-stats, .r-grid { grid-template-columns: repeat(2, 1fr); }
  .timer { font-size: 56px; } .timer.urgent { font-size: 74px; }
  .hud-score { font-size: 34px; }
  .r-score { font-size: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  #speedlines.on, #vignette.on { animation: none; }
}

/* ------------------------------------------------------------ multiplayer */
.menu-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-mp { background: var(--cyan); color: var(--ink); text-shadow: none; font-size: 32px; padding: 14px 26px; }
.btn-mp:hover { background: #7dd8f5; }
.btn-mp small { color: var(--ink); }
.btn-small { font-size: 18px; padding: 8px 16px; border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
.mp-card { width: min(560px, 100%); display: grid; gap: 12px; }
.mp-card h2 { margin: 0; }
.field { display: grid; gap: 6px; text-align: left; font: 900 12px/1 var(--body); letter-spacing: .15em; }
.field input, .join-row input { font: 26px/1 var(--display); color: var(--ink); background: var(--cream); border: 4px solid var(--ink); border-radius: 14px; padding: 10px 14px; width: 100%; outline: none; }
.field input:focus-visible, .join-row input:focus-visible { box-shadow: 0 0 0 3px var(--yellow); }
.mp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-actions .btn { font-size: 22px; padding: 14px 10px; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.join-row input { text-transform: uppercase; letter-spacing: .3em; text-align: center; }
.mp-error { min-height: 1.3em; margin: 0; font: 800 15px/1.3 var(--body); color: var(--yellow); }
.lobby-label { font: 900 13px/1 var(--body); letter-spacing: .25em; opacity: .8; }
.lobby-code-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lobby-code { font: 84px/1 var(--display); letter-spacing: .12em; color: var(--yellow); text-shadow: var(--stroke); user-select: text; }
.lobby-type { font: 900 12px/1 var(--body); letter-spacing: .15em; opacity: .75; }
.lobby-players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slot { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; text-align: left; background: rgba(255,255,255,.07); border: 3px solid var(--c, transparent); border-radius: 14px; padding: 10px 12px; }
.slot i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); }
.slot b { font: 22px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot span { font: 900 10px/1 var(--body); letter-spacing: .12em; opacity: .8; }
.slot.empty { border-style: dashed; border-color: rgba(255,255,255,.18); opacity: .55; }
.slot.empty i { background: transparent; border-color: rgba(255,255,255,.25); }
.slot.empty b { font: 800 14px/1.2 var(--body); }
.lobby-wait { margin: 0; font: 800 15px/1.3 var(--body); opacity: .85; }
.mp-board { margin-top: 10px; display: grid; gap: 4px; min-width: 170px; }
.mb-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; background: rgba(27,21,48,.62); border: 2px solid var(--ink); border-left: 6px solid var(--c); border-radius: 10px; padding: 4px 10px; text-align: left; }
.mb-row i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.mb-row span { font: 900 14px/1.2 var(--body); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-row b { font: 22px/1 var(--display); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.mb-row.me { background: rgba(255,255,255,.18); }
.mr-title { font: 72px/1 var(--display); color: #fff; text-shadow: var(--stroke); margin: 8px 0 18px; }
.mr-title.win { color: var(--yellow); animation: newhigh .7s cubic-bezier(.2,1.8,.4,1); }
.mr-table { display: grid; gap: 8px; margin-bottom: 20px; }
.mr-row { display: grid; grid-template-columns: 28px 18px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; text-align: left; background: rgba(255,255,255,.07); border-left: 8px solid var(--c); border-radius: 12px; padding: 10px 14px; }
.mr-row.me { background: rgba(255,255,255,.16); }
.mr-rank { grid-row: span 2; font: 30px/1 var(--display); color: var(--yellow); }
.mr-row i { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); }
.mr-name { font: 26px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-kills { grid-row: span 2; font: 900 14px/1 var(--body); text-align: right; }
.mr-kills b { display: block; font: 40px/1 var(--display); color: var(--lime); }
.mr-meta { font: 800 12px/1.2 var(--body); opacity: .75; }
@media (max-width: 700px) {
  .mp-actions, .lobby-players { grid-template-columns: 1fr; }
  .lobby-code { font-size: 60px; }
  .mr-title { font-size: 48px; }
}