@font-face {
  font-family: 'VAGRoundBold';
  src: url('../fonts/OPTIVagRound-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Dimbo';
  src: url('../fonts/Dimbo Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── iOS: NO promover capas GPU permanentes dentro del #app-stage ──────────────
   REGRESIÓN del crash cities→monuments en campaña: apareció al meter el
   fixed-aspect-stage (#app-stage con transform:scale). Bajo ese ancestro
   transformado, cada `will-change:transform` / translateZ(0) / backface-hidden
   crea una capa de compositing (IOSurface) PERMANENTE a resolución de diseño
   (1920px). En 1.15 (sin el stage) esos mismos hints no costaban nada. Acumuladas
   entre los 4 modos agotan la GPU de iOS y reinician WebContent. En iOS no hay
   hover ni se necesita la promoción: se anulan. (PC sigue igual.) */
body.is-ios * { will-change: auto !important; }
body.is-ios .loading-play-single,
body.is-ios .loading-secondary-btn {
  transform: none !important;
  backface-visibility: visible !important;
}

html, body, #app-stage-outer { background: #ffffff; }
/* Aislar repaints de cada pantalla para que no invaliden el resto del árbol */
#loading-screen, #splash-screen, #gameover-screen, #results-screen, #final-screen {
  contain: layout style paint;
}
@media (prefers-color-scheme: dark) { html, body, #app-stage-outer { background: #1e1f22; } }
:fullscreen,
:-webkit-full-screen { background: #000000 !important; }
body {
  min-height: 100vh;
  font-family: 'Georgia', serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* ── STAGE DE ASPECTO FIJO ────────────────────────────────────
   Todo el juego vive en #app-stage, un contenedor de TAMAÑO FIJO
   (1920×911 = el viewport de referencia) que se escala en bloque con
   transform:scale(var(--app-fit)) para encajar en cualquier ventana.
   Como es un `container-type: size`, las unidades internas cqmin/cqh/cqw
   se calculan contra ESTE tamaño fijo, el layout queda CONGELADO y solo
   cambia la escala. El blanco alrededor (body) hace de letterbox real. */
/* Capa EXTERNA: define el ÁREA VISIBLE de la app = la zona jugable central
   (1344×911, el 70% central del diseño de 1920). Escala/centra con transform y
   recorta (overflow) los 288px de cada lado del contenido. El blanco de alrededor
   (body) es el letterbox REAL que limita la app a la resolución — ya no hacen falta
   barras blancas falsas. */
#app-stage-outer {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1344px;
  height: 911px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--app-fit, 1));
  transform-origin: 50% 50%;
}
/* Capa INTERNA: el contenido en su sistema completo de 1920×911 (contra el que se
   miden las cq), centrado dentro del área visible (left:-288 = -(1920-1344)/2). */
#app-stage {
  position: absolute;
  top: 0;
  left: -288px;
  width: 1920px;
  height: 911px;
  container-type: size;
  container-name: stage;
  background: #5b9fd4 url('../images/background.png') center center / 1540px no-repeat;
  overflow: hidden;
}


/* ── FLIGHT ATTENDANT ───────────────────────────────── */
.flightatt-splash {
  position: absolute !important;
  top: 76%;
  left: 73.5%;
  width: 24.12cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 18;
  will-change: transform;
}

#splash-screen .flightatt-splash.animate-in {
  animation: slide-in-flightatt 0.3s linear forwards;
}

.flightatt {
  position: absolute !important;
  top: 76%;
  left: 75%;
  width: 18.59cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 18;
  will-change: transform;
}

#splash-screen .flightatt.animate-in {
  animation: slide-in-flightatt 0.3s linear forwards;
}

@keyframes slide-in-flightatt {
  from { transform: translate(calc(-50% + 510px), -50%); }
  to   { transform: translate(-50%, -50%); }
}

.splash-text2-wrap {
  position: absolute;
  bottom: 20%;
  left: 68%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 20;
  width: 25%;
  will-change: transform;
}

.splash-text2-wrap.animate-in {
  animation: slide-in-text2 0.3s linear forwards;
}

@keyframes slide-in-text2 {
  from { transform: translate(calc(-50% + 510px), -50%); }
  to   { transform: translate(-50%, -50%); }
}

.splash-text2 {
  display: block;
  width: 100%;
  height: auto;
}

/* Nota: el selector incluye #splash-screen para ganarle en especificidad a la
   regla genérica `#splash-screen p` (font-size:18px; max-width:460px), ya que el
   label es un <p>. El tamaño va en vw para escalar igual que el globo (25cqw). */
#splash-screen .splash-text2-label {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  color: #2a2a2a !important;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.375cqw;
  line-height: 1.5;
  max-width: none;
  padding: 8%;
  padding-top: 20%;
  padding-left: 9%;
  z-index: 21;
}

#splash-screen .splash-text2-label.step2 {
  padding-top: 15%;
}

.gameover-text1-wrap {
  position: absolute;
  bottom: 26%;
  left: 72%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 20;
  width: 21%;
}

.gameover-text1 {
  display: block;
  width: 100%;
  height: auto;
}

#gameover-screen .gameover-text1-label {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  color: #2a2a2a !important;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.155cqw;
  line-height: 1.5;
  max-width: none;
  padding: 8%;
  padding-top: 18%;
  padding-left: 10%;
  z-index: 21;
}

/* ── OCULTAR STATS EN SPLASH ────────────────────────── */
#splash-screen .game-bg-table,
#splash-screen .game-bg-check3,
#splash-screen .game-bg-wrong3,
#splash-screen .grade-count-total,
#splash-screen .wrong-count-total {
  display: none;
}

/* ── FONDO COMPARTIDO (splash + gameover) ───────────── */
.game-bg-screen {
  background: none;
  overflow: hidden;
  position: relative;

}


.game-bg-table {
  position: absolute;
  top: 0;
  left: 50%;
  width: 140.7cqmin;
  height: auto;
  transform: translateX(-50%);
  transform-origin: top center;
  pointer-events: none;
  z-index: 15;
}

.game-bg-check3 {
  position: absolute;
  /* Mismo Y que la fila de checks (centro del check de la tabla) para que queden
     a nivel; en vmin, no viewport-% (que en iOS los dejaba altos). */
  top: 16.4cqmin;
  left: 70%;
  width: 6.67cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 16;
}

.game-bg-wrong3 {
  position: absolute;
  top: 29.5cqmin;
  left: 70%;
  width: 6.67cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 16;
}

.grade-count-total {
  position: absolute;
  top: 16.4cqmin;
  left: 72%;
  transform: translateY(-50%);
  color: #A4D300;
  font-family: 'VAGRoundBold', 'Arial Black', Impact, sans-serif;
  font-size: 4.5cqmin;
  font-weight: bold;
  text-shadow: none;
  z-index: 17;
  pointer-events: none;
  display: flex;
  align-items: baseline;
  gap: 0.66cqmin;
}

.grade-count-x {
  font-size: 3.73cqmin;
}

.wrong-count-total {
  position: absolute !important;
  top: 29.5cqmin;
  left: 72%;
  transform: translateY(-50%);
  color: #ff4444;
  font-family: 'VAGRoundBold', 'Arial Black', Impact, sans-serif;
  font-size: 4.5cqmin;
  font-weight: bold;
  text-shadow: none;
  z-index: 17;
  pointer-events: none;
  display: flex;
  align-items: baseline;
  gap: 0.66cqmin;
}

.wrong-count-x {
  font-size: 3.73cqmin;
}

.wrong-count-total span:last-child {
  position: relative;
  top: 0.44cqmin;
}

/* iOS: Safari renderiza el check/conteo ~2cqmin más arriba que PC (métricas de
   fuente/imagen), las filas no. Bajamos solo el check/wrong + conteo en iOS para
   nivelarlos con sus filas, sin tocar PC. */
body.is-ios .game-bg-check3    { top: 16.4cqmin; }
body.is-ios .game-bg-wrong3    { top: 29.5cqmin; }
body.is-ios .grade-count-total { top: 16.4cqmin; }
body.is-ios .wrong-count-total { top: 29.5cqmin; }

.game-bg-check3-mid {
  left: 31%;
  transform: translateX(-50%);
}

.checks-row {
  position: absolute !important;
  /* Ancladas a la tabla (140.7cqmin ancho, 43cqmin alto, top:0, centrada) en vmin —
     no en viewport-% — para que trackeen el check/X de la tabla en cualquier aspect
     ratio (en iOS el % derivaba en Y y el rango X). 16.4cqmin = centro del check. */
  top: 16.4cqmin;
  left: calc(50% - 46cqmin);
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.44cqmin;
  z-index: 16;
  pointer-events: none;
}

.checks-row img {
  width: 6.4cqmin;
  height: auto;
  opacity: 0;
  animation: check-pop-in 0.2s ease-out forwards;
}

@keyframes check-pop-in {
  from { opacity: 1; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

.wrongs-row {
  position: absolute !important;
  /* 29.5cqmin = centro de la X roja de la tabla (ver .checks-row). */
  top: 29.5cqmin;
  left: calc(50% - 46cqmin);
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.44cqmin;
  z-index: 16;
  pointer-events: none;
}

.wrongs-row img {
  width: 6.4cqmin;
  height: auto;
  opacity: 0;
  animation: check-pop-in 0.2s ease-out forwards;
}

.grade-count-total span:last-child {
  position: relative;
  top: 4px;
}

.game-bg-sky {
  position: absolute;
  bottom: 60%;
  left: 50%;
  width: 170cqmin;
  height: auto;
  transform: translateX(-50%) scaleY(0.37);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: -2;
}

.game-bg-cloud {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
  contain: layout style;
}

.game-bg-cloud1 {
  top: 2%;
  right: -26%;
  width: 83.6cqmin;
  animation: cloud1-move 10s linear infinite;
  z-index: -1;
}

@keyframes cloud1-move {
  from { right: -26%; }
  to   { right: 120%; }
}

.game-bg-cloud2 {
  top: 35%;
  right: 5%;
  width: 44.8cqmin;
  animation: cloud2-move 12s linear 3s infinite;
}

@keyframes cloud2-move {
  from { right: 5%; }
  to   { right: 120%; }
}

.game-bg-people {
  position: absolute;
  bottom: 3%;
  left: 14%;
  width: 68.3cqmin;
  height: auto;
  pointer-events: none;
  z-index: 8;
  transform: scaleX(1.1);
  transform-origin: left bottom;
}

#splash-screen .game-bg-people {
  animation: char-enter 0.5s ease forwards;
}

@keyframes char-enter {
  from { filter: grayscale(1) brightness(0.2); }
  to   { filter: none; }
}

.game-bg-men,
.game-bg-men1,
.game-bg-men2 {
  position: absolute;
  bottom: 2%;
  left: 18%;
  width: 50%;
  transform: scale(0.28);
  transform-origin: left bottom;
  pointer-events: none;
}

.game-bg-men2 { z-index: 9; }
.game-bg-men1 { z-index: 10; animation: men1-blink 3s steps(1, end) 0.3s infinite; }

#splash-screen .game-bg-men2 { animation: char-enter 0.3s ease forwards; }
#splash-screen .game-bg-men1 { animation: char-enter 0.3s ease forwards, men1-blink 3s steps(1, end) 0.3s infinite; }

.game-bg-women,
.game-bg-women1,
.game-bg-women2 {
  position: absolute;
  bottom: 2%;
  left: 40%;
  width: 50%;
  transform: scale(0.16);
  transform-origin: left bottom;
  pointer-events: none;
}

.game-bg-women2 { z-index: 9; display: none; }
.game-bg-women1 { z-index: 10; }

#splash-screen .game-bg-women1 { animation: char-enter 0.3s ease forwards; }

.mode-flags .game-bg-women2 { display: block; }
.mode-flags .game-bg-women1,
.mode-flags .game-bg-women2 { transform: scale(0.199); bottom: 1%; }
.mode-flags .game-bg-women1 { animation: women1-blink 3.5s steps(1, end) 0.7s infinite; }
#splash-screen.mode-flags .game-bg-women2 { animation: char-enter 0.3s ease forwards; }
#splash-screen.mode-flags .game-bg-women1 { animation: char-enter 0.3s ease forwards, women1-blink 3.5s steps(1, end) 0.7s infinite; }

.game-bg-girl,
.game-bg-girl1,
.game-bg-girl2 {
  position: absolute;
  bottom: 2%;
  left: 31.5%;
  width: 50%;
  transform: scale(0.17);
  transform-origin: left bottom;
  pointer-events: none;
}

.game-bg-girl2 { z-index: 9; }
.game-bg-girl1 { z-index: 10; animation: girl1-blink 2.5s steps(1, end) 1.1s infinite; }

#splash-screen .game-bg-girl2 { animation: char-enter 0.3s ease forwards; }
#splash-screen .game-bg-girl1 { animation: char-enter 0.3s ease forwards, girl1-blink 2.5s steps(1, end) 1.1s infinite; }

@keyframes girl1-blink {
  0%  { opacity: 1 }
  40% { opacity: 0 }
  44% { opacity: 1 }
  100%{ opacity: 1 }
}

@keyframes men1-blink {
  0%     { opacity: 1 }
  60%    { opacity: 0 }
  63.33% { opacity: 1 }
  100%   { opacity: 1 }
}

@keyframes women1-blink {
  0%     { opacity: 1 }
  55%    { opacity: 0 }
  58.5%  { opacity: 1 }
  100%   { opacity: 1 }
}

@keyframes women2-blink-show {
  0%    { opacity: 0 }
  55%   { opacity: 1 }
  58.5% { opacity: 0 }
  100%  { opacity: 0 }
}

.game-bg-city {
  position: absolute;
  bottom: 0%;
  right: 14%;
  width: 72%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}

.game-bg-plane7 {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  display: none;
  right: 1%;
  top: 38%;
  width: 40.7cqmin;
  height: auto;
  transform: scale(1);
  transform-origin: top right;
  animation: plane7-fly 3.5s 0.7s linear forwards;
}

@keyframes plane7-fly {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.8) translate(-1344px, -456px); }
}

.game-bg-sky-monuments { display: none; bottom: 75%; z-index: -2; transform: translateX(-50%) scaleX(2) scaleY(1.5); }

.game-bg-city-flags,
.game-bg-city-monuments,
.game-bg-city-monuments2 {
  display: none;
  z-index: 1;
}

@keyframes monuments-flicker {
  0%, 49.9% { opacity: 1; }
  50%, 100%  { opacity: 0; }
}

.game-bg-city-monuments2 {
  z-index: 2;
}


