/* ---------------------------------------------------------------------------
   The Glow Run (launch campaign, 2026-10-06): the GLOW RUN tab, the results
   chip, the +75 share tag and the lobby's edition glyph. Concept:
   docs/art/glow-prize-2026-10-06/images/09a-leaderboard-pet.png. Uses the
   rounds.css tokens (--rd-*) so it reads as the same board family.
   --------------------------------------------------------------------------- */

:root {
  --gr-gold: #e8c35a;
  --gr-jade: #7fe8d8;
}

#rd-glowrun { width: 100%; }
#rd-glowrun[hidden] { display: none; }
.rd-tab.gr-tab[hidden] { display: none; }
.rd-tab.gr-tab span::before { content: "\2726  "; color: var(--gr-gold); }
.rd-tab.gr-tab[aria-selected="true"] span::before { color: #8a6a1c; }

.gr-stage { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; width: 100%; align-items: start; }

/* ---- header strip: a picture and a number each ---- */
.gr-strip { display: flex; gap: 6px; margin-bottom: 8px; }
.gr-chip { flex: 1 1 0; display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; column-gap: 8px;
  align-items: center; padding: 6px 10px; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); color: var(--rd-ivory); }
.gr-chip svg { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--rd-bronze); }
.gr-chip b { font-family: var(--rd-digits); font-size: 20px; line-height: 1; }
.gr-chip small { font-size: 11px; letter-spacing: 1.5px; color: var(--rd-ivory-dim); }
.gr-chip:nth-child(2) svg { color: var(--gr-jade); }
.gr-chip:nth-child(5) svg { color: var(--gr-gold); }

/* ---- the table ---- */
.gr-table { background: var(--rd-ink); border: 1px solid var(--rd-bronze); box-shadow: inset 0 0 0 3px rgba(7, 9, 14, .9), inset 0 0 0 4px var(--rd-bronze-soft); }
.gr-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gr-table th { font-size: 11px; letter-spacing: 2.5px; font-weight: 500; color: var(--rd-ivory); padding: 9px 8px; text-align: center;
  border-bottom: 1px solid var(--rd-bronze-soft); }
.gr-table td { padding: 8px; text-align: center; font-family: var(--rd-digits); letter-spacing: 1px; color: var(--rd-ivory);
  border-top: 1px solid rgba(168, 132, 74, .16); }
.gr-table .gr-c-rank { width: 68px; white-space: nowrap; }
.gr-table .gr-c-name { text-align: left; font-family: var(--rd-face); letter-spacing: 1.5px; text-transform: uppercase; }
.gr-table .gr-c-kd { font-weight: 700; }
.gr-table .gr-c-pts { font-weight: 700; }
.gr-ed { width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; color: var(--gr-gold);
  filter: drop-shadow(0 0 4px rgba(232, 195, 90, .6)); }
.gr-table tr.is-self td { background: var(--rd-sel); color: var(--rd-sel-ink); }
.gr-table tr.is-self .gr-ed { color: #8a6a1c; filter: none; }
.gr-table tfoot tr td { border-top: 2px solid var(--rd-bronze); }
.gr-table tr.gr-ghost td { background: rgba(239, 226, 191, .14); color: var(--rd-ivory-dim); font-style: italic; }
.gr-table tr.gr-empty td { font-family: var(--rd-face); color: var(--rd-ivory-dim); padding: 20px 8px; letter-spacing: 1px; }

.gr-say { margin: 8px 0 0; font-size: 13px; letter-spacing: .5px; color: var(--rd-ivory-dim); text-transform: none;
  display: flex; align-items: center; gap: 10px; }
.gr-say.is-ghost { color: var(--rd-ivory); }
.gr-signin { white-space: nowrap; flex: none; min-height: 32px; padding: 4px 14px; background: transparent; color: var(--gr-gold); border: 1px solid var(--gr-gold);
  font: inherit; font-size: 12px; letter-spacing: 2px; cursor: pointer; }

/* ---- the prize ---- */
.gr-prize { background: var(--rd-ink); border: 1px solid var(--rd-bronze); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: inset 0 0 0 3px rgba(7, 9, 14, .9), inset 0 0 0 4px var(--rd-bronze-soft); }
.gr-prize h3 { margin: 2px 0 0; font-size: 15px; letter-spacing: 5px; font-weight: 500; color: var(--rd-ivory); }
.gr-prize figure { margin: 0; width: 100%; position: relative; }
.gr-prize img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rd-bronze-soft); }
.gr-prize figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -22px 16px 0; position: relative;
  padding: 7px 10px; background: rgba(7, 9, 14, .94); border: 1px solid var(--rd-bronze); }
