:root{font-family:Arial,Helvetica,sans-serif;color:#f0eddc;background:#151d18;--line:#53604f;--muted:#b5bfad;--gold:#dbc17e;--red:#ce5141}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #f6d78b;outline-offset:2px}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.4}.hidden{display:none!important}.menu-screen{position:relative;min-height:100dvh;overflow:hidden}.menu-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#111b19d9,#111b1999),linear-gradient(0deg,#131e18 2%,transparent 70%),url(asset.png) center/cover}.menu-header,.menu-content,footer{position:relative;z-index:1}.menu-header{padding:25px 5vw;border-bottom:1px solid #c8ccb526;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:13px;align-items:center;font-weight:900;font-size:25px;letter-spacing:1px;color:inherit;text-decoration:none}.brand>b{color:var(--red)}.brand span b{color:#e97560}.brand small{font:9px monospace;display:block;letter-spacing:3px;margin-top:4px;color:#bcc8b6}.ready{font:10px monospace;letter-spacing:2px;color:#c7d2bf}.ready i{display:inline-block;width:6px;height:6px;background:#a2c882;border-radius:50%;margin-right:8px;box-shadow:0 0 9px #a3d886}.menu-content{max-width:1450px;margin:auto;padding:50px 5vw;min-height:calc(100dvh - 144px);display:grid;grid-template-columns:1fr 430px;gap:60px;align-items:center}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--gold)}.hero h1{font-size:clamp(46px,5.5vw,88px);line-height:.99;letter-spacing:-3px;font-weight:900;margin:25px 0}.hero h1 em{font-style:normal;color:#e26a56}.hero p{color:#c8d0be;font-size:20px;line-height:1.5}.hero-tags{display:flex;gap:10px;margin-top:35px}.hero-tags span{border:1px solid #bcc8b647;background:#17201988;padding:8px;font:9px monospace;letter-spacing:1px}.menu-panel{background:linear-gradient(130deg,#2c382fef,#1d2820f5);border:1px solid #77826a;border-top:3px solid #d86953;padding:25px;box-shadow:0 25px 75px #0008}.panel-label{display:flex;justify-content:space-between;font:9px monospace;color:#b8c1ac;letter-spacing:1px;margin-bottom:18px}.panel-label b{color:#d1bf87}.menu-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-bottom:1px solid #52614d;padding-bottom:12px}.menu-tabs button{background:transparent;border:1px solid #637158;padding:12px 4px;font-size:11px;font-weight:700;letter-spacing:1px;color:#afbaa5}.menu-tabs button.active{background:#61694c;color:#fff5d5;border-color:#b0ae7e;box-shadow:inset 0 -2px #e5ba76}h2{font-size:25px;letter-spacing:-.5px;margin:23px 0 8px}.muted{color:#b5c0ac;font-size:13px;line-height:1.55;margin:0 0 20px}.field-label{display:block;font:9px monospace;letter-spacing:1px;color:#b1bfa6;margin:20px 0 8px}.factions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.faction{background:#1c2b25;border:1px solid #526a60;text-align:left;padding:13px 10px}.faction b{font-size:12px;color:#85b7ce}.faction small{font-size:10px;color:#aebbb0;display:block;margin-top:5px}.faction.red b{color:#df9483}.faction.active{background:#354e49;border-color:#91bbc2;box-shadow:inset 0 0 0 1px #91bbc222}.faction.red.active{background:#533f34;border-color:#b38d6f}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.settings-row label{font:9px monospace;letter-spacing:1px;color:#b1bda6}.settings-row select{display:block;width:100%;background:#17231b;border:1px solid #5e6a53;color:#f0ebd2;border-radius:0;padding:11px 7px;margin-top:8px;font:12px Arial}.primary,.secondary{display:block;width:100%;min-height:47px;border:1px solid #e48c69;background:linear-gradient(#bc5541,#923a2b);padding:13px 14px;font-size:12px;font-weight:800;letter-spacing:1px;color:#fff4dc;box-shadow:inset 0 1px #e28e6c77}.primary span{float:right}.secondary{background:linear-gradient(#3d4c38,#2a392b);border:1px solid #758267;margin-top:9px;font-size:11px;box-shadow:inset 0 1px #71846566}.primary:hover,.secondary:hover{filter:brightness(1.13)}input{border:1px solid #62725b;background:#152219;color:#e7e9d3;width:100%;border-radius:0;padding:12px;font-size:13px;min-height:44px}.small-note{font-size:11px;color:#a6b59c;line-height:1.5;margin-top:16px}.help{border-top:1px solid #63725380;margin-top:20px}.help summary{cursor:pointer;padding:13px 0;font:11px monospace;color:#ddd5b4;list-style:none}.help summary span{float:right;color:#d9b57a}.help p{font-size:12px;color:#b8c3ae;line-height:1.5}.help b{color:#eadbb3}.panel-foot{font:8px monospace;letter-spacing:1.5px;color:#899b81;padding-top:5px}.mission{display:flex;width:100%;align-items:center;gap:13px;text-align:left;padding:15px 10px;margin:8px 0;background:#2c3e2e;border:1px solid #617354}.mission .num{font:23px monospace;color:#b5b784}.mission b{font-size:12px;display:block;color:#ece7d3}.mission small{font-size:11px;display:block;color:#b4c1a9;line-height:1.4;margin-top:4px}.mission>span:last-child{margin-left:auto;color:#dcc287}footer{display:flex;justify-content:space-between;padding:20px 5vw;border-top:1px solid #7b8b6c33;font:9px monospace;letter-spacing:2px;color:#9baa8d}
.game-screen{position:fixed;inset:0;height:100dvh;overflow:hidden;touch-action:none;user-select:none;background:#17231d}.game-screen>canvas{width:100%;height:100%;display:block;touch-action:none}.game-hud{position:absolute;left:0;right:0;top:0;height:calc(53px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;display:flex;align-items:center;gap:13px;background:linear-gradient(#41513c,#222f25);border-bottom:3px ridge #69745b;box-shadow:0 4px 12px #0006}.square{width:38px;height:36px;flex-shrink:0;background:linear-gradient(#526348,#34462f);border:1px solid #7d8a68;font-size:20px;color:#dfd9b9}.resource{position:relative;display:grid;grid-template-columns:20px 1fr;align-items:center;column-gap:5px;min-width:100px}.resource>span{grid-row:span 2;color:#dcbf71;font-size:24px}.resource strong{font:bold 16px monospace;color:#dce4af}.resource small{font:8px monospace;color:#a9b897;letter-spacing:.6px;margin-top:2px}#gameTime{margin-left:auto;font:12px monospace;color:#c2cdae}.objective{position:absolute;top:calc(69px + env(safe-area-inset-top));left:15px;max-width:230px;text-shadow:0 1px 3px #000;pointer-events:none;padding:8px 10px;background:#16251bd9;border-left:2px solid #b7b47a}.objective span{font:8px monospace;letter-spacing:1.5px;color:#a9c495;display:block;margin-bottom:5px}.objective b{font-size:12px;line-height:1.3;display:block;color:#ebdfb9}.objective small{font:10px monospace;color:#c4cfa7;display:block;margin-top:5px}.radar{position:absolute;right:14px;top:calc(68px + env(safe-area-inset-top));width:160px;background:#233422;border:4px ridge #7d886b;box-shadow:0 3px 12px #0008}.radar canvas{display:block;width:100%;aspect-ratio:1.5;touch-action:none}.radar>div{display:flex;justify-content:space-between;font:8px monospace;letter-spacing:.4px;padding:5px;color:#c4d1ac}.radar b{color:#93c58b}.toast{position:absolute;left:50%;top:31%;transform:translate(-50%,-12px);opacity:0;transition:opacity .2s,transform .2s;max-width:min(80%,500px);background:#17241be8;border:1px solid #b8ae77;padding:12px 18px;color:#ffe4a3;font-size:13px;line-height:1.4;text-align:center;pointer-events:none;z-index:15;box-shadow:0 5px 18px #0006}.toast.visible{opacity:1;transform:translate(-50%,0)}.selection-box{position:absolute;border:1px solid #c2f98d;background:#b5e98f22;pointer-events:none}.tap-marker{position:absolute;border:2px solid #c4ef91;border-radius:50%;width:25px;height:14px;transform:translate(-50%,-50%);pointer-events:none}.command-dock{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:stretch;gap:4px;height:calc(70px + env(safe-area-inset-bottom));padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:linear-gradient(#49583d,#253421);border-top:4px ridge #7c8667;box-shadow:0 -6px 18px #0c190c66}.command-dock button{flex:1;max-width:110px;background:linear-gradient(#536347,#30422e);border:1px solid #78866a;box-shadow:inset 0 0 0 1px #263a28;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0}.command-dock button span{font-size:21px;line-height:1;color:#ddd5a6}.command-dock button b{font-size:9px;letter-spacing:.6px;color:#d5dec3}.command-dock .accent{background:linear-gradient(#736b46,#4a4d30);border-color:#b1a671}.command-dock #buildBtn{margin-left:auto}.command-dock button.active{background:#8b713f;border-color:#ead28c}.selection-bar{position:absolute;bottom:calc(70px + env(safe-area-inset-bottom));left:0;right:0;background:#1b2c20e8;border-top:1px solid #68775966;display:flex;align-items:center;min-height:54px;gap:8px;padding:8px 14px}.selection-bar>div:first-child{flex:1}.selection-bar strong{font-size:12px;color:#e4dfbc;display:block}.selection-bar small{font-size:10px;color:#adbf9f;display:block;margin-top:4px}.selection-bar button{background:#3b5035;border:1px solid #6c8059;min-height:34px;padding:6px 10px;font-size:12px}.selection-bar>button{font-size:20px}.production{position:absolute;bottom:calc(124px + env(safe-area-inset-bottom));right:8px;width:min(430px,calc(100% - 16px));max-height:56%;background:linear-gradient(#394a34f7,#22341ff7);border:2px ridge #86916e;box-shadow:0 -4px 30px #0008;display:flex;flex-direction:column;z-index:5}.production-head{display:flex;justify-content:space-between;align-items:center;padding:13px 12px;border-bottom:1px solid #748461}.production-head b{font-size:12px;letter-spacing:1px;color:#f3dfae}.production-head small{font-size:10px;display:block;margin-top:5px;color:#b9caa8}.production-head button,.placement-bar button{min-width:40px;min-height:36px;background:#415537;border:1px solid #899c6a;font-size:22px}.build-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.build-item{position:relative;background:linear-gradient(#56694b,#31452e);border:1px solid #859574;min-height:112px;padding:3px 3px 7px;flex-shrink:0;text-align:center}.build-item canvas{display:block;width:80px;height:58px;max-width:100%;margin:0 auto}.build-item strong{display:block;font-size:10px;min-height:24px;line-height:1.2;color:#e6e8d0}.build-item small{font:11px monospace;color:#efd18e}.build-item .lock{position:absolute;top:4px;right:4px;width:7px;height:7px;background:#c98062;border-radius:50%}.build-item.locked{filter:saturate(.45);opacity:.68}.build-item:active{filter:brightness(1.35)}.queue-info{padding:8px 12px;font:10px monospace;line-height:1.5;color:#c6d1b3;border-top:1px solid #62784e;min-height:30px}.placement-bar{position:absolute;bottom:calc(128px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(480px,calc(100% - 16px));background:#283c25f5;border:2px solid #84996b;display:flex;align-items:center;padding:9px;gap:7px;z-index:6;box-shadow:0 5px 20px #0007}.placement-bar>div{flex:1;min-width:0}.placement-bar b{font-size:12px;display:block}.placement-bar small{font-size:10px;display:block;margin-top:4px;color:#c2cfb3}.placement-bar .confirm{font-size:10px;font-weight:bold;min-width:84px;background:#727346;color:#fff1bc}.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:#07110bd9;backdrop-filter:blur(4px)}.dialog{width:min(430px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:linear-gradient(130deg,#35452e,#1c2d20);border:1px solid #8e9877;border-top:3px solid #bd7857;padding:28px;position:relative;box-shadow:0 20px 80px #0009}.dialog h2{font-size:29px}.dialog .close{position:absolute;right:12px;top:10px;background:none;border:0;font-size:26px;color:#d0d5b9}.dialog .primary{margin-top:20px}.danger{color:#eea48d;border-color:#886d4d}.result-dialog{text-align:center}.result-mark{font-size:50px;color:#e6c377;margin-bottom:20px}.result-stats{display:flex;justify-content:space-around;border-block:1px solid #667b51;padding:18px 0;margin:20px 0}.result-stats b{font:22px monospace;display:block;color:#e5d6a1}.result-stats small{font-size:9px;color:#b8c7a3}.result-dialog p{color:#bccca9;font-size:13px;line-height:1.5}
@media(min-width:950px){.command-dock{justify-content:center}.command-dock #buildBtn{margin-left:12px}.production{right:20px;width:400px;max-height:68%}.build-grid{grid-template-columns:repeat(3,1fr)}.build-item{min-height:125px}.build-item canvas{width:100px;height:70px}.build-item strong{font-size:12px}.radar{width:195px}.selection-bar{padding:10px 20px}.selection-bar strong{font-size:14px}.selection-bar small{font-size:12px}}
@media(max-width:850px){.menu-header{padding:20px}.ready{display:none}.menu-content{padding:32px 20px;grid-template-columns:1fr;gap:28px;max-width:600px}.hero h1{font-size:50px;letter-spacing:-2px;margin:16px 0}.hero p{font-size:16px;margin:10px 0}.hero-tags{display:none}.menu-panel{padding:22px}.hero .eyebrow{font-size:9px}.brand{font-size:21px}footer{padding:18px 20px;font-size:8px}footer span{font-size:7px}.objective{max-width:185px}.radar{width:125px;right:10px}.objective{left:10px;top:calc(65px + env(safe-area-inset-top));padding:7px 9px}.objective b{font-size:10px}.objective small{font-size:9px}.game-hud{height:calc(51px + env(safe-area-inset-top));gap:9px;padding-right:8px;padding-left:8px}.resource{min-width:85px;column-gap:2px;grid-template-columns:15px 1fr}.resource strong{font-size:14px}.resource small{font-size:6px}.resource>span{font-size:20px}.square{width:32px;height:32px;font-size:18px}#gameTime{font-size:10px}.selection-bar{min-height:54px;padding:8px}.selection-bar small{max-width:270px}.build-grid{grid-template-columns:repeat(3,1fr)}.production{max-height:52%}.build-item{min-height:108px}.selection-bar #buildingActions{display:flex;gap:3px}.selection-bar #buildingActions button{font-size:10px;padding:5px}.command-dock{gap:3px}.command-dock button b{font-size:8px}.command-dock button span{font-size:20px}.toast{font-size:12px;padding:10px 13px}}
@media(max-width:380px){.game-hud{gap:5px}.resource{min-width:76px}.resource strong{font-size:12px}.resource small{font-size:5.5px}.objective{max-width:170px}.radar{width:110px}.menu-content{padding:24px 14px}.menu-panel{padding:16px}.hero h1{font-size:43px}.dialog{padding:21px}.selection-bar small{font-size:9px}}
@media(max-height:520px) and (orientation:landscape){.game-hud{height:40px;padding-top:0;gap:12px}.resource strong{font-size:13px}.square{height:28px;width:32px}.objective{top:48px;max-width:260px;padding:5px 8px}.objective span{margin-bottom:3px}.objective b{font-size:10px}.radar{width:108px;top:48px;right:8px}.radar>div{font-size:6px;padding:2px}.command-dock{height:54px;padding:4px 8px}.command-dock button span{font-size:16px}.command-dock button b{font-size:7px}.command-dock button{max-width:85px}.command-dock #buildBtn{margin-left:auto}.selection-bar{bottom:54px;min-height:39px;padding:5px 10px}.selection-bar small{font-size:9px;margin-top:2px}.selection-bar strong{font-size:11px}.selection-bar button{min-height:27px;padding:2px 8px}.production{bottom:98px;right:8px;top:46px;width:310px;max-height:none}.production-head{padding:7px 10px}.production-head small{display:none}.build-grid{grid-template-columns:repeat(3,1fr);gap:4px;padding:5px}.build-item{min-height:89px}.build-item canvas{height:44px;width:62px}.build-item strong{font-size:9px;min-height:22px}.build-item small{font-size:9px}.queue-info{font-size:9px;padding:4px 8px}.placement-bar{bottom:98px;left:8px;transform:none;width:350px;padding:6px}.toast{top:38%}.menu-content{display:grid;grid-template-columns:1fr 370px;max-width:none;gap:24px;padding:20px}.hero h1{font-size:35px;letter-spacing:-1px}.hero p{font-size:14px}.menu-header{padding:12px 20px}.menu-panel{padding:17px}.dialog{max-height:calc(100dvh - 24px);padding:20px}.overlay{padding:12px}}
@media(max-width:600px) and (orientation:portrait){.menu-header{padding:17px 20px}.menu-content{padding:24px 18px;gap:22px}.hero h1{font-size:36px;line-height:1.04;letter-spacing:-1.4px;margin:13px 0}.hero p{font-size:14px;margin:8px 0}.menu-panel{padding:19px}.square{width:38px;height:38px}.game-hud{gap:7px}.resource{min-width:80px}}
@media(max-width:600px) and (max-height:700px) and (orientation:portrait){.hero p{display:none}.hero h1{font-size:32px}.menu-content{padding:18px 14px;gap:18px}.menu-header{padding:14px 18px}.menu-panel{padding:16px}.menu-panel h2{margin-top:18px}.settings-row{margin:15px 0}.field-label{margin-top:15px}.faction{padding:10px 8px}}