@font-face{font-family:Room Serif;src:url('./assets/title.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--background:#201b17;--paper:#e9dfd0;--ink:#2d261f;--text:#eee4d7;--soft:#cbb9a7;--accent:#ad664b;--line:#66574b;font:16px/1.5 system-ui,"Noto Sans CJK TC",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--background);color:var(--text)}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
:focus-visible{outline:2px solid #d5825d;outline-offset:4px}
::selection{background:#aa6248;color:#fff8ee}
.mast,main{width:min(1440px,100%);margin-inline:auto;padding-inline:clamp(16px,3.5vw,56px)}
.mast{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:18px 13px}
h1{font-family:"Room Serif",Georgia,serif;font-weight:400;font-size:clamp(30px,4.1vw,52px);line-height:1.06;letter-spacing:-.04em;margin:0}
h1 span{color:#d5825d}
.mast p{margin:0;color:var(--soft);font-size:.8rem;white-space:nowrap}
.mast p span{display:inline-block;margin-left:12px;color:var(--text);font-variant-numeric:tabular-nums}
main{padding-bottom:25px}
.stage{position:relative;isolation:isolate;background:#372b23;width:100%;aspect-ratio:2.06;min-height:380px;max-height:76vh;overflow:hidden;border:1px solid #4d4035}
.poster,#viewport,#viewport canvas{width:100%;height:100%;display:block}
.poster,#viewport{position:absolute;inset:0}
.poster{object-fit:cover;object-position:50% 65%;z-index:-1}
#viewport{touch-action:none;cursor:grab}
#viewport:active{cursor:grabbing}
#viewport:focus-visible{outline-offset:-5px}
.stage{--edge-top:14px;--edge-left:14px;--edge-right:14px;--edge-bottom:0px}
.stage-top{position:absolute;top:var(--edge-top);left:var(--edge-left);right:var(--edge-right);display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.mode,.stage-actions,.expand{pointer-events:auto}
.mode{display:flex;padding:3px;background:#261e19;border:1px solid #a29381}
.mode button,.expand{border:0;background:transparent;font-size:.85rem;min-height:44px}
.mode button{padding:0 15px;color:#e3d6c8}
.mode button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.mode button:disabled{cursor:wait;opacity:.62}
.expand,.options,#fps{background:#261e19;border:1px solid #a29381}
.expand{display:grid;place-items:center;width:46px}
.expand:hover,.options:hover,#fps:hover{background:#45362b}
.status,.toast{position:absolute;left:var(--edge-left);top:calc(var(--edge-top) + 56px);max-width:calc(100% - var(--edge-left) - var(--edge-right));margin:0;background:#261e19;padding:7px 13px;color:var(--text);font-size:.84rem}
.toast{top:auto;left:auto;right:var(--edge-right);bottom:calc(var(--edge-bottom) + 67px);z-index:3}
.caption{position:absolute;bottom:var(--edge-bottom);left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 16px;background:#261e19;color:var(--text);pointer-events:none}
.caption p{margin:0;font-size:.83rem}
#view-name{font-weight:650}
#control-hint{color:#e2d2c0}
.control-help{display:flex;align-items:center;gap:12px}
#fps{pointer-events:auto;min-height:40px;padding:0 11px;font-size:.82rem}
.joystick{display:none;position:absolute;bottom:calc(var(--edge-bottom) + 64px);left:var(--edge-left);width:88px;height:88px;border-radius:50%;border:1px solid #eee4d7;background:#261e19bf;touch-action:none}
.stick{position:absolute;left:calc(50% - 17px);top:calc(50% - 17px);width:34px;height:34px;border-radius:50%;background:var(--paper);pointer-events:none}
.options{display:none;align-items:center;gap:7px;min-height:44px;padding:0 11px;font-size:.82rem}
.studio{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--paper);color:var(--ink)}
.studio[hidden],[hidden]{display:none!important}
.studio section{padding:16px 22px 15px;min-width:0}
.studio section+section{border-left:1px solid #c5b6a3}
h2{font-size:1rem;margin:0 0 8px}
.stops,.treatments{display:flex;align-items:center;gap:2px 12px;flex-wrap:wrap}
.stops{gap:2px 8px}
.stops button{padding:6px 9px;background:transparent;border:0;border-bottom:2px solid transparent;font-size:.89rem;min-height:39px}
.stops button[aria-pressed=true]{border-bottom-color:#8a4a33;color:#793e29}
.stops button:hover,.treatments label:hover{background:#d9c9b5}
.treatments label{min-height:37px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.85rem;padding-inline:4px}
.treatments input{accent-color:#8c4933;width:16px;height:16px;margin:0}
.acoustics p{color:#5c4c3e;font-size:.77rem;margin:6px 0 0}
.notice{padding:15px 20px}
.stage.immersive{
  --edge-top:max(12px,env(safe-area-inset-top));
  --edge-left:max(12px,env(safe-area-inset-left));
  --edge-right:max(12px,env(safe-area-inset-right));
  --edge-bottom:max(12px,env(safe-area-inset-bottom));
  position:fixed;inset:0;z-index:10;max-height:none;width:100%;height:100vh;height:100dvh;min-height:0;aspect-ratio:auto;border:0;
}
.stage.immersive:fullscreen{height:100%}
.immersive .caption{left:var(--edge-left);right:var(--edge-right);bottom:calc(var(--edge-bottom) + 51px);padding:0;background:none;align-items:end;text-shadow:0 1px 5px #170f0a,0 1px 10px #170f0a}
.immersive .caption p{width:fit-content;background:#261e19e8;padding:4px 8px}
.immersive .options{position:absolute;right:var(--edge-right);bottom:var(--edge-bottom);display:flex;z-index:2}
.immersive .studio{position:absolute;right:var(--edge-right);bottom:calc(var(--edge-bottom) + 54px);width:min(540px,calc(100% - var(--edge-left) - var(--edge-right)));max-height:calc(100% - var(--edge-top) - var(--edge-bottom) - 120px);overflow:auto;overscroll-behavior:contain;z-index:4;display:block;box-shadow:0 10px 28px #140d08a8}
.immersive .studio section{padding:11px 14px}
.immersive .studio section+section{border-left:0;border-top:1px solid #c5b6a3}
.immersive .stops button,.immersive .treatments label{min-height:44px}
.immersive[data-options-open] .caption,.immersive[data-options-open] .joystick{visibility:hidden}
.immersive[data-native-lock] .options,.immersive[data-native-lock] .stage-top,.stage[data-native-lock] #fps{visibility:hidden}
.crosshair{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff8eb;filter:drop-shadow(0 1px 2px #201711);pointer-events:none}
.stage[data-lock] .crosshair{display:block}
.stage[data-lock] #viewport{cursor:none}
.stage[data-lock] #viewport:focus-visible{outline:none}
body:has(.stage.immersive){overflow:hidden;overscroll-behavior:none}
@media (pointer:coarse){
  .stage.ready[data-mode=walk] .joystick{display:block}
  .immersive .joystick{bottom:var(--edge-bottom)}
  .immersive .caption{left:auto;justify-content:end;flex-direction:column;gap:6px}
  .immersive .caption p{font-size:.78rem}
}
@media (max-width:730px){
  .mast{padding-block:14px 11px}
  .mast p span{display:none}
  .stage{min-height:0;max-height:none;height:clamp(345px,57svh,580px);aspect-ratio:auto}
  .studio{grid-template-columns:1fr}
  .studio section{padding:12px 14px}
  .studio section+section{border-left:0;border-top:1px solid #c5b6a3}
  .treatments label{min-height:44px}
  .stops button{min-height:44px}
}
@media (max-width:370px){
  .treatments{gap:2px 5px}
  .treatments label{font-size:.76rem}
  .mode button{padding-inline:11px}
}