:root {
  --font: "Comic Sans MS", "Chalkboard SE", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --ink: #3b2a5a;
  --accent: #7b5cff;
  --ok: #2ecc71;
  --gold: #ffd23f;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #7b5cff;
}

body {
  font-family: var(--font);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

#app { position: fixed; inset: 0; overflow: hidden; }

button {
  font-family: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.emoji { font-family: var(--emoji); line-height: 1; }
.spacer { width: clamp(48px, 11vmin, 90px); flex: none; }
[hidden] { display: none !important; }

/* ---------- Fondo ---------- */

.bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--sky1), var(--sky2));
  overflow: hidden;
}
.bg::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -4%;
  height: 20%;
  background: var(--ground);
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}
.decor {
  position: absolute;
  opacity: .5;
  pointer-events: none;
  animation: drift 6s ease-in-out infinite alternate;
}

/* ---------- Pantalla base ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  padding:
    max(2vmin, env(safe-area-inset-top))
    max(2vmin, env(safe-area-inset-right))
    max(2vmin, env(safe-area-inset-bottom))
    max(2vmin, env(safe-area-inset-left));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vmin;
  flex: none;
}

.screen-title {
  margin: 0;
  font-size: clamp(18px, 5.2vmin, 46px);
  background: rgba(255, 255, 255, .88);
  padding: .8vmin 3.5vmin;
  border-radius: 99px;
  text-align: center;
  box-shadow: 0 .6vmin 0 rgba(0, 0, 0, .08);
}

.btn-round {
  --s: clamp(48px, 11vmin, 90px);
  width: var(--s);
  height: var(--s);
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .9vmin 0 rgba(0, 0, 0, .15);
  display: grid;
  place-items: center;
  font-size: calc(var(--s) * .5);
  position: relative;
}
.btn-round:active, .char-btn:active, .world-card:active, .level-node:active,
.option:active, .speak-btn:active, .play-btn:active, .btn-next:active {
  translate: 0 .6vmin;
}

/* touch-action y callout: que Android no convierta el toque largo en "clic derecho" */
.gear { opacity: .55; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.gear.holding { opacity: 1; }
.gear.holding::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--p), transparent 0);
  animation: hold 1.2s linear forwards;
  z-index: -1;
}
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes hold { to { --p: 100%; } }

/* ---------- Avatar y transporte ---------- */

/* ---------- Personaje de cuerpo entero (puppet.js) ---------- */

/* La caja mide .8em x 1.12em (proporción del lienzo 100x140), así escala con el font-size */
.avatar { position: relative; display: inline-block; width: .8em; height: 1.12em; line-height: 1; vertical-align: middle; }
.avatar > .pp { display: block; width: 100%; height: 100%; overflow: visible; }
.pp * { transform-box: view-box; }
.pp-all { transform-origin: 50px 125px; animation: pp-bob 2.2s ease-in-out infinite; }
.pp-eyes { animation: pp-blink 4.5s infinite; }
.pp-head { transform-origin: 50px 64px; animation: pp-tilt 4s ease-in-out infinite; }
.pp-arm-l { transform-origin: 37px 70px; animation: pp-sway-l 2.2s ease-in-out infinite; }
.pp-arm-r { transform-origin: 63px 70px; animation: pp-sway-r 2.2s ease-in-out infinite; }
.pp-hitem { transform-origin: 70px 90px; }
.pp-leg-r { transform-origin: 55px 98px; }
.pp-nitem { transform-origin: 50px 66px; }
.pp-hditem { transform-origin: 50px 20px; }
.pp-back { transform-origin: 50px 68px; }
.playable { cursor: pointer; }

/* Acciones al tocarlo */
.pp.use-raise .pp-arm-r, .pp.use-magic .pp-arm-r { animation: pp-raise 1.4s ease-in-out; }
.pp.use-raise .pp-hitem, .pp.use-magic .pp-hitem { animation: pp-unraise 1.4s ease-in-out; }
.pp.use-block .pp-arm-r { animation: pp-block 1.1s ease-in-out; }
.pp.use-block .pp-hitem { animation: pp-unblock 1.1s ease-in-out; }
.pp.use-wave .pp-arm-r { animation: pp-wave 1.4s ease-in-out; }
.pp.use-hop .pp-all, .pp.use-shine .pp-all { animation: pp-hop .9s ease-in-out; }
.pp.use-hop .pp-hditem { animation: pp-wobble .9s ease-in-out; }
.pp.use-wiggle .pp-nitem { animation: pp-wiggle .9s ease-in-out; }
.pp.use-spin { animation: pp-spin 1s ease-in-out; }
.pp.use-flutter .pp-back { animation: pp-flutter 1.2s ease-in-out; }
.pp.use-kick .pp-leg-r { animation: pp-kick 1.1s ease-in-out; }
.pp.use-kick .pp-ball { animation: pp-ball 1.1s ease-in-out; }
.pp.use-fire .pp-head { animation: pp-roar 1.1s ease-in-out; }

@keyframes pp-bob { 50% { transform: translateY(-2px); } }
@keyframes pp-blink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.1); } }
@keyframes pp-tilt { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes pp-sway-l { 50% { transform: rotate(6deg); } }
@keyframes pp-sway-r { 50% { transform: rotate(-6deg); } }
@keyframes pp-raise { 20%, 75% { transform: rotate(-155deg); } }
@keyframes pp-unraise { 20%, 75% { transform: rotate(155deg); } }
@keyframes pp-block { 25%, 70% { transform: rotate(-70deg); } }
@keyframes pp-unblock { 25%, 70% { transform: rotate(70deg); } }
@keyframes pp-wave {
  15%, 45%, 75% { transform: rotate(-150deg); }
  30%, 60% { transform: rotate(-115deg); }
}
@keyframes pp-hop {
  35% { transform: translateY(-16px); }
  65% { transform: translateY(0) scale(1.06, .9); }
  80% { transform: translateY(0) scale(.97, 1.03); }
}
@keyframes pp-wobble { 30% { transform: rotate(-18deg) translateY(-4px); } 60% { transform: rotate(14deg); } }
@keyframes pp-wiggle { 20%, 60% { transform: rotate(-22deg) scale(1.35); } 40%, 80% { transform: rotate(22deg) scale(1.35); } }
@keyframes pp-spin { to { transform: rotateY(360deg); } }
@keyframes pp-flutter { 20%, 60% { transform: skewX(-14deg); } 40%, 80% { transform: skewX(12deg); } }
@keyframes pp-kick { 30% { transform: rotate(-55deg); } 60% { transform: rotate(10deg); } }
@keyframes pp-ball { 30% { transform: translate(0, 0); } 60% { transform: translate(16px, -46px); } 85% { transform: translate(4px, -6px); } }
@keyframes pp-roar { 20%, 80% { transform: rotate(-10deg) scale(1.06); } }

.pp-fx { position: fixed; z-index: 100; pointer-events: none; font-family: var(--emoji); line-height: 1; }

/* Prenda sola en la tarjeta de la tienda */
.card-art { display: grid; place-items: center; line-height: 1; }
.card-svg svg { width: 1em; height: .7em; display: block; }
.card-svg.tall svg { width: .5em; height: 1em; }
.card-svg.round svg { width: .9em; height: .9em; }
.card-trophy { width: 1em; aspect-ratio: 100 / 130; display: block; }
.card-art.locked .card-trophy { filter: brightness(0) opacity(.3); }
.card-svg.band svg { width: .95em; height: .57em; }
.shirt {
  display: block;
  width: 1em;
  height: .82em;
  clip-path: polygon(30% 0, 12% 8%, 0 34%, 16% 44%, 22% 36%, 22% 100%, 78% 100%, 78% 36%, 84% 44%, 100% 34%, 88% 8%, 70% 0, 50% 12%);
}
.card-art:has(.shirt) { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)); }

/* Moneda dibujada */
.coin {
  --s: 1em;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7c2, #ffd23f 35%, #f2a900 70%, #c98100);
  box-shadow:
    inset 0 0 0 calc(var(--s) * .07) #e39b00,
    inset 0 0 0 calc(var(--s) * .11) #ffe58a,
    0 calc(var(--s) * .05) 0 #a86a00;
}
.coin::before {
  content: '★';
  font-family: system-ui, sans-serif;
  font-size: calc(var(--s) * .55);
  line-height: 1;
  color: #e39b00;
  text-shadow: 0 calc(var(--s) * .02) 0 rgba(255, 255, 255, .7);
}
.coin-counter {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  padding: .15em .45em .15em .2em;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 .9vmin 0 rgba(0, 0, 0, .15);
  font-size: clamp(20px, 5vmin, 40px);
  font-weight: 900;
  color: #b07800;
  font-variant-numeric: tabular-nums;
}
.coin-counter.bump { animation: pop .5s; }
.top-right { display: flex; align-items: center; gap: 2vmin; }
.shop-btn {
  display: inline-flex;
  align-items: center;
  gap: 1vmin;
  font-size: clamp(26px, 6vmin, 52px);
}
.shop-btn > .emoji { filter: drop-shadow(0 .6vmin 0 rgba(0, 0, 0, .15)); }
.shop-btn .coin-counter { font-size: clamp(16px, 4vmin, 32px); }
.shop-btn:active { translate: 0 .6vmin; }

