:root{
  --paper:#0d0d0d; --surface:#171717; --surface-alt:#242424;
  --ink:#eceae2; --muted:#9b9992;
  --accent:#bca7ff; --on-accent:#0d0d0d;
  --good:#64eab0; --bad:#ff675d;
  --line:.125rem;
  --ease:cubic-bezier(.2,.75,.25,1);
  --disp:"Geist","Arial Black",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
html{ background:var(--paper); scrollbar-color:var(--accent) var(--paper); scrollbar-width:thin; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Geist",Arial,sans-serif; -webkit-font-smoothing:antialiased; min-height:100%; }
::selection{ color:var(--on-accent); background:var(--accent); }
a{ color:var(--accent); }
button{ font:inherit; }

/* fixed world grid + vignette — the ntrdni.at recipe */
.world-grid{
  position:fixed; inset:-3%; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 35%, transparent 0 28%, color-mix(in srgb, var(--paper) 92%, transparent) 72%),
    linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) .0625rem, transparent .0625rem),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) .0625rem, transparent .0625rem);
  background-size:auto, 3.25rem 3.25rem, 3.25rem 3.25rem;
  background-position:center;
}
.wrap{ max-width:1520px; margin:0 auto; padding:20px 22px 22px; min-height:100dvh; display:flex; flex-direction:column; position:relative; z-index:1; }
#stage{ flex:1 1 auto; display:flex; flex-direction:column; }

/* bloom hover — the site's interaction language */
.btn,.hdr-leave,.rc-code,.ib{
  position:relative; z-index:0; overflow:hidden; isolation:isolate; clip-path:inset(0);
  transition:color .65s var(--ease), border-color .65s var(--ease), background-color .65s var(--ease);
}
:is(.btn,.hdr-leave,.rc-code,.ib)::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bloom-fill,var(--ink)); opacity:0;
  transform:scale(.1) rotate(12deg);
  transition:transform .65s var(--ease), opacity .65s var(--ease);
  pointer-events:none;
}
:is(.btn,.hdr-leave,.rc-code,.ib):is(:hover,:focus-visible):not(:disabled)::before{ opacity:1; transform:scale(1.5) rotate(0deg); }

