/* ===== Tetris — game UI =====
   Cyberpunk neon look that DELIBERATELY ignores the center's light/dark theme:
   every surface uses fixed colours over a deep indigo/black gradient, lit with
   hot-pink / cyan / purple neon. No --gc-surface / --gc-text tokens are used
   for the game chrome, so the look is identical regardless of OS preference. */

html, body { height: 100%; }
body.tetris-app {
  height: 100vh;                           /* exact viewport: header + stage only */
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;                        /* the app itself never scrolls */
  --spad: clamp(10px, 2.5vh, 26px);
  /* Cyberpunk backdrop: near-black indigo with a magenta/cyan glow up top. */
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(255, 42, 109, .28) 0%, transparent 55%),
    radial-gradient(120% 90% at 90% -5%, rgba(5, 217, 232, .26) 0%, transparent 55%),
    linear-gradient(160deg, #16003b 0%, #0b0016 60%, #05010d 100%);
  background-attachment: fixed;
  color: #eae6ff;
  font-family: var(--gc-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
body.tetris-app *, body.tetris-app *::before, body.tetris-app *::after { box-sizing: border-box; }

/* Ne colours (shared across chrome + canvas accents). */
:root {
  --np-pink: #ff2a6d;
  --np-cyan: #05d9e8;
  --np-purple: #b026ff;
  --np-yellow: #fcee0a;
  --np-green: #01ffc3;
  --np-ink: #0b0016;
}

/* Screen-reader-only live status. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Top bar (neon-on-dark glass) ---------- */
.topbar {
  flex: none;
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  padding: 12px clamp(12px, 3vw, 28px);
  background: rgba(11, 0, 22, .55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(5, 217, 232, .28);
  box-shadow: 0 2px 24px rgba(255, 42, 109, .18);
  z-index: 20;
}
.topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar__logo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 9px;
  background: linear-gradient(140deg, var(--np-pink), var(--np-purple));
  color: #fff; font-size: 15px; line-height: 1; letter-spacing: -2px;
  box-shadow: 0 0 14px rgba(255, 42, 109, .6), 0 0 4px rgba(176, 38, 255, .8);
}
.topbar__title {
  margin: 0; font-size: clamp(20px, 3.6vw, 27px); letter-spacing: .04em; white-space: nowrap;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--np-cyan), var(--np-pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 8px rgba(5, 217, 232, .35));
}
.topbar__controls { display: flex; align-items: center; gap: 10px 18px; margin-left: auto; flex-wrap: wrap; }
.topbar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* Button icons are hidden on wide screens; the small-screen block swaps the
   text labels for them so the controls keep their place on the right. */
.btn__ico { display: none; align-items: center; justify-content: center; }
.btn__ico svg { width: 16px; height: 16px; display: block; }

/* ---------- Buttons (neon outline glass) ---------- */
.btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 10px;
  border: 1px solid rgba(5, 217, 232, .45); background: rgba(5, 217, 232, .08); color: #d6fbff;
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover:not(:disabled) {
  background: rgba(5, 217, 232, .16); border-color: var(--np-cyan);
  box-shadow: 0 0 14px rgba(5, 217, 232, .4);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(5, 217, 232, .5); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--primary {
  background: linear-gradient(140deg, var(--np-pink), var(--np-purple));
  border-color: var(--np-pink); color: #fff;
  box-shadow: 0 0 16px rgba(255, 42, 109, .5);
}
.btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 0 22px rgba(255, 42, 109, .7);
}

/* ---------- Stage + playfield ---------- */
.stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  justify-content: safe center;         /* keep top reachable when it must scroll */
  gap: 12px;
  padding: var(--spad);
  overflow-x: hidden;
  overflow-y: auto;                     /* scroll only as a last resort on very
                                           short screens, so nothing is clipped */
}
.playfield {
  display: flex; align-items: stretch; justify-content: center; gap: clamp(12px, 2.5vw, 24px);
  flex-wrap: wrap;
}

