:root { color-scheme: dark; --bg:#1a1917; --panel:rgba(26,25,23,.84); --fg:#f4f0e8; --muted:#a39d92; --accent:#d9a25f; --accent-ink:#1a1917; --line:rgba(244,240,232,.18); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font: 500 14px/1.35 "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow:hidden; }
#app { position:fixed; inset:0; height:100dvh; }
#c { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; user-select:none; -webkit-user-select:none; }
#hud { position:absolute; inset:0; pointer-events:none; }
#hud > * { pointer-events:auto; }
#topbar { position:absolute; left:0; right:0; top:0; padding:calc(env(safe-area-inset-top) + 8px) 12px 6px; display:flex; align-items:center; gap:10px; pointer-events:none; z-index:2; }
#tabs { display:flex; gap:4px; background:var(--panel); border-radius:999px; padding:3px; pointer-events:auto; }
#tabs button { border:none; background:transparent; color:var(--muted); font:600 12px/1 'Golos Text', system-ui, sans-serif; letter-spacing:.02em; padding:7px 11px; border-radius:999px; cursor:pointer; }
#tabs button.active { background:var(--fg); color:var(--bg); }
#gallery { position:absolute; inset:0; top:calc(env(safe-area-inset-top) + 48px); overflow:auto; -webkit-overflow-scrolling:touch; padding:8px 10px calc(env(safe-area-inset-bottom) + 20px); background:var(--bg); }
#gallery section { margin-bottom:18px; }
#gallery h3 { margin:6px 0 8px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
#gallery figure { margin:0 0 8px; }
#gallery img { width:100%; border-radius:10px; display:block; background:#1a222a; }
#gallery figcaption { font-size:12px; color:var(--muted); margin-top:3px; }
#roomname { font-size:21px; font-weight:700; letter-spacing:-0.01em; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); }
#minimap { position:absolute; right:10px; top:calc(env(safe-area-inset-top) + 48px); border-radius:10px; background:var(--panel); box-shadow:0 2px 10px rgba(0,0,0,.35); }
#joy { position:absolute; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.35); display:none; pointer-events:none; }
#joyknob { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 2px 8px rgba(0,0,0,.4); }
#bottombar { position:absolute; left:0; right:0; bottom:0; padding:8px 8px calc(env(safe-area-inset-bottom) + 8px); display:flex; flex-direction:column; gap:8px; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
#rooms { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
#rooms::-webkit-scrollbar { display:none; }
.chip { flex:0 0 auto; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--fg); font:600 13px/1.2 'Golos Text', system-ui, sans-serif; cursor:pointer; }
.chip.active { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
#tools { display:flex; gap:6px; justify-content:flex-end; }
#tools button, .panel button { padding:7px 11px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--fg); font:600 13px/1.2 'Golos Text', system-ui, sans-serif; cursor:pointer; }
.panel { position:absolute; left:10px; right:10px; bottom:calc(env(safe-area-inset-bottom) + 96px); max-width:420px; margin:0 auto; background:var(--panel); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:14px; padding:12px 14px; box-shadow:0 6px 24px rgba(0,0,0,.45); max-height:60dvh; overflow:auto; }
.panel h3 { margin:0 0 8px; font-size:14px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.panel .row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.panel .sw { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff; font-size:13px; cursor:pointer; }
.panel .sw.active { outline:2px solid var(--accent); outline-offset:-1px; }
.panel .sw i { width:18px; height:18px; border-radius:5px; display:inline-block; border:1px solid rgba(0,0,0,.25); }
.panel table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.panel td { padding:4px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.panel td:last-child { text-align:right; color:var(--muted); }
.panel p { margin:6px 0; color:#dfe5ea; font-size:13px; }
.hidden { display:none !important; }
#intro { position:absolute; inset:0; background:rgba(8,12,16,.78); display:flex; align-items:center; justify-content:center; padding:20px; }
#intro .card { background:#22201c; border:1px solid var(--line); border-radius:16px; padding:20px 20px 16px; max-width:380px; width:100%; box-shadow:0 10px 40px rgba(0,0,0,.6); }
#intro .facts { color:var(--accent); font-weight:600; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
#intro .how { display:grid; gap:8px; margin:12px 0 4px; }
#intro .how div { display:grid; grid-template-columns:92px 1fr; gap:8px; align-items:baseline; font-size:13px; color:#cfc8bc; }
#intro .how b { color:var(--fg); }
#intro .small { color:var(--muted); font-size:12px; }
#intro h2 { margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-0.01em; text-wrap:balance; }
#intro p { margin:6px 0; color:#cfd7de; font-size:14px; }
#intro button { margin-top:14px; width:100%; padding:13px; border-radius:12px; border:none; background:var(--accent); color:var(--accent-ink); font:700 16px/1 'Golos Text', system-ui, sans-serif; cursor:pointer; }
#intro button:focus-visible, .chip:focus-visible, #tools button:focus-visible, .panel button:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { #hint { transition:none; } }
#err { position:absolute; left:10px; right:10px; top:calc(env(safe-area-inset-top) + 60px); background:#5a1d1d; color:#fff; padding:10px 12px; border-radius:10px; font:12px/1.4 ui-monospace, Menlo, monospace; white-space:pre-wrap; display:none; z-index:9; }
#hint { position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 100px); transform:translateX(-50%); background:rgba(0,0,0,.55); color:#fff; padding:6px 12px; border-radius:999px; font-size:12px; pointer-events:none; opacity:0; transition:opacity .4s; }
#hint.show { opacity:1; }

[hidden] { display:none !important; }
#planview { position:absolute; inset:0; top:calc(env(safe-area-inset-top) + 48px); overflow:auto; padding:8px 10px calc(env(safe-area-inset-bottom) + 20px); background:var(--bg); }
#planview .svgwrap svg { display:block; width:100%; height:auto; max-height:calc(100dvh - 190px); border-radius:12px; background:#f6f2ea; }
#planview .legend { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:12px; color:var(--muted); margin:10px 0 4px; }
#planview .legend i { display:inline-block; width:14px; height:10px; margin-right:5px; vertical-align:middle; border-radius:2px; }
#planview .note { font-size:12px; color:var(--muted); margin:4px 0; }

#dpad { position:absolute; left:14px; bottom:calc(env(safe-area-inset-bottom) + 104px); width:150px; height:150px; display:none; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); gap:4px; pointer-events:auto; }
#dpad button { border:1px solid var(--line); background:var(--panel); color:var(--fg); font-size:20px; border-radius:12px; touch-action:none; user-select:none; -webkit-user-select:none; padding:0; }
#dpad button:active, #dpad button.on { background:var(--accent); color:var(--accent-ink); }
#dpad button[data-k="KeyW"] { grid-column:2; grid-row:1; } #dpad button[data-k="KeyA"] { grid-column:1; grid-row:2; } #dpad button[data-k="KeyD"] { grid-column:3; grid-row:2; } #dpad button[data-k="KeyS"] { grid-column:2; grid-row:3; }
@media (pointer: coarse) { #dpad { display:grid; } #rooms { padding-left:0; } }