/* ============================================================================
   HOLO BUILD 07 — Lodgecast interior, "projection bay" (Claude, 2026-09-26)

   ONE stylesheet on top of the production style.css. It replaces Codex's five
   stacked layers (preview / round2 / round3 / round4 / projection), which kept
   overriding each other — including the theater darkness, which had drifted
   from the live 85% to ~50%.

   Like Codex's layers it is loaded with media="not all" and switched on only
   after the login gate closes, so the approved login + status windows are
   never touched.

   Colour by MEANING (shared with Command Center's redesign):
     green  --h-green   interface, names, "live"
     blue   --h-holo    ONLY projected things: the logo hologram, poster edges
     yellow --h-digit   the digital rating numbers
     red    (existing)  woofs and penalties only
   Patrick-approved and kept: white quote text, dark glowing nav buttons,
   glowing bones, digital numbers, illuminated speaker names, MML labels.
   Rejected and NOT here: light cones / visible emitters, logo wipes, poster
   glare, whole-screen flicker after arrival, rolling light bands over pages,
   green cast on artwork, jittery letters.
   ========================================================================= */

:root {
  --h-green: #7dff9b;
  --h-green-rgb: 125, 255, 155;
  --h-holo: #8fe3ff;
  --h-holo-rgb: 143, 227, 255;
  --h-digit: #ffe9a8;
  --h-text: #f4f8f5;
  --h-text-2: #bccbc3;
  --h-text-3: #93a39b;            /* readable on purpose — dim grey is a bug */
  /* Rev 5 (Patrick, 2026-09-27 evening): BLUE is the default window colour,
     one flat dark blue for every pane; a lighter blue-grey only for buttons. */
  --h-glass: rgba(5, 11, 22, 0.86);        /* pane: the dark end */
  --h-glass-2: rgba(9, 18, 34, 0.90);      /* pane hover */
  --h-btn: rgba(15, 26, 44, 0.90);         /* buttons: the lighter blue-grey end */
  --h-pane-line: rgba(var(--h-holo-rgb), 0.22);
  --h-pane-line-2: rgba(var(--h-holo-rgb), 0.40);
  --h-line: rgba(var(--h-green-rgb), 0.17);
  --h-line-2: rgba(var(--h-green-rgb), 0.34);
  --h-radius: 10px;
  --h-mono: "IBM Plex Mono", ui-monospace, monospace;
  --h-digital: "VT323", "IBM Plex Mono", monospace;
  /* Rev 2: rating numbers get their own font, switchable in Appearance.
     VT323 read as too chunky (Patrick, 2026-09-27); Share Tech is the default. */
  --h-num: "Share Tech Mono", "IBM Plex Mono", monospace;
  --h-num-scale: 1;
  --h-num-weight: 400;
}
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ShareTechMono-400.woff2") format("woff2"); }
@font-face { font-family: "Oxanium"; font-weight: 300; font-display: swap; src: url("../fonts/Oxanium-300.woff") format("woff"); }
/* Rev 6 (Patrick, 2026-09-30): "I'm not loving this white text... it's on the
   quotes, a lot of cards, the Lodge Lore page." The Quote type switch now offers
   the live site's own text (system sans, italic, as lodgecast.com renders it)
   and five proportional faces beside the two monospace ones. Self-hosted latin
   subsets from Google Fonts; the 400/500 files are the same variable file. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400 500; font-style: normal; font-display: swap; src: url("../fonts/IBMPlexSans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/IBMPlexSans-400i.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 400 500; font-style: normal; font-display: swap; src: url("../fonts/Exo2-400.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/Exo2-400i.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/TitilliumWeb-400.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/TitilliumWeb-600.woff2") format("woff2"); }
@font-face { font-family: "Titillium Web"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/TitilliumWeb-400i.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400 500; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Rajdhani-500.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Rajdhani-600.woff2") format("woff2"); }

/* Quote-type options. Each sets the face, weight, size (desktop / phone),
   line-height and slant; section 7 reads these. "mono" is the current look. */
/* Titillium Web is the default since 2026-09-30 (Patrick: "I like Titillium Web. Make that the default."). */
body, body[data-quote-type="titillium"] { --h-quote-font: "Titillium Web", sans-serif; --h-quote-weight: 400; --h-quote-size: 18px; --h-quote-size-m: 17px; --h-quote-lh: 1.6; --h-quote-style: normal; }
body[data-quote-type="mono"]       { --h-quote-font: var(--h-mono); --h-quote-weight: 500; --h-quote-size: 17px; --h-quote-size-m: 16px; --h-quote-lh: 1.7; }
body[data-quote-type="terminal"]   { --h-quote-font: var(--h-digital); --h-quote-weight: 400; --h-quote-size: 23px; --h-quote-size-m: 21px; --h-quote-lh: 1.4; }
/* The live site: -apple-system stack, italic, 1rem/1.6 (public/css/style.css .quote-text) */
body[data-quote-type="live"]       { --h-quote-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --h-quote-weight: 400; --h-quote-size: 16px; --h-quote-size-m: 16px; --h-quote-lh: 1.6; --h-quote-style: italic; }
body[data-quote-type="plex-sans"]  { --h-quote-font: "IBM Plex Sans", sans-serif; --h-quote-weight: 400; --h-quote-size: 17px; --h-quote-size-m: 16px; --h-quote-lh: 1.65; }
body[data-quote-type="exo"]        { --h-quote-font: "Exo 2", sans-serif; --h-quote-weight: 400; --h-quote-size: 17px; --h-quote-size-m: 16px; --h-quote-lh: 1.65; }
body[data-quote-type="grotesk"]    { --h-quote-font: "Space Grotesk", sans-serif; --h-quote-weight: 400; --h-quote-size: 17px; --h-quote-size-m: 16px; --h-quote-lh: 1.65; }
body[data-quote-type="rajdhani"]   { --h-quote-font: "Rajdhani", sans-serif; --h-quote-weight: 500; --h-quote-size: 19px; --h-quote-size-m: 18px; --h-quote-lh: 1.55; }
body[data-num-font="oxanium"] { --h-num: "Oxanium", "IBM Plex Mono", sans-serif; --h-num-weight: 300; --h-num-scale: 1.02; }
body[data-num-font="vt323"]   { --h-num: "VT323", "IBM Plex Mono", monospace; --h-num-scale: 1.38; }

/* ---------------------------------------------------------------------------
   1. THE THEATER — lights down to exactly the live site's darkness.
   style.css already sets body::after to #0a0e14 @ 0.85; we only make sure
   nothing lightens it, and drop the full-screen backdrop blur (Safari memory
   rule: no full-screen blur/filter layers).
   ------------------------------------------------------------------------ */
body::before {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  /* Rev 3 (Patrick, 2026-09-27 evening): the theater is a plain projected
     picture again. Rev 2's scanlines and cool sheen are gone: "lose the scan
     lines, let me see it without trying to make it look like a hologram."
     The flicker (section 8) is unchanged. */
  background: url('../images/movie-mural-bg.png') center / cover no-repeat;
}
@media (orientation: portrait) {
  body::before {
    background: url('../images/movie-mural-bg-portrait.png') center / cover no-repeat;
  }
}
body::after  { background: rgba(10, 14, 20, 1); opacity: 0.85; }
body.theater-bright::after { opacity: 0.20; }

body {
  font-family: var(--h-mono);
  color: var(--h-text);
}

/* ---------------------------------------------------------------------------
   2. GLASS PANES — every card/panel shares one treatment.
   Background layers, top to bottom: a light spill along the top edge, fine
   static phosphor scanlines, then the dark glass. No backdrop-filter.
   ------------------------------------------------------------------------ */
/* Rev 5: ONE pane look, every tab, every page (Patrick: "you can't be using a
   different aesthetic on the different tabs"). Flat dark blue, a blue hairline,
   very fine blue scan lines, no gradient ("too much of a gradient"). The old
   Highlights cards (.segment-card) were never in this list, which is why they
   looked like the old site. */
