/* =========================================================
   Pelotas personalizadas (src/ui/skins.js) y la pantalla "Tu pelota"
   Una pelota = núcleo (.skCore, o .circ en el tablero) con las clases sk-<id> sl<nivel> y tres capas:
   .skBack detrás · .skSurf sobre la superficie (recortada a la bola) · .skFront delante.
   Todo se mide con --bs (diámetro de la bola). Solo se anima transform y opacity (nada que repinte).
   ========================================================= */

/* ---------- pelota suelta (perfil, partida rápida, avisos) ---------- */
.skBall { --bs: 56px; position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
  width: var(--bs); height: var(--bs); isolation: isolate; vertical-align: middle; }
.skCore { position: relative; width: 100%; height: 100%; border-radius: 50%; background-color: var(--pc);
  background-image: radial-gradient(circle at 31% 27%, rgba(255,255,255,.55) 0 12%, transparent 12.5%),
    radial-gradient(circle, rgba(0,0,0,.13) 0 calc(var(--bs) * .014), transparent calc(var(--bs) * .018));
  background-size: 100% 100%, calc(var(--bs) * .075) calc(var(--bs) * .075);
  box-shadow: 0 calc(var(--bs) * .05) calc(var(--bs) * .14) rgba(20,40,20,.3), inset calc(var(--bs) * -.06) calc(var(--bs) * -.06) 0 rgba(0,0,0,.14); }
/* en el tablero: la pelota del jugador (.circ) mide un 64 % de la casilla */
.tile-ball .circ { --bs: calc((var(--cell-w) - 6px) * .64); }
.tile-ball .circ .ballStamp { position: relative; z-index: 1; }

.skBack, .skSurf, .skFront { position: absolute; inset: 0; pointer-events: none; }
.skBack { z-index: -1; }
.skSurf { z-index: 0; border-radius: 50%; overflow: hidden; }
.skFront { z-index: 2; }
.skBack i, .skSurf i, .skFront i { position: absolute; display: block; }
.skBack svg, .skFront svg, .skSurf svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* piezas en órbita (gotas, destellos, piezas de puzle, la aguja del reloj) */
.skFront .orb { inset: 0; animation: skSpin 7s linear infinite; }
.skFront .orb.fast { animation-duration: 3s; }
.skFront .orb > i { left: 50%; top: 50%; width: calc(var(--bs) * .26); height: calc(var(--bs) * .26); margin: calc(var(--bs) * -.13) 0 0 calc(var(--bs) * -.13);
  transform: rotate(var(--a, 0deg)) translateY(calc(var(--bs) * -.74)) rotate(calc(var(--a, 0deg) * -1)); }
@keyframes skSpin { to { transform: rotate(360deg); } }
@keyframes skTwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: .2; } }
.skFront .spk { width: calc(var(--bs) * .24); height: calc(var(--bs) * .24); left: var(--x, 0); top: var(--y, 0);
  animation: skTwinkle 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 calc(var(--bs) * .04) rgba(255,255,255,.9)); }
.skFront .orb .spk { left: 50%; top: 50%; animation: none; filter: drop-shadow(0 0 calc(var(--bs) * .05) rgba(255,255,255,.9)); }

/* ---------- FUEGO · racha: fuego dentro · corona de llamas · lava y bolas de fuego en órbita ---------- */
.sk-fire .glow { inset: 0; background: radial-gradient(circle at 50% 112%, rgba(255,160,50,.8), rgba(255,120,40,0) 62%); }
.sk-fire .fi { --h: calc(var(--bs) * .5); left: var(--x); bottom: -10%; width: 36%; height: var(--h); opacity: .88; }
.sl3.sk-fire .fi { --h: calc(var(--bs) * .8); opacity: .95; }
.sk-fire .fi svg, .sk-fire .fl svg { transform-origin: 50% 100%; animation: skFlick .7s ease-in-out infinite alternate; animation-delay: var(--d); }
.sk-fire .flCore { opacity: 0; }
.sl3.sk-fire .fi .flCore, .sk-fire .fb .flCore { opacity: .95; }
@keyframes skFlick { 0% { transform: scale(var(--k, 1)) scaleY(.86) skewX(-5deg); } 100% { transform: scale(var(--k, 1)) scaleY(1.12) skewX(5deg); } }
.sl3.sk-fire .lava { inset: 0; background: radial-gradient(circle at 50% 100%, rgba(255,230,120,.95), rgba(255,140,40,.8) 40%, rgba(255,150,50,.3) 68%, rgba(255,150,50,0) 88%);
  animation: skGlowFlick .9s ease-in-out infinite alternate; }
/* la corona de llamas: alrededor de toda la bola, saliendo de detrás de su borde (II pequeñas, III más altas) */
.sk-fire .fl { --h: calc(var(--bs) * .3); --w: calc(var(--bs) * .22); width: var(--w); height: var(--h); left: calc(50% - var(--w) / 2); top: calc(50% - var(--bs) * .38 - var(--h));
  transform-origin: 50% calc(var(--h) + var(--bs) * .38); transform: rotate(var(--a)); }
.sl3.sk-fire .fl { --h: calc(var(--bs) * .46); --w: calc(var(--bs) * .3); }
.sk-fire .orb { animation-duration: 5s; }
/* bolas de fuego redondas, grandes, más lejos de la bola: el anillo de lenguas gira y el núcleo late */
.sk-fire .orb .fb { width: calc(var(--bs) * .5); height: calc(var(--bs) * .5); margin: calc(var(--bs) * -.25) 0 0 calc(var(--bs) * -.25);
  transform: rotate(var(--a)) translateY(calc(var(--bs) * -.94)) rotate(calc(var(--a) * -1));
  filter: drop-shadow(0 0 calc(var(--bs) * .06) rgba(255,150,50,.9)); }
.sk-fire .fb .fbRing { transform-box: view-box; transform-origin: 0 0; animation: skSpin 1.6s linear infinite; }
.sk-fire .fb svg { animation: skFireball .45s ease-in-out infinite alternate; }
/* la estela: sale del centro hacia atrás (la órbita gira en el sentido de las agujas del reloj); girada con su ángulo, queda siempre detrás */
.sk-fire .fb .tr { right: 50%; top: 50%; width: calc(var(--bs) * .62); height: calc(var(--bs) * .2); margin-top: calc(var(--bs) * -.1); border-radius: 999px 0 0 999px;
  background: linear-gradient(to left, rgba(255,214,90,.95), rgba(255,140,40,.6) 45%, rgba(232,80,40,0)); transform-origin: 100% 50%;
  transform: rotate(var(--a)) translateY(calc(var(--bs) * -.03)); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); }
