/* =====================================================================
   THE PARADISE CUP · "Prime Time" design system
   Tokens and components as plain CSS, scoped under .pc so the file
   drops straight into the Preact PWA.

   Modes   .pc            Night Mode (default, dark game room, TV)
           .pc.pc-light   Sun Mode (full bright sun, print)
   Rules   Times are the trip's local time. The app sets its own clock; no label needed.
           Color is never the only identifier: player tiles carry P1 to P6.
           Yellow fills always take ink text. Yellow is never text in Sun Mode.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
.pc{
  /* ground and ink */
  --pc-ground:#0A0C10;
  --pc-surface:#141921;
  --pc-raised:#1E2530;
  --pc-line:#2C3542;
  --pc-line-strong:#5B6880;
  --pc-ink:#F5F7FA;
  --pc-ink-2:#B9C1CE;
  --pc-ink-3:#8D97A8;

  /* accent: marquee yellow */
  --pc-accent:#FFD21F;
  --pc-on-accent:#0A0C10;
  --pc-accent-ink:#FFD21F;      /* accent used as text or line */
  --pc-you:#2A2508;             /* the "this is you" row tint */

  /* signal (always paired with a word and a shape) */
  --pc-live:#3DE08A;
  --pc-alert:#FF5C4D;
  --pc-on-alert:#0A0C10;
  --pc-alert-ink:#FF8176;

  /* edges */
  --pc-keyline:transparent;     /* ink outline on color fills, Sun Mode only */
  --pc-border:1px solid #2C3542;
  --pc-bulb:#FFD21F;

  /* players: mask color plus seat number, never color alone. Scott cast the roster as Ninja Turtles. */
  --p1:#C9A27A;  /* P1 Scott   Splinter      sensei tan  */
  --p2:#3D7BFF;  /* P2 Philip  Leonardo      blue        */
  --p3:#FF8A1F;  /* P3 Kyle    Michelangelo  orange      */
  --p4:#B48CFF;  /* P4 Michael Donatello     purple      */
  --p5:#FF4D6A;  /* P5 Ryan    Raphael       red         */
  --p6:#5CD6FF;  /* P6 Marlee  Venus         light blue  */
  --pc-on-player:#0A0C10;

  /* type */
  --pc-font-display:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --pc-font-body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --pc-font-matrix:"Doto","Barlow Condensed",ui-monospace,monospace;

  /* space: 4 pt base */
  --pc-s1:4px; --pc-s2:8px; --pc-s3:12px; --pc-s4:16px; --pc-s5:24px; --pc-s6:32px; --pc-s7:48px;

  /* radius: crisp, broadcast */
  --pc-r-tag:3px; --pc-r-tile:4px; --pc-r-card:8px; --pc-r-pill:999px;

  /* touch */
  --pc-target:48px;             /* standard hit area. 44 px is the floor. */
  --pc-target-primary:56px;     /* bottom primary action */

  /* motion */
  --pc-ease-snap:cubic-bezier(.2,.9,.2,1);
  --pc-ease-slide:cubic-bezier(.3,0,.1,1);
  --pc-t-tap:90ms; --pc-t-move:240ms; --pc-t-sort:420ms; --pc-t-flip:600ms;

  color:var(--pc-ink);
  font-family:var(--pc-font-body);
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.pc.pc-light{
  --pc-ground:#ECEEF2;
  --pc-surface:#FFFFFF;
  --pc-raised:#FFFFFF;
  --pc-line:#B8BFCC;
  --pc-line-strong:#0A0C10;
  --pc-ink:#0A0C10;
  --pc-ink-2:#333B48;
  --pc-ink-3:#566070;
  --pc-accent:#FFD21F;
  --pc-on-accent:#0A0C10;
  --pc-accent-ink:#0A0C10;
  --pc-you:#FFE873;
  --pc-live:#0A6E3D;
  --pc-alert:#C4281C;
  --pc-on-alert:#FFFFFF;
  --pc-alert-ink:#B32217;
  --pc-keyline:#0A0C10;
  --pc-border:1.5px solid #0A0C10;
  --pc-bulb:#0A0C10;
}
.pc.pc-print{ --pc-ground:#FFFFFF; }

/* ---------- 2. BASE ---------- */
.pc,.pc *,.pc *::before,.pc *::after{box-sizing:border-box}
/* resets sit inside :where() so they never outrank a component class */
.pc :where(h1,h2,h3,h4,p,ul,ol,li,figure){margin:0;padding:0}
.pc :where(ul,ol){list-style:none}
.pc :where(a){color:inherit;text-decoration:none}
.pc :where(button){appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.pc :where(svg){display:block}
.pc a:focus-visible,.pc button:focus-visible{outline:3px solid var(--pc-accent-ink);outline-offset:2px}
.pc-ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}

/* ---------- 3. TYPE ---------- */
.pc-codename{font:800 64px/.9 var(--pc-font-display);text-transform:uppercase;letter-spacing:.005em}
.pc-h1{font:800 44px/.95 var(--pc-font-display);text-transform:uppercase;letter-spacing:.01em}
.pc-h2{font:700 28px/1 var(--pc-font-display);text-transform:uppercase;letter-spacing:.02em}
.pc-h3{font:700 20px/1.1 var(--pc-font-display);text-transform:uppercase;letter-spacing:.03em}
.pc-label{font:700 13px/1 var(--pc-font-display);text-transform:uppercase;letter-spacing:.1em;color:var(--pc-ink-3)}
.pc-body{font:400 16px/1.4 var(--pc-font-body)}
.pc-small{font:400 14px/1.35 var(--pc-font-body);color:var(--pc-ink-2)}
.pc-micro{font:400 12px/1.3 var(--pc-font-body);color:var(--pc-ink-3)}
.pc-num{font-family:var(--pc-font-display);font-weight:800;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.pc-matrix{font-family:var(--pc-font-matrix);font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.pc-az{font:700 12px/1 var(--pc-font-display);letter-spacing:.06em;color:var(--pc-ink-3);text-transform:none;white-space:nowrap}

/* ---------- 4. PHONE FRAME ---------- */
.pc-screen{width:390px;height:844px;position:relative;overflow:hidden;background:var(--pc-ground);display:flex;flex-direction:column}
.pc-top{flex:none;padding:54px 16px 0}             /* 54 px safe area. The real status bar sits here. Never draw one. */
.pc-hdr{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pc-wordmark{font:800 italic 20px/1 var(--pc-font-display);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.pc-wordmark b{font-weight:800;color:var(--pc-accent-ink)}
.pc-light .pc-wordmark b{background:var(--pc-accent);padding:0 4px}
.pc-body-area{flex:1;min-height:0;overflow:hidden;padding:6px 16px 0;display:flex;flex-direction:column;gap:8px}
.pc-dock{flex:none;padding:0 16px 8px;display:flex;flex-direction:column;gap:8px}
.pc .pc-iconbtn{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--pc-line-strong);font:800 22px/1 var(--pc-font-display);color:var(--pc-ink)}

/* tab bar: 56 px of tabs over the 34 px home indicator inset */
.pc-tabbar{flex:none;display:flex;height:90px;padding:0 4px 34px;background:var(--pc-surface);border-top:var(--pc-border)}
.pc .pc-tab{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--pc-ink-3);font:700 12px/1 var(--pc-font-display);letter-spacing:.08em;text-transform:uppercase}
.pc .pc-tab.is-active{color:var(--pc-ink)}
.pc .pc-tab.is-active::before{content:"";position:absolute;top:-1px;left:16px;right:16px;height:4px;background:var(--pc-accent);box-shadow:inset 0 0 0 1px var(--pc-keyline)}
.pc-tab__count{position:absolute;top:6px;left:50%;margin-left:6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--pc-accent);color:var(--pc-on-accent);font:800 13px/18px var(--pc-font-display);text-align:center;letter-spacing:0;box-shadow:inset 0 0 0 1px var(--pc-keyline)}

/* ---------- 5. SMALL PARTS ---------- */
/* status pill: word + shape + color */
.pc-pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--pc-r-pill);border:1.5px solid currentColor;font:700 13px/1 var(--pc-font-display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pc-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.pc-pill.is-live{color:var(--pc-live)}
.pc-pill.is-live::before{animation:pc-pulse 1.6s ease-in-out infinite}
.pc-pill.is-syncing{color:var(--pc-accent-ink)}
.pc-pill.is-syncing::before{background:none;border:2px solid currentColor;border-right-color:transparent;animation:pc-spin .9s linear infinite}
.pc-pill.is-offline{color:var(--pc-alert-ink);border-style:dashed}
.pc-pill.is-offline::before{background:none;border:2px solid currentColor;border-radius:0}

/* skewed slab: the broadcast lower-third tag */
.pc-slab{display:inline-block;flex:none;transform:skewX(-10deg);background:var(--pc-accent);color:var(--pc-on-accent);font:800 13px/1 var(--pc-font-display);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px 3px;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--pc-keyline)}
.pc-slab--ink{background:var(--pc-ink);color:var(--pc-ground);box-shadow:none}
.pc-slab--line{background:none;color:var(--pc-ink);box-shadow:inset 0 0 0 1.5px var(--pc-ink)}
.pc-slab--alert{background:var(--pc-alert);color:var(--pc-on-alert);box-shadow:none}

/* outline tag */
.pc-tag{display:inline-flex;align-items:center;gap:4px;flex:none;height:22px;padding:0 7px;border-radius:var(--pc-r-tag);border:1.5px solid var(--pc-line-strong);font:700 12px/1 var(--pc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--pc-ink-2);white-space:nowrap}
.pc-tag--accent{border-color:var(--pc-accent-ink);color:var(--pc-accent-ink)}
.pc-tag--alert{border-color:var(--pc-alert-ink);color:var(--pc-alert-ink)}
.pc-tag--solid{background:var(--pc-ink);border-color:var(--pc-ink);color:var(--pc-ground)}
.pc-tag--crown{background:var(--pc-accent);border-color:var(--pc-accent);color:var(--pc-on-accent);box-shadow:inset 0 0 0 1px var(--pc-keyline)}
.pc-tag .pc-ico{width:14px;height:14px}

/* player tile: color + seat number */
.pc-tile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--pc-r-tile);background:var(--p,#8D97A8);color:var(--pc-on-player);font:800 16px/1 var(--pc-font-display);letter-spacing:0;box-shadow:inset 0 0 0 1.5px var(--pc-keyline)}
.pc-tile--s{width:24px;height:24px;font-size:13px;border-radius:3px}
.pc-tile--l{width:48px;height:48px;font-size:24px;border-radius:6px}
.pc-tile--xl{width:88px;height:88px;font-size:44px;border-radius:8px}
.p1{--p:var(--p1)} .p2{--p:var(--p2)} .p3{--p:var(--p3)} .p4{--p:var(--p4)} .p5{--p:var(--p5)} .p6{--p:var(--p6)}

/* bulb row: the one marquee texture. Key moments and hero cards only. */
.pc-bulbs{height:8px;flex:none;background:radial-gradient(circle at 4px 4px,var(--pc-bulb) 0 2.4px,transparent 2.9px) 0 0/12px 8px repeat-x}

/* season pips: 12 events, the last one pays double */
.pc-pips{display:flex;gap:3px;align-items:center}
.pc-pips span{flex:1;height:8px;border-radius:1px;background:var(--pc-line)}
.pc-pips span.is-done{background:var(--pc-ink)}
.pc-pips span.is-next{background:var(--pc-accent);box-shadow:inset 0 0 0 1.5px var(--pc-keyline)}
.pc-pips span.is-double{flex:2}

/* label + value */
.pc-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.pc-meta__k{font:700 13px/1 var(--pc-font-display);text-transform:uppercase;letter-spacing:.1em;color:var(--pc-ink-3)}
.pc-meta__v{font:700 20px/1.05 var(--pc-font-display);text-transform:uppercase;letter-spacing:.02em}
.pc-meta__v--body{font:400 14px/1.3 var(--pc-font-body);text-transform:none;letter-spacing:0;color:var(--pc-ink)}

/* section header */
.pc-sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pc-sec__title{font:800 16px/1 var(--pc-font-display);letter-spacing:.1em;text-transform:uppercase}
.pc-sec__more{font:700 13px/1 var(--pc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--pc-ink-3)}

/* HUD: what you are holding, like HP and mana. Same strip on every tab. */
.pc-hud{display:flex;gap:6px}
.pc-hud__stat{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:36px;padding:0 8px;border-radius:6px;background:var(--pc-surface);border:var(--pc-border)}
.pc-hud__k{font:700 11.5px/1 var(--pc-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--pc-ink-3)}
.pc-hud__v{font:800 18px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}

/* ---------- 6. BUTTONS ---------- */
.pc .pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:56px;padding:0 20px;border-radius:var(--pc-r-card);background:var(--pc-accent);color:var(--pc-on-accent);font:800 22px/1 var(--pc-font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 0 0 1.5px var(--pc-keyline)}
.pc .pc-btn--block{display:flex;width:100%}
.pc .pc-btn--s{min-height:44px;padding:0 14px;font-size:17px}
.pc .pc-btn--ink{background:#0A0C10;color:#FFD21F;box-shadow:none}
.pc .pc-btn--ghost{background:transparent;color:var(--pc-ink);box-shadow:inset 0 0 0 1.5px var(--pc-line-strong)}
.pc .pc-btn--alert{background:transparent;color:var(--pc-alert-ink);box-shadow:inset 0 0 0 1.5px var(--pc-alert-ink)}
.pc .pc-btn:active{transform:translateY(1px)}

/* reason chip / filter chip */
.pc .pc-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;padding:0 14px;border-radius:var(--pc-r-pill);box-shadow:inset 0 0 0 1.5px var(--pc-line-strong);font:700 16px/1 var(--pc-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--pc-ink-2);white-space:nowrap}
.pc .pc-chip.is-on{background:var(--pc-ink);color:var(--pc-ground);box-shadow:none}

/* switch: a standing on/off status (BENCH). Put role="switch" on the row button, this span is the visual. */
.pc-switch{flex:none;position:relative;width:56px;height:32px;border-radius:16px;background:var(--pc-raised);box-shadow:inset 0 0 0 1.5px var(--pc-line-strong)}
.pc-switch::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--pc-ink-3)}
.pc-switch.is-on{background:var(--pc-accent);box-shadow:inset 0 0 0 1.5px var(--pc-keyline)}
.pc-switch.is-on::after{left:28px;background:var(--pc-on-accent)}

