/* ── Tetris ──
   The well is a canvas sized by tetris.js (--tt-cell is the size of one
   square). Hold and Next sit either side of the well; on narrow cards
   (.is-narrow, set by the script) they move into a row above it. */

/* ── Palette (dark is the site default); read by tetris.js ── */
.tt-game {
  --tt-bg: #0a0e17;
  --tt-grid: rgba(122, 162, 247, 0.07);
  --tt-flash: #ffffff;
  --tt-I: #3fc7e0;
  --tt-J: #4a7cf0;
  --tt-L: #f0913a;
  --tt-O: #f2c94c;
  --tt-S: #4cc767;
  --tt-T: #a66de8;
  --tt-Z: #ea4f5a;
  --tt-cell: 24px;
}

[data-theme="light"] .tt-game {
  --tt-bg: #eceef1;
  --tt-grid: rgba(44, 44, 52, 0.08);
  --tt-flash: #3b6cc2;
  --tt-I: #1fa9c4;
  --tt-J: #2f5fd0;
  --tt-L: #e07a1f;
  --tt-O: #e0b020;
  --tt-S: #2ea84a;
  --tt-T: #8a4fd0;
  --tt-Z: #d6343f;
}

/* ── Card ── */
.game-card.tt-card {
  max-width: 40rem;
  margin: 0 auto;
  opacity: 1;
  transform: none;
}

.tt-controls {
  justify-content: center;
}

/* ── Layout: hold + stats | well | next ── */
.tt-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "hold  well next"
    "stats well next";
  column-gap: 1rem;
  row-gap: 1rem;
  justify-content: center;
  align-items: start;
}

.tt-hold  { grid-area: hold; justify-self: end; }
.tt-stats { grid-area: stats; justify-self: end; }
.tt-well  { grid-area: well; }
.tt-next  { grid-area: next; justify-self: start; }

.tt-game.is-narrow .tt-layout {
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "hold stats next"
    "well well  well";
  column-gap: 0.6rem;
  row-gap: 0.75rem;
}

.tt-game.is-narrow .tt-hold,
.tt-game.is-narrow .tt-next,
.tt-game.is-narrow .tt-stats {
  justify-self: stretch;
}

.tt-game.is-narrow .tt-well {
  justify-self: center;
}

.tt-game.is-narrow .tt-panel {
  padding: 0.35rem 0.45rem 0.45rem;
  gap: 0.2rem;
}

.tt-game.is-narrow .tt-label,
.tt-game.is-narrow .tt-stats dt {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
}

@media (max-width: 480px) {
  .game-card.tt-card {
    padding: 1rem 0.75rem;
  }
}

/* ── Side panels ── */
.tt-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--tt-bg);
}

[data-theme="light"] .tt-panel {
  border-color: var(--btn-border);
}

.tt-label,
.tt-stats dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.tt-panel canvas {
  display: block;
}

.tt-game[data-status="idle"] .tt-panel canvas {
  opacity: 0.4;
}

.tt-stats {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  min-width: 6.5rem;
}

.tt-stats div {
  text-align: right;
}

.tt-stats dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.tt-game.is-narrow .tt-stats {
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  min-width: 0;
  align-content: center;
}

.tt-game.is-narrow .tt-stats div {
  text-align: center;
}

.tt-game.is-narrow .tt-stats dd {
  font-size: 0.95rem;
}

/* ── Well ── */
.tt-well {
  position: relative;
  line-height: 0;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px var(--card-border),
    0 10px 30px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .tt-well {
  box-shadow:
    0 0 0 1px var(--btn-border),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

.tt-well canvas {
  display: block;
  border-radius: 6px;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.tt-well canvas:focus {
  outline: none;
}

.tt-well canvas:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.tt-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  line-height: 1.4;
  text-align: center;
  border-radius: 6px;
  background: rgba(10, 14, 23, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #e6e6eb;
}

[data-theme="light"] .tt-overlay {
  background: rgba(236, 238, 241, 0.78);
  color: var(--fg);
}

.tt-overlay[hidden] {
  display: none;
}

.tt-overlay-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
}

.tt-overlay-msg {
  margin: 0;
  font-size: 0.85rem;
  color: inherit;
  opacity: 0.85;
}

.tt-overlay-btn {
  margin-top: 0.3rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.4rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
}

.tt-overlay-btn:hover {
  filter: brightness(1.1);
}

.tt-overlay-btn:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* ── Touch buttons (shown on touch screens only) ── */
.tt-touch {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  max-width: 22rem;
  margin: 0.9rem auto 0;
}

@media (pointer: coarse) {
  .tt-touch {
    display: grid;
  }
}

.tt-touch button {
  height: 3rem;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--btn-bg);
  color: var(--fg);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

[data-theme="light"] .tt-touch button {
  border-color: var(--btn-border);
}

.tt-touch button[data-action="hold"] {
  font-size: 0.85rem;
}

/* Bottom row: ← ↓ → spans the full width */
.tt-touch button[data-action="left"],
.tt-touch button[data-action="down"],
.tt-touch button[data-action="right"] {
  height: 3.4rem;
}

.tt-touch button[data-action="left"]  { grid-column: 1 / span 1; }
.tt-touch button[data-action="down"]  { grid-column: 2 / span 2; }
.tt-touch button[data-action="right"] { grid-column: 4 / span 1; }

.tt-touch button.is-pressed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ── Status and help ── */
.tt-help-touch {
  display: none;
}

@media (pointer: coarse) {
  .tt-help-keys { display: none; }
  .tt-help-touch { display: inline; }
}

.tt-status {
  min-height: 1.5em;
  margin-top: 0.6rem;
  text-align: center;
  font-weight: 700;
  color: var(--accent);
}

.tt-help {
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}

.tt-help kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 0.3em;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--btn-bg);
  color: var(--fg);
}

[data-theme="light"] .tt-help kbd {
  border-color: var(--btn-border);
}