:root{color:#f7edda;font-synthesis:none;background:#17130f;font-family:Inter,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top,#3d2618 0,#17130f 58%);min-width:320px;min-height:100dvh;margin:0}button,input{font:inherit}button{color:#21150d;cursor:pointer;background:#e8ad67;border:1px solid #e8ad67;border-radius:10px;min-height:44px;padding:10px 14px;font-weight:700}button:hover:not(:disabled){background:#f3c58b}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #7fd9b0}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{color:#f2c990;background:0 0;border-color:#805d3b}input{color:#fff7e8;background:#211912;border:1px solid #805d3b;border-radius:10px;width:100%;min-width:0;min-height:44px;padding:10px 12px}label{color:#f2c990;font-size:14px}#app{width:min(1180px,100%);padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));margin:0 auto}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}h1{margin:2px 0 0;font-size:clamp(24px,5vw,38px)}h2{margin:0;font-size:18px}h3{color:#c4b5a1;margin:16px 0 8px;font-size:14px}p{margin:8px 0 0}.eyebrow{color:#e8ad67;letter-spacing:.1em;margin:0;font-size:12px}.version{color:#f2c990;white-space:nowrap;border:1px solid #805d3b;border-radius:999px;padding:7px 10px;font-size:12px}main{grid-template-columns:minmax(330px,1fr) minmax(0,1.15fr);align-items:start;gap:18px;display:grid}.status-panel,.scene-panel{background:#1f1812eb;border:1px solid #68492f;border-radius:18px;box-shadow:0 18px 50px #00000038}.status-panel{padding:18px}.scene-panel{min-height:560px;padding:12px;position:sticky;top:16px;overflow:hidden}.status-row{align-items:center;gap:10px;display:flex}.status-dot{background:#e8ad67;border-radius:50%;width:10px;height:10px;box-shadow:0 0 16px}.status-panel:has(#server-status[data-status=ok]) .status-dot{background:#72d6a0}.status-panel:has(#server-status[data-status=error]) .status-dot{background:#ef7d73}.connection{color:#c4b5a1;font-size:13px}.connection[data-status=CONNECTED]{color:#72d6a0}.connection[data-status=ERROR],.connection[data-status=DISCONNECTED]{color:#ef9a88}.field{margin-top:16px}.inline-control{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:6px;display:grid}.action-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;display:grid}.action-grid>button{width:100%}.join-control{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.notice{color:#f2c990;min-height:22px;font-size:14px}.error{color:#ffab9d;overflow-wrap:anywhere;min-height:22px;font-size:13px}.muted{color:#c4b5a1;font-size:13px;line-height:1.55}.room-card{border-top:1px solid #68492f;margin-top:14px;padding-top:14px}.room-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}#room-phase{color:#72d6a0}.room-facts{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0;display:grid}.room-facts div{background:#211912;border-radius:9px;min-width:0;padding:8px 10px}.room-facts dt{color:#a99a87;font-size:11px}.room-facts dd{overflow-wrap:anywhere;margin:4px 0 0;font-size:13px}#room-code{color:#f2c990;letter-spacing:.12em;font-size:22px;font-weight:800}.members{gap:6px;min-height:30px;margin:0 0 12px;padding:0;list-style:none;display:grid}.members li{border:1px solid #68492f;border-radius:9px;justify-content:space-between;gap:10px;padding:9px 10px;display:flex}.member-presence{color:#a99a87;font-size:12px}#leave-room{width:100%}#scene{background:#241a14;border-radius:12px;width:100%;height:62vh;min-height:410px;max-height:620px;overflow:hidden}#scene canvas{width:100%;height:100%;display:block}.protocol-note{padding:12px 8px 4px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=760px){main{grid-template-columns:1fr}.scene-panel{min-height:300px;position:static}#scene{height:42vh;min-height:260px}}@media (height<=480px) and (width>=761px){#app{padding:12px}.topbar{margin-bottom:10px}main{grid-template-columns:minmax(350px,1.1fr) minmax(0,.9fr);gap:12px}.scene-panel{min-height:360px}#scene{height:70vh;min-height:260px}}@media (width<=480px){#app{padding:12px}.status-panel{padding:14px}.action-grid{grid-template-columns:1fr}.join-control{grid-column:auto}.room-facts,.inline-control{grid-template-columns:1fr}}