:root { color-scheme:dark; --cream:#eee3c9; --muted:#b3a289; --gold:#c0a06b; --sans:"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0;overflow:hidden;background:#0b1010;color:var(--cream);font:14px/1.5 var(--sans); }
body { height:100dvh; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button { cursor:pointer;color:inherit; }
a { color:inherit;text-underline-offset:5px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--gold);outline-offset:4px; }
[hidden] { display:none!important; }
#cinema,#world,#direct-view { position:absolute;inset:0;width:100%;height:100%; }
#world { display:block;touch-action:none;outline:none;cursor:grab; }
.crosshair { display:none;position:absolute;z-index:2;left:50%;top:50%;width:3px;height:3px;transform:translate(-50%,-50%);border-radius:50%;background:#e4dcc5aa;box-shadow:0 0 3px #000;pointer-events:none; }
body[data-look="locked"] .crosshair { display:block; }
#direct-view { display:grid;place-items:center;background:#05080b; }
#direct-view canvas { display:block;width:100%;height:100%;object-fit:contain; }
body.is-focused #world { visibility:hidden; }
.world-target { position:absolute;z-index:2;border:1px solid transparent;background:none;cursor:pointer; }
.world-target { transition:box-shadow .2s,border-color .2s;background:transparent; }
.world-target::before { content:"▶";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(28px,40%,52px);aspect-ratio:1;border:1px solid #f8e8c9cc;border-radius:50%;background:#182322d9;color:#fff0cf;font-size:16px;opacity:0;transition:opacity .2s; }
.world-target:hover,.world-target:focus-visible { border-color:#fff0b8;box-shadow:0 0 0 3px #bf965c,0 0 28px #fff0c0a8;background:#07141430; }
.world-target:hover::before,.world-target:focus-visible::before,.world-target:active::before { opacity:1; }
.world-target:focus-visible { outline:2px solid #f6dfad;outline-offset:4px; }
body[data-look="locked"] .world-target { pointer-events:none; }
body[data-look="locked"] .world-target:hover { border-color:transparent;box-shadow:none;background:none; }
body[data-look="locked"] .world-target::before { opacity:0; }
.hud { position:absolute;z-index:5;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;pointer-events:none; }
.hud > *, .hud-actions { pointer-events:auto; }.hud-actions { display:flex;gap:6px; }
.icon { display:inline-grid;place-items:center;flex-shrink:0;width:38px;height:38px;border:0;padding:9px;background:#0a0e1144;color:#d8c4a0;text-decoration:none;border-radius:50%;opacity:.7;transition:opacity .25s; }
.icon:hover,.icon:focus-visible { opacity:1; }
.icon svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round; }
.lobby-ui { position:absolute;z-index:3;bottom:28px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:end;gap:20px;pointer-events:none; }
.walk-hint { font-size:11px;letter-spacing:.04em;color:#d4c5ab;opacity:.65;margin:0;text-shadow:0 1px 6px #000;transition:opacity .8s; }
.walk-hint.dismissed { opacity:0; }
body[data-zone="lobby"] .hud .icon { color:#4d3825;background:#f6eddcd9;opacity:1;box-shadow:0 1px 5px #39281718; }
body[data-zone="lobby"] .walk-hint { color:#4d3825;opacity:1;text-shadow:none;background:#f6eddcdd;padding:6px 10px;border-radius:3px; }
body[data-zone="lobby"] .walk-hint.dismissed { opacity:0; }
body[data-zone="lobby"]:not([data-mode="entering"]) .hud { opacity:1; }
body:not([data-zone="lobby"]) .lobby-ui,body[data-navigation="moving"] .lobby-ui { display:none; }
body:not([data-navigation="walking"]) .joystick,body.is-focused .joystick { display:none; }
body[data-navigation="walking"] .ending { display:none; }
body.is-focused[data-navigation="walking"] .ending { display:flex; }
.icon:disabled { cursor:default;opacity:.3; }
body[data-mode="entering"] .hud { opacity:.4; }
.film-controls { position:absolute;z-index:5;bottom:22px;left:50%;transform:translateX(-50%);width:min(470px,calc(100% - 42px));display:flex;align-items:center;gap:13px;padding:6px 13px 6px 6px;background:#060a0ed9;border:1px solid #a68b5d26;border-radius:3px;opacity:0;transition:opacity .4s;backdrop-filter:blur(7px); }
body.controls-visible .film-controls,body[data-mode="paused"] .film-controls,.film-controls:focus-within { opacity:1; }
body:not(.controls-visible)[data-mode="playing"] .hud { opacity:.25; }
.hud { transition:opacity .5s; }.hud:hover,.hud:focus-within { opacity:1!important; }
#seek { width:100%;height:24px;min-width:40px;accent-color:#d2b988;cursor:pointer; }
#film-time { white-space:nowrap;font:9px/1.3 monospace;color:#c2b393;min-width:68px;text-align:right; }
.ending { position:absolute;z-index:4;bottom:30px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:25px; }
.text-button { border:0;border-bottom:1px solid #b49a6d70;background:#0b1117a8;padding:9px 3px;font-size:13px;color:#efdfbf; }
.details-link { margin-left:15px;font-size:10px;color:#baa78a;text-decoration:none; }
.boot { position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#101511; }
.boot p { margin:0;color:#bcad90;font-size:12px; }
.loading-line { width:90px;height:1px;background:#b89a63;animation:loading 1.2s ease-in-out infinite alternate; }
@keyframes loading { from { opacity:.2;transform:scaleX(.4); } to { opacity:1;transform:scaleX(1); } }
.failure { position:absolute;z-index:11;left:50%;top:50%;transform:translate(-50%,-50%);width:min(450px,calc(100% - 40px));background:#192119;padding:30px;text-align:center; }
.failure p { font-size:15px;line-height:1.6; }.failure a { display:block;font-size:12px;margin-top:20px; }
dialog { color-scheme:light;position:fixed;max-width:calc(100vw - 32px);width:430px;max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #baaa87;padding:24px 30px;background:#e8dfc8;color:#464235;box-shadow:0 30px 100px #0008; }
dialog::backdrop { background:#020609b8;backdrop-filter:blur(4px); }.dialog-head { display:flex;justify-content:space-between;align-items:center; }.dialog-head h2 { margin:0;font:30px Georgia,serif; }.dialog-head .icon { color:#6b5d43;background:none;font-size:25px; }
dialog dl { margin:25px 0; }dialog dl > div { display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #b1a18355;padding:11px 0;font-size:12px; }dialog dd { margin:0;color:#796c53;text-align:right; }dialog > a { font-size:11px;color:#776446; }
#film-list { display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:24px; }
#film-list a { display:flex;flex-direction:column;gap:9px;text-decoration:none;font:18px/1.25 Georgia,serif; }
#film-list img { display:block;width:100%;aspect-ratio:3/2;object-fit:cover; }
#film-list a[aria-current] { text-decoration:underline;text-underline-offset:4px; }
.program-pages { display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px; }
.program-pages .icon { color:#6b5d43;background:none; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
.no-script { position:absolute;z-index:20;inset:30% 10%;background:#172018;padding:30px;text-align:center; }
.joystick { display:none;position:absolute;z-index:4;bottom:26px;left:25px;width:82px;height:82px;border:1px solid #cfba8a55;border-radius:50%;background:#07100e38;touch-action:none; }
.joystick-thumb { position:absolute;left:25px;top:25px;width:30px;height:30px;border-radius:50%;border:1px solid #e8d09f70;background:#e3c89125;pointer-events:none; }
@media(pointer:coarse) { .joystick { display:block; }.walk-hint { display:none; }.lobby-ui { justify-content:flex-end;bottom:40px;left:120px;right:24px; } }
@media(pointer:coarse) { body[data-navigation="walking"]:not(.is-focused) .film-controls { left:auto;right:20px;transform:none;width:min(420px,calc(100% - 140px));gap:8px; } body[data-navigation="walking"]:not(.is-focused) #film-time { display:none; } }
@media(max-width:600px) { .hud { padding:12px 14px; }.hud-actions { gap:2px; }.icon { width:34px;height:34px;padding:8px; }.lobby-ui { bottom:28px;left:20px;right:20px; }.ending { flex-wrap:wrap;gap:15px;bottom:22px;padding:0 20px; }.details-link { flex-basis:100%;text-align:center;margin:0; }.film-controls { bottom:16px; }.joystick { bottom:23px;left:21px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }