/* Party Games shared styles. Base copied from Karaoke Queue (same look across Deus Core web apps); game styles at the end. */
:root{
  --bg:#0b0615;--panel:#1a1030;--line:#2e2150;--text:#f4efff;--mute:#a99cc7;
  --amber:#ffb63b;--pink:#e0337a;--ok:#2fd19a;--bad:#ff5d6c;--violet:#7c3aed;
  --btn:#2a1d48;--field:rgba(0,0,0,.3);--soft:rgba(0,0,0,.2);--chipbg:rgba(255,255,255,.08);--seatbg:rgba(255,255,255,.06);--on-accent:#2a1700;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* page styles like display:grid must never un-hide things */
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,.display{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-weight:400;letter-spacing:.5px}
h1{font-size:clamp(28px,6vw,44px);margin:6px 0;color:var(--amber)}
h2{font-size:18px;margin:0 0 8px}
a{color:var(--amber)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.hint{color:var(--mute);font-size:14px}
.err{color:var(--bad);min-height:1em;margin:8px 0 0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* link box with a Clear button next to it */
.qwrap{display:flex;gap:8px;align-items:center}.qwrap input{flex:1 1 auto;min-width:0}.qwrap button{flex:none}
input:not([type=radio]):not([type=checkbox]):not([type=file]){width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--field);color:var(--text);font:inherit;font-size:16px}
input:focus,button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--btn);color:var(--text);font:inherit;font-weight:700;cursor:pointer;text-decoration:none;min-height:44px}
button:disabled{opacity:.45;cursor:not-allowed}
/* "bubble" link/button: rounded pill in the accent color */
.pill,details>summary.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:1px solid var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;line-height:1.3;width:max-content;max-width:100%}
.biglink{color:var(--amber);font-weight:700;text-decoration:underline;text-underline-offset:3px;background:color-mix(in srgb,var(--amber) 16%,transparent);padding:1px 6px;border-radius:6px;word-break:break-all}
.howcode{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:14px}.howcode ol{margin:6px 0 0;padding-left:22px}.howcode li{margin:3px 0}
.pill:hover{background:color-mix(in srgb,var(--amber) 24%,transparent)}
details>summary.pill::-webkit-details-marker{display:none}details>summary.pill{list-style:none}
button.p,.btn.p{background:var(--violet);border-color:var(--violet)}
button.a{background:var(--amber);border-color:var(--amber);color:var(--on-accent)}
button.d{background:transparent;border-color:var(--bad);color:var(--bad)}
button.s{padding:6px 10px;min-height:36px;font-size:14px}
button.big{width:100%;font-size:20px;padding:16px}
.item{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.item .t{flex:1 1 160px;min-width:0;overflow-wrap:anywhere}.item .t span{display:block;color:var(--mute);font-size:13px}.item .t .hint{display:inline}
.item .t .dot,.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#555;margin-right:8px;vertical-align:middle}.dot.on{background:var(--ok)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;vertical-align:middle}
.badge.free{background:var(--btn);color:var(--mute)}.badge.pro{background:var(--amber);color:var(--on-accent)}.badge.dev{background:var(--pink);color:#fff}
.pulse{animation:pulse 1s ease-in-out 4}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(255,182,59,.55)}}
details summary{cursor:pointer;color:var(--mute);font-size:14px;margin-top:12px}