:is(.card, .featured-quote, .rating-card, .quote-card, .moment-card, .segment-card,
    .music-cue-card, .listen-section, .hero-bone-rating, .detail-header-with-poster,
    .settle-the-score, .lodge101-term-card, .oscar-list-card, .highlight-card,
    .ep-nav-row, .person-rating-row, .search-results, .link-card, .profile-stat,
    /* 2026-10-02: the Salad tab, Live Rewrites/Recasts and Oscar picks were
       still wearing the old site's frames (Patrick: "it's off-brand") */
    .dragon-section, .crouton-card, .salad-char-card, .salad-set-card,
    .live-rewrite-card, .live-recast-card, .prediction-card, .stat-card) {
  background:
    repeating-linear-gradient(0deg, rgba(var(--h-holo-rgb), 0.03) 0 1px, transparent 1px 3px),
    var(--h-glass);
  border: 1px solid var(--h-pane-line);
  border-radius: var(--h-radius);
  box-shadow:
    inset 0 1px 0 rgba(190, 236, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(var(--h-holo-rgb), 0.05);
}
.card.clickable:hover {
  transform: translateY(-1px);
  border-color: var(--h-pane-line-2);
  background:
    repeating-linear-gradient(0deg, rgba(var(--h-holo-rgb), 0.03) 0 1px, transparent 1px 3px),
    var(--h-glass-2);
  box-shadow:
    inset 0 1px 0 rgba(190, 236, 255, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 26px rgba(var(--h-holo-rgb), 0.12);
}
.ep-nav-row { padding: 10px 14px; }
/* Rev 2: hovering a person-page movie row or a Links card kept falling back
   to the old flat grey (style.css :hover out-ranks the glass). Same hover as
   the episode cards instead. */
:is(.person-rating-row, .link-card):hover {
  background:
    repeating-linear-gradient(0deg, rgba(var(--h-holo-rgb), 0.03) 0 1px, transparent 1px 3px),
    var(--h-glass-2);
  border-color: var(--h-pane-line-2);
  box-shadow:
    inset 0 1px 0 rgba(190, 236, 255, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 26px rgba(var(--h-holo-rgb), 0.12);
}
.person-rating-row { transition: border-color .15s, box-shadow .15s, background .15s; }
.person-rating-movie { color: var(--h-text); }
.person-rating-row:hover .person-rating-movie { color: #ffffff; text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.35); }
.link-card { color: var(--h-text); font-family: var(--h-mono); }
.link-title { font-family: var(--h-mono); font-weight: 500; letter-spacing: 0.01em; }
.link-card:hover .link-title { color: var(--h-green); text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.45); }
.link-arrow { color: rgba(var(--h-green-rgb), 0.55); }
.link-card:hover .link-arrow { color: var(--h-green); }
.person-rating-row { margin-bottom: 8px; }

/* ---------------------------------------------------------------------------
   3. INSTRUMENT LABELS — Codex's strips, restyled as Command Center pane
   titles. Only on the big feature panes (see holo.js); repeated cards
   (ratings, quotes, episodes) no longer carry five identical headers.
   ------------------------------------------------------------------------ */
.projection-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 14px;
  font: 500 11px/1 var(--h-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--h-green-rgb), 0.72);
}
.projection-strip > span:first-child::before { content: "◈ "; color: var(--h-green); }
.projection-strip .projection-ticks {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 1px;
  color: rgba(var(--h-green-rgb), 0.28);
  font-size: 8px;
}
.projection-strip .projection-code { color: var(--h-digit); opacity: 0.8; font-family: var(--h-num); font-size: 13px; letter-spacing: 0.08em; }
:is(.rating-card, .quote-card, .episode-card, .moment-card) > .projection-strip { display: none; }

/* Top status rail + preview toolbar */
.preview-console {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px max(16px, calc(50% - 560px));
  background: linear-gradient(180deg, rgba(3, 9, 7, 0.96), rgba(3, 9, 7, 0.86));
  border-bottom: 1px solid var(--h-line);
  font: 500 12px/1 var(--h-mono);
  color: var(--h-text-2);
}
.preview-console .preview-mark { color: var(--h-green); letter-spacing: 0.12em; text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.4); }
.preview-console .preview-mark b { color: var(--h-digit); font-weight: 600; }
.preview-console .preview-note { color: var(--h-text-3); margin-right: auto; }
.preview-console button {
  font: 500 12px/1 var(--h-mono); color: var(--h-text-2);
  background: rgba(var(--h-green-rgb), 0.05);
  border: 1px solid var(--h-line); border-radius: 6px; padding: 8px 11px; cursor: pointer;
}
.preview-console button:hover { color: var(--h-green); border-color: var(--h-line-2); }
.preview-console button[aria-pressed="true"] { color: var(--h-green); }
.projection-controls {
  position: sticky; top: 49px; z-index: 199;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px max(16px, calc(50% - 560px));
  background: rgba(3, 9, 7, 0.95);
  border-bottom: 1px solid var(--h-line);
  font: 500 12px/1.4 var(--h-mono); color: var(--h-text-2);
}
.projection-controls[hidden] { display: none; }
.projection-controls :is(button, select) {
  font: 500 12px/1 var(--h-mono); color: var(--h-text);
  background: rgba(var(--h-green-rgb), 0.06);
  border: 1px solid var(--h-line); border-radius: 6px; padding: 8px 10px; cursor: pointer;
}
.projection-controls button[aria-pressed="true"] { color: var(--h-green); border-color: var(--h-line-2); box-shadow: 0 0 10px rgba(var(--h-green-rgb), 0.12); }
.projection-controls a { color: var(--h-holo); }
.projection-controls p { flex-basis: 100%; color: var(--h-text-3); font-size: 11px; }

.shipline {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 768px; margin: 16px auto 0; padding: 9px 14px;
  font: 500 11px/1 var(--h-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--h-green-rgb), 0.75);
  background: var(--h-glass);
  border: 1px solid var(--h-pane-line); border-radius: 8px;
  position: relative; z-index: 1;
}
.shipline-right { display: flex; align-items: center; gap: 14px; flex: none; }
/* Rev 3 (Patrick, 2026-09-27): the bouncing bars read as audio levels. The
   line now tests the link instead, edge to edge:
     middle  a ping sweeping along a dotted timebase (one transform animation)
     right   LOCK 99.x% (ticks with the code) + a 10-cell link-strength meter
   Both drop during a glitch: yellow = weak, red = lost. Nothing else moves. */
