:root {font:16px/1.25 Arial,sans-serif;color:#fff;background:#282a28;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #fff;outline-offset:3px}button:disabled{cursor:default;opacity:.4}[hidden]{display:none!important}
.game-shell{position:relative;width:100%;height:100dvh;overflow:hidden;isolation:isolate}#map{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#map:active{cursor:grabbing}
.topbar{position:absolute;z-index:2;inset:env(safe-area-inset-top) 0 auto;height:72px;pointer-events:none}.icon-button{border:0;background:none;color:white;width:52px;height:58px;font-size:38px;line-height:1;text-shadow:1px 2px 2px #000;pointer-events:auto}#menu-button{position:absolute;right:4px;top:5px;font-size:48px}.round-pill,.upkeep,.fit-button{display:none}.economy{display:flex;align-items:center;height:72px;font-size:34px;font-weight:400}.economy-item{display:flex;align-items:center;gap:5px}.economy > .economy-item:first-child{position:absolute;left:12px}.economy-item.income{position:absolute;left:50%;transform:translateX(-50%);gap:0}.coin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#eed466;border:2px solid #c7a744;color:#78632a;font-size:29px;box-shadow:inset 0 0 0 2px #e7c253}
.bottom-panel{position:absolute;z-index:2;bottom:env(safe-area-inset-bottom);left:0;right:0;height:100px;pointer-events:none;background:linear-gradient(transparent,#17191750)}.selection-line{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.command-line{display:flex;align-items:end;justify-content:space-between;height:100%;padding:0 8px 8px;gap:10px}.undo-button,.end-turn{pointer-events:auto;background:none;border:0;color:#fff;flex:0 0 48px;height:52px;padding:0;text-shadow:2px 2px 2px #000}.undo-button{font-size:58px;line-height:1}.end-turn{font-size:36px}.actions{display:flex;justify-content:center;align-items:end;flex:1;min-width:0;gap:8px;overflow-x:auto;pointer-events:auto;scrollbar-width:none}.action-card{display:flex;flex-direction:column;align-items:center;justify-content:end;flex:0 0 48px;background:none;border:0;color:white;padding:4px 2px;position:relative;height:68px}.action-card.active{background:#ffffff12;border-radius:8px}.action-card.active .action-icon{transform:translateY(-5px) scale(1.15)}.action-icon{width:34px;height:40px;display:block;filter:drop-shadow(1px 2px 1px #000);transition:transform .15s}.action-icon svg{width:100%;height:100%}.action-label{display:none}.action-cost{font-size:15px;white-space:nowrap}.action-hint{display:none}.toast{position:absolute;z-index:4;bottom:120px;left:50%;transform:translateX(-50%);background:#171917e8;border-radius:7px;padding:10px 14px;max-width:calc(100% - 24px);width:max-content;font-size:14px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s}.toast.visible{opacity:1}.toast.error{background:#783b48}
.menu-dialog{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:#080c09;background-color:#7d80a6;background-image:radial-gradient(circle at 22% 23%,#5b888777 0 15px,transparent 17px),radial-gradient(circle at 80% 78%,#5b888777 0 12px,transparent 15px);background-size:210px 290px;display:none}.menu-dialog[open]{display:flex;flex-direction:column;justify-content:center;align-items:center}.menu-dialog::backdrop{background:#282a28}.dialog-heading{position:absolute;top:calc(22px + env(safe-area-inset-top));left:20px;right:20px;display:flex;justify-content:space-between;align-items:center}.dialog-heading strong{font-size:22px;font-weight:400}.dialog-heading .icon-button{background:#dca34c;border-radius:18px;width:100px;color:black;text-shadow:none;box-shadow:0 4px 7px #0005}.menu-row{width:min(440px,80%);min-height:74px;border:0;background:#aaa45b;color:black;font-size:clamp(24px,5vw,36px);box-shadow:0 7px 9px #0003}.menu-row:nth-of-type(even){background:#5fa773}.menu-row:first-of-type{border-radius:18px 18px 0 0}.menu-row:last-of-type{border-radius:0 0 18px 18px}.instructions{width:min(440px,80%);max-height:30vh;overflow:auto;background:#bbd8b5;padding:8px 18px;border-radius:12px;margin-top:14px;font-size:14px}.instructions p{line-height:1.5}
@media(min-width:700px){.topbar{left:calc(50% - 330px);right:calc(50% - 330px)}.bottom-panel{left:calc(50% - 330px);right:calc(50% - 330px)}.action-card{flex-basis:64px}.action-icon{width:40px;height:46px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.economy-item.upkeep{display:none}
.campaign-level.locked{opacity:1;background:#91a58d;border-color:#7e927a;color:#56634f;cursor:default}.campaign-level.locked::after{content:'🔒';position:absolute;right:2px;bottom:2px;font-size:12px}
.economy-button{pointer-events:auto;border:0;background:none;color:inherit;font:inherit;padding:8px 0;min-height:48px}.economy-button:hover{color:#f5e8aa}
.economy-dialog{position:fixed;inset:auto 0 calc(10dvh + env(safe-area-inset-bottom));margin:0 auto;width:min(80%,520px);height:50dvh;max-height:calc(100dvh - 100px);padding:0;overflow:hidden;border:0;border-radius:16px;background:#c3c3c1;color:#050605;box-shadow:0 6px 10px #0006}.economy-dialog::backdrop{background:#0002}.economy-heading{height:12%;display:flex;align-items:center;justify-content:center;position:relative}.economy-heading h2{font-size:clamp(24px,3.5dvh,36px);margin:0;font-weight:400}.economy-heading button{position:absolute;right:0;top:0;width:44px;height:100%;border:0;background:none;font-size:28px;color:transparent}.economy-heading button:focus-visible{color:#111;outline:2px solid #111;outline-offset:-3px}.economy-table-wrap{height:88%;overflow:auto}.economy-dialog table{width:100%;height:100%;border-collapse:collapse;font-size:clamp(19px,3dvh,30px);font-variant-numeric:tabular-nums}.economy-dialog th,.economy-dialog td{padding:0 5%;font-weight:400;text-align:right}.economy-dialog th{text-align:left}.economy-dialog tr{height:16.666%}.economy-dialog tr:nth-child(odd){background:#b9b9b733}.income-graph-dialog{bottom:18dvh;width:min(92%,600px);max-width:600px;height:min(41dvh,380px);border-radius:12px;background:#bcc5ba}.income-graph-dialog::backdrop{background:#0006}.income-graph-dialog .economy-heading{height:13%}.income-chart{height:87%;display:flex;justify-content:space-evenly;padding:12px 5% 0;position:relative;gap:4%;--axis-gap:44px}.income-column{flex:1;max-width:110px;min-width:0;height:100%;display:grid;grid-template-rows:minmax(0,1fr) var(--axis-gap);justify-items:center}.income-track{height:100%;min-height:0;width:100%;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}.income-bar{flex-shrink:0;width:45%;max-width:54px;border:1.5px solid #303830;border-radius:1px 1px 0 0;transform-origin:center bottom}.income-value{height:100%;display:grid;place-items:center;width:100%;font-size:clamp(16px,2dvh,23px)}.income-chart::after{content:'';position:absolute;left:5%;right:5%;bottom:var(--axis-gap);height:3px;background:#101510;pointer-events:none}.income-graph-dialog[open]{animation:income-panel-appear 240ms ease-out both}.income-graph-dialog[open] .income-bar{animation:income-bar-grow 620ms cubic-bezier(.2,.75,.3,1) 140ms both}.income-graph-dialog[open] .income-value{animation:income-value-appear 220ms ease-out 160ms both}@keyframes income-panel-appear{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}@keyframes income-bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes income-value-appear{from{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.income-graph-dialog[open],.income-graph-dialog[open] .income-bar,.income-graph-dialog[open] .income-value{animation:none}}

.actions{justify-content:space-evenly;overflow:visible;position:relative;height:60px}.purchase-selector{height:52px}.purchase-preview{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.purchase-preview .action-icon{width:56px;height:78px;margin-bottom:2px}.purchase-preview .action-cost{font-size:30px;line-height:1}.purchase-preview.unaffordable .action-icon{opacity:.7}

.victory-dialog{position:fixed;inset:auto 0 calc(10dvh + env(safe-area-inset-bottom));margin:0;width:100%;max-width:none;max-height:80dvh;border:0;border-radius:0;padding:0;background:#b9b9b7;color:#050605;box-shadow:0 7px 12px #0005;text-align:left}.victory-dialog::backdrop{background:transparent}.victory-dialog p{margin:0;min-height:13.5dvh;padding:10px 2% 20px;font-size:clamp(26px,3.3dvh,44px);line-height:1.5}.victory-actions{display:grid;grid-template-columns:1fr 1fr}.victory-actions button{min-width:0;min-height:48px;height:4.6dvh;padding:4px 8px;margin:0;border:0;border-radius:0;background:#aaa45b;color:#050605;font-size:clamp(22px,3.1dvh,40px)}.victory-actions button:last-child{background:#6870ca}.victory-actions button:focus-visible{outline:3px solid #fff;outline-offset:-4px}.victory-dialog[open]{animation:victory-appear 220ms ease-out both}@keyframes victory-appear{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.victory-dialog[open]{animation:none}}

.campaign-dialog{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;background:#7aaaab;color:#101810;padding:110px 20px 35px}.campaign-dialog h1{text-align:center;font-weight:400;font-size:32px}.campaign-back{position:absolute;left:20px;top:25px;width:150px;height:60px;background:#dca34c;border:0;border-radius:18px;font-size:42px;box-shadow:0 5px 8px #0004}.campaign-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;background:#67bc71;max-width:520px;margin:35px auto;padding:25px;border-radius:20px;box-shadow:0 6px 10px #0005}.campaign-level{position:relative;aspect-ratio:1;border:3px solid #a2db89;background:#c1e6b4;color:#101810;font-size:28px;min-width:0}.campaign-level.completed::after{content:'✓';position:absolute;right:0;top:-4px;font-size:18px}@media(max-width:400px){.campaign-levels{gap:8px;padding:15px}.campaign-level{font-size:23px}}

.connection-overlay{position:fixed;inset:0;z-index:100;background:#181b18b8;display:grid;place-items:center;touch-action:none}.connection-card{display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:14px;background:#333a30;color:#fff;box-shadow:0 8px 30px #0006;font-size:18px}.connection-spinner{width:28px;height:28px;border:3px solid #ffffff40;border-top-color:#ead375;border-radius:50%;animation:connection-spin .8s linear infinite}@keyframes connection-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.connection-spinner{animation:none}}

.tutorial-panel{position:absolute;z-index:3;top:calc(80px + env(safe-area-inset-top));left:12px;max-width:calc(100% - 24px);width:330px;padding:12px 16px;border-radius:12px;background:#eef1e8f2;color:#20281d;box-shadow:0 3px 12px #0003;font-size:19px;max-height:calc(100dvh - 210px);overflow-y:auto}.tutorial-panel summary{cursor:pointer;font-weight:700;line-height:1.4}.tutorial-panel ol{margin:12px 0 4px;padding-left:24px;line-height:1.65}.tutorial-panel li.completed{color:#5a7850}.tutorial-panel li.current{font-weight:700}.tutorial-panel button{margin-top:10px;padding:8px 18px;border:1px solid #516347;border-radius:7px;background:#b7d69e;color:#20281d}.tutorial-panel:not([open]) button:not([hidden]){display:block}