*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1d315d;color:#fff8e7;font-family:ui-rounded,system-ui,sans-serif}body{display:grid;place-items:center;overscroll-behavior:none;background:radial-gradient(ellipse at 50% 42%,#36558e,#1d315d 80%)}button{font:inherit;touch-action:manipulation}button:focus-visible{outline:3px solid #ffd977;outline-offset:3px}#app{position:relative;width:min(100vw,calc(100dvh * .639),575px);aspect-ratio:46/72;isolation:isolate;container-type:inline-size}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}canvas:focus-visible{outline:2px solid #ffce46;outline-offset:-2px}button.icon{border:3px solid #17182d;border-radius:10px;display:grid;place-items:center;background:#69cefa;color:#17182d;width:44px;height:44px;min-width:36px;box-shadow:0 3px 0 #17182d;padding:8px}button.icon:active{transform:translateY(2px);box-shadow:0 1px 0 #17182d}button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
#overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#11192ba8;backdrop-filter:blur(3px);padding:25px}#panel{width:100%;max-width:330px;background:#fff8e7;color:#17182d;border:3px solid #17182d;border-radius:22px;padding:22px;box-shadow:0 9px 0 #17182d60;text-align:center}#panel canvas{width:100%;height:auto;aspect-ratio:1.7;pointer-events:none}#panel-actions{display:flex;justify-content:center;gap:20px;margin-top:18px}#panel-actions button{width:62px;height:58px;border-radius:14px}#panel-actions button.primary{background:#ffce46}#panel-actions svg{width:30px;height:30px}
/* A single responsive layout owns every header element, including portraits. */
#hud{--control:clamp(32px,8.7cqw,50px);position:absolute;z-index:1;left:5%;right:5%;top:3%;display:grid;grid-template-rows:clamp(36px,10cqw,56px) clamp(32px,8cqw,44px);row-gap:3cqw;color:#17182d}
#hud-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) auto;gap:clamp(4px,1.3cqw,7px);min-width:0}
#tower-health,#income{min-width:0;height:100%;border:2px solid #17182d;border-radius:11px;background:#fff8e7;box-shadow:0 3px 0 #17182d;padding:clamp(3px,1cqw,6px);color:#17182d}
#tower-health{display:flex;align-items:center;gap:clamp(4px,1.3cqw,7px)}#tower-health>svg{width:clamp(14px,4.6cqw,25px);height:clamp(20px,6cqw,33px);flex:none;fill:#5865eb;stroke:#17182d;stroke-width:1.6;stroke-linejoin:round}.health-details{flex:1;min-width:0;display:grid;gap:4px}.health-track{height:clamp(5px,1.7cqw,9px);border-radius:9px;background:#ddd2b7;overflow:hidden}#health-fill{display:block;height:100%;width:100%;border-radius:inherit;background:#5865eb}#health-value{font-size:clamp(10px,2.6cqw,14px);font-weight:850;line-height:1;white-space:nowrap}
#income{display:flex;flex-direction:column;justify-content:center;gap:2px;line-height:1;cursor:pointer}#income:not(:disabled){background:#ffe49a}#income:disabled{cursor:default}#income:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #17182d}.wallet{display:flex;align-items:center;justify-content:center;gap:4px;font-size:clamp(15px,4.3cqw,24px);font-weight:850;white-space:nowrap}#income svg{fill:none;stroke:currentColor;stroke-width:2;flex-shrink:0}.wallet svg{fill:#ffce46!important;width:clamp(12px,3.8cqw,20px);height:clamp(12px,3.8cqw,20px)}.income-detail{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:clamp(10px,2.6cqw,13px);font-weight:800;white-space:nowrap}.income-buy{display:flex;align-items:center;gap:2px}.income-buy svg{width:clamp(9px,2.6cqw,13px);height:clamp(9px,2.6cqw,13px)}#income:disabled .income-detail{color:#655a46}
#actions{display:grid;grid-template-columns:repeat(3,var(--control));gap:clamp(4px,1.2cqw,6px);height:100%}#hud button.icon{width:var(--control);min-width:0;height:100%;padding:0;border-width:2px;border-radius:10px}#hud .icon svg{width:clamp(17px,4.6cqw,26px);height:clamp(17px,4.6cqw,26px)}#speed{font-size:clamp(14px,3.8cqw,21px);font-weight:850;cursor:pointer}#speed[aria-pressed="true"]{background:#ffce46}#speed:disabled{cursor:default;opacity:.65}
#hud-bottom{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:var(--control) minmax(0,1fr) minmax(64px,1.1fr) minmax(0,1.45fr);gap:clamp(4px,1.4cqw,8px);align-items:stretch;min-width:0}
#wave{width:100%;height:100%;min-width:0;min-height:0;border:2px solid #17182d;border-radius:11px;padding:0 4px;background:#ffce46;color:#17182d;display:flex;justify-content:center;align-items:center;gap:4px;font-size:clamp(16px,4.4cqw,25px);font-weight:850;box-shadow:0 3px 0 #17182d}#wave:disabled{background:#f7ecd4;box-shadow:none;opacity:1}#wave svg{width:clamp(12px,3.8cqw,18px);height:clamp(12px,3.8cqw,18px);flex-shrink:0}#wave span{white-space:nowrap}
#wave-clock{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;color:#fff8e7}.clock-readout{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:clamp(12px,3.3cqw,18px);font-weight:850;line-height:1}.clock-readout svg{width:clamp(11px,3.2cqw,17px);height:clamp(11px,3.2cqw,17px);fill:#fff8e7;stroke:#17182d;stroke-width:1.8;stroke-linecap:round;flex:none}.clock-track{height:3px;border-radius:3px;background:#17182d;overflow:hidden}#clock-progress{display:block;background:#ffce46;height:100%;width:0}#roster{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;align-self:center}
@container(max-width:350px){#hud{top:1.5%;row-gap:5px}.health-details{gap:3px}}
@media(max-height:500px) and (min-width:600px){#app{width:min(100vw,calc(100dvh * .639));height:100dvh}#hud{top:3px;grid-template-rows:32px 24px;row-gap:4px}#hud-top{grid-template-columns:1fr 1fr;gap:6px}#hud-bottom{grid-template-columns:1fr 1fr 1.3fr;gap:5px}#actions{position:absolute;left:calc(100% + 24px);top:5px;display:flex;flex-direction:column;gap:8px;height:auto}#hud #actions .icon,#hud #help{width:40px;height:40px}#hud #actions .icon svg,#hud #help svg{width:23px;height:23px}#speed{font-size:17px}#help{position:absolute;left:calc(100% + 24px);top:calc(100dvh - 60px)}#tower-health,#income{padding:1px 5px;border-radius:8px}#tower-health>svg{width:17px;height:23px}.health-details{gap:2px}#health-value{font-size:10px}.wallet{font-size:14px;gap:3px}.wallet svg{width:12px;height:12px}.income-detail{font-size:9px;gap:2px}.income-buy svg{width:9px;height:9px}.income-buy{gap:1px}#income{gap:1px}#wave{font-size:14px;border-radius:8px}#wave svg{width:12px;height:12px}.clock-readout{font-size:11px;gap:3px}.clock-readout svg{width:11px;height:11px}#wave-clock{gap:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
#orders{position:absolute;left:7%;right:7%;top:79.5%;height:15.3%;z-index:2;background:#fff8e7;color:#17182d;border:3px solid #17182d;border-radius:13px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;box-shadow:0 4px 0 #17182d}#order-name{font-size:14px;font-weight:850}#order-hint{font-size:11px;line-height:1.15}#order-actions{display:flex;gap:6px;flex:1;min-height:30px}#order-actions button{flex:1;border:2px solid #17182d;border-radius:8px;background:#69cefa;color:#17182d;font-size:13px;font-weight:800;padding:2px}#order-hold[aria-pressed="true"]{background:#ffce46}@media(max-height:500px) and (min-width:600px){#orders{left:-105%;right:105%;top:38%;height:auto;min-height:125px}#order-actions{min-height:40px}}@media(max-width:350px){#orders{padding:3px 5px;gap:2px}#order-name{font-size:12px}#order-hint{font-size:10px}#order-actions button{font-size:11px}}

body{display:grid;grid-template-rows:minmax(0,1fr) calc(44px + env(safe-area-inset-bottom,0px));height:100dvh;place-items:stretch}
#play-area{display:grid;place-items:center;min-height:0;min-width:0}
#app{width:min(100vw,calc((100dvh - 44px - env(safe-area-inset-bottom,0px)) * .639),575px);height:auto}
.site-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left));background:#171f3b;border-top:1px solid #536596;--feedback-ink:#fff8e7;touch-action:manipulation}
.site-bar a{min-height:44px;display:flex;align-items:center;padding:0 8px;color:#fff8e7;font-size:13px;font-weight:750;text-decoration:none}.site-bar h1{font-size:13px;font-weight:800;margin:0;white-space:nowrap}.site-bar [data-feedback-mount]{display:inline-flex}.site-bar a:focus-visible{outline:2px solid #ffce46;outline-offset:-4px;border-radius:7px}
@media(max-height:500px) and (min-width:600px){#app{width:calc((100dvh - 44px - env(safe-area-inset-bottom,0px)) * .639);height:calc(100dvh - 44px - env(safe-area-inset-bottom,0px))}#hud{top:2px;grid-template-rows:28px 20px;row-gap:3px}#tower-health,#income{padding:0 5px}.wallet{font-size:13px}.income-detail{font-size:9px}#wave{line-height:1}#help{top:calc(100dvh - 104px - env(safe-area-inset-bottom,0px))}}
@media(max-width:350px){.site-bar{gap:2px}.site-bar h1{font-size:11px}.site-bar a{font-size:12px;padding:0 4px}}