:root {
  --ink: #eafff7;
  --muted: #7e9a95;
  --panel: rgba(10, 25, 29, 0.82);
  --line: rgba(136, 255, 214, 0.16);
  --mint: #73ffc7;
  --acid: #dfff45;
  --coral: #ff6b6b;
  --bg: #061014;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background:
    linear-gradient(rgba(115,255,199,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115,255,199,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 44%, #17383a 0, #09181c 35%, var(--bg) 70%);
  background-size: 38px 38px, 38px 38px, auto;
  font-family: "Courier New", Courier, monospace;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.06) 4px);
  mix-blend-mode: overlay;
}
button, input { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; border-radius: 50%; filter: blur(60px); opacity: .16; pointer-events: none; }
.ambient-a { width: 32vw; height: 32vw; background: #36ffd0; top: -18vw; left: -10vw; }
.ambient-b { width: 28vw; height: 28vw; background: #dfff45; right: -15vw; bottom: -14vw; }

.app-shell { height: 100dvh; max-width: 1180px; margin: 0 auto; padding: 16px 28px 18px; display: flex; flex-direction: column; }
.topbar { height: 54px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 700; letter-spacing: .12em; }
.brand-mark { color: #061014; background: var(--mint); padding: 5px 7px; letter-spacing: -.12em; box-shadow: 5px 5px 0 rgba(223,255,69,.85); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.wallet { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(223,255,69,.35); color: var(--acid); background: rgba(223,255,69,.06); }
.coin { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; }
.ghost-btn, .close-btn { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--ink); padding: 8px 12px; transition: .18s ease; }
.ghost-btn:hover, .close-btn:hover { border-color: var(--mint); color: var(--mint); transform: translateY(-1px); }

.game-layout { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(160px, 1fr) minmax(260px, 42vh) minmax(160px, 1fr); gap: clamp(18px, 4vw, 58px); align-items: center; justify-content: center; padding-top: 14px; }
.side-panel { align-self: center; padding: 22px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(13,35,38,.78), rgba(5,15,18,.72)); box-shadow: var(--shadow); position: relative; }
.side-panel::before { content: ""; position: absolute; left: -1px; top: -1px; width: 40px; height: 3px; background: var(--mint); }
.eyebrow, .modal-kicker { color: var(--mint); font-size: 10px; letter-spacing: .2em; font-weight: 700; }
.player-name { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(20px, 3vw, 30px); font-weight: 700; margin: 8px 0 26px; overflow: hidden; text-overflow: ellipsis; }
.metric { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.metric strong { color: var(--ink); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 23px; }
.mini-help { margin-top: 20px; display: grid; gap: 9px; color: var(--muted); font-size: 10px; }
kbd { display: inline-block; min-width: 22px; text-align: center; color: var(--ink); border: 1px solid var(--line); padding: 2px 4px; margin-right: 4px; }

.board-wrap { min-height: 0; display: flex; flex-direction: column; align-items: center; }
.board-frame { height: min(72vh, 670px); aspect-ratio: 1 / 2; position: relative; border: 1px solid rgba(115,255,199,.5); background: #030a0d; box-shadow: 0 0 0 6px rgba(115,255,199,.035), var(--shadow), 0 0 45px rgba(115,255,199,.08); overflow: hidden; }
.board-frame::before, .board-frame::after { content: ""; position: absolute; z-index: 3; width: 34px; height: 34px; pointer-events: none; }
.board-frame::before { left: -1px; top: -1px; border-left: 4px solid var(--acid); border-top: 4px solid var(--acid); }
.board-frame::after { right: -1px; bottom: -1px; border-right: 4px solid var(--acid); border-bottom: 4px solid var(--acid); }
#board { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.board-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(115,255,199,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(115,255,199,.04) 1px, transparent 1px); background-size: 10% 5%; }
.game-overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; text-align: center; padding: 20px; background: linear-gradient(rgba(2,9,11,.72), rgba(2,9,11,.91)); backdrop-filter: blur(5px); transition: opacity .25s; }
.game-overlay[hidden] { display: none; }
.overlay-kicker { color: var(--mint); letter-spacing: .25em; font-size: 10px; }
.game-overlay h1 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(30px, 5vh, 50px); line-height: .88; text-transform: uppercase; margin: 10px 0 25px; }
.game-overlay em { color: var(--acid); font-style: normal; }
.primary-btn { border: 0; padding: 12px 18px; color: #071116; background: var(--mint); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; box-shadow: 5px 5px 0 var(--acid); transition: .16s ease; }
.primary-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--acid); }
.primary-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.mobile-controls { display: none; }

