/* TECTONIC — game-specific styles. Shared tokens come from shared/kit.css. */

:root {
  --wg-accent: #e8924a;     /* TECTONIC magma orange */
  --wg-accent-ink: #2a1405;
  --tcol-w: 56px;           /* recomputed per device in game.js */
  --ttile: 56px;            /* tile size (kept square) */
}

/* ---------- board: five shiftable columns ---------- */
.tectonic-board {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 18px;
  touch-action: pan-y;      /* let the page scroll, we handle vertical column swipes */
  user-select: none;
  -webkit-user-select: none;
}

.tectonic-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* the slice that animates / rubber-bands while shifting */
.tectonic-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  will-change: transform;
  touch-action: none;
  cursor: grab;
}
.tectonic-track.is-dragging { cursor: grabbing; }
.tectonic-track.is-settling { transition: transform .16s cubic-bezier(.2,.7,.3,1); }

.tectonic-tile {
  width: var(--ttile);
  height: var(--ttile);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wg-tile);
  color: var(--wg-tile-ink);
  font-weight: 800;
  font-size: 1.55rem;
  border-radius: var(--wg-radius-sm);
  border: 2px solid transparent;
  text-transform: uppercase;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

/* a row that currently spells a valid word lights up (the dopamine hit) */
.tectonic-tile.is-valid {
  background: color-mix(in srgb, var(--wg-accent) 22%, var(--wg-tile));
  border-color: var(--wg-accent);
  color: var(--wg-text);
}

/* the per-column shift arrows */
.tectonic-arrow {
  width: var(--ttile);
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wg-surface-2);
  border: 1px solid var(--wg-border);
  border-radius: var(--wg-radius-sm);
  color: var(--wg-text-dim);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, color .12s ease, transform .05s ease;
}
.tectonic-arrow:hover { background: var(--wg-surface); color: var(--wg-text); }
.tectonic-arrow:active { transform: translateY(1px); }

/* ---------- status row ---------- */
.tectonic-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wg-text-dim);
  font-size: .95rem;
  margin-bottom: 6px;
}
.tectonic-status b { color: var(--wg-text); font-variant-numeric: tabular-nums; }
.tectonic-status-sep { opacity: .5; }

/* ---------- win flourish ---------- */
.tectonic-board.is-won .tectonic-tile {
  background: color-mix(in srgb, var(--wg-accent) 30%, var(--wg-tile));
  border-color: var(--wg-accent);
  color: var(--wg-text);
}
.tectonic-board.is-won .tectonic-arrow { opacity: .25; pointer-events: none; }
.tectonic-tile.is-pop { animation: wg-pop .26s ease; }

/* ---------- share card ---------- */
.tectonic-sharecard {
  font-family: var(--wg-mono);
  background: var(--wg-bg);
  border: 1px solid var(--wg-border);
  border-radius: var(--wg-radius-sm);
  padding: 14px;
  margin: 14px 0;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: .08em;
}

/* keep the 5×5 board comfortable on small phones */
@media (max-width: 380px) {
  :root { --ttile: 50px; }
  .tectonic-board { gap: 6px; }
  .tectonic-tile { font-size: 1.4rem; }
}