/* big constrained choice: never a typed number */
.pc .pc-pick{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:64px;padding:8px 10px;border-radius:var(--pc-r-card);background:var(--pc-surface);box-shadow:inset 0 0 0 1.5px var(--pc-line-strong);font:700 20px/1 var(--pc-font-display);letter-spacing:.02em;text-transform:uppercase}
.pc .pc-pick.is-on{background:var(--pc-accent);color:var(--pc-on-accent);box-shadow:inset 0 0 0 2px var(--pc-ink)}

/* ---------- 7. COMPONENTS ---------- */
/* card */
.pc-card{background:var(--pc-surface);border:var(--pc-border);border-radius:var(--pc-r-card);padding:12px 14px}

/* Department Notice */
.pc-notice{display:flex;align-items:center;gap:12px;min-height:36px;padding:5px 0 5px 4px;border-top:var(--pc-border);border-bottom:var(--pc-border)}
.pc-notice__tag{flex:none;transform:skewX(-10deg);background:var(--pc-ink);color:var(--pc-ground);font:800 12px/1 var(--pc-font-display);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px 4px;white-space:nowrap}
.pc-notice__text{font:400 14px/1.25 var(--pc-font-body);color:var(--pc-ink)}

/* action-needed strip: the loudest thing on any screen */
.pc-action{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 7px 7px 12px;border-radius:var(--pc-r-card);background:var(--pc-accent);color:var(--pc-on-accent);box-shadow:inset 0 0 0 1.5px var(--pc-keyline)}
.pc-action__timer{flex:none;font:800 26px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}
.pc-action__text{flex:1;min-width:0;font:700 15px/1.2 var(--pc-font-body)}
.pc-action__text small{display:block;font:400 12px/1.25 var(--pc-font-body)}

