/* =========================================================
   Ingoly Kids v2: header + barra de navegación fijos, mapa de aventura,
   tarjetas modernas, 4 islas nuevas y sus juegos.
   ========================================================= */
:root {
  --ab: calc(60px + env(safe-area-inset-top));
  --tb: calc(68px + env(safe-area-inset-bottom));
  --glass: rgba(255, 255, 255, .82);
  --ink2: #2a2350;
  --soft-shadow: 0 10px 30px rgba(43, 35, 80, .16), 0 3px 0 rgba(43, 35, 80, .06);
}
@media (max-width: 560px) { :root { --ab: calc(54px + env(safe-area-inset-top)); --tb: calc(62px + env(safe-area-inset-bottom)); } }

#app { top: var(--ab); bottom: var(--tb); padding: 0; overflow: hidden; background: linear-gradient(#8fd8ff, #dff5ff); }
.screen-map, .screen-album, .screen-ranking, .screen-parents, .screen-who, .screen-pick { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }

/* ---------- Header ---------- */
#appbar {
  position: fixed; left: 0; right: 0; top: 0; height: var(--ab); z-index: 30;
  padding: env(safe-area-inset-top) 12px 0; display: flex; align-items: center; gap: 10px;
  background: var(--glass); box-shadow: 0 4px 20px rgba(43, 35, 80, .12); border-radius: 0 0 22px 22px;
}
.ab-me { display: flex; align-items: center; gap: 8px; padding: 3px 14px 3px 3px; border-radius: 99px; background: #fff; box-shadow: 0 3px 0 #0000000f, 0 4px 12px #2a235014; }
.ab-face { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: linear-gradient(#fff4dc, #ffe1ec); display: block; }
.ab-face .mascot-svg { width: 150%; margin: -6% 0 0 -25%; }
.ab-me b { font-size: 18px; color: var(--ink2); max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-logo { margin: 0 auto; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.ab-logo span { color: #2b9fd3; } .ab-logo b { color: #f5a400; }
.ab-stats { display: flex; gap: 6px; }
.ab-pill { display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 6px; border-radius: 99px; font-size: 18px; font-weight: 800; color: var(--ink2); box-shadow: inset 0 -3px 0 #0000000f; }
.ab-pill.gold { background: linear-gradient(#fff6c8, #ffe58a); }
.ab-pill.lilac { background: linear-gradient(#f1ebff, #e0d4ff); }
.ab-pill i { font-style: normal; font-size: 18px; }
@media (max-width: 560px) { .ab-logo { display: none; } .ab-stats { margin-left: auto; } .ab-me b { font-size: 16px; } .ab-pill { font-size: 16px; padding: 3px 10px 3px 5px; } }

/* Header durante un juego */
body[data-screen="game"] #appbar .icon-btn { width: 48px; height: 48px; box-shadow: 0 4px 0 var(--accent-dark); }
body[data-screen="game"] #appbar .icon-btn.repeat { box-shadow: 0 4px 0 #1d5fd0; }
.gb-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
.gb-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); flex: none; }
#appbar .progress { flex: 1; height: 18px; max-width: none; background: #e9e4f7; }
@media (max-width: 560px) { .gb-title { display: none; } }

/* ---------- Barra de navegación ---------- */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--tb); z-index: 30;
  padding: 0 8px env(safe-area-inset-bottom); display: flex; justify-content: space-around; align-items: center;
  background: var(--glass); box-shadow: 0 -4px 20px rgba(43, 35, 80, .12); border-radius: 22px 22px 0 0;
}
.tb { position: relative; flex: 1; max-width: 140px; height: calc(100% - 10px); margin-top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 18px; color: #7d76a3; font-weight: 800; font-size: 13px; transition: background .2s, color .2s, transform .15s; }
.tb svg { width: 34px; height: 34px; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.tb.on { color: var(--ink2); background: linear-gradient(#ffffff, #f0ecff); box-shadow: 0 3px 0 #2a235014, inset 0 0 0 2px #fff; }
.tb.on svg { transform: translateY(-3px) scale(1.12); }
.tb:active { transform: scale(.94); }
.tb em { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; font-style: normal; font-size: 12px; background: #14102a; color: #fff; padding: 3px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tb.holding em { opacity: 1; }
.tb.holding::after { content: ''; position: absolute; inset: 3px; border-radius: 16px; border: 3px solid #2fe08a; clip-path: inset(100% 0 0 0); animation: fillring 3s linear forwards; }

/* El escenario del juego ya no tiene barra superior propia */
.stage { inset: 14px 14px calc(var(--leo) * .78) 14px; }
.screen-game .mascot { bottom: 6px; }
.scene { z-index: 0; }

/* ---------- Inicio ---------- */
.screen-home { display: grid; place-items: center; }
.home-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 28px 22px; margin-bottom: 8vh; border-radius: 36px; background: rgba(255, 255, 255, .55); box-shadow: var(--soft-shadow); backdrop-filter: none; }
.home-hello { font-size: clamp(26px, 5vmin, 40px); font-weight: 800; color: var(--ink2); }
.home-hello b { color: #f5a400; }
.home-leo { width: clamp(150px, 30vmin, 270px); }
.continue { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 22px; background: #fff; box-shadow: 0 5px 0 #0000001a; text-align: left; }
.cont-art { width: 54px; height: 54px; border-radius: 16px; background: #f4f0ff; display: grid; place-items: center; padding: 4px; }
.continue small { display: block; color: #8a82b0; font-size: 13px; font-weight: 800; }
.continue b { font-size: 18px; color: var(--ink2); }

/* ---------- Mapa de aventura ---------- */
.trail { position: relative; padding-bottom: 140px; }
.world { position: relative; overflow: hidden; padding: 18px 0 10px; border-bottom: 6px solid #ffffff66; }
.world-bg { position: absolute; inset: 0; z-index: 0; }
.world-bg .scene { position: absolute; inset: 0; }
.world-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.world-art { width: min(300px, 70vw); filter: drop-shadow(0 10px 14px #0000002a); animation: float 5s ease-in-out infinite; }
.isl-peek { display: flex; justify-content: center; gap: 6px; padding: 14px 18px 8px; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 30%, #ffffffcc, #ffffff55); }
.isl-peek > * { width: 30%; }
.isl-peek svg { width: 100%; height: auto; }
.isl-peek > *:nth-child(2) { transform: translateY(-10px) scale(1.12); }
.ribbon { position: relative; padding: 8px 34px 9px; color: #fff; text-align: center; background: var(--c); border-radius: 14px; box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 70%, #000); }
.ribbon::before, .ribbon::after { content: ''; position: absolute; top: 10px; width: 22px; height: 100%; background: color-mix(in srgb, var(--c) 75%, #000); z-index: -1; }
.ribbon::before { left: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -14px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.ribbon b { display: block; font-size: 26px; line-height: 1.05; text-shadow: 0 2px 0 #00000026; }
.ribbon small { font-weight: 700; font-size: 13px; opacity: .95; }
.path { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
.path-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.path-line path { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 18; opacity: .9; }
.node { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; animation: node-in .6s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i) * .04s); }
@keyframes node-in { from { opacity: 0; scale: .4; } }
.node-ball { position: relative; width: clamp(86px, 22vw, 108px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #ffffff, #f6f2ff 55%, #e5ddff); border: 6px solid var(--c);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 70%, #000), 0 16px 24px #0000002a, inset 0 -6px 0 #00000010; transition: transform .2s; }
.node:active .node-ball { transform: translateY(5px); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, #000); }
.node-art { width: 72%; display: grid; place-items: center; }
.node-art .thumb-one, .node-art .thumb-balloons, .node-art .thumb-splats, .node-art .thumb-digits { width: 100%; }
.node-art svg { width: 100%; height: auto; }
.node-art .thumb-balloons { display: flex; } .node-art .thumb-balloons svg { width: 50%; }
.node-art .thumb-splats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.node-art .thumb-splats i { aspect-ratio: 1; border-radius: 50%; }
.node-art .thumb-digits { display: flex; justify-content: center; font-size: 26px; font-weight: 800; }
.node-art .thumb-digits b:nth-child(1) { color: #3b82f6; } .node-art .thumb-digits b:nth-child(2) { color: #ef4444; } .node-art .thumb-digits b:nth-child(3) { color: #22c55e; }
.node-stars { display: flex; gap: 1px; margin-top: 6px; padding: 2px 8px; border-radius: 99px; background: #ffffffcc; }
.node-name { margin-top: 3px; font-size: 14px; font-weight: 800; color: var(--ink2); background: #ffffffd9; padding: 1px 10px; border-radius: 10px; white-space: nowrap; }
.node.cleared .node-ball { border-color: #f5b800; box-shadow: 0 8px 0 #c98c00, 0 16px 24px #0000002a, 0 0 0 6px #fff3b0; }
.node.next .node-ball { animation: next-pulse 1.6s ease-in-out infinite; }
@keyframes next-pulse { 50% { box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 70%, #000), 0 0 0 14px color-mix(in srgb, var(--c) 30%, transparent), 0 16px 24px #0000002a; } }
.node-guide { position: absolute; width: clamp(70px, 18vw, 92px); left: calc(100% - 6px); top: -10px; pointer-events: none; }
.node:nth-child(odd of .node) .node-guide { left: auto; right: calc(100% - 6px); }
.trail-end { display: flex; flex-direction: column; align-items: center; padding: 20px; color: var(--ink2); font-size: 22px; font-weight: 800; text-align: center; }
.trail-end .mascot-svg { width: 120px; }
.trail-end small { display: block; font-size: 15px; color: #6d6696; }
.screen-map .mascot { position: fixed; bottom: calc(var(--tb) + 4px); }
.screen-map .mascot .leo-wrap { width: calc(var(--leo) * .78); }

/* Fondos de cada isla en el mapa (más suaves que en el juego) */
.world-colors { background: linear-gradient(#ffe5f1, #fff7cf); }
.world-numbers { background: linear-gradient(#cdf3ff, #fff3d6); }
.world-animals { background: linear-gradient(#d9f7d0, #fdf6d8); }
.world-food { background: linear-gradient(#ffe7cf, #fff3ea); }
.world-body { background: linear-gradient(#ffe0f0, #efe6ff); }
.world-shapes { background: linear-gradient(#2a2368, #4b3aa8); }
.world-shapes .node-name { background: #ffffffe6; }
.world .scene .sun-big { display: none; }
.world-shapes .ribbon { box-shadow: 0 5px 0 #4c1d95, 0 0 30px #a78bfa88; }

/* ---------- Escenas nuevas ---------- */
.scene-animals { background: linear-gradient(#9ee3ff, #e9fbff 60%); }
.scene-animals .hills span:first-child { background: radial-gradient(ellipse at 50% 20%, #9be27f, #4fbf4f 70%); }
.fence { position: absolute; left: 0; right: 0; bottom: 14vh; height: 50px; background:
  linear-gradient(#c98b4a, #c98b4a) 0 14px / 100% 8px no-repeat, linear-gradient(#c98b4a, #c98b4a) 0 34px / 100% 8px no-repeat,
  repeating-linear-gradient(90deg, #e0a35f 0 14px, transparent 14px 54px); opacity: .9; }
.scene-food { background: linear-gradient(#ffe6c9, #fff4e6); }
.tablecloth { position: absolute; left: -5%; right: -5%; bottom: -2vh; height: 34vh; border-radius: 50% 50% 0 0 / 24px 24px 0 0;
  background: repeating-conic-gradient(#ff8a8a 0 25%, #fff 0 50%) 0 0 / 56px 56px; box-shadow: inset 0 10px 0 #ffffff66; opacity: .9; }
.steam { position: absolute; right: 12%; top: 18%; }
.steam i { display: inline-block; width: 10px; height: 40px; margin: 0 6px; border-radius: 10px; background: #ffffff; opacity: .6; animation: steam 2.6s ease-in-out infinite; }
.steam i:nth-child(2) { animation-delay: -.8s; } .steam i:nth-child(3) { animation-delay: -1.6s; }
@keyframes steam { 0% { transform: translateY(20px) scaleY(.6); opacity: 0; } 50% { opacity: .7; } 100% { transform: translateY(-30px) scaleY(1.2); opacity: 0; } }
.scene-body { background: linear-gradient(#ffd6ec, #efe5ff); }
.playground { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; background: radial-gradient(ellipse at 50% 0, #b9f0a8, #7ad46a 70%); border-radius: 50% 50% 0 0 / 30px 30px 0 0; }
.scene-shapes { background: radial-gradient(ellipse at 50% 120%, #6d4cff, #2a2368 60%, #15123a); }
.space-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: twinkle 2.4s ease-in-out infinite; }
.planet { position: absolute; border-radius: 50%; }
.planet.p1 { width: 120px; height: 120px; right: 6%; top: 10%; background: radial-gradient(circle at 35% 30%, #ffd1f0, #ff5fa2 70%); box-shadow: 0 0 40px #ff5fa288; }
.planet.p1::after { content: ''; position: absolute; left: -30%; right: -30%; top: 44%; height: 14%; border-radius: 50%; border: 6px solid #ffe08a; transform: rotate(-18deg); }
.planet.p2 { width: 60px; height: 60px; left: 8%; bottom: 18%; background: radial-gradient(circle at 35% 30%, #c7f5ff, #3bb4ff 70%); }
.screen-game .scene-shapes ~ .mascot .bubble { box-shadow: 0 0 0 3px #a78bfa66; }

/* ---------- Tarjetas modernas (todos los juegos) ---------- */
.card, .find-grid .find-item, .paint-pic {
  background: linear-gradient(160deg, #ffffff, #f6f2ff) !important;
  border: 3px solid #fff; box-shadow: var(--soft-shadow) !important;
}
.card.done { background: linear-gradient(160deg, #ffffff, #e9fff1) !important; }
.pop-card { animation: pop-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes pop-in { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
.learn-grid { width: min(100%, 760px); }
.learn-grid .card { aspect-ratio: auto; padding: 10px 8px 8px; max-height: none; }
.learn-grid .art { width: 82%; aspect-ratio: 1; display: grid; place-items: center; }
.learn-grid .art svg { width: 100%; height: auto; }
.grid-3.learn-grid { grid-template-columns: repeat(4, 1fr); }
@media (orientation: portrait) { .learn-grid, .grid-3.learn-grid { grid-template-columns: repeat(2, 1fr) !important; width: min(100%, 360px); } .learn-grid .word { font-size: 18px; } }

.pick-row { display: flex; gap: 3vw; justify-content: center; flex-wrap: wrap; width: 100%; }
.pick-card { width: clamp(110px, 22vmin, 200px); aspect-ratio: 1; padding: 12px; max-height: none; }
.pick-card svg { width: 100%; height: auto; }
.pick-card.right { border-color: #2fe08a; box-shadow: 0 0 0 6px #2fe08a55, var(--soft-shadow) !important; }

/* Memoria */
.memory-grid { width: min(100%, 560px, 70vh); gap: 2vmin; }
.mem-card { aspect-ratio: 1; perspective: 600px; }
.mem-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.mem-card.flip .mem-inner { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; display: grid; place-items: center; }
.mem-back svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 6px #0000002a); }
.mem-front { transform: rotateY(180deg); background: linear-gradient(160deg, #fff, #f6f2ff); border: 3px solid #fff; box-shadow: var(--soft-shadow); padding: 10%; }
.mem-front svg { width: 100%; height: auto; }
.mem-card.matched .mem-front { border-color: #2fe08a; animation: bounce .5s; }
@media (orientation: portrait) { .memory-grid { grid-template-columns: repeat(3, 1fr) !important; } }

/* Alimentar */
.feed-scene { display: flex; align-items: center; justify-content: center; gap: 5vw; width: 100%; height: 100%; }
.feed-friend { position: relative; width: clamp(160px, 34vmin, 300px); transition: transform .2s; }
.feed-friend.over { transform: scale(1.06); }
.feed-mouth { position: absolute; left: 44%; top: 50%; width: 12%; height: 8%; }
.tray { display: flex; gap: 2.5vmin; padding: 12px 16px; border-radius: 26px; background: #ffffffa8; box-shadow: var(--soft-shadow); }
.feed-scene .tray { flex-direction: column; }
.food, .cloth, .piece { width: clamp(70px, 14vmin, 120px); touch-action: none; cursor: grab; position: relative; }
.food svg, .cloth svg, .piece svg { width: 100%; height: auto; filter: drop-shadow(0 6px 5px #0000002a); }
.food.dragging, .cloth.dragging, .piece.dragging { z-index: 20; }
@media (orientation: portrait) { .feed-scene { flex-direction: column; gap: 2vh; } .feed-scene .tray { flex-direction: row; } }

/* Cuerpo y vestir */
.body-scene { display: flex; align-items: center; justify-content: center; height: 100%; }
.body-friend { position: relative; height: min(100%, 64vh); aspect-ratio: 200 / 244; }
.body-friend > .mascot-svg { width: 100%; height: 100%; }
.body-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spot circle { fill: transparent; cursor: pointer; }
.spot.lit circle { animation: spot-lit 1s ease-out; }
@keyframes spot-lit { 0% { fill: #fff8; stroke: #ffd23f; stroke-width: 6; } 100% { fill: transparent; stroke: transparent; stroke-width: 18; } }
.spot.hint circle { fill: #ffd23f55; stroke: #ffd23f; stroke-width: 4; animation: none; }
.spot.mute { pointer-events: none; }
.worn { animation: pop-in .4s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
.screen-game .stage-b-dress { flex-direction: row; gap: 4vw; }
.dress-tray { flex-direction: column; }
@media (orientation: portrait) { .screen-game .stage-b-dress { flex-direction: column; } .dress-tray { flex-direction: row; } .body-friend { height: min(100%, 46vh); } }

/* Encajar formas */
.sort-scene { display: flex; flex-direction: column; align-items: center; gap: 4vh; }
.holes { display: flex; gap: 3vw; padding: 16px 22px; border-radius: 28px; background: linear-gradient(#8b5cf6, #6d28d9); box-shadow: 0 8px 0 #4c1d95, var(--soft-shadow); }
.holes.over { transform: scale(1.03); }
.hole { width: clamp(80px, 16vmin, 130px); aspect-ratio: 1; border-radius: 20px; background: #00000026; display: grid; place-items: center; padding: 8px; }
.hole svg { width: 100%; height: auto; }
.hole.filled { background: #ffffff33; animation: bounce .5s; }

/* Burbujas de formas */
.sbubble-row { display: flex; gap: 4vw; justify-content: center; align-items: center; flex-wrap: wrap; }
.sbubble { width: clamp(100px, 18vmin, 170px); aspect-ratio: 1; animation: sway 3s ease-in-out infinite; }
.soap { width: 100%; height: 100%; border-radius: 50%; padding: 18%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 26%, #ffffffee 0 10%, #ffffff44 12% 52%, #ff9be655 68%, #8fe3ff66 84%, #ffffffaa 100%);
  box-shadow: inset 0 0 14px #ffffffaa, 0 10px 24px #00000026; }
.soap svg { width: 100%; height: auto; }
.sbubble.popped { animation: popped .3s forwards; }

/* ---------- Premio ---------- */
.reward-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5vmin; padding: 22px 30px 26px; border-radius: 36px; background: rgba(255, 255, 255, .7); box-shadow: var(--soft-shadow); }
.round-btn.next { background: #8b5cf6; box-shadow: 0 8px 0 #6d28d9; }

/* ---------- Álbum ---------- */
.album2 { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 4px 14px 150px; }
.alb-isl { margin: 18px 0; padding: 14px 16px 18px; border-radius: 28px; background: rgba(255, 255, 255, .78); box-shadow: var(--soft-shadow); border-top: 8px solid var(--c); }
.alb-isl h2 { margin: 0 0 10px; font-size: 22px; color: var(--ink2); }
.alb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.alb-grid .sticker { font-size: clamp(36px, 8vmin, 64px); border-radius: 22px; background: linear-gradient(160deg, #fff, #fff6e0); box-shadow: 0 5px 0 #0000001a; }
.alb-grid .sticker.locked { background: #f0ebe0; }

/* Las pantallas viejas no deben chocar con el header nuevo */
.screen-who, .screen-pick { padding-bottom: 20px; }
.title-bubble { margin-top: 16px; }
.screen-parents { position: fixed; }
.big-play.ok { bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  .node, .pop-card, .world-art, .node.next .node-ball, .steam i, .space-stars i { animation: none !important; }
}
/* Inicio: que siempre quepa entre el header y la barra */
.home-card { margin: 0; gap: 1.2vh; padding: 1.6vh 26px 2vh; max-height: calc(100% - 20px); }
.home-hello { font-size: clamp(22px, 4.4vh, 38px); }
.home-leo { width: auto; height: clamp(110px, 30vh, 260px); }
.home-leo .mascot-svg { height: 100%; width: auto; }
.screen-home .big-play { width: clamp(80px, 13vh, 130px); height: clamp(80px, 13vh, 130px); }
.screen-map .mascot .bubble, .screen-album .mascot .bubble { width: max-content; max-width: min(300px, 60vw); }
/* Memoria: cartas grandes que llenan el escenario */
.memory-grid { width: min(100%, 760px, calc((100vh - var(--ab) - var(--tb) - 150px) * 2.05)); }
@media (orientation: portrait) { .memory-grid { width: min(100%, 420px, calc((100vh - var(--ab) - var(--tb) - 170px) * 1.05)); } }
.learn-grid { width: min(100%, 820px, calc((100vh - var(--ab) - var(--tb) - 150px) * 2)); }
.food, .cloth, .piece { width: clamp(80px, 17vmin, 140px); }

/* ---------- Mapa horizontal en escritorio ---------- */
.world.wide { display: grid; grid-template-columns: minmax(240px, 30%) 1fr; align-items: center; padding: 14px 3vw; min-height: 290px; }
.world.wide .world-head { gap: 10px; }
.world.wide .world-art { width: min(280px, 100%); }
.world.wide .path { max-width: none; width: 100%; margin: 0; }
.world.wide .node-guide { left: calc(100% - 10px); right: auto; top: -24px; }
.world.wide:nth-child(even) { grid-template-columns: 1fr minmax(240px, 30%); }
.world.wide:nth-child(even) .world-head { order: 2; }
.world.wide:nth-child(even) .path { order: 1; }
.world.wide .isl-peek svg { max-height: 104px; width: auto; margin: 0 auto; }

/* ---------- Footer fijo de la app (debajo del menú) ---------- */
:root { --af: calc(22px + env(safe-area-inset-bottom)); }
#appfoot { position: fixed; left: 0; right: 0; bottom: 0; height: var(--af); padding-bottom: env(safe-area-inset-bottom); z-index: 31;
  display: flex; align-items: center; justify-content: center; background: #030304; color: #b7b2d8; font: 600 11px/1 'Baloo 2', sans-serif; letter-spacing: .02em; }
#appfoot b { color: #fff; letter-spacing: .08em; margin-left: 3px; }
#tabbar { bottom: var(--af); height: calc(var(--tb) - env(safe-area-inset-bottom)); padding-bottom: 0; border-radius: 22px 22px 0 0; }
#app { bottom: calc(var(--tb) - env(safe-area-inset-bottom) + var(--af)); }
.screen-map .mascot { bottom: calc(var(--tb) + var(--af) + 4px); }

/* ---------- Ranking ---------- */
.ranking { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 4px 14px 170px; }
.rk-loading { width: 140px; margin: 40px auto; animation: float 2s ease-in-out infinite; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 18px 0 14px; }
.pod { display: flex; flex-direction: column; align-items: center; position: relative; }
.pod-pic { width: 82%; filter: drop-shadow(0 8px 8px #0000002a); }
.pod b { font-size: 20px; color: var(--ink2); margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-stars { display: flex; align-items: center; gap: 3px; font-weight: 800; color: #b07800; }
.pod-block { width: 100%; margin-top: 6px; border-radius: 18px 18px 8px 8px; display: grid; place-items: center; color: #fff; font-size: 34px; font-weight: 800; text-shadow: 0 3px 0 #0003;
  background: linear-gradient(#c0c7d6, #8e97ab); box-shadow: 0 6px 0 #6d7489; height: 70px; }
.pod-1 .pod-block { background: linear-gradient(#ffe066, #f5a400); box-shadow: 0 6px 0 #c47f00; height: 100px; }
.pod-3 .pod-block { background: linear-gradient(#f5b98a, #d07a3e); box-shadow: 0 6px 0 #a35a26; height: 54px; }
.crown { position: absolute; top: -14px; font-size: 36px; z-index: 2; animation: float 2.4s ease-in-out infinite; }
.pod.mine b, .rk-row.mine b { color: #16a34a; }
.pod.mine .pod-pic { filter: drop-shadow(0 0 10px #2fe08a) drop-shadow(0 8px 8px #0000002a); }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rk-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 20px; background: rgba(255, 255, 255, .85); box-shadow: var(--soft-shadow); border-left: 7px solid var(--c); }
.rk-row.mine { background: linear-gradient(90deg, #dcfce7, #ffffffd9); box-shadow: 0 0 0 3px #2fe08a, var(--soft-shadow); }
.rk-n { width: 32px; text-align: center; font-size: 22px; font-weight: 800; color: #8a82b0; }
.rk-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: linear-gradient(#fff4dc, #ffe1ec); flex: none; display: block; }
.rk-face .mascot-svg { width: 150%; margin: -6% 0 0 -25%; }
.rk-who { flex: 1; min-width: 0; }
.rk-who b { display: block; font-size: 19px; color: var(--ink2); }
.rk-who small { color: #6d6696; font-weight: 700; }
.rk-stars { display: flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 800; color: #b07800; }
.rk-empty, .rk-note { text-align: center; color: var(--ink2); font-weight: 700; background: #ffffffb0; border-radius: 16px; padding: 12px; }

/* Otros niños en el mapa */
.node-friends { position: absolute; left: 50%; top: -18px; translate: -50% 0; display: flex; z-index: 3; }
.nf { position: relative; margin-left: -10px; animation: float 3s ease-in-out infinite; }
.nf:nth-child(2) { animation-delay: -1s; } .nf:nth-child(3) { animation-delay: -2s; }
.nf .rk-face { width: 34px; height: 34px; box-shadow: 0 0 0 3px #fff, 0 3px 6px #0003; }
.nf i { position: absolute; left: 50%; top: 100%; translate: -50% 2px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #14102acc; padding: 0 6px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.node:hover .nf i { opacity: 1; }
.nf.more { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #14102a; color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 0 0 3px #fff; }

/* =========================================================
   Álbum de barajitas: cartas 3D holográficas
   ========================================================= */
.screen-album { overflow-y: auto !important; }
.album3 { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 4px 14px 170px; }
.album3 .title-bubble { background: linear-gradient(135deg, #fff, #f1ebff); }
.alb3-isl { margin: 22px 0; }
.alb3-isl h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 16px; border-radius: 99px; font-size: 20px; color: #fff; background: var(--c); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 70%, #000); }
.alb3-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2.4vw, 22px); }
@media (max-width: 640px) { .alb3-grid { grid-template-columns: repeat(2, 1fr); } }

.tcard { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; perspective: 900px; aspect-ratio: 63 / 88; width: 100%; border-radius: 18px; animation: tc-float 6s ease-in-out infinite; animation-delay: var(--d); }
.tcard.tilting { animation: none; }
@keyframes tc-float { 0%, 100% { transform: rotateX(0) rotateY(0) translateY(0); } 25% { transform: rotateX(4deg) rotateY(-6deg) translateY(-4px); } 75% { transform: rotateX(-3deg) rotateY(6deg) translateY(2px); } }
.tc-inner { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out;
  padding: 7%; gap: 4%;
  background:
    radial-gradient(circle at 50% 38%, #ffffffee 0 26%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 75%, #fff) 60%, var(--c));
  border: 5px solid #fff; box-shadow: 0 14px 28px #0000004a, inset 0 0 0 3px #ffffff66; }
.tcard.bronze .tc-inner { border-color: #e7a46a; box-shadow: 0 14px 28px #0000004a, 0 0 0 3px #a35a26, inset 0 0 0 3px #ffd7b5; }
.tcard.silver .tc-inner { border-color: #dfe5f0; box-shadow: 0 14px 28px #0000004a, 0 0 0 3px #8e97ab, inset 0 0 0 3px #ffffff; }
.tcard.gold .tc-inner { border-color: #ffd23f; box-shadow: 0 14px 28px #0000004a, 0 0 0 3px #c47f00, 0 0 24px #ffd23f88, inset 0 0 0 3px #fff6c8; }
.tc-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #0000003a; font-size: clamp(11px, 1.6vw, 15px); }
.tc-top i { font-style: normal; background: #00000033; padding: 0 7px; border-radius: 8px; }
.tc-art { flex: 1; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 45%, #fff, #ffffffaa 55%, #ffffff33); box-shadow: inset 0 0 0 2px #ffffff99, inset 0 -8px 16px #0000000f; transform: translateZ(30px); padding: 8%; }
.tc-art > * { width: 100%; }
.tc-art svg { width: 100%; height: auto; filter: drop-shadow(0 8px 8px #0000002e); }
.tc-art .thumb-balloons { display: flex; } .tc-art .thumb-balloons svg { width: 50%; }
.tc-art .thumb-splats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tc-art .thumb-splats i { aspect-ratio: 1; border-radius: 50%; display: block; }
.tc-art .thumb-digits { display: flex; justify-content: center; font-size: clamp(26px, 5vw, 44px); font-weight: 800; }
.tc-art .thumb-digits b:nth-child(1) { color: #3b82f6; } .tc-art .thumb-digits b:nth-child(2) { color: #ef4444; } .tc-art .thumb-digits b:nth-child(3) { color: #22c55e; }
.tc-name { text-align: center; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #0000003a; font-size: clamp(12px, 1.8vw, 17px); line-height: 1.1; transform: translateZ(18px); }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; transform: translateZ(14px); }
.tc-stars { color: #ffe066; font-size: clamp(12px, 1.7vw, 16px); letter-spacing: 1px; text-shadow: 0 1px 0 #0004; }
.tc-stars em { font-style: normal; color: #ffffff55; }
.tc-tier { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: #0000002e; padding: 1px 7px; border-radius: 6px; }
.tc-badge { font-size: clamp(14px, 2vw, 20px); }
/* Brillo holográfico: un arcoíris que se mueve con la inclinación de la carta */
.tc-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .45;
  background: linear-gradient(115deg, transparent 20%, #ff4d6d55 30%, #ffd23f55 38%, #2fe08a55 46%, #3b82f655 54%, #a855f755 62%, transparent 72%);
  background-size: 250% 250%; background-position: var(--mx) var(--my); animation: holo 5s ease-in-out infinite; }
.tcard.tilting .tc-holo { animation: none; opacity: .7; }
.tcard.gold .tc-holo { opacity: .65; }
.tcard.bronze .tc-holo { opacity: .25; }
@keyframes holo { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.tc-shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), #ffffff88, transparent 45%); mix-blend-mode: overlay; }
.tcard.gold .tc-inner::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 1.5px, transparent 2px) 0 0 / 22px 22px; opacity: .35; mix-blend-mode: overlay; animation: sparkle-move 8s linear infinite; }
@keyframes sparkle-move { to { background-position: 22px 44px; } }

/* Carta sin ganar: el reverso */
.tcard.locked { animation-duration: 9s; }
.tc-back { flex: 1; display: grid; place-content: center; text-align: center; border-radius: 12px; color: #ffffffcc;
  background: repeating-conic-gradient(from 45deg, #ffffff12 0 25%, transparent 0 50%) 0 0 / 26px 26px, linear-gradient(160deg, #3b2f8a, #1d1650); }
.tcard.locked .tc-inner { background: linear-gradient(160deg, #4b3aa8, #241c63); border-color: #6d5ce0; padding: 6%; }
.tc-back b { font-size: clamp(40px, 8vw, 70px); line-height: 1; text-shadow: 0 0 18px #a78bfa; }
.tc-back small { font-weight: 800; letter-spacing: .1em; }

/* Carta grande al tocarla */
.tc-zoom { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #14102acc; animation: fade-in .2s; }
.tc-zoom[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
.tcard.big { width: min(78vw, calc(70vh * .72), 340px); animation: tc-spin-in .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes tc-spin-in { from { transform: rotateY(-180deg) scale(.4); opacity: 0; } }
.tcard.big .tc-top, .tcard.big .tc-name { font-size: 20px; }
.tcard.big .tc-stars { font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .tcard, .tc-holo, .tcard.gold .tc-inner::after { animation: none !important; } }

/* =========================================================
   Tarjetas de los juegos con efectos: borde de color, brillo que pasa,
   destellos y una inclinación 3D que sigue al dedo
   ========================================================= */
.stage { --cc: #8b5cf6; }
.island-colors { --cc: #ff5fa2; } .island-numbers { --cc: #3b82f6; } .island-animals { --cc: #22c55e; }
.island-food { --cc: #fb923c; } .island-body { --cc: #ec4899; } .island-shapes { --cc: #8b5cf6; }
.stage .card, .stage .pick-card, .stage .find-item, .stage .paint-pic {
  --trx: 0deg; --try: 0deg;
  transform: perspective(700px) rotateX(var(--trx)) rotateY(var(--try));
  transition: transform .15s ease-out, box-shadow .2s;
  border: 4px solid transparent !important;
  background:
    linear-gradient(115deg, transparent 38%, #ffffffcc 48%, transparent 58%) -160% 0 / 260% 100% no-repeat padding-box,
    radial-gradient(circle at 50% 40%, #ffffff 0 35%, color-mix(in srgb, var(--cc) 14%, #fff) 80%) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--cc) 70%, #fff), #ffd23f, color-mix(in srgb, var(--cc) 55%, #7cc8ff)) border-box !important;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--cc) 30%, #0000), 0 16px 30px #2a235026 !important;
  animation: card-shine 5.5s ease-in-out infinite, pop-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards;
  animation-delay: calc(var(--i, 0) * -0.9s), calc(var(--i, 0) * .06s);
}
@keyframes card-shine { 0%, 70% { background-position: -160% 0, 0 0, 0 0; } 100% { background-position: 260% 0, 0 0, 0 0; } }
.stage .card:active, .stage .pick-card:active, .stage .find-item:active { transform: perspective(700px) rotateX(var(--trx)) rotateY(var(--try)) scale(.95); }
.stage .card.done, .stage .find-item.found, .stage .pick-card.right {
  background:
    linear-gradient(115deg, transparent 38%, #ffffffcc 48%, transparent 58%) -160% 0 / 260% 100% no-repeat padding-box,
    radial-gradient(circle at 50% 40%, #ffffff 0 35%, #dcfce7 80%) padding-box,
    linear-gradient(135deg, #2fe08a, #ffd23f, #22c55e) border-box !important;
}
/* Destellos en las esquinas de cada tarjeta */
.stage .card::before, .stage .pick-card::before, .stage .find-item::before {
  content: ''; position: absolute; top: 8px; left: 10px; width: 14px; height: 14px; pointer-events: none;
  background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px var(--cc)); animation: twinkle-star 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.5s);
}
.stage .pick-card, .stage .find-item { position: relative; }
.stage .card .art svg, .stage .pick-card svg, .stage .find-item svg { filter: drop-shadow(0 8px 6px #0000002a); transform: translateZ(20px); }
.stage .card .word { color: color-mix(in srgb, var(--cc) 80%, #2a2350); }
@keyframes twinkle-star { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }

/* =========================================================
   Ventana del premio: cabe a lo alto en cualquier pantalla
   ========================================================= */
.reward { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 1.2vh 12px; }
.reward-card { max-height: 100%; width: min(520px, 100%); gap: 1.1vh; padding: 1.6vh 20px 2vh; justify-content: center; }
.reward-stars { gap: 1vh; }
.rstar svg { width: clamp(40px, 10vh, 100px); }
.rstar:nth-child(2) { transform: translateY(-1.4vh); }
.reward-leo { width: auto; height: clamp(64px, 18vh, 190px); }
.reward-leo .mascot-svg { height: 100%; width: auto; }
.reward-won { display: flex; flex-direction: column; align-items: center; gap: .6vh; }
.reward-won .tcard { width: clamp(84px, 22vh, 190px); }
.reward-won small { font-weight: 800; color: #7c3aed; font-size: clamp(13px, 2vh, 18px); }
.reward-btns { gap: clamp(10px, 4vw, 30px); }
.round-btn { width: clamp(52px, 9.5vh, 100px); height: clamp(52px, 9.5vh, 100px); box-shadow: 0 .8vh 0 #15803d; }
.round-btn.tomap { box-shadow: 0 .8vh 0 var(--accent-dark); } .round-btn.next { box-shadow: 0 .8vh 0 #6d28d9; }
/* Si hay barajita nueva, el amigo se hace más pequeño para que todo quepa */
.reward-card:has(.reward-won) .reward-leo { height: clamp(50px, 11vh, 120px); }
.stage .bounce { animation: bounce .45s cubic-bezier(.3, 1.8, .5, 1) !important; }
.stage .shake { animation: shake .45s !important; }
#tabbar.asleep .tb:not([data-tab="parents"]) { opacity: .35; filter: grayscale(1); }

/* =========================================================
   v4: el globo de diálogo va al lado del cuerpo del amigo (abajo),
   y el escenario del juego termina por encima: ya no se tapan
   ========================================================= */
.screen-game .bubble { margin-bottom: calc(var(--leo) * .22); font-size: clamp(17px, 2.6vmin, 26px); padding: 8px 16px; max-width: min(52vw, 460px); }
.screen-game .stage { bottom: calc(var(--leo) * .78 + 10px); }
@media (orientation: portrait) { .screen-game .bubble { max-width: calc(100vw - var(--leo) - 30px); } }

/* Hora de descansar: noche oscura y texto que se lee bien */
#app.screen-bedtime { background: linear-gradient(#1e1b4b, #4338ca); }
.bedtime { gap: 2vh; padding: 16px; }
.sleepy-leo { width: auto; height: clamp(120px, 30vh, 260px); }
.sleepy-leo .mascot-svg { height: 100%; width: auto; }
.bed-card { width: min(460px, 100%); text-align: center; background: #fffffff0; color: #2a2350; border-radius: 26px; padding: 16px 20px 18px; box-shadow: 0 16px 40px #0006; }
.bed-card h2 { margin: 0 0 6px; font-size: clamp(24px, 4vh, 32px); color: #4338ca; }
.bed-card h2 small { display: block; font-size: .55em; color: #6d6696; }
.bed-card p { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.bed-btn { position: relative; overflow: hidden; width: 100%; padding: 12px 14px; border-radius: 16px; background: #14102a; color: #fff; font: 800 15px 'Baloo 2', sans-serif; }
.bed-ring { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #2fe08a; opacity: .45; }
.bed-btn.holding .bed-ring { animation: bed-fill 3s linear forwards; }
@keyframes bed-fill { to { width: 100%; } }
.bed-link { display: inline-block; margin-top: 10px; color: #4338ca; font-weight: 800; font-size: 14px; }
.bed-link { position: relative; overflow: hidden; background: #ede9fe; border-radius: 12px; padding: 8px 12px; }
.bed-link.holding .bed-ring { animation: bed-fill 3s linear forwards; }

/* =========================================================
   Mapa v4: cada isla ocupa la pantalla y se pasa deslizando
   (dedo, rueda del mouse o flechas). Abajo, un minimapa.
   ========================================================= */
:root { --mm: 66px; }
#app.screen-map { overflow: hidden !important; }
.slider { position: absolute; inset: 0 0 var(--mm) 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.slider::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; padding: 1.5vh 4vw calc(var(--leo) * .45); }
.slide .world-bg { position: absolute; inset: 0; z-index: 0; }
.slide-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .8vh; }
.slide .world-art { width: auto; height: clamp(70px, 17vh, 170px); animation: float 5s ease-in-out infinite; filter: drop-shadow(0 10px 14px #0000002a); }
.slide .world-art > svg, .slide .world-art .isl-peek { height: 100%; width: auto; }
.slide .isl-peek { padding: 8px 14px 4px; }
.slide .isl-peek > * { width: auto; height: 100%; }
.slide .isl-peek svg { height: 100%; width: auto; max-height: none; }
.slide-path { position: relative; z-index: 2; min-height: 0; margin: 1vh 0 0; }
.slide-path .path-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slide-path .pl-p { display: none; }
.slide .node { left: var(--xw); top: var(--yw); }
.slide .node-ball { width: clamp(76px, min(15vh, 13vw), 124px); }
.slide .node-guide { width: clamp(62px, 13vh, 104px); left: calc(100% - 8px); right: auto; top: -18%; }
.slide .node.gl-w .node-guide { left: auto; right: calc(100% - 8px); }
/* Pantalla vertical (celular): la isla arriba y el camino en zigzag hacia abajo */
@media (orientation: portrait) {
  .slide { padding: 1vh 6vw calc(var(--leo) * .55); }
  .slide-path .pl-w { display: none; }
  .slide-path .pl-p { display: block; }
  .slide .node { left: var(--xp); top: var(--yp); }
  .slide .node-ball { width: clamp(70px, min(12vh, 24vw), 110px); }
  .slide .node.gl-w .node-guide { left: calc(100% - 8px); right: auto; }
  .slide .node.gl-p .node-guide { left: auto; right: calc(100% - 8px); }
  .slide .world-art { height: clamp(60px, 13vh, 130px); }
}
/* En escritorio ancho, la isla va a la izquierda y el camino ocupa el resto */
@media (orientation: landscape) and (min-width: 900px) {
  .slide { grid-template-rows: 1fr; grid-template-columns: minmax(220px, 26%) 1fr; align-items: center; gap: 2vw; padding: 2vh 5vw calc(var(--leo) * .3) 5vw; }
  .slide-path { height: 100%; margin: 0; }
  .slide .world-art { height: clamp(110px, 26vh, 240px); }
}
.slide-soon { display: grid; place-items: center; }
.soon-box { position: relative; z-index: 2; text-align: center; font-size: 26px; font-weight: 800; color: var(--ink2); background: #ffffffc0; border-radius: 30px; padding: 20px 30px; }
.soon-box .mascot-svg { width: 150px; margin: 0 auto; }
.soon-box small { display: block; font-size: 16px; color: #6d6696; }

/* Flechas a los lados */
.sl-arrow { position: absolute; top: calc(50% - var(--mm) / 2); translate: 0 -50%; z-index: 7; width: 52px; height: 52px; border-radius: 50%;
  background: #14102a8c; display: grid; place-items: center; box-shadow: 0 6px 16px #0003; transition: opacity .2s, transform .15s; }
.sl-arrow svg { width: 26px; height: 26px; }
.sl-arrow.prev { left: 10px; } .sl-arrow.next { right: 10px; }
.sl-arrow.off { opacity: 0; pointer-events: none; }
.sl-arrow:active { transform: scale(.9); }
@media (max-width: 560px) { .sl-arrow { width: 40px; height: 40px; } .sl-arrow svg { width: 20px; height: 20px; } }

/* Minimapa: menú de islas */
.minimap { position: absolute; left: 0; right: 0; bottom: 0; height: var(--mm); z-index: 8; display: flex; gap: 6px; align-items: center; justify-content: center;
  padding: 6px 10px; background: linear-gradient(#ffffff00, #ffffffd9 30%); overflow-x: auto; scrollbar-width: none; }
.minimap::-webkit-scrollbar { display: none; }
.mm { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 4px 10px 5px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 #0000000f, 0 4px 12px #2a235014; transition: transform .2s, background .2s; }
.mm-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: color-mix(in srgb, var(--c) 18%, #fff); }
.mm-name { font-size: 12px; font-weight: 800; color: #6d6696; }
.mm-bar { width: 100%; height: 4px; border-radius: 4px; background: #eee9fb; overflow: hidden; }
.mm-bar i { display: block; height: 100%; background: var(--c); }
.mm.on { background: var(--c); transform: translateY(-4px); }
.mm.on .mm-name { color: #fff; }
.mm.on .mm-dot { background: #ffffffe6; }
.mm.on .mm-bar { background: #ffffff55; } .mm.on .mm-bar i { background: #fff; }
@media (max-width: 560px) { .mm { min-width: 0; padding: 4px 8px; } .mm-name { display: none; } }

/* El amigo del mapa se ve completo, encima del minimapa */
.screen-map .mascot { position: absolute; left: 8px; bottom: calc(var(--mm) + 2px); z-index: 9; }
.screen-map .mascot .leo-wrap { width: calc(var(--leo) * .62); }
.screen-map .mascot .bubble { margin-bottom: calc(var(--leo) * .3); font-size: clamp(15px, 2.2vmin, 22px); padding: 6px 14px; }

/* Botón de música del header */
.ab-music { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #b3aec8; background: #f1eff8; box-shadow: inset 0 -3px 0 #0000000f; }
.ab-music svg { width: 22px; height: 22px; }
.ab-music.on { color: #fff; background: linear-gradient(#a78bfa, #7c3aed); animation: music-bob 1.4s ease-in-out infinite; }
@keyframes music-bob { 50% { transform: rotate(-8deg) scale(1.06); } }
.ab-stats { align-items: center; }
button.ab-pill { border: 0; cursor: pointer; font: inherit; }
@media (orientation: portrait) {
  .slide-path { margin: 7vh 0 4vh; }
  .slide .ribbon { padding: 5px 24px 6px; }
  .slide .ribbon b { font-size: 21px; }
  .slide .node-name { font-size: 12px; }
  .slide .node-guide { width: clamp(46px, 9vh, 70px); top: -34%; }
  .screen-map .mascot .leo-wrap { width: calc(var(--leo) * .5); }
}
.paint-pic { width: min(40vmin, 300px, calc(100vh - var(--ab) - var(--tb) - var(--leo) - 200px)); padding: 3vmin; }