/* Madryn Giro: tablero y reloj, carteles, el aro que muestra hacia dónde inclinás y la mano de ayuda */
.gi-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* arriba al medio, entre el puntaje y las vidas del marcador común */
.gi-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: 88px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.gi-lv { display: block; font-size: 11px; font-weight: 600; opacity: .92; white-space: nowrap; }
.gi-clock { display: block; font-size: 21px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.gi-clock.low { color: var(--sol); animation: giPulse .5s ease-in-out infinite alternate; }
@keyframes giPulse { to { transform: scale(1.12); } }
.gi-dots { display: flex; gap: 4px; justify-content: center; margin: 2px 0 1px; }
.gi-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.gi-dots i.done { background: var(--menta); }
.gi-dots i.now { background: var(--sol); }
.gi-dots i.miss { background: #FF4D7A; }

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

/* carteles: en el cielo, arriba del tablero */
.gi-banner { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 112px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gi-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: giBn 1.5s ease-out forwards;
}
.gi-bn.round { font-size: 24px; background: #fff; color: var(--tinta); }
.gi-bn.sub { font-size: 15px; font-weight: 600; padding: 4px 13px 5px; background: rgba(11, 53, 84, .74); }
.gi-bn.go { font-size: 34px; padding: 4px 24px 8px; background: var(--sol); color: #6B4200; box-shadow: 0 5px 0 var(--sol-dark); }
.gi-bn.won { font-size: 26px; background: var(--sol); color: #6B4200; box-shadow: 0 4px 0 var(--sol-dark); }
.gi-bn.plus { font-size: 16px; font-weight: 600; background: rgba(255, 77, 122, .94); }
.gi-bn.warn { font-size: 19px; background: rgba(214, 46, 92, .94); }
@keyframes giBn {
  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); }
}

/* el aro aparece donde apoyás el dedo; la bolita va para donde llevás el centro */
.gi-stick {
  position: absolute; left: 50%; top: 70%; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .78), 0 4px 0 rgba(10, 76, 112, .18);
  display: grid; place-items: center; opacity: 0; transition: opacity .18s;
}
.gi-stick.on { opacity: 1; }
.gi-knob { width: 50px; height: 50px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 rgba(10, 76, 112, .32); }
.gi-arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; opacity: 0; }
.gi-arrow::after {
  content: ''; position: absolute; left: 70px; top: -10px;
  border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  filter: drop-shadow(0 2px 0 rgba(10, 76, 112, .3));
}

/* ayuda de la primera vez: una mano que arrastra */
.gi-hint {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 26px); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 6px;
}
.gi-hint b { background: rgba(11, 53, 84, .86); color: #fff; font-size: 15px; font-weight: 600; padding: 5px 13px 6px; border-radius: 999px; white-space: nowrap; }
.gi-hand { display: block; width: 56px; height: 56px; animation: giHand 1.8s ease-in-out infinite; }
.gi-hand svg { width: 100%; height: 100%; }
@keyframes giHand { 0%, 100% { transform: translate(-34px, 0) rotate(-8deg); } 50% { transform: translate(34px, -6px) rotate(8deg); } }
.gi-ui.ready:not(.used) .gi-hint, .gi-ui.playing:not(.used) .gi-hint { display: flex; }

@media (prefers-reduced-motion: reduce) { .gi-bn { animation-duration: .01s; } .gi-hand, .gi-clock.low { animation: none; } }