/* Krill por Madryn · demo privada de Wanacom para Jorge Schmid Punta Ballena.
   Tipografía de la marca Wanacom: Archivo (títulos), Familjen Grotesk (texto), Martian Mono (datos). */
@font-face { font-family: 'Archivo'; src: url('fuentes/Archivo-900.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fuentes/Archivo-800.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('fuentes/FamiljenGrotesk-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('fuentes/FamiljenGrotesk-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('fuentes/MartianMono-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  --azul: #2B74A8;          /* el azul del logo de Punta Ballena */
  --azul-hondo: #123a57;
  --azul-noche: #0b2538;
  --blanco: #ffffff;
  --crema: #f4ecdc;
  --krill: #ff8f7a;
  --oro: #ffc94a;
  --texto-suave: #b9d3e6;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--azul-noche); color: var(--blanco); }
body {
  font-family: 'Familjen Grotesk', system-ui, sans-serif;
  overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

#app {
  position: relative; height: 100%; height: 100dvh; width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 70% at 50% 0%, #1b4a6d 0%, var(--azul-hondo) 45%, var(--azul-noche) 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- HUD ---------- */
#hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 14px 6px; }
.hud-bloque { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hud-centro { align-items: center; }
.hud-der { align-items: flex-end; flex-direction: row; justify-content: flex-end; gap: 10px; }
.hud-rotulo { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .08em; color: var(--texto-suave); }
.hud-rotulo b { color: var(--blanco); font-weight: 600; }
.hud-dato { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 18px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.barra { width: 92px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
#hud-barra { height: 100%; width: 0%; background: linear-gradient(90deg, var(--krill), #ffd0b8); border-radius: 3px; transition: width .2s; }
#hud-vidas { display: flex; gap: 3px; align-items: center; height: 22px; }
#hud-vidas canvas { width: 24px; height: 17px; }
.hud-botones { display: flex; gap: 6px; }
.btn-chico {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px;
}
.btn-chico.apagado { opacity: .45; text-decoration: line-through; }

/* ---------- MAPA ---------- */
#escenario { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 8px; }
#lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 14px; }
/* Los avisos van arriba del mapa, chicos, en una pastilla: en el medio tapaban justo a la ballena. */
#cartel {
  position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px);
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; line-height: 1.05; text-align: center;
  color: var(--blanco); background: rgba(18,58,87,.88); border: 1px solid rgba(255,255,255,.18);
  padding: 8px 16px 9px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; max-width: 86%; white-space: nowrap;
}
#cartel small { display: block; font-family: 'Familjen Grotesk', sans-serif; font-weight: 600; font-size: 12.5px; margin-top: 4px; letter-spacing: .01em; color: #d9ebf7; }
#cartel.grande { top: 40%; font-size: 26px; padding: 12px 22px 13px; }
#cartel.visible { opacity: 1; transform: translate(-50%, 0); }
#pausa-velo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,28,44,.62); border-radius: 14px; }
#pausa-velo[hidden] { display: none; }
.pausa-caja { text-align: center; }
.pausa-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 30px; margin: 0 0 14px; }

/* ---------- CONTROLES TÁCTILES ---------- */
#controles { padding: 8px 0 2px; display: flex; flex-direction: column; align-items: center; }
.cruz { display: grid; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 46px); gap: 3px; }
.flecha {
  border: 0; border-radius: 14px; background: rgba(255,255,255,.1); display: grid; place-items: center;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); touch-action: none;
}
.flecha svg { width: 24px; height: 24px; fill: var(--blanco); opacity: .9; }
.flecha.activa { background: var(--azul); box-shadow: inset 0 2px 0 rgba(0,0,0,.25); }
.flecha[data-dir="arriba"] { grid-column: 2; grid-row: 1; }
.flecha[data-dir="izq"] { grid-column: 1; grid-row: 2; }
.flecha[data-dir="der"] { grid-column: 3; grid-row: 2; }
.flecha[data-dir="abajo"] { grid-column: 2; grid-row: 3; }
/* las diagonales, más discretas: se usan para cruzar una plaza por sus sendas */
.flecha.diagonal { background: rgba(255,255,255,.05); box-shadow: none; }
.flecha.diagonal svg { width: 16px; height: 16px; opacity: .55; }
.flecha.diagonal.activa { background: var(--azul); }
.flecha[data-dir="arriba-izq"] { grid-column: 1; grid-row: 1; }
.flecha[data-dir="arriba-der"] { grid-column: 3; grid-row: 1; }
.flecha[data-dir="abajo-izq"] { grid-column: 1; grid-row: 3; }
.flecha[data-dir="abajo-der"] { grid-column: 3; grid-row: 3; }
.ayuda-tactil { margin: 4px 0 0; font-size: 11px; color: var(--texto-suave); opacity: .8; }
@media (hover: hover) and (pointer: fine) { #controles { display: none; } }

.pie { text-align: center; font-family: 'Martian Mono', monospace; font-size: 8.5px; letter-spacing: .06em; color: rgba(185,211,230,.55); padding: 4px 0 6px; text-transform: uppercase; }

/* ---------- PANTALLAS ---------- */
.pantalla {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 16px 10px; overflow-y: auto;
  background: radial-gradient(130% 80% at 50% 10%, #3a86bb 0%, var(--azul) 38%, #1d5682 100%);
}
.pantalla[hidden] { display: none; }
.pantalla-caja { width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; margin: auto 0; }
.logo { width: 132px; height: 132px; object-fit: cover; border-radius: 26px; box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 3px rgba(255,255,255,.18); }
.logo-chico { width: 84px; height: 84px; border-radius: 18px; }
.kicker { font-family: 'Martian Mono', monospace; font-size: 10px; letter-spacing: .14em; margin: 14px 0 4px; color: #d9ebf7; }
h1, h2 { font-family: 'Archivo', sans-serif; font-weight: 900; margin: 0; line-height: 1.02; letter-spacing: -.01em; }
h1 { font-size: 31px; }
h2 { font-size: 27px; }
#ballena-portada { width: 220px; height: 120px; margin: 4px 0 0; }
.reglas { list-style: none; padding: 0; margin: 2px 0 16px; text-align: left; font-size: 14px; line-height: 1.32; }
.reglas li { display: flex; gap: 10px; align-items: flex-start; margin: 7px 0; }
.ic { flex: 0 0 18px; height: 18px; border-radius: 50%; margin-top: 1px; }
.ic-krill { background: radial-gradient(circle at 40% 40%, #ffd3c4, var(--krill) 60%); transform: scale(.6); }
.ic-orca { background: radial-gradient(circle at 65% 40%, #fff 18%, #111 22%); }
.ic-poder { background: radial-gradient(circle, #fff7d6 0%, var(--oro) 50%, rgba(255,201,74,0) 72%); }
.btn-grande {
  border: 0; border-radius: 16px; padding: 14px 44px; background: var(--blanco); color: var(--azul-hondo);
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 20px; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 6px 0 #0f3550, 0 12px 24px rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s;
}
.btn-grande:active { transform: translateY(4px); box-shadow: 0 2px 0 #0f3550, 0 6px 14px rgba(0,0,0,.25); }
.btn-secundario { margin-top: 16px; padding: 12px 34px; font-size: 17px; }
.como { font-size: 12px; color: #d9ebf7; margin: 14px 0 0; opacity: .85; }
.record { font-family: 'Martian Mono', monospace; font-size: 11px; color: #ffe7a6; margin: 8px 0 0; min-height: 1em; }
/* .pie-pantalla la sigue usando la versión 3D (3d/index.html, no se publica). */
.pie-pantalla { font-family: 'Martian Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 14px 0 0; }
/* Crédito de autoría (5-oct-2026): "Una idea de Manuel Barry" + "Desarrollado con infraestructura de Wanacom AI".
   El nombre linkea al LinkedIn: se marca con subrayado + ícono y no sólo con color, para que se lea como tocable. */
.credito { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.72); margin: 14px 0 0; text-align: center; }
.credito p { margin: 0; }
.credito b { color: var(--blanco); font-weight: 600; }
.credito a { color: var(--blanco); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: 3px; white-space: nowrap; border-radius: 4px; }
.credito a:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
.credito-icono { width: 10px; height: 10px; margin-left: 4px; vertical-align: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fin-puntaje { font-family: 'Martian Mono', monospace; font-weight: 600; font-size: 46px; margin: 10px 0 0; line-height: 1; }
.fin-puntaje small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #d9ebf7; margin-top: 6px; }
.fin-detalle { font-size: 14px; color: #e6f2fa; margin: 10px 0 14px; min-height: 1.2em; }
.cta {
  width: 100%; background: var(--blanco); color: var(--azul-hondo); border-radius: 20px; padding: 18px 18px 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.cta-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 23px; margin: 0; line-height: 1.05; }
.cta-texto { margin: 6px 0 14px; font-size: 14px; line-height: 1.35; color: #24506f; }
.btn-cta {
  border: 0; border-radius: 13px; padding: 12px 22px; background: var(--azul); color: var(--blanco);
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px;
}
a.btn-cta { display: inline-block; text-decoration: none; } /* Reservá tu salida es un link con forma de botón */
/* .cta-nota la sigue usando la versión 3D (3d/index.html, no se publica). */
.cta-nota { font-size: 11.5px; color: #5d7f97; margin: 9px 0 0; }

@media (min-height: 760px) { h1 { font-size: 34px; } .logo { width: 150px; height: 150px; } }
@media (max-height: 700px) { .logo { width: 96px; height: 96px; border-radius: 20px; } #ballena-portada { height: 90px; } .reglas { font-size: 13px; } }

.otra-version { margin: 10px 0 0; font-size: 12px; }
.otra-version a { color: #d9ebf7; }

/* ---------- RANKING ---------- */
input { -webkit-user-select: text; user-select: text; touch-action: auto; }
.btn-link { margin-top: 12px; border: 0; background: none; color: #fff; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 10px; }
.rk-guardar { width: 100%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 16px; padding: 12px 14px 14px; margin: 0 0 12px; }
.rk-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 18px; margin: 0 0 8px; }
.rk-form { display: flex; gap: 8px; }
.rk-form input { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 11px 12px; font-family: 'Martian Mono', monospace; font-size: 15px; text-transform: uppercase; color: var(--azul-hondo); }
.rk-aviso { font-family: 'Archivo', sans-serif; font-weight: 800; color: #ffe7a6; margin: 0 0 10px; min-height: 0; }
.rk-aviso:empty { display: none; }
.rk-tabla { width: 100%; margin: 14px 0 0; text-align: left; }
.rk-pestanas { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.rk-pestana { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); border-radius: 10px; padding: 6px 10px; font-family: 'Martian Mono', monospace; font-weight: 600; font-size: 11px; min-width: 34px; }
.rk-pestana.activa { background: #fff; color: var(--azul-hondo); }
.rk-sub { font-size: 12px; color: #d9ebf7; margin: 8px 0 6px; text-align: center; }
.rk-lista { list-style: none; margin: 0; padding: 0; background: rgba(8,28,44,.28); border-radius: 14px; overflow: hidden; }
.rk-lista li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 7px 12px; font-size: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.rk-lista li:first-child { border-top: 0; }
.rk-lista li.yo { background: rgba(255,201,74,.3); }
.rk-pos { font-family: 'Martian Mono', monospace; font-weight: 600; color: #ffe7a6; }
.rk-nombre { font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pts { font-family: 'Martian Mono', monospace; font-weight: 600; }
.rk-vacio, .rk-nota { font-size: 12px; color: #d9ebf7; text-align: center; margin: 8px 0 0; }
.rk-nota { opacity: .7; font-size: 11px; }

.hud-barrio { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px; line-height: 1.1; color: #fff; white-space: nowrap; max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
/* el nombre del barrio no puede meterse entre las vidas: el centro del HUD usa sólo lo que sobra */
#hud { grid-template-columns: auto minmax(0, 1fr) auto; }
.hud-centro { min-width: 0; }
.hud-centro .hud-barrio { max-width: 100%; }
#hud-vidas canvas { width: 21px; height: 15px; }

/* ---------- 2D EN EL CELULAR, SIN CRUZ (6-oct-2026) ----------
   Manu: "el controlador ocupa mucha pantalla y se ve muy chico". La cruz del 2D (.controles-2d; el 3D usa la suya,
   sin esta clase) no se muestra: se desliza en cualquier parte y el mapa ocupa ese lugar. Con la cámara del celular
   (#app.camara, la pone juego.js) el aviso grande del nivel sube, porque la ballena va en el medio de la pantalla. */
#controles.controles-2d { display: none; }
#app.camara #escenario { margin: 0 4px; }
#app.camara #cartel.grande { top: 22%; }
#ayuda-deslizar {
  position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 2; /* arriba (debajo de los avisos chicos): la cámara deja a la ballena en el medio */
  display: flex; align-items: center; gap: 9px; width: max-content; max-width: calc(100% - 20px);
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; line-height: 1.15; color: var(--blanco);
  background: rgba(18,58,87,.9); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none;
}
#ayuda-deslizar[hidden] { display: none; }
.ayuda-mano { flex: 0 0 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 4px rgba(255,255,255,.25); animation: deslizar-mano 1.4s ease-in-out infinite; }
/* ---------- LOS TRES CONTROLES DEL CELULAR (6-oct-2026, tarde: "deslizando el dedo es incómodo") ----------
   #app.control-joystick | control-cruz | control-tocar los pone juego.js; el botón del mando sólo con pantalla táctil. */
#btn-control { display: none; padding: 0; }
#app.camara #btn-control { display: grid; place-items: center; }
#btn-control svg { width: 18px; height: 18px; fill: var(--blanco); }
#cruz-flotante { display: none; position: absolute; right: -6px; bottom: -6px; z-index: 3; width: 190px; height: 190px; padding: 20px; touch-action: none; }
#app.camara.control-cruz #cruz-flotante { display: block; }
.cf-dibujo { position: relative; width: 150px; height: 150px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; pointer-events: none; }
.cf-flecha { display: grid; place-items: center; border-radius: 13px; background: rgba(18,58,87,.42); border: 1px solid rgba(255,255,255,.28); }
.cf-flecha svg { width: 24px; height: 24px; fill: rgba(255,255,255,.88); }
.cf-flecha.activa { background: rgba(43,116,168,.88); }
.cf-flecha[data-dir="arriba"] { grid-column: 2; grid-row: 1; }
.cf-flecha[data-dir="izq"] { grid-column: 1; grid-row: 2; }
.cf-flecha[data-dir="der"] { grid-column: 3; grid-row: 2; }
.cf-flecha[data-dir="abajo"] { grid-column: 2; grid-row: 3; }
@keyframes deslizar-mano { 0% { transform: translateX(-6px); opacity: .4; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(-6px); opacity: .4; } }