:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#e2eaff;background:#080d20}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100dvh;touch-action:none}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding: max(18px,env(safe-area-inset-top)) 24px;pointer-events:none}header>*{pointer-events:auto}.brand{color:#eef3ff;text-decoration:none;letter-spacing:.3em;font-weight:800}.brand small{display:block;font-size:9px;letter-spacing:.18em;color:#7185af;margin-top:5px}button,select,input{font:inherit;border:1px solid #344568;border-radius:10px;color:#e2eaff;background:#16213a;padding:11px 15px}button{cursor:pointer}button:hover{background:#263858}button:disabled{opacity:.5;cursor:wait}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #59c3ff;outline-offset:3px}.primary{background:#2870dc;border-color:#438dff}dialog{width:min(520px,calc(100% - 28px));max-height:85dvh;overflow:auto;border:1px solid #354264;border-radius:22px;background:#10182bed;color:#e2eaff;padding:30px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#030714a8;backdrop-filter:blur(9px)}h1{font-size:44px;letter-spacing:-.04em;margin:12px 0}h2{font-size:18px;margin-top:28px}h2 small{font-size:11px;color:#8192b4;font-weight:400}.eyebrow{font-size:10px;letter-spacing:.25em;color:#67baff}p,details{color:#9eafd0;font-size:14px;line-height:1.6}label{display:block;font-size:12px;color:#93a9cd;margin:18px 0 8px}select,input{width:100%}.actions{display:flex;gap:10px;margin:20px 0}details{margin:20px 0}summary{cursor:pointer}li{padding:5px;color:#b5c9eb;font-size:14px}#hud{position:fixed;top:82px;left:24px;display:flex;align-items:center;gap:16px;font-size:13px;color:#afc6ed}#hud[hidden]{display:none}footer{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center;font-size:12px;color:#7d91b7;pointer-events:none}form button{margin-top:15px}@media(max-width:600px){header{padding:16px}.brand small{display:none}header button{font-size:12px}#hud{top:66px;left:16px;gap:10px;font-size:11px}#hud button{padding:7px}dialog{padding:24px}footer{font-size:10px}h1{font-size:36px}}
/* Mission cards, readable faction identity, and fleet actions. */
[hidden]{display:none!important}
#battleInfo{position:fixed;top:130px;left:24px;font-size:12px;color:#a9bfde;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:11px;font-weight:700;letter-spacing:.06em;margin-bottom:10px}.blue{color:#53baff}.red{color:#ff637b}.green{color:#63e6ac}
progress{width:100%;height:6px;accent-color:#53baff;border:0;border-radius:8px;margin-top:10px}progress::-webkit-progress-bar{background:#23354d;border-radius:8px}progress::-webkit-progress-value{background:#53baff;border-radius:8px}
#selectionPanel{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);width:min(510px,calc(100% - 24px));background:#101c32f2;border:1px solid #416897;border-radius:14px;padding:14px 18px;font-size:13px;box-shadow:0 8px 35px #0008}#selectionDetail{font-size:12px;color:#a9bfde;margin-top:7px}#selectionPanel .actions{margin:10px 0 0}#selectionPanel button{padding:8px 12px;font-size:12px}
#missions{display:grid;gap:9px}.mission{display:grid;text-align:left;grid-template-columns:1fr auto;gap:6px;padding:15px}.mission strong{font-size:15px}.mission small{font-size:11px;color:#9aafd0}.mission span{grid-column:1/-1;font-size:12px;color:#94abc9}.mission.active{border-color:#53baff;background:#183254;box-shadow:inset 3px 0 #53baff}.mission.active span{color:#78caff}.storageNote{font-size:11px}#campaignProgress{color:#72c2ff}
@media(max-width:600px){#battleInfo{top:111px;left:16px;right:16px;font-size:10px}.legend{gap:12px;font-size:9px;margin-bottom:5px}#battleInfo progress{max-width:220px}#selectionPanel{bottom:53px;padding:11px}#selectionDetail{font-size:11px}.mission{grid-template-columns:1fr}.mission span{grid-column:auto}}
/* Campaign browser: eleven previews per chapter, without a duplicate dropdown. */
#menu{width:min(920px,calc(100% - 24px))}#menu h1{font-size:34px;margin:8px 0}.campaignHeader{display:flex;align-items:center;justify-content:space-between;gap:14px}.campaignHeader button{font-size:11px;padding:8px 12px}#chapters{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}#chapters button{flex:1;padding:9px;min-width:35px;font-size:12px}#chapters .active{background:#244971;border-color:#69bfff}.lockedChapter{color:#8192b4}#chapterTitle{margin:16px 0;font-size:17px}#missions{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.mission{display:flex;flex-direction:column;gap:4px;min-width:0;padding:9px}.mapThumbnail{display:block;width:100%;height:74px;object-fit:contain;pointer-events:none;background:#080e20;border-radius:6px}.mission strong{font-size:12px}.mission small,.mission span{font-size:10px}.mission.locked{background:#10192a;color:#8b9cb9}.mission.locked .mapThumbnail{opacity:.45}.mission.locked.active{border-color:#89a1c6}.missionBrief h2{margin:16px 0 4px}.missionBrief p{margin:6px 0;font-size:12px}#missionAccess{color:#7fc7ff}#menu .storageNote{font-size:10px;margin:10px 0}#menu .actions{margin:12px 0}#fleetStatus{position:fixed;top:190px;left:24px;font-size:11px;color:#dceaff;pointer-events:none;max-width:340px}#menu details{margin:12px 0}
@media(max-width:700px){#missions{grid-template-columns:repeat(3,minmax(0,1fr))}.mapThumbnail{height:60px}#menu{padding:18px}.mission strong{font-size:11px}.mission small,.mission span{font-size:9px}.campaignHeader{align-items:flex-start}#fleetStatus{top:174px;left:16px;font-size:10px;max-width:280px}}
@media(max-width:420px){#missions{grid-template-columns:repeat(2,minmax(0,1fr))}#chapters{gap:4px}#chapters button{min-width:25px;padding:8px 4px}.campaignHeader button{max-width:120px}.mission strong{font-size:12px}}
/* One compact control row, including on narrow phones. */
.gameControls{display:flex;align-items:center;gap:8px}.gameControls #hud{position:static;display:flex;align-items:center;gap:10px;font-size:12px}.gameControls #time{font-variant-numeric:tabular-nums;color:#9eafd0}.gameControls button{min-height:40px;padding:8px 12px;font-size:13px}header .brand{font-size:16px;letter-spacing:.18em}
@media(max-width:420px){header{padding:12px}.gameControls{gap:6px}.gameControls #hud{gap:7px;font-size:11px}.gameControls button{padding:8px 10px;font-size:12px}header .brand{font-size:13px;letter-spacing:.12em}}
#pauseOverlay{position:fixed;inset:0;display:grid;place-items:center;background:#080d2038;pointer-events:none}#pauseOverlay strong{font-size:clamp(26px,6vw,48px);letter-spacing:.24em;padding:22px 28px;border:1px solid #53698980;border-radius:14px;background:#0a1224e6;color:#edf5ff;box-shadow:0 10px 60px #0007}header{z-index:2}
/* Campaign and results are document pages, not scrolling modal dialogs. */
#space{position:fixed;inset:0}body[data-view="campaign"],body[data-view="result"]{overflow-y:auto;overflow-x:hidden;min-height:100dvh}body:not([data-view="battle"]) #space{visibility:hidden}body:not([data-view="battle"]) #hud,body:not([data-view="battle"]) #menuButton{display:none!important}.page,#menu.page,#result.page{position:relative;width:min(920px,calc(100% - 40px));max-height:none;overflow:visible;margin:0 auto;padding:100px 0 40px;border:0;border-radius:0;background:transparent;box-shadow:none}#result.page{max-width:600px;padding-top:24vh}.mission.active{box-shadow:none;border:1px solid #53baff}.page .mission.active{box-shadow:none}.page h1{font-size:44px}body:not([data-view="battle"]) header{background:#080d20ed}
@media(max-width:600px){.page,#menu.page,#result.page{width:calc(100% - 32px);padding:80px 0 28px}#result.page{padding-top:20vh}}
/* Central resume control stays within easy thumb reach. */
#pauseOverlay{pointer-events:auto}
#pauseResume{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px;border:0;background:transparent;box-shadow:none}
#pauseResume strong{padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:0 2px 20px #080d20}
#pauseResume span{font-size:14px;color:#b8d6f5;letter-spacing:.08em}
#pauseResume:hover span{color:#fff}
/* The ad follows the result and navigation, with no fixed height or clipping. */
#resultAd{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:100%;min-width:0;margin-top:56px;margin-bottom:env(safe-area-inset-bottom)}
#resultAd:has(ins[data-ad-status="unfilled"]){display:none}
body[data-view="mission"]{overflow-y:auto;overflow-x:hidden;min-height:100dvh}
#missionPage{max-width:720px}
#missionState{margin-top:28px}
#missionPreview .mapThumbnail{height:auto;aspect-ratio:24/13;max-height:340px;width:100%;margin:24px 0}
#missionTitle:focus{outline:none}
#missionPage .actions{flex-wrap:wrap}
/* A distinct wordmark that remains readable beside mobile game controls. */
header .brand{color:#eef3ff;font-size:20px;font-weight:900;letter-spacing:.1em;line-height:1.2;text-shadow:none}
header .brand:hover{color:#fff}
header .brand:focus-visible{outline:2px solid #59c3ff;outline-offset:5px;border-radius:2px}
@media(max-width:420px){header .brand{font-size:17px;letter-spacing:.06em}}
@media(max-width:350px){header .brand{font-size:15px;letter-spacing:.04em}.gameControls{gap:4px}.gameControls button{padding:8px}}

/* Equal result actions and a quiet frame around light or dark ad creatives. */
#result .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:stretch}
#result .actions button{width:100%;min-height:48px;margin:0;padding:12px 16px;line-height:1.4}
#resultAd{border:1px solid #34456880;border-radius:12px;padding:12px;background:#fff;overflow:visible}
#resultAd .adsbygoogle{min-width:0;max-width:100%;align-self:stretch;background:#fff}

#missionState.locked{color:#ff637b;font-size:14px;font-weight:700;letter-spacing:.12em}

/* A clear victory state; defeat keeps its own neutral presentation. */
#result[data-outcome="victory"] #resultTitle{color:#69efa5;text-shadow:0 0 28px #69efa524;line-height:1.12;text-wrap:balance}
#result[data-outcome="victory"] #resultStatus{color:#69efa5;font-weight:700;letter-spacing:.18em}
@media(max-width:600px){#result #resultTitle{font-size:clamp(30px,8vw,44px)}}

/* Native document scrolling is separate from battlefield gestures. */
body:not([data-view="battle"]) #space{visibility:hidden;pointer-events:none}
.page{touch-action:pan-y pinch-zoom}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:#53baff30}
button:active{background:#345176;transform:translateY(1px)}
.mission{scroll-margin-top:90px;scroll-margin-bottom:24px}
#cameraControls{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));right:16px;display:flex;gap:6px;z-index:2}
#cameraControls button{min-width:44px;min-height:44px;padding:8px 12px;background:#101b30e8}
body:not([data-view="battle"]) #cameraControls{display:none}

/* Mouse panning is a separate mode; touch keeps its two-finger gestures. */
#cameraControls #panMode{display:none;margin-right:10px;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){
  #cameraControls #panMode{display:inline-flex}
  #space[data-pan="true"]{cursor:grab}
  #space[data-pan="true"]:active{cursor:grabbing}
}
#cameraControls #panMode[aria-pressed="true"]{color:#8bd4ff;border-color:#53baff;background:#20496a}

#speedButton{min-width:82px;font-variant-numeric:tabular-nums}
@media(max-width:420px){
  header{flex-wrap:wrap;gap:6px}
  .gameControls{margin-left:auto}
  .gameControls #speedButton{min-width:68px;padding:8px 5px;font-size:11px}
}