/* ============================================================
   CAMINO AL ESTRELLATO — movimiento y efectos ("jugo")
   El aspecto y el layout están en game.css; aquí solo animaciones,
   partículas, banners y las tarjetas que rellena juice.js.
   ============================================================ */
:root{--px-ink:#111018;--px-pop:cubic-bezier(.3,1.6,.5,1);--px-out:cubic-bezier(.2,.8,.2,1)}

@keyframes px-bob{50%{translate:0 -3px}}
@keyframes px-blink{50%{opacity:.25}}
@keyframes px-pulse{50%{transform:scale(1.35);opacity:.7}}
@keyframes px-deal{from{opacity:0;transform:translateY(20px) rotate(-1deg)}}
@keyframes px-pop{from{opacity:0;transform:scale(.88) translateY(8px)}}
@keyframes px-num{0%{transform:scale(1.35)}100%{transform:none}}
@keyframes px-sh{0%,100%{transform:none}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.px-shake{animation:px-sh .42s steps(2) 1}

/* ambiente */
.px-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.px-bg::before,.px-bg::after{content:"";position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(70px);opacity:.26;animation:px-aur 22s ease-in-out infinite alternate}
.px-bg::before{left:-15vmax;top:-15vmax;background:radial-gradient(circle,#48e0cf,transparent 65%)}
.px-bg::after{right:-18vmax;bottom:-18vmax;background:radial-gradient(circle,#ff4fbd,transparent 65%);animation-delay:-9s}
@keyframes px-aur{to{transform:translate(12vmax,8vmax) scale(1.2)}}
.px-bg i{position:absolute;opacity:0;font:400 clamp(16px,2.4vw,28px) 'VT323',monospace;text-shadow:2px 2px 0 rgba(17,16,24,.25);animation:px-fs 15s linear infinite}
@keyframes px-fs{0%{opacity:0;transform:translateY(40px) rotate(0)}15%,75%{opacity:.35}100%{opacity:0;transform:translateY(-140px) rotate(220deg)}}

/* botón físico */
.btn:active:not(:disabled),.answer:active:not(:disabled),.tab:active,.cat-card:active,.seq-btn:active:not(:disabled){transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--shade)!important}
.cat-card{transform-style:preserve-3d;will-change:transform}
.cat-card:hover .cat-emoji,.cat-card.selected .cat-emoji{animation:px-bob .7s steps(2) infinite}

/* entradas de escena */
.prompt,.outcome{animation:px-deal .45s var(--px-out) backwards}
.prompt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%) 100% 0/250% 100% no-repeat;animation:px-sh2 1.1s .35s var(--px-out) 1 both}
@keyframes px-sh2{0%{background-position:100% 0;opacity:0}15%,80%{opacity:1}100%{background-position:0 0;opacity:0}}
.answers .answer{animation:px-pop .38s var(--px-pop) backwards}
.answers .answer:nth-child(2){animation-delay:.07s}.answers .answer:nth-child(3){animation-delay:.14s}.answers .answer:nth-child(4){animation-delay:.21s}
.answers .answer:nth-child(5){animation-delay:.28s}.answers .answer:nth-child(6){animation-delay:.35s}
.delta{animation:px-pop .4s var(--px-pop) backwards}
.delta:nth-child(1){animation-delay:.2s}.delta:nth-child(2){animation-delay:.29s}.delta:nth-child(3){animation-delay:.38s}
.delta:nth-child(4){animation-delay:.47s}.delta:nth-child(5){animation-delay:.56s}.delta:nth-child(n+6){animation-delay:.65s}
.big,.summary-box,.item,.ach-item{animation:px-pop .45s var(--px-pop) backwards}
.big:nth-child(2),.summary-box:nth-child(2){animation-delay:.08s}.summary-box:nth-child(3){animation-delay:.16s}
.summary-box:nth-child(4){animation-delay:.24s}.summary-box:nth-child(5){animation-delay:.32s}.summary-box:nth-child(6){animation-delay:.4s}

/* HUD vivo */
.fill,.loyalty-fill{transition:width .8s var(--px-out)}
.px-up,.px-down{display:inline-block;animation:px-num .7s var(--px-pop)}
.px-up{color:#55e0bd!important}.px-down{color:#ff6f9f!important}
.px-float{position:fixed;z-index:9999;pointer-events:none;font:400 28px 'VT323',monospace;text-shadow:2px 2px 0 var(--px-ink);animation:px-fl 1.2s var(--px-out) forwards}
.px-float.up{color:#55e0bd}.px-float.down{color:#ff6f9f}
@keyframes px-fl{from{transform:translate(-50%,0)}to{transform:translate(-50%,-52px);opacity:0}}

/* menú: título con glitch ocasional y tarjeta de nivel */
.title{animation:px-glitch 8s steps(1) infinite}
@keyframes px-glitch{0%,91%,100%{filter:none}92%{filter:drop-shadow(-4px 0 #ff4fbd) drop-shadow(4px 0 #48e0cf)}94%{filter:drop-shadow(4px 0 #ff4fbd) drop-shadow(-4px 0 #48e0cf)}96%{filter:none}}
.daily{display:flex;flex-direction:column;gap:12px;padding:16px 20px;box-shadow:var(--hard-sm)}
.daily .lvl{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.daily .lvl b{font:400 26px/1 'VT323',monospace;letter-spacing:.04em;color:var(--head)}
.daily .lvl small{font-size:12px;color:var(--muted)}
.xp{flex:1;min-width:120px;height:14px;overflow:hidden;border:3px solid var(--edge);border-radius:999px;background:var(--panel2)}
.xp i{display:block;height:100%;border-radius:999px;animation:px-xpg 1.1s var(--px-out) backwards;background:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px),linear-gradient(90deg,#48e0cf,#ff4fbd)}
@keyframes px-xpg{from{width:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span,.badge{display:inline-flex;align-items:center;min-width:0;max-width:100%;min-height:26px;height:auto;padding:4px 12px;border:2px solid var(--px-ink);border-radius:999px;background:var(--panel2);color:var(--text);font-size:12px;font-weight:600;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.chips span:nth-child(1){background:#ffd2b8;color:var(--px-ink)}.chips span:nth-child(2){background:#ffe066;color:var(--px-ink)}.chips span:nth-child(3){background:#c9b7ff;color:var(--px-ink)}
.goal{padding:8px 14px;border:2px dashed var(--edge);border-radius:12px;font-size:12.5px;line-height:1.4}
.goal.ok{border-style:solid;border-color:var(--success);color:var(--success)}

/* final: nota estampada */
.grade-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:16px 20px;box-shadow:var(--hard-sm)}
.grade{padding:8px 22px 2px;border:4px solid var(--px-ink);background:#fff;color:var(--px-ink);box-shadow:5px 5px 0 var(--px-ink);font:400 clamp(60px,12vh,100px)/.8 'VT323',monospace;transform:rotate(-6deg);animation:px-stamp .7s var(--px-pop) .5s backwards}
.grade.gS{background:#ffd36b}.grade.gA{background:#48e0cf}.grade.gB{background:#c9b7ff}.grade.gC{background:#38a9ff}.grade.gD{background:#ff6f9f}
@keyframes px-stamp{0%{transform:scale(3.2) rotate(-14deg);opacity:0}100%{transform:scale(1) rotate(-6deg)}}
.awards{display:flex;flex:1 1 150px;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;max-width:100%}
.awards>b{width:100%;font:400 clamp(28px,5vh,38px)/1 'VT323',monospace;color:var(--head)}
.badge{background:#ffd36b;color:var(--px-ink);animation:px-pop .4s var(--px-pop) 1s backwards}
.ped.own span{display:inline-block;animation:px-bob 1.2s steps(2) infinite}

/* banners, toasts, partículas, cortinas */
.px-banner{position:fixed;left:0;right:0;top:32%;z-index:9998;pointer-events:none;display:grid;justify-items:center;gap:2px;padding:16px 10px;text-align:center;color:#fff;border-block:4px solid var(--px-ink);box-shadow:0 8px 0 rgba(17,16,24,.35);animation:px-ban 2.1s var(--px-out) both;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px),#24236b}
.px-banner b{font:400 clamp(32px,8vw,72px)/.9 'VT323',monospace;text-shadow:3px 3px 0 #ff4fbd}
.px-banner small{font:22px 'VT323',monospace;color:#48e0cf}
.px-banner.bad{background:repeating-linear-gradient(135deg,rgba(0,0,0,.12) 0 14px,transparent 14px 28px),#7a1238}
.px-banner.bad b{text-shadow:3px 3px 0 var(--px-ink)}.px-banner.bad small{color:#ffd36b}
@keyframes px-ban{0%{transform:translateX(-110%) skewX(-14deg)}15%{transform:none}85%{transform:none;opacity:1}100%{transform:translateX(110%) skewX(14deg);opacity:0}}
.px-p,.px-conf{position:fixed;top:0;z-index:9999;pointer-events:none}
.px-p{image-rendering:pixelated}
.px-toast{animation:px-toast 2.6s var(--px-out) both}
.px-toast.gold{border-color:var(--px-ink);background:#ffd36b;color:var(--px-ink);box-shadow:4px 4px 0 var(--px-ink)}
@keyframes px-toast{0%{transform:translate(-50%,-70px)}10%,88%{transform:translate(-50%,0)}100%{transform:translate(-50%,-70px)}}
.px-mute{position:fixed;right:12px;bottom:12px;z-index:9990;width:40px;height:40px;min-height:0;padding:0;font-size:16px;border-radius:50%;box-shadow:2px 2px 0 var(--shade);opacity:.9}
.px-wipe{position:fixed;inset:0;z-index:9997;pointer-events:none;display:flex}
.px-wipe i{flex:1;transform:translateY(-101%);animation:px-wp .8s var(--px-out) both}
@keyframes px-wp{0%{transform:translateY(-101%)}40%,55%{transform:none}100%{transform:translateY(101%)}}

/* minijuegos */
.mem-card,.mg-cell,.goal-cell,.seq-btn{transition:transform .12s,background .15s}
.mem-card:hover,.mg-cell:hover,.goal-cell:hover{transform:translateY(-3px)}
.mem-card.px-flip{animation:px-flip .32s var(--px-out)}
@keyframes px-flip{from{transform:rotateY(90deg) scale(.9)}}
.mg-cell.px-pop,.seq-btn.revealed{animation:px-pop .3s var(--px-pop)}
.seq-btn.wrong{animation:px-sh .4s steps(2)}
.goal-cell.hit{animation:px-hit .6s var(--px-pop);background:#55e0bd}
.goal-cell.save{animation:px-sh .4s steps(2);background:#ff6f9f}
@keyframes px-hit{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(8deg)}100%{transform:none}}
.react-zone{animation:px-zone .9s steps(2) infinite}
@keyframes px-zone{50%{background:rgba(52,211,153,.8)}}
.react-marker{box-shadow:0 0 0 2px var(--px-ink),0 0 14px #ff4fbd}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.px-bg{display:none}}

@media(max-width:759px){
  .px-bg i{display:none}
  .title{animation:none}
  .grade-wrap{padding:14px;gap:16px}.awards>b{font-size:30px}
}