/*
  voodoo — a retro-future broadcast console. "Your digital twin is live."

  1990s TV control room × Nintendo UI × neo-brutalism × moyo: cream surfaces, midnight ink, hard
  outlines and offset shadows, keys that press down, tally lamps that light, an LED readout for
  the code, and monitors with bezels. Warmer than the rest of the suite; the palette is the icon's.
  No gradients, no glass, no glow orbs. Cyan is for utility and status only.

  Type: Bricolage Grotesque (display), Space Grotesk (interface and readouts), Press Start 2P
  (tiny arcade labels, sparingly) — the suite's own faces, served from here (fonts/, OFL).
*/

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* The palette (the icon's): canonical voodoo. */
  --paper: #fff9ee;      /* background — warm white */
  --ink: #081426;        /* midnight */
  --coral: #ff5c4d;      /* primary */
  --lime: #8dff32;       /* secondary — live */
  --yellow: #ffd329;     /* highlight — framing, LEDs */
  --tangerine: #ff8a25;  /* accent */
  --cyan: #13cee3;       /* utility and status only */
  --stone: #d9d5cc;      /* muted — warm grey */

  /* Derived */
  --surface: #fffdf8;    /* modules sit a shade lighter than the paper */
  --ink-2: #2a3446;
  --ink-soft: #5a6272;   /* secondary text on paper */
  --coral-deep: #c9342a; /* coral text that reads on paper */
  --line: 2.5px;
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 16px;

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --ui: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arcade: "Press Start 2P", ui-monospace, monospace;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Kept for the scripts that read them (phone.js) */
  --muted: var(--ink-soft);
  --accent: var(--coral);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  /* A faint broadcast grid: dots on paper, not a mesh. */
  background-color: var(--paper);
  background-image: radial-gradient(rgba(8, 20, 38, 0.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  font: 500 15px/1.5 var(--ui);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--coral-deep); font-weight: 600; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 16px 56px;
}

.hidden { display: none !important; }

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: 28px; font-weight: 800; line-height: 1.05; }

.sub { color: var(--ink-soft); margin: 4px 0 0; font-size: 15px; }

.hint { color: var(--ink-soft); font-size: 13px; margin: 10px 0 0; }

/* ── Glyphs (glyphs.svg) ─────────────────────────────────────────────────── */

.g {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

/* A glyph on a coloured tile: modules, cards, the tally. */
.chip {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--yellow);
  color: var(--ink);
  flex: none;
}
.chip .g { width: 18px; height: 18px; }
.chip.coral { background: var(--coral); color: var(--paper); }
.chip.lime { background: var(--lime); }
.chip.tangerine { background: var(--tangerine); }
.chip.cyan { background: var(--cyan); }
.chip.ink { background: var(--ink); color: var(--yellow); }

/* ── The console bar: brand, tally lamps ─────────────────────────────────── */

/* Your moyo picture (moyo-bar.js), at the console bar's far end. */
.moyo-slot { margin-left: auto; display: inline-flex; }
.moyo-slot:empty { display: none; }

.console-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: var(--surface);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ink); flex: none; }
.brand .wordmark { font: 800 26px/1 var(--display); letter-spacing: -0.04em; }
.brand .kind {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 6px 3px;
  font: 8px/1 var(--arcade);
  letter-spacing: 0.04em;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 6px;
  vertical-align: 5px;
}

