:root {
  --white-team: #f1f5f8;
  --black-team: #171c22;
  --ink: #06222f;
  --foam: #e8f7fc;
  --aqua: #6fd3ef;
  --panel: rgba(6, 34, 47, 0.82);
  --radius: 14px;
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.mode-picker { border: 0; padding: 0; margin: 22px 0 16px; display: grid; gap: 8px; }
[hidden] { display: none !important; }
@media(min-width:700px) { #overlay .card { width: min(900px, 100%); max-width: 900px; } .mode-picker { grid-template-columns: repeat(3,1fr); } .mode-picker span { height: 100%; } }
.mode-picker legend { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--aqua); margin-bottom: 10px; }
.mode-picker label { position: relative; cursor: pointer; }
.mode-picker input { position: absolute; opacity: 0; }
.mode-picker span { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid #365d6b; border-radius: 10px; background: #092a38; }
.mode-picker b { font-size: 17px; }
.mode-picker small { color: #a9c7d1; line-height: 1.35; }
.mode-picker input:checked + span { border-color: #8fe5d0; background: #123f49; box-shadow: inset 3px 0 #8fe5d0; }
.mode-picker input:focus-visible + span { outline: 2px solid white; }
.lobby-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-size: 12px; color: #b6d1da; }
.lobby-options select { background: #06222f; color: white; border: 1px solid #54818d; border-radius: 6px; padding: 7px; margin-left: 5px; }
.learn-panel { margin: 20px 0; border-top: 1px solid #34545f; padding-top: 15px; }
.learn-panel summary { color: #b7e8ee; cursor: pointer; margin-bottom: 18px; font-weight: 600; }
#career-panel { margin: 20px 0 0; font-size: 13px; color: #b8d6df; line-height: 1.6; }

/* Escalera de niveles: lo primero que ve quien entra sin saber qué hacer. */
#level-panel {
  margin: 4px 0 16px; padding: 14px 16px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(47,127,212,.22), rgba(111,211,239,.08));
  border: 1px solid rgba(143,224,247,.35);
}
.level-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.level-num {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aqua);
}
.level-head b { font-size: 20px; font-weight: 800; }
.level-goal { font-size: 14px; opacity: .9; margin-bottom: 10px; }
.level-track { display: flex; gap: 5px; margin-bottom: 12px; }
.level-track span {
  flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14);
}
.level-track span.done { background: var(--aqua); }
.level-track span.now { background: #ffd84d; }
#level-panel .cta { margin: 0; }
#level-panel.complete .cta { display: none; }
.free-play { margin-bottom: 6px; }
.free-play .mode-picker { margin-top: 12px; }
#result-level { font-size: 15px; font-weight: 700; color: #ffd84d; margin: 6px 0 2px; }
#result-level:empty { display: none; }
.career-stats { display: flex; gap: 22px; padding: 12px 0; }
.career-stats b { display: block; color: #f4fbff; font-size: 24px; }
.badge-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.badge-list span { border: 1px solid #36545d; border-radius: 5px; padding: 3px 7px; font-size: 10px; color: #8aa8b2; }
.badge-list .earned { color: #ffe4a1; border-color: #96793e; background: #453b22; }
#result-progress { padding: 14px; background: #123f49; border-radius: 10px; margin: 14px 0; line-height: 1.5; }
#session-label { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #e8f7fc; text-align: center; background: #06222fc9; padding: 5px 10px; border-radius: 6px; max-width: 55vw; }
#btn-camera, #btn-pause { position: absolute; right: 52px; top: calc(max(12px, env(safe-area-inset-top)) + 178px); width: 34px; height: 34px; border: 1px solid #64919c; border-radius: 10px; background: #092d3b; color: white; pointer-events: auto; cursor: pointer; }
#btn-pause { right: 92px; }
@media(max-width:560px) { #btn-camera,#btn-pause { top: calc(max(12px, env(safe-area-inset-top)) + 132px); width: 30px; height: 30px; } .lobby-options { flex-wrap: wrap; } }

.role-picker {
  margin: 18px 0 20px; padding: 15px; border: 1px solid rgba(111,211,239,.26);
  border-radius: 14px; background: rgba(12,62,80,.42);
}
.role-picker legend { padding: 0 6px; color: #a8eaff; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.role-picker p { margin: 0 0 11px; font-size: 13px; opacity: .82; }
.role-options { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.role-options label { cursor: pointer; position: relative; }
.role-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.role-options span { display: flex; flex-direction: column; gap: 3px; min-height: 58px; padding: 9px;
  border: 1px solid rgba(160,220,240,.24); border-radius: 9px; background: rgba(3,23,34,.52);
  transition: background .18s, border-color .18s, transform .18s; }
.role-options b { color: #eefaff; font-size: 12px; }
.role-options small { color: #a6c8d4; font-size: 11px; line-height: 1.2; }
.role-options input:checked + span { border-color: #86e7ff; background: rgba(58,155,188,.26); box-shadow: inset 0 0 0 1px rgba(134,231,255,.35); }
.role-options input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.role-options label:hover span { transform: translateY(-2px); border-color: rgba(160,220,240,.7); }
@media (max-width: 520px) { .role-options { grid-template-columns: repeat(2, minmax(0,1fr)); } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #041a26; color: var(--foam);
  font-family: var(--font);
  overscroll-behavior: none;
}

/* touch-action: none va SOLO donde se juega. Puesto en el body bloquea el
   arrastre del dedo en todo el documento, incluidas las pantallas de texto:
   se podía hacer scroll por código pero no con el dedo, que es justo lo que
   nadie comprueba mirando propiedades en el inspector. */
#game { touch-action: none; }
/* Jugando, nada se puede ampliar: un pellizco o un doble toque sobre un aviso
   o un botón hacía zoom a la página en el iPhone (que ignora user-scalable=no)
   y no había forma de volver. pan-x pan-y deja el scroll y quita el zoom, y
   como touch-action se cruza con el de los ancestros vale para todo. */
body.playing { touch-action: pan-x pan-y; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
/* Viñeta bajo el agua: oscurece los bordes y centra la mirada, como una careta.
   Es CSS y no un pase de render: en celular no cuesta nada. */
#vineta { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease-out;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, rgba(2, 30, 48, .55) 100%); }
body.playing.bajo-agua #vineta { opacity: 1; }

/* ------------------------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
body:not(.playing) #hud { opacity: 0; }
#hud { transition: opacity .3s; }

#vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 34%, rgba(2,18,26,.55) 72%, rgba(1,10,16,.95) 100%);
  opacity: .15; transition: opacity .25s;
}

/* Marcador */
#scorebar {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid rgba(160,220,240,.22);
  border-radius: 999px; padding: 6px 8px;
  backdrop-filter: blur(8px);
  font-variant-numeric: tabular-nums;
}
#scorebar .team {
  display: flex; align-items: center; gap: 7px; padding: 2px 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
#scorebar .dot { width: 10px; height: 10px; border-radius: 50%; }
/* Los dos gorros. El blanco necesita borde oscuro y el negro borde claro,
   o uno de los dos desaparece contra el panel. */
#scorebar .white .dot { background: var(--white-team); border: 1px solid rgba(6,34,47,.85); }
#scorebar .black .dot { background: var(--black-team); border: 1px solid rgba(200,230,245,.8); }
#scorebar .num { font-size: 20px; font-weight: 800; line-height: 1; }
#clock {
  font-size: 18px; font-weight: 700; padding: 4px 14px;
  background: rgba(0,0,0,.35); border-radius: 999px; letter-spacing: .05em;
}

/* Aire */
#air-col {
  position: absolute; left: max(14px, env(safe-area-inset-left)); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#air {
  position: relative;
  width: 20px; height: 34vh; min-height: 150px; max-height: 280px;
  background: rgba(4,26,38,.72); border: 1px solid rgba(160,220,240,.3);
  border-radius: 12px; overflow: hidden;
  display: flex; align-items: flex-end;
}
#air-fill {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--aqua), #2f9fd4);
  transition: height .08s linear;
}
#air.low #air-fill { background: linear-gradient(180deg, #ff9a6b, #e2453a); }
#air.low { animation: pulse .7s infinite; border-color: rgba(255,120,90,.7); }
@keyframes pulse { 50% { box-shadow: 0 0 18px rgba(226,69,58,.75); } }
#air-text {
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  opacity: .9; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Profundidad y flotabilidad. Sin esto la ley de Boyle es invisible: el
   jugador nota que sube o baja solo pero no entiende por que. */
#depth {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  margin-top: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
#depth b { font-size: 12px; font-weight: 800; letter-spacing: .02em; }
#depth span {
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .75; white-space: nowrap;
}
#depth.sinks b { color: #ffcf6b; }
#depth.floats b { color: var(--aqua); }
#depth.neutral b { color: #b6f2c9; }

/* Minimapa */
#minimap {
  position: absolute; top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 132px; height: 96px;
  border-radius: 10px; border: 1px solid rgba(160,220,240,.25);
  background: rgba(6,34,47,.6);
}

/* Posesion */
#possession {
  position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 104px);
  right: max(12px, env(safe-area-inset-right));
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(6,34,47,.7); border: 1px solid rgba(160,220,240,.2);
}
#possession.mine { background: rgba(241,245,248,.92); color: #06222f; border-color: #fff; }
#possession.team { background: rgba(160,200,220,.3); }
#possession.enemy { background: rgba(23,28,34,.92); border-color: rgba(200,230,245,.6); }

/* Tu posicion actual: cambia sola al pasar de defensa a ataque */
#role-tag {
  position: absolute; right: max(12px, env(safe-area-inset-right));
  top: calc(max(12px, env(safe-area-inset-top)) + 134px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  opacity: .72; text-align: right;
}
#role-tag b {
  font-size: 13px; letter-spacing: .02em; text-transform: none; opacity: 1;
  color: var(--aqua);
}

#assignment-marker {
  position: absolute; left: 0; top: 0; display: none;
  align-items: center; gap: 5px; padding: 5px 8px;
  border: 1px solid rgba(168,234,255,.8); border-radius: 999px;
  background: rgba(5,34,50,.76); box-shadow: 0 0 14px rgba(74,207,243,.18);
  color: #d8f7ff; font-size: 10px; font-weight: 800; letter-spacing: .025em;
  white-space: nowrap; transform: translate(-50%,-50%);
  text-shadow: 0 1px 3px #082b39;
}
#assignment-marker.show { display: flex; }
#assignment-marker .assignment-arrow { color: #7fe5ff; font-size: 13px; }
#assignment-marker.edge { border-style: dashed; }

/* Retícula */
#reticle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.75); box-shadow: 0 0 6px rgba(0,0,0,.6);
}

/* Barra de potencia del pase */
#power {
  position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%);
  width: 150px; height: 7px; border-radius: 99px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.3);
  overflow: hidden; opacity: 0; transition: opacity .12s;
}
#power.show { opacity: 1; }
#power-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7fe6b0, #ffd84d 60%, #ff7a4d);
}

