/* capitodance v2 · doctrina: el video manda, el titulo llega despues; juguetes tocables; refs gamer
   ADN lockeado: azul PS2 #1010a0 + marron capibara + rojo Jordan; cream chrome; cian solo escena */
@font-face{font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:block;src:url('assets/fonts/PressStart2P-400.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ChakraPetch-400.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ChakraPetch-600.woff2') format('woff2')}
:root{
  --blue:#1010a0; --blue-deep:#0b0b58; --blue-ink:#060630;
  --brown:#c08040; --brown-dark:#704020;
  --red:#d42a2a; --red-dark:#a81f1f; --cyan:#3ee6d8;
  --paper:#e8e4d8;
  --px:"Press Start 2P",monospace; --body:"Chakra Petch",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--blue-ink);color:var(--paper);font-family:var(--body);overflow:hidden}
button{font-family:inherit;cursor:pointer}

/* ---------- HERO: el loop nocturno propio, borde a borde ---------- */
#hero{position:fixed;inset:0;background:var(--blue-ink)}
#hero-video,#hero-intro{filter:saturate(1.28) contrast(1.07) brightness(1.06)} /* presupuesto de luz: el frame 0 tiene que quemar */
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* el horizonte RESPIRA desde el frame 0 (el interior lleva el pulso CSS; el padre, el beat JS) */
#horizon-glow{position:absolute;left:50%;top:41%;width:130vw;height:42vh;transform:translate(-50%,-50%);
  pointer-events:none;z-index:1;opacity:.6}
#horizon-glow i{position:absolute;inset:0;display:block;mix-blend-mode:screen;
  background:radial-gradient(ellipse 55% 46% at 50% 50%, rgba(90,240,230,.62), rgba(60,190,210,.22) 55%, rgba(0,0,0,0) 78%);
  animation:horizonbreathe 2.4s ease-in-out infinite}
@keyframes horizonbreathe{0%,100%{opacity:.38;transform:scaleY(.96)}50%{opacity:1;transform:scaleY(1.22)}}
/* surge de scanline: una banda brillante recorre la pantalla — el mundo nunca descansa */
#crt-surge{position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:linear-gradient(to bottom, transparent 0%, rgba(140,235,255,.06) 46%, rgba(190,245,255,.12) 50%, rgba(140,235,255,.06) 54%, transparent 100%);
  background-size:100% 220vh;background-repeat:no-repeat;
  animation:crtsurge 6.5s linear infinite}
@keyframes crtsurge{from{background-position:0 -220vh}to{background-position:0 120vh}}
/* pulso de beat: el ritmo se SIENTE aun con SOUND: OFF (opacidad la maneja el reloj JS) */
#beat-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  box-shadow:inset 0 0 22vmin rgba(70,230,220,.55), inset 0 0 6vmin rgba(70,230,220,.25)}
/* respiracion cinematografica: solo el loop, y recien tras la entrada (el empalme exige scale 1) */
#hero-video.breathe{animation:herobreathe 9s ease-in-out infinite alternate}
@keyframes herobreathe{from{transform:scale(1)}to{transform:scale(1.05)}}
/* la ENTRADA: se reproduce una vez encima del loop y se aparta */
#hero-intro{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1}
#hero-intro.done{display:none}
.crt{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 2px,transparent 2px 4px),
    radial-gradient(ellipse at center,transparent 58%,rgba(6,6,48,.38) 100%)}

/* reveal: el titulo llega despues del video */
/* marca en frame 0: el wordmark ya esta, fantasma; el reveal lo enciende (la tagline si espera) */
.title-layer{opacity:.3;transform:translateY(10px);transition:opacity .5s steps(5),transform .5s steps(5)}
body.revealed .title-layer{opacity:1;transform:none}
/* tagline: wipe a CONTRASTE PLENO (post-ship del juez: el fade de opacidad la dejaba ilegible ~0.4s).
   espera .5s a que el header llegue a opacidad 1, y recien ahi barre — cada pixel revelado nace al 100% */