.game-bg-plane {
  position: absolute;
  top: 55%;
  left: 0;
  width: 240.4cqmin;
  height: auto;
  transform: translate(calc(-40cqw - 50%), -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* z-index: plane1 adelante, plane6 atrás */
.game-bg-plane1 { z-index: 6; animation: plane-fly-in 2.7s 0.2s ease-out forwards, plane1-blink 2.5s 0.2s steps(1, end) forwards, plane-peel 0s 2.9s forwards; }
.game-bg-plane2 { z-index: 5; opacity: 0; animation: plane-fly-in 2.7s 0.2s ease-out forwards, plane2-blink 2.5s 0.2s steps(1, end) forwards, plane-peel 0s 3.0s forwards; }
.game-bg-plane3 { z-index: 4; animation: plane-fly-in 2.7s 0.2s ease-out forwards, plane-peel 0s 3.1s forwards; }
.game-bg-plane4 { z-index: 3; animation: plane-fly-in 2.7s 0.2s ease-out forwards, plane-peel 0s 3.2s forwards; }
.game-bg-plane5 { z-index: 2; animation: plane-fly-in 2.7s 0.2s ease-out forwards, plane-peel 0s 3.3s forwards; }
.game-bg-plane6 { z-index: 1; animation: plane-fly-in 2.7s 0.2s ease-out forwards; }

/* cqw reemplazado por px fijos (stage siempre 1920px): iOS no puede GPU-compilar
   keyframes con unidades cqw → la animación cae a main thread → jank. */
@keyframes plane-fly-in { from { transform: translate(calc(-768px - 50%), -50%); } to { transform: translate(calc(576px - 50%), -50%); } }
@keyframes plane-peel   { to { opacity: 0; } }
@keyframes plane-peel   { to   { opacity: 0; } }

@keyframes plane1-blink {
  0%   { opacity: 1 }  4%   { opacity: 0 }  8%   { opacity: 1 }
  12%  { opacity: 0 }  16%  { opacity: 1 }  20%  { opacity: 0 }
  24%  { opacity: 1 }  28%  { opacity: 0 }  32%  { opacity: 1 }
  36%  { opacity: 0 }  40%  { opacity: 1 }  46%  { opacity: 0 }
  52%  { opacity: 1 }  58%  { opacity: 0 }  64%  { opacity: 1 }
  70%  { opacity: 0 }  78%  { opacity: 1 }  88%  { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes plane2-blink {
  0%   { opacity: 0 }  4%   { opacity: 1 }  8%   { opacity: 0 }
  12%  { opacity: 1 }  16%  { opacity: 0 }  20%  { opacity: 1 }
  24%  { opacity: 0 }  28%  { opacity: 1 }  32%  { opacity: 0 }
  36%  { opacity: 1 }  40%  { opacity: 0 }  46%  { opacity: 1 }
  52%  { opacity: 0 }  58%  { opacity: 1 }  64%  { opacity: 0 }
  70%  { opacity: 1 }  78%  { opacity: 0 }  88%  { opacity: 1 }
  100% { opacity: 0 }
}

.game-bg-stairs {
  position: absolute;
  bottom: 0;
  right: 22.1%;
  width: 14%;
  transform: scaleX(1.4);
  transform-origin: right bottom;
  pointer-events: none;
  z-index: 7;
  animation: stairs-wipe 0.6s ease-out 3.0s forwards;
  clip-path: inset(100% 0 0 0);
}

.splash-howtoplay-wrap {
  position: absolute;
  z-index: 22;
  top: 38%;
  left: 37%;
  transform: translate(-50%, calc(-50% - 120cqh));
  width: 82.3cqmin;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.splash-howtoplay-wrap.slide-down {
  transform: translate(-50%, -50%);
}

.splash-howtoplaytable {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.35));
}

.splash-howtoplay-title {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 5.3cqmin;
  color: #ffffff;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  -webkit-text-stroke: 1.1cqmin #755a3d;
  paint-order: stroke fill;
}

.splash-howtoplay-video {
  position: absolute;
  top: 20%;
  left: 13.5%;
  width: 72%;
  height: 72%;
  object-fit: contain;
  pointer-events: none;
}

.splash-confirm-wrap {
  position: absolute;
  z-index: 22;
  width: 15.4cqmin;
  top: 90%;
  left: 62%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.splash-confirm-wrap.confirm-ready {
  opacity: 1;
  pointer-events: auto;
}

.splash-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.splash-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18.1cqmin;
  height: auto;
  pointer-events: none;
  opacity: 0;
}

.splash-confirm-wrap:hover .splash-confirm2 {
  opacity: 1;
}

.splash-confirm-wrap.confirm-pressed .splash-confirm2 {
  opacity: 0;
}

.gameover-confirm-wrap {
  position: absolute;
  z-index: 22;
  width: 15.4cqmin;
  top: 90%;
  left: 62%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.gameover-confirm-wrap.confirm-ready {
  opacity: 1;
  pointer-events: auto;
}

.gameover-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.gameover-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18.1cqmin;
  height: auto;
  pointer-events: none;
  opacity: 0;
}

.gameover-confirm-wrap:hover .gameover-confirm2 {
  opacity: 1;
}

.gameover-confirm-wrap.confirm-pressed .gameover-confirm2 {
  opacity: 0;
}

@keyframes stairs-wipe {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

.game-bg-screen > *:not(.game-bg-city):not(.game-bg-plane):not(.game-bg-plane1):not(.game-bg-plane2):not(.game-bg-plane3):not(.game-bg-plane4):not(.game-bg-plane5):not(.game-bg-plane6):not(.game-bg-stairs):not(.game-bg-cloud):not(.game-bg-cloud1):not(.game-bg-cloud2):not(.game-bg-people):not(.game-bg-men):not(.game-bg-men1):not(.game-bg-men2):not(.game-bg-girl):not(.game-bg-girl1):not(.game-bg-girl2):not(.game-bg-women):not(.game-bg-women1):not(.game-bg-sky):not(.game-bg-plane7):not(.game-bg-table):not(.game-bg-check3):not(.game-bg-wrong3):not(.grade-count-total):not(.splash-confirm1):not(.splash-confirm2):not(.splash-confirm-wrap):not(.splash-howtoplaytable):not(.splash-howtoplay-wrap):not(.splash-howtoplay-video):not(.splash-text2-wrap):not(.gameover-confirm-wrap):not(.gameover-confirm1):not(.gameover-confirm2):not(.gameover-text1-wrap):not(.gameover-text1):not(.gameover-text1-label):not(.game-bg-bus):not(.game-bg-clouds-monuments):not(.game-bg-clouds-monuments2):not(.game-bg-clouds-monuments3):not(.ingame-power) {
  position: relative;
  z-index: 20;
}

/* ── LOADING SCREEN FLIGHTATT ───────────────────────── */
.flightatt-loading {
  position: absolute;
  top: 76%;
  left: 26.5%;
  transform: translate(-50%, -50%) scaleX(-1);
  width: 25cqmin;
  height: auto;
  z-index: 201;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  contain: layout style;
  will-change: contents;
}

/* Selector de idioma, arriba al centro del loading */
.loading-lang {
  position: absolute;
  top: 1.4cqmin;
  right: 16%;            /* arriba a la derecha del área visible (como el original) */
  z-index: 230;
  pointer-events: auto;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
}
.loading-lang-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7cqmin;
  min-width: 11cqmin;    /* más ancha en X */
  font-family: inherit;
  font-size: 2cqmin;
  font-weight: bold;
  color: #ffffff;
  background: rgba(20, 60, 100, 0.55);
  border: 0.3cqmin solid rgba(255, 255, 255, 0.4);
  border-radius: 1cqmin;
  padding: 0.5cqmin 1.8cqmin;
  cursor: pointer;
  transition: background 0.15s;
}
.loading-lang-toggle:hover { background: rgba(30, 90, 145, 0.75); }
.loading-lang-caret {
  font-size: 1.5cqmin;
  line-height: 1;
  transition: transform 0.15s;
}
.loading-lang.open .loading-lang-caret,
.name-prompt-lang.open .loading-lang-caret { transform: rotate(180deg); }
.loading-lang-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5cqmin;
  background: rgba(20, 60, 100, 0.92);
  border: 0.3cqmin solid rgba(255, 255, 255, 0.4);
  border-radius: 1cqmin;
  overflow: hidden;
  min-width: 100%;
  z-index: 250;
}
.loading-lang.open .loading-lang-menu,
.name-prompt-lang.open .loading-lang-menu { display: block; }
.loading-lang-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 1.9cqmin;
  font-weight: bold;
  color: #fffbe6;
  background: transparent;
  border: none;
  padding: 0.6cqmin 1.3cqmin;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.loading-lang-option:hover { background: #2f8fd6; }
.loading-lang-option.active { color: #7fe0ff; }

.flightatt-loading-shadow {
  position: absolute;
  top: 98%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 7cqmin;
  height: 2cqmin;
  background: black;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 200;
  pointer-events: none;
}

/* ── LOADING SCREEN ─────────────────────────────────── */
#loading-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 200;
  background: #086aa7;
  touch-action: manipulation;
  overscroll-behavior: none;
  transform-origin: 0 0;
}

/* Etiqueta de versión: abajo al centro del menú de carga */
#loading-version {
  position: absolute;
  bottom: 1cqmin;
  left: 50%;
  transform: translateX(-50%);
  z-index: 220;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.6cqmin;
  color: #000000;
  pointer-events: none;
  user-select: none;
}

#loading-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(67,210,255,0.3), rgba(67,210,255,0));
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.loading-planet {
  position: absolute;
  width: clamp(40cqw, 85cqw, 95cqw);
  height: auto;
  z-index: 0;
  animation: planet-spin 25s linear infinite;
  top: -12%;
  left: 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-clouds {
  position: absolute;
  top: 48%;
  left: 0;
  width: 130cqmin;
  height: 48cqmin;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: clouds-scroll 15s linear infinite;
}

.loading-clouds2 {
  left: calc(130cqmin - 3px);
  animation: clouds-scroll 15s linear infinite;
}

.loading-clouds3 {
  left: calc(260cqmin - 6px);
  animation: clouds-scroll 15s linear infinite;
}

@keyframes clouds-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.loading-clouds-b {
  position: absolute;
  top: 50%;
  left: 0;
  width: 130cqmin;
  height: 56cqmin;
  object-fit: fill;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: clouds-scroll-b 9s linear infinite;
}

.loading-clouds-b2 {
  left: calc(130cqmin - 3px);
}

.loading-clouds-b3 {
  left: calc(260cqmin - 6px);
}

@keyframes clouds-scroll-b {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.loading-clouds-fade {
  position: absolute;
  top: 80%;
  left: 0;
  width: 100%;
  height: 14cqmin;
  background: linear-gradient(to top, #c8e8f5, transparent);
  z-index: 2;
  pointer-events: none;
}

.loading-clouds-fade2 {
  top: 83%;
  z-index: 4;
}

.loading-clouds-c {
  position: absolute;
  top: 66%;
  left: 0;
  width: 130cqmin;
  height: 41cqmin;
  object-fit: fill;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: clouds-scroll-c 7s linear infinite;
}

.loading-clouds-c2 {
  left: calc(130cqmin - 3px);
}

.loading-clouds-c3 {
  left: calc(260cqmin - 6px);
}

@keyframes clouds-scroll-c {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.loading-clouds-fade3 {
  top: 90%;
  z-index: 6;
}

.loading-circle {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  transform: translate(0, 0);
}

@keyframes planet-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

.loading-logo {
  position: absolute;
  top: 8cqmin;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: clamp(22cqmin, 40cqmin, 48cqmin);
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.5));
}

/* Contenedor de acciones del loading: Play + (Social, Perfil) apilados. */
.loading-actions {
  display: none;            /* se muestra al llegar al 100% de carga */
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 8cqmin;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 2.5cqmin;
}

.loading-play-single {
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
  /* Forzar capa GPU para evitar el blur de sub-pixel; sin esto el botón se ve
     borroso hasta que el hover crea la capa. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-play-single:hover { transform: translateZ(0) scale(1.08); }
.loading-play-single img {
  width: clamp(20cqmin, 34cqmin, 38cqmin);
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* Fila de botones secundarios debajo de Play. */
.loading-secondary-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3cqmin;
}
.loading-secondary-btn {
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.loading-secondary-btn:hover { transform: translateZ(0) scale(1.08); }
.loading-secondary-btn { position: relative; }
.profile-btn-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1cqmin;
  white-space: nowrap;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 3.4cqmin;
  color: #fde20e;
  -webkit-text-stroke: 0.5cqmin #8b6a00;
  paint-order: stroke fill;
  pointer-events: none;
  max-width: 20cqmin;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-notif-badge {
  position: absolute;
  top: -0.5cqmin;
  right: -0.5cqmin;
  width: 6.5cqmin;
  height: 6.5cqmin;
  background: #e03030;
  border: 0.6cqmin solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4cqmin;
  font-weight: 900;
  color: #fff;
  pointer-events: none;
  animation: notif-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  z-index: 5;
}
@keyframes notif-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.loading-secondary-btn img {
  width: clamp(22cqmin, 32cqmin, 37cqmin);
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* Difuminar fondo cuando la mesa está abierta.
   En iOS se omite filter:blur (muy caro) y se usa solo el overlay semitransparente. */
body:not(.is-ios) #loading-screen.table-shown > .loading-planet,
body:not(.is-ios) #loading-screen.table-shown > .loading-clouds,
body:not(.is-ios) #loading-screen.table-shown > .loading-clouds-b,
body:not(.is-ios) #loading-screen.table-shown > .loading-clouds-c,
body:not(.is-ios) #loading-screen.table-shown > .loading-clouds-fade,
body:not(.is-ios) #loading-screen.table-shown > .flightatt-loading,
body:not(.is-ios) #loading-screen.table-shown > .flightatt-loading-shadow,
body:not(.is-ios) #loading-screen.table-shown > .loading-logo,
body:not(.is-ios) #loading-screen.table-shown > .loading-center-group,
body:not(.is-ios) #loading-screen.table-shown > .profile-account-wrap {
  filter: blur(5px);
}
/* iOS: overlay semitransparente en lugar de blur por elemento */
#loading-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 209;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#loading-screen.table-shown::after {
  opacity: 1;
  pointer-events: none;
}

/* Con el perfil abierto, los botones Jugar/Social/Perfil quedan inutilizables */
#loading-screen.table-shown .loading-actions {
  pointer-events: none;
}

/* Al salir (back): la mesa se desliza hacia arriba y el fondo se desenfoca.
   El blur NO se interpola (tween de filter:blur recalcula el desenfoque de las
   nubes en cada frame -> lag). Se quita de golpe; solo se anima el transform,
   que es barato en GPU. */
#loading-table-group {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 210;
  transition: transform 0.4s ease-out; /* bajada (vuelve la mesa) */
  will-change: transform;
  pointer-events: none; /* la capa no captura clicks; solo sus hijos interactivos */
}
#loading-table-group.table-gone {
  transition: transform 0.4s ease-in; /* subida (sale la mesa) */
}
#loading-table-group .loading-name-edit,
#loading-table-group .loading-name-input,
#loading-table-group .loading-name-confirm,
#loading-table-group .loading-play-confirm-wrap,
#loading-table-group .loading-profile-pic-wrap {
  pointer-events: auto;
}
#loading-table-group.table-gone {
  transform: translateY(-120%);
}

/* Panel Social: misma mesa vacía con flecha de back, por ahora sin contenido. */
#loading-social-group {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 210;
  transition: transform 0.4s ease-out;
  will-change: transform;
  pointer-events: none;
}
#loading-social-group .loading-social-back-wrap {
  pointer-events: auto;
}
#loading-social-group.table-gone {
  transition: transform 0.4s ease-in;
  transform: translateY(-120%);
}
.loading-social-back-wrap {
  position: absolute;
  top: 22%;
  left: calc(50% - 46cqmin);
  transform: translate(-50%, -50%);
  width: 14cqmin;
  z-index: 212;
  cursor: pointer;
}
.loading-social-logo {
  position: absolute;
  top: calc(50% - 49cqmin);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(12cqmin, 22cqmin, 28cqmin);
  height: auto;
  z-index: 212;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.5));
}
.loading-social-titlebar {
  position: absolute;
  top: calc(50% - 30cqmin);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 2.5cqmin;
  z-index: 212;
  pointer-events: none;
  user-select: none;
}
.loading-social-title {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 6.3cqmin;
  color: #fde20e;
  -webkit-text-stroke: 0.8cqmin #8b6a00;
  paint-order: stroke fill;
  white-space: nowrap;
  text-transform: uppercase;
}
.loading-social-titlebar .loading-social-title {
  font-size: 5.2cqmin;
  -webkit-text-stroke-width: 0.7cqmin;
}
.loading-social-titlebar .loading-social-planet {
  width: 7.5cqmin;
}
.loading-social-planet {
  width: 9cqmin;
  height: auto;
  -webkit-user-drag: none;
  filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.45));
}
.loading-social-search {
  position: absolute;
  top: calc(50% - 24cqmin);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.4cqmin;
  width: 44cqmin;
  padding: 0.4cqmin 1.6cqmin;
  background: #fffbe6;
  border: 0.5cqmin solid #8b6a00;
  border-radius: 1.4cqmin;
  z-index: 212;
  pointer-events: auto;
}
.loading-social-search-icon {
  width: 3.4cqmin;
  height: 3.4cqmin;
  flex: none;
}
.loading-social-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 3.4cqmin;
  color: #8b6a00;
}
.loading-social-search-input::placeholder {
  color: #c4ad5e;
}
.loading-social-sort {
  position: absolute;
  top: calc(50% - 24cqmin);
  left: calc(50% + 38cqmin);
  transform: translateX(-50%);
  width: 22cqmin;
  height: 6cqmin;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.4cqmin;
  background: #fffbe6;
  border: 0.5cqmin solid #8b6a00;
  border-radius: 1.4cqmin;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2.6cqmin;
  color: #8b6a00;
  cursor: pointer;
  z-index: 212;
  pointer-events: auto;
  white-space: nowrap;
  transition: transform 0.1s;
}
.loading-social-sort:hover  { transform: translateX(-50%) scale(1.05); }
.loading-social-sort:active { transform: translateX(-50%) scale(0.96); }
.loading-social-back-wrap:hover .loading-play-confirm2 { opacity: 1; }
.loading-social-back-wrap.confirm-pressed .loading-play-confirm2 { opacity: 0; }

/* ── Panel de amigos (lista en medio de la mesa) ─────────────────────────────── */
.loading-social-panel {
  position: absolute;
  top: calc(50% + 11cqmin);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94cqmin;
  display: flex;
  flex-direction: column;
  z-index: 212;
  pointer-events: auto;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
}

