/* TURING — styles.css
   Retro-arcade / CRT-era, modern-polished. Dark by default; the colour
   tokens use the shared Lab names so theme-light.css can override them.
   Base rules follow sandfall/styles.css; TURING-only rules are marked. */

/* ---------- fonts (self-hosted, shared with the lab root) ---------- */

@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("/press-start-2p.woff2") format("woff2"); }
@font-face { font-family: "Press Start 2P Fallback"; src: local("Courier New"); size-adjust: 166.64%; ascent-override: 60%; descent-override: 0%; line-gap-override: 0%; }

/* ---------- tokens ---------- */

:root {
  --bg: #0a0a12;
  --surface: #12121d;
  --surface-2: #1a1a2a;
  --line: #28283c;
  --control-line: #5e5e80;
  --text: #e9e9f2;
  --dim: #9aa0b5;
  --cyan: #45f0ff;
  --magenta: #ff3d8b;
  --gold: #ffc857;
  --green: #41ff8b;
  --red: #ff5560;

  --pixel: "Press Start 2P", "Press Start 2P Fallback", "Courier New", monospace;
  --body: -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --glow-cyan: 0 0 14px rgba(69, 240, 255, 0.35);
  --glow-gold: 0 0 14px rgba(255, 200, 87, 0.35);
  --space-gutter: clamp(16px, 4vw, 48px);
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255, 200, 87, 0.05), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(255, 200, 87, 0.3); }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  z-index: 200;
  background: var(--cyan);
  color: #05050d;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(60px); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(69, 240, 255, 0.15);
}

a { color: var(--cyan); }

kbd {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text);
}

/* ---------- header ---------- */

.site-header {
  padding: 26px var(--space-gutter) 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lab-link {
  align-self: flex-start;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 2px;
  transition: color 0.15s, text-shadow 0.15s;
}
.lab-link:hover { color: var(--cyan); text-shadow: var(--glow-cyan); }

.level {
  margin: 0;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--gold);
}

.wordmark {
  margin: 6px 0 4px;
  font-family: var(--pixel);
  font-size: clamp(22px, 4.5vw, 34px);
  letter-spacing: 3px;
  color: var(--text);
  text-shadow: 0 0 16px rgba(255, 200, 87, 0.55), 3px 3px 0 var(--magenta);
}

.tagline {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim);
}

.cursor { color: var(--gold); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- layout ---------- */

main {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px var(--space-gutter) 72px;
}

.how-line {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--dim);
}

.sim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

/* ---------- stage ---------- */

.stage-wrap { min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.stage {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), 0 0 28px rgba(255, 200, 87, 0.06);
}

/* TURING: square dish, smooth scaling (the field is continuous, not pixels).
   The side is also capped by the viewport height so the whole dish and its
   HUD fit on screen at once; the second declaration is skipped by browsers
   without svh units. The HUD and how-line share the dish's width. */
.stage, .hud, .stage-wrap .how-line { width: min(100%, 680px); width: min(100%, 680px, max(280px, calc(100svh - 180px))); margin-left: auto; margin-right: auto; }
.stage { aspect-ratio: 1; }

#rdCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
/* .stage clips overflow, so the focus ring sits inside the canvas edge. */
#rdCanvas:focus-visible { outline-offset: -3px; box-shadow: none; }

.brush-ring {
  position: absolute;
  top: 0; left: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(69, 240, 255, 0.35), inset 0 0 6px rgba(69, 240, 255, 0.2);
  pointer-events: none;
  will-change: transform;
}

.play-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
  background: rgba(5, 5, 12, 0.82);
  /* Let pointer painting reach the canvas while paused; only the
     button itself intercepts clicks. */
  pointer-events: none;
}
.play-hint .btn { pointer-events: auto; }
.play-hint p {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dim);
  max-width: 380px;
}

