/* ==================================================================
   NEON TETRIS — stylesheet

   Layout contract (this is what keeps the board from being crowded out):
     #app  is a full-height flex column: topbar (auto) | mid (1fr) | touch bar (auto)
     .mid  is a 3-column grid whose only flexible track is the board column
     .stage holds the canvas; the canvas is absolutely positioned and sized in
     JS by renderer.fit(), so the playfield always fills exactly the space it
     was given instead of fighting the panels for room.

   On phones the layout is the same, but the hold/next cards float over the
   top corners of the playfield so they cost the board no height at all.
   ================================================================== */

:root {
  --bg-0: #05060e;
  --bg-1: #0a0e1e;
  --ink: #e6edf7;
  --ink-dim: #8b98b8;
  --line: rgba(148, 163, 184, 0.16);
  --glass: rgba(19, 26, 48, 0.55);
  --glass-hi: rgba(255, 255, 255, 0.06);
  --cyan: #22d3ee;
  --purple: #a855f7;
  --rose: #f43f5e;
  --amber: #fbbf24;
  --green: #34d399;
  --radius: 16px;
  --gap: clamp(8px, 1.3vh, 16px);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(34, 211, 238, 0.16), transparent 62%),
    radial-gradient(950px 560px at 96% 4%, rgba(168, 85, 247, 0.18), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(244, 63, 94, 0.12), transparent 62%),
    linear-gradient(170deg, var(--bg-1), var(--bg-0) 58%);
  background-attachment: fixed;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ============================== shell ============================= */
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: clamp(6px, 1.1vh, 14px) clamp(6px, 1.2vw, 16px);
}

/* ============================== top bar =========================== */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  padding: 7px clamp(8px, 1.2vw, 14px);
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--glass), rgba(9, 13, 27, 0.72));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--glass-hi);
}

.brand { flex: 0 0 auto; }

.brand-mark {
  font: 900 clamp(13px, 1.7vh, 17px)/1 var(--font);
  letter-spacing: 0.16em;
  background: linear-gradient(100deg, var(--cyan), #a5f3fc 34%, var(--purple) 74%, var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.45));
  white-space: nowrap;
}

.brand-mark b { font-weight: 900; }

.topstats {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 30px);
  min-width: 0;
}

.topstats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.topstats .stat span {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.topstats .stat b {
  font: 700 clamp(13px, 1.9vh, 19px)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
  white-space: nowrap;
}

.topactions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}

/* =============================== middle =========================== */
.mid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(8px, 1.4vw, 20px);
}

.rail {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-height: 100%;
  min-height: 0;
}

.panel-mini {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--glass), rgba(9, 13, 27, 0.72));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--glass-hi);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-mini h3 {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.mini-slot {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.mini-slot canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Desktop preview sizes: tall enough for a 5-piece queue / one held piece. */
.rail-hold { width: clamp(104px, 13vw, 158px); }
.rail-hold .mini-slot { height: clamp(64px, 9vh, 104px); }
.rail-next { width: clamp(104px, 13vw, 158px); }
.rail-next .mini-slot { height: clamp(200px, 36vh, 400px); }

.mini-note {
  margin: 0;
  text-align: center;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  transition: color 140ms ease, text-shadow 140ms ease;
}

.mini-note.used {
  color: var(--rose);
  text-shadow: 0 0 12px rgba(244, 63, 94, 0.8);
}

/* =============================== stage ============================ */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* The canvas fills its stage exactly; JS sets the real pixel box. */
.board-wrap {
  position: absolute;
  inset: 0;
  touch-action: none;
}

#board {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(8, 12, 26, 0.92), rgba(4, 6, 16, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.20);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.10),
    0 26px 60px -24px rgba(34, 211, 238, 0.35),
    0 30px 80px -30px rgba(168, 85, 247, 0.35),
    inset 0 0 60px rgba(34, 211, 238, 0.05);
}

.board-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  height: 92%;
  transform: translate(-50%, -50%);
  border-radius: 40px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(34, 211, 238, 0.13), transparent 72%);
  filter: blur(20px);
  z-index: 0;
}

/* ============================== buttons =========================== */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.08);
  color: var(--ink);
  font: 700 12px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.btn:hover { background: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.3); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.btn.primary {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.95), rgba(168, 85, 247, 0.95));
  border-color: transparent;
  color: #05060e;
  box-shadow: 0 14px 34px -14px rgba(34, 211, 238, 0.85), 0 8px 26px -14px rgba(168, 85, 247, 0.9);
}