/* Chuleta de teclas en partida (solo escritorio).
   En el móvil los botones están en pantalla y se ven; con teclado no hay
   nada que mirar, y quien no recuerda una tecla tiene que salir del partido
   para consultarla. Aparece al empezar, se atenua sola y se alterna con H. */
#controls {
  position: absolute; left: 14px; bottom: 14px;
  display: grid; gap: 4px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(6,34,47,.72); border: 1px solid rgba(160,220,240,.22);
  backdrop-filter: blur(6px);
  font-size: 12px; line-height: 1.2;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
#controls.show { opacity: .95; transform: none; }
#controls.faded { opacity: .38; }
#controls .ck { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
#controls .ck span { opacity: .82; }
#controls .ck.dim { margin-top: 3px; font-size: 11px; opacity: .6; }
#controls.drag .kclic { display: none; }
#controls kbd {
  display: inline-block; background: rgba(255,255,255,.15); border-radius: 4px;
  padding: 1px 5px; font-family: var(--font); font-weight: 700; font-size: 11px;
  border-bottom: 2px solid rgba(0,0,0,.35);
}

/* Avisos */
#banner {
  position: absolute; left: 50%; top: 26%; transform: translate(-50%,-50%) scale(.92);
  text-align: center; opacity: 0; transition: opacity .25s, transform .25s;
  text-shadow: 0 3px 18px rgba(0,0,0,.7);
}
#banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
#banner strong { display: block; font-size: clamp(26px, 6vw, 46px); font-weight: 800; letter-spacing: .02em; }
#banner span { display: block; font-size: 14px; opacity: .88; margin-top: 4px; }

#hint {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%);
  max-width: min(80vw, 420px); text-align: center;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(6,34,47,.86); border: 1px solid rgba(160,220,240,.28);
  font-size: 14px; line-height: 1.35;
  opacity: 0; transition: opacity .3s;
  backdrop-filter: blur(6px);
}
#hint.show { opacity: 1; }

/* Que toca hacer ahora. En un 6v6 no puedes tener el balon siempre: sin esto,
   los 37 segundos de media que pasas sin tocarlo son tiempo muerto. */
#objective {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(6,34,47,.82); border: 1px solid rgba(160,220,240,.3);
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  backdrop-filter: blur(6px); transition: background .2s, border-color .2s;
}
#objective.urgent {
  background: rgba(196,64,48,.9); border-color: #ffb3a6;
  animation: urgent .8s infinite;
}
#objective.chance { background: rgba(241,245,248,.92); color: #06222f; border-color: #fff; }
@keyframes urgent { 50% { box-shadow: 0 0 20px rgba(226,69,58,.7); } }

/* Guia hacia el cesto que atacas, solo mientras llevas el balon. Sin esto,
   en 3D y bajo el agua, la gente no sabe hacia donde ir ni cuando soltar. */
#goal-marker {
  position: absolute; left: 0; top: 0; display: none;
  transform: translate(-50%, -50%);
  padding: 4px 9px 5px; border-radius: 999px; white-space: nowrap;
  border: 2px solid #ffd84d; background: rgba(6,34,47,.8);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #ffd84d;
}
#goal-marker.show { display: block; }
#goal-marker.near { background: #ffd84d; color: #06222f; animation: pulseGoal .7s infinite; }
@keyframes pulseGoal { 50% { box-shadow: 0 0 22px rgba(255,216,77,.9); } }

#goal-arrow {
  position: absolute; left: 50%; top: 50%; color: #ffd84d;
  opacity: 0; transition: opacity .15s;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.8));
}
#goal-arrow.show { opacity: .95; }

/* Flecha al balon cuando queda fuera de la vista. Bajo el agua y en 3D es
   facilisimo perderlo, y perderlo es dejar de jugar. */
