/* ============================================================
   Level99 at Disney Springs guide (/guides/level99-disney-springs)
   Page uses _Layout (site.css Nightfall tokens). Every token is aliased locally with a
   fallback so the page holds up if a token is renamed. Scoped under .l99; prose links use
   `.l99 :where(a)` so classed controls keep their own ink.
   Signature: the lobby scoreboard. A dot matrix leader board that lists the week instead
   of high scores, each day lit in the colour of its price tier. The tier colours carry
   through the calculator chips and the per minute meters, so one glance ties a price to
   its day. Nothing moves behind type; the only motion is the today marker fading in.
   ============================================================ */

.l99 {
  --l99-paper: var(--paper, oklch(24% 0.045 276));
  --l99-ink: var(--ink, oklch(93% 0.03 84));
  --l99-ink-soft: var(--ink-soft, oklch(84% 0.025 84));
  --l99-muted: var(--muted, oklch(72% 0.02 270));
  --l99-hair: var(--hair, oklch(100% 0 0 / 0.12));
  --l99-gold: var(--gold, oklch(84% 0.13 86));
  --l99-board: oklch(15% 0.02 270);
  --l99-board-2: oklch(19% 0.025 270);
  --l99-std: oklch(82% 0.17 150);    /* standard, arcade green */
  --l99-prime: oklch(83% 0.15 75);   /* prime, amber */
  --l99-peak: oklch(70% 0.2 20);     /* peak, red */
  --l99-cond: 'Saira Condensed', var(--text, system-ui), sans-serif;
  --l99-serif: 'Libre Caslon Display', var(--display, Georgia), serif;
  --l99-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-md, 16px) var(--space-md, 16px) var(--space-3xl, 72px);
  color: var(--l99-ink);
}
.l99 :where(a) { color: var(--l99-gold); text-decoration: none; border-bottom: 1px solid oklch(84% 0.13 86 / 0.35); }
.l99 :where(a:hover) { border-bottom-color: var(--l99-gold); }
.l99 :where(a:focus-visible, summary:focus-visible, input:focus-visible + span) { outline: 2px solid var(--l99-gold); outline-offset: 3px; border-radius: 4px; }
.l99-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- hero ------------------------------------------------------------- */
.l99-hero { padding: clamp(20px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); max-width: 760px; }
.l99-kicker {
  margin: 0; font-family: var(--l99-cond); font-weight: 600; font-size: 15px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--l99-std);
}
.l99-h1 {
  margin: 12px 0 0; font-family: var(--l99-serif); font-weight: 400;
  font-size: clamp(34px, 5.6vw, 62px); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance;
}
.l99-answer { margin: 20px 0 0; max-width: 62ch; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--l99-ink-soft); }
.l99-answer strong { color: var(--l99-ink); font-weight: 600; }
.l99-byline { margin: 16px 0 0; font-size: 14px; color: var(--l99-muted); }

