/* =====================================================================
   THE PARADISE CUP · app-specific rules on top of paradise.css
   paradise.css draws the boards at a fixed 390 x 844; this file makes the same
   markup fill a real phone (safe areas, scrolling, sheets, toasts, the code pad)
   and scales the 1920 x 1080 TV stage to any screen.
   ===================================================================== */

html, body { margin: 0; height: 100%; background: #0A0C10; overscroll-behavior: none; }
body.is-light { background: #ECEEF2; }
#app { height: 100%; }
* { -webkit-tap-highlight-color: transparent; }

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
/* ?notch=1 simulates the board's 54 px status bar and 34 px home indicator (screenshots). */
html.pc-sim-notch { --safe-top: 54px; --safe-bottom: 34px; }

/* ---------- phone frame ---------- */
.pc.pc-app {
  width: 100%;
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.pc-app .pc-top { padding-top: max(var(--safe-top), 10px); }
.pc-app .pc-body-area {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.pc-app .pc-body-area > * { flex-shrink: 0; }
/* the last line of a sheet or a no-tab screen clears the home indicator */
.pc-sheet__body:last-child { padding-bottom: calc(var(--safe-bottom) + 16px); }
.pc-app.no-tabs > .pc-body-area:last-child { padding-bottom: calc(var(--safe-bottom) + 16px); }
.pc-app .pc-dock { padding-top: 8px; }
.pc-app.no-tabs .pc-dock { padding-bottom: calc(var(--safe-bottom) + 12px); }
.pc-app .pc-tabbar { height: calc(56px + var(--safe-bottom)); padding-bottom: var(--safe-bottom); }
.pc-app .pc-console-top { flex: none; height: max(var(--safe-top), 0px); background: var(--pc-accent); }

.pc-hdr__right { display: flex; align-items: center; gap: 8px; flex: none; }
.pc-lockup .pc-wordmark { overflow: hidden; text-overflow: ellipsis; }
.pc-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pc-empty { padding: 12px 0; color: var(--pc-ink-3); }
.pc-stack { display: flex; flex-direction: column; gap: 8px; }
.pc-row2 { display: flex; gap: 8px; }
.pc-row2 > * { flex: 1; min-width: 0; }
.pc-divider { height: 0; border-top: 1px solid var(--pc-line); margin: 4px 0; }

/* focus rings for every control, not just links and buttons */
.pc input:focus-visible, .pc select:focus-visible, .pc textarea:focus-visible, .pc [tabindex]:focus-visible {
  outline: 3px solid var(--pc-accent-ink); outline-offset: 2px;
}
.pc button:disabled, .pc .pc-btn:disabled { opacity: .45; cursor: not-allowed; }
/* a locked switch keeps its reason readable: only the title and the switch fade */
.pc button.pc-card[role="switch"]:disabled { opacity: 1; }
.pc button.pc-card[role="switch"]:disabled .pc-h3,
.pc button.pc-card[role="switch"]:disabled .pc-switch { opacity: .45; }

/* outline variant of the ? tile: at the house */
.pc .pc-q--line { background: transparent; color: var(--pc-ink); box-shadow: inset 0 0 0 1.5px var(--pc-line-strong); }

/* links that look like cards keep their colors */
.pc a.pc-card, .pc button.pc-card { color: inherit; text-align: left; }

/* tag with a press state */
.pc .pc-notice--btn { width: 100%; text-align: left; background: none; }

/* ---------- inputs ---------- */
.pc .pc-input {
  display: block; width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--pc-r-card);
  background: var(--pc-surface); color: var(--pc-ink); box-shadow: inset 0 0 0 1.5px var(--pc-line-strong);
  font: 800 24px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase;
}
.pc .pc-input--body { font: 400 16px/1.3 var(--pc-font-body); letter-spacing: 0; text-transform: none; min-height: 48px; }
.pc textarea.pc-input { padding: 12px 14px; min-height: 88px; resize: vertical; }
.pc .pc-input::placeholder { color: var(--pc-ink-3); opacity: .6; font-weight: 600; }
.pc select.pc-input { appearance: none; -webkit-appearance: none; }

.pc-stepper { display: flex; align-items: center; gap: 12px; }

/* player picker: big constrained choices */
.pc-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pc-picker .pc-pick { min-height: 52px; padding: 6px 8px; font-size: 17px; gap: 6px; }
.pc-picker.is-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pc-picker.is-compact .pc-pick { flex-direction: column; justify-content: center; min-height: 64px; padding: 6px 2px; font-size: 13px; }
.pc .pc-chip { min-width: 44px; } /* 44px tap target for short labels (YES, NO, 3) */
.pc-chips .pc-chip { min-height: 44px; padding: 0 12px; font-size: 15px; }

/* ---------- sheets ---------- */
.pc-sheet-wrap {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 12, 16, .72); animation: pc-fade var(--pc-t-move) var(--pc-ease-snap);
}
.pc-sheet {
  width: 100%; max-width: 560px; max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--pc-ground); color: var(--pc-ink); border-top: 2px solid var(--pc-ink);
  border-radius: 14px 14px 0 0; animation: pc-rise var(--pc-t-move) var(--pc-ease-snap);
}
.pc-sheet.is-tall { height: 92dvh; }
.pc-sheet__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; }
.pc-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.pc-sheet__dock { flex: none; padding: 8px 16px calc(var(--safe-bottom) + 12px); display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--pc-line); }
@keyframes pc-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pc-rise { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- toasts ---------- */
.pc-toasts {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 8px);
  width: calc(100% - 24px); max-width: 536px; display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.pc .pc-toast {
  pointer-events: auto; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px; border-radius: var(--pc-r-card);
  background: var(--pc-ink); color: var(--pc-ground); text-align: left; font: 700 15px/1.3 var(--pc-font-body);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); animation: pc-drop var(--pc-t-move) var(--pc-ease-snap);
}
.pc .pc-toast small { font: 400 13px/1.3 var(--pc-font-body); opacity: .85; }
.pc .pc-toast.is-alert { background: var(--pc-alert); color: var(--pc-on-alert); }
.pc .pc-toast.is-accent { background: var(--pc-accent); color: var(--pc-on-accent); box-shadow: inset 0 0 0 1.5px var(--pc-keyline), 0 6px 24px rgba(0, 0, 0, .35); }
@keyframes pc-drop { from { transform: translateY(-16px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- the six-press code pad ---------- */
.pc-codepad { display: flex; flex-direction: column; gap: 14px; }
.pc-codeslots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pc-codeslot {
  height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--pc-r-tile);
  background: var(--pc-surface); box-shadow: inset 0 0 0 1.5px var(--pc-line-strong);
  font: 900 28px/1 var(--pc-font-matrix); color: var(--pc-accent-ink); text-transform: uppercase;
}
.pc-codeslot.is-cursor { box-shadow: inset 0 0 0 2px var(--pc-accent-ink); }
.pc-padrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 0; }
.pc-dpad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); gap: 2px; }
.pc-dpad .is-u { grid-column: 2; grid-row: 1; }
.pc-dpad .is-l { grid-column: 1; grid-row: 2; }
.pc-dpad__hub { grid-column: 2; grid-row: 2; background: var(--pc-raised); box-shadow: inset 0 0 0 1.5px var(--pc-line-strong); }
.pc-dpad .is-r { grid-column: 3; grid-row: 2; }
.pc-dpad .is-d { grid-column: 2; grid-row: 3; }
.pc .pc-padkey {
  display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--pc-raised);
  box-shadow: inset 0 0 0 1.5px var(--pc-line-strong); color: var(--pc-ink); font: 800 22px/1 var(--pc-font-display);
  transition: transform var(--pc-t-tap) var(--pc-ease-snap);
}
.pc .pc-padkey:active { transform: scale(.94); background: var(--pc-accent); color: var(--pc-on-accent); }
.pc-abpad { display: flex; align-items: center; gap: 14px; padding-top: 22px; }
.pc-abpad .is-b { margin-top: 28px; }
.pc .pc-abpad .pc-padkey { width: 72px; height: 72px; border-radius: 50%; background: var(--pc-accent); color: var(--pc-on-accent); font: 900 30px/1 var(--pc-font-matrix); box-shadow: inset 0 0 0 1.5px var(--pc-keyline); }

