/* ---------------------------------------------------------------------------
   killcam: the theatre on the results screen, the round Moment in the break,
   the share chip, and the clip page's chrome.

   Panel language is the identity packet's (docs/art/glow-identity-2026-10-05):
   well #0f1813, brass hairline, ivory ink, turquoise only on Blink. The frame
   is one brass hairline with a diamond at top centre, the same stone the
   Blink panel beside it wears, so the two read as one wall. Letterbox bands
   are well colour, not black, so the frame is one object. 11px floor, one
   border per element, reduced motion answered at the bottom.
   --------------------------------------------------------------------------- */

/* ---- the results grid with a reel in it ----------------------------------- */
/* Without a reel the panel is exactly screen 06. With one: the theatre takes
   the standings' two thirds, the Blink panel keeps its third and spans both
   rows, the tallies shrink to the outcome and the score. */
#hold .hold-panel.hold-results.has-reel: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-reel:has(.hold-blink[hidden]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "tallies" "theatre" "again";
}
/* bugs-17 (round-5 bugs judge): the theatre's cell is as tall as the Blink
   column beside it, and its own rows stretched to fill that, so COPY LINK and
   MORE slid down under the LEAVE / READY bar on a 1280x720 window. The share
   row stays under the picture. */
#hold .hold-panel.hold-results > .rd-theatre { grid-area: theatre; align-content: start; }
#hold .hold-panel.hold-results.has-reel > .hold-blink { align-self: start; }
/* The strip stands in for the table; FULL TABLE brings the table back. The
   victor ledge and the YOUR MATCH card go: the hero's moving body in the
   theatre is the game moment the ledge stood in for (design B section 7). */
#hold .hold-results.has-reel .rd-results .rd-victor,
#hold .hold-results.has-reel .rd-results .rd-you,
#hold .hold-results.has-reel .rd-results .rd-mvp,
#hold .hold-results.has-reel .rd-results .rd-kdnote,
#hold .hold-results.has-reel:not(.is-full) .rd-results .rd-panels { display: none; }
#hold .hold-results.has-reel .rd-results { gap: 0; }
#hold .hold-results.has-reel .rd-results .rd-top { grid-template-columns: minmax(0, 1fr); margin: 0; }
#hold .hold-results.has-reel .rd-results .rd-top-main { grid-column: 1; padding: 0 0 6px; }
#hold .hold-results.has-reel .rd-results .rd-logo { display: none; }
#hold .hold-results.has-reel .rd-results .rd-outcome { padding: 0 0 4px; }
#hold .hold-results.has-reel .rd-results .rd-outcome h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: .14em; }
#hold .hold-results.has-reel .rd-results .rd-outcome::after { display: none; }
#hold .hold-results.has-reel .rd-results .rd-score.is-big .rd-num { font-size: 30px; padding: 4px 16px; }
#hold .hold-results.has-reel .rd-results .rd-score.is-big { font-size: 14px; }
#hold .hold-results.has-reel .rd-results .rd-hist { margin-top: 8px; }
#hold .hold-results.has-reel.is-full .rd-results .rd-panels { margin-top: 10px; }

/* ---- the theatre ------------------------------------------------------------ */
.rd-theatre { display: grid; gap: 10px; min-width: 0; }
.rd-theatre[hidden] { display: none; }
.rd-theatre-frame {
  position: relative;
  width: 100%;
  background: var(--ui-well, #0f1813);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
  padding: 7px;
}
/* The diamond at top centre, the panel's own mark. */
.rd-theatre-frame::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--ui-well, #0f1813);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
}
.rd-theatre-canvas, .rd-moment canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1310;
  image-rendering: pixelated;
}
/* aesthetics-29 (round 5): until the first clip has drawn, the theatre is a
   painted title card rather than a black box, and the arrows, pager and tag
   wait (reel-theatre.js waiting). */
