/* ==========================================
   The timing demo (templates/partials/timing_demo.html)
   ==========================================
   Loaded by index.html only. Every colour, radius and gutter is a landing.css
   token -- the demo has to look like part of the page, and the four verdict
   colours have to be the SAME four the canvas paints, or the legend swatches
   quietly disagree with the words.

   The canvas is sized in CSS and the script matches its backing store to the
   device pixel ratio, so nothing here may give it a fixed pixel width: an
   `aspect-ratio` box is what keeps the lane on the screen at 400 px and stops
   the note geometry from being right at exactly one width.
   ========================================== */

.timing-section {
  padding: 56px 24px 72px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.timing-section .container { max-width: var(--max-w); margin: 0 auto; }

.td-wrap {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
  grid-template-areas:
    "stage    controls"
    "stage    history"
    "legend   legend"
    "privacy  privacy";
  gap: 18px 26px;
  align-items: start;
}

/* ---- The lane ---- */
.td-stage { grid-area: stage; min-width: 0; position: relative; }

/* The song caption, set OVER the lane's top-left corner the way the game's
   own HUD title sits (static/screens/gameplay_hero.*.webp). Absolute so it
   costs the lane no height, and `pointer-events: none` so it never eats the
   tap that is meant to focus the canvas -- the whole demo is a press target.
   It is real markup, not canvas text, so a reader gets it too. */
.td-caption {
  position: absolute;
  top: 10px;
  left: 14px;
  right: 14px;
  margin: 0;
  z-index: 2;
  pointer-events: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(230,237,243,0.82);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .td-caption { font-size: 0.68rem; top: 7px; left: 10px; right: 10px; }
}
.td-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-width: 100%;
  border-radius: var(--rad);
  border: 1px solid var(--border-b);
  background: #0b0c0e;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  touch-action: manipulation;
  cursor: pointer;
}
.td-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Controls ---- */
.td-controls { grid-area: controls; }
.td-hit {
  /* >= 44 px on a phone is the whole reason this button exists. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  font-family: var(--font-b);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #06121c;
  background: var(--accent);
  border: 0;
  border-radius: var(--rad);
  cursor: pointer;
  box-shadow: 0 8px 24px var(--accent-glow);
}
.td-hit:active { transform: translateY(1px); }
.td-hit:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.td-hit-key {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
}

.td-sound {
  margin-top: 10px;
  min-height: 44px;
  width: 100%;
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-m);
  background: var(--bg-2);
  border: 1px solid var(--border-b);
  border-radius: var(--rad);
  cursor: pointer;
}
.td-sound[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.td-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.td-live {
  margin-top: 12px;
  min-height: 2.6em;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-m);
}

/* ---- Last ten ---- */
.td-history { grid-area: history; }
.td-history-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-d);
  margin-bottom: 8px;
}
.td-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  padding: 0;
  margin: 0;
}
.td-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-b);
  color: var(--text-m);
  white-space: nowrap;
}
.td-chip--perfect { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }
.td-chip--good    { color: var(--green);  border-color: rgba(76,175,80,0.45); }
.td-chip--early   { color: var(--orange); border-color: rgba(255,152,0,0.45); }
.td-chip--late    { color: var(--red);    border-color: rgba(229,57,53,0.45); }
/* Missed is the DEMO's word, not one of the game's four verdicts, and it has
   to look like it: no verdict colour, a dashed edge, the muted text tone. A
   reader scanning the strip must never file it beside Perfect and Good. */
.td-chip--missed  { color: var(--text-d); border-color: var(--border-b); border-style: dashed; }
/* Removed by the script on the first verdict; here so the strip is never a
   labelled empty box. */
.td-chip--empty   { color: var(--text-d); border-style: dashed; }

/* ---- Legend ---- */
/* One column since D11 dropped the note beside it: the legend rows are the
   only visible copy of the four numbers now. */
.td-legend {
  grid-area: legend;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 26px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--rad);
}
.td-legend-rows { list-style: none; padding: 0; margin: 0; }
.td-legend-rows li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--text-m);
  padding: 3px 0;
}
.td-legend-rows b { color: var(--text); font-weight: 700; }
.td-swatch {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 3px;
}
.td-swatch--perfect { background: var(--text); box-shadow: 0 0 8px var(--accent-glow); }
.td-swatch--good    { background: var(--green); }
.td-swatch--early   { background: var(--orange); }
.td-swatch--late    { background: var(--red); }
.td-swatch--missed  { background: transparent; border: 1px dashed var(--text-d); }
/* ---- The text alternative and the privacy line ----
   D11: `.td-alt` carries `visually-hidden` in the partial, so it is the
   canvas's description for a screen reader and nothing on the page. It is
   absolutely positioned (`.visually-hidden` in landing.css), so it is not a
   grid item at all -- the grid has no `alt` row any more, and giving it one
   would pay a gap for an empty band between the legend and the privacy
   line. */
.td-privacy {
  grid-area: privacy;
  font-size: 0.82rem;
  color: var(--text-d);
}

@media (max-width: 860px) {
  .td-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "controls"
      "history"
      "legend"
      "privacy";
  }
}

@media (max-width: 560px) {
  .timing-section { padding: 40px 16px 52px; }
  .td-canvas { aspect-ratio: 4 / 3; }
  .td-hit { min-height: 60px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .td-hit:active { transform: none; }
  .td-swatch--perfect { box-shadow: none; }
}