.touch-device { --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px); }
.touch-device body { overscroll-behavior:none; }
#connection-lost { position:fixed;inset:0;z-index:1100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:25px;background:#10212bef;color:#f0dfbb;text-align:center;font:17px/1.5 Georgia; }
#connection-lost button { min-height:48px;padding:12px 24px;border:1px solid #d4b878;border-radius:8px;background:#dec17e;color:#17232a;font:17px Georgia;cursor:pointer; }
.touch-device #app canvas { touch-action:none; }
#mobile-controls { position:fixed;inset:0;z-index:28;pointer-events:none;color:#f4e4bd;font-family:Georgia,serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; }
#mobile-controls button { pointer-events:auto;touch-action:none;cursor:pointer;color:#f3deb0;border:1px solid #baa16c99;background:linear-gradient(#3c413bea,#172629ed);box-shadow:inset 0 1px #eee3,0 3px 10px #0006;font:600 13px Georgia,serif;text-shadow:0 1px 3px #000; }
#mobile-controls button.pressed,#mobile-controls button:active,#mobile-controls button[aria-pressed=true] { background:linear-gradient(#b89854,#62512c);border-color:#ffdfa0; }
.mobile-top { position:absolute;top:calc(10px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));display:flex;justify-content:space-between;align-items:start;gap:10px; }
#mobile-port { padding:9px 13px;border-left:2px solid #cdb275;background:linear-gradient(90deg,#152329cc,transparent);font-variant:small-caps;font-size:18px;text-shadow:0 2px 4px #000; }
.mobile-top>div { display:flex;gap:8px; }
#mobile-inventory { display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:8px;min-height:48px; }
#mobile-inventory img { width:40px;height:36px;object-fit:contain; }
#mobile-menu { width:48px;height:48px;border-radius:8px;font-size:23px!important; }
#mobile-look-hint { position:absolute;top:calc(71px + var(--safe-top));left:50%;transform:translateX(-50%);font:12px system-ui;white-space:nowrap;text-shadow:0 1px 5px #000;background:#142329aa;padding:6px 12px;border-radius:20px; }
#mobile-pad { position:absolute;left:calc(22px + var(--safe-left));bottom:calc(24px + var(--safe-bottom));width:162px;height:162px;pointer-events:auto;touch-action:none; }
.pad-base { position:absolute;inset:-9px;border-radius:26px;background:#1120222e;border:1px solid #e7ce8c20;transform:rotate(45deg) scale(.79); }
#mobile-pad button,.pad-center { position:absolute;display:grid;place-items:center;width:54px;height:54px;font-size:20px;border-radius:8px; }
.pad-up { left:54px;top:0; }.pad-left { left:0;top:54px; }.pad-right { left:108px;top:54px; }.pad-down { left:54px;top:108px; }
.pad-center { left:54px;top:54px;color:#dec48ba6;font-size:28px; }
.mobile-actions { position:absolute;right:calc(24px + var(--safe-right));bottom:calc(30px + var(--safe-bottom));display:flex;align-items:end;gap:16px; }
#mobile-run { width:62px;height:52px;border-radius:12px; }
#mobile-jump { width:78px;height:78px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0; }
#mobile-jump span { font:32px Georgia;line-height:34px; }
.controls-paused #mobile-pad,.controls-paused .mobile-actions,.controls-paused #mobile-look-hint { visibility:hidden;pointer-events:none; }
.controls-paused #mobile-pad button,.controls-paused .mobile-actions button { pointer-events:none!important; }
#mobile-settings { pointer-events:auto;position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 30px));max-height:calc(100dvh - 30px - var(--safe-top) - var(--safe-bottom));overflow:auto;border:1px solid #b99c61;border-radius:14px;padding:22px;color:#f0dfbb;background:#13252af5;box-shadow:0 15px 70px #0009;font:15px/1.5 Georgia; }
#mobile-settings::backdrop { background:#020d15a8; }
#mobile-settings header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
#mobile-settings h2 { font-size:23px; }
#mobile-settings label { display:block;margin:16px 0; }
#mobile-settings button { min-height:44px;padding:8px 14px;border-radius:7px; }
#mobile-settings>button { display:block;width:100%;margin-top:10px; }
#mobile-settings select,#mobile-settings input { display:block;width:100%;margin-top:6px;min-height:38px;accent-color:#cfb16f; }
#mobile-settings select { background:#081b21;color:#f4dfb6;border:1px solid #967e50;border-radius:5px;padding:8px;font:16px Georgia; }
#mobile-settings .mobile-note { color:#b8c5bf;margin-top:16px;font:12px/1.5 system-ui; }
.touch-device #hint,.touch-device #cross,.touch-device #chesttray,.touch-device #island-switcher { display:none!important; }
.touch-device #diagnostics { display:none;top:calc(70px + var(--safe-top));max-width:calc(100vw - 24px);flex-wrap:wrap; }
.touch-device.mobile-diagnostics #diagnostics { display:flex; }
.touch-device #hud { top:calc(132px + var(--safe-top));max-height:45dvh;overflow:auto; }
.touch-device #session-screen { overflow-y:auto;padding:calc(18px + var(--safe-top)) 12px calc(18px + var(--safe-bottom)); }
.touch-device #session-card { width:min(430px,100%);padding:24px; }
.touch-device #session-card h1 { font-size:27px; }
.touch-device #session-card input,.touch-device #session-card select { font-size:16px;min-height:46px; }
.touch-device #npc-talk { bottom:calc(130px + var(--safe-bottom));max-width:calc(100vw - 40px);font-size:16px;padding:12px 18px;min-height:46px; }
.touch-device #npc-shop { top:calc(70px + var(--safe-top));bottom:calc(16px + var(--safe-bottom));right:calc(16px + var(--safe-right));width:min(380px,calc(100vw - 32px));max-width:none;overflow-y:auto;padding:20px;font-size:16px; }
.touch-device #chestpanel { --chest-w:min(460px,calc(100vw - 24px));right:calc(12px + var(--safe-right));top:calc(72px + var(--safe-top));bottom:calc(12px + var(--safe-bottom));width:var(--chest-w);height:auto;max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));border:1px solid #a99158;border-radius:12px;background:linear-gradient(130deg,#343b2cf5,#17241df7);box-shadow:0 10px 60px #0009;overflow:hidden; }
.touch-device #chestpanel>.chest-art { display:none; }
.touch-device #chestpanel:before { inset:126px 12px 65px 12px;opacity:.65; }
.touch-device .chest-heading { position:relative;left:0;width:100%;height:52px; }
.touch-device .chest-heading img { object-fit:fill;opacity:.7; }
.touch-device .chest-heading h2 { font-size:22px;line-height:52px; }
.touch-device .chest-close { top:0;right:0;width:48px;height:48px;font-size:30px;z-index:5;background:#14231da8;border-radius:0 10px 0 10px; }
.touch-device .chest-tabs { left:0;top:54px;width:100%;padding:4px 8px;flex-direction:row;gap:5px;overflow-x:auto;scrollbar-width:thin; }
.touch-device .chest-tabs button { height:54px;min-width:49px;flex:1;padding:7px;border-radius:7px; }
.touch-device .chest-tabs button[aria-pressed=true] { transform:none; }
.touch-device .chest-tabs button span { display:none!important; }
.touch-device #chestpanel .chest-content { inset:120px 15px 73px; }
.touch-device .chest-summary { font-size:16px;margin-bottom:14px; }
.touch-device .chest-grid { gap:5px; }
.touch-device .chest-slot { font-size:12px;min-height:35px; }
.touch-device .chest-empty { font-size:14px;margin:14px auto; }
.touch-device .chest-info { left:15px;right:15px;bottom:43px;font-size:13px; }
.touch-device .chest-gold { bottom:15px;right:20px;font-size:19px; }
@media (orientation:landscape) and (max-height:550px) {
  #mobile-pad { width:138px;height:138px;bottom:calc(16px + var(--safe-bottom)); }
  #mobile-pad button,.pad-center { width:46px;height:46px; }.pad-up{left:46px}.pad-left{top:46px}.pad-right{left:92px;top:46px}.pad-down{left:46px;top:92px}.pad-center{left:46px;top:46px}
  .mobile-actions { bottom:calc(18px + var(--safe-bottom)); }#mobile-jump{width:70px;height:70px}
  .touch-device #npc-talk { bottom:calc(20px + var(--safe-bottom));max-width:calc(100vw - 390px);font-size:14px; }
  .touch-device #chestpanel { top:calc(8px + var(--safe-top));width:min(460px,60vw); }
  .touch-device .chest-heading { height:44px; }.touch-device .chest-heading h2{line-height:44px;font-size:20px}
  .touch-device .chest-tabs{top:45px}.touch-device .chest-tabs button{height:45px;min-width:43px}
  .touch-device #chestpanel .chest-content{top:100px}.touch-device #chestpanel:before{top:104px}
  .touch-device #session-card { padding:18px 24px; }.touch-device #session-card h1{font-size:24px}
}