/* css/rails.css — desktop ambient rails (Phase 1 desktop layout).
 *
 * Below 1100px the rails are hidden and the layout is the unchanged single
 * column (Rod's call: desktop-first, mobile = graceful viewer). At >=1100px the
 * game screen becomes a three-zone grid — identity rail | play column |
 * performance rail — that fills the previously-dead desktop margin with
 * function. The play column keeps its exact width, so the canvas sizing and
 * camera budgets are UNCHANGED; the rails only add around the core loop.
 *
 * Rails are aria-hidden ambient mirrors of live values whose canonical source
 * (the HUD + now-playing chip) already announces; js/ui/rails.js populates them.
 * Every hue that means (block-colour legend) carries a non-colour label twin —
 * CVD-safe per the roundtable's Rule 1. */

/* Play column wraps the HUD + canvas + input — unconditional, so the single
 * column below 1100px stacks exactly as it did before the wrapper existed. */
#play-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.5vh, 12px);
  width: 100%;
}

/* Rails hidden on every viewport below the desktop breakpoint. */
.game-rail {
  --rail-motion-pulse: 0;
  --rail-live-opacity: 0.72;
  --rail-live-scale: 1;
  display: none;
}

/* ---- rail component styling (only painted once the rails are shown) ---- */
.rail-card {
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: background var(--transition-normal), border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}
.rail-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rail-card-t {
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.rail-sub { margin-bottom: 10px; }
.rail-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-success);
}
.rail-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success-glow);
  opacity: var(--rail-live-opacity);
  transform: scale(var(--rail-live-scale));
  transition: opacity 120ms linear, transform 120ms linear;
}

.rail-world { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.rail-track {
  display: flex; align-items: center; gap: 6px;
  color: var(--color-primary); font-size: 13px; font-weight: 600; margin: 2px 0 0;
}
.rail-track .tb-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.rail-meta { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--color-text-muted); }
.rail-meta b { color: var(--color-text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.rail-eq {
  display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 14px;
  transition: opacity var(--transition-normal);
}
.rail-eq span {
  flex: 1; height: 100%;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent-2));
  border-radius: 2px; opacity: 0.85;
  transform-origin: bottom;
  transform: scaleY(0.3);
  will-change: transform, opacity;
  transition: opacity 120ms linear, transform 120ms linear;
}

.rail-intensity { margin-top: 14px; }
.rail-bar { height: 6px; border-radius: 99px; background: var(--color-surface-hover); overflow: hidden; }
.rail-bar > i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--color-accent-2), var(--color-primary));
  transition: width 0.12s linear;
}

.rail-swatches { display: flex; gap: 6px; }
.rail-sw {
  flex: 1; height: 22px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: #0a0a14;
}

.rail-spark { width: 100%; height: 56px; display: block; }
.rail-rowline { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.rail-n { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rail-big { font-family: var(--font-mono); font-size: 24px; font-weight: 700; line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
.rail-up { color: var(--color-success); }

/* ---- desktop three-zone layout ---- */
@media (min-width: 1100px) {
  #game-container { max-width: 1180px; }

  #game-ui:not(.hidden) {
    display: grid;
    grid-template-columns: 258px minmax(0, 600px) 258px;
    grid-template-areas:
      "header header header"
      "railL  play   railR";
    justify-content: center;
    align-items: start;
    gap: 14px 22px;
  }
  #game-ui:not(.hidden) > #game-header { grid-area: header; justify-self: center; }
  #game-ui:not(.hidden) > #rail-left   { grid-area: railL; }
  #game-ui:not(.hidden) > #play-column { grid-area: play; }
  #game-ui:not(.hidden) > #rail-right  { grid-area: railR; }

  .game-rail { display: flex; flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-live i, .rail-eq span, .rail-bar > i {
    transition: none;
    transform: none;
  }
}

/* ============================================================
 * MENU RAILS — the desktop menu's ambient frame (>=1100px).
 * Same three-zone grammar as the gameplay grid so menu→game is
 * one continuous console. Below the breakpoint the rails hide and
 * the menu stays the unchanged centered column (desktop-first,
 * mobile = graceful viewer). Content is REAL local data only —
 * refreshMenuRails() in game.js; first-run shows a welcome.
 * ============================================================ */
.menu-rail { display: none; }

/* Wrapper around the centred trio (modes + footer + ad). Below the
 * breakpoint it's a plain centred column, exactly as the menu stacked
 * before the wrapper existed. */
.menu-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 32px);
  width: 100%;
}

@media (min-width: 1100px) {
  #menu-screen:not(.hidden) {
    display: grid;
    grid-template-columns: 238px minmax(0, 660px) 238px;
    grid-template-areas:
      "header header header"
      "railL  center railR";
    justify-content: center;
    align-items: start;
    column-gap: 22px;
    row-gap: clamp(20px, 3vh, 34px);
  }
  #menu-screen:not(.hidden) > .menu-header    { grid-area: header; justify-self: center; }
  #menu-screen:not(.hidden) > .menu-center    { grid-area: center; }
  #menu-screen:not(.hidden) > #menu-rail-left  { grid-area: railL; }
  #menu-screen:not(.hidden) > #menu-rail-right { grid-area: railR; }

  .menu-rail { display: flex; flex-direction: column; gap: 14px; align-self: start; }
}

/* ---- menu-rail card styling ---- */
.menu-rail-card {
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 16px 14px;
}
.menu-rail-t {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.menu-rail-hero {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: 12px;
}
.menu-rail-hero span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
.menu-rail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
}
.menu-rail-row span {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.menu-rail-row b {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.menu-rail-streak {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
}
.menu-rail-welcome {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.menu-rail-daily-h {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-text);
  margin-bottom: 5px;
}
.menu-rail-daily-b {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.menu-rail-cta {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--color-primary);
}

/* Recent-WPM sparkline in the progress card (same chart language as the
   results/stats trend). Uniform viewBox → the 1.6px stroke never distorts. */
.menu-rail-spark {
  margin: 2px 0 10px;
}
.menu-rail-sparkt {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}
.menu-spark {
  display: block;
  width: 100%;
  height: 32px;
}
.menu-spark-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.menu-spark-area {
  fill: color-mix(in srgb, var(--color-primary) 12%, transparent);
  stroke: none;
}
.menu-spark-dot {
  fill: var(--color-primary);
}

/* Entrance reveal — the menu rails fade+rise into place when the menu appears.
   Motion-only, so it's gated behind no-preference. Scoped to the menu rails
   only: the gameplay rails have a position assertion in the visual suite that a
   mid-flight transform would perturb. */
@keyframes railReveal {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .menu-rail-card {
    animation: railReveal 0.42s ease-out both;
  }
}

/* Ultra-wide: past 1600px let the frame breathe — wider rails + gutter, the
   play column stays 600px so the canvas sizing and camera budgets are unchanged. */
@media (min-width: 1600px) {
  #game-container { max-width: 1280px; }
  #menu-screen:not(.hidden) {
    grid-template-columns: 262px minmax(0, 680px) 262px;
    column-gap: 30px;
  }
  #game-ui:not(.hidden) {
    grid-template-columns: 275px minmax(0, 600px) 275px;
    column-gap: 28px;
  }
}