.gr-prize figcaption b { font-family: var(--rd-digits); font-size: 24px; letter-spacing: 6px; color: var(--rd-ivory); }
.gr-prize figcaption small { font-size: 11px; letter-spacing: 2px; color: var(--gr-jade); }
.gr-supply { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.gr-supply b { font-family: var(--rd-digits); font-size: 22px; color: var(--gr-gold); }
.gr-supply small { font-size: 11px; letter-spacing: 3px; color: var(--rd-ivory-dim); }

/* ---- the results chip ---- */
#hold-run { grid-column: 1 / -1; justify-self: start; }
#hold-run[hidden] { display: none; }
.gr-run { margin: 8px 0 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: help;
  background: rgba(232, 195, 90, .12); border: 1px solid var(--gr-gold); color: var(--gr-gold); }
.gr-run b { font-family: var(--rd-digits, inherit); font-size: 20px; letter-spacing: 1.5px; }
.gr-run .gr-ed { margin: 0; width: 15px; height: 15px; }
.gr-run small { font-size: 11px; letter-spacing: .5px; color: var(--rd-ivory-dim, #b9b2a0); text-transform: none; }
.gr-run.is-guest { opacity: .7; flex-wrap: wrap; }
.gr-run.is-off { background: transparent; border-color: rgba(168, 132, 74, .35); color: #b9b2a0; flex-direction: column; align-items: flex-start; gap: 2px; }
.gr-run.is-off b { font-size: 13px; letter-spacing: 2px; }

/* ---- the share tag ---- */
.rd-share .gr-tag { margin-left: 8px; padding: 1px 6px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: #17120b; background: var(--gr-gold); }
.rd-share .gr-tag[hidden] { display: none; }

/* ---- the lobby glyph ---- */
.gr-seated { display: inline-flex; align-items: center; }
.gr-seated .gr-ed { margin-left: 4px; }

@media (max-width: 760px) {
  .gr-stage { grid-template-columns: 1fr; }
  .gr-prize { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .gr-prize h3 { flex-basis: 100%; text-align: center; }
  .gr-prize figure { width: 160px; }
  .gr-strip { flex-wrap: wrap; }
  .gr-chip { flex: 1 1 40%; }
  .gr-table th:nth-child(5), .gr-table td:nth-child(5) { display: none; }
}

/* ---- feature my moment ---- */
.gr-feature { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1.5px; color: #b9b2a0; cursor: pointer; }
.gr-feature[hidden] { display: none; }
.gr-feature input { width: 16px; height: 16px; accent-color: var(--gr-gold); margin: 0; }
.gr-feature i { font-style: normal; }

/* ---- the fox board (GLOW_FOX_BOARD, fox-board 2026-10-13) ----
   Answer first, the three gates with Kulnet walking along them, then the board
   drawn around the line with Kulnet sitting on the cutline. The idle strip is
   the lobby perch's (art/kulnet/idle-east.png, 8 frames of 80px), pixelated. */
.fx-kulnet { --kn: 40px; display: inline-block; width: var(--kn); height: var(--kn); flex: none;
  background: url("./art/kulnet/idle-east.png") 0 0 / calc(var(--kn) * 8) var(--kn) no-repeat; image-rendering: pixelated;
  animation: fx-kulnet-idle 1.2s steps(8) infinite; }
@keyframes fx-kulnet-idle { to { background-position: calc(var(--kn) * -8) 0; } }

.fx-stage { grid-template-columns: minmax(0, 1fr) 260px; padding: 10px; background: rgba(7, 9, 14, .7); }
.fx-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fx-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fx-top:empty { display: none; }
.fx-when, .fx-hour { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; font-size: 12px; letter-spacing: 2px;
  color: var(--rd-ivory-dim); background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); }
.fx-when svg, .fx-hour svg { width: 16px; height: 16px; color: var(--rd-bronze); }
.fx-hour b { font-weight: 500; color: var(--rd-ivory); }
.fx-hour small { color: var(--gr-jade); letter-spacing: 1px; }
.fx-hour.is-live { border-color: var(--gr-jade); }
.fx-hour.is-live svg { color: var(--gr-jade); }

.fx-answer { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; padding: 12px 16px;
  background: var(--rd-ink); border: 1px solid var(--rd-bronze); box-shadow: inset 0 0 0 3px rgba(7, 9, 14, .9), inset 0 0 0 4px var(--rd-bronze-soft); }
.fx-answer > :not(.fx-head) { grid-column: 2; }
.fx-head { grid-column: 1; grid-row: 1 / span 8; font-family: var(--rd-digits); font-size: 52px; line-height: 1; color: var(--rd-ivory); align-self: center; }
.fx-say { margin: 0; font-size: 19px; line-height: 1.3; color: var(--rd-ivory); text-transform: none; letter-spacing: .3px; }
.fx-sub { margin: 4px 0 0; font-size: 13px; color: var(--rd-ivory-dim); text-transform: none; letter-spacing: .4px; }
.fx-stage[data-fx-kind="fox"] .fx-sub:first-of-type, .fx-stage[data-fx-kind="won"] .fx-say { color: var(--gr-gold); }
.fx-acts { margin: 8px 0 0; display: flex; gap: 10px; }
.fx-acts:empty { display: none; }
.fx-share { min-height: 32px; padding: 4px 14px; background: transparent; color: var(--rd-ivory); border: 1px solid var(--rd-bronze-soft);
  font: inherit; font-size: 12px; letter-spacing: 2px; cursor: pointer; }
.fx-share:hover, .fx-share:focus-visible { border-color: var(--rd-ivory); }
/* GLOW_FOX_LIVE: the one gold CTA on the board. */
.fx-play { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 18px; background: var(--gr-gold); color: #17120b; border: 1px solid var(--gr-gold);
  font-size: 13px; font-weight: 700; letter-spacing: 2px; text-decoration: none; white-space: nowrap; }
.fx-play:hover, .fx-play:focus-visible { background: #f3d57a; outline: 2px solid var(--rd-ivory); outline-offset: 2px; }
.gr-signin.is-quiet { color: var(--rd-ivory); border-color: var(--rd-bronze-soft); }
.fx-you { margin: 4px 0 0; font-size: 14px; color: var(--rd-ivory); text-transform: none; }
.fx-you b { font-size: 11px; letter-spacing: 2px; color: var(--rd-ivory-dim); margin-right: 6px; }
.fx-news { margin: 0 0 2px; font-size: 14px; color: var(--gr-jade); text-transform: none; letter-spacing: .3px; }

.fx-meter { position: relative; width: 100%; }
.fx-gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.fx-gate { display: grid; grid-template-columns: 18px 1fr; grid-template-areas: "pic label" "bar bar" "left left"; column-gap: 8px; row-gap: 5px;
  align-items: center; padding: 8px 10px; background: var(--rd-ink); border: 1px solid var(--rd-bronze-soft); }
.fx-gate svg { grid-area: pic; width: 18px; height: 18px; color: var(--rd-bronze); }
.fx-gate b { grid-area: label; font-family: var(--rd-digits); font-size: 16px; letter-spacing: 1.5px; color: var(--rd-ivory); font-weight: 500; }
.fx-bar { grid-area: bar; height: 8px; background: rgba(239, 226, 191, .1); overflow: hidden; }
.fx-bar i { display: block; height: 100%; width: calc(var(--fx-fill) * 100%); background: var(--gr-jade); transition: width .9s ease-out; }
.fx-gate small { grid-area: left; font-size: 11px; letter-spacing: 1.5px; color: var(--rd-ivory-dim); }
.fx-gate.is-met { border-color: var(--gr-gold); }
.fx-gate.is-met svg, .fx-gate.is-met small { color: var(--gr-gold); }
.fx-gate.is-met .fx-bar i { background: var(--gr-gold); }

.fx-board { list-style: none; margin: 0; padding: 4px 0; background: var(--rd-ink); border: 1px solid var(--rd-bronze);
  box-shadow: inset 0 0 0 3px rgba(7, 9, 14, .9), inset 0 0 0 4px var(--rd-bronze-soft); }
.fx-row { display: grid; grid-template-columns: 52px 20px 1fr auto; align-items: center; gap: 6px; padding: 3px 16px; font-size: 15px; color: var(--rd-ivory); }
.fx-row + .fx-row { border-top: 1px solid rgba(168, 132, 74, .16); }
.fx-r, .fx-p { font-family: var(--rd-digits); letter-spacing: 1px; }
.fx-p { font-weight: 700; }
.fx-n { text-transform: uppercase; letter-spacing: 1.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-row .gr-ed { margin: 0; }
.fx-row.is-self { background: var(--rd-sel); color: var(--rd-sel-ink); }
.fx-row.is-self .gr-ed { color: #8a6a1c; filter: none; }
.fx-row.is-named:not(.is-self) { background: rgba(127, 232, 216, .14); }
.fx-gap { text-align: center; font-size: 12px; color: var(--rd-ivory-dim); padding: 0; line-height: 16px; letter-spacing: 4px; }
.fx-cut { --fx-rule: 14px; display: flex; align-items: flex-end; gap: 10px; padding: 0 16px 4px; margin: 2px 0; height: 32px; position: relative; color: var(--gr-gold);
  font-size: 11px; letter-spacing: 3px; }
/* The dashed rule sits at the bottom of the row; the hero fox sits ON it (r2-truth: one fox per screen).
   r3-mascot: its paws stand on the rule (the strip's paws are its bottom 10%: art/kulnet/idle-east.png
   rows 0-71 of 80) and the band is only the line: the fox rises over the empty middle of the rows
   above it, so there is no gap between the last fox row and the line. */
.fx-cut::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--fx-rule); border-top: 2px dashed var(--gr-gold); opacity: .8; }
.fx-cut > * { position: relative; }
.fx-cut > span, .fx-cut > small { background: var(--rd-ink); padding: 0 6px; margin-bottom: 2px; }
.fx-cut .fx-sitter { --kn: 72px; position: absolute; left: 50%; bottom: calc(var(--fx-rule) + 2px - var(--kn) * .1); margin-left: calc(var(--kn) / -2); filter: drop-shadow(0 0 8px rgba(127, 232, 216, .4)); }
.fx-cut small { margin-left: auto; font-family: var(--rd-digits); font-size: 13px; letter-spacing: 1px; }
/* GLOW_FOX_LIVE: the holder changed, so the fox blinks onto the new row. */
.fx-cut.is-moved .fx-sitter { animation: fx-kulnet-idle 1.2s steps(8) infinite, fx-blink-in .6s ease-out; }
@keyframes fx-blink-in { 0% { opacity: 0; transform: translateY(-34px) scale(.6); filter: brightness(3) drop-shadow(0 0 14px #7fe8d8); } 60% { opacity: 1; } 100% { transform: none; } }
.fx-row.is-up { animation: fx-up 2.4s ease-out; }
.fx-row.is-down { animation: fx-down 2.4s ease-out; }
@keyframes fx-up { 0%, 40% { background: rgba(127, 232, 216, .28); } }
@keyframes fx-down { 0%, 40% { background: rgba(239, 120, 90, .22); } }
.fx-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .4px; color: var(--rd-ivory-dim); text-transform: none; }
.fx-legend .gr-ed { margin: 0; flex: none; }
/* r3-mascot: a row whose points would hold a fox, short of Blink (Aster's `bs`): the star greyed and a chip. */
.fx-ed-short { display: inline-flex; color: var(--rd-ivory-dim); opacity: .55; }
.fx-ed-short .gr-ed { margin: 0; color: currentColor; filter: none; }
.fx-bs { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(127, 232, 216, .55);
  color: #9df2ff; font: 700 11px/1 var(--rd-digits); letter-spacing: 1px; vertical-align: 1px; }

.fx-prize figcaption small { text-align: center; }
.gr-run-fox { display: inline-flex; align-items: center; gap: 6px; }
.gr-run-fox .fx-kulnet { --kn: 22px; }

@media (prefers-reduced-motion: reduce) {
  .fx-kulnet, .fx-cut.is-moved .fx-sitter, .fx-row.is-up, .fx-row.is-down { animation: none; }
  .fx-bar i { transition: none; }
}
@media (max-width: 760px) {
  .fx-stage { grid-template-columns: 1fr; }
  .fx-prize figure { width: 120px; }
  .fx-head { font-size: 40px; }
  .fx-say { font-size: 17px; }
  .fx-gate { padding: 6px; }
  .fx-gate b { font-size: 13px; }
  .fx-row { padding: 5px 10px; grid-template-columns: 44px 18px 1fr auto; }
  .fx-stage { padding: 8px; }
  .fx-gates { grid-template-columns: repeat(3, 1fr); }
  .fx-cut { height: 32px; padding: 0 10px 4px; }
  .fx-cut .fx-sitter { --kn: 60px; left: 58%; }
  .fx-acts { flex-wrap: wrap; }
  /* r3 polish: "PLAY · ABOUT 3 MATCHES TO THE LINE" ran off the card on an iPhone; it wraps inside it. */
  .fx-play { font-size: 12px; letter-spacing: 1.5px; padding: 6px 12px; max-width: 100%; box-sizing: border-box; white-space: normal;
    line-height: 1.3; text-align: center; justify-content: center; overflow-wrap: anywhere; }
  .rd-tab.gr-tab span { white-space: nowrap; }
}

/* ---- the board stage on a phone (unflagged layout fix, fox-board 2026-10-13) ----
   #hold centres its panel in a column; a board taller than the screen was
   centred too, so its top sat above the scroll origin where nobody could reach
   it, and the GLOW lockup and sound button (absolute in #hold) covered the
   strip. Auto margins centre a short board and top-align a tall one, and on a
   phone the board starts under the lockup. */
#hold[data-stage="board"] { justify-content: flex-start; }
#hold[data-stage="board"] > .rd-boardstage { margin-block: auto; }
@media (max-width: 760px) {
  #hold[data-stage="board"] > .rd-boardstage { margin-top: 84px; }
}
.fx-prize figcaption b { font-size: 20px; letter-spacing: 3px; white-space: nowrap; }

/* r2-truth: the fox board's line row and the fox on it sit on the first screen at
   1366x768 and 390x844, so the stage title gives up a little height to the board. */
.rd-boardstage:has(.fx-stage) { gap: 6px; }
.rd-boardstage:has(.fx-stage) h2 { font-size: 32px; letter-spacing: 4px; }
.fx-stage .fx-row { padding-block: 2px; }
.fx-stage .fx-gap { line-height: 12px; }
@media (max-width: 760px) {
  .rd-boardstage:has(.fx-stage) h2 { font-size: 24px; }
}