/* Tetris — Research Edition
   Geometry-Wars-inspired neon-vector theme: a near-black void, glowing cyan
   accent, chunky tap targets, subtle CRT scanline. No external fonts or assets
   (works offline). All in-game effects are canvas-drawn; this file covers the
   chrome. Reduced-motion users (OS setting or in-app toggle -> body class
   .fx-reduced-motion) get a fully static presentation. */

:root {
  --bg: #03040a;
  --panel: #10141f;
  --panel-2: #171e30;
  --line: #232c44;
  --text: #e8ecf4;
  --muted: #8a95ac;
  --accent: #39c5c8;
  --accent-2: #b048d6;
  --danger: #e8493f;
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  /* deep-space vignette + faint scanline for a console feel */
  background:
    radial-gradient(120% 90% at 50% 0%, #0a101f 0%, var(--bg) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
}

#app { height: 100%; position: relative; }

/* --- screens --------------------------------------------------------------- */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.screen.active { display: flex; animation: screen-in 240ms ease-out; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

.panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 40px rgba(57,197,200,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
}
.wide-panel { max-width: 520px; text-align: left; }

/* --- logo + type ----------------------------------------------------------- */
.logo {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(57,197,200,0.55), 0 0 2px rgba(57,197,200,0.9);
  margin-bottom: 18px;
  line-height: 1;
  animation: logo-breathe 3.4s ease-in-out infinite;
}
#screen-menu .logo { cursor: pointer; }
@keyframes logo-breathe {
  0%, 100% { text-shadow: 0 0 10px rgba(57,197,200,0.45), 0 0 2px rgba(57,197,200,0.9); }
  50%      { text-shadow: 0 0 22px rgba(57,197,200,0.85), 0 0 46px rgba(176,72,214,0.35), 0 0 2px rgba(57,197,200,1); }
}
.logo small {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--muted);
  text-shadow: none;
  margin-top: 8px;
  font-weight: 500;
}
.small-logo { font-size: 26px; letter-spacing: 5px; }
.lede { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.mono { color: var(--accent); }
.muted { color: var(--muted); font-size: 12px; margin: 10px 0; }

/* --- buttons + inputs ------------------------------------------------------ */
.btn {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .05s ease, border-color .15s ease, background .15s ease, box-shadow .2s ease;
}
.btn:hover { border-color: var(--accent); box-shadow: 0 0 14px rgba(57,197,200,0.25), inset 0 0 8px rgba(57,197,200,0.06); }
.btn:active { transform: translateY(1px); }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(57,197,200,0.35) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}
.btn:active::after { animation: btn-ripple .35s ease-out; }
@keyframes btn-ripple {
  0% { opacity: .9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.6); }
}
.btn.primary {
  color: #04222a;
  background: linear-gradient(180deg, #52dfe2 0%, var(--accent) 100%);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(57,197,200,0.3);
}
.btn.primary:hover { box-shadow: 0 6px 26px rgba(57,197,200,0.5); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.small { display: inline-block; width: auto; font-size: 13px; padding: 10px 14px; }
.btn.tiny {
  display: inline-block;
  width: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 8px 9px;
  margin-top: 0;
  color: var(--muted);
  background: transparent;
  text-transform: uppercase;
}
.btn.tiny:hover { color: var(--text); }
/* The sound toggle glows softly while ON — turning it on should feel inviting. */
.btn.tiny.on {
  color: var(--accent);
  border-color: rgba(57,197,200,0.55);
  box-shadow: 0 0 10px rgba(57,197,200,0.3), inset 0 0 8px rgba(57,197,200,0.08);
  text-shadow: 0 0 8px rgba(57,197,200,0.7);
}
.settings-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.text-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  color: var(--text);
  background: #060a15;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(57,197,200,0.15), 0 0 18px rgba(57,197,200,0.2); }
.error { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 10px; }

/* --- menu ambience (decoration only) --------------------------------------- */
.menu-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.drift {
  position: absolute;
  width: 90px;
  opacity: 0.09;
  animation: drift-float 34s ease-in-out infinite alternate;
}
.drift.d1 { top: 12%; left: -4%;  filter: drop-shadow(0 0 6px rgba(0,234,255,0.9)); }
.drift.d2 { top: 68%; left: 76%;  width: 74px; animation-duration: 41s; animation-delay: -9s;  filter: drop-shadow(0 0 6px rgba(201,60,255,0.9)); }
.drift.d3 { top: 78%; left: 8%;   width: 66px; animation-duration: 29s; animation-delay: -17s; filter: drop-shadow(0 0 6px rgba(59,255,111,0.9)); }
.drift.d4 { top: 8%;  left: 78%;  width: 54px; animation-duration: 37s; animation-delay: -23s; filter: drop-shadow(0 0 6px rgba(255,217,15,0.9)); }
.drift.d5 { top: 42%; left: 88%;  width: 70px; animation-duration: 47s; animation-delay: -5s;  filter: drop-shadow(0 0 6px rgba(255,157,28,0.9)); }
@keyframes drift-float {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-30px, 40px) rotate(12deg); }
  100% { transform: translate(40px, -30px) rotate(-9deg); }
}