.hud {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 1px;
  color: var(--dim);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---------- controls ---------- */

.controls { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-title {
  margin: 0;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 200, 87, 0.4);
}

.note { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.5; }

.flavor {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--gold);
  opacity: 0.85;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s var(--ease-out), border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.btn:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(69, 240, 255, 0.22);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: var(--cyan); border-color: var(--cyan); color: #05050d; }
.btn-primary:hover { box-shadow: 0 0 18px rgba(69, 240, 255, 0.5); }
.btn-ghost { background: transparent; }
.btn-big { font-family: var(--pixel); font-size: 11px; padding: 14px 20px; }

.btn.is-on {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: inset 0 0 10px rgba(255, 200, 87, 0.12);
}

.ctrl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ctrl-wide { grid-column: 1 / -1; }

/* ---------- fields ---------- */

.field-row { display: flex; align-items: center; gap: 10px; }
.field-row > label {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--dim);
}

input[type="range"] { flex: 1; accent-color: var(--gold); min-width: 0; }



/* ---------- TURING: preset chips ---------- */

.preset-panel { gap: 14px; }

.presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.preset-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name key" "hint hint";
  align-items: center;
  gap: 4px 8px;
  min-height: 56px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, box-shadow 0.12s, transform 0.12s var(--ease-out);
}
.preset-btn:hover { border-color: var(--magenta); color: var(--text); box-shadow: 0 0 12px rgba(255, 61, 139, 0.22); }
.preset-btn:active { transform: translateY(1px); }
.preset-btn[aria-pressed="true"] {
  border-color: var(--cyan);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--magenta), 0 0 16px rgba(69, 240, 255, 0.28);
}
.preset-name { grid-area: name; font-weight: 700; letter-spacing: 0.5px; overflow-wrap: anywhere; }
.preset-greek { color: var(--gold); margin-left: 4px; }
.preset-btn kbd { grid-area: key; }
.preset-hint { grid-area: hint; font-size: 10.5px; line-height: 1.35; color: var(--dim); }

/* ---------- TURING: segmented tool + chips ---------- */

.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg-btn {
  min-height: 44px;
  background: var(--bg);
  border: 0;
  color: var(--dim);
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 40px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover { border-color: var(--cyan); color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--cyan); color: var(--text); box-shadow: 0 0 12px rgba(69, 240, 255, 0.25); }
.chip-swatch { width: 28px; height: 10px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.2); }

output { font-family: var(--mono); font-size: 12.5px; color: var(--gold); min-width: 52px; text-align: right; }

/* ---------- TURING: science panel ---------- */

.science { margin-top: 28px; max-width: 860px; }
.science p { margin: 0; color: var(--dim); line-height: 1.6; }
.sources-title { margin: 6px 0 0; font-family: var(--pixel); font-size: 9px; letter-spacing: 1px; color: var(--gold); }
.sources { margin: 0; padding-left: 20px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.sources a { overflow-wrap: anywhere; }

/* ---------- toasts ---------- */

.toasts {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.22s var(--ease-out) both;
}
.toast-info { border-left-color: var(--cyan); }
.toast-success { border-left-color: var(--green); }
.toast.out { opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- dialog ---------- */

.dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  max-width: min(440px, calc(100vw - 32px));
}
.dialog::backdrop { background: rgba(5, 5, 12, 0.72); }

.dialog-title { margin: 0 0 12px; font-family: var(--pixel); font-size: 12px; color: var(--gold); }
.dialog p { margin: 0 0 18px; color: var(--dim); line-height: 1.55; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px var(--space-gutter);
  text-align: center;
  color: var(--dim);
  font-size: 13px;
}
.site-footer p { margin: 4px 0; }
.site-footer .privacy-note { font-size: 12.5px; }
.site-footer a { color: var(--cyan); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }

/* ---------- responsive ---------- */

/* Side-by-side layout: the dish stays in view while the controls column
   scrolls past it (its side is already capped to fit the viewport). */
@media (min-width: 901px) {
  .stage-wrap { position: sticky; top: 12px; }
}

@media (max-width: 900px) {
  .sim-layout { grid-template-columns: 1fr; }
  .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .preset-panel { grid-column: 1 / -1; }
  .presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (pointer: coarse) {
  .preset-btn, .chip { min-height: 48px; }
  .chip { min-width: 48px; justify-content: center; }
  .btn { min-height: 44px; }
  input[type="range"] { min-height: 44px; }
}

@media (max-width: 600px) {
  .controls { grid-template-columns: 1fr; }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .ctrl-grid { grid-template-columns: 1fr; }
  .wordmark { letter-spacing: 1px; }
}

/* ---------- reduced motion: kill all looping/auto animation ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .cursor { animation: none; }
}