/* Aria hub shell. Brand tokens from Curiosity Instruments brand package v1.1: Ink, Paper, Dandelion. Futura PT for
   all UI (installed Futura PT, then Futura, as a draft stand-in; see the footer). Nunito only for approved feature
   names. Player hues 2 to 4 are hub-only, not brand colours. */

@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/Nunito_700Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #171715;
  --paper: #faf9f5;
  --dandelion: #ffc928;
  /* Surfaces and lines, from Ink and Paper. */
  --ink-2: #2a2a27;
  --ink-soft: rgba(23, 23, 21, 0.62);
  --ink-line: rgba(23, 23, 21, 0.14);
  --paper-soft: rgba(250, 249, 245, 0.7);
  --paper-line: rgba(250, 249, 245, 0.16);
  /* Players. P1 is always Dandelion; 2 to 4 are hub-only hues (not brand colours). */
  --p1: #ffc928;
  --p2: #e8735a;
  --p3: #3fa39b;
  --p4: #7a6fd0;

  --futura: "Futura PT", "Futura Std", Futura, "Century Gothic", system-ui, sans-serif;
  --feature: "Nunito", var(--futura);
  --radius: 14px;

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --line: var(--ink-line);
  --card: #ffffff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--futura);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Type roles */
.eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft); }
.headline { font-weight: 700; font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.label { font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); }
.feature { font-family: var(--feature); font-weight: 700; letter-spacing: 0; text-transform: none; }

/* Header */
.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img.symbol { width: 40px; height: 40px; }
.brand .lettering { height: 34px; display: none; }
.brand .lettering.on { display: block; }
.players { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }

button, select {
  font-family: var(--futura); font-size: 13px; color: var(--ink);
  border-radius: 999px; border: 1px solid var(--ink); background: transparent; padding: 7px 14px; cursor: pointer;
}
button.primary { background: var(--dandelion); border-color: var(--dandelion); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; }
button:disabled { opacity: 0.4; cursor: default; }
select { border-radius: 8px; padding: 6px 10px; background: var(--card); }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--dandelion); outline-offset: 2px; }

.chip {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-size: 13px;
}
.mark { width: 22px; height: 22px; flex: none; }
.chip .meta { color: var(--fg-soft); font-size: 12px; }
.chip .x { border: 0; padding: 0 4px; font-size: 16px; line-height: 1; }
.chip img.loader { width: 26px; height: 26px; }

/* Main */
main { display: flex; flex-direction: column; min-height: calc(100% - 66px); }
.view { display: none; flex: 1; }
.view.on { display: flex; }

/* Home: the picker */
#home { flex-direction: column; padding: 28px 20px 20px; max-width: 1100px; margin: 0 auto; width: 100%; gap: 22px; }
.intro { display: flex; gap: 20px; align-items: center; }
.intro img { width: 110px; height: 110px; }
.intro p { margin: 6px 0 0; max-width: 52ch; color: var(--fg-soft); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tile {
  text-align: left; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
  padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--ink);
}
.tile .art { height: 120px; display: block; width: 100%; }
.tile .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.tile .name { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 15px; }
.tile .desc { font-size: 13px; color: var(--ink-soft); }
.tile:hover:not(:disabled) { border-color: var(--ink); }
.session { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.session input { font-family: var(--futura); font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.virtual { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--fg-soft); }

/* App stage */
#stage { position: relative; flex-direction: row; }
#stage .canvas-wrap { position: relative; flex: 1; min-height: 420px; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage .panel { width: 0; overflow: auto; border-left: 1px solid var(--line); background: var(--bg); }
#stage .panel.on { width: 330px; padding: 16px; }
.appbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; z-index: 2; align-items: center; }
.appbar button { background: rgba(250, 249, 245, 0.92); }
.appbar .title { padding: 6px 12px; border-radius: 999px; background: rgba(250, 249, 245, 0.86); color: var(--ink); }
.overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column;
  gap: 10px; text-align: center; pointer-events: none; z-index: 1;
}
.overlay.on { display: flex; }
.overlay img { width: 120px; height: 120px; }
.overlay .headline { font-size: 26px; }
.overlay p { margin: 0; font-size: 16px; }

/* Panel cards (theremin, wave drawing) */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; background: var(--card); color: var(--ink); }
.card h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.card .row { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.card .row label { min-width: 70px; }
.card .note { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }
.card.lead { border-color: var(--ink); }

footer { padding: 10px 20px; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--fg-soft); }
footer .badge { height: 22px; }
footer .spacer { flex: 1; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper);
  padding: 8px 16px 8px 8px; border-radius: 999px; display: flex; align-items: center; gap: 10px; opacity: 0;
  transition: opacity 0.3s; pointer-events: none; z-index: 10; font-size: 14px;
}
.toast.on { opacity: 1; }
.toast img { width: 34px; height: 34px; }

@media (max-width: 720px) {
  #stage { flex-direction: column; }
  #stage .panel.on { width: 100%; border-left: 0; border-top: 1px solid var(--line); }
  .intro img { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}