/* Touch controls belong to the game, with room art left at its approved ratio. */
body,#world{touch-action:manipulation}
#world{touch-action:none}
.touch-controls{display:block;position:absolute;left:0;right:0;bottom:12px;width:100%;height:138px;opacity:1;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none}
.direction-pad{position:absolute;left:12px;bottom:0;width:132px;height:132px;display:grid;grid-template:repeat(3,44px)/repeat(3,44px);gap:0;perspective:180px}
.touch-controls button{pointer-events:auto;touch-action:none;border:0;width:44px;height:44px;padding:10px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#17212abd,#17212a76 70%,transparent);color:#ded9c8;box-shadow:none;-webkit-tap-highlight-color:transparent}
.touch-controls button.pressed,.touch-controls button:active{background:radial-gradient(circle,#796b50dc,#796b5088 70%,transparent);color:#fff2d0}
.touch-controls button svg{width:24px;height:24px;fill:currentColor;pointer-events:none}
.direction-pad [data-move=up]{grid-area:1/2}
.direction-pad [data-move=left]{grid-area:2/1}
.direction-pad [data-move=right]{grid-area:2/3}
.direction-pad [data-move=down]{grid-area:3/2}
.pad-body{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 4px 1px #000b);transition:transform .08s,filter .08s;transform-origin:center}
.touch-controls .direction-pad button{position:relative;z-index:1;background:none;border-radius:0;box-shadow:none;color:#d4d9d9;padding:10px}
.direction-pad button svg{filter:drop-shadow(0 1px 1px #090e14);transition:transform .08s,color .08s}
.touch-controls .direction-pad button.pressed{background:linear-gradient(180deg,#08101888,transparent);color:#fff1cf;clip-path:inset(5px 1px 0 round 4px)}
.direction-pad button.pressed svg{transform:translateY(2px);filter:drop-shadow(0 0 1px #000)}
.direction-pad[data-pressed=up] .pad-body{transform:rotateX(7deg) translateY(1px);filter:drop-shadow(0 1px 1px #000c)}
.direction-pad[data-pressed=down] .pad-body{transform:rotateX(-7deg) translateY(1px);filter:drop-shadow(0 1px 1px #000c)}
.direction-pad[data-pressed=left] .pad-body{transform:rotateY(-7deg) translateY(1px);filter:drop-shadow(1px 2px 1px #000c)}
.direction-pad[data-pressed=right] .pad-body{transform:rotateY(7deg) translateY(1px);filter:drop-shadow(-1px 2px 1px #000c)}
.console-actions{position:absolute;right:18px;bottom:6px;width:128px;height:120px}
.touch-controls .console-actions button{position:absolute;width:64px;height:64px;padding:0;font-size:14px;text-shadow:1px 1px 2px #000;letter-spacing:1px}
.touch-controls #touchInteract{right:0;top:0;width:64px;height:64px;display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:11px;letter-spacing:0}
.touch-controls #touchNotebook{left:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:11px;letter-spacing:0}
#touchNotebook img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(1px 2px 3px #0008)}
#touchInteract img{width:28px;height:28px;object-fit:contain;pointer-events:none;filter:drop-shadow(1px 1px 1px #0008)}
.transition-shade{position:absolute;inset:0;display:grid;place-items:center;background:#0b111ab0}
.transition-dialog{padding:30px 8%;width:100%;background:linear-gradient(90deg,transparent,#101720d9 20%,#101720d9 80%,transparent);text-align:center;font-size:clamp(15px,2vw,20px);text-shadow:1px 1px 2px #000}
.transition-dialog p{margin:0 0 14px;line-height:1.7}
.transition-dialog .transition-place{font-size:13px;color:#d4c49d}
.transition-actions{display:flex;justify-content:center;gap:28px}
.transition-actions button{min-width:64px;min-height:48px;font-size:15px}
.transition-actions button:last-child{color:#f0d5a1}
/* Physical controls keep a usable target even when the close-up is small. */
.inspection-hotspot,.inspection-paper,.inspection-seal{min-width:44px;min-height:44px}
.pc-step-back{bottom:-28px;width:44px;height:44px}
#gameMenuButton{width:44px;height:44px}
.game-header nav{top:52px;max-height:calc(100svh - 76px);overflow-y:auto}
.game-header nav button{min-height:44px}
@media(max-width:600px), (max-height:500px) and (orientation:landscape){
  /* The monitor remains a physical close-up; its controls scroll inside it. */
  .inspection:has(.pc-inspected-monitor){position:fixed;z-index:30}
  .pc-inspected-monitor{width:min(100%,calc((100svh - 84px)*1.68));top:43%}
  .pc-desktop{overflow-y:auto}.pc-screen .pc-shortcut{min-height:44px;flex-shrink:0}
  .pc-file-row{min-height:44px!important;font-size:9px}
  .pc-tree{overflow:auto}.pc-tree button{font-size:9px!important;min-height:44px;flex-shrink:0}
  .pc-explorer{min-height:154px;flex-shrink:0}
  .pc-file-tools{flex-wrap:wrap}.pc-file-tools button{min-width:44px;min-height:44px}
  .pc-address{height:auto;min-height:44px}.pc-address button{min-width:44px;min-height:44px}
  .pc-content{overflow:auto}.pc-record-info{font-size:9px;grid-template-columns:1fr}.pc-record-info strong{font-size:9px}
  .pc-screen .pc-document-back,.pc-screen .pc-linked-file,.pc-record-source button{min-width:44px;min-height:44px;flex-shrink:0}
  .pc-record-source{flex-wrap:wrap;gap:6px}
  .pc-login{overflow:auto;justify-content:flex-start}.pc-login>*{flex-shrink:0}
  .pc-password{height:44px;font-size:16px}.pc-login-submit{height:44px;min-width:44px}.pc-login-form{grid-template-columns:auto minmax(80px,110px) 44px}
  .pc-screen .pc-hint-button{min-height:44px;font-size:11px!important}.pc-password-hint{font-size:11px}
}
@media(max-width:600px) and (orientation:portrait){
  body{display:flow-root}
  .game-shell{width:100%;margin:max(12px,env(safe-area-inset-top)) auto 0;padding-bottom:env(safe-area-inset-bottom)}
  .touch-controls{position:relative;inset:auto;height:164px;background:linear-gradient(0deg,#10161d,transparent);padding-bottom:env(safe-area-inset-bottom)}
  .direction-pad{left:22px;bottom:12px;width:138px;height:138px;grid-template:repeat(3,46px)/repeat(3,46px)}
  .touch-controls button{width:46px;height:46px;background:radial-gradient(circle,#25313dda,#25313d82 70%,transparent)}
  .console-actions{right:16px;bottom:20px;width:124px;height:122px}
  .dialogue-text{font-size:14px;line-height:1.7}
  .dialogue-box{padding:20px 5% 22px;min-height:38%}
  .dialogue-portrait{bottom:33%;height:62%}
  .dialogue-next{min-width:44px;min-height:44px;bottom:0;right:2%}
  .panel-header h2{font-size:14px}.panel-content{padding:10px;font-size:12px}.panel-actions{padding:5px 8px}
  .action,.action.secondary{font-size:12px;min-height:44px}
  .pc-document{font-size:11px;line-height:1.55;padding:6px 8px}
  .inspection-thought{font-size:12px;line-height:1.55;padding:25px 14% 8px 5%}
}
@media(max-height:500px) and (orientation:landscape){
  .touch-controls{bottom:max(6px,env(safe-area-inset-bottom));height:138px}
  .direction-pad{left:6px;grid-template:repeat(3,44px)/repeat(3,44px);gap:0}
  .touch-controls button{width:44px;height:44px;padding:8px}
  .console-actions{right:8px;width:116px;height:116px}.touch-controls .console-actions button,.touch-controls #touchInteract{width:58px;height:58px}
}
#world.departing{opacity:0;transition:opacity .3s ease}
.completion-shade{background:linear-gradient(0deg,#0e151af5,#18232bed);align-items:center;justify-content:center}.stage-completion{text-align:center;max-width:480px;padding:24px;color:#e7e2cf}.completion-kicker{font-size:12px;letter-spacing:3px;color:#c8ba8b}.stage-completion h2{font-size:32px;font-weight:400;letter-spacing:8px;margin:12px 0 24px}.completion-note{font-size:14px;line-height:1.9;margin-bottom:32px}.stage-completion .transition-actions{justify-content:center;gap:30px;flex-wrap:wrap}.stage-completion button{min-height:44px;padding:8px 0}
@media(max-width:600px) and (orientation:portrait){
  .completion-shade{position:fixed;z-index:30;padding:max(16px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow-y:auto}
  .stage-completion{width:100%;max-height:100%;overflow-y:auto}
}
@media(min-width:560px) and (orientation:landscape){
  .game-shell{width:min(1280px,calc((100svh - 24px)*var(--room-ratio)),calc(100vw - 296px))}
  .game-shell:fullscreen{width:min(calc(100svh*var(--room-ratio)),calc(100vw - 296px))}
  .direction-pad{left:-138px}
  .console-actions{right:-136px}
}

.choices{z-index:2}.choice{min-height:44px}
@media(orientation:portrait) and (max-width:640px){
  .stage:has(.dialogue-shade){overflow:visible}
  #overlay:has(.dialogue-shade){bottom:-132px;}
}