/* /buddy v2 — una pantalla por etapa, sin scroll. Mobile-first. */
html,body.game{height:100%;overflow:hidden;overscroll-behavior:none}
body.game{min-height:0;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center}

.app{position:relative;display:flex;flex-direction:column;width:100%;max-width:440px;height:100%;background:var(--bg);
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:24px 24px;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
/* Escritorio / pantallas grandes: la misma tarjeta de ancho de teléfono, centrada */
@media (min-width:600px) and (min-height:640px){
  .app{height:min(calc(100vh - 48px),880px);height:min(calc(100dvh - 48px),880px);border:3px solid var(--lime);box-shadow:0 0 0 4px var(--bg),0 0 60px rgba(198,255,61,.2)}
}

/* HUD */
.bhud{flex:none;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-bottom:2px solid rgba(198,255,61,.18)}
.bhud .lvl{font-size:22px;min-width:58px}
.bhud .xp{height:14px}
.bhud .xpt{font-size:18px}
.cfoot{flex:none;display:flex;justify-content:space-between;align-items:center;height:34px;padding:0 18px;border-top:2px solid rgba(198,255,61,.12)}
.cfoot a{font:600 12px/1 var(--body);color:var(--dim);text-decoration:none}
.cfoot a:hover{color:var(--lime)}
.cfoot .pg{font:400 20px/1 var(--title);color:var(--lime)}

/* Etapas: cada una llena el área; solo una visible */
.stages{position:relative;flex:1 1 auto;min-height:0;container-type:size;overflow:hidden}
.stage{position:absolute;inset:0;display:none;flex-direction:column;justify-content:space-between;
  padding:16px 20px 18px;gap:12px;
  padding:clamp(10px,3.2cqh,26px) 20px clamp(14px,3cqh,24px);gap:clamp(6px,2cqh,16px)}
.stage.on{display:flex}
.push{display:flex;flex-direction:column;gap:10px;gap:clamp(6px,1.6cqh,12px)}
.stage .tag{font-size:11px}
.st-title{font-size:56px;font-size:min(17cqw,10.5cqh)}
.btn{min-height:52px;min-height:clamp(46px,8.6cqh,60px);font-size:13px;font-size:clamp(12px,2.3cqh,15px);gap:10px}
.btn.ghost{font-size:11.5px;font-size:clamp(10.5px,2cqh,13px)}
.txt{font-size:14px;font-size:clamp(12.5px,2.5cqh,15.5px);line-height:1.45}
.note{font:700 10px/1.3 var(--tag);color:var(--dim);letter-spacing:.5px;text-transform:uppercase;text-align:center}
.note.small{font:500 12px/1.3 var(--body);text-transform:none;letter-spacing:0}
.linkbtn{appearance:none;background:none;border:0;cursor:pointer;font:700 11px/1 var(--tag);color:var(--lime);letter-spacing:.5px;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px;margin:0 auto}
.linkbtn[hidden]{display:none}

/* 1 · PRESS START */
.title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.s-start .st-title{font-size:72px;font-size:min(22cqw,12.5cqh)}
.s0-sprite{width:104px;width:min(27cqw,15cqh);height:auto;margin-bottom:6px;animation:bob 1.6s steps(2) infinite}
.lead{font-size:16px;font-size:clamp(14px,3cqh,19px);line-height:1.3;font-weight:600;color:#fff}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats-t{grid-column:1/-1;font-size:10px!important}
.stat{border:3px solid var(--lime);padding:10px 12px;padding:clamp(6px,1.6cqh,12px) 12px;background:rgba(198,255,61,.04)}
.stat .big{display:block;font:400 48px/.85 var(--title);font-size:min(13cqw,8cqh);color:var(--lime);text-shadow:0 0 16px rgba(198,255,61,.35)}
.stat .lb{display:block;font-size:12px;font-size:clamp(11px,2.1cqh,13px);line-height:1.25;font-weight:600;margin-top:5px}
.levels-line{font-size:11.5px;font-size:clamp(10.5px,2cqh,12.5px);line-height:1.45;color:var(--dim)}
.levels-line b{font:700 10px/1 var(--tag);color:var(--lime);text-transform:uppercase;letter-spacing:.5px}

/* 2 · NIVEL 1 */
.tag-row{display:flex;align-items:center;justify-content:space-between}
.free{font:700 12px/1 var(--tag);letter-spacing:1px;text-transform:uppercase;background:var(--lime);color:var(--bg);padding:7px 10px;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--lime),0 0 18px rgba(198,255,61,.5);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--lime),0 0 30px rgba(198,255,61,.8)}}
.s-tg .mid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;gap:clamp(6px,1.8cqh,14px)}
.s1-sprite{width:126px;width:min(36cqw,20cqh);height:auto;animation:bob 1.6s steps(2) infinite}
.s-tg .txt:first-of-type{font-size:16px;font-size:clamp(14px,3cqh,18px);font-weight:600;color:#fff}
.s-tg[data-wait="1"] .note::after{content:"_";animation:blink2 .8s steps(2) infinite}
@keyframes blink2{50%{opacity:0}}

/* 3 · NIVEL 2 */
.ach{display:flex;align-items:center;gap:12px;padding:10px 12px;border:3px solid var(--lime);background:rgba(198,255,61,.08);box-shadow:0 0 0 3px var(--bg),0 0 26px rgba(198,255,61,.35)}
.ach-sprite{flex:none;width:56px;width:min(15cqw,10cqh);height:auto}
.ach-t{display:flex;align-items:center;gap:7px;font:700 11px/1.2 var(--tag);color:var(--lime);letter-spacing:.5px;text-transform:uppercase;text-shadow:-2px 0 rgba(0,229,255,.8),2px 0 rgba(255,43,214,.8)}
.ach-x{font-size:13px;font-size:clamp(12px,2.3cqh,14px);font-weight:600;margin-top:4px;color:#fff}
.ach.pop{animation:pop .6s steps(6) both}
.ach.pop .ach-sprite{animation:hop .5s steps(2) 3 .5s}
@keyframes pop{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.08);opacity:1}55%{transform:scale(.97)}70%{transform:scale(1.02)}100%{transform:none;opacity:1}}
@keyframes hop{50%{transform:translateY(-6px)}}
.s-dl .st-title{font-size:48px;font-size:min(14cqw,8.5cqh)}
.thumb{flex:1 1 0;min-height:0;display:flex;justify-content:center;align-items:center}
.thumb picture{height:100%;display:flex;justify-content:center;align-items:center}
.thumb img{height:100%;max-height:280px;width:auto;max-width:100%;object-fit:contain;border:3px solid var(--lime);box-shadow:0 0 0 3px var(--bg),0 0 26px rgba(198,255,61,.2);transform:rotate(1.5deg)}
.s-dl .btn{animation:pulse 1.4s steps(2) infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--lime),0 0 52px rgba(198,255,61,.75)}}