.title-layer .tagline{clip-path:inset(-6px 101% -14px -8px);transition:clip-path .4s steps(4) .5s}
body.revealed .title-layer .tagline{clip-path:inset(-6px -3% -14px -8px)}
header.title-layer{position:absolute;z-index:3;top:clamp(16px,4vh,44px);left:clamp(16px,4vw,52px);max-width:min(560px,84vw)}
.wordmark{font-family:var(--px);font-size:64px;color:var(--paper);letter-spacing:.04em;
  text-shadow:4px 4px 0 var(--red),8px 8px 0 rgba(6,6,48,.85);line-height:1.05;cursor:pointer;user-select:none}
.tagline{margin-top:16px;font-size:17px;font-weight:600;color:var(--paper);
  background:var(--blue);border:2px solid var(--paper);border-left:6px solid var(--red);
  padding:10px 14px;width:fit-content;box-shadow:6px 6px 0 rgba(6,6,48,.85)}
.tagline-2{color:var(--paper);opacity:.75}

.hud-dock{position:absolute;z-index:3;left:clamp(16px,4vw,52px);bottom:calc(clamp(56px,10vh,96px) + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:12px}
.chip{font-family:var(--px);font-size:8px;color:var(--paper);background:var(--blue);
  border:2px solid var(--paper);padding:12px 16px;box-shadow:4px 4px 0 rgba(6,6,48,.9);transition:transform .08s,background .15s}
.chip:hover{background:var(--blue-deep);transform:translate(-2px,-2px)}
.chip:active{transform:translate(2px,2px);box-shadow:none}
.chip.is-open{border-color:var(--red)}
.chip-cta{background:var(--red);border-color:var(--paper);font-size:16px;padding:14px 20px}
.chip-cta:hover{background:var(--red-dark)}

.hud-foot{position:absolute;z-index:3;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:clamp(16px,4vw,52px);right:16px;
  font-family:var(--px);font-size:8px;color:var(--paper);opacity:.8;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.hud-foot span{background:rgba(6,6,48,.72);padding:3px 6px}
.sep{color:var(--red)}
.secrets-chip{color:var(--cyan);font:inherit;background:rgba(6,6,48,.78);border:0;padding:6px 8px;cursor:pointer;touch-action:manipulation}
.foot-link{font-family:var(--px);font-size:8px;line-height:1.8;color:var(--paper);background:rgba(6,6,48,.72);border:0;padding:3px 6px;text-decoration:underline}
.foot-link:hover{color:var(--cyan)}
.secrets-chip b{font-family:inherit}

/* ---------- VENTANAS ---------- */
.win{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(6,6,48,.68)}
.win[hidden]{display:none}
.win-frame{width:min(900px,94vw);max-height:90vh;display:flex;flex-direction:column;background:var(--blue);
  border:2px solid var(--paper);box-shadow:10px 10px 0 rgba(0,0,0,.5)}
.win-frame-sm{width:min(440px,94vw)}
.win-frame-md{width:min(640px,94vw)}
.win-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
  background:var(--blue-deep);border-bottom:2px solid var(--paper)}
.win-title{font-family:var(--px);font-size:8px;color:var(--paper);line-height:1.8}
.win-x{font-family:var(--px);font-size:8px;color:var(--paper);background:var(--red);border:2px solid var(--paper);padding:6px 9px}
.win-x:hover{background:var(--paper);color:var(--red)}
.win-body{padding:16px;overflow:auto}
.win-body::-webkit-scrollbar{width:14px}
.win-body::-webkit-scrollbar-track{background:var(--blue-deep)}
.win-body::-webkit-scrollbar-thumb{background:var(--paper);border:3px solid var(--blue-deep)}
.win-hint{font-family:var(--px);font-size:8px;color:var(--paper);opacity:.7;margin-bottom:14px;line-height:1.9}
.win-foot{border-top:2px solid var(--paper);padding:12px 16px}
.win-foot a{display:block;text-align:center;font-family:var(--px);font-size:8px;color:var(--paper);
  background:var(--red);border:2px solid var(--paper);padding:12px;text-decoration:none}
.win-foot a:hover{background:var(--red-dark)}
body.win-open .title-layer{opacity:.18;pointer-events:none}

/* ---------- VIDA DE VENTANA: encendido CRT + beat compartido (nivel hero 9.1) ---------- */
/* cada apertura ES prender una pantalla: colapso vertical + flash, en steps */
.win:not([hidden]) .win-frame{animation:crt-on .3s steps(5)}
@keyframes crt-on{
  0%{transform:scale(1.06,.04);filter:brightness(2.4)}
  55%{transform:scale(.99,1.05);filter:brightness(1.45)}
  100%{transform:scale(1);filter:none}}
/* apagado CRT al cerrar: la metafora completa (encender Y apagar la pantalla) */
.win.closing .win-frame{animation:crt-off .22s steps(4) forwards}
@keyframes crt-off{
  0%{transform:scale(1)}
  60%{transform:scale(1.04,.06);filter:brightness(2.2)}
  100%{transform:scale(.5,.008);filter:brightness(3);opacity:0}}
/* la ventana respira el mismo beat de 120bpm del hero (JS publica --beat en :root) */
.win-frame{position:relative;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.055) 0 2px,transparent 2px 4px)}
.win-frame::after{content:"";position:absolute;inset:-3px;pointer-events:none;mix-blend-mode:screen;
  box-shadow:0 0 26px rgba(70,230,220,.6),inset 0 0 12px rgba(70,230,220,.22);
  opacity:calc(var(--beat,0)*.75)}