@keyframes skFireball { from { transform: scale(.92); } to { transform: scale(1.06); } }

/* ---------- AGUA · baraja de agua: agua dentro · ondas · más agua, burbujas y gotas en órbita (el molde de todas) ---------- */
.sk-water .wv { left: 0; bottom: 0; width: 200%; height: 40%; fill: rgba(125,208,236,.62); animation: skWave 3.2s linear infinite; }
.sk-water .wv.b { height: 34%; fill: rgba(91,182,214,.55); animation-duration: 4.6s; animation-direction: reverse; }
.sl2.sk-water .wv { height: 52%; } .sl2.sk-water .wv.b { height: 45%; }
.sl3.sk-water .wv { height: 62%; } .sl3.sk-water .wv.b { height: 55%; }
@keyframes skWave { to { transform: translateX(-50%); } }
.sk-water .gloss { left: 16%; top: 12%; width: 34%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.55); transform: rotate(-28deg); }
.sk-water .rp { inset: 0; border-radius: 50%; border: calc(var(--bs) * .04) solid rgba(150,222,244,.9); animation: skRipple 2.6s ease-out infinite; }
.sk-water .rp.b { animation-delay: -1.3s; }
@keyframes skRipple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.95); opacity: 0; } }
.sk-water .bb { left: var(--x); bottom: 6%; width: calc(var(--bs) * .09); height: calc(var(--bs) * .09); border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.25); animation: skBubble 2.4s ease-in infinite; animation-delay: var(--d); }
@keyframes skBubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(calc(var(--bs) * -.55)); opacity: 0; } }
.sk-water .orb { animation-duration: 5.5s; }
.sk-water .drop { width: calc(var(--bs) * .22) !important; height: calc(var(--bs) * .29) !important; filter: drop-shadow(0 calc(var(--bs) * .02) calc(var(--bs) * .03) rgba(20,70,90,.35)); }

