/* Madryn Gol: marcador, de quién es el turno, carteles, la ayuda del primer tiro y la barra de fuerza */
.gl-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gl-zone { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.gl-ui:not(.playing) .gl-zone { pointer-events: none; }

/* marcador: [cara] Vos 1 – 2 Rival [cara] */
.gl-top {
  position: absolute; left: 50%; top: calc(var(--safe-top) + 10px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; transition: top .3s ease;
}
.gl-ui.ready .gl-top { top: calc(var(--safe-top) + 58px); }        /* en "listo" el botón Volver ocupa la esquina */
.gl-team {
  display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 6px; border-radius: 16px;
  background: var(--c, #3A86FF); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.gl-team.me { padding-right: 12px; }
.gl-team.rv { padding-left: 12px; }
.gl-face {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; overflow: hidden; font-size: 20px;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .9);
}
.gl-face .mf-face { width: 100%; height: 100%; object-fit: cover; }
.gl-name { font-size: 12px; font-weight: 700; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .95; }
.gl-num { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; min-width: 18px; text-align: center; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.gl-num.bump { animation: glBump .6s ease-out; }
@keyframes glBump { 0% { transform: scale(1); } 35% { transform: scale(1.6); } 100% { transform: scale(1); } }
.gl-dash { font-family: var(--display); font-size: 26px; color: #fff; text-shadow: 0 2px 0 rgba(10, 60, 90, .5); }

/* debajo: de quién es el turno y cuántos tiros te quedan */
.gl-sub {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 64px); display: flex; justify-content: center; align-items: center; gap: 6px;
  transition: top .3s ease;
}
.gl-ui.ready .gl-sub { top: calc(var(--safe-top) + 112px); }
.gl-pill {
  font-size: 15px; font-weight: 700; padding: 5px 14px 6px; border-radius: 999px; background: rgba(11, 53, 84, .86); color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gl-pill.mine { background: var(--sol); color: #5C3A00; box-shadow: 0 3px 0 var(--sol-dark); }
.gl-pill.mine.low { animation: glLow .5s ease-in-out infinite alternate; }
@keyframes glLow { to { background: #FF8C42; color: #fff; box-shadow: 0 3px 0 #C4561A; } }
.gl-pill.gol { background: #fff; color: var(--tinta); box-shadow: 0 0 0 3px var(--sol), 0 3px 0 rgba(0, 0, 0, .15); }
.gl-pill.them { background: #fff; color: var(--tinta); }
.gl-pill.end { background: var(--tinta); }
.gl-shots {
  font-size: 13px; font-weight: 700; color: var(--tinta); background: rgba(255, 255, 255, .88); padding: 5px 10px 6px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gl-shots::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--tinta); vertical-align: -1px; }
/* la barra del premio del juego (la del marco común) va debajo del turno */
#stage:has(.gl-ui:not([hidden])) #hud.own { top: calc(var(--safe-top) + 104px); }
.gl-ui.ready ~ #hud.own, #stage:has(.gl-ui.ready) #hud.own { top: calc(var(--safe-top) + 152px); }

/* carteles */
.gl-banner { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 168px); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gl-bn {
  font-family: var(--display); font-weight: 400; font-size: 24px; 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: glBn 1.3s ease-out forwards;
}
.gl-bn.big { font-size: 28px; background: #fff; color: var(--tinta); }
.gl-bn.gol { font-size: 44px; padding: 6px 26px 10px; background: var(--sol); color: #5C3A00; box-shadow: 0 5px 0 var(--sol-dark); animation-duration: 1.9s; }
.gl-bn.them { font-size: 26px; background: #fff; color: var(--tinta); box-shadow: 0 0 0 3px #FF5A5F, 0 4px 0 rgba(0, 0, 0, .16); animation-duration: 1.7s; }
.gl-bn.plus { font-family: var(--font); font-weight: 700; font-size: 16px; background: rgba(255, 77, 122, .95); }
.gl-bn.warn { font-family: var(--font); font-weight: 700; font-size: 16px; background: rgba(214, 46, 92, .94); }
.gl-bn.tip { font-family: var(--font); font-weight: 600; font-size: 15px; border-radius: 14px; }
@keyframes glBn {
  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); }
}
.gl-pops { position: absolute; inset: 0; overflow: hidden; }
.gl-pop {
  position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-size: 24px; color: #fff;
  text-shadow: 0 2px 0 rgba(10, 76, 112, .7); animation: glPop .9s ease-out forwards; white-space: nowrap;
}
.gl-pop.post { color: var(--sol); }
@keyframes glPop {
  0% { margin-top: 0; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  28% { transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { margin-top: -46px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* fuerza del tiro mientras arrastrás */
.gl-power {
  position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 26px); width: 180px; margin-left: -90px; height: 14px; border-radius: 999px;
  background: rgba(11, 53, 84, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); overflow: hidden;
}
.gl-power i {
  display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #FFFFFF, #FFD64A 50%, #FF6E32);
}
.gl-power.max { box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(255, 110, 50, .45); }

/* la mano que muestra cómo se tira (solo la primera vez) */
.gl-hint { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.gl-hint b {
  position: absolute; left: 0; top: 74px; transform: translateX(-50%); white-space: nowrap; font-size: 14px; font-weight: 700; color: #fff;
  background: rgba(11, 53, 84, .86); padding: 5px 12px; border-radius: 999px;
}
.gl-hand { position: absolute; left: -14px; top: -6px; width: 46px; height: 46px; animation: glDrag 1.6s ease-in-out infinite; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.gl-hand svg { width: 100%; height: 100%; }
@keyframes glDrag { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(0, 58px); opacity: 1; } 70% { transform: translate(0, 58px); opacity: 0; } 100% { opacity: 0; } }

/* resultados y ayuda */
.dot.ball { background: #fff; box-shadow: inset 0 0 0 2px #1D2433; border-radius: 50%; }
.dot.bank { background: #2F5FD0; border-radius: 3px; box-shadow: inset 0 -4px 0 #FFC93C; }
.dot.clock { background: #fff; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--tinta); }

/* elección de capitán */
.gl-pick .cb-note { margin: 6px 0 0; font-size: 13px; opacity: .85; }

@media (prefers-reduced-motion: reduce) { .gl-bn, .gl-pop, .gl-num.bump { animation-duration: .01s; } .gl-hand, .gl-pill.mine.low { animation: none; } }

/* pantalla de carga: la pelota va rodando hasta la red con la carga */
.cg-gl .cg-pitch { position: absolute; left: -16px; right: -16px; bottom: 0; height: 58px; border-radius: 14px 14px 0 0; background: repeating-linear-gradient(90deg, #4FB548 0 36px, #5CC152 36px 72px); overflow: hidden; }
.cg-gl .cg-pitch i { position: absolute; left: 0; right: 0; top: 12px; height: 4px; background: rgba(255, 255, 255, .85); }
.cg-gl .cg-net { position: absolute; right: 0; bottom: 42px; width: 86px; height: 74px; }
.cg-gl .cg-go { position: absolute; left: 6px; bottom: 50px; width: 40px; height: 90px; transform: translateX(calc(var(--p, 0) * 186px)); }
.cg-gl .cg-hop { position: absolute; left: 0; bottom: 0; width: 40px; height: 40px; animation: cg-ghop .5s cubic-bezier(.3, 0, .7, 1) infinite alternate; }
.cg-gl .cg-ball { width: 40px; height: 40px; animation: cg-spin .5s linear infinite; }
.cg-gl .cg-shade { position: absolute; left: 4px; bottom: -4px; width: 32px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .2); animation: cg-gshade .5s cubic-bezier(.3, 0, .7, 1) infinite alternate; }
@keyframes cg-ghop { from { transform: translateY(0); } to { transform: translateY(-46px); } }
@keyframes cg-gshade { from { transform: scale(1); opacity: 1; } to { transform: scale(.55); opacity: .5; } }
.carga.done .cg-gl .cg-hop, .carga.done .cg-gl .cg-shade { animation: none; }