.loading-social-tabs {
  display: flex;
  justify-content: center;
  gap: 0.8cqmin;
}
.loading-social-tab {
  padding: 1cqmin 7cqmin 1.4cqmin;
  margin-bottom: 0;
  font-family: inherit;
  font-size: 2.3cqmin;
  color: #6b5a17;
  background: #cfc9c0;
  border: 0.4cqmin solid #8b6a00;
  border-bottom: none;
  border-radius: 1.4cqmin 1.4cqmin 0 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: background 0.1s;
}
.loading-social-tab.active {
  color: #5a4400;
  background: #eee9e3;
  z-index: 3; /* por encima del borde superior de la lista para "conectarse" */
  margin-bottom: -0.45cqmin; /* solo la activa baja para tapar el borde de la lista */
  padding-bottom: 1.8cqmin;
}
.loading-social-tab:not(.active):hover { background: #ddd6cc; }

.loading-social-list {
  display: flex;
  flex-direction: column;
  gap: 1cqmin;
  height: 44cqmin;
  overflow-y: auto;
  padding: 1cqmin;
  background: #eee9e3;
  border: 0.4cqmin solid #8b6a00;
  border-radius: 0 1.2cqmin 1.2cqmin 1.2cqmin;
  position: relative;
  z-index: 2;
}
.loading-social-list::-webkit-scrollbar { width: 1.2cqmin; }
.loading-social-list::-webkit-scrollbar-thumb {
  background: #c4ad5e;
  border-radius: 1cqmin;
}

.loading-social-row {
  display: flex;
  align-items: center;
  gap: 1.4cqmin;
  padding: 1.6cqmin 13cqmin 1.6cqmin 1.2cqmin;
  background: #fffef5;
  border: 0.3cqmin solid #d8c47e;
  border-radius: 1cqmin;
  position: relative;
  cursor: pointer;
  transition: transform 0.1s;
}
.loading-social-row:hover { transform: scale(1.015); }
/* Filas de personas bloqueadas: en gris, al fondo de la lista */
.loading-social-row.is-blocked-row { filter: grayscale(1); opacity: 0.6; }
/* Marca de mejor amigo */
.loading-social-row.is-fav { border-color: #f0b800; box-shadow: 0 0 0 0.2cqmin #f0b80055; }
.loading-social-avatar {
  flex: none;
  width: 6cqmin;
  height: 6cqmin;
  border-radius: 50%;
  object-fit: cover;
  background: #d6ecff;
  border: 0.4cqmin solid #8b6a00;
}
.loading-social-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.loading-social-name {
  font-size: 2.6cqmin;
  color: #4a3b00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loading-social-status {
  font-size: 1.8cqmin;
  color: #8a7a3a;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.6cqmin;
}
.loading-social-status .dot {
  width: 1.3cqmin;
  height: 1.3cqmin;
  border-radius: 50%;
  flex: none;
}
.loading-social-status .dot.online  { background: #34c759; }
.loading-social-status .dot.playing { background: #2bd14b; }
.loading-social-status .dot.offline { background: #b0b0b0; }

/* Amigo jugando: fila titilando en verde, texto verde y punto con luz brillante */
@keyframes social-playing-row {
  0%, 100% { background-color: #e3f8e6; }
  50%      { background-color: #aaedb6; }
}
.loading-social-row.status-playing {
  border-color: #2bd14b;
  background: #e3f8e6;
  animation: social-playing-row 1.4s ease-in-out infinite;
}
.loading-social-row.status-playing .loading-social-status {
  color: #1ea53a;
}
@keyframes social-playing-dot {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}
.loading-social-row.status-playing .dot.playing {
  animation: social-playing-dot 1.1s ease-in-out infinite;
}

/* Amigo desconectado: fila en gris/plomo */
.loading-social-row.status-offline {
  background: #d4d2cd;
  border-color: #a8a59d;
}
.loading-social-row.status-offline .loading-social-status {
  color: #6f6c64;
}
.loading-social-row.status-offline .loading-social-avatar,
.loading-social-row.status-offline .loading-social-emote,
.loading-social-row.status-offline .loading-social-points,
.loading-social-row.status-offline .loading-social-score-val {
  filter: grayscale(1) opacity(0.6);
}
.loading-social-row.status-offline .loading-social-rankname {
  color: #b8b6b0;
  -webkit-text-stroke-color: #6f6c64;
}
.loading-social-score {
  position: absolute;
  left: 58%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20cqmin;
  height: 6cqmin;
}
.loading-social-points {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(0.92);
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.loading-social-score-val {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Dimbo', sans-serif;
  font-size: 4.9cqmin;
  color: #fff;
  -webkit-text-stroke: 0.6cqmin #000;
  paint-order: stroke fill;
  letter-spacing: 0.3cqmin;
  white-space: nowrap;
}
.loading-social-rankname {
  position: absolute;
  right: 11.5cqmin;
  top: 50%;
  transform: translateY(-50%);
  width: 16cqmin;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 2.4cqmin;
  color: #FFFF00;
  -webkit-text-stroke: 0.45cqmin #000080;
  paint-order: stroke fill;
  line-height: 1.05;
  pointer-events: none;
}
.loading-social-emote {
  position: absolute;
  right: 0.4cqmin;
  top: 50%;
  transform: translateY(-50%);
  width: 11cqmin;
  height: 11cqmin;
  object-fit: contain;
  pointer-events: none;
}

/* Solicitudes: botones aceptar/rechazar a la derecha de la fila */
.loading-social-req-actions {
  position: absolute;
  right: 1.6cqmin;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 1.2cqmin;
}
.loading-social-req-btn {
  width: 6.2cqmin;
  height: 6.2cqmin;
  border-radius: 50%;
  border: 0.4cqmin solid;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 3.4cqmin;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s;
}
.loading-social-req-btn:hover { transform: scale(1.1); }
.loading-social-req-btn:active { transform: scale(0.95); }
.loading-social-req-btn.accept { background: #2bd14b; border-color: #1c8a32; color: #fff; }
.loading-social-req-btn.reject { background: #e8504a; border-color: #a32a26; color: #fff; }

.loading-social-footer {
  display: flex;
  gap: 1.2cqmin;
  margin-top: 1.4cqmin;
}
.loading-social-action {
  flex: 1;
  padding: 1cqmin 0;
  font-family: inherit;
  font-size: 2cqmin;
  color: #fffbe6;
  background: #2f8fd6;
  border: 0.4cqmin solid #1c5e91;
  border-radius: 1.2cqmin;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s;
}
.loading-social-action:hover { transform: translateY(-0.2cqmin); }
.loading-social-action:active { transform: scale(0.97); }

/* Botón de acceso a "Bloqueados" (al lado de Añadir Amigo): solo el png */
.loading-social-blockbtn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6cqmin;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.1s;
}
.loading-social-blockbtn:hover  { transform: scale(1.08); }
.loading-social-blockbtn:active { transform: scale(0.94); }
.loading-social-blockbtn img { width: 100%; height: auto; display: block; }

/* ── Panel de perfil de un amigo (se desliza desde arriba sobre el social) ────── */
.friend-error-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2cqmin;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 1.7cqmin;
  font-weight: 600;
  z-index: 10;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.friend-error-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#loading-friend-group {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 220; /* por encima del social (210), añadir-amigo y bloqueados (216) */
  transition: transform 0.4s ease-out;
  will-change: transform;
  pointer-events: auto; /* captura todos los clicks: nada detrás es seleccionable */
}
#loading-friend-group.table-gone {
  transition: transform 0.4s ease-in;
  transform: translateY(-120%);
}
/* Bloque superior del perfil de amigo desplazado a la izquierda para centrarlo */
#loading-friend-group .loading-profile-pic {
  position: absolute;
  top: calc(50% - 30cqmin);
  left: calc(50% + 19cqmin);
  transform: translate(-50%, -50%);
  width: 12cqmin;
  height: 12cqmin;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
  border: 0.6cqmin solid #fff;
  display: block;
  pointer-events: none;
  z-index: 221;
}
#loading-friend-group .loading-name-wrap   { left: calc(50% - 12cqmin); }
#loading-friend-group .loading-play-count  { left: calc(50% - 12cqmin); }

.loading-friend-status {
  position: absolute;
  top: calc(50% - 30cqmin);
  left: calc(50% + 28cqmin);
  transform: translateY(-50%);
  width: 22cqmin;
  z-index: 213;
  display: flex;
  align-items: center;
  gap: 1cqmin;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2.6cqmin;
  color: #8a7a3a;
  pointer-events: none;
}
.loading-friend-status::before {
  content: '';
  flex: none;
  width: 1.6cqmin;
  height: 1.6cqmin;
  border-radius: 50%;
  background: currentColor;
}
.loading-friend-status.playing { color: #1ea53a; }
.loading-friend-status.online  { color: #2f8fd6; }
.loading-friend-status.offline { color: #8b8b8b; }
/* Punto verde con luz brillante latiendo cuando el amigo está jugando */
.loading-friend-status.playing::before {
  background: #2bd14b;
  animation: social-playing-dot 1.1s ease-in-out infinite;
}

/* ── Panel Añadir Amigo (se desliza desde arriba sobre el social) ─────────────── */
#loading-addfriend-group,
#loading-blocked-group,
#loading-sent-group {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 216;
  transition: transform 0.4s ease-out;
  will-change: transform;
  pointer-events: auto;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
}
#loading-addfriend-group.table-gone,
#loading-blocked-group.table-gone,
#loading-sent-group.table-gone {
  transition: transform 0.4s ease-in;
  transform: translateY(-120%);
}
/* Título de Bloqueados/Enviadas, bien arriba (doble clase = más específico que
   la regla base .loading-addfriend-titlebar que viene después en el archivo). */
.loading-addfriend-titlebar.loading-blocked-titlebar { top: calc(50% - 29cqmin); }

/* Panel de la lista de bloqueados: mismo tamaño que el panel de amigos */
.loading-blocked-panel {
  position: absolute;
  top: calc(50% + 6cqmin);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94cqmin;
  display: flex;
  flex-direction: column;
  gap: 1.4cqmin;
}
.loading-blocked-panel .loading-social-list { height: 44cqmin; border-radius: 1.2cqmin; }
.loading-blocked-toolbar {
  display: flex;
  align-items: center;
  gap: 1.2cqmin;
}
.loading-blocked-search {
  position: relative; top: auto; left: auto; transform: none;
  width: auto; flex: 1; margin: 0;
}
.loading-blocked-sort {
  position: relative; top: auto; left: auto; transform: none;
  width: auto; flex: none; margin: 0; padding: 0 2.4cqmin;
}
.loading-blocked-sort:hover  { transform: translateY(-0.2cqmin); }
.loading-blocked-sort:active { transform: scale(0.97); }
.loading-social-empty {
  text-align: center;
  color: #8b6a00;
  font-size: 2.2cqmin;
  padding: 4cqmin 0;
}
.loading-addfriend-titlebar {
  position: absolute;
  top: calc(50% - 22cqmin);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 2.5cqmin;
  z-index: 217;
  pointer-events: none;
}
.loading-addfriend-titlebar .loading-social-title {
  font-size: 5.2cqmin;
  -webkit-text-stroke-width: 0.7cqmin;
}
.loading-addfriend-titlebar .loading-social-planet { width: 7.5cqmin; }
.loading-addfriend-label {
  position: absolute;
  top: calc(50% - 11cqmin);
  left: 50%;
  transform: translateX(-50%);
  z-index: 217;
  font-family: 'Dimbo', sans-serif;
  font-size: 3.4cqmin;
  color: #5a4400;
  white-space: nowrap;
  pointer-events: none;
}
.loading-addfriend-search {
  position: absolute;
  top: calc(50% - 4cqmin);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.4cqmin;
  width: 48cqmin;
  padding: 0.4cqmin 1.6cqmin;
  background: #fffbe6;
  border: 0.5cqmin solid #8b6a00;
  border-radius: 1.4cqmin;
  z-index: 217;
}
.loading-addfriend-send {
  position: absolute;
  top: calc(50% + 6cqmin);
  left: 50%;
  transform: translateX(-50%);
  width: 36cqmin;
  flex: none;
  z-index: 217;
}
.loading-addfriend-send:hover  { transform: translateX(-50%) translateY(-0.2cqmin); }
.loading-addfriend-send:active { transform: translateX(-50%) scale(0.97); }
.loading-addfriend-feedback {
  position: absolute;
  top: calc(50% + 14cqmin);
  left: 50%;
  transform: translateX(-50%);
  z-index: 217;
  font-family: 'Dimbo', sans-serif;
  font-size: 3cqmin;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.loading-addfriend-feedback.show { opacity: 1; }
.loading-addfriend-feedback.ok  { color: #1ea53a; }
.loading-addfriend-feedback.err { color: #c0392b; }

/* Mesa how-to-play centrada en el loading, sobre las nubes y detrás del contenido. */
.loading-howtotable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(1.26);
  width: clamp(79cqmin, 105cqmin, 121cqmin);
  height: auto;
  z-index: 210; /* por encima del center-group y de la flight attendant (z-index:201) */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-profile-pic-wrap {
  position: absolute;
  top: calc(50% - 30cqmin);
  left: calc(50% + 33cqmin);
  transform: translate(-50%, -50%);
  width: 12cqmin;
  height: 12cqmin;
  border-radius: 50%;
  overflow: hidden;
  border: 0.6cqmin solid #fff;
  z-index: 211;
  cursor: pointer;
}
.loading-profile-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.loading-profile-pic-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4cqmin;
  color: #fff;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  pointer-events: none;
}
.loading-profile-pic-wrap:hover .loading-profile-pic-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}

.loading-name-wrap {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 212;
  display: flex;
  align-items: center;
  gap: 1.4cqmin;
}

.loading-player-name {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 6.3cqmin;
  color: #4cdd6a;
  -webkit-text-stroke: 0.8cqmin #1a6b30;
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
}

.loading-name-edit {
  flex: none;
  width: 6cqmin;
  height: 6cqmin;
  border-radius: 50%;
  border: 0.5cqmin solid #1a6b30;
  background: #4cdd6a;
  color: #1a6b30;
  font-size: 3cqmin;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.1s;
}
.loading-name-edit:hover { transform: scale(1.1); }
.loading-name-edit:active { transform: scale(0.95); }

.loading-name-input {
  display: none;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 4.5cqmin;
  color: #8b6a00;
  background: #fffbe6;
  border: 0.5cqmin solid #8b6a00;
  border-radius: 1.4cqmin;
  padding: 0.4cqmin 1.6cqmin;
  width: 36cqmin;
  outline: none;
  text-align: center;
}

.loading-name-confirm {
  display: none;
  position: relative;
  flex: none;
  width: 9cqmin;
  cursor: pointer;
}
.loading-name-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.loading-name-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 118%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.loading-name-confirm:hover .loading-name-confirm2 { opacity: 1; }
.loading-name-confirm.confirm-pressed .loading-name-confirm2 { opacity: 0; }

/* Modo edición: oculta el nombre y el lápiz, muestra el input y el confirm */
.loading-name-wrap.editing .loading-player-name,
.loading-name-wrap.editing .loading-name-edit {
  display: none;
}
.loading-name-wrap.editing .loading-name-input {
  display: block;
}
.loading-name-wrap.editing .loading-name-confirm {
  display: flex;
}

.loading-games-col {
  position: absolute;
  top: 34%;
  left: calc(50% - 37cqmin);
  transform: translateX(-50%);
  z-index: 212;
  display: flex;
  flex-direction: column;
  gap: 2cqmin;
  pointer-events: none;
}

.loading-games-row {
  display: flex;
  align-items: center;
  gap: 2cqmin;
}

.loading-games-col2 {
  left: calc(50% - 13cqmin);
  top: 34%;
}

.loading-games-spacer {
  visibility: hidden;
}

/* ── Botones de relación en el perfil de amigo (abajo de los marks) ── */
.loading-friend-actions {
  position: absolute;
  top: 80%;
  left: calc(50% - 25cqmin);
  transform: translate(-50%, -50%);
  z-index: 213;
  display: flex;
  align-items: center;
  gap: 4cqmin;
}
.loading-friend-act {
  width: 11cqmin;
  height: auto;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.loading-friend-act:hover  { transform: scale(1.08); }
.loading-friend-act:active { transform: scale(0.94); }
.loading-friend-act.hidden { visibility: hidden; pointer-events: none; }
/* Persona bloqueada: fav y relación quedan en gris e inútiles */
.loading-friend-actions.is-blocked .loading-friend-fav,
.loading-friend-actions.is-blocked .loading-friend-rel {
  filter: grayscale(1) brightness(0.85);
  pointer-events: none;
}
/* El botón de bloquear muestra friendunblock.png cuando ya está bloqueado (sin gris). */

#friend-confirm-popup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.friend-confirm-box { position: relative; }
.friend-confirm-close {
  position: absolute;
  top: -2cqmin;
  left: -2cqmin;
  width: 5cqmin;
  height: 5cqmin;
  border-radius: 50%;
  border: 0.4cqmin solid #a32a26;
  background: #e8504a;
  color: #fff;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2.6cqmin;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s;
}
.friend-confirm-close:hover  { transform: scale(1.1); }
.friend-confirm-close:active { transform: scale(0.95); }

.loading-games-rank-label {
  position: absolute;
  top: 60%;
  left: calc(50% + 33cqmin);
  transform: translate(-50%, -50%);
  z-index: 212;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 4cqmin;
  color: #FFFF00;
  -webkit-text-stroke: 0.7cqmin #000080;
  paint-order: stroke fill;
  letter-spacing: -0.06cqmin;
  white-space: nowrap;
  pointer-events: none;
}

.loading-games-hs-label {
  position: absolute;
  top: 70%;
  left: calc(50% + 33cqmin);
  transform: translate(-50%, -50%) scaleY(1.1);
  z-index: 212;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 3.2cqmin;
  font-weight: bold;
  color: #000;
  text-shadow: 0.2px 0 0 #000, -0.2px 0 0 #000, 0 0.2px 0 #000, 0 -0.2px 0 #000;
  letter-spacing: 0.1cqmin;
  white-space: nowrap;
  pointer-events: none;
}

.loading-games-points {
  position: absolute;
  top: 79%;
  left: calc(50% + 33cqmin);
  transform: translate(-50%, -50%) scaleY(1.2);
  width: 26cqmin;
  height: auto;
  z-index: 211;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-games-total {
  position: absolute;
  top: 77.5%;
  left: calc(50% + 33cqmin);
  transform: translate(-50%, -50%);
  z-index: 212;
  font-family: 'Dimbo', sans-serif;
  font-size: 6.8cqmin;
  color: #fff;
  -webkit-text-stroke: 0.8cqmin #000;
  paint-order: stroke fill;
  letter-spacing: 0.1cqmin;
  white-space: nowrap;
  pointer-events: none;
}

.loading-games-rank {
  position: absolute;
  top: 44%;
  left: calc(50% + 18cqmin);
  transform: translateY(-50%);
  width: 30cqmin;
  filter: none;
  height: auto;
  z-index: 212;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-games-title {
  position: absolute;
  bottom: 100%;
  left: calc(50% + 1cqmin);
  transform: translateX(-50%) scaleY(0.9);
  margin-bottom: 0.5cqmin;
  font-family: 'Dimbo', sans-serif;
  font-size: 3.6cqmin;
  color: #000;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.loading-games-game {
  width: 7.7cqmin;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-games-mark-wrap {
  position: relative;
  display: inline-block;
}

.loading-games-mark {
  width: 19.8cqmin;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-games-hs {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Dimbo', sans-serif;
  font-size: 4.4cqmin;
  color: #fff;
  -webkit-text-stroke: 0.7cqmin #000;
  paint-order: stroke fill;
  letter-spacing: 0.4cqmin;
  white-space: nowrap;
  pointer-events: none;
}
.loading-games-crown {
  position: absolute;
  top: 25%;
  left: 94%;
  transform: translate(-50%, calc(-50% + 2px));
  font-size: 3.2cqmin;
  line-height: 1;
  color: #f5c518;
  pointer-events: none;
  user-select: none;
}

.loading-games-hs1 { -webkit-text-stroke-color: #0a557f; }
.loading-games-hs2 { -webkit-text-stroke-color: #8d132a; }
.loading-games-hs3 { -webkit-text-stroke-color: #06522a; }
.loading-games-hs4 { -webkit-text-stroke-color: #582f7f; }

.loading-play-confirm-wrap {
  position: absolute;
  top: 22%;
  left: calc(50% - 46cqmin);
  transform: translate(-50%, -50%);
  width: 14cqmin;
  z-index: 212;
  cursor: pointer;
}

.loading-play-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-play-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 118%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-play-confirm-wrap:hover .loading-play-confirm2 {
  opacity: 1;
}

.loading-play-confirm-wrap.confirm-pressed .loading-play-confirm2 {
  opacity: 0;
}

.loading-play-count {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 212;
  font-family: 'Dimbo', sans-serif;
  font-size: 4.7cqmin;
  color: #000;
  transform: translate(-50%, -50%) scaleY(0.9);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.loading-center-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6; /* por encima de las nubes (loading-clouds-c z-index:5) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqmin;
}

.loading-plane {
  width: clamp(28cqmin, 48cqmin, 56cqmin);
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: plane-float 2s ease-in-out infinite;
}

@keyframes plane-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}

.loading-bar-track {
  position: relative;
  z-index: 2;
  width: clamp(20cqmin, 40cqmin, 50cqmin);
  height: 2cqmin;
  background: rgba(0,0,0,0.2);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f9e04b, #f4a800);
  border-radius: 999px;
  transition: width 0.2s ease;
  box-shadow: 0 0 8px rgba(244,168,0,0.6);
}

.loading-pct {
  position: relative;
  z-index: 2;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.5cqmin;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.1cqmin;
}

.loading-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqmin;
}

.loading-btn-label {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.8cqmin;
  color: rgba(0,0,0,0.85);
  text-shadow: none;
  letter-spacing: 0.1cqmin;
  pointer-events: none;
  user-select: none;
}

.loading-btn-hs {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.5cqmin;
  color: rgba(0,0,0,0.7);
  letter-spacing: 0.05cqmin;
  pointer-events: none;
  user-select: none;
  min-height: 1.8cqmin;
}

.loading-play-wrap {
  position: static;
  transform: none;
}

.loading-btn-row {
  position: absolute;
  bottom: 12cqmin;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 8cqmin;
  align-items: center;
  justify-content: center;
  z-index: 202;
}

#loading-shapes-btn {
  position: relative;
  z-index: 10;
  width: clamp(14cqmin, 24cqmin, 26cqmin);
  height: auto;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

#loading-shapes-btn.loaded {
  opacity: 1;
  animation: none;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}

#loading-shapes-btn.loaded:hover {
  transform: scale(1.1);
}

#loading-flags-btn {
  position: relative;
  z-index: 10;
  width: clamp(14cqmin, 24cqmin, 26cqmin);
  height: auto;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

#loading-flags-btn.loaded {
  opacity: 1;
  animation: none;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}

#loading-flags-btn.loaded:hover {
  transform: scale(1.1);
}

#loading-mode4-btn {
  position: relative;
  z-index: 10;
  width: clamp(14cqmin, 24cqmin, 26cqmin);
  height: auto;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

#loading-mode4-btn.loaded {
  opacity: 1;
  animation: none;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}

#loading-mode4-btn.loaded:hover {
  transform: scale(1.1);
}

#loading-play-btn {
  position: relative;
  z-index: 10;
  width: clamp(14cqmin, 24cqmin, 26cqmin);
  height: auto;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

#loading-play-btn.loaded {
  opacity: 1;
  animation: none;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}

#loading-play-btn.loaded:hover {
  transform: scale(1.1);
}

@keyframes pop-in {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes pop-in-centered {
  from { transform: translateX(-50%) scale(0.5); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/* ── MODAL DE PRIMER INGRESO (nombre obligatorio) ───── */
#name-prompt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 30, 55, 0.85);
  z-index: 260; /* por encima de loading-screen (200) y del selector de idioma (230) */
}
#name-prompt.visible { display: flex; }
.name-prompt-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqmin;
  background: #0e4f86;
  border: 0.5cqmin solid #fffbe6;
  border-radius: 2.4cqmin;
  padding: 4cqmin 6cqmin;
  box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, 0.45);
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
}
.name-prompt-lang {
  position: absolute;
  top: 1.2cqmin;
  right: 1.2cqmin;
}
.name-prompt-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4cqmin;
}
.name-prompt-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqmin;
}
.name-prompt-pic-wrap {
  position: relative;
  width: 12cqmin;
  height: 12cqmin;
  border-radius: 50%;
  overflow: hidden;
  border: 0.4cqmin solid #fffbe6;
  cursor: pointer;
  flex-shrink: 0;
}
.name-prompt-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.name-prompt-pic-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4cqmin;
  color: #fff;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  pointer-events: none;
}
.name-prompt-pic-wrap:hover .name-prompt-pic-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.45);
}
.name-prompt-welcome {
  font-size: 2.4cqmin;
  font-weight: bold;
  color: #7fe0ff;
}
.name-prompt-title {
  font-size: 3.6cqmin;
  font-weight: bold;
  color: #fffbe6;
  -webkit-text-stroke: 0.3cqmin #1c5e91;
  paint-order: stroke fill;
}
.name-prompt-input {
  font-family: inherit;
  font-size: 3cqmin;
  font-weight: bold;
  text-align: center;
  color: #0e3a5e;
  width: 36cqmin;
  padding: 1cqmin 2cqmin;
  border: 0.3cqmin solid #1c5e91;
  border-radius: 1.2cqmin;
  outline: none;
}
@media (prefers-color-scheme: dark) { .name-prompt-input { color: #ffffff; } }
.name-prompt-btn {
  font-family: inherit;
  font-size: 2.8cqmin;
  font-weight: bold;
  color: #ffffff;
  background: #2bd14b;
  border: 0.35cqmin solid #1c8a32;
  border-radius: 1.4cqmin;
  padding: 1cqmin 4.5cqmin;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.name-prompt-btn:hover:not(:disabled) { transform: scale(1.05); }
.name-prompt-btn:disabled { opacity: 0.45; cursor: default; }

/* ── POPUP DE BIENVENIDA ─────────────────────────────── */
#welcome-popup {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 30, 55, 0.85);
  z-index: 261;
}
#welcome-popup.visible { display: flex; }
.welcome-popup-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2cqmin;
  background: #0e4f86;
  border: 0.5cqmin solid #fffbe6;
  border-radius: 2.4cqmin;
  padding: 4cqmin 6cqmin 4.5cqmin;
  box-shadow: 0 1cqmin 3cqmin rgba(0,0,0,0.5);
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  animation: welcomePopIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes welcomePopIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.welcome-popup-pic {
  width: 14cqmin;
  height: 14cqmin;
  border-radius: 50%;
  object-fit: cover;
  border: 0.6cqmin solid #fffbe6;
  box-shadow: 0 0 2cqmin rgba(127,224,255,0.5);
}
.welcome-popup-name {
  font-size: 4cqmin;
  font-weight: bold;
  color: #fffbe6;
  -webkit-text-stroke: 0.25cqmin #1c5e91;
  paint-order: stroke fill;
}
.welcome-popup-sub {
  font-size: 2cqmin;
  color: #7fe0ff;
  text-align: center;
  max-width: 40cqmin;
}
.welcome-popup-confirm {
  position: relative;
  width: 14cqmin;
  cursor: pointer;
  margin-top: 0.5cqmin;
}
.welcome-popup-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.welcome-popup-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 118%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.welcome-popup-confirm:hover .welcome-popup-confirm2 { opacity: 1; }
.welcome-popup-confirm.confirm-pressed .welcome-popup-confirm2 { opacity: 0; }

/* ── INIT COVER ─────────────────────────────────────── */
#init-cover {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #ffffff;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  #init-cover { background: #1e1f22; }
}
#init-cover.hidden { display: none; }

/* ── PROFILE ACCOUNT BTN + MODAL ────────────────────── */
.profile-account-wrap {
  position: absolute;
  bottom: 13cqmin;
  left: calc(50% + 50cqmin);
  width: 14cqmin;
  z-index: 205;
  cursor: pointer;
  pointer-events: all;
  display: none;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.profile-account-wrap:hover { transform: translateZ(0) scale(1.08); }
#loading-screen.table-shown .profile-account-wrap { pointer-events: none; }
.profile-account1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.profile-account2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 118%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.profile-account-wrap:hover .profile-account2 { opacity: 1; }
.profile-account-wrap.confirm-pressed .profile-account2 { opacity: 0; }

.account-modal {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: all;
}
.account-modal.open { display: flex; }

.account-modal-box {
  position: relative;
  background: #fffbe6;
  border: 0.6cqmin solid #8b6a00;
  border-radius: 2cqmin;
  padding: 4cqmin 5cqmin 3.5cqmin;
  min-width: 38cqmin;
  max-width: 50cqmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2cqmin;
  box-shadow: 0 0.8cqmin 2cqmin rgba(0,0,0,0.4);
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  animation: welcomePopIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

.account-modal-title {
  font-size: 3.6cqmin;
  color: #5a4400;
}
.account-modal-desc {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2cqmin;
  text-align: center;
  color: #7a6020;
  margin: 0;
}

.account-modal-opt {
  width: 100%;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2.4cqmin;
  border-radius: 1.4cqmin;
  padding: 1.2cqmin 0;
  cursor: pointer;
  color: #fff;
  border: 0.5cqmin solid;
  transition: transform 0.1s;
}
.account-modal-opt:hover  { transform: scale(1.04); }
.account-modal-opt:active { transform: scale(0.96); }

.account-modal-link {
  background: none;
  border: none;
  color: #a0c4ff;
  font-size: 1.8cqmin;
  cursor: pointer;
  padding: 0.4cqmin 0;
  text-decoration: underline;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  transition: opacity 0.15s;
  align-self: center;
  margin-top: 0.4cqmin;
}
.account-modal-link:hover { opacity: 0.75; }

.account-modal-back {
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.8cqmin;
  cursor: pointer;
  padding: 0.4cqmin 0;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  transition: opacity 0.15s;
  align-self: center;
  margin-top: 0.2cqmin;
}
.account-modal-back:hover { opacity: 0.75; }

.account-modal-login {
  background: #2bd14b;
  border-color: #1c8a32;
}
.account-modal-register {
  background: #f4a800;
  border-color: #8b6a00;
}

.account-modal-close {
  position: absolute;
  top: -2.8cqmin;
  left: -2.8cqmin;
  width: 7cqmin;
  height: 7cqmin;
  border-radius: 50%;
  border: 0.5cqmin solid #a32a26;
  background: #e8504a;
  color: #fff;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 4.5cqmin;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s;
}
.account-modal-close:hover  { transform: scale(1.1); }
.account-modal-close:active { transform: scale(0.95); }

.account-view { display: flex; flex-direction: column; align-items: center; gap: 2.2cqmin; width: 100%; }

.account-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.2cqmin;
  width: 100%;
}
.account-label {
  font-size: 1.8cqmin;
  color: #5a4400;
  text-align: left;
}
.account-input {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2cqmin;
  color: #3a2800;
  background: #fff8d6;
  border: 0.35cqmin solid #8b6a00;
  border-radius: 1.2cqmin;
  padding: 0.9cqmin 1.4cqmin;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.account-input:focus { border-color: #c8960c; box-shadow: 0 0 0 0.2cqmin #f4d07a; }
.account-input.input-error { border-color: #c0392b; }

.account-spinner {
  width: 7cqmin;
  height: 7cqmin;
  border: 0.7cqmin solid #e0d08a;
  border-top-color: #8b6a00;
  border-radius: 50%;
  animation: acct-spin 0.8s linear infinite;
  margin: 3cqmin 0;
}
@keyframes acct-spin { to { transform: rotate(360deg); } }

.account-verify-icon {
  font-size: 6cqmin;
  line-height: 1;
}
.account-welcome-name {
  color: #fde20e;
  -webkit-text-stroke: 0.3cqmin #8b6a00;
  paint-order: stroke fill;
}
.account-modal-box.hide-close > .account-modal-close { display: none; }

body.account-logged .loading-player-name {
  color: #fde20e;
  -webkit-text-stroke: 0.8cqmin #8b6a00;
}
body.account-logged .loading-name-edit {
  display: none;
}

.pass-strength-wrap {
  display: flex;
  align-items: center;
  gap: 1.2cqmin;
  margin-top: -0.4cqmin;
}
.pass-strength-bar {
  flex: 1;
  height: 0.7cqmin;
  background: #e0d08a;
  border-radius: 1cqmin;
  overflow: hidden;
}
.pass-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 1cqmin;
  transition: width 0.3s, background 0.3s;
}
.pass-strength-label {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.5cqmin;
  min-width: 6cqmin;
  text-align: right;
}
.account-error {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 1.5cqmin;
  color: #c0392b;
  min-height: 1.8cqmin;
  text-align: left;
  margin-top: -0.6cqmin;
}

/* ── ACCOUNT LOGGED-IN VIEWS ────────────────────────── */
.account-modal-pic-wrap {
  position: relative;
  width: 6.5cqmin;
  height: 6.5cqmin;
  border-radius: 50%;
  overflow: hidden;
  border: 0.5cqmin solid #c8a800;
  cursor: pointer;
  flex-shrink: 0;
}
.account-modal-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.account-modal-pic-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2cqmin;
  color: #fff;
  background: rgba(0,0,0,0);
  opacity: 0;
  transition: opacity 0.18s, background 0.18s;
  pointer-events: none;
}
.pic-upload-spinner {
  width: 1.8cqmin;
  height: 1.8cqmin;
  border: 0.35cqmin solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: acct-spin 0.7s linear infinite;
}
.loading-profile-pic-wrap .pic-upload-spinner {
  width: 4cqmin;
  height: 4cqmin;
  border-width: 0.5cqmin;
}
.account-modal-pic-wrap.pic-hover .account-modal-pic-overlay,
.account-modal-pic-wrap.pic-uploading .account-modal-pic-overlay,
.loading-profile-pic-wrap.pic-uploading .loading-profile-pic-overlay {
  opacity: 1;
  background: rgba(0,0,0,0.5);
}

.account-linked-name {
  font-size: 3.2cqmin;
  color: #fde20e;
  -webkit-text-stroke: 0.3cqmin #8b6a00;
  paint-order: stroke fill;
  text-align: center;
}
.account-action-list {
  display: flex;
  flex-direction: column;
  gap: 1.2cqmin;
  width: 100%;
  margin-top: 0.5cqmin;
}
.account-action-btn {
  display: flex;
  align-items: center;
  gap: 2cqmin;
  width: 100%;
  background: rgba(139,106,0,0.08);
  border: 0.25cqmin solid #d4aa30;
  border-radius: 2cqmin;
  padding: 1.8cqmin 2cqmin;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2cqmin;
  color: #5a4400;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-sizing: border-box;
}
.account-action-btn:hover  { background: rgba(139,106,0,0.15); transform: scale(1.02); }
.account-action-btn:active { transform: scale(0.97); }
.account-action-icon  { font-size: 2.5cqmin; flex-shrink: 0; }
.account-action-arrow { margin-left: auto; color: #8b6a00; font-size: 2.5cqmin; }
.account-action-btn.danger { color: #c0392b; border-color: #e74c3c; background: rgba(192,57,43,0.07); }
.account-action-btn.danger:hover { background: rgba(192,57,43,0.14); }
.account-ok-icon { font-size: 5.5cqmin; line-height: 1; }

/* ── SCREEN WARNING ─────────────────────────────────── */
#screen-warning {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 100002;
  background: #0a1a2e;
  align-items: center;
  justify-content: center;
}

#screen-warning.visible {
  display: flex;
}

#screen-warning-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 50px;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  text-align: center;
  max-width: 420px;
}

#screen-warning-icon {
  font-size: 56px;
}
body.is-mobile #screen-warning-icon {
  animation: rotate-hint 1.6s ease-in-out infinite;
}

@keyframes rotate-hint {
  0%,100% { transform: rotate(0deg); }
  40%      { transform: rotate(90deg); }
  60%      { transform: rotate(90deg); }
}

#screen-warning-msg {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 18px;
  color: #fff;
  margin: 0;
}

#screen-warning-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* ── SPLASH ─────────────────────────────────────────── */
#splash-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 100;
  gap: 28px;
  padding-top: 4%;
}

#splash-city {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  object-fit: contain;
  pointer-events: none;
}

#splash-screen h1 {
  font-size: 56px;
  color: #f5d98b;
  text-shadow: 0 0 30px #c8860a, 2px 2px 0 #7a4400;
  letter-spacing: 4px;
  text-transform: uppercase;
}

#splash-screen p {
  color: #c8a060;
  font-size: 18px;
  text-align: center;
  max-width: 460px;
  line-height: 1.7;
}

#splash-highscore-wrap {
  position: absolute;
  left: 40%;
  top: 34%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ── PREGAME COUNTDOWN ──────────────────────────────── */
#pregame-countdown {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  pointer-events: none;
}

#pregame-countdown-img {
  object-fit: contain;
  animation: pregame-pop 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.55));
}

@keyframes pregame-pop {
  0%   { opacity: 0; transform: scale(0.2) rotate(-8deg); }
  55%  { opacity: 1; transform: scale(1.1) rotate(2deg); }
  75%  { transform: scale(0.96) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── TIME UP OVERLAY ────────────────────────────────── */
#timeup-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  pointer-events: none;
}

#timeup-overlay img {
  max-width: 35cqw;
  max-height: 25cqh;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.7));
}

