/* LiveDares: near-black with an acid-lime accent. The flowing clip is graded to monochrome + lime. */
:root,[data-theme=dark]{
  --bg:#08090a;--text:#f4f6ee;--soft:#c9ccc0;--muted:#8f9387;--line:rgba(244,246,238,.14);
  --panel:rgba(14,16,14,.55);--panel-line:rgba(244,246,238,.12);
  --accent:#d6ff3f;--on-accent:#0b0e04;--good:#d6ff3f;--bad:#ff6a5c;--warn:#ffd166;
  --vid:grayscale(1) contrast(1.45) brightness(1.05);--lime-wash:.62;--wash:#d6ff3f;
  --shade:linear-gradient(180deg,rgba(8,9,10,.28) 0%,rgba(8,9,10,.62) 52%,rgba(8,9,10,.92) 100%);color-scheme:dark;
}
[data-theme=light]{
  --bg:#f3f5ec;--text:#12150c;--soft:#3a3f2e;--muted:#6a705a;--line:rgba(18,21,12,.16);
  --panel:rgba(255,255,255,.55);--panel-line:rgba(18,21,12,.12);
  --accent:#4a6b00;--on-accent:#f7ffe0;--good:#3d6b00;--bad:#c4271a;--warn:#8a5a00;
  --vid:grayscale(1) contrast(.75) brightness(2);--lime-wash:.8;--wash:#dff48a;
  --shade:linear-gradient(180deg,rgba(246,248,238,.25) 0%,rgba(246,248,238,.6) 55%,rgba(246,248,238,.93) 100%);color-scheme:light;
}
:root{--display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--sans:"Manrope","Segoe UI",system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

.bgmedia{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.bgmedia video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--vid);transform:scale(1.04)}
.bgmedia::before{content:"";position:absolute;inset:0;z-index:1;background:var(--wash);mix-blend-mode:multiply;opacity:var(--lime-wash)}
.tint{position:absolute;inset:0;z-index:2;background:var(--shade)}
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none}
.top,.wrap{position:relative;z-index:2}

.mark{width:36px;height:36px;fill:none;stroke:none;flex:none}
.mark.small{width:22px;height:22px}
.sig{animation:sig 2.6s ease-in-out infinite}
.s2{animation-delay:.35s}
@keyframes sig{0%,100%{opacity:1}45%{opacity:.1}}