#ball-arrow {
  position: absolute; left: 50%; top: 50%; color: #ffd84d;
  opacity: 0; transition: opacity .15s;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
#ball-arrow.show { opacity: .92; }

/* Destello al marcar o encajar */
#flash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
}

/* Etiquetas de posicion sobre los jugadores */
#labels { position: absolute; inset: 0; }
.plabel {
  position: absolute; left: 0; top: 0; display: none;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  background: rgba(6,34,47,.78); border: 1px solid rgba(160,220,240,.3);
}
/* Compañero: gorro blanco. Rival: gorro negro. El HUD repite el codigo de
   color del agua para que no haya que traducir nada mentalmente. */
.plabel.mate { background: rgba(241,245,248,.9); color: #06222f; border-color: #fff; }
.plabel.foe { background: rgba(14,18,23,.88); color: #e8f7fc; border-color: rgba(200,230,245,.5); }
/* Barra de aire de cada jugador: cuanto le queda antes de tener que subir. */
.plabel .air { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(127,127,127,.35); overflow: hidden; }
.plabel .air b { display: block; height: 100%; width: 100%; background: #46c9f0; border-radius: 2px; transition: width .2s linear; }
.plabel.mate .air b { background: #1f7fb5; }
.plabel.low .air b { background: #e2453a; }
.plabel.up .air b { background: #7fe6b0; }

/* ------------------------------------------------------- Controles táctiles */
#touch-layer { position: fixed; inset: 0; display: none; touch-action: none; z-index: 2; }
body.touch.playing #touch-layer { display: block; }

#stick {
  touch-action: none;
  position: absolute; left: 6vw; bottom: max(8vh, env(safe-area-inset-bottom));
  width: 116px; height: 116px; border-radius: 50%;
  background: rgba(8,40,55,.4); border: 2px solid rgba(160,220,240,.3);
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(200,240,252,.5); border: 2px solid rgba(255,255,255,.55);
}

/* Subir / bajar: a la DERECHA, al lado de PASE y SPRINT. El pulgar izquierdo
   vive en el joystick y no puede soltarlo; el derecho ya salta entre botones. */
#vert {
  position: absolute; right: calc(5vw + 104px);
  bottom: max(7vh, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
#vert .btn { width: 58px; height: 58px; font-size: 15px; flex-direction: column; gap: 0; line-height: 1; }
#vert .btn small { font-size: 8px; letter-spacing: .08em; opacity: .85; }
#buttons {
  position: absolute; right: 5vw; bottom: max(7vh, env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse; gap: 14px; align-items: center;
}
/* El de pase es el que se usa todo el rato: más grande y el más a mano. */
#btn-throw { width: 92px; height: 92px; font-size: 14px; }
.btn {
  /* touch-action propio: sin esto el navegador puede decidir a media pulsacion
     que el gesto era un scroll, cancelar el puntero y dejarte sin "soltar". */
  touch-action: none;
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-align: center;
  background: rgba(8,40,55,.55); border: 2px solid rgba(160,220,240,.35);
  color: var(--foam); user-select: none;
}
.btn.down { background: rgba(111,211,239,.55); transform: scale(.94); }
.btn.primary { background: rgba(47,127,212,.55); border-color: #8fe0f7; }
.btn.primary.down { background: rgba(255,216,77,.7); color: var(--ink); }
/* En zona de gol el boton deja de decir PASE y dice TIRAR: es la forma mas
   directa de enseñar que ese es el momento. */
.btn.primary.shoot {
  background: rgba(255,216,77,.9); border-color: #fff; color: var(--ink);
  animation: pulseGoal .7s infinite;
}

/* ------------------------------------------------------------- Pantallas */
.screen {
  position: fixed; inset: 0; display: none;
  /* align-items:center corta por arriba lo que no cabe y deja esa parte
     imposible de alcanzar con el dedo. El centrado se hace con margin:auto
     en la tarjeta: centra cuando sobra sitio y permite scroll cuando no. */
  align-items: flex-start; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 30%, rgba(23,92,124,.95), rgba(3,16,24,.97));
  z-index: 10;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  touch-action: pan-y;     /* el dedo tiene que poder arrastrar aqui */
}
.screen.show { display: flex; }

.card {
  margin: auto;            /* centra si cabe, deja hacer scroll si no */
  max-width: 560px; width: 100%;
  background: rgba(5,28,40,.8); border: 1px solid rgba(160,220,240,.22);
  border-radius: 20px; padding: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.kicker {
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--aqua); margin-bottom: 8px;
}
.card h1 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 40px); line-height: 1.05; letter-spacing: -.01em; }
.card p { margin: 0 0 14px; line-height: 1.55; opacity: .9; font-size: 15px; }
.card .small { font-size: 13px; opacity: .65; }

.rules { display: grid; gap: 8px; margin: 16px 0 20px; }
.rule {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.4;
  background: rgba(255,255,255,.04); border-radius: 10px; padding: 9px 12px;
}
.rule b { color: var(--aqua); font-weight: 700; }

.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px,1fr)); gap: 8px; margin-bottom: 20px; }
.key { font-size: 13px; background: rgba(255,255,255,.05); border-radius: 9px; padding: 8px 10px; }
.key kbd {
  display: inline-block; background: rgba(255,255,255,.14); border-radius: 5px;
  padding: 1px 7px; font-family: var(--font); font-weight: 700; font-size: 12px;
  border-bottom: 2px solid rgba(0,0,0,.35); margin-right: 5px;
}
body.touch .desktop-only { display: none; }
body:not(.touch) .touch-only { display: none; }

button.cta {
  width: 100%; padding: 15px 20px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #38a8e0, #1f6fc4);
  color: #fff; font-family: var(--font); font-size: 17px; font-weight: 800;
  letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 10px 28px rgba(31,111,196,.4);
}
button.cta:hover { filter: brightness(1.08); }
button.cta:active { transform: translateY(1px); }
button.ghost {
  background: none; border: 1px solid rgba(160,220,240,.3); box-shadow: none;
  margin-top: 10px;
}

#end-score { font-size: 48px; font-weight: 800; margin: 6px 0 14px; letter-spacing: .04em; }

/* Vista previa de la tarjeta que se va a compartir */
#card-preview { margin: 0 0 16px; }
#card-preview canvas {
  width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto;
  border-radius: 14px; border: 1px solid rgba(160,220,240,.25);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
#share-status {
  margin-top: 10px; text-align: center; font-size: 13px;
  color: var(--aqua); min-height: 18px;
}

/* Silenciar: el sonido es media experiencia, pero nadie quiere que le suene
   el movil sin avisar. */
#btn-mute {
  position: absolute; right: max(12px, env(safe-area-inset-right));
  top: calc(max(12px, env(safe-area-inset-top)) + 178px);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  background: rgba(6,34,47,.72); border: 1px solid rgba(160,220,240,.25);
  color: var(--foam); font-size: 15px; font-family: var(--font);
  pointer-events: auto; padding: 0; line-height: 1;
}
#btn-mute.off { opacity: .5; }
/* Bloqueado por el navegador: no es lo mismo que silenciado a propósito, así
   que se avisa en vez de quedarse mudo sin explicación. */
#btn-mute.blocked {
  background: rgba(196,64,48,.9); border-color: #ffb3a6;
  animation: urgent 1.4s infinite;
}

/* EN LÍNEA. El micrófono va con los otros botones del HUD y solo existe en un
   partido de dos. Tres estados que se leen sin texto: gris (la línea de voz
   aún no conecta), normal (conectada, micro cerrado) y verde (te oyen). */
