/** Panels, stats, buttons, overlays, touch controls. */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.panel__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/*
 * Preview canvases get DEFINITE, viewport-bounded sizes — never height:auto,
 * which derives height from the backing store and let the Next queue grow to
 * `width × 3.1` (≈520px on a phone, crushing the board; ≈580px on a laptop,
 * pushing the panel below the fold). previews.js reads whichever box it's given
 * and lays the pieces out vertically (tall box) or horizontally (wide box).
 *
 * Desktop default: narrow, tall — a vertical column, capped at ~38vh so a short
 * laptop never overflows.
 */
.preview { display: block; width: 100%; }
.panel--hold .preview { height: clamp(3rem, 9vh, 5.5rem); }
.panel--next .preview { height: clamp(10rem, 38vh, 24rem); }



/* Hold slot dims while the piece is locked out — spec §7. */
.preview[data-locked="true"] {
  opacity: 0.4;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* --- Stats --------------------------------------------------------------- */

.stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.stat__key {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat__value {
  font-family: var(--font-num);
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.stat__value--lead {
  font-size: var(--fs-xl);
  color: var(--accent-strong);
}

/* Clear labels — "Tetris", "T-Spin Double", "Back-to-Back". Never conveys
   meaning by colour alone; the text carries it. */
.badge {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--bg-base);
  background: var(--accent-strong);
  border-radius: var(--r-sm);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--bg-base);
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover { background: var(--accent-strong); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* Row of secondary actions in the stats panel (pause/scores/settings). */
.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --- Touch controls ------------------------------------------------------ */

/* Two thumb-reachable clusters: movement on the left, actions on the right.
   Pinned to the bottom with safe-area padding so it clears the iOS home bar. */
.controls {
  width: 100%;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
}

.controls__cluster {
  display: grid;
  gap: var(--sp-2);
}

.controls__cluster--move   { grid-template-columns: repeat(3, 1fr); }
.controls__cluster--action { grid-template-columns: repeat(2, 1fr); }

/* Real <button> elements, so they stay keyboard- and screen-reader-reachable
   rather than gesture-only. Every target clears the WCAG 48px minimum. */
.cbtn {
  min-width: 3rem;
  min-height: 3rem;
  height: clamp(3rem, 8.5vw, 4.25rem);
  display: grid;
  place-items: center;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  /* No transition on :active — touch feedback must feel instant. */
}

/* .pressed is toggled by the touch handler on touchstart/touchend, which is
   more reliable on mobile than :active (which can stick or lag). */
.cbtn.pressed,
.cbtn:active {
  background: var(--surface-2);
  color: var(--text-primary);
  transform: translateY(1px);
}

.cbtn--soft { font-size: var(--fs-2xl); }

.cbtn--rot  { color: var(--text-primary); }

.cbtn--drop {
  background: var(--accent);
  color: var(--bg-base);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.cbtn--hold {
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* --- Overlays ------------------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: oklch(0.10 0.01 265 / 0.78);
  backdrop-filter: blur(6px);
  z-index: 10;
}

.overlay[hidden] { display: none; }

.overlay__card {
  width: min(28rem, 100%);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  animation: card-in var(--dur-base) var(--ease-spring);
}

.overlay__title {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
}

.overlay__body {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  white-space: pre-line;
}

.overlay__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

/* --- Settings form ------------------------------------------------------- */

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.settings-row__label {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.settings-control {
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2);
  font: inherit;
  font-size: var(--fs-sm);
}

/* Larger, easier checkbox hit area on touch. */
.settings-row input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--accent);
}

/* Touch layout: a small Hold and a wide, short Next strip (drawn horizontally).
   This MUST come after the desktop defaults above — a media query adds no
   specificity, so source order is what lets it win. */
@media (max-width: 900px), (orientation: portrait), (pointer: coarse) {
  .panel--hold .preview {
    width: clamp(2.75rem, 12vw, 4rem);
    height: clamp(2rem, 7vh, 3rem);
  }
  .panel--next .preview {
    width: clamp(8rem, 44vw, 15rem);
    height: clamp(2.25rem, 8vh, 3.5rem);
  }

  .panel { padding: var(--sp-2); gap: var(--sp-1); }
  .panel__label { display: none; }   /* piece shapes are self-evident here */

  .panel--stats { align-items: stretch; }
  .stats { flex-direction: row; justify-content: space-between; gap: var(--sp-3); }
  .panel__actions { display: none; }
}