/* 4 · GRACIAS */
.s-thx{text-align:center;align-items:stretch}
.s-thx .tag{justify-content:center}
.s-thx .st-title{font-size:64px;font-size:min(19cqw,11cqh)}
.s3-sprite{width:126px;width:min(34cqw,17cqh);height:auto;margin:0 auto;animation:bob 1.6s steps(2) infinite}
.next{text-align:left;padding:12px 14px}
.next-t{font:700 11px/1 var(--tag);color:var(--lime);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px}

/* Alturas cortas (p. ej. 360×640 con barras del navegador) */
@container (max-height:520px){
  .levels-line{display:none}
  .stats-t{display:none}
  .s-tg .txt.dim{display:none}
}
@container (max-height:430px){
  .thumb{display:none}
  .s1-sprite,.s3-sprite{display:none}
}
@keyframes bob{50%{transform:translateY(-5px)}}

/* Transición glitch entre etapas */
.stage.g-out{animation:gout .24s steps(4) forwards}
.stage.g-in{animation:gin .34s steps(5)}
@keyframes gout{
  0%{clip-path:inset(0);transform:none;opacity:1}
  25%{clip-path:inset(8% 0 58% 0);transform:translateX(-10px);filter:drop-shadow(4px 0 rgba(255,43,214,.9)) drop-shadow(-4px 0 rgba(0,229,255,.9))}
  50%{clip-path:inset(62% 0 6% 0);transform:translateX(12px)}
  75%{clip-path:inset(30% 0 42% 0);transform:translateX(-5px);opacity:.6}
  100%{clip-path:inset(50% 0 50% 0);opacity:0}}