.shipline-trace {
  position: relative; flex: 1; height: 10px; margin: 0 18px; overflow: hidden;
  background:
    radial-gradient(circle at 1px 5px, rgba(var(--h-green-rgb), 0.55) 0 0.6px, transparent 1.4px) 0 0 / 6px 10px repeat-x,
    linear-gradient(180deg, transparent 4px, rgba(var(--h-green-rgb), 0.10) 4px 6px, transparent 6px);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trace-ping {
  position: absolute; top: 3px; left: 0; width: 12%; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--h-green-rgb), 0.35) 70%, var(--h-green));
  box-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.55);
  animation: holo-ping 2.8s linear infinite;
}
/* translateX in % is relative to the ping's own width: 733% = the far edge of a 12%-wide ping */
@keyframes holo-ping {
  0%   { transform: translateX(0);    opacity: 0; }
  6%   { opacity: 1; }
  84%  { transform: translateX(733%); opacity: 1; }
  90%  { transform: translateX(733%); opacity: 0; }
  100% { transform: translateX(733%); opacity: 0; }
}
.link-lock { color: rgba(var(--h-green-rgb), 0.6); white-space: nowrap; }
.link-lock b {
  font: 400 calc(13px * var(--h-num-scale))/1 var(--h-num); letter-spacing: 0.06em;
  color: var(--h-green); text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.45);
  display: inline-block; min-width: 3.2ch; text-align: right; transition: color .12s;
}
.link-meter { display: inline-flex; gap: 2px; height: 9px; align-items: stretch; }
.link-meter i { width: 3px; background: var(--h-green); box-shadow: 0 0 4px rgba(var(--h-green-rgb), 0.45); transition: opacity .12s, background .12s; }
.link-meter i:nth-child(10) { opacity: 0.18; box-shadow: none; }
.status-lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--h-green); box-shadow: 0 0 8px var(--h-green); animation: holo-lamp 2.4s ease-in-out infinite; }
@keyframes holo-lamp { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.shipline.is-receiving #link-state { color: var(--h-digit); }
/* Rev 2: ONE status line — "◈ ARCAMAX LINK  <code> ... SIGNAL STABLE ●".
   The code ticks (holo.js); the signal word flips yellow/red during a logo glitch. */
.shipline-left { display: flex; align-items: center; gap: 14px; }
.shipline-code {
  font: 400 calc(14px * var(--h-num-scale))/1 var(--h-num); letter-spacing: 0.1em;
  color: var(--h-digit); opacity: 0.75;
  text-shadow: 0 0 6px rgba(255, 224, 144, 0.35);
  min-width: 4.4ch;
}
.link-signal { color: rgba(var(--h-green-rgb), 0.6); }
#link-state { color: var(--h-green); transition: color .12s; }
.status-lamp { transition: background .12s, box-shadow .12s; }
.shipline.is-warn #link-state  { color: #ffd34d; text-shadow: 0 0 8px rgba(255, 211, 77, 0.55); }
.shipline.is-warn .status-lamp { background: #ffd34d; box-shadow: 0 0 8px #ffd34d; animation: none; }
.shipline.is-warn .link-lock b { color: #ffd34d; text-shadow: 0 0 8px rgba(255, 211, 77, 0.55); }
.shipline.is-warn .link-meter i { background: #ffd34d; box-shadow: 0 0 4px rgba(255, 211, 77, 0.5); }
.shipline.is-warn .link-meter i:nth-child(n+6) { opacity: 0.18; box-shadow: none; }
.shipline.is-warn .trace-ping { background: linear-gradient(90deg, transparent, rgba(255, 211, 77, 0.35) 70%, #ffd34d); box-shadow: 0 0 6px rgba(255, 211, 77, 0.55); }
/* LOCK booting up on arrival: the warning yellow until it reaches 100 (holo.js). */
.shipline.is-booting .status-lamp { background: #ffd34d; box-shadow: 0 0 8px #ffd34d; animation: none; }
.shipline.is-booting .link-lock b { color: #ffd34d; text-shadow: 0 0 8px rgba(255, 211, 77, 0.55); }
.shipline.is-booting .link-meter i { background: #ffd34d; box-shadow: 0 0 4px rgba(255, 211, 77, 0.5); }
.shipline.is-alert #link-state  { color: #ff5b5b; text-shadow: 0 0 8px rgba(255, 91, 91, 0.6); }
.shipline.is-alert .status-lamp { background: #ff5b5b; box-shadow: 0 0 8px #ff5b5b; animation: none; }
.shipline.is-alert .link-lock b { color: #ff5b5b; text-shadow: 0 0 8px rgba(255, 91, 91, 0.6); }
.shipline.is-alert .link-meter i { background: #ff5b5b; box-shadow: 0 0 4px rgba(255, 91, 91, 0.5); }
.shipline.is-alert .link-meter i:nth-child(n+3) { opacity: 0.18; box-shadow: none; }
.shipline.is-alert .trace-ping { background: linear-gradient(90deg, transparent, rgba(255, 91, 91, 0.35) 70%, #ff5b5b); box-shadow: 0 0 6px rgba(255, 91, 91, 0.55); animation-play-state: paused; }
/* The jolt: the line itself skips sideways for ~140 ms with a faint colour split */
.shipline.is-jolt { transform: translateX(3px); text-shadow: -1px 0 rgba(255, 70, 100, 0.45), 1px 0 rgba(var(--h-holo-rgb), 0.5); }
.shipline.is-jolt .shipline-left { transform: translateX(-5px); }

/* ---------------------------------------------------------------------------
   4. THE LOGO HOLOGRAM (Leia-on-R2 + Stark lab, full colour kept).
   Structure is built by holo.js:
     .hero-link > .holo-logo > img.hero-cover-art
                             + .holo-scan   (fine static scanlines)
                             + .holo-band   (slow interference band)
                             + .holo-slice  (glitch slice, hidden until a glitch)
   Everything is scoped to the 320px logo — nothing full-screen.
   ------------------------------------------------------------------------ */
.app-header { padding-top: 26px; }
.hero-link { position: relative; }
.holo-logo {
  position: relative;
  display: block;
  width: 320px; height: 320px;
  border-radius: 4px;              /* shows the whole M in Matt's */
}
.holo-logo .hero-cover-art {
  display: block;
  border-radius: 4px;
  transform: none;
  transition: none;
  box-shadow:
    0 0 0 1px rgba(var(--h-holo-rgb), 0.30),
    0 0 18px rgba(var(--h-holo-rgb), 0.20),
    0 0 60px rgba(var(--h-holo-rgb), 0.10),
    0 24px 50px rgba(0, 0, 0, 0.55);
}
.hero-cover-art:hover { transform: none; }
.holo-logo > :is(.holo-scan, .holo-band, .holo-slice) {
  position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
}
.holo-scan { display: none; }
.holo-band { display: none; overflow: hidden; }
.holo-slice { display: none; }

/* Hologram ON */
/* Patrick 10/04: "the logo is feeling too faded. the original feels much more
   vibrant." The fade was three things stacking: 78% opacity let the dark page
   mute every colour, brightness(1.22) washed the highlights out rather than
   richening them, and the scan layer laid a dark grid plus a pale blue tint
   over everything. Now: nearly solid, a colour boost instead of a brightness
   boost, a lighter scan grid with no tint, and the projection feel carried by
   a soft outer glow, the scan lines, the passing band and the glitch.
   (History: 9/27 0.93; 10/02 0.83 then 0.78 + brightness 1.22.) */
body.holo-logo-on .holo-logo .hero-cover-art {
  opacity: 0.95;
  filter: saturate(1.18) contrast(1.05) brightness(1.04);   /* 320px only, never full-screen */
  box-shadow:
    0 0 0 1px rgba(var(--h-holo-rgb), 0.35),
    0 0 22px rgba(var(--h-holo-rgb), 0.28),
    0 0 70px rgba(var(--h-holo-rgb), 0.14),
    0 24px 50px rgba(0, 0, 0, 0.55);
}
body.holo-logo-on .holo-scan {
  display: block;
  background: repeating-linear-gradient(180deg, rgba(0, 8, 16, 0.16) 0 1px, transparent 1px 3px);
}
body.holo-logo-on .holo-band { display: block; }
body.holo-logo-on .holo-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(180deg, transparent,
    rgba(var(--h-holo-rgb), 0.05) 35%, rgba(215, 245, 255, 0.13) 50%,
    rgba(var(--h-holo-rgb), 0.05) 65%, transparent);
  transform: translateY(-100%);
  animation: holo-band 28s linear 6s infinite;
}
@keyframes holo-band {
  0%   { transform: translateY(-100%); }
  16%  { transform: translateY(460%); }
  100% { transform: translateY(460%); }
}
/* Rev 2: the brightness "breathe" (a periodic dim) is gone — Patrick didn't
   like the dimming. The logo holds a steady 93%. */
/* The glitch moment, toggled by holo.js for ~120ms every 6–12s:
   a thin slice of the image jumps sideways and the edges pick up a faint
   red/blue fringe — only DURING the glitch, never as a permanent 3-D look. */
body.holo-logo-on .holo-logo.is-glitching .holo-slice {
  display: block;
  background: var(--holo-src) center / cover no-repeat;
  clip-path: inset(var(--slice-top, 40%) 0 var(--slice-bottom, 52%) 0);
  transform: translateX(var(--slice-x, 6px));
  opacity: 0.9;
}
body.holo-logo-on .holo-logo.is-glitching .hero-cover-art {
  animation: none;
  opacity: 0.88;                 /* the glitch still dips below the resting 0.95 */
  box-shadow:
    -2px 0 0 rgba(255, 70, 100, 0.35),
    2px 0 0 rgba(var(--h-holo-rgb), 0.45),
    0 0 18px rgba(var(--h-holo-rgb), 0.25),
    0 24px 50px rgba(0, 0, 0, 0.55);
}

/* Arrival: the hologram flickers on (opacity only — no wipe, no reveal). */
body.holo-logo-on.intro-reveal .app-header { animation: none; }
body.holo-logo-on.intro-reveal .holo-logo { animation: holo-materialize 1.1s steps(1) both; }
body.holo-logo-on .holo-logo.is-materializing { animation: holo-materialize 1.1s steps(1) both; }
@keyframes holo-materialize {
  0% { opacity: 0; } 10% { opacity: .55; } 16% { opacity: .08; } 26% { opacity: .7; }
  33% { opacity: .3; } 45% { opacity: .9; } 52% { opacity: .62; } 64% { opacity: 1; }
  100% { opacity: 1; }
}

/* Readout under the hologram */
.hero-instruments {
  display: flex; justify-content: center; gap: 18px;
  margin: 10px auto 0;
  font: 500 10.5px/1 var(--h-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(var(--h-holo-rgb), 0.62);
  position: relative; z-index: 1;
}
.hero-instruments .is-sync { color: var(--h-digit); }

/* ---------------------------------------------------------------------------
   5. POSTERS as projections — full colour, full opacity (they are content),
   a thin hologram edge and very fine scanlines. Toggle: holo-posters-on.
   ------------------------------------------------------------------------ */
.art-projection { position: relative; display: inline-block; line-height: 0; border-radius: 6px; }
body.holo-posters-on .art-projection > img {
  box-shadow: 0 0 0 1px rgba(var(--h-holo-rgb), 0.28), 0 0 14px rgba(var(--h-holo-rgb), 0.12);
}
body.holo-posters-on .art-projection::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 8, 16, 0.13) 0 1px, transparent 1px 2px);
}

/* ---------------------------------------------------------------------------
   6. CONTROLS — the approved dark, glowing buttons (nav, tabs, filters, CTAs).
   ------------------------------------------------------------------------ */
.tab-nav { gap: 8px; }
.nav-bar { padding-top: 12px; }
.nav-bar.is-stuck, .nav-bar { background: transparent; }
:is(.tab, .hero-cta, .movie-tab-btn, .person-tab-btn, .oscar-tab-btn, .ep-filter-btn, .ep-sort-btn,
    .ep-stat-btn, .sort-btn, .seg-filter-btn, .person-oscar-year-btn, .detail-back, .ep-nav-link,
    .load-more-preview, .preview-player-button, .settle-modifier-toggle, .bone-picker-btn,
    .music-player-toggle, .music-link-spotify-btn, .listen-link) {
  font-family: var(--h-mono);
  font-weight: 500;
  color: rgba(var(--h-green-rgb), 0.88);
  /* Rev 5: buttons sit on the LIGHTER blue-grey (the old site's button tone); text and edge stay green */
  background: linear-gradient(180deg, rgba(var(--h-holo-rgb), 0.07), rgba(var(--h-holo-rgb), 0.0)), var(--h-btn);
  border: 1px solid rgba(var(--h-green-rgb), 0.36);
  border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(var(--h-green-rgb), 0.04), 0 0 9px rgba(var(--h-green-rgb), 0.07);
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.35);
  transition: color .15s, border-color .15s, box-shadow .15s, background .15s;
}
:is(.tab, .hero-cta, .movie-tab-btn, .person-tab-btn, .oscar-tab-btn, .ep-filter-btn, .ep-sort-btn,
    .ep-stat-btn, .sort-btn, .seg-filter-btn, .person-oscar-year-btn, .detail-back, .ep-nav-link,
    .load-more-preview, .preview-player-button, .settle-modifier-toggle, .bone-picker-btn,
    .music-player-toggle, .music-link-spotify-btn, .listen-link):hover {
  color: var(--h-green);
  border-color: rgba(var(--h-green-rgb), 0.6);
  background: linear-gradient(180deg, rgba(var(--h-green-rgb), 0.12), rgba(var(--h-green-rgb), 0.02)), var(--h-btn);
}
:is(.tab, .movie-tab-btn, .person-tab-btn, .oscar-tab-btn, .ep-filter-btn, .ep-sort-btn,
    .ep-stat-btn, .sort-btn, .seg-filter-btn, .person-oscar-year-btn, .bone-picker-btn,
    .music-player-toggle):is(.active, .active-year, .music-player-active, [aria-pressed="true"]) {
  color: #effff3;
  background: linear-gradient(180deg, rgba(var(--h-green-rgb), 0.20), rgba(var(--h-green-rgb), 0.06)), rgba(12, 28, 40, 0.92);
  border-color: rgba(var(--h-green-rgb), 0.75);
  box-shadow: inset 0 0 18px rgba(var(--h-green-rgb), 0.16), 0 0 14px rgba(var(--h-green-rgb), 0.26), inset 0 -2px 0 rgba(var(--h-green-rgb), 0.6);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.7);
}
.tab { max-width: none; font-size: 15px; min-height: 44px; letter-spacing: 0.02em; }
.hero-cta { min-height: 46px; font-size: 14px; }
.hero-cta .hero-cta-icon { text-shadow: none; }
.movie-tab-btn { min-height: 44px; }
.btn-emoji, .ep-stat-icon { text-shadow: none; }

/* Search */
#search-input {
  font: 500 15px/1.2 var(--h-mono);
  color: var(--h-text);
  background: rgba(3, 10, 8, 0.86);
  border: 1px solid rgba(var(--h-green-rgb), 0.3);
  border-radius: 8px;
  box-shadow: inset 0 0 14px rgba(var(--h-green-rgb), 0.05);
}
#search-input::placeholder { color: var(--h-text-3); }
#search-input:focus { outline: none; border-color: rgba(var(--h-green-rgb), 0.7); box-shadow: inset 0 0 14px rgba(var(--h-green-rgb), 0.08), 0 0 12px rgba(var(--h-green-rgb), 0.2); }

/* ---------------------------------------------------------------------------
   7. TYPE — white quotes (approved), glowing names, digital numbers.
   ------------------------------------------------------------------------ */
:is(.quote-text, .rating-card-reasoning, .featured-quote .quote-text, .speaker-line,
    .moment-text, .oscar-commentary, .oscar-list-note, .lodge101-term-def) {
  font: var(--h-quote-weight) var(--h-quote-size)/var(--h-quote-lh) var(--h-quote-font);
  color: #ffffff;
  font-style: var(--h-quote-style);
  letter-spacing: 0;
  text-shadow: none;
}
.featured-quote .quote-text { font-size: calc(var(--h-quote-size) + 1px); }
/* Rev 6 (Patrick, 2026-09-30): the quote above the bones on a movie page.
   "I don't like the look of this quote. Part of it is the font... show it to
   me without that faint blue background behind it... make the font the
   Titillium Web, the one we're using for the regular quotes." So: the quote
   face and size, upright, no pane, and the speaker on its own line in the
   name style (no dash; site copy carries no em dashes). */
.bones-phrase {
  /* Patrick, 4:50 PM: "make it bigger, at least double or triple its current
     size." Was 19px; now 2.3x on desktop, 1.6x on the phone (section 10). */
  font: var(--h-quote-weight) 44px/1.22 var(--h-quote-font);
  font-style: var(--h-quote-style);
  color: #ffffff;
  background: none;
  border-radius: 0;
  padding: 6px 8px 0;
  margin-bottom: 22px;
  text-wrap: balance;
}
.bones-phrase-attr {
  display: block;
  margin-top: 12px;
  font: 600 15px/1.4 var(--h-mono);
  letter-spacing: 0.06em;
  color: var(--h-green);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.55), 0 0 18px rgba(var(--h-green-rgb), 0.2);
}
:is(.quote-context, .moment-context, .rating-card-context, .detail-meta-line, .episode-card-meta,
    .person-card-role, .detail-subtitle, .listen-also, .settle-form-prompt, .music-cue-meta) {
  font-family: var(--h-mono);
  color: var(--h-text-2);
}
:is(.quote-speaker, .rating-card-person, .person-card-name, .music-cue-title, .lodge101-term-name, .oscar-list-person) {
  font-family: var(--h-mono);
  font-weight: 600;
  color: var(--h-green);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.55), 0 0 18px rgba(var(--h-green-rgb), 0.2);
}
:is(.rating-card-role, .featured-quote-label, .section-header, .listen-label, .hero-bone-label,
    .ep-stat-label, .ep-bones-label, .movie-card-label, .profile-stat-label, .music-subsection-header) {
  font-family: var(--h-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--h-green-rgb), 0.7);
}
.featured-quote-label { color: var(--h-holo); letter-spacing: 0.2em; font-size: 12px; }
/* Rev 2: the stat-button labels had 3x the live site's letter-spacing, which
   pushed Bathroom Bloopers onto a third row in Patrick's Safari. Back to the
   live ~0.5px so both rows keep real headroom. */
.ep-stat-label { letter-spacing: 0.04em; }
.ep-stat-btn { padding: 8px 9px; }
:is(.detail-title, .lodge101-title, .episode-card-title, .ep-title-name, .person-card-name, .oscar-movie-title) {
  font-family: var(--h-mono);
}
.detail-title {
  color: var(--h-text);
  text-shadow: 0 0 10px rgba(var(--h-green-rgb), 0.35), 0 0 26px rgba(var(--h-green-rgb), 0.12);
  letter-spacing: -0.01em;
}
.episode-card-title { color: var(--h-text); }
.ep-title-prefix { color: var(--h-text-3); }

/* Digital numbers — VT323, warm phosphor */
:is(.hero-bone-number, .rating-card-score, .movie-card-avg, .profile-stat-value, .ep-stat-value, .oscar-rank) {
  font-family: var(--h-num);
  font-weight: var(--h-num-weight);
  color: var(--h-digit);
  text-shadow: 0 0 6px rgba(255, 224, 144, 0.55), 0 0 18px rgba(255, 216, 113, 0.22);
}
.hero-bone-number { font-size: calc(62px * var(--h-num-scale)); line-height: 1; letter-spacing: 0.02em; }
.rating-card-score { font-size: calc(19px * var(--h-num-scale)); gap: 8px; }
.movie-card-avg { font-size: calc(19px * var(--h-num-scale)); }
.profile-stat-value { font-size: calc(32px * var(--h-num-scale)); line-height: 1; }
.ep-stat-value { font-size: calc(15px * var(--h-num-scale)); }
/* "3 ratings" under the big number: was thin grey 12px, now readable */
.hero-bone-label {
  font: 600 13px/1.2 var(--h-mono); letter-spacing: 0.12em;
  color: rgba(var(--h-green-rgb), 0.88);
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.3);
  margin-top: 6px;
}

/* Bones — filled glow, empty outlined */
.bone-filled svg { filter: drop-shadow(0 0 3px rgba(171, 255, 199, 0.6)); }
.hero-bone-rating .bone-filled svg { filter: drop-shadow(0 0 4px rgba(174, 255, 190, 0.7)) drop-shadow(0 0 9px rgba(135, 255, 180, 0.35)); }
.bone-empty { opacity: 1; }
.bone-empty svg { fill: transparent; stroke: #8bb19c; stroke-width: 0.8; opacity: 0.55; }

.settle-first-badge {
  font: 500 12px/1.3 var(--h-mono); letter-spacing: 0.08em;
  color: var(--h-holo);            /* Patrick 9/27: blue, not the yellow digit colour */
  text-shadow: 0 0 7px rgba(var(--h-holo-rgb), 0.55);
  box-shadow: 0 0 11px rgba(var(--h-holo-rgb), 0.16);
}

/* Tags stay colour-coded; just sharpen them into instrument chips */
.tag { font-family: var(--h-mono); border-radius: 5px; letter-spacing: 0.02em; }
.genre-tag { font-family: var(--h-mono); }

/* Settle the Score form */
:is(.settle-comment-input, .settle-custom-name, .settle-custom-effect) {
  font-family: var(--h-mono); color: var(--h-text);
  background: rgba(3, 8, 18, 0.9); border: 1px solid var(--h-pane-line); border-radius: 8px;
}
.settle-submit-btn {
  font: 600 15px/1 var(--h-mono); letter-spacing: 0.06em; color: #041008;
  background: linear-gradient(180deg, #9dffb5, #5fe487);
  border: none; border-radius: 8px;
  box-shadow: 0 0 18px rgba(var(--h-green-rgb), 0.35);
}
.settle-submit-btn:disabled { color: rgba(4, 16, 8, 0.6); background: rgba(var(--h-green-rgb), 0.35); box-shadow: none; }

/* Footer */
.app-footer { font-family: var(--h-mono); color: var(--h-text-3); }
.preview-footer { letter-spacing: 0.18em; color: rgba(var(--h-green-rgb), 0.55); }

/* ---------------------------------------------------------------------------
   8. PROJECTOR FLICKER on arrival (only while the bright theater shows,
   fading out as the house lights go down). A near-black layer changes
   opacity in uneven 24fps steps (max ~11%), and the image weaves by under a
   pixel like a film gate. Opacity/transform only; runs ~7 seconds, once.
   Built by holo.js as #holo-projector; toggle: holo-flicker-on.
   ------------------------------------------------------------------------ */
#holo-projector {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Patrick, 2026-09-27 late evening: "go back to showing me the flicker on the
     background the way it was before" — the rev-4 beam-shaped layer is gone;
     this is the rev-2/3 flicker exactly (flat layer, uneven 24fps steps, max 11%). */
  background: #050302;
  opacity: 0;
  display: none;
}
body.holo-projecting #holo-projector { display: block; animation: holo-flicker 0.28s steps(1) infinite; }
body.holo-projecting.holo-projector-fading #holo-projector { animation: holo-flicker 0.28s steps(1) infinite, holo-projector-out 1.5s ease forwards; }
@keyframes holo-flicker {
  0% { opacity: .04; } 8.3% { opacity: .09; } 16.6% { opacity: .02; } 25% { opacity: .07; }
  33.3% { opacity: .11; } 41.6% { opacity: .03; } 50% { opacity: .06; } 58.3% { opacity: .01; }
  66.6% { opacity: .08; } 75% { opacity: .05; } 83.3% { opacity: .10; } 91.6% { opacity: .03; }
}
@keyframes holo-projector-out { to { visibility: hidden; } }
/* Rev 2: the film-gate weave is gone. Patrick: flicker yes, wobble no. */

/* ---------------------------------------------------------------------------
   9. MOTION OFF / REDUCED MOTION / HIDDEN TAB — everything holds still.
   ------------------------------------------------------------------------ */
:is(body.fx-paused, body.fx-suspended) :is(.holo-logo .hero-cover-art, .holo-band::before, .trace-ping, .status-lamp, #holo-projector),
:is(body.fx-paused, body.fx-suspended)::before { animation: none !important; }
:is(body.fx-paused, body.fx-suspended) .holo-band { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .holo-logo .hero-cover-art, .holo-band::before, .trace-ping, .status-lamp, #holo-projector, body::before { animation: none !important; }
  .holo-band { display: none !important; }
}

/* ---------------------------------------------------------------------------
   10. PHONE
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .holo-logo { width: 240px; height: 240px; }
  .holo-logo .hero-cover-art { width: 240px; height: 240px; }
  .shipline { margin: 12px 16px 0; letter-spacing: 0.1em; }
  .hero-instruments { gap: 10px; font-size: 9.5px; letter-spacing: 0.14em; }
  .tab { font-size: 13px; padding: 10px 6px; }
  .hero-cta { font-size: 12.5px; }
  :is(.quote-text, .rating-card-reasoning, .featured-quote .quote-text, .speaker-line,
      .moment-text, .oscar-commentary, .oscar-list-note, .lodge101-term-def) { font-size: var(--h-quote-size-m); }
  .bones-phrase { font-size: 30px; line-height: 1.25; }
  .hero-bone-number { font-size: 70px; }
  .preview-console { gap: 6px; padding: 8px 12px; }
  .preview-console .preview-note { display: none; }
  .preview-console button { padding: 7px 8px; font-size: 11px; }
  .projection-controls { top: 43px; }
  /* Phone: the two ends only; the label never wraps. The word SIGNAL is
     dropped (its state word, lamp and meter stay) so the ♪ fits inside the
     line like on desktop (Patrick, 2026-10-05). */
  .shipline-trace, .link-lock { display: none; }
  .shipline { gap: 8px; letter-spacing: 0.08em; }
  .shipline-left { white-space: nowrap; gap: 8px; }
  .shipline-right { gap: 8px; }
  .link-signal { font-size: 0; letter-spacing: 0; }
  /* A fixed slot as wide as the longest state word (RECEIVING…, 10 characters)
     so the ♪ never jumps when the word changes */
  .link-signal #link-state { font-size: 11px; letter-spacing: 0.08em; display: inline-block; min-width: calc(10ch + 0.8em); text-align: right; }
}
/* Phones up to Pro Max width: no room for the 10-cell meter beside a fixed
   word slot; the lamp and the word already carry the warn/alert colours */
@media (max-width: 439px) {
  .link-meter { display: none; }
}

/* ---------------------------------------------------------------------------
   11. LAYOUT FIXES for this build's own additions
   ------------------------------------------------------------------------ */
/* Accessibility-only text: hidden until keyboard focus */
.study-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.study-skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 8px 12px; background: #031008; color: var(--h-green); border: 1px solid var(--h-line-2); border-radius: 6px; }
.study-skip:focus { top: 10px; }

/* Episode header: the instrument label spans the full width above poster + text */
.detail-header-with-poster { flex-wrap: wrap; padding: 18px; gap: 18px; }
.detail-header-with-poster > .projection-strip { flex-basis: 100%; margin: 0; }
.detail-title { font-size: 30px; font-weight: 600; line-height: 1.15; }

/* The per-card rating number carries an inline grey style — override it */
.rating-card-score .bone-display > span:not(.bone-filled):not(.bone-empty) {
  font: var(--h-num-weight) calc(19px * var(--h-num-scale))/1 var(--h-num) !important;
  color: var(--h-digit) !important;
  margin-left: 10px !important;
  text-shadow: 0 0 6px rgba(255, 224, 144, 0.55), 0 0 16px rgba(255, 216, 113, 0.2);
}
.person-rating-row .bone-display > span:not(.bone-filled):not(.bone-empty),
.episode-card .bone-display > span:not(.bone-filled):not(.bone-empty) {
  font-family: var(--h-num) !important; font-weight: var(--h-num-weight) !important; font-size: calc(15px * var(--h-num-scale)) !important; color: var(--h-digit) !important;
}
/* Rev 3: person-page rows get a bigger number than the dense episode cards (section 13) */
.person-rating-row .bone-display > span:not(.bone-filled):not(.bone-empty) { font-size: calc(19px * var(--h-num-scale)) !important; }

/* Prev / next: two buttons, no extra pane around them */
.ep-nav-row { background: none; border: none; box-shadow: none; padding: 0; gap: 10px; }
.ep-nav-link { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ep-nav-title { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--h-text); text-shadow: none; }

/* Listen block */
.listen-section { padding: 16px 18px; }
.preview-player-slot { margin: 10px 0 12px; }
.preview-player-button { width: 100%; min-height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; cursor: pointer; font-size: 14px; }
.preview-player-button small { color: var(--h-text-3); text-shadow: none; font-size: 11px; letter-spacing: 0.08em; }
.preview-player-slot iframe { width: 100%; border: 0; border-radius: 8px; margin-top: 10px; }
/* Rev 2: the Apple player is loaded from the start again. Its inside is Apple's
   (colour comes from the cover art) and cannot be restyled; colour filters were
   tried and rejected (muddy, or the art turns negative). A hairline frame only. */
.listen-section .podcast-embed {
  box-shadow: 0 0 0 1px rgba(var(--h-green-rgb), 0.30), 0 0 18px rgba(var(--h-green-rgb), 0.08);
  margin-bottom: 12px;
}
.listen-also { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }
.listen-also .listen-link { padding: 6px 12px; font-size: 13px; }

.hero-instruments { margin-bottom: 14px; }
.detail-back { padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------------------
   12. ARRIVAL ORDER + LOGO FRAME
   ------------------------------------------------------------------------ */
/* The status rail and readout arrive WITH the interface, not before it */
body.intro-active :is(.shipline, .hero-instruments, .preview-console, .projection-controls) { opacity: 0; pointer-events: none; }
body.intro-reveal .shipline         { animation: fadeInUp 0.8s ease both; }
body.intro-reveal .hero-instruments { animation: fadeInUp 0.8s ease 0.5s both; }
body.intro-reveal :is(.preview-console, .projection-controls) { animation: fadeInUp 0.6s ease 0.9s both; }

/* Stark-lab corner brackets floating just outside the projection */
body.holo-logo-on .holo-logo::before {
  content: ""; position: absolute; inset: -11px; pointer-events: none;
  --c: rgba(var(--h-holo-rgb), 0.55);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px 18px no-repeat;
  filter: drop-shadow(0 0 3px rgba(var(--h-holo-rgb), 0.6));
}

/* Signed-in name: under the toolbar, not colliding with it */
#auth-controls { position: absolute !important; top: 62px !important; font-family: var(--h-mono); font-size: 12px; color: var(--h-text-3); }
/* Phone (Patrick, 2026-10-05): the menu was hidden here, which also hid
   Feedback Mode. It now sits in the page between the status line and the logo,
   right-aligned under the ♪. Its open dropdown floats over the logo. */
@media (max-width: 700px) {
  #auth-controls {
    position: relative !important; top: auto !important; right: auto;
    display: flex; justify-content: flex-end; margin: 8px 16px 0; z-index: 150;
  }
  .app-header { padding-top: 20px; }
}

/* ---------------------------------------------------------------------------
   13. REV 3 SIZES + DISPLAY TYPE (Patrick's second review, 2026-09-27):
   ratings were tiny inside roomy boxes; Settle the Score and Lodge Lore
   needed a real display face. Oxanium (already loaded for the number switch)
   is the one display font: thin, wide, uppercase, used ONLY for those two
   headings so it stays special.
   ------------------------------------------------------------------------ */
:root { --h-display: "Oxanium", "IBM Plex Mono", sans-serif; }

/* 11. Bones + number inside each host/guest rating card */
.rating-card-score { font-size: calc(24px * var(--h-num-scale)); gap: 10px; }
.rating-card-score .bone-display { gap: 2px; }
.rating-card-score .bone-display svg { width: 28px; height: 28px; }

/* 12. Person page movie list: bones, number and title all up a step */
.person-rating-row .bone-display svg { width: 20px; height: 20px; }
.person-rating-row .bone-display { gap: 2px; }
.person-rating-movie { font-size: 17px; }
.person-rating-row .poster-sm { width: 66px; }

/* 14. The venue line under the player (rendered with an inline style, hence !important)
   and the movie/person tab buttons */
[data-section-id^="movie_viewing_"] {
  font: 500 12.5px/1.6 var(--h-mono) !important; letter-spacing: 0.14em !important; text-transform: uppercase;
  color: rgba(var(--h-green-rgb), 0.78) !important; text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.25);
  margin-bottom: 18px !important;
}
:is(.movie-tab-btn, .person-tab-btn) { font-size: 14.5px; min-height: 46px; padding-left: 13px; padding-right: 13px; }

/* 15. Settle the Score. Rev 5 (Patrick: not loving the look above the buttons;
   "I don't know if it's a font issue"): the whole top of the block now speaks
   in the site's TERMINAL voice, VT323, the same face as the digital numbers
   and the numbers in the buttons below it. Oxanium stays on Lodge Lore only. */
.settle-the-score { padding-top: 26px; position: relative; overflow: hidden; }
.settle-header {
  font: 400 calc(34px * var(--h-num-scale))/1 var(--h-num); letter-spacing: 0.08em; text-indent: 0.08em;
  text-transform: uppercase; color: var(--h-green);
  text-shadow: 0 0 10px rgba(var(--h-green-rgb), 0.6), 0 0 32px rgba(var(--h-green-rgb), 0.22);
  margin-bottom: 6px;
}
.settle-header::after {
  content: "◈"; display: block; margin: 6px auto 0; width: 260px;
  font: 400 11px/1 var(--h-mono); letter-spacing: 0; text-indent: 0;
  color: rgba(var(--h-green-rgb), 0.7);
  background: linear-gradient(90deg, transparent, rgba(var(--h-green-rgb), 0.35) 20%, rgba(var(--h-green-rgb), 0.35) 80%, transparent) center / 260px 1px no-repeat;
}
.settle-aggregate { font-size: 15px; margin-bottom: 20px; }
.settle-aggregate-label {
  display: block; font: 400 calc(15px * var(--h-num-scale))/1 var(--h-num); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(var(--h-green-rgb), 0.72); margin-bottom: 6px;
}
.settle-aggregate-empty { font: 400 calc(17px * var(--h-num-scale))/1.4 var(--h-num); font-style: normal; color: var(--h-text); letter-spacing: 0.03em; }
.settle-aggregate-number {
  font: var(--h-num-weight) calc(32px * var(--h-num-scale))/1 var(--h-num); color: var(--h-digit);
  text-shadow: 0 0 6px rgba(255, 224, 144, 0.55), 0 0 18px rgba(255, 216, 113, 0.22);
}
.settle-aggregate-count { font: 400 calc(15px * var(--h-num-scale))/1 var(--h-num); color: var(--h-text-2); }
.settle-aggregate-bones svg { width: 26px; height: 26px; }
.settle-form-prompt { font: 400 calc(16px * var(--h-num-scale))/1.4 var(--h-num); letter-spacing: 0.04em; color: var(--h-text-2); margin-bottom: 14px; }
/* the bone-count buttons: bigger digital numbers (Patrick: "make the numbers bigger") */
.bone-picker { gap: 7px; position: relative; }
.bone-picker-btn { min-width: 52px; padding: 8px 9px; gap: 5px; border-width: 1px; }
.bone-picker-label { font: var(--h-num-weight) calc(21px * var(--h-num-scale))/1 var(--h-num); color: var(--h-digit); text-shadow: 0 0 6px rgba(255, 224, 144, 0.45); }
.bone-picker-icons svg { width: 19px; height: 19px; }
.bone-picker-icons { gap: 1px; }
.bone-picker-woof { font-size: 22px; }
.bone-picker-woof .woof-label { font: 400 calc(19px * var(--h-num-scale))/1 var(--h-num); color: #ff6b6b; text-shadow: 0 0 7px rgba(255, 91, 91, 0.55); }
.bone-picker-btn:hover { border-color: var(--h-line-2); }
.bone-picker-btn.selected {
  border-color: var(--h-green); background: rgba(var(--h-green-rgb), 0.12);
  box-shadow: 0 0 12px rgba(var(--h-green-rgb), 0.3), inset 0 0 12px rgba(var(--h-green-rgb), 0.08);
}
.bone-picker-woof.selected { border-color: #ff5b5b; background: rgba(255, 91, 91, 0.12); box-shadow: 0 0 12px rgba(255, 91, 91, 0.3); }
.settle-own-label, .settle-ratings-header { font-family: var(--h-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--h-green-rgb), 0.7); }

/* The fun bit (Patrick asked for "some fun technical little animation"):
   when you pick a count, its bones light up one after another, like a meter
   charging. Transform/opacity only; stops under motion-off.
   Rev 6 (2026-09-30): the calibration bar that swept across the bone-count row
   every 7 s is GONE. Patrick: "there's like a little animated glare that goes
   across from left to right across the buttons. I don't like that." Do not
   bring it back; holo.js 4e (the sweep sizing) was removed with it. */
.bone-picker-btn.selected .bone-picker-icons svg { animation: holo-bone-charge 0.32s ease both; }
.bone-picker-btn.selected .bone-picker-icons svg:nth-child(2) { animation-delay: 0.08s; }
.bone-picker-btn.selected .bone-picker-icons svg:nth-child(3) { animation-delay: 0.16s; }
.bone-picker-btn.selected .bone-picker-icons svg:nth-child(4) { animation-delay: 0.24s; }
@keyframes holo-bone-charge {
  0%   { opacity: 0.25; transform: scale(0.7); filter: drop-shadow(0 0 0 rgba(171, 255, 199, 0)); }
  60%  { opacity: 1; transform: scale(1.18); filter: drop-shadow(0 0 6px rgba(171, 255, 199, 0.9)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 3px rgba(171, 255, 199, 0.6)); }
}
:is(body.fx-paused, body.fx-suspended) .bone-picker::after, :is(body.fx-paused, body.fx-suspended) .bone-picker-btn.selected .bone-picker-icons svg { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bone-picker::after, .bone-picker-btn.selected .bone-picker-icons svg { animation: none !important; } }

/* 16. Lodge Lore: display title, readable subtitle, bigger term headings */
.lodge101-title {
  font: 300 42px/1.1 var(--h-display); letter-spacing: 0.26em; text-indent: 0.26em;
  color: var(--h-green);
  text-shadow: 0 0 12px rgba(var(--h-green-rgb), 0.55), 0 0 34px rgba(var(--h-green-rgb), 0.2);
  margin-bottom: 8px;
}
.lodge101-subtitle { font: 400 15px/1.5 var(--h-mono); color: var(--h-text-2); letter-spacing: 0.02em; }
/* Rev 6 (Patrick, 2026-09-30): "too much glow on these Lodge Lore titles. I
   like the color." One tight halo instead of the two-layer name glow. */
.lodge101-term-name { font-size: 18.5px; margin-bottom: 8px; text-shadow: 0 0 4px rgba(var(--h-green-rgb), 0.28); }
.lodge101-term-name .lore-emoji { font-size: 22px; margin-right: 9px; vertical-align: -2px; text-shadow: none; }

@media (max-width: 700px) {
  .settle-header { font-size: calc(27px * var(--h-num-scale)); letter-spacing: 0.06em; text-indent: 0.06em; }
  .lodge101-title { font-size: 32px; letter-spacing: 0.18em; text-indent: 0.18em; }
  .rating-card-score { font-size: calc(21px * var(--h-num-scale)); }
  .rating-card-score .bone-display svg { width: 24px; height: 24px; }
  /* nine buttons = an exact 3 x 3 grid, no stranded last button */
  .bone-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bone-picker-btn { min-width: 0; padding: 9px 6px 8px; }
}

/* ---------------------------------------------------------------------------
   14. REV 3, Patrick's sign-off notes (2026-09-27 evening)
   ------------------------------------------------------------------------ */
/* C. (rev 4's quote-only blue glass is now the site-wide pane rule in section 2) */

/* D. ONE pill look for the rating signifiers. Patrick: adds are blue (the
   Roger Ebert Memorial blue), subtracts are red, First to Bone is a good thing
   so it is the same blue; keep the First-to-Bone glow on all of them. */
:root { --h-pill-blue: #4a90d9; --h-pill-blue-rgb: 74, 144, 217; --h-pill-red: #ff5b5b; --h-pill-red-rgb: 255, 91, 91; }
:is(.rating-card-modifiers, .person-rating-modifiers, .settle-own-section, .settle-ratings-list) .tag,
.settle-first-badge {
  display: inline-block; font: 600 12px/1.3 var(--h-mono); letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 12px; border: 1px solid; vertical-align: middle; white-space: nowrap;
}
:is(.rating-card-modifiers, .person-rating-modifiers, .settle-own-section, .settle-ratings-list) :is(.tag-green, .tag-blue),
.settle-first-badge {
  color: var(--h-pill-blue); border-color: rgba(var(--h-pill-blue-rgb), 0.55);
  background: rgba(var(--h-pill-blue-rgb), 0.12);
  text-shadow: 0 0 7px rgba(var(--h-pill-blue-rgb), 0.6);
  box-shadow: 0 0 11px rgba(var(--h-pill-blue-rgb), 0.18);
}
:is(.rating-card-modifiers, .person-rating-modifiers, .settle-own-section, .settle-ratings-list) .tag-red {
  color: var(--h-pill-red); border-color: rgba(var(--h-pill-red-rgb), 0.55);
  background: rgba(var(--h-pill-red-rgb), 0.12);
  text-shadow: 0 0 7px rgba(var(--h-pill-red-rgb), 0.6);
  box-shadow: 0 0 11px rgba(var(--h-pill-red-rgb), 0.18);
}
.settle-first-badge { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; margin-left: 6px; }

/* E. Click-sound switch for real visitors: the ♪ at the right end of the
   status line (the preview toolbar will not exist on the site). */
.link-blips {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 24px; height: 22px; margin-left: 2px; padding: 0;
  font: 500 14px/1 var(--h-mono); color: var(--h-green);
  background: rgba(var(--h-green-rgb), 0.06); border: 1px solid var(--h-line); border-radius: 5px;
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.5);
  transition: color .15s, border-color .15s, opacity .15s;
}
.link-blips:hover { border-color: var(--h-line-2); }
.link-blips[aria-pressed="false"] { color: rgba(var(--h-green-rgb), 0.38); text-shadow: none; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.link-blips:focus-visible { outline: 1px solid var(--h-green); outline-offset: 1px; }

/* F. The three buttons under the logo as ONE console strip (Patrick chose
   style C): shared glass bar, hairline dividers, a green underline lights
   under the cell you hover. */
.hero-cta-row {
  display: flex; gap: 0; padding: 0; max-width: 768px;
  background: linear-gradient(180deg, rgba(var(--h-holo-rgb), 0.07), rgba(var(--h-holo-rgb), 0)), var(--h-btn);
  border: 1px solid rgba(var(--h-green-rgb), 0.36); border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(var(--h-green-rgb), 0.04), 0 0 9px rgba(var(--h-green-rgb), 0.07);
  overflow: hidden;
}
.hero-cta-row .hero-cta {
  flex: 1 1 0; min-width: 0; position: relative;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-left: 1px solid rgba(var(--h-green-rgb), 0.22);
}
.hero-cta-row .hero-cta:first-child { border-left: 0; }
.hero-cta-row .hero-cta::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
  background: var(--h-green); box-shadow: 0 0 8px var(--h-green);
  opacity: 0; transition: opacity .15s;
}
.hero-cta-row .hero-cta:hover { transform: none; background: linear-gradient(180deg, rgba(var(--h-green-rgb), 0.13), rgba(var(--h-green-rgb), 0.03)); box-shadow: none; }
.hero-cta-row .hero-cta:hover::after { opacity: 1; }
@media (max-width: 700px) {
  .hero-cta-row { margin-left: 16px; margin-right: 16px; }
  /* each cell sizes to its own label (no wrapping); the leftover is shared */
  .hero-cta-row .hero-cta { flex: 1 1 auto; white-space: nowrap; padding: 10px 6px; font-size: 11.5px; gap: 5px; }
}

/* ---------------------------------------------------------------------------
   15. REV 5 (Patrick, 2026-09-27 evening, after rev 4)
   ------------------------------------------------------------------------ */
/* Rating numbers sat a smidge low beside the bones (VT323's baseline): nudge up */
:is(.rating-card-score, .person-rating-row, .settle-aggregate-bones) .bone-display > span:not(.bone-filled):not(.bone-empty) { position: relative; top: -0.08em; }
.rating-card-score, .rating-card-score .bone-display { align-items: center; }

/* The WOOF badge as a glowing red hologram pill, not a solid red block */
.woof-badge, .woof-badge-total {
  font: 600 12px/1.3 var(--h-mono); letter-spacing: 0.08em;
  color: #ff6b6b; background: rgba(255, 91, 91, 0.12); border: 1px solid rgba(255, 91, 91, 0.55);
  border-radius: 12px; padding: 3px 10px;
  text-shadow: 0 0 7px rgba(255, 91, 91, 0.65); box-shadow: 0 0 11px rgba(255, 91, 91, 0.2);
}
.woof-badge-total { color: #ff8585; background: rgba(255, 91, 91, 0.2); box-shadow: 0 0 14px rgba(255, 91, 91, 0.32); }

/* Highlights and Notes cards speak the same language as the quote cards */
.segment-name { font-family: var(--h-mono); font-weight: 600; color: var(--h-green); text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.55), 0 0 18px rgba(var(--h-green-rgb), 0.2); }
.segment-details { font-family: var(--h-mono); color: var(--h-text); }
.moment-person { font-family: var(--h-mono); font-weight: 600; color: var(--h-green); text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.55); }
.moment-context { font-style: normal; font-family: var(--h-mono); color: var(--h-text-2); }

/* ---------------------------------------------------------------------------
   16. ONE CARD FAMILY + GLOWING PILLS (Patrick, 2026-10-02)
   "make sure that like the salad pages, the cards kind of better match the
   aesthetic of the site. Like in the quotes… we can't be inconsistent like
   that… even on one tab of highlights it's got two different looks."
   Every quote-style card now reads like a Quotes card: white Titillium quote
   with faint blue marks (.holo-quote), the name on its own line in glowing
   green (.holo-name), context in grey mono (.holo-context), a small green
   mono label for the card's title. components.js emits those classes only
   when the redesign is on.
   ------------------------------------------------------------------------ */
:is(.dragon-section, .crouton-card, .salad-char-card, .salad-set-card, .segment-card,
    .live-rewrite-card, .live-recast-card) {
  padding: 16px 20px;
  margin-bottom: 10px;
}
.live-rewrite-card.proto-rewrite { border-left-color: var(--h-pane-line); }
/* The Salad Dragon stays the marquee moment: same glass, a green edge. */
.dragon-section {
  border-color: var(--h-line-2);
  box-shadow:
    inset 0 1px 0 rgba(190, 236, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(var(--h-green-rgb), 0.10);
}
/* The section header above already carries the emoji; Quotes cards have none. */
:is(.dragon-icon, .salad-card-icon) { display: none; }

.holo-quote {
  font: var(--h-quote-weight) var(--h-quote-size)/var(--h-quote-lh) var(--h-quote-font);
  font-style: var(--h-quote-style);
  color: #ffffff;
  letter-spacing: 0;
  text-shadow: none;
  margin-bottom: 8px;
}
.holo-quote::before, .holo-quote::after {
  font-size: 1.8rem; color: var(--theater-blue); opacity: 0.6; line-height: 0; vertical-align: -0.3em;
}
.holo-quote::before { content: "\201C"; margin-right: 2px; }
.holo-quote::after  { content: "\201D"; margin-left: 2px; }
/* Multi-speaker exchanges carry their own per-line marks, like Quotes cards. */
:is(.dragon-description, .crouton-card-text, .salad-char-quote, .salad-set-quote,
    .segment-details, .live-rewrite-quote).multi-speaker { font-style: normal; color: #ffffff; }

.holo-name {
  display: block;
  margin-top: 2px;
  font: 600 0.8rem/1.5 var(--h-mono);   /* = .quote-speaker, measured 12.8px */
  color: var(--h-green);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.55), 0 0 18px rgba(var(--h-green-rgb), 0.2);
}
.holo-context, .dragon-meta {
  margin-top: 4px;
  font: 400 0.8rem/1.5 var(--h-mono);   /* = .quote-context, measured 12.8px */
  font-style: normal;
  color: var(--h-text-2);
  white-space: pre-line;
}

/* Card titles: Bathroom Bloopers, Live Rewrite, a salad character's name */
:is(.segment-name, .live-rewrite-label, .live-recast-label, .crouton-card-character,
    .salad-char-name, .salad-set-name) {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font: 600 12.5px/1.3 var(--h-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--h-green-rgb), 0.78);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.3);
}
:is(.segment-name, .live-rewrite-label, .live-recast-label) .segment-emoji { font-size: 1.25em; letter-spacing: 0; }
.proto-badge {
  font: 400 12px/1.3 var(--h-num); letter-spacing: 0.06em;
  color: var(--h-digit); background: rgba(255, 233, 168, 0.08);
  border: 1px solid rgba(255, 233, 168, 0.35); border-radius: 12px; padding: 1px 8px;
  text-shadow: 0 0 6px rgba(255, 224, 144, 0.45);
}

/* Pills (Oscar 2025, WOOFHARD, modifiers, genres…): the rating numbers'
   computer font and the Woofhard glow, each in ITS OWN colour (Patrick: "I
   don't want you to change the color… give it that more computery looking
   font and make them feel more like glowy like the Woofhard one"). The glow is
   mixed from the pill's own text colour, so every colour keeps its hue. */
:is(.tag, .woof-badge, .settle-first-badge),
.detail-movie-meta .genre-tag {
  font-family: var(--h-num);
  font-weight: 400;
  font-size: calc(14px * var(--h-num-scale));
  line-height: 1.25;
  letter-spacing: 0.07em;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  text-shadow: 0 0 7px color-mix(in srgb, currentColor 65%, transparent);
  box-shadow: 0 0 11px color-mix(in srgb, currentColor 22%, transparent);
}
.woof-badge-total {
  background: rgba(255, 91, 91, 0.2);
  box-shadow: 0 0 14px rgba(255, 91, 91, 0.32);
}

/* 17. The feedback window wears the login box's CRT look (Patrick, 2026-10-04,
   feedback #1177: "change the look of the feedback window so it fits our new
   aesthetic for the site. should feel more like our new login window").
   Same see-through phosphor pane, double bezel, scan lines, terminal field and
   lit green button as css/crt.css's login box. One deliberate difference: the
   title bar is GREEN, not the login box's warning red, because red here only
   ever means woofs, penalties and errors (colour by meaning, top of file).
   Only exists with the redesign on, like everything in this file. */
.feedback-popover {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--h-green-rgb), 0.10), transparent 70%),
    rgba(4, 14, 9, 0.94);   /* more solid than the login box: it sits over text, not a vault */
  border: 1px solid rgba(var(--h-green-rgb), 0.75);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 3px rgba(4, 14, 9, 0.55),
    inset 0 0 0 4px rgba(var(--h-green-rgb), 0.22),
    inset 0 0 40px rgba(var(--h-green-rgb), 0.10),
    0 0 18px rgba(var(--h-green-rgb), 0.35),
    0 0 60px rgba(var(--h-green-rgb), 0.12),
    0 12px 48px rgba(0, 0, 0, 0.6);
}
.feedback-popover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 3px);
}
.feedback-popover-header {
  margin: 0 -16px 14px;
  padding: 8px 12px 7px;
  align-items: center;
  background: rgba(var(--h-green-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--h-green-rgb), 0.55);
}
.feedback-popover-title {
  font-family: "VT323", "IBM Plex Mono", monospace;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h-green);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.8), 0 0 18px rgba(var(--h-green-rgb), 0.35);
}
.feedback-popover-title::before { content: "> "; color: #8fbfa0; }
.feedback-popover-title::after { content: "_"; animation: crtCaret 1.1s steps(1) infinite; }
.feedback-popover-close {
  top: 0;
  right: 0;
  z-index: 3;
  padding: 3px 12px 5px;
  font-family: "VT323", "IBM Plex Mono", monospace;
  font-size: 1.6rem;
  color: var(--h-green);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.8);
}
.feedback-popover-close:hover { color: #b4ffc6; }
.feedback-comment {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  background: linear-gradient(rgba(var(--h-green-rgb), 0.06), rgba(var(--h-green-rgb), 0.06)), rgba(2, 8, 5, 0.96);
  border: 1px solid rgba(var(--h-green-rgb), 0.4);
  border-radius: 0;
  color: #b4ffc6;
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.55);
  caret-color: var(--h-green);
  box-shadow: inset 0 0 12px rgba(var(--h-green-rgb), 0.06);
}
.feedback-comment::placeholder { color: rgba(var(--h-green-rgb), 0.42); text-shadow: none; }
.feedback-comment:focus {
  border-color: var(--h-green);
  background: linear-gradient(rgba(var(--h-green-rgb), 0.09), rgba(var(--h-green-rgb), 0.09)), rgba(2, 8, 5, 0.96);
  box-shadow: 0 0 0 1px var(--h-green), 0 0 16px rgba(var(--h-green-rgb), 0.3), inset 0 0 12px rgba(var(--h-green-rgb), 0.1);
}
.feedback-char-count {
  font-family: var(--h-num);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: #8fbfa0;
}
.feedback-error { border-radius: 0; font-family: inherit; font-weight: 600; }
.feedback-submit-btn {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--h-green);
  border: 1px solid var(--h-green);
  border-radius: 0;
  color: #050806;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(var(--h-green-rgb), 0.45);
}
.feedback-submit-btn:hover:not(:disabled) { opacity: 1; background: #b4ffc6; box-shadow: 0 0 26px rgba(var(--h-green-rgb), 0.65); }
.feedback-submit-btn:disabled { opacity: 0.35; box-shadow: none; }
.feedback-submit-btn.feedback-submit-success {
  background: var(--h-holo);
  border-color: var(--h-holo);
  color: #050806;
  box-shadow: 0 0 18px rgba(var(--h-holo-rgb), 0.5);
}

/* 18. The account menu (name button + dropdown) in the login box's CRT look
   (Patrick, 2026-10-04: "make this look more like the style of our login
   window"). Same pane, bezel and scan lines as section 17's feedback window;
   every item in one terminal font (the old menu mixed two). Green = the
   interface, blue = "make an account", per colour-by-meaning at the top. */
.auth-user-btn,
.auth-signin-btn {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid rgba(var(--h-green-rgb), 0.75);
  background: rgba(4, 14, 9, 0.85);
  color: var(--h-green);
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.55);
  box-shadow: 0 0 12px rgba(var(--h-green-rgb), 0.25), inset 0 0 12px rgba(var(--h-green-rgb), 0.08);
}
.auth-user-btn:hover,
.auth-signin-btn:hover {
  border-color: var(--h-green);
  background: rgba(var(--h-green-rgb), 0.12);
  color: #b4ffc6;
  box-shadow: 0 0 20px rgba(var(--h-green-rgb), 0.45), inset 0 0 12px rgba(var(--h-green-rgb), 0.1);
}
.auth-arrow { color: rgba(var(--h-green-rgb), 0.7); text-shadow: none; }

