/* The phone layout uses pages, with separate spaces for information and thumbs. */
html{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
/* Keep scrolling and pinch accessibility in menus, without double-tap zoom.
   Gameplay aim/move surfaces retain their stricter touch-action:none below. */
html,body,button,a,dialog,input,select,label{touch-action:manipulation}
#mobilebrief{display:contents}
.mobile-pager,.settings-tabs,.mobile-setting,#movelabel,#looklabel{display:none}
.menuguide{display:none}.mobile-page-hidden{display:none!important}
#rotateprompt{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:#102f40;color:#e1f6ef;padding:24px;text-align:center}#rotateprompt>div{max-width:380px}#rotateprompt h2{font-size:2rem;line-height:1.12}#rotateprompt p{font-size:1rem;line-height:1.5}.rotatelabel{font-size:.85rem;letter-spacing:.12em;color:#ffc979;font-weight:800}#rotateprompt .tiny{font-size:.85rem;color:#b5d5de}
#installdialog{width:min(580px,90vw);max-height:85dvh;padding:24px;border-radius:20px;border:1px solid #88c6c7;background:#103243;color:#e9f5f6;z-index:90}#installdialog::backdrop{background:#00141bdc}#installdialog p{font-size:1rem;line-height:1.45}#installdialog h2{color:#ffd089;margin:0 0 12px}#installdialog .tiny{font-size:.875rem;color:#c2d9df}
#movezone,#lookzone{position:absolute;inset-block:0;width:50%;pointer-events:auto;touch-action:none}#movezone{left:0}#lookzone{right:0}
#touchzoom,#touchweapon{position:absolute;pointer-events:auto;touch-action:none;border:1px solid #b4ece4;background:#174a5add;color:#f1f9ef;border-radius:12px;font-size:.875rem;font-weight:900;min-width:56px;min-height:48px}
.touch-device body{height:var(--app-height,100dvh);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.touch-device body,.touch-device body *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.touch-device input:not([type=range]):not([type=checkbox]),.touch-device textarea,.touch-device [contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.touch-device #world,.touch-device #touch{touch-action:none}.touch-device .controls,.touch-device #caption,.touch-device #padstatus,.touch-device #resetcampaign,.touch-device header .pill,.touch-device .brand span{display:none}
.touch-device header{top:calc(6px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));height:40px;z-index:9}.touch-device .brand{display:none}.touch-device header{justify-content:flex-end}.touch-device .topright{gap:8px}.touch-device header button{padding:8px 10px;min-height:40px;font-size:.875rem;letter-spacing:0}
.touch-device .mobile-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;flex:none}.mobile-pager button,.settings-tabs button{border:1px solid #80b4bc77;border-radius:9px;background:#1a4c60;color:#eff9f4;font-size:.875rem;font-weight:800;min-width:54px;min-height:44px;padding:8px}.mobile-pager span{font-size:.875rem;text-align:center;white-space:nowrap;color:#d8e9eb}.mobile-pager button:disabled{opacity:.4}.touch-device [data-page-label]{white-space:normal}
.touch-device .mobile-setting{display:block}.touch-device label.mobile-setting{display:flex}
@media (orientation:landscape){
 /* Start screen: four short rows instead of one long column of buttons. */
 .touch-device #menu{top:calc(54px + var(--safe-top));bottom:calc(8px + var(--safe-bottom));left:calc(12px + var(--safe-left));width:calc(100% - 24px - var(--safe-left) - var(--safe-right));transform:none;max-width:none;max-height:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;gap:24px;padding:12px 18px;border-radius:18px;background:#102f40ed;overflow:visible}
 .touch-device .menuintro{min-width:0}.touch-device #menu .eyebrow{font-size:.75rem;letter-spacing:1px;margin:0 0 8px}.touch-device #menu h1{font-size:clamp(38px,6vw,56px);letter-spacing:-2px;line-height:.98;margin:0 0 12px}.touch-device #menu h1 span{font-size:20px;padding:6px;margin-left:8px}.touch-device #menu .menuguide{display:block;font-size:.875rem;line-height:1.4;margin:8px 0;color:#e0f2ed}.touch-device #campaignprogress{display:block;font-size:.875rem;line-height:1.4;margin:8px 0 0;max-width:none}
 .touch-device .menuactions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.touch-device #menu .menuactions button{margin:0;padding:6px 8px;min-height:46px;font-size:.875rem;line-height:1.2;letter-spacing:0;white-space:normal}.touch-device #start,.touch-device #installgame{grid-column:1/-1}
 /* Shared dialogs: content stays inside a landscape page, with visible actions. */
 .touch-device #modal{top:calc(54px + var(--safe-top));bottom:calc(8px + var(--safe-bottom));left:calc(12px + var(--safe-left));width:calc(100% - 24px - var(--safe-left) - var(--safe-right));max-width:none;max-height:none;transform:none;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);grid-template-rows:minmax(0,1fr) auto;gap:12px 20px;padding:16px;text-align:left;overflow:visible}
 .touch-device .modalcopy{grid-column:1;grid-row:1;min-width:0;align-self:center}.touch-device #modal .eyebrow{font-size:.75rem;letter-spacing:.6px;margin:0 0 10px}.touch-device #modal h2{font-size:1.5rem;line-height:1.12;letter-spacing:-.5px;margin:0 0 10px;overflow-wrap:anywhere}.touch-device #modal p{font-size:.875rem;line-height:1.4;max-width:none;margin:0;color:#dceef1}
 .touch-device .modalcards{display:contents}.touch-device #upgradepages{grid-column:1;grid-row:2}.touch-device #modal:has(#upgrades:empty) .modalcopy{grid-row:1/3}.touch-device #upgrades{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:none;min-height:0;overflow:visible;margin:0;padding:0;align-content:center;flex:1}.touch-device #upgrades[data-page-size="1"]{grid-template-columns:minmax(0,1fr)}
 .touch-device .upgrade,.touch-device .collectioncard{padding:10px;border-radius:12px;min-height:44px;min-width:0;white-space:normal;overflow-wrap:anywhere}.touch-device .upgrade b,.touch-device .collectioncard b{font-size:.95rem;line-height:1.25;margin-bottom:5px}.touch-device .upgrade span,.touch-device .collectioncard span,.touch-device .collectioncard small,.touch-device .upgrade strong{font-size:.875rem;line-height:1.35;margin:3px 0;display:block}.touch-device .rewardsummary{padding:10px;gap:7px;grid-column:auto}.touch-device .rewardsummary strong{font-size:1.15rem}.touch-device .rewardsummary span{font-size:.875rem;line-height:1.35;white-space:normal}
 .touch-device .modalactions{grid-column:2;grid-row:2;display:flex;gap:10px;align-items:stretch}.touch-device #modal .modalactions button{margin:0;min-height:44px;font-size:.875rem;line-height:1.2;padding:8px 10px;letter-spacing:0;flex:1;white-space:normal}.touch-device #modal .modalactions .mapbutton{width:auto}
 /* Settings use three pages; toggles and sliders keep full touch targets. */
 .touch-device #controllersettings{width:calc(100vw - 24px - var(--safe-left) - var(--safe-right));max-width:760px;height:calc(var(--app-height,100dvh) - 20px - var(--safe-top) - var(--safe-bottom));max-height:none;padding:12px 18px;overflow:visible;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;border-radius:16px}
 .touch-device #controllersettings[open]{display:grid}.touch-device #controllersettings h2{font-size:1.25rem;margin:0}.touch-device .settings-tabs{display:flex;gap:10px}.touch-device .settings-tabs button{min-height:40px;flex:1}.settings-tabs [aria-selected=true]{background:#ffd28a;color:#143e50;border-color:#ffe8bc}
 .touch-device #controllersettings [data-settings-panel]{min-width:0;align-self:center}.touch-device #controllersettings p{font-size:.875rem;line-height:1.35;margin:6px 0}.touch-device #controllersettings label{font-size:.875rem;margin:0;min-height:40px;line-height:1.3}.touch-device #controllersettings label.check{gap:10px}.touch-device #controllersettings input[type=checkbox]{flex:none;width:21px;height:21px}.touch-device #controllersettings input[type=range]{min-height:24px;margin:0;touch-action:pan-y}.touch-device .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}.touch-device #controllersettings .tiny{display:block;font-size:.75rem;line-height:1.3;margin:4px 0}.touch-device #controllersettings #closecontroller{margin:0;min-height:42px;padding:8px;font-size:.875rem;width:100%}.touch-device #mobilesettings #firemodehelp{padding:0;margin:0;align-self:center}.touch-device .touch-tuning{row-gap:12px}
 /* World image at left; ten levels per page at right. */
 .touch-device #campaignmap{width:calc(100vw - 20px - var(--safe-left) - var(--safe-right));height:calc(var(--app-height,100dvh) - 16px - var(--safe-top) - var(--safe-bottom));max-height:none;padding:0;overflow:visible;border-radius:14px;grid-template-rows:auto minmax(0,1fr)}.touch-device #campaignmap[open]{display:grid}.touch-device #campaignmap .mapheader{padding:8px 12px;gap:10px;flex-wrap:nowrap}.touch-device #campaignmap .mapheader h2{font-size:1.2rem;margin:0}.touch-device #campaignmap .atlaslabel{display:none}.touch-device #atlasprogress{font-size:.75rem}.touch-device #campaignmap .mapheader button{min-height:40px;padding:8px;font-size:.75rem;letter-spacing:0}
 .touch-device #campaignmap .mapbody{display:block;padding:8px 12px;overflow:visible;min-height:0}.touch-device #campaignmap #worldlist{display:none}.touch-device .worlddetail{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);gap:16px;height:100%;min-height:0}.touch-device .worldpreview{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}.touch-device .worldhero{height:auto;min-height:0;flex:1;border-radius:12px}.touch-device .worldherocopy{left:10px;right:10px;bottom:10px}.touch-device #worldeyebrow{font-size:.75rem;letter-spacing:0;padding:3px 5px}.touch-device #campaignmap #maptitle{font-size:1.3rem;line-height:1.1;margin:7px 0;letter-spacing:-.4px;overflow-wrap:anywhere}.touch-device #campaignmap #mapdescription{display:block;font-size:.875rem;line-height:1.3;margin:0}.touch-device .worldhero:after{background:linear-gradient(180deg,#071a2920,#071a29ee 75%)}
 .touch-device .levelcontent{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;justify-content:center}.touch-device .worldrouteheader{margin:0;gap:8px;font-size:.75rem;letter-spacing:.4px}.touch-device #worldcompletion{font-size:.75rem;letter-spacing:0}.touch-device .worldprogresstrack{margin:0;height:3px;flex:none}.touch-device #hardmode{margin:0;min-height:40px;padding:6px;font-size:.75rem;line-height:1.2;letter-spacing:0}.touch-device #campaignmap #levellist{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.touch-device #campaignmap #levellist button{display:flex;flex-direction:column;justify-content:center;gap:0;padding:4px 2px;min-height:44px;letter-spacing:0}.touch-device .levelnumber{font-size:1rem}.touch-device .levelstatus{font-size:.65rem;letter-spacing:0}.touch-device .levelmedals{display:none}.touch-device #campaignmap .atlasfoot{font-size:.75rem;line-height:1.25;margin:0;letter-spacing:0}
 /* A transparent map at top right; status flows at left and controls sit below it. */
 .touch-device{--mobile-radar-size:clamp(164px,calc(var(--app-height,100dvh) * .48),220px)}
 .touch-device.mobile-playing .brand,.touch-device.mobile-playing #fullscreenbutton,.touch-device.mobile-playing #music,.touch-device.mobile-playing #sound{display:none}.touch-device.mobile-playing header{top:calc(8px + var(--safe-top));left:auto;pointer-events:none;justify-content:flex-end}.touch-device.mobile-playing #controllerbutton,.touch-device.mobile-playing #pause{pointer-events:auto;min-height:42px}
 .touch-device .hudtop{top:calc(8px + var(--safe-top));left:calc(12px + var(--safe-left));gap:8px}.touch-device .stat{padding:6px 10px;min-width:68px;border-radius:10px}.touch-device .stat small{font-size:.65rem;letter-spacing:.2px}.touch-device .stat strong{font-size:1.1rem;margin:2px 0 0}.touch-device .stat em{font-size:.75rem}
 .touch-device #mobilebrief{position:absolute;left:calc(12px + var(--safe-left));top:calc(68px + var(--safe-top));width:min(360px,calc(100% - var(--mobile-radar-size) - 36px - var(--safe-left) - var(--safe-right)));display:grid;gap:8px}.touch-device #missionpanel{position:static;width:100%;max-width:none;padding:6px 8px;background:#102e40a8}.touch-device #worldlabel,.touch-device #combohud,.touch-device #actionhint,.touch-device .weapon,.touch-device #challengehud,.touch-device #weaponslots{display:none}.touch-device #missionhud{font-size:.8rem!important;line-height:1.25;margin:0!important}
 .touch-device #radarbox{top:calc(62px + var(--safe-top));bottom:auto;right:calc(12px + var(--safe-right));width:var(--mobile-radar-size);height:var(--mobile-radar-size);padding:0;border-radius:0;background:transparent;overflow:hidden;pointer-events:none}.touch-device #radarbox,.touch-device #radarbox.danger{border:0;box-shadow:none}.touch-device #radar{width:100%;height:100%;display:block}.touch-device .radarheading,.touch-device .radarlegend,.touch-device #radarthreat,.touch-device #radarstatus{display:none}
 .touch-device #touch button{position:relative;z-index:2;min-height:48px;font-size:.875rem;border-radius:12px;padding:8px 10px;line-height:1.2}.touch-device #touch>#touchweapon{position:absolute;left:calc(50% - 96px);bottom:calc(12px + var(--safe-bottom));width:80px}.touch-device #actionbuttons{position:absolute;left:calc(50% + 4px);right:auto;bottom:calc(12px + var(--safe-bottom));transform:none;display:flex;gap:14px;z-index:2}.touch-device #actionbuttons #specialaction{width:92px}
 .touch-device #actionbuttons #jumpaction,.touch-device #actionbuttons #dashaction{position:absolute;bottom:64px;width:68px;min-width:0}.touch-device #jumpaction{right:148px}.touch-device #dashaction{right:66px}.touch-device #touch>#touchzoom{position:absolute;left:calc(50% + 44px);bottom:calc(76px + var(--safe-bottom));width:68px;min-width:0}.touch-device:not(.advanced-touch) #jumpaction,.touch-device:not(.advanced-touch) #dashaction,.touch-device:not(.advanced-touch) #touchzoom{display:none}
 .touch-device #touch>#fire{position:absolute;right:calc(24px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));width:68px;height:68px;border-radius:50%;padding:8px;font-size:1rem}
 .touch-device .hudbottom{left:calc(12px + var(--safe-left));right:auto;bottom:calc(12px + var(--safe-bottom))}.touch-device .healthbox{width:156px;padding:7px 9px;border-radius:10px}.touch-device .healthbox small{font-size:.75rem;letter-spacing:0}.touch-device .healthbox .track{height:7px;margin-top:5px}.touch-device #specialhud{left:calc(12px + var(--safe-left));bottom:calc(68px + var(--safe-bottom));width:144px;max-width:23vw;padding:6px 8px;transform:none;font-size:.75rem;line-height:1.3}.touch-device #powers{left:calc(12px + var(--safe-left));bottom:calc(113px + var(--safe-bottom));width:144px;max-width:23vw;display:flex;flex-direction:column;gap:3px;font-size:.75rem}.touch-device #powers span{padding:3px 6px;white-space:normal}
 .touch-device #notice{top:35%;left:24%;width:52%;transform:none;font-size:.95rem;line-height:1.3;white-space:normal;text-align:center}.touch-device #targetinfo{bottom:auto;top:calc(50% + 25px);max-width:40%;font-size:.8rem;line-height:1.2;white-space:normal}.touch-device #bossbar{position:static;transform:none;width:100%;max-width:none;padding:6px 8px}.touch-device #bossbar strong{font-size:.875rem;white-space:normal}.touch-device #bossbar .track{height:6px;margin-top:5px}.touch-device #bosscue{font-size:.75rem;line-height:1.2;margin-top:4px}
 .touch-device #installdialog,.touch-device #resetdialog{max-height:calc(var(--app-height,100dvh) - 24px);width:min(620px,calc(100vw - 36px));padding:18px;overflow:visible}.touch-device #resetdialog p{font-size:.875rem;line-height:1.4}.touch-device #installdialog .tiny{display:block}.touch-device #resetdialog h2{margin:0 0 10px}.touch-device #resetdialog button{min-height:44px;padding:8px 12px;font-size:.875rem}
}
@media (orientation:landscape) and (max-height:350px){.touch-device #menu{gap:16px;padding:10px 14px}.touch-device #menu h1{font-size:36px;margin-bottom:8px}.touch-device #menu .eyebrow{margin-bottom:5px}.touch-device #menu .menuguide,.touch-device #campaignprogress{margin-top:5px;font-size:.8rem}.touch-device #modal{padding:12px;gap:8px 14px}.touch-device #modal h2{font-size:1.3rem}.touch-device #controllersettings{gap:5px;padding:10px 14px}.touch-device #controllersettings .controllerhelp p{font-size:.8rem;line-height:1.25}.touch-device #controllersettings p{margin:3px 0}.touch-device .levelcontent{gap:4px}.touch-device #campaignmap .mapheader{padding:5px 10px}.touch-device #campaignmap .mapbody{padding:6px 10px}.touch-device #campaignmap .atlasfoot{font-size:.7rem}.touch-device .worlddetail{gap:12px}}

@media (orientation:landscape){.touch-device .collectioncard{gap:3px;padding:9px}.touch-device .collectioncard b,.touch-device .collectioncard span,.touch-device .collectioncard small{margin:0}.touch-device #modaltext{white-space:pre-line}}
@media (orientation:landscape) and (max-height:350px){.touch-device .collectioncard small{font-size:.75rem;line-height:1.3}.touch-device .collectioncard{padding:8px;gap:2px}}

@media (orientation:landscape) and (max-height:350px){.touch-device .touch-tuning{row-gap:6px}.touch-device #mobilesettings #firemodehelp{margin:0}}

@media(orientation:landscape){.touch-device #modal.pause-menu .modalactions{grid-column:2;grid-row:1/3;align-self:center;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.touch-device #modal.pause-menu .modalactions button{min-height:46px;font-size:.95rem;padding:10px}}

#worldpages{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-top:10px}#campaignmap #mapplay{background:#ffc063;color:#123345;min-height:44px;width:auto;flex:none;margin:0} .touch-device #worldpages{margin-top:0}

@media(orientation:landscape){
 .touch-device #menu .menuguide{display:none}.touch-device #titleaudio{gap:4px;margin-top:8px}.touch-device .volumecontrol{grid-template-columns:88px minmax(0,1fr) 40px;gap:5px}.touch-device .volumecontrol label{grid-column:1;font-size:.875rem}.touch-device .volumecontrol output{grid-column:3;font-size:.75rem;text-align:right}.touch-device .volumerocker{grid-column:2;grid-row:1;grid-template-columns:36px minmax(30px,1fr) 36px;gap:4px}.touch-device .volumerocker button,.touch-device .volumerocker input{min-height:44px}.touch-device .watchintro{min-height:36px;margin:0;padding:5px 0}.touch-device #menu h1{font-size:clamp(34px,5vw,48px);margin-bottom:8px}.touch-device #menu .controls{display:none}.touch-device #menu .menuactions button{font-size:.875rem;min-height:46px}.touch-device #campaignmap #mapplay{width:auto;flex:none;margin:0;font-size:.875rem}
 .touch-device .introcopy{right:calc(4vw + var(--safe-right));width:36%;top:54%;transform:translateY(-43%)}.touch-device #introtitle{font-size:clamp(26px,4.4vw,42px);margin:9px 0}.touch-device #introtext{font-size:1rem;line-height:1.3}.touch-device #introchapter{font-size:.75rem;letter-spacing:1px}.touch-device #intronext{padding:10px;margin:10px 0;min-height:44px;font-size:.875rem}.touch-device .introbrand{top:calc(12px + var(--safe-top));left:calc(16px + var(--safe-left));font-size:.875rem}.touch-device #introskip{top:calc(10px + var(--safe-top));right:calc(16px + var(--safe-right));padding:8px 12px}.touch-device .introshade{background:linear-gradient(90deg,transparent 30%,#061a2baa 60%,#061a2bf5)}
}
@media(orientation:landscape) and (max-height:400px){.touch-device #menu h1 br{display:none}.touch-device #menu h1{font-size:30px;letter-spacing:-1.4px}.touch-device #menu h1 span{display:none}.touch-device #menu .eyebrow{font-size:.7rem;margin-bottom:6px}.touch-device #campaignprogress{font-size:.8rem;margin:4px 0}.touch-device #menu{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px}.touch-device .introcopy{width:39%;top:calc(54% - var(--safe-bottom)/2)}.touch-device #introtitle{font-size:28px}.touch-device #introtext{font-size:.875rem}.touch-device #intronext{margin:8px 0}.touch-device #introchapter{font-size:.75rem}}

@media(orientation:landscape){.touch-device .worldcatalog{display:none}.touch-device .worldswitch{gap:4px;padding:7px;margin:0;flex:none;border-radius:10px}.touch-device .worldswitch label,.touch-device .worldswitch #worldpagecount{font-size:.75rem;letter-spacing:.3px}.touch-device .worldswitch #worldpages{grid-template-columns:44px minmax(0,1fr) 44px;gap:5px;min-height:44px}.touch-device .worldswitch #worldpages button{min-height:44px}.touch-device .worldswitch #worldselect{min-height:44px;font-size:.875rem;padding:6px}.touch-device .worldpreview{gap:6px}.touch-device #campaignmap #mapdescription{display:none}.touch-device #campaignmap #maptitle{font-size:1.2rem;margin:5px 0}.touch-device .worldhero{min-height:92px}}

@media(orientation:landscape){.touch-device #worldweaponbrief{margin:0;padding:5px 7px;font-size:10px;line-height:1.25;flex:none}.touch-device .worldhero{min-height:82px}}

@media(orientation:landscape) and (max-height:380px){
 .touch-device .worldswitch{display:block;padding:4px}
 .touch-device .worldswitch label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .touch-device .worldswitch #worldpagecount{display:none}
 .touch-device .worldswitch #worldpages{margin:0}
 .touch-device .worldpreview{gap:4px}
 .touch-device .worldhero{min-height:62px}
 .touch-device #worldeyebrow{display:none}
 .touch-device #campaignmap #maptitle{font-size:1rem;line-height:1.1;margin:0}
 .touch-device .worldherocopy{bottom:8px}
 .touch-device #worldweaponbrief{font-size:9.5px;line-height:1.15;padding:4px 6px}
}