#btn-voz {
  display: none; position: absolute; padding: 0; place-items: center;
  right: calc(max(12px, env(safe-area-inset-right)) + 156px);
  top: calc(max(12px, env(safe-area-inset-top)) + 178px);
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; touch-action: manipulation;
  background: rgba(6,34,47,.72); border: 1px solid rgba(160,220,240,.25);
  color: var(--foam); pointer-events: auto; opacity: .55;
  transition: background .16s ease-out, opacity .16s ease-out;
}
body.online #btn-voz { display: grid; }
#btn-voz.lista { opacity: 1; }
#btn-voz.on { background: #1f9d6b; border-color: #9af0c8; opacity: 1; }
#btn-voz.sin { opacity: .35; }
#btn-voz i { position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
#btn-voz.on i { display: none; }
#btn-voz:focus-visible, #btn-online:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
/* En línea no hay pausa (el reloj es de los dos): el botón pasa a ser "salir". */
@media(max-width:560px) { #btn-voz { top: calc(max(12px, env(safe-area-inset-top)) + 132px); } }

#overlay #btn-online { margin-top: 10px; }
/* Tu personaje: dos fichas CON EL DIBUJO de cada uno (así se ven en el agua).
   Solo con las palabras "Hombre / Mujer" no se entendía que era el jugador.
   La elegida lleva marco claro y una marca; se guarda en el navegador. */
.sexo-chips { display: inline-flex; gap: 8px; vertical-align: middle; }
.sexo-chips button {
  position: relative; width: 88px; padding: 0 0 6px; overflow: hidden;
  background: #06222f; color: #b6d1da; border: 2px solid #3f6b78; border-radius: 10px;
  font: 700 12px var(--font); cursor: pointer; opacity: .86;
  transition: opacity .15s, border-color .15s, transform .15s;
}
.sexo-chips button::before {
  content: ''; display: block; width: 100%; aspect-ratio: 1; margin-bottom: 5px;
  background: #14708f 62% 42% / 150% no-repeat;
}
.sexo-chips button[data-sexo="h"]::before { background-image: url(../img/personaje-h.webp); }
.sexo-chips button[data-sexo="m"]::before { background-image: url(../img/personaje-m.webp); }
.sexo-chips button:hover { opacity: 1; }
.sexo-chips button:active { transform: scale(.97); }
.sexo-chips button.on { opacity: 1; border-color: #ffd23c; color: #fff; box-shadow: 0 0 0 2px rgba(255,210,60,.35); }
.sexo-chips button.on::after {
  content: '\2713'; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%;
  background: #ffd23c; color: #2a1c00; font: 800 13px/20px var(--font); text-align: center;
}
.sexo-chips button:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.sexo-pick { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex-basis: 100%; }
.sexo-pick > span:first-child { font-size: 12px; color: #b6d1da; }
.online-card { position: relative; }
.online-card .paso { display: none; }
#onlinecard[data-paso="crear"] .paso-crear,
#onlinecard[data-paso="invitado"] .paso-invitado,
#onlinecard[data-paso="sala"] .paso-sala { display: block; }
#onlinecard[data-rol="h"] .solo-g, #onlinecard[data-rol="g"] .solo-h { display: none; }
.online-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 13px; color: #b6d1da; }
.online-opt select, .online-opt input { background: #06222f; color: white; border: 1px solid #54818d; border-radius: 8px; padding: 0 10px; min-height: 44px; font: 600 15px var(--font); }
.online-opt input { width: 11em; max-width: 55%; }
.online-opt select:focus-visible, .online-opt input:focus-visible, .online-link input:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.online-link { display: flex; gap: 8px; align-items: stretch; margin-bottom: 14px; }
.online-link input { flex: 1; min-width: 0; min-height: 44px; background: #06222f; color: white; border: 1px solid #54818d; border-radius: 10px; padding: 0 12px; font: 600 14px var(--font); }
.online-link .cta { margin: 0; width: auto; white-space: nowrap; }
/* Los cuatro asientos, de dos en dos: se ve de un vistazo quién va con quién. */
.online-gente { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.online-gente li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(6,34,47,.7); border: 1px solid rgba(160,220,240,.18); min-width: 0; }
.online-gente li i { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; background: #f1f5f8; border: 2px solid #fff; }
.online-gente li.negro i { background: #0e1217; border-color: #8fa7b3; }
.online-gente li b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-gente li span { font-size: 11px; color: #9fbcc7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-gente li.libre { opacity: .55; border-style: dashed; }
.online-gente li.libre b { font-weight: 600; }
.online-gente li.yo { border-color: var(--aqua); }
.online-cfg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.online-cfg .online-opt { flex-direction: column; align-items: stretch; gap: 4px; }
.online-reglas { margin: 0 0 12px; font-size: 13px; color: #b6d1da; }
#onlinecard[data-rol="h"] .online-reglas { display: none; }
#online-empezar:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.online-estado { min-height: 1.5em; margin: 12px 0 8px; font-weight: 700; color: var(--aqua); }
/* El nombre de una persona pesa más que la etiqueta de un bot. */
.plabel.persona span { font-weight: 800; }
@media(max-width:480px) { .online-link { flex-direction: column; } .online-opt { flex-direction: column; align-items: stretch; } .online-opt input { width: auto; max-width: none; } }

/* El HUD queda sobre la capa de gestos. Solo sus botones interceptan el dedo. */
#hud #btn-mute, #hud #btn-camera, #hud #btn-pause {
  width: 44px; height: 44px; touch-action: manipulation;
  top: calc(max(12px, env(safe-area-inset-top)) + 178px);
}
#hud #btn-mute { right: max(12px, env(safe-area-inset-right)); }
#hud #btn-camera { right: calc(max(12px, env(safe-area-inset-right)) + 52px); }
#hud #btn-pause { right: calc(max(12px, env(safe-area-inset-right)) + 104px); }
@media(max-width:560px) {
  #hud #btn-mute, #hud #btn-camera, #hud #btn-pause {
    top: calc(max(12px, env(safe-area-inset-top)) + 132px);
  }
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, #4fd0ef, #1f6fc4);
  display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #04222f;
}
.brand-text { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

/* ------------------------------------------------------------- Pantallas estrechas
   A 375 px el marcador centrado y el minimapa a la derecha se pisan. Se
   encoge todo el HUD en vez de reordenarlo, para que sea el mismo juego. */
@media (max-width: 560px) {
  #scorebar { gap: 4px; padding: 4px 6px; }
  #scorebar .team { gap: 5px; padding: 2px 6px; font-size: 11px; }
  #scorebar .num { font-size: 16px; }
  #scorebar .dot { width: 8px; height: 8px; }
  #clock { font-size: 14px; padding: 3px 9px; }

  #minimap { width: 88px; height: 64px; }
  #possession {
    top: calc(max(12px, env(safe-area-inset-top)) + 72px);
    font-size: 10px; padding: 4px 8px; max-width: 58vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  #depth b { font-size: 11px; }
  #depth span { font-size: 7.5px; }
  #btn-mute { top: calc(max(12px, env(safe-area-inset-top)) + 132px); width: 30px; height: 30px; font-size: 13px; }
  #role-tag { top: calc(max(12px, env(safe-area-inset-top)) + 96px); font-size: 8px; }
  #role-tag b { font-size: 11px; }
  #air { width: 14px; height: 26vh; min-height: 110px; }
  #air-col { left: max(8px, env(safe-area-inset-left)); top: 44%; }
  #air-text { font-size: 10px; }

  #objective { bottom: 22%; font-size: 12px; padding: 6px 12px; max-width: 86vw; overflow: hidden; text-overflow: ellipsis; }
  #hint { bottom: 30%; font-size: 13px; padding: 9px 14px; }
  #banner { top: 22%; }

  .btn { width: 64px; height: 64px; font-size: 11px; }
  #buttons { gap: 12px; }
  #btn-throw { width: 84px; height: 84px; font-size: 13px; }
  #stick { width: 104px; height: 104px; }
  #stick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  #vert { right: calc(5vw + 96px); gap: 8px; }
  #vert .btn { width: 50px; height: 50px; font-size: 13px; }
}

/* Movil en horizontal: casi no hay alto, el HUD tiene que apretarse */
@media (max-height: 460px) {
  #air { height: 36vh; min-height: 90px; }
  #hint { bottom: 24%; }
  #banner { top: 34%; }
  #objective { bottom: 4%; }
  #stick { bottom: max(4vh, env(safe-area-inset-bottom)); }
  #buttons { bottom: max(3vh, env(safe-area-inset-bottom)); }
  /* Acostado no hay alto para dos columnas de botones: chocaban con pausa,
     cámara y sonido de arriba. Todo en UNA fila abajo a la derecha:
     SUBIR · BAJAR · SPRINT · PASE (el pulgar derecho los barre de lado). */
  #buttons { flex-direction: row; align-items: flex-end; gap: 10px; right: max(3vw, env(safe-area-inset-right)); }
  .btn { width: 58px; height: 58px; font-size: 10px; }
  #btn-throw { width: 78px; height: 78px; font-size: 12px; }
  #vert { bottom: max(3vh, env(safe-area-inset-bottom)); flex-direction: row; gap: 8px;
    right: calc(max(3vw, env(safe-area-inset-right)) + 78px + 58px + 28px); }
  #vert .btn { width: 52px; height: 52px; font-size: 13px; }
  #objective { left: 42%; max-width: 34vw; }
  #grip { top: 24%; }
}


/* ------------------------------------------------- Glosario de posiciones */
.positions {
  background: rgba(255,255,255,.04); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px;
}
.pos-title {
  font-size: 12px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; opacity: .6; margin-bottom: 10px;
}
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pos-col { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.35; }
.pos-col span { opacity: .88; }
.pos-col b { color: var(--aqua); font-weight: 700; }
.pos-head {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; align-self: flex-start; margin-bottom: 2px;
}
.pos-head.def { background: rgba(23,28,34,.9); border: 1px solid rgba(200,230,245,.4); }
.pos-head.atk { background: rgba(241,245,248,.92); color: #06222f; }
@media (max-width: 420px) {
  .pos-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Panel de diagnóstico (?debug en la URL). Sirve para que el juego cuente qué
   recibe en un teléfono al que no tengo acceso. */
#debug-panel {
  position: fixed; left: 8px; top: 40%; z-index: 40;
  max-width: 62vw; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,.78); border: 1px solid rgba(160,220,240,.4);
  color: #9fe8ff; font: 600 10px/1.45 ui-monospace, monospace;
  white-space: pre; pointer-events: none;
}

#debug-send {
  position: fixed; left: 8px; bottom: 8px; z-index: 41;
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  background: #1f6fc4; color: #fff; border: 1px solid #8fe0f7;
  font: 800 11px/1 var(--font); letter-spacing: .05em;
  touch-action: manipulation;
}

/* ================================================================ Portada */
/* Pantalla de bienvenida de juego: la piscina viva se ve detrás y el menú va
   encima como en una consola. Se escribe por bloques, sin tocar .card (la
   pausa y el final siguen usándola). Escala: 4·8·12·16·24·32·48·64. */
#overlay {
  background:
    linear-gradient(90deg, rgba(3,16,24,.92) 0%, rgba(3,16,24,.78) 45%, rgba(3,16,24,.35) 100%),
    radial-gradient(ellipse at 80% 20%, rgba(111,211,239,.18), transparent 55%);
  align-items: stretch;
  padding: 0;
}
#overlay::after {
  /* viñeta de pantalla de carga, como en un juego */
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.lobby {
  position: relative; z-index: 1;
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px) max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 24px; min-height: 100%;
}
.lobby-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.lobby-top .brand { margin: 0; }
.lobby-top .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.lobby-top .brand-text small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 600; }

.lobby-main {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .95fr);
  gap: 32px; align-items: start; margin: auto 0;
}
.lobby-hero .kicker { margin-bottom: 8px; }
.lobby-hero h1 {
  margin: 0 0 12px;
  font-family: 'Barlow Condensed', var(--font); font-weight: 800; text-transform: uppercase;
  font-size: clamp(52px, 8.5vw, 108px); line-height: .9; letter-spacing: -.01em;
  background: linear-gradient(180deg, #ffffff 0%, #bfeeff 70%, #6fd3ef 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));
}
.lobby-hero .lead { max-width: 52ch; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.6; opacity: .88; margin: 0 0 24px; }

/* Misión: la tarjeta del nivel, lo primero que se toca */
#overlay #level-panel {
  margin: 0; padding: 20px 22px 22px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(47,127,212,.35), rgba(5,28,40,.75));
  border: 1px solid rgba(143,224,247,.4);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  max-width: 520px;
}
#overlay .level-head b { font-family: 'Barlow Condensed', var(--font); font-size: 30px; text-transform: uppercase; letter-spacing: .01em; }
#overlay .level-goal { font-size: 15px; margin-bottom: 14px; }
#overlay .level-track { margin-bottom: 16px; }
#overlay .level-track span { height: 7px; }

/* Botones de juego */
#overlay .cta {
  margin: 0; width: 100%; border-radius: 12px; padding: 16px 24px;
  font-family: 'Barlow Condensed', var(--font); font-size: 22px; letter-spacing: .08em;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), filter .15s;
}
#overlay .cta.primary {
  background: linear-gradient(180deg, #ffe27a, #ffc107); color: #06222f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 10px 30px rgba(255,193,7,.35);
}
#overlay .cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
#overlay .cta:active { transform: translateY(1px) scale(.99); }
#overlay .cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#overlay .cta.loading { opacity: .55; cursor: progress; position: relative; }
#overlay .cta.loading::after {
  content: '· · ·'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  letter-spacing: .2em; animation: dots 1s steps(3) infinite;
}
@keyframes dots { 0% { opacity: .2; } 100% { opacity: 1; } }