/* cursor de terminal parpadeando en la title bar */
.win-title::after{content:"_";margin-left:6px;color:var(--cyan);animation:cursorblink 1s steps(2) infinite}
@keyframes cursorblink{50%{opacity:0}}

/* ---------- PFP MAKER: el juguete esta VIVO ---------- */
.pfp-stage{position:relative}
#pfp-canvas.equip{animation:equip-pop .3s steps(4)}
@keyframes equip-pop{0%{filter:brightness(2.1) saturate(1.3)}45%{filter:brightness(1.35)}100%{filter:none}}
.pfp-status{font-family:var(--px);font-size:8px;color:var(--cyan);background:rgba(6,6,48,.6);
  padding:6px 8px;margin-top:10px;line-height:1.8;letter-spacing:.02em}
.pfp-status.blip{animation:statusblip .25s steps(2)}
@keyframes statusblip{0%{background:var(--red);color:var(--paper)}}
/* celebracion de descarga: ritual SAVING del canal */
.pfp-saving{position:absolute;inset:auto 0 0 0;display:grid;gap:8px;justify-items:center;padding:14px;
  background:rgba(6,6,48,.92);border-top:2px solid var(--paper);z-index:2}
.pfp-saving[hidden]{display:none}
.pfp-saving b{font-family:var(--px);font-size:10px;color:var(--paper);line-height:1.6}
.pfp-saving.saved b{color:#f5d36b}
.sbar{width:70%;height:14px;border:2px solid var(--paper);background:var(--blue-ink);overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:var(--cyan);animation:sfill .72s steps(4) forwards}
@keyframes sfill{from{width:0}to{width:100%}}
/* seleccion con pulso al beat + hover con pop */
.pfp-item,.pfp-bg-sw{transition:transform .08s,border-color .15s}
.pfp-item:hover,.pfp-bg-sw:hover{transform:translate(-2px,-2px);border-color:var(--paper)}
.pfp-item.sel,.pfp-bg-sw.sel{box-shadow:0 0 calc(4px + var(--beat,0)*12px) rgba(212,42,42,.85)}

/* ---------- MEMORY CARD: browser PS2 vivo ---------- */
/* los saves entran en cascada, como el browser leyendo la tarjeta */
.win:not([hidden]) .saves li{animation:save-in .24s steps(3) backwards}
/* mismos prefijos que el shorthand: si no, el animation-delay implicito (0) los pisa */
.win:not([hidden]) .saves li:nth-child(1){animation-delay:.10s}
.win:not([hidden]) .saves li:nth-child(2){animation-delay:.17s}
.win:not([hidden]) .saves li:nth-child(3){animation-delay:.24s}
.win:not([hidden]) .saves li:nth-child(4){animation-delay:.31s}
.win:not([hidden]) .saves li:nth-child(5){animation-delay:.38s}
.win:not([hidden]) .saves li:nth-child(6){animation-delay:.45s}
.win:not([hidden]) .saves li:nth-child(7),
.win:not([hidden]) .saves li:nth-child(8){animation-delay:.52s}
.win:not([hidden]) .saves li:nth-child(9){animation-delay:.59s}
@keyframes save-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* hover: el save se ladea (el cubo del browser PS2) + barrido de brillo */
.save{overflow:hidden}
.save::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 42%,rgba(232,228,216,.20) 50%,transparent 58%)}
.save:hover::after{animation:shine .5s steps(6) forwards}
@keyframes shine{to{transform:translateX(130%)}}
.save:hover .save-icon{animation:cube-wob .72s steps(4) infinite}
@keyframes cube-wob{25%{transform:rotate(-2.2deg) scale(1.02)}75%{transform:rotate(2.2deg) scale(1.02)}}
/* PLAY parpadea como PRESS START, al tempo */
.play-badge{animation:pressstart 1s steps(2) infinite}
@keyframes pressstart{50%{opacity:.5}}
/* SAVE 007 bloqueado: tease dorado que respira + deny con juice al clickear */
#save007-locked .save-empty{opacity:.8}
#save007-locked .save-icon{color:#f5d36b;border-color:rgba(245,211,107,.5);
  animation:goldtease 2s steps(4) infinite}
