/* Keep the desktop illustration, scene coordinates and controls intact. */
body{justify-content:flex-start;background:#f8c5b5;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.mobile-nav{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 12px;background:#fff8e9;color:#795b45;font-size:13px;min-height:40px}.mobile-nav a{color:inherit;text-decoration:none;padding:8px 0}.mobile-nav span{font-size:12px}
.app{flex-shrink:0;width:min(100%,1600px);margin:auto 0}
.orientation-note{display:none}
#board{touch-action:pinch-zoom}#fish{touch-action:none}#fish{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#fish .parcel{pointer-events:all}
.touch-assist{width:min(100%,1000px);padding:8px 12px;background:#fff8e9;color:#795b45;font-size:14px}.touch-assist summary{cursor:pointer;min-height:32px;padding:6px 0}.touch-targets p{margin:8px 0}.touch-targets>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.touch-targets button{min-height:44px;padding:6px;border:1px solid #b79c76;border-radius:12px;background:#edf1d7;font-size:15px;font-weight:700}
dialog{max-width:min(92vw,600px);max-height:85svh;overflow:auto}
@media(orientation:portrait) and (max-width:700px){.orientation-note{display:block;position:static;width:100%;padding:10px 16px;background:#fff8e9;color:#795b45;text-align:center;font-size:15px;line-height:1.5}.touch-targets>div{grid-template-columns:repeat(3,minmax(0,1fr))}.app{margin:0}}
@media(orientation:landscape) and (max-height:600px), (orientation:landscape) and (pointer:coarse){
 html,body{width:100%;height:100%;min-height:0;overflow:hidden;padding:0;margin:0}
 body{position:fixed;inset:0}
 .mobile-nav,.orientation-note{display:none}
 .app{position:fixed;left:var(--fit-left,0px);top:var(--fit-top,0px);width:var(--fit-width,100%);height:var(--fit-height,100%);aspect-ratio:auto;margin:0;max-width:none}
 .touch-assist{position:fixed;bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);z-index:10;width:auto;max-width:100%;padding:0 8px;border-radius:0 12px 0 0;font-size:11px;max-height:65dvh;overflow:auto;background:#fff8e9ee}
 .touch-assist summary{min-height:22px;padding:4px 0}
 .touch-assist[open]{width:min(95%,650px);padding:6px 12px}
 .app[data-mode=mission] .task h2{width:95%;font-size:1.5cqw;line-height:1.3;margin:.4cqw 0 0}
 .app[data-mode=mission] .receipt-title{font-size:1.4cqw}
 .app[data-mode=mission] #phase{display:none}
 /* #sound is inside header, whose height is 22% of .app: 36.36% of the header is 8% of the scene. */
 #sound{left:auto;right:max(10px,env(safe-area-inset-right));top:36.36%;width:72px;height:48px;min-width:64px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:3px;background:#fff8e9f2;border:2px solid #69503c;border-radius:14px 17px 13px 16px;color:#423126;font-size:25px;line-height:1;padding:2px;z-index:12}
 #sound:after{content:'声音';position:static;width:auto;border:0;transform:none;font-size:11px;color:#69503c;white-space:nowrap;flex-shrink:0}
 #sound[aria-pressed=false]:after{content:'静音'}
 #floor-labels .staff-level{font-size:48px}
 #floor-labels text{font-size:34px}
 #message,.app[data-mode=explore] #message{font-size:1.25cqw}
}

#restore-view{position:fixed;left:calc(var(--visible-left,0px) + var(--visible-width,100vw) - 106px);top:calc(var(--visible-top,0px) + var(--visible-height,100dvh) - 34px);width:98px;height:30px;padding:2px 5px;z-index:20;font-size:13px;background:#fff8e9ed;border:1px solid #a58b6d;border-radius:12px;color:#715239;touch-action:manipulation}