/* ---------- hold to peek, hold to confirm ---------- */
.pc .pc-peek { display: flex; align-items: center; width: 100%; min-height: 44px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.pc .pc-peek > * { flex: 1 1 auto; min-width: 0; }
.pc .pc-peek > .pc-power { flex: none; }
.pc .pc-holdbtn { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pc-holdbtn__fill { position: absolute; inset: 0; transform-origin: left center; background: var(--pc-alert); opacity: .35; }

/* ---------- power-up card in the app ---------- */
/* tall enough for the card's full sentences (Double Down is the longest); the art gives way first */
.pc .pc-power.is-app { width: 171px; height: 304px; border-radius: 10px; }
.pc .pc-power.is-app .pc-power__art { overflow: hidden; }
.pc .pc-power.is-app .pc-power__art svg { max-height: 100%; }
.pc .pc-power.is-app .pc-power__head { padding: 10px 10px 0; }
.pc .pc-power.is-app .pc-power__name { padding: 0 10px; font-size: 28px; }
.pc .pc-power.is-app .pc-power__fx { padding: 4px 10px 8px; font-size: 12px; line-height: 1.25; }
.pc .pc-power.is-app .pc-power__code { padding: 8px 0 7px; font-size: 18px; }
.pc .pc-power.is-empty { align-items: center; justify-content: center; gap: 8px; padding: 12px; border-style: dashed; border-color: var(--pc-line-strong); text-align: center; }
/* the face drawn with spans inside the hold-to-peek button */
.pc .pc-power > span.pc-power__name, .pc .pc-power > span.pc-power__fx, .pc .pc-power > span.pc-power__code { display: block; text-align: left; }
.pc .pc-power > span.pc-power__code { text-align: center; }

/* ---------- welcome ---------- */
.pc-welcome-tap { position: absolute; inset: 0; z-index: 1; }
/* tutorial progress dots: the step you are on is the boldest mark in both modes */
.pc-dot { flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--pc-line-strong); }
.pc-dot.is-on { width: 24px; background: var(--pc-accent); box-shadow: inset 0 0 0 1.5px var(--pc-keyline); }
.pc-light .pc-dot:not(.is-on) { background: var(--pc-line); }
/* CUP keeps its yellow in Sun Mode, like the wordmark */
.pc-cup { color: var(--pc-accent-ink); }
/* inline-block, so the fill stays inside the tight .86 line box and never covers the line above */
.pc-light .pc-cup { display: inline-block; background: var(--pc-accent); padding: .03em .08em 0; }
.pc-app.is-bleed { background: var(--pc-ground); }

/* Back beside every Next: a ghost button, 44 px tall. The row: Back, then Continue (or the dots and Next). */
.pc-navrow { display: flex; align-items: center; gap: 10px; }
.pc .pc-back { gap: 4px; padding: 0 14px 0 8px; }
.pc .pc-back .pc-ico { width: 18px; height: 18px; }
.pc .pc-navrow__go { flex: 1; min-width: 0; }
.pc-navrow__dots { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 0; }
/* each dot is a 20 x 44 tap target (seven fit between Back and Next at 390) that jumps to its page */
.pc-dottap { flex: none; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 44px; -webkit-tap-highlight-color: transparent; }
.pc-weekend-hero { display: block; width: 100%; height: auto; border-radius: 8px; }
.pc .pc-navrow__next { min-width: 112px; }
/* on the seat screen (the player's color) the ghost button takes the tile ink */
.pc .pc-btn--ghost.is-onplayer { color: var(--pc-on-player); box-shadow: inset 0 0 0 1.5px var(--pc-on-player); }
/* Welcome 2: Back sits over the tap-anywhere layer; the rest of the strip still taps through */
.pc-attract-foot { flex: none; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 0 16px calc(var(--safe-bottom) + 16px); pointer-events: none; }
.pc-attract-foot > .pc-back { justify-self: start; pointer-events: auto; }

/* Welcome 1: Player detected */
.pc-detected__words { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 0 28px; }
.pc-detected__line { font: 400 26px/1.3 var(--pc-font-body); color: var(--pc-ink-2); }
/* with the figure in, the words keep to the left two thirds, over the fade */
.pc-detected.has-figure .pc-detected__words { padding-right: 45%; gap: 16px; }
.pc-detected.has-figure .pc-detected__line { font-size: 22px; line-height: 1.25; text-shadow: 0 0 10px #000, 0 0 3px #000; }

/* Welcome 3: the countdown, the mask stripe and the sign-off */
.pc-countdown { font-size: 64px; line-height: 1; color: var(--pc-ink); font-variant-numeric: tabular-nums; }
.pc-countdown__after { min-height: 1.35em; opacity: 0; transition: opacity .3s var(--pc-ease-snap); }
.pc-countdown__after.is-on { opacity: 1; }
.pc-maskstripe { flex: none; display: flex; height: 4px; margin: 8px 16px 0; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px var(--pc-keyline); }
.pc-maskstripe > span { flex: 1; }
.pc-signoff { margin-top: 10px; font: 700 13px/1.2 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-ink-3); }

/* Welcome 4b and 4c: the cards in full sentences */
.pc-deck { display: flex; flex-direction: column; gap: 8px; }
.pc-deckcard { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
.pc-deckcard__art { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--pc-line-strong); }
.pc-deckcard__art svg { fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; }
.pc-deckcard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pc-deckcard__head { align-self: stretch; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.pc-deckcard__text { font: 400 14px/1.4 var(--pc-font-body); color: var(--pc-ink); }
.pc-itembox { display: flex; align-items: center; gap: 14px; }
.pc .pc-itembox__q { width: 64px; height: 64px; border-radius: 8px; font-size: 48px; }
.pc-itembox__tagline { font: 800 italic 26px/1.05 var(--pc-font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--pc-accent-ink); }

/* Welcome 5 to 8b: the tutorial pages */
.pc-tut__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pc-tut__boss { display: flex; align-items: center; gap: 14px; }
.pc-tut__item { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 3px solid var(--pc-accent); }
.pc-tut__pill { display: flex; align-items: center; gap: 10px; }

/* the diagrams: inline SVG, every color and face from the tokens */
.pc-dia { display: block; width: 100%; height: auto; overflow: visible; }
.pc-dia text { font-family: var(--pc-font-display); }
.pc-dia--boss { flex: none; width: 104px; }
.pc-dia__block { fill: var(--pc-surface); stroke: var(--pc-line-strong); stroke-width: 1.5; }
.pc-dia__gold { fill: var(--pc-accent); stroke: var(--pc-keyline); stroke-width: 1.5; }
.pc-dia__place { font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; fill: var(--pc-ink-2); }
.pc-dia__num { font-weight: 800; font-size: 44px; fill: var(--pc-ink); }
.pc-dia__num--s { font-size: 20px; }
.pc-dia__unit { font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--pc-ink-3); }
.pc-dia .is-on-gold { fill: var(--pc-on-accent); }
.pc-dia__ground { fill: none; stroke: var(--pc-ink); stroke-width: 2; }
.pc-dia__edge { fill: none; stroke: var(--pc-ink-2); stroke-width: 2; }
.pc-dia__head { fill: var(--pc-ink-2); }
.pc-dia__tag { font-weight: 800; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.pc-dia__tile { stroke: var(--pc-keyline); stroke-width: 1.5; }
.pc-dia__tiletext { font-weight: 800; font-size: 12px; fill: var(--pc-on-player); }
.pc-dia__name { font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; fill: var(--pc-ink); }
.pc-dia__cap { font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--pc-ink-3); }
.pc-dia__label { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; fill: var(--pc-ink); }
.pc-dia__slot { fill: var(--pc-raised); stroke: var(--pc-line); stroke-width: 1; }
/* the pot fills to 5, slot by slot, and starts again; reduced motion shows it full */
.pc-dia__fill { fill: var(--pc-accent); stroke: var(--pc-keyline); stroke-width: 1; animation: pc-pot 4.6s var(--pc-ease-snap) infinite both; }
@keyframes pc-pot { 0%, 6% { opacity: 0; } 14%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pc-dia__chip { fill: var(--pc-accent); stroke: var(--pc-keyline); stroke-width: 1.5; }
.pc-dia__chipring { fill: none; stroke: var(--pc-on-accent); stroke-width: 2; stroke-dasharray: 3 3; }

/* ---------- the pill and its sheet ---------- */
.pc-pillwrap { display: inline-flex; flex: none; }
.pc .pc-pillbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border-radius: var(--pc-r-pill); }
.pc-pillsheet { display: flex; flex-direction: column; gap: 8px; }
.pc-pillsheet__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--pc-r-card); background: var(--pc-surface); border: var(--pc-border); }
.pc-pillsheet__row.is-now { border-color: var(--pc-accent-ink); }
.pc-pillsheet__row .pc-pill { justify-self: start; }

/* ---------- TV stage: 1920 x 1080 scaled to fit ---------- */
.pc-tv-stage { position: fixed; inset: 0; overflow: hidden; background: #0A0C10; }
.pc-tv-stage > .pc-tv { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pc-tv .pc-ticker__track { display: flex; align-items: center; gap: 40px; white-space: nowrap; }

/* ---------- splash ---------- */
.pc-splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .pc-sheet-wrap, .pc-sheet, .pc .pc-toast { animation: none; }
}

/* ---------- TEST CLOCK (SPEC 12.1): red, on every screen while the time machine is set ---------- */
.pc-testclock {
  position: fixed; z-index: 45; left: 0; right: 0; top: 0; padding: calc(var(--safe-top) + 4px) 12px 4px;
  background: var(--pc-alert); color: var(--pc-on-alert); text-align: center;
  font: 800 13px/1.2 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase;
}
/* --pc-testclock-h is the strip's own height below the safe area, measured in app.js (it may wrap) */
body.has-testclock .pc-app .pc-top { padding-top: calc(max(var(--safe-top), 10px) + var(--pc-testclock-h, 26px)); }
body.has-testclock .pc-app .pc-console-top { height: calc(var(--safe-top) + var(--pc-testclock-h, 26px)); }
/* On the TV the red strip sits above the 48px header margin, so nothing moves. */
.pc-testclock.is-tv { position: absolute; z-index: 5; padding: 6px 24px; font-size: 22px; line-height: 1.1; }

/* ---------- TV extras ---------- */
.pc-tv-pill .pc-pill { height: 52px; font-size: 30px; padding: 0 22px; gap: 12px; }
.pc-tv-pill .pc-pill::before { width: 14px; height: 14px; }
.pc-ticker__run { animation: pc-ticker 80s linear infinite; width: max-content; }
@keyframes pc-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .pc-ticker__run { animation: none; } }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* =====================================================================
   THE TURTLE LAYER (docs/TURTLE-LAYER.md): Scott cast the six players as the turtles and their
   sensei. Masks, weapons and the pizza trophy on top of Prime Time; the broadcast look stays.
   Switches live in public/lib/turtle.js (TURTLE); ?turtle=0 turns the whole layer off.
   ===================================================================== */

