@font-face{font-family:Aleteo;src:url('assets/nunito.ttf') format('truetype');font-display:swap;font-weight:200 1000}
:root{color-scheme:light;--paper:#f6efe3;--ink:#284c50;--muted:#597074;--cream:#fff5de}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Aleteo,'Trebuchet MS',sans-serif;min-height:100svh;display:grid;place-items:center}::selection{background:#d69b74;color:#203d40}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #a44f30;outline-offset:4px}button:disabled{cursor:wait;opacity:.6}.app{width:min(100%,450px,calc((100svh - 100px)*.5625));padding:0 0 8px}header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.wordmark{font-weight:900;font-size:31px;letter-spacing:-.035em;display:flex;align-items:center;gap:5px;color:var(--ink);text-decoration:none}.wordmark svg{width:32px;height:29px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.actions{display:flex;gap:5px}.icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:transparent;transition:background .15s}.icon:hover{background:#e9dcc7}.icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.stage{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:18px;background:#e9b8a2;isolation:isolate;box-shadow:0 16px 44px #735d4020}canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px!important}.hud{position:absolute;inset:16px 14px auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.best{font-size:10px;letter-spacing:.08em;background:var(--cream);padding:9px 12px;border-radius:12px;display:flex;flex-direction:column;gap:1px;min-width:64px}.best strong{font-size:22px;letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.1}#score{position:absolute;left:50%;transform:translateX(-50%);font-size:50px;line-height:1.1;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.pause{background:var(--cream);pointer-events:auto}.pause:disabled{opacity:.45;cursor:default}.panel{position:absolute;inset:24% 15px auto;text-align:center;display:flex;align-items:center;flex-direction:column}.panel[hidden]{display:none}h1{font-size:clamp(36px,7svh,60px);font-weight:900;line-height:1;letter-spacing:-.04em;margin:0;text-wrap:balance}#message{font-size:16px;line-height:1.5;margin:14px 0 22px}.primary{background:var(--ink);color:var(--cream);border-radius:14px;padding:14px 25px;min-height:50px;box-shadow:0 6px 16px #254c5028;font-weight:800;font-size:16px;transition:transform .15s,background .15s}.primary:hover{background:#3d6668;transform:translateY(-2px)}.primary:active{transform:translateY(1px)}.hint{font-size:11px;color:#284c50;margin:16px 0;background:#fff2dcdd;padding:6px 10px;border-radius:8px}kbd{font:inherit;font-weight:800}.scene-label{position:absolute;bottom:17px;left:20px;right:20px;font-size:9px;letter-spacing:.15em;color:#fff7e6;display:flex;align-items:center;gap:8px;text-shadow:0 1px 4px #203b37}.scene-label span{width:5px;height:5px;background:#ffe1a2;border-radius:50%}.flash{position:absolute;inset:0;pointer-events:none;background:#fff3e4;opacity:0}.flash.hit{animation:hit .4s ease-out}@keyframes hit{from{opacity:.65}to{opacity:0}}footer{padding:12px 8px 0;display:flex;justify-content:space-between;font-size:10px;color:#546a69}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.stage:fullscreen{height:100dvh;width:auto;max-width:100vw;aspect-ratio:9/16;margin:auto;border-radius:0}.stage:fullscreen::backdrop{background:#203e40}@media(max-width:480px){.app{width:min(100%,calc((100svh - 85px)*.5625));padding-bottom:0}header{height:49px}.stage{border-radius:14px}footer{font-size:9px;padding-top:9px}.wordmark{font-size:28px}.hud{inset:13px 12px auto}.best{padding:7px 10px}#score{font-size:44px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@font-face{font-family:Aleteo;src:url('assets/nunito-heavy.ttf') format('truetype');font-display:swap;font-weight:800 1000}
.app{width:min(100%,450px,calc((100svh - 110px)*.5625))}.panel{inset-block-start:19%}.best,footer{font-size:11px}.scene-label{font-size:10px;width:max-content;max-width:calc(100% - 40px);right:auto;background:#284c50;padding:5px 8px;border-radius:5px;bottom:12px;text-shadow:none}.stage{box-shadow:0 16px 44px #00000012}@media(max-width:480px){.app{width:min(100%,calc((100svh - 95px)*.5625))}footer{font-size:10px}} 
#score,#title,#message{transition:color 1.5s ease}.night #score,.night #title,.night #message{color:#fff2d8}.night .primary{background:#fff2d8;color:#284c50}.night .primary:hover{background:#f8ddb0}

/* Plataforma: sin título ni controles de hora, sonido y pantalla completa; el escenario ocupa todo el alto
   y el recuadro de marca va dentro, arriba a la derecha. La pausa baja debajo del recuadro. */
footer[hidden]{display:none}
.app{width:min(100%,450px,100svh * .5625);padding:0}
.stage{border-radius:0;box-shadow:none}
.hud>#score{position:absolute;left:50%;transform:translateX(-50%)}
.hud .pause{position:absolute;right:0;top:54px}
.brand-slot{position:absolute;top:16px;right:14px;z-index:3;display:flex;align-items:center;justify-content:center;width:112px;height:44px;border-radius:12px;border:2px dashed #9fb3ae;background:#fff5dee6;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;overflow:hidden}
.brand-slot.has-logo{border:0;background:transparent}
.brand-slot img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:480px){.brand-slot{top:13px;right:12px;width:100px;height:40px;font-size:9px}.hud .pause{top:50px}}
.scene-label{display:none}

/* Plataforma: «Tu logo aquí» en verde brillante con un pulso suave, para que se note. */
.brand-slot:not(.has-logo){background:#22c55e;border:2px solid #15803d;color:#052e16;text-shadow:none;animation:brand-slot-pulse 2.2s ease-in-out infinite}
@keyframes brand-slot-pulse{0%,100%{box-shadow:0 0 0 0 #22c55eb3}50%{box-shadow:0 0 0 7px #22c55e00}}
@media(prefers-reduced-motion:reduce){.brand-slot:not(.has-logo){animation:none}}