/* Premio: moneda gigante */
.party.coin-time .party-hero, .party.coin-time .party-title, .party.coin-time .party-prize,
.party.coin-time .mt-final, .party.coin-time .pen-final, .party.coin-time .pl-final, .party.coin-time .perfect-badge { opacity: .2; transition: opacity .4s; }
.party-coins { position: absolute; top: max(2vmin, env(safe-area-inset-top)); right: max(2vmin, env(safe-area-inset-right)); z-index: 7; }
.coin-stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vmin;
  pointer-events: none;
}
/* Fila de 5 lugares: lo que cuesta una prenda */
.coin-goal {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2vmin;
  padding: 1.5vmin 3vmin;
  border-radius: 99px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .12);
  font-size: clamp(28px, 8vmin, 64px);
}
.coin.slot { filter: grayscale(1); opacity: .3; }
.coin.slot.on { filter: none; opacity: 1; animation: pop .5s; }
.goal-bag { font-size: 1.15em; margin-left: 1vmin; }
.coin-stage.full .coin-goal { animation: pulse .7s ease-in-out infinite; box-shadow: 0 0 0 1vmin #ffd23f, 0 1vmin 0 rgba(0, 0, 0, .12); }
.btn-shop.mini { width: clamp(64px, 15vmin, 130px); font-size: clamp(30px, 8vmin, 64px); box-shadow: 0 1.1vmin 0 #b07800; }
.coin-glow {
  position: absolute;
  width: 90vmin;
  height: 90vmin;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 226, 90, .85), rgba(255, 226, 90, 0) 60%),
    repeating-conic-gradient(rgba(255, 210, 63, .5) 0 8deg, transparent 8deg 16deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  animation: spin 8s linear infinite;
}
.big-coin {
  --s: clamp(120px, 38vmin, 340px);
  position: relative;
  overflow: hidden;
  animation: coinin .9s cubic-bezier(.3, 1.6, .5, 1) both, coinspin 2.4s ease-in-out .9s infinite;
}
.big-coin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .85) 48%, transparent 60%);
  translate: -120% 0;
  animation: shine 1.8s ease-in-out .6s infinite;
}
.btn-shop {
  width: clamp(110px, 27vmin, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a8, #ffd23f 45%, #f2a900);
  box-shadow: 0 1.6vmin 0 #b07800;
  display: grid;
  place-items: center;
  font-size: clamp(50px, 13vmin, 110px);
  animation: pulse 1.2s ease-in-out infinite;
}
.btn-shop:active { translate: 0 .6vmin; }

/* Tienda */
.shop-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vmin;
}
@media (orientation: portrait) {
  .shop-body { flex-direction: column; }
}
.shop-hero {
  display: grid;
  place-items: center;
  width: clamp(150px, 42vmin, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 55%, rgba(255, 255, 255, .5));
  box-shadow: 0 1.4vmin 0 rgba(0, 0, 0, .12);
  font-size: clamp(100px, 30vmin, 250px);
  flex: none;
}
/* Margen extra abajo: en tablets con bordes redondeados o barra de gestos, la última fila no queda tapada */
.screen.shop { padding-bottom: max(5vmin, calc(env(safe-area-inset-bottom) + 2vmin)); }
.shop-hero-col { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2vmin; }
.shop-tools { display: flex; gap: 3vmin; }
.shop-tool { --s: clamp(40px, 9vmin, 68px); }
.jersey-form input { width: 100%; padding: 10px 12px; border: 2px solid #d8d2e6; border-radius: 10px; font-size: 20px; font-family: system-ui, sans-serif; text-transform: uppercase; }
.shop-side {
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5vmin;
}
.shop-side .shop-grid { min-height: 0; overflow-y: auto; padding: 1.5vmin 1.5vmin 2.5vmin; }
.shop-tabs { flex: none; display: flex; gap: 1.6vmin; }
.shop-tab {
  width: clamp(44px, 11vmin, 92px);
  aspect-ratio: 1.25;
  border-radius: 3vmin;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .12);
  font-size: clamp(26px, 6.5vmin, 54px);
  display: grid;
  place-items: center;
  transition: background .2s, scale .2s;
}
.shop-tab.on { background: #fff; scale: 1.12; box-shadow: 0 0 0 .8vmin var(--gold), 0 .8vmin 0 rgba(0, 0, 0, .12); }
.shop-tab:active { translate: 0 .5vmin; }
.shop-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 3vmin; }
.shop-grid.many { grid-template-columns: repeat(3, auto); gap: 2.2vmin; }
.shop-grid.many .shop-item { width: clamp(76px, 18vmin, 150px); }
.shop-grid.lots { grid-template-columns: repeat(4, auto); gap: 1.8vmin; }
.shop-grid.lots .shop-item { width: clamp(62px, 14.5vmin, 124px); }
.shop-item {
  position: relative;
  width: clamp(88px, 21vmin, 170px);
  aspect-ratio: 1;
  border-radius: 4vmin;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  container-type: size;
  display: grid;
  place-items: center;
}
.shop-item.worn { box-shadow: 0 0 0 1.1vmin var(--ok), 0 1vmin 0 rgba(0, 0, 0, .15); }
.shop-item.nope { animation: shake .45s; }
.shop-item:active { translate: 0 .6vmin; }
.shop-art { font-size: 56cqmin; line-height: 1; }
.shop-price, .shop-tag {
  position: absolute;
  right: -2cqmin;
  bottom: -2cqmin;
  display: inline-flex;
  align-items: center;
  gap: 2cqmin;
  padding: 2cqmin 5cqmin 2cqmin 2cqmin;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 1cqmin 2cqmin rgba(0, 0, 0, .2);
  font-size: 16cqmin;
  font-weight: 900;
  color: #b07800;
}
.shop-tag { padding: 2cqmin; width: 22cqmin; height: 22cqmin; justify-content: center; color: #fff; background: #d8d2e6; }
.shop-tag.on { background: var(--ok); }
.shop-price.locked { padding: 2cqmin 4cqmin; font-size: 13cqmin; background: #ece8f5; }
.shop-price.free { padding: 2cqmin 4cqmin; font-size: 12cqmin; color: #fff; background: var(--ok); }
.flip { display: inline-block; transform: scaleX(-1); }

.ride {
  position: relative;
  width: var(--ride, 14vmin);
  height: var(--ride, 14vmin);
}
.ride-vehicle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  font-size: calc(var(--ride, 14vmin) * .8);
  z-index: 2;
}
.ride-rider {
  position: absolute;
  bottom: var(--rb);
  left: var(--rl);
  font-size: calc(var(--ride, 14vmin) * var(--rs));
  z-index: var(--rz);
}
.anim-float { animation: float 2.4s ease-in-out infinite; }
.anim-bounce { animation: bounce .9s ease-in-out infinite; }
.anim-sway { animation: sway 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
.moving .ride { animation-duration: .35s; }

/* ---------- Título ---------- */

.title { align-items: center; justify-content: space-between; }
.title .topbar { align-self: stretch; }
.logo {
  margin: 0;
  font-size: clamp(48px, 15vmin, 150px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.logo-l {
  display: inline-block;
  -webkit-text-stroke: .8vmin #fff;
  paint-order: stroke fill;
  text-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  animation: bob 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .1s);
}
.logo-space { display: inline-block; width: .35em; }
.parade { display: flex; gap: 4vmin; font-size: clamp(56px, 16vmin, 150px); }
.parade-item { animation: bob 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .2s); }
.play-btn {
  width: clamp(100px, 26vmin, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #35c46a;
  box-shadow: 0 1.4vmin 0 #22994e;
  display: grid;
  place-items: center;
  margin-bottom: 4vmin;
  animation: pulse 1.4s ease-in-out infinite;
}
.play-tri {
  width: 0;
  height: 0;
  border-left: 8vmin solid #fff;
  border-top: 5vmin solid transparent;
  border-bottom: 5vmin solid transparent;
  margin-left: 2.2vmin;
}

/* ---------- Personajes ---------- */

.char-grid {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 3vmin;
  padding: 2vmin;
}
.char-grid.locked { pointer-events: none; }
.char-btn {
  width: clamp(80px, 19vmin, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  font-size: clamp(56px, 14.5vmin, 124px);
  display: grid;
  place-items: center;
  transition: transform .2s;
}
.char-btn.selected {
  background: #fff6cf;
  box-shadow: 0 0 0 1.2vmin var(--gold), 0 1vmin 0 rgba(0, 0, 0, .15);
  transform: scale(1.12);
  animation: dance .6s ease-in-out infinite;
}
.char-mini { font-size: calc(var(--s) * .78); }

/* ---------- Mundos ---------- */

.worlds-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3vmin;
  justify-content: center;
  align-content: center;
}
@media (orientation: landscape) {
  .worlds-grid { grid-template-columns: repeat(3, auto); }
}
.world-card {
  width: clamp(96px, min(27vmin, 36vh), 230px);
  aspect-ratio: 1;
  border-radius: 5vmin;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: 0 1.2vmin 0 rgba(0, 0, 0, .18);
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqmin;
  color: #fff;
}
.wc-icon { font-size: 42cqmin; }
.wc-name { font-size: 13cqmin; font-weight: 900; text-shadow: 0 .8cqmin 0 rgba(0, 0, 0, .25); }
.wc-stars { font-size: 11cqmin; letter-spacing: .5cqmin; }
.star { color: rgba(255, 255, 255, .4); }
.star.on { color: #ffe14d; text-shadow: 0 0 2cqmin rgba(0, 0, 0, .25); }

/* ---------- Niveles ---------- */

.level-path {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10vmin 1vmin 4vmin;
}
.level-node {
  position: relative;
  top: var(--dy);
  width: clamp(60px, 15vmin, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .18);
  font-size: clamp(26px, 7vmin, 60px);
  font-weight: 900;
  color: var(--accent);
  display: grid;
  place-items: center;
}
.level-node.done { background: #ffe27a; color: #b07800; }
.level-node.locked { background: #ebe6f5; color: #9a93b0; }
.level-node.locked .ln-num { font-size: .7em; }
.level-node.next { animation: pulse 1.2s ease-in-out infinite; box-shadow: 0 0 0 1vmin #fff8, 0 1vmin 0 rgba(0, 0, 0, .18); }
.level-node.nope { animation: shake .5s; }
.ln-star { position: absolute; top: -2.5vmin; right: -2.5vmin; font-size: 6vmin; }
.ln-rider {
  position: absolute;
  bottom: 92%;
  left: 50%;
  translate: -50% 0;
  --ride: clamp(48px, 13vmin, 110px);
  pointer-events: none;
}

/* ---------- Juego ---------- */

.game { gap: 1.5vmin; }
.game-top {
  display: flex;
  align-items: center;
  gap: 2vmin;
  height: clamp(80px, 21vmin, 180px);
  flex: none;
}
.track { position: relative; flex: 1; height: 100%; }
.road {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 14%;
  height: 2.6vmin;
  background: repeating-linear-gradient(90deg, #fff 0 3vmin, rgba(255, 255, 255, .5) 3vmin 5vmin);
  border-radius: 99px;
  box-shadow: 0 .5vmin 0 rgba(0, 0, 0, .1);
}
.node {
  position: absolute;
  bottom: 14%;
  translate: -50% 30%;
  width: 4.6vmin;
  height: 4.6vmin;
  border-radius: 50%;
  background: #fff;
  border: .8vmin solid rgba(0, 0, 0, .12);
  transition: background .3s, transform .3s;
}
.node.start { opacity: 0; }
.node.done:not(.goal) { background: var(--gold); border-color: #e0a800; transform: scale(1.25); }
.node.goal {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  font-size: clamp(30px, 9vmin, 80px);
  translate: -50% 10%;
}
.node.goal.done { animation: dance .6s ease-in-out infinite; }
.ride-pos {
  position: absolute;
  bottom: calc(14% + 1vmin);
  translate: -50% 0;
  --ride: clamp(64px, 18vmin, 150px);
  transition: left 1.2s ease-in-out;
  z-index: 2;
}

.ask { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; }
.ask-row { display: flex; align-items: center; gap: 3vmin; }
.speak-btn {
  width: clamp(54px, 12vmin, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1vmin 0 #d9a400;
  font-size: clamp(28px, 6vmin, 54px);
  display: grid;
  place-items: center;
}
.prompt {
  width: clamp(76px, 18vmin, 160px);
  aspect-ratio: 1;
  background: #fff;
  border-radius: 3vmin;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.qtext {
  margin: 0;
  font-size: clamp(16px, 4vmin, 36px);
  font-weight: bold;
  background: rgba(255, 255, 255, .9);
  padding: .6vmin 3.5vmin;
  border-radius: 99px;
  text-align: center;
}

.options {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 2.5vmin;
}
@media (orientation: landscape) {
  .options { grid-template-columns: repeat(4, 1fr); }
}
.options.locked { pointer-events: none; }
.option {
  position: relative;
  background: #fff;
  border-radius: 4vmin;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: popin .35s both;
  animation-delay: calc(var(--k) * 70ms);
  transition: opacity .3s, filter .3s;
}
.option.wrong { filter: grayscale(1); opacity: .35; animation: shake .45s; pointer-events: none; }
.option.right { box-shadow: 0 0 0 1.2vmin var(--ok), 0 1vmin 0 rgba(0, 0, 0, .15); animation: pop .5s; }
.option.hint { box-shadow: 0 0 0 1.2vmin var(--gold), 0 1vmin 0 rgba(0, 0, 0, .15); animation: pulse .7s ease-in-out infinite; }

/* Tablero de unir puntos */
.board {
  position: relative;
  flex: 1;
  min-height: 0;
  background: rgba(255, 255, 255, .8);
  border-radius: 4vmin;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .12);
  touch-action: none;
  overflow: hidden;
}
.board-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail {
  fill: none;
  stroke-width: clamp(14px, 4vmin, 34px);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.trail.miss { opacity: 0; transition: opacity .4s; }
.dot {
  position: absolute;
  z-index: 2;
  --d: clamp(54px, 14vmin, 120px);
  width: var(--d);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1vmin #fff, 0 1.2vmin 0 1vmin rgba(0, 0, 0, .12), inset -1.2vmin -1.5vmin 0 rgba(0, 0, 0, .16);
  pointer-events: none;
  animation: pulse 1.6s ease-in-out infinite;
  transition: scale .2s;
}
.dot.grab { scale: 1.25; animation: none; }
.dot.done { animation: pop .5s; }
.dot.done::after {
  content: '⭐';
  font-family: var(--emoji);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--d) * .5);
  line-height: 1;
}
.hand {
  position: absolute;
  z-index: 3;
  font-size: clamp(44px, 12vmin, 100px);
  margin: -.1em 0 0 -.35em;
  pointer-events: none;
}

/* Contenido de opciones y cartel (escala con la tarjeta) */
.vis { display: grid; place-items: center; line-height: 1; }
.vis-emoji { font-size: 62cqmin; }
.vis-color {
  width: 66cqmin;
  height: 66cqmin;
  border-radius: 50%;
  box-shadow: inset -3cqmin -4cqmin 0 rgba(0, 0, 0, .18), inset 3cqmin 3cqmin 0 rgba(255, 255, 255, .35);
}
.vis-color.light { box-shadow: 0 0 0 1.2cqmin #ddd, inset -3cqmin -4cqmin 0 rgba(0, 0, 0, .08); }
.vis-text { font-size: 66cqmin; font-weight: 900; text-shadow: 0 1.5cqmin 0 rgba(0, 0, 0, .12); }
.vis-group { gap: 2cqmin 3cqmin; }
.vis-shape { width: 72cqmin; height: 72cqmin; }
.vis-shape svg { width: 100%; height: 100%; display: block; overflow: visible; }

.burst {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 14cqmin;
  pointer-events: none;
  animation: fly .8s ease-out forwards;
}

/* ---------- Festejo ---------- */

.party {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .92), rgba(255, 244, 214, .82) 70%);
  animation: fadein .3s;
}
.party-rays {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(rgba(255, 236, 140, .55) 0 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 12%, transparent 45%);
  mask-image: radial-gradient(circle, #000 0 12%, transparent 45%);
  animation: spin 14s linear infinite;
  pointer-events: none;
}
.party-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.spark {
  position: absolute;
  width: 1.8vmin;
  height: 1.8vmin;
  margin: -.9vmin 0 0 -.9vmin;
  border-radius: 50%;
  box-shadow: 0 0 1.2vmin currentColor;
}
.balloon {
  position: absolute;
  bottom: -20vmin;
  z-index: 1;
  font-size: clamp(40px, 10vmin, 90px);
  animation: rise 4.5s ease-in both;
  pointer-events: none;
}
.party-title {
  position: relative;
  z-index: 3;
  margin: 0;
  font-size: clamp(34px, 10vmin, 96px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.party-title span {
  display: inline-block;
  -webkit-text-stroke: .7vmin #fff;
  paint-order: stroke fill;
  text-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  animation: letterpop .5s both, bob 1.4s ease-in-out infinite;
  animation-delay: calc(1s + var(--i) * .06s), calc(1.8s + var(--i) * .1s);
}
.party-hero { position: relative; z-index: 4; --ride: clamp(110px, 34vmin, 300px); }
.party.settled .party-hero { animation: dance .9s ease-in-out infinite; }
.party-prize { position: relative; z-index: 3; font-size: clamp(36px, 9vmin, 80px); animation: popin .5s 1.4s both; }
.party-actions {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 3vmin;
  align-items: center;
  opacity: 0;
  translate: 0 4vmin;
  pointer-events: none;
  transition: opacity .4s, translate .4s;
}
.party.settled .party-actions { opacity: 1; translate: 0 0; pointer-events: auto; }
/* El ▶ es la acción principal: grande y al centro; mapa y repetir chicos y alejados */
.party-actions { gap: 7vmin; }
.party-actions .btn-round { --s: clamp(40px, 8vmin, 64px); opacity: .85; }
.party-actions .btn-next { width: clamp(110px, 27vmin, 230px); box-shadow: 0 1.6vmin 0 #22994e; }
.party-actions .btn-next .play-tri { border-left-width: 9vmin; border-top-width: 5.6vmin; border-bottom-width: 5.6vmin; margin-left: 2.4vmin; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -5%;
  width: 1.6vmin;
  height: 2.6vmin;
  border-radius: 2px;
  animation: fall linear infinite;
}
.btn-next {
  width: clamp(70px, 17vmin, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #35c46a;
  box-shadow: 0 1.2vmin 0 #22994e;
  display: grid;
  place-items: center;
  animation: pulse 1.2s ease-in-out infinite;
}
.btn-next .play-tri { border-left-width: 5.5vmin; border-top-width: 3.5vmin; border-bottom-width: 3.5vmin; margin-left: 1.5vmin; }

/* ---------- Panel para adultos ---------- */

.modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(20, 10, 40, .55);
  display: grid;
  place-items: center;
  padding: 16px;
}
.panel {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  width: min(480px, 100%);
  max-height: 100%;
  overflow: auto;
  font-family: system-ui, sans-serif;
  font-size: 16px;
}
.panel h3 { margin: 0 0 8px; }
.panel label { display: block; margin: 14px 0 6px; font-weight: 600; }
.panel label.check { display: flex; align-items: center; gap: 8px; }
.panel select, .panel input[type=range] { width: 100%; font-size: 15px; }
.panel .note { font-size: 13px; color: #666; margin: 6px 0 0; }
.panel .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.panel button { padding: 10px 14px; border-radius: 10px; background: #efeaff; font-weight: 600; font-family: system-ui, sans-serif; }
.panel button.danger { background: #ffe1e1; color: #b00020; }
.panel button.primary { background: var(--accent); color: #fff; margin-left: auto; }

/* ---------- Bingo familiar ---------- */

.bingo-btn { font-size: calc(var(--s) * .55); }

.bingo-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
  overflow: auto;
}
.bingo-label { font-size: clamp(15px, 3.4vmin, 24px); font-weight: bold; }
.bingo-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vmin;
  font-size: clamp(70px, 18vmin, 150px);
}
.bingo-input {
  width: clamp(180px, 40vmin, 320px);
  padding: .5em .8em;
  border: .6vmin solid #fff;
  border-radius: 99px;
  background: rgba(255, 255, 255, .9);
  font: bold clamp(16px, 3.6vmin, 26px) var(--font);
  color: var(--ink);
  text-align: center;
  outline: none;
}
.bingo-input:focus { border-color: var(--accent); }
.bingo-input.code { width: clamp(140px, 26vmin, 220px); text-transform: uppercase; letter-spacing: .3em; }
.bingo-choices { display: flex; flex-direction: column; align-items: center; gap: 2.5vmin; }
.bingo-or { font-weight: bold; opacity: .6; }
.bingo-join { display: flex; flex-wrap: wrap; gap: 2vmin; justify-content: center; align-items: center; }
.bingo-big {
  padding: .5em 1.1em;
  border-radius: 99px;
  font: bold clamp(18px, 4.6vmin, 34px) var(--font);
  color: #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .2);
}
.bingo-big.create { background: #35c46a; }
.bingo-big.join { background: #2f9bff; }
.bingo-big:active, .bingo-small:active, .bingo-draw:active { translate: 0 .6vmin; }
.bingo-status { flex-basis: 100%; margin: 0; text-align: center; font-weight: bold; min-height: 1.4em; font-size: clamp(14px, 3.2vmin, 22px); }
.bingo-status.error { color: #c62828; }
.bingo-small {
  padding: .45em .9em;
  border-radius: 99px;
  background: #fff;
  font: bold clamp(14px, 3vmin, 20px) var(--font);
  color: var(--ink);
  box-shadow: 0 .7vmin 0 rgba(0, 0, 0, .12);
  word-break: break-all;
}
.bingo-small.auto.on { background: var(--gold); }

.bingo-code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vmin;
  padding: 2.5vmin 4vmin;
  border-radius: 4vmin;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .1);
}
.bingo-code { display: flex; gap: 1.5vmin; }
.bingo-code span {
  display: grid;
  place-items: center;
  width: clamp(44px, 11vmin, 90px);
  aspect-ratio: 1;
  border-radius: 2vmin;
  background: var(--accent);
  color: #fff;
  font-size: clamp(28px, 7vmin, 60px);
  font-weight: 900;
}
.bingo-share { display: flex; flex-wrap: wrap; gap: 1.5vmin; justify-content: center; max-width: 60vmin; }
.bingo-wait { flex-basis: 100%; margin: 0; text-align: center; font-weight: bold; font-size: clamp(16px, 4vmin, 30px); }
.bingo-start { flex: none; }

.bingo-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 3vmin; }
.bingo-players.small { gap: 1.5vmin; flex-wrap: nowrap; overflow: hidden; }
.bingo-player { display: flex; flex-direction: column; align-items: center; gap: .5vmin; font-size: clamp(44px, 12vmin, 110px); }
.bingo-players.small .bingo-player { font-size: clamp(30px, 7vmin, 60px); }
.bingo-player-name {
  font-size: clamp(12px, 2.8vmin, 20px);
  font-weight: bold;
  background: rgba(255, 255, 255, .85);
  padding: .1em .6em;
  border-radius: 99px;
  white-space: nowrap;
}
.bingo-player.me .bingo-player-name { background: var(--gold); }

.bingo-main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vmin;
}
@media (orientation: portrait) {
  .bingo-main { flex-direction: column; }
}
.bingo-side { display: flex; flex-direction: column; align-items: center; gap: 2vmin; }
@media (orientation: portrait) {
  .bingo-side { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
.bingo-ball {
  --ball: #7b5cff;
  display: grid;
  place-items: center;
  width: clamp(80px, 22vmin, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--ball) 19% 100%);
  box-shadow: inset -1.5vmin -2vmin 0 rgba(0, 0, 0, .18), 0 1.2vmin 0 rgba(0, 0, 0, .15);
}
.bingo-ball-n {
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: clamp(30px, 9vmin, 80px);
  font-weight: 900;
}
.bingo-ball.roll { animation: ballin .7s cubic-bezier(.3, 1.5, .5, 1); }
.bingo-controls { display: flex; flex-direction: column; align-items: center; gap: 1.5vmin; }
.bingo-draw {
  padding: .4em 1em;
  border-radius: 99px;
  background: #35c46a;
  color: #fff;
  font: bold clamp(18px, 4.6vmin, 36px) var(--font);
  box-shadow: 0 1vmin 0 #22994e;
}
.bingo-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .6vmin;
  padding: 1vmin;
  border-radius: 2vmin;
  background: rgba(255, 255, 255, .7);
}
.bingo-board-n {
  display: grid;
  place-items: center;
  width: clamp(18px, 4.2vmin, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(9px, 2vmin, 15px);
  font-weight: bold;
  color: #b3a9c9;
}
.bingo-board-n.on { background: var(--accent); color: #fff; }

.bingo-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6vmin;
  padding: 2vmin;
  border-radius: 4vmin;
  background: #fff;
  box-shadow: 0 1.4vmin 0 rgba(0, 0, 0, .14);
}
.bingo-cell {
  position: relative;
  width: clamp(54px, 15vmin, 120px);
  aspect-ratio: 1;
  border-radius: 2.5vmin;
  background: #f3efff;
  box-shadow: inset 0 -.8vmin 0 rgba(0, 0, 0, .08);
  display: grid;
  place-items: center;
}
.bingo-cell-n { font-size: clamp(24px, 7.5vmin, 62px); font-weight: 900; color: var(--ink); }
.bingo-cell.marked { background: #fff3c4; }
.bingo-cell.marked::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1.2vmin solid rgba(233, 30, 99, .75);
  animation: stamp .35s ease-out;
}
.bingo-cell.hint { animation: pulse .7s ease-in-out infinite; box-shadow: 0 0 0 1vmin var(--gold); }
.bingo-cell.nope { animation: shake .45s; }
.bingo-cell:active { translate: 0 .5vmin; }

.bingo-banner {
  position: absolute;
  top: 16%;
  left: 50%;
  translate: -50% 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 2vmin;
  padding: 1.5vmin 4vmin;
  border-radius: 99px;
  background: var(--gold);
  box-shadow: 0 1vmin 0 #d9a400;
  font-size: clamp(22px, 6vmin, 50px);
  font-weight: 900;
  white-space: nowrap;
  animation: popin .4s both;
}
.bingo-banner-art { font-size: 1.3em; }
.bingo-winner-art { position: relative; z-index: 4; font-size: clamp(90px, 26vmin, 220px); }
.bingo-winner-name { position: relative; z-index: 3; margin: 0; font-size: clamp(22px, 6vmin, 50px); font-weight: 900; }
/* Dibujos del bingo (emojis y personajes quietos, para no distraer) */
.bingo-pic { display: grid; place-items: center; line-height: 1; }
.bingo-pic .pp, .bingo-pic .pp * { animation: none !important; }
.bingo-cell .bingo-pic.emoji { font-size: clamp(30px, 9vmin, 74px); }
.bingo-cell .bingo-pic.char { font-size: clamp(34px, 10vmin, 84px); }
.bingo-ball-n .bingo-pic.emoji { font-size: clamp(34px, 10vmin, 86px); }
.bingo-ball-n .bingo-pic.char { font-size: clamp(38px, 11vmin, 96px); }
.bingo-board { grid-template-columns: repeat(6, 1fr); }
.bingo-board-n { width: clamp(22px, 5.2vmin, 42px); opacity: .28; filter: grayscale(1); }
.bingo-board-n.on { opacity: 1; filter: none; background: #fff; box-shadow: 0 0 0 .4vmin var(--accent); }
.bingo-board-n .bingo-pic.emoji { font-size: clamp(14px, 3.4vmin, 28px); }
.bingo-board-n .bingo-pic.char { font-size: clamp(15px, 3.8vmin, 30px); }

/* Cuenta regresiva del modo automático */
.bingo-ball-wrap { position: relative; }
.bingo-count {
  position: absolute;
  top: -1vmin;
  right: -3vmin;
  display: grid;
  place-items: center;
  width: clamp(40px, 10vmin, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 .8vmin 0 #d9a400;
  font-size: clamp(24px, 6.5vmin, 54px);
  font-weight: 900;
  color: var(--ink);
}
.bingo-count.tick { animation: pop .45s; }

.bingo-game.no-host .bingo-side::before {
  content: 'Se desconectó el que creó la partida…';
  font-weight: bold;
  background: #ffe1e1;
  padding: .3em .8em;
  border-radius: 99px;
}

/* ---------- Juegos del mapa (penales, bingo) ---------- */

.games-row { flex: none; display: flex; justify-content: center; gap: 3vmin; }
.game-pill {
  padding: .35em 1.1em;
  border-radius: 99px;
  font: bold clamp(17px, 4.4vmin, 34px) var(--font);
  color: #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .2);
}
.game-pill.penales { background: linear-gradient(160deg, #43a047, #1b5e20); }
.game-pill.bingo { background: linear-gradient(160deg, #ff7e5f, #d63384); }
.game-pill:active { translate: 0 .6vmin; }

/* ---------- Penales ---------- */

.penales { gap: 1.5vmin; }
.pen-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.5vmin; }
.pen-scene {
  position: relative;
  flex: 1.15;
  min-height: 0;
  container-type: size;
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  background: #4caf50;
}
.pen-field { display: block; width: 100%; height: 100%; }
.pen-field * { transform-box: view-box; }
.sport-quiz { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.5vmin; }
@media (orientation: landscape) {
  .pen-body { flex-direction: row; }
  .pen-scene { flex: 1.1; }
  .sport-quiz { flex: 1; }
  .penales .options { grid-template-columns: 1fr 1fr; }
}

.pen-keeper { transform-origin: 150px 110px; animation: pen-keeper 1.5s ease-in-out infinite alternate; }
.pen-keeper-dive { transform-origin: 150px 110px; }
.pen-ball { transform-origin: 150px 172px; }
.pen-net { transform-origin: 150px 75px; }
.pen-net.shake { animation: pen-net .7s ease-out; }
.pen-field.celebrate .pen-fan { animation: pen-jump .35s ease-in-out infinite alternate; }
.pen-fan:nth-child(3n) { animation-delay: .12s !important; }
.pen-fan:nth-child(3n+1) { animation-delay: .24s !important; }

.sport-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end; /* abajo, para que se vea la pelota en el arco */
  justify-content: center;
  padding-bottom: 6cqmin;
  pointer-events: none;
  font-size: clamp(36px, 22cqmin, 120px);
  font-weight: 900;
  -webkit-text-stroke: .08em #fff;
  paint-order: stroke fill;
}
.sport-flash.goal { color: #ff5a8a; }
.sport-flash.saved { color: #ff9800; }
.sport-flash span { display: inline-block; animation: letterpop .45s both; animation-delay: calc(var(--i) * .05s); }

.pen-score { display: flex; gap: 2vmin; }
.pen-slot {
  display: grid;
  place-items: center;
  width: clamp(38px, 9vmin, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  border: .6vmin dashed rgba(0, 0, 0, .2);
  font-size: clamp(22px, 5.5vmin, 44px);
}
.pen-slot.now { border-style: solid; border-color: var(--gold); animation: pulse 1s ease-in-out infinite; }
.pen-slot.goal { background: #c8f7c5; border: .6vmin solid #2ecc71; }
.pen-slot.goal::before { content: '⚽'; font-family: var(--emoji); }
.pen-slot.saved { background: #ffe0cc; border: .6vmin solid #ff9800; }
.pen-slot.saved::before { content: '🧤'; font-family: var(--emoji); }
.pen-final { position: relative; z-index: 3; display: flex; gap: 2vmin; }
.sport-hero { font-size: clamp(90px, 26vmin, 220px); }
.party.sport-lost { background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .92), rgba(214, 234, 255, .85) 70%); }
.sport-coins {
  position: absolute;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  z-index: 8;
  display: flex;
  gap: 3vmin;
  pointer-events: none;
}
.sport-coins .big-coin:nth-child(2) { animation-delay: .25s, 1.15s; }
.sport-coins:has(> :nth-child(2)) .big-coin { --s: clamp(100px, 30vmin, 260px); }
.perfect-badge {
  position: relative;
  z-index: 3;
  padding: .2em .8em;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff5a8a, #ffd23f, #43a047, #1e88e5, #9c27b0);
  color: #fff;
  font-size: clamp(18px, 5vmin, 40px);
  font-weight: 900;
  -webkit-text-stroke: .12em rgba(0, 0, 0, .25);
  paint-order: stroke fill;
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .15);
  animation: popin .5s 1s both, pulse 1s ease-in-out 1.5s infinite;
}

/* Al ganar: el mapa de trofeos encima de la fiesta */
.tm-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5vmin;
  padding: max(2vmin, env(safe-area-inset-top)) 3vmin 3vmin;
  pointer-events: none;
}
.tm-overlay .tp-label { align-self: center; }
.tm-overlay .tm-board { flex: 1; animation: popin .4s both; }
.party.map-time .party-actions, .party.map-time .party-coins { opacity: 0; }
.tm-step.just { animation: pop .5s .4s; box-shadow: 0 0 0 .6vmin #ffd23f, 0 0 2vmin #ffd23f; }
.tm-stop.just { animation: pop .6s .4s; box-shadow: 0 0 0 .8vmin #ffd23f, 0 0 4vmin #ffd23f; }
.tp-label {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(22px, 6vmin, 50px);
  font-weight: 900;
  color: var(--ink);
  -webkit-text-stroke: .5vmin #fff;
  paint-order: stroke fill;
  animation: popin .4s both;
}
/* Escenarios */
.tp-cancha {
  background:
    linear-gradient(90deg, transparent calc(50% - .4vmin), rgba(255, 255, 255, .85) calc(50% - .4vmin) calc(50% + .4vmin), transparent 0),
    radial-gradient(circle, transparent 9vmin, rgba(255, 255, 255, .85) 9vmin 9.8vmin, transparent 0),
    repeating-linear-gradient(90deg, #43a047 0 7vmin, #4caf50 7vmin 14vmin);
}
.tp-lab {
  border-color: #90a4ae;
  background:
    repeating-linear-gradient(0deg, rgba(0, 229, 255, .18) 0 1px, transparent 1px 4vmin),
    repeating-linear-gradient(90deg, rgba(0, 229, 255, .18) 0 1px, transparent 1px 4vmin),
    linear-gradient(#455a64, #263238);
}
.tp-magia {
  border-color: #ce93d8;
  background:
    radial-gradient(circle at 12% 25%, #fff 0 .35vmin, transparent .6vmin),
    radial-gradient(circle at 40% 12%, #fff 0 .3vmin, transparent .5vmin),
    radial-gradient(circle at 70% 30%, #fff 0 .35vmin, transparent .6vmin),
    radial-gradient(circle at 88% 15%, #fff 0 .3vmin, transparent .5vmin),
    radial-gradient(circle at 55% 45%, #fff 0 .25vmin, transparent .45vmin),
    linear-gradient(#311b92, #7b1fa2 70%, #4a148c);
}
.tp-jardin { border-color: #f8bbd0; background: linear-gradient(#fce4ec 0 50%, #a5d6a7 50%, #66bb6a); }
.tp-nubes { border-color: #f8bbd0; background: linear-gradient(#ffcdd2, #fff9c4 25%, #c8e6c9 50%, #bbdefb 75%, #e1bee7); }
.tp-bosque { border-color: #a5d6a7; background: linear-gradient(#c5e1a5, #66bb6a 55%, #2e7d32); }
.tp-castillo {
  border-color: #f48fb1;
  background:
    repeating-linear-gradient(0deg, rgba(120, 100, 140, .35) 0 .4vmin, transparent .4vmin 5vmin),
    repeating-linear-gradient(90deg, rgba(120, 100, 140, .3) 0 .4vmin, transparent .4vmin 9vmin),
    linear-gradient(#f3e5f5, #e1bee7);
}
.tp-volcan { border-color: #ffab91; background: linear-gradient(#ffccbc, #ff8a65 45%, #6d4c41 46%, #4e342e); }
.tp-selva { border-color: #c5e1a5; background: linear-gradient(#fff59d, #aed581 45%, #689f38 46%, #33691e); }
.tp-ciudad {
  border-color: #9fa8da;
  background:
    linear-gradient(transparent 60%, #283593 60%),
    repeating-linear-gradient(90deg, #3949ab 0 6vmin, #303f9f 6vmin 9vmin, transparent 9vmin 11vmin),
    linear-gradient(#1a237e, #3f51b5);
}
.tp-casita { border-color: #ffcc80; background: linear-gradient(transparent 62%, #a1887f 62%, #8d6e63), repeating-linear-gradient(90deg, #ffe0b2 0 3vmin, #fff3e0 3vmin 6vmin); }


@keyframes pen-keeper { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
@keyframes pen-net { 20% { transform: scale(1.05, 1.08) translateY(-2px); } 45% { transform: scale(.97, .95); } 70% { transform: scale(1.02, 1.03); } }
@keyframes pen-jump { to { transform: translateY(-3px); } }

/* ---------- Partidito ---------- */

.game-pill.partido { background: linear-gradient(160deg, #2f9bff, #1a3d8f); }
.games-row { flex-wrap: wrap; }
.partido { gap: 1.5vmin; }
.mt-scene {
  position: relative;
  flex: 1.3;
  min-height: 0;
  container-type: size;
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  background: #4caf50;
}
@media (orientation: landscape) {
  .mt-scene { flex: 1.4; }
}
.mt-field { display: block; width: 100%; height: 100%; }
.mt-field * { transform-box: view-box; }
.mt-net-us { transform-origin: 4px 125px; }
.mt-net-them { transform-origin: 396px 125px; }
.mt-net.shake { animation: pen-net .7s ease-out; }
.mt-score {
  display: flex;
  align-items: center;
  gap: 1.5vmin;
  padding: .3vmin 2.5vmin;
  border-radius: 99px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .1);
}
.mt-team { font-size: clamp(30px, 7.5vmin, 62px); line-height: 1; }
.mt-team .pp, .mt-team .pp * { animation: none !important; }
.mt-goals { font-size: clamp(26px, 7vmin, 56px); font-weight: 900; min-width: 1ch; text-align: center; font-variant-numeric: tabular-nums; }
.mt-dash { font-size: clamp(20px, 5vmin, 40px); font-weight: 900; opacity: .5; }
.mt-final { position: relative; z-index: 3; font-size: clamp(34px, 10vmin, 84px); font-weight: 900; color: var(--ink); }

/* Mientras se juega sin pregunta */
.mt-waiting {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  font-size: clamp(20px, 5vmin, 40px);
  font-weight: 900;
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
  border-radius: 4vmin;
}
.sport-quiz.idle .mt-waiting { display: flex; }
.sport-quiz.idle .ask, .sport-quiz.idle .options { display: none; }

/* ---------- Trofeos ---------- */

.game-pill.trofeos { background: linear-gradient(160deg, #ffc93c, #e08a00); }
.trophy { display: inline-block; line-height: 0; }
.trophy-art { display: block; width: 100%; height: 100%; overflow: visible; }
.tr-spark { transform-box: fill-box; transform-origin: center; animation: twinkle 1.4s ease-in-out infinite; }

.trophy-shelf {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 17vmin, 150px), 1fr));
  gap: 2.5vmin;
  align-content: start;
  padding: 1vmin 1vmin 3vmin;
}
.trophy-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vmin;
  padding: 1.5vmin 1vmin 1.2vmin;
  border-radius: 3vmin;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 -1.2vmin 0 rgba(0, 0, 0, .18);
  color: #fff;
}
.trophy-slot .trophy { width: 80%; aspect-ratio: 100 / 130; }
.trophy-slot:not(.have) .trophy { filter: brightness(0) opacity(.35); }
.trophy-slot.have { background: radial-gradient(circle at 50% 40%, rgba(255, 244, 176, .45), rgba(255, 255, 255, .12) 70%); }
.trophy-slot-name { font-size: clamp(11px, 2.4vmin, 17px); font-weight: bold; text-align: center; line-height: 1.15; }
.trophy-lock { font-size: clamp(12px, 2.8vmin, 20px); font-weight: 900; opacity: .85; }
.trophy-slot:active { translate: 0 .5vmin; }

/* Mapa de trofeos */
.trophies { gap: 1.5vmin; }
.tm-wrap { flex: 1; min-height: 0; display: flex; align-items: center; gap: 1.5vmin; }
.tm-arrow { flex: none; --s: clamp(40px, 9vmin, 70px); }
.tm-arrow:disabled { opacity: .25; pointer-events: none; }
.tm-board {
  position: relative;
  flex: 1;
  align-self: stretch;
  min-width: 0;
  border-radius: 4vmin;
  border: .8vmin solid #fff;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .2);
}
.tm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-road-edge { fill: none; stroke: rgba(0, 0, 0, .2); stroke-width: calc(var(--step) * 2.3); stroke-linecap: round; stroke-linejoin: round; }
.tm-road { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: calc(var(--step) * 1.7); stroke-linecap: round; stroke-linejoin: round; }
.tm-step, .tm-start, .tm-stop, .tm-walker { position: absolute; translate: -50% -50%; }
.tm-step {
  width: var(--step);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .12);
}
.tm-step.on { background: #fff; box-shadow: 0 0 0 .3vmin #ffd23f; }
.tm-step .emoji { font-size: calc(var(--step) * .75); line-height: 1; }
.tm-start { font-size: calc(var(--stop) * .6); line-height: 1; }
.tm-stop {
  width: var(--stop);
  height: var(--stop);
  padding: 2%;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .2);
  z-index: 1;
}
.tm-stop .trophy { height: 92%; aspect-ratio: 100 / 130; }
.tm-stop:not(.have) .trophy { filter: brightness(0) opacity(.3); }
.tm-stop.have { background: radial-gradient(circle, #fff8d6, #ffe07a); box-shadow: 0 0 0 .5vmin #ffd23f, 0 .8vmin 0 rgba(0, 0, 0, .2); }
.tm-stop.next { box-shadow: 0 0 0 .6vmin #ff5a8a, 0 .8vmin 0 rgba(0, 0, 0, .2); animation: pulse 1s ease-in-out infinite; }
.tm-stop:active { scale: .94; }
.tm-need {
  position: absolute;
  right: -8%;
  bottom: -8%;
  min-width: 1.6em;
  padding: .1em .3em;
  border-radius: 99px;
  background: #3b2a5a;
  color: #fff;
  font-size: calc(var(--stop) * .2);
  font-weight: 900;
  line-height: 1.3;
}
.tm-walker { translate: -50% -100%; font-size: calc(var(--stop) * 1.05); z-index: 2; pointer-events: none; }
.tm-pages { flex: none; display: flex; justify-content: center; gap: 1.5vmin; padding-bottom: 1vmin; }
.tm-dot { width: 2vmin; min-width: 10px; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.tm-dot.on { background: #fff; scale: 1.3; }

.trophy-stage { gap: 2vmin; }
.trophy-big { position: relative; z-index: 1; width: clamp(120px, 34vmin, 300px); aspect-ratio: 100 / 130; animation: coinin .9s cubic-bezier(.3, 1.6, .5, 1) both; }
.trophy-new-label, .trophy-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 900;
  color: var(--ink);
  -webkit-text-stroke: .5vmin #fff;
  paint-order: stroke fill;
}
.trophy-new-label { font-size: clamp(24px, 7vmin, 60px); color: #ff5a8a; }
.trophy-name { font-size: clamp(18px, 5vmin, 42px); }
.trophy-prize { width: clamp(60px, 14vmin, 120px); aspect-ratio: 100 / 130; }

@keyframes twinkle { 50% { transform: scale(.4); opacity: .4; } }

/* Trofeo en grande, girando */
.trophy-view {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(123, 92, 255, .92), rgba(20, 12, 50, .96) 70%);
  animation: fadein .25s;
}
.trophy-view .party-rays { top: 45%; opacity: .6; }
.trophy-view-close { position: absolute; top: max(2vmin, env(safe-area-inset-top)); right: max(2vmin, env(safe-area-inset-right)); z-index: 2; }
.trophy-view-stage {
  position: relative;
  z-index: 1;
  width: clamp(180px, 52vmin, 440px);
  aspect-ratio: 100 / 130;
  perspective: 900px;
  container-type: size;
  animation: popin .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.trophy-spin { width: 100%; height: 100%; transform-style: preserve-3d; animation: trophy-spin 3.2s linear infinite, trophy-float 2.4s ease-in-out infinite; }
.trophy-spin.fast { animation: trophy-spin .6s linear 3, trophy-float 2.4s ease-in-out infinite; }
.trophy-spin-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2vmin 2vmin rgba(0, 0, 0, .45)); }
.trophy-view-name {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(24px, 7vmin, 60px);
  font-weight: 900;
  color: #fff;
  text-align: center;
  text-shadow: 0 .6vmin 0 rgba(0, 0, 0, .3);
}
.trophy-view-hint { position: relative; z-index: 1; margin: 0; color: rgba(255, 255, 255, .8); font-weight: bold; font-size: clamp(14px, 3.4vmin, 24px); }
@keyframes trophy-spin { to { rotate: y 360deg; } }
@keyframes trophy-float { 50% { translate: 0 -2.5vmin; } }

/* ---------- Pool ---------- */

.game-pill.pool { background: linear-gradient(160deg, #1f8f4e, #0b4d27); }
.pool { gap: 1.5vmin; }
.pl-scene { background: #5d4037; }
.pl-table { display: block; width: 100%; height: 100%; }
.pl-top { display: flex; align-items: center; gap: 2.5vmin; }
.pl-clock-box {
  display: inline-flex;
  align-items: center;
  gap: 1vmin;
  padding: .2em .6em;
  border-radius: 99px;
  background: rgba(255, 255, 255, .9);
  font-size: clamp(18px, 4.8vmin, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .12);
}
.pl-clock-box.hurry { background: #ffe1e1; color: #c62828; animation: pulse .8s ease-in-out infinite; }
.pl-slots, .pl-final { display: flex; gap: 1.2vmin; }
.pl-final { position: relative; z-index: 3; }
.pl-slot {
  --c: #fff;
  display: grid;
  place-items: center;
  width: clamp(24px, 6vmin, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  border: .5vmin dashed rgba(0, 0, 0, .25);
}
.pl-slot.in { background: radial-gradient(circle, #fff 0 28%, var(--c) 30%); border: .5vmin solid #2b2140; animation: pop .5s; }
.game-pill { font-size: clamp(15px, 3.8vmin, 30px); }

/* ---------- Bowling ---------- */

.game-pill.bowling { background: linear-gradient(160deg, #6a4c9c, #2b2d5c); }
.bowling { gap: 1.5vmin; }
.bw-body { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 4vmin; }
@media (orientation: portrait) {
  .bw-body { flex-direction: column; align-items: center; gap: 1.5vmin; }
  .bw-side { flex-direction: row; }
}
.bw-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; }
.bw-hero { font-size: clamp(60px, 22vmin, 190px); }
.bw-tip {
  margin: 0;
  max-width: 34vmin;
  padding: .5em .9em;
  border-radius: 3vmin;
  background: rgba(255, 255, 255, .9);
  font-size: clamp(14px, 3.4vmin, 26px);
  font-weight: bold;
  text-align: center;
}
.bw-lane-box {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-width: 130vh;
  container-type: size;
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (orientation: portrait) {
  .bw-lane-box { width: 100%; }
}
.bw-canvas { display: block; width: 100%; height: 100%; }
.bw-hand { z-index: 4; }
.bw-board { display: flex; gap: 1.2vmin; }
.bw-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(44px, 10vmin, 84px);
  padding: .4vmin .8vmin;
  border-radius: 1.5vmin;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 .6vmin 0 rgba(0, 0, 0, .15);
  font-weight: 900;
  line-height: 1.1;
}
.bw-frame-n { font-size: clamp(10px, 2.2vmin, 16px); opacity: .6; }
.bw-throws { display: flex; gap: .6vmin; }
.bw-t {
  display: grid;
  place-items: center;
  min-width: 1.4em;
  min-height: 1.4em;
  border: .3vmin solid rgba(0, 0, 0, .15);
  border-radius: .8vmin;
  font-size: clamp(11px, 2.6vmin, 20px);
}
.bw-frame-total { font-size: clamp(13px, 3vmin, 24px); min-height: 1.2em; }
.bw-frame-total.big { font-size: clamp(20px, 5vmin, 40px); color: var(--accent); }

/* ---------- Piedra, papel o tijera ---------- */

.game-pill.ppt { background: linear-gradient(160deg, #ff9800, #e65100); letter-spacing: .1em; }
.ppt { gap: 1.5vmin; }
.ppt-arena {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 4vmin;
  background: rgba(255, 255, 255, .35);
  padding: 1.5vmin 3vmin;
}
.ppt-side { display: flex; align-items: center; gap: 5vmin; }
.ppt-hero { font-size: clamp(40px, 12vmin, 110px); }
.ppt-hand {
  display: inline-block;
  font-size: clamp(56px, 17vmin, 160px);
  line-height: 1;
  filter: drop-shadow(0 1vmin 0 rgba(0, 0, 0, .18));
  transition: filter .3s, opacity .3s;
}
.ppt-hand.rival { rotate: 180deg; }
.ppt-hand.shake { animation: ppt-shake 1s ease-in-out; }
.ppt-hand.reveal { animation: pop .45s; }
.ppt-hand.win { filter: drop-shadow(0 0 3vmin #ffd23f) drop-shadow(0 1vmin 0 rgba(0, 0, 0, .18)); }
.ppt-hand.lose { opacity: .45; filter: grayscale(.6); }
.ppt-middle {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}
.ppt-middle .sport-flash { align-items: center; padding: 0; font-size: clamp(26px, min(40cqh, 13cqw), 90px); }
@media (orientation: portrait) {
  .ppt-hand { font-size: clamp(70px, 26vw, 180px); }
  .ppt-hero { font-size: clamp(50px, 17vw, 120px); }
}
.ppt-vs { font-size: clamp(20px, 6vmin, 48px); font-weight: 900; color: rgba(59, 42, 90, .35); }
.ppt-middle .sport-flash:not([hidden]) + .ppt-vs { display: none; }
.ppt-choices { flex: none; display: flex; justify-content: center; gap: 3vmin; }
.ppt-choices.locked { pointer-events: none; }
.ppt-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5vmin;
  width: clamp(80px, 20vmin, 170px);
  padding: 1.5vmin 0 1vmin;
  border-radius: 4vmin;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  font-size: clamp(40px, 11vmin, 96px);
  line-height: 1;
}
.ppt-choice-name { font-size: clamp(13px, 3vmin, 24px); font-weight: 900; }
.ppt-choices.locked .ppt-choice:not(.picked) { opacity: .4; }
.ppt-choice.picked { box-shadow: 0 0 0 1vmin var(--gold), 0 1vmin 0 rgba(0, 0, 0, .15); }
.ppt-choice:active { translate: 0 .6vmin; }
@keyframes ppt-shake {
  0%, 33%, 66%, 100% { translate: 0 0; }
  16%, 50%, 83% { translate: 0 -3.5vmin; }
}

/* ---------- Carrera a caballo ---------- */

.game-pill.carrera { background: linear-gradient(160deg, #ff9800, #a1683a); }
.carrera { gap: 1.5vmin; }
.cr-top { display: flex; align-items: center; gap: 2.5vmin; }
.cr-hearts { display: flex; gap: .6vmin; font-size: clamp(18px, 5vmin, 38px); }
.cr-heart.lost { filter: grayscale(1); opacity: .3; animation: shake .4s; }
.cr-track { position: relative; width: clamp(110px, 34vmin, 280px); height: clamp(26px, 6vmin, 44px); }
.cr-track-line { position: absolute; left: 0; right: 8%; top: 50%; height: .8vmin; min-height: 4px; translate: 0 -50%; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.cr-marker { position: absolute; top: 50%; left: 0; translate: -50% -55%; font-size: clamp(18px, 5vmin, 36px); transition: left .2s linear; }
.cr-goal { position: absolute; right: -4%; top: 50%; translate: 0 -55%; font-size: clamp(18px, 5vmin, 36px); }
.cr-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  isolation: isolate; /* los carteles de adentro no tapan la pantalla final */
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.cr-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* El jinete: sentado en la montura (los pies le quedan a los costados del caballo) */
.cr-rider { position: absolute; translate: -50% -86%; line-height: 1; pointer-events: none; z-index: 1; }
.cr-hand { z-index: 3; }
.carrera .sport-flash { z-index: 4; align-items: center; padding: 0; font-size: clamp(34px, 14vmin, 110px); }

/* ---------- Rampa de puntos (skee-ball) ---------- */

.game-pill.rampa { background: linear-gradient(160deg, #5c6bc0, #1a237e); }
.rampa { gap: 1.5vmin; }
.rp-top { display: flex; align-items: center; gap: 2.5vmin; }
.rp-total-box {
  display: inline-flex;
  align-items: center;
  gap: 1vmin;
  min-width: 4.6em;
  justify-content: center;
  padding: .15em .7em;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95);
  font-size: clamp(18px, 5vmin, 40px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .15);
}
.rp-total-box.bump { animation: pop .4s; }
.rp-balls { display: flex; gap: 1vmin; }
.rp-ball {
  width: clamp(14px, 3.6vmin, 28px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3e0, #d7a86e);
  border: .4vmin solid #6d4c2f;
}
.rp-ball.used { opacity: .25; }
.rp-court {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 110vh;
  align-self: center;
  container-type: size;
  isolation: isolate; /* los carteles de adentro no tapan la pantalla final */
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.rp-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.rp-trail { z-index: 2; }
.rp-hero { position: absolute; left: 2%; bottom: 2%; font-size: clamp(54px, 22cqmin, 170px); line-height: 1; pointer-events: none; z-index: 1; }
.rp-hand { z-index: 3; }
.rampa .sport-flash { z-index: 4; align-items: center; padding: 0; font-size: clamp(34px, 16cqmin, 120px); }

/* ---------- Tatetí ---------- */

.game-pill.tateti { background: linear-gradient(160deg, #7e57c2, #4527a0); }
.tateti { gap: 1.5vmin; }
.tt-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; }
@media (orientation: landscape) { .tt-body { flex-direction: row; gap: 4vmin; } }
.tt-wrap { position: relative; flex: none; width: min(92vw, 62vh, 620px); aspect-ratio: 1; container-type: size; }
@media (orientation: landscape) { .tt-wrap { width: min(60vw, 78vh, 620px); } }
.tt-board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 2.4cqmin;
  padding: 2.4cqmin;
  border-radius: 6cqmin;
  background: #4527a0;
  box-shadow: 0 2cqmin 0 rgba(0, 0, 0, .25);
}
.tt-cell {
  position: relative;
  border-radius: 4cqmin;
  background: #ede7f6;
  display: grid;
  place-items: center;
  font-size: 21cqmin;
  transition: background .2s, box-shadow .2s;
}
/* Lugares donde puede jugar: laten suave */
.tt-board.my-turn .tt-cell.open { background: #fff; box-shadow: inset 0 0 0 1.2cqmin #c5e1a5; animation: pulse 1.2s ease-in-out infinite; }
.tt-cell.me { background: #c8e6c9; }
.tt-cell.rival { background: #ffccbc; }
/* Fichas propias que se pueden mover, y la elegida */
.tt-board.my-turn .tt-cell.mine-turn { box-shadow: inset 0 0 0 1.2cqmin #66bb6a; }
.tt-cell.picked { background: #fff59d; box-shadow: inset 0 0 0 1.6cqmin var(--gold); }
.tt-cell.picked .tt-piece { animation: bob .6s ease-in-out infinite; }
.tt-cell.win { background: #ffe082; animation: pulse .6s ease-in-out infinite; }
.tt-cell.nope { animation: shake .4s; }
/* Pista: acá hacés tatetí */
.tt-cell.hint { box-shadow: inset 0 0 0 1.8cqmin var(--gold), 0 0 4cqmin var(--gold) !important; animation: pulse .6s ease-in-out infinite !important; }
.tt-piece { line-height: 1; pointer-events: none; display: grid; place-items: center; }
.tt-piece.pop { animation: popin .3s ease-out; }
/* Fichas que todavía no se pusieron */
.tt-tray {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 2vmin;
  min-height: clamp(44px, 11vmin, 90px);
  min-width: clamp(44px, 11vmin, 90px);
  font-size: clamp(40px, 10vmin, 84px);
}
@media (orientation: landscape) { .tt-tray { flex-direction: column; } }
.tt-tray .tt-piece { opacity: .85; }
.tateti .sport-flash { z-index: 5; align-items: center; padding: 0; font-size: clamp(30px, 15cqmin, 100px); }

/* ---------- Buscá a tu personaje ---------- */

.game-pill.buscar { background: linear-gradient(160deg, #26a69a, #00695c); }
.buscar { gap: 1.5vmin; }
.bs-top { display: flex; align-items: center; gap: 2.5vmin; }
.bs-wanted {
  display: inline-flex;
  align-items: center;
  gap: 1vmin;
  padding: .5vmin 2vmin .5vmin 1.6vmin;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 .7vmin var(--gold), 0 1vmin 0 rgba(0, 0, 0, .15);
  font-size: clamp(20px, 5vmin, 40px);
}
.bs-wanted-face { font-size: clamp(34px, 9vmin, 70px); line-height: 1; }
.bs-wanted:active { translate: 0 .5vmin; }
.bs-score .pen-slot.goal::before { content: '⭐'; }
.bs-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  isolation: isolate; /* los z-index de adentro no tapan la pantalla final */
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.bs-scene { position: absolute; inset: 0; }
.bs-decor { position: absolute; line-height: 1; pointer-events: none; opacity: .9; }
.bs-person { position: absolute; translate: -50% -96%; line-height: 1; transform-origin: 50% 92%; }
/* Todos quietos: si no, el que se mueve se delata (y son muchos para animar) */
.bs-person .pp *, .bs-person .pp { animation: none !important; }
.bs-person.flip .avatar { transform: scaleX(-1); }
.bs-person.nope { animation: shake .4s; }
.bs-person.hint { animation: bs-hint 1s ease-in-out infinite; }
.bs-person.found { z-index: 500 !important; animation: bs-found 1.6s ease-out forwards; }
.bs-scene.done .bs-person:not(.found), .bs-scene.done .bs-decor { opacity: .35; transition: opacity .3s; }
.buscar .sport-flash { z-index: 600; align-items: flex-start; padding: 4cqmin 0 0; font-size: clamp(30px, 13vmin, 100px); }
@keyframes bs-hint { 50% { transform: translateY(-6%) rotate(4deg); } }
@keyframes bs-found { 25% { transform: scale(1.7); } 45% { transform: scale(1.5) rotate(-8deg); } 65% { transform: scale(1.5) rotate(8deg); } to { transform: scale(1.5); } }

/* ---------- Básquet ---------- */

.game-pill.basket { background: linear-gradient(160deg, #ff8f2b, #bf360c); }
.basket { gap: 1.5vmin; }
.bk-court {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 125vh;
  align-self: center;
  container-type: size;
  isolation: isolate; /* los carteles de adentro no tapan la pantalla final */
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.bk-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.bk-trail { z-index: 2; }
.bk-hero { position: absolute; left: 3%; bottom: 3%; font-size: clamp(60px, 26cqmin, 190px); line-height: 1; pointer-events: none; z-index: 1; }
.bk-hand { z-index: 3; }
.basket .sport-flash { z-index: 4; align-items: center; padding: 0; font-size: clamp(34px, 15cqmin, 110px); }
/* Marcador: pelota de básquet si entró, cruz si no */
.bk-score .pen-slot.goal::before { content: '🏀'; }
.bk-score .pen-slot.saved::before { content: '✖️'; }

/* ---------- Air hockey ---------- */

.game-pill.hockey { background: linear-gradient(160deg, #29b6f6, #0d47a1); }
.hockey { gap: 1.5vmin; }
.ah-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  isolation: isolate; /* los carteles de adentro no tapan la pantalla final */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.ah-layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
/* Carita del personaje en el círculo central: se recorta la cabeza del muñequito */
.ah-face {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: .85;
}
.ah-face .avatar { position: absolute; left: calc(50% - .4em); top: calc(50% - .28em); }
/* Elegir dificultad antes del partido */
.ah-levels {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  background: rgba(13, 71, 161, .45);
}
.ah-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vmin;
  width: clamp(84px, 26vmin, 190px);
  padding: 3vmin 1vmin;
  border-radius: 5vmin;
  background: #fff;
  box-shadow: 0 1.2vmin 0 rgba(0, 0, 0, .25);
  font-size: clamp(40px, 13vmin, 96px);
}
.ah-level-name { font-size: clamp(14px, 3.6vmin, 28px); font-weight: 900; color: #0d47a1; }
.ah-level.default { box-shadow: 0 0 0 1vmin var(--gold), 0 1.2vmin 0 rgba(0, 0, 0, .25); animation: pulse 1s ease-in-out infinite; }
.ah-level:active { translate: 0 .8vmin; }
.ah-hand { z-index: 5; }
.hockey .sport-flash { z-index: 6; align-items: center; padding: 0; font-size: clamp(34px, 15vmin, 110px); }

/* ---------- Laberintos ---------- */

.game-pill.maze { background: linear-gradient(160deg, #7e57c2, #311b92); }
.sport-coins-n {
  align-self: center;
  font-size: clamp(40px, 14vmin, 120px);
  font-weight: 900;
  color: #f2a900;
  -webkit-text-stroke: .08em #fff;
  paint-order: stroke fill;
  animation: popin .5s .6s both;
}
.sport-coins:has(> :nth-child(3)) .big-coin { --s: clamp(70px, 19vmin, 170px); }
.sport-coins .big-coin:nth-child(3) { animation-delay: .5s, 1.4s; }

/* Elegir nivel */
.mz-levels {
  flex: 1;
  min-height: 0;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(10, auto);
  gap: 2vmin;
  align-content: center;
  overflow-y: auto;
  padding: 2vmin 2vmin max(4vmin, env(safe-area-inset-bottom));
  --b: clamp(40px, min(8.2vw, 17vh), 110px); /* tamaño de cada botón */
}
/* Celular parado: 5 por fila (8 filas) */
@media (orientation: portrait) { .mz-levels { grid-template-columns: repeat(5, auto); --b: clamp(40px, min(16vw, 9vh), 110px); } }
.mz-level {
  position: relative;
  width: var(--b);
  font-size: var(--b);
  aspect-ratio: 1;
  border-radius: 3.5vmin;
  background: #fff;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .2);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #4527a0;
}
.mz-level-n { font-size: .46em; }
.mz-level.done { background: #fff8d6; box-shadow: 0 0 0 .7vmin var(--gold), 0 1vmin 0 rgba(0, 0, 0, .2); }
.mz-level.next { animation: pulse 1s ease-in-out infinite; box-shadow: 0 0 0 .8vmin #ff5a8a, 0 1vmin 0 rgba(0, 0, 0, .2); }
.mz-level.locked { background: rgba(255, 255, 255, .35); box-shadow: none; }
.mz-level.locked .mz-level-n { font-size: .34em; opacity: .7; }
.mz-level-tag { position: absolute; right: -8%; bottom: -8%; font-size: .26em; line-height: 1; }
.mz-level.locked .mz-level-tag { opacity: .6; }
.mz-level:active { translate: 0 .6vmin; }

/* Jugando */
.maze { gap: 1.5vmin; }
.mz-top { display: flex; align-items: center; gap: 2vmin; }
.mz-n, .mz-bag {
  display: inline-flex;
  align-items: center;
  gap: 1vmin;
  min-height: 1.7em;
  padding: .15em .7em;
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  font-size: clamp(18px, 4.8vmin, 38px);
  font-weight: 900;
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .12);
}
.mz-bag { min-width: 2.6em; justify-content: center; }
.mz-bag:empty { opacity: .45; }
.mz-bag-item { animation: pop .4s; }
.mz-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3vmin; }
@media (orientation: portrait) { .mz-body { flex-direction: column; } }
.mz-stage { flex: 1; align-self: stretch; min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.mz-board {
  position: relative;
  width: min(100cqw, 100cqh * var(--cols) / var(--rows));
  aspect-ratio: var(--cols) / var(--rows);
  container-type: size;
  border-radius: 2vmin;
  background:
    repeating-conic-gradient(#fff3d6 0 25%, #ffe9b8 0 50%) 0 0 / calc(200% / var(--cols)) calc(200% / var(--rows));
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.mz-walls { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.mz-walls path { fill: none; stroke: #4a2c82; stroke-width: .13; stroke-linecap: round; stroke-linejoin: round; }
.mz-thing, .mz-hero { position: absolute; translate: -50% -50%; line-height: 1; pointer-events: none; }
.mz-thing { font-size: calc(100cqw / var(--cols) * .6); z-index: 1; }
.mz-thing.goal { animation: pulse 1s ease-in-out infinite; }
.mz-thing.goal.opened { animation: dance .5s ease-in-out infinite; scale: 1.3; }
.mz-thing.key, .mz-thing.sword { animation: bob 1.4s ease-in-out infinite; }
.mz-thing.dragon { font-size: calc(100cqw / var(--cols) * .72); }
.mz-thing.nope { animation: shake .4s; }
.mz-thing.roar { animation: mz-roar .5s; }
.mz-thing.taken { animation: mz-taken .5s ease-out forwards; }
.mz-thing.open { animation: mz-open .5s ease-in forwards; }
.mz-thing.beaten { animation: mz-beaten .6s ease-in forwards; }
/* Botón de color (se pisa) y su muro del mismo color (baja al pisar el botón) */
.mz-thing.mz-gate {
  width: calc(100% / var(--cols) * .92);
  height: calc(100% / var(--rows) * .92);
  border-radius: 12%;
  background:
    linear-gradient(var(--d) 0 0) 0 33% / 100% 6% no-repeat,
    linear-gradient(var(--d) 0 0) 0 66% / 100% 6% no-repeat,
    linear-gradient(var(--d) 0 0) 50% 0 / 6% 33% no-repeat,
    linear-gradient(var(--d) 0 0) 25% 50% / 6% 33% no-repeat,
    linear-gradient(var(--d) 0 0) 75% 50% / 6% 33% no-repeat,
    linear-gradient(var(--d) 0 0) 50% 100% / 6% 33% no-repeat,
    var(--c);
  box-shadow: inset 0 0 0 calc(100cqw / var(--cols) * .06) var(--d), 0 calc(100cqw / var(--cols) * .06) 0 rgba(0, 0, 0, .25);
}
.mz-thing.mz-gate.lowered { animation: mz-lower .6s ease-in forwards; transform-origin: 50% 100%; }
.mz-thing.mz-button {
  width: calc(100% / var(--cols) * .62);
  height: calc(100% / var(--rows) * .62);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .7) 0 12%, transparent 13%), var(--c);
  box-shadow: 0 calc(100cqw / var(--cols) * .1) 0 var(--d), 0 0 0 calc(100cqw / var(--cols) * .05) #fff;
  animation: pulse 1s ease-in-out infinite;
  z-index: 0;
  transition: box-shadow .15s, translate .15s, opacity .3s;
}
.mz-thing.mz-button.pressed {
  animation: none;
  translate: -50% calc(-50% + 100cqw / var(--cols) * .08);
  box-shadow: 0 0 0 var(--d), 0 0 0 calc(100cqw / var(--cols) * .05) #fff;
  opacity: .55;
}
@keyframes mz-lower { to { scale: 1 0; opacity: .2; } }

.mz-hero {
  font-size: calc(100cqw / var(--cols) * .78);
  z-index: 2;
}
.mz-hero.flip .avatar { transform: scaleX(-1); }
.mz-board.won .mz-hero { z-index: 4; }
/* Palanca analógica: base redonda con cuatro flechitas y la perilla que sigue al dedo */
.mz-stick {
  position: relative;
  flex: none;
  width: clamp(150px, 40vmin, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 58%, rgba(255, 255, 255, .9) 59% 100%);
  box-shadow: 0 1.2vmin 0 rgba(0, 0, 0, .25), inset 0 0 0 1vmin rgba(69, 39, 160, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (orientation: portrait) { .mz-stick { width: clamp(150px, min(58vw, 30vh), 300px); } }
.mz-stick-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: 2.2vmin solid transparent;
  border-bottom-color: rgba(69, 39, 160, .45);
  border-top-width: 0;
  pointer-events: none;
}
.mz-stick-arrow.up { translate: -50% calc(-50% - var(--r)); }
.mz-stick-arrow.down { translate: -50% calc(-50% + var(--r)); rotate: 180deg; }
.mz-stick-arrow.left { translate: calc(-50% - var(--r)) -50%; rotate: -90deg; }
.mz-stick-arrow.right { translate: calc(-50% + var(--r)) -50%; rotate: 90deg; }
.mz-stick { --r: clamp(56px, 15.5vmin, 116px); }
@media (orientation: portrait) { .mz-stick { --r: clamp(56px, min(22vw, 11.5vh), 116px); } }
.mz-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  aspect-ratio: 1;
  margin: -22% 0 0 -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b39ddb, #5e35b1 70%);
  box-shadow: 0 1vmin 0 #311b92, 0 1.6vmin 2vmin rgba(0, 0, 0, .3);
  pointer-events: none;
  transition: translate .12s ease-out;
}
.mz-stick.on .mz-knob { transition: none; box-shadow: 0 .4vmin 0 #311b92, 0 .8vmin 1vmin rgba(0, 0, 0, .3); }
@keyframes mz-roar { 30% { scale: 1.5; rotate: -8deg; } 60% { scale: 1.4; rotate: 8deg; } }
@keyframes mz-taken { to { translate: -50% -180%; scale: 1.6; opacity: 0; } }
@keyframes mz-open { to { scale: .2; rotate: 90deg; opacity: 0; } }
@keyframes mz-beaten { 40% { scale: 1.5; rotate: 20deg; } to { scale: 0; rotate: 360deg; opacity: 0; } }

/* ---------- Tiros libres ---------- */

.game-pill.libres { background: linear-gradient(160deg, #26a69a, #00695c); }
.libres { gap: 1.5vmin; }
.tl-field {
  isolation: isolate; /* los z-index de adentro no tapan la pantalla final */
  width: 100%;
  max-width: 125vh;
  align-self: center;
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.tl-canvas, .tl-trail, .tl-ball { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tl-trail { z-index: 2000; pointer-events: none; }
.tl-ball { pointer-events: none; }
.tl-player { position: absolute; translate: -50% -94%; line-height: 1; pointer-events: none; transform-origin: 50% 90%; }
.tl-player.keeper { transform-origin: 50% 60%; }
.tl-hand { z-index: 2010; }
.libres .sport-flash { z-index: 2020; align-items: center; padding: 0; font-size: clamp(36px, 16cqmin, 110px); }

/* ---------- Tiro al blanco ---------- */

.game-pill.tiro { background: linear-gradient(160deg, #e53935, #8e0000); }
.tb-score.bump { animation: pop .35s; }
.tb-slots { display: flex; gap: .8vmin; }
.tb-slot {
  width: clamp(14px, 3.6vmin, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  border: .4vmin dashed rgba(0, 0, 0, .2);
  transition: background .2s, transform .2s;
}
.tb-slot.on { background: radial-gradient(circle, #ffd23f 0 25%, #e53935 26% 55%, #fff 56%); border: .4vmin solid #8d6e63; transform: scale(1.1); }
.tb-slots.done .tb-slot { animation: pulse .8s ease-in-out infinite; }
.tb-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
  border-radius: 3vmin;
  overflow: hidden;
  background: linear-gradient(#b3e5fc, #e1f5fe 60%, #c5e1a5 60.5%, #9ccc65);
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .15);
  touch-action: none;
  user-select: none;
}
.tb-scene.shake { animation: shake .4s; }
.tb-field { position: absolute; inset: 0; }
.tb-hero { position: absolute; left: 1.5cqmin; bottom: 1cqmin; font-size: 26cqmin; z-index: 1; pointer-events: none; }
.tb-thing {
  position: absolute;
  width: 22cqmin;
  aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  animation: popin .3s ease-out, tb-wobble 1.2s ease-in-out .3s infinite alternate;
}
.tb-thing svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1cqmin 0 rgba(0, 0, 0, .18)); }
.tb-thing .emoji { display: block; font-size: 18cqmin; line-height: 1; }
.tb-thing.bad .emoji { animation: tb-fuse .25s ease-in-out infinite alternate; }
.tb-thing.leave { animation: tb-leave .35s ease-in forwards; pointer-events: none; }
.tb-thing.hit { animation: tb-hit .5s ease-out forwards; pointer-events: none; }
.tb-thing.boom { animation: tb-boom .7s ease-out forwards; pointer-events: none; }
.tb-stars { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.tb-stars .burst { font-size: 7cqmin; }
.tb-pop {
  position: absolute;
  translate: -50% -50%;
  z-index: 3;
  pointer-events: none;
  font-size: 12cqmin;
  font-weight: 900;
  color: #2e7d32;
  -webkit-text-stroke: .08em #fff;
  paint-order: stroke fill;
  animation: tb-rise .9s ease-out forwards;
}
.tb-pop.bad { color: #c62828; }
.tb-pop.p2 { color: #1e63d6; font-size: 15cqmin; }
.tb-pop.p5 { font-size: 22cqmin; color: #7b1fa2; animation-duration: 1.2s; }
.tb-thing.arcoiris svg { filter: drop-shadow(0 0 2.5cqmin #fff) drop-shadow(0 0 4cqmin #ffd23f); }
.tb-thing.arcoiris:not(.gone) { animation: popin .25s ease-out, tb-spin 1.2s linear .25s infinite; }
@keyframes tb-spin { to { rotate: 360deg; } }
.tiro .sport-flash { align-items: center; padding: 0; }
@keyframes tb-wobble { from { rotate: -6deg; } to { rotate: 6deg; } }
@keyframes tb-fuse { to { scale: 1.08; rotate: 8deg; } }
@keyframes tb-leave { to { scale: 0; opacity: 0; } }
@keyframes tb-hit { 30% { scale: 1.25; } to { scale: .2; opacity: 0; rotate: 90deg; } }
@keyframes tb-boom { 25% { scale: 1.6; } to { scale: 2; opacity: 0; } }
@keyframes tb-rise { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -14cqmin; } }

/* ---------- Animaciones ---------- */

@keyframes drift { to { transform: translateY(-2.5vmin) rotate(6deg); } }
@keyframes bob { 50% { transform: translateY(-1.5vmin); } }
@keyframes float { 50% { transform: translateY(-9%); } }
@keyframes bounce { 50% { transform: translateY(-4%); } }
@keyframes sway { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes pulse { 50% { transform: scale(1.07); } }
@keyframes pop { 40% { transform: scale(1.12); } }
@keyframes popin { from { transform: scale(.4); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes dance { 25% { transform: rotate(-8deg) scale(1.05); } 75% { transform: rotate(8deg) scale(1.05); } }
@keyframes shake {
  20%, 60% { transform: translateX(-2vmin); }
  40%, 80% { transform: translateX(2vmin); }
}
@keyframes fly {
  from { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2); opacity: 0; }
}
@keyframes fall { to { top: 105%; transform: rotate(720deg) translateX(6vmin); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ballin { from { transform: translateX(-60vmin) rotate(-540deg); } }
@keyframes stamp { from { transform: scale(1.8); opacity: 0; } }
@keyframes coinin { from { transform: scale(0) rotate(-200deg); } }
@keyframes coinspin { 50% { transform: rotateY(180deg) scale(1.05); } }
@keyframes shine { 0% { translate: -120% 0; } 60%, 100% { translate: 120% 0; } }
@keyframes letterpop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  70% { transform: scale(1.35) rotate(8deg); opacity: 1; }
}
@keyframes rise {
  from { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-65vh) rotate(6deg); }
  to { transform: translateY(-140vh) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .decor, .logo-l, .parade-item, .anim-float, .anim-bounce, .anim-sway, .party-rays { animation: none; }
}

/* ---------- Actualizar ---------- */

.update-btn { position: relative; }
.update-badge {
  display: none;
  position: absolute;
  top: -12%;
  right: -12%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e53935;
  border: .5vmin solid #fff;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: 900;
  font-size: calc(var(--s) * .3);
  line-height: 1;
  place-items: center;
  box-shadow: 0 .4vmin .8vmin rgba(0, 0, 0, .3);
}
.update-btn.has-news .update-badge { display: grid; animation: pulse .8s ease-in-out infinite; }
.update-btn.has-news { animation: sway 1.6s ease-in-out infinite; }
.update-panel { text-align: center; }
.update-icon { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.update-text { margin: 6px 0 0; }
.update-bar { height: 12px; margin-top: 14px; border-radius: 99px; background: #e8e3f5; overflow: hidden; }
.update-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .2s; }
.update-panel .row { justify-content: center; }
.update-panel button[disabled] { opacity: .5; }

/* ---------- Pantalla de juegos ---------- */

.game-pill.juegos { background: linear-gradient(160deg, #ff5a8a, #7b2ff7); font-size: clamp(19px, 5vmin, 38px); padding: .4em 1.3em; }
.games { gap: 2vmin; }
.games-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(92px, 21vmin, 170px), 1fr));
  gap: 2.4vmin;
  align-content: start;
  padding: 1.5vmin 1.5vmin max(4vmin, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.game-pill.game-tile {
  aspect-ratio: 1;
  padding: 1.5vmin;
  border-radius: 4vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  box-shadow: 0 1.2vmin 0 rgba(0, 0, 0, .25);
}
.game-tile-icon { font-size: clamp(34px, 9vmin, 76px); line-height: 1.05; letter-spacing: -.08em; white-space: nowrap; }
.game-tile-icon.small { font-size: clamp(22px, 5.6vmin, 46px); }
.game-tile-name { font-size: clamp(12px, 2.9vmin, 22px); line-height: 1.1; text-align: center; text-shadow: 0 .3vmin 0 rgba(0, 0, 0, .25); }
.game-pill.game-tile:active { translate: 0 .8vmin; box-shadow: 0 .4vmin 0 rgba(0, 0, 0, .25); }
/* Margen abajo en el mapa: con bordes redondeados o barra de gestos, los botones no quedan tapados */
.screen.worlds { padding-bottom: max(4.5vmin, calc(env(safe-area-inset-bottom) + 2vmin)); }

/* ---------- Corta frutas ---------- */

.game-pill.frutas { background: linear-gradient(160deg, #ff5a6a, #8d3a1f); }
.frutas { gap: 1.5vmin; }
.fr-top { display: flex; align-items: center; gap: 2.5vmin; }
.fr-box {
  display: inline-flex;
  align-items: center;
  gap: 1vmin;
  min-width: 3.4em;
  justify-content: center;
  padding: .15em .7em;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95);
  font-size: clamp(18px, 5vmin, 40px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 .8vmin 0 rgba(0, 0, 0, .15);
}
.fr-box.bump { animation: pop .3s; }
.fr-clock-box.hurry { background: #ffe1e1; color: #c62828; animation: pulse .8s ease-in-out infinite; }
.fr-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  isolation: isolate; /* los carteles de adentro no tapan la pantalla final */
  border-radius: 3vmin;
  overflow: hidden;
  box-shadow: 0 1vmin 0 rgba(0, 0, 0, .25);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.fr-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.frutas .sport-flash { z-index: 4; align-items: center; padding: 0; font-size: clamp(34px, 14vmin, 110px); }
/* Elegir cómo jugar */
.fr-modes { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 4vmin; background: rgba(62, 39, 35, .5); }
.fr-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vmin;
  width: clamp(110px, 32vmin, 240px);
  padding: 3vmin 1vmin;
  border-radius: 5vmin;
  background: #fff;
  box-shadow: 0 0 0 1vmin var(--gold), 0 1.2vmin 0 rgba(0, 0, 0, .25);
  font-size: clamp(46px, 15vmin, 110px);
  animation: pulse 1.2s ease-in-out infinite;
}
.fr-mode:nth-child(2) { animation-delay: .6s; }
.fr-mode-name { font-size: clamp(15px, 3.8vmin, 30px); font-weight: 900; color: #5d3a22; }
.fr-mode:active { translate: 0 .8vmin; }