:root {
  --bg: #060816;
  --panel: rgba(12, 18, 42, 0.86);
  --panel-strong: rgba(8, 13, 32, 0.94);
  --line: rgba(105, 226, 255, 0.24);
  --text: #ebf7ff;
  --muted: #8ba4c9;
  --cyan: #66f5ff;
  --pink: #ff5ad9;
  --lime: #73ff9f;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); overscroll-behavior: none; }
body { min-height: 100%; margin: 0; font-family: Inter, system-ui, sans-serif; background: radial-gradient(circle at 50% 0, rgba(102,245,255,0.18), transparent 32rem), linear-gradient(180deg, #070a18 0%, var(--bg) 62%); color: var(--text); overscroll-behavior: none; overflow-x: hidden; }
body.viewport-locked { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; touch-action: none; }
body.viewport-locked .shell { height: 100dvh; overflow: hidden; }
.shell { max-width: 1240px; margin: 0 auto; padding: 6px 24px 24px; }
.panel { background: linear-gradient(180deg, rgba(15,24,54,0.92), var(--panel)); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 48px rgba(0,0,0,0.26), 0 0 40px rgba(42, 212, 255, 0.08); }
.hero, .gamewrap, .right-rail { display: grid; gap: 14px; }
.hero { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) auto; align-items: end; min-height: 102px; padding: 14px 18px; margin-bottom: 10px; overflow: hidden; border: 1px solid rgba(102,245,255,0.28); border-radius: 8px; background-image: linear-gradient(90deg, rgba(5,7,19,0.95), rgba(5,7,19,0.66) 43%, rgba(5,7,19,0.18)), url("./images/alphtetris-banner.png?v=20260715-graphics"); background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 22px 58px rgba(0,0,0,0.32), 0 0 54px rgba(102,245,255,0.14); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("./images/arcade-grid.svg?v=20260715-graphics"); background-size: 460px 460px; opacity: 0.32; mix-blend-mode: screen; pointer-events: none; }
.hero-copy { max-width: 620px; }
.brand-row { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 4px; border: 1px solid rgba(102,245,255,0.34); border-radius: 8px; background: rgba(5,7,19,0.48); box-shadow: 0 0 20px rgba(102,245,255,0.18); }
.brand-mark span { border-radius: 3px; box-shadow: inset 0 0 8px rgba(255,255,255,0.18), 0 0 8px currentColor; }
.brand-mark span:nth-child(1) { color: var(--cyan); background: #66f5ff; }
.brand-mark span:nth-child(2) { color: var(--pink); background: #ff5ad9; }
.brand-mark span:nth-child(3) { color: var(--lime); background: #73ff9f; }
.brand-mark span:nth-child(4) { color: #ffe066; background: #ffe066; }
.hero-actions { display: grid; gap: 10px; justify-items: end; }
.infopanel, .boardpanel, .sidepanel, .status { padding: 16px; }
.infopanel { display: grid; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stats div { min-height: 74px; padding: 12px; border: 1px solid rgba(102,245,255,0.13); border-radius: 8px; background: linear-gradient(180deg, rgba(102,245,255,0.07), rgba(0,0,0,0.12)); }
.stats div.reset-ready { border-color: rgba(255,224,102,0.45); background: linear-gradient(180deg, rgba(255,224,102,0.14), rgba(0,0,0,0.14)); }
.stats span { display:block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.stats strong { display:block; margin-top: 6px; font-size: 18px; }
.gamewrap { grid-template-columns: 560px minmax(0, 1fr); align-items: start; }
.right-rail { align-content: start; }
.boardplay { display: grid; grid-template-columns: 360px 112px; gap: 14px; align-items: start; justify-content: center; }
.boardstage { position: relative; width: 360px; margin: 0; }
.boardpanel { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(12,20,44,0.96), rgba(8,12,28,0.94)); }
.boardpanel::before { content: ""; position: absolute; inset: 0; background-image: url("./images/arcade-grid.svg?v=20260715-graphics"); background-size: 420px 420px; opacity: 0.18; pointer-events: none; }
.boardpanel > * { position: relative; }
.board { width: 360px; height: 720px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; background: linear-gradient(180deg, rgba(0,0,0,0.62), rgba(4,9,20,0.86)), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(102,245,255,0.05) 0 1px, transparent 1px 36px); padding: 8px; border-radius: 8px; border: 1px solid rgba(102,245,255,0.32); margin: 0 auto; outline: none; touch-action: none; overscroll-behavior: contain; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.025), inset 0 0 34px rgba(102,245,255,0.08), 0 18px 44px rgba(0,0,0,0.34); }
.board:focus-visible { border-color: rgba(102,245,255,0.75); box-shadow: 0 0 0 3px rgba(102,245,255,0.16), 0 0 40px rgba(42, 212, 255, 0.14); }
.board.is-clearing { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 34px rgba(102,245,255,0.18); }
.board.is-game-over { animation: boardEndPulse 900ms ease-out both; border-color: rgba(255,90,217,0.62); }
.cell { border-radius: 7px; background: rgba(255,255,255,0.035); transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.cell.filled { transform: translateY(0); background-image: linear-gradient(145deg, rgba(255,255,255,0.32), transparent 42%), linear-gradient(315deg, rgba(0,0,0,0.24), transparent 48%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -8px 14px rgba(0,0,0,0.2), 0 0 10px currentColor; }
.cell.clearing { animation: lineClearFlash 240ms ease-in both; transform-origin: center; }
.board.is-game-over .cell.filled { animation: blockSettle 700ms cubic-bezier(.2,.8,.2,1) both; }
.cell.c1 { color: #66f5ff; background-color: rgba(102,245,255,0.58); }
.cell.c2 { color: #ffe066; background-color: rgba(255,224,102,0.62); }
.cell.c3 { color: #ff5ad9; background-color: rgba(255,90,217,0.58); }
.cell.c4 { color: #73ff9f; background-color: rgba(115,255,159,0.58); }
.cell.c5 { color: #ff8a5b; background-color: rgba(255,138,91,0.58); }
.cell.c6 { color: #8f9cff; background-color: rgba(143,156,255,0.58); }
.cell.c7 { color: #d2a8ff; background-color: rgba(210,168,255,0.58); }
.button { padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(102,245,255,0.3); background: linear-gradient(180deg, rgba(102,245,255,0.18), rgba(102,245,255,0.08)); color: var(--text); cursor: pointer; }
.button.ghost { background: transparent; }
.button.accent { border-color: rgba(255,90,217,0.35); background: linear-gradient(180deg, rgba(255,90,217,0.18), rgba(255,90,217,0.08)); }
.button.utility { padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.button[hidden] { display: none; }
.runmenu { position: absolute; inset: 8px; display: grid; align-content: center; gap: 12px; padding: 28px; border-radius: 10px; background: linear-gradient(180deg, rgba(6,8,22,0.22), rgba(6,8,22,0.78)); pointer-events: auto; }
.runmenu[hidden] { display: none; }
.panel-title { margin: 0 0 12px; color: var(--muted); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.nextpanel { display: grid; justify-items: center; align-content: start; gap: 10px; }
.board-next { margin-top: 2px; }
.nextpiece { width: 112px; height: 112px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 10px; border-radius: 12px; border: 1px solid rgba(102,245,255,0.18); background: rgba(0,0,0,0.24); }
.nextcell { border-radius: 6px; background: rgba(255,255,255,0.025); }
.nextcell.filled { box-shadow: inset 0 0 10px rgba(255,255,255,0.16), 0 0 9px currentColor; }
.mobile-rail-stats { display: none; }
.gameover { position: absolute; inset: 8px; display: grid; place-content: center; gap: 12px; text-align: center; border-radius: 10px; background: linear-gradient(180deg, rgba(6,8,22,0.28), rgba(6,8,22,0.88)); box-shadow: inset 0 0 80px rgba(255,90,217,0.22); animation: gameOverReveal 520ms ease-out both; pointer-events: auto; }
.gameover[hidden] { display: none; }
.gameover-title { color: var(--pink); font-size: 34px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 0 22px rgba(255,90,217,0.72); }
.gameover-score { color: var(--text); font-size: 16px; }
.gameover-score strong { color: var(--cyan); font-size: 24px; }
.boardfooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.touch-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px auto 10px; max-width: 360px; }
.control-button { min-height: 44px; border-radius: 10px; border: 1px solid rgba(102,245,255,0.26); background: rgba(102,245,255,0.08); color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation; }
.control-rotate { grid-column: 2; grid-row: 1; }
.control-left { grid-column: 1; grid-row: 2; }
.control-down { grid-column: 2; grid-row: 2; }
.control-right { grid-column: 3; grid-row: 2; }
.control-hard-drop { width: 112px; min-height: 46px; padding: 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; }
.control-button.accent { border-color: rgba(255,90,217,0.32); background: rgba(255,90,217,0.1); }
.button:disabled { cursor: not-allowed; opacity: 0.48; }
.status, .finalboard { margin: 0; min-height: 56px; white-space: pre-wrap; color: var(--muted); background: rgba(0,0,0,0.22); border-radius: 12px; }
.finalboard { min-height: 84px; padding: 12px; }
.leaderboard { padding-left: 18px; margin: 0 0 20px; }
.leaderboard li { margin: 8px 0; color: var(--muted); }
.leaderboard li.winner { color: var(--lime); }
.score-link { appearance: none; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(102,245,255,0.52); background: transparent; color: var(--cyan); font: inherit; font-weight: 800; cursor: pointer; }
.score-link:hover, .score-link:focus-visible { color: var(--text); border-bottom-color: var(--text); outline: none; }
.score-unavailable { padding: 0 2px; color: var(--muted); font-weight: 800; }
.leaderboard-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.leaderboard-tab { min-height: 34px; padding: 6px 8px; border: 1px solid rgba(102,245,255,0.22); border-radius: 8px; background: rgba(102,245,255,0.06); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.leaderboard-tab.active { border-color: rgba(102,245,255,0.52); background: rgba(102,245,255,0.16); color: var(--text); }
.hud { display:flex; justify-content: space-between; margin-bottom: 12px; color: var(--muted); }
.eyebrow { margin: 0; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; }
h1 { margin: 4px 0 3px; font-size: 31px; line-height: 1; }
.lede, .controls-note { color: var(--muted); }
.lede { margin: 0; }
@keyframes gameOverReveal {
  from { opacity: 0; transform: scale(0.94); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes boardEndPulse {
  0% { transform: scale(1); filter: saturate(1); }
  35% { transform: scale(1.018); filter: saturate(1.6); }
  100% { transform: scale(1); filter: saturate(0.72) brightness(0.86); }
}
@keyframes blockSettle {
  0% { transform: translateY(-3px) scale(1.05); }
  100% { transform: translateY(0) scale(0.98); }
}
@keyframes lineClearFlash {
  0% { transform: scale(1); filter: brightness(1); box-shadow: inset 0 0 12px rgba(255,255,255,0.18), 0 0 10px currentColor; }
  45% { transform: scale(1.08); filter: brightness(2.2); background: rgba(255,255,255,0.92); box-shadow: 0 0 22px rgba(255,255,255,0.9), 0 0 36px rgba(102,245,255,0.72); }
  100% { transform: scaleX(0.12) scaleY(0.82); filter: brightness(1.4); opacity: 0; }
}
@media (max-width: 980px) { .gamewrap { grid-template-columns: 1fr; } .boardplay { grid-template-columns: 360px 112px; } .boardstage, .board { width: min(100%, 360px); } .board { height: auto; aspect-ratio: 1 / 2; } .board-next { margin: 0 auto; } }
@media (min-width: 981px) { .touch-controls, .control-hard-drop { display: none; } }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .shell { padding: 8px; }
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; min-height: 92px; padding: 10px; margin-bottom: 8px; background-position: 38% center; }
  .brand-mark { width: 28px; height: 28px; gap: 2px; border-radius: 7px; }
  .hero-actions { gap: 6px; }
  .infopanel, .sidepanel, .status { padding: 10px; }
  .boardpanel { padding: 8px; }
  .lede { display: none; }
  .eyebrow { font-size: 10px; letter-spacing: 0.12em; }
  h1 { font-size: 21px; line-height: 1; margin: 4px 0 0; }
  .hero .button { padding: 9px 10px; border-radius: 10px; font-size: 13px; }
  .panel { border-radius: 8px; }
  .hud { margin-bottom: 8px; font-size: 13px; }
  .boardplay { grid-template-columns: minmax(0, 1fr) 72px; gap: 8px; align-items: stretch; }
  .boardstage, .board { width: min(72vw, 280px); }
  .board { padding: 6px; gap: 1px; border-radius: 8px; }
  .cell { border-radius: 5px; }
  .board-next { display: flex; flex-direction: column; align-items: center; align-self: stretch; height: min(144vw, 560px); margin: 0; }
  .panel-title { margin-bottom: 6px; font-size: 10px; letter-spacing: 0.1em; }
  .nextpiece { width: 72px; height: 72px; gap: 2px; padding: 6px; border-radius: 10px; }
  .nextcell { border-radius: 4px; }
  .mobile-rail-stats { width: 72px; display: grid; gap: 5px; margin-top: 10px; }
  .mobile-rail-stats div { min-height: 41px; display: grid; align-content: center; gap: 2px; padding: 5px 4px; border: 1px solid rgba(102,245,255,0.17); border-radius: 8px; background: linear-gradient(180deg, rgba(102,245,255,0.09), rgba(0,0,0,0.18)); text-align: center; }
  .mobile-rail-stats div.reset-ready { border-color: rgba(255,224,102,0.5); background: linear-gradient(180deg, rgba(255,224,102,0.15), rgba(0,0,0,0.18)); }
  .mobile-rail-stats span { color: var(--muted); font-size: 8px; line-height: 1; text-transform: uppercase; }
  .mobile-rail-stats strong { color: var(--text); font-size: 10px; line-height: 1.05; overflow-wrap: anywhere; }
  #railWallet { font-size: 9px; white-space: nowrap; }
  .runmenu { inset: 6px; padding: 14px; gap: 10px; }
  .runmenu .button { padding: 11px 12px; }
  .gameover { inset: 6px; }
  .gameover-title { font-size: 26px; }
  .touch-controls { max-width: 280px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px auto 0; }
  .control-button { min-height: 44px; padding: 0 4px; border-radius: 9px; font-size: 20px; font-weight: 800; }
  .control-hard-drop { width: 72px; min-height: 58px; margin-top: auto; padding: 0 6px; font-size: 10px; letter-spacing: 0.04em; }
  .boardfooter { align-items: center; margin-top: 8px; }
  .controls-note { display: none; }
  .button.utility { padding: 8px 10px; }
}