/* Shared front door: three raid actions, with device tools in the far corner. */
#mainMenu{--menu-top:max(24px,4vh,env(safe-area-inset-top));--menu-right:max(24px,5vw,env(safe-area-inset-right));--menu-bottom:max(24px,4vh,env(safe-area-inset-bottom));--menu-left:max(24px,5vw,env(safe-area-inset-left));position:fixed;inset:0;z-index:2400;display:grid;grid-template-columns:minmax(240px,min(40vw,430px)) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:24px;align-items:start;box-sizing:border-box;padding:var(--menu-top) var(--menu-right) var(--menu-bottom) var(--menu-left);height:var(--naval-vh,100dvh);overflow:hidden;isolation:isolate;background:#0d242c;color:#f2e4c8;touch-action:manipulation}
#mainMenu[hidden]{display:none}
.naval-menu-backdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#081923c9 0%,#0819238c 38%,#08192308 72%),url('assets/menu-seascape-v2.webp') center/cover no-repeat}
.naval-menu-brand{grid-column:1;grid-row:1;align-self:start;min-width:0}
#mainMenu h1{width:min(430px,100%);height:166px;margin:0;font-size:0;line-height:0}
#mainMenu h1>img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.naval-menu-ship,.naval-menu-location{display:none}
.naval-menu-card{grid-column:1;grid-row:2;align-self:center;min-width:0;padding:0;background:none;border:0;box-shadow:none;clip-path:none}
#mainMenu nav{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:min(360px,100%);margin:0}
#mainMenu :is(nav,.naval-menu-tools) button,body.naval-mobile #mainMenu :is(nav,.naval-menu-tools) button{box-sizing:border-box;min-width:44px;min-height:44px;clip-path:none!important;border:1px solid #b59c67!important;border-image:none!important;border-radius:4px!important;background:#12343b!important;background-image:none!important;color:#f2e4c8!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;letter-spacing:0!important;font-family:var(--naval-ui-font,system-ui,-apple-system,"Segoe UI",sans-serif)!important;cursor:pointer;touch-action:manipulation}
#mainMenu :is(nav,.naval-menu-tools) button::before,#mainMenu :is(nav,.naval-menu-tools) button:not(#pwaTools)::after{display:none!important}
#mainMenu .naval-menu-card nav button,body.naval-mobile #mainMenu .naval-menu-card nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:auto;min-height:64px;padding:10px 14px;text-align:left}
#mainMenu nav button>img{width:32px;height:32px;flex:0 0 32px;object-fit:contain}
#mainMenu nav button>span{min-width:0}
#mainMenu nav button b{display:block;font:600 26px/30px var(--naval-ui-font,system-ui,-apple-system,"Segoe UI",sans-serif);color:inherit}
#mainMenu #menuSaveDetail{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
#mainMenu :is(nav,.naval-menu-tools) button:hover:not(:disabled),body.naval-mobile #mainMenu :is(nav,.naval-menu-tools) button:hover:not(:disabled){background:#1b424b!important}
#mainMenu nav button:disabled{opacity:.62;cursor:default}
#mainMenu button:focus-visible{outline:3px solid #f5cb76;outline-offset:3px}
.naval-menu-tools{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;width:min(320px,100%);min-width:0;align-self:end;justify-self:end}
.naval-menu-tools button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:44px;padding:6px 8px;font:600 16px/20px var(--naval-ui-font,system-ui,-apple-system,"Segoe UI",sans-serif);white-space:nowrap}
.naval-menu-tools button>img,.naval-menu-tools button>svg{width:20px;height:20px;flex:0 0 20px;object-fit:contain}
#mainMenu #menuSound{position:static;display:inline-flex;gap:4px;flex:0 0 72px;width:72px;height:44px;min-width:72px;min-height:44px;padding:5px!important;font-size:16px;line-height:20px}
#menuSound svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#menuSound span{min-width:0}
#menuAppTools{display:contents}
#menuStatus{position:absolute;top:var(--menu-top);right:var(--menu-right);box-sizing:border-box;width:min(320px,calc(100% - var(--menu-left) - var(--menu-right) - 260px));margin:0;padding:8px 12px;color:#f2e4c8;font:600 16px/22px var(--naval-ui-font,system-ui,-apple-system,"Segoe UI",sans-serif);background:#12343b;border:1px solid #b59c67;border-radius:4px;overflow-wrap:anywhere}
#menuStatus:empty{display:none}
#menuRestartConfirm{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:12px;background:#061820ed;box-sizing:border-box}
#menuRestartConfirm[hidden]{display:none}
.naval-menu-confirm-card{width:min(660px,100%);box-sizing:border-box;max-height:calc(var(--naval-vh,100dvh) - 24px);padding:24px;background:#12343b;color:#f2e4c8;border:1px solid #b59c67;border-radius:4px;box-shadow:none}
#mainMenu h2{font:600 28px/34px var(--naval-ui-font,system-ui,-apple-system,"Segoe UI",sans-serif);margin:0 0 12px}
.naval-menu-confirm-card p{font:500 18px/25px var(--naval-ui-font,system-ui,-apple-system,"Segoe UI",sans-serif);margin:0 0 18px;color:inherit}
.naval-menu-confirm-card>div{display:flex;gap:12px}
#mainMenu .naval-menu-confirm-card button{flex:1;min-height:48px;padding:8px 12px;font:600 18px/24px var(--naval-ui-font,system-ui,-apple-system,"Segoe UI",sans-serif);border:1px solid #b59c67;border-radius:4px;clip-path:none;color:#f2e4c8;background:#12343b;box-shadow:none;white-space:normal;cursor:pointer}
#prepMainMenu{align-self:start;justify-self:start;min-height:44px;padding:7px 14px;background:#e3c99c;border:2px solid #9f7a48;color:#533a25;font:600 19px/24px var(--font-display);position:absolute;left:18px;top:72px;z-index:5;display:flex;gap:8px;align-items:center}
#prepMainMenu img{width:25px;height:25px;object-fit:contain}
body.main-menu :is(#sea,#shipLabels,#ui,#mission,#ownedFleet,body>header,#reconChart,#journalToggle),body.menu-fleet :is(#sea,#shipLabels,#ui,#mission,#ownedFleet,body>header,#reconChart,#journalToggle){visibility:hidden;pointer-events:none}
body.main-menu>.fullscreen-button,body.main-menu>.global-sound-button,body.menu-fleet>.fullscreen-button{display:none!important}
@media(max-width:950px){#mainMenu{--menu-top:max(12px,env(safe-area-inset-top));--menu-right:max(20px,env(safe-area-inset-right));--menu-bottom:max(12px,env(safe-area-inset-bottom));--menu-left:max(20px,env(safe-area-inset-left));grid-template-columns:240px minmax(0,1fr);grid-template-rows:90px minmax(0,1fr);gap:10px 20px}#mainMenu h1{width:240px;height:90px}#mainMenu nav{gap:6px}#mainMenu .naval-menu-card nav button,body.naval-mobile #mainMenu .naval-menu-card nav button{height:auto;min-height:52px;padding:6px 10px;gap:10px}#mainMenu nav button>img{width:24px;height:24px;flex-basis:24px}#mainMenu nav button b{font-size:22px;line-height:26px}}
@media(max-height:650px){#prepMainMenu{left:14px;top:50px;font-size:16px;padding:5px 8px}}
@media(max-height:400px){#mainMenu{--menu-top:max(12px,env(safe-area-inset-top));--menu-right:max(20px,env(safe-area-inset-right));--menu-bottom:max(12px,env(safe-area-inset-bottom));--menu-left:max(20px,env(safe-area-inset-left));grid-template-columns:240px minmax(0,1fr);grid-template-rows:90px minmax(0,1fr);gap:10px 20px}#mainMenu h1{width:240px;height:90px}#mainMenu nav{gap:6px}#mainMenu .naval-menu-card nav button,body.naval-mobile #mainMenu .naval-menu-card nav button{height:44px;min-height:44px;padding:6px 10px;gap:10px}#mainMenu nav button>img{width:24px;height:24px;flex-basis:24px}#mainMenu nav button b{font-size:20px;line-height:24px}.naval-menu-confirm-card{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px 18px;padding:16px}.naval-menu-confirm-card h2{grid-column:1/-1;font-size:24px;line-height:28px;margin:0}.naval-menu-confirm-card p{font-size:16px;line-height:22px;margin:0}.naval-menu-confirm-card>div{flex-direction:column;gap:8px}#mainMenu .naval-menu-confirm-card button{min-height:44px;padding:6px 10px;font-size:16px;line-height:22px}}
@media(max-width:600px) and (orientation:portrait){#mainMenu{grid-template-columns:minmax(0,1fr);grid-template-rows:90px minmax(0,1fr) auto;gap:12px}.naval-menu-brand{justify-self:center}#mainMenu h1>img{object-position:center}.naval-menu-card{grid-column:1;grid-row:2;width:min(320px,100%);justify-self:center}.naval-menu-tools{grid-column:1;grid-row:3;justify-self:center;justify-content:center}.naval-menu-backdrop{background-position:58% center}#menuStatus{position:static;grid-column:1;grid-row:2;align-self:start;justify-self:center;width:min(320px,100%)}.naval-menu-confirm-card{grid-template-columns:minmax(0,1fr)}.naval-menu-confirm-card h2{grid-column:auto}}