/* ---- color schemes (picked when the session is created; ids must match THEMES in src/session.ts) ---- */
/* ocean (the DEFAULT, owner Nov 8 2026): a light, sky-blue look */
[data-theme=ocean]{--bg:#e4f3fd;--panel:#ffffff;--line:#b6daf2;--text:#0b2a40;--mute:#4d6f88;--amber:#0277bd;--pink:#e0477a;--ok:#118a5a;--bad:#d93a4a;--violet:#5bc4f5;
  --btn:#d6eefc;--field:#ffffff;--soft:#eef8ff;--chipbg:#dff1fd;--seatbg:#f3faff;--on-accent:#ffffff;color-scheme:light}
[data-theme=ocean] .stage{background:radial-gradient(900px 500px at 50% -10%,#bfe6fb,transparent 70%),#eaf7ff}
[data-theme=ocean] .door.main{color:#06283d}
[data-theme=ocean] .gcard img{background:#0b2a40}
[data-theme=sunset]{--bg:#1a0a06;--panel:#2a130b;--line:#4a2414;--text:#fff3ec;--mute:#d1a58f;--amber:#ffcf4a;--pink:#ff3d7f;--violet:#e8481f}
[data-theme=forest]{--bg:#06140c;--panel:#0e2417;--line:#1d3f2a;--text:#effff4;--mute:#9cc4a8;--amber:#c8f25a;--pink:#ff6b6b;--violet:#1f9d55}
[data-theme=rose]{--bg:#17060f;--panel:#2a0d1d;--line:#4a1835;--text:#fff0f7;--mute:#d6a1bd;--amber:#ffb3d4;--pink:#ff4f6d;--violet:#c92a78}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.swatches label{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--mute);cursor:pointer}
.swatches input{position:absolute;opacity:0;pointer-events:none}
.swatches .sw{width:44px;height:44px;border-radius:50%;border:3px solid transparent;display:block}
.swatches input:checked+.sw{border-color:var(--text)}
.swatches input:focus-visible+.sw{outline:2px solid var(--amber);outline-offset:2px}

/* ---- footer ---- */
.foot{text-align:center;color:var(--mute);font-size:12px;padding:18px 12px 10px}
.foot a{color:var(--mute)}

/* ---- Free vs Pro table ---- */
table.cmp{width:100%;border-collapse:collapse;font-size:14px}
table.cmp th,table.cmp td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center;vertical-align:top}
table.cmp td:first-child,table.cmp th:first-child{text-align:left;color:var(--mute)}
table.cmp th{color:var(--amber);font-size:15px}

/* ---- classy background: soft "stage light" glows + faint dots, follows the color scheme ---- */
body.fancy{
  background:
    radial-gradient(1100px 650px at 8% -12%, color-mix(in srgb, var(--violet) 30%, transparent), transparent 62%),
    radial-gradient(900px 600px at 108% 112%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 60%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px,
    var(--bg);
  background-attachment: fixed;
}
body.fancy .panel{background:color-mix(in srgb, var(--panel) 88%, transparent);backdrop-filter:blur(6px)}

/* ---- foldable sections (public/pg-fold.js) ---- */
.panel .foldh{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none;margin-bottom:8px}
.panel .foldh::after{content:"▾";color:var(--mute);font-size:16px;transition:transform .2s}
.panel.folded{padding-bottom:6px}
.panel.folded .foldh{margin-bottom:0}
.panel.folded .foldh::after{transform:rotate(-90deg)}
.panel.folded > :not(h2){display:none!important}

/* ---- back to the home page ---- */
a.home{display:inline-block;align-self:flex-start;color:var(--mute);font-size:14px;text-decoration:none;padding:6px 0;margin-bottom:2px}
a.home:hover,a.home:focus-visible{color:var(--text)}

/* ---- Pro: − [ 3 days ] + control (public/pg-plans.js) ---- */
.stepper{display:flex;align-items:stretch;justify-content:center;gap:8px}
.stepper button{width:46px;min-height:46px;padding:0;font-size:24px;line-height:1;border-radius:12px;background:transparent;border:2px solid var(--line);color:var(--text)}
.stepper button:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.stepper output{min-width:110px;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:12px;font-weight:700;padding:0 12px;background:var(--soft);font-variant-numeric:tabular-nums}

/* ---- Pro: 1 Choose · 2 Checkout · 3 Receipt ---- */
ol.steps{list-style:none;display:flex;gap:6px;margin:4px 0 0;padding:0;counter-reset:st;flex-wrap:wrap}
ol.steps li{counter-increment:st;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mute);font-weight:700}
ol.steps li::before{content:counter(st);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);font-size:12px}
ol.steps li+li::after{content:none}
ol.steps li:not(:last-child)::after{content:"";display:inline-block;width:22px;height:2px;background:var(--line);margin-left:4px}
ol.steps li.done{color:var(--ok)}ol.steps li.done::before{content:"✓";border-color:var(--ok);background:var(--ok);color:#03140c}
ol.steps li.on{color:var(--amber)}ol.steps li.on::before{border-color:var(--amber);background:var(--amber);color:var(--on-accent)}


/* =====================================================================
   PARTY GAMES
   ===================================================================== */
.wrap{max-width:1100px;margin:0 auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:14px;min-height:100vh}
.grow{flex:1}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.logo{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:22px;color:var(--amber);text-decoration:none;letter-spacing:.5px}
.logo small{display:block;font-family:inherit;font-size:11px;color:var(--mute);letter-spacing:2px;text-transform:uppercase}
.stack{display:flex;flex-direction:column;gap:12px}
.mute{color:var(--mute)}
.center{text-align:center}
label.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:700}
label.chk input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--amber)}
label.chk span small{display:block;font-weight:400;color:var(--mute);font-size:13px;margin-top:2px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--amber);color:var(--on-accent);font-weight:700;padding:10px 16px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:50;max-width:calc(100% - 32px)}

/* home */
.hero{text-align:center;padding:26px 0 6px}
.hero h1{font-size:clamp(34px,8vw,64px);margin:0}
.hero p{color:var(--mute);margin:6px auto 0;max-width:560px}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px;border-radius:18px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 90%,transparent);color:var(--text);text-decoration:none;min-height:96px;transition:transform .15s,border-color .15s}
.door:hover,.door:focus-visible{transform:translateY(-2px);border-color:var(--amber)}
.door b{font-size:20px}.door span{color:var(--mute);font-size:14px}
.door.main{background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 70%,var(--panel)),var(--panel))}

