:root{color-scheme:dark;--navy:#122d36;--paper:#f5efd9;--gold:#f4c867;--muted:#a5b7b7}*{box-sizing:border-box}body{margin:0;background:#0c2028;color:var(--paper);font-family:Segoe UI,Arial,sans-serif}main{max-width:1256px;margin:auto;padding:24px 28px}header,.hud,.bottom,.selection,footer{display:flex;align-items:center;justify-content:space-between;gap:20px}header{margin-bottom:22px}h1{font-size:27px;letter-spacing:-.6px;margin:5px 0}h2{font-size:36px;margin:14px 0}.eyebrow,small{font-size:11px;font-weight:750;letter-spacing:2px;color:var(--gold)}.level{border:1px solid #45606a;border-radius:30px;padding:10px 18px;font-size:12px;letter-spacing:1px}.hud{background:var(--navy);border:1px solid #34505a;padding:15px 24px;border-radius:15px 15px 0 0}.hud>div{min-width:100px}.hud small{display:block;color:var(--muted);font-size:10px}.hud strong{display:block;font-size:21px;margin-top:4px}button{font:600 14px Segoe UI,Arial,sans-serif;background:var(--gold);color:#172c32;border:0;border-radius:8px;padding:13px 21px;cursor:pointer;transition:filter .15s}button:hover:not(:disabled){filter:brightness(1.12)}button:disabled{cursor:default;opacity:.42}button:focus-visible{outline:3px solid white;outline-offset:3px}#pause{background:#284750;color:var(--paper)}.board{position:relative;background:#93ad70}canvas{display:block;width:100%;height:auto;cursor:crosshair}.overlay{position:absolute;inset:0;background:#09252ab8;display:flex;align-items:center;justify-content:center;padding:20px}.overlay[hidden]{display:none}.overlay article{max-width:490px;background:#112e37;border:1px solid #59716c;box-shadow:0 20px 80px #0005;padding:34px;border-radius:18px}.overlay p,.overlay li{font-size:15px;line-height:1.7;color:#d1ddd8}.overlay ul{padding-left:19px;margin:20px 0 25px}.bottom{border:1px solid #34505a;border-top:0;border-radius:0 0 15px 15px;padding:18px 24px;background:var(--navy)}p{margin:6px 0 0;font-size:14px;line-height:1.5}.selection{padding:20px 24px;margin-top:15px;background:#18343c;border:1px solid #34505a;border-radius:12px;min-height:88px}.selection p{color:#bdd0cc}footer{font-size:12px;color:#8fa7ab;padding:18px 2px}footer b{color:#c2d4d2}i{padding:0 12px;font-style:normal}@media(max-width:700px){main{padding:12px}.hud{gap:8px;padding:12px}.hud>div{min-width:0}.hud strong{font-size:14px}.hud small{font-size:8px;letter-spacing:1px}header h1{font-size:20px}.level{display:none}.bottom,.selection{align-items:flex-start;flex-direction:column;padding:15px}footer{display:block;font-size:11px}footer>span{display:block;margin-top:5px}.overlay article{padding:16px}.overlay h2{font-size:24px}.overlay p,.overlay li{font-size:12px}.overlay ul{margin:8px 0}.overlay button{padding:9px}.eyebrow{font-size:9px}}
.time-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.time-controls button{padding:10px 12px;white-space:nowrap}#speed{background:#35565c;color:#f4d785}.hud{gap:12px}.hud>div{min-width:0}
@media(min-width:800px){main{max-width:min(1256px,calc((100dvh - 300px)*1.6667 + 56px));min-width:680px;padding-top:14px;padding-bottom:10px}header{margin-bottom:12px}h1{font-size:22px;margin:3px 0}.hud{padding:10px 18px}.hud strong{font-size:18px}.bottom{padding:10px 18px}.selection{padding:10px 18px;margin-top:10px;min-height:70px}footer{padding:10px 0;font-size:10px}footer i{padding:0 5px}.overlay article{padding:24px}.overlay h2{font-size:29px}.overlay p,.overlay li{font-size:13px}.overlay ul{margin:10px 0 15px}}

.map-picker{display:flex;align-items:center;gap:12px;margin:12px 0;color:#ebdbb3;font-size:13px}.map-picker select{background:#274650;color:#f6e5b9;padding:8px;border:1px solid #678080;border-radius:6px;font:inherit}#next{margin-right:8px;margin-bottom:8px}button[hidden]{display:none}

#branches{display:flex;gap:8px;flex-wrap:wrap;min-width:230px}#branches[hidden]{display:none}#cannon{background:#b0c5bf}#flame{background:#edac69}#difficultyInfo{font-size:11px;color:#c4d5ca;margin:8px 0 14px}.overlay article{max-height:100%;overflow:auto}.map-picker{margin:8px 0}.selection>div:first-child{flex:1}.selection button{flex-shrink:0}#branches button{font-size:12px;padding:10px}

#cameraTools{display:flex;align-items:center;gap:8px;padding:8px;background:#1d3b40;flex-wrap:wrap}#cameraTools[hidden]{display:none}#cameraTools button{padding:7px 10px;font-size:11px}#cameraTools small{font-size:9px;letter-spacing:0;color:#c7d3be}

#treasuryDetail{display:block;font-size:9px;color:#b4c7b9;margin-top:3px}#constructionChoice{display:flex;gap:8px;align-items:center;font-size:12px;flex-wrap:wrap}#constructionChoice[hidden]{display:none}#constructionType{max-width:260px;background:#274650;color:#f4e2b9;border:1px solid #688075;padding:8px;border-radius:5px}#sell{background:#69504c;color:#ffe4c7;font-size:12px;padding:10px}.selection{flex-wrap:wrap}

body{background:radial-gradient(ellipse at top,#27434a,#0b1d26 75%)}.board{border:1px solid #68776b;box-shadow:0 20px 60px #0004}button{box-shadow:inset 0 1px #fff3,0 2px 3px #0002}#sound{background:#284750;color:#e3d9bd}dialog{width:min(420px,90vw);border:1px solid #9e936c;border-radius:16px;background:#16343d;color:#f4e5bb;padding:25px}dialog::backdrop{background:#071b26bb}#records p{padding:8px;border-bottom:1px solid #ffffff15}input{font:inherit;padding:10px;background:#284852;color:#fff2ce;border:1px solid #8c997c;border-radius:6px;max-width:100%}#nameForm button{margin:12px 0}#storageStatus{font-size:11px}#showRecords{background:#35555e;color:#eddbb0;margin:8px 5px 8px 0}.overlay article{border-color:#a0936b;background:linear-gradient(145deg,#24434a,#122d36)}.selection button{font-size:12px;padding:10px 12px}@media(max-width:700px){.board{min-height:390px}.overlay{padding:8px}.overlay article{padding:14px}.overlay h2{margin:5px 0}.map-picker select{max-width:230px}.time-controls button{font-size:10px;padding:6px}}

.hud strong{white-space:nowrap}.hud .time-controls{flex:0 0 190px}.time-controls button{font-size:11px;padding:8px 10px}.hud small{letter-spacing:1px}.scoreRules{font-size:11px!important}@media(max-width:700px){.hud{flex-wrap:wrap}.hud .time-controls{flex-basis:auto}}

.battle-summary{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 14px;background:#203d42;color:#ddcfaa;font-size:11px;border-inline:1px solid #526c65}

@media(min-width:1000px){main{max-width:1256px;min-width:0;padding-top:18px}.hud{padding:12px 20px}h1{font-size:25px}.board{border-color:#7d8065}.overlay article{max-width:500px}}