/* Which movie are we in? Ported from prototypes/002-dark-theater/mock.html. */

/* ---- Fonts, self-hosted so no voter's IP goes to a font CDN ----
   Inter and Libre Baskerville, latin subset, woff2, from Google Fonts on
   2026-10-13. Both under the SIL Open Font License 1.1; the licenses sit beside
   the files in /fonts/. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/fonts/inter-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/libre-baskerville-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Brand layer (LMF) ---- */
:root {
  --bg: #08080A; --bg-2: #0F0F12; --bg-3: #16161B;
  --ink: #E8E8EC; --ink-2: #9A9AA3; --ink-3: #5E5E66;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --accent: #0A8B9C; --accent-2: #5DC0CD; --callout: #534AB7; --callout-2: #6A61D0;
  --warn: #E6A33A;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --display: "Libre Baskerville", Georgia, serif;

  /* ---- The spectrum: a wheel. ±4 closes it between +3 and −3. ---- */
  --l-3: #D8432A;   /* ember       war / subjugation */
  --l-2: #E2702F;   /* orange      self-preservation / misalignment */
  --l-1: #E6A33A;   /* amber       isolation / monoculture */
  --l0:  #C9BC8E;   /* sand        augmentation (neutral) */
  --l1:  #5DC0CD;   /* light cyan  AI chooses good   (LMF phase 1) */
  --l2:  #1FA3B6;   /* cyan        society elevated  (LMF phase 2, lifted) */
  --l3:  #7B6FE6;   /* violet      the movie nobody makes (LMF phase 3, lifted) */
  --l4:  #B4479A;   /* red-violet  ±4 decides for us: where violet meets ember */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; font-weight: 300; line-height: 1.55;
  background-image:
    radial-gradient(900px 600px at 15% -10%, rgba(10,139,156,.22), transparent 60%),
    radial-gradient(800px 500px at 90% 0%, rgba(83,74,183,.18), transparent 60%);
  background-repeat: no-repeat;
}
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--bg-3); color: var(--ink); padding: 8px 14px; border-radius: 6px; z-index: 10; }
.skip:focus { top: 12px; }

.page { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 60px; }
.label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 10px; }
.label::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--accent); margin: 0 10px 4px 0; vertical-align: middle; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -.01em; }