/* game cards (home showcase + host picker) */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gcard{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:2px solid var(--line);background:var(--panel);text-align:left;padding:0;color:var(--text);font-weight:400;min-height:0;cursor:pointer}
.gcard:hover{border-color:color-mix(in srgb,var(--amber) 60%,var(--line))}
.gcard.sel{border-color:var(--amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 30%,transparent)}
.gcard img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#000}
.gcard .gb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.gcard .gt{font-weight:800;font-size:17px}
.gcard .gs{color:var(--mute);font-size:13px;line-height:1.3}
.gcard .gm{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--chipbg);font-size:12px;font-weight:700;color:var(--text)}
.chip.rec{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.chip.warn{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}
.gcard .passtag{position:absolute;top:8px;right:8px;background:var(--amber);color:var(--on-accent);font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.5px}
.gcard.locked img{filter:grayscale(.6) brightness(.7)}
.rules{display:flex;flex-direction:column;gap:8px}
.rules h3{margin:6px 0 0;font-size:15px;color:var(--amber)}
.rules p{margin:0;font-size:15px}
.rolelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.rolelist div{border-left:4px solid var(--c,var(--amber));background:var(--soft);border-radius:8px;padding:8px 10px;font-size:13px}
.rolelist b{display:block;font-size:14px}

/* layout: host page */
.hostgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:14px;align-items:start}
@media (max-width:900px){.hostgrid{grid-template-columns:1fr}}
.codebig{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:40px;letter-spacing:6px;color:var(--amber);line-height:1}
.qrbox{background:#fff;border-radius:12px;padding:8px;display:inline-block;line-height:0}
.qrbox img,.qrbox canvas{width:150px;height:150px;image-rendering:pixelated}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plist li{display:flex;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line)}
.plist li .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist li.out .n{text-decoration:line-through;color:var(--mute)}
.tag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--mute);text-transform:uppercase;letter-spacing:.4px}
.tag.host{background:var(--amber);color:var(--on-accent)}
.ctrls{display:flex;flex-wrap:wrap;gap:8px}
.ctrls button{flex:1 1 130px}
table.nar{width:100%;border-collapse:collapse;font-size:14px}
table.nar td{padding:6px 4px;border-bottom:1px solid var(--line)}
table.nar td.r{font-weight:800}
.hist{max-height:180px;overflow:auto;font-size:13px;color:var(--mute);margin:0;padding-left:18px}

