:root{--bg:#0a1118;--panel:#0f1b25;--line:#1d3142;--ink:#d3e3ee;--mute:#7b94a7;--acc:#62b6cb;--ok:#7fd8b4;--bad:#d9534f}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{background:radial-gradient(ellipse at 50% 110%,#12283a 0,var(--bg) 62%) fixed;color:var(--ink);font:400 15px/1.5 Nunito,system-ui,sans-serif;-webkit-text-size-adjust:100%;overflow-wrap:anywhere}
h1,h2{font-family:Fraunces,Georgia,serif;font-weight:700}
h1{font-size:clamp(24px,5vw,32px);line-height:1.2}
h2{font-size:18px}
a{color:inherit;text-decoration:none}
input,button{font:inherit;color:inherit}
input[type=text]{width:100%;min-width:0;background:#0a141c;border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;font-size:16px}
button,.btn{cursor:pointer;border:0;border-radius:10px;padding:10px 16px;background:var(--acc);color:#05141b;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:600}
button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
[hidden]{display:none!important}
.vh{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.mute{color:var(--mute)}
.err{color:#ff8a6b;min-height:20px;font-size:14px;margin-top:6px}
.lbl{color:var(--mute);font-size:13px;margin:18px 0 8px}
.row{display:flex;gap:10px;align-items:center}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.screen{display:none}.screen.on{display:block}
.wrap{width:100%;max-width:880px;margin:0 auto;padding:20px 16px 48px;display:grid;gap:14px}
.wrap.narrow{max-width:560px}
.sec{margin-top:8px}
.card{width:calc(100% - 32px);max-width:480px;margin:6vh auto 40px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:12px}
.seg{display:flex;gap:8px 20px;flex-wrap:wrap}
.seg label{display:flex;gap:8px;align-items:center;cursor:pointer}
/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(10,17,24,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav.hide{display:none}
.brand{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:19px}
.me{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw}
/* avatar */
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#1a2a38;border:2px solid var(--line);flex:none}
.avatar.sm{width:34px;height:34px}.avatar.big{width:96px;height:96px}
.picker{display:grid;gap:12px;justify-items:start}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px;width:100%}
.pgrid button{padding:0;background:none;border:2px solid transparent;border-radius:50%;aspect-ratio:1}
.pgrid button.sel{border-color:var(--acc)}
.pgrid img{width:100%;height:100%;border-radius:50%;display:block}
/* lobby */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.room{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.room button{margin-top:auto}
.stack{display:flex;padding-left:6px}
.stack img{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-left:-6px;border:2px solid var(--panel)}
.empty{grid-column:1/-1;color:var(--mute);text-align:center;padding:28px}
/* room */
.rwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:100vh;height:100dvh}
.stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 52%,rgba(255,150,60,calc(var(--f,1)*.13)),transparent 62%)}
.stage>*{position:relative;z-index:1}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.bar .t{min-width:0}
.bar h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar button{padding:8px 12px}
.circle{flex:1;min-height:0;display:grid;place-items:center;padding:56px 56px 72px}
.ring{--rs:clamp(170px,min(100dvh - 330px,100vw - 560px),400px);position:relative;width:var(--rs);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 66%,rgba(255,150,60,calc(var(--f,1)*.45)) 0,rgba(140,60,20,calc(var(--f,1)*.2)) 34%,#09131b 72%);box-shadow:0 0 calc(90px*var(--f,1)) calc(12px*var(--f,1)) rgba(255,125,40,.3),inset 0 0 50px #000;border:2px solid #1f3548}
#fire{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.seat{position:absolute;width:84px;text-align:center;transform:translate(-50%,-50%);font-size:13px}
.seat img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--line);background:#1a2a38;box-shadow:0 0 14px rgba(255,140,50,calc(var(--f,1)*.28));transition:box-shadow .15s,border-color .15s}
.seat.talk img{border-color:var(--ok);box-shadow:0 0 16px 4px rgba(127,216,180,.55)}
.seat span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .mb{position:absolute;top:-4px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;border:2px solid #0a1118}
.mb svg{width:12px;height:12px;display:block}
.ctrl{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.mic{width:48px;height:48px;border-radius:50%;padding:0}
.mic svg{width:22px;height:22px;display:block}
.mic.off{background:var(--bad);color:#fff}
/* chat */
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--line);background:var(--panel)}
.msgs{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px;display:flex;flex-direction:column;gap:10px}
.m{display:flex;gap:8px;min-width:0}
.m img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:#1a2a38}
.m>div{min-width:0;flex:1}
.mh{display:flex;align-items:center;gap:6px}
.mh b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.m p{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.m .del{padding:0 8px;font-size:12px;border-radius:6px;color:var(--mute)}
.sys{align-self:center;max-width:100%;text-align:center;color:var(--mute);font-size:12.5px;padding:2px 12px;background:rgba(255,255,255,.04);border-radius:99px}
.cin{display:flex;gap:8px;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
/* toast + dialog */
#toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#1a2e3f;border:1px solid var(--line);padding:10px 16px;border-radius:10px;z-index:50;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .2s;text-align:center}
#toast.on{opacity:1}
dialog{margin:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(92vw,360px)}
dialog::backdrop{background:rgba(0,0,0,.65)}
@media(max-width:860px){
  .rwrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .stage{overflow:visible}
  .circle{flex:none;padding:44px 44px 58px}
  .ring{--rs:clamp(140px,min(100vw - 150px,100dvh - 470px),290px)}
  .seat{width:68px;font-size:12px}
  .seat img{width:48px;height:48px;border-width:2px}
  .seat .mb{right:2px;width:19px;height:19px}
  .chat{border-left:0;border-top:1px solid var(--line)}
  .ctrl{padding:8px 16px}
}
@media(max-width:480px){.two{grid-template-columns:1fr}.card{padding:20px}}