.rd-theatre.is-waiting .rd-theatre-frame::after {
  content: attr(data-wait);
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(200, 160, 74, .16), transparent 62%),
    linear-gradient(180deg, #16211b, #0b1310);
  font: 700 22px/1 var(--hold-serif, serif);
  letter-spacing: .3em;
  color: var(--ui-ink, #f2e6bd);
  text-shadow: 0 0 18px rgba(127, 176, 105, .35);
  animation: rd-wait 1.8s ease-in-out infinite;
  pointer-events: none;
}
.rd-theatre.is-waiting .rd-step,
.rd-theatre.is-waiting .rd-theatre-cycle,
.rd-theatre.is-waiting .rd-theatre-tag { visibility: hidden; }
@keyframes rd-wait { 0%, 100% { color: rgba(242, 230, 189, .7); } 50% { color: rgba(242, 230, 189, 1); } }
@media (prefers-reduced-motion: reduce) { .rd-theatre.is-waiting .rd-theatre-frame::after { animation: none; } }
/* On a short window the picture gives height before READY leaves the screen;
   the bands either side are the frame's own well colour. */
.rd-theatre .rd-theatre-frame { max-width: calc(46vh * 16 / 9 + 14px); margin: 0 auto; }
#hold .rd-theatre-row .rd-orient[hidden] { display: none; }
.rd-theatre.is-encore .rd-theatre-canvas { filter: brightness(.7); transition: filter 400ms ease; }
.rd-theatre-mark {
  position: absolute;
  top: 16px;
  left: 18px;
  display: grid;
  gap: 1px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6);
}
.rd-theatre-mark i { font: 400 11px/1 var(--hold-caps, sans-serif); font-style: normal; letter-spacing: .36em; color: var(--ui-ink, #f2e6bd); }
.rd-theatre-mark b { font: 700 20px/1 var(--hold-serif, serif); letter-spacing: .18em; color: var(--ui-ink, #f2e6bd); }
.rd-theatre-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 10px 4px;
  font: 400 11px/1 var(--hold-caps, sans-serif);
  letter-spacing: .3em;
  color: var(--ui-ink, #f2e6bd);
  background: rgba(15, 24, 19, .82);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
  pointer-events: none;
}
.rd-theatre-tag:empty { display: none; }
.rd-theatre.is-own .rd-theatre-tag { color: var(--ui-gold-a, #f1d27d); box-shadow: inset 0 0 0 1px var(--ui-gold-b, #c99443); }
/* ---- the cycle (replays-reel) ---------------------------------------------- */
/* PREV / NEXT sit on the frame's edges: a well-coloured slab with a brass
   hairline and an ivory chevron, quiet until the frame is hovered or one of
   them has focus. One clip hides them (and the pips) at runtime. */
.rd-step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ui-ink, #f2e6bd);
  background: rgba(15, 24, 19, .72);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
  cursor: pointer;
  opacity: .55;
  transition: opacity 160ms ease, background 160ms ease;
}
.rd-step[hidden] { display: none; }
.rd-step svg { width: 20px; height: 20px; }
.rd-prev { left: 14px; }
.rd-next { right: 14px; }
.rd-theatre-frame:hover .rd-step, .rd-step:focus-visible { opacity: 1; }
.rd-step:hover { background: rgba(28, 41, 33, .92); }
.rd-step:focus-visible, .rd-play:focus-visible, .rd-pip:focus-visible { outline: 2px solid var(--ui-focus, #f2e6bd); outline-offset: 2px; }
/* The play glyph and the pips, bottom right inside the frame. */
.rd-theatre-cycle {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 2px;
  background: rgba(15, 24, 19, .72);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft, rgba(198, 168, 91, .3));
}
.rd-theatre-cycle[hidden] { display: none; }
.rd-play {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  color: var(--ui-ink, #f2e6bd);
  background: transparent;
  cursor: pointer;
}
.rd-play svg { width: 14px; height: 14px; }
.rd-play .rd-glyph-play { display: none; }
.rd-theatre.is-paused .rd-play .rd-glyph-play { display: block; color: var(--ui-ivory-sel, #e6d8b8); }
.rd-theatre.is-paused .rd-play .rd-glyph-pause { display: none; }
.rd-theatre-pips { display: flex; align-items: center; }
/* A pip is a 10px diamond on a 28px hit area. Lit: ivory. Own: gold edge,
   gold when lit. Waiting for its renderer: hollow and faint. */
.rd-pip {
  position: relative;
  width: 26px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rd-pip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  translate: -50% -50%;
  rotate: 45deg;
  background: rgba(15, 24, 19, .8);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
  transition: background 160ms ease;
}
.rd-pip:hover::before { background: rgba(242, 230, 189, .35); }
.rd-pip.is-on::before { background: var(--ui-ink, #f2e6bd); }
.rd-pip.is-own::before { box-shadow: inset 0 0 0 1px var(--ui-gold-a, #f1d27d); }
.rd-pip.is-own.is-on::before { background: var(--ui-gold-a, #f1d27d); }
.rd-pip.is-wait::before { opacity: .45; background: transparent; }

/* ---- the share row ----------------------------------------------------------- */
/* COPY LINK is the share row's primary (outlined since round 5, below);
   READY keeps the one gold on the screen. MORE is a ghost that opens a
   small menu upward: POST ON X, SAVE VIDEO and the video's shape. */
.rd-theatre-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#hold .rd-theatre-row .rd-share { min-width: 200px; min-height: 48px; margin: 0; }
/* aesthetics-31 (round 5): the cream fill was a third button style beside the
   gold READY and the outlined secondaries. COPY LINK is now the outlined
   secondary, in ivory ink on the brass hairline: still the widest button in
   the row, no longer a style of its own. */
#hold .rd-theatre-row .rd-copy:not(.hold-go) {
  color: var(--ui-ink, #f2e6bd);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
}
#hold .rd-theatre-row .rd-copy:not(.hold-go):hover { background: rgba(255, 255, 255, .075); }
#hold .rd-theatre-row .rd-copy:focus-visible { outline: 2px solid var(--ui-focus, #f2e6bd); outline-offset: 3px; }
#hold .rd-theatre-row .rd-share b { font: 700 clamp(16px, 1.4vw, 20px)/1.1 var(--hold-serif); letter-spacing: .16em; text-transform: uppercase; }
#hold .rd-theatre-row .rd-share:disabled { opacity: .55; cursor: default; }
#hold .rd-theatre-row .hold-ghost { flex: 0 0 auto; min-height: 44px; font: 400 12px/1 var(--hold-caps); letter-spacing: .2em; text-transform: uppercase; }
#hold .rd-theatre-row .rd-full { margin-left: auto; }
.rd-more { position: relative; }
#hold .rd-more .rd-more-btn[aria-expanded="true"] { color: var(--ui-ink, #f2e6bd); background: rgba(255, 255, 255, .075); }
.rd-more-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 3;
  display: grid;
  min-width: 210px;
  padding: 6px;
  background: var(--ui-well, #0f1813);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842), 0 10px 30px rgba(0, 0, 0, .55);
}
.rd-more-menu[hidden] { display: none; }
.rd-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  color: var(--ui-ink, #f2e6bd);
  background: transparent;
  font: 400 12px/1 var(--hold-caps, sans-serif);
  letter-spacing: .2em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.rd-more-item[hidden] { display: none; }
.rd-more-item i { font-style: normal; }
.rd-more-item svg { flex: none; width: 16px; height: 16px; color: var(--ui-brass, #a97842); }
.rd-more-item:hover, .rd-more-item:focus-visible { background: rgba(242, 230, 189, .08); outline: none; box-shadow: inset 2px 0 0 var(--ui-ivory-sel, #e6d8b8); }
.rd-more-item:disabled { opacity: .5; cursor: default; }
.rd-more-item.rd-orient { color: var(--ui-muted, #a9b79e); padding-left: 38px; }
.rd-share-note { font: 400 12px/1.3 var(--hold-caps, sans-serif); letter-spacing: .04em; color: var(--ui-muted, #a9b79e); min-width: 0; }
.rd-share-note:empty { display: none; }
/* The link, selectable, when the clipboard said no. */
.rd-link-field {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  color: var(--ui-ink, #f2e6bd);
  background: var(--id-ink, #0b1310);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
  font: 400 13px/1.2 var(--hold-caps, sans-serif);
  letter-spacing: .02em;
}
.rd-link-field[hidden] { display: none; }

/* ---- the exits (results) and WATCHING ---------------------------------------- */
#hold .hold-results .rd-watch[hidden] { display: none; }
/* WATCH sits beside LEAVE in the same dress: a quiet bordered ghost. */
#hold .hold-results .rd-watch {
  flex: 0 0 auto;
  min-height: 52px;
  min-width: 170px;
  margin: 0;
  padding: 8px 22px;
  justify-content: center;
  border: 1px solid var(--ui-hairline, #a97842);
  background: rgba(7, 9, 14, .85);
  color: var(--ui-ink, #f2e6bd);
  font: 400 13px/1 var(--hold-caps);
  letter-spacing: .2em;
}
#hold .hold-results .rd-watch:disabled { opacity: .55; cursor: progress; }
#hold .hold-results .rd-watch svg { color: var(--ui-brass, #a97842); }
/* menus-ux-07 (2026-10-08): the way out is a sticky footer. The stage ran to
   1,306 px at 1600x900 when the tables were up, with READY, LEAVE and the MOSS
   line all below the fold on arrival; now the tables scroll under one row.
   LEAVE first and READY last, as the lobby's foot has BACK first and the gold
   last; the aside's buttons are laid out as the footer's own. aes-12: three
   quiet actions and one gold, nothing wedged between them. */
#hold .hold-results .rd-foot {
  /* #hold's own bottom padding (front.css), which a sticky box is inset by:
     the footer reaches past it to the window's edge so no row shows below. */
  --rd-foot-under: clamp(16px, 3vh, 34px);
  position: sticky; bottom: calc(-1 * var(--rd-foot-under)); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px;
  margin: 0 -14px; padding: 26px 14px calc(12px + var(--rd-foot-under) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgba(4, 6, 11, 0), rgba(4, 6, 11, .97) 24px, rgb(4, 6, 11));
}
#hold .hold-results .rd-foot > .hold-aside { display: contents; }
#hold .hold-results .rd-foot #hold-again { order: 0; }
#hold .hold-results .rd-foot .rd-watch { order: 1; }
#hold .hold-results .rd-foot > #rd-again { order: 2; margin: 0; }
@media (max-width: 760px) {
  #hold .hold-results .rd-foot { gap: 8px; padding-top: 20px; }
  #hold .hold-results .rd-foot > #rd-again { order: -1; flex: 1 1 100%; min-width: 0; }
  #hold .hold-results .rd-foot #hold-again,
  #hold .hold-results .rd-foot .rd-watch { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 6px 8px; letter-spacing: .08em; font-size: 12px; }
  #hold .hold-results .rd-foot .rd-watch i, #hold .hold-results .rd-foot #hold-again i { white-space: normal; text-align: center; line-height: 1.15; }
}
#hold .rd-lobby-watch[hidden] { display: none; }
#hold .rd-lobby-watch svg { color: var(--ui-brass, #a97842); }
#hold .hold-panel.rd-watching:not([hidden]) {
  display: grid;
  gap: 14px;
  width: min(1280px, 100%);
  margin: 0 auto;
  padding-top: clamp(8px, 3vh, 28px);
}
.rd-watching-title {
  margin: 0;
  font: 700 clamp(24px, 2.6vw, 34px)/1 var(--hold-serif, serif);
  letter-spacing: .18em;
  color: var(--ui-ink, #f2e6bd);
  text-align: center;
}
.rd-watch-slot { min-width: 0; }
.rd-watch-slot .rd-theatre .rd-theatre-frame { max-width: calc(60vh * 16 / 9 + 14px); }
#hold .rd-watching > #rd-watch-battle { justify-self: center; min-width: 260px; }
#hold .rd-watching > .hold-aside { justify-self: center; margin: 0; }

/* The strip: one line per side, names with K and D, yours in ivory. */
.rd-theatre-strip:empty { display: none; }
.rd-strip { display: grid; gap: 6px; }
.rd-strip-side {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  flex-wrap: wrap;
  padding: 7px 12px 6px;
  background: var(--id-ink, #0b1310);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft, rgba(198, 168, 91, .16));
}
.rd-strip-side > b { font: 700 13px/1 var(--hold-serif, serif); letter-spacing: .18em; min-width: 7.5em; }
.rd-strip-side.is-mine > b { color: var(--ui-cobalt, #326cb4); }
.rd-strip-side.is-theirs > b { color: var(--ui-vermilion, #c94338); }
.rd-strip-row { display: inline-flex; align-items: baseline; gap: 6px; font: 400 13px/1 var(--hold-caps, sans-serif); letter-spacing: .06em; color: var(--ui-muted, #a9b79e); }
.rd-strip-row.is-self { color: var(--ui-ink, #f2e6bd); font-weight: 700; }
.rd-strip-row u { text-decoration: none; font-size: 11px; letter-spacing: .2em; color: var(--ui-cold-dim, #7b8896); }
.rd-strip-row em { font-style: normal; font-size: 11px; letter-spacing: .2em; padding: 1px 5px; color: var(--ui-gold-ink, #22170e); background: var(--ui-gold-b, #c99443); }
.rd-strip-row i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ui-ink, #f2e6bd); }
.rd-strip-row i small { font-size: 11px; color: var(--ui-dim, #73806b); margin-left: 1px; }

/* ---- the round Moment ----------------------------------------------------------- */
#rd-break .rd-break-body { display: flex; align-items: flex-start; justify-content: center; gap: 24px; width: min(1280px, 100%); margin-top: 8px; }
#rd-break .rd-break-body .rd-panels { margin-top: 0; flex: 1 1 0; min-width: 0; }
#rd-break .rd-moment-slot { flex: 0 1 min(44vw, 620px); min-width: 0; }
#rd-break .rd-moment-slot[hidden] { display: none; }
.rd-moment { pointer-events: auto; cursor: pointer; }
.rd-moment[hidden] { display: none; }
.rd-moment .rd-theatre-frame { animation: rd-moment-in .3s ease-out; }
.rd-moment-skip {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font: 400 11px/1 var(--hold-caps, sans-serif);
  letter-spacing: .2em;
  color: var(--ui-muted, #a9b79e);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.rd-moment.is-held .rd-moment-skip { display: none; }
/* aesthetics-28 (round 5): on a touch screen there is no Esc, and a tap on the
   Moment plays it again rather than skipping it (Dan, 2026-10-06), so the
   hint has nothing true to say there. */
@media (hover: none) and (pointer: coarse) { .rd-moment-skip { display: none; } }
/* Held on its payoff: a tap plays it again, and the picture says so. */
.rd-moment.is-held .rd-theatre-frame::after {
  content: '\21BB';
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ui-gold-b, #c99443);
  border-radius: 50%;
  font: 400 20px/1 sans-serif;
  color: var(--ui-gold-a, #f1d27d);
  background: rgba(9, 17, 13, .72);
  pointer-events: none;
}
.rd-moment.is-held canvas { filter: brightness(.8); }
@keyframes rd-moment-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- the share chip ------------------------------------------------------------------ */
/* On document.body, above every stage, because the export job it shows keeps
   running across the lobby return. The ring is the progress; the words say
   what is being made and at which rung. */
.rd-chip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 16px 10px 12px;
  background: var(--ui-well, #0f1813);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842), 0 6px 24px rgba(0, 0, 0, .5);
  color: var(--ui-ink, #f2e6bd);
  pointer-events: none;
}
.rd-chip[hidden] { display: none; }
.rd-chip-ring {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(var(--ui-gold-a, #f1d27d) calc(var(--p, 0) * 360deg), rgba(241, 210, 125, .18) 0);
  -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px);
  mask: radial-gradient(circle, transparent 8px, #000 9px);
}
.rd-chip[data-state="posting"] .rd-chip-ring, .rd-chip[data-state="exporting"][style*="--p: 0"] .rd-chip-ring { animation: rd-chip-spin 1.1s linear infinite; background: conic-gradient(var(--ui-gold-a, #f1d27d) 90deg, rgba(241, 210, 125, .18) 0); }
.rd-chip[data-state="done"] .rd-chip-ring { background: var(--ui-gold-a, #f1d27d); -webkit-mask: none; mask: none; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.rd-chip[data-state="error"] .rd-chip-ring { background: var(--ui-danger, #e77d72); -webkit-mask: none; mask: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rd-chip-text { display: grid; gap: 3px; min-width: 0; }
.rd-chip-text b { font: 400 12px/1.2 var(--hold-caps, sans-serif); letter-spacing: .12em; }
.rd-chip-text small { font: 400 11px/1 var(--hold-caps, sans-serif); letter-spacing: .2em; color: var(--ui-muted, #a9b79e); }
.rd-chip-text small:empty { display: none; }
@keyframes rd-chip-spin { to { rotate: 360deg; } }

/* ---- the clip page ------------------------------------------------------------------------ */
#clip-chrome { position: fixed; inset: 0; pointer-events: none; color: var(--ui-ink, #f2e6bd); font-family: var(--hold-caps, sans-serif); }
#clip-chrome .clip-mark { top: 22px; left: 26px; }
#clip-chrome .clip-mark b { font-size: 26px; }
#clip-chrome .clip-row {
  position: absolute;
  right: 26px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}
#clip-chrome .clip-caption { display: none; }
#clip-chrome .clip-actions { display: flex; align-items: center; gap: 10px; }
#clip-chrome .hold-ghost { min-height: 44px; padding: 8px 14px; background: rgba(15, 24, 19, .82); color: var(--ui-ink, #f2e6bd); box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842); cursor: pointer; border: 0; font: 400 12px/1 var(--hold-caps, sans-serif); letter-spacing: .2em; }
#clip-chrome .hold-ghost[hidden] { display: none; }
#clip-chrome .hold-ghost:disabled { opacity: .6; cursor: default; }
#clip-chrome .clip-play {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 22px;
  text-decoration: none;
  color: var(--ui-gold-ink, #22170e);
  background: linear-gradient(180deg, var(--ui-gold-a, #f1d27d), var(--ui-gold-b, #c99443));
  box-shadow: inset 0 0 0 1px var(--ui-gold-edge, #7a5f38);
}
#clip-chrome .clip-play b { font: 700 16px/1.1 var(--hold-serif, serif); letter-spacing: .16em; }
#clip-chrome .clip-note { position: absolute; left: 26px; bottom: 26px; margin: 0; max-width: 50vw; font: 400 12px/1.3 var(--hold-caps, sans-serif); letter-spacing: .04em; color: var(--ui-muted, #a9b79e); text-shadow: 0 1px 2px #000; }
#clip-chrome .clip-note:empty { display: none; }
/* The card states: expired, or recorded on an older build. */
#clip-chrome .clip-card {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(520px, calc(100vw - 32px));
  padding: 26px 28px 24px;
  background: rgba(15, 24, 19, .92);
  box-shadow: inset 0 0 0 1px var(--ui-hairline, #a97842);
  text-align: center;
  pointer-events: auto;
}
#clip-chrome .clip-card p { margin: 0; font: 400 14px/1.4 var(--hold-caps, sans-serif); letter-spacing: .06em; }
#clip-chrome .clip-card > b { font: 700 26px/1.1 var(--hold-serif, serif); letter-spacing: .14em; text-transform: uppercase; }
#clip-chrome[data-status="older"] .clip-row .clip-play, #clip-chrome[data-status="missing"] .clip-row .clip-play { display: none; }
#replay-note { display: none; }

/* ---- 2026-10-06: the table beside the picture, Blink as an aside -------------------------- */
/* Dan, on the results: "This screen should show the kill deaths of everybody
   on the team, and the blink training should be pretty low"; and later, the
   Blink panel is "an interesting little thing with maybe a cool sound effect
   that shows up". So the standings with the MVP and the moments are the
   screen: the full K/D table (rounds.js standingsHtml) stands beside the
   theatre, and Blink is a small card under the table that slides in a beat
   later with a chime (front-door.js drawBlink). The theatre section becomes
   `display: contents` here so its frame, its share row and its table can be
   placed on the results grid directly. FULL TABLE goes: the table is shown. */
#hold .hold-panel.hold-results.has-reel:not([hidden]),
#hold .hold-panel.hold-results.has-reel:has(.hold-blink[hidden]):not([hidden]) {
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  grid-template-areas: "head head" "tallies tallies" "frame table" "frame blink" "row ." "again again";
  grid-template-rows: auto auto auto 1fr auto auto;
}
#hold .hold-panel.hold-results.has-reel > .rd-theatre:not([hidden]) { display: contents; }
#hold .hold-panel.hold-results.has-reel > .rd-theatre > .rd-theatre-frame { grid-area: frame; align-self: start; width: 100%; }
#hold .hold-panel.hold-results.has-reel > .rd-theatre > .rd-theatre-row { grid-area: row; }
#hold .hold-panel.hold-results.has-reel > .rd-theatre > .rd-theatre-strip { grid-area: table; align-self: start; min-width: 0; }
#hold .hold-panel.hold-results.has-reel > .hold-blink { grid-area: blink; align-self: start; }
#hold .hold-results.has-reel .rd-theatre-row .rd-full { display: none; }
/* bugs-17 (round-5 bugs judge): on a short laptop window the share row's own
   grid row came after the table AND the Blink card, so COPY LINK and MORE sat
   under the LEAVE / READY bar (half hidden at 1280x720, unclickable). There it
   heads the right-hand column, above the standings, where it is always on
   screen; the picture keeps the left. */
@media (min-width: 761px) and (max-height: 800px) {
  #hold .hold-panel.hold-results.has-reel:not([hidden]),
  #hold .hold-panel.hold-results.has-reel:has(.hold-blink[hidden]):not([hidden]) {
    grid-template-areas: "head head" "tallies tallies" "frame row" "frame table" "frame blink" "again again";
    grid-template-rows: auto auto auto auto 1fr auto;
  }
  #hold .hold-panel.hold-results.has-reel > .rd-theatre > .rd-theatre-row { align-self: start; }
}

/* The table. */
.rd-stand { display: grid; gap: 10px; }
.rd-stand-side {
  width: 100%;
  border-collapse: collapse;
  background: var(--id-ink, #0b1310);
  box-shadow: inset 0 0 0 1px var(--ui-hairline-soft, rgba(198, 168, 91, .16));
  font: 400 14px/1 var(--hold-caps, sans-serif);
  color: var(--ui-muted, #a9b79e);
}
.rd-stand-side th {
  padding: 9px 8px 7px;
  font: 400 11px/1 var(--hold-caps, sans-serif);
  letter-spacing: .2em;
  color: var(--ui-dim, #73806b);
  text-align: center;
  border-bottom: 1px solid var(--ui-hairline-soft, rgba(198, 168, 91, .16));
}
.rd-stand-side th.rd-sn { text-align: left; padding-left: 12px; font: 700 13px/1 var(--hold-serif, serif); letter-spacing: .18em; }
.rd-stand-side.is-mine th.rd-sn { color: var(--ui-cobalt, #326cb4); }
.rd-stand-side.is-theirs th.rd-sn { color: var(--ui-vermilion, #c94338); }
.rd-stand-side td { padding: 7px 8px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ui-ink, #f2e6bd); }
.rd-stand-side td.rd-sn { text-align: left; padding-left: 12px; color: var(--ui-muted, #a9b79e); max-width: 0; width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; }
.rd-stand-side td.rd-sn span { margin-right: 6px; }
/* The round-break boards' faces, at 24 px (aesthetics-31, round 5). */
.rd-stand-side td.rd-sn .rd-icon { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; border-width: 1px; }
.rd-stand-side td.rd-sn i.rd-icon { display: inline-block; }
.rd-stand-side td.rd-skd { color: var(--ui-muted, #a9b79e); }
/* The stones column (round-5: the MVP the rule weighs them for read as a
   mistake without them). Tight, so a 300px table keeps its names. */
.rd-stand-side th.rd-sst, .rd-stand-side td.rd-sst { padding-left: 3px; padding-right: 3px; letter-spacing: .06em; }
.rd-stand-side th.rd-sn { white-space: nowrap; }
.rd-stand-side tr + tr td { border-top: 1px solid rgba(168, 132, 74, .10); }
.rd-stand-side tr.is-self td { background: rgba(230, 216, 184, .06); }
.rd-stand-side tr.is-self td.rd-sn { color: var(--ui-ink, #f2e6bd); font-weight: 700; }
.rd-stand-side u { text-decoration: none; font-size: 11px; letter-spacing: .2em; color: var(--ui-cold-dim, #7b8896); margin-right: 6px; }
.rd-stand-side em { font-style: normal; font-size: 11px; letter-spacing: .2em; padding: 1px 5px; color: var(--ui-gold-ink, #22170e); background: var(--ui-gold-b, #c99443); }

/* Blink, the aside: icon, title, bar, +XP on one small card. Everywhere on
   the results, reel or not. It arrives a beat after the standings. */
#hold .hold-results .hold-blink {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas: "icon title gain" "icon bar bar" "unlock unlock unlock";
  justify-items: stretch;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
  animation: rd-blink-aside 420ms cubic-bezier(.2, .9, .3, 1.1) 1100ms both;
}
#hold .hold-results .hold-blink h3 { grid-area: title; padding: 0; background: none; font-size: 11px; letter-spacing: .26em; text-align: left; }
#hold .hold-results .hold-blink-emblem { grid-area: icon; width: 52px; padding: 2px; }
#hold .hold-results .hold-blink-emblem[data-tier="master"]::after { top: -7px; width: 14px; height: 14px; }
#hold .hold-results .hold-xp { grid-area: bar; margin: 0; gap: 8px; }
#hold .hold-results .hold-xp b { font-size: 16px; }
#hold .hold-results .hold-xp-track { height: 10px; }
#hold .hold-results .hold-xp-gain { grid-area: gain; margin: 0; font-size: 18px; }
#hold .hold-results .hold-xp-unlock:not([hidden]) { grid-area: unlock; margin: 0; }
/* aes-12: a guest's MOSS line belongs to this card (what MOSS keeps is the
   name and this Blink), and with nothing earned it IS the card: no "+0 XP",
   no empty bar from 0 to 1. */
#hold .hold-results .hold-blink:not(.is-empty):has(.hold-upgrade:not([hidden])) { grid-template-areas: "icon title gain" "icon bar bar" "unlock unlock unlock" "moss moss moss"; }
#hold .hold-results .hold-blink .hold-upgrade { grid-area: moss; justify-self: start; min-height: 32px; padding: 2px 0; }
#hold .hold-results .hold-blink.is-empty { grid-template-areas: "icon title title" "icon moss moss" "unlock unlock unlock"; }
#hold .hold-results .hold-blink.is-empty :is(.hold-xp, .hold-xp-gain) { display: none; }
@keyframes rd-blink-aside { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
/* Without a reel, the card sits under the standings rather than taking a
   third of the screen beside them. */
#hold .hold-panel.hold-results:not(.has-reel):not([hidden]) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "tallies" "blink" "again";
}
#hold .hold-panel.hold-results:not(.has-reel) > .hold-blink { justify-self: center; width: min(440px, 100%); }

/* ---- phones ------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  #hold .hold-panel.hold-results.has-reel:not([hidden]),
  #hold .hold-panel.hold-results.has-reel:has(.hold-blink[hidden]):not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "tallies" "frame" "row" "table" "blink" "again";
    grid-template-rows: auto;
  }
  #hold .hold-panel.hold-results.has-reel > .hold-blink { justify-self: stretch; }
  .rd-theatre-mark { top: 12px; left: 14px; }
  .rd-theatre-mark b { font-size: 16px; }
  .rd-theatre-tag { top: 12px; right: 12px; }
  .rd-theatre-cycle { right: 8px; bottom: 8px; }
  .rd-step { width: 36px; height: 52px; opacity: .7; }
  .rd-prev { left: 8px; }
  .rd-next { right: 8px; }
  #hold .rd-theatre-row .rd-share { flex: 1 1 auto; min-width: 0; }
  .rd-more-menu { left: auto; right: 0; }
  /* The Blink panel keeps its third on a desktop; on a phone, while the reel
     is up, it is one line under it ("+N XP" and the bar). A tier-up is the
     only thing that earns it a second line. */
  #hold .hold-results.has-reel .hold-blink {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 12px;
  }
  #hold .hold-results.has-reel .hold-blink[hidden] { display: none; }
  #hold .hold-results.has-reel .hold-blink h3 { padding: 0; background: none; font-size: 11px; letter-spacing: .22em; }
  #hold .hold-results.has-reel .hold-blink-emblem { display: none; }
  #hold .hold-results.has-reel .hold-xp { flex: 1 1 120px; width: auto; margin: 0; gap: 8px; }
  #hold .hold-results.has-reel .hold-xp b { font-size: 16px; }
  #hold .hold-results.has-reel .hold-xp-track { height: 10px; }
  #hold .hold-results.has-reel .hold-xp-gain { margin: 0; font-size: 12px; }
  #hold .hold-results.has-reel .hold-xp-unlock:not([hidden]) { flex: 1 1 100%; margin: 0; }
  #hold .rd-theatre-row .rd-full { margin-left: 0; }
  .rd-strip-side > b { min-width: 0; flex: 1 1 100%; }
  #rd-break .rd-break-body { flex-direction: column; align-items: stretch; }
  #rd-break .rd-moment-slot { flex: none; width: 100%; }
  #clip-chrome .clip-row { left: 16px; right: 16px; bottom: 16px; flex-wrap: wrap; }
  #clip-chrome .clip-note { bottom: 86px; left: 16px; max-width: calc(100vw - 32px); }
  .rd-chip { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

/* ---- reduced motion: cuts, stills, no spin ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .rd-moment .rd-theatre-frame, .rd-chip .rd-chip-ring { animation: none; }
  .rd-step, .rd-pip::before { transition: none; }
  .rd-theatre.is-encore .rd-theatre-canvas { transition: none; }
}
.rd-still .rd-moment .rd-theatre-frame, .rd-still .rd-chip-ring { animation: none !important; }

/* While a clip is being made the reel holds a still and the chip sits on it. */
.rd-theatre.is-making .rd-theatre-canvas { filter: brightness(.55); transition: filter 300ms ease; }
.rd-theatre-frame > .rd-chip { position: absolute; inset: auto; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; padding: 14px 22px 14px 16px; }
.rd-theatre-frame > .rd-chip .rd-chip-ring { width: 34px; height: 34px; -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px); mask: radial-gradient(circle, transparent 11px, #000 12px); }
.rd-theatre-frame > .rd-chip .rd-chip-text b { font-size: 15px; letter-spacing: .16em; }

/* glow-guest-door: a guest's row keeps its GUEST tag; the name gives way first. */
.rd-stand-side td.rd-sn:has(.glow-guesttag) span { display: inline-block; max-width: calc(100% - 62px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; margin-right: 0; }
.rd-stand-side td.rd-sn .glow-guesttag { margin-left: 6px; }