/* ═══════════════════════════════════════════════════════════════════════════
   Tetris — stylesheet
   Matches the Game Room visual language (black surfaces, green accents, Bebas
   Neue for display type) but the PIECES keep the seven standard Tetris colours.
   Those are the colours players already recognise, and they stay distinguishable
   for the most common forms of colour blindness, which a black-and-green palette
   could not promise.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  --bg: #000000; --surface: #121212; --surface2: #181818; --surface3: #282828;
  --border: #282828; --border2: #404040; --text: #ffffff; --muted: #a7a7a7;
  --green: #1db954; --green-dim: rgba(29,185,84,0.12); --green-glow: rgba(29,185,84,0.28);
  --red: #e91429; --yellow: #e3a900;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* The well itself */
  --well-bg: #0a0a0a;
  --grid-line: rgba(255, 255, 255, 0.06);
}

/* Light theme */
[data-theme="light"] {
  --bg: #ffffff; --surface: #f6f6f6; --surface2: #ececec; --surface3: #e0e0e0;
  --border: #d5d5d5; --border2: #b8b8b8; --text: #121212; --muted: #556055;
  --well-bg: #f2f2f2;
  --grid-line: rgba(0, 0, 0, 0.08);
}

/* NOTE: the seven piece colours are NOT defined here. Every block is drawn into
   a canvas, and a canvas cannot read a CSS custom property, so the palette
   lives in app.js as PIECE_COLOURS — one source of truth rather than two that
   could drift apart. */

html, body {
  min-height: 100%; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(29,185,84,0.08) 0%, transparent 60%);
}

.shell {
  position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;
  padding: 20px 20px 48px;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.home-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  padding: 6px 14px; border: 1px solid var(--border2); border-radius: 999px;
  background: var(--surface2); transition: border-color .2s, color .2s, background .2s;
}
.home-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.home-btn svg { width: 12px; height: 12px; }

.brand { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.brand-mark { color: var(--green); font-size: 19px; line-height: 1; }
.brand-text { font-family: var(--font-display); font-size: 20px; letter-spacing: 3px; }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-badge {
  font-family: var(--font-mono); font-size: 11px; color: var(--green);
  background: var(--green-dim); border: 1px solid rgba(29,185,84,.3);
  border-radius: 999px; padding: 4px 12px;
}
.user-badge:empty { display: none; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.icon-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); transform: rotate(30deg); }
.icon-btn svg { width: 18px; height: 18px; }

/* ── Screens ──────────────────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

.screen-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 2px; margin-bottom: 6px; }
.screen-sub { color: var(--muted); font-size: 14px; max-width: 680px; line-height: 1.6; margin-bottom: 26px; }

/* ── Menu ─────────────────────────────────────────────────────────────── */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .menu-grid { grid-template-columns: 1fr; } }

.mode-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; color: var(--text); font-family: inherit; cursor: default;
}
.mode-icon { font-size: 26px; }
.mode-name { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; color: var(--green); }
.mode-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mode-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field select, .code-input {
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px;
  color: var(--text); padding: 9px 10px; font-family: var(--font-body); font-size: 14px; outline: none;
}
.field select:focus, .code-input:focus { border-color: var(--green); }
.join-row { display: flex; gap: 8px; }
.code-input { flex: 1; font-family: var(--font-mono); letter-spacing: 3px; text-transform: uppercase; }