@keyframes goldtease{50%{text-shadow:0 0 14px rgba(245,211,107,.9);border-color:#f5d36b}}
.save.deny{animation:deny-shake .3s steps(4)}
@keyframes deny-shake{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.save-meta u.blip{animation:statusblip .45s steps(2)}
/* lectura idle: el browser sigue leyendo la tarjeta — un barrido recorre un slot cada ~4 beats */
.save.sweep::after{animation:shine .6s steps(6) forwards}
/* fuente body a proposito: el "8" de la pixel font se lee "&" (gotcha conocido del toast) */
.card-meta{margin-top:14px;font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.08em;
  color:var(--paper);opacity:.7;line-height:1.9;text-transform:uppercase}
.card-meta b{color:var(--cyan)}
.card-cursor{color:var(--cyan);animation:cursorblink 1s steps(2) infinite}

/* ---------- PFP MAKER ---------- */
.pfp-body{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:18px}
#pfp-canvas{width:100%;height:auto;border:2px solid var(--paper);background:var(--blue-deep);image-rendering:auto}
.pfp-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pfp-group{margin-bottom:14px}
.pfp-group>b{font-family:var(--px);font-size:8px;color:var(--paper);opacity:.65;display:block;margin-bottom:8px}
.pfp-items{display:flex;flex-wrap:wrap;gap:8px}
.pfp-item{width:52px;height:52px;background:var(--blue-deep);border:2px solid rgba(232,228,216,.35);
  display:grid;place-items:center;padding:4px}
.pfp-item img{max-width:100%;max-height:100%}
.pfp-item.sel{border-color:var(--red);background:rgba(212,42,42,.16)}
.pfp-item-none{font-family:var(--px);font-size:8px;color:var(--paper);opacity:.6}
.pfp-bg-sw{width:52px;height:52px;border:2px solid rgba(232,228,216,.35);background-size:cover;background-position:center}
.pfp-bg-sw.sel{border-color:var(--red)}

/* ---------- SAVES ---------- */
.saves{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.save{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;text-decoration:none;
  background:var(--blue-deep);border:2px solid rgba(232,228,216,.35);padding:10px;color:var(--paper);transition:border-color .15s,background .15s}
.save:hover{border-color:var(--red);background:rgba(212,42,42,.16)}
.save-icon{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 24%;border:2px solid var(--brown);
  display:grid;place-items:center;font-size:26px;color:var(--red);background:var(--blue-ink)}
.save-icon-clip{border-color:var(--red)}
.play-badge{position:absolute;top:16px;left:16px;font-family:var(--px);font-size:8px;color:var(--paper);
  background:var(--red);border:2px solid var(--paper);padding:4px 6px}
.save-meta{display:grid;gap:3px;min-width:0}
.save-meta b{font-family:var(--px);font-size:8px;color:var(--paper);opacity:.65}
.save-meta i{font-style:normal;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.save-meta u{text-decoration:none;font-size:11px;color:var(--brown)}
.save-empty{opacity:.4}
.save-empty .save-icon{border-style:dashed;border-color:rgba(232,228,216,.35);color:rgba(232,228,216,.4)}

.links{list-style:none;display:grid;gap:10px}
.link{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-decoration:none;color:var(--paper);
  background:var(--blue-deep);border:2px solid rgba(232,228,216,.35);padding:14px;transition:border-color .15s,background .15s}
a.link:hover{border-color:var(--paper);background:var(--red)}
.link b{font-family:var(--px);font-size:8px}
.link span{font-size:13px;color:rgba(232,228,216,.75)}
.slots-soon{margin-top:12px;font-family:var(--px);font-size:8px;color:var(--paper);opacity:.62;line-height:1.9}

/* ---------- THE CUYS (asoman por los bordes; todos chillan) ---------- */
.cuy{position:fixed;z-index:10;border:0;padding:0;background:transparent;cursor:pointer;opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
.cuy img{display:block;width:88px;transform:rotate(var(--rot,0deg));filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
body.revealed .cuy{opacity:1}
.cuy-1{left:-2px;top:34vh;transform:translateX(-110%)}
.cuy-2{right:-2px;top:24vh;transform:translateX(110%)}
.cuy-3{right:-2px;top:60vh;transform:translateX(110%)}
.cuy-4{left:-2px;top:66vh;transform:translateX(-110%)}
.cuy-1 img,.cuy-4 img{--rot:90deg}
.cuy-2 img,.cuy-3 img{--rot:-90deg}
.cuy-2 img{width:70px}
.cuy-3 img{width:82px}
.cuy-4 img{width:62px}
body.revealed .cuy-1{transform:translateX(-44%);transition-delay:1.7s}
body.revealed .cuy-2{transform:translateX(40%);transition-delay:2.2s}
body.revealed .cuy-3{transform:translateX(46%);transition-delay:2.7s}
body.revealed .cuy-4{transform:translateX(-42%);transition-delay:3.4s}
body.revealed .cuy-1.away,body.revealed .cuy-4.away,
body.revealed .cuy-1.resting,body.revealed .cuy-4.resting{transform:translateX(-115%);transition-delay:0s}
body.revealed .cuy-2.away,body.revealed .cuy-3.away,
body.revealed .cuy-2.resting,body.revealed .cuy-3.resting{transform:translateX(115%);transition-delay:0s}
.cuy img.squeaking{animation:squish .28s steps(4)}
@keyframes squish{30%{transform:rotate(var(--rot,0deg)) scale(1.12,0.86)}70%{transform:rotate(var(--rot,0deg)) scale(0.92,1.1)}}

/* ---------- CH·01 ---------- */
.channel{position:fixed;inset:0;z-index:25;background:#000;display:grid;place-items:center}
.channel[hidden]{display:none}
.channel video{height:100%;max-height:100vh;max-width:100vw;object-fit:contain}
.ch-osd{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:18px;font-family:var(--px);font-size:8px;line-height:1.8;
  color:var(--paper);background:rgba(6,6,48,.75);border:2px solid var(--paper);padding:8px 10px;z-index:3}
.ch-controls{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:3;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:0 12px}
.lb-btn{font-family:var(--px);font-size:8px;line-height:1.8;color:var(--paper);background:var(--blue);border:2px solid var(--paper);padding:8px 12px}
.lb-btn:hover{background:var(--red)}
.lb-btn-red{background:var(--red);text-decoration:none;display:inline-block}
.lb-btn-red:hover{background:var(--red-dark)}
.osd-chip{font-family:var(--px);font-size:8px;line-height:1.8;color:var(--cyan);background:rgba(6,6,48,.75);padding:10px 12px}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed;inset:0;z-index:30;background:rgba(6,6,48,.82);display:grid;place-items:center}
.lightbox[hidden]{display:none}
/* el lightbox tambien es una pantalla: enciende, y el swap PREV/NEXT es un wipe */
.lightbox:not([hidden]) figure{animation:crt-on .26s steps(4)}
#lb-img.swap{animation:lb-swap .28s steps(4)}
@keyframes lb-swap{0%{clip-path:inset(0 100% 0 0);filter:brightness(1.7)}100%{clip-path:inset(0 0 0 0)}}
.lightbox figcaption.blip{animation:statusblip .3s steps(2)}
.lightbox figure{position:relative;display:grid;gap:12px;justify-items:center;max-width:94vw;max-height:88vh}
.lightbox img{max-width:min(560px,92vw);max-height:70vh;border:2px solid var(--paper);box-shadow:12px 12px 0 rgba(0,0,0,.5)}
.lightbox figcaption{font-family:var(--px);font-size:8px;color:var(--paper)}
.lb-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}

/* ---------- PREMIO 8/8 ---------- */
.reward-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:45;cursor:pointer;
  display:grid;gap:10px;justify-items:center;text-align:center;padding:26px 30px;
  background:rgba(6,6,48,.94);border:3px solid #f5d36b;box-shadow:0 0 0 3px rgba(6,6,48,.94),0 0 40px rgba(245,211,107,.45);
  font-family:var(--px);color:var(--paper)}
.reward-toast[hidden]{display:none}
.reward-toast b{font-size:12px;color:#f5d36b;line-height:1.8}
.reward-toast span{font-size:8px;line-height:1.8}
.reward-toast i{font-size:8px;opacity:.55;font-style:normal;margin-top:4px}
.chip.blink{animation:chipblink 1s steps(2) infinite;border-color:#f5d36b}
@keyframes chipblink{50%{background:#b8860b;color:#060630}}
.pfp-item-gold{border-color:#f5d36b;position:relative}
.pfp-item-gold.locked img{filter:brightness(0) opacity(.55)}
.pfp-item-gold .gold-lock{display:none}
.pfp-item-gold.locked .gold-lock{display:block;position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--px);font-size:14px;color:#f5d36b}
.pfp-item-gold.sel{background:rgba(245,211,107,.18)}

/* ---------- STAGE SELECT: el mundo donde baila ---------- */
.stages{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stage{position:relative;display:block;width:100%;padding:0;border:2px solid rgba(232,228,216,.35);
  background:var(--blue-deep);color:var(--paper);cursor:pointer;overflow:hidden;text-align:left}
.stage img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.stage b{display:block;font-family:var(--px);font-size:8px;line-height:1.8;padding:9px 10px;
  border-top:2px solid rgba(232,228,216,.2)}
.stage:hover{border-color:var(--paper);transform:translate(-2px,-2px)}
.stage.on{border-color:var(--red)}
.stage.on b{background:var(--red)}
.stage.on::after{content:"NOW PLAYING";position:absolute;top:8px;left:8px;font-family:var(--px);font-size:8px;
  color:var(--paper);background:var(--red);border:2px solid var(--paper);padding:4px 6px}
/* el cambio de mundo: la consola cambia de disco (flash + estatica breve) */
#hero.swapping #hero-video{animation:disc-swap .42s steps(5)}
@keyframes disc-swap{0%{filter:brightness(2.6) saturate(0)}30%{filter:brightness(.2) contrast(3)}
  60%{filter:brightness(1.8) saturate(1.4)}100%{filter:none}}
#stage-static{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen}
#hero.swapping #stage-static{opacity:.55;animation:stat-flick .42s steps(6)}
@keyframes stat-flick{0%{opacity:.85}100%{opacity:0}}

/* ---------- SECRET FILES: pistas sin spoiler total ---------- */
.sfiles{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sfile{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:2px dashed rgba(232,228,216,.3);background:rgba(6,6,48,.35);min-height:58px}
.sfile-ico{font-family:var(--px);font-size:14px;color:rgba(232,228,216,.45);width:22px;text-align:center;flex:none}
.sfile-txt{font-size:13px;line-height:1.45;color:rgba(232,228,216,.8);font-style:italic}
.sfile.found{border:2px solid var(--cyan);background:rgba(62,230,216,.08)}
.sfile.found .sfile-ico{color:var(--cyan)}
.sfile.found .sfile-txt{font-style:normal;font-family:var(--px);font-size:8px;line-height:1.8;color:var(--cyan)}
.sfile-konami{cursor:pointer}
.sfile.just-found{animation:sfound .5s steps(4)}
@keyframes sfound{0%{background:rgba(62,230,216,.5);transform:scale(1.04)}}
.sf-reward{margin-top:14px;font-family:var(--px);font-size:8px;line-height:1.9;color:var(--paper);opacity:.7}
.sf-reward b{color:#f5d36b}
/* nudge one-time: el contador guiña para que lo descubran (estatico si reduced-motion) */
.secrets-chip.nudge{animation:chipnudge .9s steps(2) 4}
@keyframes chipnudge{50%{background:var(--cyan);color:#060630}}
.secrets-chip.nudge-static{background:var(--cyan);color:#060630}
/* countdown del konami: el "?" cuenta 4·3·2·1 */
.sfile-ico.tick{color:var(--cyan);animation:statusblip .2s steps(2)}
/* cascada SOLO al abrir la ventana (clase efimera desde JS, no selector permanente) */
#win-secrets.cascade .sfile{animation:save-in .2s steps(3) backwards}
#win-secrets.cascade .sfile:nth-child(1){animation-delay:.08s}
#win-secrets.cascade .sfile:nth-child(2){animation-delay:.14s}
#win-secrets.cascade .sfile:nth-child(3){animation-delay:.20s}
#win-secrets.cascade .sfile:nth-child(4){animation-delay:.26s}
#win-secrets.cascade .sfile:nth-child(5){animation-delay:.32s}
#win-secrets.cascade .sfile:nth-child(6){animation-delay:.38s}
#win-secrets.cascade .sfile:nth-child(7){animation-delay:.44s}
#win-secrets.cascade .sfile:nth-child(8){animation-delay:.50s}

/* ---------- LLUVIA DE CUYS ---------- */
.cuyrain{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.cuyrain img{position:absolute;top:-120px;width:64px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(360deg)}}

/* ---------- NOSCRIPT ---------- */
.noscript{position:fixed;inset:0;z-index:60;background:var(--blue-ink);display:grid;place-items:center;text-align:center;padding:24px}
.noscript a{color:var(--cyan)}

:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ---------- BREAKPOINTS (pixel font en multiplos de 8) ---------- */
@media (max-width:1100px){
  .wordmark{font-size:48px}
  .pfp-body{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wordmark{font-size:32px;background:rgba(6,6,48,.55);padding:6px 10px;width:fit-content}
  .tagline{font-size:14px}
  .cuy img{width:56px}
  .cuy-2 img{width:46px}
  .cuy-3 img{width:52px}
  .cuy-4 img{width:42px}
  /* despegados de la banda 55-70vh donde el crop del video pone a los cuys 3D */
  .cuy-3{top:42vh}
  .cuy-4{top:50vh}
  header.title-layer{left:16px;right:16px}
  .hud-dock{left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));
    display:grid;grid-template-columns:1fr 1fr}
  .chip-cta{grid-column:1/-1}
  .saves{grid-template-columns:1fr 1fr}
  .sfiles{grid-template-columns:1fr}
  /* la puerta de los secretos necesita tap-area real en mobile (≥40px) */
  .secrets-chip{padding:14px 10px}
  .save-meta i{font-size:12px}
  .hud-foot{gap:4px 8px}
  .sep{display:none}
}
@media (max-height:520px){
  /* landscape movil: lejos del dock (abajo-izquierda) y mas chicos */
  .cuy img{width:44px}
  .cuy-2 img{width:38px}
  .cuy-3 img{width:42px}
  .cuy-4 img{width:36px}
  .cuy-1{top:30vh}
  .cuy-4{top:48vh}
}
@media (prefers-reduced-motion:reduce){
  .cuy{transition:opacity .4s ease}
  .cuy img.squeaking{animation:none}
  .title-layer{transition:none}
  .title-layer .tagline{transition:none}
  #hero-video{animation:none}
  #horizon-glow i,#crt-surge{animation:none}
  #beat-vignette{display:none}
  .win:not([hidden]) .win-frame,.win:not([hidden]) .saves li,.win.closing .win-frame{animation:none}
  .save:hover .save-icon,.save:hover::after,.play-badge,#save007-locked .save-icon{animation:none}
  .win-frame::after{display:none}
  #pfp-canvas.equip,.pfp-status.blip,.win-title::after,.card-cursor{animation:none}
  .save.deny,.save.sweep::after,.save-meta u.blip{animation:none}
  .lightbox:not([hidden]) figure,#lb-img.swap,.lightbox figcaption.blip{animation:none}
  .secrets-chip.nudge,.sfile.just-found,#win-secrets.cascade .sfile,.sfile-ico.tick{animation:none}
}