/* ---- Mast ---- */
.mast { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.lockup { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-bottom: 22px; min-height: 1.2em; }
.lockup .presenter { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.lockup .presenter b { color: var(--accent-2); font-weight: 600; }
.lockup .joint { font-size: .74rem; color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--line-2); }
h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: .98; }
h1 em { font-style: italic; color: var(--accent-2); }
.event-chip { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: var(--ink); }
.event-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.deck { font-family: var(--display); font-size: 1.15rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.deck strong { color: var(--ink); font-weight: 400; }
.notice { margin: 20px 0 0; padding: 12px 16px; border: 1px solid var(--warn); border-radius: 10px; background: rgba(230,163,58,.08); color: var(--ink); font-size: .88rem; }

/* ---- Story and ring ---- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line); }
.wheel { position: relative; width: min(470px, 100%); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.wheel svg { width: 100%; height: 100%; display: block; overflow: visible; }
.node text { fill: var(--ink); font-size: 11px; font-weight: 300; font-family: var(--sans); }
.node text.n { font-size: 15px; font-weight: 600; }
.node text.f { font-size: 12px; font-weight: 500; fill: var(--ink); }
.node text.lv { font-size: 10px; font-weight: 300; fill: var(--ink-2); }
.wheel.compact .node text { font-size: 16px; font-weight: 400; }
.wheel.compact .node text.n { font-size: 24px; font-weight: 600; }
.center { position: absolute; inset: 30%; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; }
.wheel.compact .center { inset: 33%; }
.center p { margin: 0; font-family: var(--display); font-size: clamp(.72rem, 3.6cqi, 1.02rem); color: var(--ink-2); line-height: 1.35; }
.center b { display: block; color: var(--ink); font-weight: 400; font-size: 1.1em; margin-bottom: .35em; }
.story h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; margin-bottom: 18px; }
.story p { color: var(--ink-2); margin: 0 0 16px; max-width: 52ch; }
.story .thesis { font-family: var(--display); font-size: 1.15rem; color: var(--ink); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 16px 0; margin: 22px 0; max-width: none; }
.thesis em { color: var(--accent-2); }
.story .shadow { font-size: .92rem; }
.shadow strong { color: var(--l4); font-weight: 500; }

/* ---- Vote ---- */
.vote { padding: 56px 0; border-bottom: 1px solid var(--line); }
.vote-head, .res-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: end; margin-bottom: 28px; }
.vote h2, .results h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; }
.vote-intro, .res-copy { color: var(--ink-2); margin: 0; }
.vote-intro strong { color: var(--ink); font-weight: 500; }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lvl { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 18px 16px 16px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; min-height: 132px; display: flex; flex-direction: column; gap: 6px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.lvl::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.lvl:hover { transform: translateY(-2px); border-color: var(--line-2); }
.lvl[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 32px -8px var(--c); }
.lvl .n { font-family: var(--display); font-size: 1.5rem; color: var(--c); line-height: 1; }
.lvl .t { display: flex; flex-direction: column; gap: 4px; }
.lvl .lv { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; }
.lvl .fl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5em; row-gap: 0; }
.lvl .f { font-family: var(--display); font-size: 1.2rem; color: var(--ink); line-height: 1.15; }
.lvl .r { font-size: .74rem; color: var(--ink-2); line-height: 1.3; }
.lvl .yours { display: none; margin-top: 2px; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.lvl.voted .yours { display: block; }
.lvl.join { background: linear-gradient(135deg, rgba(123,111,230,.10), rgba(216,67,42,.10)), var(--bg-2); }
.vote-check { margin-top: 20px; max-width: 400px; }
.vote-check:empty { display: none; }
.vote-foot { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.btn { background: var(--callout); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; transition: background .15s; }
.btn:hover:not(:disabled) { background: var(--callout-2); }
.btn:disabled { background: var(--bg-3); color: var(--ink-2); cursor: default; }
.vote-foot small { color: var(--ink-2); font-size: .82rem; }
.status { min-height: 1.5em; margin: 14px 0 0; font-size: .88rem; color: var(--ink-2); }
.status.ok { color: var(--accent-2); }
.status.err { color: #F08A73; }

/* ---- Results ---- */
.results { padding: 56px 0; }
.charts { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; }
.charts.single { grid-template-columns: minmax(0, 640px); }
.chart { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.chart-head h3 { font-size: 1.15rem; }
.meta { font-size: .78rem; color: var(--ink-2); text-align: right; }
.meta b { color: var(--ink); font-weight: 500; }
.live { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 240px 1fr 48px; gap: 12px; align-items: center; padding: 5px 0; }
.row.join { border-top: 1px dashed var(--line-2); margin-top: 6px; padding-top: 11px; }
/* Film over level name, so neither truncates. The number spans both lines. */
.row .k { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: baseline; }
.row .k b { font-family: var(--display); font-weight: 400; color: var(--c); font-size: 1.05rem; min-width: 26px; grid-row: 1 / span 2; align-self: center; }
.row .k span { font-size: .8rem; color: var(--ink); line-height: 1.2; }
.row .k .lv { font-size: .72rem; color: var(--ink-2); font-weight: 300; }
.row .track { height: 22px; }
.row .bar { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, transparent), var(--c)); box-shadow: 0 0 24px -10px var(--c); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.row .bar.some { min-width: 3px; }
.row .pct { text-align: right; font-size: .9rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 14px; }
.strip i { display: block; height: 6px; border-radius: 2px; background: var(--c); opacity: .9; }
.strip-l { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 6px; font-size: .68rem; color: var(--ink-2); }
.strip-l span { text-align: center; }
.wrap-note { margin: 14px 0 0; font-size: .78rem; color: var(--ink-2); }
.wrap-note b { font-weight: 500; }
.t-l4 { color: var(--l4); } .t-l3 { color: var(--l3); } .t-l-3 { color: var(--l-3); }
.tally-status { margin: 14px 0 0; font-size: .82rem; color: #F08A73; }

/* ---- Panel mode (QR card hidden outside it) ---- */
.present-panel { display: none; }
.keys { color: var(--ink-3); }

@media (max-width: 860px) {
  .mast, .story, .vote-head, .res-head, .charts { grid-template-columns: 1fr; }
  .mast { gap: 28px; }
  .ladder { grid-template-columns: 1fr; }
  .lvl { min-height: 0; flex-direction: row; align-items: baseline; gap: 12px; padding: 14px 16px; }
  .lvl:hover { transform: none; }
  .lvl::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .lvl .n { flex: 0 0 40px; }
  .lvl .t { flex: 1 1 auto; gap: 2px; }
  .lvl .f { font-size: 1.1rem; }
  .row { grid-template-columns: 180px 1fr 44px; }
}
@media (max-width: 520px) {
  .page { width: calc(100% - 32px); padding-top: 28px; }
  .lockup .joint { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .vote-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn { border-radius: 26px; padding: 14px 20px; }
  .vote-foot small { text-align: center; }
  .chart { padding: 18px 16px 14px; }
  .chart-head { flex-direction: column; gap: 4px; }
  .meta { text-align: left; }
  /* Labels get their own line so nothing truncates. */
  .row { grid-template-columns: 1fr 44px; grid-template-areas: "k k" "track pct"; row-gap: 4px; padding: 5px 0; }
  .row .k { grid-area: k; }
  /* Titles keep the full width; a reading that does not fit wraps under its title. */
  .lvl .t { flex: 1 1 0; min-width: 0; }
  .row .track { grid-area: track; height: 16px; }
  .row .pct { grid-area: pct; }
}
@media (prefers-reduced-motion: reduce) {
  .lvl, .row .bar, .btn { transition: none; }
  .live i { animation: none; }
}

/* ---- Panel mode: ?present=1. Sized in vh so 1920×1080 and 1366×768 fit without scrolling. ---- */
body.present { overflow: hidden; }
body.present .story, body.present .vote, body.present .res-head, body.present .lockup .joint,
body.present .deck, body.present .skip { display: none; }
body.present .page {
  width: calc(100% - 7vh); max-width: none; height: 100vh; padding: 3.5vh 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  column-gap: 4vh; row-gap: 3vh;
}
body.present .mast { grid-column: 1; grid-row: 1; display: block; padding: 0; border: 0; }
body.present .lockup { margin-bottom: 1.4vh; }
body.present .lockup .presenter { font-size: 1.5vh; }
body.present h1 { font-size: 7.4vh; line-height: 1; }
body.present h1 br { display: none; }
body.present .event-chip { margin-top: 1.8vh; font-size: 1.9vh; padding: .6vh 1.6vh; }
body.present .notice { font-size: 1.7vh; margin-top: 1.4vh; }
body.present .results { grid-column: 1; grid-row: 2; padding: 0; min-height: 0; }
body.present .charts { height: 100%; gap: 3vh; grid-template-columns: 1fr 1fr; }
body.present .charts.single { grid-template-columns: minmax(0, 1fr); }
body.present .chart { display: flex; flex-direction: column; padding: 2.6vh 3vh 2.2vh; min-height: 0; }
body.present .chart-head { margin-bottom: 1.6vh; }
body.present .chart-head h3 { font-size: 3vh; }
body.present .meta, body.present .live { font-size: 1.8vh; }
body.present .live i { width: 1.2vh; height: 1.2vh; }
body.present .rows { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
/* Two titles per row: the label column is a little wider and the type a little tighter than with
   one, so the long pairs take at most two lines and both charts still fit at 1366×768. */
body.present .row { grid-template-columns: 34vh 1fr 7vh; gap: 1.6vh; padding: .3vh 0; }
body.present .row.join { margin-top: .8vh; padding-top: 1.2vh; }
body.present .row .k { column-gap: 1.4vh; row-gap: .1vh; }
body.present .row .k b { font-size: 3vh; min-width: 4.4vh; }
body.present .row .k span { font-size: 1.8vh; line-height: 1.15; }
body.present .row .k .lv { font-size: 1.4vh; }
body.present .row .track { height: 3.6vh; }
body.present .row .pct { font-size: 2.6vh; }
body.present .strip { margin-top: 1.4vh; }
body.present .strip i { height: .8vh; }
body.present .strip-l { font-size: 1.4vh; margin-top: .6vh; }
body.present .wrap-note { font-size: 1.5vh; margin-top: 1.2vh; }
body.present .present-panel {
  grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2vh; width: 34vh; text-align: center;
}
.qr { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 1.4vh; padding: 1.6vh; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr-cap { margin: 0; font-size: 2vh; color: var(--ink-2); line-height: 1.4; }
.qr-cap b { display: block; font-size: 2.4vh; color: var(--ink); font-weight: 500; word-break: break-all; }
body.present .keys { font-size: 1.3vh; margin: 0; }
.mast .notice { grid-column: 1 / -1; }

/* ---- Panel mode reveal (owner decision 2026-10-12) ----
   Before reveal: the room's level names and a large live total, no bars, no
   percentages; the global panel is hidden when there is a room panel. */
.big-total { display: none; }
body.present:not(.revealed) .big-total {
  display: block; margin: 0 0 2.4vh; font-family: var(--display); font-size: 4.2vh; color: var(--ink-2); line-height: 1.1;
}
body.present:not(.revealed) .big-total b { font-weight: 400; color: var(--ink); font-size: 1.5em; font-variant-numeric: tabular-nums; }
body.present:not(.revealed) .row .track,
body.present:not(.revealed) .row .pct { visibility: hidden; }
body.present:not(.revealed) .strip,
body.present:not(.revealed) .strip-l,
body.present:not(.revealed) .wrap-note { display: none; }
body.present:not(.revealed) #room-chart:not([hidden]) ~ #global-chart { display: none; }
body.present:not(.revealed) .charts { grid-template-columns: minmax(0, 1fr); }
body.present .results { display: flex; flex-direction: column; }
body.present .charts { flex: 1; min-height: 0; }