.queue-panel { display: grid; gap: 16px; }
.piece-box { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.piece-box canvas { width: 100%; height: 120px; display: block; }
.hold-box canvas { height: 70px; }
.run-status { color: var(--muted); font-size: 10px; line-height: 1.5; }

.modal { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: min(900px, calc(100vw - 24px)); max-height: min(760px, calc(100dvh - 24px)); }
.modal::backdrop { background: rgba(1, 7, 9, .76); backdrop-filter: blur(10px); }
.modal-card { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: clamp(22px, 4vw, 42px); border: 1px solid rgba(115,255,199,.28); background: linear-gradient(145deg, #102428, #071215 70%); box-shadow: var(--shadow); }
.compact-modal .modal-card { width: min(460px, calc(100vw - 24px)); }
.modal-card h2 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(28px, 5vw, 46px); line-height: 1; margin: 8px 0 12px; }
.modal-card p { color: var(--muted); line-height: 1.6; font-size: 12px; }
.modal-card label { display: block; font-size: 11px; color: var(--mint); margin: 22px 0 7px; }
.modal-card input { width: 100%; border: 1px solid var(--line); background: #051013; color: var(--ink); padding: 14px; outline: 0; margin-bottom: 14px; }
.modal-card input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(115,255,199,.08); }
.modal-card form .primary-btn { width: 100%; margin-top: 8px; }
.form-error { color: #ff8b8b; min-height: 20px; font-size: 11px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.close-btn { font-size: 24px; line-height: 1; padding: 4px 9px; }
.leaderboard-head, .leaderboard-row { display: grid; grid-template-columns: 80px 1fr 130px; gap: 12px; align-items: center; }
.leaderboard-head { padding: 10px 14px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; border-bottom: 1px solid var(--line); }
.leaderboard-row { padding: 12px 14px; border-bottom: 1px solid rgba(115,255,199,.08); }
.leaderboard-row strong:last-child { color: var(--acid); text-align: right; }
.leaderboard-row .place { color: var(--mint); }
.leaderboard-row.is-me { background: rgba(115,255,199,.08); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; font-size: 11px; color: var(--muted); }

.shop-card { width: min(900px, calc(100vw - 24px)); }
.chest-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; padding: 16px; border: 1px solid rgba(223,255,69,.3); background: linear-gradient(100deg, rgba(223,255,69,.09), rgba(115,255,199,.05)); }
.chest-panel > div { display: flex; align-items: center; gap: 14px; }
.chest-panel strong, .chest-panel small { display: block; }
.chest-panel small { color: var(--muted); margin-top: 4px; font-size: 9px; }
.chest-icon { font-size: 38px; color: var(--acid); text-shadow: 0 0 20px currentColor; }
.result-banner { padding: 14px; margin-bottom: 15px; border-left: 3px solid var(--acid); background: rgba(223,255,69,.08); }
.skin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.skin-card { border: 1px solid var(--line); background: rgba(255,255,255,.02); padding: 11px; min-width: 0; }
.skin-card.equipped { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); }
.skin-preview { height: 54px; margin-bottom: 10px; background-size: cover; }
[data-skin="classic"] .skin-preview { background: linear-gradient(105deg, #63f5ff 0 14%, #ffe66d 14% 28%, #b7ff5a 28% 42%, #ff5ea8 42% 57%, #9b7bff 57% 71%, #ff785a 71% 85%, #4c8dff 85%); }
[data-skin="mint-pop"] .skin-preview { background: linear-gradient(105deg, #5fffd2 0 14%, #eaff8f 14% 28%, #7dff8b 28% 42%, #ff8fd8 42% 57%, #95a7ff 57% 71%, #ffb06b 71% 85%, #66c7ff 85%); }
[data-skin="candy-grid"] .skin-preview { background: linear-gradient(105deg, #ff9de2 0 14%, #fff08b 14% 28%, #9fffc7 28% 42%, #ff71a8 42% 57%, #c39cff 57% 71%, #ff9f76 71% 85%, #82c8ff 85%); }
[data-skin="paper-mono"] .skin-preview { background: linear-gradient(105deg, #f4f0df 0 14%, #dbd5c0 14% 28%, #b9c0ad 28% 42%, #878f83 42% 57%, #666d68 57% 71%, #afb2aa 71% 85%, #d7d2c3 85%); }
[data-skin="magma"] .skin-preview { background: linear-gradient(105deg, #ffb000 0 14%, #ffe23f 14% 28%, #ff7433 28% 42%, #ff4057 42% 57%, #b52b52 57% 71%, #ff8a24 71% 85%, #ffcf32 85%); }
[data-skin="deep-current"] .skin-preview { background: linear-gradient(105deg, #54efff 0 14%, #54a8ff 14% 28%, #4067ff 28% 42%, #7354ff 42% 57%, #2ac5d8 57% 71%, #35e0a1 71% 85%, #8a9cff 85%); }
[data-skin="signal-glitch"] .skin-preview { background: linear-gradient(105deg, #00ffe0 0 14%, #f5ff00 14% 28%, #62ff00 28% 42%, #ff00a8 42% 57%, #8d4dff 57% 71%, #ff3d00 71% 85%, #00a8ff 85%); }
[data-skin="royal-arcade"] .skin-preview { background: linear-gradient(105deg, #ffd66b 0 14%, #fff2a8 14% 28%, #b9ff8a 28% 42%, #ff7ecb 42% 57%, #c895ff 57% 71%, #ff8c6b 71% 85%, #79c8ff 85%); }
.skin-card h3 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; margin: 0 0 3px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rarity { font-size: 8px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.skin-card button { width: 100%; margin-top: 9px; padding: 7px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 9px; }
.skin-card button:hover:not(:disabled) { border-color: var(--mint); color: var(--mint); }
.skin-card button:disabled { opacity: .45; }

@media (max-width: 760px) {
  .app-shell { padding: 8px 10px 10px; }
  .topbar { height: 45px; }
  .brand > span:last-child { display: none; }
  .ghost-btn { padding: 7px 8px; font-size: 10px; }
  .wallet { padding: 5px 8px; font-size: 11px; }
  .game-layout { grid-template-columns: 66px minmax(180px, min(58vw, 36vh)) 66px; gap: 7px; padding-top: 8px; align-items: start; justify-items: center; }
  .side-panel { width: 66px; padding: 8px 6px; box-shadow: none; }
  .stats-panel .player-name, .mini-help, .queue-panel .run-status { display: none; }
  .metric { display: block; padding: 9px 0; font-size: 7px; }
  .metric strong { display: block; font-size: 14px; margin-top: 3px; overflow: hidden; }
  .queue-panel { gap: 8px; }
  .piece-box { padding: 0 0 6px; }
  .piece-box canvas { height: 82px; }
  .hold-box canvas { height: 48px; }
  .eyebrow { font-size: 7px; }
  .board-frame { width: min(58vw, 36vh); height: auto; }
  .mobile-controls { width: min(88vw, 400px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 9px; }
  .mobile-controls button { min-height: 38px; border: 1px solid var(--line); color: var(--ink); background: rgba(10,25,29,.9); font-size: 14px; }
  .mobile-controls button:last-child { font-size: 8px; color: var(--acid); }
  .skin-grid { grid-template-columns: repeat(2, 1fr); }
  .chest-panel { align-items: stretch; flex-direction: column; }
  .leaderboard-head, .leaderboard-row { grid-template-columns: 55px 1fr 90px; font-size: 10px; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .app-shell { padding-top: 8px; }
  .topbar { height: 44px; }
  .game-layout { grid-template-columns: minmax(150px, 1fr) minmax(230px, 38vh) minmax(150px, 1fr); padding-top: 8px; }
  .side-panel { padding: 14px; }
  .player-name { margin-bottom: 12px; }
  .metric { padding: 8px 0; }
  .mini-help { display: none; }
  .board-frame { height: 77vh; }
}

@media (prefers-reduced-motion: no-preference) {
  .app-shell { animation: boot .55s cubic-bezier(.2,.7,.2,1) both; }
  .side-panel { animation: rise .55s .12s both; }
  .board-frame { animation: rise .55s .05s both; }
  @keyframes boot { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}