/* --- game layout ----------------------------------------------------------- */
#screen-game { flex-direction: column; gap: 14px; justify-content: flex-start; padding-top: max(14px, env(safe-area-inset-top)); }

/* Neon-room lighting canvas: fills the viewport BEHIND the game chrome. Its
   backing store is deliberately low-res (soft light) and scaled up by CSS.
   Kept behind everything via z-index; the opaque board canvas stays crisp on
   top. Purely decorative — never intercepts input. */
.room-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
#screen-game > .game-layout,
#screen-game > .touch-controls { position: relative; z-index: 1; }

.game-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.side { display: flex; flex-direction: column; gap: 12px; width: 84px; }
.side.left { align-items: stretch; }

.hud-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.hud-box label, .stat label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 6px;
}
.hud-box canvas { display: block; margin: 0 auto; }

.hud-stats { display: flex; flex-direction: column; gap: 8px; }

/* --- heat meter (cosmetic; mirrors the audio/visual heat value) ------------ */
.heat-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.heat-wrap label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 6px;
}
.heat-meter {
  height: 8px;
  border-radius: 4px;
  background: #060a15;
  border: 1px solid var(--line);
  overflow: hidden;
}
#heat-fill {
  width: 0%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #1b6f8f 0%, #00eaff 45%, #c93cff 80%, #ff9d1c 100%);
}
.heat-meter.hot {
  border-color: rgba(255,157,28,0.7);
  box-shadow: 0 0 10px rgba(255,157,28,0.35), inset 0 0 6px rgba(255,157,28,0.2);
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.stat span { display: inline-block; font-size: 20px; font-weight: 800; color: var(--accent); }
.stat span.pop { animation: stat-pop 380ms ease-out; }
@keyframes stat-pop {
  0%   { transform: scale(1); text-shadow: none; }
  35%  { transform: scale(1.35); text-shadow: 0 0 14px rgba(57,197,200,0.9); }
  100% { transform: scale(1); text-shadow: none; }
}

.board-wrap { position: relative; will-change: transform; }
#board-canvas {
  display: block;
  /* the neon frame is drawn in-canvas; CSS supplies only the ambient halo */
  border: none;
  border-radius: 0;
  background: #020308;
  box-shadow: 0 0 34px rgba(57,197,200,0.10), 0 0 90px rgba(63,109,255,0.08);
}
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--accent);
  background: rgba(2,3,8,0.82);
  border-radius: 6px;
  text-shadow: 0 0 12px rgba(57,197,200,0.6);
}
.hidden { display: none !important; }

/* --- touch controls: holographic neon-glass HUD ----------------------------- */
/* Shown on EVERY device (mouse included — clicks work). Each key is its own
   pane of dark "smart glass" floating in the lit room; there is no opaque
   console deck, so the glossy floor mirror on #room-canvas stays visible in
   the gaps around the keys. The mirror can NOT smear through a key: the pane
   stacks a deep translucent fill + a backdrop blur (diffuses anything behind
   into featureless glow) + an inner dark vignette, so light arriving from
   behind reads as soft ambience inside the glass, never as mirrored block
   shapes. Engines without backdrop-filter get a near-opaque fill instead
   (@supports fallback below). margin-top:auto seats the cluster at the
   bottom of the room (thumb reach; keeps the bright part of the mirror,
   right under the well, in the open). */