/* ---------------- header ---------------- */
header{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand .mark{ width:40px; height:40px; display:block; }
.brand .wm svg{ display:block; height:clamp(17px,2.2vw,22px); width:auto; }
.brand .wm .dd{ fill:var(--accent); }
.hright{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.auth-user{ display:inline-flex; align-items:center; gap:9px; padding:6px 12px 6px 6px; border:var(--line) solid var(--ink); background:var(--surface); }
.auth-user img,.auth-user .ph{ width:26px; height:26px; display:block; background:var(--surface-alt); }
.auth-user .nm{ font-family:var(--mono); font-size:13px; font-weight:700; }
.room-chip{ display:flex; align-items:center; gap:10px; min-width:0; }
.rc-name{ font-family:var(--disp); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:16px; max-width:30vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-code{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.14em; padding:7px 10px 7px 12px; border:var(--line) solid var(--ink); background:var(--surface); color:var(--ink); cursor:pointer; --bloom-fill:var(--accent); }
.rc-code svg{ width:14px; height:14px; fill:currentColor; }
.rc-code:is(:hover,:focus-visible){ color:var(--on-accent); }
.live-dot{ width:9px; height:9px; background:var(--good); flex:none; }
.live-dot.off{ background:var(--bad); animation:blink 1s steps(2,start) infinite; }
@keyframes blink{ to{ visibility:hidden; } }
.vis{ display:inline-flex; align-items:center; gap:8px; }
.vis-lbl{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); cursor:pointer; }
/* on/off: a switch (the en-core control, squared for this site) */
.switch{ position:relative; width:40px; height:22px; padding:0; border:var(--line) solid var(--ink); background:var(--surface); cursor:pointer; flex:none; transition:background-color .15s, border-color .15s; }
.switch:hover{ border-color:var(--accent); }
.switch .knob{ position:absolute; left:2px; top:2px; width:14px; height:14px; background:var(--muted); display:block; transition:transform .16s ease, background-color .16s; }
.switch.on{ background:var(--accent); border-color:var(--accent); }
.switch.on .knob{ transform:translateX(18px); background:var(--on-accent); }
.hdr-leave{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:8px 13px; border:var(--line) solid var(--ink); background:var(--surface); color:var(--muted); cursor:pointer; --bloom-fill:var(--bad); }
.hdr-leave:is(:hover,:focus-visible){ border-color:var(--bad); color:var(--paper); }

/* ---------------- shared pieces ---------------- */
.card{ background:var(--surface); border:var(--line) solid var(--ink); padding:clamp(18px,3vw,28px); }
h2.title{ font-family:var(--disp); font-weight:900; font-size:clamp(18px,3vw,24px); margin:0 0 6px; letter-spacing:-.015em; text-transform:uppercase; }
.sub{ color:var(--muted); font-size:14px; margin:0 0 22px; }
.btn{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:11px 18px; border:var(--line) solid var(--ink); background:var(--surface-alt); color:var(--ink); cursor:pointer; font-weight:700; white-space:nowrap; --bloom-fill:var(--ink); }
.btn:is(:hover,:focus-visible):not(:disabled){ color:var(--paper); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.acc{ background:color-mix(in srgb, var(--accent) 24%, var(--surface-alt)); --bloom-fill:var(--accent); }
.btn.acc:is(:hover,:focus-visible):not(:disabled){ color:var(--on-accent); }
.btn.bad{ --bloom-fill:var(--bad); }
.btn.bad:is(:hover,:focus-visible):not(:disabled){ border-color:var(--bad); }
.btn.lg{ font-size:14px; padding:14px 26px; }
.btn.discord{ display:inline-flex; align-items:center; gap:10px; --bloom-fill:var(--accent); }
.btn.discord:is(:hover,:focus-visible){ color:var(--on-accent); }
.btn.discord svg{ width:20px; height:16px; }
.in{ font-family:var(--mono); font-size:15px; padding:11px 13px; background:var(--paper); border:var(--line) solid var(--ink); color:var(--ink); outline:none; width:100%; min-width:0; border-radius:0; }
.in:focus{ border-color:var(--accent); }
.in::placeholder{ color:var(--muted); }
.ib{ width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:var(--line) solid color-mix(in srgb, var(--ink) 35%, transparent); background:var(--surface); color:var(--ink); cursor:pointer; padding:0; --bloom-fill:var(--accent); }
.ib svg{ width:14px; height:14px; fill:currentColor; }
.ib:is(:hover,:focus-visible){ color:var(--on-accent); border-color:var(--accent); }
.ib.bad{ --bloom-fill:var(--bad); }
.ib.bad:is(:hover,:focus-visible){ border-color:var(--bad); color:var(--paper); }
.ib.done{ background:var(--good); border-color:var(--good); color:var(--on-accent); }
.empty{ text-align:center; color:var(--muted); padding:26px 12px; border:var(--line) dashed color-mix(in srgb, var(--ink) 45%, transparent); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.avatar{ width:24px; height:24px; display:block; flex:none; background:var(--surface-alt); object-fit:cover; }
.avatar.ph{ display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted); }

/* ---------------- login gate ---------------- */
.gate{ max-width:520px; width:100%; margin:auto; text-align:center; padding:clamp(28px,5vw,44px); }
.gate .title{ font-size:clamp(24px,4vw,34px); }

/* ---------------- home ---------------- */
.home{ max-width:860px; width:100%; margin:0 auto; }
.home-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.home-top .title{ margin:0; }
.join{ display:flex; gap:10px; margin-bottom:18px; }
.room-list{ display:flex; flex-direction:column; gap:10px; }
.room-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:var(--line) solid var(--ink); background:var(--surface-alt); cursor:pointer; transition:border-color .2s; }
.room-row:hover{ border-color:var(--accent); }
.rr-info{ flex:1 1 auto; min-width:0; }
.rr-name{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:15px; letter-spacing:-.01em; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rr-meta{ font-family:var(--mono); font-size:12px; color:var(--muted); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.rr-meta .on{ color:var(--good); }
.rr-tag{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:.0625rem solid var(--muted); padding:1px 5px; margin-left:8px; vertical-align:2px; }
.rr-faces{ display:flex; flex:none; }
.rr-faces .avatar{ width:26px; height:26px; border:var(--line) solid var(--surface-alt); margin-left:-6px; }
.rr-code{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--muted); flex:none; }

/* ---------------- room ---------------- */
.room{ display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:18px; align-items:start; }
.room-main{ min-width:0; }
.screen{ position:relative; background:#000; border:var(--line) solid var(--ink); aspect-ratio:16/9; overflow:hidden; user-select:none; -webkit-user-select:none; }
/* two players: the visible one, and one that brings a new quality into step behind it */
.screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; display:block; opacity:0; }
.screen video.on{ opacity:1; z-index:1; }
.screen:fullscreen{ border:0; aspect-ratio:auto; width:100vw; height:100vh; }
.screen:-webkit-full-screen{ border:0; aspect-ratio:auto; width:100vw; height:100vh; }
.screen.idle{ cursor:none; }

/* centre overlay: empty / preparing / error / paused / unlock */
.ov{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px 20px 64px; text-align:center; pointer-events:none; z-index:2; }
.ov.dim{ background:color-mix(in srgb, #000 62%, transparent); }
.ov > *{ pointer-events:auto; }
.ov-box{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:min(520px,90%); }
.ov-label{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ov-big{ font-family:var(--disp); font-weight:900; font-size:clamp(20px,3.4vw,34px); text-transform:uppercase; letter-spacing:-.015em; line-height:1.05; }
.ov-title{ font-size:15px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ov-err{ color:var(--bad); font-family:var(--mono); font-size:13px; line-height:1.5; }
.ov-bar{ width:min(340px,70vw); height:8px; border:.0625rem solid var(--ink); background:var(--paper); overflow:hidden; position:relative; }
.ov-bar i{ position:absolute; inset:0 auto 0 0; background:var(--accent); transition:width .9s linear; }
.ov-bar.indet i{ width:30% !important; animation:indet 1.3s var(--ease) infinite; }
@keyframes indet{ from{ left:-30%; } to{ left:100%; } }
.ov-btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ov-play{ width:clamp(64px,9vw,92px); height:clamp(64px,9vw,92px); border:var(--line) solid var(--ink); background:color-mix(in srgb, var(--paper) 55%, transparent); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .25s var(--ease), border-color .25s, color .25s, background-color .25s; padding:0; }
.ov-play svg{ width:44%; height:44%; fill:currentColor; margin-left:6%; }
.ov-play:hover{ transform:scale(1.06); border-color:var(--accent); color:var(--accent); }
.ov-count{ font-family:var(--disp); font-weight:900; font-size:clamp(60px,12vw,140px); line-height:1; color:var(--accent); }

/* controls */
.ctrl{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:30px 14px 8px; background:linear-gradient(transparent, rgba(0,0,0,.82)); transition:opacity .3s ease; }
.screen.idle .ctrl{ opacity:0; pointer-events:none; }
.seek{ position:relative; height:18px; cursor:pointer; touch-action:none; display:flex; align-items:center; }
.seek-track{ position:relative; width:100%; height:4px; background:color-mix(in srgb, var(--ink) 22%, transparent); transition:height .15s; overflow:hidden; }
.seek:hover .seek-track,.seek.drag .seek-track{ height:6px; }
.seek-buf,.seek-fill{ position:absolute; inset:0 auto 0 0; width:0; }
.seek-buf{ background:color-mix(in srgb, var(--ink) 30%, transparent); }
.seek-fill{ background:var(--accent); }
.seek-knob{ position:absolute; top:50%; left:0; width:12px; height:12px; background:var(--accent); transform:translate(-50%,-50%) scale(0); transition:transform .15s; }
.seek:hover .seek-knob,.seek.drag .seek-knob{ transform:translate(-50%,-50%) scale(1); }
.seek-tip{ position:absolute; bottom:20px; transform:translateX(-50%); font-family:var(--mono); font-size:11px; font-weight:700; padding:3px 6px; background:var(--paper); border:.0625rem solid var(--ink); white-space:nowrap; pointer-events:none; }
.ctrl-row{ display:flex; align-items:center; gap:4px; margin-top:2px; }
.grow{ flex:1 1 auto; }
.cb{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ink); cursor:pointer; padding:0; transition:color .2s; flex:none; }
.cb svg{ width:22px; height:22px; fill:currentColor; }
.cb:hover:not(:disabled),.cb:focus-visible{ color:var(--accent); outline:none; }
.cb:disabled{ opacity:.35; cursor:default; }
.cb .i-pause,.cb.on .i-play{ display:none; }
.cb.on .i-pause{ display:inline; }
#cbMute .i-x,#cbMute.on .i-wave{ display:none; }
#cbMute.on .i-x{ display:inline; }
.time{ font-family:var(--mono); font-size:12px; font-weight:700; margin-left:6px; white-space:nowrap; }
.vol{ display:flex; align-items:center; gap:6px; }
.slider{ -webkit-appearance:none; appearance:none; width:92px; height:4px; background:color-mix(in srgb, var(--ink) 25%, transparent); outline:none; cursor:pointer; }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:13px; height:13px; background:var(--accent); cursor:pointer; }
.slider::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:0; background:var(--accent); cursor:pointer; }
.vol-val{ font-family:var(--mono); font-size:11px; font-weight:700; min-width:3ch; text-align:right; color:var(--muted); }
.qual{ position:relative; margin:0 4px; }
.q-btn{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 9px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--ink); background:transparent; border:var(--line) solid color-mix(in srgb, var(--ink) 40%, transparent); cursor:pointer; transition:border-color .2s, color .2s; }
.q-btn:hover,.q-btn:focus-visible{ border-color:var(--accent); color:var(--accent); outline:none; }
.q-up{ color:var(--accent); animation:qpulse 1.2s ease-in-out infinite; }
@keyframes qpulse{ 50%{ opacity:.45; } }
.q-pop{ position:absolute; right:0; bottom:40px; padding:8px; background:var(--paper); border:var(--line) solid var(--ink); z-index:5; }
.seg{ display:inline-flex; border:var(--line) solid var(--ink); background:var(--surface-alt); }
.seg button{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; padding:8px 13px; background:transparent; color:var(--muted); border:0; border-right:var(--line) solid var(--ink); cursor:pointer; white-space:nowrap; transition:color .2s, background-color .2s; }
.seg button:last-child{ border-right:0; }
.seg button:hover{ color:var(--ink); }
.seg button.on{ background:var(--accent); color:var(--on-accent); }

.now{ margin-top:14px; min-height:42px; }
.now-title{ font-size:clamp(16px,1.8vw,20px); font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.now-meta{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:4px; }
.members{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mem{ display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 5px; border:var(--line) solid var(--ink); background:var(--surface-alt); font-size:13px; font-weight:600; }
.mem.me{ border-color:var(--accent); }
.mem .bf{ width:9px; height:9px; border:.125rem solid var(--muted); border-top-color:transparent; animation:spin .8s linear infinite; display:none; }
.mem.buf{ color:var(--muted); }
.mem.buf .bf{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* side panel: add + results + queue */
.side{ background:var(--surface); border:var(--line) solid var(--ink); padding:14px; display:flex; flex-direction:column; gap:12px; position:sticky; top:16px; max-height:calc(100dvh - 32px); overflow:auto; }
.add{ display:flex; gap:8px; }
.add .btn{ padding:11px 14px; }
.sec-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); min-height:24px; }
.sec-head .x{ width:24px; height:24px; border:0; background:transparent; color:var(--muted); cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.sec-head .x svg{ width:13px; height:13px; fill:currentColor; }
.sec-head .x:hover{ color:var(--ink); }
.results{ display:flex; flex-direction:column; gap:8px; padding-bottom:12px; border-bottom:.0625rem solid color-mix(in srgb, var(--ink) 22%, transparent); }
.list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.it{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px; border:var(--line) solid transparent; background:var(--surface-alt); transition:border-color .2s; }
.it:hover{ border-color:color-mix(in srgb, var(--ink) 40%, transparent); }
.it img{ width:96px; height:54px; object-fit:cover; display:block; background:#000; }
.it .tx{ min-width:0; }
.it .t{ font-size:13px; font-weight:600; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.it .m{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.it .st{ font-family:var(--mono); font-size:11px; font-weight:700; margin-top:3px; }
.it .st:empty{ display:none; }
.it .st.dl{ color:var(--accent); }
.it .st.ok{ color:var(--good); }
.it .st.err{ color:var(--bad); }
.it .acts{ display:flex; gap:4px; }
.queue .it{ cursor:grab; }
.queue .it.dragging{ opacity:.4; }
.queue .it.drop-before{ box-shadow:inset 0 3px 0 var(--accent); }
.queue .it.drop-after{ box-shadow:inset 0 -3px 0 var(--accent); }
.res-loading{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; padding:10px 2px; }

/* ---------------- modal + toasts ---------------- */
.modal-overlay{ position:fixed; inset:0; background:color-mix(in srgb, var(--paper) 74%, transparent); display:flex; align-items:center; justify-content:center; padding:20px; z-index:60; }
.modal{ background:var(--surface); border:var(--line) solid var(--ink); padding:24px; width:min(430px,94vw); }
.modal h3{ font-family:var(--disp); font-weight:900; margin:0 0 16px; font-size:19px; letter-spacing:-.015em; text-transform:uppercase; }
.modal p{ color:var(--muted); font-size:14px; margin:0 0 18px; line-height:1.5; }
.modal .fld{ margin-bottom:18px; }
.modal .fld label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.modal .acts{ display:flex; gap:10px; justify-content:flex-end; }
.toasts{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:80; pointer-events:none; width:max-content; max-width:92vw; }
.toast{ font-family:var(--mono); font-size:12px; font-weight:700; padding:10px 14px; background:var(--surface); border:var(--line) solid var(--ink); animation:toastIn .35s var(--ease); max-width:92vw; }
.toast.err{ border-color:var(--bad); color:var(--bad); }
.toast.out{ opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } }

/* ---------------- narrow screens ---------------- */
@media (max-width:1060px){
  .room{ grid-template-columns:minmax(0,1fr); }
  .side{ position:static; max-height:none; overflow:visible; }
}
@media (max-width:720px){
  .wrap{ padding:12px 12px 16px; }
  header{ margin-bottom:12px; gap:10px; }
  .brand{ gap:9px; }
  .brand .mark{ width:32px; height:32px; }
  .brand .wm svg{ height:15px; }
  .rc-name{ display:none; }
  .auth-user{ padding:5px; }
  .auth-user .nm{ display:none; }
  .world-grid{ background-size:auto, 40px 40px, 40px 40px; }
  .card{ padding:16px; }
  /* touch: the screen edge-to-edge, controls a touch bigger; phones have hardware volume */
  .room{ gap:12px; }
  .screen{ margin:0 -12px; border-left:0; border-right:0; }
  .slider,.vol-val{ display:none; }
  .cb{ width:42px; height:42px; }
  .ctrl{ padding:24px 8px 4px; }
  .it{ grid-template-columns:80px minmax(0,1fr) auto; }
  .it img{ width:80px; height:45px; }
  .room-row{ flex-wrap:wrap; }
  .rr-info{ flex:1 1 100%; }
}