#timeup-overlay.timeup-in img {
  animation: timeup-enter 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
}

#timeup-overlay.timeup-out img {
  animation: timeup-exit 0.35s ease-in forwards;
}

@keyframes timeup-enter {
  0%   { opacity: 0; transform: scale(0.3) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  80%  { transform: scale(0.97) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes timeup-exit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ── GAME OVER ──────────────────────────────────────── */
#gameover-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  gap: 20px;
  display: none;
}

#gameover-screen h2 {
  font-size: 52px;
  color: #f5d98b;
  text-shadow: 0 0 30px #c8860a, 2px 2px 0 #7a4400;
  letter-spacing: 3px;
}

#gameover-screen h2,
#final-score-label,
#final-score-value,
#new-highscore-banner { display: none !important; }

#final-score-label {
  color: #c8a060;
  font-size: 20px;
}

#final-score-value {
  font-size: 76px;
  color: #f0c040;
  text-shadow: 0 0 20px #c8860a;
  font-weight: bold;
}

/* ── SPLASH HIGHSCORE ───────────────────────────────── */
#splash-highscore-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#splash-highscore-label {
  color: #c8a060;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#splash-highscore-value {
  font-size: 40px;
  font-weight: bold;
  color: #f0c040;
  text-shadow: none;
  font-family: 'Arial Black', Impact, sans-serif;
}