/* The well keeps a 1:2 (w:h) aspect. Cap its height to the viewport so nothing
   scrolls, and shrink the block size on narrow screens via the canvas scaling.
   The header is a full-width bar OUTSIDE the stage now, so the 235px budget
   only covers what shares the stage with the well: gaps (~24) + touch pad
   (~40) + hint (~26) + caption (~16) + stage padding (~52) + slack — which
   leaves the game area much taller than before. */
.board-wrap {
  position: relative;
  height: min(calc(100vh - 235px), calc((100vw - var(--spad) * 2 - 16px) * 0.62), 620px);
  min-height: 260px;                    /* stay playable; stage scrolls if needed */
  aspect-ratio: 1 / 2;
  border-radius: 10px;
  background: linear-gradient(180deg, #12002e, #08000f);
  border: 1px solid rgba(5, 217, 232, .35);
  box-shadow: 0 0 26px rgba(5, 217, 232, .22), 0 0 44px rgba(255, 42, 109, .16), inset 0 0 30px rgba(0, 0, 0, .6);
}
.board-wrap canvas {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated;
  touch-action: none;
  border-radius: 9px;
}
.overlay {
  touch-action: manipulation;
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(8, 0, 16, .82);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color: #eae6ff; line-height: 1.4; text-align: center; padding: 12px;
  border-radius: 9px;
}
.overlay[hidden] { display: none; }
.overlay__msg {
  font-size: 22px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--np-cyan); text-shadow: 0 0 12px rgba(5, 217, 232, .8);
}

/* ---------- Side panel (stats + next) ---------- */
.panel {
  display: flex; flex-direction: column; gap: 12px; justify-content: center;
  min-width: 148px;
}
.stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(11, 0, 22, .6);
  border: 1px solid rgba(176, 38, 255, .3);
  box-shadow: inset 0 0 14px rgba(176, 38, 255, .12);
}
.stat__k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--np-purple); font-weight: 800;
  filter: brightness(1.6); }
.stat__v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 10px rgba(5, 217, 232, .55); }

.next {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 12px; border-radius: 12px;
  background: rgba(11, 0, 22, .6);
  border: 1px solid rgba(5, 217, 232, .3);
  box-shadow: inset 0 0 14px rgba(5, 217, 232, .12);
}
.next__k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--np-cyan); font-weight: 800; align-self: flex-start; }
.next canvas { display: block; width: 96px; height: 96px; image-rendering: pixelated; }

/* ---------- Control hint + caption ---------- */
.hintline { margin: 0; font-size: 12.5px; color: #a99fd6; line-height: 2; text-align: center; }
kbd {
  font: 700 12px/1.4 ui-monospace, "Segoe UI", monospace; padding: 1px 6px; border-radius: 5px;
  color: var(--np-cyan); background: rgba(5, 217, 232, .08); border: 1px solid rgba(5, 217, 232, .35);
  box-shadow: 0 0 6px rgba(5, 217, 232, .15);
}
.board-status {
  margin: 0; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center;
  color: #8f86bd; letter-spacing: .02em;
}

/* ---------- Touch pad (one compact row) ---------- */
.touchpad {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  width: min(92vw, 280px); user-select: none; margin-top: 0;
}
.tpad__btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 15px;
  height: 34px; border-radius: 9px;
  border: 1px solid rgba(5, 217, 232, .4); background: rgba(5, 217, 232, .08); color: var(--np-cyan);
  box-shadow: 0 0 10px rgba(5, 217, 232, .12);
  transition: transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.tpad__btn:hover { background: rgba(5, 217, 232, .18); }
.tpad__btn:active { transform: translateY(1px) scale(.97); box-shadow: 0 0 16px rgba(5, 217, 232, .4); }
.tpad__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(5, 217, 232, .5); }

