:root{--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--ui-gap: 10px;--panel-width: 260px;--hud-height: 56px}html,body,#app{margin:0;padding:0;width:100%;max-width:100vw}html,body{overflow-x:hidden;background:radial-gradient(circle at top,#111a2b,#070c14 62%,#04060c);min-height:100svh;min-height:100dvh}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;overscroll-behavior:none}#app canvas{touch-action:none;display:block}#portrait-tower-bar,#portrait-tower-info{display:none}.overlay-screen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);box-sizing:border-box;background:#040912cc}.overlay-screen--hidden{display:none}.overlay-card{width:min(640px,100%);max-width:100%;background:linear-gradient(180deg,#0e1523f5,#09101ef0);border:1px solid rgba(95,210,255,.45);border-radius:14px;padding:18px;box-sizing:border-box;color:#f2f7fb;text-align:center}.overlay-card h1,.overlay-card h2{margin:0 0 10px;word-break:break-word}.menu-instructions,#game-over-details{margin:0 0 12px;line-height:1.35;color:#d7ecff}.menu-scores{margin-bottom:12px;color:#aee3ff;font-weight:600}.mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}.mode-btn,.cta-btn,.secondary-btn{min-height:46px;border-radius:10px;border:1px solid rgba(147,223,255,.5);color:#fff;font-weight:700;cursor:pointer}.mode-btn{background:#25333d}.mode-btn.is-active{background:#2f7f46}.cta-btn{width:100%;background:linear-gradient(180deg,#1f6d52,#0d3f2d)}.secondary-btn{width:100%;background:#1e2a33}.game-over-actions{display:grid;gap:8px}#hud{position:fixed;z-index:20;display:none;align-items:center;justify-content:space-between;gap:8px;top:calc(var(--safe-top) + var(--ui-gap));left:calc(var(--safe-left) + var(--ui-gap));right:calc(var(--safe-right) + var(--panel-width) + var(--ui-gap) * 2);min-height:var(--hud-height);padding:8px 14px;box-sizing:border-box;color:#eaf7ff;background:linear-gradient(135deg,#0c1422e6,#0e0a1ce0);border:1px solid rgba(95,210,255,.45);border-radius:10px}#hud-left,#hud-right,#hud-right-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#hud-right{display:flex;align-items:center;gap:8px}.hud-btn{min-height:40px;border:1px solid rgba(147,223,255,.45);border-radius:8px;background:#1a2a46;color:#fff;padding:7px 10px}#tower-panel-toggle-btn{display:none}.tower-panel{position:fixed;z-index:30;top:calc(var(--safe-top) + var(--ui-gap));right:calc(var(--safe-right) + var(--ui-gap));width:var(--panel-width);height:calc(100svh - var(--safe-top) - var(--safe-bottom) - var(--ui-gap) * 2);display:flex;flex-direction:column;gap:10px;padding:14px;box-sizing:border-box;border-radius:10px;border:1px solid rgba(95,210,255,.4);background:linear-gradient(180deg,#0e1523ed,#080e1ce6)}.tower-panel--hidden{visibility:hidden;opacity:0;pointer-events:none}#app{position:fixed;top:calc(var(--safe-top) + var(--hud-height) + var(--ui-gap) * 2);left:calc(var(--safe-left) + var(--ui-gap));right:calc(var(--safe-right) + var(--panel-width) + var(--ui-gap) * 2);bottom:calc(var(--safe-bottom) + var(--ui-gap));overflow:hidden}@media(max-width:768px){:root{--ui-gap: 6px;--hud-height: 72px}#hud,#app{left:calc(var(--safe-left) + var(--ui-gap));right:calc(var(--safe-right) + var(--ui-gap))}#hud{flex-direction:column;align-items:stretch;justify-content:center;padding:8px 10px}#hud-right{justify-content:space-between}.tower-panel{left:calc(var(--safe-left) + var(--ui-gap));right:calc(var(--safe-right) + var(--ui-gap));top:auto;bottom:calc(var(--safe-bottom) + var(--ui-gap));width:auto;height:min(48svh,320px)}#tower-panel-toggle-btn{display:inline-flex;align-items:center;justify-content:center}.overlay-card{padding:14px}.menu-instructions{font-size:14px}}@media(max-width:768px)and (orientation:portrait){.mode-picker{grid-template-columns:1fr}:root{--hud-height: 44px}#hud{flex-direction:row;align-items:center;padding:5px 10px;font-size:13px}#hud-right{flex-wrap:nowrap}#hud-right-label{display:none}#app{top:calc(var(--safe-top) + 52px);left:calc(var(--safe-left) + 4px);right:calc(var(--safe-right) + 4px);bottom:calc(var(--safe-bottom) + 72px)}.tower-panel,#tower-panel-toggle-btn{display:none!important}#portrait-tower-bar:not(.portrait-bar--hidden){display:flex;position:fixed;z-index:25;bottom:0;left:0;right:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;padding:8px calc(var(--safe-right) + 6px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 6px);box-sizing:border-box;background:linear-gradient(180deg,#0a1120f7,#060c18f7);border-top:1px solid rgba(95,210,255,.3)}#portrait-tower-bar::-webkit-scrollbar{display:none}.portrait-tower-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;height:56px;border-radius:8px;border:1px solid rgba(147,223,255,.4);background:#1a2a3a;color:#fff;gap:2px;padding:4px 8px;box-sizing:border-box;touch-action:manipulation;cursor:pointer}.portrait-tower-btn.is-selected{border-color:#5fd2ff;background:#1e4060}.portrait-tower-btn.is-unaffordable{opacity:.5}.ptb-name{font-size:11px;font-weight:700}.ptb-cost{font-size:11px;color:#aee3ff}#portrait-tower-info:not(.portrait-tower-info--hidden){display:flex;position:fixed;z-index:26;left:calc(var(--safe-left) + 6px);right:calc(var(--safe-right) + 6px);bottom:calc(var(--safe-bottom) + 76px);flex-direction:column;gap:8px;padding:10px 12px;box-sizing:border-box;background:linear-gradient(180deg,#0c1424f7,#080e1cf7);border:1px solid rgba(95,210,255,.5);border-radius:10px;color:#f2f7fb}#portrait-tower-info-text{font-size:12px;white-space:pre-wrap;line-height:1.4;color:#d7ecff}.portrait-tower-info-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.portrait-tower-info-actions button{min-height:44px;border-radius:8px;border:1px solid rgba(147,223,255,.5);color:#fff;font-weight:700;font-size:14px;cursor:pointer;touch-action:manipulation}#portrait-upgrade-btn{background:#1f5c3a}#portrait-sell-btn{background:#3a1f1f}}@media(max-width:900px)and (orientation:landscape){#hud{top:calc(var(--safe-top) + 4px);left:calc(var(--safe-left) + 6px);right:calc(var(--safe-right) + 6px);min-height:52px;flex-direction:row;align-items:center;padding:6px 10px}#app{position:fixed;left:calc(var(--safe-left) + 6px);right:calc(var(--safe-right) + 6px);top:calc(var(--safe-top) + 64px);bottom:calc(var(--safe-bottom) + 6px);width:auto;height:auto;overflow:hidden}.tower-panel{width:min(360px,calc(100vw - var(--safe-left) - var(--safe-right) - 12px));height:min(46svh,260px);left:calc(var(--safe-left) + 6px);right:calc(var(--safe-right) + 6px);bottom:calc(var(--safe-bottom) + 6px);top:auto}#tower-panel-toggle-btn{display:inline-flex;align-items:center;justify-content:center}}.bonus-overlay-card{width:min(920px,100%)}.bonus-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}.bonus-card{min-height:150px;border-radius:12px;border:1px solid rgba(95,210,255,.55);background:linear-gradient(180deg,#162236f2,#0c1626f2);color:#eaf7ff;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;cursor:pointer;touch-action:manipulation}.bonus-card__title{font-size:17px;font-weight:700}.bonus-card__desc{font-size:14px;color:#cbe8ff}.bonus-card__stack{margin-top:auto;font-size:13px;color:#88d9ff;font-weight:600}.bonus-card:hover{border-color:#8ee6ff;transform:translateY(-1px)}@media(max-width:768px){.bonus-cards{grid-template-columns:1fr}.bonus-card{min-height:118px}}