/* PWA03 isolated UI layer. Context is supplied by the integration owner. */
#landscape-notice,#mobile-version{display:none}
html.mobile #landscape-notice{display:block;margin:0;border:2px solid #22e58b;border-radius:10px;background:#12342d;padding:12px;color:#fff;font-size:14px;line-height:1.45;text-align:center}
html.mobile #landscape-notice strong{color:#6effb8;font-size:18px}
html.mobile #mobile-version{display:block;margin:0;text-align:center;font-size:12px;color:#a8b5cc}
html.mobile #game{height:100dvh}
html.mobile button{touch-action:manipulation;min-height:44px}
html.mobile .overlay{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
html.mobile .panel{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:18px 16px;gap:10px}
html.mobile .panel.wide{width:min(96vw,640px)}
html.mobile .panel h1{font-size:clamp(22px,5vw,32px)}
html.mobile .hud-top{top:calc(6px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));gap:5px}
html.mobile .bar{width:100px;flex-shrink:0;height:24px}
html.mobile .chip{font-size:12px;padding:3px 7px}
html.mobile .hbtn,html.mobile #btn-pause{width:44px;height:44px;min-height:44px}
html.mobile #weapon-icon{width:40px;height:30px;flex-basis:40px}
html.mobile #objective{top:calc(var(--hud-height,44px) + 12px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));font-size:12px;max-width:calc(100vw - 130px - env(safe-area-inset-left));padding:5px 7px;max-height:76px;overflow:auto;pointer-events:auto;touch-action:pan-y}
html.mobile #minimap{top:calc(var(--hud-height,44px) + 12px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));width:105px;height:75px}
html.mobile #toast{top:calc(var(--hud-height,44px) + 94px + env(safe-area-inset-top));max-width:90vw;white-space:normal;text-align:center;font-size:13px;padding:6px 10px}
html.mobile #joy,html.mobile #aim-pad{pointer-events:auto;touch-action:none;position:absolute;width:112px;height:112px;border-radius:50%;border:2px solid #8b5cf6a0;background:#141824a0;bottom:calc(18px + env(safe-area-inset-bottom))}
html.mobile #joy{left:calc(18px + env(safe-area-inset-left))}
html.mobile #aim-pad{right:calc(18px + env(safe-area-inset-right));border-color:#22e58ba0}
html.mobile #joy-stick,html.mobile #aim-stick{position:absolute;left:29px;top:29px;width:50px;height:50px;border-radius:50%;background:#22e58b80;pointer-events:none}
html.mobile #aim-stick{background:#8b5cf680}
html.mobile .pad-label{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;pointer-events:none;text-shadow:0 1px 3px #000}
html.mobile #touch :where(button){width:48px;height:48px;font-size:12px;touch-action:none;bottom:calc(20px + env(safe-area-inset-bottom))}
html.mobile #t-fire{right:calc(140px + env(safe-area-inset-right));font-size:13px;width:52px;height:52px}
html.mobile #t-run{left:calc(140px + env(safe-area-inset-left));right:auto;bottom:calc(20px + env(safe-area-inset-bottom))}
html.mobile #t-dodge{left:calc(140px + env(safe-area-inset-left));right:auto;bottom:calc(76px + env(safe-area-inset-bottom))}
html.mobile #t-interact{right:calc(140px + env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));width:52px;height:52px}
html.mobile #t-reload{right:calc(18px + env(safe-area-inset-right));bottom:calc(142px + env(safe-area-inset-bottom))}
html.mobile #t-weapon{right:calc(74px + env(safe-area-inset-right));bottom:calc(142px + env(safe-area-inset-bottom))}
html.mobile #t-heal{left:calc(18px + env(safe-area-inset-left));bottom:calc(142px + env(safe-area-inset-bottom))}
html.mobile #t-brake{right:calc(140px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom))}
html.mobile #prompt{bottom:calc(210px + env(safe-area-inset-bottom));max-width:90vw;font-size:12px;text-align:center;padding:8px 12px;min-height:44px;color:#fff;pointer-events:auto;touch-action:manipulation}
html.mobile #dialog{bottom:calc(8px + env(safe-area-inset-bottom));max-height:calc(100dvh - 110px);overflow:auto;touch-action:pan-y;font-size:14px}
html.mobile #dialog-portrait{width:56px;height:56px;margin-right:8px}
html.mobile.driving #aim-pad,html.mobile.driving #t-fire,html.mobile.driving #t-run,html.mobile.driving #t-heal,html.mobile.driving #t-reload,html.mobile.driving #t-weapon{display:none}
html:not(.driving) #t-brake{display:none}
html.mobile #touch.in-dialog{display:none!important}
html.mobile #info-close,html.mobile #shop-close{position:sticky;bottom:0;background:#1c2133;z-index:1}
html.mobile .row{flex-wrap:wrap;gap:6px}
html.mobile .row .r{max-width:100%;flex-wrap:wrap}
html.mobile #bigmap{max-height:45dvh}
@media (max-width:420px){
 html.mobile #joy,html.mobile #aim-pad{width:90px;height:90px}
 html.mobile #joy{left:calc(10px + env(safe-area-inset-left))}
 html.mobile #aim-pad{right:calc(10px + env(safe-area-inset-right))}
 html.mobile #joy-stick,html.mobile #aim-stick{left:20px;top:20px}
 html.mobile #t-run,html.mobile #t-dodge{left:calc(108px + env(safe-area-inset-left))}
 html.mobile #t-fire,html.mobile #t-interact,html.mobile #t-brake{right:calc(108px + env(safe-area-inset-right));width:48px;height:48px}
 html.mobile #t-reload{right:calc(10px + env(safe-area-inset-right))}
 html.mobile #t-weapon{right:calc(64px + env(safe-area-inset-right))}
 html.mobile #t-heal{left:calc(10px + env(safe-area-inset-left))}
}
@media (max-height:480px) and (orientation:landscape){
 html.mobile #objective{max-width:48vw;max-height:52px}
 html.mobile #minimap{width:84px;height:60px}
 html.mobile #joy,html.mobile #aim-pad{bottom:calc(10px + env(safe-area-inset-bottom));width:100px;height:100px}
 html.mobile #joy-stick,html.mobile #aim-stick{left:23px;top:23px}
 html.mobile #touch :where(button){bottom:calc(12px + env(safe-area-inset-bottom))}
 html.mobile #t-dodge{bottom:calc(70px + env(safe-area-inset-bottom))}
 html.mobile #t-interact{bottom:calc(70px + env(safe-area-inset-bottom))}
 html.mobile #t-heal,html.mobile #t-reload,html.mobile #t-weapon{bottom:calc(126px + env(safe-area-inset-bottom))}
 html.mobile #prompt{bottom:calc(180px + env(safe-area-inset-bottom))}
 html.mobile #toast{top:calc(var(--hud-height,44px) + 76px + env(safe-area-inset-top))}
}
#pwa-state{font-size:12px;color:var(--mut);text-align:center;line-height:1.4}
#install-help{color:var(--tx);margin:auto;z-index:50;border:1px solid var(--v)}
#install-help:not([open]){display:none}
#install-help::backdrop{background:#000b}
#install-help ol{padding-left:20px;font-size:14px;line-height:1.6;margin:0}
.mobile-hint{font-size:12px;color:var(--mut);line-height:1.5}

/* Context visibility outranks legacy driving selectors. */
html.mobile #touch [hidden]{display:none!important}
html.mobile #touch:not([data-state=playing]){pointer-events:none}
html.mobile #touch[data-state=playing]{pointer-events:none}
html.mobile #touch button,html.mobile #touch #joy,html.mobile #touch #aim-pad{pointer-events:auto}
html.mobile #t-rise{right:calc(18px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom))}
html.mobile #t-lower{right:calc(74px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom))}
html.mobile #t-bail{right:calc(18px + env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom))}
html.mobile #touch button{min-width:44px;min-height:44px}
@media(max-width:420px){html.mobile #t-rise,html.mobile #t-bail{right:calc(10px + env(safe-area-inset-right))}html.mobile #t-lower{right:calc(64px + env(safe-area-inset-right))}}