/* Narrow desktop windows are not phones. JS enables this only for primary touch input. */
#overlay>small.release-credit{display:block;font-size:10px;letter-spacing:1px;color:#c6c9c5;margin-top:10px}
.mobile-game #overlay>small.release-credit{display:block;font-size:8px;letter-spacing:.5px;margin-top:7px}
.touch,.mobile-toolbar,.mobile-rotate,.mobile-resume,.mobile-audio{display:none}
.mobile-door{display:none}
.mobile-game .mobile-door:not([hidden]){display:block;position:absolute;z-index:9;min-width:44px;min-height:44px;padding:0;border:2px solid #bae2c8b3;border-radius:3px;background:#b9e5ce08;box-shadow:0 0 12px #91e2bc55;touch-action:manipulation}
.mobile-door>span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:5px;white-space:nowrap;font-size:10px;font-weight:700;padding:5px 7px;border-radius:4px;background:#122923ed;color:#d2f3dd;pointer-events:none}
.mobile-game{background:#0c1218;overscroll-behavior:none}
.mobile-game body{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mobile-game header,.mobile-game .topline,.mobile-game footer,.mobile-game .note,.mobile-game .bottomhud{display:none}
.mobile-game main{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0;max-width:none;height:100%;display:flex;align-items:center;justify-content:center}
.mobile-game .stage{flex:none;width:min(100vw,calc(100vh*16/9));width:min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9));height:auto;max-width:100%;aspect-ratio:16/9;box-shadow:none;border:0;touch-action:none}
.mobile-game canvas{object-fit:contain}
.mobile-game button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mobile-game .mobile-toolbar{display:flex;position:fixed;z-index:40;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.mobile-toolbar button{min-height:44px;min-width:60px;background:#132532e8;border:1px solid #9ab9c080;border-radius:8px;color:#e4edef;font-size:12px;padding:0 12px;pointer-events:auto}
.mobile-toolbar .mobile-menu-toggle{color:#f3c799;box-shadow:0 2px 10px #0004}
#mobile-menu-panel{display:flex;flex-direction:column;gap:5px;padding:7px;width:148px;max-height:calc(100dvh - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;background:#0c1823f2;border:1px solid #bca16c66;border-radius:10px;pointer-events:auto}
#mobile-menu-panel button{text-align:left;width:100%;flex-shrink:0}
.mobile-game .mobile-toolbar[hidden],#mobile-menu-panel[hidden]{display:none}
.mobile-toolbar button:disabled{opacity:.35}
.mobile-game .hud .mission{margin-right:66px}
.mobile-game .touch{display:flex;position:fixed;z-index:10;bottom:max(9px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));justify-content:space-between;align-items:flex-end;pointer-events:none;margin:0;gap:0;flex-wrap:nowrap;--key:clamp(48px,15dvh,68px)}
.touch-actions{display:grid;gap:8px;pointer-events:none}
.touch-movement{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(9px,env(safe-area-inset-bottom));width:calc(50vw - max(8px,env(safe-area-inset-left)) - 20px);height:60dvh;max-height:calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));pointer-events:auto;touch-action:none}
.touch-movement .virtual-stick{position:absolute;left:24px;bottom:12px;pointer-events:none;opacity:.24}
.touch-movement.stick-active .virtual-stick{bottom:auto;opacity:1}
.stick-hint{position:absolute;bottom:0;left:20px;font-size:9px;letter-spacing:.5px;color:#bdd4d699;pointer-events:none}
.stick-active .stick-hint{opacity:0}
.mobile-game .touch-actions{margin-left:auto}
/* A usable world door takes precedence over the floating movement zone. */
.mobile-game .mobile-door:not([hidden]){z-index:11}
.virtual-stick{width:calc(var(--key)*2 + 8px);height:calc(var(--key)*2 + 8px);border-radius:50%;border:1px solid #adcbd277;background:radial-gradient(circle,#29495777,#12242f99);position:relative;pointer-events:auto;touch-action:none;box-shadow:inset 0 0 0 10px #95bfcd0c,0 3px 15px #0004}
.stick-knob{position:absolute;inset:25%;border-radius:50%;background:linear-gradient(145deg,#86a2a5cc,#2c475cdd);border:1px solid #c0d9d999;box-shadow:0 4px 10px #0006;pointer-events:none}
.stick-axis{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:8px;color:#bdd4d688;font-size:13px;pointer-events:none}
.stick-down{position:absolute;bottom:7px;left:0;right:0;text-align:center;color:#bdd4d6aa;font-size:9px;pointer-events:none}
.virtual-stick.held{border-color:#eec795}.virtual-stick.held .stick-knob{background:linear-gradient(145deg,#d1bea4ee,#577b8cee)}
.touch-actions{grid-template-columns:repeat(2,var(--key));grid-template-rows:repeat(2,var(--key))}
.mobile-game .touch button{pointer-events:auto;touch-action:none;width:var(--key);height:var(--key);padding:0;border-radius:20px;border:1px solid #bdd3d880;background:#132532bd;color:#eef2ea;font-size:13px;font-weight:700;box-shadow:0 3px 12px #0005,inset 0 1px #ffffff18;backdrop-filter:blur(3px)}
.mobile-game .touch .touch-crouch{font-size:12px;width:calc(var(--key)*.85);height:calc(var(--key)*.85)}
.mobile-game .touch .touch-punch,.mobile-game .touch .touch-kick{border-color:#e9bc83aa;background:#423327c9;color:#ffe0b6}
.mobile-game .touch .touch-jump{border-color:#9fcacd;background:#244450d9;color:#d8f8f5}
.mobile-game .touch .touch-dash{font-size:11px;background:#192f3abf;color:#a8d0d5}
.mobile-game .touch button.held{background:#d8b68eee;color:#14202a;transform:translateY(2px);border-color:#ffe2ab}
.mobile-game .mobile-resume{display:block;position:fixed;z-index:15;left:50%;top:64%;transform:translate(-50%,-50%);background:#efc597;color:#172531;padding:14px 26px;border:0;border-radius:5px;font-size:14px;font-weight:700;min-height:48px}
.mobile-game .mobile-audio{display:flex;position:fixed;z-index:45;inset:20% 25%;padding:20px;gap:18px;flex-direction:column;background:#101f2bf5;border:1px solid #b79a6a;border-radius:8px;overflow:auto}
.mobile-audio button{min-height:40px;border:1px solid #819294;background:#273c49;color:#f4ddba}.mobile-audio .audio-volume{display:flex;align-items:center;gap:12px;font-size:13px}.mobile-audio input{flex:1;min-width:0;min-height:30px;accent-color:#e4b584}
.mobile-game .touch[hidden],.mobile-game .mobile-resume[hidden],.mobile-game .mobile-audio[hidden]{display:none}
.mobile-game .hud{inset:10px 14px auto}.mobile-game .hud small{font-size:7px}.mobile-game .health{width:105px;margin:6px 0}.mobile-game #level-info{font-size:8px;margin-top:4px}.mobile-game .mission strong{font-size:20px}.mobile-game .hud #status{font-size:7px}
.mobile-game #overlay{top:8%;left:8%;right:6%}.mobile-game #overlay h1{font-size:clamp(48px,19dvh,88px);margin:12px 0}.mobile-game #overlay .tag{font-size:8px}.mobile-game #overlay p{margin:8px 0;font-size:10px}.mobile-game #overlay button{min-height:44px;padding:10px 16px;margin-top:12px}.mobile-game #overlay>small{display:block;font-size:7px;letter-spacing:0;margin-top:8px}.mobile-game #overlay>small:first-of-type{display:none}
.mobile-game #message{overflow:auto;padding:18px}.mobile-game #message h2{font-size:clamp(18px,5dvh,28px);margin:12px 0}.mobile-game #message p{font-size:11px}.mobile-game #message button{margin:12px auto;min-height:44px;padding:10px 18px}
.mobile-game #stats-panel{inset:3% 12%;padding:12px 20px;z-index:30}.mobile-game #stats-panel h2{font-size:18px;margin:4px 0}.mobile-game .stat-row{padding:5px 0}.mobile-game #stats-panel button{min-height:40px}.mobile-game #stats-panel p{margin:6px 0;font-size:10px}
.mobile-game .story-top{inset:2% 3% auto}.mobile-game .story-top>span{font-size:9px;letter-spacing:1px}.mobile-game .story-top button,.mobile-game .story-bottom button{min-height:40px;min-width:84px;font-size:11px;padding:6px 10px}.mobile-game .story-fiction{top:17%;font-size:7px}.mobile-game .story-dialogue{inset:auto 3% 3%;padding:8px 12px;min-height:30%}.mobile-game #story-text{font-size:12px;line-height:1.5;min-height:3em;margin:5px 0}.mobile-game .story-label strong{font-size:11px}.mobile-game .story-bottom>span{font-size:0}.mobile-game .story-bottom>span:after{content:'버튼을 눌러 진행';font-size:9px}.mobile-game .story-portrait{bottom:40%;height:32%;width:24%}
@media(orientation:portrait){.mobile-game .mobile-rotate{display:flex;position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at center,#243440,#0c1218);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}.mobile-rotate h2{font-size:24px;color:#f3c799}.mobile-rotate p{font-size:13px;line-height:1.9;color:#acbec7}.rotate-device{font-size:76px;color:#b8d5d5}.mobile-game .mobile-toolbar{visibility:hidden}}
@media(max-height:330px) and (orientation:landscape){.mobile-game .story-fiction{display:none}.mobile-game #overlay h1{font-size:44px}.mobile-game .story-dialogue{padding:5px 10px}.mobile-game #story-text{font-size:11px}.mobile-game .story-portrait{bottom:46%;height:28%}}
