@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --ink: #080b15;
  --panel: rgba(15, 20, 37, .78);
  --panel-solid: #101527;
  --line: rgba(160, 182, 255, .16);
  --text: #f4f6ff;
  --muted: #8c96b6;
  --cyan: #69e7ff;
  --violet: #b28cff;
  --yellow: #ffd65c;
  --pink: #ff73be;
  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: #080b15;
  font-family: var(--font);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    radial-gradient(circle at 50% 18%, rgba(105, 231, 255, .12), transparent 30%),
    radial-gradient(circle at 9% 75%, rgba(178, 140, 255, .11), transparent 25%),
    linear-gradient(145deg, #090d1a, #070913 60%, #0b1020);
}
.aurora {
  position: fixed;
  z-index: -1;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .12;
  pointer-events: none;
}
.aurora-one { top: 12vh; left: -16vw; background: var(--cyan); }
.aurora-two { right: -18vw; bottom: -12vh; background: var(--violet); }

.site-nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(1360px, calc(100vw - 32px));
  margin: 16px auto 0;
  padding: 11px 14px 11px 20px;
  border: 1px solid rgba(158, 181, 255, .15);
  border-radius: 18px;
  background: rgba(8, 11, 23, .7);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(22px);
}
.brand {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}
.brand::before { content: "●"; margin-right: 9px; color: var(--cyan); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > a, .games-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.nav-links > a:hover, .games-menu > summary:hover, .games-menu[open] > summary {
  color: var(--text);
  border-color: rgba(105, 231, 255, .2);
  background: rgba(105, 231, 255, .08);
}
.games-menu { position: relative; }
.games-menu > summary::-webkit-details-marker { display: none; }
.games-menu > summary::after {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}
.games-menu[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
.games-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 6px;
  width: 410px;
  padding: 12px;
  border: 1px solid rgba(105, 231, 255, .2);
  border-radius: 16px;
  background: rgba(13, 18, 34, .98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  backdrop-filter: blur(24px);
}
.games-heading {
  grid-column: 1 / -1;
  padding: 5px 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.games-heading span {
  display: block;
  color: var(--cyan);
  font: 500 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.games-heading strong { display: block; margin-top: 5px; font-size: 18px; }
.games-panel a {
  display: block;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.games-panel a:hover, .games-panel a.current {
  border-color: rgba(105, 231, 255, .18);
  background: rgba(105, 231, 255, .07);
}
.games-panel small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }

.game-shell { width: min(1120px, calc(100vw - 32px)); margin: 0 auto; padding: 58px 0 40px; }
.game-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.eyebrow, .panel-label {
  color: var(--cyan);
  font: 500 10px/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.game-intro h1 {
  margin: 12px 0 2px;
  font-size: clamp(58px, 9vw, 96px);
  line-height: .82;
  letter-spacing: -.07em;
}
.game-intro h1 span { color: var(--cyan); font-size: .55em; vertical-align: top; }
.lede { margin: 18px 0 0; color: var(--muted); font-size: 17px; }
.game-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color: var(--muted);
  font: 500 11px/1 var(--mono);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.game-status[data-state="paused"] .status-dot { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
.game-status[data-state="over"] .status-dot { background: var(--pink); box-shadow: 0 0 14px var(--pink); }

.arcade {
  display: grid;
  grid-template-columns: 190px minmax(300px, 1fr) 190px;
  align-items: start;
  gap: 24px;
  margin-top: 38px;
  padding: 24px;
  border: 1px solid rgba(158, 181, 255, .13);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(20, 27, 48, .68), rgba(9, 13, 25, .72));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(20px);
}
.side-panel { display: flex; flex-direction: column; gap: 14px; }
.stat-card, .mini-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(9, 13, 27, .62);
}
.score-card strong {
  display: block;
  margin: 12px 0 14px;
  color: var(--text);
  font: 500 clamp(30px, 4vw, 42px)/1 var(--mono);
  letter-spacing: -.08em;
}
.level-row { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 500 10px/1 var(--mono); }
.level-row b { color: var(--yellow); font-weight: 500; }
.streak-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; color: var(--muted); font: 500 9px/1 var(--mono); }
.streak-row b { color: var(--pink); font-weight: 500; letter-spacing: .08em; }
.level-progress { height: 4px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.level-progress span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(105,231,255,.5); transition: width .28s ease; }
.level-progress-copy { display: block; margin-top: 6px; color: rgba(140,150,182,.8); font: 500 8px/1 var(--mono); text-align: right; }
.mini-card canvas { display: block; width: 120px; height: 120px; margin: 12px auto 0; }
.next-stack { display: grid; gap: 4px; margin-top: 12px; padding: 5px 0; border-radius: 9px; background: rgba(255,255,255,.018); }
.next-stack canvas { width: 120px; height: 58px; margin: 0 auto; }
.mini-action, .music-button, .secondary-button {
  width: 100%;
  margin-top: 10px;
  padding: 9px 8px;
  border: 1px solid rgba(105, 231, 255, .16);
  border-radius: 9px;
  color: var(--cyan);
  background: rgba(105, 231, 255, .05);
  font: 700 10px/1 var(--font);
  cursor: pointer;
}
button:hover { filter: brightness(1.14); }
kbd {
  display: inline-grid;
  min-width: 20px;
  min-height: 20px;
  place-items: center;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  font: 500 10px/1 var(--mono);
}
.music-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.music-card p { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.music-button[data-playing="true"] { color: var(--yellow); border-color: rgba(255, 214, 92, .25); background: rgba(255, 214, 92, .08); }
.music-button[data-error="true"] { color: #ffb0be; border-color: rgba(255,83,128,.38); background: rgba(255,83,128,.1); }
.equalizer { display: flex; align-items: end; gap: 3px; height: 13px; }
.equalizer i { width: 3px; height: 5px; border-radius: 2px; background: var(--cyan); }
.music-button[data-playing="true"] + .equalizer i {}
.equalizer i:nth-child(2) { height: 10px; }
.equalizer i:nth-child(3) { height: 7px; }
.controls-card { display: grid; gap: 9px; }
.controls-card .panel-label { margin-bottom: 3px; }
.control-row { display: grid; grid-template-columns: 28px 28px 1fr; align-items: center; gap: 4px; color: var(--muted); font: 500 10px/1 var(--mono); }
.control-row kbd:only-child { grid-column: 1 / span 2; }
.control-row kbd:only-of-type { grid-column: 1 / span 2; }
.control-row span { padding-left: 3px; }
.control-row span { white-space: nowrap; }
.secondary-button { min-height: 38px; margin-top: auto; color: var(--text); border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); }
.secondary-button[data-paused="true"] { color: var(--yellow); }

.board-wrap {
  position: relative;
  width: 300px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid rgba(105, 231, 255, .2);
  border-radius: 12px;
  background: #080d1d;
  box-shadow: 0 0 0 9px rgba(105, 231, 255, .025), 0 0 80px rgba(105, 231, 255, .11);
}
.line-clear-badge { position: absolute; top: 43%; left: 50%; z-index: 3; min-width: 150px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: #07101d; background: linear-gradient(135deg, #fff8c8, #69e7ff); box-shadow: 0 0 34px rgba(105,231,255,.45); font: 800 13px/1 var(--font); letter-spacing: .18em; opacity: 0; pointer-events: none; text-align: center; transform: translate(-50%, 12px) scale(.8); }
.line-clear-badge::before, .line-clear-badge::after { position: absolute; color: #fff8c8; content: "✦"; font-size: 18px; text-shadow: 0 0 12px #69e7ff; }
.line-clear-badge::before { top: -13px; left: 10px; }
.line-clear-badge::after { right: 8px; bottom: -13px; font-size: 14px; }
.line-clear-badge[data-tier="4"] { color: #fff; background: linear-gradient(135deg, #ff73be, #9c7cff 48%, #69e7ff); box-shadow: 0 0 44px rgba(255,115,190,.7), 0 0 80px rgba(105,231,255,.3); font-size: 15px; }
.line-clear-badge[data-visible="true"] { animation: line-clear-pop .62s cubic-bezier(.2,.8,.25,1) both; }
@keyframes line-clear-pop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.72); } 25% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 65% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -12px) scale(.96); } }
.game-over-flash { position: absolute; inset: 0; z-index: 2; border: 0 solid rgba(255,55,129,0); border-radius: 11px; opacity: 0; pointer-events: none; }
.game-over-flash[data-active="true"] { animation: game-over-surge 1.15s ease-out both; }
@keyframes game-over-surge { 0% { opacity: 0; border-width: 0; background: rgba(255,45,128,0); box-shadow: inset 0 0 0 rgba(255,45,128,0); } 16% { opacity: 1; border-width: 5px; background: rgba(255,45,128,.16); box-shadow: inset 0 0 42px rgba(255,45,128,.5), 0 0 28px rgba(255,45,128,.6); } 42% { opacity: .72; border-width: 2px; background: rgba(255,45,128,.06); } 100% { opacity: 0; border-width: 1px; background: rgba(255,45,128,0); box-shadow: inset 0 0 0 rgba(255,45,128,0); } }
.board-wrap[data-state="clear"] { animation: clear-board-pulse .62s cubic-bezier(.2,.8,.25,1) both; }
@keyframes clear-board-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 9px rgba(105,231,255,.025), 0 0 80px rgba(105,231,255,.11); } 22% { transform: scale(1.018); box-shadow: 0 0 0 9px rgba(255,248,200,.09), 0 0 100px rgba(105,231,255,.42); } 58% { transform: scale(.995); box-shadow: 0 0 0 9px rgba(255,115,190,.06), 0 0 110px rgba(255,115,190,.25); } 100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(105,231,255,.025), 0 0 80px rgba(105,231,255,.11); } }
.board-wrap[data-state="over"] #board { animation: board-collapse-shake .6s steps(3, end) both; }
@keyframes board-collapse-shake { 0% { transform: translate(0); filter: saturate(1); } 18% { transform: translate(-3px, 1px); filter: saturate(1.8) contrast(1.2); } 36% { transform: translate(3px, -1px); } 55% { transform: translate(-2px, 0); filter: saturate(1.35); } 100% { transform: translate(0); filter: saturate(1); } }
.board-glow { position: absolute; inset: 12% -30%; z-index: -1; background: linear-gradient(180deg, rgba(105, 231, 255, .08), transparent 60%); filter: blur(35px); pointer-events: none; }
#board { display: block; width: 300px; height: 600px; border-radius: 11px; outline: none; }
.board-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 4;
  border-radius: 11px;
  text-align: center;
  background: rgba(7, 10, 21, .82);
  backdrop-filter: blur(5px);
}
.board-overlay[data-state="over"] { background: radial-gradient(circle at 50% 42%, rgba(94,15,70,.58), rgba(12,5,22,.9) 72%); }
.board-overlay[data-state="over"] .overlay-kicker { color: var(--pink); text-shadow: 0 0 18px rgba(255,115,190,.7); }
.board-overlay[data-state="over"] h2 { text-shadow: 0 0 28px rgba(255,115,190,.35); }
.board-overlay.hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.overlay-kicker { margin: 0; color: var(--cyan); font: 500 10px/1 var(--mono); letter-spacing: .24em; }
.board-overlay h2 { margin: 15px 0 8px; font-size: 31px; }
.board-overlay p:not(.overlay-kicker) { max-width: 215px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.primary-button {
  min-height: 44px;
  margin-top: 24px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  color: #07101d;
  background: linear-gradient(135deg, #b5f4ff, #69e7ff);
  box-shadow: 0 0 32px rgba(105, 231, 255, .24);
  font: 800 12px/1 var(--font);
  cursor: pointer;
}
.touch-controls { display: none; }
.tip { margin: 17px 0 0; color: rgba(140, 150, 182, .75); text-align: center; font: 500 10px/1 var(--mono); }

@media (max-width: 820px) {
  .game-shell { padding-top: 40px; }
  .arcade { grid-template-columns: 1fr; }
  .board-wrap { order: 1; }
  .left-panel, .right-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .left-panel { order: 2; }
  .right-panel { order: 3; }
  .controls-card { grid-column: span 2; }
  .secondary-button { margin-top: 0; }
}
@media (max-width: 520px) {
  .site-nav { align-items: start; flex-direction: column; gap: 8px; padding: 13px 15px; }
  .nav-links { width: 100%; }
  .games-panel { position: fixed; top: 112px; right: 16px; left: 16px; width: auto; }
  .game-shell { width: min(100% - 20px, 420px); padding-top: 34px; }
  .game-intro { align-items: start; flex-direction: column; gap: 22px; }
  .arcade { margin-top: 28px; padding: 12px; }
  .board-wrap, #board { width: min(300px, calc(100vw - 48px)); height: min(600px, calc((100vw - 48px) * 2)); }
  #board { image-rendering: auto; }
  .left-panel, .right-panel { grid-template-columns: 1fr 1fr; gap: 9px; }
  .mini-card, .stat-card { padding: 12px; }
  .mini-card canvas { width: 92px; height: 92px; }
  .next-stack canvas { width: 92px; height: 44px; }
  .touch-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 14px auto 0; }
.touch-controls button { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: rgba(15, 20, 37, .84); font: 700 16px/1 var(--font); }
  .touch-controls button:last-child { font-size: 11px; color: var(--cyan); }
}
button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .line-clear-badge[data-visible="true"] { animation: none; opacity: 1; transform: translate(-50%, 0) scale(1); }
  .game-over-flash[data-active="true"], .board-wrap[data-state="over"] #board { animation: none; }
  .level-progress span { transition: none; }
}