/* standings row */
.pc-row{display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;background:var(--pc-surface);border:var(--pc-border);border-radius:6px}
.pc-row__rank{flex:none;width:26px;text-align:center;font:800 28px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}
.pc-row__main{flex:1;min-width:0}
.pc-row__name{font:700 22px/1 var(--pc-font-display);text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.pc-row__sub{font:400 12px/1.2 var(--pc-font-body);color:var(--pc-ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.pc-row__total{flex:none;min-width:38px;text-align:right;font:800 34px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}
.pc-row.is-you{background:var(--pc-you);border-color:var(--pc-accent-ink)}
.pc-row.is-leader .pc-row__total{color:var(--pc-accent-ink)}

/* ledger row: append-only. Corrections are new rows, never edits. */
.pc-ledger{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--pc-line)}
.pc-ledger__when{flex:none;width:58px;font:700 14px/1.1 var(--pc-font-display);letter-spacing:.02em;color:var(--pc-ink-2);font-variant-numeric:tabular-nums}
.pc-ledger__when small{display:block;margin-top:2px;font:400 12px/1 var(--pc-font-body);color:var(--pc-ink-3)}
.pc-ledger__main{flex:1;min-width:0}
.pc-ledger__kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px;font:700 12px/1 var(--pc-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--pc-ink-3)}
.pc-ledger__text{font:400 14px/1.35 var(--pc-font-body)}
.pc-ledger__text b{font-weight:700}
.pc-ledger__delta{flex:none;min-width:34px;text-align:right;font:800 24px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}
.pc-ledger.is-reversal{margin:6px 0;padding:10px;border:1.5px dashed var(--pc-alert-ink);border-radius:6px}
.pc-ledger.is-reversal .pc-ledger__delta{color:var(--pc-alert-ink)}
.pc-ledger.is-reversed .pc-ledger__text,.pc-ledger.is-reversed .pc-ledger__delta{text-decoration:line-through;color:var(--pc-ink-3)}

/* compact wire row (NOW, TV ticker source) */
.pc-wire{display:flex;align-items:center;gap:10px;height:29px;border-top:1px solid var(--pc-line)}
.pc-wire__t{flex:none;width:56px;font:700 13px/1 var(--pc-font-display);letter-spacing:.02em;color:var(--pc-ink-2);font-variant-numeric:tabular-nums}
.pc-wire__t small{display:block;margin-top:1px;font:400 12px/1 var(--pc-font-body);color:var(--pc-ink-3);letter-spacing:0}
.pc-wire__x{flex:1;min-width:0;font:400 14px/1.2 var(--pc-font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-wire__d{flex:none;min-width:30px;text-align:right;font:800 18px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}
.pc-wire.is-reversal .pc-wire__d,.pc-wire.is-reversal .pc-wire__x b{color:var(--pc-alert-ink)}

/* level card */
.pc-level{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--pc-surface);border:var(--pc-border);border-radius:var(--pc-r-card);padding:12px 14px}
.pc-level.is-masked{border-style:dashed;border-color:var(--pc-line-strong)}
.pc-level__title{font:800 34px/.92 var(--pc-font-display);text-transform:uppercase;letter-spacing:.01em}
.pc-level__sub{font:400 14px/1.3 var(--pc-font-body);color:var(--pc-ink-2)}
.pc-q{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--pc-r-tile);background:var(--pc-accent);color:var(--pc-on-accent);font:800 34px/1 var(--pc-font-display);box-shadow:inset 0 0 0 1.5px var(--pc-keyline)}
.pc-rules{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--pc-line)}
.pc-rules li{display:flex;gap:10px;font:400 14px/1.3 var(--pc-font-body)}
.pc-rules li b{flex:none;width:76px;font:700 13px/1.4 var(--pc-font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--pc-ink-3)}