/* ---------- CLÁSICA · baraja clásica: bañada en oro · laurel · destello que la cruza y destellos en órbita ---------- */
.sk-classic .gd { inset: 0; border-radius: 50%; /* los hoyuelos, de oro, y un borde dorado por dentro */
  background: radial-gradient(circle, #F2C858 0 calc(var(--bs) * .016), transparent calc(var(--bs) * .021)) 0 0 / calc(var(--bs) * .075) calc(var(--bs) * .075),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(242,200,88,.55) 80%, rgba(230,185,74,.9));
  opacity: .9; }
.sl3.sk-classic .gd { background: radial-gradient(circle, #F2C858 0 calc(var(--bs) * .016), transparent calc(var(--bs) * .021)) 0 0 / calc(var(--bs) * .075) calc(var(--bs) * .075),
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(255,226,130,.7) 76%, #EFC24E); opacity: 1; }
.sk-classic .gr { inset: calc(var(--bs) * -.035); border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--bs) * .055) #D9A93A, inset 0 0 0 calc(var(--bs) * .02) rgba(255,240,190,.9), 0 0 0 calc(var(--bs) * .075) rgba(140,106,28,.35); }
.sl3.sk-classic .gr { box-shadow: 0 0 0 calc(var(--bs) * .055) #E6B94A, inset 0 0 0 calc(var(--bs) * .02) #FFF4C2, 0 0 0 calc(var(--bs) * .075) rgba(140,106,28,.4), 0 0 calc(var(--bs) * .3) rgba(255,215,110,.7); }
.sk-classic .laurel { inset: calc(var(--bs) * -.44); animation: skSway 4s ease-in-out infinite; }
@keyframes skSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.sl3.sk-classic .shine, .sl3.sk-prism .shine, .sl3.sk-crown .shine { inset: -10% -60%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 48%, rgba(255,245,200,.2) 54%, transparent 62%);
  animation: skShine 2.8s ease-in-out infinite; }
@keyframes skShine { 0%, 40% { transform: translateX(-55%); } 100% { transform: translateX(55%); } }
.sk-classic .orb { animation-duration: 8s; }
.skFront .orb .spk svg { animation: skGlint 1.6s ease-in-out infinite alternate; }
@keyframes skGlint { from { transform: scale(.7) rotate(0deg); } to { transform: scale(1.05) rotate(45deg); } }

/* ---------- MADERA · minigolf: vetas · marco de madera · barnizada (nudo y brillo) y el molino ---------- */
.sk-wood .grain { inset: 0; background:
  repeating-radial-gradient(ellipse 130% 70% at 22% 118%, transparent 0 7%, rgba(80,45,15,.24) 7% 9%, transparent 9% 13%),
  linear-gradient(160deg, rgba(255,230,190,.18), rgba(90,55,25,.18)); }
.sl3.sk-wood .grain { background:
  repeating-radial-gradient(ellipse 130% 70% at 22% 118%, transparent 0 6%, rgba(80,45,15,.42) 6% 8.5%, transparent 8.5% 11%),
  linear-gradient(160deg, rgba(220,160,90,.35), rgba(90,50,20,.45)); }
.sk-wood .knot { left: 56%; top: 24%; width: 22%; height: 14%; border-radius: 50%; transform: rotate(-20deg);
  background: radial-gradient(closest-side, rgba(70,38,12,.75) 0 30%, rgba(70,38,12,.3) 32% 55%, transparent 58% 70%, rgba(70,38,12,.3) 72% 85%, transparent 88%); }
.sk-wood .varnish { left: 12%; top: 8%; width: 46%; height: 26%; border-radius: 50%; background: linear-gradient(rgba(255,250,235,.6), rgba(255,250,235,0)); transform: rotate(-26deg); }
.sk-wood .wr { inset: calc(var(--bs) * -.1); border-radius: 50%;
  background: repeating-linear-gradient(100deg, #B98552 0 calc(var(--bs) * .03), #A8743F calc(var(--bs) * .03) calc(var(--bs) * .06), #C99257 calc(var(--bs) * .06) calc(var(--bs) * .085));
  -webkit-mask: radial-gradient(closest-side, transparent 83%, #000 84.5%); mask: radial-gradient(closest-side, transparent 83%, #000 84.5%);
  box-shadow: 0 calc(var(--bs) * .03) calc(var(--bs) * .06) rgba(60,35,15,.35); }
.sk-wood .mill { inset: calc(var(--bs) * -.5); }
.sk-wood .mill .wmBlades { transform-box: view-box; transform-origin: 0 0; animation: skSpin 6s linear infinite; }

/* ---------- VAPOR · baraja del tren: cinturón de hierro · bocanadas de vapor · la caldera encendida y el tren en su vía ---------- */
.sk-steam .band { left: 0; right: 0; top: 41%; height: 18%;
  background: radial-gradient(circle, #E6B94A 0 22%, transparent 27%) 0 50% / calc(var(--bs) * .16) 100% repeat-x, linear-gradient(#6A7078, #383C42);
  box-shadow: inset 0 calc(var(--bs) * .012) 0 rgba(255,255,255,.35), inset 0 calc(var(--bs) * -.012) 0 rgba(0,0,0,.3); }
.sl3.sk-steam .band { background: radial-gradient(circle, #FFE38A 0 24%, transparent 29%) 0 50% / calc(var(--bs) * .16) 100% repeat-x, linear-gradient(#7A8088, #33373C); }
.sk-steam .fire { left: 0; right: 0; top: 50%; bottom: 0; background: radial-gradient(ellipse 80% 90% at 50% 100%, rgba(255,214,90,.9), rgba(240,110,40,.7) 45%, rgba(200,52,31,0) 80%);
  animation: skGlowFlick 1.1s ease-in-out infinite alternate; }
@keyframes skGlowFlick { from { opacity: .65; } to { opacity: 1; } }
.sk-steam .puff { left: var(--x); top: -2%; width: calc(var(--bs) * .26 * var(--s)); height: calc(var(--bs) * .26 * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, rgba(235,235,235,.85) 60%, rgba(220,220,220,0) 72%); animation: skPuff 2.4s ease-out infinite; animation-delay: var(--d);
  will-change: transform, opacity; }
@keyframes skPuff { 0% { transform: translate(0, 0) scale(.35); opacity: 0; } 25% { opacity: .95; } 100% { transform: translate(calc(var(--bs) * .2), calc(var(--bs) * -.8)) scale(1.35); opacity: 0; } }
.sk-steam .rails { inset: calc(var(--bs) * -.36); border-radius: 50%; animation: skSpin 16s linear infinite;
  background: repeating-conic-gradient(#8A5A33 0 5deg, transparent 5deg 13deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 71%, #000 96%, transparent 97%); mask: radial-gradient(closest-side, transparent 70%, #000 71%, #000 96%, transparent 97%); }
.sk-steam .rails.in { animation: none; background: none; -webkit-mask: none; mask: none; inset: calc(var(--bs) * -.3);
  box-shadow: 0 0 0 calc(var(--bs) * .025) #4B5057, inset 0 0 0 calc(var(--bs) * .02) #4B5057; }
.sk-steam .rails.in::after { content: ''; position: absolute; inset: calc(var(--bs) * .1); border-radius: 50%; box-shadow: 0 0 0 calc(var(--bs) * .02) #4B5057; }
.sk-steam .orb { animation-duration: 6s; }
.sk-steam .orb .lc { width: calc(var(--bs) * .42); height: calc(var(--bs) * .32); margin: calc(var(--bs) * -.16) 0 0 calc(var(--bs) * -.21); }

/* ---------- ESTACIONES · cuatro colores · pétalos, hojas y copos · colores vivos que giran y las cuatro en órbita ---------- */
.sk-seasons .qd { inset: 0; border-radius: 50%; opacity: .62;
  background: conic-gradient(from -45deg, #F4A9C4 0 25%, #FFD23F 0 50%, #D9703A 0 75%, #BFE0F0 0); }
.sl3.sk-seasons .qd { opacity: .88; animation: skSpin 14s linear infinite; }
.sk-seasons .fl { left: var(--x); top: -8%; width: calc(var(--bs) * .14); height: calc(var(--bs) * .1); border-radius: 60% 0 60% 0; background: var(--c);
  box-shadow: 0 0 calc(var(--bs) * .02) rgba(0,0,0,.15); animation: skFlake 3.2s linear infinite; animation-delay: var(--d); will-change: transform, opacity; }
@keyframes skFlake { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--bs) * .18), calc(var(--bs) * 1.2)) rotate(300deg); opacity: 0; } }
.sk-seasons .orb { animation-duration: 9s; }
.sk-seasons .orb .se { width: calc(var(--bs) * .3); height: calc(var(--bs) * .3); margin: calc(var(--bs) * -.15) 0 0 calc(var(--bs) * -.15); }
.sk-seasons .orb .se svg { background: #F1F1DC; border-radius: 50%; box-shadow: 0 calc(var(--bs) * .02) calc(var(--bs) * .05) rgba(20,40,20,.25); }

/* ---------- COSMOS · el espacio dentro · el disco de Gargantua · más estrellas y copias en órbita ---------- */
.sk-cosmos .nb { inset: -20%; opacity: .55; mix-blend-mode: multiply; animation: skSpin 16s linear infinite;
  background:
    radial-gradient(calc(var(--bs) * .02) calc(var(--bs) * .02) at 30% 34%, #fff 50%, transparent 51%),
    radial-gradient(calc(var(--bs) * .015) calc(var(--bs) * .015) at 64% 28%, #fff 50%, transparent 51%),
    radial-gradient(calc(var(--bs) * .018) calc(var(--bs) * .018) at 56% 70%, #fff 50%, transparent 51%),
    radial-gradient(calc(var(--bs) * .012) calc(var(--bs) * .012) at 38% 62%, #fff 50%, transparent 51%),
    radial-gradient(ellipse 40% 26% at 42% 46%, rgba(214,120,200,.75), transparent 70%),
    radial-gradient(ellipse 36% 30% at 62% 58%, rgba(110,150,255,.6), transparent 70%),
    radial-gradient(circle at 50% 50%, #6A58B8, #2A1F5E 70%); }
.sl3.sk-cosmos .nb { opacity: .85; animation-duration: 8s; }
.sk-cosmos .nb::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; /* (las estrellas, sin oscurecer) */
  background: radial-gradient(calc(var(--bs) * .02) calc(var(--bs) * .02) at 30% 34%, #fff 50%, transparent 51%),
    radial-gradient(calc(var(--bs) * .015) calc(var(--bs) * .015) at 64% 28%, #fff 50%, transparent 51%),
    radial-gradient(calc(var(--bs) * .018) calc(var(--bs) * .018) at 56% 70%, #fff 50%, transparent 51%); }
.sk-cosmos .st { left: var(--x); top: var(--y); width: calc(var(--bs) * .12); height: calc(var(--bs) * .12); margin: calc(var(--bs) * -.06);
  background: radial-gradient(closest-side, #fff 0 22%, rgba(220,210,255,.6) 30%, transparent 70%); animation: skTwinkle 1.8s ease-in-out infinite; animation-delay: var(--d); }
.sk-cosmos .dk { left: -34%; right: -34%; top: 38%; height: 24%; border-radius: 50%; transform: rotate(-14deg);
  border: calc(var(--bs) * .055) solid #F4A954; box-shadow: 0 0 calc(var(--bs) * .08) rgba(255,180,90,.8), inset 0 0 calc(var(--bs) * .04) rgba(255,240,210,.9);
  clip-path: inset(0 0 50% 0); animation: skDisk 2.6s ease-in-out infinite; }
.sk-cosmos .dk.fr { clip-path: inset(50% 0 0 0); }
@keyframes skDisk { 50% { opacity: .78; } }
.sk-cosmos .orb { animation-duration: 8s; }
.sk-cosmos .orb .cp { width: calc(var(--bs) * .24); height: calc(var(--bs) * .24); margin: calc(var(--bs) * -.12) 0 0 calc(var(--bs) * -.12); border-radius: 50%;
  background: var(--pc); opacity: .7; outline: calc(var(--bs) * .02) dashed rgba(255,255,255,.95); outline-offset: calc(var(--bs) * .015); }
html.reduceMotion .sk-cosmos .nb, html.reduceMotion .sk-cosmos .dk { animation: none; }

/* ---------- FORTUNA · Gambling: una ficha de casino · el aro de la ruleta girando detrás · bañada en oro, monedas y un dado en órbita ---------- */
.sk-fortune .ch { inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.9) 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 73%, #000 75%); mask: radial-gradient(closest-side, transparent 73%, #000 75%); }
.sk-fortune .ci { inset: 22%; border-radius: 50%; border: calc(var(--bs) * .025) dashed rgba(255,255,255,.75); }
.sl3.sk-fortune .gd { inset: 0; border-radius: 50%; mix-blend-mode: multiply; background: radial-gradient(circle at 36% 30%, #FFF1B8, #E6B94A 55%, #B8862A); opacity: .8; }
.sl3.sk-fortune .shine { inset: -10% -60%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 48%, rgba(255,245,200,.2) 54%, transparent 62%);
  animation: skShine 3.6s ease-in-out infinite; }
.sk-fortune .rw { inset: calc(var(--bs) * -.24); border-radius: 50%; animation: skSpin 14s linear infinite;
  background: conic-gradient(#E2B23C 0 20deg, transparent 0), repeating-conic-gradient(#C8243A 0 20deg, #24242A 20deg 40deg);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 81%, #000 98%, transparent 99%); mask: radial-gradient(closest-side, transparent 80%, #000 81%, #000 98%, transparent 99%);
  box-shadow: 0 0 0 calc(var(--bs) * .015) #E2B23C; }
.sk-fortune .orb { animation-duration: 7s; }
.sk-fortune .orb .fo { width: calc(var(--bs) * .28); height: calc(var(--bs) * .28); margin: calc(var(--bs) * -.14) 0 0 calc(var(--bs) * -.14); }
html.reduceMotion .sk-fortune .rw, html.reduceMotion .sl3.sk-fortune .shine { animation: none; }

/* ---------- PRISMA · Ultimate: brillo iridiscente · halo arcoíris · iris más vivo (y su destello) y destellos en órbita ---------- */
.sk-prism .ir { inset: -30%; opacity: .5; animation: skSpin 9s linear infinite;
  background: conic-gradient(#FF8FC4, #8FB6FF, #7EE8C8, #FFE38A, #C39BFF, #FF8FC4); }
.sl3.sk-prism .ir { opacity: .78; animation-duration: 4s; }
.sk-prism .halo { inset: calc(var(--bs) * -.2); border-radius: 50%; animation: skSpin 5s linear infinite;
  background: conic-gradient(#FF8FC4, #8FB6FF, #7EE8C8, #FFE38A, #C39BFF, #FF8FC4);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 78%, #000 88%, transparent 100%); mask: radial-gradient(closest-side, transparent 72%, #000 78%, #000 88%, transparent 100%); }
.sk-prism .orb { animation-duration: 6s; }

/* ---------- RAYO · contrarreloj: esfera de cronómetro · su corona y la estela · cargada de electricidad y rayos en órbita ---------- */
/* la esfera: las 12 marcas de las horas en el borde de la bola, la aguja y su eje */
.sk-bolt .dial { inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -3deg, rgba(255,255,255,.95) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 72%); mask: radial-gradient(closest-side, transparent 70%, #000 72%); }
.sk-bolt .hand { left: calc(50% - var(--bs) * .025); top: 16%; width: calc(var(--bs) * .05); height: 34%; border-radius: 999px; background: #FFD84A;
  box-shadow: 0 0 0 calc(var(--bs) * .012) #2D4F7C; transform-origin: 50% 100%; animation: skSpin 4s steps(60) infinite; }
.sk-bolt .pin { left: calc(50% - var(--bs) * .055); top: calc(50% - var(--bs) * .055); width: calc(var(--bs) * .11); height: calc(var(--bs) * .11); border-radius: 50%;
  background: #2D4F7C; box-shadow: 0 0 0 calc(var(--bs) * .015) #FFD84A; }
.sl3.sk-bolt .hand { animation: skSpin .9s linear infinite; }
.sk-bolt .zap { inset: 0; background: radial-gradient(circle, rgba(200,235,255,.5), rgba(90,170,255,.32) 55%, rgba(63,111,168,0) 80%); animation: skZap 1.3s steps(1) infinite; }
.sk-bolt .zz { left: 52%; top: 10%; width: 30%; height: 48%; opacity: .9; transform: rotate(14deg); animation: skZap 1.3s steps(1) infinite; animation-delay: -.5s; }
@keyframes skZap { 0%, 55%, 70%, 100% { opacity: 1; } 60%, 65% { opacity: .15; } 85% { opacity: .5; } }
.sk-bolt .sp { right: 58%; top: var(--y); height: calc(var(--bs) * .09); width: calc(var(--bs) * .85 * var(--w)); border-radius: 999px;
  background: linear-gradient(90deg, rgba(200,230,255,0), rgba(225,242,255,.98)); transform-origin: 100% 50%; box-shadow: 0 0 calc(var(--bs) * .05) rgba(127,196,255,.8);
  animation: skStreak .9s ease-in-out infinite; animation-delay: var(--d); }
@keyframes skStreak { 0% { transform: scaleX(.4); opacity: .2; } 35% { opacity: 1; } 100% { transform: scaleX(1) translateX(calc(var(--bs) * -.14)); opacity: .1; } }
.sk-bolt .knob { left: calc(50% - var(--bs) * .1); top: calc(var(--bs) * -.2); width: calc(var(--bs) * .2); height: calc(var(--bs) * .26); border-radius: calc(var(--bs) * .05) calc(var(--bs) * .05) 0 0;
  background: linear-gradient(90deg, #2D4F7C, #5B84BC 45%, #2D4F7C); box-shadow: 0 calc(var(--bs) * -.07) 0 calc(var(--bs) * -.02) #FFD84A; }
.sk-bolt .orb { animation-duration: 3.2s; }
.sk-bolt .orb .bz { width: calc(var(--bs) * .2); height: calc(var(--bs) * .32); margin: calc(var(--bs) * -.16) 0 0 calc(var(--bs) * -.1); filter: drop-shadow(0 0 calc(var(--bs) * .05) #FFE27A); }

/* ---------- CORONA · desafíos: orbe real · la corona encima · gemas en sus bandas, brillo y gemas en órbita ---------- */
.sk-crown .rb { left: 0; right: 0; top: 43%; height: 14%; background: linear-gradient(#F6D77A, #D9A93A 55%, #A87A22);
  box-shadow: inset 0 calc(var(--bs) * .01) 0 rgba(255,255,255,.5), 0 0 calc(var(--bs) * .03) rgba(90,50,10,.4); }
.sk-crown .rb.v { left: 34%; right: auto; top: -2%; width: 32%; height: 104%; border-radius: 50%; background: none; /* (el meridiano: un aro de oro de canto) */
  border: calc(var(--bs) * .05) solid #E6B94A; box-shadow: inset 0 0 0 calc(var(--bs) * .008) rgba(255,240,190,.8), 0 0 calc(var(--bs) * .02) rgba(90,50,10,.35); }
.sl3.sk-crown .rb:not(.v) { top: 41%; height: 18%; } .sl3.sk-crown .rb.v { border-width: calc(var(--bs) * .07); }
.sk-crown .gm { left: var(--x); top: 50%; width: calc(var(--bs) * .1); height: calc(var(--bs) * .1); margin: calc(var(--bs) * -.05); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FF9C8A, #D9453A 55%, #8E2219); box-shadow: 0 0 0 calc(var(--bs) * .012) #FFF0BE; }
.sk-crown .cr { width: calc(var(--bs) * .56); height: calc(var(--bs) * .4); left: calc(50% - var(--bs) * .28); top: calc(var(--bs) * -.3);
  transform: rotate(-8deg); animation: skBob 2.2s ease-in-out infinite; filter: drop-shadow(0 calc(var(--bs) * .03) calc(var(--bs) * .04) rgba(90,40,20,.35)); }
.sl3.sk-crown .cr { width: calc(var(--bs) * .66); height: calc(var(--bs) * .47); left: calc(50% - var(--bs) * .33); top: calc(var(--bs) * -.37); }
@keyframes skBob { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(calc(var(--bs) * -.05)); } }
.sk-crown .orb { animation-duration: 7s; }
.sk-crown .orb .gem { width: calc(var(--bs) * .2); height: calc(var(--bs) * .2); margin: calc(var(--bs) * -.1) 0 0 calc(var(--bs) * -.1); filter: drop-shadow(0 0 calc(var(--bs) * .04) rgba(255,180,160,.8)); }

/* ---------- PUZLE · puzles: piezas dibujadas · el marco del puzle · piezas de colores y tres en órbita ---------- */
.sk-puzzle .jig { inset: 0; }
.sk-puzzle .qp { inset: 0; opacity: .5; background: conic-gradient(from 0deg, #2E8A80 0 25%, transparent 0 50%, #E8873A 0 75%, #8E6BE0 0); }
.sl3.sk-puzzle .jig svg path { stroke: rgba(255,255,255,.9); }
.sk-puzzle .frame { inset: calc(var(--bs) * -.28); opacity: .75; animation: skBreath 2.6s ease-in-out infinite; }
@keyframes skBreath { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.04); } }
.sk-puzzle .pc { width: calc(var(--bs) * .3); height: calc(var(--bs) * .3); margin: calc(var(--bs) * -.15) 0 0 calc(var(--bs) * -.15);
  filter: drop-shadow(0 calc(var(--bs) * .02) calc(var(--bs) * .03) rgba(20,40,20,.35)); }
.sk-puzzle .pc svg { animation: skSpin 4s linear infinite reverse; }

html.reduceMotion .skBall *, html.reduceMotion .circ[class*="sk-"] * { animation: none !important; }

/* =========================================================
   "Tu pelota": botón del menú (camiseta) y la ventana
   ========================================================= */
#profileBtn { display: none; position: fixed; bottom: 14px; left: 98px; z-index: 65; width: 36px; height: 36px; padding: 0;
  --b-bg: rgba(241,241,220,.92); --b-fg: var(--ink); --b-line: var(--cream-line); backdrop-filter: blur(4px); }
body[data-screen="menu"] #profileBtn, body[data-screen="modes"] #profileBtn { display: inline-flex; }
/* estadísticas: el mismo botón, a la derecha de tu pelota */
#statsBtn { display: none; position: fixed; bottom: 14px; left: 140px; z-index: 65; width: 36px; height: 36px; padding: 0;
  --b-bg: rgba(241,241,220,.92); --b-fg: var(--ink); --b-line: var(--cream-line); backdrop-filter: blur(4px); }
body[data-screen="menu"] #statsBtn, body[data-screen="modes"] #statsBtn { display: inline-flex; }
/* idioma: dos banderas redondas y pequeñas, abajo a la derecha del menú principal (la elegida, entera y con aro) */
#langBtns { display: none; position: fixed; right: 14px; bottom: 17px; z-index: 65; gap: 6px; }
body[data-screen="menu"] #langBtns { display: flex; }
.langBtn { width: 30px; height: 30px; padding: 0; border-radius: 50%; overflow: hidden; border-width: 2px; --b-bg: transparent; --b-line: rgba(241,241,220,.5);
  opacity: .5; transition: opacity .2s var(--ease-out), border-color .2s; }
.langBtn svg { width: 100%; height: 100%; display: block; }
.langBtn:hover { opacity: .85; background-color: transparent; }
.langBtn[aria-pressed="true"] { opacity: 1; --b-line: var(--cream); }
html.phone #langBtns { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(17px + env(safe-area-inset-bottom, 0px)); }
#profileBtn .pfDot { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #E0443A; box-shadow: 0 0 0 2px var(--cream); }
#profileBtn .pfDot[hidden] { display: none; }
/* aviso para quien aún no ha abierto "Tu pelota": el punto late con una onda y la camiseta se balancea cada pocos segundos */
#profileBtn.cta .i { animation: pfShirt 4.2s ease-in-out infinite; transform-origin: 50% 20%; }
#profileBtn.cta .pfDot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #E0443A; animation: pfPing 1.8s ease-out infinite; }
@keyframes pfShirt { 0%, 76%, 100% { transform: none; } 80% { transform: rotate(-14deg) scale(1.08); } 85% { transform: rotate(12deg) scale(1.08); } 90% { transform: rotate(-7deg); } 95% { transform: rotate(3deg); } }
@keyframes pfPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
html.reduceMotion #profileBtn.cta .i, html.reduceMotion #profileBtn.cta .pfDot::after { animation: none; }
html.phone #profileBtn { left: calc(98px + env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
html.phone #statsBtn { left: calc(140px + env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
/* (móvil en horizontal: la fila de botones redondos va arriba a la derecha, en styles/phone.css) */

#profileOverlay { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20,40,20,.5); backdrop-filter: blur(6px); }
#profileOverlay.visible { display: flex; animation: fadeIn .2s var(--ease-out); }
.profBox { width: min(680px, 100%); }
.profBox .setBody { padding-top: 0; }
.profBox .pfLayout { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

/* ---- la pelota de arriba, en su green ---- */
.pfHero { --sk: var(--grass-dark); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 22px 16px; border-bottom: 1px solid var(--cream-line); }
.pfStage { position: relative; width: 168px; height: 150px; display: grid; place-items: center; }
.pfStage::before { /* el green: césped segado y un halo del color de la pelota */
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 64px; border-radius: 50%;
  background: repeating-linear-gradient(135deg, #8DB05F 0 10px, #94B665 10px 20px);
  box-shadow: 0 0 0 5px #79A456, 0 10px 22px rgba(20,40,20,.22); }
.pfStage::after { content: ''; position: absolute; left: 50%; bottom: 34px; width: 74px; height: 16px; margin-left: -37px; border-radius: 50%;
  background: rgba(20,40,20,.28); animation: pfShadow 2.8s ease-in-out infinite; }
.pfStage .pfFlag { position: absolute; right: 12px; bottom: 30px; width: 30px; height: 58px; z-index: 0; }
.pfStage .skBall { --bs: 96px !important; z-index: 1; margin-bottom: 18px; animation: pfFloat 2.8s ease-in-out infinite; }
.pfStage .skBall.pop { animation: pfPop .5s cubic-bezier(.3,1.5,.5,1), pfFloat 2.8s .5s ease-in-out infinite; }
@keyframes pfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pfShadow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.82); opacity: .55; } }
@keyframes pfPop { 0% { transform: scale(.55) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* estallido al ponerse una pelota */
.pfBurst { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.pfBurst i { position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--sk); opacity: 0;
  animation: pfBurst .7s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes pfBurst { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-78px) scale(.3); opacity: 0; } }
.pfInfo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pfName { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.pfName .lv { font-size: 14px; font-weight: 700; color: var(--sk); letter-spacing: .06em; }
.pfSub { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.pfSub b { color: var(--ink); font-weight: 600; }
.pfActs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pfActs .btn-primary { --b-bg: var(--sk); --b-line: var(--sk); }
.pfWorn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--sk) 14%, transparent); color: color-mix(in srgb, var(--sk) 75%, var(--ink)); }
.pfWorn .i { width: 14px; height: 14px; }
.pfLockNote { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.pfLockNote .i { width: 14px; height: 14px; }
.pfColors { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pfColors .pveColor { width: 26px; height: 26px; }

/* ---- las pelotas que se ganan ---- */
.pfListHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
.pfListHead h4 { margin: 0; }
.pfCount { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.pfGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 6px; }
.pfCard { --sk: var(--ink); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center;
  padding: 12px 12px 11px; border-radius: 16px; border: 1.5px solid var(--cream-line); background: rgba(255,255,255,.4); text-align: left; cursor: pointer;
  transition: transform .2s var(--ease-out), border-color .2s, background-color .2s; }
.pfGrid.intro .pfCard { animation: btnUp .4s var(--ease-out) backwards; animation-delay: calc(var(--i) * 45ms); }
.pfCard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--sk) 45%, var(--cream-line)); }
.pfCard:hover .pfMini .skBall { transform: rotate(-12deg) scale(1.06); }
.pfCard.sel { border-color: var(--sk); background: color-mix(in srgb, var(--sk) 8%, #fff); }
.pfCard.worn::after { content: ''; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--sk); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk) 25%, transparent); }
.pfMini { grid-row: 1 / 4; position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px;
  background: color-mix(in srgb, var(--sk) 12%, transparent); overflow: visible; }
.pfMini .skBall { transition: transform .3s var(--ease-out); }
.pfCard.locked .pfMini .skBall { filter: grayscale(1) opacity(.45); }
.pfMini .pfLock { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); border: 2px solid var(--cream); }
.pfMini .pfLock .i { width: 11px; height: 11px; }
.pfCard b.nm { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; display: flex; align-items: center; gap: 6px; }
.pfCard .goal { font-size: 11.5px; color: var(--ink-soft); line-height: 1.25; }
.pfNew { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff;
  animation: pfNewPulse 1.6s ease-in-out infinite; }
@keyframes pfNewPulse { 50% { box-shadow: 0 0 0 4px rgba(232,135,58,.25); } }
/* niveles I · II · III: tocar = ver en grande */
.pfLvls { display: flex; gap: 5px; margin-top: 4px; }
.pfLv { --b-bg: transparent; --b-line: var(--cream-line); --b-fg: var(--ink-soft); flex: 1 1 0; min-width: 0; flex-direction: column; gap: 0; padding: 4px 4px 3px; border-radius: 10px; font-size: 12px; line-height: 1.1; }
.pfLv small { font-size: 9.5px; font-weight: 500; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pfLv.got { --b-bg: color-mix(in srgb, var(--sk) 16%, transparent); --b-line: color-mix(in srgb, var(--sk) 55%, transparent); --b-fg: color-mix(in srgb, var(--sk) 80%, var(--ink)); font-weight: 700; }
.pfLv.cur { --b-bg: var(--sk); --b-line: var(--sk); --b-fg: #fff; }
.pfLv.next { --b-line: color-mix(in srgb, var(--sk) 55%, transparent); border-style: dashed; }
.pfLv:hover { background-color: color-mix(in srgb, var(--sk) 22%, transparent); }
.pfLv.cur:hover { background-color: var(--sk); }
/* hasta el siguiente nivel */
.pfBar { grid-column: 2; display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pfBar .tr { flex: 1; height: 6px; border-radius: 999px; background: rgba(36,36,36,.08); overflow: hidden; }
.pfBar .tr i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sk); }
.pfGrid.intro .pfBar .tr i { transition: width .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 60ms + .15s); }
.pfBar b { color: var(--ink); font-weight: 600; }
.pfBar.done { color: color-mix(in srgb, var(--sk) 80%, var(--ink)); font-weight: 600; }

/* ---- en Partida rápida: elegir tu pelota bajo el color ---- */
#pveSkins { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
#pveSkins .skBall { --bs: 24px !important; }
#pveSkins:empty { display: none; }
.pveSkin { --b-bg: transparent; --b-line: var(--cream-line); width: 40px; height: 40px; padding: 0; border-radius: 12px; overflow: visible; }
.pveSkin.sel { --b-line: var(--ink); --b-bg: rgba(163,193,115,.3); }
.pveSkin .skBall { pointer-events: none; }
.pveSkin.more { --b-line: var(--cream-line); color: var(--ink-soft); }
.pveSkin.more .i { width: 18px; height: 18px; }

/* ---- aviso al terminar una partida ---- */
.winRec.skinNew { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; cursor: pointer;
  background: var(--ink); border-color: var(--ink); color: var(--cream); font-weight: 600; animation: recPop .6s .2s cubic-bezier(.3,1.6,.5,1) both; }
.winRec.skinNew:hover { background: #3a3a3a; }

/* ---- móvil: la pelota arriba en su green, pequeña; las tarjetas, una columna ---- */
@media (max-width: 560px) {
  .pfHero { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 10px 16px 12px; }
  .pfStage { width: 118px; height: 118px; }
  .pfStage::before { height: 48px; left: 2px; right: 2px; }
  .pfStage::after { bottom: 26px; width: 56px; margin-left: -28px; }
  .pfStage .pfFlag { right: 2px; bottom: 22px; width: 22px; height: 44px; }
  .pfName { font-size: 20px; }
  .pfSub { font-size: 12px; }
  .pfGrid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pfColors { gap: 4px; }
  .pfColors .pveColor { width: 22px; height: 22px; }
  .pfStage .skBall { --bs: 74px !important; margin-bottom: 14px; }
}
@media (max-height: 560px) and (min-width: 600px) { /* poca altura: la pelota a la izquierda, las tarjetas a la derecha */
  .profBox { width: min(900px, 100%); }
  .profBox .pfLayout { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; flex: 1; }
  .profBox .pfHero { grid-template-columns: 1fr; justify-items: center; text-align: center; border-bottom: 0; border-right: 1px solid var(--cream-line); align-content: center; }
  .profBox .pfInfo { align-items: center; }
  .profBox .pfName, .profBox .pfActs, .profBox .pfColors { justify-content: center; }
  .profBox .pfHero { padding: 8px 14px; gap: 6px; }
  .profBox .pfStage { width: 140px; height: 104px; }
  .profBox .pfStage .skBall { --bs: 64px !important; margin-bottom: 12px; }
  .profBox .pfStage::before { height: 44px; }
  .profBox .pfStage::after { bottom: 24px; width: 50px; margin-left: -25px; }
  .profBox .pfName { font-size: 19px; }
  .profBox .pfSub { font-size: 12px; }
  .profBox .pfColors { gap: 4px; }
  .profBox .pfColors .pveColor { width: 22px; height: 22px; }
  .profBox .pfGrid { grid-template-columns: minmax(0, 1fr); }
  .profBox header { padding-top: 12px; }
  .profBox header h2 { font-size: 26px; }
}

/* ---- ordenador (pantalla ancha): todo a la vista, sin desplazarse ----
   tu pelota en una columna a la izquierda; a la derecha las 8 pelotas: 2 × 4 tarjetas en horizontal y, con sitio
   (1200 px o más), 4 × 2 en vertical */
@media (min-width: 1000px) and (min-height: 620px) {
  .profBox { width: min(1240px, 96vw); max-height: none; }
  .profBox .pfLayout { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 0; }
  .profBox .setBody { overflow: visible; padding: 0 24px 22px; }
  .profBox .pfHero { grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; gap: 12px;
    padding: 34px 18px 22px; border-bottom: 0; border-right: 1px solid var(--cream-line); }
  .profBox .pfInfo { align-items: center; gap: 8px; }
  .profBox .pfName, .profBox .pfActs, .profBox .pfColors { justify-content: center; }
  .profBox .pfName { font-size: 27px; }
  .profBox .pfSub { max-width: 240px; }
  .profBox .pfStage { width: 220px; height: 186px; }
  .profBox .pfStage .skBall { --bs: 110px !important; margin-bottom: 22px; }
  .profBox .pfStage::before { height: 74px; left: 10px; right: 10px; }
  .profBox .pfStage::after { bottom: 40px; width: 84px; margin-left: -42px; }
  .profBox .pfStage .pfFlag { right: 16px; bottom: 36px; width: 32px; height: 62px; }
  .profBox .pfBurst i { animation-name: pfBurstBig; }
  .profBox .pfListHead { margin: 4px 0 12px; }
  .profBox .pfGrid { gap: 10px; padding: 0; }
}
@media (min-width: 1200px) and (min-height: 620px) {
  /* tarjetas en vertical: pelota y nombre arriba, los tres niveles y la barra debajo, a lo ancho */
  .profBox .pfGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .profBox .pfCard { grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 3px 10px; padding: 12px 10px 12px 12px; }
  .profBox .pfMini { grid-row: 1 / 3; width: 54px; height: 54px; }
  .profBox .pfCard .nm, .profBox .pfCard .goal { grid-column: 2; align-self: end; }
  .profBox .pfCard .goal { align-self: start; }
  .profBox .pfCard .nm { flex-wrap: wrap; row-gap: 3px; }
  .profBox .pfLvls { grid-column: 1 / -1; margin-top: 8px; gap: 4px; }
  .profBox .pfLv { padding: 5px 1px 4px; }
  .profBox .pfLv small { font-size: 9px; letter-spacing: -.01em; }
  .profBox .pfBar { grid-column: 1 / -1; margin-top: 6px; }
}
@keyframes pfBurstBig { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-104px) scale(.3); opacity: 0; } }

/* ---------- final del reto diario: tu pelota (con la puesta) sobre su green, en lugar del icono ---------- */
#winBall:empty { display: none; }
#winOverlay .box.withBall { padding-top: 16px; }
#winOverlay .box.withBall .winIcon { display: none; }
.wbStage { position: relative; display: grid; place-items: end center; width: 150px; height: 118px; margin: 0 auto; }
.wbStage::before { /* el green */
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 40px; border-radius: 50%;
  background: repeating-linear-gradient(135deg, #8DB05F 0 9px, #94B665 9px 18px); box-shadow: 0 0 0 4px #79A456, 0 8px 16px rgba(20,40,20,.18); }
.wbStage::after { content: ''; position: absolute; left: 50%; bottom: 16px; width: 54px; height: 12px; margin-left: -27px; border-radius: 50%;
  background: rgba(20,40,20,.28); animation: pfShadow 2.8s ease-in-out infinite; }
.wbStage .wbFlag { position: absolute; right: 22px; bottom: 18px; width: 22px; height: 44px; }
.wbStage .skBall { z-index: 1; margin-bottom: 20px; animation: pfPop .55s cubic-bezier(.3,1.5,.5,1) backwards, pfFloat 2.8s .55s ease-in-out infinite; }
.wbStage.lost .skBall { animation: pfPop .55s cubic-bezier(.3,1.5,.5,1) backwards; } /* (sin victoria, quieta) */
.wbStage.lost::after { animation: none; }
@media (max-width: 560px) {
  #winOverlay .box.withBall { padding-top: 12px; }
  .wbStage { width: 130px; height: 104px; }
  .wbStage .skBall { --bs: 58px !important; margin-bottom: 18px; }
}
/* poca altura (horizontal): la pelota encabeza la columna de la izquierda */
@media (max-height: 560px) and (min-width: 600px) {
  #winOverlay .box.withBall .winHead { padding-top: 0; }
  .wbStage { width: 120px; height: 92px; }
  .wbStage::before { height: 32px; }
  .wbStage .skBall { --bs: 50px !important; margin-bottom: 14px; }
  .wbStage .wbFlag { right: 16px; bottom: 12px; width: 18px; height: 36px; }
}
html.reduceMotion .wbStage .skBall, html.reduceMotion .wbStage::after { animation: none; }

/* lo nuevo en "Tu pelota": punto rojo que late (como el del botón del menú) en el nivel recién ganado y, al verlo, en "Ponérmela" */
.pfNewDot { position: absolute; top: -4px; right: -4px; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: #E0443A; box-shadow: 0 0 0 2px var(--cream); pointer-events: none; }
.pfNewDot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #E0443A; animation: pfPing 1.8s ease-out infinite; }
.pfLv, .pfActs .btn-primary { position: relative; overflow: visible; }
html.reduceMotion .pfNewDot::after { animation: none; }

/* ---------- tu pelota en la bandeja de abajo (en partida): flota despacio, como en "Tu pelota" ---------- */
.dockBall { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; }
.dockBall::after { /* su sombra en el suelo, que respira con ella */
  content: ''; position: absolute; left: 50%; bottom: -3px; width: 30px; height: 7px; margin-left: -15px; border-radius: 50%;
  background: rgba(20,40,20,.22); animation: pfShadow 2.8s ease-in-out infinite; }
.dockBall .skBall { animation: pfFloat 2.8s ease-in-out infinite; }
#dockOwner .dockBall .skBall { --bs: 40px !important; }
html.reduceMotion .dockBall .skBall, html.reduceMotion .dockBall::after { animation: none; }
/* móvil: la pelota, más pequeña, a la izquierda de la mano (en horizontal, encima), sin el texto */
html.phone .dockBall { width: 34px; height: 34px; }
html.phone #dockOwner .dockBall .skBall { --bs: 30px !important; }
html.phone .dockBall::after { width: 22px; height: 5px; margin-left: -11px; }
/* (la rejilla de la bandeja en el móvil, con el hueco de la pelota: styles/phone.css) */