/* ── NEW HIGHSCORE BANNER ───────────────────────────── */
#new-highscore-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: hs-pulse 0.6s ease-out;
}

#new-highscore-text {
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 18px #f0c040, 0 0 6px #c8860a;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#new-highscore-score {
  font-size: 28px;
  color: #f0c040;
  font-family: 'Arial Black', Impact, sans-serif;
  text-shadow: 0 0 12px #c8860a;
}

@keyframes hs-pulse {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── SHARED BUTTON ──────────────────────────────────── */
#btn-start {
  position: absolute;
  left: 50%;
  top: 33%;
  transform: translateY(-50%);
  margin-top: 0;
}

#btn-start, #btn-restart {
  margin-top: 8px;
  padding: 15px 52px;
  font-size: 21px;
  font-family: 'Georgia', serif;
  background: linear-gradient(180deg, #d4900a 0%, #8a5400 100%);
  color: #fff8e8;
  border: 3px solid #f0c040;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transition: transform 0.1s, box-shadow 0.1s;
}

#btn-start:hover {
  transform: translateY(calc(-50% - 2px));
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}

#btn-restart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}

#btn-start:active {
  transform: translateY(-50%);
}

#btn-restart:active {
  transform: translateY(0);
}

/* ── GAME WRAPPER ───────────────────────────────────── */
#game-wrapper {
  position: absolute;
  top: 50%;
  left: 45%;
  z-index: 1;
  border: 6px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  display: none;
  overflow: visible;
  /* Fijo y centrado en el viewport (fuera del flujo, para que la caja de layout
     sin escalar no empuje el body y derive en vertical al zoomear). El
     translate(-50%,-50%) se combina con el scale en redimensionarJuego. */
}

/* ── CANVAS ─────────────────────────────────────────── */
#game-canvas {
  display: block;
  cursor: crosshair;
}

/* ── CITY TAG ───────────────────────────────────────── */
#city-tag {
  position: absolute;
  top: -163px;
  left: -525px;
  width: 525px;
  height: 163px;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(6px 6px 0px rgba(0,0,0,0.3));
  transform: rotate(-2deg);
}

@keyframes monument-appear {
  from { opacity: 0; transform: scale(1.33); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes monument-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.6); }
}

.monument-appear {
  animation: monument-appear 0.3s ease-out forwards;
  transform-origin: center center;
}

.monument-exit {
  animation: monument-exit 0.3s ease-in forwards;
  transform-origin: center center;
}

.city-tag-ghost {
  position: absolute;
  width: 525px;
  height: 163px;
  pointer-events: none;
  z-index: 9;
}

#city-tag img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#city-tag-text {
  position: absolute;
  top: 48%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(-1deg);
  font-size: 26px;
  font-weight: bold;
  color: #2a1a00;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

#monument-name {
  position: absolute;
  top: 238px;
  left: 87px;
  width: 282px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  text-shadow: none;
  pointer-events: none;
  opacity: 0;
}

/* ── COUNTDOWN WIDGET ───────────────────────────────── */
#countdown-widget {
  display: none;
  position: absolute;
  top: 2.8cqmin;
  right: 57.5cqmin;
  width: 26.3cqmin;
  height: 14.5cqmin;
  pointer-events: none;
  z-index: 1000;
}

/* Definimos la animación de latido para el contorno de la imagen */
@keyframes pulse-img-shadow {
  0% {
    /* Estado inicial: sin sombra */
    filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
  }
  1% {
    /* Aparece casi instantáneamente (sin fade-in suave) */
    /* El tercer valor (4px) es el difuminado. Al bajarlo de 15px a 4px, la sombra es mucho más dura y sólida. */
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)); 
  }
  10% {
    /* Mantiene la sombra sólida durante una fracción del segundo antes de empezar a desaparecer */
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 1)); 
  }
  45% {
    /* Fade-out más rápido: vuelve a transparente antes de terminar el segundo completo */
    filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
  }
  100% {
    /* Se mantiene transparente hasta que empiece el siguiente ciclo */
    filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0));
  }
}

#countdown-widget > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  /* Aplicamos la animación a la imagen PNG para que titile cada 1 segundo */
  animation: pulse-img-shadow 1s infinite paused;
}

#timer-number {
  position: absolute;
  /* Ajustes de posición para centrarlo mejor con respecto al icono */
  top: 45%; 
  left: 69%; 
  transform: translate(-50%, -50%);
  
  /* Forma y tamaño del texto */
  font-size: 7.4cqmin; /* Más grande para que destaque */
  font-weight: 900; /* El peso más grueso posible */
  font-family: 'Arial Black', Impact, sans-serif; /* Pasamos de 'Georgia' a una fuente de bloque gruesa */

  /* Color blanco puro para el interior */
  color: white;

  /* Efecto del borde negro grueso (Outline) */
  -webkit-text-stroke: 0.27cqmin black;
  /* Sombra para rellenar los bordes exteriores y darle un poco más de solidez */
  text-shadow: 2px 2px 0 #000, 
              -1px -1px 0 #000, 
               1px -1px 0 #000, 
              -1px  1px 0 #000, 
               1px  1px 0 #000;

  pointer-events: none;
  min-width: 4.8cqmin;
  text-align: center;
  transition: color 0.3s;
}

/* Extra de tiempo (+5s) que aparece bajo el contador al completar 10 dots.
   Clase compartida por los 4 modos (cities/monuments, flags, shapes). */
.time-bonus {
  position: absolute;
  top: 102%;
  left: 55%;
  transform: translateX(-50%);
  display: none;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1001;

  /* Mismo font del contador, proporción tipo puntaje, contorno verde */
  font-family: 'Arial Black', Impact, sans-serif;
  font-weight: 900;
  font-size: 5.2cqmin;
  color: #ffffff;
  -webkit-text-stroke: 0.55cqmin #3da83d;
  paint-order: stroke fill;
}

.time-bonus span { display: inline-block; transform: scale(0.5); }

/* Trayectoria: de 0.5x con backout hasta 1.75x y cierre en 1x */
@keyframes tb-pop {
  0%   { transform: scale(0.5); }
  60%  { transform: scale(1.75); }
  100% { transform: scale(1); }
}

.time-bonus.show .tb-plus { animation: tb-pop 0.32s ease-out forwards; }
.time-bonus.show .tb-num  { animation: tb-pop 0.55s ease-out forwards; }

.time-bonus.fade { transition: opacity 0.1s linear; }


/* Progress dots overlaid on countdown widget's bottom row */
#progress-dots {
  position: absolute;
  bottom: 1.1cqmin;
  left: 0.77cqmin;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.38cqmin;
  padding: 0 0.66cqmin;
  pointer-events: none;
  z-index: 11;

  transition: opacity 0.5s ease; 
  opacity: 1;
}

.dot {
  width: 1.75cqmin;
  height: 1.75cqmin;
  border-radius: 50%;
  background: transparent;
  transition: background 0.25s, box-shadow 0.25s, transform 0.2s;
}

/* Mantenemos solo el efecto de crecimiento general */
.dot.filled {
  transform: scale(1.1);
}

/* 1 al 3: Verdes */
.dot.filled:nth-child(1),
.dot.filled:nth-child(2),
.dot.filled:nth-child(3) {
  background: rgba(40, 220, 40, 0.9);
  box-shadow: 0 0 8px rgba(40, 220, 40, 0.8);
}

/* 4 y 5: Verde/Amarillo */
.dot.filled:nth-child(4),
.dot.filled:nth-child(5) {
  background: rgba(180, 220, 0, 0.9);
  box-shadow: 0 0 8px rgba(180, 220, 0, 0.8);
}

/* 6 y 7: Ámbar */
.dot.filled:nth-child(6),
.dot.filled:nth-child(7) {
  background: rgba(255, 180, 0, 0.9);
  box-shadow: 0 0 8px rgba(255, 180, 0, 0.8);
}

/* 8 y 9: Naranja */
.dot.filled:nth-child(8),
.dot.filled:nth-child(9) {
  background: rgba(255, 120, 0, 0.9);
  box-shadow: 0 0 8px rgba(255, 120, 0, 0.8);
}

/* 10: Rojo */
.dot.filled:nth-child(10) {
  background: rgba(255, 40, 40, 0.9);
  box-shadow: 0 0 8px rgba(255, 40, 40, 0.8);
}

#progress-dots.dots-fade-out {
  opacity: 0;
}

@keyframes score-zoom {
  0%   { transform: scale(2.5); opacity: 1; }
  10%  { transform: scale(1);   opacity: 1; }
  48%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ── EMOTE BUBBLE ───────────────────────────────────── */
/* Globo posicionado arriba-izquierda del perfil, cola abajo-derecha hacia la tarjeta */
.emote-bubble {
  position: absolute;
  bottom: calc(80% - 0.88cqmin); /* encima del entry */
  right: 8.78cqmin;              /* alineado hacia la izquierda del entry */
  pointer-events: none;
  z-index: 200;
  animation: emote-pop 1.8s ease-out forwards;
}

.emote-img {
  display: block;
  width: 11.2cqmin;
  height: 11.2cqmin;
  object-fit: contain;
}


@keyframes emote-pop {
  0%   { opacity: 0; transform: scale(0.3) translateY(10px); }
  14%  { opacity: 1; transform: scale(1.12) translateY(0); }
  24%  { transform: scale(1) translateY(0); }
  70%  { opacity: 1; transform: scale(1) translateY(-6px); }
  100% { opacity: 0; transform: scale(0.85) translateY(-14px); }
}

.score-popup {
  position: absolute;
  bottom: -0.55cqmin;
  left: 65.9cqmin;
  color: #ffffff;
  font-size: 7.1cqmin;
  font-family: 'Dimbo', sans-serif;
  letter-spacing: 0.55cqmin;
  -webkit-text-stroke: 1.54cqmin #073A79;
  paint-order: stroke fill;
  pointer-events: none;
  z-index: 1001;
  animation: score-zoom 1.3s ease-out forwards;
  transform-origin: center center;
  white-space: nowrap;
}

.score-popup::before {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  color: #ffffff;
  font-size: 7.1cqmin;
  font-family: 'Dimbo', sans-serif;
  letter-spacing: 0.55cqmin;
  -webkit-text-stroke: 0.77cqmin #FD9C1A;
  paint-order: stroke fill;
  white-space: nowrap;
}

/* Barra celeste pegada al borde derecho del área visible, detrás del panel de
   amigos (z-index < 50). Solo se ve durante el juego (los screens la tapan). */
#right-edge-bar {
  position: absolute;
  right: 15%;            /* borde derecho del área visible (288/1920) */
  top: 0;
  bottom: 0;             /* cubre de arriba a abajo en su totalidad */
  width: 19.1cqmin;      /* ~10px más a la izquierda que antes (18cqmin) */
  background-color: rgba(135, 198, 255, 0.90); /* celeste 90% */
  z-index: 49;           /* encima de todo, salvo los paneles de amigos (z-index:50) */
  pointer-events: none;
}

