@font-face{font-family:Forest;src:url('assets/nunito.ttf');font-weight:400 700;font-display:swap}@font-face{font-family:Forest;src:url('assets/nunito-heavy.ttf');font-weight:800 1000;font-display:swap}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:#172d24;color:#fff0cd;font-family:Forest,sans-serif}::selection{background:#e5bd6f;color:#362b18}.stage{position:relative;width:min(100vw,450px,calc(100svh * .5625));aspect-ratio:9/16;overflow:hidden;isolation:isolate;container-type:inline-size;background:#4d7660}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;inset:1.2% 0 auto;pointer-events:none}h1{margin:0 auto;width:61%}h1 img{display:block;width:100%;height:22cqw;object-fit:contain}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:wait;opacity:.65}button:focus-visible,canvas:focus-visible{outline:3px solid #ffdc8b;outline-offset:3px}.pause{position:absolute;right:3%;top:3%;width:11cqw;height:11cqw;min-width:32px;min-height:32px;display:grid;place-items:center;border-radius:50%;border:2px solid #d9b678;background:#74522e;color:#ffedc6;box-shadow:0 3px 7px #1a241f60;pointer-events:auto}.pause svg{width:54%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}.hud{position:absolute;top:14%;left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 2px 5px #243b2b}.hud>span{font-size:3.4cqw;font-weight:900}.hud>strong{display:block;font-size:12cqw;font-weight:1000;line-height:1.04;font-variant-numeric:tabular-nums}.lives{display:flex;gap:2cqw;justify-content:center;margin-top:1.7cqw}.lives svg{width:6.5cqw;height:6cqw;fill:#f56d70;filter:drop-shadow(0 2px 2px #62322e70);transition:opacity .2s}.lives .lost{opacity:.22}.feedback{position:absolute;top:28%;left:8%;right:8%;text-align:center;font-weight:900;font-size:4cqw;text-shadow:0 2px 6px #173b25;pointer-events:none}.panel{position:absolute;left:9%;right:9%;bottom:12%;text-align:center;background:#fff0d5f5;color:#48351f;padding:3.5cqw 5cqw;border-radius:16px;box-shadow:0 8px 25px #19332555}.panel h2{font-size:5.5cqw;line-height:1.1;margin:0 0 1.5cqw;font-weight:1000}.panel p{font-size:3.1cqw;line-height:1.35;margin:0 auto 3cqw;max-width:29ch}.panel button{width:100%;min-height:42px;padding:2.5cqw 3cqw;border:0;border-radius:12px;background:#3f6238;color:#fff3d9;font-size:4cqw;font-weight:900;box-shadow:0 3px 7px #34542b30}.panel button:hover:not(:disabled){background:#2b4f2b}.panel button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.lanes{position:absolute;left:18%;right:18%;bottom:13%;display:flex;justify-content:space-between;gap:3cqw}.lanes button{width:13cqw;height:11cqw;min-height:38px;border-radius:12px;border:2px solid #e5c18a;background:#735330;color:#fff0c8;box-shadow:0 3px 8px #1b382a66;display:grid;place-items:center}.lanes button[aria-pressed=true]{background:#f4d087;color:#4a351e}.lanes svg{width:50%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}footer{position:absolute;bottom:2.5%;left:7%;right:7%;text-align:center;pointer-events:none}#hint{display:flex;align-items:center;justify-content:center;gap:2cqw;min-height:12cqw;margin:0;padding:2.5cqw 3cqw;border-radius:13px;background:#f4e7c9f0;color:#4d351c;font-size:3.2cqw;font-weight:900;box-shadow:0 3px 12px #1b382a33}#hint svg{width:6cqw;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.record{display:block;font-size:2.6cqw;margin-top:1.5cqw;text-shadow:0 1px 4px #152d1b;color:#fff1d4}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Plataforma: recuadro de marca arriba a la derecha; la pausa pasa a la izquierda y el letrero se reduce. */
h1{width:46%}
h1 img{height:18cqw}
.pause{right:auto;left:3%}
.brand-slot{position:absolute;right:3%;top:3%;width:23cqw;height:11cqw;min-height:32px;display:flex;align-items:center;justify-content:center;border-radius:2.6cqw;border:2px dashed #d9b678;background:#74522ecc;color:#ffedc6;font-size:2.3cqw;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.1;text-decoration:none;box-shadow:0 3px 7px #1a241f60;pointer-events:auto;overflow:hidden}
.brand-slot.has-logo{border:0;background:#fff0cdee;padding:1cqw}
.brand-slot img{max-width:100%;max-height:100%;object-fit:contain}

/* 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}}