.pc { --pc-lead-ink: #FFFFFF; --pc-band-ink: #141921; }
.pc.pc-light { --pc-lead-ink: var(--pc-ink); --pc-band-ink: #DADEE6; }

/* glyphs from the sprite (img/brand/mask-glyphs.svg), and the plain dot when it is missing */
.pc-glyph { display: inline-block; flex: none; overflow: visible; vertical-align: middle; }
.pc-glyph-dot { display: inline-block; flex: none; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--pc-keyline); }
.pc-glyphname { white-space: nowrap; }
.pc-glyphname > .pc-nameglyph { margin-right: 3px; position: relative; top: -.06em; }
/* Sun Mode: a hairline of ink around each mask keeps the pale colors (tan, light blue) readable on white */
.pc-light .pc-glyph--mask { filter: drop-shadow(0 0 .5px rgba(10, 12, 16, .9)); }
.pc-pick__marks { display: inline-flex; flex: none; align-items: center; gap: 3px; }
.pc-pick__marks.is-stack { flex-direction: column; gap: 1px; }

/* the Sensei tag on Scott's row */
.pc .pc-tag--sensei { height: 16px; padding: 0 4px; margin-right: 6px; border-width: 1.5px; border-color: var(--p1); border-radius: 3px; font-size: 10.5px; letter-spacing: .08em; color: var(--pc-ink-2); vertical-align: 1px; }
.pc .pc-tag--sensei.is-tv { height: 40px; padding: 0 12px; margin: 0; border-width: 3px; border-radius: 4px; font-size: 26px; vertical-align: middle; }
.pc .pc-tag--sensei.is-tv.is-compact { height: 30px; padding: 0 7px; border-width: 2.5px; font-size: 19px; }
.pc .is-tint:not(.is-you) .pc-tag--sensei { color: inherit; border-color: currentColor; }
.pc .pc-glyphname > .pc-tag--sensei { margin: 0 0 0 6px; }

/* the leader row in the leader's mask color: 22 percent over the surface, a 3 px bar, light text */
.pc .pc-row.is-leader.is-tint:not(.is-you),
.pc .pc-tv-row.is-leader.is-tint {
  background: var(--pc-surface);
  background: color-mix(in srgb, var(--lead) 22%, var(--pc-surface));
  border-color: color-mix(in srgb, var(--lead) 45%, var(--pc-line));
  color: var(--pc-lead-ink);
  box-shadow: inset 3px 0 0 var(--lead);
}
.pc .pc-row.is-leader.is-tint.is-you { box-shadow: inset 3px 0 0 var(--lead); }
.pc .pc-row.is-leader.is-tint .pc-row__total { color: inherit; }
.pc .pc-row.is-leader.is-tint:not(.is-you) .pc-row__sub { color: inherit; opacity: .82; }
.pc .pc-tv-row.is-leader.is-tint .pc-tv-row__cell { color: inherit; }

/* the bandana: a darker band of the seat color across the top of every P1 to P6 tile */
html.pc-t-tiles .pc .pc-tile:is(.p1, .p2, .p3, .p4, .p5, .p6) {
  box-shadow: inset 0 4px 0 color-mix(in srgb, var(--p) 58%, #0A0C10), inset 0 0 0 1.5px var(--pc-keyline);
}
html.pc-t-tiles .pc .pc-tile--s:is(.p1, .p2, .p3, .p4, .p5, .p6) { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--p) 58%, #0A0C10), inset 0 0 0 1.5px var(--pc-keyline); }
html.pc-t-tiles .pc .pc-tile--l:is(.p1, .p2, .p3, .p4, .p5, .p6) { box-shadow: inset 0 5px 0 color-mix(in srgb, var(--p) 58%, #0A0C10), inset 0 0 0 1.5px var(--pc-keyline); }
html.pc-t-tiles .pc .pc-tile--xl:is(.p1, .p2, .p3, .p4, .p5, .p6) { box-shadow: inset 0 8px 0 color-mix(in srgb, var(--p) 58%, #0A0C10), inset 0 0 0 1.5px var(--pc-keyline); }

/* Welcome 4, 11 and Press Start: mask and weapon beside the seat tile */
.pc-seatmarks { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pc-seatmark { flex: none; width: 88px; height: 88px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--pc-on-player); }
.pc-seatmarks.is-ground { gap: 16px; }

/* one-color silhouettes drawn through a CSS mask (the turtles band) */
.pc-silhouette { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; pointer-events: none; }
/* brand art keeps its own shape whatever box it gets (a PNG override may not match the SVG's) */
.pc .pc-art { object-fit: contain; }
/* Welcome 1: Philip's figure (shredder.png, 1152 x 1728, white line art on solid black) anchored
   bottom right at 75 percent of the screen height, so the pointing hand sits near the middle. The
   screen is pure #000000, so the picture's black melts into it; a fade from the left keeps the
   Department's words readable over the figure. */
.pc .pc-shredder.is-png { position: absolute; right: 0; bottom: 0; height: 75%; width: auto; max-width: none; pointer-events: none; user-select: none; }
.pc-shredder-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #000 0%, #000 22%, rgba(0, 0, 0, .84) 44%, rgba(0, 0, 0, .4) 62%, rgba(0, 0, 0, 0) 80%); }
/* the old SVG drawing, only while TURTLE.shredderSvg is on: dimmed, behind the words */
.pc .pc-shredder.is-svg { position: absolute; right: -24%; bottom: 12%; height: 60%; width: auto; max-width: none; opacity: .34; pointer-events: none; user-select: none; }

/* Welcome 2: THE PARADISE CUP, the shell tile (img/brand/shell-pattern.svg) through the letters at
   low contrast: a 74 percent veil of the letter's own ink over the tile keeps every word readable.
   Only once the tile has loaded (welcome.js adds is-shell) and only where the browser clips
   backgrounds to text and mixes colors; anywhere else the letters stay plain. */
.pc-attract-word { margin: 0; font: 800 italic 92px/.86 var(--pc-font-display); text-transform: uppercase; letter-spacing: .01em; }
.pc-attract-word .pc-shelltext { --shell-ink: var(--pc-ink); }
.pc-attract-word .pc-cup .pc-shelltext { --shell-ink: var(--pc-accent-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) and (color: color-mix(in srgb, red 50%, transparent)) {
  .pc-attract-word.is-shell .pc-shelltext {
    /* the italic letters lean past their own box: pad the painted area so no corner goes blank */
    padding: 0 .12em; margin: 0 -.12em;
    background-image: linear-gradient(color-mix(in srgb, var(--shell-ink) 74%, transparent) 0 0), url("/img/brand/shell-pattern.svg"), linear-gradient(var(--shell-ink) 0 0);
    background-size: auto, 48px auto, auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* Welcome 2: the turtles band low behind the wordmark, the attract line under it */
.pc-attract-mark { position: relative; width: 100%; display: flex; justify-content: center; }
/* the column is its own stacking context (isolation), so z-index -1 keeps the band under every word in it */
.pc-attract-band { position: absolute; z-index: -1; left: 50%; bottom: -22px; width: calc(100% + 40px); max-width: 560px; transform: translateX(-50%); background: var(--pc-band-ink); }
.pc-attract-line { font: 700 italic 21px/1.1 var(--pc-font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--pc-ink); text-wrap: balance; }

/* the cup in its mask, drawn inline so the outline follows the ink token */
.pc-logo-mask > svg { display: block; width: 100%; height: 100%; }

/* ---------- the four call-outs: a dot-matrix flash, marquee yellow on near-black ---------- */
.pc.pc-callout-layer { position: fixed; z-index: 70; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; background: none; }
.pc-callout-live { width: 100%; max-width: 560px; padding: 0 14px; }
.pc-callout {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px;
  background: #0A0C10; color: #FFD21F; box-shadow: 0 0 0 2px #FFD21F, 0 14px 44px rgba(0, 0, 0, .6);
  animation: pc-callout 3s var(--pc-ease-snap) both;
}
.pc-callout__bulbs { align-self: stretch; height: 8px; background: radial-gradient(circle at 4px 4px, #FFD21F 0 2.4px, transparent 2.9px) 0 0/12px 8px repeat-x; }
.pc-callout__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pc-callout__mark { display: inline-flex; align-items: center; gap: 4px; color: #FFD21F; }
.pc-callout__word { font: 900 36px/1 var(--pc-font-matrix); letter-spacing: .05em; text-transform: uppercase; text-align: center; white-space: nowrap; }
.pc-callout__line { font: 400 14px/1.3 var(--pc-font-body); color: #F5F7FA; text-align: center; text-wrap: balance; }
@keyframes pc-callout { 0% { opacity: 0; transform: scale(.94); } 10% { opacity: 1; transform: none; } 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.98); } }
/* the TV: inside the 1920 x 1080 stage, 5 seconds */
.pc-callout-live.is-tv { position: absolute; z-index: 20; inset: 0; max-width: none; padding: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pc-callout-live.is-tv .pc-callout { width: 1500px; gap: 28px; padding: 36px 56px; border-radius: 20px; box-shadow: 0 0 0 6px #FFD21F, 0 30px 120px rgba(0, 0, 0, .7); }
.pc-callout-live.is-tv .pc-callout__bulbs { height: 16px; background-image: radial-gradient(circle at 8px 8px, #FFD21F 0 4.8px, transparent 5.8px); background-size: 24px 16px; }
.pc-callout-live.is-tv .pc-callout__body { gap: 24px; }
.pc-callout-live.is-tv .pc-callout__word { font-size: 148px; }
.pc-callout-live.is-tv .pc-callout__line { font-size: 40px; }

/* the tag a call-out leaves on its Wire row */
.pc .pc-tag--call { gap: 5px; background: #0A0C10; border-color: #FFD21F; color: #FFD21F; font: 900 12px/1 var(--pc-font-matrix); letter-spacing: .06em; }
.pc-light .pc-tag--call { border-color: #0A0C10; }
.pc .pc-tag--call .pc-glyph { width: 14px; height: 14px; }

/* the TV: names, the idle art, the finale's COWABUNGA */
.pc-tv-name { display: flex; align-items: center; gap: 16px; }
.pc-tv-name__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tv-cowabunga { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 26px 9px; border-radius: 12px; background: #0A0C10; color: #FFD21F; box-shadow: 0 0 0 4px #FFD21F; }
.pc-tv-cowabunga__word { font: 900 84px/.86 var(--pc-font-matrix); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pc-tv-cowabunga__line { font: 900 24px/1 var(--pc-font-matrix); letter-spacing: .06em; text-transform: uppercase; color: #F5F7FA; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pc-callout { animation: none; } }

/* =====================================================================
   THE GENERATED ART (Oct 7): portraits, villains, the trophy, the splash, the
   Turtles wordmark. Paths in public/lib/turtle.js (PORTRAIT, ART2); each piece has a
   switch in TURTLE and falls back to the plain Prime Time look.
   ===================================================================== */

/* a player's face: a circle portrait, ringed 2 px in the seat color */
.pc .pc-avatar { display: inline-block; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--p, var(--pc-line-strong)); background: #0A0C10; object-fit: cover; vertical-align: middle; }
.pc-light .pc-avatar { box-shadow: 0 0 0 1px var(--pc-keyline); }
.pc .pc-avatar.is-tv { border-width: 4px; }
/* inline before a name (the Wire, NOW, bounty claims): the ring thins so the face stays readable */
.pc .pc-avatar--inline { border-width: 1.5px; }
.pc-glyphname > .pc-avatar--inline { margin-right: 4px; top: -.08em; }
/* Welcome 4 and 11: the portrait on the seat color, ringed in the tile ink */
.pc-seatportrait { display: block; flex: none; width: 168px; height: 168px; border-radius: 50%; object-fit: cover; background: #0A0C10; border: 4px solid var(--pc-on-player); }

/* the villains: round badges, a thin ring in alert red (the Foot) or the boss's own magenta (Krang) */
.pc .pc-villain { display: block; flex: none; border-radius: 50%; object-fit: cover; background: #0A0C10; border: 2px solid var(--pc-alert); }
.pc .pc-villain.is-onaccent { border-color: var(--pc-on-accent); }
.pc .pc-villain.is-boss { border-color: #E04FB0; }
.pc .pc-villain.is-tv { border-width: 4px; }
.pc-lineup { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; border: 2px solid #E04FB0; background: #000; object-fit: cover; }
.pc-bossart { display: flex; align-items: center; gap: 14px; }

/* Welcome 1: the group shot across the top, melting into the black (the figure and the words stay as they were) */
.pc-detected__splash { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .35) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .35) 78%, transparent 100%); }
.pc-detected.has-splash .pc-detected__words { padding-top: 150px; }

/* the TV's idle moment: the group shot behind the board, dimmed */
.pc-tv-splash { position: absolute; inset: 0; background-size: cover; background-position: center 40%; opacity: .26; pointer-events: none; }
.pc-tv .pc-ticker { position: relative; }

/* Welcome 2: the six silhouettes as a picture (turtles-silhouettes.png, white on clear), low and quiet */
.pc .pc-attract-band { position: absolute; z-index: -1; left: 50%; bottom: -14px; width: calc(100% + 24px); max-width: 560px; height: auto; transform: translateX(-50%); background: none; opacity: .2; }
.pc .pc-attract-band.is-svg { opacity: 1; }
.pc-light .pc-attract-band.is-png { filter: invert(1); opacity: .14; }

/* ---------- the Turtles face: an accent only (header wordmark, Welcome title, TV title, finale) ---------- */
@font-face { font-family: "Turtles"; src: url("/fonts/turtles.woff2") format("woff2"); font-display: swap; }
.pc { --pc-font-turtles: "Turtles", "Barlow Condensed", "Arial Narrow", sans-serif; }
/* the 1987 treatment: yellow to orange fill, over a copy in a thick ink outline with a drop shadow */
.pc-tw { position: relative; z-index: 0; display: inline-block; font-family: var(--pc-font-turtles); font-style: normal; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; color: #FFC21F; }
.pc-tw__fill { position: relative; z-index: 1; display: inline-block;
  background: linear-gradient(180deg, #FFE45C 0%, #FFD21F 38%, #FF9A1F 78%, #FF7A1A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pc-tw::before { content: attr(data-text); position: absolute; z-index: -1; left: 0; top: 0; -webkit-text-fill-color: #0A0C10; color: #0A0C10;
  -webkit-text-stroke: .17em #0A0C10; text-shadow: 0 .09em 0 #0A0C10, .02em .13em .1em rgba(0, 0, 0, .45); }
.pc-wordmark.is-turtles { font: 400 17px/1 var(--pc-font-turtles); font-style: normal; padding: 3px 4px 5px 3px; overflow: visible; }
.pc-lockup.is-turtles { position: relative; isolation: isolate; padding: 0 8px; margin-left: -8px; }
/* the shell tile behind the header wordmark, faint, fading out to the right */
.pc-lockup.is-turtles::before { content: ""; position: absolute; z-index: -1; inset: -4px -8px -4px 0; border-radius: 6px; pointer-events: none;
  background: url("/img/brand/pattern-shell.webp") 0 0 / 48px 48px; opacity: .22;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%); mask-image: linear-gradient(90deg, #000 30%, transparent 100%); }
.pc-light .pc-lockup.is-turtles::before { opacity: .16; }
.pc-wordmark.is-turtles.is-tv { font-size: 58px; padding: 6px 10px 12px 4px; }
.pc-attract-word.is-turtles { font: 400 66px/1 var(--pc-font-turtles); }
.pc-attract-word.is-turtles .pc-tw.is-the { font-size: 36px; }
.pc-attract-word.is-turtles .pc-tw.is-cup { font-size: 92px; line-height: .95; }
.pc-finale-title.is-turtles { margin: 0; font: 400 96px/1 var(--pc-font-turtles); white-space: nowrap; padding-bottom: 10px; }

/* ---------- ITEMS play sheet: targets two up, a tighter pad, so the pad and A/B sit above the dock on a 390 x 844 phone ---------- */
.pc-playtargets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pc .pc-playtargets .pc-pick { width: 100%; min-height: 48px; padding: 4px 8px; gap: 4px; font-size: 14.5px; line-height: 1.1; white-space: normal; text-align: left; justify-content: flex-start; }
.pc .pc-playtargets .pc-pick > span { min-width: 0; }
.pc-codepad.is-compact { gap: 10px; }
.pc-codepad.is-compact .pc-codeslot { height: 44px; font-size: 24px; }
.pc-codepad.is-compact .pc-padrow { padding: 0 8px; }
.pc-codepad.is-compact .pc-dpad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); }
.pc-codepad.is-compact .pc-abpad { padding-top: 0; }
.pc-codepad.is-compact .pc-abpad .is-b { margin-top: 30px; }
.pc .pc-codepad.is-compact .pc-abpad .pc-padkey { width: 64px; height: 64px; }

/* =====================================================================
   DESIGN BATCH B (Oct 7): NOW, the tab bar, PLAN's day view, COMMISH and the
   launch reveal. Ported from the approved mockups; tokens from paradise.css.
   ===================================================================== */
.pc {
  --pc-plum: #1B0E22;              /* the wordmark's dark outline: deep plum, for hard drop shadows */
  --pc-red: #E8352B;               /* the bulletin tag, counts and the now-line */
  --pc-slate: #2A3442;             /* house cards on the timeline */
  --pc-slate-ink: #DCE3EE;
  --pc-ticket: #FFD21F;            /* excursion tickets */
}
.pc.pc-light, .pc-light .pc { --pc-slate: #DDE3EC; --pc-slate-ink: #0A0C10; }

/* the arcade icon set (components/icons.js ArcIco) */
.pc-aico { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.pc-aico .pc-aico__fill { fill: currentColor; }

/* ---------- header right: the LIVE dot and your avatar ---------- */
.pc-hdr__right--you { gap: 4px; }
.pc .pc-livedot { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; font: 700 12px/1 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-live); }
.pc-livedot i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); animation: pc-halo 1.6s ease-in-out infinite; }
.pc .pc-livedot.is-syncing { color: var(--pc-accent-ink); }
.pc .pc-livedot.is-offline { color: var(--pc-alert-ink); }
.pc-livedot.is-offline i { border-radius: 0; animation: none; }
.pc .pc-youbtn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
@keyframes pc-halo { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pc-livedot i { animation: none; } }
.pc-hdr--now { height: 52px; }
.pc-hdr--now .pc-wordmark.is-turtles { font-size: 23px; }

/* the player sheet behind the avatar */
.pc-yousheet { display: flex; align-items: center; gap: 16px; }
.pc-yousheet__stats { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-yousheet__stats > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-yousheet__k { font: 700 12px/1.1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-yousheet__v { font: 800 28px/1 var(--pc-font-display); }
.pc-yousheet__v small { font-size: 14px; color: var(--pc-ink-3); }
.pc-menu { display: flex; flex-direction: column; border-top: 1px solid var(--pc-line); }
.pc .pc-menu__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 2px; border-bottom: 1px solid var(--pc-line); font: 700 19px/1 var(--pc-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--pc-ink); text-align: left; }
.pc-menu__row > span:not(.pc-switch) { flex: 1; }
.pc-menu__row .pc-aico:first-child { color: var(--pc-accent-ink); }

/* ---------- the bulletin: the Commissioner's note as a retro TV news break ---------- */
.pc-bulletin {
  position: relative; display: flex; align-items: stretch; min-height: 56px; overflow: hidden; color: #F5F7FA;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), linear-gradient(90deg, #13204A, #0E1630);
  border-top: 3px solid var(--pc-accent); border-bottom: 3px solid var(--pc-accent);
}
.pc-light .pc-bulletin { box-shadow: 0 0 0 1.5px #0A0C10; }
.pc-bulletin__tag {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 80px; padding: 6px 4px 6px 0; background: var(--pc-red); color: #FFFFFF;
  font: 800 14px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.pc-bulletin__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 4px 7px 6px; }
.pc-bulletin__text { font: 700 16px/1.2 var(--pc-font-body); }
.pc-bulletin__meta { font: 700 12px/1.1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; color: #FFD21F; }
.pc .pc-bulletin__x { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; color: #B9C1CE; }

/* ---------- the UP NEXT card ---------- */
.pc .pc-hero { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-width: 1.5px; }
.pc-hero__eyebrow { display: flex; align-items: center; gap: 10px; padding-right: 100px; min-width: 0; }
.pc-hero__eyebrow .pc-label { color: var(--pc-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-shotbadge {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px;
  border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--pc-accent-ink); color: var(--pc-accent-ink);
  font: 800 12px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase;
}
.pc-hero__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-hero__code { margin: 0; min-width: 0; font: 800 46px/.92 var(--pc-font-display); text-transform: uppercase; letter-spacing: .005em; overflow-wrap: anywhere; }
.pc-hero__glyph { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.pc-hero__glyph.is-car { background: var(--pc-ticket); color: #0A0C10; box-shadow: inset 0 0 0 1.5px var(--pc-keyline), 3px 3px 0 var(--pc-plum); }
.pc-hero__glyph.is-house { background: var(--pc-slate); color: var(--pc-slate-ink); box-shadow: inset 0 0 0 1.5px var(--pc-keyline); }
.pc-hero__then { margin-top: -4px; font: 400 14px/1.3 var(--pc-font-body); color: var(--pc-ink-2); }
.pc-hero__real { margin-top: -4px; font: 700 14px/1.3 var(--pc-font-body); color: var(--pc-accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px dotted var(--pc-line-strong); border-bottom: 1px solid var(--pc-line); padding: 10px 0; }
.pc-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 8px; }
.pc-fact + .pc-fact { border-left: 1px solid var(--pc-line); }
.pc-fact:first-child { padding-left: 0; }
.pc-fact__k { font: 700 12px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-fact__v { font: 800 22px/1 var(--pc-font-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-fact__sub { font: 700 12px/1.1 var(--pc-font-display); letter-spacing: .04em; color: var(--pc-ink-2); }
.pc-fact:first-child .pc-fact__sub { color: var(--pc-accent-ink); }
.pc .pc-pack { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; text-align: left; color: var(--pc-ink); }
.pc-pack__k { flex: none; font: 700 12px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-pack__text { flex: 1; min-width: 0; font: 400 14px/1.3 var(--pc-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-pack.is-open { align-items: flex-start; }
.pc-pack.is-open .pc-pack__text { white-space: normal; }
.pc-pack.is-open .pc-pack__chev { transform: rotate(180deg); }
.pc-pack .pc-aico { color: var(--pc-ink-3); }

/* ---------- the standings card ---------- */
.pc .pc-stand { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; }
.pc-stand__row { display: flex; align-items: center; gap: 12px; }
.pc-stand__row > .pc-aico { color: var(--pc-ink-3); }
.pc-stand__place { flex: none; font: 800 44px/.9 var(--pc-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pc-stand__place small { font-size: 20px; margin-left: 1px; }
.pc-stand__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pc-stand__pts { font: 800 24px/1 var(--pc-font-display); text-transform: uppercase; }
.pc-stand__pts small { font-size: 15px; color: var(--pc-ink-2); letter-spacing: .06em; }
.pc-stand__line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 700 15px/1.1 var(--pc-font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--pc-ink-2); }
.pc-stand__who { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pc-stand__line b { color: var(--pc-ink); }
.pc-stand__left { font: 700 12px/1 var(--pc-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-3); }

/* ---------- the kit strip ---------- */
.pc-kitrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc .pc-kit { display: flex; align-items: center; gap: 7px; min-height: 48px; padding: 6px 8px; border-radius: 10px; background: var(--pc-surface); border: var(--pc-border); color: var(--pc-ink); min-width: 0; }
.pc-kit .pc-aico { color: var(--pc-accent-ink); }
.pc-kit__n { font: 800 22px/1 var(--pc-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-kit__n small { font-size: 13px; color: var(--pc-ink-3); }
.pc-kit__k { min-width: 0; font: 700 11px/1.05 var(--pc-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-2); }
.pc-kit.is-empty .pc-aico, .pc-kit.is-empty .pc-kit__n { color: var(--pc-ink-3); }
.pc .pc-kit.is-full { box-shadow: inset 0 0 0 1.5px var(--pc-accent-ink); }
.pc .pc-dock .pc-action { box-shadow: inset 0 0 0 1.5px var(--pc-keyline), 0 3px 0 var(--pc-plum); }

/* ---------- the tab bar: arcade icons, the active tab on a pill in your player color ---------- */
.pc .pc-tabbar.is-arcade { padding-left: 2px; padding-right: 2px; }
.pc .pc-atab { gap: 3px; justify-content: center; color: var(--pc-ink-3); font: 700 12px/1 var(--pc-font-display); letter-spacing: .07em; }
.pc .pc-atab.is-active::before { display: none; }
.pc-atab__pill { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; transition: background-color var(--pc-t-move) var(--pc-ease-snap); }
.pc .pc-atab.is-active { color: var(--pc-ink); }
.pc .pc-atab.is-active .pc-atab__pill { background: var(--p, var(--pc-accent)); color: #0A0C10; box-shadow: inset 0 0 0 1.5px var(--pc-keyline), 0 2px 0 var(--pc-plum); }
.pc .pc-atab.is-active .pc-atab__label { font-weight: 800; }
.pc-tabbar.is-six .pc-atab__pill { width: 50px; }
.pc .pc-tabbar.is-six .pc-atab { font-size: 11.5px; letter-spacing: .05em; }
.pc .pc-atab__count { top: 2px; margin-left: 10px; background: #D12D24; color: #FFFFFF; box-shadow: 0 0 0 2px var(--pc-surface); }
@media (prefers-reduced-motion: reduce) { .pc-atab__pill { transition: none; } }

/* ---------- PLAN: the Day / Week switch and the chunky day tabs ---------- */
.pc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--pc-surface); border: var(--pc-border); }
.pc .pc-seg__opt { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; font: 800 17px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-2); }
.pc .pc-seg__opt.is-on { background: var(--pc-ink); color: var(--pc-ground); }
.pc-daytabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding-top: 6px; }
.pc .pc-daytab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: 12px; background: var(--pc-surface); box-shadow: inset 0 0 0 2px var(--pc-line-strong); color: var(--pc-ink-2); }
.pc-daytab__wd { font: 800 14px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; }
.pc-daytab__n { font: 800 26px/1 var(--pc-font-display); color: var(--pc-ink); }
.pc .pc-daytab.is-on { background: var(--pc-accent); color: #0A0C10; box-shadow: inset 0 0 0 2px var(--pc-plum), 0 4px 0 var(--pc-plum); transform: translateY(-2px); }
.pc-daytab.is-on .pc-daytab__n { color: #0A0C10; }
.pc-daytab.is-today:not(.is-on)::after { content: ""; position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-red); }
.pc-lvl { position: absolute; top: -7px; right: -4px; display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 5px; background: #0A0C10; color: #FFD21F; font: 800 11.5px/1 var(--pc-font-display); font-style: normal; letter-spacing: .04em; box-shadow: 0 0 0 1.5px var(--pc-ground); }
.pc-light .pc-lvl { box-shadow: 0 0 0 1.5px #0A0C10; }

/* ---------- PLAN: the day timeline ---------- */
.pc-tl { position: relative; display: flex; flex-direction: column; padding: 4px 0 12px; }
.pc-tl::before { content: ""; position: absolute; top: 14px; bottom: 18px; left: 66px; width: 2px; background: var(--pc-line); }
.pc .pc-tl__row { position: relative; display: grid; grid-template-columns: 58px 18px minmax(0, 1fr); align-items: start; width: 100%; padding: 6px 0; text-align: left; color: inherit; }
.pc-tl__time { display: flex; flex-direction: column; align-items: flex-end; padding: 8px 6px 0 0; font: 800 18px/1 var(--pc-font-display); font-variant-numeric: tabular-nums; }
.pc-tl__time small { font-size: 12px; letter-spacing: .1em; color: var(--pc-ink-3); margin-top: 2px; }
.pc-tl__node { position: relative; z-index: 1; justify-self: center; width: 10px; height: 10px; margin-top: 12px; background: var(--pc-ground); box-shadow: inset 0 0 0 2px var(--pc-line-strong); transform: rotate(45deg); }
.pc-tl__row.is-exc .pc-tl__node { background: var(--pc-ticket); box-shadow: inset 0 0 0 2px var(--pc-plum); }
.pc-tl__row:is(.is-meal, .is-note) .pc-tl__node { width: 6px; height: 6px; margin-top: 10px; }
.pc-tl__row:is(.is-meal, .is-note) .pc-tl__time { padding-top: 4px; font-size: 15px; color: var(--pc-ink-2); }
.pc-tl__row:is(.is-meal, .is-note) .pc-tl__time small { font-size: 11px; }
.pc-tl__row.is-past .pc-tl__body, .pc-tl__row.is-past .pc-tl__time { opacity: .55; }
.pc-tl__row.is-canceled .pc-ticket__name, .pc-tl__row.is-canceled .pc-housecard__name { text-decoration: line-through; }
.pc-tl__body { min-width: 0; }
.pc-tl__row.is-next .pc-tl__time { color: var(--pc-accent-ink); }
.pc-tl-real { display: inline-block; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: .85; }
.pc-ticket .pc-tl-real { font-size: .8em; }

/* the ticket: an excursion */
.pc-ticket {
  position: relative; display: flex; min-height: 76px; background: var(--pc-ticket); color: #0A0C10; border-radius: 8px;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
}
.pc-tl__row.is-next .pc-ticket { background: linear-gradient(180deg, #FFE14D, #FFC21F); }
.pc-ticket__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 9px 8px 10px 16px; }
.pc-ticket__eyebrow { display: flex; align-items: center; gap: 6px; font: 800 11.5px/1 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; color: #3A2E00; }
.pc-ticket__tag, .pc-housecard__tag { display: inline-block; padding: 3px 6px 2px; background: #0A0C10; color: #FFD21F; font: 800 11.5px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; transform: skewX(-10deg); }
.pc-housecard__tag { align-self: flex-start; background: var(--pc-accent); color: #0A0C10; }
.pc-ticket__name { font: 800 23px/1 var(--pc-font-display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.pc-ticket__then { font: 700 15px/1.1 var(--pc-font-display); text-transform: uppercase; letter-spacing: .03em; }
.pc-ticket__when { font: 700 15px/1.1 var(--pc-font-display); letter-spacing: .04em; text-transform: uppercase; }
.pc-ticket__when b { font-weight: 800; }
.pc-ticket__stub { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-left: 2px dashed rgba(10, 12, 16, .55); }

/* the house card */
.pc-housecard { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--pc-slate); color: var(--pc-slate-ink); }
.pc-light .pc-housecard { box-shadow: inset 0 0 0 1.5px #0A0C10; }
.pc-housecard__glyph { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.pc-light .pc-housecard__glyph { background: rgba(10, 12, 16, .08); }
.pc-housecard__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-housecard__name { font: 800 20px/1.05 var(--pc-font-display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.pc-housecard__sub { font: 400 13.5px/1.3 var(--pc-font-body); opacity: .85; }
.pc-aico--inline { display: inline-block; vertical-align: -2px; }
.pc-tl__row.is-next .pc-housecard { box-shadow: inset 0 0 0 2px var(--pc-accent-ink); }

/* meals and housekeeping: slim, inline, no card */
.pc-tl-slim { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 4px; font: 700 15px/1.1 var(--pc-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-ink-2); }
.pc-tl-slim .pc-aico { color: var(--pc-ink-3); }

/* the result chip on past events, and the small tags */
.pc-tl-chip { align-self: flex-start; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: #0A0C10; color: #F5F7FA; font: 800 12px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; }
.pc-housecard .pc-tl-chip { background: var(--pc-ink); color: var(--pc-ground); }
.pc-tl__row.is-past .pc-tl__body:has(.pc-tl-chip) { opacity: .7; }
.pc-tl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-tl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 5px; background: rgba(10, 12, 16, .12); font: 800 11.5px/1.1 var(--pc-font-display); letter-spacing: .06em; text-transform: uppercase; }
.pc-tl-tag.is-accent { background: #0A0C10; color: #FFD21F; }

/* the now-line: always on top */
.pc-nowline { position: relative; z-index: 5; height: 2px; margin: 10px 0; background: var(--pc-red); box-shadow: 0 0 8px rgba(232, 53, 43, .6); }
.pc-nowline__tag { position: absolute; left: 0; top: -11px; height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 4px; background: var(--pc-red); color: #FFFFFF; font: 800 12px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* ---------- COMMISH: the Commissioner's tab ---------- */
.pc .pc-addbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; border-radius: 12px; flex: none;
  background: var(--pc-accent); color: #0A0C10; font: 800 26px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px var(--pc-plum), 0 4px 0 var(--pc-plum);
}
.pc .pc-addbtn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--pc-plum), 0 2px 0 var(--pc-plum); }
/* the venue switch: at the house or out */
.pc-venue { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--pc-surface); border: var(--pc-border); }
.pc-venue__k { font: 700 12px/1 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-venue__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pc .pc-venue__opt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 10px; background: var(--pc-raised); box-shadow: inset 0 0 0 2px var(--pc-line-strong); color: var(--pc-ink-2); font: 800 20px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; }
.pc .pc-venue__opt.is-on { background: var(--pc-slate); color: var(--pc-slate-ink); box-shadow: inset 0 0 0 2px var(--pc-accent-ink), 0 3px 0 var(--pc-plum); }
.pc .pc-venue__opt.is-on.is-out { background: var(--pc-ticket); color: #0A0C10; box-shadow: inset 0 0 0 2px var(--pc-plum), 0 3px 0 var(--pc-plum); }
.pc-venue__now { font: 700 13.5px/1.3 var(--pc-font-body); color: var(--pc-ink); }
.pc-venue__pick { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--pc-line); }
/* the blocks */
.pc-block { border-radius: 10px; background: var(--pc-surface); border: var(--pc-border); }
.pc .pc-block__head { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 8px; row-gap: 3px; align-items: center; width: 100%; min-height: 60px; padding: 10px 12px; text-align: left; color: var(--pc-ink); }
.pc-block__ico { grid-row: 1 / span 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--pc-raised); color: var(--pc-accent-ink); }
.pc-light .pc-block__ico { background: #0A0C10; color: #FFD21F; }
.pc-block__title { display: flex; align-items: center; gap: 8px; font: 800 20px/1 var(--pc-font-display); letter-spacing: .04em; text-transform: uppercase; }
.pc-block__sub { grid-column: 2; font: 400 13px/1.25 var(--pc-font-body); color: var(--pc-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-block__chev { grid-column: 3; grid-row: 1 / span 2; color: var(--pc-ink-3); transition: transform var(--pc-t-move); }
.pc-block.is-open .pc-block__chev { transform: rotate(180deg); }
.pc-block__body { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 14px; }
.pc-block.is-flat .pc-block__body .pc-card { background: var(--pc-raised); }
.pc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 11px; background: #D12D24; color: #FFFFFF; font: 800 14px/1 var(--pc-font-display); letter-spacing: 0; }
.pc-count.is-zero { background: var(--pc-raised); color: var(--pc-ink-3); }
.pc-bulletin-mini { display: flex; align-items: center; gap: 8px; padding-right: 8px; border-radius: 6px; background: #13204A; color: #F5F7FA; font: 700 14px/1.2 var(--pc-font-body); overflow: hidden; }
.pc-bulletin-mini__text { flex: 1; min-width: 0; padding: 6px 0; }
.pc-bulletin-mini small { font: 700 12px/1 var(--pc-font-display); color: #FFD21F; letter-spacing: .06em; white-space: nowrap; }
.pc-bulletin-mini__tag { flex: none; align-self: stretch; display: flex; align-items: center; gap: 5px; padding: 8px 14px 8px 8px; background: var(--pc-red); color: #FFFFFF; font: 800 12px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
/* the pickup game sheet */
.pc-field { display: flex; flex-direction: column; gap: 8px; }
.pc-field__k { font: 700 13px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-soon { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--pc-raised); font: 700 14px/1.3 var(--pc-font-body); color: var(--pc-ink); }
.pc-soon .pc-aico { flex: none; color: var(--pc-accent-ink); }
.pc .pc-addbtn.is-off { background: var(--pc-raised); color: var(--pc-ink-3); box-shadow: inset 0 0 0 2px var(--pc-line-strong); }
.pc-pu__warn { color: var(--pc-alert-ink); }
/* a pickup game card (SPEC 12.50): slab, name, status tag, what it pays, the six seats */
.pc-pu { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--pc-accent); }
.pc-pu.is-canceled { border-left-color: var(--pc-line-strong); opacity: .8; }
.pc-pu.is-canceled .pc-h3 { text-decoration: line-through; }
.pc-pu__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-pu__meta { font: 700 13px/1.3 var(--pc-font-body); color: var(--pc-ink-2); }
.pc-pu__lines { display: flex; flex-direction: column; gap: 4px; font: 400 14px/1.3 var(--pc-font-body); color: var(--pc-ink); }
.pc-pu__lines .pc-label { display: inline-block; min-width: 64px; }
.pc-pu__lines b { font: 800 15px/1 var(--pc-font-display); color: var(--pc-accent-ink); }
.pc-pu__lines .is-out { color: var(--pc-ink-3); }
.pc-pu__board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.pc-pu__seat { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; border-radius: 6px; background: var(--pc-raised); font: 700 13px/1.1 var(--pc-font-body); }
.pc-pu__seat b { margin-left: auto; font: 800 16px/1 var(--pc-font-display); font-variant-numeric: tabular-nums; }
.pc-pu__seat.is-out { background: none; box-shadow: inset 0 0 0 1px var(--pc-line); color: var(--pc-ink-3); }
/* COMMISH flash bounty controls (SPEC 12.51) */
.pc-flashctl__next { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--pc-accent); }
.pc-flashctl__at { font: 800 30px/1 var(--pc-font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--pc-accent-ink); font-variant-numeric: tabular-nums; }
.pc-flashctl__list { display: flex; flex-direction: column; gap: 4px; }
.pc-flashctl__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--pc-raised); font: 700 13px/1.2 var(--pc-font-body); }
.pc-flashctl__row b { font: 800 13px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; }
.pc-flashctl__row.is-next { box-shadow: inset 0 0 0 2px var(--pc-accent-ink); }
.pc-flashctl__row.is-dim { color: var(--pc-ink-3); background: none; box-shadow: inset 0 0 0 1px var(--pc-line); }
.pc-pu__seat.is-out b { font: 700 11px/1 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink-3); }

/* ---------- The launch reveal (#/launch/a to d) ---------- */
.pc-launch { position: relative; background: #000; align-items: center; overflow: hidden; color: #F5F7FA; text-align: center; }
.pc-launch__tap { position: absolute; inset: 0; z-index: 1; }
.pc-launch__skip { position: absolute; z-index: 3; top: max(var(--safe-top), 14px); right: 12px; padding: 12px 8px; min-height: 44px; font: 700 14px/1 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; color: #8D97A8; }
.pc-launch__dots { position: absolute; z-index: 3; bottom: calc(var(--safe-bottom) + 10px); left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 0; }
.pc-launch__dots .pc-dottap i { display: block; }
.pc-launch__back { position: absolute; z-index: 3; left: 12px; bottom: calc(var(--safe-bottom) + 10px); }
.pc-launch__dots i { width: 8px; height: 8px; border-radius: 2px; background: #3A4352; }
.pc-launch__dots i.is-on { width: 22px; background: #FFD21F; }
.pc-launch__top { position: relative; margin-top: calc(max(var(--safe-top), 14px) + 40px); }
.pc-launch__word { font: 400 24px/1 var(--pc-font-turtles); padding: 3px 4px 5px 3px; }
.pc-launch__word.is-big { font-size: 30px; }
.pc-launch__plain { margin: 0; font: 800 italic 34px/.9 var(--pc-font-display); text-transform: uppercase; color: #F5F7FA; }
.pc-launch__plain.is-big { font-size: 40px; }
.pc-launch__hint { position: absolute; bottom: calc(var(--safe-bottom) + 64px); left: 0; right: 0; font-size: 18px; color: #FFD21F; opacity: 0; animation: pc-l-blink 1.1s steps(2, start) 2.6s infinite both; }
.pc-launch__sub, .pc-launch__lead { position: relative; max-width: 330px; margin: 0 24px; font: 400 17px/1.4 var(--pc-font-body); color: #B9C1CE; }

/* (a) the silhouettes and the slam */
.pc-launch__sils { position: absolute; top: 19%; left: 50%; width: min(calc(100% - 20px), 400px); transform: translateX(-50%); aspect-ratio: 1249 / 331; display: flex; align-items: stretch; }
.pc-launch__sil { flex: none; height: 100%; filter: drop-shadow(0 0 5px var(--p)) drop-shadow(0 0 14px var(--p)); opacity: 0; animation: pc-l-glowin .7s ease-out both; animation-delay: calc(var(--i) * .18s); }
.pc-launch__sil i { display: block; width: 100%; height: 100%; background: var(--p); }
.pc-launch__sils::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -14px; height: 30px; background: radial-gradient(ellipse at center, rgba(255,210,31,.25), transparent 70%); }
.pc-launch .pc-launch__desert { position: absolute; max-width: none; left: 0; right: 0; top: 36%; width: 100%; height: 320px; object-fit: cover; object-position: 50% 60%; opacity: .6; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 50% at 50% 50%, #000 25%, transparent 92%); mask-image: radial-gradient(ellipse 72% 50% at 50% 50%, #000 25%, transparent 92%); }
/* a soft dark scrim right behind the title so the letters stay crisp over the sky */
.pc-launch.is-a .pc-launch__titlebox::before { content: ""; position: absolute; inset: -10px 12%; z-index: -1; background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); }
.pc-launch__titlebox { position: absolute; top: 46%; left: 0; right: 0; display: flex; justify-content: center; isolation: isolate; }
.pc-launch__slam { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 400 66px/1 var(--pc-font-turtles); }
.pc-launch__slam .pc-tw { transform-origin: center; padding: 0 4px 4px; }
.pc-launch__slam .is-1 { font-size: 36px; animation: pc-l-slam .45s cubic-bezier(.2,1.6,.4,1) 1.25s both; }
.pc-launch__slam .is-2 { animation: pc-l-slam .45s cubic-bezier(.2,1.6,.4,1) 1.45s both; }
.pc-launch__slam .is-3 { font-size: 92px; line-height: .95; animation: pc-l-slam .5s cubic-bezier(.2,1.6,.4,1) 1.7s both; }
.pc-launch.is-a .pc-launch__plain { font-size: 64px; animation: pc-l-slam .5s cubic-bezier(.2,1.6,.4,1) .4s both; }

/* (b) the band and the pitch */
.pc-launch.is-b { background: radial-gradient(ellipse at 50% 30%, #2A1240 0%, #000 70%); }
.pc-launch__band { position: relative; width: 100%; margin-top: 22px; display: flex; flex-direction: column; gap: 6px; flex: none; }
.pc-launch__splash { display: block; width: 100%; height: 236px; object-fit: cover; object-position: 50% 40%; animation: pc-l-pan 8s ease-in-out both; }
.pc-launch__pitch { position: relative; margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pc-launch__line { margin: 0; font: 800 30px/1.05 var(--pc-font-display); text-transform: uppercase; letter-spacing: .03em; opacity: 0; animation: pc-l-up .4s ease-out both; }
.pc-launch__line:nth-child(1) { animation-delay: .3s; }
.pc-launch__line:nth-child(2) { animation-delay: .6s; }
.pc-launch__line:nth-child(3) { animation-delay: .9s; }
.pc-launch__line:nth-child(4) { animation-delay: 1.3s; color: #FFD21F; }
.pc-launch__line b { font-family: var(--pc-font-turtles); font-weight: 400; font-size: 36px; color: #FFD21F; margin-right: 4px; -webkit-text-stroke: 1px #000; }
.pc-launch.is-b .pc-launch__sub { margin-top: 16px; opacity: 0; animation: pc-l-up .4s ease-out 1.7s both; }

/* (c) your turtle */
.pc-launch.is-c { justify-content: center; gap: 10px; padding-bottom: 30px; }
.pc-launch__rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--p) 26%, transparent) 0 8deg, transparent 8deg 20deg); animation: pc-l-spin 40s linear infinite;
  -webkit-mask: radial-gradient(circle at center, #000 12%, transparent 36%); mask: radial-gradient(circle at center, #000 12%, transparent 36%); }
.pc-launch__is { position: relative; margin: 0; font: 400 30px/1 var(--pc-font-turtles); text-transform: uppercase; color: #F5F7FA; text-shadow: 3px 3px 0 #000; animation: pc-l-up .4s ease-out both; }
.pc-launch__portrait { position: relative; width: 248px; height: 248px; border-radius: 50%; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--p), 0 0 0 10px #000, 0 0 46px 10px color-mix(in srgb, var(--p) 70%, transparent); animation: pc-l-pop .7s cubic-bezier(.2,1.5,.4,1) .5s both; }
.pc-launch__portrait img { width: 100%; height: 100%; object-fit: cover; }
.pc-launch__name { position: relative; margin: 14px 0 0; font: 800 72px/.9 var(--pc-font-display); text-transform: uppercase; letter-spacing: .02em; animation: pc-l-up .4s ease-out 1.1s both; }
.pc-launch__turtle { position: relative; margin: 0; font: 400 34px/1 var(--pc-font-turtles); transform-origin: center; animation: pc-l-slam .45s cubic-bezier(.2,1.6,.4,1) 1.4s both; }
.pc-launch__turtle.is-plain { font: 700 28px/1 var(--pc-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--p); }
.pc-launch__seat { position: relative; margin-top: 8px; padding: 5px 10px 4px; background: var(--p); color: #0A0C10; font: 800 15px/1 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; transform: skewX(-10deg); animation: pc-l-up .4s ease-out 1.7s both; }

/* (d) press start */
.pc-launch.is-d { gap: 16px; }
.pc-launch__trophy { position: relative; width: 300px; height: 300px; margin-top: 4px; flex: none; border-radius: 50%; overflow: hidden;
  -webkit-mask: radial-gradient(circle at center, #000 58%, transparent 71%); mask: radial-gradient(circle at center, #000 58%, transparent 71%); animation: pc-l-float 3s ease-in-out infinite; }
.pc-launch__trophy img { width: 100%; height: 100%; object-fit: cover; }
.pc-launch__logo { position: relative; margin: 40px 0 20px; }
.pc .pc-launch__start {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: calc(100% - 48px); min-height: 84px; margin-top: 8px; border-radius: 16px;
  background: linear-gradient(180deg, #FFE14D, #FFB21F); color: #1B0E22; font: 400 36px/1 var(--pc-font-turtles); letter-spacing: .02em; text-transform: uppercase;
  box-shadow: inset 0 0 0 3px #1B0E22, 0 6px 0 #1B0E22, 0 0 36px rgba(255,210,31,.45); animation: pc-l-throb 1.4s ease-in-out infinite;
}
.pc .pc-launch__start:active { transform: translateY(3px); }

@keyframes pc-l-glowin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pc-l-slam { 0% { opacity: 0; transform: scale(3) rotate(-2deg); } 70% { opacity: 1; transform: scale(.94) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(-2deg); } }
@keyframes pc-l-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pc-l-pop { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); } 100% { opacity: 1; transform: none; } }
@keyframes pc-l-pan { from { object-position: 30% 40%; } to { object-position: 50% 40%; } }
@keyframes pc-l-spin { to { transform: rotate(360deg); } }
@keyframes pc-l-float { 50% { transform: translateY(-6px); } }
@keyframes pc-l-throb { 50% { box-shadow: inset 0 0 0 3px #1B0E22, 0 6px 0 #1B0E22, 0 0 54px rgba(255,210,31,.7); } }
@keyframes pc-l-blink { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pc-launch *, .pc-launch *::before, .pc-launch *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .pc-launch__hint, .pc-launch__sil, .pc-launch__line, .pc-launch.is-b .pc-launch__sub { opacity: 1; }
}
/* Without the Turtles face (?turtle=0), the reveal speaks in the house display face. */
.pc-launch.is-plain .pc-launch__is, .pc-launch.is-plain .pc-launch__line b, .pc .pc-launch.is-plain .pc-launch__start { font-family: var(--pc-font-display); font-weight: 800; -webkit-text-stroke: 0; }

/* ---------- ART ROUND 2 (Oct 9): ooze canister, lair, desert, nunchucks, pizza box ----------
   Each piece hangs off a TURTLE switch in lib/turtle.js; the objects are cut out to alpha, so no box behind them. */
:root { --pc-ooze: #7CFF3A; --pc-ooze-ink: #2E7D12; }
.pc-light { --pc-ooze: #2E9E14; }
.pc-art2 { display: block; flex: none; max-width: 100%; height: auto; user-select: none; -webkit-user-select: none; pointer-events: none; }

/* the Paradise Valley strip: an opaque sunset, faded into the night ground at its top edge */
.pc-desert { width: 100%; object-fit: cover; object-position: 50% 62%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
/* the parent isolates, so the strip (z-index -1) sits over its ground and under every word and button */
:has(> .pc-desert--foot), :has(> .pc-desert--press), :has(> .pc-desert--tv) { position: relative; isolation: isolate; }
.pc-desert--foot { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; opacity: .55; }
.pc-desert--press { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: -1; opacity: .32; }
.pc-desert--tv { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: -1; opacity: .35; }
.pc-desert-band { flex: none; height: 30px; overflow: hidden; position: relative; }
.pc-desert-band .pc-desert { height: 30px; object-position: 50% 55%; opacity: .85; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }

/* empty states with a small piece of art */
.pc-empty--art { display: flex; align-items: center; gap: 14px; }
.pc-empty--art .pc-small { color: var(--pc-ink-3); }
.pc-empty__art { width: 72px; height: auto; }
.pc .pc-power.is-empty .pc-power__ooze { width: 56px; height: auto; filter: drop-shadow(0 0 8px rgba(124, 255, 58, .35)); }

/* the Item Box page and the call-outs */
.pc-ooze-hero { align-self: center; width: 280px; max-width: 80%; height: auto; margin: -6px 0 -10px; }
.pc-itembox__tagline { display: flex; align-items: center; gap: 10px; }
.pc-itembox__pizza { width: 52px; height: auto; }
.pc-callout__art { width: auto; max-width: 70%; }
.pc-callout.is-ooze .pc-callout__word, .pc-callout.is-ooze .pc-callout__mark { color: var(--pc-ooze); text-shadow: 0 0 14px rgba(124, 255, 58, .45); }
.pc-tag--call.is-ooze { color: var(--pc-ooze); }

/* the lair on the briefing's sign-off */
.pc-signoff { display: flex; align-items: center; gap: 8px; }
.pc-signoff__lair { width: 40px; height: auto; }

/* Michelangelo's nunchucks: Kyle's seat screen and his You sheet */
.pc-seatportrait-wrap { position: relative; display: block; }
.pc-seat-chucks { position: absolute; right: -54px; bottom: -6px; width: 96px; height: auto; transform: rotate(-14deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.pc-yousheet__me { position: relative; display: block; flex: none; }
.pc-yousheet__chucks { position: absolute; right: -22px; bottom: -8px; width: 54px; height: auto; transform: rotate(-12deg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }

/* the loading splash: a spinning nunchuck, still under reduced motion */
.pc-chuckspin { width: 56px; height: auto; animation: pc-chuckspin 1.1s linear infinite; }
@keyframes pc-chuckspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pc-chuckspin { animation: none; } }

/* Welcome 4b (Oct 10): the power-up cards as a 2 x 3 grid of tiles; a tapped tile opens full width with its rules */
.pc-cardrules { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font: 400 15px/1.35 var(--pc-font-body); color: var(--pc-ink); }
.pc-cardgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-cardtile { border: 1.5px solid var(--pc-line-strong); border-radius: 10px; background: var(--pc-surface, rgba(255,255,255,.03)); }
.pc-cardtile[open] { grid-column: 1 / -1; border-color: var(--pc-accent); }
.pc-cardtile > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; padding: 10px; min-height: 44px; }
.pc-cardtile > summary::-webkit-details-marker { display: none; }
.pc-cardtile__art { grid-row: 1; color: var(--pc-accent); display: flex; }
.pc-cardtile__art svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.pc-cardtile__name { grid-row: 1; font: 800 17px/1.05 var(--pc-font-display); text-transform: uppercase; letter-spacing: .02em; }
.pc-cardtile__sum { grid-column: 1 / -1; font: 400 13px/1.3 var(--pc-font-body); color: var(--pc-ink-2); }
.pc-cardtile__rules { margin: 0; padding: 0 10px 12px; font: 400 14px/1.4 var(--pc-font-body); color: var(--pc-ink); }

/* Gauntlet tab (Oct 10): faded rows you cannot call out, the YOU row in your mask color, the line between */
.pc-pick.is-faded { opacity: .55; }
.pc-pick.is-faded .pc-avatar, .pc-pick.is-faded img { filter: grayscale(.7); }
.pc .pc-throwtag { flex: none; }
.pc-throwline { display: flex; align-items: center; gap: 8px; margin: 2px 0; font: 700 11px/1.2 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-accent-ink); }
.pc-throwline::before, .pc-throwline::after { content: ""; flex: 1; height: 1.5px; background: var(--pc-accent); opacity: .7; }
.pc-light .pc-throwline { color: var(--pc-ink-2); }

/* #/claim/CODE: the short "Signing you in..." step between the link and the welcome. */
.pc-signin { justify-content: center; align-items: center; gap: 22px; animation: pc-fade .2s ease-out both; }
.pc-dark.pc-signin { background: #000; } /* matches Player Detected, the next screen, so no slate-to-black flash */
.pc-signin__spin { width: 56px; height: 56px; border-radius: 50%; border: 6px solid var(--pc-line); border-top-color: #FFD21F; animation: pc-signin-spin .8s linear infinite; }
.pc-signin__text { margin: 0; font: 800 italic 28px/1 var(--pc-font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--pc-ink); }
@keyframes pc-signin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pc-signin__spin { animation-duration: 2.4s; } }

/* TV: a live Gauntlet takes the board (Oct 10 morning batch). */
.pc-tv-duel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 40px 72px 24px; gap: 24px; }
.pc-tv-duel__head { display: flex; align-items: center; justify-content: center; gap: 24px; height: 140px; }
.pc-tv-duel__foot { width: 140px; height: 140px; object-fit: contain; opacity: .9; }
.pc-tv-duel__main { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 48px; }
.pc-tv-duel__side { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pc-tv-duel__side .pc-avatar, .pc-tv-duel__side .pc-tile { box-shadow: 0 0 0 8px var(--pc-mask), 0 0 60px color-mix(in srgb, var(--pc-mask) 45%, transparent); border-radius: 50%; }
.pc-tv-duel__name { font: 800 italic 96px/.9 var(--pc-font-display); text-transform: uppercase; color: var(--pc-mask); }
.pc-tv-duel__role { font: 700 28px/1 var(--pc-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--pc-ink-3); }
.pc-tv-duel__vs { font: 900 italic 160px/1 var(--pc-font-display); color: #FFD21F; text-shadow: 0 6px 0 #0A0C10; }
.pc-tv-duel__foot-row { display: flex; align-items: center; justify-content: center; gap: 48px; }
.pc-tv-duel__duel { font: 800 72px/1 var(--pc-font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--pc-ink); }
.pc-tv-duel__clock { font: 900 72px/1 var(--pc-font-matrix); color: #FFD21F; }
.pc-light .pc-tv-duel__clock { color: #0A0C10; }
.pc-light .pc-tv-duel__name { color: color-mix(in srgb, var(--pc-mask) 70%, #0A0C10); }
.pc-light .pc-signin__spin { border-top-color: #0A0C10; }

/* The first-run music toggle (lib/music.js): top-right corner, 44px tap target. */
.pc-music { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; z-index: 60; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px; background: rgba(10, 12, 16, .55); color: #F5F7FA; cursor: pointer; }
.pc-music[hidden] { display: none; }
.pc-music.is-beside-skip { right: 78px; }
body.has-testclock .pc-launch__skip { top: calc(max(var(--safe-top), 14px) + var(--pc-testclock-h, 24px)); }
body.has-testclock .pc-music { top: calc(env(safe-area-inset-top, 0px) + var(--pc-testclock-h, 24px) + 8px); } /* below the TEST CLOCK strip, as the header is */

/* Arcade results rows (components/arcade.js). */
.pc-arows { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc-arow { display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--pc-font-display, inherit); }
.pc-arow__face { flex: none; display: grid; place-items: center; border-radius: 50%; padding: 2px; background: var(--ring); }
.pc-arow__face .pc-avatar, .pc-arow__face > * { border-radius: 50%; display: block; }
.pc-arow__place { flex: none; width: 38px; font-size: 13px; letter-spacing: .04em; color: var(--pc-ink-2); }
.pc-arow__name { flex: none; font-size: 17px; letter-spacing: .04em; color: var(--pc-ink); }
.pc-arow__dots { flex: 1; min-width: 12px; height: 0; border-bottom: 3px dotted var(--pc-ink-3); transform: translateY(3px); }
.pc-arow__pts { flex: none; min-width: 26px; text-align: right; font-size: 22px; color: var(--pc-ink); font-variant-numeric: tabular-nums; position: relative; }
.pc-arow.is-first .pc-arow__pts, .pc-arow.is-first .pc-arow__name { color: var(--pc-accent-ink); }
.pc-arow__badge { position: absolute; top: -9px; right: -6px; font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 3px; background: var(--pc-accent); color: #0A0C10; white-space: nowrap; }
.pc-arow__delta { flex: none; width: 30px; text-align: center; font-size: 12px; color: var(--pc-ink-3); }
.pc-arow__delta.is-up { color: #3DDC84; }
.pc-arow__delta.is-down { color: #FF5A5A; }
.pc-light .pc-arow__delta.is-up { color: #0B7A3B; }
.pc-light .pc-arow__delta.is-down { color: #B3261E; }

/* The arcade RESULTS screen (screens/results.js). */
.pc-results { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 28px) 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: radial-gradient(ellipse at 50% 0%, #1B2140 0%, #0A0C10 70%); color: var(--pc-ink); overflow: hidden; cursor: pointer; }
.pc-results__head { text-align: center; }
.pc-results__event { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-ink-2); }
.pc-results__word { margin: 4px 0 0; font-family: var(--pc-font-display, inherit); font-size: 44px; line-height: 1; letter-spacing: .06em; color: var(--pc-accent); text-shadow: 3px 3px 0 #E4002B; animation: pc-results-pop .35s ease-out; }
.pc-results__list { gap: 10px; }
.pc-results__row { padding: 0 6px; border-radius: 6px; transition: opacity .25s ease-out, transform .25s ease-out; }
.pc-results__row.is-out { opacity: 0; transform: translateX(-24px); }
.pc-results__row.is-in { opacity: 1; }
.pc-results__row.is-moving { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pc-results__row.is-first { background: rgba(255, 210, 0, .08); }
.pc-results__hint { margin-top: auto; text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-ink-3); animation: pc-blink 1.2s steps(2) infinite; }
@keyframes pc-results-pop { from { transform: scale(1.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pc-blink { 50% { opacity: .35; } }
.pc-results.is-tv { position: absolute; padding: 60px 220px; gap: 28px; cursor: default; }
.pc-results.is-tv .pc-results__event { font-size: 30px; }
.pc-results.is-tv .pc-results__word { font-size: 110px; text-shadow: 6px 6px 0 #E4002B; }
.pc-results.is-tv .pc-results__list { gap: 24px; }
.pc-results.is-tv .pc-arow { min-height: 104px; gap: 26px; }
.pc-results.is-tv .pc-arow__face { padding: 5px; }
.pc-results.is-tv .pc-arow__place { width: 90px; font-size: 32px; }
.pc-results.is-tv .pc-arow__name { font-size: 54px; }
.pc-results.is-tv .pc-arow__dots { border-bottom-width: 6px; }
.pc-results.is-tv .pc-arow__pts { font-size: 64px; min-width: 90px; }
.pc-results.is-tv .pc-arow__badge { font-size: 20px; top: -18px; padding: 4px 8px; }
.pc-results.is-tv .pc-arow__delta { width: 80px; font-size: 32px; }
.pc-results.is-reduced *, .pc-results.is-reduced { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pc-results *, .pc-results { animation: none !important; transition: none !important; } }
.pc-ledger__replay { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -10px; font-size: 13px; font-weight: 600; color: var(--pc-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Fixed row heights so the FLIP offsets (results.js rowH: 44 + 10, TV 104 + 24) are exact. */
.pc-results .pc-arow { height: 44px; min-height: 0; }
.pc-results.is-tv .pc-arow { height: 104px; min-height: 0; }

/* Call Your Shot (tutorial): the throwing star in a bullseye, then THU / FRI / SAT stars. */
.pc-shot { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #000; border-radius: 12px; padding: 8px 8px 12px; }
.pc-shot__hero { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 800 / 533; border-radius: 8px; }
.pc-shot__days { display: flex; justify-content: center; gap: 28px; }
.pc-shot__day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pc-shot__day .pc-label { color: #F4F6F8; letter-spacing: .12em; }
.pc-sheet__head .pc-h2 { white-space: pre-line; }

/* VS splash (components/vs.js): full screen, pixel art kept crisp. */
.pc-vs { position: fixed; inset: 0; z-index: 9000; overflow: hidden; background: #1a0f22; cursor: pointer; animation: pc-vs-shake .28s steps(4) .5s both; }
.pc-vs img { image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }
.pc-vs__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pc-vs__side { position: absolute; bottom: 14%; width: 50%; display: flex; flex-direction: column; align-items: center; }
.pc-vs__side.is-left { left: 0; animation: pc-vs-inl .42s cubic-bezier(.2,.9,.3,1) both; }
.pc-vs__side.is-right { right: 0; animation: pc-vs-inr .42s cubic-bezier(.2,.9,.3,1) .08s both; }
.pc-vs__bob { animation: pc-vs-bob .5s steps(1) .5s infinite; }
.pc-vs__side.is-right .pc-vs__bob { animation-delay: .75s; }
.pc-vs__fighter { display: block; height: min(34vh, 270px); width: auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.pc-vs__fighter.is-mirror { transform: scaleX(-1); }
.pc-vs__name { margin: 10px 0 0; font: 900 26px/1 var(--pc-font-matrix); color: #fff; text-transform: uppercase; letter-spacing: .06em; text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000; }
.pc-vs__word { position: absolute; left: 0; right: 0; top: 30%; margin: 0; text-align: center; font: 900 clamp(96px, 34vw, 168px)/1 var(--pc-font-matrix); color: #FFD21F; letter-spacing: .02em;
  -webkit-text-stroke: 6px #FFD21F; paint-order: stroke fill; text-shadow: 5px 5px 0 #C2410C, 10px 10px 0 #000; animation: pc-vs-stamp .22s steps(3) .45s both; }
.pc-vs__hint { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font: 800 12px/1 var(--pc-font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); text-shadow: 1px 1px 0 #000; }
@keyframes pc-vs-inl { from { transform: translateX(-110%); } to { transform: none; } }
@keyframes pc-vs-inr { from { transform: translateX(110%); } to { transform: none; } }
@keyframes pc-vs-bob { 0% { transform: none; } 50% { transform: translateY(3px); } }
@keyframes pc-vs-stamp { from { transform: scale(3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pc-vs-shake { 0% { transform: translate(6px, -4px); } 33% { transform: translate(-6px, 4px); } 66% { transform: translate(4px, 3px); } 100% { transform: none; } }
.pc-vs.is-still, .pc-vs.is-still * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pc-vs, .pc-vs * { animation: none !important; } }

/* Ready screen: a wireframe NES controller (welcome.js NesPad). Buttons are % of 340x150. Only the
   SELECT and START pills are solid; the rest is thin warm line work over the sunset. */
.pc-nes { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 6px; }
.pc-nes__pad { position: relative; width: min(340px, calc(100vw - 32px)); aspect-ratio: 340 / 150; }
.pc-nes__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #FFE3C8; stroke-width: 1.25; opacity: .32; filter: drop-shadow(0 0 3px rgba(255, 190, 140, .6)); }
.pc-nes__art text { fill: #FFE3C8; stroke: none; font: 700 11px/1 var(--pc-font-display); letter-spacing: .06em; }
.pc-nes__hit { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; min-width: 44px; min-height: 44px; }
.pc-nes__hit:focus-visible { outline: 2px solid var(--pc-accent-ink); outline-offset: 1px; border-radius: 6px; }
.pc-nes__hit.is-select { left: 30%; top: 54%; width: 17%; height: 34%; }
.pc-nes__hit.is-start  { left: 47%; top: 54%; width: 17%; height: 34%; }
.pc-nes__hit.is-b { left: 62.4%; top: 59%; width: 13.4%; height: 29%; }
.pc-nes__hit.is-a { left: 75.4%; top: 59%; width: 13.4%; height: 29%; }
.pc-nes__lbl { font: 800 11px/1 var(--pc-font-display); letter-spacing: .1em; color: #FFD21F; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.pc-nes__pill { display: block; width: 40px; height: 14px; border-radius: 8px; background: #FFD21F; box-shadow: 0 2px 0 #B8860B, 0 0 10px rgba(255, 210, 31, .35); transition: transform .05s, box-shadow .05s, filter .05s; }
.pc-nes__hit:active .pc-nes__pill { transform: translateY(2px); box-shadow: 0 0 0 #B8860B, inset 0 1px 3px rgba(0,0,0,.35); filter: brightness(.85); }
.pc-nes__hit.is-b:active, .pc-nes__hit.is-a:active { background: radial-gradient(circle, rgba(255,227,200,.18) 0 40%, transparent 42%); }
.pc-nes__hint { position: relative; margin: 4px 0 0; text-align: center; font: 800 18px/1.2 var(--pc-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-ink); }
.pc-nes__hint small { display: block; margin-top: 4px; font: 600 12px/1.2 var(--pc-font-body); letter-spacing: 0; text-transform: none; color: var(--pc-ink-2); opacity: .8; }