/* ── RIGHT PANEL (leaderboard + profile) ────────────── */
#right-panel {
  position: absolute;
  right: 16.5%;
  bottom: 3cqmin;
  width: 12.6cqmin;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7cqmin;
  z-index: 50;
  pointer-events: none;
}

#leaderboard {
  position: relative;
  width: 100%;
  overflow: visible;
  /* clip-path corta solo en vertical (top/bottom), deja pasar el globo a la izquierda */
  clip-path: inset(0 -300px);
  /* height calculada por JS según el tamaño de las entradas */
}

.lb-entry {
  position: absolute;
  left: 0;
  width: 100%;
  aspect-ratio: 4 / 6;
  background: #1a4080;
  border-radius: 1.1cqmin;
  box-shadow: 0 0.2cqmin 0.7cqmin rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.9cqmin;
  box-sizing: border-box;
  transition: top 0.7s cubic-bezier(0.22,1,0.36,1);
}

.lb-entry.lb-player {
  border: 1.5px solid rgba(255,255,255,0.5);
  z-index: 10;
}

.lb-entry.lb-best {
  border: 1.5px solid #f0c040;
  background: #2a1060;
}

.lb-avatar-best {
  background: #6a0dad;
  color: #f0c040;
  font-size: 32px;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-entry.lb-best .lb-score {
  color: #f0c040;
}

.lb-avatar-img-wrap { padding: 0; }
.lb-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.7cqmin;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6cqmin;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
}

.lb-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lb-score {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 2.2cqmin;
  color: #ffffff;
  white-space: nowrap;
}

.lb-entry.lb-player .lb-score {
  color: #f0e060;
}


#highscore-value {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #f0c040;
  text-shadow: 1px 1px 0 #7a4400;
}

/* ── SCORE ──────────────────────────────────────────── */
#ingame-power {
  position: absolute;
  top: 0.5%;
  left: 74%;
  transform: translateX(-50%);
  height: 6.5cqmin;
  width: auto;
  z-index: 990;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.12s ease;
  user-select: none;
  -webkit-user-drag: none;
}
#ingame-power:hover { transform: translateX(-50%) scale(1.15); }

/* Pestañita de confirmación para abandonar la partida */
#ingame-quit-popup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto; /* el backdrop captura todo: nada del juego es seleccionable */
}
.ingame-quit-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqmin;
  width: 52cqmin;
  padding: 3.5cqmin;
  background: #fffbe6;
  border: 0.6cqmin solid #8b6a00;
  border-radius: 2cqmin;
  box-shadow: 0 0.8cqmin 2cqmin rgba(0,0,0,0.4);
}
.ingame-quit-text {
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 3cqmin;
  color: #5a4400;
  text-align: center;
  line-height: 1.2;
}
.ingame-quit-actions {
  display: flex;
  gap: 3cqmin;
}
.ingame-quit-btn {
  width: 8cqmin;
  height: 8cqmin;
  border-radius: 50%;
  border: 0.5cqmin solid;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 4.2cqmin;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s;
}
.ingame-quit-btn:hover  { transform: scale(1.1); }
.ingame-quit-btn:active { transform: scale(0.95); }
.ingame-quit-btn.confirm { background: #2bd14b; border-color: #1c8a32; }
.ingame-quit-btn.cancel  { background: #e8504a; border-color: #a32a26; }

#score-display {
  display: none;
  position: absolute;
  bottom: 1.1cqmin;
  left: 37.3cqmin;
  width: 17.6cqmin;
  height: 5.3cqmin;
  pointer-events: none;
  z-index: 1000;
}

#score-display > img {
  width: 180%;
  height: 140%;
  object-fit: fill;
  display: block;
}

/* Importar Fredoka con peso 700 (negrita) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap');

@keyframes speed-bonus-anim {
  0%   { opacity: 0; transform: translateX(-50%) scale(3); color: #ffffff; -webkit-text-stroke: 0.44cqmin #ffffff; }
  10%  { opacity: 1; transform: translateX(-50%) scale(1); color: #ffffff; -webkit-text-stroke: 0.44cqmin #ffffff; }
  18%  { opacity: 1; transform: translateX(-50%) scale(1); color: #FFFF00; -webkit-text-stroke: 0.44cqmin #000080; }
  75%  { opacity: 1; transform: translateX(-50%) scale(1); color: #FFFF00; -webkit-text-stroke: 0.44cqmin #000080; }
  100% { opacity: 0; transform: translateX(-150%) scale(1); color: #FFFF00; -webkit-text-stroke: 0.44cqmin #000080; }
}

#speed-bonus-text {
  position: absolute;
  bottom: 7.9cqmin;
  left: 53.1cqmin;
  z-index: 50;
  transform: translateX(-50%);

  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 3cqmin;
  color: #FFFF00;
  -webkit-text-stroke: 0.44cqmin #000080;
  paint-order: stroke fill;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

#speed-bonus-text.visible {
  animation: speed-bonus-anim 1.5s ease-out forwards;
}

#score-value {
  position: absolute;
  top: 45%;
  left: 90%;
  transform: translate(-50%, -50%);
  font-size: 7.1cqmin;
  color: #ffffff;
  font-family: 'Dimbo', sans-serif;
  -webkit-text-stroke: 0.66cqmin black;
  paint-order: stroke fill;
  letter-spacing: 0.55cqmin;
}

/* ── RESULT LABEL ───────────────────────────────────── */
@keyframes result-label-anim {
  0%   { transform: scale(1); opacity: 0; }
  11%  { transform: scale(1); opacity: 1; }
  22%  { transform: scale(2); opacity: 1; }
  36%  { transform: scale(2); opacity: 1; }
  91%  { transform: scale(2); opacity: 0; }
}

#result-label {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  font-family: 'Arial Black', Impact, sans-serif;
  text-shadow:
     0  1px 0 #183897,
     0 -1px 0 #183897,
     1px  0 0 #183897,
    -1px  0 0 #183897,
     1px  1px 0 #183897,
    -1px  1px 0 #183897,
     1px -1px 0 #183897,
    -1px -1px 0 #183897;
  opacity: 0;
  transform-origin: center center;
  white-space: nowrap;
}

#result-label.visible {
  animation: result-label-anim 0.7s ease-out forwards;
}

#result-label.perfect { color: #ffffff; -webkit-text-stroke: 1px #ff2222; }
#result-label.good    { color: #ffffff; -webkit-text-stroke: 1px #ffaa55; }
#result-label.fair    { color: #ffffff; -webkit-text-stroke: 1px #ffff00; }
#result-label.wayoff  { color: #ffffff; -webkit-text-stroke: 1px #55ccff; }


/*
#coord-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: monospace;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  display: none;
  transform: translate(14px, -50%);
}
*/

/* ── RESPONSIVIDAD DE LAS BARRAS LATERALES ────── */
@media (max-width: 1024px) {
  #bottom-counter { left: 8%; }
}

@media (max-width: 768px) {
  #bottom-counter { left: 50%; transform: translateX(-50%); border-radius: 4px; }
} /* <── AQUÍ se debe cerrar el media query */

/* EL EFECTO TRENCITO DEBE IR FUERA DE CUALQUIER MEDIA QUERY */
@keyframes trencito-colors {
  0%   { background-color: rgba(40, 220, 40, 0.9); }
  20%  { background-color: rgba(180, 220, 0, 0.9); }
  40%  { background-color: rgba(255, 180, 0, 0.9); }
  60%  { background-color: rgba(255, 120, 0, 0.9); }
  80%  { background-color: rgba(255, 40, 40, 0.9); }
  100% { background-color: rgba(40, 220, 40, 0.9); }
}

/* Usamos .dot directamente para que todos bailen durante la animación */
#progress-dots.train-animation .dot {
  animation: trencito-colors 0.8s linear infinite !important;
  transition: none !important; 
  transform: scale(1.2); /* Un poquito más grandes durante el efecto */
}

/* Delays para crear la ola */
#progress-dots.train-animation .dot:nth-child(1)  { animation-delay: -0.9s !important; }
#progress-dots.train-animation .dot:nth-child(2)  { animation-delay: -0.8s !important; }
#progress-dots.train-animation .dot:nth-child(3)  { animation-delay: -0.7s !important; }
#progress-dots.train-animation .dot:nth-child(4)  { animation-delay: -0.6s !important; }
#progress-dots.train-animation .dot:nth-child(5)  { animation-delay: -0.5s !important; }
#progress-dots.train-animation .dot:nth-child(6)  { animation-delay: -0.4s !important; }
#progress-dots.train-animation .dot:nth-child(7)  { animation-delay: -0.3s !important; }
#progress-dots.train-animation .dot:nth-child(8)  { animation-delay: -0.2s !important; }
#progress-dots.train-animation .dot:nth-child(9)  { animation-delay: -0.1s !important; }
#progress-dots.train-animation .dot:nth-child(10) { animation-delay: 0s !important; }

/* ── MODO BANDERAS ───────────────────────────────────── */
#flags-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 15;
  display: none;
  overflow: visible;
  pointer-events: none;
}


#flags-countdown-widget {
  display: none;
  position: absolute;
  top: 2.8cqmin;
  right: 57.5cqmin;
  width: 26.3cqmin;
  height: 14.5cqmin;
  pointer-events: none;
  z-index: 1000;
}

#flags-countdown-widget > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  animation: pulse-img-shadow 1s infinite paused;
}

#flags-timer-number {
  position: absolute;
  top: 45%;
  left: 69%;
  transform: translate(-50%, -50%);
  font-size: 7.4cqmin;
  font-weight: 900;
  font-family: 'Arial Black', Impact, sans-serif;
  color: white;
  -webkit-text-stroke: 0.27cqmin black;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  pointer-events: none;
  min-width: 4.8cqmin;
  text-align: center;
  transition: color 0.3s;
}

#flags-progress-dots {
  position: absolute;
  bottom: 1.1cqmin;
  left: 0.77cqmin;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 0.38cqmin;
  padding: 0 0.66cqmin;
  pointer-events: none;
  z-index: 11;
  transition: opacity 0.5s ease;
  opacity: 1;
}

#flags-progress-dots.dots-fade-out { opacity: 0; }

#flags-progress-dots.train-animation .dot {
  animation: trencito-colors 0.8s linear infinite !important;
  transition: none !important;
  transform: scale(1.2);
}
#flags-progress-dots.train-animation .dot:nth-child(1)  { animation-delay: -0.9s !important; }
#flags-progress-dots.train-animation .dot:nth-child(2)  { animation-delay: -0.8s !important; }
#flags-progress-dots.train-animation .dot:nth-child(3)  { animation-delay: -0.7s !important; }
#flags-progress-dots.train-animation .dot:nth-child(4)  { animation-delay: -0.6s !important; }
#flags-progress-dots.train-animation .dot:nth-child(5)  { animation-delay: -0.5s !important; }
#flags-progress-dots.train-animation .dot:nth-child(6)  { animation-delay: -0.4s !important; }
#flags-progress-dots.train-animation .dot:nth-child(7)  { animation-delay: -0.3s !important; }
#flags-progress-dots.train-animation .dot:nth-child(8)  { animation-delay: -0.2s !important; }
#flags-progress-dots.train-animation .dot:nth-child(9)  { animation-delay: -0.1s !important; }
#flags-progress-dots.train-animation .dot:nth-child(10) { animation-delay: 0s !important; }

#flags-result-label {
  position: absolute;
  pointer-events: none;
  z-index: 20;
  font-size: 36px;
  font-weight: 900;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  opacity: 0;
  transform-origin: center center;
  white-space: nowrap;
}

#flags-result-label.visible {
  animation: result-label-anim 0.7s ease-out forwards;
}

#flags-result-label.perfect { color: #ffffff; -webkit-text-stroke: 1px #ff2222; }
#flags-result-label.good    { color: #ffffff; -webkit-text-stroke: 1px #ffaa55; }
#flags-result-label.fair    { color: #ffffff; -webkit-text-stroke: 1px #ffff00; }
#flags-result-label.wayoff  { color: #ffffff; -webkit-text-stroke: 1px #55ccff; }

#flags-speed-bonus-text {
  position: absolute;
  bottom: 7.9cqmin;
  left: 53.1cqmin;
  z-index: 50;
  transform: translateX(-50%);
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 3cqmin;
  color: #FFFF00;
  -webkit-text-stroke: 0.44cqmin #000080;
  paint-order: stroke fill;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

#flags-speed-bonus-text.visible {
  animation: speed-bonus-anim 1.5s ease-out forwards;
}

#flags-score-display {
  display: none;
  position: absolute;
  bottom: 1.1cqmin;
  left: 37.3cqmin;
  z-index: 20;
  width: 17.6cqmin;
  height: 5.3cqmin;
}

#flags-score-display > img {
  width: 180%;
  height: 140%;
  object-fit: fill;
  display: block;
}

#flags-score-value {
  position: absolute;
  top: 45%;
  left: 90%;
  transform: translate(-50%, -50%);
  font-size: 7.1cqmin;
  color: #ffffff;
  font-family: 'Dimbo', sans-serif;
  -webkit-text-stroke: 0.66cqmin black;
  paint-order: stroke fill;
  letter-spacing: 0.55cqmin;
  pointer-events: none;
}

#flags-right-panel {
  display: none;
  position: absolute;
  right: 16.5%;
  bottom: 3cqmin;
  width: 12.6cqmin;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7cqmin;
  z-index: 50;
  pointer-events: none;
}

#flags-leaderboard {
  position: relative;
  width: 100%;
  overflow: visible;
  clip-path: inset(0 -300px);
}

#flags-pregame-countdown {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#flags-pregame-countdown-img {
  object-fit: contain;
  animation: pregame-pop 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.55));
}

#flags-timeup-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#flags-timeup-overlay img {
  max-width: 35cqw;
  max-height: 25cqh;
  object-fit: contain;
}

#flags-timeup-overlay.timeup-in img {
  animation: timeup-enter 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
}

#flags-timeup-overlay.timeup-out img {
  animation: timeup-exit 0.35s ease-in forwards;
}

#flags-machine,
#flags-machine2,
#flags-machine3,
#flags-machine3b {
  position: absolute;
  bottom: 0;
  width: 148.2cqmin;
  pointer-events: none;
}

#flags-luggage-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 175px;
  z-index: 10;
  pointer-events: none;
}

#flags-luggage-group,
#flags-luggage-left-group,
#flags-luggage-right-group,
#flags-luggage-bl-group,
#flags-luggage-bc-group,
#flags-luggage-br-group {
  pointer-events: auto;
  cursor: pointer;
}

#flags-luggage-wrap img,
#flags-luggage,
.flags-luggage-side {
  transition: filter 0.15s ease;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

#flags-luggage-wrap #flags-luggage,
#flags-luggage-wrap .flags-luggage-side {
  pointer-events: auto;
}

#flags-luggage-group:hover #flags-luggage,
#flags-luggage-left-group:hover .flags-luggage-side,
#flags-luggage-right-group:hover .flags-luggage-side,
#flags-luggage-bl-group:hover .flags-luggage-side,
#flags-luggage-bc-group:hover .flags-luggage-side,
#flags-luggage-br-group:hover .flags-luggage-side {
  filter: brightness(0.7);
}

#flags-luggage-wrap.flags-game-ended #flags-luggage-group:hover #flags-luggage,
#flags-luggage-wrap.flags-game-ended #flags-luggage-left-group:hover .flags-luggage-side,
#flags-luggage-wrap.flags-game-ended #flags-luggage-right-group:hover .flags-luggage-side,
#flags-luggage-wrap.flags-game-ended #flags-luggage-bl-group:hover .flags-luggage-side,
#flags-luggage-wrap.flags-game-ended #flags-luggage-bc-group:hover .flags-luggage-side,
#flags-luggage-wrap.flags-game-ended #flags-luggage-br-group:hover .flags-luggage-side {
  filter: none !important;
  cursor: default !important;
}

#flags-luggage-group {
  position: absolute;
  top: -80px;
  left: -70px;
}

#flags-luggage-left-group {
  position: absolute;
  top: -80px;
  left: -390px;
}

#flags-luggage-right-group {
  position: absolute;
  top: -80px;
  left: 250px;
}

#flags-luggage-group.luggage-enter-active,
#flags-luggage-left-group.luggage-enter-active,
#flags-luggage-right-group.luggage-enter-active {
  animation: luggage-enter 0.2s ease-out both;
}