.top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px max(20px,4.5vw)}
.brand{display:flex;align-items:center;gap:10px}
.word{font:600 19px/1 var(--display);letter-spacing:-.01em}
.top-right{display:flex;align-items:center;gap:18px}
.conn{display:flex;align-items:center;gap:8px;font:500 13.5px var(--sans);white-space:nowrap;color:var(--soft);padding:7px 13px;border:1px solid var(--panel-line);border-radius:99px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.conn i{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.conn small{color:var(--muted)}
.conn.online i{background:var(--good);animation:blip 1.8s infinite}
.conn.off i{background:var(--bad)}
@keyframes blip{50%{transform:scale(1.5);opacity:.55}}
.link{font:500 14px var(--sans);color:var(--soft);transition:color .2s}
.link:hover{color:var(--accent)}
.theme{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--panel-line);background:var(--panel);cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.theme:hover{border-color:var(--accent)}
.theme:active{transform:scale(.9) rotate(20deg)}
.theme svg{width:17px;height:17px}
[data-theme=dark] .sun{display:block}[data-theme=dark] .moon{display:none}
[data-theme=light] .sun{display:none}[data-theme=light] .moon{display:block}

.wrap{max-width:1140px;margin:0 auto;padding:0 max(20px,4.5vw)}
.hero{padding:clamp(34px,7vw,88px) 0 clamp(30px,5vw,56px);max-width:820px}
h1{margin:0;font:500 clamp(38px,6.6vw,78px)/1.04 var(--display);letter-spacing:-.03em;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.lede{max-width:520px;margin:22px 0 0;font-size:clamp(16px,1.9vw,18.5px);color:var(--soft)}
.cmd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:22px 0 0;font-size:15px;color:var(--soft)}
.cmd code{font:600 14px var(--sans);padding:3px 11px;border-radius:99px;background:var(--accent);color:var(--on-accent)}
.copy{margin-left:4px;border:0;background:none;padding:2px 0;font:500 14.5px var(--sans);color:var(--text);border-bottom:1px solid var(--muted);cursor:pointer;transition:color .2s,border-color .2s}
.copy:hover{color:var(--accent);border-color:var(--accent)}
.copy.ok{color:var(--good);border-color:var(--good)}

.layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}
.stage,.board{padding:clamp(20px,3vw,30px);border:1px solid var(--panel-line);border-radius:24px;background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:rise .8s var(--ease) both}
.board{animation-delay:.1s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.label{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.pill.active{color:var(--accent)}.pill.active i{background:var(--accent);animation:blip 1s infinite}
.pill.working{color:var(--warn)}.pill.working i{background:var(--warn);animation:blip .6s infinite}
.pill.over{color:var(--bad)}.pill.over i{background:var(--bad);animation:blip .5s infinite}

.stage-body{min-height:270px;display:flex;align-items:center;padding:28px 0}
.empty{display:flex;align-items:center;gap:clamp(20px,4vw,40px);width:100%}
.empty .mark{width:clamp(80px,12vw,116px);height:clamp(80px,12vw,116px);animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 10px 28px rgba(214,255,63,.28))}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
.empty h2{margin:0 0 8px;font:500 clamp(24px,3.4vw,34px)/1.12 var(--display);letter-spacing:-.025em}
.empty p{margin:0;color:var(--soft);max-width:400px}

.running{width:100%;animation:pop .6s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}
.from{display:block;margin-bottom:12px;font:600 12.5px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.running h2{margin:0;font:500 clamp(30px,5vw,54px)/1.06 var(--display);letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
.running p{margin:14px 0 0;color:var(--soft);font-size:clamp(16px,1.9vw,19px);overflow-wrap:anywhere;max-width:560px}
.clock{margin-top:26px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.clock strong{font:500 clamp(54px,9vw,88px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.clock small{font:500 14px var(--sans);color:var(--muted)}
.fuse{height:4px;margin-top:12px;border-radius:99px;background:var(--line);overflow:hidden}
.fuse i{display:block;height:100%;width:100%;border-radius:99px;background:var(--accent);box-shadow:0 0 14px rgba(214,255,63,.55)}
.warn .fuse i{background:var(--warn);box-shadow:none}
.crit .fuse i{background:var(--bad);box-shadow:none}
.crit strong{color:var(--bad)}
.over strong{color:var(--bad);animation:fade .8s steps(2,jump-none) infinite}
@keyframes fade{50%{opacity:.25}}

.buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:20px;border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:99px;font:600 15px var(--sans);cursor:pointer;transition:transform .15s var(--ease),box-shadow .25s,opacity .2s;-webkit-tap-highlight-color:transparent}
.btn svg{width:18px;height:18px;stroke-width:2.4}
.btn:disabled{opacity:.28;cursor:not-allowed}
.btn:active:not(:disabled){transform:scale(.96)}
.btn.done{background:var(--accent);color:var(--on-accent)}
.btn.done:hover:not(:disabled){box-shadow:0 10px 30px -8px var(--accent);transform:translateY(-2px)}
.btn.fail{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
.btn.fail:hover:not(:disabled){background:var(--bad);color:#fff;transform:translateY(-2px)}
.btn.quiet{background:none;color:var(--soft);padding:0 6px;min-height:40px;font-weight:500;margin-left:auto}
.btn.quiet:hover:not(:disabled){color:var(--text)}
.btn.busy{pointer-events:none;opacity:.55}

.board-list{margin-top:4px;min-height:190px}
.lrow{display:grid;grid-template-columns:30px 36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);animation:slide .5s var(--ease) both;transition:background .6s}
.lrow:last-child{border-bottom:0}
@keyframes slide{from{opacity:0;transform:translateX(18px)}}
.rk{font:500 22px/1 var(--display);color:var(--muted);text-align:center}
.lrow.first .rk{color:var(--accent)}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 14px var(--display);color:#0b0e04}
.who{min-width:0}
.who strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:15.5px}
.who small{color:var(--muted);font-size:13px}
.pts{text-align:right;font:500 21px var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lrow.first .pts{color:var(--accent)}
.pts small{display:block;font:500 11px var(--sans);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.lrow.bump{background:linear-gradient(90deg,rgba(214,255,63,.18),transparent)}
.board-empty{padding:26px 0;display:grid;gap:6px}
.board-empty .e-ico{display:none}
.board-empty strong{font:500 20px/1.15 var(--display)}
.board-empty p{margin:0;color:var(--soft);max-width:260px;font-size:14.5px}

.foot{display:flex;align-items:center;gap:9px;padding:56px 0 40px;color:var(--muted);font:500 13.5px var(--sans)}
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:60;max-width:calc(100vw - 32px);padding:13px 20px;border-radius:99px;background:var(--text);color:var(--bg);font-weight:600;opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.good{background:var(--accent);color:var(--on-accent)}

@media(max-width:900px){.layout{grid-template-columns:1fr}}
@media(max-width:640px){
  .conn,.top-right .link{display:none}
  .empty{flex-direction:column;text-align:center;align-items:center}
  .buttons .btn{flex:1 1 calc(50% - 5px);padding:0 12px}
  .buttons .quiet{flex-basis:100%;margin-left:0}
  .lrow{grid-template-columns:26px 34px minmax(0,1fr) auto;gap:10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.extras{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.utility-panel{padding:24px;border:1px solid var(--panel-line);border-radius:24px;background:var(--panel);backdrop-filter:blur(14px);min-width:0}.utility-intro,.utility-empty{color:var(--muted);font-size:13px;margin:10px 0}.utility-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:12px 0}.utility-row strong,.utility-row small{display:block;overflow-wrap:anywhere}.utility-row strong{font-size:14px}.utility-row small,.subtle{color:var(--muted);font-size:12px}.row-actions{display:flex;gap:6px}.row-actions button,.overlay-settings select{border:1px solid var(--panel-line);border-radius:8px;background:var(--bg);color:var(--text);padding:7px 11px}.row-actions button{cursor:pointer}.row-actions button:disabled{opacity:.4;cursor:not-allowed}.result{font-size:11px;color:var(--muted);white-space:nowrap}.result.done{color:var(--good)}.result.failed{color:var(--bad)}.overlay-settings{grid-column:1/-1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.overlay-settings>div{margin-right:auto}.overlay-settings a{color:var(--accent);font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.extras{grid-template-columns:1fr}.overlay-settings{grid-column:auto}}
.suggest-form{margin:0 0 20px;padding:20px 24px;border:1px solid var(--panel-line);border-radius:24px;background:var(--panel);backdrop-filter:blur(14px)}.suggest-form label{display:block;font:600 18px var(--display);margin-bottom:10px}.suggest-fields{display:flex;gap:10px;flex-wrap:wrap}.suggest-fields input{min-width:0;flex:1 1 150px;padding:12px;border:1px solid var(--panel-line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}.suggest-fields input:first-child{flex:2 1 220px}.suggest-fields button{cursor:pointer}@media(max-width:450px){.suggest-fields input,.suggest-fields input:first-child{flex-basis:100%}.suggest-fields button{width:100%}}
.queue-settings{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0;font-size:12px;color:var(--soft)}.queue-settings button{border:1px solid var(--panel-line);background:var(--bg);color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer}.queue-settings button:disabled{opacity:.4;cursor:not-allowed}.queue-settings label{display:flex;gap:6px;align-items:center}
.playing{color:var(--accent);font-size:13px;margin:10px 0}
.row-actions button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.playing-settings{grid-column:1/-1}.playing-settings label{display:block;font:600 16px var(--display);margin-bottom:10px}.playing-fields{display:flex;gap:10px;flex-wrap:wrap}.playing-fields input{min-width:0;flex:1 1 200px;padding:10px 12px;border:1px solid var(--panel-line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit}.playing-fields button{border:1px solid var(--panel-line);border-radius:8px;background:var(--bg);color:var(--text);padding:8px 14px;cursor:pointer}.playing-fields button:hover{border-color:var(--accent)}@media(max-width:450px){.playing-fields input{flex-basis:100%}}