/* ═══════════════════════════════════════════════════════════════════
   MIA GAMES — Classic Stack Styles
   File     : games/classic-stack/classic-stack.css
   Version  : 4.0 — Fixed board height, ghost piece, line clearing
   Inherits : ../../style.css (global tokens + layout)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.625rem 0;
}
.breadcrumb { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.breadcrumb li { font-size:var(--fs-sm); color:var(--text-muted); }
.breadcrumb a  { color:var(--text-muted); text-decoration:none; transition:color var(--transition-fast); }
.breadcrumb a:hover { color:var(--accent-purple); }
.breadcrumb [aria-current="page"] { color:var(--text-secondary); font-weight:var(--fw-medium); }

.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ═══════════════════════════════════════════════════════════════════
   GAME AREA
   ═══════════════════════════════════════════════════════════════════ */

.cs-game-area {
  /* lets scrollIntoView() stop just below the sticky header (set from JS) */
  scroll-margin-top: calc(var(--cs-header-h, 0px) + 8px);
  min-height: unset;
  padding: var(--space-3);
  gap: var(--space-2);
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   GAME CONTROLS
   ═══════════════════════════════════════════════════════════════════ */

.cs-game-area .game-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-1);
  column-gap: var(--space-2);
  width: 100%;
  padding: 0 6px var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 36px;
  box-sizing: border-box;
}

.cs-game-area .game-controls-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
}

.cs-game-area .game-controls .game-controls-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.cs-game-area .game-controls .control-btn,
.cs-game-area .game-controls .control-btn.control-btn--primary,
.cs-game-area .game-controls button {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  line-height: 1;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cs-game-area .game-controls .control-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.cs-game-area .game-controls .control-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}

.cs-game-area .game-controls .control-btn.control-btn--primary {
  background: var(--accent-purple-dim);
  color: var(--accent-purple);
  border-color: var(--border-accent);
}

.cs-game-area .game-controls .control-btn.control-btn--primary:hover {
  background: var(--accent-purple);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   STATS ROW
   ═══════════════════════════════════════════════════════════════════ */

.game-stats-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding: var(--space-0-5) 0;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.game-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
  min-width: 35px;
}

.game-stat-label {
  font-size: 0.55rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-medium);
}

.game-stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════
   GAME STATUS
   ═══════════════════════════════════════════════════════════════════ */

.game-status {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.2vw, var(--fs-sm));
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-align: center;
  min-height: 1.3em;
  padding: var(--space-0-5) 0;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BOARD CONTAINER — Reduced height for desktop fit
   ═══════════════════════════════════════════════════════════════════ */

.cs-board-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  touch-action: none;
}

.cs-board-container {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  touch-action: none;
}

.cs-board-wrapper {
  position: relative;
  display: inline-block;
  touch-action: none;
}

/* ── Main Board ── */
.cs-board {
  display: grid;
  grid-template-columns: repeat(10, var(--cs-cell, 24px));
  grid-template-rows: repeat(20, var(--cs-cell, 24px));
  gap: 1px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(124, 109, 250, 0.06);
  overflow: hidden;
  touch-action: none;
  position: relative;
}

/* ── Starfield backdrop — a few dozen tiny fixed "stars" behind the grid.
   Only visible through empty cells (which are given a slightly transparent
   background below) and the 1px gaps between cells; naturally hidden
   behind any placed piece, which is the intended look — stars are "sky",
   not painted over blocks. ── */
.cs-board::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 6%,  rgba(255,255,255,0.55) 50%, transparent 100%),
    radial-gradient(1px 1px at 22% 18%,    rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 9%, rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%,    rgba(255,255,255,0.30) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 4%, rgba(255,255,255,0.50) 50%, transparent 100%),
    radial-gradient(1px 1px at 82% 31%,    rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 14%,rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 12% 42%,    rgba(255,255,255,0.30) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 55%,rgba(255,255,255,0.40) 50%, transparent 100%),
    radial-gradient(1px 1px at 47% 68%,    rgba(255,255,255,0.30) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 48%,rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 76% 62%,    rgba(255,255,255,0.30) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 75%,rgba(255,255,255,0.40) 50%, transparent 100%),
    radial-gradient(1px 1px at 15% 82%,    rgba(255,255,255,0.30) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 90%,rgba(255,255,255,0.45) 50%, transparent 100%),
    radial-gradient(1px 1px at 58% 88%,    rgba(255,255,255,0.30) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 92%,rgba(255,255,255,0.40) 50%, transparent 100%);
  background-repeat: no-repeat;
}

