/* Memotest de fauna: tablero y reloj, la racha y los carteles */
.mm-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* arriba al medio, entre el puntaje y las vidas del marcador común */
.mm-chip {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 20px); transform: translateX(-50%);
  background: rgba(11, 53, 84, .84); color: #fff; border-radius: 14px; padding: 3px 11px 4px; text-align: center; min-width: 92px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.mm-lv { display: block; font-size: 11px; font-weight: 600; opacity: .92; white-space: nowrap; }
.mm-clock { display: block; font-size: 21px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mm-clock.low { color: var(--sol); animation: mmPulse .5s ease-in-out infinite alternate; }
.mm-ui.peek .mm-clock { opacity: .55; }
@keyframes mmPulse { to { transform: scale(1.12); } }
.mm-dots { display: flex; gap: 4px; justify-content: center; margin: 2px 0 1px; }
.mm-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.mm-dots i.done { background: var(--menta); }
.mm-dots i.clean { background: var(--sol); box-shadow: 0 0 0 2px rgba(255, 201, 60, .35); }
.mm-dots i.now { background: #fff; }

/* la racha: debajo del reloj */
.mm-combo {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 80px); transform: translateX(-50%);
  background: var(--sol); color: #6B4200; font-size: 15px; font-weight: 800; padding: 3px 12px 4px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--sol-dark); white-space: nowrap;
}
.mm-combo.bump { animation: mmBump .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mmBump { 0% { transform: translateX(-50%) scale(.7); } 100% { transform: translateX(-50%) scale(1); } }

/* el aviso del premio por meta del marcador común baja un poco: no se pisa con el reloj */
#stage:has(.mm-ui:not([hidden])) #hud .target { margin-top: 14px; max-width: 250px; }

/* carteles: arriba, sobre el mar */
.mm-banner { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 112px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mm-bn {
  font-size: 22px; font-weight: 700; color: #fff; text-align: center; line-height: 1.1; padding: 6px 18px 8px; border-radius: 999px;
  background: rgba(11, 53, 84, .86); box-shadow: 0 3px 0 rgba(0, 0, 0, .16); max-width: 90%; animation: mmBn 1.5s ease-out forwards;
}
.mm-bn.round { font-size: 24px; background: #fff; color: var(--tinta); }
.mm-bn.sub { font-size: 16px; font-weight: 600; padding: 5px 14px 6px; background: rgba(11, 53, 84, .78); }
.mm-bn.go { font-size: 32px; padding: 4px 24px 8px; background: var(--sol); color: #6B4200; box-shadow: 0 5px 0 var(--sol-dark); }
.mm-bn.won { font-size: 26px; background: var(--sol); color: #6B4200; box-shadow: 0 4px 0 var(--sol-dark); }
.mm-bn.plus { font-size: 16px; font-weight: 600; background: rgba(255, 77, 122, .94); }
.mm-bn.warn { font-size: 19px; background: rgba(214, 46, 92, .94); }
@keyframes mmBn {
  0% { transform: scale(.6); opacity: 0; } 12% { transform: scale(1.08); opacity: 1; } 22% { transform: scale(1); }
  84% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-bn { animation-name: mmBnCalm; }
  @keyframes mmBnCalm { 0% { opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
  .mm-clock.low, .mm-combo.bump { animation: none; }
}

/* íconos de "Cómo se juega" y de los resultados */
.dot.eye { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z' fill='%2312A0AE'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%23fff'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%230B3554'/%3E%3C/svg%3E") center / 80% no-repeat; }
.dot.clock { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23FFC93C' stroke='%230B3554' stroke-width='2'/%3E%3Cpath d='M12 7v5l3.4 2' stroke='%230B3554' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat; }