/* ===========================================================================
   games.css — the Games tab, shared by piano and guitar
   ---------------------------------------------------------------------------
   Two screens: a grid of cards to pick from, and a stage with the clock, the
   prompt and the instrument. Everything borrows the tokens in theme.css; the
   only new idea here is the prompt block, which is deliberately large because
   it has to be readable out of the corner of your eye while your hands are
   busy.
   =========================================================================== */

.arcade { margin-top: 4px; }

/* ── Picker ─────────────────────────────────────────────────────────── */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 16px 16px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.game-card:hover { border-color: var(--accent-dim); background: var(--surface-2); }

.gc-top { display: flex; align-items: baseline; gap: 10px; }

.gc-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.gc-tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.gc-blurb {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dim);
  flex: 1;
}

.gc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.gc-best { font-family: var(--mono); font-size: 11.5px; color: var(--dimmer); }
.gc-go   { font-size: 12px; color: var(--accent); }

/* ── Stage ──────────────────────────────────────────────────────────── */

.game-bar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.game-bar .btn { flex: none; }
.game-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.game-how   { font-size: 12.5px; color: var(--dim); }

.game-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-bottom: 14px;
}

.gopt { display: flex; align-items: center; gap: 8px; }

.gopt-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dimmer);
}

/* ── Heads-up display ───────────────────────────────────────────────── */

.game-hud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ghud {
  flex: 1 1 92px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 12px;
}

.ghud .v {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.ghud .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dimmer);
  margin-top: 2px;
}

/* The clock turns amber in the last ten seconds. */
.game-hud.low .ghud:nth-child(2) .v { color: var(--warn); }

/* ── Prompt ─────────────────────────────────────────────────────────── */

.game-prompt {
  margin: 14px 0 0;
  padding: 18px 20px;
  min-height: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.gp-main {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.gp-sub { font-size: 12.5px; color: var(--dim); }

/* A short colour wash on the prompt is the fastest possible feedback —
   it is in the middle of the screen, where you are already looking. */
.game-prompt.good { animation: gp-good .34s ease-out; }
.game-prompt.bad  { animation: gp-bad  .34s ease-out; }

@keyframes gp-good {
  from { background: rgba(94, 171, 132, .22); border-color: var(--good); }
  to   { background: var(--surface); border-color: var(--line); }
}

@keyframes gp-bad {
  from { background: rgba(201, 105, 95, .22); border-color: var(--bad); }
  to   { background: var(--surface); border-color: var(--line); }
}

/* ── Falling-note lane ──────────────────────────────────────────────── */

.game-lane {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  background: var(--surface-2);
}

.game-lane canvas { display: block; width: 100%; height: 200px; }

/* When the lane is showing, the keyboard beneath it is the same slab. */
.game-lane:not(.hidden) + .game-view { margin-top: 0; border-radius: 0 0 var(--r) var(--r); }

.game-view { margin: 14px 0; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.game-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.game-msg { font-size: 12.5px; color: var(--dim); min-height: 18px; }
.game-msg.good { color: var(--good); }
.game-msg.bad  { color: var(--bad); }

/* ── Scorecard ──────────────────────────────────────────────────────── */

.game-result {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-lg);
}

.gr-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 12px;
}

.gr-row { display: flex; flex-wrap: wrap; gap: 10px 28px; }

.gr-stat .v {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gr-stat .k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--dimmer);
  margin-top: 2px;
}

/* ── Narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .gp-main { font-size: 26px; }
  .game-lane canvas { height: 180px; }
  .ghud { flex-basis: 76px; padding: 8px 10px; }
  .ghud .v { font-size: 16px; }
}

/* ── Room for the instrument ────────────────────────────────────────────
   Once a game is open the tab heading has done its job, and the neck or
   keyboard is the thing that has to be on screen. Fold the intro away.
   ─────────────────────────────────────────────────────────────────────── */

.tab-panel[data-panel="games"]:has(.game-stage:not(.hidden)) > h1,
.tab-panel[data-panel="games"]:has(.game-stage:not(.hidden)) > .lede,
.tab-panel[data-panel="games"]:has(.game-stage:not(.hidden)) > .notice {
  display: none;
}

/* The lane already fills the eye, so the prompt above it stays compact. */
.arcade:has(.game-lane:not(.hidden)) .game-prompt { min-height: 0; padding: 12px 20px; }
.arcade:has(.game-lane:not(.hidden)) .gp-main { font-size: 26px; }