.auth-dropdown {
  min-width: 210px;
  padding: 6px 0;
  border-radius: 0;
  border: 1px solid rgba(var(--h-green-rgb), 0.75);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--h-green-rgb), 0.10), transparent 70%),
    rgba(4, 14, 9, 0.94);
  box-shadow:
    inset 0 0 0 3px rgba(4, 14, 9, 0.55),
    inset 0 0 0 4px rgba(var(--h-green-rgb), 0.22),
    0 0 18px rgba(var(--h-green-rgb), 0.35),
    0 12px 48px rgba(0, 0, 0, 0.6);
}
.auth-dropdown::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 3px);
}
.auth-menu-item {
  position: relative;
  padding: 9px 16px 9px 30px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fbfa0;
  text-shadow: 0 0 5px rgba(var(--h-green-rgb), 0.3);
}
/* A terminal prompt marks the line you are on. */
.auth-menu-item::before {
  content: ">";
  position: absolute;
  left: 14px;
  opacity: 0;
  color: var(--h-green);
}
.auth-menu-item:hover {
  background: rgba(var(--h-green-rgb), 0.1);
  color: #b4ffc6;
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.6);
}
.auth-menu-item:hover::before,
.auth-menu-active::before { opacity: 1; }
.auth-menu-admin { font-weight: 600; }
.auth-menu-active {
  background: rgba(var(--h-green-rgb), 0.08);
  color: var(--h-green);
  font-weight: 600;
}
.auth-menu-beta-on {
  color: var(--h-green) !important;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.8) !important;
}
.auth-menu-upgrade {
  color: var(--h-holo) !important;
  text-shadow: 0 0 6px rgba(var(--h-holo-rgb), 0.6);
}