[data-theme="light"] .cs-board::before {
  opacity: 0.35; /* keep it subtle rather than gray specks on a light board */
}

/* ── Board Cells ── */
.cs-cell {
  width: var(--cs-cell, 24px);
  height: var(--cs-cell, 24px);
  background: rgba(20, 20, 32, 0.55); /* semi-transparent so the starfield shows through empty space */
  border-radius: 1px;
  transition: background 0.06s ease, box-shadow 0.06s ease;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

[data-theme="light"] .cs-cell {
  background: rgba(255, 255, 255, 0.4);
}

/* ── PIECE COLORS — Neon Palette with Glow ── */

/* Piece 0: I — Cyan */
.cs-cell.piece-0 {
  background: #00f0f0;
  box-shadow: 0 0 8px rgba(0, 240, 240, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-cell.piece-0.glow { box-shadow: 0 0 16px rgba(0, 240, 240, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.3); }

/* Piece 1: O — Yellow */
.cs-cell.piece-1 {
  background: #f0f000;
  box-shadow: 0 0 8px rgba(240, 240, 0, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-cell.piece-1.glow { box-shadow: 0 0 16px rgba(240, 240, 0, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.3); }

/* Piece 2: T — Purple */
.cs-cell.piece-2 {
  background: #a000f0;
  box-shadow: 0 0 8px rgba(160, 0, 240, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-cell.piece-2.glow { box-shadow: 0 0 16px rgba(160, 0, 240, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.3); }

/* Piece 3: S — Green */
.cs-cell.piece-3 {
  background: #00f000;
  box-shadow: 0 0 8px rgba(0, 240, 0, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-cell.piece-3.glow { box-shadow: 0 0 16px rgba(0, 240, 0, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.3); }

/* Piece 4: Z — Red */
.cs-cell.piece-4 {
  background: #f00000;
  box-shadow: 0 0 8px rgba(240, 0, 0, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-cell.piece-4.glow { box-shadow: 0 0 16px rgba(240, 0, 0, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.3); }

/* Piece 5: J — Blue */
.cs-cell.piece-5 {
  background: #0000f0;
  box-shadow: 0 0 8px rgba(0, 0, 240, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-cell.piece-5.glow { box-shadow: 0 0 16px rgba(0, 0, 240, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.3); }

/* Piece 6: L — Orange */
.cs-cell.piece-6 {
  background: #f0a000;
  box-shadow: 0 0 8px rgba(240, 160, 0, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cs-cell.piece-6.glow { box-shadow: 0 0 16px rgba(240, 160, 0, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.3); }

/* ── Light Theme Adjustments ── */
[data-theme="light"] .cs-cell.piece-0 { box-shadow: 0 0 6px rgba(0, 200, 200, 0.3); }
[data-theme="light"] .cs-cell.piece-1 { box-shadow: 0 0 6px rgba(200, 200, 0, 0.3); }
[data-theme="light"] .cs-cell.piece-2 { box-shadow: 0 0 6px rgba(140, 0, 200, 0.3); }
[data-theme="light"] .cs-cell.piece-3 { box-shadow: 0 0 6px rgba(0, 200, 0, 0.3); }
[data-theme="light"] .cs-cell.piece-4 { box-shadow: 0 0 6px rgba(200, 0, 0, 0.3); }
[data-theme="light"] .cs-cell.piece-5 { box-shadow: 0 0 6px rgba(0, 0, 200, 0.3); }
[data-theme="light"] .cs-cell.piece-6 { box-shadow: 0 0 6px rgba(200, 140, 0, 0.3); }

/* ── Ghost Piece — Transparent outline, no fill ── */
.cs-cell.ghost {
  background: transparent !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  z-index: 0 !important;
}
[data-theme="light"] .cs-cell.ghost {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* ── Flash Animation ── */
.cs-cell.flash {
  animation: csFlash 0.25s ease both;
  z-index: 5 !important;
}

@keyframes csFlash {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.1; transform: scale(1.12); background: #ffffff; }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Start Overlay & Pause Overlay share the same visual treatment ── */
.cs-start-overlay,
.cs-pause-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-md);
  z-index: 20;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}

.cs-start-overlay .cs-start-icon,
.cs-pause-overlay .cs-pause-icon {
  font-size: 3rem;
  display: block;
}

.cs-start-overlay h2,
.cs-pause-overlay h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
  color: #fff;
  margin: 0;
}

.cs-start-overlay p,
.cs-pause-overlay p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin: 0;
  text-align: center;
}

.cs-start-overlay .control-btn,
.cs-pause-overlay .control-btn {
  margin-top: 0.3rem;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  padding: 0.6rem 2rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.cs-start-overlay .control-btn:hover,
.cs-pause-overlay .control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(124, 109, 250, 0.4);
}

/* ── Side Info ── */
.cs-side-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Stats Panel (Score / Level / Lines / High Score) — lives in the side
   column now, above Next/Hold, so it's always visible next to the board
   without ever needing to scroll the page to see it. ── */
.cs-stats-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5, 0.375rem);
  min-width: calc(var(--cs-cell, 24px) * 4 + 12px);
}

.cs-stat-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.cs-stat-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

.cs-stat-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1;
}

.cs-next-wrap,
.cs-hold-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(var(--cs-cell, 24px) * 4 + 12px);
}

/* On desktop, give the sidebar cards a more generous, substantial width
   rather than sizing them purely off the 4-cell preview grid — makes them
   read as proper "cards" alongside the now-larger board instead of thin
   strips. */
@media (min-width: 769px) {
  .cs-stats-panel,
  .cs-next-wrap,
  .cs-hold-wrap {
    min-width: 220px;
  }
}

/* Prominent Next/Hold titles — was 0.55rem, easy to miss entirely.
   Now clearly legible, with a small accent bar under each for emphasis. */
.cs-side-label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0 0 var(--space-1-5, 0.375rem);
  padding-bottom: var(--space-1);
  text-align: center;
  width: 100%;
  border-bottom: 2px solid var(--accent-purple, #7c6dfa);
}

.cs-next-board,
.cs-hold-board {
  display: grid;
  grid-template-columns: repeat(4, var(--cs-cell, 24px));
  grid-template-rows: repeat(4, var(--cs-cell, 24px));
  gap: 1px;
  pointer-events: none;
  box-sizing: border-box;
}

.cs-next-board .cs-cell,
.cs-hold-board .cs-cell {
  background: var(--bg-secondary);
}

.cs-hold-btn {
  margin-top: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  width: 100%;
  touch-action: manipulation;
  pointer-events: auto;
}

.cs-hold-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.cs-hold-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   TOUCH CONTROLS — compact D-pad + Pause (mobile)
   Layout: 5-column, 2-row grid. Rotate on top-centre (col 2), Pause
   on top-right (col 5) — one empty column (col 4) separates them.
   Left / Drop / Right on the bottom row (cols 1–3).
   ═══════════════════════════════════════════════════════════════════ */

.cs-touch-controls {
  display: none;
  width: 100%;
  max-width: 300px;
  margin-top: var(--space-2);
  flex-direction: column;
  align-items: center;
  touch-action: manipulation;
}

.cs-dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 34px 34px;
  grid-template-rows: auto auto;
  gap: 4px;
  width: 100%;
  max-width: 280px;
  touch-action: manipulation;
}

.cs-touch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  height: 34px;
  min-height: 34px;
  min-width: 0;
}

.cs-touch-btn:active {
  transform: scale(0.94);
  background: var(--bg-tertiary);
  border-color: var(--accent-purple);
}

/* D-pad grid placement */
.cs-touch-btn--rotate { grid-column: 2; grid-row: 1; }
.cs-touch-btn--pause  { grid-column: 5; grid-row: 1; }
.cs-touch-btn--left   { grid-column: 1; grid-row: 2; }
.cs-touch-btn--drop   { grid-column: 2; grid-row: 2; }
.cs-touch-btn--right  { grid-column: 3; grid-row: 2; }

/* Pause button — same size as D-pad buttons, distinct surface */
.cs-touch-btn--pause {
  background: var(--bg-tertiary);
  border-color: var(--border-strong);
}

.cs-touch-btn--pause:active {
  background: var(--accent-purple-dim);
  border-color: var(--accent-purple);
}

/* Rotate icon — bolder and slightly larger than the default glyph.
   The ↻ character renders as a hairline circle-arrow in most system
   fonts. Increasing font-size alone makes it taller but still thin;
   the text-stroke and text-shadow below thicken the strokes so it
   reads clearly at small sizes. Only the icon changes — the button's
   height and width are fixed by the base .cs-touch-btn rule. */
.cs-touch-btn--rotate {
  font-size: 1.05rem;
  font-weight: 700;
  -webkit-text-stroke: 0.4px currentColor;
  text-shadow: 0 0 0.5px currentColor;
}

/* Show on touch devices and narrow viewports */
@media (pointer: coarse) {
  .cs-touch-controls { display: flex; }
}
@media (max-width: 768px) {
  .cs-touch-controls { display: flex; }
}
@media (max-width: 480px) {
  .cs-dpad {
    max-width: 260px;
    grid-template-columns: repeat(3, 1fr) 32px 32px;
    gap: 4px;
  }
  .cs-touch-btn {
    height: 32px;
    min-height: 32px;
    font-size: 0.8rem;
  }
  .cs-touch-btn--rotate {
    font-size: 1rem;
  }
}
@media (max-width: 360px) {
  .cs-dpad {
    max-width: 240px;
    grid-template-columns: repeat(3, 1fr) 30px 30px;
    gap: 3px;
  }
  .cs-touch-btn {
    height: 30px;
    min-height: 30px;
    font-size: 0.75rem;
  }
  .cs-touch-btn--rotate {
    font-size: 0.95rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GAME OVER OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

.cs-gameover {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: csFadeIn 0.4s ease;
}

@keyframes csFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cs-gameover-content {
  text-align: center;
  color: #fff;
  padding: 1.5rem;
  max-width: 360px;
}

.cs-gameover-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 0.5rem;
  animation: csShake 0.5s ease;
}

@keyframes csShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

.cs-gameover-content h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  margin-bottom: 0.5rem;
  color: #fff;
}

.cs-gameover-content p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-base);
  margin-bottom: 0.3rem;
}

.cs-gameover-content .control-btn {
  margin-top: 1rem;
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  padding: 0.6rem 1.8rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.cs-gameover-content .control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(124, 109, 250, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .cs-game-area { padding: var(--space-2); gap: var(--space-2); }
  /* Board and sidebar stay side by side at every screen size, matching
     the desktop arrangement — they do NOT stack into separate full-width
     rows on mobile. computeCellSize() shrinks the cell size enough that
     both fit together within the viewport width. */
  .cs-board-container { flex-direction: row; align-items: flex-start; justify-content: center; }
  .cs-side-info {
    flex-direction: column;
    gap: var(--space-1-5, 0.375rem);
  }
  .cs-stats-panel {
    min-width: calc(var(--cs-cell, 20px) * 4 + 10px);
    padding: var(--space-1-5, 0.375rem);
  }
  .cs-stat-value { font-size: 0.85rem; }
  .cs-stat-label { font-size: 0.55rem; }
  .cs-next-wrap, .cs-hold-wrap {
    min-width: calc(var(--cs-cell, 20px) * 4 + 10px);
    padding: var(--space-0-5);
  }
  .cs-next-board, .cs-hold-board {
    grid-template-columns: repeat(4, var(--cs-cell, 20px));
    grid-template-rows: repeat(4, var(--cs-cell, 20px));
  }
}

@media (max-width: 600px) {
  .cs-game-area .game-controls-title { font-size: var(--fs-sm); }
  .cs-game-area .game-controls .control-btn,
  .cs-game-area .game-controls .control-btn.control-btn--primary,
  .cs-game-area .game-controls button {
    height: 24px; min-height: 24px; max-height: 24px; min-width: 24px;
  }
  .cs-game-area .game-controls .control-btn svg { width: 10px; height: 10px; }
  .cs-game-area .game-controls .control-btn .btn-text { display: none !important; }
  .cs-stat-value { font-size: 0.9rem; }
  .cs-stat-label { font-size: 0.58rem; }
  .cs-next-wrap, .cs-hold-wrap {
    min-width: calc(var(--cs-cell, 20px) * 4 + 10px);
  }
  .cs-next-board, .cs-hold-board {
    grid-template-columns: repeat(4, var(--cs-cell, 20px));
    grid-template-rows: repeat(4, var(--cs-cell, 20px));
  }
  .game-status { font-size: var(--fs-xs); min-height: 1.2em; }
}

@media (max-width: 480px) {
  .cs-game-area { padding: var(--space-1); gap: var(--space-1); }
  .cs-game-area .game-controls-title { font-size: 0.85rem; }
  .cs-game-area .game-controls .control-btn,
  .cs-game-area .game-controls .control-btn.control-btn--primary,
  .cs-game-area .game-controls button {
    height: 20px; min-height: 20px; max-height: 20px; min-width: 20px;
    padding: 0 var(--space-1);
  }
  .cs-game-area .game-controls .control-btn svg { width: 8px; height: 8px; }
  .cs-stat-value { font-size: 0.8rem; }
  .cs-stat-label { font-size: 0.52rem; }
  .cs-next-wrap, .cs-hold-wrap {
    min-width: calc(var(--cs-cell, 16px) * 4 + 8px);
    padding: 2px;
  }
  .cs-next-board, .cs-hold-board {
    grid-template-columns: repeat(4, var(--cs-cell, 16px));
    grid-template-rows: repeat(4, var(--cs-cell, 16px));
  }
  .game-status { font-size: 0.6rem; min-height: 1em; }
  .cs-start-overlay .cs-start-icon, .cs-pause-overlay .cs-pause-icon { font-size: 2rem; }
  .cs-start-overlay h2, .cs-pause-overlay h2 { font-size: 1rem; }
  .cs-start-overlay p, .cs-pause-overlay p { font-size: 0.7rem; }
  .cs-start-overlay .control-btn, .cs-pause-overlay .control-btn { padding: 0.4rem 1.2rem; font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   SEO CONTENT
   ═══════════════════════════════════════════════════════════════════ */

.seo-content {
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--border-subtle);
}
.seo-content h2 { font-size: clamp(var(--fs-xl), 2.5vw, var(--fs-2xl)); margin-bottom: 1rem; }
.seo-content h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 1.75rem 0 0.6rem; }
.seo-content p { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.85; max-width: none; margin-bottom: 1rem; }
.seo-content ul { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.seo-content ul li { list-style: disc; font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════════════
   POINTER EVENTS
   ═══════════════════════════════════════════════════════════════════ */

button, a, .control-btn, .nav-toggle, .theme-toggle, .play-btn,
.game-card-link, .game-card a, .cs-touch-btn, .cs-hold-btn,
.cs-cell, .cs-board, .cs-board-wrap, .cs-board-container,
.cs-game-area .control-btn, .cs-game-area .game-controls select,
.cs-game-area .game-controls button, .cs-start-overlay .control-btn,
.cs-pause-overlay .control-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

.nav-overlay { pointer-events: none !important; }
.nav-overlay.is-visible { pointer-events: auto !important; }
.mobile-nav a { pointer-events: auto !important; touch-action: manipulation !important; }
.ad-container, .ad-placeholder, .adsbygoogle { pointer-events: none !important; }
.ad-container .adsbygoogle { pointer-events: auto !important; }

/* ═══════════════════════════════════════════════════════════════════
   PROTOTYPE UPGRADES (2026-10-05): keep-playing strip, coach,
   confetti, game-over share — same pattern as Hangman/2048/Connect Four
   ═══════════════════════════════════════════════════════════════════ */

/* ── Keep-playing strip (directly under the game area) ── */
.keep-playing {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.75rem 0 0.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}
.keep-playing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.keep-playing-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0;
}
.keep-playing-all {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.keep-playing-track {
  max-width: 100%;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.keep-playing-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 104px;
  padding: 0.9rem 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: transform 0.15s ease-out, border-color 0.15s ease-out, background 0.15s ease-out;
}
.keep-playing-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--border-accent);
  background: var(--bg-tertiary);
}
.keep-playing-card > span:first-child {
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
}

/* ── First-visit coach overlay ── */
.hm-coach-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 26, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.hm-coach-overlay[hidden] {
  display: none;
}
.hm-coach-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}
.hm-coach-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 430px;
  width: calc(100% - 2rem);
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: csModalPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hm-coach-box h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0 0 1rem;
}
.hm-coach-steps {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0 0 1.5rem;
  padding: 0;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: var(--fs-base);
}
.hm-coach-steps strong {
  color: var(--accent-purple);
}
.hm-coach-box .control-btn.control-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  color: #fff;
  background: var(--accent-purple);
  border: 1px solid var(--accent-purple);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter 0.15s ease-out, transform 0.15s ease-out;
}
.hm-coach-box .control-btn.control-btn--primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  color: #fff;
}
@keyframes csModalPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── New-best confetti canvas ── */
.hm-confetti {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
}

/* ── Game-over actions (Play Again + Share) + new-best badge ── */
.cs-gameover-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.cs-gameover-content .control-btn.cs-share-btn {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  box-shadow: none;
  padding: 0.75rem 1.5rem;
}
.cs-gameover-content .control-btn.cs-share-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.cs-best-badge {
  display: inline-block;
  margin: 0.25rem 0 0.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--accent-purple);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.cs-best-badge[hidden] {
  display: none;
}

/* ── Light-theme guard: primary buttons keep white text on purple hover ── */
[data-theme="light"] .cs-game-area .game-controls .control-btn.control-btn--primary:hover,
[data-theme="light"] .cs-start-overlay .control-btn.control-btn--primary:hover,
[data-theme="light"] .cs-gameover-content .control-btn.control-btn--primary:hover,
[data-theme="light"] .hm-coach-box .control-btn.control-btn--primary:hover {
  background: var(--accent-purple) !important;
  color: #fff !important;
}

/* ── Prototype mobile tweaks ── */
@media (max-width: 640px) {
  .keep-playing-card {
    min-width: 92px;
  }
  .keep-playing-card > span:first-child {
    height: 3rem;
    font-size: 1.5rem;
  }
  .cs-gameover-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ── PROTOTYPE FIX (2026-10-05): stable board via reserved ad space ──
   The top leaderboard ad uses data-ad-format="auto", so AdSense serves a
   different creative height on almost every impression (90px placeholder,
   149px measured live, up to 250px possible). The board is sized from the
   space below this slot, so each load produced a different board: large
   then shrinking on first load, correct on one refresh, overflowing on the
   next. A fixed min-height reserve makes rect.top deterministic — the board
   is now the same size on every load and always fits the viewport. Taller
   creatives can still grow the slot; the re-measure triggers then refit. */
/* AD STRIP FIX (2026-10-06): this reserve is now MOBILE/TABLET ONLY (≤768px).
   On desktop the board is sized from the viewport height (see
   computeCellSize), so it no longer depends on the top ad's height, and
   the old 160px reserve only made the top ad box taller than the bottom
   one. At ≥769px the top strip now uses the same global style.css rules
   as the bottom strip (728×90). */
@media (max-width: 768px) {
  .ad-strip:not(.ad-strip--bottom) .ad-leaderboard {
    height: auto;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}