:root{
  --fondo:#14363a; --fondo2:#0d2427; --fondo3:#1d4a4f; --papel:#fffdf4; --tinta:#8a8576;
  --acento:#ffb703; --texto:#f4f1e8; --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);
  background:radial-gradient(120% 80% at 50% 0%,var(--fondo3),var(--fondo) 55%,var(--fondo2));user-select:none}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.app{height:100dvh;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));max-width:620px;margin:0 auto}
.barra{display:flex;align-items:center;gap:10px}
.redondo{width:46px;height:46px;border-radius:50%;background:#ffffff1f;font-size:22px;display:grid;place-items:center;transition:transform .12s var(--ease)}
.redondo:active,.accion:active,.principal:active{transform:scale(.94)}
.titulo{flex:1;text-align:center;font-size:22px;font-weight:800;letter-spacing:.3px}
.titulo span{display:inline-flex;flex-direction:column;align-items:center;line-height:1.1;padding:6px 22px;border-radius:999px;background:linear-gradient(#2f6fe0,#1b45b3);box-shadow:0 3px 0 #0d2a75}
.aviso{height:44px;margin:8px 4px 0;text-align:center;font-size:clamp(14px,4.1vw,16px);font-weight:600;line-height:1.2;color:#ffe9a8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tablero{flex:1;min-height:0;position:relative}
.tablero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.acciones{display:flex;gap:7px;padding-top:10px}
.accion{position:relative;flex:1;min-width:0;height:62px;border-radius:20px;background:linear-gradient(#3b7bf0,#1f4fc4);box-shadow:0 3px 0 #0d2a75;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:transform .12s var(--ease)}
.accion span{font-size:22px;line-height:1}
.accion em{font-style:normal;font-size:11px;opacity:.95}
.accion.poder{background:linear-gradient(#a45cf0,#6b2fc4);box-shadow:0 3px 0 #3d1a7a}
.accion b{position:absolute;top:-7px;right:-3px;min-width:22px;height:22px;border-radius:11px;background:#ffc93c;color:#3a2600;font-size:13px;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 0 #b36b00}
.accion:disabled{opacity:.4}

.capa{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:16px;z-index:5;animation:aparece .2s var(--ease)}
.capa[hidden]{display:none}
@keyframes aparece{from{opacity:0}}
.tarjeta{width:min(420px,100%);max-height:100%;overflow:auto;background:#fffdf4;color:#2b2a26;border-radius:22px;padding:22px;text-align:center;animation:sube .22s var(--ease)}
@keyframes sube{from{transform:translateY(16px);opacity:0}}
.tarjeta h2{margin:6px 0 4px;font-size:28px}.tarjeta h3{margin:18px 0 8px;font-size:16px;text-align:left;color:#6b675a}
.estrellas{font-size:44px;letter-spacing:6px;animation:rebota .5s var(--ease)}
@keyframes rebota{from{transform:scale(.4)}60%{transform:scale(1.15)}}
.principal{width:100%;margin-top:14px;height:60px;border-radius:999px;background:linear-gradient(#ffc93c,#f59e0b);box-shadow:0 4px 0 #b36b00;color:#3a2600;font-size:20px;font-weight:800;transition:transform .12s var(--ease)}
.secundario{width:100%;margin-top:10px;height:48px;border-radius:14px;background:#eceadf;font-weight:700;color:#2b2a26}
.peligro{color:#b3261e}
.ajuste{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 4px;font-size:17px}
.ajuste input{width:24px;height:24px;accent-color:#2f6fe0}
.campo{display:block;text-align:left;font-size:15px;color:#6b675a;margin:10px 0 6px}
.campo input{display:block;width:100%;margin-top:6px;height:48px;border-radius:14px;border:2px solid #d8d5c6;padding:0 14px;font:inherit;font-size:18px;color:#2b2a26;background:#fff;user-select:text}
.opciones{display:flex;gap:8px}
.opciones button{flex:1;height:46px;border-radius:12px;background:#e4e1d3;color:#2b2a26;font-weight:700;border:3px solid transparent}
.opciones button.elegido{border-color:#2f6fe0;background:#dbe6fb}
.opciones.fondos button{border-color:#fff}
.opciones.fondos button.elegido{border-color:#2f6fe0;box-shadow:0 0 0 2px #fff inset}
.version{margin:6px 0 0;font-size:13px;color:#8a8576}
.quedan{margin:6px 0 0;font-weight:800;color:#b36b00;font-size:17px}
.premio{margin:8px 0 0;font-weight:800;color:#6b2fc4;font-size:18px;min-height:26px}
.estrellas span{display:inline-block;font-size:48px;margin:0 3px;opacity:.25;filter:grayscale(1)}
.estrellas span.on{opacity:1;filter:none;animation:estrella .5s var(--ease) both}
@keyframes estrella{from{transform:scale(.2) rotate(-60deg)}60%{transform:scale(1.35) rotate(8deg)}}
.bloque{margin:14px 0 6px;text-align:left;font-weight:800;font-size:15px;color:#4a463a;display:flex;justify-content:space-between}
.bloque small{font-weight:600;color:#8a8576}
.niveles{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.niveles button{height:54px;border-radius:12px;background:#e4e1d3;color:#2b2a26;font-weight:800;font-size:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.niveles button i{font-style:normal;font-size:10px;letter-spacing:-1px;color:#e0a100;min-height:12px}
.niveles button.hecho{background:#dff5e1}
.niveles button.actual{background:#2f6fe0;color:#fff}.niveles button.actual i{color:#ffe28a}
.niveles button:disabled{opacity:.35}
.confeti{position:fixed;top:-20px;width:10px;height:14px;z-index:9;pointer-events:none;animation:cae 1.6s linear forwards}
@keyframes cae{to{transform:translateY(110vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.thorfin{margin:2px 0 4px}
.thorfin-agujero{position:relative;width:112px;height:112px;margin:0 auto;border-radius:50%;overflow:hidden;background:#141210;box-shadow:inset 0 3px 8px #0009,0 0 0 4px #e07b3f55;animation:tf-entra .6s var(--ease) both .25s}
.thorfin-agujero img{position:absolute;left:-12%;top:-4%;width:124%;max-width:none;animation:tf-salto .7s var(--ease) both .75s}
.thorfin-dice{position:relative;margin:8px auto 0;max-width:290px;background:#eef0ff;color:#2b2f6b;border-radius:16px;padding:10px 14px;font-size:17px;font-weight:700;line-height:1.3;animation:sube .3s var(--ease) both .55s}
.thorfin-dice::before{content:"";position:absolute;top:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:#eef0ff}
.thorfin-nombre{margin:6px 0 0;font-size:18px;font-weight:900;color:#e0457b}
@keyframes tf-entra{from{transform:scale(.2) translateY(30px) rotate(-15deg);opacity:0}70%{transform:scale(1.1) rotate(4deg)}}
@keyframes tf-salto{from{transform:translateY(60%)}55%{transform:translateY(-6%)}75%{transform:translateY(3%)}}
@keyframes latido{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
.corazon{position:fixed;bottom:-40px;font-size:28px;z-index:9;pointer-events:none;animation:sube-corazon 2.4s ease-out forwards}
@keyframes sube-corazon{to{transform:translateY(-105vh) rotate(25deg);opacity:.2}}
.titulo b{font-weight:800}
.titulo small{font-size:12px;font-weight:700;opacity:.92;margin-top:1px}
.titulo span.jefe{background:linear-gradient(#ffd45c,#e09a00);box-shadow:0 3px 0 #8a5a00;color:#3a2600}
.puntos-fin{margin:6px 0 0;font-weight:800;color:#b36b00;font-size:15px}
.tienda-saldo{margin:0 0 8px;text-align:left;font-weight:700;color:#4a463a}
.opciones.tienda button{height:52px;font-size:15px}
.opciones.tienda button:disabled{opacity:.45}

/* 🗻 Tema Japón: monte Fuji y sol suave detrás de los recipientes (dibujo fijo, no gasta batería) */
body.tema-japon{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 170'%3E%3Cpath d='M0 170V136q60-14 112-6l62-70q26-26 52 0l62 70q52-8 112 6v34z' fill='%23ffffff12'/%3E%3Cpath d='M174 60q26-26 52 0l-14 14-8-8-8 10-8-9-7 8z' fill='%23ffffff2e'/%3E%3Cpath d='M0 170v-18q100-16 200-4t200-4v26z' fill='%23ffffff0c'/%3E%3C/svg%3E") center bottom 64px/100% auto no-repeat,
  radial-gradient(circle at 80% 24%,#ff8fa94d 0 8%,#ff8fa900 8.6%),
  radial-gradient(120% 80% at 50% 0%,var(--fondo3),var(--fondo) 55%,var(--fondo2))}
.petalo{position:fixed;top:-24px;width:13px;height:10px;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#ffe3ec,#ff9fbf);z-index:9;pointer-events:none;animation:petalo 3.2s linear forwards}
@keyframes petalo{25%{transform:translate(18px,25vh) rotate(120deg)}50%{transform:translate(-10px,52vh) rotate(220deg)}75%{transform:translate(16px,78vh) rotate(320deg)}to{transform:translate(0,108vh) rotate(420deg);opacity:.7}}

/* Botones del menú, cartitas, jardín y tarjetas */
.menu-botones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.menu-botones .secundario{margin:0;font-size:15px}
.menu-botones #m-ayuda{grid-column:span 2}
.redondo.con-punto{position:relative}
.redondo.con-punto::after{content:"";position:absolute;top:6px;right:6px;width:12px;height:12px;border-radius:50%;background:#ff5a8a;box-shadow:0 0 0 2px #fff}
.carta-btn{width:100%;margin-top:12px;height:58px;border-radius:16px;background:linear-gradient(#ff8fb1,#e0457b);box-shadow:0 4px 0 #9b2350;color:#fff;font-size:19px;font-weight:800;animation:latido 1.6s ease-in-out infinite}
.carta{background:repeating-linear-gradient(#fffaf0 0 33px,#e9dcc3 33px 34px);text-align:left}
.carta-titulo{margin:0 0 10px;font-size:20px;font-weight:800;color:#c2185b;text-align:center}
.carta-texto{font-size:21px;line-height:34px;margin:0;color:#3b2f1e;font-family:"Segoe Print","Comic Sans MS","Bradley Hand",cursive,system-ui}
.carta-firma{margin:14px 0 0;text-align:right;font-size:19px;font-weight:800;color:#c2185b}
.sub{margin:4px 0 10px;color:#6b675a;font-size:16px}
.sobres{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sobres button{height:60px;border-radius:14px;background:#ffe0ea;color:#8a1f48;font-weight:800;font-size:16px}
.sobres button.nueva{background:linear-gradient(#ff8fb1,#e0457b);color:#fff}
.sobres button:disabled{background:#eceadf;color:#8a8576}
.jardin{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;padding:10px;border-radius:16px;background:linear-gradient(#cfe8b9,#9fcd85)}
.jardin span{aspect-ratio:1;display:grid;place-items:center;font-size:clamp(14px,5.4vw,24px);line-height:1}
.jardin span.tierra{font-size:10px;color:#6f8f5a}
.jardin span.nueva{animation:estrella .7s var(--ease) both}
.jardin-leyenda{margin:8px 0 0;font-size:13px;color:#6b675a}
.jardin-fin{margin:6px 0 0;font-weight:700;color:#2e7d32;font-size:17px;min-height:22px}
.nov-emoji{font-size:64px;line-height:1.1}
.nov-txt{font-size:18px;line-height:1.4;margin:8px 0 0;color:#3b3a33}
.cumple{display:flex;gap:8px}
.cumple select{flex:1;height:48px;border-radius:14px;border:2px solid #d8d5c6;background:#fff;font:inherit;font-size:17px;color:#2b2a26;padding:0 10px}

/* Tarjeta de ganar en pantallas bajas: más compacta para que «Siguiente nivel» se vea sin bajar */
@media (max-height:760px){
  .tarjeta{padding:16px 18px}
  .estrellas span{font-size:38px}
  .thorfin-agujero{width:84px;height:84px}
  .thorfin-dice{font-size:15px;padding:8px 12px;margin-top:6px}
  .thorfin-nombre{font-size:15px;margin-top:3px}
  .tarjeta h2{font-size:24px;margin:4px 0 2px}
  #ganar-txt{margin:2px 0}
  .puntos-fin,.premio,.jardin-fin{font-size:14px;margin-top:3px;min-height:0}
  .carta-btn{height:50px;font-size:17px;margin-top:8px}
  .principal{height:54px;margin-top:10px}
  #btn-contar{height:42px;margin-top:8px}
}
.jefe-barra{display:flex;align-items:center;gap:10px;margin:2px auto 4px;padding:6px 14px;border-radius:16px;background:#00000040;max-width:100%}
.jefe-barra[hidden]{display:none}
.jefe-cara{font-size:34px;line-height:1;display:inline-block}
.jefe-cara.golpe{animation:jefe-golpe .45s var(--ease)}
.jefe-barra b{display:block;font-size:14px;color:#ffe9a8}
.jefe-vida{font-size:15px;letter-spacing:1px;line-height:1.2;word-break:break-all}
@keyframes jefe-golpe{20%{transform:translateX(-8px) rotate(-14deg) scale(.85)}45%{transform:translateX(7px) rotate(10deg)}70%{transform:translateX(-3px) rotate(-4deg)}}
.rescate{display:flex;align-items:center;gap:8px;margin:2px 0 4px;padding:6px 12px;border-radius:16px;background:#00000048}
.rescate[hidden]{display:none}
.rescate-thorfin{position:relative;width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;background:#141210;box-shadow:0 0 0 3px #e07b3f66}
.rescate-thorfin img{position:absolute;left:-12%;top:-4%;width:124%;max-width:none}
.rescate.tiznado .rescate-thorfin img{filter:grayscale(.7) brightness(.6) contrast(1.2)}
.rescate.salvado .rescate-thorfin{box-shadow:0 0 0 3px #7cfc8a}
.soga{font-size:20px;margin-left:-14px;margin-top:22px}
.rescate-medio{flex:1;min-width:0}
.rescate-medio b{display:block;font-size:14px;color:#ffe9a8}
.mecha{position:relative;height:10px;margin-top:4px;border-radius:5px;background:#ffffff26;overflow:hidden}
.mecha i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#ff5d3a,#ffb703);transition:width .25s linear}
.bomba{font-size:30px;display:inline-block;animation:bomba 1.2s ease-in-out infinite}
.rescate.apurado .bomba{animation-duration:.45s}
.rescate.salvado .bomba,.rescate.tiznado .bomba{animation:none;opacity:.35}
.rescate-tiempo{font-size:18px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.rescate.apurado .rescate-tiempo{color:#ff6b6b}
@keyframes bomba{50%{transform:scale(1.15) rotate(-6deg)}}
.app.temblor{animation:temblor .5s}
@keyframes temblor{15%{transform:translate(-9px,4px)}30%{transform:translate(8px,-5px)}45%{transform:translate(-6px,3px)}60%{transform:translate(4px,-2px)}80%{transform:translate(-2px,1px)}}
#rescate-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:30px}
.rescate.tiznado #rescate-emoji{filter:grayscale(.7) brightness(.6) contrast(1.2)}
.lazo-rosa{display:none;position:absolute;top:1px;right:2px;font-size:15px;z-index:1}
.rescate.lazo .lazo-rosa{display:block}
.rescate.lazo .rescate-thorfin img{filter:hue-rotate(-18deg) saturate(1.25) brightness(1.08)}
.visita{position:fixed;left:-60px;z-index:4;font-size:40px;background:none;padding:6px;animation:vuela 7s linear forwards}
@keyframes vuela{0%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(28vw,-30px) rotate(8deg)}50%{transform:translate(56vw,12px) rotate(-6deg)}75%{transform:translate(84vw,-24px) rotate(6deg)}100%{transform:translate(118vw,0)}}
body.noche{background:radial-gradient(120% 80% at 50% 0%,#232c5c,#0b1026 60%,#04060d)!important}
body.noche::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),radial-gradient(1.4px 1.4px at 28% 42%,#fff,transparent),radial-gradient(2px 2px at 47% 12%,#fff,transparent),
  radial-gradient(1.3px 1.3px at 66% 30%,#fff,transparent),radial-gradient(1.8px 1.8px at 83% 16%,#fff,transparent),radial-gradient(1.4px 1.4px at 91% 48%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 8% 62%,#fff,transparent),radial-gradient(1.2px 1.2px at 38% 76%,#fff,transparent),radial-gradient(1.8px 1.8px at 72% 66%,#fff,transparent),
  radial-gradient(1.3px 1.3px at 57% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 20% 92%,#fff,transparent),radial-gradient(1.4px 1.4px at 88% 84%,#fff,transparent);
  animation:titila 2.8s ease-in-out infinite alternate}
@keyframes titila{from{opacity:.45}to{opacity:1}}
.asoma{position:fixed;left:10px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:4;display:flex;align-items:flex-end;gap:6px;pointer-events:none}
.asoma[hidden]{display:none}
.asoma.sale{animation:asoma 2.8s var(--ease) both}
.asoma-cara{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#141210;box-shadow:0 0 0 3px #e07b3f88}
.asoma-cara img{position:absolute;left:-12%;top:-4%;width:124%;max-width:none}
.asoma p{margin:0 0 30px;background:#eef0ff;color:#2b2f6b;border-radius:14px 14px 14px 4px;padding:8px 12px;font-weight:800;font-size:15px;max-width:60vw}
@keyframes asoma{0%{transform:translateY(130%)}12%,82%{transform:translateY(0)}100%{transform:translateY(130%)}}
.nube-txt{margin:0;text-align:left;font-weight:700;color:#4a463a}
.nube-cod{margin:6px 0 0;text-align:left;font-size:14px;color:#6b675a}
.nube-codigo{font:700 15px ui-monospace,Menlo,monospace;background:#eceadf;border-radius:8px;padding:4px 8px;color:#2b2a26;letter-spacing:.5px}
/* 💣 mecha dibujada que se quema */
.mecha-dibujo{position:relative;height:26px;margin-top:2px}
.mecha-dibujo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mecha-quemada{fill:none;stroke:#1d1512;stroke-width:4;stroke-linecap:round;opacity:.85}
.mecha-cuerda{fill:none;stroke:#f0b56e;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 1px 0 #6b4a2a)}
.mecha-chispa{position:absolute;transform:translate(-50%,-50%);font-size:24px;filter:drop-shadow(0 0 6px #ffb703);line-height:1;pointer-events:none;animation:chispea .18s steps(2) infinite}
.mecha-chispa[hidden]{display:none}
@keyframes chispea{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}100%{transform:translate(-50%,-55%) scale(1.35) rotate(25deg)}}
.humo{position:absolute;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:#cfd3d8aa;pointer-events:none;animation:humo 1.5s ease-out forwards}
@keyframes humo{to{transform:translate(-6px,-30px) scale(2.6);opacity:0}}
.rescate{padding:8px 12px}
.rescate.apurado{animation:tiembla-barra .25s infinite}
@keyframes tiembla-barra{25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
.rescate.apurado .rescate-tiempo{animation:late .5s ease-in-out infinite}
@keyframes late{50%{transform:scale(1.25)}}
/* presión: borde rojo que late */
body.apuro::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,#0000 50%,#ff2a2a55 80%,#ff2a2aaa 100%);animation:apuro 1s ease-in-out infinite}
body.apuro-fuerte::after{background:radial-gradient(ellipse at center,#0000 40%,#ff2a2a77 72%,#ff2a2add 100%);animation-duration:.55s}
@keyframes apuro{50%{opacity:.35}}
/* 👑 jefe grande */
.jefe-grande{position:fixed;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;pointer-events:none;background:radial-gradient(circle,#0006,#0000 70%)}
.jefe-grande[hidden]{display:none}
.jefe-grande-cara{font-size:130px;line-height:1;filter:drop-shadow(0 10px 18px #0009)}
.jefe-grande-dice{margin:10px 0 0;background:#fff;color:#2b2a26;font-weight:900;font-size:20px;padding:10px 16px;border-radius:18px;box-shadow:0 6px 16px #0005}
.jefe-grande.intro .jefe-grande-cara{animation:jefe-entra 2.3s var(--ease) both}
.jefe-grande.intro .jefe-grande-dice{animation:jefe-dice 2.3s var(--ease) both}
.jefe-grande.derrota .jefe-grande-cara{animation:jefe-sale 1.9s ease-in both}
.jefe-grande.derrota .jefe-grande-dice{animation:jefe-dice 1.9s var(--ease) both}
@keyframes jefe-entra{0%{transform:scale(.1) rotate(-30deg);opacity:0}18%{transform:scale(1.15) rotate(8deg);opacity:1}26%,34%,42%{transform:scale(1) rotate(-6deg)}30%,38%{transform:scale(1.05) rotate(6deg)}80%{transform:scale(1);opacity:1}100%{transform:translateY(-38vh) scale(.25);opacity:0}}
@keyframes jefe-dice{0%,12%{transform:scale(.5);opacity:0}22%,80%{transform:scale(1);opacity:1}100%{opacity:0}}
@keyframes jefe-sale{0%{transform:scale(1)}100%{transform:scale(.2) rotate(720deg) translateY(-30vh);opacity:0}}
.jefe-barra.rojo{animation:jefe-rojo .5s}
@keyframes jefe-rojo{30%{background:#ff3b3b88}}
.tirar{margin:-6px 0 4px;font-size:12px;color:#8a8576;transition:transform .16s var(--ease)}
/* 💬 opinión */
.opinion{margin:10px 0 0;font-weight:700;color:#4a463a}
.opinion button[data-c]{font-size:30px;background:none;padding:2px 6px;transition:transform .12s var(--ease)}
.opinion button[data-c]:active{transform:scale(1.3)}
.opinion-escribir{margin-top:6px;background:#eef0ff;color:#2b2f6b;font-weight:800;border-radius:999px;padding:8px 14px;font-size:14px}
/* 🎮 minijuegos */
.capa.mini{padding:12px}
.mini-caja{width:min(440px,100%);height:min(640px,92dvh);background:linear-gradient(#20476b,#14284a);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px #0008}
.mini-arriba{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;color:#fff;font-size:18px}
.mini-arriba span{font-weight:800;color:#ffe28a}
.mini-zona{position:relative;flex:1;overflow:hidden;touch-action:none}
.mini-fin{position:absolute;inset:0;margin:auto;width:min(440px,100%);height:fit-content;background:#fffdf4;color:#2b2a26;border-radius:22px;padding:22px;text-align:center}
.burbuja{position:absolute;bottom:-90px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fffc 0 10%,#fff4 18%,transparent 40%),color-mix(in srgb,var(--c,#7fd8ff) 55%,transparent);border:2px solid #ffffff99;animation:sube-burbuja linear forwards}
.burbuja.oro{background:radial-gradient(circle at 32% 28%,#fffc 0 10%,#fff4 18%,transparent 40%),#ffd54acc;box-shadow:0 0 16px #ffd54a}
@keyframes sube-burbuja{0%{transform:translate(0,0)}25%{transform:translate(14px,-25vh)}50%{transform:translate(-12px,-50vh)}75%{transform:translate(10px,-75vh)}100%{transform:translate(0,-105vh)}}
.cae-moneda{position:absolute;top:-60px;font-size:42px;background:none;padding:4px;animation:cae-moneda linear forwards}
@keyframes cae-moneda{to{transform:translateY(calc(100% + 92dvh)) rotate(200deg)}}
.mini-mas{position:absolute;font-style:normal;font-weight:900;color:#ffe28a;font-size:22px;pointer-events:none;animation:mini-mas .9s ease-out forwards;text-shadow:0 2px 0 #0006}
@keyframes mini-mas{to{transform:translateY(-50px);opacity:0}}
.mini-zona.z-memoria{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:14px;align-content:center}
.carta-mem{aspect-ratio:3/4;border-radius:14px;background:linear-gradient(135deg,#a45cf0,#6b2fc4);font-size:38px;box-shadow:0 3px 0 #3d1a7a;transition:transform .25s var(--ease),background .25s}
.carta-mem span{opacity:0;transition:opacity .2s}
.carta-mem.abierta{background:#fffdf4;transform:rotateY(180deg) scaleX(-1)}
.carta-mem.abierta span{opacity:1}
.carta-mem.par{background:#dff5e1;box-shadow:0 0 0 3px #7cfc8a}
.mini-zona.z-ruleta{display:grid;place-items:center;align-content:center;gap:18px}
.ruleta-flecha{font-size:34px;color:#ffc93c;margin-bottom:-24px;z-index:1;text-shadow:0 2px 0 #0006}
.ruleta{position:relative;width:min(300px,78vw);aspect-ratio:1;border-radius:50%;border:6px solid #fff;box-shadow:0 8px 24px #0008;
  background:conic-gradient(#ff7b9c 0 60deg,#7fd8ff 60deg 120deg,#ffd54a 120deg 180deg,#a45cf0 180deg 240deg,#7cfc8a 240deg 300deg,#ffa94d 300deg 360deg);
  transition:transform 3.4s cubic-bezier(.12,.8,.12,1)}
.ruleta span{position:absolute;left:50%;top:50%;font-weight:900;color:#2b2a26;font-size:15px;white-space:nowrap;transform:translate(-50%,-50%) rotate(calc(var(--i) * 60deg + 30deg)) translateY(calc(min(300px,78vw) * -0.31)) rotate(calc(var(--i) * -60deg - 30deg))}
.mini-zona.z-ruleta .principal{width:min(300px,78vw)}
/* 🎨 fondo Galaxia */
body.estrellado::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),radial-gradient(1.4px 1.4px at 28% 42%,#fff,transparent),radial-gradient(2px 2px at 47% 12%,#fff,transparent),
  radial-gradient(1.3px 1.3px at 66% 30%,#fff,transparent),radial-gradient(1.8px 1.8px at 83% 16%,#fff,transparent),radial-gradient(1.4px 1.4px at 91% 48%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 8% 62%,#fff,transparent),radial-gradient(1.2px 1.2px at 38% 76%,#fff,transparent),radial-gradient(1.8px 1.8px at 72% 66%,#fff,transparent),
  radial-gradient(60% 40% at 70% 30%,#7a4bd033,transparent),radial-gradient(50% 35% at 25% 75%,#3fa3d033,transparent);
  animation:titila 3s ease-in-out infinite alternate}
.opciones.fondos button{font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}
.opciones.fondos{flex-wrap:wrap}.opciones.fondos button{flex:1 1 30%}

/* 🧲 imán y botón de actualizar */
.accion em{font-size:10.5px}
.accion{padding:0}
.accion.activo{outline:3px solid #fff;animation:late-activo .8s ease-in-out infinite}
@keyframes late-activo{50%{transform:scale(1.06)}}
#lienzo.iman{cursor:crosshair;box-shadow:inset 0 0 0 3px #c9a3ffaa;border-radius:16px}
.redondo.actualizar{background:linear-gradient(#3fcf6b,#1f9b4a);position:relative;animation:late-actualiza 1.4s ease-in-out infinite}
.redondo.actualizar::after{content:"";position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#ffc93c;box-shadow:0 0 0 2px #1f9b4a}
.redondo.actualizar[hidden]{display:none}
@keyframes late-actualiza{50%{transform:scale(1.12)}}
.actualizar-menu{width:100%;margin-top:10px;height:52px;border-radius:999px;background:linear-gradient(#3b7bf0,#1f4fc4);box-shadow:0 3px 0 #0d2a75;color:#fff;font-weight:800;font-size:17px}
.actualizar-menu:disabled{opacity:.7}
.titulo span{min-width:0}
.titulo b{white-space:nowrap}
.barra:has(.redondo.actualizar:not([hidden])) .titulo b{font-size:18px}
.barra:has(.redondo.actualizar:not([hidden])) .titulo span{padding:5px 14px}