:root{--ui-top:max(env(safe-area-inset-top,0px),var(--mini-safe-top,0px));--ui-bottom:max(env(safe-area-inset-bottom,0px),var(--mini-safe-bottom,0px));--ui-left:max(env(safe-area-inset-left,0px),var(--mini-safe-left,0px));--ui-right:max(env(safe-area-inset-right,0px),var(--mini-safe-right,0px))}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades){box-sizing:border-box;position:fixed;inset:calc(var(--ui-top) + 10px) calc(var(--ui-right) + 10px) calc(var(--ui-bottom) + 10px) calc(var(--ui-left) + 10px);margin:auto;width:min(540px,calc(100% - var(--ui-left) - var(--ui-right) - 20px));max-width:none;height:fit-content;max-height:calc(var(--app-height,100dvh) - var(--ui-top) - var(--ui-bottom) - 20px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-padding:70px 0 20px;padding:16px;border-radius:20px;font-size:13px;line-height:1.45}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) .menu-heading,html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) .supply-heading{position:sticky;top:-16px;z-index:5;background:#111e1d;padding:12px 0;margin:0 0 12px;gap:12px}html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) h2{font-size:22px;line-height:1.2;margin:0;min-width:0}html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) button,html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) a.menu-secondary{min-height:44px;touch-action:manipulation}html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) .menu-heading button,html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) .supply-heading button{flex-shrink:0;min-width:44px}html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) p{overflow-wrap:anywhere}html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :focus-visible{outline:2px solid #ceff49;outline-offset:3px}
#lairUpgrades .supply-card{grid-template-columns:1fr;gap:6px;padding:14px;margin:10px 0;background:linear-gradient(120deg,#21352c,#142422)}#lairUpgrades .supply-card b{font-size:17px}#lairUpgrades .supply-card small{font-size:12px}#lairUpgrades .supply-card span{font-size:13px}#lairUpgrades .supply-card button{width:100%;margin-top:4px}#lairUpgrades [data-balance],#supplies [data-balance]{position:sticky;top:48px;z-index:3;background:#23362f;border:1px solid #61765a66;border-radius:12px;padding:10px 12px;font-weight:800;color:#ceff49}.upgrade-steps{display:flex;gap:5px;margin:5px 0}.upgrade-steps i{height:6px;flex:1;border-radius:4px;background:#405048}.upgrade-steps i.earned{background:#ceff49}#lairUpgrades>p:first-of-type{font-size:12px;color:#aebeb0}#lairUpgrades [data-refresh],#supplies [data-refresh]{background:transparent;font-size:11px}
.home-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:none;margin-top:10px}.home-sections .arsenal-home{font-size:11px;min-height:54px;margin:0;padding:9px 5px;text-align:center;line-height:1.3;border-radius:12px}.home-sections #homeWeapon{font-size:10px}.menu-links button{min-height:48px}#fullscreenQuick{bottom:calc(var(--ui-bottom) + 8px);right:calc(var(--ui-right) + 8px)}
@media(max-height:450px){html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades){padding:12px}html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) .menu-heading,html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) .supply-heading{top:-12px}#lairUpgrades [data-branches]{display:grid;grid-template-columns:1fr 1fr;gap:8px}#lairUpgrades .supply-card{margin:0;padding:10px}}
/* One header convention: navigation left, title grows, close at the right edge. */
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :is(.menu-heading,.supply-heading){display:flex;align-items:center;width:100%;box-sizing:border-box}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :is(.menu-heading,.supply-heading) h2{flex:1 1 auto;min-width:0;margin:0}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :is(#menuClose,#shareClose,#challengeClose,[data-close]){order:3;margin-left:auto;flex:0 0 44px;width:44px;height:44px}
html body #menuBack{order:-1;margin-right:0;flex:0 0 44px}html body #menuBack[hidden]{display:none!important}
#appMenu .menu-links .menu-label{flex:1;min-width:0;color:#e8eedf;overflow-wrap:normal;word-break:normal}#appMenu .menu-links .menu-arrow{flex:none}
/* Shared button system: one shape/type scale; colour communicates action. */
:root{--button-radius:12px;--button-bg:#21372f;--button-border:#506b5c;--button-ink:#edf5e8;--button-accent:#ceff49}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :is(button,a.menu-secondary,a.menu-primary),html body :is(.home-sections button,.home-play,footer button,#overlay button){box-sizing:border-box;min-height:44px;border:1px solid var(--button-border);border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-ink);padding:11px 14px;font:700 13px/1.3 Onest,sans-serif;letter-spacing:0;text-decoration:none;box-shadow:none;touch-action:manipulation;cursor:pointer}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :is(.menu-primary,.supply-start,[data-return]),html body :is(.home-play,#resume,#restart){background:var(--button-accent);border-color:var(--button-accent);color:#142019;font-weight:900}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) button[aria-pressed=true]{background:#30452c;color:var(--button-accent);border-color:var(--button-accent)}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) button:disabled{opacity:.45;cursor:default}
html body :is(dialog,#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :is(.menu-heading,.supply-heading) button{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:24px;border-radius:var(--button-radius)}
html body .home-sections button{padding:10px 6px;font-size:11px;min-height:52px}html body .home-play{font-size:15px;min-height:52px}#supplies [data-inventory-note]{font-size:12px;color:#aebeb0}#supplies .supply-card span{font-weight:800;font-size:13px;color:#ceff49}
/* Primary actions retain their original visual priority over shared defaults. */
html body :is(#homePlay,#resume,#reset,#pauseRestart,#challengeResultButton,#shareResult),html body :is(#appMenu,#recordShare,#challengeDialog,#supplies,#lairUpgrades) :is(button.menu-primary,button.supply-start,button[data-return]){background:#ceff49;border-color:#ceff49;color:#142019;font-weight:900;border-radius:16px;box-shadow:0 5px 20px #9fc23918}
html body :is(#homePlay,#resume,#challengeResultButton,#shareResult),html body #supplies button.supply-start{min-height:56px;padding:16px 20px;font-size:16px;line-height:1.25}
html body :is(#reset,#pauseRestart){min-height:48px;font-size:14px}
html body :is(#appMenu,#recordShare,#challengeDialog,#lairUpgrades) button.menu-primary,html body #lairUpgrades button[data-return]{min-height:50px;padding:14px 16px;font-size:14px}

.home-sections{grid-template-columns:repeat(2,minmax(0,1fr))}#homeWeapon[hidden]{display:none!important}#supplies [data-weapons]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#supplies [data-weapons][hidden]{display:none}#supplies [data-back]{order:-1;margin-right:0;flex:0 0 44px}#supplies [data-stock-title]{font-size:15px;margin:18px 0 8px}#supplies .supply-modes button{min-height:64px;font-size:14px}#supplies [data-weapons] button{min-width:0}
/* Keep the home CTA above shared rules, including :is(#overlay button) specificity. */
html body #home #homePlay{display:flex;align-items:center;justify-content:space-between;flex:none;width:100%;min-height:60px;padding:18px 20px;border:0;border-radius:14px;background:#ceff49;color:#142016;font:900 16px/1.25 Onest,sans-serif;box-shadow:0 8px 30px #9fc23913}
html body #home #homePlay>span{font-size:25px;line-height:1}
@media(orientation:landscape) and (max-height:600px){html body #home #homePlay{min-height:48px;padding:12px 16px;font-size:14px}}
#appMenu .arsenal-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}#appMenu .arsenal-tabs button{width:100%}#appMenu .arsenal-start{width:100%;min-height:56px;font-size:16px;margin-top:16px}#appMenu .supply-card{grid-template-columns:1fr 1fr}#appMenu .supply-card span{color:#ceff49;font-weight:800}#supplies [data-start][hidden]{display:none!important}

:is(#appMenu,#supplies) .consumable-preview{grid-column:1/-1;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;max-height:190px;border-radius:12px;background:radial-gradient(ellipse at 50% 70%,#ceff4925,transparent 67%),linear-gradient(140deg,#253a33,#101c1c);overflow:hidden;margin-bottom:4px}:is(#appMenu,#supplies) .consumable-preview img{display:block;object-fit:contain;width:100%;height:100%;max-height:190px;filter:drop-shadow(0 6px 8px #0006)}@media(max-width:350px){:is(#appMenu,#supplies) .consumable-preview{max-height:145px}:is(#appMenu,#supplies) .consumable-preview img{max-height:145px}}
/* Compact consumables: square artwork left, all content/actions right. */
:is(#appMenu,#supplies) .supply-card:has(.consumable-preview){display:grid;grid-template-columns:80px minmax(0,1fr);gap:6px 12px;padding:12px;align-items:start}
:is(#appMenu,#supplies) .supply-card:has(.consumable-preview)>:not(.consumable-preview){grid-column:2;min-width:0}
:is(#appMenu,#supplies) .supply-card .consumable-preview{grid-column:1;grid-row:1/span 5;aspect-ratio:1;width:80px;height:80px;max-height:none;margin:0;border-radius:10px;align-self:start}
:is(#appMenu,#supplies) .supply-card .consumable-preview img{width:100%;height:100%;max-height:none;filter:drop-shadow(0 3px 4px #0006)}
:is(#appMenu,#supplies) .supply-card:has(.consumable-preview)>b{font-size:14px;line-height:1.3}
:is(#appMenu,#supplies) .supply-card:has(.consumable-preview)>small{font-size:11px;line-height:1.4}
:is(#appMenu,#supplies) .supply-card:has(.consumable-preview)>button{width:100%;margin:2px 0 0}
@media(max-width:350px){:is(#appMenu,#supplies) .supply-card:has(.consumable-preview){grid-template-columns:60px minmax(0,1fr);gap:6px 9px;padding:10px}:is(#appMenu,#supplies) .supply-card .consumable-preview{width:60px;height:60px}}

#appMenu .menu-links button:has(.menu-icon){display:flex;flex-direction:row;align-items:center;gap:12px}#appMenu .menu-links .menu-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center}#appMenu .menu-links .menu-icon-upgrades{background:linear-gradient(145deg,#7c6b224d,#34301e)}#appMenu .menu-links .menu-icon-shop{background:linear-gradient(145deg,#347c584d,#1e342b)}#appMenu .menu-links .menu-label{display:block;white-space:normal}#appMenu .menu-links .menu-arrow{margin-left:auto}
html body #appMenu .menu-heading:has([data-arsenal-start]:not([hidden])){display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;gap:10px;align-items:center}
html body #appMenu .menu-heading:has([data-arsenal-start]:not([hidden])) #menuBack{grid-column:1;grid-row:1}html body #appMenu .menu-heading:has([data-arsenal-start]:not([hidden])) h2{grid-column:2;grid-row:1}html body #appMenu .menu-heading:has([data-arsenal-start]:not([hidden])) #menuClose{grid-column:4;grid-row:1;margin-left:0}
html body #appMenu .menu-heading button[data-arsenal-start]{grid-column:3;grid-row:1;display:flex;width:auto;min-width:0;height:auto;min-height:44px;padding:10px 12px;margin:0;border-radius:12px;border:1px solid #ceff49;background:#ceff49;color:#142016;font:900 13px/1.2 Onest,sans-serif;white-space:nowrap;order:0}
html body #appMenu [data-arsenal-start][hidden]{display:none!important}
@media(max-width:440px){html body #appMenu .menu-heading:has([data-arsenal-start]:not([hidden])){grid-template-columns:44px minmax(0,1fr) 44px}html body #appMenu .menu-heading:has([data-arsenal-start]:not([hidden])) #menuClose{grid-column:3}html body #appMenu .menu-heading button[data-arsenal-start]{grid-column:1/-1;grid-row:2;width:100%;min-height:46px;font-size:14px}}
/* Results get their own safe viewport layout, independent of arena/HUD height. */
#resultHome{display:none}
html body #overlay[data-result=true]{position:fixed;inset:calc(var(--ui-top) + 8px) calc(var(--ui-right) + 8px) calc(var(--ui-bottom) + 8px) calc(var(--ui-left) + 8px);z-index:12;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:10px;padding:24px clamp(16px,6vw,36px);overflow-y:auto;overscroll-behavior:contain;border:1px solid #61765a55;border-radius:20px;background:linear-gradient(145deg,#101c1def,#111e1df5);text-align:center;scroll-padding:16px}
html body #overlay[data-result=true]>:not([hidden]){flex-shrink:0;max-width:540px;width:100%;margin:0 auto}
html body #overlay[data-result=true] #overlayTitle{font-size:clamp(26px,6vw,38px);line-height:1.05;letter-spacing:-1px;margin:0 auto 4px}
html body #overlay[data-result=true] #overlayText{font-size:11px;line-height:1.45;color:#a2b5ad}
html body #overlay[data-result=true] #resume{min-height:52px;padding:14px 18px;border:0;border-radius:14px;background:#ceff49;color:#142016;font:900 15px/1.25 Onest,sans-serif;box-shadow:0 6px 22px #9fc23918}
html body #overlay[data-result=true] #resultHome{display:block;min-height:44px;padding:10px 16px;border:1px solid #506b5c;border-radius:12px;background:#21372f;color:#edf5e8;font:700 13px/1.3 Onest,sans-serif}
html body #overlay[data-result=true] #resultReward{padding:12px 14px;margin:0 auto;text-align:left}
html body #overlay[data-result=true] #resultReward strong{font-size:19px}html body #overlay[data-result=true] #resultReward small{font-size:11px}
html body #overlay[data-result=true] #pauseLoadout{display:block;font-size:10px;line-height:1.4;color:#8fa59a}
html body #overlay[data-result=true] #pauseActions{display:none!important}
html body #overlay[data-result=true] :is(#challengeResultButton,#shareResult){min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid #506b5c;background:#21372f;color:#edf5e8;font:700 12px/1.3 Onest,sans-serif}
@media(orientation:landscape) and (min-width:600px){html body #overlay[data-result=true]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:min-content;align-content:start;gap:8px 20px;padding:14px clamp(18px,5vw,60px)}html body #overlay[data-result=true] #overlayTitle{grid-column:1/-1;font-size:26px}html body #overlay[data-result=true] #overlayText{grid-column:1/-1;font-size:10px}html body #overlay[data-result=true] #resume{grid-column:1;grid-row:3;min-height:46px;font-size:13px;padding:10px}html body #overlay[data-result=true] #resultHome{grid-column:2;grid-row:3;min-height:46px}html body #overlay[data-result=true] #resultReward{grid-column:1;grid-row:4/span 5}html body #overlay[data-result=true] #pauseLoadout{grid-column:2;grid-row:4;font-size:9px}html body #overlay[data-result=true] :is(#challengeResult,#challengeRetry,#challengeResultButton,#shareResult){grid-column:2}html body #overlay[data-result=true] :is(#challengeResultButton,#shareResult){font-size:11px;padding:8px 10px}}
html body #overlay[hidden]{display:none!important}
@media(orientation:portrait){html body #overlay[data-result=true]{justify-content:safe center}}
#supplies [data-shop-tabs]{margin:10px 0 14px}#supplies [data-shop-tabs][hidden]{display:none!important}#supplies [data-shop-tabs] button{font-size:14px;min-height:46px}#supplies [data-balance]{position:static}
:is(#appMenu,#supplies) .consumable-preview img{visibility:visible;opacity:1;min-width:0;min-height:0;flex:none}
html body dialog#purchaseConfirm{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - max(16px,var(--ui-left,0px)) - max(16px,var(--ui-right,0px))));max-height:calc(100dvh - var(--ui-top,0px) - var(--ui-bottom,0px) - 24px);padding:20px;border:1px solid #657c56;border-radius:20px;background:#12221d;color:#f1f4e7;overflow-y:auto;overscroll-behavior:contain;font:14px/1.5 Onest,sans-serif}
html body dialog#purchaseConfirm::backdrop{background:#03100bbd;backdrop-filter:blur(4px)}
.purchase-confirm-heading{display:flex;align-items:center;gap:12px}.purchase-confirm-heading h2{flex:1;margin:0;font-size:21px}.purchase-confirm-heading [data-close]{margin-left:auto;width:44px;flex:none;font-size:24px}
.purchase-confirm [data-name]{font-weight:800;font-size:17px;margin:20px 0 8px}.purchase-confirm [data-description]{color:#afc1b6;margin:0 0 20px}.purchase-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html body #purchaseConfirm button{min-height:48px;border:1px solid #4e695a;border-radius:12px;background:#223b2e;color:#edf5e8;padding:10px;font:800 14px/1.3 Onest,sans-serif;cursor:pointer}html body #purchaseConfirm button[data-pay]{background:#ceff49;color:#172210;border-color:#ceff49}.purchase-confirm button:focus-visible{outline:2px solid #ceff49;outline-offset:3px}
@media(max-width:350px){.purchase-confirm-actions{grid-template-columns:1fr}.purchase-confirm-heading h2{font-size:18px}}

html body :is(#supplies,#lairUpgrades,#appMenu) :is([data-refresh],[data-load-retry],#arsenalRefresh)[hidden]{display:none!important}
:is(#supplies,#lairUpgrades) [data-status]:empty{display:none}

.language-settings{display:grid;gap:8px;margin:18px 0;font-family:Onest,system-ui,"PingFang SC","Microsoft YaHei",sans-serif}.language-settings label{font-size:15px;font-weight:800}.language-settings select{width:100%;min-height:48px;border:1px solid #607858;border-radius:12px;padding:12px;background:#1d3227;color:#eef5e8;font:inherit;max-width:100%}html:lang(zh-CN) body{font-family:Onest,system-ui,"PingFang SC","Microsoft YaHei",sans-serif}
/* All locales: allow translated labels to grow within narrow phone dialogs. */
html body :is(#appMenu,#supplies,#lairUpgrades,#purchaseConfirm,#recordShare,#challengeDialog,#overlay) :is(button,h2,h3,label,.menu-label){min-width:0;white-space:normal;overflow-wrap:anywhere;hyphens:auto}
html body :is(#appMenu,#supplies,#lairUpgrades,#purchaseConfirm) :is(button,select){height:auto;line-height:1.3}
html:lang(zh-CN) :is(button,select,input,textarea){font-family:Onest,system-ui,"PingFang SC","Microsoft YaHei",sans-serif}

/* Native language picker next to the home menu and sound controls. */
#homeLanguage{margin-left:auto;flex:none;width:44px;height:44px}
.home-top #homeLanguage~.menu-trigger{margin-left:0}
#homeLanguage .quick-language{position:relative;display:block;width:44px;height:44px;margin:0}
#homeLanguage label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#homeLanguage select{position:absolute;inset:0;z-index:2;width:44px;height:44px;min-height:44px;padding:0;opacity:0;cursor:pointer}
#homeLanguage .quick-language-icon{box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border:1px solid #55705c;border-radius:50%;background:#23362a;color:#ceff49;font:22px/1 system-ui;pointer-events:none}
#homeLanguage:focus-within .quick-language-icon{outline:2px solid #ceff49;outline-offset:3px}
@media(max-width:390px){.home-top{gap:8px}.home-top>span{flex:1;min-width:0;overflow-wrap:anywhere}.home-top>b{flex:none}#homeLanguage{margin-left:0}}
.home-top>span{flex:1;min-width:0;overflow-wrap:anywhere}.home-top>b{flex:none}

/* Reserve independent rows for the section buttons and instructions. */
@media(orientation:landscape) and (min-width:480px){
 body.at-home #home{grid-template-rows:auto minmax(80px,1fr) auto auto auto!important}
 body.at-home #home .home-stage{grid-row:2/6}
 body.at-home #home .home-sections{grid-column:1;grid-row:4;margin:0}
 body.at-home #home .home-how{grid-column:1;grid-row:5;min-height:min-content;line-height:1.4;padding-top:4px}
}

/* Keep the first and last actions reachable on short Telegram viewports. */
#overlay:not([data-result=true]),#upgradeOverlay{overflow-y:auto;overscroll-behavior:contain;justify-content:safe center}
#overlay:not([data-result=true])>*{flex-shrink:0}

/* Avoid filtered GPU image layers inside a clipped, scrolling iOS dialog.
   Absolute bounds also remove percentage-height/flex intrinsic-size ambiguity. */
:is(#appMenu,#supplies) .consumable-preview{position:relative}
:is(#appMenu,#supplies) .consumable-preview img,:is(#appMenu,#supplies) .supply-card .consumable-preview img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;filter:none}