/* ---- the lobby scoreboard -------------------------------------------- */
.l99-board-sec { margin: 0 0 clamp(32px, 5vw, 56px); }
.l99-board {
  position: relative;
  padding: clamp(16px, 3vw, 32px);
  border-radius: 18px;
  background: var(--l99-board);
  border: 6px solid oklch(26% 0.02 270);
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.06), 0 24px 48px -24px oklch(0% 0 0 / 0.7);
  font-family: var(--l99-mono);
}
.l99-board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding-bottom: 12px; border-bottom: 2px dotted oklch(100% 0 0 / 0.16); }
.l99-board-title {
  margin: 0; font-family: var(--l99-mono); font-weight: 700; font-size: clamp(16px, 2.4vw, 22px);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--l99-std);
  text-shadow: 0 0 10px oklch(82% 0.17 150 / 0.45);
}
.l99-board-sub { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l99-muted); }
.l99-board-sub span { opacity: 0.6; }
.l99-board-scroll { overflow-x: auto; }
.l99-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.l99-table thead th {
  padding: 6px 10px; text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--l99-muted);
}
.l99-th-short { display: none; }
.l99-table tbody tr { --c: var(--l99-std); }
.l99-table tbody tr.is-prime { --c: var(--l99-prime); }
.l99-table tbody tr.is-peak { --c: var(--l99-peak); }
.l99-table tbody th,
.l99-table tbody td {
  padding: 10px; background: var(--l99-board-2); color: var(--c);
  font-size: clamp(14px, 2vw, 19px); font-weight: 700; letter-spacing: 0.06em; text-align: left; vertical-align: top;
  text-shadow: 0 0 8px color-mix(in oklch, var(--c) 45%, transparent);
}
.l99-table tbody th { border-radius: 8px 0 0 8px; border-left: 4px solid var(--c); white-space: nowrap; }
.l99-table tbody td:last-child { border-radius: 0 8px 8px 0; }
.l99-price { display: block; }
.l99-late { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--l99-prime); text-shadow: none; }
.l99-now {
  display: none; margin-left: 8px; padding: 2px 6px; border-radius: 4px; vertical-align: 2px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--c); color: var(--l99-board); text-shadow: none;
}
.l99-table tbody tr.is-today th,
.l99-table tbody tr.is-today td { background: color-mix(in oklch, var(--c) 16%, var(--l99-board-2)); }
.l99-table tbody tr.is-today .l99-now { display: inline-block; animation: l99-fade 0.6s ease-out both; }
@keyframes l99-fade { from { opacity: 0; } to { opacity: 1; } }
.l99-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 12px 0 0; list-style: none; border-top: 2px dotted oklch(100% 0 0 / 0.16); font-size: 12px; color: var(--l99-muted); }
.l99-legend li { --c: var(--l99-std); }
.l99-legend li.is-prime { --c: var(--l99-prime); }
.l99-legend li.is-peak { --c: var(--l99-peak); }
.l99-legend b { color: var(--c); letter-spacing: 0.1em; text-transform: uppercase; margin-right: 4px; }
.l99-legend li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.l99-board-note { margin: 10px 4px 0; font-size: 14px; color: var(--l99-muted); }

/* ---- body ------------------------------------------------------------- */
.l99-body { max-width: 760px; }
.l99-sec { margin: 0 0 clamp(36px, 5vw, 56px); }
.l99-eyebrow { margin: 0; font-family: var(--l99-cond); font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--l99-muted); }
.l99-sec h2 { margin: 6px 0 12px; font-family: var(--l99-serif); font-weight: 400; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.12; text-wrap: balance; }
.l99-sec p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: var(--l99-ink-soft); }
.l99-sec p strong { color: var(--l99-ink); }
.l99-note { font-size: 15px !important; color: var(--l99-muted) !important; }

/* calculator: a token slot readout */
.l99-calc { display: grid; gap: 14px; margin-top: 8px; padding: clamp(16px, 3vw, 24px); border-radius: 14px; background: var(--l99-board); border: 1px solid var(--l99-hair); }
.l99-calc fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.l99-calc legend { padding: 0; margin-bottom: 8px; font-family: var(--l99-cond); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l99-muted); }
.l99-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.l99-chip { --c: var(--l99-ink); position: relative; cursor: pointer; }
.l99-chip.is-standard { --c: var(--l99-std); }
.l99-chip.is-prime { --c: var(--l99-prime); }
.l99-chip.is-peak { --c: var(--l99-peak); }
.l99-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.l99-chip span {
  display: inline-block; min-width: 44px; min-height: 44px; padding: 11px 14px; box-sizing: border-box; text-align: center;
  border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.2); font-family: var(--l99-mono); font-size: 14px; font-weight: 600; color: var(--l99-ink-soft);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.l99-chip input:checked + span { background: var(--c); border-color: var(--c); color: var(--l99-board); }