/* schedule slot: a time column and a card. START = at the house, nothing to pack. LEAVE HOUSE = an excursion. */
.pc-slot{display:flex;gap:10px;align-items:stretch}
.pc-slot__when{flex:none;width:78px;display:flex;flex-direction:column;gap:3px;padding-top:12px}
.pc-slot__k{font:700 12px/1.1 var(--pc-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--pc-ink-3)}
.pc-slot__t{font:800 18px/1 var(--pc-font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-slot__card{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 12px}
.pc-slot.is-now .pc-slot__k,.pc-slot.is-now .pc-slot__t{color:var(--pc-accent-ink)}
.pc-slot.is-now .pc-slot__card{border-color:var(--pc-accent-ink)}

/* duel card and timer */
.pc-duel{background:var(--pc-surface);border:2px solid var(--pc-ink);border-radius:10px;overflow:hidden}
.pc-duel__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px;background:var(--pc-ink);color:var(--pc-ground)}
.pc-duel__title{font:800 40px/.92 var(--pc-font-display);text-transform:uppercase;letter-spacing:.01em}
.pc-timer{font:800 104px/.82 var(--pc-font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* badge: a coin-op token */
.pc-badge{display:inline-flex;flex-direction:column;align-items:center;gap:6px;width:76px}
.pc-badge__disc{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pc-accent);color:var(--pc-on-accent);box-shadow:inset 0 0 0 2px var(--pc-on-accent),0 0 0 2px var(--pc-accent),0 0 0 3.5px var(--pc-keyline)}
.pc-badge__name{font:700 12px/1.1 var(--pc-font-display);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.pc-badge.is-locked .pc-badge__disc{background:none;color:var(--pc-ink-3);box-shadow:inset 0 0 0 1.5px var(--pc-line-strong)}
.pc-badge.is-locked .pc-badge__name{color:var(--pc-ink-3)}

/* power-up card: 2.5 x 3.5 in at 96 px per inch. Same markup in app and print. */
.pc-power{position:relative;flex:none;width:240px;height:336px;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;background:var(--pc-surface);border:2px solid var(--pc-ink)}
.pc-power__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 0}
.pc-power__art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.pc-power__art svg{width:104px;height:104px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter}
.pc-power__name{padding:0 14px;font:800 38px/.9 var(--pc-font-display);text-transform:uppercase;letter-spacing:.01em}
.pc-power__fx{padding:6px 14px 10px;font:400 13px/1.3 var(--pc-font-body)}
.pc-power__code{flex:none;padding:9px 0 8px;background:var(--pc-ink);color:var(--pc-ground);text-align:center;font:900 22px/1 var(--pc-font-matrix);letter-spacing:.2em;text-transform:uppercase}
.pc-power.is-facedown{align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 7px 7px,var(--pc-bulb) 0 2px,transparent 2.6px) 0 0/14px 14px,var(--pc-surface)}

/* Commissioner console chrome */
.pc-console-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 16px;background:var(--pc-accent);color:var(--pc-on-accent);font:800 16px/1 var(--pc-font-display);letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid #0A0C10}

/* ---------- 8. TV (1920 x 1080, read-only) ---------- */
.pc-tv{width:1920px;height:1080px;position:relative;overflow:hidden;background:var(--pc-ground);display:flex;flex-direction:column}
.pc-tv-row{display:flex;align-items:center;gap:28px;height:112px;padding:0 32px;background:var(--pc-surface);border:var(--pc-border);border-radius:10px}
.pc-tv-row__rank{flex:none;width:72px;text-align:center;font:800 84px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}
.pc-tv-row__name{flex:1;min-width:0;font:800 76px/1 var(--pc-font-display);text-transform:uppercase;letter-spacing:.01em}
.pc-tv-row__cell{flex:none;width:150px;text-align:right;font:700 48px/1 var(--pc-font-display);color:var(--pc-ink-2);font-variant-numeric:tabular-nums}
.pc-tv-row__total{flex:none;width:150px;text-align:right;font:800 96px/1 var(--pc-font-display);font-variant-numeric:tabular-nums}
.pc-tv-row.is-leader{background:var(--pc-accent);color:var(--pc-on-accent);border-color:var(--pc-accent)}
.pc-tv-row.is-leader .pc-tv-row__cell{color:var(--pc-on-accent)}
.pc-ticker{flex:none;display:flex;align-items:center;gap:40px;height:92px;padding:0 48px;background:var(--pc-accent);color:var(--pc-on-accent);font:800 44px/1 var(--pc-font-display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden}

/* ---------- 9. MOTION ---------- */
@keyframes pc-spin{to{transform:rotate(360deg)}}
@keyframes pc-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pc-blink{0%,49%{opacity:1}50%,100%{opacity:0}}           /* INSERT COIN, 1 Hz, hard cut */
@keyframes pc-chase{0%,100%{opacity:.25}50%{opacity:1}}             /* bulb chase: stagger with animation-delay */
@keyframes pc-flip{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
.pc-blink{animation:pc-blink 1s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){
  .pc *,.pc *::before,.pc *::after{animation:none!important;transition:none!important}
}