/* 2026 Cozy Falling Blocks shell: the game logic stays in the engine; this layer only
   gives the classic board a richer arcade cabinet and a purpose-built phone UI. */
.site-nav {
  border-color: rgba(105, 231, 255, .2);
  background: linear-gradient(110deg, rgba(10, 15, 31, .86), rgba(17, 14, 39, .76));
  box-shadow: 0 22px 80px rgba(0, 0, 0, .34), 0 0 0 1px rgba(178, 140, 255, .04), inset 0 1px rgba(255, 255, 255, .07);
}
.game-shell { width: min(1240px, calc(100vw - 40px)); padding-top: 62px; }
.game-intro h1 { font-size: clamp(68px, 9vw, 112px); text-shadow: 0 0 44px rgba(105, 231, 255, .12); }
.game-intro h1 span { text-shadow: 0 0 30px rgba(105, 231, 255, .5); }
.game-status { padding: 11px 14px; border: 1px solid rgba(105, 231, 255, .14); border-radius: 999px; background: rgba(11, 16, 34, .64); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.arcade {
  grid-template-columns: 210px minmax(340px, 1fr) 210px;
  gap: 28px;
  margin-top: 42px;
  padding: 30px;
  border-color: rgba(105, 231, 255, .18);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 24%, rgba(105, 231, 255, .1), transparent 33%),
    linear-gradient(145deg, rgba(24, 30, 57, .78), rgba(8, 12, 27, .84));
  box-shadow: 0 32px 110px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .08), inset 0 -1px rgba(105, 231, 255, .05);
}
.stat-card, .mini-card {
  border-color: rgba(160, 182, 255, .2);
  background: linear-gradient(145deg, rgba(15, 21, 42, .84), rgba(9, 13, 28, .68));
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 14px 36px rgba(0,0,0,.12);
}
.score-card { position: relative; overflow: hidden; }
.score-card::after { position: absolute; right: -30px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: rgba(105,231,255,.09); content: ""; filter: blur(2px); }
.score-card strong { color: #fff; text-shadow: 0 0 20px rgba(105, 231, 255, .18); }
.board-column { display: flex; min-width: 0; flex-direction: column; align-items: center; }
.board-topline { display: flex; width: 100%; justify-content: space-between; gap: 12px; color: rgba(140,150,182,.72); font: 500 9px/1 var(--mono); letter-spacing: .14em; }
.board-topline { margin: 0 0 12px; padding: 0 5px; }
.board-topline span:first-child { color: var(--cyan); }
.board-wrap {
  width: 340px;
  height: 680px;
  border-color: rgba(105, 231, 255, .36);
  border-radius: 18px;
  background: #060a17;
  box-shadow: 0 0 0 10px rgba(105, 231, 255, .035), 0 0 0 1px rgba(178,140,255,.12), 0 0 90px rgba(105, 231, 255, .18), 0 28px 60px rgba(0,0,0,.3);
}
#board { width: 340px; height: 680px; border-radius: 17px; }
.board-overlay { background: rgba(5, 9, 21, .78); }
.board-overlay h2 { font-size: 36px; text-shadow: 0 0 30px rgba(105,231,255,.26); }
.primary-button { min-height: 48px; padding: 0 28px; background: linear-gradient(135deg, #d5fbff, #69e7ff 60%, #a98cff); box-shadow: 0 0 38px rgba(105, 231, 255, .28); }
.secondary-button { border-color: rgba(105,231,255,.22); background: rgba(105,231,255,.07); }

@media (max-width: 960px) and (min-width: 681px) {
  .game-shell { width: min(900px, calc(100vw - 28px)); }
  .arcade { grid-template-columns: 170px minmax(300px, 1fr) 170px; gap: 14px; padding: 20px; }
  .board-wrap, #board { width: 300px; height: 600px; }
}

@media (max-width: 680px) {
  html, body { min-height: 100dvh; background: #070a16; }
  body { overscroll-behavior: none; }
  .site-nav { display: none; }
  .game-shell { width: 100%; min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 10px calc(18px + env(safe-area-inset-bottom)); }
  .game-intro { align-items: center; flex-direction: row; gap: 12px; }
  .game-intro > div:first-child { min-width: 0; }
  .eyebrow { font-size: 8px; letter-spacing: .14em; }
  .game-intro h1 { margin-top: 9px; font-size: clamp(42px, 14vw, 64px); }
  .lede { display: none; }
  .game-status { flex: 0 0 auto; margin: 0; padding: 8px 10px; font-size: 9px; }
  .arcade { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 14px; padding: 9px; border-radius: 24px; background: linear-gradient(145deg, rgba(18,24,47,.9), rgba(7,10,22,.96)); }
  .left-panel { order: 0; display: grid; grid-template-columns: 1.14fr .93fr .93fr; gap: 6px; }
  .board-column { order: 1; }
  .right-panel { display: none; }
  .stat-card, .mini-card { min-width: 0; padding: 10px; border-radius: 14px; }
  .panel-label { font-size: 8px; letter-spacing: .12em; }
  .score-card strong { margin: 8px 0 8px; font-size: 25px; }
  .level-row { font-size: 8px; }
  .streak-row, .level-progress, .level-progress-copy { display: none; }
  .mini-card canvas { width: 62px; height: 62px; margin-top: 6px; }
  .next-stack { gap: 1px; margin-top: 5px; padding: 2px 0; }
  .next-stack canvas { width: 70px; height: 27px; }
  .mini-action { display: none; }
  .board-topline { margin-bottom: 7px; padding: 0 3px; font-size: 7px; }
  .board-wrap, #board { width: min(360px, calc(100vw - 36px)); height: auto; aspect-ratio: 1 / 2; }
  .board-wrap { border-radius: 16px; box-shadow: 0 0 0 7px rgba(105,231,255,.035), 0 0 60px rgba(105,231,255,.16), 0 20px 48px rgba(0,0,0,.32); }
  #board { border-radius: 15px; }
  .board-overlay { padding: 18px; }
  .board-overlay h2 { margin: 11px 0 6px; font-size: 28px; }
  .board-overlay p:not(.overlay-kicker) { font-size: 11px; }
  .primary-button { min-height: 42px; margin-top: 18px; padding: 0 21px; font-size: 11px; }
  .touch-controls { position: sticky; bottom: 8px; z-index: 8; display: grid; grid-template-columns: 1.1fr 1fr .92fr; align-items: center; gap: 8px; width: min(360px, calc(100vw - 26px)); margin: 10px auto 0; padding: 10px; border: 1px solid rgba(105,231,255,.2); border-radius: 22px; background: rgba(9,13,28,.88); box-shadow: 0 16px 40px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(18px); }
  .d-pad { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 30px); gap: 3px; justify-content: center; }
  .touch-controls button { min-height: 30px; border: 1px solid rgba(160,182,255,.23); border-radius: 9px; color: var(--text); background: linear-gradient(145deg, rgba(57,65,95,.8), rgba(20,25,48,.92)); box-shadow: inset 0 1px rgba(255,255,255,.13), 0 3px 8px rgba(0,0,0,.22); font: 700 16px/1 var(--font); touch-action: manipulation; }
  .d-pad button:nth-child(1) { grid-column: 2; grid-row: 1; }
  .d-pad button:nth-child(2) { grid-column: 1; grid-row: 2; }
  .d-pad button:nth-child(3) { grid-column: 2; grid-row: 2; }
  .d-pad button:nth-child(4) { grid-column: 3; grid-row: 2; }
  .action-pad { display: flex; justify-content: center; gap: 6px; }
  .action-pad button { width: 43px; height: 43px; min-height: 43px; border-radius: 50%; color: #07101d; background: radial-gradient(circle at 35% 28%, #ffd7ee, #ff73be 58%, #9c67d7); border-color: rgba(255,255,255,.3); box-shadow: 0 0 18px rgba(255,115,190,.25), inset 0 2px rgba(255,255,255,.45); }
  .action-pad button:nth-child(2) { color: #07101d; background: radial-gradient(circle at 35% 28%, #efffd2, #b4dd72 58%, #4e9d86); box-shadow: 0 0 18px rgba(154,220,141,.2), inset 0 2px rgba(255,255,255,.45); }
  .action-pad b { display: block; font: 800 15px/1 var(--font); }
  .action-pad span, .drop-control span { display: block; margin-top: 3px; font: 500 6px/1 var(--mono); letter-spacing: .04em; }
  .drop-control { min-height: 48px !important; color: var(--cyan) !important; background: linear-gradient(145deg, rgba(21,52,73,.9), rgba(11,24,47,.95)) !important; }
  .drop-control b { display: block; font: 800 10px/1 var(--font); letter-spacing: .08em; }
  .tip { display: none; }
}

/* Hold stays the same action, but the X treatment makes it clear that it is
   a deliberate button—not a discard or delete control. */
.action-pad button:nth-child(2) {
  color: #fff;
  background: radial-gradient(circle at 35% 28%, #ffb6c7, #f0445d 58%, #9e1e45);
  border-color: rgba(255,190,205,.55);
  box-shadow: 0 0 22px rgba(255,55,91,.34), inset 0 2px rgba(255,255,255,.45);
}

/* Living arcade cabinet: the surrounding machine has a slow power-up glow,
   while the playfield gets a restrained scanline and light sweep. The motion
   stays atmospheric so it never competes with the falling pieces. */
body::before {
  background:
    radial-gradient(circle at 50% 15%, rgba(105,231,255,.16), transparent 27%),
    radial-gradient(circle at 14% 58%, rgba(178,140,255,.14), transparent 28%),
    radial-gradient(circle at 90% 82%, rgba(255,115,190,.1), transparent 26%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, #080c1a, #060713 60%, #0c1024);
  animation: cabinet-breathe 13s ease-in-out infinite alternate;
}
.aurora {
  opacity: .18;
  mix-blend-mode: screen;
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
.aurora-two { animation-delay: -7s; animation-duration: 21s; }
.arcade {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.arcade::before {
  position: absolute;
  inset: -5%;
  z-index: -1;
  border-radius: 38px;
  background: conic-gradient(from 210deg at 50% 44%, rgba(105,231,255,0), rgba(105,231,255,.3), rgba(178,140,255,.18), rgba(255,115,190,.18), rgba(105,231,255,0));
  content: "";
  filter: blur(28px);
  opacity: .34;
  transform: rotate(-2deg) scale(.96);
  animation: cabinet-aura 11s linear infinite;
  pointer-events: none;
}
.arcade::after {
  position: absolute;
  inset: 1px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 31px;
  content: "";
  box-shadow: inset 0 0 42px rgba(105,231,255,.04), 0 0 0 1px rgba(178,140,255,.03);
  pointer-events: none;
}
.stat-card, .mini-card {
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.stat-card:hover, .mini-card:hover {
  border-color: rgba(105,231,255,.32);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 26px rgba(105,231,255,.1), 0 14px 36px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.board-wrap {
  isolation: isolate;
  box-shadow: 0 0 0 10px rgba(105,231,255,.045), 0 0 0 1px rgba(178,140,255,.16), 0 0 105px rgba(105,231,255,.23), 0 28px 60px rgba(0,0,0,.34);
}
.board-wrap::after {
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 17px;
  background:
    linear-gradient(112deg, transparent 35%, rgba(255,255,255,.11) 49%, transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.025) 10px, transparent 11px);
  background-size: 240% 100%, 100% 100%;
  content: "";
  opacity: .38;
  mix-blend-mode: screen;
  animation: board-light-sweep 8s ease-in-out infinite, board-scanline 5s linear infinite;
  pointer-events: none;
}
.board-glow {
  opacity: .9;
  animation: board-glow-pulse 5s ease-in-out infinite alternate;
}
.equalizer i { animation: equalizer-pulse 1.4s ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { animation-delay: -.42s; }
.equalizer i:nth-child(3) { animation-delay: -.76s; }
@keyframes cabinet-breathe { 0% { filter: saturate(.92) brightness(.94); } 100% { filter: saturate(1.08) brightness(1.05); } }
@keyframes aurora-drift { 0% { transform: translate3d(-3vw, 1vh, 0) scale(.92); } 100% { transform: translate3d(7vw, -4vh, 0) scale(1.12); } }
@keyframes cabinet-aura { 0% { transform: rotate(-2deg) scale(.94); opacity: .22; } 50% { transform: rotate(3deg) scale(1.02); opacity: .42; } 100% { transform: rotate(-2deg) scale(.94); opacity: .22; } }
@keyframes board-light-sweep { 0%, 18% { background-position: 160% 0, 0 0; } 62%, 100% { background-position: -70% 0, 0 0; } }
@keyframes board-scanline { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 0, 0 22px; } }
@keyframes board-glow-pulse { 0% { opacity: .58; transform: scale(.96); } 100% { opacity: 1; transform: scale(1.04); } }
@keyframes equalizer-pulse { 0% { transform: scaleY(.65); opacity: .62; } 100% { transform: scaleY(1.08); opacity: 1; } }
@media (max-width: 680px) {
  .arcade::before { inset: -3%; filter: blur(20px); opacity: .28; }
  .board-wrap { box-shadow: 0 0 0 7px rgba(105,231,255,.05), 0 0 65px rgba(105,231,255,.2), 0 20px 48px rgba(0,0,0,.34); }
  .board-wrap::after { border-radius: 15px; opacity: .28; }
  .stat-card:hover, .mini-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, .aurora, .arcade::before, .board-wrap::after, .board-glow, .equalizer i { animation: none; }
}
.speed-card { margin-top: 0; }
.speed-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 11px; }
.speed-controls button {
  min-height: 31px;
  padding: 0 5px;
  border: 1px solid rgba(160,182,255,.2);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font: 700 9px/1 var(--font);
  cursor: pointer;
  touch-action: manipulation;
}
.speed-controls button[aria-pressed="true"] {
  color: #07101d;
  border-color: rgba(105,231,255,.55);
  background: linear-gradient(135deg, #c9f8ff, #69e7ff);
  box-shadow: 0 0 16px rgba(105,231,255,.18);
}
.speed-controls button[data-speed="really-fast"] { color: #ff9caf; border-color: rgba(255,72,105,.28); }
.speed-controls button[data-speed="really-fast"][aria-pressed="true"] {
  color: #fff;
  border-color: rgba(255,120,140,.8);
  background: linear-gradient(135deg, #ff7993, #c72051);
  box-shadow: 0 0 18px rgba(255,55,91,.3);
}
.speed-caption { margin: 9px 0 0; color: rgba(140,150,182,.8); font: 500 8px/1.3 var(--mono); }

@media (max-width: 680px) {
  .right-panel { display: flex; order: 2; gap: 8px; margin-top: 0; }
  .right-panel > .music-card,
  .right-panel > .controls-card,
  .right-panel > .secondary-button { display: none; }
  .right-panel .speed-card { display: block; width: min(380px, calc(100vw - 34px)); margin: 0 auto; padding: 10px; }
  .right-panel .speed-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
  .right-panel .speed-controls button { min-height: 29px; font-size: 8px; }
  .right-panel .speed-caption { display: none; }
}

/* Catastrophic arcade finish: the board gets a readable pause, then a layered
   warning treatment that makes the loss feel like an event, not a dead end. */
.game-over-mark, .game-over-burst { display: none; }
.board-wrap[data-state="over"] {
  animation: board-catastrophe 1.7s cubic-bezier(.18,.84,.22,1) both;
  box-shadow: 0 0 0 10px rgba(255,55,91,.08), 0 0 0 2px rgba(255,130,150,.28), 0 0 120px rgba(255,55,91,.48), 0 28px 60px rgba(0,0,0,.42);
}
.board-wrap[data-state="over"]::before {
  position: absolute;
  inset: -18px;
  z-index: 5;
  border: 1px solid rgba(255,100,126,.7);
  border-radius: 24px;
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: game-over-ring 1.7s ease-out both;
}
.board-wrap[data-state="over"] #board { animation: board-catastrophe-canvas 1.45s steps(5, end) both; }
.game-over-flash[data-active="true"] { animation: game-over-surge 1.7s ease-out both; }
.board-overlay[data-state="over"] {
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(255,55,91,.5), rgba(72,7,42,.88) 42%, rgba(7,3,18,.97) 82%);
  animation: game-over-overlay-in .72s cubic-bezier(.16,.86,.25,1) both;
}
.board-overlay[data-state="over"]::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 5px), linear-gradient(90deg, transparent, rgba(255,55,91,.14), transparent);
  content: "";
  mix-blend-mode: screen;
  opacity: .45;
  animation: game-over-scan 1.25s steps(4, end) infinite;
}
.board-overlay[data-state="over"]::after {
  position: absolute;
  inset: 12% 8%;
  z-index: 0;
  border: 1px solid rgba(255,185,200,.25);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(255,55,91,.05), 0 0 0 44px rgba(255,55,91,.035), inset 0 0 36px rgba(255,55,91,.16);
  content: "";
  opacity: 0;
  transform: scale(.45);
  animation: game-over-rings 1.7s cubic-bezier(.18,.8,.22,1) both;
}
.board-overlay[data-state="over"] .game-over-mark {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 0 9px;
  color: transparent;
  font: 900 clamp(48px, 12vw, 96px)/.76 var(--font);
  letter-spacing: -.1em;
  text-align: center;
  -webkit-text-stroke: 1px rgba(255,225,234,.88);
  text-shadow: 0 0 4px rgba(255,55,91,.95), 0 0 28px rgba(255,55,91,.82), 7px 5px 0 rgba(112,11,54,.7);
  transform: skew(-4deg) scale(.62) translateY(18px);
  animation: game-over-title .9s cubic-bezier(.16,.86,.25,1) .12s both, game-over-glitch 2.2s steps(2, end) 1.1s infinite;
}
.board-overlay[data-state="over"] .game-over-burst {
  position: absolute;
  inset: 5% 5%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.game-over-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 2px;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,225,234,.9), rgba(255,55,91,0));
  box-shadow: 0 0 12px rgba(255,55,91,.8);
  opacity: 0;
  transform-origin: 50% 0;
  animation: game-over-ray 1.15s cubic-bezier(.12,.8,.2,1) both;
}
.game-over-burst i:nth-child(1) { transform: rotate(0deg) translateY(-8%); }
.game-over-burst i:nth-child(2) { transform: rotate(60deg) translateY(-8%); animation-delay: .05s; }
.game-over-burst i:nth-child(3) { transform: rotate(120deg) translateY(-8%); animation-delay: .1s; }
.game-over-burst i:nth-child(4) { transform: rotate(180deg) translateY(-8%); animation-delay: .15s; }
.game-over-burst i:nth-child(5) { transform: rotate(240deg) translateY(-8%); animation-delay: .2s; }
.game-over-burst i:nth-child(6) { transform: rotate(300deg) translateY(-8%); animation-delay: .25s; }
.board-overlay[data-state="over"] .overlay-kicker { position: relative; z-index: 1; color: #ffdce6; font-size: 0; letter-spacing: .18em; text-shadow: 0 0 18px rgba(255,115,190,.8); }
.board-overlay[data-state="over"] .overlay-kicker::after { content: "STACK COLLAPSE"; font-size: 10px; }
.board-overlay[data-state="over"] h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.board-overlay[data-state="over"] p:not(.overlay-kicker) { position: relative; z-index: 1; max-width: 250px; color: rgba(255,225,234,.82); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.board-overlay[data-state="over"] .primary-button { position: relative; z-index: 1; color: #2b0618; background: linear-gradient(135deg, #fff1f6, #ff9db5 46%, #ff476d); box-shadow: 0 0 28px rgba(255,55,91,.5), 0 8px 18px rgba(0,0,0,.25); }
@keyframes board-catastrophe { 0% { transform: scale(1); } 9% { transform: scale(1.025) rotate(-.4deg); } 20% { transform: scale(.985) rotate(.35deg); } 34% { transform: scale(1.012) rotate(-.22deg); } 58% { transform: scale(.998); } 100% { transform: scale(1); } }
@keyframes board-catastrophe-canvas { 0% { transform: translate(0); filter: saturate(1); } 12% { transform: translate(-6px, 2px); filter: saturate(2.2) contrast(1.3); } 24% { transform: translate(6px, -3px); } 37% { transform: translate(-4px, 2px); filter: saturate(1.6) contrast(1.2); } 52% { transform: translate(3px, -1px); } 100% { transform: translate(0); filter: saturate(1); } }
@keyframes game-over-ring { 0% { opacity: 0; transform: scale(.78); } 18% { opacity: 1; transform: scale(1.01); } 100% { opacity: 0; transform: scale(1.16); } }
@keyframes game-over-overlay-in { 0% { opacity: 0; transform: scale(1.08); filter: saturate(2.4) brightness(1.55); } 45% { opacity: 1; transform: scale(.995); } 100% { opacity: 1; transform: scale(1); filter: saturate(1) brightness(1); } }
@keyframes game-over-rings { 0% { opacity: 0; transform: scale(.45); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes game-over-title { 0% { opacity: 0; transform: skew(-4deg) scale(.62) translateY(18px); filter: blur(7px); } 45% { opacity: 1; transform: skew(-4deg) scale(1.08) translateY(0); filter: blur(0); } 72% { transform: skew(-4deg) scale(.96); } 100% { opacity: 1; transform: skew(-4deg) scale(1); } }
@keyframes game-over-glitch { 0%, 82%, 100% { text-shadow: 0 0 4px rgba(255,55,91,.95), 0 0 28px rgba(255,55,91,.82), 7px 5px 0 rgba(112,11,54,.7); } 84% { text-shadow: -4px 0 #69e7ff, 4px 0 #ff476d, 0 0 28px rgba(255,55,91,.8); transform: skew(-4deg) translate(2px,-1px); } 88% { text-shadow: 4px 0 #69e7ff, -4px 0 #ff476d, 0 0 28px rgba(255,55,91,.8); transform: skew(-4deg) translate(-2px,1px); } }
@keyframes game-over-scan { 0% { transform: translateY(-18%); } 100% { transform: translateY(18%); } }
@keyframes game-over-ray { 0% { opacity: 0; transform-origin: 50% 0; scale: .3; } 30% { opacity: .9; } 100% { opacity: 0; scale: 1.05; } }

@media (max-width: 680px) {
  .board-overlay[data-state="over"] .game-over-mark { font-size: clamp(44px, 15vw, 72px); }
  .board-overlay[data-state="over"] p:not(.overlay-kicker) { max-width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .board-wrap[data-state="over"], .board-wrap[data-state="over"]::before,
  .board-wrap[data-state="over"] #board, .game-over-flash[data-active="true"],
  .board-overlay[data-state="over"], .board-overlay[data-state="over"]::after,
  .board-overlay[data-state="over"] .game-over-mark, .game-over-burst i { animation: none; }
  .board-overlay[data-state="over"] .game-over-mark { opacity: 1; transform: skew(-4deg) scale(1); }
}

/* A brief fractured-glass hit: it reads like the device screen cracked, then
   disappears so the replay action is clear within two seconds. */
.screen-shatter { position: absolute; inset: 0; z-index: 2; display: none; overflow: hidden; opacity: 0; pointer-events: none; }
.board-overlay[data-state="over"] .screen-shatter { display: block; animation: shatter-life 1.85s ease-out both; }
.screen-shatter::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.82), rgba(255,110,140,.18) 18%, transparent 52%);
  opacity: 0;
  animation: shatter-flash .34s cubic-bezier(.2,.8,.25,1) both;
}
.screen-shatter::after {
  position: absolute;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.1) 8px, transparent 9px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: shatter-scan 1.4s steps(3, end) .15s both;
}
.screen-shatter i {
  --angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 2px;
  height: 74%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,179,196,.85) 18%, rgba(255,55,91,.12) 88%, transparent);
  box-shadow: 0 0 7px rgba(255,216,226,.9), 0 0 15px rgba(255,55,91,.5);
  opacity: 0;
  transform: translate(-50%, 0) rotate(var(--angle)) scaleY(.04);
  transform-origin: 50% 0;
  animation: shatter-crack 1.45s cubic-bezier(.16,.86,.22,1) .06s both;
}
.screen-shatter i:nth-child(1) { --angle: -8deg; }
.screen-shatter i:nth-child(2) { --angle: 38deg; animation-delay: .1s; }
.screen-shatter i:nth-child(3) { --angle: 78deg; animation-delay: .14s; }
.screen-shatter i:nth-child(4) { --angle: 126deg; animation-delay: .18s; }
.screen-shatter i:nth-child(5) { --angle: 174deg; animation-delay: .12s; }
.screen-shatter i:nth-child(6) { --angle: 220deg; animation-delay: .2s; }
.screen-shatter i:nth-child(7) { --angle: 266deg; animation-delay: .08s; }
.screen-shatter i:nth-child(8) { --angle: 312deg; animation-delay: .16s; }
.screen-shatter b {
  --dx: 0px;
  --dy: 0px;
  --rot: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 27px;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,55,91,.45));
  clip-path: polygon(50% 0, 100% 72%, 23% 100%, 0 28%);
  filter: drop-shadow(0 0 8px rgba(255,55,91,.55));
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--rot)) scale(.1);
  animation: shard-fly 1.65s cubic-bezier(.12,.82,.22,1) .1s both;
}
.screen-shatter b:nth-of-type(1) { --dx: -31%; --dy: -27%; --rot: -42deg; }
.screen-shatter b:nth-of-type(2) { --dx: 27%; --dy: -34%; --rot: 26deg; animation-delay: .16s; }
.screen-shatter b:nth-of-type(3) { --dx: 37%; --dy: 14%; --rot: 82deg; animation-delay: .22s; }
.screen-shatter b:nth-of-type(4) { --dx: -35%; --dy: 26%; --rot: -70deg; animation-delay: .12s; }
.screen-shatter b:nth-of-type(5) { --dx: 6%; --dy: 38%; --rot: 112deg; animation-delay: .2s; }
.screen-shatter b:nth-of-type(6) { --dx: -11%; --dy: -41%; --rot: 8deg; animation-delay: .26s; }
@keyframes shatter-life { 0% { opacity: 0; } 7% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shatter-flash { 0% { opacity: 0; transform: scale(.7); } 12% { opacity: .92; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes shatter-scan { 0% { opacity: 0; transform: translateY(-18%); } 18% { opacity: .32; } 100% { opacity: 0; transform: translateY(18%); } }
@keyframes shatter-crack { 0% { opacity: 0; transform: translate(-50%, 0) rotate(var(--angle)) scaleY(.04); } 18% { opacity: .95; } 70% { opacity: .75; transform: translate(-50%, 0) rotate(var(--angle)) scaleY(1); } 100% { opacity: 0; transform: translate(-50%, 0) rotate(var(--angle)) scaleY(1.02); } }
@keyframes shard-fly { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scale(.1); } 22% { opacity: .95; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--rot) + 28deg)) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .screen-shatter, .screen-shatter::before, .screen-shatter::after, .screen-shatter i, .screen-shatter b { animation: none !important; }
  .screen-shatter { display: none !important; }
}

@media (max-width: 380px) {
  .game-shell { padding-left: 7px; padding-right: 7px; }
  .arcade { padding: 7px; }
  .left-panel { gap: 4px; }
  .stat-card, .mini-card { padding: 8px; }
  .touch-controls { width: calc(100vw - 14px); gap: 5px; padding: 8px; }
  .d-pad { grid-template-columns: repeat(3, 27px); grid-template-rows: repeat(2, 27px); }
  .action-pad button { width: 38px; height: 38px; min-height: 38px; }
}

/* Cross-device touch controls. The board engine stays unchanged; this layer
   makes the same actions reachable by touch everywhere. */
.touch-controls {
  display: grid;
  grid-template-columns: 1.2fr 1fr .95fr;
  align-items: center;
  gap: 12px;
  width: min(650px, calc(100vw - 40px));
  margin: 24px auto 0;
  padding: 13px 16px;
  border: 1px solid rgba(105,231,255,.2);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(15,22,43,.88), rgba(8,12,27,.94));
  box-shadow: 0 18px 46px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
}
.d-pad { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 42px); gap: 4px; justify-content: center; }
.touch-controls button {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 42px;
  border: 1px solid rgba(160,182,255,.25);
  border-radius: 11px;
  color: var(--text);
  background: linear-gradient(145deg, rgba(57,65,95,.82), rgba(20,25,48,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.24);
  font: 700 18px/1 var(--font);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.d-pad button:nth-child(1) { grid-column: 2; grid-row: 1; }
.d-pad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.d-pad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.d-pad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.action-pad { display: flex; justify-content: center; gap: 9px; }
.action-pad button { width: 52px; height: 52px; min-height: 52px; gap: 5px; border-radius: 50%; color: #07101d; }
.action-pad button:first-child { background: radial-gradient(circle at 35% 28%, #ffd7ee, #ff73be 58%, #9c67d7); border-color: rgba(255,255,255,.3); box-shadow: 0 0 20px rgba(255,115,190,.27), inset 0 2px rgba(255,255,255,.45); }
.action-pad button:nth-child(2) { background: radial-gradient(circle at 35% 28%, #efffd2, #b4dd72 58%, #4e9d86); border-color: rgba(255,255,255,.3); box-shadow: 0 0 20px rgba(154,220,141,.22), inset 0 2px rgba(255,255,255,.45); }
.action-pad b { display: block; font: 800 17px/1 var(--font); }
.action-pad span, .drop-control span { display: block; margin-top: 0; font: 500 7px/1 var(--mono); letter-spacing: .04em; }
.drop-control { min-height: 56px !important; color: var(--cyan) !important; background: linear-gradient(145deg, rgba(21,52,73,.92), rgba(11,24,47,.96)) !important; }
.drop-control { gap: 6px; }
.drop-control b { display: block; font: 800 11px/1 var(--font); letter-spacing: .08em; }
.mobile-speed-control { display: none; }
.touch-controls button:active { transform: translateY(2px) scale(.98); filter: brightness(1.16); }

@media (max-width: 960px) and (min-width: 681px) {
  .touch-controls { width: min(610px, calc(100vw - 28px)); }
}

@media (max-width: 680px) {
  .touch-controls { width: min(380px, calc(100vw - 14px)); margin-top: 14px; padding: 9px; gap: 6px; }
  .d-pad { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 30px); gap: 3px; }
  .touch-controls button { min-height: 30px; border-radius: 9px; font-size: 16px; }
  .action-pad { gap: 6px; }
  .action-pad button { width: 43px; height: 43px; min-height: 43px; }
  .action-pad b { font-size: 15px; }
  .action-pad span, .drop-control span { margin-top: 3px; font-size: 6px; }
  .drop-control { min-height: 48px !important; }
  .drop-control b { font-size: 10px; }
}

/* Immersive cabinet pass
   1. Larger playfield + tighter side spacing
   2. Illuminated physical cabinet frame
   3. Richer, more legible HUD cards
   4. Stack/level-reactive atmosphere
   5. Stronger clear, combo and controller feedback */
.game-shell {
  width: min(980px, calc(100vw - 30px));
  padding-top: 42px;
}
.game-intro h1 { font-size: clamp(64px, 8vw, 96px); }
.arcade {
  --level-hue: 188;
  --stack-pressure: 0;
  grid-template-columns: 200px 404px 200px;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
  padding: 18px;
  border-color: hsl(var(--level-hue) 90% 70% / .22);
  background:
    radial-gradient(circle at 50% 30%, hsl(var(--level-hue) 90% 62% / .12), transparent 34%),
    linear-gradient(145deg, rgba(20,27,52,.88), rgba(7,10,24,.94));
  box-shadow: 0 34px 120px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.09), inset 0 -1px hsl(var(--level-hue) 90% 70% / .08);
  transition: border-color .45s ease, background .45s ease, box-shadow .45s ease;
}
.arcade::before {
  background: conic-gradient(from 210deg at 50% 44%, transparent, hsl(var(--level-hue) 96% 66% / .34), rgba(178,140,255,.2), rgba(255,115,190,.18), transparent);
}
.side-panel {
  align-self: stretch;
  justify-content: center;
  gap: 12px;
  padding: 22px 0;
}
.stat-card, .mini-card {
  position: relative;
  overflow: hidden;
  border-color: hsl(var(--level-hue) 74% 72% / .2);
  border-radius: 17px;
  background:
    linear-gradient(125deg, rgba(255,255,255,.045), transparent 38%),
    linear-gradient(155deg, rgba(14,22,45,.94), rgba(7,10,24,.84));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 18px 42px rgba(0,0,0,.16);
}
.stat-card::before, .mini-card::before {
  position: absolute;
  top: 0;
  right: 15%;
  left: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--level-hue) 96% 76% / .8), transparent);
  content: "";
}
.panel-label {
  color: hsl(var(--level-hue) 96% 76%);
  text-shadow: 0 0 16px hsl(var(--level-hue) 96% 64% / .45);
}
.score-card strong {
  margin: 13px 0 15px;
  color: transparent;
  background: linear-gradient(180deg, #fff, hsl(var(--level-hue) 92% 78%));
  font-size: clamp(40px, 4vw, 52px);
  letter-spacing: -.11em;
  text-shadow: none;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 13px hsl(var(--level-hue) 90% 62% / .25));
}
.level-row span {
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}
.level-progress { height: 5px; background: rgba(255,255,255,.055); }
.level-progress span {
  background: linear-gradient(90deg, hsl(var(--level-hue) 96% 68%), hsl(calc(var(--level-hue) + 56) 92% 72%));
  box-shadow: 0 0 18px hsl(var(--level-hue) 96% 66% / .5);
}
.next-stack {
  border: 1px solid rgba(255,255,255,.045);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.08));
  box-shadow: inset 0 14px 24px rgba(0,0,0,.12);
}
.board-column {
  position: relative;
  z-index: 1;
  width: 404px;
  padding: 15px 16px 16px;
  border: 1px solid hsl(var(--level-hue) 92% 72% / .24);
  border-radius: 29px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.055), transparent 24%),
    linear-gradient(160deg, rgba(18,29,59,.94), rgba(5,8,20,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.1), inset 0 0 34px hsl(var(--level-hue) 90% 64% / .055), 0 24px 70px rgba(0,0,0,.34);
  transition: border-color .45s ease, box-shadow .45s ease;
}
.board-column::before {
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 23px;
  content: "";
  pointer-events: none;
}
.board-column::after {
  position: absolute;
  top: 8px;
  right: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--level-hue) 96% 72%);
  box-shadow: -10px 0 hsl(var(--level-hue) 96% 72% / .5), -20px 0 hsl(var(--level-hue) 96% 72% / .2), 0 0 12px hsl(var(--level-hue) 96% 65%);
  content: "";
}
.board-topline { position: relative; z-index: 2; }
.board-topline { margin-bottom: 10px; color: rgba(205,217,255,.52); }
.board-topline span:first-child { color: hsl(var(--level-hue) 96% 76%); text-shadow: 0 0 13px hsl(var(--level-hue) 96% 64% / .45); }
.board-wrap, #board {
  width: 370px;
  height: 740px;
}
.board-wrap {
  border-color: hsl(var(--level-hue) 94% 70% / .42);
  box-shadow: 0 0 0 8px hsl(var(--level-hue) 94% 66% / .04), 0 0 0 1px rgba(178,140,255,.14), 0 0 92px hsl(var(--level-hue) 94% 62% / .2), 0 28px 58px rgba(0,0,0,.38);
  transition: border-color .38s ease, box-shadow .38s ease;
}
.board-wrap::after { border-radius: 17px; }
.touch-controls {
  border-color: hsl(var(--level-hue, 188) 88% 70% / .24);
  background: linear-gradient(145deg, rgba(20,29,57,.94), rgba(7,10,24,.97));
  box-shadow: 0 22px 54px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.09), 0 0 32px rgba(105,231,255,.07);
}
.touch-controls button { border-color: rgba(190,206,255,.28); box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -3px rgba(0,0,0,.22), 0 6px 13px rgba(0,0,0,.28); }
.touch-controls button:active { box-shadow: inset 0 3px 8px rgba(0,0,0,.35), 0 0 18px rgba(105,231,255,.16); }