/* ---------- Back-to-center link (neon chip, theme-independent) ---------- */
.gc-back {
  border: 1px solid rgba(5, 217, 232, .4);
  background: rgba(11, 0, 22, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #d6fbff; box-shadow: 0 0 12px rgba(5, 217, 232, .2); opacity: .85;
}
.gc-back:hover { opacity: 1; color: #fff; box-shadow: 0 0 16px rgba(5, 217, 232, .45); }

/* ---------- Rules modal (neon glass) ---------- */
.modal { position: fixed; inset: 0; z-index: 1100; overflow: auto; display: grid; place-content: center; place-content: safe center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: fixed; inset: 0; background: rgba(5, 1, 13, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal__panel {
  position: relative; z-index: 1; width: min(94vw, 520px);
  padding: 0; border-radius: 16px;
  background: rgba(18, 0, 46, .82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  color: #eae6ff;
  border: 1px solid rgba(255, 42, 109, .4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 42, 109, .22), inset 0 1px 0 rgba(5, 217, 232, .25);
}
.modal__head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(176, 38, 255, .3); }
.modal__head h2 {
  margin: 0; font-size: 20px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--np-cyan); text-shadow: 0 0 10px rgba(5, 217, 232, .5);
}
.modal__x { margin-left: auto; border: 0; background: transparent; cursor: pointer; font-size: 26px; line-height: 1; color: #a99fd6; padding: 0 4px; }
.modal__x:hover { color: #fff; }
.modal__body { padding: 6px 20px 4px; font-size: 14px; line-height: 1.6; color: #c7bdf0; }
.modal__lead { margin: 10px 0 12px; color: #eae6ff; }
.modal__body h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--np-pink); }
.modal__body ul { margin: 0 0 6px; padding-left: 20px; }
.modal__body li { margin: 3px 0; }
.modal__body b { color: var(--np-yellow); }
.modal__foot { display: flex; justify-content: flex-end; padding: 12px 20px 16px; }

/* Small screens: the controls stay pinned to the RIGHT on the same row — the
   buttons shrink to icons instead of dropping below the brand. */
@media (max-width: 620px) {
  .topbar { flex-wrap: nowrap; }
  .topbar__title { font-size: 18px; }
  .btn { padding: 8px 11px; min-width: 40px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
  .btn__lbl { display: none; }
  .btn__ico { display: inline-flex; line-height: 1; }
}

/* Phones / narrow windows: the game well must DOMINATE. The side panel drops
   beneath the board as a thin horizontal strip, the keyboard hint is hidden,
   and every chrome box shrinks so nothing looks bigger than the board. */
@media (max-width: 640px), (max-height: 620px) {
  .stage { gap: 8px; }
  .playfield { flex-direction: column; align-items: center; gap: 8px; }
  .panel {
    flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center;
    gap: 6px; width: 100%; max-width: 340px; min-width: 0;
  }
  .stat { flex: 1 1 60px; padding: 4px 8px; border-radius: 9px; text-align: center; }
  .stat__k { font-size: 9px; letter-spacing: .06em; }
  .stat__v { font-size: 16px; }
  .next { flex-direction: row; gap: 6px; padding: 4px 8px; align-items: center; justify-content: center; }
  .next__k { align-self: center; }
  .next canvas { width: 44px; height: 44px; }
  .hintline { display: none; }
  .overlay__msg { font-size: 15px; }
  .btn { padding: 6px 10px; font-size: 12px; }
  .topbar { padding: 7px 12px; }
  .topbar__logo { width: 28px; height: 28px; font-size: 12px; }
  .board-status { font-size: 11px; }
  /* Bigger well: the header sits outside the stage at full width, and the
     panel is a thin strip below, so only ~185px of stage chrome must be
     reserved — and the well may span 94% of the viewport width. */
  .board-wrap {
    height: min(calc(100vh - 185px), calc((100vw - var(--spad) * 2) * 0.94), 620px);
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .tpad__btn { transition: none; }
}