/* Shared single-room palette. Viewport stays fixed; only conversation/dialog contents scroll. */
:root{color-scheme:dark;--ink:#f3e6cf;--muted:#bca78a;--gold:#d5b273;--line:#9f80533d;--panel:#211a14ed}
html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}body{background:radial-gradient(ellipse at 50% 15%,#403022,#120f0b 75%);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body>header{height:100px;padding:16px 28px;position:relative;z-index:8;border-bottom:1px solid var(--line);background:linear-gradient(#211a14ed,#211a1499);align-items:center}header small,.welcome small{color:var(--gold);letter-spacing:2px;font-size:10px}h1{font-size:21px;font-weight:500;letter-spacing:.08em;margin:2px 0}#roomMeta{color:var(--muted);font-size:11px}button,input,select{background:#17120dd9;color:var(--ink);border:1px solid #ac8c5855;border-radius:10px;padding:9px 12px;min-height:38px}button:hover{background:#4a3924;border-color:#d5b273}button:focus-visible,input:focus-visible,select:focus-visible{outline-color:#ffd58c}.primary{background:#d5ad6d;color:#241909;border-color:#dfbe87}.primary:hover{background:#e5c890;color:#241909}button[aria-pressed=true],#chatPanel[aria-expanded=true]{background:#70542e;color:#fff1d8}
main{height:calc(100dvh - 100px);max-width:none;width:100%;padding:14px 22px 30px;position:relative;overflow:hidden}#status{position:absolute;z-index:20;bottom:2px;left:24px;right:24px;margin:0;color:#edd1a3;pointer-events:none}#status:empty{display:none}#room{height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:0}.scene{flex:none;width:min(100%,calc((100dvh - 258px)*1.6));aspect-ratio:1.6;height:auto;margin:auto;overflow:hidden;border-radius:16px;border:1px solid #bd9b6155;box-shadow:0 18px 50px #0007;background:#182026}.room-layer-canvas{width:100%;height:100%}.controls{flex:none;margin:0 auto;padding:8px 12px;gap:7px;width:min(1080px,100%);border:1px solid var(--line);background:var(--panel);border-radius:14px}.own-timer b{font-size:25px;font-weight:400;letter-spacing:.04em;color:#ffe4b4}.controls label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}.controls button,.controls select{font-size:12px}.music{flex:none;width:min(1080px,100%);margin:0 auto;background:#211a14b0;border:1px solid var(--line);padding:8px 12px;gap:7px}.music button,.music select{min-height:32px;padding:5px 10px;font-size:11px}#trackLabel{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:32vw;color:var(--muted)}#tracks{max-width:210px}.seat .label{background:#241b12dc;color:#f2e6ce;border:1px solid #ae8b5059;box-shadow:0 3px 8px #0003}.seat.self .label{background:#d5ad6d;color:#211608}.seat .timer{background:#241b12f5;color:#ffe0ac;border:1px solid #c59b57}.voice-speaking .label{box-shadow:0 0 0 2px #8fbba1}
#lobby{height:100%;min-height:0;max-width:1180px;margin:auto;gap:20px;align-items:center}.welcome{height:min(100%,540px);padding:36px 9%;border:1px solid var(--line);background:linear-gradient(140deg,#59442bd9,#241b16f5),url('layers-v2/room.webp') center/cover;border-radius:22px;box-shadow:0 20px 70px #0004}.welcome h2{font-family:"Songti SC",serif;font-weight:400;font-size:clamp(25px,3.5vw,49px);line-height:1.55}.room-options{background:var(--panel);border:1px solid var(--line);padding:24px;border-radius:22px}.room-options form{padding:12px 0;gap:10px}.room-options form+form{border-color:var(--line)}.room-options label{color:var(--muted)}
#private{display:none;position:absolute;z-index:12;right:22px;bottom:142px;width:360px;max-width:calc(100% - 28px);height:min(380px,calc(100dvh - 210px));margin:0;padding:16px;border:1px solid #ab895780;background:#211a14fa;border-radius:16px;box-shadow:0 16px 60px #0008;grid-template-rows:auto minmax(0,1fr) auto;gap:10px}.chat-open #private:not([hidden]){display:grid}.private-head h2{margin:0;font-size:15px;font-weight:500}.private-head{gap:5px}.private-head button{font-size:11px;padding:6px 9px;min-height:32px}#chat{height:auto;min-height:0;background:#130f0bb0;border:1px solid var(--line);color:#dfceb5;scrollbar-width:thin}#chatForm{margin:0;gap:5px}#chatText{min-width:0;width:0;font-size:16px}#chatForm button{font-size:11px;padding:6px 9px}#emojiWheel{position:absolute;bottom:66px;left:16px;right:16px;background:#302519;border:1px solid var(--line);padding:10px;border-radius:14px;grid-template-columns:repeat(4,1fr)}
dialog{background:#211a14;color:var(--ink);border-color:#80613c;max-height:85dvh;overflow:auto}dialog::backdrop{background:#0009}#socialList article{border-color:var(--line)}
@media(max-width:700px){body>header{height:102px;padding:10px 14px;gap:8px;align-items:flex-start}h1{font-size:18px;max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}header>.actions{gap:5px;max-width:46%;justify-content:flex-end}header button{font-size:11px;padding:6px 9px;min-height:32px}#roomMeta{display:block;font-size:10px;max-width:55vw;line-height:1.4}main{height:calc(100dvh - 102px);padding:10px 10px 28px}#room{gap:8px}.scene{width:min(100%,calc((100dvh - 320px)*1.6));border-radius:10px}.controls{padding:9px;gap:6px}.own-timer{width:100%;margin:0}.own-timer b{margin-right:auto;font-size:24px}.controls button,.controls select{font-size:11px;min-height:33px;padding:5px 8px}.music{padding:7px;flex-wrap:wrap}.music #trackLabel{max-width:48vw}.music #tracks{max-width:calc(100% - 80px)}#lobby{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px}.welcome{height:auto;padding:15px 20px;display:block;border-radius:14px}.welcome h2{display:inline-block;font-size:23px;margin:8px 15px 10px 0;line-height:1.3}.welcome small{display:block}.welcome button{font-size:12px}.room-options{padding:10px 16px;border-radius:14px;align-self:start}.room-options form{gap:7px;padding:8px 0}.room-options label{gap:3px}.room-options input,.room-options select{padding:5px 9px;min-height:34px;font-size:16px}#codeForm{grid-template-columns:1fr auto;align-items:end}#private{right:14px;bottom:140px;height:min(340px,calc(100dvh - 210px));padding:12px}.seat .label{font-size:7px}.seat .timer{font-size:9px}#status{left:14px;right:14px;font-size:11px}}
@media(max-height:600px) and (min-width:701px){body>header{height:70px;padding:8px 18px}header small{display:none}main{height:calc(100dvh - 70px);padding-top:5px;padding-bottom:20px}#room{gap:5px}.scene{width:min(100%,calc((100dvh - 200px)*1.6))}.controls{padding:4px 8px}.controls button,.controls select{min-height:30px;padding:4px 8px}.music{padding:4px 8px}#private{bottom:110px;height:calc(100dvh - 195px)}.welcome{padding:20px}.welcome h2{font-size:28px}.room-options{padding:8px 16px}.room-options form{gap:5px;padding:6px 0}.room-options input,.room-options select{padding:4px 9px;min-height:30px}}
@media(max-height:680px) and (max-width:700px){.welcome h2 br{display:none}.welcome h2{font-size:18px;margin:4px 0}.welcome{padding:9px 14px}.welcome button{float:right}.welcome small{font-size:8px}.room-options form{padding:5px 0;gap:4px}#createForm{grid-template-columns:1fr 1fr}#createForm>label:first-child,#createForm>button{grid-column:1/-1}.room-options{padding:7px 12px}#lobby{gap:7px}.scene{width:min(100%,calc((100dvh - 310px)*1.6))}}