.tally {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

/* A tally lamp: off is stone; lit is the colour of what it means. */
.lamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: #8e897f;
  font: 700 11px/1 var(--ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.lamp .g { width: 16px; height: 16px; }
.lamp.live { background: var(--lime); color: var(--ink); }
.lamp.util { background: var(--cyan); color: var(--ink); }
.lamp.warn { background: var(--yellow); color: var(--ink); }
.lamp.rec, .lamp.air { background: var(--coral); color: var(--paper); }
.lamp.rec .g, .lamp.air .g { animation: blink 1.2s steps(2, jump-none) infinite; }

@keyframes blink { 50% { opacity: 0.25; } }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 20px;
  align-items: start;
}
.console > .stack { display: grid; gap: 20px; min-width: 0; }

@media (max-width: 980px) {
  .console { grid-template-columns: 1fr; }
  .tally { margin-left: 0; }
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 12px; }

/* ── Modules: the rack's units ───────────────────────────────────────────── */

.module, .panel {
  background: var(--surface);
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.panel { margin-bottom: 20px; }

.module-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 14px;
}
.module-head h2 {
  font: 10px/1.2 var(--arcade);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.module-head .aside { margin-left: auto; }

label.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 700 11px/1.2 var(--ui);
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fields + .fields, .fields + .row, .row + .fields { margin-top: 12px; }
label.field + .fields { margin-top: 16px; }

/* ── Keys: buttons that press down ───────────────────────────────────────── */

button, a.button, a.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* a comfortable tap on a phone */
  padding: 9px 16px;
  font: 700 14px/1.1 var(--ui);
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.06s, box-shadow 0.06s, background 0.12s;
}
button:hover:not(:disabled), a.button:hover, a.key:hover { background: #fff3d6; }
button:active:not(:disabled), a.button:active, a.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: 0 2px 0 var(--ink); }

button.primary, a.button.primary {
  background: var(--coral);
  color: var(--paper);
}
button.primary:hover:not(:disabled), a.button.primary:hover { background: #ff7266; }

/* Stop: the one key that ends a take — ink, with a coral heart. */
button.danger { background: var(--ink); color: var(--coral); }
button.danger:hover:not(:disabled) { background: var(--ink-2); }

button.wide { flex: 1; }
button.big { min-height: 54px; font-size: 16px; padding: 12px 22px; border-radius: 14px; }

/* An audio source: lit while it reaches the recording, struck through when muted. */
button.toggle { padding-left: 12px; }
button.toggle::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--lime);
}
button.toggle.muted { color: var(--ink-soft); text-decoration: line-through; }
button.toggle.muted::before { background: var(--stone); }
button.toggle.absent { opacity: 0.45; }

button.afk-on { background: var(--yellow); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */

select, input[type="text"] {
  font: 600 14px/1.2 var(--ui);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}
select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 11px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

input[type="color"] {
  width: 56px;
  height: 44px;
  padding: 3px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
}

input[type="range"] { width: 100%; accent-color: var(--coral); }
input[type="file"] { font: 600 13px var(--ui); max-width: 100%; }

.meta { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Status: a lamp and a line ───────────────────────────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.3 var(--ui);
  color: var(--ink-2);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--stone);
  flex: none;
}
.dot.live { background: var(--lime); }
.dot.warn { background: var(--yellow); }
.dot.rec { background: var(--coral); animation: blink 1.2s steps(2, jump-none) infinite; }

/* ── The code: an LED readout ────────────────────────────────────────────── */