/* The cabinet reacts to stack pressure without changing speed or rules. */
.arcade[data-danger="rising"] .board-column,
.arcade[data-danger="rising"] .board-wrap { border-color: rgba(255,200,92,.52); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 0 82px rgba(255,171,70,.18), 0 24px 62px rgba(0,0,0,.38); }
.arcade[data-danger="critical"] .board-column,
.arcade[data-danger="critical"] .board-wrap { border-color: rgba(255,85,126,.72); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 96px rgba(255,55,105,.3), 0 24px 68px rgba(0,0,0,.44); animation: critical-pressure 1.35s ease-in-out infinite alternate; }
.arcade[data-danger="critical"] { border-color: rgba(255,85,126,.34); background: radial-gradient(circle at 50% 30%, rgba(255,55,105,.15), transparent 38%), linear-gradient(145deg, rgba(33,18,45,.92), rgba(8,7,21,.96)); }
.arcade[data-combo="active"] .score-card { animation: combo-hud .72s cubic-bezier(.18,.8,.24,1) both; }
.arcade[data-clear-tier="4"] { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 120px rgba(105,231,255,.28), 0 0 160px rgba(255,115,190,.16), 0 34px 120px rgba(0,0,0,.45); }

/* Clear celebrations now read like a cabinet-wide energy event. */
.line-clear-badge {
  min-width: 190px;
  padding: 12px 22px;
  border-radius: 9px;
  color: #06101d;
  background: linear-gradient(105deg, #fff7c4, #aaf5ff 48%, #bf9fff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 34px rgba(105,231,255,.58), 0 0 72px rgba(178,140,255,.25);
  letter-spacing: .23em;
  clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
}
.line-clear-badge[data-tier="4"] { min-width: 230px; font-size: 17px; animation-duration: .82s; }
.board-wrap[data-state="clear"] { animation: cabinet-clear-hit .72s cubic-bezier(.16,.86,.22,1) both; }
@keyframes critical-pressure { from { filter: saturate(1); } to { filter: saturate(1.22) brightness(1.06); } }
@keyframes combo-hud { 0% { transform: scale(1); } 36% { transform: scale(1.035); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 36px rgba(255,115,190,.24); } 100% { transform: scale(1); } }
@keyframes cabinet-clear-hit { 0% { transform: scale(1); filter: brightness(1); } 28% { transform: scale(1.022); filter: brightness(1.34) saturate(1.4); } 100% { transform: scale(1); filter: brightness(1); } }

@media (max-width: 1080px) and (min-width: 821px) {
  .game-shell { width: min(940px, calc(100vw - 24px)); }
  .arcade { grid-template-columns: 164px 354px 164px; gap: 10px; padding: 14px; }
  .board-column { width: 354px; padding: 13px 12px 14px; }
  .board-wrap, #board { width: 330px; height: 660px; }
  .side-panel { padding: 18px 0; gap: 9px; }
  .stat-card, .mini-card { padding: 12px; }
}
@media (max-width: 820px) and (min-width: 681px) {
  .game-shell { width: min(760px, calc(100vw - 20px)); }
  .arcade { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: 14px; }
  .board-column { order: 1; width: 394px; }
  .board-wrap, #board { width: 360px; height: 720px; }
  .left-panel { order: 2; display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .right-panel { order: 3; display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .controls-card { grid-column: auto; }
}
@media (max-width: 680px) {
  .game-shell { width: 100%; padding-top: max(14px, env(safe-area-inset-top)); }
  .game-intro h1 { font-size: clamp(42px, 14vw, 64px); }
  .arcade { grid-template-columns: 1fr; justify-items: center; gap: 9px; margin-top: 14px; padding: 9px; }
  .side-panel { padding: 0; }
  .left-panel { width: 100%; }
  .board-column { width: 100%; padding: 11px 4px 10px; border-radius: 22px; }
  .board-column::before { inset: 5px; border-radius: 17px; }
  .board-wrap, #board { width: min(370px, calc(100vw - 36px)); height: auto; aspect-ratio: 1 / 2; }
  .board-wrap { box-shadow: 0 0 0 6px hsl(var(--level-hue) 94% 66% / .045), 0 0 58px hsl(var(--level-hue) 94% 62% / .18), 0 18px 42px rgba(0,0,0,.36); }
  .line-clear-badge { min-width: 165px; padding: 10px 16px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade[data-danger="critical"] .board-column,
  .arcade[data-danger="critical"] .board-wrap,
  .arcade[data-combo="active"] .score-card,
  .board-wrap[data-state="clear"] { animation: none; }
}

/* Second Chance replaces the computer-centric hold slot with a universal,
   four-charge undo that reads clearly on desktop, tablet and phone. */
.next-card .next-stack-single {
  min-height: 126px;
  place-items: center;
  padding: 8px;
  border-color: hsl(var(--level-hue) 88% 72% / .14);
  background: radial-gradient(circle at 50% 45%, hsl(var(--level-hue) 92% 68% / .09), rgba(0,0,0,.08) 68%);
}
.next-card .next-stack-single canvas {
  width: 120px;
  height: 108px;
  margin: 0 auto;
}
.chance-card {
  display: flex;
  min-height: 204px;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
}
.chance-card::after {
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,92,.13), transparent 68%);
  content: "";
  pointer-events: none;
}
.chance-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chance-heading strong {
  color: #ffd65c;
  font: 500 9px/1 var(--mono);
  text-shadow: 0 0 14px rgba(255,214,92,.45);
}
.chance-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 7px 16px rgba(0,0,0,.22);
}
.chance-meter i {
  position: relative;
  height: 27px;
  overflow: hidden;
  border: 1px solid rgba(160,182,255,.13);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  transition: opacity .28s ease, filter .28s ease, background .28s ease, box-shadow .28s ease;
}
.chance-meter i::before {
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: linear-gradient(145deg, #fff4b0, #ffd65c 50%, #ff9d57);
  box-shadow: 0 0 13px rgba(255,214,92,.56), inset 0 1px rgba(255,255,255,.66);
  content: "";
  opacity: 0;
  transform: scale(.7);
  transition: opacity .28s ease, transform .28s ease;
}
.chance-meter i[data-active="true"] { border-color: rgba(255,214,92,.36); background: rgba(255,214,92,.06); }
.chance-meter i[data-active="true"]::before { opacity: 1; transform: scale(1); }
.chance-copy { margin: 0; color: rgba(190,200,230,.72); font-size: 10px; line-height: 1.45; }
.chance-button {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  border-color: rgba(255,214,92,.32);
  color: #1c1303;
  background: linear-gradient(135deg, #fff4b0, #ffd65c 58%, #ffab62);
  box-shadow: 0 0 22px rgba(255,214,92,.16), inset 0 1px rgba(255,255,255,.62), inset 0 -2px rgba(142,75,15,.2);
  font-size: 9px;
}
.chance-button > span { font-size: 18px; line-height: 1; }
.chance-button:disabled {
  cursor: not-allowed;
  color: rgba(190,200,230,.48);
  border-color: rgba(160,182,255,.13);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  filter: none;
}
.chance-card[data-ready="true"] {
  border-color: rgba(255,214,92,.38);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 30px rgba(255,214,92,.09), 0 18px 42px rgba(0,0,0,.16);
}
.chance-card[data-ready="true"] .chance-button { animation: chance-ready-pulse 2.4s ease-in-out infinite; }
.chance-card[data-used="true"] { animation: chance-card-spend .72s cubic-bezier(.16,.86,.22,1) both; }
.action-pad button[data-action="second-chance"] {
  color: #1d1301;
  background: radial-gradient(circle at 35% 28%, #fff4b0, #ffd65c 56%, #dd7f43);
  border-color: rgba(255,236,161,.62);
  box-shadow: 0 0 22px rgba(255,214,92,.3), inset 0 2px rgba(255,255,255,.55), inset 0 -3px rgba(128,61,8,.22);
}
.action-pad button[data-action="second-chance"]:disabled { opacity: .38; filter: grayscale(.55); box-shadow: inset 0 2px rgba(255,255,255,.16); }
.board-wrap[data-state="second-chance"] { animation: second-chance-board .72s cubic-bezier(.16,.86,.22,1) both; }
.board-wrap[data-state="second-chance"] #board { animation: second-chance-canvas .72s cubic-bezier(.16,.86,.22,1) both; }
@keyframes chance-ready-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(255,214,92,.14), inset 0 1px rgba(255,255,255,.62); } 50% { box-shadow: 0 0 31px rgba(255,214,92,.34), inset 0 1px rgba(255,255,255,.72); } }
@keyframes chance-card-spend { 0% { transform: scale(1); filter: brightness(1); } 34% { transform: scale(1.035); filter: brightness(1.3); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes second-chance-board { 0% { transform: scale(1); filter: hue-rotate(0); } 26% { transform: scale(.975); filter: hue-rotate(-35deg) brightness(1.45); } 58% { transform: scale(1.018); } 100% { transform: scale(1); filter: hue-rotate(0) brightness(1); } }
@keyframes second-chance-canvas { 0% { opacity: 1; transform: translateY(0); } 28% { opacity: .32; transform: translateY(-10px); } 55% { opacity: .72; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } }

@media (max-width: 680px) {
  .next-card .next-stack-single { min-height: 76px; padding: 3px; }
  .next-card .next-stack-single canvas { width: 82px; height: 70px; }
  .chance-card { min-height: 0; gap: 6px; padding: 8px; }
  .chance-heading { display: block; }
  .chance-heading strong { display: block; margin-top: 5px; font-size: 7px; }
  .chance-meter { gap: 2px; padding: 3px; border-radius: 7px; }
  .chance-meter i { height: 18px; border-radius: 4px; }
  .chance-meter i::before { inset: 3px; border-radius: 2px; }
  .chance-copy { display: none; }
  .chance-button { display: flex !important; min-height: 34px; padding: 5px 4px; white-space: normal; font-size: 7px; line-height: 1.15; }
  .chance-button > span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .chance-card[data-ready="true"] .chance-button,
  .chance-card[data-used="true"],
  .board-wrap[data-state="second-chance"],
  .board-wrap[data-state="second-chance"] #board { animation: none; }
}

/* Reactor Cockpit
   The cabinet becomes a single-screen console after Start while the classic
   board keeps square cells and scales to the available height. */
.reactor-console {
  position: relative;
  width: 100%;
  margin: 0 0 9px;
  padding: 8px 10px 7px;
  overflow: hidden;
  border: 1px solid rgba(105,231,255,.2);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(105,231,255,.065), transparent 36%, rgba(178,140,255,.055)),
    rgba(3,8,20,.78);
  box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 -9px 18px rgba(0,0,0,.16);
}
.reactor-console::after {
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
  content: "";
  opacity: .55;
  transform: skewX(-18deg);
  animation: reactor-scan 5.6s ease-in-out infinite;
  pointer-events: none;
}
.reactor-heading, .reactor-meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reactor-heading strong { color: var(--cyan); font: 500 8px/1 var(--mono); letter-spacing: .12em; text-shadow: 0 0 12px rgba(105,231,255,.5); }
.reactor-meter { position: relative; z-index: 1; height: 6px; margin: 6px 0 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(0,0,0,.32); box-shadow: inset 0 2px 5px rgba(0,0,0,.34); }
.reactor-meter::after { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(3,8,20,.78) calc(25% - 2px) 25%); content: ""; pointer-events: none; }
.reactor-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #69e7ff, #b28cff 58%, #ff73be); box-shadow: 0 0 14px rgba(105,231,255,.7); transition: width .48s cubic-bezier(.2,.8,.2,1); }
.reactor-meta { color: rgba(160,175,215,.62); font: 500 7px/1 var(--mono); letter-spacing: .04em; }
.reactor-meta span:first-child { color: rgba(215,245,255,.88); }

.arcade[data-reactor="overdrive"] {
  border-color: rgba(255,214,92,.48);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,214,92,.19), transparent 32%),
    radial-gradient(circle at 74% 20%, rgba(255,115,190,.12), transparent 25%),
    linear-gradient(145deg, rgba(30,25,52,.96), rgba(7,10,24,.97));
  box-shadow: 0 0 0 1px rgba(255,245,196,.08), 0 0 92px rgba(255,214,92,.18), 0 34px 120px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.12);
}
.arcade[data-reactor="overdrive"] .reactor-console {
  border-color: rgba(255,224,112,.66);
  background: linear-gradient(105deg, rgba(255,214,92,.2), rgba(255,115,190,.14) 52%, rgba(105,231,255,.16));
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 0 30px rgba(255,214,92,.25);
  animation: overdrive-console 1.1s ease-in-out infinite alternate;
}
.arcade[data-reactor="overdrive"] .reactor-heading strong { color: #fff4b0; text-shadow: 0 0 16px rgba(255,214,92,.9); }
.arcade[data-reactor="overdrive"] .reactor-meter span { background: linear-gradient(90deg, #fff4b0, #ffcc52 34%, #ff73be 68%, #69e7ff); animation: reactor-flow .8s linear infinite; }
.arcade[data-reactor="overdrive"] .board-column { border-color: rgba(255,222,100,.58); box-shadow: inset 0 1px rgba(255,255,255,.13), inset 0 0 38px rgba(255,115,190,.08), 0 0 75px rgba(255,214,92,.17), 0 24px 70px rgba(0,0,0,.38); }
.arcade[data-reactor="overdrive"] .board-wrap { border-color: rgba(255,238,160,.82); box-shadow: 0 0 0 8px rgba(255,214,92,.075), 0 0 0 1px rgba(255,115,190,.28), 0 0 105px rgba(255,214,92,.34), 0 28px 58px rgba(0,0,0,.4); }
.arcade[data-reactor="overdrive"] .score-card strong { background: linear-gradient(180deg, #fff, #fff2a9 48%, #ff9dc7); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 16px rgba(255,214,92,.55)); }
@keyframes reactor-scan { 0%, 20% { left: -35%; } 62%, 100% { left: 120%; } }
@keyframes reactor-flow { to { filter: hue-rotate(22deg) brightness(1.12); } }
@keyframes overdrive-console { from { filter: brightness(.96); } to { filter: brightness(1.18); } }

body.game-active { height: 100dvh; overflow: hidden; }
body.game-active .site-nav { display: none; }
body.game-active .game-shell {
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr) 72px;
  gap: 8px;
  width: min(1080px, calc(100vw - 18px));
  height: 100dvh;
  margin: 0 auto;
  padding: 8px 0;
}
body.game-active .game-intro { align-items: center; min-height: 0; }
body.game-active .game-intro > div:first-child { display: flex; align-items: baseline; gap: 12px; }
body.game-active .game-intro .eyebrow, body.game-active .game-intro .lede { display: none; }
body.game-active .game-intro h1 { margin: 0; font-size: 34px; line-height: 1; letter-spacing: -.06em; }
body.game-active .game-status { margin: 0; padding: 8px 11px; font-size: 9px; }
body.game-active .arcade {
  --cockpit-board-height: clamp(200px, calc(100dvh - 250px), 620px);
  --cockpit-board-width: calc(var(--cockpit-board-height) / 2);
  grid-template-columns: minmax(145px, 210px) calc(var(--cockpit-board-width) + 30px) minmax(145px, 210px);
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 10px 14px;
  overflow: hidden;
  border-radius: 26px;
}
body.game-active .side-panel { align-self: center; max-height: 100%; gap: 8px; padding: 0; }
body.game-active .stat-card, body.game-active .mini-card { padding: 10px; border-radius: 12px; }
body.game-active .score-card strong { margin: 7px 0 8px; font-size: clamp(25px, 3.2vw, 39px); }
body.game-active .streak-row { margin-top: 7px; }
body.game-active .level-progress { margin-top: 8px; }
body.game-active .next-card .next-stack-single { min-height: 70px; margin-top: 7px; padding: 3px; }
body.game-active .next-card .next-stack-single canvas { width: 92px; height: 68px; }
body.game-active .chance-card { min-height: 158px; gap: 6px; }
body.game-active .chance-meter { padding: 4px; }
body.game-active .chance-meter i { height: 19px; }
body.game-active .chance-copy { display: none; }
body.game-active .chance-button { min-height: 32px; margin-top: 1px; padding: 5px; }
body.game-active .music-card p { display: none; }
body.game-active .music-button { margin-top: 7px; }
body.game-active .controls-card { gap: 5px; }
body.game-active .control-row { font-size: 8px; }
body.game-active .control-row kbd { min-height: 17px; font-size: 8px; }
body.game-active .secondary-button { min-height: 31px; }
body.game-active .speed-controls { gap: 4px; margin-top: 7px; }
body.game-active .speed-controls button { min-height: 25px; font-size: 7px; }
body.game-active .speed-caption { margin-top: 6px; font-size: 7px; }
body.game-active .board-column { width: calc(var(--cockpit-board-width) + 30px); padding: 9px 14px 9px; border-radius: 23px; }
body.game-active .board-column::before { inset: 5px; border-radius: 18px; }
body.game-active .board-topline { margin-bottom: 5px; font-size: 7px; }
body.game-active .board-wrap, body.game-active #board { width: var(--cockpit-board-width); height: var(--cockpit-board-height); }
body.game-active .board-wrap { border-radius: 14px; }
body.game-active #board, body.game-active .board-overlay { border-radius: 13px; }
body.game-active .reactor-console { margin-bottom: 6px; padding: 5px 8px; border-radius: 9px; }
body.game-active .reactor-meter { height: 5px; margin: 4px 0; }
body.game-active .reactor-meta { font-size: 6px; }
body.game-active .touch-controls {
  align-self: stretch;
  width: min(760px, calc(100vw - 24px));
  height: 72px;
  margin: 0 auto;
  padding: 7px 14px;
  border-radius: 18px;
}
body.game-active .d-pad { grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(2, 26px); gap: 3px; }
body.game-active .touch-controls button { min-height: 26px; }
body.game-active .action-pad button { width: 44px; height: 44px; min-height: 44px; }
body.game-active .drop-control { min-height: 46px !important; }
body.game-active .tip { display: none; }

@media (max-width: 900px) and (min-width: 681px) {
  body.game-active .game-shell { width: calc(100vw - 12px); }
  body.game-active .arcade { grid-template-columns: minmax(128px, 145px) calc(var(--cockpit-board-width) + 26px) minmax(128px, 145px); gap: 7px; padding: 8px; }
  body.game-active .board-column { width: calc(var(--cockpit-board-width) + 26px); padding-right: 12px; padding-left: 12px; }
  body.game-active .stat-card, body.game-active .mini-card { padding: 8px; }
  body.game-active .chance-button { font-size: 7px; }
}

@media (max-width: 680px) {
  body.game-active .game-shell {
    grid-template-rows: 34px minmax(0, 1fr) 66px;
    gap: 5px;
    width: 100%;
    padding: max(5px, env(safe-area-inset-top)) 5px max(5px, env(safe-area-inset-bottom));
  }
  body.game-active .game-intro { padding: 0 3px; }
  body.game-active .game-intro h1 { font-size: 27px; }
  body.game-active .game-status { display: none; }
  body.game-active .arcade {
    --cockpit-board-height: clamp(300px, min(calc((100vw - 24px) * 2), calc(100dvh - 304px)), 540px);
    grid-template-columns: 1fr;
    grid-template-rows: 61px minmax(0, 1fr);
    gap: 4px;
    padding: 5px;
    overflow: visible;
    border-radius: 18px;
  }
  body.game-active .left-panel {
    display: grid;
    grid-template-columns: 1fr .78fr 1.16fr;
    grid-row: 1;
    width: 100%;
    height: 61px;
    gap: 4px;
    padding: 0;
  }
  body.game-active .left-panel .stat-card, body.game-active .left-panel .mini-card { min-height: 0; height: 61px; padding: 6px 7px; border-radius: 9px; }
  body.game-active .score-card strong { display: inline; margin: 0 7px 0 0; font-size: 22px; }
  body.game-active .score-card .level-row { display: inline-flex; font-size: 7px; }
  body.game-active .score-card .level-row span { padding: 2px 3px; }
  body.game-active .score-card .level-row span:last-child { display: none; }
  body.game-active .score-card .streak-row, body.game-active .score-card .level-progress, body.game-active .score-card .level-progress-copy { display: none; }
  body.game-active .next-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px; }
  body.game-active .next-card .next-stack-single { min-height: 48px; height: 48px; margin: 0; padding: 0; }
  body.game-active .next-card .next-stack-single canvas { width: 58px; height: 46px; }
  body.game-active .chance-card { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 3px; }
  body.game-active .chance-heading { display: block; }
  body.game-active .chance-heading strong { margin-top: 3px; font-size: 6px; }
  body.game-active .chance-meter { grid-column: 1 / -1; gap: 2px; padding: 2px; }
  body.game-active .chance-meter i { height: 12px; }
  body.game-active .chance-button, body.game-active .chance-copy { display: none !important; }
  body.game-active .board-column { grid-row: 2; width: calc(var(--cockpit-board-width) + 22px); padding: 6px 10px; border-radius: 17px; }
  body.game-active .board-column::before { border-radius: 13px; }
  body.game-active .board-topline { margin-bottom: 3px; }
  body.game-active .reactor-console { margin-bottom: 4px; padding: 4px 6px; }
  body.game-active .reactor-heading .panel-label { font-size: 7px; }
  body.game-active .reactor-heading strong { font-size: 6px; }
  body.game-active .reactor-meta { font-size: 5px; }
  body.game-active .right-panel { position: absolute; top: -38px; right: 4px; z-index: 6; display: block; width: auto; padding: 0; }
  body.game-active .right-panel > * { display: none; }
  body.game-active .right-panel > .secondary-button { display: grid; width: 34px; min-height: 29px; margin: 0; place-items: center; padding: 0; border-radius: 9px; font-size: 0; }
  body.game-active .right-panel > .secondary-button::before { content: "Ⅱ"; font-size: 11px; }
  body.game-active .right-panel > .secondary-button[data-paused="true"]::before { content: "▶"; }
  body.game-active .touch-controls { width: calc(100vw - 10px); height: 66px; padding: 5px 8px; gap: 6px; border-radius: 15px; }
  body.game-active .d-pad { grid-template-columns: repeat(3, 25px); grid-template-rows: repeat(2, 24px); gap: 2px; }
  body.game-active .touch-controls button { min-height: 24px; border-radius: 8px; font-size: 14px; }
  body.game-active .action-pad button { width: 39px; height: 39px; min-height: 39px; }
  body.game-active .action-pad b { font-size: 13px; }
  body.game-active .drop-control { min-height: 42px !important; }
}

@media (max-height: 600px) {
  body.game-active .game-shell { grid-template-rows: 30px minmax(0, 1fr) 56px; gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  body.game-active .game-intro h1 { font-size: 25px; }
  body.game-active .arcade { --cockpit-board-height: clamp(160px, calc(100dvh - 190px), 350px); padding-top: 4px; padding-bottom: 4px; }
  body.game-active .touch-controls { height: 56px; padding-top: 3px; padding-bottom: 3px; }
  body.game-active .reactor-meta { display: none; }
  body.game-active .reactor-meter { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reactor-console::after, .arcade[data-reactor="overdrive"] .reactor-console, .arcade[data-reactor="overdrive"] .reactor-meter span { animation: none; }
}

/* Clear, thumb-first controls: labels beat symbols for the rewind action, and
   the larger hit targets make the cabinet comfortable on a real phone. */
body.game-active {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}
body.game-active .touch-controls,
body.game-active .touch-controls button,
body.game-active #board { touch-action: none; }
body.game-active .game-shell { grid-template-rows: 38px minmax(0, 1fr) 82px; }
body.game-active .arcade { align-content: start; align-items: start; }
body.game-active .side-panel { align-self: center; }
body.game-active .touch-controls {
  grid-template-columns: 1.15fr 1.5fr 1.05fr;
  height: 82px;
  padding: 6px 12px;
}
body.game-active .d-pad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 30px); gap: 4px; }
body.game-active .touch-controls button { min-height: 30px; font-size: 20px; }
body.game-active .action-pad { gap: 8px; }
body.game-active .action-pad button[data-action="rotate"] { width: 52px; height: 52px; min-height: 52px; border-radius: 50%; }
body.game-active .action-pad button[data-action="second-chance"] {
  width: 76px;
  height: 52px;
  min-height: 52px;
  border-radius: 15px;
  color: #1d1301;
  background: radial-gradient(circle at 35% 28%, #fff4b0, #ffd65c 56%, #dd7f43);
  border-color: rgba(255,236,161,.72);
  box-shadow: 0 0 22px rgba(255,214,92,.3), inset 0 2px rgba(255,255,255,.55), inset 0 -3px rgba(128,61,8,.22);
}
body.game-active .action-pad button[data-action="second-chance"] b { font-size: 9px; letter-spacing: .04em; }
body.game-active .action-pad button[data-action="second-chance"] span { margin-top: 3px; font-size: 8px; letter-spacing: .08em; }
body.game-active .action-pad button[data-action="second-chance"]:disabled { opacity: .42; filter: grayscale(.55); }
body.game-active .chance-button {
  justify-content: center;
  min-height: 34px;
  white-space: nowrap;
  letter-spacing: .08em;
}
body.game-active .chance-button > span { font-size: 10px; }
body.game-active .chance-button[data-ready="true"] { color: #1d1301; }
body.game-active .chance-button[data-empty="true"] { letter-spacing: .05em; }

@media (max-width: 680px) {
  body.game-active .game-shell { grid-template-rows: 34px minmax(0, 1fr) 82px; }
  body.game-active .left-panel { align-self: start; }
  body.game-active .touch-controls { grid-template-columns: 1.15fr 1.5fr 1.05fr; height: 82px; padding: 5px 8px; gap: 6px; }
  body.game-active .d-pad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 32px); gap: 4px; }
  body.game-active .touch-controls button { min-height: 32px; border-radius: 9px; font-size: 20px; }
  body.game-active .action-pad button[data-action="rotate"] { width: 52px; height: 52px; min-height: 52px; }
  body.game-active .action-pad button[data-action="second-chance"] { width: 76px; height: 52px; min-height: 52px; }
  body.game-active .drop-control { min-height: 56px !important; }
  body.game-active .drop-control b { font-size: 12px; }
  body.game-active .drop-control span { font-size: 7px; }
}

@media (max-height: 600px) {
  body.game-active .game-shell { grid-template-rows: 30px minmax(0, 1fr) 66px; }
  body.game-active .touch-controls { height: 66px; padding-top: 3px; padding-bottom: 3px; }
  body.game-active .d-pad { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 27px); gap: 3px; }
  body.game-active .action-pad button[data-action="rotate"],
  body.game-active .action-pad button[data-action="second-chance"] { height: 46px; min-height: 46px; }
  body.game-active .action-pad button[data-action="second-chance"] { width: 70px; }
  body.game-active .drop-control { min-height: 48px !important; }
}

/* Desktop control deck: give the physical-looking controls a real console
   footprint while keeping the phone cockpit compact. */
@media (min-width: 961px) and (min-height: 601px) {
  body.game-active .game-shell { grid-template-rows: 38px minmax(0, 1fr) 160px; }
  body.game-active .arcade { --cockpit-board-height: clamp(260px, calc(100dvh - 330px), 620px); }
  body.game-active .touch-controls {
    grid-template-columns: minmax(240px, 1.1fr) minmax(270px, 1.2fr) minmax(210px, .9fr);
    width: min(920px, calc(100vw - 24px));
    height: 160px;
    gap: 18px;
    padding: 14px 22px;
    border-radius: 27px;
  }
  body.game-active .d-pad { grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(2, 64px); gap: 8px; }
  body.game-active .touch-controls button { min-height: 64px; border-radius: 16px; font-size: 34px; }
  body.game-active .action-pad { gap: 18px; }
  body.game-active .action-pad button[data-action="rotate"] { width: 104px; height: 104px; min-height: 104px; }
  body.game-active .action-pad button[data-action="second-chance"] { width: 138px; height: 104px; min-height: 104px; border-radius: 24px; }
  body.game-active .action-pad button[data-action="rotate"] b { font-size: 30px; }
  body.game-active .action-pad button[data-action="rotate"] span { font-size: 10px; }
  body.game-active .action-pad button[data-action="second-chance"] b { font-size: 15px; line-height: 1.12; }
  body.game-active .action-pad button[data-action="second-chance"] span { font-size: 10px; }
  body.game-active .drop-control { min-height: 112px !important; border-radius: 21px; }
  body.game-active .drop-control b { font-size: 20px; }
  body.game-active .drop-control span { font-size: 11px; }
}

@media (min-width: 681px) and (max-width: 960px) and (min-height: 601px) {
  body.game-active .game-shell { grid-template-rows: 38px minmax(0, 1fr) 132px; }
  body.game-active .arcade { --cockpit-board-height: clamp(240px, calc(100dvh - 292px), 520px); }
  body.game-active .touch-controls {
    grid-template-columns: minmax(190px, 1.1fr) minmax(215px, 1.2fr) minmax(160px, .9fr);
    width: calc(100vw - 16px);
    height: 132px;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 23px;
  }
  body.game-active .d-pad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 52px); gap: 6px; }
  body.game-active .touch-controls button { min-height: 52px; border-radius: 13px; font-size: 28px; }
  body.game-active .action-pad { gap: 10px; }
  body.game-active .action-pad button[data-action="rotate"] { width: 82px; height: 82px; min-height: 82px; }
  body.game-active .action-pad button[data-action="second-chance"] { width: 108px; height: 82px; min-height: 82px; border-radius: 19px; }
  body.game-active .action-pad button[data-action="rotate"] b { font-size: 24px; }
  body.game-active .action-pad button[data-action="rotate"] span { font-size: 8px; }
  body.game-active .action-pad button[data-action="second-chance"] b { font-size: 12px; line-height: 1.12; }
  body.game-active .action-pad button[data-action="second-chance"] span { font-size: 8px; }
  body.game-active .drop-control { min-height: 92px !important; border-radius: 17px; }
  body.game-active .drop-control b { font-size: 16px; }
  body.game-active .drop-control span { font-size: 9px; }
}