/* 19. The Feedback Mode bar across the top, in the login box's red title-bar
   look (Patrick, 2026-10-04: "keep it pink, but give it more of the feeling
   of our login menus... in like pink or red. It could be red."). Same red,
   glow, pixel font, "> " prompt and blinking caret as .login-gate-heading in
   css/crt.css, on dark glass with scan lines. Red is right here: the bar is a
   warning that the site is in a different mode. */
.beta-banner {
  background:
    linear-gradient(rgba(255, 59, 78, 0.16), rgba(255, 59, 78, 0.16)),
    rgba(14, 3, 6, 0.92);
  border-bottom: 1px solid rgba(255, 59, 78, 0.7);
  box-shadow: 0 0 18px rgba(255, 59, 78, 0.35), inset 0 -1px 12px rgba(255, 59, 78, 0.12);
}
.beta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) 1px, transparent 1px, transparent 3px);
}
.beta-banner-text {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffb3bb;
  text-shadow: 0 0 6px rgba(255, 59, 78, 0.55);
}
.beta-banner-label {
  font-family: "VT323", "IBM Plex Mono", monospace;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: -2px;
  color: #ff5d6e;
  text-shadow: 0 0 8px rgba(255, 59, 78, 0.8), 0 0 18px rgba(255, 59, 78, 0.35);
}
.beta-banner-label::before { content: "> "; color: #c7727d; }
.beta-banner-icon-sample {
  border-radius: 0;
  background: rgba(255, 59, 78, 0.12);
  border: 1px solid rgba(255, 59, 78, 0.6);
  box-shadow: 0 0 8px rgba(255, 59, 78, 0.35);
}
.beta-banner-close {
  position: relative;
  z-index: 1;
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(255, 59, 78, 0.6);
  color: #ff5d6e;
  font-family: "VT323", "IBM Plex Mono", monospace;
  font-size: 1.2rem;
  text-shadow: 0 0 6px rgba(255, 59, 78, 0.8);
}
.beta-banner-close:hover { background: rgba(255, 59, 78, 0.2); color: #ffb3bb; }

/* 20. The movie page's hero quote as a green phosphor terminal readout
   (Patrick, 2026-10-04: "it's kind of plain... more of the digital CRT look
   like our login menu... green 80s CRT text with scan lines, blinking cursor
   at the end"). The quote in VT323 phosphor green on the site's standard
   pane (see below). The cursor was tried and removed (Patrick, 10/04). VT323 is
   a fixed-width font, so the descramble cannot change the quote's shape here.
   No title bar and no added words (no unrequested copy). */
.bones-phrase {
  position: relative;
  padding: 22px 26px 20px;
  margin-bottom: 26px;
  font: 400 50px/1.08 "VT323", "IBM Plex Mono", monospace;
  font-style: normal;
  letter-spacing: 0.02em;
  color: #9dffb4;
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.85), 0 0 22px rgba(var(--h-green-rgb), 0.35);
  /* The box is the site's standard pane from section 2, not the login box's
     green frame (Patrick 10/04: "too out of sync with the overall aesthetic...
     I don't want the box to glow and have the green border... change the box
     in the background to be the same as our other boxes"). The green text and
     cursor stay. */
  background:
    repeating-linear-gradient(0deg, rgba(var(--h-holo-rgb), 0.03) 0 1px, transparent 1px 3px),
    var(--h-glass);
  border: 1px solid var(--h-pane-line);
  border-radius: var(--h-radius);
  box-shadow:
    inset 0 1px 0 rgba(190, 236, 255, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(var(--h-holo-rgb), 0.05);
}
/* No cursor: Patrick removed it 10/04. */
.bones-phrase-attr {
  margin-top: 14px;
  font: 600 14px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.bones-phrase-attr::before { content: "> "; color: #8fbfa0; text-shadow: none; }
@media (max-width: 700px) {
  .bones-phrase { font-size: 34px; line-height: 1.1; padding: 16px 16px 14px; }
  .bones-phrase-attr { font-size: 12px; }
}

/* 21. Signal drop (Patrick, 2026-10-05): clicking the logo glitches the logo
   and every window on screen; the logo also tears while it boots up.
   Borrowed from Command Center's bw-glitch: stepped frames of horizontal
   tears (clip-path), small sideways jumps with a skew, a red/blue edge split
   and quick opacity dips. holo.js sets --tear-delay (0-110 ms, so the windows
   break up one after another) and --tear-x (the jump size and direction).
   Transforms, clip-path and opacity only: nothing changes the page layout. */
.is-tearing {
  animation: holo-tear 0.52s steps(1, end) var(--tear-delay, 0ms) both;
}
@keyframes holo-tear {
  0%   { transform: translateX(var(--tear-x, 6px)) skewX(-6deg); clip-path: inset(12% 0 52% 0); opacity: .85;
         box-shadow: 3px 0 0 rgba(255, 40, 90, .55), -3px 0 0 rgba(40, 170, 255, .55); }
  12%  { transform: translateX(calc(var(--tear-x, 6px) * -0.8)); clip-path: inset(46% 0 14% 0); opacity: 1; }
  24%  { transform: translateX(calc(var(--tear-x, 6px) * 0.4)) skewX(4deg); clip-path: inset(0 0 70% 0); opacity: .35; }
  36%  { transform: none; clip-path: none; opacity: 1; box-shadow: none; }
  48%  { transform: translateX(calc(var(--tear-x, 6px) * -0.5)); clip-path: inset(62% 0 8% 0); opacity: .7;
         box-shadow: -2px 0 0 rgba(255, 40, 90, .45), 2px 0 0 rgba(40, 170, 255, .45); }
  60%  { transform: none; clip-path: inset(0 0 0 0); opacity: .15; }
  70%  { transform: translateX(calc(var(--tear-x, 6px) * 0.25)); clip-path: inset(30% 0 40% 0); opacity: 1; }
  82%  { transform: none; clip-path: none; opacity: .8; box-shadow: none; }
  100% { transform: none; clip-path: none; opacity: 1; }
}
/* The logo: the tear runs on the IMAGE, never on .holo-logo itself, whose
   own animation is the boot flicker (holo-materialize). Two animations on one
   element replace each other: the tear would cancel the flicker (and the LOCK
   sync that reads it), or the flicker would hide the tear (measured
   2026-10-05). The selector matches the glitch rule's weight and comes after
   it, so the tear also wins over the glitch's "animation: none". */
.holo-logo.is-tearing { animation: none; }
body.holo-logo-on .holo-logo.is-tearing .hero-cover-art,
.holo-logo.is-tearing .hero-cover-art {
  animation: holo-tear 0.6s steps(1, end) both;
  --tear-x: 9px;
}
body.holo-logo-on .holo-logo.is-materializing.is-tearing,
body.holo-logo-on.intro-reveal .holo-logo.is-tearing { animation: holo-materialize 1.1s steps(1) both; }

/* The background: one faint interference band sweeps down the screen. It is
   its own element (holo.js adds #signal-band): body::after is already the
   theater's 85% darkness and must never be overridden. */
#signal-band {
  content: "";
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 18vh;
  z-index: 9998;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--h-holo-rgb), 0.06) 40%, rgba(215, 245, 255, 0.12) 50%, rgba(var(--h-holo-rgb), 0.06) 60%, transparent),
              repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  animation: holo-drop-band 0.5s steps(6, end) both;
}
@keyframes holo-drop-band {
  0%   { transform: translateY(-20vh); opacity: 1; }
  100% { transform: translateY(105vh); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .is-tearing, #signal-band { animation: none; }
}

/* Multi-speaker lines: the "Name:" part is green, same green and glow as
   .holo-name, in the line's own font (Patrick, 2026-10-06, after a one-page preview). */
.speaker-line-name {
  color: var(--h-green);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.55), 0 0 18px rgba(var(--h-green-rgb), 0.2);
}