/* Juego libre: panel lateral */
.lobby-free {
  padding: 20px 20px 22px; border-radius: 16px;
  background: rgba(5,28,40,.72); border: 1px solid rgba(160,220,240,.2);
  backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 16px;
}
.panel-title {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .6;
}
#overlay fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
#overlay legend { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 8px; padding: 0; }
#overlay .mode-picker { display: grid; gap: 8px; grid-template-columns: 1fr !important; margin: 0; }
#overlay .mode-picker span { height: auto; }
#overlay .mode-picker label, #overlay .role-options label {
  display: block; cursor: pointer; margin: 0; padding: 0; border: 0; background: none;
}
#overlay .mode-picker input, #overlay .role-options input { position: absolute; opacity: 0; width: 0; height: 0; }
#overlay .mode-picker span {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; min-height: 56px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(160,220,240,.16);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), background .15s, border-color .15s;
}
#overlay .mode-picker span i {
  grid-row: 1 / 3; font-style: normal; font-family: 'Barlow Condensed', var(--font); font-weight: 800;
  font-size: 24px; color: rgba(255,255,255,.35); text-align: center;
}
#overlay .mode-picker span b { font-size: 15px; }
#overlay .mode-picker span small { font-size: 12px; opacity: .7; line-height: 1.3; }
#overlay .mode-picker input:checked + span { background: rgba(47,127,212,.3); border-color: #8fe0f7; transform: translateX(3px); }
#overlay .mode-picker input:checked + span i { color: var(--aqua); }
#overlay .mode-picker input:focus-visible + span, #overlay .role-options input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
#overlay .role-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
#overlay .role-options label[hidden] { display: none; }
#overlay .role-options span {
  display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center;
  padding: 10px 6px; min-height: 60px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(160,220,240,.16);
  transition: background .15s, border-color .15s, transform .15s cubic-bezier(.2,.8,.2,1);
}
#overlay .role-options span b { font-size: 14px; }
#overlay .role-options span small { font-size: 10.5px; opacity: .65; line-height: 1.25; }
#overlay .role-options input:checked + span { background: rgba(241,245,248,.92); color: #06222f; border-color: #fff; transform: translateY(-2px); }
#overlay .role-options input:checked + span small { opacity: .8; }
#overlay .lobby-options { margin: 0; font-size: 12px; }
#overlay .lobby-options select { min-height: 40px; padding: 6px 10px; border-radius: 8px; }
#overlay .team-chip { display: inline-flex; align-items: center; gap: 6px; }
#overlay .team-chip i { width: 10px; height: 10px; border-radius: 50%; background: #f4f7f9; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
#overlay #btn-start { background: rgba(255,255,255,.08); border: 1px solid rgba(160,220,240,.35); color: var(--foam); }
#overlay #btn-start:hover { background: rgba(255,255,255,.14); }

