/* Tivity Minigames · Bolas que se abren (módulo compartido) */
.tmg-bola {
	--bola-size: 260px; --bola-color: #F9D87B; --bola-accent: #ffffff; --p: 0;
	position: relative; width: min(var(--bola-size), 78vw); aspect-ratio: 1 / 1; margin: 0 auto;
	user-select: none; -webkit-user-select: none;
}
.tmg-bola-glow {
	position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, color-mix(in srgb, var(--bola-color) 60%, transparent) 0%, color-mix(in srgb, var(--bola-color) 18%, transparent) 40%, transparent 68%);
	opacity: calc(.4 + var(--p) * .6); transform: scale(calc(.9 + var(--p) * .25));
	animation: tmg-bola-breathe 2.4s ease-in-out infinite; transition: opacity .3s, transform .3s;
}
.tmg-bola-burbuja .tmg-bola-glow, .tmg-bola-nieve .tmg-bola-glow, .tmg-bola-cristal .tmg-bola-glow { opacity: calc(.15 + var(--p) * .35); }
@keyframes tmg-bola-breathe { 50% { filter: brightness(1.25); } }
.tmg-bola-orb { position: absolute; inset: 0; padding: 0; border: 0; background: none !important; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: none !important; }
.tmg-bola-orb:focus-visible { outline: 3px solid #ffd23f; outline-offset: 6px; }
.tmg-bola-body { position: absolute; inset: 0; }
.tmg-bola-body svg, .tmg-bola-body img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; overflow: visible; }
.tmg-bola-wobble .tmg-bola-body { animation: tmg-bola-wobble 3s ease-in-out infinite; }
@keyframes tmg-bola-wobble { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-4deg) translateY(-2px); } 78% { transform: rotate(4deg); } 82% { transform: rotate(-3deg); } 86% { transform: rotate(2deg); } 90% { transform: rotate(0); } }
.tmg-bola-navidad .tmg-bola-body, .tmg-bola-farol .tmg-bola-body { transform-origin: 50% 0; }
.tmg-bola-wobble.tmg-bola-navidad .tmg-bola-body, .tmg-bola-wobble.tmg-bola-farol .tmg-bola-body { animation: tmg-bola-swing 3.4s ease-in-out infinite; }
@keyframes tmg-bola-swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.tmg-bola-hit .tmg-bola-body { animation: tmg-bola-hit .38s ease-out; }
.tmg-bola-hit.tmg-bola-navidad .tmg-bola-body, .tmg-bola-hit.tmg-bola-farol .tmg-bola-body { animation: tmg-bola-hitswing .7s ease-out; }
.tmg-bola-hit.tmg-bola-nieve .tmg-bola-body { animation: tmg-bola-shake .45s ease-in-out; }
.tmg-bola-hit.tmg-bola-burbuja .tmg-bola-body { animation: tmg-bola-wob .6s ease-in-out; }
@keyframes tmg-bola-hit { 0% { transform: scale(.94); } 25% { transform: scale(1.04) rotate(-5deg); } 50% { transform: rotate(5deg) translateX(3px); } 75% { transform: rotate(-3deg) translateX(-2px); } 100% { transform: none; } }
@keyframes tmg-bola-hitswing { 0% { transform: rotate(0); } 25% { transform: rotate(14deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
@keyframes tmg-bola-shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-6px, 2px) rotate(-3deg); } 40% { transform: translate(6px, -2px) rotate(3deg); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(4px, -1px); } }
@keyframes tmg-bola-wob { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.08, .92); } 50% { transform: scale(.94, 1.06); } 75% { transform: scale(1.04, .97); } }
.tmg-bola-rumble .tmg-bola-body { animation: tmg-bola-rumble .07s linear infinite; }
@keyframes tmg-bola-rumble { 0% { transform: translate(2px, -1px) rotate(1deg); } 50% { transform: translate(-2px, 1px) rotate(-1deg) scale(1.02); } 100% { transform: translate(1px, 2px) rotate(.5deg); } }