@media (max-width: 680px) {
  /* Pause and speed live together in the compact mobile header. */
  body.game-active .right-panel { display: flex; flex-direction: row; align-items: center; gap: 5px; }
  body.game-active .right-panel > .mobile-speed-control {
    display: flex;
    min-height: 29px;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    border: 1px solid rgba(105,231,255,.22);
    border-radius: 9px;
    background: rgba(8, 16, 34, .92);
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 14px rgba(0,0,0,.24);
  }
  body.game-active .mobile-speed-control > span { color: rgba(190,205,240,.78); font: 700 7px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  body.game-active .mobile-speed-control select {
    width: 87px;
    height: 23px;
    padding: 0 5px;
    border: 1px solid rgba(105,231,255,.32);
    border-radius: 6px;
    color: var(--text);
    background: rgba(19, 33, 61, .96);
    font: 700 8px/1 var(--font);
  }
}

/* Reactive Crystal Lightwell
   The board is the luminous heart of one unified arcade cabinet. Current-piece
   color, stack pressure and clear states now illuminate the surrounding glass
   without changing the board geometry or adding expensive full-screen motion. */
body { --piece-rgb: 105, 231, 255; }
.arcade[data-current-piece="I"] .board-column,
.arcade[data-current-piece="I"] .next-card { --piece-rgb: 105, 231, 255; }
.arcade[data-current-piece="J"] .board-column,
.arcade[data-current-piece="J"] .next-card { --piece-rgb: 124, 145, 255; }
.arcade[data-current-piece="L"] .board-column,
.arcade[data-current-piece="L"] .next-card { --piece-rgb: 255, 172, 105; }
.arcade[data-current-piece="O"] .board-column,
.arcade[data-current-piece="O"] .next-card { --piece-rgb: 255, 214, 92; }
.arcade[data-current-piece="S"] .board-column,
.arcade[data-current-piece="S"] .next-card { --piece-rgb: 110, 230, 162; }
.arcade[data-current-piece="T"] .board-column,
.arcade[data-current-piece="T"] .next-card { --piece-rgb: 193, 140, 255; }
.arcade[data-current-piece="Z"] .board-column,
.arcade[data-current-piece="Z"] .next-card { --piece-rgb: 255, 115, 168; }

body.game-active::before,
body.game-active .aurora { animation: none; }

.game-intro h1 {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 6%, #d9faff 48%, rgba(var(--piece-rgb), .88) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(var(--piece-rgb), .18));
}

/* Compact soundtrack selector. One audio element swaps sources on demand, so
   phones never preload the full music library or sacrifice playfield space. */
.soundtrack-select,
.mobile-soundtrack-control select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(105,231,255,.24);
  color: var(--text);
  background:
    linear-gradient(45deg, transparent 50%, rgba(190,220,255,.82) 50%) calc(100% - 13px) calc(50% - 2px) / 4px 4px no-repeat,
    linear-gradient(135deg, rgba(22,38,68,.96), rgba(10,20,42,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.2);
  font: 700 9px/1 var(--font);
  cursor: pointer;
}
.soundtrack-select {
  width: 100%;
  min-height: 32px;
  margin-top: 11px;
  padding: 0 30px 0 10px;
  border-radius: 8px;
}
.soundtrack-select:focus-visible,
.mobile-soundtrack-control select:focus-visible {
  outline: 2px solid rgba(105,231,255,.76);
  outline-offset: 2px;
}
.mobile-soundtrack-control { display: none; }
body.game-active .soundtrack-select { min-height: 25px; margin-top: 7px; font-size: 8px; }
body.game-active .music-button { min-height: 25px; margin-top: 5px; }

@media (max-width: 680px) {
  .right-panel > .mobile-soundtrack-control {
    display: flex;
    width: min(380px, calc(100vw - 34px));
    min-height: 31px;
    margin: 0 auto;
    align-items: center;
    gap: 7px;
    padding: 4px 6px 4px 9px;
    border: 1px solid rgba(105,231,255,.22);
    border-radius: 9px;
    color: rgba(190,205,240,.8);
    background: rgba(8,16,34,.9);
    font: 700 8px/1 var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .mobile-soundtrack-control select {
    min-width: 0;
    height: 23px;
    flex: 1;
    padding: 0 24px 0 7px;
    border-radius: 6px;
    font-size: 8px;
  }
  body.game-active .game-intro h1 { font-size: 18px; }
  body.game-active .right-panel > .mobile-soundtrack-control {
    display: flex;
    width: auto;
    min-height: 29px;
    margin: 0;
    gap: 0;
    padding: 3px;
  }
  body.game-active .mobile-soundtrack-control > span,
  body.game-active .mobile-speed-control > span { display: none; }
  body.game-active .mobile-soundtrack-control select { width: 104px; flex: none; }
  body.game-active .mobile-soundtrack-control,
  body.game-active .mobile-speed-control { min-height: 33px; }
  body.game-active .mobile-soundtrack-control select,
  body.game-active .mobile-speed-control select { height: 27px; font-size: 9px; }
  body.game-active .mobile-speed-control { padding: 3px; }
  body.game-active .mobile-speed-control select { width: 72px; }
}

@media (max-width: 360px) {
  body.game-active .game-intro h1 { font-size: 16px; }
  body.game-active .mobile-soundtrack-control select { width: 96px; }
  body.game-active .mobile-speed-control select { width: 65px; }
}

@media (max-width: 340px) {
  body.game-active .game-intro h1 { font-size: 0; }
  body.game-active .game-intro h1::before { content: "Blocks∞"; font-size: 16px; }
}

@media (max-width: 900px) and (min-width: 681px) {
  body.game-active .right-panel > .music-card { grid-column: 1 / -1; }
  body.game-active .soundtrack-select { padding-right: 24px; padding-left: 7px; font-size: 7px; }
}
.game-intro h1 span { color: rgb(var(--piece-rgb)); }

.arcade {
  border-color: rgba(var(--piece-rgb), .3);
  background:
    linear-gradient(112deg, rgba(255,255,255,.075), transparent 16% 84%, rgba(255,255,255,.035)),
    radial-gradient(circle at 50% 38%, rgba(var(--piece-rgb), .16), transparent 37%),
    radial-gradient(circle at 50% 118%, rgba(178,140,255,.13), transparent 48%),
    linear-gradient(152deg, rgba(19,30,59,.97), rgba(5,8,20,.985) 66%, rgba(13,8,29,.98));
  box-shadow:
    0 38px 120px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.045),
    0 0 80px rgba(var(--piece-rgb), .1),
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -18px 40px rgba(0,0,0,.22);
}
.arcade::before {
  inset: -14px;
  border-radius: 42px;
  background:
    conic-gradient(from 218deg at 50% 44%, transparent 0 18%, rgba(var(--piece-rgb), .42) 34%, rgba(178,140,255,.2) 51%, rgba(255,115,190,.16) 67%, transparent 84%),
    radial-gradient(circle at 50% 46%, rgba(var(--piece-rgb), .15), transparent 62%);
  filter: blur(20px);
  opacity: .42;
  animation: none;
}
.arcade::after {
  inset: 2px;
  border-color: rgba(var(--piece-rgb), .11);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 56px rgba(var(--piece-rgb), .06),
    0 0 0 1px rgba(178,140,255,.035);
}

.stat-card,
.mini-card,
.reactor-console,
.touch-controls {
  border-color: rgba(var(--piece-rgb), .21);
  background:
    linear-gradient(118deg, rgba(255,255,255,.075), transparent 25%),
    radial-gradient(circle at 18% 0, rgba(var(--piece-rgb), .09), transparent 46%),
    linear-gradient(155deg, rgba(16,26,52,.96), rgba(6,9,23,.96));
  box-shadow:
    inset 0 1px rgba(255,255,255,.11),
    inset 0 -14px 26px rgba(0,0,0,.14),
    0 18px 42px rgba(0,0,0,.23),
    0 0 28px rgba(var(--piece-rgb), .045);
}
.stat-card::before,
.mini-card::before {
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--piece-rgb), .9), transparent);
  box-shadow: 0 0 12px rgba(var(--piece-rgb), .34);
}
.panel-label,
.board-topline span { color: rgba(var(--piece-rgb), .96); text-shadow: 0 0 15px rgba(var(--piece-rgb), .45); }
.score-card strong {
  background: linear-gradient(180deg, #fff, rgba(var(--piece-rgb), .96));
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(var(--piece-rgb), .35));
}
.level-progress span,
.reactor-meter span {
  background: linear-gradient(90deg, rgba(var(--piece-rgb), .78), rgb(var(--piece-rgb)) 56%, #c8a0ff);
  box-shadow: 0 0 20px rgba(var(--piece-rgb), .52);
}
.next-stack {
  border-color: rgba(var(--piece-rgb), .16);
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--piece-rgb), .13), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14));
  box-shadow: inset 0 18px 28px rgba(0,0,0,.2), 0 0 24px rgba(var(--piece-rgb), .05);
}