#flags-luggage-bl-group.luggage-enter-active,
#flags-luggage-bc-group.luggage-enter-active,
#flags-luggage-br-group.luggage-enter-active {
  animation: luggage-enter 0.2s ease-out both;
}

@keyframes luggage-enter {
  from { transform: translateY(-800px); }
  to   { transform: translateY(0); }
}

/* Bottom row in six-mode starts 230px higher to match top row's visual origin */
#flags-luggage-wrap.flags-six-mode #flags-luggage-bl-group.luggage-enter-active,
#flags-luggage-wrap.flags-six-mode #flags-luggage-bc-group.luggage-enter-active,
#flags-luggage-wrap.flags-six-mode #flags-luggage-br-group.luggage-enter-active {
  animation: luggage-enter-six-bottom 0.2s ease-out both;
}

@keyframes luggage-enter-six-bottom {
  from { transform: translateY(-1030px); }
  to   { transform: translateY(0); }
}

#flags-luggage-bl-group {
  position: absolute;
  top: 110px;
  left: -390px;
}

#flags-luggage-bc-group {
  position: absolute;
  top: 110px;
  left: -70px;
}

#flags-luggage-br-group {
  position: absolute;
  top: 110px;
  left: 250px;
}

/* Shift both rows up when 6 luggages are active */
#flags-luggage-wrap.flags-six-mode #flags-luggage-left-group,
#flags-luggage-wrap.flags-six-mode #flags-luggage-group,
#flags-luggage-wrap.flags-six-mode #flags-luggage-right-group {
  top: -175px;
}

#flags-luggage-wrap.flags-six-mode #flags-luggage-bl-group,
#flags-luggage-wrap.flags-six-mode #flags-luggage-bc-group,
#flags-luggage-wrap.flags-six-mode #flags-luggage-br-group {
  top: 50px;
}

#flags-flag-container-bl,
#flags-flag-container-bc,
#flags-flag-container-br {
  position: absolute;
  top: 41px;
  left: 43px;
  width: 172px;
  height: 122px;
  overflow: visible;
  clip-path: path('M 9 2 Q 11 -12 26 -11 L 144 -1 Q 158 0 159 14 L 159 101 Q 171 108 146 116 L 8 116 Q -6 116 -4 104 Q -10 55 9 2 Z');
  transform: rotate(-6deg) perspective(400px) rotateX(4deg);
  z-index: 1;
}

#flags-flag-img-bl,
#flags-flag-img-bc,
#flags-flag-img-br {
  width: 157px;
  height: 95px;
  object-fit: fill;
  transform-origin: 0 0;
  transform: matrix3d(1.0827, 0.0764, 0, 0.000659, -0.1750, 1.2702, 0, -0.000665, 0, 0, 1, 0, 11, -12, 0, 1);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

#flags-flag-container-left,
#flags-flag-container-right {
  position: absolute;
  top: 41px;
  left: 43px;
  width: 172px;
  height: 122px;
  overflow: visible;
  clip-path: path('M 9 2 Q 11 -12 26 -11 L 144 -1 Q 158 0 159 14 L 159 101 Q 171 108 146 116 L 8 116 Q -6 116 -4 104 Q -10 55 9 2 Z');
  transform: rotate(-6deg) perspective(400px) rotateX(4deg);
  z-index: 1;
}

#flags-flag-img-left,
#flags-flag-img-right {
  width: 157px;
  height: 95px;
  object-fit: fill;
  transform-origin: 0 0;
  transform: matrix3d(1.0827, 0.0764, 0, 0.000659, -0.1750, 1.2702, 0, -0.000665, 0, 0, 1, 0, 11, -12, 0, 1);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.flags-luggage-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  z-index: 2;
}

#flags-luggage {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  z-index: 2;
}

#flags-flag-container {
  position: absolute;
  top: 41px;
  left: 43px;
  width: 172px;
  height: 122px;
  overflow: visible;
  clip-path: path('M 9 2 Q 11 -12 26 -11 L 144 -1 Q 158 0 159 14 L 159 101 Q 171 108 146 116 L 8 116 Q -6 116 -4 104 Q -10 55 9 2 Z');
  transform: rotate(-6deg) perspective(400px) rotateX(4deg);
  z-index: 1;
}

#flags-flag-img {
  width: 157px;
  height: 95px;
  object-fit: fill;
  transform-origin: 0 0;
  /* TL→(11,-12), TR→(164,0), BR→(158,116), BL→(-6,116) */
  transform: matrix3d(1.0827, 0.0764, 0, 0.000659, -0.1750, 1.2702, 0, -0.000665, 0, 0, 1, 0, 11, -12, 0, 1);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

#flags-check-overlay,
#flags-wrong-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52.4cqmin;
  height: 44.5cqmin;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 50;
  display: none;
}

#flags-badge-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44.5cqmin;
  height: 36.6cqmin;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 50;
  display: none;
}

#flags-check-overlay.animate,
#flags-wrong-overlay.animate,
#flags-badge-overlay.animate {
  display: block;
  animation: flags-check-pop 0.82s ease-out forwards;
}

@keyframes flags-check-pop {
  0%   { transform: translate(-50%, -50%) scale(0.25); }
  24%  { transform: translate(-50%, -50%) scale(1); }
  73%  { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(0); }
}

#flags-badge-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 52;
  display: none;
}

#flags-flagid-wrap {
  position: absolute;
  top: 0;
  left: 46%;
  transform: translateX(-50%);
  width: 49.4cqmin;
  z-index: 10;
  pointer-events: none;
}

#flags-flagid {
  display: block;
  width: 100%;
}

#flags-flagid-label {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 4.2cqmin;
  color: #ffffff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  white-space: nowrap;
  pointer-events: none;
  max-width: 41.7cqmin;
}

#flags-machine  { left: 50%; transform: translateX(-50%); z-index: 3; }
#flags-findluggage { position: absolute; left: calc(50% + 40.6cqmin); bottom: 8.2cqmin; transform: translateX(-50%) scaleX(0.95); width: 24.2cqmin; z-index: 5; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
#flags-findluggage.scrolling { animation: findluggage-scroll 8.15s linear forwards; }
/* Opción errónea descartada por el tiempo: se desvanece y queda deseleccionable. */
.flags-faded { transition: opacity 0.3s ease !important; opacity: 0 !important; pointer-events: none !important; }
@keyframes findluggage-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(calc(-50% - 120.7cqmin)); }
}
#flags-machine2 { left: 50%; transform: translateX(-50%); z-index: 12; }
#flags-machine3 { left: 50%; transform: translateX(-50%); z-index: 4; }
#flags-machine3b { left: calc(50% + 148.2cqmin); transform: translateX(-50%); z-index: 4; }

@keyframes machine3-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(calc(-50% - 148.2cqmin)); }
}

#flags-machine3.scrolling,
#flags-machine3b.scrolling {
  animation: machine3-scroll 10s linear infinite;
}

/* ── VOLUME BUTTON ───────────────────────────────── */
#vol-btn {
  position: absolute;
  top: 3.5%;
  left: 17%;
  transform: translate(-50%, -50%);
  z-index: 990;
  cursor: pointer;
  width: 6cqmin;
}

#vol-btn img {
  display: block;
  width: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  height: auto;
}

#fs-btn {
  position: absolute;
  top: 3.5%;
  left: calc(17% + 7cqmin);
  transform: translate(-50%, -50%);
  z-index: 990;
  cursor: pointer;
  width: 6cqmin;
  height: 6cqmin;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2cqmin;
  color: #fff;
  border: 0.35cqmin dashed rgba(255,255,255,0.7);
  border-radius: 1.2cqmin;
  background: rgba(0,0,0,0.25);
  opacity: 0.85;
  transition: opacity 0.15s, background 0.15s;
  user-select: none;
}
#fs-btn:hover { opacity: 1; background: rgba(0,0,0,0.45); }

/* ── FLAGS MODE OVERRIDES ─────────────────────────────── */
#splash-screen.mode-flags .splash-text2-label        { padding-top: 20%; }
#splash-screen.mode-flags .splash-text2-label.step2  { padding-top: 13%; }
/* En inglés el step2 ocupa un renglón menos → se baja un poco para recentrarlo */
html[lang="en"] #splash-screen.mode-flags .splash-text2-label.step2 { padding-top: 18%; }
#gameover-screen.mode-flags .gameover-text1-label    { padding-top: 18%; }

/* ── SHAPES MODE OVERRIDES ────────────────────────────── */
#splash-screen.mode-shapes .splash-text2-label       { padding-top: 20%; }
#splash-screen.mode-shapes .splash-text2-label.step2 { padding-top: 12%; padding-left: 10%; }
/* En inglés el step2 ocupa un renglón menos → subirlo un poco */
html[lang="en"] #splash-screen.mode-shapes .splash-text2-label.step2 { padding-top: 13%; }

/* ── MONUMENTS MODE OVERRIDES ─────────────────────────── */
#splash-screen.mode-monuments .splash-text2-label       { padding-top: 20%; padding-left: 10%; }
#splash-screen.mode-monuments .splash-text2-label.step2 { padding-top: 17%; }
#gameover-screen.mode-monuments .gameover-text1-label   { padding-top: 22%; }

/* ── CITIES (modo "play", sin clase de modo) ──────────── */
#splash-screen:not(.mode-flags):not(.mode-shapes):not(.mode-monuments) .splash-text2-label       { padding-top: 21%; padding-left: 10%; }
#splash-screen:not(.mode-flags):not(.mode-shapes):not(.mode-monuments) .splash-text2-label.step2 { padding-top: 18%; padding-left: 10%; }

.mode-flags .game-bg-men,
.mode-flags .game-bg-men1,
.mode-flags .game-bg-men2  { left: 26.5%; }

.mode-flags.mode-shapes .game-bg-men,
.mode-flags.mode-shapes .game-bg-men1,
.mode-flags.mode-shapes .game-bg-men2  { left: 35%; }

.mode-flags.mode-shapes .game-bg-women,
.mode-flags.mode-shapes .game-bg-women1,
.mode-flags.mode-shapes .game-bg-women2 { left: 20%; }

.mode-flags.mode-shapes .game-bg-sky { transform: translateX(-50%) scaleY(0.8); bottom: 24%; }
/* Cities (modo "play", sin clase de modo): bajar el sky base */
#splash-screen:not(.mode-flags):not(.mode-shapes):not(.mode-monuments) .game-bg-sky,
#gameover-screen:not(.mode-flags):not(.mode-shapes):not(.mode-monuments) .game-bg-sky { bottom: 28%; transform: translateX(-50%) scaleY(0.666); }

.mode-flags.mode-shapes .game-bg-cloud2 { right: -5%; animation: cloud2-move-shapes 12s linear 3s infinite; }
.mode-flags.mode-shapes .game-bg-plane7 { right: -5%; top: 46%; }

@keyframes cloud2-move-shapes {
  from { right: -5%; }
  to   { right: 120%; }
}

.mode-flags.mode-shapes .game-bg-girl,
.mode-flags.mode-shapes .game-bg-girl1,
.mode-flags.mode-shapes .game-bg-girl2 { transform: scale(0.17); bottom: 2%; left: 29.3%; z-index: 12; }

.mode-flags .game-bg-girl,
.mode-flags .game-bg-girl1,
.mode-flags .game-bg-girl2 { left: 18%; bottom: 0.8%; transform: scale(0.21); }

.mode-flags .game-bg-plane,
.mode-flags .game-bg-plane1,
.mode-flags .game-bg-plane2,
.mode-flags .game-bg-plane3,
.mode-flags .game-bg-plane4,
.mode-flags .game-bg-plane5,
.mode-flags .game-bg-plane6 { display: none; animation: none; }

.mode-flags .game-bg-stairs { display: none; }


.mode-flags .game-bg-plane7 { display: block; }
.mode-flags .game-bg-city-flags { display: block; }
.mode-flags .game-bg-city:not(.game-bg-city-flags) { display: none; }

@keyframes bus-drive-in {
  from { transform: translate(calc(-15cqw - 50%), -50%); }
  to   { transform: translate(calc(35cqw - 50%),  -50%); }
}

.game-bg-bus {
  display: none;
  position: absolute;
  top: 57%;
  left: 0;
  transform: translate(calc(-15cqw - 50%), -50%);
  width: 50.4%;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

.mode-monuments .game-bg-bus {
  display: block;
  animation: bus-drive-in 3.7s 0.2s ease-out forwards;
}

@keyframes clouds-monuments-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-70cqw); }
}

.game-bg-clouds-monuments {
  display: none;
  position: absolute;
  top: -30%;
  left: 0;
  width: 70cqw;
  pointer-events: none;
  z-index: 0;
  animation: clouds-monuments-scroll 18s linear infinite;
}

.game-bg-clouds-monuments2 {
  left: calc(70cqw - 2px);
}

.game-bg-clouds-monuments3 {
  left: calc(140cqw - 4px);
}

.mode-monuments .game-bg-clouds-monuments { display: block; }
.mode-monuments .game-bg-cloud1,
.mode-monuments .game-bg-cloud2 { display: none; }

.mode-monuments .game-bg-girl,
.mode-monuments .game-bg-girl1,
.mode-monuments .game-bg-girl2 { left: 40%; }

.mode-monuments .game-bg-women,
.mode-monuments .game-bg-women1,
.mode-monuments .game-bg-women2 { left: 31.5%; }

.mode-monuments .game-bg-city-monuments { display: block; }
.mode-monuments .game-bg-city-monuments2 { display: block; }
.mode-monuments .game-bg-city-monuments2 { animation: monuments-flicker 0.2s steps(1, end) infinite; }
.mode-monuments .game-bg-city:not(.game-bg-city-monuments):not(.game-bg-city-monuments2) { display: none; }
.mode-monuments .game-bg-sky-monuments { display: block; }
.mode-monuments .game-bg-sky:not(.game-bg-sky-monuments) { display: none; }

.mode-monuments .game-bg-plane,
.mode-monuments .game-bg-plane1,
.mode-monuments .game-bg-plane2,
.mode-monuments .game-bg-plane3,
.mode-monuments .game-bg-plane4,
.mode-monuments .game-bg-plane5,
.mode-monuments .game-bg-plane6 { display: none; animation: none; }

.mode-monuments .game-bg-stairs { display: none; }

/* ── RESULTS SCREEN ──────────────────────────────────── */
@keyframes results-enter {
  from { opacity: 0; transform: scale(1.25); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes results-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.5); }
}

#results-screen {
  overflow: hidden;
}