.btn.primary:hover { filter: brightness(1.06); }

.btn.ghost { background: transparent; }

.btn.icon {
  flex-direction: column;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
  border-radius: 10px;
}

.btn.icon span {
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.btn.icon[aria-pressed="false"] span { color: var(--ink-dim); opacity: 0.65; }

/* ============================== overlays ========================== */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(6, 9, 20, 0.72), rgba(3, 4, 12, 0.92));
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  z-index: 20;
  animation: fade-in 220ms ease both;
}

.overlay.hidden { display: none; }

.overlay-card {
  width: min(100%, 320px);
  max-height: 100%;
  overflow: auto;
  text-align: center;
  padding: clamp(14px, 2.4vh, 22px) clamp(14px, 3vw, 20px);
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(23, 31, 56, 0.9), rgba(9, 12, 26, 0.92));
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: pop-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.overlay-card.compact { width: min(100%, 240px); display: grid; gap: 10px; }

.logo {
  margin: 0 0 6px;
  font: 900 clamp(20px, 3.2vh, 30px)/1 var(--font);
  letter-spacing: 0.06em;
  background: linear-gradient(100deg, var(--cyan), #a5f3fc 30%, var(--purple) 72%, var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(34, 211, 238, 0.45));
}

.logo span { display: block; }

.overlay-card h2 {
  margin: 0 0 12px;
  font: 800 clamp(17px, 2.4vh, 22px)/1.1 var(--font);
  letter-spacing: 0.14em;
}

.overlay-card h2.danger {
  color: var(--rose);
  text-shadow: 0 0 24px rgba(244, 63, 94, 0.55);
}

.tagline {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.overlay-card .btn { width: 100%; }

.hint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin: 16px 0 6px;
  text-align: left;
}

.hint-grid > div {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 3px 5px;
  font: 700 10px/1 var(--mono);
  text-align: center;
  color: var(--ink);
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-bottom-width: 2px;
  border-radius: 5px;
}

.touch-hint {
  display: none;
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.best-line {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

.best-line b { color: var(--amber); font-family: var(--mono); }

.final-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 16px;
}

.final-stats > div {
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.07);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.final-stats span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

.final-stats b {
  font: 700 18px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.new-best {
  margin: 0 0 14px;
  font: 800 11px/1.4 var(--font);
  letter-spacing: 0.18em;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.6);
  animation: pulse 1.1s ease-in-out infinite;
}

.new-best.hidden { display: none; }

/* =============================== toasts =========================== */
.toast-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 15;
}

.toast {
  grid-area: 1 / 1;
  font: 800 clamp(12px, 1.8vh, 17px)/1 var(--font);
  letter-spacing: 0.16em;
  padding: 9px 16px;
  border-radius: 999px;
  color: #eaf6ff;
  background: rgba(9, 13, 27, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.24);
  text-shadow: 0 0 16px rgba(34, 211, 238, 0.7);
  animation: toast-rise 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  white-space: nowrap;
}

.toast.big { font-size: clamp(16px, 2.6vh, 26px); padding: 12px 22px; }
.toast.tetris { color: #a5f3fc; border-color: rgba(34, 211, 238, 0.6); text-shadow: 0 0 26px rgba(34, 211, 238, 0.95); }
.toast.tspin { color: #f0abfc; border-color: rgba(168, 85, 247, 0.6); text-shadow: 0 0 26px rgba(168, 85, 247, 0.95); }
.toast.lines { color: #bbf7d0; border-color: rgba(52, 211, 153, 0.5); }
.toast.level { color: #fde68a; border-color: rgba(251, 191, 36, 0.55); }
.toast.b2b,
.toast.combo {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #fecdd3;
  border-color: rgba(244, 63, 94, 0.5);
  animation: toast-rise-sm 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* =========================== touch controls ======================= */
.touch-bar {
  flex: 0 0 auto;
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.tbtn {
  appearance: none;
  min-height: 54px;
  padding: 10px 4px;
  font: 700 clamp(12px, 1.8vh, 15px)/1 var(--font);
  color: var(--ink);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 11px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 90ms ease, background 120ms ease;
}

.tbtn.active,
.tbtn:active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.85), rgba(168, 85, 247, 0.85));
  color: #05060e;
  transform: scale(0.96);
}

/* ============================== keyframes ========================= */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-rise {
  0% { opacity: 0; transform: translateY(16px) scale(0.86); }
  16% { opacity: 1; transform: translateY(0) scale(1.04); }
  30% { transform: scale(1); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-34px) scale(0.96); }
}

@keyframes toast-rise-sm {
  0% { opacity: 0; transform: translateY(34px); }
  20% { opacity: 1; transform: translateY(44px); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translateY(18px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ==========================================================================
   PHONE / NARROW LAYOUT
   The hold and next cards float over the playfield corners, which costs the
   board no vertical space. Grid tracks: next | hold, then the board spans
   everything below.

   This kicks in only when the viewport is too narrow for the side rails to
   coexist with a large board — a 733px-wide window gets the side layout, a
   390px phone gets the floating cards.
   ========================================================================== */
@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  :root { --radius: 13px; --gap: 7px; }

  #app { padding: 6px; gap: 6px; }

  .topbar { padding: 6px 8px; gap: 8px; border-radius: 12px; }

  .brand-mark { font-size: 12px; letter-spacing: 0.1em; }

  .topstats { justify-content: space-around; gap: 8px; }

  .topstats .stat span { font-size: 8px; letter-spacing: 0.12em; }
  .topstats .stat b { font-size: clamp(12px, 1.7vh, 16px); }

  .btn.icon { padding: 5px 7px; font-size: 12px; }
  .btn.icon span { display: none; }

  /* Phone layout: the preview cards float in the playfield's top-right
     corner — anchored to the *board* (via --board-w), not the viewport — so
     the board keeps the full width and height of the stage. */
  .mid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    position: relative;
  }

  .stage {
    grid-column: 1;
    grid-row: 1;
  }

  .rail {
    position: absolute;
    top: 0;
    right: max(6px, calc((100% - var(--board-w)) / 2 + 6px));
    z-index: 5;
    gap: 4px;
    width: auto;
    max-height: none;
    pointer-events: none;
  }

  /* Clear of the NEXT card above: its slot is 46px + label + padding + gap. */
  .rail-hold { top: 84px; }

  .panel-mini {
    padding: 3px 6px;
    gap: 1px;
    border-radius: 10px;
    /* Slightly translucent: the cards sit over the playfield's top corner,
       which is empty early on, and the board stays legible through them. */
    background: linear-gradient(160deg, rgba(13, 18, 36, 0.78), rgba(6, 9, 20, 0.84));
    border-color: rgba(148, 163, 184, 0.22);
  }

  .panel-mini h3 { font-size: 8px; letter-spacing: 0.14em; }

  .rail-next .mini-slot { width: 130px; height: 46px; }
  .rail-hold .mini-slot { width: 52px; height: 38px; }

  .mini-note { font-size: 8px; }

  .touch-bar { display: grid; }
  .tbtn { min-height: 50px; }

  .hint-grid { display: none; }
  .touch-hint { display: block; }
}

/* Keep the preview cards tappable without swallowing playfield gestures. */
@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  .rail .panel-mini { pointer-events: auto; }
}

/* Very small phones: trim the preview cards and the chrome further. */
@media (max-width: 420px) {
  .rail-hold { top: 78px; }
  .rail-next .mini-slot { width: 112px; height: 42px; }
  .rail-hold .mini-slot { width: 46px; height: 34px; }
  .topstats .stat:nth-child(3) { display: none; }  /* drop the Lines readout */
  .brand-mark { font-size: 11px; }
}

/* Landscape phones: rails at the sides for a tall board, and the top bar
   collapses to inline "SCORE 128,450" pairs (the labels wrap and cost the
   board real height when stacked two lines tall). */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
  .topbar { padding: 3px 8px; gap: 8px; }
  .brand { display: none; }

  .topstats { justify-content: center; gap: 14px; }
  .topstats .stat { flex-direction: row; align-items: baseline; gap: 4px; }
  .topstats .stat span { font-size: 8px; letter-spacing: 0.08em; }
  /* Height is the scarce resource here: keep SCORE + LEVEL, drop LINES/BEST. */
  .topstats .stat:nth-child(3),
  .topstats .stat:nth-child(4) { display: none; }

  .mid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    gap: 6px;
  }

  /* Landscape phones are height-starved: the preview rails collapse and the
     board takes the whole row, so nothing competes with it for height. */
  .rail { display: none; }

  .stage {
    grid-column: 1 / -1;   /* was tucked into the middle column */
    grid-row: 1 / -1;
  }

  .tbtn { min-height: 38px; padding: 4px; }
  .touch-bar { padding: 4px; gap: 4px; }
}

/* Short screens: drop decorative chrome to protect the playfield. */
@media (max-height: 560px) {
  .board-glow { display: none; }
  .tagline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}