.board-column {
  border-color: rgba(var(--piece-rgb), .38);
  background:
    linear-gradient(118deg, rgba(255,255,255,.09), transparent 17% 82%, rgba(255,255,255,.025)),
    radial-gradient(circle at 50% 22%, rgba(var(--piece-rgb), .13), transparent 38%),
    linear-gradient(158deg, rgba(18,31,64,.98), rgba(3,6,17,.99));
  box-shadow:
    inset 0 1px rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -26px 55px rgba(0,0,0,.26),
    0 0 74px rgba(var(--piece-rgb), .16),
    0 28px 72px rgba(0,0,0,.46);
}
.board-column::before {
  border-color: rgba(var(--piece-rgb), .13);
  background:
    linear-gradient(90deg, rgba(var(--piece-rgb), .055), transparent 13% 87%, rgba(var(--piece-rgb), .055));
  box-shadow: inset 0 0 26px rgba(var(--piece-rgb), .045);
}
.board-column::after {
  background: rgb(var(--piece-rgb));
  box-shadow:
    -10px 0 rgba(var(--piece-rgb), .52),
    -20px 0 rgba(var(--piece-rgb), .2),
    0 0 14px rgba(var(--piece-rgb), .94);
}
.board-topline {
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  color: rgba(218,228,255,.56);
}
.board-topline span { display: inline-flex; align-items: center; gap: 7px; }
.board-topline span::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--piece-rgb));
  box-shadow: 0 0 11px rgba(var(--piece-rgb), .95);
  content: "";
}
.board-topline::after {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(var(--piece-rgb), .44), transparent 72%);
  content: "";
}