/* Animaciones internas de cada estilo */
.tmg-bola-body .tb-orbit { transform-box: fill-box; transform-origin: center; animation: tmg-bola-spin 9s linear infinite; }
.tmg-bola-body .tb-spark { animation: tmg-bola-twinkle 1.6s ease-in-out infinite; }
.tmg-bola-body .tb-spark:nth-child(2n) { animation-delay: .5s; }
.tmg-bola-body .tb-spark:nth-child(3n) { animation-delay: 1s; }
@keyframes tmg-bola-spin { to { transform: rotate(360deg); } }
@keyframes tmg-bola-twinkle { 50% { opacity: .2; } }
.tmg-bola-body .tb-snow { animation: tmg-bola-snow 6s linear infinite; }
.tmg-bola-body .tb-snow2 { animation-delay: -3s; }
@keyframes tmg-bola-snow { from { transform: translateY(0); } to { transform: translateY(70px); } }
.tmg-bola-hit .tb-snow, .tmg-bola-hit .tb-snow2 { animation-duration: 1.2s; }
.tmg-bola-body .tb-bow { transform-box: fill-box; transform-origin: 50% 90%; }
.tmg-bola-hit .tb-bow { animation: tmg-bola-bow .6s ease-in-out; }
@keyframes tmg-bola-bow { 30% { transform: scale(1.15) rotate(-8deg); } 60% { transform: scale(1.1) rotate(8deg); } }
.tmg-bola-body .tb-core { animation: tmg-bola-core 1.8s ease-in-out infinite; }
@keyframes tmg-bola-core { 50% { opacity: .55; transform: scale(1.15); transform-box: fill-box; transform-origin: center; } }
.tmg-bola-farol .tmg-bola-body { filter: brightness(calc(1 + var(--p) * .45)); }
.tmg-bola-luz .tmg-bola-body, .tmg-bola-cristal .tmg-bola-body { filter: brightness(calc(1 + var(--p) * .25)); }

/* Grietas con luz */
.tmg-bola-cracks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tmg-bola-cracks path { fill: none; stroke: var(--bola-accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px var(--bola-color)) drop-shadow(0 0 3px var(--bola-color)); transition: stroke-dashoffset .35s ease-out; }

/* Trozos */
.tmg-bola-pieces { position: absolute; inset: 0; pointer-events: none; }
.tmg-bola-piece { position: absolute; inset: 0; background: center / 100% 100% no-repeat; will-change: transform, opacity; }
.tmg-bola-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tmg-bola-edge path { fill: none; stroke: var(--bola-accent); stroke-width: .9; opacity: .9; }
.tmg-bola-drop { position: absolute; left: 50%; top: 50%; width: 8%; height: 8%; margin: -4% 0 0 -4%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, color-mix(in srgb, var(--bola-color) 60%, #fff) 60%, transparent 70%); }

/* Destello y lo de dentro */
.tmg-bola-flash { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff 0%, #fff3b0 35%, rgba(255, 210, 63, 0) 70%); }
.tmg-bola-flash.tmg-go { animation: tmg-bola-flash .9s ease-out forwards; }
@keyframes tmg-bola-flash { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(14); } 100% { opacity: 0; transform: scale(22); } }
.tmg-bola-inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.tmg-bola-inside.tmg-bola-inside-on { pointer-events: auto; animation: tmg-bola-popout .9s cubic-bezier(.25, 1.6, .45, 1) forwards; }
@keyframes tmg-bola-popout { 0% { transform: translate(-50%, -50%) scale(0) rotate(-60deg); opacity: 0; } 60% { transform: translate(-50%, -58%) scale(1.2) rotate(8deg); opacity: 1; } 100% { transform: translate(-50%, -55%) scale(1) rotate(0); opacity: 1; } }
.tmg-bola-hint { position: absolute; left: 0; right: 0; top: 100%; margin: 12px 0 0; font-size: 15px; text-align: center; opacity: .85; animation: tmg-bola-hintpulse 1.6s ease-in-out infinite; pointer-events: none; }
.tmg-bola-hint:empty { display: none; }
@keyframes tmg-bola-hintpulse { 50% { opacity: .45; } }
.tmg-bola-open .tmg-bola-glow { opacity: .9; transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
	.tmg-bola-body, .tmg-bola-glow, .tmg-bola-hint, .tb-orbit, .tb-snow, .tb-snow2, .tb-core, .tb-spark { animation: none !important; }
}