@keyframes rank-up {
  from { transform: translate(-50%, -50%) scale(0.7); }
  to   { transform: translate(-50%, -50%) scale(1); }
}
@keyframes rank-final {
  from { transform: translate(-50%, -50%) scale(0.75); }
  to   { transform: translate(-50%, -50%) scale(1.25); }
}
.results-rank.rank-up,
.results-rank.visible.rank-up {
  animation: rank-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.results-rank.rank-final,
.results-rank.visible.rank-final {
  animation: rank-final 1s cubic-bezier(0.34, 2.4, 0.58, 1) forwards;
}

@keyframes rank-enter {
  0%    { transform: translate(-50%, -50%) scale(1.5);  opacity: 0; }
  12.5% { transform: translate(-50%, -50%) scale(1.23); opacity: 1; }
  37.5% { transform: translate(-50%, -50%) scale(0.7);  opacity: 1; }
  100%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

.results-rank {
  position: absolute;
  top: 28%;
  left: 50%;
  width: 30.95cqmin;
  height: auto;
  transform: translate(-50%, -50%) scale(0);
  z-index: 20;
  pointer-events: none;
  transition: transform 0.4s ease-out;
}
.results-rank.visible {
  animation: rank-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.results-total-score {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 17;
  font-family: 'Dimbo', sans-serif;
  font-size: 9.88cqmin;
  color: #fff;
  -webkit-text-stroke: 0.99cqmin #000;
  paint-order: stroke fill;
  letter-spacing: 0;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}
.results-total-score .digit {
  display: inline-block;
  width: 0.5em;
  text-align: center;
}
.results-total-score .comma {
  display: inline-block;
  width: 0.2em;
  text-align: center;
}

@keyframes points-enter {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.results-points-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  pointer-events: none;
  opacity: 0;
  z-index: 18;
  transition: transform 0.4s ease-out;
}
.results-points-wrap.visible {
  animation: points-enter 0.3s ease-out forwards;
}

.results-points-label {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%) scaleY(1.1);
  z-index: 17;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 4.61cqmin;
  font-weight: bold;
  color: #000;
  text-shadow: 0.2px 0 0 #000, -0.2px 0 0 #000, 0 0.2px 0 #000, 0 -0.2px 0 #000;
  letter-spacing: 0.11cqmin;
  filter: drop-shadow(0 0 0.4px #000);
  white-space: nowrap;
  pointer-events: none;
}

.results-points {
  position: absolute;
  top: 70%;
  left: 50%;
  width: 40.6cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 16;
  pointer-events: none;
}

@keyframes rank-label-enter {
  from { transform: translate(-50%, 0%) scaleY(0.1); opacity: 0; }
  to   { transform: translate(-50%, -50%) scaleY(1); opacity: 1; }
}
@keyframes rank-label-final {
  0%   { transform: translate(-50%, 0%)   scale(0.1);  opacity: 0; }
  22%  { transform: translate(-50%, -50%) scale(2.0);  opacity: 1; }
  42%  { transform: translate(-50%, -50%) scale(1.0);  opacity: 1; }
  62%  { transform: translate(-50%, -50%) scale(1.5);  opacity: 1; }
  78%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
  90%  { transform: translate(-50%, -50%) scale(1.32); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

.results-back-wrap {
  position: absolute;
  z-index: 22;
  width: 15.4cqmin;
  bottom: 4%;
  right: 38%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
@keyframes back-enter {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
.results-back-wrap.visible {
  opacity: 1;
  pointer-events: auto;
  animation: back-enter 0.4s ease-out forwards;
}
.results-back1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.results-back2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18.1cqmin;
  height: auto;
  pointer-events: none;
  opacity: 0;
}
.results-back-wrap:hover .results-back2 { opacity: 1; }
.results-back-wrap.confirm-pressed .results-back2 { opacity: 0; }

.results-rank-label {
  position: absolute;
  top: 49%;
  transition: transform 0.4s ease-out;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 21;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 5.05cqmin;
  color: #FFFF00;
  -webkit-text-stroke: 0.66cqmin #000080;
  paint-order: stroke fill;
  letter-spacing: -0.5px;
  white-space: nowrap;
  pointer-events: none;
  display: none;
}
.results-rank-label.visible {
  display: block;
  animation: rank-label-enter 0.22s cubic-bezier(0.34, 2.1, 0.58, 1) 0.2s both;
}
.results-rank-label.visible.instant {
  animation-delay: 0s;
}
.results-rank-label.visible.final {
  animation: rank-label-final 1s linear forwards;
}

.results-confirm-wrap {
  position: absolute;
  z-index: 20;
  width: 15.4cqmin;
  bottom: 3%;
  right: 24%;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.results-confirm-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}
.results-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.results-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18.1cqmin;
  height: auto;
  pointer-events: none;
  opacity: 0;
}
.results-confirm-wrap:hover .results-confirm2 { opacity: 1; }
.results-confirm-wrap.confirm-pressed .results-confirm2 { opacity: 0; }

@keyframes confirm-slide-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(150cqh); opacity: 0; }
}
.results-confirm-wrap.slide-out {
  animation: confirm-slide-out 0.7s ease-in forwards;
  pointer-events: none;
}

.results-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 15;
  pointer-events: none;
  transition: transform 0.4s ease-out;
}

/* board y reveal (rango/puntaje que va SOBRE el board) shiftean el MISMO vmin para
   no descalibrarse según el aspect ratio; el content (texto de la burbuja) aparte. */
.results-table.shifted   { transform: translate(calc(-50% - 20cqmin), -50%); }
.results-content.shifted { transform: translateX(-6%); }
.results-text3-wrap {
  position: absolute;
  bottom: 48%;
  right: -55%;
  width: 49.4cqmin;
  z-index: 17;
  pointer-events: none;
  transition: right 0.4s ease-out;
}
.results-text3-wrap.active { right: 1%; }
.results-text3 {
  display: block;
  width: 100%;
  height: auto;
}
.results-rank-desc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 2.85cqmin;
  color: #2a2a2a;
  line-height: 1.5;
  padding: 6% 16% 20%;
  pointer-events: none;
}

.results-flightatt {
  position: absolute;
  bottom: 3%;
  right: -40%;
  height: 48%;
  width: auto;
  contain: layout style;
  z-index: 16;
  pointer-events: none;
  transition: right 0.4s ease-out;
}
.results-flightatt.active { right: 5%; }

#results-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 19;
  pointer-events: none;
  transition: transform 0.4s ease-out;
}
#results-reveal.shifted { transform: translateX(-20cqmin); }

#results-screen.results-animating .results-content {
  animation: results-enter 0.3s ease-out forwards;
}
#results-screen.results-exiting .results-content {
  animation: results-exit 0.3s ease-in forwards;
}
.results-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.results-title {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 6.3cqmin;
  color: #fde20e;
  -webkit-text-stroke: 0.8cqmin #8b6a00;
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
}

.results-planet {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 10.98cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 12;
  pointer-events: none;
}

.results-mark-label {
  position: absolute;
  z-index: 12;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 3.73cqmin;
  font-weight: bold;
  color: #000;
  filter: drop-shadow(0 0 0.4px #000);
  letter-spacing: 0.11cqmin;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%) scaleY(1.1);
}
.results-mark-label1 { left: calc(50% - 20.3cqmin); top: calc(52% - 4.39cqmin); }
.results-mark-label2 { left: calc(50% + 18.1cqmin);  top: calc(52% - 4.39cqmin); }
.results-mark-label3 { left: calc(50% - 20.3cqmin); top: calc(67% - 4.39cqmin); }
.results-mark-label4 { left: calc(50% + 18.1cqmin);  top: calc(67% - 4.39cqmin); }

.results-game {
  position: absolute;
  width: 8.89cqmin;
  height: auto;
  z-index: 11;
  pointer-events: none;
  transform: translateY(-50%);
}
.results-game1 { left: calc(50% - 37.87cqmin); top: 52%; }
.results-game2 { left: calc(50% + 0.55cqmin);  top: 52%; }
.results-game3 { left: calc(50% - 37.87cqmin); top: 67%; }
.results-game4 { left: calc(50% + 0.55cqmin);  top: 67%; }

.results-hs {
  position: absolute;
  font-family: 'Dimbo', sans-serif;
  font-size: 5.93cqmin;
  color: #fff;
  -webkit-text-stroke: 0.88cqmin #000;
  paint-order: stroke fill;
  letter-spacing: 0.55cqmin;
  z-index: 12;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.results-hs1 { left: calc(50% - 15.7cqmin); top: calc(50% + 0.33cqmin); -webkit-text-stroke-color: #0a557f; }
.results-hs2 { left: calc(50% + 22.72cqmin); top: calc(50% + 0.33cqmin); -webkit-text-stroke-color: #8d132a; }
.results-hs3 { left: calc(50% - 15.7cqmin); top: calc(65% + 0.33cqmin); -webkit-text-stroke-color: #06522a; }
.results-hs4 { left: calc(50% + 22.72cqmin); top: calc(65% + 0.33cqmin); -webkit-text-stroke-color: #582f7f; }

.results-mark {
  position: absolute;
  width: 23.71cqmin;
  height: auto;
  top: 50%;
  z-index: 11;
  pointer-events: none;
}
.results-mark1 { left: calc(50% - 27.44cqmin); top: 52%; transform: translateY(-50%) scaleY(1.1); }
.results-mark2 { left: calc(50% + 10.98cqmin); top: 52%; transform: translateY(-50%) scaleY(1.1); }
.results-mark3 { left: calc(50% - 27.44cqmin); top: 67%; transform: translateY(-50%) scaleY(1.1); }
.results-mark4 { left: calc(50% + 10.98cqmin); top: 67%; transform: translateY(-50%) scaleY(1.1); }

.results-table {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 95.4cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.4s ease-out;
  z-index: 10;
  pointer-events: none;
}

#results-screen .loading-clouds   { top: 40%; }
#results-screen .loading-clouds-b { top: 42%; }
#results-screen .loading-clouds-c { top: 60%; }
#results-screen .loading-clouds-fade  { top: 68%; }
#results-screen .loading-clouds-fade2 { top: 79%; }
#results-screen .loading-clouds-fade3 { top: 87%; }

/* ── FINAL SCREEN ────────────────────────────────────── */
#final-group {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 2;
  animation: final-group-enter 3s ease-out forwards;
}

@keyframes final-group-enter {
  from { transform: translate(-120cqw, 50cqh); }
  to   { transform: translate(0, 0); }
}

#final-clouds5 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  z-index: 1;
}
.final-group5 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;  transform-origin: center center;
}
.final2-position {
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-family: 'Dimbo', sans-serif;
  font-size: 5.70cqmin;
  color: #fff;
  -webkit-text-stroke: 0.70cqmin #005fee;
  paint-order: stroke fill;
  letter-spacing: 0.55cqmin;
  white-space: nowrap;
  pointer-events: none;
}
.final2-player-name {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%) scaleY(1.1);
  z-index: 5;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 3.69cqmin;
  color: #000;
  -webkit-text-stroke: 0.26cqmin #fff;
  paint-order: stroke fill;
  letter-spacing: -0.11cqmin;
  white-space: nowrap;
  pointer-events: none;
}
.final2-rank-label {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 3.51cqmin;
  color: #FFFF00;
  -webkit-text-stroke: 0.53cqmin #000080;
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
}
.final2-avatar {
  position: absolute;
  top: 36%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 11.5cqmin;
  height: 11.5cqmin;
  border-radius: 1.1cqmin;
  overflow: hidden;
  border: 0.77cqmin solid #4fc3f7;
  box-sizing: border-box;
  z-index: 5;
}
.final2-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final2-points-wrap {
  position: absolute;
  top: 43%;
  left: 53%;
  transform: translate(-50%, -50%) scale(0.75);
  z-index: 4;
  pointer-events: none;
}
.final2-points-img {
  display: block;
  width: 30.7cqmin;
  height: auto;
}
.final2-points-score {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Dimbo', sans-serif;
  font-size: 7.13cqmin;
  color: #fff;
  -webkit-text-stroke: 0.88cqmin #000;
  paint-order: stroke fill;
  letter-spacing: 0.55cqmin;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes cloud5-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(0.92); }
}
.final-confirm-back-wrap {
  position: absolute;
  z-index: 30;
  width: 15.4cqmin;
  bottom: 5%;
  left: 70%;
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.final-confirm-back-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}
.final-confirm-back1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.final-confirm-back2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18.1cqmin;
  height: auto;
  pointer-events: none;
  opacity: 0;
}
.final-confirm-back-wrap:hover .final-confirm-back2 { opacity: 1; }
.final-confirm-back-wrap.confirm-pressed .final-confirm-back2 { opacity: 0; }

.final-cloud5 {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 52.7cqmin;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  animation: cloud5-pulse 8s ease-in-out infinite;
  transition: filter 0.7s ease;
}
.final-group5.passed .final-cloud5 {
  filter: grayscale(1) brightness(0.22);
}

@keyframes cloud-drift-1 {
  from { transform: translate(-50%, -50%) scale(0.6) translate(0, 0); }
  to   { transform: translate(-50%, -50%) scale(0.6) translate(-3840px, 911px); }
}
@keyframes cloud-drift-2 {
  from { transform: translate(-50%, -50%) scale(1.2) translate(0, 0); }
  to   { transform: translate(-50%, -50%) scale(1.2) translate(-1728px, 410px); }
}
@keyframes cloud-drift-3 {
  from { transform: translate(-50%, -50%) scale(1.0) translate(0, 0); }
  to   { transform: translate(-50%, -50%) scale(1.0) translate(-2304px, 547px); }
}

.final-cloud4 {
  position: absolute;
  top: 20%;
  left: 130%;
  width: 31.8cqmin;
  height: auto;
  pointer-events: none;
  z-index: 1;
  animation: cloud-drift-1 9s linear infinite;
}
.final-cloud4b {
  top: -10%;
  left: 110%;
  pointer-events: none;
  z-index: 1;
  animation: cloud-drift-2 5s linear infinite;
}
.final-cloud4c {
  top: 55%;
  left: 120%;
  pointer-events: none;
  z-index: 1;
  animation: cloud-drift-3 7.5s linear infinite;
}

.final-position {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-family: 'Dimbo', sans-serif;
  font-size: 7.13cqmin;
  color: #f0150f;
  -webkit-text-stroke: 0.88cqmin #7e0606;
  paint-order: stroke fill;
  letter-spacing: 0.55cqmin;
  white-space: nowrap;
  pointer-events: none;
}

.final-player-name {
  position: absolute;
  top: 37%;
  left: 51%;
  transform: translate(-50%, -50%) scaleY(1.1);
  z-index: 5;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-size: 4.61cqmin;
  font-weight: bold;
  color: #000;
  text-shadow: 0.2px 0 0 #fff, -0.2px 0 0 #fff, 0 0.2px 0 #fff, 0 -0.2px 0 #fff;
  filter: drop-shadow(0 0 0.4px #fff);
  letter-spacing: -0.11cqmin;
  white-space: nowrap;
  pointer-events: none;
}

.final-rank-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  font-family: 'VAGRoundBold', 'Arial Black', sans-serif;
  font-weight: bold;
  font-size: 4.39cqmin;
  color: #FFFF00;
  -webkit-text-stroke: 0.66cqmin #000080;
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
}

.final-points-wrap {
  position: absolute;
  top: 44%;
  left: 53%;
  transform: translate(-50%, -50%) scale(0.75);
  z-index: 4;
  pointer-events: none;
}
.final-points-img {
  display: block;
  width: 30.7cqmin;
  height: auto;
}
.final-avatar {
  position: absolute;
  top: 37%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 11.5cqmin;
  height: 11.5cqmin;
  border-radius: 1.1cqmin;
  overflow: hidden;
  border: 0.77cqmin solid #4fc3f7;
  box-sizing: border-box;
  z-index: 5;
}
.final-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.final-points-score {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Dimbo', sans-serif;
  font-size: 7.13cqmin;
  color: #fff;
  -webkit-text-stroke: 0.88cqmin #000;
  paint-order: stroke fill;
  letter-spacing: 0.55cqmin;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes cloud3-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%       { transform: translate(-50%, -50%) scale(0.92); }
}

.final-cloud3-fg {
  position: absolute;
  top: 41%;
  left: 50%;
  width: 65.9cqmin;
  height: auto;
  z-index: 3;
  pointer-events: none;
  animation: cloud3-pulse 8s ease-in-out infinite;
}

.final-plane-wrap {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 2;
  pointer-events: none;
}
.final-plane {
  display: block;
  width: clamp(35cqmin, 60cqmin, 70cqmin);
  height: auto;
  animation: plane-float 2s ease-in-out infinite;
}

/* ── FINAL CONFIRM BUTTON ────────────────────────────── */
.final-confirm-wrap {
  width: 15.4cqmin;
  cursor: pointer;
}
.final-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.final-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18.1cqmin;
  height: auto;
  pointer-events: none;
  opacity: 0;
}
.final-confirm-wrap:hover .final-confirm2 { opacity: 1; }
.final-confirm-wrap.confirm-pressed .final-confirm2 { opacity: 0; }

/* ── TEST GAMEOVER BUTTON ────────────────────────────── */
.test-confirm-wrap {
  position: absolute;
  z-index: 22;
  width: 140px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.test-confirm1 {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.test-confirm2 {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 165px;
  height: auto;
  pointer-events: none;
  opacity: 0;
}
.test-confirm-wrap:hover .test-confirm2 { opacity: 1; }
.test-confirm-wrap.confirm-pressed .test-confirm2 { opacity: 0; }

/* ── RECORDING TOGGLE BUTTON ─────────────────────────── */
#recording-toggle {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 28px;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}
#recording-toggle:hover  { opacity: 1; }
#recording-toggle.active { background: rgba(200,0,0,0.7); opacity: 1; }

/* ── RECORDING MODE ───────────────────────────────────── */
.recording-mode,
.recording-mode * { cursor: url('../images/cursor.png'), auto !important; }

.recording-mode #flags-countdown-widget,
.recording-mode #flags-score-display,
.recording-mode #flags-speed-bonus-text,
.recording-mode #flags-result-label,
.recording-mode #flags-right-panel,
.recording-mode #flags-check-overlay,
.recording-mode #flags-wrong-overlay,
.recording-mode .score-popup { display: none !important; }

.recording-mode #shapes-countdown-widget,
.recording-mode #score-display,
.recording-mode #speed-bonus-text,
.recording-mode #right-panel,
.recording-mode #flags-check-overlay,
.recording-mode #flags-wrong-overlay,
.recording-mode #ingame-power,
.recording-mode #vol-btn { display: none !important; }