:root{--ink:#10253a;--orange:#ff7a22;--yellow:#ffc928}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0c2539;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}button{font:inherit}.game-shell{position:relative;width:100%;height:100dvh;min-height:520px;overflow:hidden;background:linear-gradient(#8adced,#def7f5 65%,#f9d694);user-select:none;touch-action:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hud{position:absolute;z-index:10;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto auto auto;align-items:start;gap:10px;padding:max(12px,env(safe-area-inset-top)) 14px 0;pointer-events:none}.brand{display:flex;align-items:center;gap:9px;color:#fff;text-shadow:0 2px 6px #26556c}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--orange);border:3px solid #fff;box-shadow:0 4px 0 #b94213;font:900 23px/1 Barlow Condensed}.brand strong{font:900 24px/1 Barlow Condensed;letter-spacing:.05em}.score-card{min-width:74px;text-align:center;padding:5px 9px 7px;border-radius:11px;background:rgba(255,248,230,.93);border:2px solid #fff;box-shadow:0 5px 0 rgba(16,37,58,.25)}.score-card span,.score-card small{display:block;font:900 9px/1.1 Nunito;letter-spacing:.1em;color:#57758b}.score-card strong{display:block;font:900 25px/1 Barlow Condensed}.score-card small{color:#e35d1d}.icon-button{pointer-events:auto;width:40px;height:40px;border:2px solid #fff;border-radius:12px;background:rgba(16,37,58,.82);color:#fff;font-size:20px;font-weight:900;box-shadow:0 5px 0 rgba(5,20,33,.35)}.screen{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}.screen[hidden],[hidden]{display:none!important}.intro{justify-content:flex-start;padding-top:max(8vh,54px)}.logo-wrap{position:relative;z-index:2}.eyebrow{display:inline-block;padding:7px 14px;border:2px solid rgba(16,37,58,.18);border-radius:999px;background:rgba(255,255,255,.65);font:900 11px/1 Nunito;letter-spacing:.15em}.screen h1,.screen h2{margin:10px 0 8px;font:900 clamp(58px,12vw,92px)/.72 Barlow Condensed;color:#fff;letter-spacing:-.025em;text-transform:uppercase;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink),0 10px 24px rgba(16,37,58,.28);transform:rotate(-2deg)}.screen h1 em{font-style:normal;color:var(--yellow)}.screen p{margin:18px 0;color:#345971;font-size:15px;font-weight:800;line-height:1.45}.hero-building{position:absolute;left:50%;bottom:118px;width:230px;height:290px;transform:translateX(-50%);filter:drop-shadow(0 18px 18px rgba(24,64,82,.22))}.hero-building:before{content:"";position:absolute;left:50%;top:-180px;width:3px;height:200px;background:#243e50}.hero-building:after{content:"";position:absolute;left:calc(50% - 8px);top:-1px;width:16px;height:11px;border-radius:0 0 8px 8px;background:#243e50}.hero-floor,.roof{position:absolute;left:15px;width:200px;height:68px;border:4px solid var(--ink);border-radius:5px;background:linear-gradient(90deg,#ef6630 0 8%,#fff1cc 8% 92%,#d64c20 92%);box-shadow:0 7px 0 rgba(16,37,58,.22)}.hero-floor:after{content:"";position:absolute;inset:10px 22px;background:repeating-linear-gradient(90deg,#58c9e7 0 28px,#fff 28px 34px);border:3px solid var(--ink)}.f1{bottom:0}.f2{bottom:62px;left:24px;transform:rotate(-2deg)}.f3{bottom:123px;left:10px;transform:rotate(2deg)}.roof{bottom:184px;left:2px;width:220px;height:28px;background:var(--yellow);transform:skewX(-9deg)}.primary{position:absolute;z-index:4;bottom:max(54px,calc(env(safe-area-inset-bottom) + 32px));display:flex;align-items:center;justify-content:space-between;width:min(330px,82vw);height:66px;padding:0 10px 0 26px;border:3px solid var(--ink);border-radius:18px;background:linear-gradient(#ff9637,#ff721f);color:#fff;box-shadow:0 8px 0 #a83717,0 13px 26px rgba(16,37,58,.25),inset 0 2px 0 rgba(255,255,255,.5);font:900 24px Barlow Condensed;letter-spacing:.05em}.primary b{display:grid;place-items:center;width:45px;height:45px;border-radius:12px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink)}.primary:active{transform:translateY(6px);box-shadow:0 2px 0 #a83717}.best-pill{position:absolute;z-index:3;bottom:max(132px,calc(env(safe-area-inset-bottom) + 110px));padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.8);font-size:11px;font-weight:900;letter-spacing:.08em}.hint{position:absolute!important;bottom:4px;margin:0!important;font-size:11px!important}.play-callout{position:absolute;z-index:8;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(290px,75vw);padding:12px 22px;text-align:center;color:#fff;border-radius:16px;background:rgba(16,37,58,.87);border:2px solid #fff;box-shadow:0 7px 0 rgba(5,20,33,.32)}.play-callout strong,.play-callout span{display:block}.play-callout strong{font:900 22px/1 Barlow Condensed;letter-spacing:.1em}.play-callout span{font-size:10px;opacity:.8}.feedback{position:absolute;z-index:12;left:50%;top:25%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;font:900 43px/1 Barlow Condensed;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}.feedback.pop{animation:pop .9s both}.result{background:linear-gradient(rgba(9,35,54,.35),rgba(9,35,54,.8));color:#fff;backdrop-filter:blur(4px)}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(360px,90vw);margin-top:24px}.result-stats div{padding:13px 8px;border:2px solid #fff;border-radius:14px;background:#fff8e6;color:var(--ink);box-shadow:0 6px 0 rgba(16,37,58,.35)}.result-stats span{display:block;font-size:9px;font-weight:900;letter-spacing:.12em;color:#668096}.result-stats strong{font:900 32px/1 Barlow Condensed}.result .primary{position:relative;bottom:auto;margin-top:30px}.result .eyebrow{color:var(--ink)}@keyframes pop{0%{opacity:0;transform:translate(-50%,25px) scale(.65)}25%{opacity:1;transform:translate(-50%,0) scale(1.16)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-32px)}}@media(max-width:600px){.brand strong{display:none}.hud{gap:7px}.score-card{min-width:66px}.hero-building{transform:translateX(-50%) scale(.85);transform-origin:bottom}.screen h1{font-size:64px}}@media(min-width:800px){.game-shell{max-width:620px;margin:auto;box-shadow:0 0 100px #061723}body{background:radial-gradient(circle,#21435a,#07131e)}}