/* Madryn Cubos: marcador, nombres, joystick y botón de saltar */
.cb-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.cb-top {
  position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--safe-top) + 8px) 8px 0;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: start;
}
.cb-faces { display: flex; gap: 4px; }
.cb-faces.r { justify-content: flex-end; }
.cb-face { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; }
.cb-face i {
  position: relative; font-style: normal; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-size: 24px; background: #fff; box-shadow: 0 0 0 3px var(--c), 0 3px 0 rgba(10, 76, 112, .3);
}
.cb-face b {
  font-size: 11px; font-weight: 600; color: #fff; background: var(--c); border-radius: 999px; padding: 1px 7px;
  max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-face i .mf-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cb-face.me b { background: var(--tinta); }
.cb-face.out i { filter: grayscale(1); opacity: .6; }
.cb-face.out i::after { content: '💦'; position: absolute; right: -6px; bottom: -4px; font-size: 16px; filter: none; }
.cb-mid {
  background: rgba(11, 53, 84, .84); color: #fff; border-radius: 16px; padding: 5px 12px 6px; text-align: center; min-width: 92px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.cb-left { display: block; font-size: 12px; font-weight: 600; opacity: .92; }
.cb-clock { display: block; font-size: 24px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cb-clock.low { color: var(--sol); }
.cb-dots { display: flex; gap: 4px; justify-content: center; margin: 3px 0 2px; }
.cb-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.cb-dots i.done { background: var(--menta); }
.cb-dots i.now { background: var(--sol); }
.cb-score { display: block; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Nombres arriba de cada personaje */
.cb-tags, .cb-pops { position: absolute; inset: 0; overflow: hidden; }
.cb-tag {
  position: absolute; left: 0; top: 0; background: var(--c); color: #fff; font-size: 12px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); white-space: nowrap; will-change: transform;
}
.cb-tag.me { background: #fff; color: var(--tinta); box-shadow: 0 0 0 2px var(--c), 0 2px 0 rgba(0, 0, 0, .2); }
.cb-tag.me::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -5px;
  border: 5px solid transparent; border-top-color: #fff; border-bottom: 0;
}

/* Carteles */
.cb-banner { position: absolute; left: 0; right: 0; top: 32%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cb-bn {
  font-size: 30px; font-weight: 700; color: #fff; text-align: center; line-height: 1.1;
  text-shadow: 0 3px 0 rgba(10, 76, 112, .6), 0 0 16px rgba(10, 76, 112, .35); animation: cbBn 1.3s ease-out forwards;
}
.cb-bn.round { font-size: 34px; }
.cb-bn.go { font-size: 58px; color: var(--sol); animation-duration: .9s; }
.cb-bn.won { color: var(--sol); font-size: 32px; animation-duration: 2s; }
.cb-bn.lost { font-size: 40px; }
.cb-bn.plus, .cb-bn.warn, .cb-bn.tip {
  font-size: 17px; font-weight: 600; text-shadow: none; padding: 7px 14px; border-radius: 14px; max-width: 86%;
}
.cb-bn.plus { background: rgba(255, 77, 122, .94); border-radius: 999px; }
.cb-bn.warn { background: rgba(214, 46, 92, .94); font-size: 20px; }
.cb-bn.tip { background: rgba(11, 53, 84, .88); }
@keyframes cbBn {
  0% { transform: scale(.6); opacity: 0; } 14% { transform: scale(1.08); opacity: 1; } 24% { transform: scale(1); }
  82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); }
}
.cb-pop {
  position: absolute; transform: translate(-50%, -50%); font-size: 22px; font-weight: 700; color: #fff;
  text-shadow: 0 2px 0 rgba(10, 76, 112, .7); animation: cbPop .9s ease-out forwards;
}
.cb-pop.gold { color: var(--sol); font-size: 28px; }
@keyframes cbPop { from { margin-top: 0; opacity: 1; } to { margin-top: -50px; opacity: 0; } }

/* Joystick y Saltar: el joystick aparece donde apoyás el dedo (zona grande a la izquierda) */
.cb-zone { position: absolute; left: 0; top: 17%; bottom: 0; width: 64%; pointer-events: auto; touch-action: none; }
.cb-zone.sn-zone { width: auto; right: 0; top: 15%; }
.cb-stick {
  position: absolute; left: 16px; bottom: calc(var(--safe-bottom) + 22px); width: 150px; height: 150px; border-radius: 50%;
  transition: left .2s ease, top .2s ease, opacity .2s;
  background: rgba(255, 255, 255, .26); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 4px 0 rgba(10, 76, 112, .22);
  pointer-events: auto; touch-action: none; display: grid; place-items: center; opacity: .6;
}
.cb-stick::before {
  content: ''; position: absolute; inset: 10px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 255, 255, .9) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 94%, rgba(255, 255, 255, .9) 0 4px, transparent 5px),
    radial-gradient(circle at 6% 50%, rgba(255, 255, 255, .9) 0 4px, transparent 5px),
    radial-gradient(circle at 94% 50%, rgba(255, 255, 255, .9) 0 4px, transparent 5px);
}
.cb-stick.on { background: rgba(255, 255, 255, .36); }
.cb-knob { width: 68px; height: 68px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(10, 76, 112, .35); pointer-events: none; }
.cb-stick.float { transition: none; opacity: 1; }
.cb-jump {
  position: absolute; right: 16px; bottom: calc(var(--safe-bottom) + 28px); width: 122px; height: 122px; border-radius: 50%; border: 0;
  background: var(--sol); color: #6B4200; box-shadow: 0 6px 0 var(--sol-dark); pointer-events: auto; touch-action: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; opacity: .6;
}
.cb-jump svg { width: 50px; height: 50px; fill: #fff; stroke: #6B4200; stroke-width: 1.4; stroke-linejoin: round; }
.cb-jump.on { transform: translateY(4px); box-shadow: 0 2px 0 var(--sol-dark); }
.cb-jump.hint { animation: cbHint .55s ease-in-out infinite alternate; }
@keyframes cbHint { to { box-shadow: 0 6px 0 var(--sol-dark), 0 0 0 12px rgba(255, 201, 60, .45); } }
.cb-ui.playing .cb-stick, .cb-ui.playing .cb-jump { opacity: 1; }

.cb-pick .cb-note { margin: 6px 0 0; font-size: 13px; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .cb-jump.hint { animation: none; } .cb-bn, .cb-pop { animation-duration: .01s; } }

/* ---------- Cubos (solo el juego propio, no el Snake que comparte piezas) ---------- */
/* En la pantalla de "Tocá para empezar", la barra baja un poco para no quedar debajo de Volver */
.cb-own .cb-top { transition: padding-top .3s ease; }
.cb-own.ready .cb-top { padding-top: calc(var(--safe-top) + 58px); }

/* Carteles arriba, en el cielo (no tapan el piso): todos en pastilla */
.cb-own .cb-banner { top: calc(var(--safe-top) + 136px); gap: 6px; }
.cb-own .cb-bn {
  font-size: 24px; padding: 6px 18px 8px; border-radius: 999px; background: rgba(11, 53, 84, .86);
  text-shadow: none; box-shadow: 0 3px 0 rgba(0, 0, 0, .16); max-width: 90%;
}
.cb-own .cb-bn.round { font-size: 26px; background: #fff; color: var(--tinta); animation-duration: .86s; }
.cb-own .cb-bn.sub { font-size: 14px; font-weight: 600; padding: 3px 12px 4px; background: rgba(11, 53, 84, .7); animation-duration: .86s; }
.cb-own .cb-bn.count {
  font-size: 46px; width: 74px; height: 74px; padding: 0; display: grid; place-items: center; line-height: 1;
  background: #fff; color: var(--tinta); box-shadow: 0 0 0 5px var(--sol), 0 5px 0 rgba(0, 0, 0, .18); animation: cbCount .52s ease-out forwards;
}
.cb-own .cb-bn.go { font-size: 46px; padding: 4px 26px 8px; background: var(--sol); color: #6B4200; box-shadow: 0 5px 0 var(--sol-dark); }
.cb-own .cb-bn.won { font-size: 26px; background: var(--sol); color: #6B4200; box-shadow: 0 4px 0 var(--sol-dark); }
.cb-own .cb-bn.other { font-size: 24px; background: #fff; color: var(--tinta); box-shadow: 0 0 0 3px var(--sol), 0 4px 0 rgba(0, 0, 0, .16); animation-duration: 1.7s; }
.cb-own .cb-bn.lost { font-size: 30px; background: #FF5A5F; }
.cb-own .cb-bn.plus { font-size: 17px; }
.cb-own .cb-bn.plus.push { font-size: 19px; background: #FF8C42; box-shadow: 0 4px 0 #C4561A; }
.cb-own .cb-bn.warn { font-size: 19px; }
.cb-own .cb-bn.tip { font-size: 15px; border-radius: 14px; }
@keyframes cbCount { 0% { transform: scale(1.5); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }

/* Te caíste: la ronda sigue rápido */
.cb-watch {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 196px); transform: translateX(-50%);
  background: rgba(11, 53, 84, .78); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.cb-watch i { font-style: normal; display: inline-block; animation: cbWatch .6s steps(2) infinite; }
@keyframes cbWatch { 50% { transform: translateX(3px); } }

/* Empujón */
.cb-own .cb-pop.push { color: #FFB27A; font-size: 24px; text-shadow: 0 2px 0 rgba(120, 50, 0, .7); }
.cb-own .cb-pop.ouch { color: #fff; font-size: 22px; text-shadow: 0 2px 0 rgba(170, 30, 40, .8); }

/* El botón cambia: Empujá (naranja) y Seguir (celeste) */
.cb-own .cb-jump { transition: background .15s ease, box-shadow .15s ease; }
.cb-own .cb-jump.push { background: #FF8C42; color: #6B2A00; box-shadow: 0 6px 0 #C4561A; animation: cbPush .45s ease-in-out infinite alternate; }
.cb-own .cb-jump.push svg { stroke: #6B2A00; }
.cb-own .cb-jump.push.on { box-shadow: 0 2px 0 #C4561A; }
@keyframes cbPush { to { box-shadow: 0 6px 0 #C4561A, 0 0 0 10px rgba(255, 140, 66, .4); } }
.cb-own .cb-jump.skip { background: #fff; color: var(--tinta); box-shadow: 0 6px 0 rgba(10, 76, 112, .35); }
.cb-own .cb-jump.skip svg { fill: #17C3B2; stroke: #0F7F74; }

/* Rondas ganadas: estrella */
.cb-own .cb-dots i.star {
  width: 11px; height: 11px; margin: -2px 0; border-radius: 0; background: var(--sol);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Resultado: empujones al agua */
.dot.push { background: #FF8C42; border-radius: 4px 50% 50% 4px; }

@media (prefers-reduced-motion: reduce) { .cb-own .cb-jump.push, .cb-watch i { animation: none; } .cb-own .cb-top { transition: none; } }