/* =====================================================================
   PICA JUMP · Tutorial de la primera partida
   ===================================================================== */
.tu-overlay {
    --tu-u: clamp(0.7px, min(100vw / 390, 100dvh / 660), 2.4px);
    position: fixed; inset: 0; z-index: 2500;
    display: flex; align-items: center; justify-content: center;
    padding: max(env(safe-area-inset-top), 16px) 16px max(env(safe-area-inset-bottom), 16px);
    box-sizing: border-box;
    background: radial-gradient(ellipse at 50% 40%, rgba(40, 12, 4, .82), rgba(10, 3, 1, .94));
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .25s ease;
    font-family: 'Montserrat', system-ui, sans-serif;
}
.tu-overlay.tu-in { opacity: 1; }

.tu-card {
    width: min(calc(320 * var(--tu-u)), 100%); max-height: 100%; overflow: hidden auto;
    box-sizing: border-box; background: #fffaf5; text-align: center;
    border-radius: calc(26 * var(--tu-u));
    box-shadow: 0 0 calc(60 * var(--tu-u)) rgba(255, 110, 20, .45), 0 calc(24 * var(--tu-u)) calc(50 * var(--tu-u)) rgba(0, 0, 0, .55);
}
.tu-in .tu-card { animation: tu-entra .5s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes tu-entra { from { transform: translateY(40px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.tu-card.tu-cambia .tu-cuerpo { animation: tu-texto .28s ease both; }
@keyframes tu-texto { from { opacity: 0; transform: translateY(calc(8 * var(--tu-u))); } to { opacity: 1; transform: none; } }

/* ---------- Escena animada ---------- */
.tu-demo {
    position: relative; overflow: hidden; height: calc(170 * var(--tu-u));
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 90% at 50% 100%, #7a2410, #240804 72%);
}
.tu-pista {
    position: absolute; left: calc(18 * var(--tu-u)); right: calc(18 * var(--tu-u)); bottom: calc(24 * var(--tu-u));
    height: calc(10 * var(--tu-u)); border-radius: 99px; background: rgba(255, 255, 255, .15);
}
.tu-mov {
    position: absolute; left: 50%; bottom: calc(29 * var(--tu-u)); width: 0; height: 0;
    animation: tu-vaiven 3.2s ease-in-out infinite;
}
@keyframes tu-vaiven {
    0%, 100% { transform: translateX(calc(-96 * var(--tu-u))); }
    50%      { transform: translateX(calc(96 * var(--tu-u))); }
}
.tu-salto { position: absolute; left: calc(-27 * var(--tu-u)); bottom: calc(8 * var(--tu-u)); animation: tu-bote .8s cubic-bezier(.3, .6, .4, 1) infinite alternate; }
@keyframes tu-bote { from { transform: translateY(0); } to { transform: translateY(calc(-52 * var(--tu-u))); } }
.tu-sprite { display: block; width: calc(54 * var(--tu-u)); height: auto; }
.tu-dedo {
    position: absolute; left: calc(-17 * var(--tu-u)); bottom: calc(-17 * var(--tu-u));
    width: calc(34 * var(--tu-u)); height: calc(34 * var(--tu-u)); box-sizing: border-box;
    border-radius: 50%; border: calc(3 * var(--tu-u)) solid #fff; background: rgba(255, 255, 255, .3);
    animation: tu-toque 1.2s ease-in-out infinite;
}
@keyframes tu-toque { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
.tu-tecla {
    position: absolute; bottom: calc(44 * var(--tu-u)); min-width: calc(34 * var(--tu-u)); padding: calc(5 * var(--tu-u)) 0;
    border-radius: calc(8 * var(--tu-u)); background: #fff; color: #7a2410; font: 800 calc(18 * var(--tu-u)) / 1 'Montserrat', sans-serif;
    box-shadow: 0 calc(3 * var(--tu-u)) 0 rgba(0, 0, 0, .4);
}
.tu-tecla-izq { left: calc(18 * var(--tu-u)); }
.tu-tecla-der { right: calc(18 * var(--tu-u)); }

.tu-items { display: flex; gap: calc(34 * var(--tu-u)); align-items: flex-end; }
.tu-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--tu-u)); }
.tu-moneda { display: block; width: calc(66 * var(--tu-u)); height: calc(66 * var(--tu-u)); object-fit: contain; animation: tu-flota 2.4s ease-in-out infinite; }
@keyframes tu-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-8 * var(--tu-u))); } }
.tu-chip {
    padding: calc(2 * var(--tu-u)) calc(14 * var(--tu-u)); border-radius: 99px; background: rgba(255, 255, 255, .12);
    font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800; font-size: calc(22 * var(--tu-u)); color: #ffe45c;
}
.tu-mala { position: relative; width: calc(66 * var(--tu-u)); height: calc(66 * var(--tu-u)); }
.tu-prohibido { position: absolute; inset: calc(-12 * var(--tu-u)); border: calc(4 * var(--tu-u)) solid #ef4444; border-radius: 50%; animation: tu-alerta 1.3s ease-in-out infinite; }
.tu-prohibido::after {
    content: ''; position: absolute; left: 50%; top: calc(-4 * var(--tu-u)); bottom: calc(-4 * var(--tu-u)); width: calc(4 * var(--tu-u));
    margin-left: calc(-2 * var(--tu-u)); border-radius: 4px; background: #ef4444; transform: rotate(45deg);
}
@keyframes tu-alerta { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- Texto y botones ---------- */
.tu-cuerpo { padding: calc(16 * var(--tu-u)) calc(22 * var(--tu-u)) calc(16 * var(--tu-u)); }
.tu-t {
    margin: 0 0 calc(6 * var(--tu-u)); font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800;
    font-size: calc(26 * var(--tu-u)); line-height: 1.06; letter-spacing: calc(.6 * var(--tu-u)); text-transform: uppercase; color: #c2410c;
    overflow-wrap: anywhere;
}
.tu-d { margin: 0 0 calc(16 * var(--tu-u)); font-size: calc(14 * var(--tu-u)); line-height: 1.45; font-weight: 600; color: #6b5744; }
.tu-btn {
    width: 100%; border: 0; cursor: pointer; padding: calc(12 * var(--tu-u)) calc(16 * var(--tu-u));
    border-radius: calc(16 * var(--tu-u)); color: #fff; background: linear-gradient(135deg, #ff7a00, #ff3b00);
    font-family: 'CatComic', 'Montserrat', sans-serif; font-weight: 800; font-size: calc(21 * var(--tu-u)); letter-spacing: calc(1 * var(--tu-u));
    box-shadow: 0 calc(5 * var(--tu-u)) 0 rgba(120, 30, 0, .4); text-shadow: 0 calc(2 * var(--tu-u)) 0 rgba(0, 0, 0, .2);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tu-btn:active { transform: translateY(calc(4 * var(--tu-u))); box-shadow: 0 calc(1 * var(--tu-u)) 0 rgba(120, 30, 0, .4); }
.tu-btn:focus-visible, .tu-saltar:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.tu-pie { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--tu-u)); margin-top: calc(12 * var(--tu-u)); min-height: calc(46 * var(--tu-u)); }
.tu-puntos { display: flex; gap: calc(6 * var(--tu-u)); }
.tu-punto { width: calc(7 * var(--tu-u)); height: calc(7 * var(--tu-u)); border-radius: 99px; background: #e8d5c4; transition: width .25s; }
.tu-punto.on { width: calc(22 * var(--tu-u)); background: linear-gradient(90deg, #ff3b00, #ff7a00); }
.tu-saltar { background: none; border: 0; cursor: pointer; padding: calc(6 * var(--tu-u)) calc(10 * var(--tu-u)); font: 700 calc(12.5 * var(--tu-u)) 'Montserrat', sans-serif; color: #7c6853; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .tu-overlay, .tu-overlay *, .tu-overlay *::before, .tu-overlay *::after { animation: none !important; transition: none !important; }
}