.board-wrap {
  border-color: rgba(var(--piece-rgb), .72);
  background: #02050d;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 0 7px rgba(var(--piece-rgb), .05),
    0 0 0 9px rgba(4,7,18,.92),
    0 0 42px rgba(var(--piece-rgb), .34),
    0 0 105px rgba(var(--piece-rgb), .16),
    0 30px 60px rgba(0,0,0,.48);
}
.board-wrap::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--piece-rgb), .26), transparent 4.5% 95.5%, rgba(var(--piece-rgb), .22)),
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 4% 94%, rgba(var(--piece-rgb), .11));
  box-shadow:
    inset 8px 0 18px rgba(var(--piece-rgb), .08),
    inset -8px 0 18px rgba(178,140,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.07);
  content: "";
  pointer-events: none;
}
.board-wrap::after {
  opacity: .31;
  mix-blend-mode: screen;
}
.board-glow {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(var(--piece-rgb), .22), transparent 66%),
    linear-gradient(180deg, rgba(var(--piece-rgb), .12), transparent 68%);
  filter: blur(30px);
}
#board { filter: saturate(1.08) contrast(1.035); }
.board-overlay {
  border: 1px solid rgba(var(--piece-rgb), .12);
  background:
    radial-gradient(circle at 50% 39%, rgba(var(--piece-rgb), .15), transparent 38%),
    linear-gradient(155deg, rgba(7,13,30,.87), rgba(3,5,14,.94));
  box-shadow: inset 0 0 55px rgba(var(--piece-rgb), .06);
}
.overlay-kicker { color: rgb(var(--piece-rgb)); text-shadow: 0 0 17px rgba(var(--piece-rgb), .68); }
.primary-button {
  background: linear-gradient(135deg, #f0fdff, rgb(var(--piece-rgb)) 60%, #b792ff);
  box-shadow: 0 0 38px rgba(var(--piece-rgb), .34), inset 0 1px rgba(255,255,255,.72);
}

.touch-controls { position: relative; overflow: hidden; }
.touch-controls::before {
  position: absolute;
  top: 0;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--piece-rgb), .82), transparent);
  box-shadow: 0 0 14px rgba(var(--piece-rgb), .3);
  content: "";
  pointer-events: none;
}
.touch-controls > * { position: relative; z-index: 1; }
.d-pad button,
.drop-control {
  border-color: rgba(var(--piece-rgb), .3) !important;
  background:
    linear-gradient(145deg, rgba(72,84,124,.78), rgba(13,20,43,.98)) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.2),
    inset 0 -4px rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.3),
    0 0 16px rgba(var(--piece-rgb), .055) !important;
}
.drop-control { color: rgb(var(--piece-rgb)) !important; }

