:root{font-family:Arial,sans-serif;color:#f8efd9;background:#343a46;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;min-height:44px;padding:12px 20px;border:1px solid #f4c77a70;background:#17201dcc;color:#f8efd9;cursor:pointer}button:hover{background:#6c633d}button:focus-visible{outline:3px solid #f4c77a}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px 36px;background:linear-gradient(#15202bd9,transparent);pointer-events:none}header button{pointer-events:auto}small{font-size:10px;letter-spacing:3px;color:#f4c77a}h1{font-size:27px;letter-spacing:8px;margin:8px 0}h1 span{font-size:10px;letter-spacing:3px;display:block;margin-top:8px}main{position:fixed;top:24%;left:6%;max-width:440px;max-height:65vh;overflow:auto;padding:30px;background:linear-gradient(90deg,#182228dc,#18222830)}h2{font-family:Georgia,serif;font-size:52px;font-weight:400;line-height:1.06;margin:20px 0}p{line-height:1.6;color:#eee4cd}#start{background:#f4c77a;color:#242a2c;font-weight:bold;width:100%;margin:16px 0}.note{font-size:12px}footer{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:15px 28px;background:linear-gradient(transparent,#182228d9);font-size:11px}#hud{position:fixed;left:30px;bottom:80px;display:flex;gap:35px;padding:18px 25px;background:#17201dc9}#hud[hidden]{display:none}#hud strong{display:block;font-size:20px;margin-top:8px}#reticle{position:fixed;left:50%;top:45%;font-size:30px;color:#fff7d9;transform:translate(-50%,-50%);pointer-events:none}#touch{display:none}#rotate{display:none}#touch button{touch-action:none;min-width:48px;margin:3px}@media(pointer:coarse){#touch{position:fixed;bottom:72px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:end}#hud{left:auto;right:20px;top:85px;bottom:auto;font-size:11px;gap:14px;padding:8px}#hud strong{font-size:14px}header{padding:12px 20px}h1{font-size:20px}h2{font-size:34px}main{top:20%;padding:20px;max-height:65vh}footer{padding:8px 16px}}@media(max-width:700px) and (orientation:portrait){#rotate{display:flex;position:fixed;inset:0;background:#202a35;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center}#rotate h2{font-size:34px}}
#warning{position:fixed;top:110px;left:50%;transform:translateX(-50%);color:#ffcf82;background:#3b2417bb;padding:10px 18px;font-size:14px;pointer-events:none}#warning:empty{display:none}
#enemy-marker{position:fixed;transform:translate(-50%,-100%);pointer-events:none;text-align:center;font-size:10px;letter-spacing:1px;color:#ffd2b4;text-shadow:0 1px 3px #000}#enemy-marker span{background:#451f16d9;padding:4px 7px;display:block}#enemy-marker progress{display:block;width:100%;height:5px;accent-color:#ff8452}footer{font-size:13px}main{background:linear-gradient(90deg,#182228ef,#182228b0)}
@media(max-width:700px) and (orientation:portrait){#rotate{inset:auto 0 0;height:22vh;padding:14px;z-index:5}#rotate h2{font-size:24px;margin:0 0 8px}#rotate p{margin:0}#touch,footer{display:none}header{padding:15px}h1{font-size:20px}#hud{bottom:auto;top:120px;left:12px;right:12px;padding:8px;gap:12px}#hud strong{font-size:14px}#intro{top:24%;max-height:45vh}#warning{top:190px;width:90%;text-align:center}}
#touch{touch-action:none}
footer{justify-content:flex-end;gap:12px}footer #status{margin-right:auto;max-width:52%}
@media(pointer:coarse) and (orientation:landscape){#intro{left:2%;top:24%;width:29%;max-height:60vh;padding:14px}#intro h2{font-size:26px;margin:10px 0}#intro p{font-size:12px;line-height:1.4}#intro #start{padding:10px;margin:8px 0}footer{gap:8px;font-size:11px}footer button{font-size:11px;padding:10px}footer #status{max-width:47%}}
@media(max-width:700px) and (orientation:portrait){#intro{left:3%;top:23%;width:94%;max-height:27vh;padding:12px}#intro h2{font-size:26px;margin:8px 0}#intro p{font-size:12px;margin:5px 0}#intro .note{display:none}#intro #start{margin:6px 0}}
@media(max-width:700px) and (orientation:portrait){body[data-phase="defeat"] #hud{display:none}#intro[data-screen="defeat"]{top:108px;max-height:152px;padding:8px 12px}#intro[data-screen="defeat"]>small{display:none}#intro[data-screen="defeat"] h2{font-size:20px;margin:0 0 3px}#intro[data-screen="defeat"] p{font-size:11px;line-height:1.2;margin:3px 0}#intro[data-screen="defeat"] #start{margin:3px 0;padding:8px;min-height:44px}}
body:not([data-phase="playing"]) #touch{display:none}#rotation-shield{display:none}@media(max-width:700px) and (orientation:portrait){#rotation-shield{display:block;position:fixed;inset:0;z-index:4;background:transparent;touch-action:none}}

#vehicle-select{display:flex;gap:.5rem;margin:1rem 0}#vehicle-select button{flex:1;font-size:.85rem;padding:.65rem}#vehicle-select button[aria-pressed="true"]{background:#efc577;color:#1e2625}body[data-phase="defeat"] #vehicle-select{display:none}

#tactical-map{inset:auto 24px 150px auto;width:140px;height:140px;pointer-events:none;border:1px solid #f4c77a55}#objective{position:fixed;right:28px;top:92px;font-size:12px;padding:8px;background:#17201dcc;color:#f4c77a;max-width:45%;text-align:right}#tactical-map[hidden],#objective[hidden]{display:none}@media(pointer:coarse){#tactical-map{width:90px;height:90px;right:auto;left:12px;top:82px;bottom:auto}#objective{top:64px;right:12px;font-size:10px;padding:5px;max-width:65%}}@media(orientation:portrait){#tactical-map,#objective{display:none}}
@media(pointer:coarse) and (orientation:landscape){#warning{top:178px;left:12px;transform:none;padding:6px 10px;font-size:12px;max-width:32%;text-align:left}}
@media(max-width:700px) and (orientation:portrait){#enemy-marker{display:none!important}}
/* Scrollable player menus, native modal focus containment, and generated stage paintings. */
[hidden]{display:none!important}.intro-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}.intro-links button{padding:8px;font-size:13px}#intro{max-height:calc(100dvh - 190px);top:150px}#flow-dialog{border:1px solid #f4c77a80;padding:0;width:min(900px,94vw);max-width:94vw;max-height:90dvh;background:#19232a;color:#f8efd9;overflow:auto}#flow-dialog::backdrop{background:#101820bd;backdrop-filter:blur(3px)}.flow-card{position:relative}.flow-copy{padding:24px 30px}.flow-copy h2{font-size:38px;margin:12px 0 20px}.flow-copy small{letter-spacing:2px}.flow-copy button{margin:4px 4px 4px 0}.flow-copy p{max-width:65ch}.flow-copy a{color:#f4c77a}.flow-copy details{border-top:1px solid #f4c77a40;padding:12px 0}.flow-copy summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.flow-copy label{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:52px;border-bottom:1px solid #f4c77a30}.flow-copy input[type=checkbox]{width:24px;height:24px;accent-color:#f4c77a}.flow-copy input[type=range]{max-width:45%;min-height:44px;accent-color:#f4c77a}#briefing-art{display:block;width:100%;height:auto;max-height:44dvh;object-fit:cover}#briefing-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}#tutorial-next,#briefing-enter{background:#f4c77a;color:#182228;font-weight:bold}body[data-screen=title] #pause,body[data-screen=victory] #pause,body[data-screen=defeat] #pause{visibility:hidden}body:has(#flow-dialog[open]) #warning{visibility:hidden}
@media(pointer:coarse) and (orientation:landscape){#intro{top:82px;width:39%;max-height:calc(100dvh - 140px)}#intro .intro-links{grid-template-columns:1fr 1fr}#intro .intro-links button{font-size:12px}#flow-dialog{width:94vw;max-height:94dvh}.flow-copy{padding:18px 24px}.flow-copy h2{font-size:28px;margin:10px 0}#flow-dialog[data-screen=cutscene] .flow-card{display:grid;grid-template-columns:46% 54%;min-height:310px}#flow-dialog[data-screen=cutscene] #briefing-art{height:100%;max-height:none;object-fit:cover}.flow-copy p{font-size:14px}footer #status{max-width:34%}footer{gap:5px}footer button{padding:8px}}
@media(max-width:700px) and (orientation:portrait){#intro,#intro[data-screen=defeat]{top:110px;left:4%;width:92%;max-height:calc(78dvh - 130px);padding:18px}#intro[data-screen=defeat] h2{font-size:28px}#intro p{font-size:14px}.flow-copy{padding:20px}.flow-copy h2{font-size:30px}#flow-dialog{max-height:94dvh}#rotation-shield{display:none}body[data-screen=gameplay] #rotation-shield{display:block}#briefing-list{grid-template-columns:1fr}}
.flow-copy a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}button:disabled{opacity:.5;cursor:default}
#debug-tools{position:fixed;z-index:3;right:12px;top:12px;width:min(340px,94vw);max-height:calc(100dvh - 24px);overflow:auto;background:#132029f5;border:1px solid #d5b777;color:#f7efd9;font-size:12px}#debug-tools>summary{cursor:pointer;min-height:44px;padding:14px;font-weight:bold}#debug-tools .debug-content{padding:0 14px 14px}#debug-tools dl{margin:10px 0}#debug-tools .runtime-performance-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px 0;border-bottom:1px solid #ffffff20}#debug-tools dd{margin:0;text-align:right}#debug-tools [data-status=red]{color:#ff9b87}#debug-tools [data-status=amber]{color:#ffcf77}#debug-tools .runtime-performance-overall{float:right}#debug-tools .postprocessing-lab{border-top:1px solid #ffffff50;margin-top:12px}#debug-tools .postprocessing-lab summary{min-height:44px;display:flex;align-items:center;cursor:pointer}#debug-tools label{display:block;padding:4px 0}#debug-tools .postprocessing-lab-label{display:flex;justify-content:space-between}#debug-tools input[type=range],#debug-tools select{width:100%;min-height:44px}#debug-tools select{background:#253541;color:#fff;font:inherit}#debug-tools .postprocessing-lab-toggle{display:flex;align-items:center;gap:8px;min-height:44px}#debug-tools input[type=checkbox]{width:24px;height:24px}#debug-tools .debug-guidance{font-size:11px;color:#d6dfe2}#debug-tools :focus-visible{outline:2px solid #f4c77a}
@media(pointer:coarse){#touch{left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));bottom:calc(72px + env(safe-area-inset-bottom,0px))}header{padding-top:max(12px,env(safe-area-inset-top,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}footer{padding-bottom:max(8px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
#intro h2{line-height:1.18}#intro[data-screen=defeat] .intro-links,#intro[data-screen=defeat] .note,#intro[data-screen=defeat] #vehicle-select{display:none}
@media(pointer:coarse) and (orientation:landscape){#intro[data-screen=defeat]{left:2%;top:24%;width:29%;max-height:60vh;padding:14px}#intro[data-screen=defeat] h2{font-size:26px;margin:10px 0}}
@media(max-width:700px) and (orientation:portrait){#intro[data-screen=defeat]{left:3%;top:108px;width:94%;max-height:152px;padding:8px 12px}#intro[data-screen=defeat] h2{font-size:20px;margin:0 0 3px}#intro[data-screen=defeat] p{font-size:11px;line-height:1.2;margin:3px 0}#intro[data-screen=defeat] #start{margin:3px 0;padding:8px;min-height:44px}}
