:root{--bg:#1b1713;--panel:#2a231cf2;--fg:#f5ede0;--ac:#f0a53a;--bd:#5a4a3a;--ui:1;--tx:1;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#efe6d8;--panel:#fffaf0f2;--fg:#2b2218;--ac:#a85a00;--bd:#c9b8a0}}
:root[data-theme=dark]{--bg:#1b1713;--panel:#2a231cf2;--fg:#f5ede0;--ac:#f0a53a;--bd:#5a4a3a}
:root[data-hc=on]{--bg:#000;--panel:#000;--fg:#fff;--ac:#ffe600;--bd:#fff}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:calc(16px*var(--tx));overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#ui{position:fixed;left:0;top:0;width:calc(100vw / var(--ui));height:calc(100vh / var(--ui));height:calc(100dvh / var(--ui));transform:scale(var(--ui));transform-origin:0 0;pointer-events:none}
.p{z-index:10;pointer-events:auto;background:var(--panel);border:1px solid var(--bd);border-radius:12px;padding:12px;box-shadow:0 4px 18px #0006}
.hide{display:none!important}
button,input,select{font:inherit;color:var(--fg);background:transparent;border:1px solid var(--bd);border-radius:8px;padding:6px 10px;pointer-events:auto}
button{cursor:var(--cur-ptr);background:var(--panel)}button:hover,button:focus-visible,.sel{outline:2px solid var(--ac)}
button.pri{background:var(--ac);color:var(--onac,#111);font-weight:700}
#start{--panel:#2a2236;--fg:#f5ede0;--bd:#5b4b73;--ac:#ffb23e;--sb-track:#17121f;--sb-inset:#ffffff1c;position:absolute;left:2.5%;top:2.5%;bottom:2.5%;width:min(660px,95%);box-sizing:border-box;overflow-y:auto;overflow-x:hidden;padding:24px;border-radius:24px;color:var(--fg);background:linear-gradient(165deg,#2d2340f5,#17121fef);border:1px solid #ffffff2a;box-shadow:0 16px 50px #000b;font-size:1.05em}
/* barras de rolagem: sempre verticais, cores da tela inicial adaptadas ao tema */
:root{--sb-track:#17121f;--sb-thumb:linear-gradient(180deg,#ffb23e,#ff5ea8 55%,#5bd6ff);--sb-thumb-h:linear-gradient(180deg,#ffc766,#ff7fba 55%,#8be3ff);--sb-color:#ff8a8a;--sb-inset:#ffffff1c}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--sb-track:#e3d7c5;--sb-color:#e07a2a;--sb-inset:#0000001f}}
:root[data-theme=light]{--sb-track:#e3d7c5;--sb-color:#e07a2a;--sb-inset:#0000001f}
:root[data-hc=on]{--sb-track:#000;--sb-thumb:#ffe600;--sb-thumb-h:#fff;--sb-color:#ffe600;--sb-inset:#fff}
@supports (-moz-appearance:none){*{scrollbar-width:thin;scrollbar-color:var(--sb-color) var(--sb-track)}}
*::-webkit-scrollbar{width:12px;height:0}
*::-webkit-scrollbar-track{border-radius:12px;background:var(--sb-track);box-shadow:inset 0 0 0 1px var(--sb-inset)}
*::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:12px;background:var(--sb-thumb) padding-box;min-height:40px}
*::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h) padding-box}
#start::-webkit-scrollbar{width:14px}
#start::-webkit-scrollbar-track{margin:22px 0;border-radius:14px}
#start::-webkit-scrollbar-thumb{border-radius:14px;min-height:48px}
.brand{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.logo{font-size:2.3em;font-weight:900;letter-spacing:.5px;background:linear-gradient(90deg,#ffb23e,#ff5ea8,#5bd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec{margin:16px 0}.st{font-weight:800;margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.06em;color:#ffcf8a}
#start input.big{width:100%;box-sizing:border-box;font-size:1.2em;padding:12px 14px;border-radius:14px;background:#00000040}
#start button{border-radius:12px;padding:10px 14px}
#edtabs button{flex:1;padding:10px 6px}
.stp{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px;align-items:center;padding:8px 12px;background:#ffffff0d;border-radius:14px}
#start .stp button,.stp button{box-sizing:border-box;width:44px;min-width:44px;min-height:40px;padding:0;font-size:1.1em;line-height:1}
.stn{text-align:center;line-height:1.2;min-width:0}.stn b{display:block;font-size:1.15em}.stn small{opacity:.7}
@media (max-width:640px){.stp{grid-template-columns:38px minmax(0,1fr) 38px;padding:8px 10px}#start .stp button,.stp button{width:38px;min-width:38px;min-height:38px}}
button.pri.big{font-size:1.15em;padding:14px 18px;width:100%;border-radius:14px;margin-top:8px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:12px}.act{background:#ffffff10;border:1px solid #ffffff22;border-radius:16px;padding:14px}
@media (max-width:640px){.acts{grid-template-columns:1fr}}
.err{color:#ff8a8a;display:block;margin-top:8px}
h1{font-size:1.3em;margin:0 0 6px}h3{margin:10px 0 4px;font-size:1em}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sw{width:28px;height:28px;border-radius:50%;padding:0;flex:none}
small{opacity:.85}
#hud{z-index:10;position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#bar{z-index:10;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:96%;pointer-events:auto}
#chat{position:absolute;left:12px;top:60px;width:440px;height:280px;min-width:260px;min-height:150px;max-width:calc(96vw / var(--ui));max-height:calc(80vh / var(--ui));resize:both;overflow:hidden;display:flex;flex-direction:column}
#log{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;font-size:var(--cf,1.05em);margin:4px 0 6px}#log div{margin:3px 0;word-break:break-word}
#chat input{width:100%;box-sizing:border-box;font-size:1.05em;padding:8px 10px}
.grip{cursor:move;touch-action:none;user-select:none;font-size:.85em;display:flex;gap:6px;align-items:center;justify-content:space-between;padding-bottom:4px}
h3.grip{font-size:1em;margin:0 0 6px}
.gmin{padding:2px 8px;min-width:0}
.mini>:not(.grip){display:none!important}
.mini{width:auto!important;height:auto!important;min-height:0!important;min-width:230px;resize:none!important;overflow:hidden!important}
.side{position:absolute;right:12px;top:12px;width:300px;max-width:calc(100% - 24px);max-height:calc(100% - 90px);overflow-y:auto;overflow-x:hidden}
.side.fit{width:fit-content;min-width:260px}
.lbl{position:absolute;transform:translate(-50%,-100%);background:var(--panel);border:1px solid var(--bd);border-radius:10px;padding:1px 8px;font-size:.8em;white-space:nowrap}
.lbl.talk{border-color:var(--ac);outline:2px solid var(--ac)}
.item{display:flex;align-items:center;gap:6px;margin:4px 0}
.card{display:flex;align-items:center;gap:6px;text-align:left}
label{display:block;margin:6px 0}
#pSet label{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,150px);align-items:center;gap:10px;margin:8px 0;line-height:1.25}
#pSet label.chk{display:flex;gap:8px}#pSet label.chk input{width:18px;height:18px;margin:0;padding:0;flex:none;accent-color:var(--ac)}#pSet label.chk.dis{opacity:.55}
#pSet input[type=range]{box-sizing:border-box;width:100%;height:28px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--ac);cursor:var(--cur-ptr)}
#pSet input[type=number],#pSet select{box-sizing:border-box;width:100%;min-width:0}
#pSet small{display:block;margin:-2px 0 6px}
/* seletor de kbps e demais controles nativos seguem o tema claro/escuro */
:root{color-scheme:dark}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light}}
:root[data-theme=dark]{color-scheme:dark}
:root[data-theme=light]{color-scheme:light}
#pSet select{background-color:var(--bg);color:var(--fg)}
#pSet select option{background-color:var(--bg);color:var(--fg)}

.ed{--aw:44px;--vw:120px;--eg:6px;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--aw)*2 + var(--vw) + var(--eg)*2);align-items:center;gap:10px;padding:8px 12px;background:#ffffff0d;border-radius:14px;margin:6px 0}
.edl{font-weight:600;min-width:0;overflow-wrap:break-word;line-height:1.25}
.edctl{display:grid;grid-template-columns:var(--aw) var(--vw) var(--aw);gap:var(--eg);align-items:center}
#start .ed button,.ed button{box-sizing:border-box;width:var(--aw);min-width:var(--aw);min-height:40px;padding:0;font-size:1.1em;line-height:1}
.evv{width:100%;min-width:0;min-height:40px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;overflow-wrap:break-word}
@media (max-width:640px){.ed{--aw:38px;--vw:92px;--eg:4px;gap:8px;padding:8px 10px}#start .ed button,.ed button{min-height:38px}}
.emo{position:absolute;left:50%;bottom:100%;margin-bottom:7px;display:none;padding:1px 7px;border-radius:14px;background:var(--panel);border:1px solid var(--bd);box-shadow:0 4px 14px #0007;font-size:1.6em;line-height:1.1;pointer-events:none;white-space:nowrap;transform:translate(-50%,0) scale(.9);transform-origin:50% 100%;will-change:transform,opacity}.emo::after{content:'';position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:var(--panel);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);transform:translateX(-50%) rotate(45deg)}.emo.show{display:block;animation:emoFloat 2s cubic-bezier(.2,.8,.2,1) forwards}@keyframes emoFloat{0%{opacity:0;transform:translate(-50%,7px) scale(.5)}12%{opacity:1;transform:translate(-50%,-3px) scale(1.12)}28%{opacity:1;transform:translate(-50%,-9px) scale(1)}100%{opacity:0;transform:translate(-50%,-34px) scale(.9)}}@media (prefers-reduced-motion:reduce){.emo.show{animation:emoFade 2s linear forwards}}@keyframes emoFade{0%,100%{opacity:0}10%,80%{opacity:1}}
#recon{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:18px;background:#0b0806cc;backdrop-filter:blur(6px);pointer-events:auto}
#reconCard{width:min(460px,94vw);background:var(--panel);border:1px solid var(--bd);border-radius:18px;padding:22px 20px;box-shadow:0 20px 70px #000b;text-align:center}
#reconCard h2{margin:8px 0 6px;font-size:1.25rem}#reconCard p{margin:6px 0;line-height:1.4}#reconCard .mut{opacity:.7;font-size:.9em}
#reconCard .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
#reconSpin{width:44px;height:44px;margin:0 auto 6px;border-radius:50%;border:4px solid #ffffff22;border-top-color:var(--ac);animation:reconSpin 1s linear infinite}
#reconSpin.stop{animation:none;border-top-color:var(--bd)}
@keyframes reconSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#reconSpin{animation:none;border-top-color:var(--ac)}}
.emog{grid-template-columns:repeat(5,46px)!important}#eGes .emog{max-height:min(44vh,300px);overflow:hidden;padding:3px 0;scrollbar-width:thin}
@media (max-height:620px){#eGes .emog{overflow-y:auto}}.emog .slot{width:46px;height:46px;font-size:1.5em}#pEmo{width:272px;box-sizing:border-box}#emoBody{display:grid;align-items:start}#eEmo,#eGes{grid-area:1/1;min-width:0}#eEmo.tabhidden,#eGes.tabhidden{visibility:hidden;pointer-events:none}
.lk{color:#4da3ff;text-decoration:underline;word-break:break-all}.lk.yt{color:#ff6b6b}.lk:visited{color:#b48cff}
.vm{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle}.vm i{width:6px;height:10px;background:#555;border-radius:1px}.vm i.on{background:#2ecc71;box-shadow:0 0 5px #2ecc71}
#vbar{margin:0}#vbar i{width:10px;height:18px}
:root{--slot:#00000040;--hi:#ffffff26;--lo:#0000007a}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--slot:#0000000f;--hi:#ffffffb0;--lo:#0000002e}}
:root[data-theme=dark]{--slot:#00000040;--hi:#ffffff26;--lo:#0000007a}
:root[data-theme=light]{--bg:#efe6d8;--panel:#fffaf0f2;--fg:#2b2218;--ac:#a85a00;--bd:#c9b8a0;--slot:#0000000f;--hi:#ffffffb0;--lo:#0000002e}
:root[data-hc=on]{--slot:#000;--hi:#fff;--lo:#fff}
@media (prefers-color-scheme:light){:root[data-hc=on]:not([data-theme=dark]){--bg:#fff;--panel:#fff;--fg:#000;--ac:#0b3fb0;--bd:#000;--slot:#e6e6e6;--hi:#fff;--lo:#000;--onac:#fff}}
:root[data-hc=on][data-theme=light]{--bg:#fff;--panel:#fff;--fg:#000;--ac:#0b3fb0;--bd:#000;--slot:#e6e6e6;--hi:#fff;--lo:#000;--onac:#fff}
#labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.prow{display:flex;align-items:center;gap:8px;padding:9px 11px;margin:5px 0;border-radius:12px;background:var(--slot);border:1px solid var(--bd)}
.pname{flex:1;min-width:0;font-size:1.12em;font-weight:800;color:var(--fg);overflow-wrap:anywhere}
.pdot{width:14px;height:14px;border-radius:50%;border:2px solid var(--fg);flex:none}
.tag{font-size:.74em;font-weight:700;padding:2px 7px;border-radius:9px;background:var(--ac);color:var(--onac,#111);white-space:nowrap}.tag.mut{background:#c0392b;color:#fff}
.prow button{min-width:40px;min-height:36px;font-size:1.1em}
.kcur{display:flex;align-items:center;gap:8px;padding:9px 11px;margin:5px 0;border-radius:12px;background:var(--slot);border:1px solid var(--bd);font-weight:700}
.kcur.on{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 45%,transparent)}
#ktime:not(:empty){display:inline-block;font-size:.8em;font-weight:700;padding:2px 9px;border-radius:9px;background:var(--slot);border:1px solid var(--bd);margin:2px 0 4px}
#klist{margin:4px 0 8px}
.krow{align-items:center}
.krow.cur{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 18%,var(--slot));box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 40%,transparent)}
.krow.wait{opacity:.92}
.kpos{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:.85em;font-weight:800;background:var(--bg);border:2px solid var(--bd);color:var(--fg)}
.krow.cur .kpos{background:var(--ac);border-color:var(--ac);color:var(--onac,#111)}
.kinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.kinfo .pname{flex:none;line-height:1.15}
.ksub{font-size:.78em;opacity:.85;overflow-wrap:anywhere}
.tag.warn{background:#c0392b;color:#fff}
.kempty{padding:12px;text-align:center;border-radius:12px;background:var(--slot);border:1px dashed var(--bd);margin:5px 0;font-size:.95em}
/* karaokê: verde de destaque, fila compacta (até 25 pessoas) */
:root{--kg:#2ee66f;--kgt:#04210f}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--kg:#0e7a3c;--kgt:#fff}}
:root[data-theme=light]{--kg:#0e7a3c;--kgt:#fff}
:root[data-hc=on]{--kg:#00ff55;--kgt:#000}
#pKFila.side{max-width:calc(100% - 24px);box-sizing:border-box}
#pKFila .ksub{display:none}
/* fila do karaokê: mesmo design da lista de jogadores (.prow), 2 por linha */
#pKFila #klist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4px;align-content:start}
#pKFila #klist .kempty{grid-column:1/-1}
#pKFila #klist .krow{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin:1px 0;padding:2px 6px;border-radius:8px;min-width:0}
#pKFila #klist .krow .pdot{display:block;width:9px;height:9px;border-width:1.25px}
#pKFila #klist .krow .kpos{width:16px;height:16px;font-size:.62em;border-width:1.25px}
#pKFila #klist .krow .kinfo{flex:1 1 60px;min-width:0}
#pKFila #klist .krow .pname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;font-size:.82em;line-height:1.08}
#pKFila #klist .krow .tag{font-size:.55em;padding:0 4px;line-height:1.45}
#klist{max-height:min(62vh,540px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-right:3px;scrollbar-gutter:stable}
#klist .krow{padding:5px 8px;margin:3px 0;gap:6px;border-radius:10px}
#klist .krow .pname{font-size:.98em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
#klist .krow .ksub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;font-size:.74em}
#klist .kpos{width:24px;height:24px;font-size:.8em}
#klist .krow .tag{font-size:.68em;padding:1px 6px}
#klist .krow.mine{box-shadow:inset 0 0 0 1px var(--ac)}
#kcount{font-size:.78em;font-weight:700;opacity:.85;margin:2px 0}
.kcur.on{background:var(--kg);color:var(--kgt);border-color:var(--kg);box-shadow:0 0 0 2px color-mix(in srgb,var(--kg) 45%,transparent)}
#ktime:not(:empty){background:var(--kg);color:var(--kgt);border-color:var(--kg);font-size:.9em}
.krow.cur{background:var(--kg);border-color:var(--kg);box-shadow:0 0 0 2px color-mix(in srgb,var(--kg) 45%,transparent)}
.krow.cur .pname,.krow.cur .ksub{color:var(--kgt);opacity:1}
.krow.cur .kpos{background:var(--kgt);border-color:var(--kgt);color:var(--kg)}
.krow.cur .tag{background:var(--kgt);color:var(--kg)}
.kvol{display:flex;align-items:center;gap:8px;margin-top:6px}.kvol input[type=range]{flex:1;min-width:0;height:28px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--kg);cursor:var(--cur-ptr)}.kvol button{min-width:44px;min-height:40px}
/* karaokê: a janela acompanha o tamanho do vídeo */
#pKar.side.fit{width:fit-content;min-width:min(340px,calc(100vw - 24px));max-width:calc(100% - 24px);box-sizing:border-box}
#pKar small#kmsg{display:block;max-width:420px}
#pKar{min-width:340px}#pKar input#ksong{box-sizing:border-box;width:100%!important;border-radius:10px;padding:9px 11px}

.adm{display:inline-block;width:9px;height:9px;border-radius:50%;background:#3aa0ff;box-shadow:0 0 6px 2px #3aa0ff;margin-right:5px;vertical-align:middle;animation:tw 1.1s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}
.info{margin:6px 0;padding-left:18px;font-size:.92em;max-width:330px}.info li{margin:4px 0}
.mochila,.visual{width:340px}.mochila .grip,.visual .grip{font-weight:700;color:var(--ac)}.mochila h4,.visual h4{color:var(--ac);margin:8px 0 2px}
.tb{position:absolute;right:12px;bottom:84px;display:flex;flex-direction:column;gap:10px;z-index:10;pointer-events:auto}.tb button{width:62px;height:62px;border-radius:50%;font-size:1.5em;padding:0;box-shadow:0 3px 12px #0008}
button{touch-action:manipulation}
.slot svg{width:36px;height:36px}
.slot{width:56px;height:56px;padding:0;border:3px solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);background:var(--slot);border-radius:6px;font-size:1.9em;line-height:1;position:relative;display:inline-flex;align-items:center;justify-content:center;color:var(--fg);flex:none;cursor:var(--cur-ptr)}
.slot:hover,.slot:focus-visible{background:var(--hi);outline:2px solid var(--ac)}
.slot.held{box-shadow:inset 0 0 0 3px var(--ac);background:color-mix(in srgb,var(--ac) 24%,var(--slot))}
.mc{display:grid;grid-template-columns:repeat(5,56px);gap:4px;margin:6px 0;justify-content:start}
.mcb{background:var(--panel);color:var(--fg);border:2px solid var(--bd);border-radius:8px;padding:5px 8px}.mcb.sel{background:var(--ac);color:var(--onac,#111);font-weight:700;outline:none}
.iinfo{background:var(--slot);color:var(--fg);padding:8px;font-size:.88em;min-height:2.4em;border:1px solid var(--bd);border-radius:8px;margin-top:8px}
.dots{position:absolute;bottom:2px;right:2px;display:flex;gap:2px}.dots i{width:9px;height:9px;border:1px solid var(--fg);border-radius:50%;display:block}
.vwrap{resize:both;overflow:hidden;width:380px;height:214px;min-width:200px;min-height:120px;max-width:calc(88vw / var(--ui));max-height:calc(60vh / var(--ui));background:#000;border-radius:8px;margin-top:6px}
.vwrap iframe{width:100%;height:100%;border:0}
.vstage{position:relative;display:block;width:fit-content;max-width:100%;margin-top:6px}
.vstage .vwrap{margin-top:0}
.vctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;min-width:0;margin-top:6px;box-sizing:border-box}
.vctl>button{width:44px;height:40px;min-width:44px;min-height:40px;padding:0;font-size:1.05em}
.vctl .kvol{flex:1 1 140px;min-width:120px;margin-top:0}
.vctl .kvol input[type=range]{min-width:60px}
.vstage:fullscreen,.vstage:-webkit-full-screen{width:100vw;height:100vh;max-width:none;margin:0;background:#000;display:flex;align-items:center;justify-content:center}
.vstage:fullscreen .vwrap,.vstage:-webkit-full-screen .vwrap{width:100vw!important;height:100vh!important;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;border-radius:0;resize:none}
#vchange{display:grid;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}
#vchange input{box-sizing:border-box;width:100%}
#vchange small{opacity:.82}
.balloon{position:absolute;left:50%;transform:translateX(-50%);max-width:92%;text-align:center}
#err{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}
canvas{touch-action:none}
#bar{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
#bar sup{font-size:.58em;background:#c0392b;color:#fff;border-radius:9px;padding:1px 5px;line-height:1.25;margin-left:2px}
#hud sup{font-size:.62em;background:var(--ac);color:var(--onac,#111);border-radius:9px;padding:1px 5px;line-height:1.25;margin-left:2px}
@media (pointer:coarse){button{min-height:42px}}
@media (max-width:700px),(max-aspect-ratio:1/1){
 #start{left:0;right:0;top:auto;bottom:0;width:100%;height:60%;border-radius:22px 22px 0 0;padding:14px}
 .logo{font-size:1.7em}#hud .p{font-size:.78em;padding:4px 7px}
 #bar{gap:4px}
 #chat{width:min(440px,94vw);height:170px}.side{width:calc(100% - 24px)}.mochila,.visual{width:calc(100% - 24px)}.mc{grid-template-columns:repeat(auto-fill,56px)}
}
@media (max-height:500px){#chat{height:110px;width:min(380px,60vw)}#start{height:80%}}

/* ---------- página inicial (intro) ---------- */
#intro{position:fixed;inset:0;z-index:1000;background:#0d0a14;color:#f5ede0;--sb-track:#17121f;--sb-inset:#ffffff1c;font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;overflow-y:auto;overflow-x:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));transition:opacity .45s}
#intro.out{opacity:0;pointer-events:none}
#iCv{position:fixed;inset:0;width:100%;height:100%;display:block}
.iShade{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#0d0a1400 0%,#0d0a14b8 100%)}
.iBox{position:relative;text-align:center;width:100%;max-width:640px;margin:auto}
.iLogo{font-size:clamp(2.6rem,11vw,5.4rem);font-weight:900;line-height:1.05;letter-spacing:.5px;filter:drop-shadow(0 4px 24px #000a)}
.iLogo span{background:linear-gradient(90deg,#ffb23e,#ff5ea8,#5bd6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.iCap{min-height:2.8em;margin:clamp(18px,5vh,36px) 0;display:flex;align-items:center;justify-content:center;font-size:clamp(1.05rem,3.6vw,1.55rem);font-weight:800;text-shadow:0 2px 16px #000;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.iCap.on{opacity:1;transform:none}
.iBtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:420px;margin:0 auto}
.iBtns .iBtn{min-width:0;padding:14px 12px;justify-content:center}
@media (min-width:900px){.iBtns{display:flex;justify-content:center;max-width:none}.iBox{max-width:900px}.iBtns{flex-wrap:nowrap;gap:10px}.iBtns .iBtn{min-width:0;flex:0 0 auto;padding:14px 20px;white-space:nowrap}}
.iBtn{font:inherit;font-weight:800;font-size:1.1em;min-width:170px;padding:14px 26px;border-radius:14px;border:1px solid #ffffff33;color:#f5ede0;background:#ffffff14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:none;cursor:var(--cur-ptr);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,filter .15s}
.iBtn:hover,.iBtn:focus-visible{transform:translateY(-2px);filter:brightness(1.12);outline:2px solid #ffb23e;outline-offset:3px}
.iBtn.play{font-size:1.3em;color:#1a1208;border-color:transparent;background:linear-gradient(90deg,#ffb23e,#ff8a5e);box-shadow:0 8px 30px #ffb23e55}
.iBtn.dc{background:#5865f2;border-color:transparent;color:#fff}
.iBtn.tut{background:#ffffff;border-color:#111;color:#111}
.iBtn.gh{background:#24292f;border-color:#ffffff33;color:#fff}
.iFoot{margin-top:22px;font-size:.8em;opacity:.6}
@media (prefers-reduced-motion:reduce){#intro,.iCap,.iBtn{transition:none}}

/* ---- rodada 4: tokens, estados, indicadores ---- */
:root{--r-md:12px;--r-lg:18px;--ease:cubic-bezier(.2,.7,.2,1);--t:.16s;--panel:#2a231ce8}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--panel:#fffaf0e8}}
:root[data-theme=dark]{--panel:#2a231ce8}
:root[data-theme=light]{--panel:#fffaf0e8}
:root[data-hc=on]{--panel:#000}
html{font-variant-numeric:tabular-nums}
@supports (backdrop-filter:blur(1px)){html:not([data-q=low]):not([data-hc=on]) .p{backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15)}}
.p:not(.hide){animation:pin .14s var(--ease)}
@keyframes pin{from{opacity:0}}
button,input,select{transition:background-color var(--t),border-color var(--t),box-shadow var(--t),filter var(--t),transform var(--t)}
button:hover:not(:focus-visible):not(.sel){outline:none;border-color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--panel))}
button.pri:hover:not(:focus-visible){background:var(--ac);filter:brightness(1.08)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
button:active:not(:disabled){transform:translateY(1px)}
/* cursores fofos: seta âmbar com coração (padrão) e seta rosa com estrela (clicável) */
:root{--cur:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M5%203v21l5.5-5.2L14%2027l4-1.8-3.5-7.8H22z'%20fill='none'%20stroke='%23fff'%20stroke-width='4.6'%20stroke-linejoin='round'/%3E%3Cpath%20d='M5%203v21l5.5-5.2L14%2027l4-1.8-3.5-7.8H22z'%20fill='%23ffb23e'%20stroke='%232d2340'%20stroke-width='1.9'%20stroke-linejoin='round'/%3E%3Cpath%20d='M8%209.5v8l2.4-2.2'%20fill='none'%20stroke='%23fff3d6'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M27%2029.6c-4.6-3.3-3.6-7.2-.4-6.2%201.6.5%201.6%201.7%201.6%201.7s0-1.2%201.6-1.7c3.2-1%204.2%202.9-.4%206.2z'%20transform='translate(-1%20-1)'%20fill='%23ff5ea8'%20stroke='%232d2340'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,auto;--cur-ptr:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M5%203v21l5.5-5.2L14%2027l4-1.8-3.5-7.8H22z'%20fill='none'%20stroke='%23fff'%20stroke-width='4.6'%20stroke-linejoin='round'/%3E%3Cpath%20d='M5%203v21l5.5-5.2L14%2027l4-1.8-3.5-7.8H22z'%20fill='%23ff7fba'%20stroke='%232d2340'%20stroke-width='1.9'%20stroke-linejoin='round'/%3E%3Cpath%20d='M8%209.5v8l2.4-2.2'%20fill='none'%20stroke='%23fff0f6'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M26%2021l1.3%203.2%203.2%201.3-3.2%201.3L26%2030l-1.3-3.2-3.2-1.3%203.2-1.3z'%20fill='%23ffb23e'%20stroke='%232d2340'%20stroke-width='1.1'%20stroke-linejoin='round'/%3E%3C/svg%3E") 5 3,pointer}
html,body{cursor:var(--cur)}
button,select,summary,[role=button],label.chk,input[type=checkbox],input[type=range],.slot,.mcb{cursor:var(--cur-ptr)}
button:disabled{opacity:.5;cursor:not-allowed}
:root[data-hc=on] button:hover{outline:2px solid var(--ac)}
.vm i{background:color-mix(in srgb,var(--fg) 35%,transparent)}
#bar{gap:6px}
@media (max-width:700px),(max-aspect-ratio:1/1){#bar{left:calc(8px + env(safe-area-inset-left,0px));right:calc(8px + env(safe-area-inset-right,0px));transform:none;max-width:none;width:auto;gap:4px}}
#bar button{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;font-size:1.3em;line-height:1}
#hud #kshowq sup{background:var(--kg);color:var(--kgt)}
#hud #kshowq{min-width:44px;min-height:44px;cursor:var(--cur-ptr)}
#hud .p{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:2px;font-size:.95em;padding:4px 8px}
#mic{cursor:var(--cur-ptr);transition:border-color var(--t),box-shadow var(--t)}
#mic[data-s=on]{border-color:var(--kg);box-shadow:0 0 0 1px var(--kg)}
#mic[data-s=err]{border-color:#e5534b}
#hud #mic{min-width:44px;min-height:44px}
#hud{left:calc(12px + env(safe-area-inset-left,0px))}.tb{right:calc(12px + env(safe-area-inset-right,0px))}
@media (max-width:380px){#bar button{width:40px;height:40px;min-width:40px;min-height:40px;font-size:1.18em}#pSet label{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.p:not(.hide){animation:none}button,input,select{transition:none}}

/* ---------- tutorial em quadrinhos ---------- */
#tut{position:fixed;inset:0;z-index:1100;overflow-y:auto;overflow-x:hidden;background:#111;font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;color:#111;box-sizing:border-box;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));outline:0}
.tutPage{position:relative;max-width:1100px;margin:0 auto;padding:clamp(14px,3vw,28px);background:#fbf7ec;border:4px solid #111;box-shadow:0 0 0 6px #fbf7ec,0 0 0 10px #111;background-image:radial-gradient(#0000000d 1px,transparent 1.4px);background-size:7px 7px}
.tutX{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:3;font:inherit;font-weight:900;font-size:.95rem;padding:8px 14px;border:3px solid #111;border-radius:10px;background:#fff;color:#111;cursor:var(--cur-ptr,pointer);box-shadow:3px 3px 0 #111}
.tutX:hover,.tutX:focus-visible{background:#ffd23e;outline:3px solid #111;outline-offset:2px}
.tutHead{text-align:center;margin:4px 0 clamp(14px,3vw,24px)}
.tutHead h2{margin:0;font-size:clamp(2.6rem,10vw,5.6rem);line-height:.95;font-weight:900;letter-spacing:-1px;transform:skew(-6deg) rotate(-1.5deg);text-transform:uppercase;-webkit-text-stroke:3px #111;paint-order:stroke fill;color:#fff;text-shadow:5px 5px 0 #111}
.tutHead h2 span{color:#ffd23e}
.tutHead p{margin:12px 0 0;font-weight:800;font-size:clamp(.85rem,2.4vw,1.05rem)}
.tutGrid{display:grid;grid-template-columns:1fr;gap:clamp(12px,2.4vw,18px)}
.pn{margin:0;position:relative;background:#fff;border:4px solid #111;box-shadow:5px 5px 0 #111;display:flex;flex-direction:column;min-width:0}
.pn .pic{position:relative;overflow:hidden;border-bottom:4px solid #111;background:#ddd;aspect-ratio:16/9}
.pn img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.35) brightness(1.04);transition:filter .3s}
.pn .pic::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#000 22%,transparent 24%);background-size:5px 5px;mix-blend-mode:multiply;opacity:.28}
.pn:hover img,.pn:focus-within img{filter:none}
.pn:hover .pic::after{opacity:0}
.sfx{position:absolute;right:10px;top:8px;z-index:2;font-weight:900;font-style:italic;font-size:clamp(1.3rem,4.6vw,2.3rem);line-height:1;color:#fff;-webkit-text-stroke:2.5px #111;paint-order:stroke fill;text-shadow:3px 3px 0 #111;transform:rotate(-7deg);letter-spacing:1px}
.pn figcaption{position:relative;padding:14px 14px 14px 54px;font-size:clamp(.9rem,2.5vw,1.02rem);line-height:1.45;font-weight:600;flex:1}
.pn .num{position:absolute;left:10px;top:10px;width:34px;height:34px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:1.1rem}
.bal{position:relative;margin:0;padding:10px 12px;background:#fff;border:3px solid #111;border-radius:16px}
.bal::before{content:"";position:absolute;left:-13px;top:14px;width:16px;height:16px;background:#fff;border-left:3px solid #111;border-bottom:3px solid #111;transform:rotate(45deg)}
.pn kbd{display:inline-block;min-width:1.5em;padding:1px 6px;margin:0 2px;font:inherit;font-weight:900;font-size:.85em;text-align:center;background:#fff;border:2px solid #111;border-bottom-width:4px;border-radius:6px}
.keys{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 10px;font-weight:800;font-size:.92em}
.keys li{white-space:nowrap}
.note{margin:10px 0 0;font-size:.85em;font-weight:700;opacity:.8}
.p10{background:#ffd23e;justify-content:center}
.p10 figcaption{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.p10 .iBtn{align-self:center;box-shadow:4px 4px 0 #111;border:3px solid #111;color:#111;font-size:1.15em}
@media (min-width:760px){
 .tutGrid{grid-template-columns:repeat(12,1fr)}
 .p1{grid-column:span 7}.p2{grid-column:span 5}
 .p3,.p4,.p5{grid-column:span 4}
 .p6,.p7{grid-column:span 6}
 .p8,.p9{grid-column:span 6}
 .p10{grid-column:span 12}
 .p10 figcaption{flex-direction:row;align-items:center;justify-content:space-between}
 .p10 .bal{flex:1}
 .p2 .pic{aspect-ratio:16/10}
 .p1 .pic{flex:1;aspect-ratio:auto;min-height:220px}
 .p1 .pic img{position:absolute;inset:0}
}
@media (prefers-reduced-motion:reduce){.pn img{transition:none}}

/* vinheta suave sobre o mundo 3D */
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(10,6,20,.34) 100%)}

/* DJ (rádio da sala) */
#pDJ{width:min(380px,calc(100vw - 24px))}
#djwho{font-weight:800;word-break:break-word}
.djv{display:flex;align-items:center;gap:8px;margin-top:8px}
.djv input{flex:1}
#djmsg{display:block;min-height:1.2em;margin-top:6px}
.djnote{display:block;margin-top:8px;opacity:.75;line-height:1.35}
.nerr{display:block;min-height:0;margin-top:6px;color:#ff8a7a;font-weight:700}
#name[aria-invalid=true]{border-color:#ff6a5a;box-shadow:0 0 0 2px #ff6a5a55}

/* notificações (convites não respondidos em 20 s) */
#nlist{display:flex;flex-direction:column;gap:6px;max-height:min(50vh,320px);overflow-y:auto}
.ni{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border-radius:10px;background:#0000000f}
.ni span{flex:1 1 150px;font-weight:700;line-height:1.3;word-break:break-word}
.ni .ts{flex:0 0 100%;font-weight:500;font-size:.8em;opacity:.65}
.nempty{opacity:.7;padding:6px 2px}
#bNotif.ring{animation:nring .6s 2}
@keyframes nring{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){#bNotif.ring{animation:none}}