:root{color-scheme:dark;--bg:#10181e;--panel:#18232a;--line:#2d3b42;--ink:#edf0ea;--muted:#a6b3b8;--gold:#dfbb80;--blue:#5ca9d8;--red:#d47965}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'Segoe UI',Arial,sans-serif}button,select,input{font:inherit}button,select{cursor:pointer;color:inherit;border:1px solid var(--line);background:var(--panel);border-radius:5px}button{padding:9px 13px}button:hover,select:hover{background:#2b3a43}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.3;cursor:default}header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:40px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);font-size:17px;letter-spacing:2.6px;font-weight:650}.brand small{display:block;font-size:10px;letter-spacing:3.5px;font-weight:400;color:var(--muted);margin-top:3px}.mark{font:24px Georgia,serif;color:var(--gold);border:1px solid #90784e;padding:5px 6px;letter-spacing:-3px;padding-right:9px}.header-note{font-size:12px;letter-spacing:2px;color:var(--muted);margin-left:auto}.header-note span{margin-left:14px;color:var(--gold)}.quiet{font-size:14px;background:transparent}main{display:grid;grid-template-columns:235px minmax(0,1fr);min-height:calc(100vh - 88px)}aside{padding:31px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--gold);font-weight:600}aside>.eyebrow{padding:0 10px;margin-bottom:25px}nav{display:flex;flex-direction:column;gap:9px}.battle-item{border:1px solid transparent;background:transparent;text-align:left;padding:13px 12px;width:100%;border-radius:4px;position:relative}.battle-item .meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);letter-spacing:.4px}.battle-item strong{font:24px Georgia,serif;display:block;margin:6px 0}.battle-item small{font-size:12px;color:var(--muted)}.battle-item.active{background:#243139;border-color:#455050}.battle-item.active:before{content:'';position:absolute;left:-1px;top:15px;bottom:15px;width:3px;background:var(--gold)}.battle-item.active strong{color:var(--gold)}.library-foot{margin-top:auto;padding:32px 10px 0;color:var(--muted)}.library-foot p{font:italic 17px/1.6 Georgia,serif}.library-foot small{font-size:12px}.tiny-line{display:block;width:30px;height:1px;background:var(--gold)}.workspace{min-width:0;padding:24px 30px 16px}.battle-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}h1{font:40px/1.1 Georgia,serif;margin:8px 0 0;letter-spacing:-.8px}h1 span{color:var(--muted);font:16px 'Segoe UI',sans-serif;margin-left:18px;letter-spacing:0}.view-toggle{padding:4px;border:1px solid var(--line);border-radius:7px;display:flex;white-space:nowrap}.view-toggle button{font-size:14px;background:none;border:0;padding:8px 14px}.view-toggle .active{background:#3c4a50;color:#fff}.field{height:clamp(390px,49vh,650px);position:relative;border:1px solid #43514e;border-radius:7px;overflow:hidden;background:#293b43}canvas{display:block;width:100%;height:100%;touch-action:none}canvas[hidden]{display:none}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.troop-label{position:absolute;transform:translate(-50%,-100%);font-size:12px;white-space:nowrap;padding:3px 7px;background:#101b23d9;border:1px solid #5ca9d880;border-radius:3px;color:#e9f4fc;text-shadow:0 1px #000;pointer-events:auto;cursor:pointer}.troop-label.enemy{border-color:#d4796580;color:#ffe1d6}.troop-label.selected{box-shadow:0 0 0 2px var(--gold)}.field-top,.field-bottom{position:absolute;left:19px;right:19px;display:flex;justify-content:space-between;gap:20px;pointer-events:none}.field-top{top:15px;font-size:11px;letter-spacing:1.8px;color:#faf7df}.field-top span{background:#14212ac7;padding:5px 9px;border-radius:3px}.field-bottom{bottom:14px;align-items:flex-end;font-size:12px}.field-bottom>span{padding:5px 8px;background:#14212acd;color:#e1e8e9;border-radius:3px}.camera-tools{position:absolute;right:16px;top:57px;display:flex;gap:7px}.camera-tools button{font-size:13px;padding:7px 11px;background:#14212add}.camera-tools button.active{border-color:var(--gold);color:var(--gold)}#legend{display:flex;gap:14px;flex-wrap:wrap;background:#14212ae8;padding:6px 9px;border-radius:3px;color:#e8f1f6}#legend span:before{content:'';display:inline-block;background:var(--blue);width:9px;height:9px;margin-right:7px;transform:rotate(45deg)}#legend span:last-child:before{background:var(--red)}.playback{display:flex;align-items:center;gap:10px;padding:18px 0 12px}.play{border:0;background:var(--gold);color:#162029;width:44px;height:42px}.play:hover{background:#f7d49c}.step-control{border:0;background:transparent;padding:7px 5px}.playback #phaseCount{font-size:13px;color:var(--muted);white-space:nowrap;margin:0 6px}input[type=range]{accent-color:var(--gold);flex:1;min-width:35px;cursor:pointer}select{padding:5px 7px;font-size:13px}.phases{display:grid;grid-template-columns:repeat(var(--count),1fr);gap:7px}.phases button{text-align:left;background:none;border:0;border-top:2px solid var(--line);border-radius:0;color:var(--muted);font-size:12px;padding:10px 2px 7px;line-height:1.4}.phases button span{display:block;font-size:11px;margin-bottom:4px;letter-spacing:1px;color:#7d949e}.phases button.active{border-top-color:var(--gold);color:var(--ink)}.phases button.active span{color:var(--gold)}.story{display:grid;grid-template-columns:1.5fr 1fr;gap:45px;border-top:1px solid var(--line);margin-top:18px;padding-top:22px}.story h2{font:27px Georgia,serif;margin:8px 0 11px}.story p{font-size:15px;color:#bec9cd;margin:0;line-height:1.7}.watch{border-left:1px solid var(--line);padding-left:25px}.watch p{margin:10px 0}.watch>span{font-size:12px;color:var(--gold)}footer{font-size:11px;color:#84949b;padding-top:20px}dialog{max-width:670px;width:calc(100% - 30px);max-height:85vh;background:#18232a;border:1px solid #566167;border-radius:10px;padding:28px;color:var(--ink)}dialog::backdrop{background:#081015bb;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}dialog h2{font:32px Georgia,serif}dialog h3{font-size:16px;color:var(--gold)}dialog p{color:#c5cfd3;font-size:15px}dialog a{color:#8dcaf1}#unitCard{position:absolute;left:15px;top:58px;background:#132029ed;border:1px solid #647471;border-radius:5px;padding:12px 15px;max-width:260px;box-shadow:0 5px 20px #0004}#unitCard strong{display:block;font-family:Georgia,serif;font-size:18px}#unitCard small{display:block;color:var(--muted);margin-top:5px}#unitCard button{position:absolute;right:2px;top:2px;padding:0 5px;border:0;background:transparent}#flightPad{position:absolute;bottom:60px;right:20px;display:grid;grid-template-columns:repeat(3,36px);gap:5px}#flightPad[hidden]{display:none}#flightPad button{padding:4px;background:#172830dc}#error{position:absolute;left:20px;bottom:65px;max-width:420px;background:#15232af2;padding:14px;border:1px solid var(--gold);font-size:14px}
@media(min-width:1700px){.workspace{padding:30px 45px}.field{height:56vh}}@media(max-width:1000px){header{padding:0 20px}.header-note{display:none}.quiet{margin-left:auto}main{grid-template-columns:180px 1fr}aside{padding:25px 10px}.workspace{padding:22px 20px}.battle-heading{align-items:flex-start}h1{font-size:34px}.view-toggle{flex-direction:column}.field-bottom>span{display:none}.story{gap:20px}.camera-tools span{display:none}.battle-item strong{font-size:22px}}@media(max-width:700px){header{height:72px;padding:0 15px;gap:10px}.brand{font-size:14px;letter-spacing:1.4px}.brand small{font-size:9px;letter-spacing:2px}.quiet{font-size:12px;max-width:125px;padding:6px}main{display:block}aside{padding:14px 15px;border-right:0;border-bottom:1px solid var(--line)}aside>.eyebrow,.library-foot{display:none}nav{flex-direction:row;overflow-x:auto;gap:6px}.battle-item{min-width:130px;padding:7px 10px}.battle-item .meta{font-size:10px}.battle-item small{display:none}.battle-item strong{font-size:20px;margin:3px 0}.workspace{padding:18px 12px}.battle-heading{gap:10px;margin-bottom:15px}.battle-heading .eyebrow{font-size:10px;letter-spacing:1px}h1{font-size:32px}h1 span{font-size:13px;margin-left:9px}.view-toggle{padding:2px}.view-toggle button{font-size:12px;padding:5px 7px}.field{height:470px}.field-top{left:10px;right:10px;font-size:9px;letter-spacing:1px}.camera-tools{top:49px;right:10px}.camera-tools button{font-size:12px;padding:6px 8px}.field-bottom{left:10px;right:10px;bottom:10px}#legend{gap:10px;font-size:11px}.troop-label{font-size:10px;padding:2px 4px}.playback{gap:6px}.playback #phaseCount{font-size:11px;margin:0}.phases{gap:5px;overflow-x:auto;grid-template-columns:repeat(var(--count),minmax(85px,1fr))}.phases button{font-size:11px}.story{grid-template-columns:1fr;gap:18px}.watch{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}.story h2{font-size:25px}.field-top #terrainBadge{display:none}#unitCard{max-width:200px;top:90px}footer{font-size:10px}}

/* Expanded cinematic battlefield */
.field{height:clamp(440px,57vh,780px)}
.camera-tools{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 28px)}
.camera-tools select{background:#14212aeb;border-color:#586463;padding:7px 9px;font-size:13px;color:#f4eee1}
.field:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}.field:fullscreen .camera-tools{top:60px}
#scene{background:#c4b69b}.camera-tools button,#cameraPreset,#quality{backdrop-filter:blur(8px)}
@media(max-width:700px){.field{height:510px}.camera-tools{gap:5px;top:45px}.camera-tools select{font-size:11px;max-width:143px;padding:6px}.camera-tools #reset{display:none}.field-top{font-size:9px}.camera-tools button{font-size:11px;padding:6px}#unitCard{top:128px}}