/* The Tight Ten — "stage" theme, layered over shared/css/app.css.
   A late-night show: deep curtain burgundy and near-black, spotlight gold, warm white.
   Marquee bulbs frame the landing and the certificate; cards sit in a spotlight; the path
   is a set list taped to the floor. Limelight for headings only, Jost for everything else
   (OFL, fonts/). */
[data-theme="stage"] {
  --blue: #F2C14E; --blue-d: #E0A92C; --blue-l: #B3122E; --zen: #EEDCC0;
  --ink: #24090F; --ink2: #5A3A32; --mute: #7D5E52; --line: #E1C9A6; --line2: #EEDFC6;
  --paper: #120608; --coconut: #F7EAD3; --sand: #EEDCC0; --graphite: #2A0A11; --night: #120608;
  --crimson: #B3122E; --canopy: #A85A08; --gold: #F2C14E; --navy: #4A0D18; --plum: #7A1C2C;
  --good: #1E7A45; --good-bg: #E2F1E2; --bad: #B3122E; --bad-bg: #FBE2DF;
  --accent: #F2C14E; --wine: #4A0D18; --pale: #FFE7A6; --cream: #FFF4E3; --deep: #2A0A11;
  --display: 'Limelight', Georgia, serif;
  --font: 'Jost', 'Avenir Next', -apple-system, 'Segoe UI', Arial, sans-serif;
  --r: 6px; --top: 66px;
  --star: #F2C14E; --star-ink: #24090F;
  --lit: radial-gradient(ellipse 75% 60% at 50% -8%, #FFFFFF 0%, #FFF7E8 38%, #F5E6CB 100%);
  /* engine hooks: text on the gold action color, the hotspot ring and pulse, the selected glow */
  --on-blue: #24090F; --hs-ring: rgba(242, 193, 78, .45); --hs-pulse: rgba(242, 193, 78, .18); --sel-glow: rgba(242, 193, 78, .45);
}
body[data-theme="stage"] {
  color: var(--ink);
  background-color: #120608;
  /* velvet folds, darker at the edges, with a spotlight from the top */
  background-image: radial-gradient(ellipse 55% 45% at 58% 0%, rgba(242, 193, 78, .13), transparent 70%),
    linear-gradient(90deg, rgba(74, 13, 24, .85), rgba(18, 6, 8, 0) 14%, rgba(18, 6, 8, 0) 86%, rgba(74, 13, 24, .85)),
    repeating-linear-gradient(90deg, #1B080C 0 28px, #14060A 28px 56px);
  background-attachment: fixed;
}
[data-theme="stage"] h1, [data-theme="stage"] h2, [data-theme="stage"] h3 { font-family: var(--display); font-weight: 400; font-stretch: normal; letter-spacing: 0; line-height: 1.12; }
[data-theme="stage"] h4 { font-family: var(--font); font-weight: 600; font-stretch: normal; letter-spacing: 0; }
[data-theme="stage"] :focus-visible { outline: 3px solid #B3122E; outline-offset: 2px; }
[data-theme="stage"] .top :focus-visible, [data-theme="stage"] .rail :focus-visible, [data-theme="stage"] .hero :focus-visible, [data-theme="stage"] .modcard:focus-visible,
[data-theme="stage"] .player :focus-visible, [data-theme="stage"] .coach .say :focus-visible, [data-theme="stage"] .boss :focus-visible { outline-color: var(--pale); }

/* buttons: footlight gold, square-shouldered */
[data-theme="stage"] .btn { border-radius: 4px; font-weight: 600; }
[data-theme="stage"] .btn.primary { color: var(--ink); box-shadow: inset 0 -3px 0 rgba(74, 13, 24, .22), 0 0 18px rgba(242, 193, 78, .25); }
[data-theme="stage"] .btn.primary:hover { background: #FFD36A; }
[data-theme="stage"] .btn.primary:disabled { background: #E4D4B8; color: #8F7A66; box-shadow: none; }
[data-theme="stage"] .btn.dark { background: var(--wine); color: var(--cream); }
[data-theme="stage"] .btn.dark:hover { background: var(--deep); }
[data-theme="stage"] .btn.ghost { box-shadow: inset 0 0 0 1.5px #D5BB97; }
[data-theme="stage"] .btn.ghost:hover { background: rgba(242, 193, 78, .16); }
[data-theme="stage"] .btn.big { border-radius: 5px; }
[data-theme="stage"] .linkbtn:hover { background: rgba(242, 193, 78, .18); }

/* top bar: the theater's front, with a row of bulbs along its edge */
[data-theme="stage"] .top { background: var(--wine); color: var(--cream); border-bottom: 0; backdrop-filter: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
[data-theme="stage"] .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; pointer-events: none; background: radial-gradient(circle, #FFF3C4 0 2.6px, rgba(242, 193, 78, .45) 3.4px, transparent 5.5px) 0 0 / 24px 12px repeat-x; }
[data-theme="stage"] .brand { color: var(--cream); }
[data-theme="stage"] .brand b { font-family: var(--display); font-weight: 400; font-stretch: normal; font-size: 24px; color: var(--gold); letter-spacing: 0; }
[data-theme="stage"] .brand small { color: #E2BFA8; }
[data-theme="stage"] .brand .glyph { width: 34px; height: 34px; }
[data-theme="stage"] .iconbtn { color: var(--cream); border-radius: 5px; }
[data-theme="stage"] .iconbtn:hover { background: rgba(255, 255, 255, .1); }
[data-theme="stage"] .xp { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .35); border-radius: 5px; }
[data-theme="stage"] .xp .lv { background: var(--gold); color: var(--ink); font: 400 16px var(--display); box-shadow: 0 0 12px rgba(242, 193, 78, .6); }
[data-theme="stage"] .xp .meta b { color: var(--cream); }
[data-theme="stage"] .xp .meta small { color: #E2BFA8; }
[data-theme="stage"] .xp .track { background: rgba(255, 255, 255, .16); }
[data-theme="stage"] .xp .plus { color: var(--pale); }
[data-theme="stage"] .combo { background: #B3122E; color: var(--pale); border-radius: 4px; }
[data-theme="stage"] .menu { color: var(--ink); background: var(--cream); border-radius: 6px; }
[data-theme="stage"] .menu label:hover { background: #F5E4C6; }
[data-theme="stage"] .menu input { accent-color: #B3122E; }

/* the path: a set list taped to the stage floor */
[data-theme="stage"] .rail { background: #1A080C; border-right: 1px solid #3A1A1F; color: var(--cream); padding-top: 26px; }
[data-theme="stage"] .rail h3 { font: 400 24px var(--display); color: var(--gold); margin-bottom: 2px; }
[data-theme="stage"] .rail .sub { color: #C9AC97; margin-bottom: 22px; }
[data-theme="stage"] .path { background: #F7EEDC; color: var(--ink); padding: 18px 12px 10px 8px; border-radius: 2px; transform: rotate(-.8deg); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(179, 18, 46, .08) 31px 32px); }
[data-theme="stage"] .path::before { left: 50%; top: -11px; bottom: auto; width: 96px; height: 22px; background: rgba(214, 208, 192, .82); transform: translateX(-50%) rotate(2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
[data-theme="stage"] .path li { border-bottom: 1px dashed #D6C1A0; }
[data-theme="stage"] .path li:last-child { border-bottom: 0; }
[data-theme="stage"] .path button { padding: 8px 6px 8px 0; border-radius: 3px; }
[data-theme="stage"] .path .dot { width: 34px; height: 34px; background: none; box-shadow: none; color: #B3122E; font: 400 20px var(--display); }
[data-theme="stage"] .path .done .dot { background: none; color: var(--good); font: 600 20px var(--font); }
[data-theme="stage"] .path .cur button { background: radial-gradient(ellipse 80% 120% at 30% 50%, rgba(242, 193, 78, .55), rgba(242, 193, 78, 0) 75%); }
[data-theme="stage"] .path .cur .dot { background: var(--gold); color: var(--ink); border-radius: 50%; box-shadow: 0 0 14px rgba(242, 193, 78, .9); font-size: 20px; }
[data-theme="stage"] .path .t { color: var(--ink); font-size: 16px; }
[data-theme="stage"] .path .done:not(.cur) .t { text-decoration: line-through; text-decoration-color: rgba(179, 18, 46, .75); text-decoration-thickness: 2px; }
[data-theme="stage"] .path .m { color: #7D5E52; }
[data-theme="stage"] .path button:hover .t { color: #B3122E; }
[data-theme="stage"] .trophies { border-top-color: #3A1A1F; margin-top: 26px; }
[data-theme="stage"] .trophies h4, [data-theme="stage"] .rail .meta, [data-theme="stage"] .rail .reset { color: #C9AC97; }
[data-theme="stage"] .badge { background: #2A0A11; box-shadow: inset 0 0 0 1px #4A2028; border-radius: 50%; }
[data-theme="stage"] .badge.on { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(242, 193, 78, .45); }

/* cards: warm white, lit from above like a spotlight */
[data-theme="stage"] .card { background: var(--lit); border-radius: 8px; padding: clamp(20px, 3vw, 40px); box-shadow: 0 0 0 1px rgba(242, 193, 78, .45), 0 0 70px rgba(242, 193, 78, .16), 0 24px 60px rgba(0, 0, 0, .6); }
[data-theme="stage"] .card:has(.hero) { background: none; padding: 0; box-shadow: none; }
[data-theme="stage"] .beathead h2 { font-size: clamp(32px, 4.2vw, 48px); color: var(--wine); max-width: 20ch; }
[data-theme="stage"] .lede { color: var(--ink2); }
[data-theme="stage"] .eyebrow { color: #B3122E; font-weight: 600; }
[data-theme="stage"] .eyebrow i { width: 11px; height: 11px; border-radius: 50%; transform: none; background: var(--gold); box-shadow: 0 0 0 2px #FFF3C4, 0 0 10px 2px rgba(242, 193, 78, .8); }
[data-theme="stage"] .footerbar { border-top: 1px dashed #D5BB97; }
[data-theme="stage"] .steps { gap: 8px; }
[data-theme="stage"] .steps i { width: 12px; height: 12px; border-radius: 50%; background: #E6D3B3; }
[data-theme="stage"] .steps i.done { background: var(--wine); }
[data-theme="stage"] .steps i.on { background: var(--gold); box-shadow: 0 0 10px 2px rgba(242, 193, 78, .8); }
[data-theme="stage"] .kicker { color: #B3122E; font-weight: 600; }
[data-theme="stage"] .panel { background: #FFF9EE; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="stage"] .panel.white { background: #FFFDF8; }
[data-theme="stage"] .chip { border-radius: 3px; }
[data-theme="stage"] .hint { color: var(--mute); }
[data-theme="stage"] .foot-note { color: #A88C79; border-top-color: #3A1A1F; }

/* coach: Sol, on air */
[data-theme="stage"] .coach .ava { background: var(--deep); box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(242, 193, 78, .55); }
[data-theme="stage"] .coach .say { background: var(--deep); color: var(--cream); border-radius: 3px 16px 16px 16px; box-shadow: inset 0 0 0 1px #6E2A36, 0 10px 24px rgba(42, 10, 17, .25); }
[data-theme="stage"] .coach .say b { color: var(--pale); }
[data-theme="stage"] .coach .name { color: var(--gold); }
[data-theme="stage"] .coach.good .say { box-shadow: inset 0 0 0 2px #6FCF8E; }
[data-theme="stage"] .coach.bad .say { box-shadow: inset 0 0 0 2px #FF8A8A; }
[data-theme="stage"] .coach.ok .say { box-shadow: inset 0 0 0 2px var(--gold); }
[data-theme="stage"] .hear { background: rgba(242, 193, 78, .2); color: var(--gold); border-radius: 6px; }

/* landing: a marquee, bulbs all the way round */
[data-theme="stage"] .hero { position: relative; border-radius: 14px; padding: 24px; background: #1A0508; gap: 0; box-shadow: 0 0 80px rgba(242, 193, 78, .18), 0 30px 70px rgba(0, 0, 0, .6); }
[data-theme="stage"] .hero::before { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: radial-gradient(circle at center, #FFF8D8 0 3.2px, #F2C14E 4.2px 5px, rgba(242, 193, 78, .28) 6px, transparent 9px) 0 0 / 24px 24px space; animation: marquee 1.8s ease-in-out infinite alternate; }
@keyframes marquee { from { opacity: .72; } to { opacity: 1; } }
[data-theme="stage"] .hero .copy { position: relative; z-index: 1; background: radial-gradient(ellipse 90% 70% at 20% 0%, #6B1627 0%, #2A0A11 72%); border-radius: 6px 0 0 6px; }
[data-theme="stage"] .hero h1 { font-size: clamp(46px, 6vw, 86px); color: var(--gold); line-height: 1; text-shadow: 0 0 30px rgba(242, 193, 78, .35); }
[data-theme="stage"] .hero .kicker { color: var(--pale) !important; }
[data-theme="stage"] .hero .lede { color: rgba(255, 244, 227, .86); }
[data-theme="stage"] .hero .meta .chip { background: transparent; border-radius: 3px; box-shadow: none; border: 1.5px dashed rgba(242, 193, 78, .65); color: var(--pale); }
[data-theme="stage"] .hero .namebox input { border-radius: 4px; border-color: rgba(242, 193, 78, .4); }
[data-theme="stage"] .hero small.fine { color: rgba(255, 244, 227, .62); }
[data-theme="stage"] .hero .art { position: relative; z-index: 1; background: #120608; padding: 0; border-radius: 0 6px 6px 0; overflow: hidden; }
[data-theme="stage"] .hero .art img { max-height: none; height: 100%; object-fit: cover; }
[data-theme="stage"] .landing-below { margin-top: 34px; }
[data-theme="stage"] .landing-below .kicker { font: 400 32px var(--display); color: var(--gold); margin-bottom: 14px; }
[data-theme="stage"] .modcard { background: radial-gradient(ellipse 90% 80% at 50% 0%, #4A1520, #22080D 78%); border-radius: 8px; box-shadow: inset 0 0 0 1px #5A2430; color: var(--cream); }
[data-theme="stage"] .modcard:hover { box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px rgba(242, 193, 78, .2); }
[data-theme="stage"] .modcard b { font: 600 16px/1.2 var(--font); color: var(--cream); }
[data-theme="stage"] .modcard small { color: #C9AC97; }

/* activities */
[data-theme="stage"] .flip .f { background: radial-gradient(ellipse 90% 70% at 50% 0%, #6B1627, #2A0A11 78%); color: var(--cream); border-radius: 8px; box-shadow: inset 0 0 0 1px #6E2A36; }
[data-theme="stage"] .flip .f b { font: 600 20px/1.3 var(--font); }
[data-theme="stage"] .flip .f small { color: #E2BFA8; }
[data-theme="stage"] .flip:not(.on):hover .f { box-shadow: inset 0 0 0 2px var(--gold); }
[data-theme="stage"] .flip .b { background: var(--lit); color: var(--ink); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--gold); font-size: 16px; }
[data-theme="stage"] .flip .b b { color: #B3122E; font-size: 14px; }
[data-theme="stage"] .choice, [data-theme="stage"] .tok, [data-theme="stage"] .orow, [data-theme="stage"] .swcard { background: #FFFDF8; }
[data-theme="stage"] .choice { border-radius: 6px; }
[data-theme="stage"] .choice:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--wine); }
[data-theme="stage"] .choice .k { background: var(--wine); color: var(--gold); border-radius: 50%; }
[data-theme="stage"] .choice.picked { box-shadow: inset 0 0 0 2px #B3122E; }
[data-theme="stage"] .choice.right { background: var(--good-bg); }
[data-theme="stage"] .choice.wrong { background: var(--bad-bg); }
[data-theme="stage"] .qhead { font: 600 clamp(19px, 2.2vw, 23px)/1.35 var(--font); color: var(--ink); }
[data-theme="stage"] .fb { border-radius: 6px; }
[data-theme="stage"] .tray { background: rgba(74, 13, 24, .05); border: 1.5px dashed #D5BB97; border-radius: 6px; }
[data-theme="stage"] .tok { border-radius: 6px; }
[data-theme="stage"] .tok:hover { box-shadow: inset 0 0 0 2px var(--wine); }
[data-theme="stage"] .tok.sel { box-shadow: inset 0 0 0 2px #B3122E, 0 0 0 4px rgba(242, 193, 78, .45), 0 8px 18px rgba(74, 13, 24, .2); }
[data-theme="stage"] .tok.good { background: var(--good-bg); }
[data-theme="stage"] .bin { border-radius: 8px; border: 2px dashed #D5BB97; background: rgba(255, 253, 248, .75); }
[data-theme="stage"] .bin h4 { font-size: 16px; }
[data-theme="stage"] .bin h4 i { border-radius: 50%; box-shadow: 0 0 8px var(--c); }
[data-theme="stage"] .bin.hot, [data-theme="stage"] .bin:hover { background: #FFF6E2; }
[data-theme="stage"] .pair { border-radius: 6px; }
[data-theme="stage"] .swcard { border-radius: 10px; background: var(--lit); box-shadow: 0 0 0 1px var(--line), 0 0 40px rgba(242, 193, 78, .2), 0 16px 34px rgba(74, 13, 24, .15); }
[data-theme="stage"] .swcard .txt { font: 600 clamp(20px, 2.4vw, 26px)/1.3 var(--font); color: var(--ink); }
[data-theme="stage"] .orow { border-radius: 6px; }
[data-theme="stage"] .orow::before { border-radius: 50%; background: var(--wine); color: var(--gold); font: 600 14px var(--font); }
[data-theme="stage"] .orow .mv, [data-theme="stage"] .pb .mv { background: #F3E4CB; border-radius: 4px; }
[data-theme="stage"] .slot { border-radius: 6px; border-color: #D5BB97; }
[data-theme="stage"] .slot .n { border-radius: 50%; background: var(--wine); color: var(--gold); font: 600 14px var(--font); }
[data-theme="stage"] .slot.filled { border-color: var(--wine); background: #FFFDF8; }
[data-theme="stage"] .slot.right { background: var(--good-bg); border-color: var(--good); }
[data-theme="stage"] .slot.wrong { background: var(--bad-bg); border-color: var(--bad); }
[data-theme="stage"] .hotwrap, [data-theme="stage"] .huntwrap { border-radius: 8px; }
/* hotspot bulbs: a steady glow on the dot, and a ring around it that swells and fades (opacity and
   transform only, so it stays on the compositor). It stops once the dot has been seen. */
[data-theme="stage"] .hs { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 3px #FFF8D8, 0 0 16px 5px rgba(242, 193, 78, .7); animation: none; }
[data-theme="stage"] .hs::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid rgba(255, 231, 166, .85); pointer-events: none; opacity: 0; transform: scale(.7); animation: bulb 1.6s ease-out infinite; will-change: transform, opacity; }
[data-theme="stage"] .hs.seen { background: var(--wine); color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
[data-theme="stage"] .hs.seen::after { content: none; animation: none; }
@keyframes bulb { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { [data-theme="stage"] .hs::after { animation: none; opacity: .6; transform: none; } }
[data-theme="stage"] .chat { background: #F3E6CF; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="stage"] .msg .bub { background: #FFFDF8; }
[data-theme="stage"] .msg.me .bub { background: var(--wine); color: var(--cream); }
[data-theme="stage"] .msg.me .who { color: var(--pale); opacity: .85; }
[data-theme="stage"] .msg.me .ava { background: var(--gold); color: var(--ink); }
[data-theme="stage"] .msg.note .bub { color: var(--ink2); }
[data-theme="stage"] .boss { background: radial-gradient(ellipse 90% 120% at 15% 0%, #6B1627, #2A0A11 72%); border-radius: 8px; box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(242, 193, 78, .25); }
[data-theme="stage"] .boss b { font: 400 32px/1.15 var(--display); color: var(--gold); }
[data-theme="stage"] .boss small { color: rgba(255, 244, 227, .78); }
[data-theme="stage"] .boss img { border-radius: 50%; box-shadow: 0 0 0 3px var(--gold); }
[data-theme="stage"] .stat { background: #FFF9EE; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="stage"] .stat b { font: 400 32px var(--display); color: var(--wine); }
[data-theme="stage"] .result .big { font: 400 76px var(--display); color: var(--wine); }
[data-theme="stage"] .result h3 { font-size: 32px; color: var(--wine); }
[data-theme="stage"] .qprog i.on { background: var(--gold); box-shadow: 0 0 8px rgba(242, 193, 78, .8); }
[data-theme="stage"] .lightning .clock .t { font: 400 32px var(--display); }
[data-theme="stage"] .lightning .clock .track i { background: var(--wine); }
[data-theme="stage"] .lightning .clock.low .track i { background: #B3122E; }
[data-theme="stage"] .player { border-radius: 10px; box-shadow: 0 0 0 2px rgba(242, 193, 78, .55), 0 18px 40px rgba(0, 0, 0, .35); }
[data-theme="stage"] .player .screen { background: #120608; }
[data-theme="stage"] .player .bigplay span { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 6px rgba(255, 231, 166, .35), 0 0 40px rgba(242, 193, 78, .7); }
[data-theme="stage"] .player .bar i { background: var(--gold); }
[data-theme="stage"] .player .cap, [data-theme="stage"] .player .ctrl { background: #120608; color: var(--cream); }
[data-theme="stage"] .player .title { border-radius: 4px; background: rgba(255, 244, 227, .94); }
[data-theme="stage"] .reflect textarea, [data-theme="stage"] .namebox input, [data-theme="stage"] .field { border-radius: 4px; }
[data-theme="stage"] .preview { border-radius: 6px; }
[data-theme="stage"] .toast { background: var(--deep); border-radius: 8px; box-shadow: 0 0 0 1px var(--gold), 0 16px 40px rgba(0, 0, 0, .5); }
[data-theme="stage"] .toast .medal { background: var(--cream); border-radius: 50%; }
[data-theme="stage"] .toast .lvmedal { background: var(--gold); color: var(--ink); border-radius: 50%; font: 400 24px var(--display); }
[data-theme="stage"] .toast span { color: rgba(255, 244, 227, .78); }

/* who's in the room (read) */
.room { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.room > div { background: radial-gradient(ellipse 90% 80% at 50% 0%, #4A1520, #22080D 80%); color: var(--cream); border-radius: 8px; padding: 18px 20px; display: grid; gap: 4px; }
.room b { font: 400 24px/1.15 var(--display); color: var(--gold); }
.room span { font-weight: 600; font-size: 16px; }
.room em { font-style: normal; color: #E2BFA8; font-size: 14px; }
.room .gov { box-shadow: 0 0 0 2px var(--gold); }

/* the persona switch (custom) */
.pswitch .seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pswitch .seat { position: relative; background: #2A0A11; color: var(--cream); border-radius: 8px 8px 4px 4px; padding: 30px 14px 14px; transition: box-shadow .3s, background .3s; }
.pswitch .seat b { display: block; font-size: 16px; line-height: 1.25; }
.pswitch .seat small { display: block; font-size: 14px; color: #C9AC97; margin-top: 4px; line-height: 1.35; }
.pswitch .lamp { position: absolute; top: 10px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #5A2430; }
.pswitch .seat.lit { background: radial-gradient(ellipse 90% 90% at 50% 0%, #7A2A30, #2A0A11 85%); box-shadow: 0 0 0 2px var(--gold), 0 0 34px rgba(242, 193, 78, .45); }
.pswitch .seat.lit .lamp { background: var(--gold); box-shadow: 0 0 12px 3px rgba(242, 193, 78, .9); }
.pswitch .landed:not(:empty) { margin-top: 10px; }
.pswitch .landed .pline { background: rgba(255, 244, 227, .1); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .6); font-size: 14px; padding: 10px 12px; cursor: default; }
.pswitch .feature { margin: 18px 0 6px; padding: 14px 18px; background: #FFFDF8; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.pswitch .feature small { display: block; color: #B3122E; font-weight: 600; font-size: 14px; }
.pswitch .feature p { margin: 2px 0 0; font-size: 16px; font-weight: 500; }
.pswitch .ask { font-size: 16px; margin: 14px 0 10px; min-height: 1.5em; }
.pswitch .lines { display: grid; gap: 10px; }
.pswitch .pline { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 14px 16px; background: #FFFDF8; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; line-height: 1.45; cursor: pointer; }
.pswitch .pline:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--wine); }
.pswitch .pline.nope { animation: shake .4s; background: var(--bad-bg); }
.pswitch .lines .btn { justify-self: start; }
.pswitch .pline.spare { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(74, 13, 24, .5); cursor: default; }

/* the final pitch builder (custom) */
.pb .booking { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; margin-bottom: 18px; }
.pb .bk { background: radial-gradient(ellipse 90% 90% at 50% 0%, #4A1520, #22080D 80%); color: var(--cream); border-radius: 8px; padding: 16px 18px; display: grid; gap: 3px; border-left: 0; }
.pb .bk small { color: var(--pale); font-weight: 600; font-size: 14px; }
.pb .bk b { font: 400 24px/1.15 var(--display); color: var(--gold); }
.pb .bk span { font-size: 14px; color: #F0DCC6; }
.pb .bk .role { font: 600 14px var(--font); color: var(--cream); }

.pb .pbgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; }
.pb .sethead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pb .sethead b { font: 400 24px var(--display); color: var(--wine); }
.pb .clock { font-weight: 600; font-variant-numeric: tabular-nums; }
.pb .meterbar { height: 10px; border-radius: 5px; background: #EBD9BC; overflow: hidden; margin-bottom: 10px; }
.pb .meterbar i { display: block; height: 100%; width: 0; background: var(--gold); box-shadow: 0 0 10px rgba(242, 193, 78, .9); transition: width .3s; }
.pb.over .meterbar i { background: #B3122E; box-shadow: none; }
.pb.over .clock { color: #B3122E; }
.pb .setlist { list-style: none; margin: 0 0 14px; padding: 12px; background: #F7EEDC; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); counter-reset: s; display: grid; gap: 8px; min-height: 120px; }
.pb .setlist .empty { color: var(--mute); font-size: 14px; padding: 10px 6px; }
.pb .setlist .act { counter-increment: s; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n tx mn" "n ctl ctl"; gap: 4px 10px; align-items: center; background: #FFFDF8; border-radius: 6px; padding: 10px 10px 8px; box-shadow: inset 0 0 0 1px var(--line); animation: rise .3s; }
.pb .setlist .act::before { content: counter(s); grid-area: n; width: 28px; height: 28px; border-radius: 50%; background: var(--wine); color: var(--gold); display: grid; place-items: center; font: 600 14px var(--font); align-self: start; }
.pb .setlist .tx { grid-area: tx; font-size: 14px; line-height: 1.4; }
.pb .setlist .mn { grid-area: mn; font-size: 14px; font-weight: 600; color: var(--wine); white-space: nowrap; align-self: start; }
.pb .setlist .ctl { grid-area: ctl; display: flex; gap: 6px; justify-content: flex-end; }
.pb .mv { width: 34px; height: 32px; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.pb .mv:disabled { opacity: .3; cursor: default; }
.pb .mv svg { width: 17px; height: 17px; }
.pb .scoreit { margin-right: 10px; }
.pb .pal { display: grid; gap: 8px; }
.pb .pg { font-weight: 600; font-size: 14px; color: #B3122E; margin-top: 6px; }
.pb .pbk { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; width: 100%; text-align: left; border: 0; background: #FFFDF8; border-radius: 6px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.4; cursor: pointer; }
.pb .pbk:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--wine); }
.pb .pbk:disabled { opacity: .38; cursor: default; }
.pb .pbk em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--wine); white-space: nowrap; }
.pb .rubric { margin-top: 22px; background: #FFF9EE; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); padding: 6px 18px 10px; }
.pb .rh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 8px; border-bottom: 1px dashed #D5BB97; }
.pb .rh { flex-wrap: wrap; }
.pb .rh b { font: 400 24px var(--display); color: var(--wine); white-space: nowrap; }
.pb .rt { font-weight: 600; color: var(--ink2); }
.pb .rl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 0; border-bottom: 1px dashed #E3CFAE; }
.pb .rl:last-child { border-bottom: 0; }
.pb .rn b { font-size: 16px; } .pb .rn small { display: block; color: var(--mute); font-size: 14px; }
.pb .rs { display: flex; gap: 6px; align-items: center; }
.pb .rs i { width: 16px; height: 16px; border-radius: 50%; background: #E6D3B3; }
.pb .rs i.on { background: var(--gold); box-shadow: 0 0 0 2px #FFF3C4, 0 0 10px 2px rgba(242, 193, 78, .85); }
.pb .rw { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; }
.pb .rw:empty { display: none; }
.pb .rtog { display: none; }
.pb .vbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pb .rl.s2 .rw { color: var(--good); } .pb .rl.s1 .rw { color: var(--canopy); } .pb .rl.s0 .rw { color: var(--bad); }
.pb .verdict { margin-top: 18px; display: flex; gap: 20px; align-items: center; padding: 18px 20px; border-radius: 8px; background: radial-gradient(ellipse 90% 120% at 15% 0%, #6B1627, #2A0A11 72%); color: var(--cream); }
.pb .verdict.ovation { box-shadow: 0 0 0 2px var(--gold), 0 0 40px rgba(242, 193, 78, .35); }
.pb .verdict .vs b { font: 400 64px/1 var(--display); color: var(--gold); white-space: nowrap; }
.pb .verdict .vs small { font-size: 24px; color: var(--pale); }
.pb .verdict h3 { font-size: 32px; color: var(--gold); margin-bottom: 4px; }
.pb .verdict p { color: rgba(255, 244, 227, .86); }
.pb .verdict .btn.ghost { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(242, 193, 78, .6); }

/* the platform, floor up (hotspot) */
.stk { background: radial-gradient(ellipse 70% 60% at 50% 0%, #4A1520, #160609 80%); padding: 30px 80px 26px 40px; color: var(--cream); }
.stk .frame { position: relative; border: 3px dashed var(--gold); border-radius: 12px; padding: 44px 20px 20px; display: grid; gap: 10px; justify-items: center; }
.stk .fl { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #2A0A11; color: var(--gold); padding: 3px 14px; border-radius: 4px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.stk .lyr { width: 100%; border-radius: 6px; padding: 10px 16px; display: grid; gap: 1px; text-align: center; }
.stk .lyr b { font-size: 20px; } .stk .lyr span { font-size: 14px; opacity: .85; }
.stk .l5 { width: 62%; background: var(--gold); color: var(--ink); }
.stk .l4 { width: 72%; background: var(--pale); color: var(--ink); }
.stk .l3 { width: 82%; background: #E8893A; color: var(--ink); }
.stk .l2 { width: 91%; background: #9A2A3A; }
.stk .l1 { background: #7A1C2C; }
.stk .appr { margin-top: 16px; text-align: center; font-weight: 600; font-size: 16px; color: var(--pale); }

/* Wren with Visit Notes (hotspot) */
.wren { background: #FFFDF8; color: var(--ink); font-size: 14px; }
.wren .wbar { display: flex; align-items: center; gap: 10px; padding: 12px 54px; background: var(--deep); color: var(--cream); }
.wren .wbar b { font: 400 20px var(--display); color: var(--gold); }
.wren .wbar span:last-child { color: #E2BFA8; margin-left: auto; font-size: 14px; }
.wren .wm { width: 24px; height: 24px; } .wren .wm svg { width: 100%; height: 100%; display: block; }
.wren .wgrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; padding: 16px 54px; }
.wren small { display: block; font-weight: 600; color: #B3122E; font-size: 14px; margin-bottom: 6px; }
.wren .win { background: #F7EEDC; border-radius: 6px; padding: 12px 14px; }
.wren .vn { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 6px; padding: 8px 10px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.wren .pl { width: 0; height: 0; border-left: 11px solid var(--wine); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.wren .ph { display: flex; gap: 8px; margin: 10px 0 8px; }
.wren .ph i { flex: 1; height: 54px; border-radius: 4px; background: linear-gradient(135deg, #8E9AA6, #5B6B7D); }
.wren .ph i:nth-child(2) { background: linear-gradient(135deg, #6B4E3A, #3A2A20); } .wren .ph i:nth-child(3) { background: linear-gradient(135deg, #9AA88E, #5E6E52); }
.wren .win > span { font-size: 14px; color: var(--ink2); }
.wren .wdraft { background: #fff; border-radius: 6px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.wren .wdraft p { margin: 0 0 8px; line-height: 1.45; }
.wren .flag { background: #FFF3D6; border-radius: 4px; padding: 6px 8px; }
.wren .cite { font-size: 14px; color: var(--ink2); border-top: 1px dashed var(--line); padding-top: 7px; }
.wren .wfoot { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 12px 54px 16px; border-top: 1px solid var(--line2); }
.wren .ask { flex: 1; background: #F7EEDC; border-radius: 6px; padding: 9px 12px; color: var(--ink2); }
.wren .approve { display: flex; gap: 10px; align-items: center; }
.wren .approve span:first-child { font-size: 14px; color: var(--ink2); max-width: 170px; line-height: 1.3; }
.wren .ab { background: var(--gold); color: var(--ink); font-weight: 600; padding: 8px 12px; border-radius: 4px; white-space: nowrap; }

.wren .call { margin: 0 0 4px; font-weight: 500; line-height: 1.4; }
.wren .win > span { display: block; }
.wren .hist { margin-top: 12px; background: #fff; border-radius: 6px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.wren .hist p { margin: 0 0 4px; line-height: 1.4; font-size: 14px; }

/* certificate (1650 x 1275): a marquee */
.scert { width: 1650px; height: 1275px; position: relative; background: #120608; font-family: var(--font); overflow: hidden; color: var(--cream); }
.scert .bulbs { position: absolute; left: 0; top: 0; }
.scert .sin { position: absolute; left: 72px; top: 72px; right: 72px; bottom: 72px; border-radius: 20px; background: radial-gradient(ellipse 70% 60% at 50% 0%, #7A1C2C 0%, #3A0A14 55%, #22060C 100%); border: 3px solid #F2C14E; display: flex; flex-direction: column; padding: 56px 90px 44px; overflow: hidden; }
.scert .shead { display: flex; align-items: center; gap: 20px; font-weight: 600; font-size: 26px; color: var(--pale); }
.scert .shead .mk { width: 64px; height: 64px; } .scert .shead .mk svg { width: 100%; height: 100%; display: block; }
.scert .shead .dt { margin-left: auto; font-weight: 500; font-size: 22px; color: #E2BFA8; }
.scert .sbody { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 34px; }
.scert .k { font-size: 24px; color: #E2BFA8; }
.scert .ttl { font: 400 70px/1.1 var(--display); color: var(--gold); margin-top: 12px; }
.scert .nm { font: 400 132px/1.08 var(--display); color: var(--cream); margin-top: 26px; overflow-wrap: anywhere; max-width: 1360px; }
.scert .nm.long { font-size: 104px; } .scert .nm.longer { font-size: 80px; }
.scert .line { font-size: 27px; line-height: 1.5; color: rgba(255, 244, 227, .86); max-width: 1180px; margin-top: 28px; }
.scert .stubs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: auto; width: 100%; background: var(--cream); color: var(--ink); border-radius: 10px; }
.scert .stubs div { padding: 20px 26px; border-left: 3px dashed #D5BB97; text-align: left; }
.scert .stubs div:first-child { border-left: 0; }
.scert .stubs small { display: block; font-size: 20px; color: #7D5E52; font-weight: 600; }
.scert .stubs b { font: 400 46px/1.2 var(--display); color: var(--wine); white-space: nowrap; }
.scert .fine { font-size: 17px; line-height: 1.45; color: #C9AC97; margin-top: 26px; text-align: center; }

/* pitch card (portrait, 1275 x 1650) */
.stake { width: 1275px; height: 1650px; background: #FFF8EA; color: var(--ink); font-family: var(--font); display: flex; flex-direction: column; padding-bottom: 26px; }
.stake .th { position: relative; height: 176px; flex: none; display: flex; align-items: center; gap: 26px; padding: 0 86px; background: radial-gradient(ellipse 70% 120% at 30% 0%, #7A1C2C, #22060C 80%); color: var(--cream); }
.stake .th .bulbs { position: absolute; left: 0; top: 0; }
.stake .th .mk { position: relative; width: 84px; height: 84px; } .stake .th .mk svg { width: 100%; height: 100%; display: block; }
.stake .th > div { position: relative; }
.stake .th b { font: 400 76px/1 var(--display); color: var(--gold); display: block; }
.stake .th span { font-size: 24px; color: #E2BFA8; }
.stake .th .who { margin-left: auto; text-align: right; font-size: 21px; color: #E2BFA8; }
.stake .th .who b { font: 600 30px var(--font); color: var(--cream); }
.stake .tb { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 46px; padding: 24px 86px 0; flex: 1; align-content: start; }
.stake h4 { font: 400 28px/1.15 var(--display); color: var(--wine); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 3px solid var(--gold); }
.stake li { font-size: 18.5px; line-height: 1.38; margin-bottom: 5px; }
.stake ul, .stake ol { margin: 0; padding-left: 26px; }
.stake .full { grid-column: 1 / -1; }
.stake .box { background: var(--deep); color: var(--cream); padding: 18px 26px 22px; border-radius: 12px; }
.stake .box h4 { color: var(--gold); border-bottom: 0; padding-bottom: 0; }
.stake .run { display: grid; grid-template-columns: 1.35fr 1.35fr 1.35fr 2fr 2fr 2.6fr; gap: 8px; }
.stake .run div { background: var(--gold); color: var(--ink); border-radius: 6px; padding: 9px 14px; display: grid; gap: 2px; }
.stake .run div:nth-child(n+5) { background: var(--pale); }
.stake .run b { font: 400 30px/1 var(--display); color: var(--wine); }
.stake .run span { font-weight: 600; font-size: 19px; line-height: 1.2; }
.stake .run small { font-size: 16px; color: #5A3A32; }
.stake .fine { font-size: 16px; color: var(--mute); padding: 0 86px; }
.stake .lead { font-size: 18px; line-height: 1.42; margin: 0; }
.stake .mine { background: #FFF1D6; border-radius: 12px; padding: 16px 26px 18px; border: 2px solid var(--gold); }
.stake .mg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 34px; }
.stake .mg .was { grid-column: 1 / -1; }
.stake .mg small { display: block; font-weight: 600; font-size: 17px; color: #B3122E; }
.stake .mg p { margin: 2px 0 0; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.stake .blank { color: var(--mute); font-style: italic; }
.stake .sheet table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.stake .sheet td { border-bottom: 1px solid #E3CFAE; padding: 3px 0; font-size: 17px; vertical-align: middle; }
.stake .sheet td b { display: inline; margin-right: 8px; } .stake .sheet td span { color: var(--ink2); font-size: 16.5px; }
.stake .sheet .bx { width: 46px; text-align: center; padding: 0; } .stake .sheet .bx::before { content: ""; display: inline-block; width: 26px; height: 26px; border: 2px solid var(--wine); border-radius: 4px; vertical-align: middle; margin-right: 4px; }
.stake .sheet .bx { font-size: 15px; color: var(--ink2); width: 70px; }
.stake .tot { display: flex; justify-content: space-between; gap: 30px; margin-top: 12px; font-size: 18px; }
.stake .tot i { display: inline-block; width: 60px; border-bottom: 2px solid var(--ink); margin: 0 6px; } .stake .tot i.long { width: 220px; }

@media (max-width: 1000px) {
  [data-theme="stage"] .path { transform: none; }
}
@media (max-width: 760px) {
  [data-theme="stage"] .card { padding: 18px 16px; }
  [data-theme="stage"] .main { padding: 18px 10px 32px; }
  [data-theme="stage"] .brand b { font-size: 20px; }
  [data-theme="stage"] .hero { padding: 18px; }
  [data-theme="stage"] .hero::before { background-size: 18px 18px; }
  [data-theme="stage"] .hero .copy { border-radius: 0 0 6px 6px; }
  [data-theme="stage"] .hero .art { border-radius: 6px 6px 0 0; }
  [data-theme="stage"] .hero h1 { font-size: 46px; }
  [data-theme="stage"] .hero h1 .nb { white-space: nowrap; }
  .room, .pswitch .seats, .pb .booking, .pb .pbgrid { grid-template-columns: 1fr; }
  .pswitch .seats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pswitch .seat { padding: 10px 10px 10px 30px; } .pswitch .seat b { font-size: 14px; } .pswitch .seat small { font-size: 14px; }
  .pswitch .lamp { left: 10px; top: 14px; }
  .pb .rtog { display: inline-flex; }
  .pb.rcol .rls { display: none; }
  [data-theme="stage"] .boss b { font-size: 24px; }
  .pb .palcol { order: -1; }
  .pb .setcol { margin-top: 8px; }
  .pb .verdict { flex-direction: column; align-items: flex-start; gap: 8px; }
}