:root{--navy:#17213f;--ink:#1e2949;--cream:#fff7dd;--paper:#fffdf5;--yellow:#ffd85a;--orange:#ff8b4a;--coral:#ff5f76;--cyan:#48d3dd;--mint:#62dc9b;--purple:#7768e8;--shadow:0 18px 45px rgba(10,15,39,.34)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#11182f;color:var(--ink);font-family:Inter,ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:4px solid #fff;outline-offset:3px}.is-hidden{display:none!important}.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}
#app{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 0,#314578,#121a33 63%,#0b1124)}#game-shell{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.778vw);max-width:540px;max-height:960px;overflow:hidden;background:var(--navy);isolation:isolate;box-shadow:0 0 80px rgba(0,0,0,.4)}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center}.overlay-system{background:linear-gradient(180deg,rgba(20,29,59,.96),rgba(10,16,39,.98));color:white}.overlay-system h2{margin:8px 0;font-size:clamp(28px,6vw,42px)}.overlay-system p:not(.eyebrow){max-width:360px;line-height:1.5}.loading-mark{width:92px;height:92px;filter:drop-shadow(0 16px 22px rgba(0,0,0,.28));animation:toyBounce 1.1s ease-in-out infinite}.loading-track{width:min(280px,70vw);height:10px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:24px}.loading-track span{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--yellow),var(--coral));animation:loadingSlide 1s ease-in-out infinite}
.eyebrow{margin:0 0 10px;color:var(--yellow);font-size:11px;font-weight:1000;letter-spacing:.19em;text-transform:uppercase}.icon-button{position:absolute;z-index:35;top:max(14px,env(safe-area-inset-top));width:50px;height:42px;border:2px solid rgba(255,255,255,.32);border-radius:18px;background:rgba(20,29,59,.66);color:#fff;font-weight:950;backdrop-filter:blur(10px)}.language-button{left:max(14px,env(safe-area-inset-left));padding:0 7px;appearance:none;text-align:center;text-align-last:center}.sound-button{right:max(14px,env(safe-area-inset-right));font-size:20px}.language-button option{color:var(--ink);background:#fff}.icon-button.in-game{top:auto;bottom:max(12px,env(safe-area-inset-bottom));height:38px;width:54px}.hosted .sound-button{display:none}.hosted .language-button{display:none}
.menu-overlay{justify-content:flex-start;padding-top:clamp(78px,13vh,126px);background:linear-gradient(180deg,rgba(19,28,57,.05),rgba(19,28,57,.72) 55%,rgba(13,20,43,.97));color:#fff}.menu-mark{width:136px;height:122px;margin-bottom:6px;display:grid;place-items:center;animation:toyBounce 2.1s ease-in-out infinite}.menu-mark img{width:118px;filter:drop-shadow(0 16px 16px rgba(0,0,0,.34))}.menu-overlay h1{margin:0;line-height:.82;font-size:clamp(48px,11vw,70px);font-weight:1000;letter-spacing:-.07em;text-shadow:0 6px 0 rgba(9,16,37,.5)}.menu-overlay h1 span,.menu-overlay h1 em{display:block;font-style:normal}.menu-overlay h1 em{color:var(--yellow)}.menu-copy{max-width:430px;margin:24px 0 14px;font-size:clamp(14px,3.7vw,18px);font-weight:750;line-height:1.38}.best-score{display:flex;gap:10px;align-items:baseline;margin:2px 0 18px}.best-score span{font-size:11px;letter-spacing:.15em;font-weight:950;color:#c6cee9}.best-score strong{font-size:24px}.primary-button{width:min(400px,92%);min-height:62px;border:0;border-radius:22px;padding:0 26px;display:flex;align-items:center;justify-content:center;gap:16px;background:linear-gradient(180deg,#ffe988,#ffd250);color:#202844;font-weight:1000;letter-spacing:.07em;box-shadow:0 8px 0 #d9783d,var(--shadow);transition:transform .15s}.primary-button:active{transform:translateY(5px);box-shadow:0 3px 0 #d9783d}.primary-button b{font-size:24px}.secondary-button,.text-button{border:0;background:transparent;color:#fff;font-weight:950;letter-spacing:.11em}.secondary-button{margin-top:20px;padding:11px 18px;border:2px solid rgba(255,255,255,.28);border-radius:16px}.text-button{padding:17px}.control-hint{max-width:340px;color:#cbd3ed;font-size:11px;line-height:1.4;font-weight:750;margin-top:16px}
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;color:#fff}.hud-pill{position:absolute;top:max(14px,env(safe-area-inset-top));height:58px;border:2px solid rgba(255,255,255,.32);border-radius:18px;background:rgba(20,29,59,.78);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1}.hud-pill span,.hud-pill small,.energy-meter span{font-size:8px;font-weight:950;letter-spacing:.12em;color:#cfd7f1}.hud-pill strong{font-size:21px;margin-top:4px}.hud-score{left:14px;width:116px;align-items:flex-start;padding-left:15px}.hud-score small{position:absolute;left:15px;bottom:6px;color:var(--yellow);font-size:7px}.hud-score strong{font-size:18px}.hud-time{left:50%;width:104px;transform:translateX(-50%)}.hud-base{right:14px;width:122px}.hud-base strong{font-size:16px;color:#ff7185;letter-spacing:.05em}.hud-base small{margin-top:4px}.combo-pill{position:absolute;top:84px;left:50%;transform:translateX(-50%);padding:6px 13px;border-radius:99px;background:var(--coral);box-shadow:0 6px 18px rgba(255,95,118,.35);display:flex;gap:6px;font-size:10px;font-weight:950}.energy-meter{position:absolute;left:50%;top:82px;transform:translateX(-50%);width:180px;height:26px;padding:0 8px;border-radius:14px;background:rgba(20,29,59,.74);display:flex;align-items:center;gap:7px}.energy-meter div{height:7px;flex:1;border-radius:99px;background:rgba(255,255,255,.17);overflow:hidden}.energy-meter i{display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--cyan),var(--yellow));border-radius:inherit}.energy-meter b{font-size:9px}
.unit-tray{position:absolute;z-index:12;left:10px;right:10px;bottom:max(9px,env(safe-area-inset-bottom));padding:7px 7px 9px;border:2px solid rgba(255,255,255,.2);border-radius:22px;background:rgba(18,27,54,.91);backdrop-filter:blur(12px);color:white}.unit-tray>p{margin:0 0 5px;text-align:center;font-size:8px;font-weight:1000;letter-spacing:.17em;color:#cbd3ed}.unit-tray>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.unit-button{min-width:0;height:62px;padding:7px;border:2px solid rgba(255,255,255,.18);border-radius:15px;background:#26345c;color:white;display:grid;grid-template-columns:31px 1fr;grid-template-rows:1fr 1fr;text-align:left;gap:0 7px}.unit-button.is-selected{border-color:#fff;box-shadow:0 0 0 3px var(--yellow),0 7px 18px rgba(0,0,0,.3);transform:translateY(-3px)}.unit-icon{grid-row:1/3;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;align-self:center;font-style:normal;color:#fff}.robot-icon{background:var(--cyan)}.dino-icon{background:var(--mint)}.rocket-icon{background:var(--coral)}.unit-button span{display:flex;flex-direction:column;align-self:end;min-width:0}.unit-button strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-button small{font-size:6px;color:#cbd3ed;font-weight:900;letter-spacing:.1em}.unit-button>b{font-size:8px;color:var(--yellow);align-self:start}.unit-button:disabled{opacity:.45}
.modal-overlay{z-index:45;background:rgba(11,17,39,.82);backdrop-filter:blur(13px)}.modal-card,.upgrade-shell{width:min(450px,100%)}.briefing-card{padding:28px 22px;border-radius:30px;background:var(--paper);box-shadow:0 9px 0 #e88a4c,var(--shadow)}.briefing-card h2,.upgrade-shell h2{margin:2px 0 20px;font-size:clamp(30px,7vw,42px);line-height:1}.guide-grid{display:grid;gap:10px;text-align:left;margin-bottom:22px}.guide-grid article{display:grid;grid-template-columns:42px 1fr;column-gap:12px;padding:12px;border-radius:18px;background:#f0efff}.guide-grid i{grid-row:1/3;width:38px;height:38px;border-radius:12px;background:var(--purple);color:white;display:grid;place-items:center;font-style:normal;font-weight:1000}.guide-grid strong{font-size:15px}.guide-grid p{margin:3px 0 0;font-size:12px;line-height:1.35}.compact-button{min-height:52px;box-shadow:0 6px 0 #d9783d}
.upgrade-shell{color:#fff}.upgrade-options{display:grid;gap:12px}.upgrade-option{width:100%;min-height:105px;padding:14px 17px;border:3px solid #fff;border-radius:23px;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:58px 1fr 24px;align-items:center;text-align:left;box-shadow:0 7px 0 #d75b70,var(--shadow)}.upgrade-option i{width:52px;height:52px;border-radius:17px;background:linear-gradient(145deg,var(--yellow),var(--orange));display:grid;place-items:center;font-size:24px;font-style:normal}.upgrade-option strong{font-size:17px}.upgrade-option p{margin:5px 0 0;font-size:11px;line-height:1.35}.upgrade-option b{font-size:22px;color:var(--coral)}
.result-overlay{z-index:40;background:linear-gradient(180deg,rgba(18,27,55,.75),rgba(12,18,39,.98));color:#fff}.result-overlay h2{font-size:clamp(34px,8vw,48px);margin:5px 0 22px}.final-score{width:min(400px,94%);padding:18px;border-radius:24px;background:linear-gradient(180deg,#fff5bf,#ffd85a);color:var(--ink);box-shadow:0 8px 0 #dd7642,var(--shadow)}.final-score span,.result-stats span{display:block;font-size:9px;font-weight:950;letter-spacing:.16em}.final-score strong{display:block;font-size:58px;line-height:1}.result-stats{width:min(400px,94%);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.result-stats div{padding:14px 7px;border:2px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(255,255,255,.08)}.result-stats strong{display:block;margin-top:5px;font-size:21px}.new-best{margin:0 0 14px;color:var(--yellow);font-weight:1000;letter-spacing:.14em;font-size:11px}.announcement{position:absolute;z-index:30;top:120px;left:50%;transform:translateX(-50%);min-width:190px;padding:10px 16px;border:3px solid #fff;border-radius:99px;background:var(--coral);color:white;text-align:center;font-weight:1000;font-size:12px;box-shadow:var(--shadow);pointer-events:none}.placement-hint{position:absolute;z-index:13;left:50%;top:150px;transform:translateX(-50%);color:#fff;text-align:center;font-size:10px;font-weight:950;pointer-events:none}.placement-hint span{display:block;width:34px;height:34px;margin:auto;border:3px solid var(--yellow);border-radius:10px;animation:hintPulse 1s infinite}.screen-flash{position:absolute;z-index:50;inset:0;background:white;opacity:0;pointer-events:none}.screen-flash.is-active{animation:flash .28s ease-out}.execution-paused canvas,.execution-paused .unit-tray{filter:saturate(.6) brightness(.7)}
@keyframes loadingSlide{0%{transform:translateX(-105%)}100%{transform:translateX(265%)}}@keyframes toyBounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}@keyframes hintPulse{0%,100%{transform:scale(.85);opacity:.5}50%{transform:scale(1.1);opacity:1}}@keyframes flash{0%{opacity:.65}100%{opacity:0}}
@media(max-height:720px){.menu-overlay{padding-top:58px}.menu-mark{width:100px;height:90px}.menu-mark img{width:88px}.menu-overlay h1{font-size:46px}.menu-copy{margin:14px 0 8px}.control-hint{display:none}.unit-tray{transform:scale(.92);transform-origin:bottom center;left:4px;right:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}