:root{color-scheme:dark;--bg:#121a1c;--panel:#1b2527;--line:#354143;--cream:#f2e7d1;--muted:#aab6b3;--gold:#e4b971;--teal:#94d4c4;--red:#e39a82}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#263234 0,transparent 60%),var(--bg);color:var(--cream);font-family:Arial,Helvetica,sans-serif;font-size:14px}main{max-width:1450px;margin:auto;padding:0 44px}header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:var(--gold)}button{font:inherit;color:var(--cream);background:#273335;border:1px solid #465254;border-radius:5px;padding:12px 14px;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#3a4848}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:disabled{opacity:.4;cursor:default}button.selected{border-color:var(--gold);background:#e4b9711c;color:var(--gold)}.quiet{background:transparent;border-color:transparent;color:var(--muted)}.quiet:hover{background:#ffffff0b}.small{padding:6px 8px;font-size:12px}.wordmark{font-weight:bold;letter-spacing:-2px;font-size:27px;color:var(--cream);text-decoration:none}.wordmark span{color:var(--gold);font-family:Georgia,serif}.wordmark i{font-size:9px;font-style:normal;letter-spacing:2px;margin-left:18px;color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--gold);line-height:1.8;margin:0 0 12px}.intro{padding:32px 0 28px;display:flex;align-items:end;justify-content:space-between}h1{font-family:Georgia,serif;font-weight:400;font-size:58px;line-height:1;margin:0;letter-spacing:-2px}h1 em{color:var(--gold);font-weight:400}h1 span{font:10px Arial;letter-spacing:5px;margin-left:22px;vertical-align:middle;color:var(--muted)}.dek{font:17px/1.5 Georgia,serif;color:var(--muted);margin:0}nav{display:flex;gap:8px;margin-bottom:22px}nav button{flex:1;text-align:left;padding:12px;font-size:12px;background:transparent}nav button span{display:block;font-size:9px;letter-spacing:1px;color:var(--muted);margin-bottom:5px}.command-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}.field-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}.field-top{display:flex;align-items:center;justify-content:space-between;padding:19px 22px}.field-top .eyebrow{font-size:9px;margin:0}h2{font:26px/1.3 Georgia,serif;margin:0}.pill{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:9px;border-radius:4px}.arena{position:relative;aspect-ratio:1000/680;background:#a78e63;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:manipulation}.compass{position:absolute;top:20px;left:22px;color:#3b403a;font:bold 14px/1.6 Georgia;text-align:center;pointer-events:none}#toast{position:absolute;bottom:20px;left:10%;right:10%;text-align:center;background:#152023e8;padding:12px 18px;border:1px solid #7a8d83;border-radius:5px;color:var(--cream);font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}.field-bottom{display:flex;gap:14px;align-items:center;padding:16px 20px;font-size:10px;letter-spacing:1px}.field-bottom strong{color:var(--teal);margin-left:8px;font-size:14px}.health{height:4px;background:#ffffff12;flex:1;overflow:hidden;border-radius:3px}.health div{height:100%;background:var(--teal);transition:width .5s}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;background:var(--teal)}aside{display:flex;flex-direction:column;gap:12px}.card{border:1px solid var(--line);background:var(--panel);padding:17px;border-radius:6px}.section-label{font-size:10px;letter-spacing:1.4px;color:var(--cream);margin-bottom:15px}.section-label span{color:var(--gold);margin-right:9px;font-size:9px}.enemy-health{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--muted);margin-bottom:8px}.enemy-health b{color:var(--red)}.enemy div{background:var(--red)}.zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}.zone-grid button{font-size:11px;padding:9px 7px;display:flex;justify-content:space-between;align-items:center}.zone-grid small{color:var(--muted);font-size:10px}.zone-grid .good{color:var(--teal)}.readout{display:flex;justify-content:space-between;margin-top:15px}.readout span{display:block;font-size:8px;letter-spacing:1px;color:var(--muted);margin-bottom:5px}.readout strong{font:23px Georgia}.prediction{margin:10px 0 0;font-size:11px;line-height:1.5;color:var(--teal)}.segmented{display:flex;gap:5px}.segmented button{padding:8px 0;flex:1;font-size:11px}.muted{font-size:11px;color:var(--muted);line-height:1.55;margin:12px 0 0}.shells{display:flex;gap:6px;margin-bottom:11px}.shells button{flex:1;padding:9px 4px;font-size:11px}.shells small{display:block;font-size:9px;margin-top:3px;opacity:.7}.fire{width:100%;background:var(--gold);color:#182226;font-weight:bold;display:flex;justify-content:space-between;padding:14px}.fire:hover{background:#f3cb88}.fire span{font-size:9px;letter-spacing:1px;padding-top:3px}.moves{display:flex;gap:7px;margin-top:8px}.moves button{flex:1;font-size:10px;padding:9px 5px}.cost{font-size:9px;line-height:1.6;color:var(--muted);margin:10px 0 0}.briefing{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:25px 0;border-bottom:1px solid var(--line)}.briefing p:not(.eyebrow){font:15px/1.6 Georgia;color:#c7cfca;margin:0;max-width:560px}#log{margin:0;padding:0;list-style:none;font-size:11px;line-height:1.7;color:var(--muted)}#log li:last-child{color:var(--cream)}footer{display:flex;align-items:center;gap:10px;padding:16px 0 24px;color:var(--muted);font-size:10px}footer>span{margin-right:auto}dialog{max-width:580px;max-height:85vh;padding:36px;background:#1a2628;color:var(--cream);border:1px solid #65736d;border-radius:10px;line-height:1.7}dialog::backdrop{background:#050d10c9;backdrop-filter:blur(5px)}dialog h2{font-size:32px}dialog p{color:#c1ceca}dialog .close{position:absolute;right:12px;top:10px;padding:3px 10px;background:transparent;font-size:24px;border:0}#manual-done{background:var(--gold);color:var(--bg)}#result{position:absolute;inset:0;background:#152023dd;backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}#result[hidden]{display:none}#result h2{font-size:42px}#result p{max-width:400px;line-height:1.7;color:var(--muted)}#result #continue{background:var(--gold);color:var(--bg);margin:12px}#result .eyebrow{color:var(--gold)}@media(min-width:1200px){.arena{min-height:540px}}@media(max-width:1050px){main{padding:0 22px}.command-layout{grid-template-columns:minmax(0,1fr) 290px;gap:14px}.card{padding:13px}h1{font-size:48px}h1 span{display:block;margin:12px 0 0}nav button{font-size:10px;padding:10px 7px}.field-bottom{gap:8px;padding:12px}.field-bottom>.health{display:none}.field-top{padding:14px}}@media(max-width:900px){main{padding:0 14px}header{height:62px}.wordmark i{font-size:8px;margin-left:10px}.intro{padding:25px 0}.dek{display:none}h1{font-size:43px}h1 span{display:inline;font-size:8px;margin-left:12px;letter-spacing:3px}.eyebrow{font-size:8px}nav{gap:4px;overflow:auto}nav button{min-width:105px;flex:1}.command-layout{display:block}.arena{min-height:0}aside{margin-top:14px;display:flex;flex-direction:column}.segmented button{min-height:40px}.shells button,.zone-grid button,.moves button{min-height:40px}.card:first-child{grid-column:1/-1}.zone-grid{grid-template-columns:repeat(4,1fr)}.briefing{grid-template-columns:1fr;gap:20px}.field-bottom{font-size:9px}.field-bottom .small{font-size:11px}.readout{justify-content:start;gap:35px}.moves{flex-wrap:wrap}.cost{font-size:8px}footer{flex-wrap:wrap}footer>span{width:100%}#result h2{font-size:30px}#result p{font-size:12px;margin:7px}.field-top h2{font-size:22px}.compass{left:10px;top:12px;font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
