@font-face{font-family:Normalidad;src:url('../assets/normalidad.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url('../assets/montserrat.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--scene-ink:#fff;--scene-muted:rgba(255,255,255,.58);--brand:#00FF72;--button-ink:#161616}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}body{background:#161616;color:var(--scene-ink);font-family:Montserrat,sans-serif;-webkit-tap-highlight-color:transparent}button,a{-webkit-touch-callout:none}button{font:inherit;color:inherit;border:0;cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.25;cursor:default}[hidden]{display:none!important}
#tower-app{position:relative;width:100%;height:100%;height:100dvh;isolation:isolate}#tower-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;outline-offset:-6px;touch-action:none}.header{position:absolute;z-index:3;top:max(26px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;padding:6px 0}.brand img{width:118px;height:auto;filter:brightness(0) invert(1)}body[data-scene-tone="light"] .brand img{filter:brightness(0)}nav{display:flex;align-items:center;gap:14px}.back{font-size:11px;color:var(--scene-muted);margin-right:14px}.icon-button{display:grid;place-items:center;width:44px;height:44px;background:transparent;border-radius:50%}.icon-button:hover{background:rgba(127,127,127,.12)}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.sound-off{display:none}#sound[aria-pressed="false"] .sound-off{display:block}#sound[aria-pressed="false"] .sound-on{display:none}
.hud{position:absolute;z-index:2;top:max(116px,calc(env(safe-area-inset-top) + 90px));left:50%;transform:translateX(-50%);width:min(330px,60vw);display:flex;justify-content:space-between;pointer-events:none}.metric{display:flex;align-items:baseline;gap:8px}.metric strong{font-family:Normalidad,sans-serif;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}.metric span{font-size:9px;font-weight:600;color:var(--scene-muted)}.time{justify-content:flex-end}.time.urgent strong{color:var(--scene-ink)}.time.urgent::after{content:'';width:5px;height:5px;background:var(--brand);border-radius:50%;align-self:center;margin-left:2px}
.copy{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-42%);width:35%;max-width:510px;pointer-events:none}.copy h1,.copy h2,.pause-card h2{font-family:Normalidad,sans-serif;font-weight:700;letter-spacing:0;margin:0;line-height:1.16}.copy h1{font-size:clamp(28px,3.6vw,56px)}.copy h2{font-size:28px}.copy p{font-size:13px;line-height:1.7;color:var(--scene-muted);margin:22px 0 30px;max-width:290px}.copy button{pointer-events:auto}.primary{background:var(--brand);color:var(--button-ink);min-height:48px;padding:0 23px;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;font-family:Normalidad,sans-serif;font-size:11px;line-height:1.35;border-radius:0;transition:transform .2s,opacity .2s}.primary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.primary:hover{transform:translateY(-2px)}.primary:active{transform:translateY(0);opacity:.8}.eyebrow{display:block;font-size:9px;letter-spacing:.12em;font-weight:600;color:var(--scene-muted);margin-bottom:20px}#result h1{font-size:clamp(32px,4vw,60px)}#result-score{font-size:1.55em}.hint{position:absolute;z-index:2;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;width:90%;font-size:11px;line-height:1.5;text-align:center;color:var(--scene-muted);pointer-events:none}.precise{position:absolute;z-index:2;top:0;left:0;width:84px;transform:translateY(-50%);font-family:Normalidad,sans-serif;font-size:13px;line-height:1.3;text-align:center;white-space:nowrap;pointer-events:none;--check-opacity-dur:250ms;--check-rotate-dur:250ms;--check-rotate-from:0deg;--check-bob-dur:350ms;--check-y-amount:6px;--check-blur-dur:250ms;--check-blur-from:1px}.overlay{position:absolute;z-index:4;inset:0;display:grid;place-items:center;background:rgba(16,16,16,.58);backdrop-filter:blur(12px);color:white}.pause-card{text-align:center;display:flex;align-items:center;flex-direction:column;gap:24px;padding:30px}.pause-card .eyebrow{margin:0;color:rgba(255,255,255,.55)}.pause-card h2{font-size:32px}.text-button{background:transparent;font-size:11px;color:rgba(255,255,255,.6);padding:12px}.loading{display:flex;align-items:center;gap:12px}.loading p{margin:0}.loading-dot{width:5px;height:5px;background:var(--brand);border-radius:50%;animation:breathe 1.5s ease-in-out infinite}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--brand);outline-offset:5px}@keyframes breathe{50%{opacity:.3}}
@media(max-width:700px) and (orientation:portrait){.header{top:max(18px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.brand img{width:92px}nav{gap:2px}.back{font-size:9px;margin-right:5px;max-width:65px;line-height:1.5}.icon-button{width:40px;height:44px}.hud{top:100px;width:58vw}.metric{gap:5px}.metric strong{font-size:24px}.metric span{font-size:8px}.copy{top:auto;bottom:max(70px,calc(env(safe-area-inset-bottom) + 50px));left:8%;width:84%;max-width:none;transform:none}.copy h1{font-size:28px;line-height:1.15}.copy h2{font-size:20px}.copy p{font-size:11px;margin:12px 0 18px}.primary{min-height:44px;font-size:10px;padding:0 18px;gap:32px}.eyebrow{font-size:8px;margin-bottom:12px}#result h1{font-size:28px}#result h1 br{display:none}#result-score{font-size:1.4em;margin-right:12px}.hint{font-size:9px;bottom:max(24px,env(safe-area-inset-bottom))}.precise{width:72px;font-size:11px}.loading{bottom:21%}}
@media(max-height:500px) and (orientation:landscape){.header{top:12px}.brand img{width:88px}.copy{left:6%;width:38%;transform:translateY(-30%)}.copy h1{font-size:26px}.copy p{margin:12px 0 18px;font-size:11px}.hud{top:82px;width:230px}.metric strong{font-size:24px}.hint{bottom:15px;font-size:9px}#result h1{font-size:27px}.eyebrow{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.primary:hover{transform:none}}

body[data-input="pointer"] #tower-canvas:focus-visible{outline:none}
.primary:focus-visible{outline:none}
body[data-input="keyboard"] .primary:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* transitions-dev: success reveal, tuned locally for the landing label. */
:root {
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }
/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

body[data-phase="paused"] .precise{visibility:hidden}
body[data-phase="paused"] .t-success-check{animation-play-state:paused}

/* Fit the longer name within the existing intro column. */
#intro-title{font-size:clamp(18px,3.4vw,50px)}
#intro p{max-width:360px}
@media(max-width:700px) and (orientation:portrait){#intro-title{font-size:min(28px,8.3vw)}}
@media(max-height:500px) and (orientation:landscape){#intro-title{font-size:min(26px,3.7vw)}}