.arcade[data-danger="rising"] .board-column,
.arcade[data-danger="rising"] .board-wrap { border-color: rgba(255,194,89,.72); box-shadow: 0 0 0 7px rgba(255,194,89,.045), 0 0 84px rgba(255,162,66,.24), 0 28px 68px rgba(0,0,0,.46); }
.arcade[data-danger="critical"] .board-column,
.arcade[data-danger="critical"] .board-wrap { border-color: rgba(255,83,128,.84); box-shadow: 0 0 0 7px rgba(255,83,128,.055), 0 0 96px rgba(255,55,105,.34), 0 30px 72px rgba(0,0,0,.5); }
.arcade[data-reactor="overdrive"] .board-column,
.arcade[data-reactor="overdrive"] .board-wrap { border-color: rgba(255,231,132,.88); box-shadow: 0 0 0 7px rgba(255,214,92,.08), 0 0 88px rgba(255,214,92,.34), 0 0 128px rgba(255,115,190,.15), 0 30px 72px rgba(0,0,0,.48); }
.arcade[data-clear-tier] .board-column { box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 95px rgba(var(--piece-rgb), .28), 0 30px 74px rgba(0,0,0,.48); }

@media (max-width: 680px) {
  body.game-active .arcade::before { filter: blur(12px); opacity: .28; }
  body.game-active .stat-card,
  body.game-active .mini-card,
  body.game-active .reactor-console,
  body.game-active .touch-controls { backdrop-filter: none; }
  body.game-active .board-wrap::after { animation: none; background-position: 46% 0, 0 0; }
  body.game-active .board-glow { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arcade::before,
  .board-wrap::after,
  .board-glow { animation: none; }
}