.l99-total { display: grid; gap: 2px; padding-top: 14px; border-top: 2px dotted oklch(100% 0 0 / 0.16); font-family: var(--l99-mono); }
.l99-total-k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l99-muted); }
.l99-total-v { font-size: clamp(34px, 6vw, 48px); font-weight: 700; color: var(--l99-std); text-shadow: 0 0 12px oklch(82% 0.17 150 / 0.4); font-variant-numeric: tabular-nums; }
.l99-total-m { font-size: 14px; color: var(--l99-ink-soft); }

/* per minute meters: LED segment bars */
.l99-meters { display: grid; gap: 12px; margin: 6px 0 16px; }
.l99-meter { --c: var(--l99-std); padding: 14px 16px; border-radius: 12px; background: var(--l99-board); border-left: 4px solid var(--c); }
.l99-meter.is-prime { --c: var(--l99-prime); }
.l99-meter.is-peak { --c: var(--l99-peak); }
.l99-meter-name { margin: 0 0 8px !important; font-family: var(--l99-mono); font-size: 13px !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c) !important; }
.l99-meter-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 10px; font-family: var(--l99-mono); font-size: 13px; color: var(--l99-ink-soft); }
.l99-meter-row + .l99-meter-row { margin-top: 6px; }
.l99-meter-bar {
  height: 10px; width: calc(var(--v) / 50 * 100%);
  background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 8px);
  border-radius: 2px;
}
.l99-meter-v { min-width: 11ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--l99-ink); }

/* level select rooms */
.l99-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 4px 0 18px; padding: 0; list-style: none; }
.l99-rooms li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--l99-board); border: 1px solid var(--l99-hair);
  font-family: var(--l99-cond); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--l99-ink);
}
.l99-room-n { font-family: var(--l99-mono); font-size: 11px; color: var(--l99-std); }

/* visit steps */
.l99-steps { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: l99s; display: grid; gap: 10px; }
.l99-steps li { counter-increment: l99s; position: relative; padding: 14px 16px 14px 56px; border-radius: 12px; background: var(--l99-board); border: 1px solid var(--l99-hair); }
.l99-steps li::before {
  content: counter(l99s); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--l99-mono); font-weight: 700; font-size: 13px; background: var(--l99-std); color: var(--l99-board);
}
.l99-steps h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--l99-ink); }
.l99-steps p { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; }

/* faq */
.l99-faq-item { border-top: 1px solid var(--l99-hair); }
.l99-faq-item:last-of-type { border-bottom: 1px solid var(--l99-hair); }
.l99-faq-item summary { padding: 16px 0; cursor: pointer; font-weight: 600; font-size: 17px; color: var(--l99-ink); list-style-position: outside; }
.l99-faq-item p { margin: 0 0 16px; }
.l99-foot { margin-top: 32px; font-size: 13px; color: var(--l99-muted); }

@media (max-width: 560px) {
  .l99-th-long { display: none; }
  .l99-th-short { display: inline; }
  .l99-board { padding: 12px 10px; border-width: 3px; border-radius: 14px; }
  .l99-table { border-spacing: 0 5px; }
  .l99-table thead th, .l99-table tbody th, .l99-table tbody td { padding: 8px 4px; }
  .l99-table thead th { font-size: 10px; letter-spacing: 0.08em; }
  .l99-table tbody td, .l99-table tbody th { font-size: 13px; letter-spacing: 0; }
  .l99-table tbody th { padding-left: 6px; }
  .l99-now { display: none; margin: 3px 0 0; font-size: 9px; }
  .l99-table tbody tr.is-today .l99-now { display: table; }
  .l99-late { font-size: 10px; }
  .l99-meter-row { grid-template-columns: 64px 1fr auto; font-size: 12px; }
  .l99-rooms { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .l99-table tbody tr.is-today .l99-now { animation: none; }
  .l99-chip span { transition: none; }
}

@media (prefers-color-scheme: light) {
  /* The site renders on its night palette in every scheme; the board keeps its own dark
     backing so the LED colours hold contrast either way. */
  .l99-board, .l99-calc, .l99-meter, .l99-rooms li, .l99-steps li { color-scheme: dark; }
}