/* Madryn Colores: las pastillas con el porcentaje de cada uno, el reloj, el botón ¡Splash! con su recarga
   y la elección de la pintura. El joystick, los carteles y los nombres son los de Madryn Cubos (cubos.css). */

/* Arriba: cuatro pastillas (se ordenan solas: el que más pintó va primero) y el reloj */
.co-top {
  position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--safe-top) + 8px) 10px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px; transition: padding-top .3s ease;
}
.co-ui.ready .co-top { padding-top: calc(var(--safe-top) + 58px); }
.co-board { position: relative; width: 100%; max-width: 384px; height: 44px; }
.co-pill {
  position: absolute; left: 0; top: 0; width: calc(25% - 3px); height: 40px; box-sizing: border-box;
  display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 3px; border-radius: 999px;
  background: var(--c); color: var(--ink, #fff); box-shadow: 0 3px 0 rgba(10, 40, 70, .22);
  transition: transform .5s cubic-bezier(.3, 1.35, .5, 1); will-change: transform;
}
.co-pill.me { box-shadow: 0 0 0 3px #fff, 0 4px 0 rgba(10, 40, 70, .28); z-index: 1; }
.co-face {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.co-face .mf-face { display: block; width: 100%; height: 100%; object-fit: cover; }
.co-pct { flex: 1; text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.co-crown { position: absolute; right: -3px; top: -13px; font-style: normal; font-size: 18px; opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.co-pill.lead .co-crown { opacity: 1; transform: none; }
.co-pill.bump .co-pct { animation: coBump .28s ease-out; }
@keyframes coBump { 40% { transform: scale(1.22); } }
.co-mid {
  background: rgba(11, 53, 84, .84); color: #fff; border-radius: 16px; padding: 3px 14px 4px; text-align: center; min-width: 86px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15); line-height: 1.05;
}
.co-clock { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-clock.low { color: var(--sol); }
.co-score { display: block; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .92; }
@media (max-width: 360px) {
  .co-pill { padding-right: 5px; }
  .co-face { width: 28px; height: 28px; }
  .co-pct { font-size: 15px; }
}

/* Los carteles van debajo del reloj */
.co-ui .cb-banner { top: calc(var(--safe-top) + 116px); }
.co-ui.ready .cb-banner { top: calc(var(--safe-top) + 166px); }
.co-ui .cb-bn.plus.gold { background: #FFC21A; color: #6B4200; box-shadow: 0 4px 0 #C48A00; }
.co-ui .cb-pop.co-n { font-size: 24px; text-shadow: 0 2px 0 rgba(20, 30, 60, .75), 0 0 6px rgba(255, 255, 255, .6); }

/* ¡Splash!: el aro de afuera se llena mientras se recarga; cuando está listo, salta */
.co-ui .co-splash { background: #8B5CF6; color: #fff; box-shadow: 0 6px 0 #5B34C7; transition: background .15s, box-shadow .15s, filter .2s; }
.co-ui .co-splash svg { fill: #fff; stroke: #3F1F99; stroke-width: 1.2; }
.co-ui .co-splash.on { box-shadow: 0 2px 0 #5B34C7; }
.co-ui .co-splash::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#fff calc(var(--cd, 1) * 360deg), rgba(255, 255, 255, .25) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.co-ui.playing .co-splash.wait { filter: saturate(.45) brightness(.92); }
.co-ui .co-splash.co-ready { animation: coReady .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes coReady { 0% { transform: scale(.9); } 45% { transform: scale(1.12); box-shadow: 0 6px 0 #5B34C7, 0 0 0 12px rgba(139, 92, 246, .35); } 100% { transform: none; } }

/* Al terminar la partida, el joystick y el botón se van (queda la plaza y el que ganó) */
.co-ui.co-outro .cb-stick, .co-ui.co-outro .co-splash {
  opacity: 0; transform: translateY(18px) scale(.92); pointer-events: none; transition: opacity .45s ease, transform .45s ease;
}

/* Elegir personaje: la pintura que elegís */
.co-note i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--c); margin-right: 6px; vertical-align: -2px; box-shadow: 0 0 0 2px #fff; }

/* Resultados */
.dot.co-tile { background: linear-gradient(135deg, #8B5CF6 0 50%, #FF4D7A 50%); border-radius: 3px; }
.dot.co-bucket { background: #DDE6EE; border-radius: 2px 2px 6px 6px; box-shadow: inset 0 3px 0 #FFC93C; }

@media (prefers-reduced-motion: reduce) {
  .co-pill { transition: none; }
  .co-ui .co-splash.co-ready, .co-pill.bump .co-pct { animation: none; }
}