:root{--ink: #071018;--panel: rgba(8, 16, 28, .82);--panel-solid: #0c1624;--line: rgba(120, 180, 150, .22);--text: #e7f0ea;--muted: #7f9588;--accent: #8bc34a;--accent-dim: rgba(139, 195, 74, .18);--copper: #e8a04a;--danger: #ef5350;--info: #42a5f5;--wood: #a5d6a7;--food: #ef9a9a;--gold: #ffe082;--pop: #90caf9;--font: "Barlow", "Segoe UI", system-ui, sans-serif;--display: "Bebas Neue", Impact, "Arial Narrow", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--text);font-family:var(--font);cursor:crosshair}body.cursor-attack{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath stroke='%23ef5350' stroke-width='2.5' fill='none' d='M6 6l16 16M22 6L6 22'/%3E%3C/svg%3E") 14 14,crosshair}body.cursor-gather{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='8' fill='none' stroke='%2366bb6a' stroke-width='2.5'/%3E%3Ccircle cx='14' cy='14' r='3' fill='%2366bb6a'/%3E%3C/svg%3E") 14 14,cell}body.cursor-move{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='5' fill='none' stroke='%23ffe082' stroke-width='2.5'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%23ffe082'/%3E%3C/svg%3E") 14 14,pointer}body.cursor-build{cursor:copy}body.cursor-build-bad{cursor:not-allowed}#app{position:relative;width:100%;height:100%}#game{display:block;width:100%;height:100%;touch-action:none}#boxSelect{position:fixed;border:1.5px solid rgba(255,224,130,.95);background:#ffe0821a;box-shadow:inset 0 0 0 1px #00000040;pointer-events:none;z-index:20}#hud{pointer-events:none}#hud a,#hud button,#hud .command,#hud .minimap-wrap,#hud .help-btn,#hud .resources{pointer-events:auto}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px 18px;background:linear-gradient(180deg,rgba(5,12,20,.92) 0%,rgba(5,12,20,.55) 70%,transparent 100%);z-index:5}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand .back{color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:500;padding:6px 8px;border-radius:8px;transition:color .15s,background .15s}.brand .back:hover{color:var(--text);background:#ffffff0f}.title-wrap{display:flex;align-items:baseline;gap:10px}.logo{font-family:var(--display);font-size:1.55rem;letter-spacing:.08em;font-weight:400;color:#f3faf5}.age-pill{background:var(--accent-dim);border:1px solid rgba(139,195,74,.4);color:#c8e6a0;padding:3px 11px;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.resources{display:flex;gap:8px;font-variant-numeric:tabular-nums}.res{display:inline-flex;align-items:center;gap:7px;background:#00000059;border:1px solid var(--line);border-radius:10px;padding:6px 11px;font-weight:700;font-size:.92rem;min-width:4.5rem}.res i{width:10px;height:10px;border-radius:2px;display:inline-block}.res.wood{color:var(--wood)}.res.wood i{background:#66bb6a}.res.food{color:var(--food)}.res.food i{background:#ef5350;border-radius:50%}.res.gold{color:var(--gold)}.res.gold i{background:#ffca28;transform:rotate(45deg)}.res.pop{color:var(--pop)}.res.pop i{background:#42a5f5;border-radius:50%;width:8px;height:8px;box-shadow:4px 0 #42a5f5}.res b.bump{animation:bump .35s ease}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18);color:#fff}to{transform:scale(1)}}.help-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#0006;color:var(--text);font-weight:700;cursor:pointer;flex-shrink:0}.help-btn:hover{border-color:var(--copper);color:var(--copper)}.alert-stack{position:absolute;top:64px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:8;pointer-events:none;width:min(420px,90vw)}.alert{background:#0c1624eb;border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-align:center;font-size:.88rem;font-weight:600;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}.alert.show{opacity:1;transform:translateY(0)}.alert.warn{border-color:#ef53508c;color:#ffcdd2}.alert.good{border-color:#8bc34a8c;color:#c8e6a0}.alert.info{border-color:#42a5f573;color:#bbdefb}.command{position:absolute;left:14px;bottom:14px;width:min(380px,calc(100vw - 240px));background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 40px #00000059;z-index:5}.sel-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}.sel-portrait{width:52px;height:52px;border-radius:12px;background:linear-gradient(145deg,#1e3a5f,#0d2137);border:1px solid rgba(66,165,245,.35);display:grid;place-items:center;font-family:var(--display);font-size:1.4rem;letter-spacing:.04em;color:#90caf9;flex-shrink:0}.sel-portrait.empty{background:#ffffff0a;border-color:var(--line);color:var(--muted)}.sel-portrait.kind-villager{background:linear-gradient(145deg,#3e5f2a,#1e3314);color:#c5e1a5;border-color:#8bc34a66}.sel-portrait.kind-fighter{background:linear-gradient(145deg,#455a64,#263238);color:#eceff1}.sel-portrait.kind-townhall{background:linear-gradient(145deg,#5d4037,#3e2723);color:#ffcc80;border-color:#e8a04a66}.sel-name{font-size:1rem;font-weight:700;text-transform:capitalize}.sel-sub{font-size:.78rem;color:var(--muted);margin-top:2px}.hp-track{margin-top:7px;height:7px;border-radius:99px;background:#00000073;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.hp-fill{height:100%;width:100%;border-radius:99px;background:#66bb6a;transition:width .15s linear}.hp-fill[data-level=mid]{background:#ffb74d}.hp-fill[data-level=low]{background:#ef5350}.actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:7px}.act{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(139,195,74,.28);background:#1e37238c;color:var(--text);border-radius:10px;padding:9px 10px;font:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:4px;transition:border-color .12s,background .12s,transform .1s}.act:hover{border-color:var(--accent);background:#325a2db3;transform:translateY(-1px)}.act:active{transform:translateY(0)}.act.disabled{opacity:.38;pointer-events:none}.act.active{border-color:var(--copper);box-shadow:0 0 0 1px #e8a04a59;background:#5a371473}.act.age{grid-column:1 / -1;border-color:#e8a04a73;background:#5a371466}.act-name{font-size:.82rem;font-weight:650}.act-cost{display:flex;gap:6px;font-size:.7rem;font-weight:700}.cost.wood{color:var(--wood)}.cost.food{color:var(--food)}.cost.gold{color:var(--gold)}.build-prog{grid-column:1 / -1;font-size:.8rem;color:var(--info);padding:6px 2px}.queue-bar{position:relative;margin-top:10px;height:22px;border-radius:8px;background:#0006;border:1px solid var(--line);overflow:hidden}.queue-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,#42a5f559,#42a5f5a6);transition:width .2s linear}.queue-bar span{position:relative;z-index:1;display:block;padding:3px 8px;font-size:.72rem;font-weight:600;color:#e3f2fd}.tip{margin:12px 0 0;font-size:.72rem;color:var(--muted);line-height:1.4}.minimap-wrap{position:absolute;right:14px;bottom:14px;z-index:5;border-radius:14px;overflow:hidden;border:2px solid rgba(255,224,130,.35);box-shadow:0 10px 30px #0006;background:#0a1a12}#minimap{display:block;width:200px;height:200px;cursor:crosshair;image-rendering:pixelated}.minimap-label{position:absolute;top:6px;left:8px;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffe082b3;pointer-events:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#040a10b8;display:grid;place-items:center;z-index:30;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay[hidden]{display:none!important}.modal{background:linear-gradient(160deg,#122033,#0a1420);border:1px solid var(--line);border-radius:18px;padding:28px 32px;text-align:center;max-width:440px;width:min(440px,92vw);box-shadow:0 20px 60px #00000073}.modal .eyebrow{color:var(--copper);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}.modal h1{margin:0 0 8px;font-family:var(--display);font-size:2.6rem;letter-spacing:.06em;font-weight:400}.modal p{color:var(--muted);margin:0 0 18px;line-height:1.45}.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.modal .sg-btn{text-decoration:none;display:inline-flex;align-items:center}.help-list{list-style:none;text-align:left;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}.help-list li{font-size:.88rem;color:var(--text);line-height:1.35}kbd{display:inline-block;background:#ffffff14;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.78rem;font-family:inherit;color:var(--gold)}@media (max-width: 720px){.command{width:calc(100vw - 28px);bottom:220px}#minimap{width:150px;height:150px}.minimap-wrap{right:10px;bottom:10px}.resources{gap:5px}.res{min-width:0;padding:5px 8px;font-size:.8rem}.logo{font-size:1.25rem}}