.touch-controls {
  width: 100%;
  max-width: 420px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px max(10px, env(safe-area-inset-bottom));
}
.pad-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tbtn {
  --key: 57,197,200; /* per-key neon hue (rgb triplet); cyan by default */
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #dff6fb;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--key), 0.10) 0%, rgba(var(--key), 0.02) 55%, transparent 100%),
    linear-gradient(180deg, rgba(9,14,26,0.66) 0%, rgba(3,6,13,0.82) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  backdrop-filter: blur(9px) saturate(1.25);
  border: 1px solid rgba(var(--key), 0.45);
  border-radius: 12px;
  min-height: 58px;
  cursor: pointer;
  touch-action: none;
  text-shadow: 0 0 9px rgba(var(--key), 0.75);
  box-shadow:
    0 0 10px rgba(var(--key), 0.14),          /* soft outer neon halo */
    0 4px 18px rgba(0,0,0,0.45),              /* seats the pane in the room */
    inset 0 1px 0 rgba(255,255,255,0.10),     /* top catch-light (glass) */
    inset 0 0 18px rgba(0,0,0,0.42),          /* inner vignette (anti-smear) */
    inset 0 0 9px rgba(var(--key), 0.10);     /* faint neon fill light */
  transition: transform .04s ease, border-color .12s ease, box-shadow .15s ease, color .12s ease;
}
/* Hue by function: translate = cyan, rotate = violet, HOLD = quiet cyan text,
   HARD DROP = ember (echoes the heat/warm end of the room palette). */
.tbtn[data-action="rotate_ccw"], .tbtn[data-action="rotate_cw"] { --key: 176,72,214; color: #f3e7fe; }
.tbtn[data-action="hold"] { font-size: 15px; letter-spacing: 3px; }
.tbtn.drop {
  --key: 255,157,28;
  color: #ffedcf;
  font-size: 15px;
  letter-spacing: 4px;
  border-color: rgba(var(--key), 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .tbtn:hover {
    border-color: rgba(var(--key), 0.85);
    box-shadow:
      0 0 14px rgba(var(--key), 0.30),
      0 4px 18px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 0 18px rgba(0,0,0,0.38),
      inset 0 0 12px rgba(var(--key), 0.16);
  }
}
.tbtn:focus-visible { outline: 2px solid rgba(var(--key), 0.7); outline-offset: 2px; }
.tbtn.pressed, .tbtn:active {
  transform: translateY(1px);
  color: #ffffff;
  border-color: rgba(var(--key), 0.95);
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(var(--key), 0.30) 0%, rgba(var(--key), 0.06) 60%, transparent 100%),
    linear-gradient(180deg, rgba(10,16,30,0.72) 0%, rgba(4,7,15,0.85) 100%);
  text-shadow: 0 0 12px rgba(var(--key), 1), 0 0 3px #ffffff;
  box-shadow:
    0 0 16px rgba(var(--key), 0.55),          /* the pane lights up… */
    0 0 42px rgba(var(--key), 0.22),          /* …and throws light into the room */
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 20px rgba(var(--key), 0.30);
}
/* No backdrop-filter support: the glass goes near-opaque so the floor mirror
   can never read through as block shapes; the neon frame carries the look. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .tbtn {
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(var(--key), 0.10) 0%, rgba(var(--key), 0.03) 55%, transparent 100%),
      linear-gradient(180deg, rgba(12,18,32,0.96) 0%, rgba(5,8,16,0.97) 100%);
  }
}

/* --- summary + data -------------------------------------------------------- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.summary-cell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary-cell.highlight { border-color: var(--accent-2); box-shadow: 0 0 0 1px rgba(176,72,214,0.35), 0 0 18px rgba(176,72,214,0.2); }
.summary-label { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.summary-value { font-size: 22px; font-weight: 800; color: var(--accent); }
.summary-cell.highlight .summary-value { color: var(--accent-2); }

.data-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.data-preview {
  background: #060a15;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: #b7c2d8;
  max-height: 260px;
  overflow: auto;
  white-space: pre;
  user-select: text;
  -webkit-user-select: text;
}

/* --- boot / intro overlay --------------------------------------------------- */
.boot-layer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000005;
  cursor: pointer;
}
#boot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.boot-hint {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 100%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--muted);
  opacity: 0;
  animation: hint-in 1s ease 1.2s forwards;
}
@keyframes hint-in { to { opacity: 0.65; } }
.boot-layer.boot-fade { transition: opacity 400ms ease; opacity: 0; }

/* --- reduced motion --------------------------------------------------------- */
/* Applied via the OS media query AND the in-app toggle (body class, set in
   main.js). Canvas-side effects are gated separately in JS. */
@media (prefers-reduced-motion: reduce) {
  .screen.active, .logo, .drift, .stat span.pop, .boot-hint { animation: none !important; }
  .btn::after { display: none; }
  .btn, .tbtn { transition: none; }
  .boot-layer.boot-fade { transition: none; opacity: 0; }
  .drift { opacity: 0.05; }
  .boot-hint { opacity: 0.65; }
}
body.fx-reduced-motion .screen.active,
body.fx-reduced-motion .logo,
body.fx-reduced-motion .drift,
body.fx-reduced-motion .stat span.pop,
body.fx-reduced-motion .boot-hint { animation: none !important; }
body.fx-reduced-motion .btn::after { display: none; }
body.fx-reduced-motion .btn, body.fx-reduced-motion .tbtn { transition: none; }
body.fx-reduced-motion .boot-layer.boot-fade { transition: none; opacity: 0; }
body.fx-reduced-motion .drift { opacity: 0.05; }
body.fx-reduced-motion .boot-hint { opacity: 0.65; }

/* --- small screens --------------------------------------------------------- */
@media (max-height: 720px) {
  .side { width: 66px; }
  .stat span { font-size: 16px; }
  .tbtn { min-height: 56px; font-size: 19px; }
}