:root{--ink:#f6f8ef;--ember:#ff6a5c;--amber:#d6ff3f;--mint:#d6ff3f;--display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--sans:"Manrope","Segoe UI",system-ui,sans-serif;--mono:"Manrope","Segoe UI",system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
/* 1rem = 16px at 1920 wide, so the overlay scales to any browser-source size */
html{font-size:calc(100vw / 120)}
html,body{margin:0;height:100%;background:transparent;overflow:hidden}
body{color:var(--ink);font-family:var(--sans);font-weight:500;text-shadow:0 .1rem .9rem rgba(0,0,0,.65),0 .05rem .15rem rgba(0,0,0,.8)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}

/* Lower third: no box, just a soft shade behind the words so they read over any video */
.ov-card{position:absolute;left:0;bottom:0;width:78rem;padding:12rem 3.4rem 3.2rem;background:radial-gradient(ellipse 100% 100% at 0% 100%,rgba(8,6,4,.88) 0%,rgba(8,6,4,.7) 50%,transparent 98%)}
.ov-card.enter{animation:cardIn .8s var(--ease)}
@keyframes cardIn{from{opacity:0;transform:translateX(-10rem)}}
.ov-top{display:flex;align-items:flex-end;gap:2.4rem;margin-bottom:.9rem}
.ov-tag{font:600 1.3rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);padding-bottom:1rem}
.ov-clock{display:flex;align-items:baseline;gap:.9rem;margin-left:auto}
.ov-clock strong{font:500 6.2rem/.9 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ov-clock small{font:600 1.2rem var(--sans);letter-spacing:.06em;color:var(--amber)}
.ov-card h1{margin:0;font:500 5.4rem/1 var(--display);letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere;max-width:66rem}
.ov-card p{margin:1.1rem 0 0;font-size:1.9rem;line-height:1.35;font-weight:500;overflow-wrap:anywhere;max-width:60rem;color:#f1e8d6}
.ov-card p b{color:var(--amber)}
.ov-fuse{height:.7rem;margin-top:1.8rem;border-radius:99rem;background:rgba(255,255,255,.2);overflow:hidden;max-width:66rem}
.ov-fuse i{display:block;height:100%;width:100%;border-radius:99rem;background:var(--amber);box-shadow:0 0 1.4rem rgba(214,255,63,.7)}
.warn .ov-fuse i{background:#ffd166}
.crit .ov-fuse i{background:var(--ember)}
.crit .ov-clock strong{color:var(--ember);animation:pulse 1s steps(1) infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.ov-card[data-state=over] .ov-clock strong{color:var(--ember);animation:flash .7s steps(2,jump-none) infinite}
@keyframes flash{50%{opacity:.2}}
.ov-card[data-state=idle]{width:auto;padding:5rem 4rem 2.6rem 3rem;background:radial-gradient(ellipse 100% 100% at 0% 100%,rgba(8,6,4,.78) 0%,rgba(8,6,4,.45) 40%,transparent 72%)}
.ov-card[data-state=idle] .ov-top,.ov-card[data-state=idle] h1,.ov-card[data-state=idle] .ov-fuse{display:none}
.ov-card[data-state=idle] p{margin:0;font-size:1.7rem}
.ov-card[data-state=working] .ov-fuse,.ov-card[data-state=working] .ov-clock{display:none}

.ov-board{position:absolute;top:0;right:0;width:34rem;padding:3rem 3.2rem 7rem 7rem;background:radial-gradient(ellipse 100% 100% at 100% 0%,rgba(8,6,4,.86) 0%,rgba(8,6,4,.62) 50%,transparent 98%);animation:boardIn .8s var(--ease) .2s both}
@keyframes boardIn{from{opacity:0;transform:translateX(7rem)}}
.ov-board-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;font:600 1.25rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.ov-board-head img{width:2.6rem;height:2.6rem}
.ov-list{display:flex;flex-direction:column;gap:.2rem}
.ov-row{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:baseline;gap:.9rem;padding:.55rem 0;border-bottom:.08rem solid rgba(255,255,255,.2);animation:rowIn .5s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateX(2rem)}}
.ov-row .n{font:500 1.9rem var(--display);color:rgba(255,248,236,.6)}
.ov-row:first-child .n,.ov-row:first-child b{color:var(--amber)}
.ov-row:first-child strong{font-size:2rem}
.ov-row.bump strong{color:var(--mint)}
.ov-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.5rem;font-weight:600}
.ov-row b{font:500 1.6rem var(--display)}
.ov-row b small{font:800 .8rem var(--display);margin-left:.25rem;letter-spacing:.1em}
.ov-board.hidden{display:none}
/* Themes keep a strong dark backing over bright gameplay. */
:root[data-overlay-theme=ember]{--amber:#ffb36b;--mint:#ffd1a1;--ember:#ff7468}
:root[data-overlay-theme=mono]{--amber:#fff;--mint:#fff;--ember:#ff817a}
.ov-card{background:radial-gradient(ellipse 100% 100% at 0% 100%,rgba(4,5,5,.97) 0%,rgba(4,5,5,.88) 58%,transparent 100%)}
.ov-board{background:radial-gradient(ellipse 100% 100% at 100% 0%,rgba(4,5,5,.97) 0%,rgba(4,5,5,.88) 60%,transparent 100%)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}
/* A compact identity and stable timer make the overlay easy to follow on stream. */
.ov-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1.5rem;font:600 1.35rem var(--display);letter-spacing:.02em}
.ov-brand img{width:2.4rem;height:2.4rem}
.ov-live{margin-left:.4rem;padding:.35rem .7rem;border:.07rem solid currentColor;border-radius:99rem;color:var(--amber);font:600 .8rem var(--sans);letter-spacing:.12em}
.ov-clock{padding:.55rem 1rem;border-left:.2rem solid var(--amber);background:rgba(0,0,0,.3);border-radius:0 .5rem .5rem 0}
.ov-card[data-state=over] .ov-clock strong{animation:none}
.ov-card[data-state=idle] .ov-brand{margin-bottom:.75rem}
.ov-card[data-state=idle] .ov-live{display:none}
.ov-card[data-state=idle] p{font-weight:600;color:#fff}
.ov-card[data-state=idle]{background:radial-gradient(ellipse 100% 100% at 0% 100%,rgba(4,5,5,.96) 0%,rgba(4,5,5,.82) 55%,transparent 100%)}
.ov-next{position:absolute;top:3rem;left:3.4rem;width:32rem;padding:1.1rem 1.4rem;background:rgba(4,5,5,.92);border-radius:.8rem}.ov-next[hidden]{display:none}.ov-next>strong{font:600 1.3rem var(--display);color:var(--amber)}.ov-vote{position:relative;display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0 .65rem;font-size:1rem;overflow:hidden}.ov-vote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ov-vote i{position:absolute;left:0;bottom:0;height:.18rem;background:var(--amber)}
.ov-playing{color:var(--amber);font-size:1.1rem;margin-bottom:.7rem}.ov-playing[hidden]{display:none}
.ov-result{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);max-width:70%;padding:1.3rem 2rem;border-radius:1rem;background:rgba(4,5,5,.96);border:.12rem solid var(--amber);color:#fff;text-align:center;font:600 2rem var(--display);z-index:5;animation:result-in .35s ease both}.ov-result.failed{border-color:#9b9f95}.ov-result[hidden]{display:none}@keyframes result-in{from{opacity:0;transform:translate(-50%,-40%)}}.ov-tonight{position:absolute;right:3rem;bottom:2.5rem;padding:.5rem .8rem;border-radius:.5rem;background:rgba(4,5,5,.9);font:600 1.05rem var(--sans);color:#fff}