/* ---------------------------------------------------------------------------
   glow-match-story: the stitched match story. It wears the reel theatre's
   frame (reel.css) and adds only what it needs: the beat label, BACK TO
   HIGHLIGHTS, the shelf's STORY card, the match page's chrome. Panel language
   is the identity packet's; 11px floor; one border per element.
   --------------------------------------------------------------------------- */

/* The story takes the reel's slot in the results grid. */
#hold .hold-panel.hold-results > .st-theatre { grid-area: theatre; }
#hold .hold-panel.hold-results.has-story:not([hidden]) {
  grid-template-areas: "head head" "tallies blink" "theatre blink" "again again";
  grid-template-rows: auto auto 1fr auto;
}
#hold .hold-panel.hold-results.has-story:has(.hold-blink[hidden]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "tallies" "theatre" "again";
}
#hold .hold-results.has-story .rd-results .rd-victor,
#hold .hold-results.has-story .rd-results .rd-you,
#hold .hold-results.has-story .rd-results .rd-mvp,
#hold .hold-results.has-story .rd-results .rd-kdnote,
#hold .hold-results.has-story .rd-results .rd-panels { display: none; }
#hold .hold-results.has-story .rd-results .rd-top { grid-template-columns: minmax(0, 1fr); margin: 0; }
#hold .hold-results.has-story .rd-results .rd-logo { display: none; }
#hold .hold-results.has-story .rd-results .rd-outcome h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: .14em; }
#hold .hold-results.has-story .rd-results .rd-outcome::after { display: none; }
#hold .hold-results.has-story .rd-results .rd-score.is-big .rd-num { font-size: 30px; padding: 4px 16px; }