@keyframes gin{
  0%{clip-path:inset(46% 0 46% 0);transform:translateX(10px);opacity:.4;filter:drop-shadow(-4px 0 rgba(255,43,214,.9)) drop-shadow(4px 0 rgba(0,229,255,.9))}
  40%{clip-path:inset(12% 0 34% 0);transform:translateX(-7px);opacity:1}
  70%{clip-path:inset(0 0 8% 0);transform:translateX(3px)}
  100%{clip-path:inset(0);transform:none;opacity:1;filter:none}}
.stages::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5;
  background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(198,255,61,.22) 22px 25px,transparent 25px 41px,rgba(0,229,255,.18) 41px 43px,transparent 43px 63px,rgba(255,43,214,.18) 63px 65px)}
.app.glitching .stages::after{animation:bars .55s steps(5)}
@keyframes bars{0%{opacity:1;transform:translateY(-30px)}50%{opacity:.8;transform:translateY(20px)}100%{opacity:0;transform:translateY(0)}}
.flash{position:fixed;inset:0;z-index:80;pointer-events:none;background:var(--lime);opacity:0}
.flash.on{animation:flash .45s steps(3)}
@keyframes flash{0%{opacity:.3}50%{opacity:.08}100%{opacity:0}}
.st-title:focus{outline:none}
.nojs{position:fixed;left:0;right:0;bottom:44px;text-align:center;font-size:13px;z-index:95}
.s-thx .push{gap:18px;gap:clamp(14px,2.6cqh,20px)}

/* v3: extra .md para Grok Bot en la pantalla de descarga */
.extra{display:flex;flex-direction:column;gap:6px;gap:clamp(4px,1cqh,8px);margin-top:4px;margin-top:clamp(2px,1cqh,8px)}
.extra .btn.ghost{min-height:44px;min-height:clamp(40px,7cqh,50px);box-shadow:0 0 0 2px var(--lime)}
.extra .btn.ghost:hover{background:rgba(198,255,61,.08)}
.extra[data-done="1"] .btn.ghost{background:rgba(198,255,61,.1)}
.s-dl .note.small{font-size:11.5px;font-size:clamp(10.5px,1.95cqh,12.5px);text-align:center;color:var(--dim)}
.s-dl .ach{padding:8px 12px;padding:clamp(6px,1.2cqh,10px) 12px}
.s-dl .st-title{font-size:44px;font-size:min(13cqw,7.6cqh)}
.txt-sm{font-size:12px;font-size:clamp(11px,2cqh,13px);line-height:1.4;color:#c9c9d3;margin-top:8px}
.txt-sm a{color:var(--lime)}
@container (max-height:520px){ .s-dl .ach-x{display:none} }

/* v4: YouTube en la pantalla de gracias; Telegram pasa a enlace secundario */
.tg-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 12.5px/1.3 var(--body);font-size:clamp(11.5px,2.1cqh,13.5px);color:var(--fg);text-decoration:none;padding:4px 0}
.tg-link svg{color:var(--lime);flex:none}
.tg-link u{color:var(--lime);text-underline-offset:3px}
.tg-link:hover u{text-decoration-thickness:2px}
.btn.ghost.yt{font-size:12.5px;font-size:clamp(11.5px,2.2cqh,14px);min-height:48px;min-height:clamp(42px,7.6cqh,54px);box-shadow:0 0 0 3px var(--lime)}
.btn.ghost.yt:hover{background:rgba(198,255,61,.08)}
.btn.ghost.yt svg:first-child{filter:drop-shadow(0 0 6px rgba(255,0,51,.45))}
.s-thx .push{gap:16px;gap:clamp(10px,2.2cqh,18px)}
.s-thx .next{padding:10px 14px;padding:clamp(8px,1.6cqh,12px) 14px}
.s3-sprite{width:110px;width:min(30cqw,14cqh)}
@container (max-height:520px){ .s3-sprite{display:none} }