/* Oscar page nav (years, sections, people): the same buttons as everywhere
   else (Patrick, 2026-10-06: "doesn't feel like it matches the way we do
   buttons elsewhere on site"). style.css's older `.oscar-nav .sort-btn` rules
   (gold year, blue person, round pills) are more specific than section 6's
   shared rule, so they are restated here at matching specificity. */
.oscar-nav .sort-btn {
  font-family: var(--h-mono);
  font-weight: 500;
  color: rgba(var(--h-green-rgb), 0.88);
  background: linear-gradient(180deg, rgba(var(--h-holo-rgb), 0.07), rgba(var(--h-holo-rgb), 0.0)), var(--h-btn);
  border: 1px solid rgba(var(--h-green-rgb), 0.36);
  border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(var(--h-green-rgb), 0.04), 0 0 9px rgba(var(--h-green-rgb), 0.07);
  text-shadow: 0 0 6px rgba(var(--h-green-rgb), 0.35);
}
.oscar-nav .sort-btn:hover {
  color: var(--h-green);
  border-color: rgba(var(--h-green-rgb), 0.6);
  background: linear-gradient(180deg, rgba(var(--h-green-rgb), 0.12), rgba(var(--h-green-rgb), 0.02)), var(--h-btn);
}
.oscar-nav .sort-btn:is(.active-year, .active-section, .active-person) {
  color: #effff3;
  background: linear-gradient(180deg, rgba(var(--h-green-rgb), 0.20), rgba(var(--h-green-rgb), 0.06)), rgba(12, 28, 40, 0.92);
  border-color: rgba(var(--h-green-rgb), 0.75);
  box-shadow: inset 0 0 18px rgba(var(--h-green-rgb), 0.16), 0 0 14px rgba(var(--h-green-rgb), 0.26), inset 0 -2px 0 rgba(var(--h-green-rgb), 0.6);
  text-shadow: 0 0 8px rgba(var(--h-green-rgb), 0.7);
}