/* ==========================================================
   Aspecto del juego dentro de la web: mismos colores y tipografía del sitio,
   esquinas chicas, barra naranja y pie con los datos del corredor.
   (Se carga después de jugar.css; no toca la versión de prueba.)
   ========================================================== */
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-Regular.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2"); }

:root {
  --petroleo: #004851; --petroleo-hondo: #00313a;
  --mar: #F4F2EF; --mar-claro: #F0E4D8; --papel: #FFFFFF;
  --sol: #E87722; --sol-hondo: #f08a3a; --sobre-sol: #000000;
  --stars: none;
  --titulo: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cuerpo: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(12px, 3vw, 24px);
}
html { font-size: 15px; }
body { display: flex; flex-direction: column; min-height: 100vh; color: #F0E4D8; background: radial-gradient(1100px 480px at 75% -10%, #0a5d68 0, transparent 60%), #00313a; }
h1, h2, h3 { letter-spacing: 0; }
.juego { flex: 1; width: min(100%, 1100px); }
.juego > section { max-width: 720px; margin: 0 auto; }
.juego > section.play { max-width: none; }

/* esquinas chicas y bordes finos, como el resto del sitio */
.tarjeta, .modo, .opcion, .dato-t, .campo, .versus, .repaso li, .rk-fila, .dato, .cinta-reto, .btn, .chip, .foto, .mapa-caja, .diag-pre, .aviso-prueba, .tab, .tile, .panel, .juego-card, .stat { border-radius: 6px; }
.burbuja { border-radius: 10px 10px 10px 2px; }
.tarjeta, .modo, .repaso li, .versus, .opcion, .campo { border-width: 1px; border-color: rgba(0, 72, 81, .25); }
.modo { box-shadow: 0 1px 3px rgba(0, 72, 81, .12); }
.modo:hover, .modo:active { transform: none; box-shadow: 0 6px 16px rgba(0, 72, 81, .16); }
.btn { border-width: 0; }
.btn.sec { border: 1px solid var(--petroleo); background: var(--papel); }
.dato-t.bloqueado { border-width: 1px; }
.timer, .nivel-barra, .vs-barra { border-width: 1px; }

/* barra superior naranja, igual a la del sitio */
.jg-top { background: #E87722; color: #000; }
.jg-top-in { max-width: 1160px; margin: 0 auto; padding: 10px var(--pad); display: flex; align-items: center; gap: 12px; }
.jg-logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.jg-logo img { height: 40px; width: auto; display: block; }
.jg-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px; color: #000; font-weight: 600; text-decoration: none; font-size: .95rem; }
.jg-link:hover { background: rgba(255, 255, 255, .45); }
.jg-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 6px; background: #004851; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.jg-wa:hover { background: #00606c; }
.jg-wa svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 639px) { .jg-wa span { display: none; } .jg-wa { padding: 0 12px; } .jg-link { padding: 0 8px; font-size: .9rem; } }

/* pie con los datos del corredor */
.jg-foot { background: #004851; color: #F0E4D8; padding: 28px var(--pad) 40px; font-size: .85rem; }
.jg-foot-in { max-width: 1160px; margin: 0 auto; display: grid; gap: 10px; }
.jg-foot img { height: 44px; width: auto; justify-self: start; }
.jg-foot p { margin: 0; max-width: 90ch; }
.jg-foot a { color: #F0E4D8; }
.jg-foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* arena: lo que queda directamente sobre el fondo oscuro va en crema */
.barra .atras, .barra .progreso { color: #F0E4D8; }
.barra .puntos { color: #E87722; }
.portada h1, .previa-hero h1 { color: #F0E4D8; }
.portada p, .previa-hero p { color: #a9c4c9; }
.vacio h2, .vacio p { color: #F0E4D8; }
.cinta-reto { background: #E87722; color: #000; }
.panel { box-shadow: 0 10px 30px rgba(0, 0, 0, .3); border-color: transparent; }
.tarjeta { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); border-color: transparent; }
.modo { border-color: transparent; }
.juego-card { border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.juego-card.off { border: 1px dashed rgba(240, 228, 216, .5); box-shadow: none; background: rgba(255, 255, 255, .92); }
.stat { border-color: transparent; }
.previa-hero .sello, .juego-card .sello { box-shadow: 0 0 0 3px rgba(232, 119, 34, .35); }