/* stage (TV + host's preview) */
.stage{position:relative;border-radius:22px;overflow:hidden;background:radial-gradient(900px 500px at 50% -10%,color-mix(in srgb,var(--violet) 45%,transparent),transparent 70%),var(--bg);border:1px solid var(--line);padding:clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:clamp(10px,2vw,22px);min-height:340px;transition:background .6s}
.stage.dark{background:radial-gradient(900px 500px at 50% -10%,#1b2a55,transparent 70%),#03040b}
.stage .phase{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:clamp(30px,6vw,84px);line-height:1;color:var(--amber)}
.stage .say{font-size:clamp(17px,2.2vw,30px);max-width:46em}
.stage .timer{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:clamp(28px,5vw,72px);font-variant-numeric:tabular-nums;color:var(--text)}
.stage .timer.low{color:var(--bad)}
.stage .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,12vw,170px),1fr));gap:10px}
.seat{border-radius:14px;padding:10px 12px;background:var(--seatbg);border:1px solid var(--line);font-weight:800;font-size:clamp(14px,1.4vw,20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat small{display:block;font-weight:600;font-size:.7em;color:var(--mute)}
.seat.out{opacity:.45;text-decoration:line-through}
.seat.off{border-style:dashed}
.bigresult{font-size:clamp(22px,3.4vw,46px);font-weight:800}
.tally{display:flex;flex-wrap:wrap;gap:8px}
.joinbox{display:flex;gap:clamp(14px,3vw,40px);align-items:center;flex-wrap:wrap}
.joinbox .qrbox img,.joinbox .qrbox canvas{width:clamp(140px,18vw,260px);height:clamp(140px,18vw,260px)}
.joinbox .url{font-size:clamp(16px,2vw,28px)}
.winner{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:clamp(30px,6vw,80px);color:var(--amber);line-height:1.05}
.stagegame{display:flex;gap:16px;align-items:center}
.stagegame img{width:clamp(70px,9vw,130px);border-radius:14px}

/* player phone */
.rolecard{color:#fff;border-radius:20px;padding:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--c,var(--violet)) 60%,#000),#0b0b12);border:2px solid var(--c,var(--violet));min-height:150px;display:flex;flex-direction:column;gap:8px;user-select:none}
.rolecard .rn{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:34px;line-height:1}
.rolecard .rt{font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;opacity:.85}
.rolecard.hiddenrole{align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 12px,var(--line) 12px,var(--line) 24px);border-color:var(--line);cursor:pointer;text-align:center}
.targets{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.targets button.on{background:var(--amber);border-color:var(--amber);color:var(--on-accent)}
.banner{border-radius:16px;padding:14px 16px;background:color-mix(in srgb,var(--violet) 35%,var(--panel));border:1px solid var(--line)}
.banner.dark{background:#070a18}
.banner .ph{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:26px;color:var(--amber)}
.outnote{background:color-mix(in srgb,var(--bad) 18%,transparent);border:1px solid var(--bad);border-radius:12px;padding:10px 12px;font-weight:700}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.stage:fullscreen{border-radius:0;border:0;min-height:100vh;justify-content:center}
.btn.a{background:var(--amber);border-color:var(--amber);color:var(--on-accent)}
.ctrls button.big{flex:1 1 100%}

/* night screens stay dark in every color scheme */
.stage.dark,.banner.dark{color:#eef6ff}
.stage.dark .phase,.banner.dark .ph{color:#8fd8ff}
.stage.dark .mute,.stage.dark .seat small{color:#9db3c8}
.stage.dark .seat{background:rgba(255,255,255,.07);border-color:#22324d;color:#eef6ff}
.rolecard.hiddenrole{color:var(--text)}
.rolecard.hiddenrole b,.rolecard.hiddenrole .mute,.rolecard.hiddenrole .rn{background:var(--panel);padding:2px 10px;border-radius:8px}

/* ===== NIGHT: the whole screen becomes a night sky (moon in the corner + stars) while a dark round is on ===== */
body.night{
  --bg:#050816;--panel:rgba(16,22,48,.86);--line:#25335a;--text:#e8eeff;--mute:#9fb0d0;--amber:#8fd8ff;--violet:#3b4fa3;
  --btn:#18234a;--field:rgba(0,0,0,.35);--soft:rgba(255,255,255,.05);--chipbg:rgba(255,255,255,.08);--seatbg:rgba(255,255,255,.06);--on-accent:#04121f;
  color-scheme:dark;
  background:
    radial-gradient(2.3px 2.3px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 28% 42%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 46% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 63% 33%, #fff 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 78% 58%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 88% 82%, #fff 50%, transparent 51%),
    radial-gradient(2.1px 2.1px at 8% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 36% 88%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 40px 60px, #fff 50%, transparent 51%) 0 0 / 180px 160px,
    radial-gradient(1.8px 1.8px at 110px 20px, rgba(255,255,255,.7) 50%, transparent 51%) 0 0 / 140px 120px,
    radial-gradient(1.8px 1.8px at 70px 100px, rgba(255,255,255,.5) 50%, transparent 51%) 0 0 / 210px 190px,
    linear-gradient(#050816, #0d1436 60%, #1b1440);
  background-attachment:fixed;
}
body.night .stage,body.night .stage.dark{background:transparent;border-color:#25335a}
body.night .banner,body.night .banner.dark{background:rgba(10,14,34,.8);color:#e8eeff}
body.night .rolecard.hiddenrole{background:repeating-linear-gradient(45deg,#10162f,#10162f 12px,#1a2348 12px,#1a2348 24px);border-color:#25335a}
/* the moon sits in the top corner, behind everything (body is its own layer so the moon stays above the sky) */
body.night{position:relative;z-index:0;min-height:100vh}
html:has(body.night){background:#050816}
body.night::before{content:"";position:fixed;top:-40px;right:-40px;width:260px;height:260px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff6d8%22%20stop-opacity%3D%22.55%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff6d8%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2298%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2246%22%20fill%3D%22%23f8e8b4%22/%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2288%22%20r%3D%228%22%20fill%3D%22%23e9d08e%22/%3E%3Ccircle%20cx%3D%22114%22%20cy%3D%22112%22%20r%3D%226%22%20fill%3D%22%23e9d08e%22/%3E%3Ccircle%20cx%3D%22106%22%20cy%3D%2280%22%20r%3D%224%22%20fill%3D%22%23e9d08e%22/%3E%3C/svg%3E") no-repeat center / contain;pointer-events:none;z-index:-1;animation:moonin 1.2s ease}
@media (max-width:640px){body.night::before{width:170px;height:170px;top:-55px;right:-55px;opacity:.85}}
@media (min-width:641px){body.night .stage .top{padding-right:190px}}
@keyframes moonin{from{opacity:0;transform:translateY(30px)}}
body{transition:background-color .8s ease,color .8s ease}
body.sunrise .stage{animation:sunrise 1.6s ease}
@keyframes sunrise{from{filter:brightness(.35) saturate(.6)}to{filter:none}}
.sleepy{text-align:center;font-size:56px;line-height:1;margin:10px 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.sleepy b{font-size:20px}.sleepy span{font-size:15px}
.evcard .evn span{display:block}

/* ===== morning news + vote results: one picture per event, names underneath ===== */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),440px));justify-content:center;gap:14px}
.evcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);animation:evin .6s ease forwards}
.evcard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#0b1230}
.evcard .evb{padding:12px 14px 14px;text-align:center}
.evcard .evt{font-family:'Bowlby One','Arial Black',Impact,sans-serif;font-size:clamp(18px,2.2vw,30px);color:var(--amber);line-height:1.1}
.evcard .evn{font-size:clamp(20px,2.6vw,38px);font-weight:900;margin:4px 0}
.evcard .evn small{display:block;font-size:.5em;font-weight:700;color:var(--mute)}
.evcard .evx{color:var(--mute);font-size:clamp(14px,1.4vw,20px)}
@keyframes evin{to{opacity:1;transform:none}}

/* ===== Mafia teammates' picks on the target buttons (in red) ===== */
.targets button{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.targets button .by{display:block;font-size:11px;font-weight:800;color:#ff4d5e;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.targets button.on .by{color:#7a0010}

/* ===== typing in the Discussion ===== */
.chat{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding:4px 2px}
.chat .msg{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:6px 10px;font-size:15px;overflow-wrap:anywhere}
.chat .msg b{color:var(--amber);margin-right:6px}
.chatform{display:flex;gap:8px;margin-top:8px}.chatform input{flex:1;min-width:0}
.stage .chat{max-height:none;font-size:clamp(16px,1.6vw,24px)}
.stage .chat .msg{font-size:inherit}

/* ===== host timers ===== */
.times{display:flex;flex-direction:column;gap:6px}
.trow{display:grid;grid-template-columns:1fr 96px auto;align-items:center;gap:8px}
.trow input{text-align:center}