.st-theatre[hidden] { display: none; }
.st-theatre .st-tag { color: var(--ui-gold-a, #f1d27d); box-shadow: inset 0 0 0 1px var(--ui-gold-b, #c99443); }
/* The beat label: which card or round is up, lower right, for a reader. */
.st-beat {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 4px 9px;
  font: 400 11px/1 var(--hold-caps, sans-serif);
  letter-spacing: .24em;
  color: var(--ui-muted, #a9b79e);
  background: rgba(15, 24, 19, .82);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft, rgba(198, 168, 91, .16));
}
.st-beat:empty { display: none; }
#hold .st-row .st-back { margin-left: auto; }
#hold .hold-results .rd-story[hidden] { display: none; }
#hold .hold-results .rd-story svg { color: var(--ui-gold-b, #c99443); }

/* ---- the shelf's STORY card (front-moments.js) -------------------------------- */
#hold .mo-card.mo-story { box-shadow: inset 0 0 0 1px var(--ui-gold-b, #c99443); }
#hold .mo-card.mo-story .mo-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(50, 108, 180, .55), rgba(15, 24, 19, 0) 40%, rgba(15, 24, 19, 0) 60%, rgba(201, 67, 56, .55)),
    linear-gradient(180deg, rgba(15, 24, 19, 0), rgba(15, 24, 19, .7));
  z-index: 1;
}
#hold .mo-card.mo-story .mo-poster .mo-replay { z-index: 2; color: var(--ui-gold-a, #f1d27d); }
#hold .mo-card.mo-story .mo-story-score {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 2;
  font: 700 28px/1 var(--hold-serif, serif);
  letter-spacing: .1em;
  color: var(--ui-ink, #f2e6bd);
  text-shadow: 0 2px 6px #000;
}
#hold .mo-card.mo-story .mo-card-meta b { color: var(--ui-gold-a, #f1d27d); }
/* menus-ux-30: selected, the card is ivory; pale gold on it vanished. */
#hold .mo-card.mo-story.is-on .mo-card-meta b { color: var(--ui-ivory-ink, #17120b); }
#hold .mo-tag.is-story { color: var(--ui-gold-a, #f1d27d); }

/* ---- the match page (?story=<id>): the clip page's chrome, reused ------------- */
#story-chrome { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#story-chrome > * { pointer-events: auto; }
#story-chrome .clip-mark { position: absolute; top: 18px; left: 22px; display: grid; gap: 2px; }
#story-chrome .clip-mark i { font: 400 11px/1 var(--hold-caps, sans-serif); font-style: normal; letter-spacing: .36em; color: var(--ui-ink, #f2e6bd); }
#story-chrome .clip-mark b { font: 700 20px/1 var(--hold-serif, serif); letter-spacing: .18em; color: var(--ui-ink, #f2e6bd); }
#story-chrome .clip-addr { position: absolute; top: 22px; right: 22px; font: 400 11px/1 var(--hold-caps, sans-serif); letter-spacing: .12em; color: var(--ui-muted, #a9b79e); }
#story-chrome .clip-row {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
#story-chrome .clip-caption { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
#story-chrome .clip-caption b { display: block; font: 700 clamp(18px, 2.2vw, 30px)/1.1 var(--hold-serif, serif); letter-spacing: .14em; color: var(--ui-ink, #f2e6bd); text-shadow: 0 2px 6px #000; }
#story-chrome .clip-caption small { display: block; margin-top: 4px; font: 400 12px/1.2 var(--hold-caps, sans-serif); letter-spacing: .14em; color: var(--ui-ivory-sel, #e6d8b8); }
#story-chrome .clip-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
#story-chrome .clip-actions .hold-ghost { min-height: 42px; width: auto; padding: 8px 16px; white-space: nowrap; font: 400 12px/1 var(--hold-caps, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
#story-chrome .clip-actions .hold-ghost i { font-style: normal; }
#story-chrome .clip-actions .hold-cta { min-height: 46px; margin: 0; }
#story-chrome .clip-actions .hold-cta b { font: 700 15px/1 var(--hold-serif, serif); letter-spacing: .16em; }
#story-chrome .clip-note { position: absolute; left: 24px; bottom: 92px; margin: 0; font: 400 12px/1.3 var(--hold-caps, sans-serif); letter-spacing: .04em; color: var(--ui-muted, #a9b79e); }
#story-chrome .clip-note:empty { display: none; }
#story-chrome .clip-card {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 26px 32px;
  background: var(--ui-well, #0f1813);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
}
#story-chrome .clip-card p { margin: 0; font: 400 14px/1.3 var(--hold-caps, sans-serif); letter-spacing: .1em; color: var(--ui-ink, #f2e6bd); }

@media (max-width: 760px) {
  #hold .hold-panel.hold-results.has-story:not([hidden]),
  #hold .hold-panel.hold-results.has-story:has(.hold-blink[hidden]):not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "tallies" "theatre" "blink" "again";
    grid-template-rows: auto;
  }
  #hold .st-row .st-back { margin-left: 0; }
  .st-beat { right: 8px; bottom: 8px; }
  #story-chrome .clip-row { left: 16px; right: 16px; bottom: 16px; flex-wrap: wrap; }
  #story-chrome .clip-note { bottom: 86px; left: 16px; max-width: calc(100vw - 32px); }
}

/* glow-story-film: the film's strip owns the top edge while it shows (the
   player sets data-strip on its canvas), so the frame's own top marks step aside.
   The Moments shelf plays the same film in its own frame, whose tag sat under
   the strip's right-hand words (glow-polish aes-10). */
.st-frame .rd-theatre-mark, .st-frame .st-tag, #hold .mo-tag,
#story-chrome .clip-mark, #story-chrome .clip-addr { transition: opacity .24s ease; }
.rd-theatre-canvas[data-strip="1"] ~ .rd-theatre-mark,
.rd-theatre-canvas[data-strip="1"] ~ .rd-theatre-tag,
#hold .mo-canvas[data-strip="1"] ~ .mo-tag,
body:has(#stage[data-strip="1"]) #story-chrome .clip-mark,
body:has(#stage[data-strip="1"]) #story-chrome .clip-addr { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .st-frame .rd-theatre-mark, .st-frame .st-tag, #hold .mo-tag,
  #story-chrome .clip-mark, #story-chrome .clip-addr { transition: none; }
}