:root{--bg:#0f1420;--fg:#e6e9f2;--pn:#171d2d;--pn2:#1f2740;--bd:#2b3556;--ac:#3b82f6;--mu:#8b95b3}
@media(prefers-color-scheme:light){:root{--bg:#eef1f7;--fg:#1a2036;--pn:#fff;--pn2:#f1f4fb;--bd:#d3d9ea;--mu:#5a6483}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--ac)}header{padding:.7rem 1.1rem;background:var(--pn);border-bottom:2px solid var(--ac);display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
header h1{font-size:1.1rem;margin:0}header small{color:var(--mu);font-weight:400}header a{margin-left:.6rem;text-decoration:none}
main,.lobby{padding:1rem;max-width:980px;margin:auto}.err{color:#ef4444;font-weight:600}.ann{background:#fde68a;color:#000;padding:.6rem;border-radius:8px}.ft{margin-top:2rem;color:var(--mu);font-size:.85rem}
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.forms form,main form.card,.card{background:var(--pn);border:1px solid var(--bd);border-radius:12px;padding:1rem}
label{display:block;margin:.4rem 0}input,select,textarea,button{font:inherit;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--bd);background:var(--pn2);color:var(--fg)}
input:not([type=checkbox]):not([type=file]),textarea{width:100%}button{cursor:pointer;background:var(--ac);color:var(--af,#fff);border:0}button:hover{filter:brightness(1.1)}button.g{background:var(--pn2);color:var(--fg);border:1px solid var(--bd)}
.rooms{list-style:none;padding:0}.rooms li{background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:.7rem 1rem;margin:.4rem 0}
.room{display:grid;grid-template-columns:230px 1fr 270px;gap:.7rem;padding:.7rem;height:calc(100vh - 3.6rem)}
.pn{background:var(--pn);border:1px solid var(--bd);border-radius:12px;overflow:auto;padding:.7rem;min-height:0}.pn h3{margin:.2rem 0 .5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.chat{display:flex;flex-direction:column}.desc{color:var(--mu);font-size:.85rem;border-bottom:1px solid var(--bd);padding-bottom:.4rem}#log{flex:1;overflow:auto;padding:.4rem 0}#log div{padding:3px 0;word-break:break-word}.t{color:var(--mu);font-size:.75em}
.s0{font-size:.85em}.s2{font-size:1.2em}.s3{font-size:1.5em}.fx-soft{animation:fin 1s}.fx-shadow{text-shadow:1px 1px 2px rgba(0,0,0,.5)}.fx-rainbow{background:linear-gradient(90deg,#e11d48,#f59e0b,#16a34a,#2563eb,#9333ea);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes fin{from{opacity:0}to{opacity:1}}.badge{display:inline-block;animation:glow 2s ease-in-out infinite alternate}@keyframes glow{from{filter:drop-shadow(0 0 0 gold)}to{filter:drop-shadow(0 0 4px gold)}}
@media(prefers-reduced-motion:reduce){.badge,.fx-soft{animation:none}}.noanim .badge,.noanim .fx-soft{animation:none}.noanim .fx-rainbow{background:none;-webkit-text-fill-color:inherit}
.u{display:flex;align-items:center;gap:.5rem;padding:4px 6px;border-radius:8px;text-decoration:none;color:var(--fg)}.u:hover,.u:focus{background:var(--pn2)}.u small{color:var(--mu)}
.av{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bd);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;flex:none}
.spk{background:#facc15;color:#000;border-radius:6px;padding:2px 6px;margin:2px 0}#mic div{padding:2px 0}
#bar{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem;align-items:center}#bar input[type=text]{flex:1;min-width:160px}.emo button{background:none;padding:.2rem;font-size:1.1rem}
.btns{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}#videos video{width:100%;border-radius:8px;margin:.3rem 0;background:#000}
dialog{border:1px solid var(--bd);border-radius:14px;background:var(--pn);color:var(--fg);max-width:320px;width:92%}dialog button{display:block;width:100%;margin:.3rem 0;text-align:left}dialog::backdrop{background:rgba(0,0,0,.6)}
.prof{display:flex;gap:1rem;align-items:center}.prof .av{width:96px;height:96px;font-size:2rem}.msg{padding:.4rem .7rem;margin:.3rem 0;border-radius:10px;background:var(--pn2);max-width:85%}.msg.me{margin-left:auto;background:var(--ac);color:var(--af,#fff)}
@media(max-width:850px){.room{grid-template-columns:1fr;height:auto}.chat{height:65vh;order:-1}.pn{max-height:34vh}}
header h1,h3,.pn h3{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}header h1::before{content:'$ ';color:var(--ac)}.talk{outline:2px solid #22c55e;outline-offset:-2px}#pos{font-weight:600;margin:.3rem 0}input[type=range]{padding:0;width:100%}
#users{max-height:260px;overflow:auto}@media(max-width:850px){.room>aside:first-child{order:2}.room>aside:last-child{order:1}header{padding:.5rem .7rem}#bar select{flex:1 1 45%}}
