/* One viewport contract for the renderer, menus and touch controls. */
html{width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#061c2b;overscroll-behavior:none}
body,.touch-device body{position:absolute;inset:0 auto auto 0;width:var(--app-width,100vw);height:var(--app-height,100dvh);min-height:0;overscroll-behavior:none;overflow:hidden;background:#061c2b}
#world{width:var(--app-width,100vw)!important;height:var(--app-height,100dvh)!important;max-width:none;max-height:none}
#shade,#rotateprompt,#loadscreen,#hud,#touch,#storyintro{width:var(--app-width,100vw);height:var(--app-height,100dvh);box-sizing:border-box}
/* Top-layer dialogs must use the same recovered height as the game, rather
   than Safari's retained native dialog centering/backdrop rectangle. */
.touch-device dialog:not(#storyintro){position:fixed;inset:auto;left:calc(var(--app-width,100vw) / 2);top:calc(var(--app-height,100dvh) / 2);margin:0;transform:translate(-50%,-50%)}
.touch-device dialog::backdrop{position:fixed;inset:0 auto auto 0;width:var(--app-width,100vw);height:var(--app-height,100dvh)}
#menu,.touch-device #menu{left:6%;right:6%;top:50%;bottom:auto;transform:translateY(-50%);width:auto;max-width:1100px;max-height:calc(var(--app-height,100dvh) - 130px);padding:24px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;background:transparent;border:0;box-shadow:none;overflow:visible;align-items:center}
#menu h1,.touch-device #menu h1{font-size:clamp(42px,7.8vw,100px);line-height:.94;letter-spacing:-3px;margin:0 0 24px;text-shadow:0 4px 0 #056f91,0 10px 24px #00283f88}
#menu .eyebrow{font-size:16px;letter-spacing:4px;color:#ffb638;margin:0 0 18px}
#menu #campaignprogress{display:block;color:white;font-size:16px;line-height:1.4;margin:0 0 12px}
#menu #unlockpromise{font-size:14px;line-height:1.5;color:#cceef9;max-width:310px;margin:0}
.menuchoices{min-width:0;padding:20px;border:1px solid #ffffff24;border-radius:24px;background:#062a43e8;box-shadow:0 18px 48px #00182866}
#menu .menuactions,.touch-device #menu .menuactions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#menu .menuactions button,.touch-device #menu .menuactions button{width:100%;min-height:62px;margin:0;padding:14px 10px;border:1px solid #5fa3b84d;border-radius:14px;background:#164d69;color:#f4fbff;font-size:18px;font-weight:800;letter-spacing:0;box-shadow:none;line-height:1.2}
#menu .menuactions #start{grid-column:1/-1;min-height:78px;font-size:24px;background:#ffad24;color:#102c43;border:0;box-shadow:0 4px 0 #c26b08;margin-bottom:6px}
#menu .menuactions button:hover{background:#206d90}#menu .menuactions #start:hover{background:#ffc64d}
.menufooter{display:flex;gap:6px;justify-content:center;margin-top:16px}.menufooter button{min-height:44px;flex:1;padding:8px 4px;background:transparent;border:0;border-radius:10px;font-size:14px;color:#d2ecf5;font-weight:700}.menufooter button:hover{background:#ffffff12}
body>header .pill,body>header #controllerbutton,#caption,#padstatus{display:none}.mobile-playing body>header #controllerbutton,body.playing>header #controllerbutton{display:flex}
body:has(#hud:not([hidden]))>header #controllerbutton{display:flex}
#playerhub>header{position:static;inset:auto;z-index:auto;padding:0}
dialog{box-shadow:0 20px 70px #00152299}dialog button{letter-spacing:0}
#controllersettings{width:min(780px,94vw);max-height:calc(var(--app-height,100dvh) - 24px);border-radius:22px;background:#082c43;border:1px solid #71b9ca66;padding:22px}
#controllersettings[open]{display:flex;flex-direction:column;gap:14px;overflow:auto}
#controllersettings h2{margin:0;font-size:26px}.settings-tabs,.touch-device .settings-tabs{display:flex;gap:6px;flex-shrink:0}.settings-tabs button{flex:1;min-width:0;min-height:44px;font-size:14px;border:0;border-radius:10px;background:#16465e}.settings-tabs [aria-selected=true]{background:#ffb02e;color:#102b40}
.mobile-page-hidden{display:none!important}#controllersettings #titleaudio{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0;padding:10px 0;background:transparent;border:0}#controllersettings #titleaudio label{font-size:16px}#controllersettings .volumerocker{display:flex;gap:8px;align-items:center}#controllersettings .volumerocker input{width:100%;min-width:0}#controllersettings .volumerocker button{min-height:44px;min-width:44px;font-size:22px}#controllersettings .settings-tools{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}#controllersettings .settings-tools button{display:block;min-height:44px;padding:8px 14px;background:#164d69;border-radius:10px;font-size:14px}#controllersettings #closecontroller{min-height:44px;padding:12px;margin:0;border:0;box-shadow:none;border-radius:12px;background:#ffaf29;flex-shrink:0}
#playerhub .rewardshortcuts{margin:0 0 10px}#playerhub .rewardshortcuts button{background:transparent;color:#9ee7f5;border-color:#3b7588}
#modal{border:1px solid #68a3b759;border-radius:22px;background:#082b43f5}.modalactions button{border-radius:12px;box-shadow:none;border-width:0;min-height:44px}
@media(orientation:landscape) and (max-height:600px){
 #menu,.touch-device #menu{top:calc(48px + var(--safe-top,0px));bottom:calc(10px + var(--safe-bottom,0px));left:calc(20px + var(--safe-left,0px));right:calc(20px + var(--safe-right,0px));transform:none;max-height:none;gap:5vw;padding:0;grid-template-columns:1fr 1.05fr}
 #menu h1,.touch-device #menu h1{font-size:clamp(38px,7.8vw,64px);margin-bottom:12px}#menu .eyebrow,.touch-device #menu .eyebrow{font-size:14px;letter-spacing:3px;margin:0 0 10px}#menu #campaignprogress{font-size:14px;margin:0 0 6px}#menu #unlockpromise{font-size:14px;line-height:1.3;max-width:300px}
 .menuchoices{padding:12px;border-radius:18px}#menu .menuactions,.touch-device #menu .menuactions{gap:8px}#menu .menuactions button,.touch-device #menu .menuactions button{min-height:44px;padding:9px 6px;font-size:16px}#menu .menuactions #start{min-height:52px;font-size:19px;margin-bottom:3px}.menufooter{margin-top:6px;gap:4px}.menufooter button{padding:6px 3px;min-height:44px}
 #controllersettings[open],.touch-device #controllersettings[open]{display:flex;gap:8px;padding:12px 16px}#controllersettings h2{font-size:20px}#controllersettings #titleaudio{padding:0;gap:16px}#controllersettings .settings-tools{margin:4px 0}#controllersettings p{font-size:14px;line-height:1.3}
}
@media(orientation:portrait){#menu{grid-template-columns:1fr;gap:24px;left:8%;right:8%;max-height:calc(100dvh - 110px);overflow:auto}#menu h1{font-size:60px}#menu .menuintro #unlockpromise{display:none}}
@media(prefers-reduced-motion:reduce){#menu button{transition:none;transform:none}}

#controllersettings [data-settings-panel],.touch-device #controllersettings [data-settings-panel]{align-self:stretch}

#playerhub[data-section=settings]>nav:not(#hubpages){display:none}

.upgrade:has(.upgradeart){display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;text-align:left;align-content:center;background:#12374f;border-color:#3a6078;opacity:1}
.upgrade .upgradeart{display:block;grid-column:1;grid-row:1/4;width:64px;height:85px;background-image:url('art/upgrade-atlas.png');background-size:400% 300%;background-repeat:no-repeat;align-self:center}
.upgrade:has(.upgradeart)>b,.upgrade:has(.upgradeart)>span:not(.upgradeart),.upgrade:has(.upgradeart)>strong{grid-column:2}
.upgrade:has(.upgradeart)>b{color:#ffb629;font-size:15px;line-height:1.2}.upgrade:has(.upgradeart)>span:not(.upgradeart){color:#e0edf7;font-size:14px;letter-spacing:0;line-height:1.3}.upgrade:has(.upgradeart)>strong{margin-top:6px;color:#7bdddb;font-size:14px}.upgrade:has(.upgradeart):disabled{background:#0f2839;border-color:#354955}.upgrade:has(.upgradeart):disabled>strong{color:#a1b5c3}
@media(orientation:landscape) and (max-height:500px){.upgrade:has(.upgradeart){grid-template-columns:46px minmax(0,1fr);column-gap:8px;padding:9px;min-height:95px}.upgrade .upgradeart{width:46px;height:61px}.upgrade:has(.upgradeart)>b{font-size:14px}}

#loadscreen[hidden]{display:none!important}#loadscreen p{max-width:440px;line-height:1.4}#updatebanner{position:fixed;z-index:30;bottom:calc(12px + var(--safe-bottom,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:94vw;padding:10px 14px;border-radius:14px;background:#08273bf5;border:1px solid #b2dded;font-size:14px}#updatebanner button{min-height:44px;padding:10px 14px;background:#ffb129;color:#0e2c40;border-radius:10px;font-weight:800}.playing #updatebanner{display:none}#controllersettings #updatestatus{flex-basis:100%;font-size:14px;margin:0;color:#b9e8f3}

#modal.combat-choice #upgrades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#modal.combat-choice .upgrade{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:14px}#modal.combat-choice .upgradeart{width:52px;height:69px;align-self:center;flex-shrink:0}#modal.combat-choice .upgrade b{font-size:14px;line-height:1.2}#modal.combat-choice .upgrade span:not(.upgradeart){font-size:14px;line-height:1.3}.next-reward{display:flex;gap:12px;align-items:center;text-align:left;color:#e5f8ff;border:1px solid #4d7a90;border-radius:12px;background:#13394f;width:100%;padding:12px}.next-reward .upgradeart{display:block;flex-shrink:0;width:48px;height:64px;background-image:url('art/upgrade-atlas.png');background-size:400% 300%}.next-reward span:last-child{display:grid;gap:6px}.next-reward b{color:#ffc25a}.next-reward small{font-size:12px;letter-spacing:0}
@media(orientation:landscape) and (max-height:550px){#modal.combat-choice{grid-template-columns:1fr!important;gap:8px!important;padding:12px!important}#modal.combat-choice .modalcopy p{display:none}#modal.combat-choice .modalcopy h2{font-size:20px;margin:0}#modal.combat-choice .modalcopy .eyebrow{font-size:12px;margin:0 0 4px}#modal.combat-choice .upgrade{padding:9px;gap:6px;min-height:0}#modal.combat-choice .upgradeart{width:32px;height:42px}#modal.combat-choice .upgrade b{font-size:13px}#modal.combat-choice .upgrade span:not(.upgradeart){font-size:12px}#modal.combat-choice .modalactions{margin:0}#modal.combat-choice .modalactions button{min-height:32px;padding:6px;font-size:12px}}

.next-reward .reward-weapon{width:96px;height:64px;object-fit:contain;flex-shrink:0;border-radius:12px;}

@media(orientation:landscape) and (max-height:550px){
 .touch-device #modal.combat-choice{grid-template-rows:auto minmax(0,1fr) auto!important;}
 .touch-device #modal.combat-choice .modalcopy{grid-column:1;grid-row:1;}
 .touch-device #modal.combat-choice #upgrades{grid-column:1;grid-row:2;align-content:center;}
 .touch-device #modal.combat-choice .modalactions{grid-column:1;grid-row:3;}
}
@media(orientation:landscape) and (max-height:350px){
 #modal.combat-choice .upgrade{padding:6px;gap:4px;}
 #modal.combat-choice .upgradeart{width:24px;height:32px;}
 #modal.combat-choice .upgrade b{font-size:12px;}
 #modal.combat-choice .upgrade span:not(.upgradeart){font-size:11px;line-height:1.25;}
}