/* Carrera: chips arriba a la derecha */
#overlay #career-panel { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: flex-end; font-size: 12px; }
#overlay .career-stats { display: flex; gap: 8px; padding: 0; }
#overlay .career-stats span {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 999px;
  background: rgba(5,28,40,.7); border: 1px solid rgba(160,220,240,.25); white-space: nowrap;
}
#overlay .career-stats b { display: inline; font-size: 16px; }
#overlay #career-panel > div:not(.career-stats):not(.badge-list), #overlay #career-panel small { display: none; }
#overlay .badge-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#overlay .badge-list span { font-size: 10.5px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); opacity: .5; }
#overlay .badge-list span.earned { opacity: 1; background: rgba(255,216,77,.2); border: 1px solid rgba(255,216,77,.5); }

#overlay .learn-panel { margin: 0; border-top: 1px solid rgba(160,220,240,.18); padding-top: 12px; }
#overlay .learn-panel summary { margin-bottom: 16px; font-size: 13px; }

@media (max-width: 820px) {
  .lobby-main { grid-template-columns: 1fr; gap: 20px; }
  .lobby-hero h1 { font-size: clamp(48px, 15vw, 76px); }
  #overlay #level-panel { max-width: none; }
  #overlay #career-panel { justify-content: flex-start; }
  #overlay .badge-list { display: none; }
  #overlay { background: linear-gradient(180deg, rgba(3,16,24,.9) 0%, rgba(3,16,24,.86) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  #overlay * { transition: none !important; }
}

.lang-switch { display: inline-flex; border: 1px solid rgba(160,220,240,.3); border-radius: 999px; overflow: hidden; margin-left: auto; }
.lang-switch button {
  min-width: 44px; height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--foam);
  font: 800 12px/1 var(--font); letter-spacing: .1em; cursor: pointer;
}
.lang-switch button.active { background: var(--aqua); color: #06222f; }
.lang-switch button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }


/* ---- Forcejeo, portador y portero ------------------------------------- */
/* Marco amarillo mientras TÚ llevas el balón: en primera persona no ves tu
   cuerpo destellar, así que destella la pantalla. */
#carry-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  box-shadow: inset 0 0 0 3px rgba(255,205,50,.9), inset 0 0 80px 8px rgba(255,200,40,.4);
}
body.carrying #carry-glow { opacity: 1; animation: carryPulse 1.1s ease-in-out infinite; }
@keyframes carryPulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { body.carrying #carry-glow { animation: none; } }

#grip {
  position: absolute; left: 50%; top: 31%; transform: translateX(-50%);
  display: none; min-width: 200px; max-width: 86vw; padding: 7px 14px 9px; border-radius: 12px;
  background: rgba(6,34,47,.86); border: 1.5px solid rgba(255,210,60,.8);
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #ffe27a;
  pointer-events: none;
}
#grip.show { display: block; }
#grip i { display: block; height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
#grip b { display: block; height: 100%; width: 100%; background: #ffd23c; border-radius: 4px; }
#grip.danger { border-color: #ff5a48; color: #ffc2b8; }
#grip.danger b { background: #ff5a48; }
#grip.go { border-color: #6ef0a2; color: #c9ffe0; }
#grip.go b { background: #6ef0a2; }

#possession.mine { background: #ffd23c; color: #2a1c00; border-color: #fff3b0; }
.plabel.ball { background: #ffd23c; color: #2a1c00; border-color: #fff3b0; }
.plabel.target { box-shadow: 0 0 0 2px #7fe5ff, 0 0 14px rgba(127,229,255,.8); }
/* Rótulo sobre TU jugador en cámara exterior mientras llevas el balón. */
#self-ball {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; font: 800 11px var(--font); letter-spacing: .06em;
  background: #ffd23c; color: #2a1c00; border: 1px solid #fff3b0;
  box-shadow: 0 2px 10px rgba(0,0,0,.35); opacity: 0; transition: opacity .15s;
}
#self-ball::before { content: '\25CF  '; }
#self-ball.show { opacity: 1; }

/* El botón de acción: un color por acción, para saber qué hace sin leerlo.
   Verde meter · azul pasar · rojo quitar · blanco pedir · apagado sin balón. */
#btn-throw { flex-direction: column; gap: 1px; line-height: 1; }
#btn-throw i { font-style: normal; font-size: 20px; line-height: 1; }
#btn-throw b { font-size: 14px; letter-spacing: .04em; }
#btn-throw small { font-size: 9px; font-weight: 700; letter-spacing: .02em; opacity: .92; max-width: 80px; }
#btn-throw.pass { background: rgba(38,120,222,.9); color: #fff; border-color: #bfe3ff; }
#btn-throw.shoot { background: #2fd47a; color: #04230f; border-color: #fff; animation: pulseGoal .7s infinite; }
#btn-throw.steal { background: #f0483e; color: #fff; border-color: #ffd0cc; }
#btn-throw.call { background: #f4fbff; color: #06222f; border-color: #7fe5ff; }
#btn-throw.idle { background: rgba(8,40,55,.5); color: rgba(232,247,252,.6); border-color: rgba(160,220,240,.25); }
#btn-throw.down { filter: brightness(1.25); transform: scale(.94); }
#btn-throw.cambio { animation: btnCambio .45s ease-out; }
#btn-throw.shoot.cambio { animation: btnCambio .45s ease-out, pulseGoal .7s .45s infinite; }
@keyframes btnCambio { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); transform: scale(1.14); } 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #btn-throw.cambio, #btn-throw.shoot { animation: none; } }