.code-display, input[type="text"].code-input {
  display: block;
  font: 34px/1 var(--arcade);
  letter-spacing: 0.22em;
  color: var(--yellow);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 18px 10px 16px 18px;
  text-align: center;
  box-shadow: inset 0 0 0 3px #1b2a44, var(--shadow-sm);
  margin: 0 0 10px;
}
input[type="text"].code-input {
  width: 100%;
  text-transform: uppercase;
  caret-color: var(--lime);
}
input[type="text"].code-input::placeholder { color: #3a4a66; }

.pair { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pair > div { flex: 1; min-width: 180px; }
.pair img {
  width: 132px;
  height: 132px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  box-shadow: var(--shadow-sm);
}

/* ── Monitors: the picture, in a bezel ───────────────────────────────────── */

.monitor {
  background: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 10px 12px 12px;
  color: var(--paper);
}

.monitor-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 2px 10px;
  font: 600 12px/1 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9c3b6;
}
.monitor-bar .label {
  font: 8px/1 var(--arcade);
  padding: 5px 6px 4px;
  border-radius: 5px;
  background: var(--coral);
  color: var(--paper);
  letter-spacing: 0.06em;
}
.monitor-bar .label.lime { background: var(--lime); color: var(--ink); }
.monitor-bar .label.yellow { background: var(--yellow); color: var(--ink); }
.monitor-bar .readout { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
.monitor-bar .readout .g { width: 14px; height: 14px; color: var(--yellow); }
.monitor-bar .spacer { flex: 1; }
.monitor-bar .status { color: #e8e2d4; text-transform: none; letter-spacing: 0; }
.monitor-bar .dot { border-color: #e8e2d4; }

/* The big tally on the program monitor: ON AIR (the voodoo camera) or REC. */
.onair {
  font: 9px/1 var(--arcade);
  letter-spacing: 0.08em;
  padding: 6px 8px 5px;
  border-radius: 6px;
  border: 2px solid #33415c;
  color: #4a5876;
}
.onair.lit { background: var(--coral); border-color: var(--coral); color: var(--paper); animation: blink 1.6s steps(2, jump-none) infinite; }

video, canvas.stage {
  width: 100%;
  display: block;
  background: #000;
  border-radius: 10px;
}
canvas.stage { aspect-ratio: 16 / 9; object-fit: contain; }
.stage-wrap { position: relative; line-height: 0; }

/* Above the canvas rather than painted into it, so it never reaches the recording. */
.inset-box {
  position: absolute;
  border: 2px dashed rgba(255, 249, 238, 0.7);
  border-radius: 8px;
  cursor: move;
  touch-action: none;
}
.inset-box:hover, .inset-box.dragging { border-color: var(--yellow); border-style: solid; }
.inset-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  cursor: nwse-resize;
  touch-action: none;
}

/* The transport under the program monitor: record, screen, the take's time. */
.transport {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 2px 2px;
}
.transport .status { color: #e8e2d4; }
.transport .dot { border-color: #e8e2d4; }
.transport .timer {
  font: 14px/1 var(--arcade);
  color: var(--lime);
  letter-spacing: 0.06em;
}
.transport .meta { color: #c9c3b6; }
.monitor button { border-color: var(--ink); }
.monitor button.danger { border-color: var(--coral); box-shadow: 0 4px 0 var(--coral-deep); }
.monitor button.danger:active:not(:disabled) { box-shadow: 0 1px 0 var(--coral-deep); }

.sources { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sources figure { margin: 0; }
.sources .monitor { padding: 8px 10px 10px; border-radius: 16px; }
.sources video { aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; }

@media (max-width: 560px) { .sources { grid-template-columns: 1fr; } }

/* ── The signal log, and takes ───────────────────────────────────────────── */

.log {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 12px;
  max-height: 180px;
  overflow-y: auto;
  font: 12px/1.65 var(--mono);
  color: var(--ink-2);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.log li { padding: 1px 0; }
.log li.bad { color: var(--coral-deep); font-weight: 700; }

.recordings { list-style: none; margin: 0; padding: 0; }
.recordings li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 2px dashed var(--stone);
  font: 600 14px var(--ui);
  word-break: break-all;
}
.recordings li:last-child { border-bottom: 0; }
.recordings li .row { flex: none; }
.recordings button, .recordings a.key { min-height: 38px; padding: 6px 12px; font-size: 13px; }

.mute-group { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.err {
  color: var(--coral-deep);
  background: #ffe5e0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  font: 600 14px var(--ui);
  margin-top: 12px;
}

.timer { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ── The home page: channel select ───────────────────────────────────────── */

.hero { padding: 28px 4px 26px; }
.hero h1 { font-size: clamp(38px, 6.2vw, 72px); letter-spacing: -0.045em; line-height: 0.95; }
.hero h1 .live {
  display: inline-block;
  padding: 0 0.18em;
  background: var(--lime);
  border: 3px solid var(--ink);
  border-radius: 0.2em;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-2deg);
}
.hero .sub { font-size: 18px; max-width: 640px; margin-top: 16px; }

.roles { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .roles { grid-template-columns: 1fr 1fr; } }

.role-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: var(--line) solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 20px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.role-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.role-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.role-card .chip { width: 52px; height: 52px; border-radius: 14px; }
.role-card .chip .g { width: 28px; height: 28px; }
.role-card h2 { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.role-card h2 .g { width: 22px; height: 22px; }
.role-card p { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }
.role-card .where {
  display: inline-block;
  margin-bottom: 6px;
  font: 8px/1 var(--arcade);
  letter-spacing: 0.06em;
  padding: 4px 6px 3px;
  border: 2px solid var(--ink);
  border-radius: 5px;
}

.desktop-cta { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.desktop-cta .cta-title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.03em; }
.desktop-cta p { margin: 0; color: var(--ink-soft); }
.desktop-cta strong { color: var(--ink); }
.desktop-cta .row { margin-top: 4px; }

.features {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); } }
.features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px;
  font-size: 14px;
  color: var(--ink-2);
}
.features b { color: var(--ink); display: block; font-family: var(--display); font-size: 16px; }

.foot { margin-top: 26px; color: var(--ink-soft); font-size: 13px; }

/* ── The phone: a camera unit ────────────────────────────────────────────── */

.unit { max-width: 520px; margin: 0 auto; }
.unit .monitor video { aspect-ratio: 3 / 4; object-fit: cover; }
.unit .controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }

/* While streaming, the phone's own tally lights. */
body:has(#status .dot.live) .onair { background: var(--coral); border-color: var(--coral); color: var(--paper); animation: blink 1.6s steps(2, jump-none) infinite; }
body:has(#status .dot.live) .lamp-link { background: var(--lime); color: var(--ink); }
body:has(#status .dot.warn) .lamp-link { background: var(--yellow); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}