.btn {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 1.5px;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border2);
  border-radius: 9px; padding: 10px 16px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.btn-primary { background: var(--green); color: #000; border-color: var(--green); }
.btn-primary:hover { background: #1ed760; color: #000; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border2); color: var(--text); background: var(--surface2); }
.btn-sm { font-size: 13px; padding: 7px 12px; letter-spacing: 1px; }

.record { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ── Status bar ───────────────────────────────────────────────────────── */
.status-bar {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; margin-bottom: 14px;
}
.status-mode { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; }
.status-note { font-size: 12px; color: var(--muted); flex: 0 1 auto; }
.status-note:empty { display: none; }
.status-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ── Arena ────────────────────────────────────────────────────────────── */
/* One panel in solo, two side by side in versus, and on a narrow screen the
   two wells stack rather than shrink below a usable size. */
.arena { display: grid; gap: 14px; justify-items: center; }
.arena.one { grid-template-columns: minmax(0, 1fr); }
.arena.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .arena.two { grid-template-columns: minmax(0, 1fr); } }

.board-panel {
  width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
/* The online opponent is shown as a small live view, not a full playable panel. */
.board-panel.mini { max-width: 260px; }
.board-panel.mini .slot-col, .board-panel.mini .pad { display: none; }
.board-panel.mini .board-body { justify-content: center; }

.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.board-name { font-family: var(--font-display); font-size: 17px; letter-spacing: 1.2px; }
.board-stats { display: flex; gap: 12px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.stat-k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.stat-v { font-family: var(--font-mono); font-size: 14px; }

.board-body { display: flex; gap: 10px; align-items: flex-start; justify-content: center; }

.slot-col { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.slot-k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
/* Hold slot and next queue.
   THE SIZE HERE IS LOAD-BEARING — do not remove it. A canvas has no intrinsic
   ratio: with no CSS width/height its layout size IS its width/height
   ATTRIBUTES, and app.js rewrites those attributes from the measured size on
   every frame. An unsized canvas therefore feeds its own output back in and
   grows without bound (measured: +120px/s even at devicePixelRatio 1, and
   exponential at 2, until it fills the screen). box-sizing keeps the 1px border
   inside the declared size so the number JS measures cannot drift either.
   The .well below is safe for exactly the same reason: it declares both a height
   and an aspect-ratio, so its layout never depends on its backing store. */
.slot-canvas {
  box-sizing: border-box;
  width: 92px; height: 70px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
}
/* One tall column: five rows of ~47px. */
.slot-canvas.tall { height: 236px; }

/* Narrow screens shrink the well, so the previews shrink with it rather than
   pushing the well out of the panel. */
@media (max-width: 820px) {
  .slot-canvas { width: 68px; height: 52px; }
  .slot-canvas.tall { height: 176px; }
}

.well-col { position: relative; display: flex; flex-direction: column; align-items: center; }

/* The well keeps a strict 1:2 ratio; JS matches the canvas resolution to it so
   the blocks stay square at any size. */
.well {
  display: block; width: auto; height: min(58vh, 420px); aspect-ratio: 1 / 2;
  background: var(--well-bg); border: 1px solid var(--border2); border-radius: 8px;
  touch-action: manipulation;
}
.arena.two .well { height: min(46vh, 330px); }
.board-panel.mini .well { height: min(30vh, 210px); }

/* How much garbage is queued against you. A red bar means it is about to land. */
.incoming {
  width: 100%; height: 4px; margin-top: 6px; border-radius: 999px;
  background: var(--surface3); overflow: hidden;
}
.incoming.armed { background: var(--red); box-shadow: 0 0 10px rgba(233,20,41,.6); }

/* ── Touch pad ────────────────────────────────────────────────────────── */
/* Shown on every device rather than hidden behind a pointer-type media query:
   it is the only control surface on a phone, it works with a mouse, and it
   means the browser tests exercise the same buttons a player actually taps. */
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pad-btn {
  font-family: var(--font-mono); font-size: 15px; color: var(--text);
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 9px;
  padding: 11px 4px; cursor: pointer; user-select: none;
  -webkit-user-select: none; touch-action: manipulation;
  transition: border-color .15s, color .15s, background .15s;
}
.pad-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.pad-btn:active { transform: translateY(1px); background: var(--green-dim); }
.pad-btn.wide { grid-column: 1 / -1; font-size: 12px; letter-spacing: .08em; }

/* ── Overlay ──────────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.78); backdrop-filter: blur(3px);
}
.overlay.show { display: flex; }
.overlay-card {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 14px;
  padding: 30px 34px; text-align: center; max-width: 420px; width: 100%;
}
.overlay-icon { font-size: 46px; margin-bottom: 8px; }
.overlay-card h2 { font-family: var(--font-display); font-size: 34px; letter-spacing: 2px; margin-bottom: 6px; }
.overlay-card h2.win { color: var(--green); }
.overlay-card h2.lose { color: var(--red); }
.overlay-card h2.draw { color: var(--yellow); }
#overlay-reason { color: var(--muted); font-size: 14px; margin-bottom: 20px; line-height: 1.5; white-space: pre-line; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Settings + toast ─────────────────────────────────────────────────── */
.settings-dropdown {
  position: absolute; top: 62px; right: 20px; z-index: 150; display: none;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px;
  min-width: 210px; box-shadow: 0 12px 40px rgba(0,0,0,.8);
  max-height: calc(100vh - 78px); overflow-y: auto;
}
.settings-dropdown.open { display: block; }
.dropdown-item {
  padding: 12px 16px; font-size: 13px; color: var(--muted); cursor: pointer;
  border-bottom: 1px solid var(--border); transition: color .2s, background .2s;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { color: var(--green); background: var(--green-dim); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--surface2); border: 1px solid var(--green); color: var(--green);
  font-family: var(--font-mono); font-size: 12px; padding: 10px 20px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 300;
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }
.toast.error { border-color: var(--red); color: var(--red); }