/* La ficha de posición elegida es clara: su texto va en tinta oscura. Antes
   heredaba el blanco de .role-options b y quedaba blanco sobre blanco. */
#overlay .role-options input:checked + span b { color: #06222f; }
#overlay .role-options input:checked + span small { color: #2f5566; opacity: 1; }


/* ---- Donación ---------------------------------------------------------- */
.donate-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin: 14px 0 0; padding: 12px 16px; min-height: 44px; border-radius: 12px; cursor: pointer;
  background: rgba(255,210,60,.1); border: 1px solid rgba(255,210,60,.55); color: #ffe27a;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .04em;
  transition: background .15s ease-out, transform .15s ease-out;
}
.donate-btn:hover { background: rgba(255,210,60,.2); transform: translateY(-1px); }
.donate-btn:active { transform: scale(.98); }
.donate-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#donate { z-index: 60; }
.donate-card { position: relative; max-width: 640px; text-align: center; }
.donate-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(160,220,240,.3); color: inherit;
  font-size: 24px; line-height: 1; cursor: pointer;
}
.donate-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.donate-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
@media (min-width: 620px) { .donate-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.donate-opt { padding: 16px; border-radius: 14px; background: rgba(3,23,34,.5); border: 1px solid rgba(160,220,240,.22); }
.donate-opt h2 { margin: 0 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #a8eaff; }
.donate-opt img { display: block; margin: 0 auto 12px; width: 220px; max-width: 100%; height: auto; border-radius: 10px; background: #fff; padding: 8px; }
.donate-key { margin-bottom: 10px; font-size: 16px; }
.donate-key b { color: #ffe27a; user-select: all; }
.donate-opt .cta { display: block; width: 100%; text-decoration: none; text-align: center; }
.donate-opt a.cta {
  box-sizing: border-box; padding: 14px 16px; min-height: 48px; border-radius: 12px;
  background: linear-gradient(#ffe27a, #ffc93c); color: #06222f; border: 0;
  font-weight: 800; letter-spacing: .05em; font-size: 15px;
}
.donate-opt a.cta:hover { filter: brightness(1.08); }
.donate-opt a.cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


/* Zarpazo al quitar: dos brazos que entran desde abajo hacia el centro. */
#swipe { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#swipe i {
  position: absolute; bottom: -6%; width: 15vmin; height: 62vmin; border-radius: 9vmin 9vmin 3vmin 3vmin;
  background: linear-gradient(to top, rgba(240,246,250,.0), rgba(240,246,250,.85) 35%, rgba(201,150,110,.95) 82%);
  box-shadow: 0 0 22px rgba(255,255,255,.35); opacity: 0; transform-origin: 50% 100%;
}
#swipe i:first-child { left: 22%; --a: 34deg; }
#swipe i:last-child { right: 22%; --a: -34deg; }
#swipe.go i { animation: swipeArm .34s cubic-bezier(.2,.8,.2,1); }
#swipe.go i:last-child { animation-delay: .07s; }
@keyframes swipeArm {
  0% { opacity: 0; transform: translateY(70%) rotate(calc(var(--a) * .2)); }
  35% { opacity: .95; transform: translateY(0) rotate(var(--a)); }
  100% { opacity: 0; transform: translateY(45%) rotate(calc(var(--a) * 1.5)); }
}
@media (prefers-reduced-motion: reduce) { #swipe.go i { animation-duration: .01s; } }


/* ---- Portada: el partido manda, los niveles acompañan ------------------- */
#overlay #match-panel {
  margin: 0; padding: 20px 22px 22px; border-radius: 16px; max-width: 520px;
  background: linear-gradient(135deg, rgba(47,127,212,.35), rgba(5,28,40,.75));
  border: 1px solid rgba(143,224,247,.4);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
#overlay #match-panel .lobby-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
#overlay #btn-start.primary {
  background: linear-gradient(180deg, #ffe27a, #ffc107); color: #06222f; border: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 10px 30px rgba(255,193,7,.35);
}
#overlay .lobby-free #level-panel { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; margin: 0; }
#overlay .lobby-free .level-head b { font-size: 24px; }
#overlay #btn-level { background: rgba(255,255,255,.08); border: 1px solid rgba(160,220,240,.35); color: var(--foam); box-shadow: none; }
#overlay #btn-level:hover { background: rgba(255,255,255,.14); }
@media (max-width: 820px) { #overlay #match-panel { max-width: none; } }
#overlay #match-panel .level-head { flex-wrap: wrap; gap: 2px 10px; }
#overlay #match-panel .level-head .level-num { flex-basis: 100%; }

/* Mantener un botón pulsado NO selecciona su texto ni abre el menú de copiar.
   Hace falta el prefijo -webkit-: sin él, Safari y varios Android seleccionaban
   "PASE" o "SPRINT" al dejar el dedo, justo cuando más se mantiene (sprint,
   subir, bajar, joystick). */
#hud, #hud *, #touch-layer, #touch-layer *, .btn, canvas,
body.playing, body.playing * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}


/* ---- Entrenador del nivel 1 -------------------------------------------- */
#coach {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
  display: none; align-items: center; gap: 12px; width: max-content; max-width: min(92vw, 520px);
  padding: 12px 18px; border-radius: 16px; pointer-events: none;
  background: rgba(6,34,47,.92); border: 2px solid #ffd23c; color: #fff;
  font-size: 17px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
}
#coach.show { display: flex; }
#coach .coach-step {
  flex: none; padding: 5px 10px; border-radius: 999px; background: #ffd23c; color: #06222f;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
#coach.go { background: #ffd23c; color: #06222f; border-color: #fff; }
#coach.go .coach-step { background: #06222f; color: #ffd23c; }
/* El control que toca ahora late en amarillo. */
.coach-target { animation: coachPulse 1s ease-out infinite; border-color: #ffd23c !important; }
@keyframes coachPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,210,60,.95); }
  70% { box-shadow: 0 0 0 22px rgba(255,210,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,210,60,0); }
}
@media (max-height: 460px) { #coach { top: 16%; font-size: 15px; padding: 9px 14px; } }
@media (prefers-reduced-motion: reduce) { .coach-target { animation: none; box-shadow: 0 0 0 5px #ffd23c; } }
/* En el tutorial solo habla el entrenador: fuera pistas, objetivo y rótulos que se le montaban encima. */
body.guided #session-label, body.guided #hint, body.guided #objective, body.guided #banner,
body.guided #assignment-marker, body.guided #controls-help, body.guided #possession, body.guided #role-tag { display: none !important; }

/* El objetivo de abajo, en modo entrenador (primeros partidos): más grande y en amarillo. */
#objective.coach { background: rgba(6,34,47,.94); border: 2px solid #ffd23c; color: #fff; font-weight: 800; font-size: 15px; padding: 9px 16px; max-width: min(88vw, 460px); white-space: normal; text-align: center; line-height: 1.25; }
#objective.coach.go { background: #ffd23c; color: #06222f; border-color: #fff; }
@media (max-height: 460px) { #objective.coach { font-size: 13px; max-width: 36vw; padding: 7px 12px; } }

/* Lejos: el botón no promete quitar. Mismo rojo, apagado, con la distancia. */
#btn-throw.far { background: rgba(60,20,22,.72); color: #ffd9d4; border-color: rgba(240,72,62,.75); }
#btn-throw.far b { font-size: 11px; letter-spacing: .02em; }
#btn-throw.far small { font-size: 13px; font-weight: 800; opacity: 1; }

/* Celular en vertical (11-10-2026, grabación de un niño jugando): el objetivo
   y el aviso caían ENCIMA del botón de acción y no se leía ni uno ni otro; y
   el joystick quedaba a un dedo de la barra del navegador (un toque de más
   abrió el asistente de Google y se acabó la partida). Los textos suben por
   encima de la columna de botones y los mandos se separan del borde. */
@media (max-width: 560px) and (min-height: 461px) and (orientation: portrait) {
  #stick { bottom: max(13vh, calc(env(safe-area-inset-bottom) + 70px)); }
  #buttons, #vert { bottom: max(12vh, calc(env(safe-area-inset-bottom) + 64px)); }
  #objective { bottom: calc(max(12vh, env(safe-area-inset-bottom) + 64px) + 176px); max-width: 92vw; white-space: normal; text-align: center; line-height: 1.2; }
  #hint { bottom: calc(max(12vh, env(safe-area-inset-bottom) + 64px) + 244px); max-width: 88vw; border-radius: 16px; }
  #objective.coach { max-width: 92vw; }
}

/* ---- Tabla por países --------------------------------------------------- */
.lobby-main > .lobby-hero { grid-row: 1 / span 3; }
.lobby-main { grid-template-rows: auto auto 1fr; }
.lobby-rank { grid-column: 2; gap: 12px; }
.lobby-rank[hidden], #end-pais[hidden] { display: none; }
.rk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rk-list li {
  display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 15px;
}
.rk-list li.mio { background: rgba(255,216,77,.16); box-shadow: inset 0 0 0 1px rgba(255,216,77,.55); }
.rk-list li.rk-sep { display: block; padding: 0; background: none; text-align: center; opacity: .45; line-height: 1; }
.rk-pos { font-family: 'Barlow Condensed', var(--font); font-weight: 800; font-size: 17px; opacity: .6; text-align: right; }
.rk-flag { font-size: 18px; line-height: 1; text-align: center; }
.rk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rk-list b { font-family: 'Barlow Condensed', var(--font); font-size: 20px; font-variant-numeric: tabular-nums; color: #f4fbff; }
.rk-me { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rk-me label { opacity: .7; }
.rk-me select {
  flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 6px 10px; border-radius: 8px; font: inherit;
  background: rgba(5,28,40,.9); color: var(--foam); border: 1px solid rgba(160,220,240,.35);
}
.rk-me select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#end-pais { padding: 14px; margin: 0 0 14px; border-radius: 10px; background: #0d3340; border: 1px solid rgba(255,216,77,.4); text-align: left; }
#end-pais .rk-plus { font-family: 'Barlow Condensed', var(--font); font-weight: 800; font-size: 24px; color: #ffd84d; line-height: 1.15; }
#end-pais .rk-line { font-size: 14px; margin: 4px 0 10px; opacity: .9; }
#end-pais .small { margin: 10px 0 0; }
@media (max-width: 820px) {
  .lobby-main > .lobby-hero { grid-row: auto; }
  .lobby-main { grid-template-rows: none; }
  .lobby-rank { grid-column: auto; }
}

/* Sala de espera: chuleta de cuatro líneas con el color de cada acción. */
.online-ayuda { list-style: none; margin: 12px 0; padding: 12px; display: grid; gap: 8px; border-radius: 10px; background: rgba(255,255,255,.05); text-align: left; font-size: 13px; line-height: 1.35; }
.online-ayuda li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.online-ayuda i { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: #2f7fd4; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.online-ayuda i.k-steal { background: #f0483e; }
.online-ayuda i.k-sprint { background: #ffc107; }
.online-ayuda i.k-air { background: #6fd3ef; }

/* Sonido, siempre a la vista fuera del partido (dentro está el ♪ del HUD). */
#btn-sonido {
  position: fixed; z-index: 70; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(5,28,40,.92); color: var(--foam); border: 1px solid rgba(160,220,240,.4);
  font: 700 13px var(--font); letter-spacing: .02em; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: background .15s, transform .15s cubic-bezier(.2,.8,.2,1);
}
#btn-sonido:hover { background: rgba(14,52,70,.95); }
#btn-sonido:active { transform: scale(.97); }
#btn-sonido:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#btn-sonido.off { color: #ffd0cc; border-color: rgba(240,72,62,.6); }
#btn-sonido .s-ico { font-size: 16px; line-height: 1; }
body.playing #btn-sonido { display: none; }

/* Instalar como app: junto a "Apoya el juego", mismo peso visual. */
.lobby-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.lobby-acciones > * { margin: 0; }
.instalar-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border-radius: 12px; cursor: pointer;
  background: rgba(47,127,212,.28); color: var(--foam); border: 1px solid rgba(143,224,247,.5); font-family: var(--font); text-align: left;
  transition: background .15s, transform .15s cubic-bezier(.2,.8,.2,1);
}
.instalar-btn[hidden], .instalar-nota[hidden] { display: none; }
.instalar-btn > span:first-child { font-size: 20px; line-height: 1; }
.instalar-btn b { display: block; font-size: 14px; }
.instalar-btn small { display: block; font-size: 11px; opacity: .7; }
.instalar-btn:hover { background: rgba(47,127,212,.42); transform: translateY(-1px); }
.instalar-btn:active { transform: scale(.98); }
.instalar-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.instalar-nota { margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(47,127,212,.2); border: 1px solid rgba(143,224,247,.35); font-size: 14px; line-height: 1.5; max-width: 60ch; }
.lobby-acciones .donate-btn, .lobby-acciones .instalar-btn { width: auto; flex: 1 1 220px; }
.lobby-legal { margin: 0; font-size: 12px; opacity: .65; }
.lobby-legal a { color: inherit; display: inline-block; padding: 12px 0; }
.lobby-legal a:hover { opacity: 1; text-decoration: underline; }

/* Tu equipo (lo armado en /armar.html), bajo "Tu personaje" */
.equipo-pick { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex-basis: 100%; }
.equipo-pick > span:first-child { font-size: 12px; color: #b6d1da; }
.equipo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.equipo-fila b { font-size: 13px; font-weight: 600; color: #e8f7fc; }
#btn-armar { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #ffd23c; color: #ffd23c; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s ease-out, color .15s ease-out; }
#btn-armar:hover { background: #ffd23c; color: #06222f; }
#btn-armar:active { transform: scale(.97); }
#btn-armar:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* Enlaces a los otros juegos (hockey subacuático y waterpolo) */
.otros-juegos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; font-size: 14px; }
.otros-juegos span { grid-column: 1 / -1; color: #b6d1da; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; }
.otros-juegos a { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: rgba(111,211,239,.14); border: 1px solid rgba(111,211,239,.45); color: #e8f7fc; text-decoration: none; transition: background .15s ease-out, transform .15s ease-out; }
.otros-juegos img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 252; object-fit: cover; }
.otros-juegos b { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; font-weight: 700; }
.otros-juegos b::after { content: '›'; color: var(--aqua); font-size: 18px; }
.otros-juegos a:hover { background: rgba(111,211,239,.28); transform: translateY(-2px); }
.otros-juegos a:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .otros-juegos a { transition: none; } .otros-juegos a:hover { transform: none; } }
.otros-juegos a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }