@font-face { font-family: 'Archivo'; src: url('fuentes/Archivo-wght.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Familjen'; src: url('fuentes/Familjen-wght.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Martian'; src: url('fuentes/MartianMono-latin-wght.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
:root { --fondo: #04070c; --cian: #3dc1ff; --menta: #4fe3b0; --naranja: #ff8a3d; --blanco: #f4f7fb; --gris: #9aa6b8; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--blanco); font-family: 'Familjen', system-ui, sans-serif; overflow: hidden; overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; }
#lienzo { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

.capa { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(4,7,12,0.72); backdrop-filter: blur(3px); overflow-y: auto; z-index: 10; touch-action: pan-y; }
.capa.visible { display: flex; }
#portada { background: none; backdrop-filter: none; }
.portada-fondo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,7,12,0.2), rgba(4,7,12,0.85)), url('assets/costanera.jpg') center/cover; z-index: -1; }
.portada-caja { text-align: center; max-width: 980px; }
.kicker { font-family: 'Martian', monospace; font-size: clamp(11px, 1.6vw, 15px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--menta); margin: 0 0 10px; }
.titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: clamp(40px, 9vw, 120px); line-height: 0.9; margin: 0 0 24px; letter-spacing: -0.02em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #fff 40%, var(--cian) 70%, #1b6f99 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px rgba(4,7,12,0.6); filter: drop-shadow(0 6px 0 rgba(4,7,12,0.9)); }
.subtitulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(28px, 5vw, 56px); margin: 0 0 18px; }
.botonera { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.btn { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 18px; min-height: 48px; min-width: 48px; padding: 10px 22px; border-radius: 10px; border: 2px solid var(--blanco); background: rgba(4,7,12,0.6); color: var(--blanco); cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; }
.btn:hover, .btn:focus-visible { border-color: var(--cian); color: var(--cian); outline: none; }
.btn-grande { background: var(--cian); color: var(--fondo); border-color: var(--cian); font-size: 22px; padding: 12px 34px; }
.btn-grande:hover, .btn-grande:focus-visible { background: #fff; color: var(--fondo); border-color: #fff; }
.btn-compartir { background: var(--naranja); border-color: var(--naranja); }
.btn-volver { margin-top: 18px; }
.btn-sonido { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--blanco); background: rgba(4,7,12,0.6); color: var(--blanco); font-size: 22px; cursor: pointer; }
button, a, input, .tarjeta { touch-action: manipulation; }
.btn-pantalla { position: absolute; top: max(14px, env(safe-area-inset-top)); right: calc(max(14px, env(safe-area-inset-right)) + 60px); width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--blanco); background: rgba(4,7,12,0.6); color: var(--blanco); font-size: 22px; cursor: pointer; }
body.app .btn-pantalla, body.completa-on .btn-pantalla { display: none; }
.completa-texto { color: var(--gris); margin: 0 0 6px; text-align: center; }
.completa-pasos { margin: 0 0 14px; padding-left: 1.4em; line-height: 1.7; font-size: 18px; }
.ic-compartir { display: inline-block; border: 2px solid var(--cian); border-radius: 6px; padding: 0 6px; color: var(--cian); }
.btn-sonido.apagado { opacity: 0.45; text-decoration: line-through; }

.tarjetas { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.tarjeta { width: min(320px, 42vw); border: 2px solid rgba(244,247,251,0.25); border-radius: 14px; background: rgba(4,7,12,0.75); padding: 14px; cursor: pointer; text-align: left; color: var(--blanco); font-family: inherit; display: flex; flex-direction: column; gap: 6px; }
.tarjeta:hover, .tarjeta:focus-visible { border-color: var(--cian); outline: none; transform: translateY(-2px); }
.tarjeta canvas { width: 100%; aspect-ratio: 4/3; border-radius: 8px; background: radial-gradient(circle at 50% 70%, rgba(255,170,100,0.35), rgba(4,7,12,0) 70%); }
.tarjeta .t-nombre { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 26px; text-transform: uppercase; font-style: italic; }
.tarjeta .t-alias { color: var(--cian); font-weight: 600; }
.tarjeta .t-ficha { font-size: 14px; color: var(--gris); margin: 0; }
.tarjeta .t-especial { font-family: 'Martian', monospace; font-size: 12px; color: var(--menta); }

/* pantallas largas: arrancan arriba y se scrollean (centradas, lo de arriba quedaba cortado sin poder subir) */
.capa-larga { justify-content: flex-start; }
.como-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 980px; margin-bottom: 14px; }
.como-cabeza .subtitulo { margin: 0; }
.como-grilla { width: 100%; box-sizing: border-box; } .como-grilla > div { min-width: 0; box-sizing: border-box; }
.como-especial, .como-celu, .como-compu { grid-column: 1 / -1; }
body.tactil-on .como-compu { display: none; }
body:not(.tactil-on) .como-celu { display: none; }
.especiales-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 4px 18px; }
.especiales-lista li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(244,247,251,0.08); }
.especiales-lista .e-quien { font-weight: 700; }
.especiales-lista .e-nombre { grid-column: 1; color: var(--gris); font-size: 14px; }
.especiales-lista b { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
@media (max-height: 460px) { .como-cabeza { margin-bottom: 8px; } .como-cabeza .subtitulo { font-size: 24px; } .como-grilla { gap: 10px; } .como-grilla div { padding: 10px 14px; } }
.btn-pausa { display: none; position: fixed; z-index: 6; top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); width: 40px; height: 40px; border-radius: 10px; border: 2px solid rgba(244,247,251,0.55); background: rgba(4,7,12,0.5); cursor: pointer; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.btn-pausa span { width: 5px; height: 16px; border-radius: 2px; background: var(--blanco); }
body.peleando .btn-pausa { display: flex; }
.como-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 980px; }
.como-grilla div { background: rgba(4,7,12,0.7); border: 1px solid rgba(244,247,251,0.18); border-radius: 12px; padding: 14px 18px; }
.como-grilla h3 { font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase; margin: 0 0 8px; color: var(--cian); }
.como-grilla p { margin: 6px 0; line-height: 1.4; }
.como-grilla b { font-family: 'Martian', monospace; font-size: 0.85em; color: var(--menta); }

.ranking-lista { list-style: none; counter-reset: r; padding: 0; margin: 0; min-width: min(420px, 90vw); }
.ranking-lista li { counter-increment: r; display: flex; justify-content: space-between; gap: 14px; padding: 8px 12px; border-bottom: 1px solid rgba(244,247,251,0.12); font-family: 'Martian', monospace; font-size: 14px; }
.ranking-lista li::before { content: counter(r); color: var(--cian); width: 22px; }
.ranking-lista li span:first-of-type { flex: 1; font-family: 'Familjen', sans-serif; font-size: 16px; }
.ranking-lista li.yo { background: rgba(61,193,255,0.15); }
.ranking-lista.chica li { font-size: 12px; padding: 4px 10px; }
.nota { color: var(--gris); font-size: 13px; }

.final-caja { text-align: center; max-width: 760px; }
.final-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(40px, 8vw, 96px); line-height: 0.95; margin: 0; }
.final-titulo.gano { color: var(--cian); } .final-titulo.perdio { color: var(--naranja); }
.final-puntaje { font-family: 'Martian', monospace; font-size: 22px; margin: 8px 0; }
.final-puntaje span { color: var(--menta); font-size: 34px; }
.final-stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 14px; color: var(--gris); margin-bottom: 10px; }
.final-stats b { color: var(--blanco); font-family: 'Martian', monospace; }
.final-nombre { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.final-nombre input { font: 600 16px 'Familjen', sans-serif; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 2px solid rgba(244,247,251,0.4); background: rgba(4,7,12,0.7); color: var(--blanco); width: min(260px, 50vw); }

/* táctil: sólo en la pelea y en dispositivos táctiles */
.tactil { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
body.tactil-on.peleando .tactil { display: block; }
.cruz { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); width: 150px; height: 150px; border-radius: 50%; background: rgba(4,7,12,0.32); border: 2px solid rgba(244,247,251,0.35); pointer-events: auto; touch-action: none; }
.cruz span { position: absolute; width: 50px; height: 50px; display: grid; place-items: center; color: rgba(244,247,251,0.75); font-size: 20px; border-radius: 10px; }
.cruz .c-arr { left: 50px; top: 0; } .cruz .c-aba { left: 50px; bottom: 0; } .cruz .c-izq { left: 0; top: 50px; } .cruz .c-der { right: 0; top: 50px; }
.cruz.on-arriba .c-arr, .cruz.on-abajo .c-aba, .cruz.on-izq .c-izq, .cruz.on-der .c-der { background: rgba(61,193,255,0.55); color: #fff; }
.acciones { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 64px 64px; grid-template-rows: 56px 56px; gap: 10px; pointer-events: auto; }
.acciones button { width: 64px; height: 56px; border-radius: 14px; border: 2px solid rgba(244,247,251,0.55); background: rgba(4,7,12,0.38); color: var(--blanco); font: 800 12px 'Archivo', sans-serif; text-transform: uppercase; touch-action: none; padding: 0; }
.acciones button.on { background: rgba(61,193,255,0.6); }
.acciones .b-especial { border-color: var(--menta); color: var(--menta); } .acciones .b-cubrir { border-color: rgba(244,247,251,0.35); }

.girar { display: none; position: fixed; inset: 0; z-index: 50; background: var(--fondo); flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.girar p { font: 900 italic 30px 'Archivo', sans-serif; text-transform: uppercase; margin: 0; }
.girar small { color: var(--gris); }
.girar-icono { width: 54px; height: 90px; border: 4px solid var(--cian); border-radius: 10px; animation: girar 1.8s ease-in-out infinite; }
@keyframes girar { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 900px) { .girar { display: flex; } }
body.forzar-vertical .girar { display: flex; }
@media (max-height: 460px) {
  .titulo { font-size: clamp(34px, 8vh, 64px); margin-bottom: 12px; }
  .subtitulo { font-size: 28px; margin-bottom: 8px; }
  .tarjeta { width: min(260px, 40vw); padding: 10px; } .tarjeta canvas { aspect-ratio: 16/9; } .tarjeta .t-ficha { display: none; }
  .final-titulo { font-size: 44px; } .final-puntaje { margin: 2px 0; } .final-stats { margin-bottom: 2px; }
  .ranking-lista.chica { display: none; }
  .btn { min-height: 48px; padding: 8px 16px; font-size: 15px; }
}

/* ── selección estilo arcade ── */
#elegir { background: radial-gradient(ellipse at 50% 40%, rgba(27,60,90,0.9), rgba(4,7,12,0.97) 70%); padding: 10px; }
.sel { display: grid; grid-template-columns: 1fr minmax(0, 720px) 1fr; align-items: stretch; width: 100%; height: 100%; gap: 8px; }
.sel-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sel-retrato { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; overflow: hidden; }
.sel-retrato canvas { width: 100%; height: 0; flex: 1; object-fit: contain; }
.sel-p1 { background: linear-gradient(180deg, rgba(61,193,255,0) 30%, rgba(61,193,255,0.25)); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.sel-p2 { background: linear-gradient(180deg, rgba(255,138,61,0) 30%, rgba(255,138,61,0.22)); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.sel-nombre { font: italic 900 clamp(26px, 4vw, 54px) 'Archivo', sans-serif; text-transform: uppercase; -webkit-text-stroke: 1.5px #04070c; }
.sel-p1 .sel-nombre { color: var(--cian); } .sel-p2 .sel-nombre { color: var(--naranja); }
.sel-ficha { font-size: 14px; color: var(--blanco); text-align: center; padding: 0 14px 16px; max-width: 340px; }
.sel-incognita { flex: 1; display: grid; place-items: center; font: italic 900 clamp(90px, 16vw, 240px) 'Archivo', sans-serif; color: rgba(255,138,61,0.35); }
.grilla { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; width: 100%; }
.grilla .fila-titulo { grid-column: 1 / -1; font: 700 12px 'Martian', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--menta); margin-top: 6px; }
.lugar { position: relative; aspect-ratio: 1; border: 2px solid rgba(244,247,251,0.25); background: #0b0f17 center/cover; border-radius: 6px; cursor: default; padding: 0; overflow: hidden; min-width: 0; min-height: 44px; transform: skewX(-6deg); color: inherit; }
.lugar span { position: absolute; left: 0; right: 0; bottom: 0; font: 800 9px 'Archivo', sans-serif; text-transform: uppercase; background: rgba(4,7,12,0.75); color: var(--gris); padding: 2px; line-height: 1.1; }
.lugar.bloqueado { filter: grayscale(1) brightness(0.45); }
.lugar.bloqueado::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: italic 900 26px 'Archivo', sans-serif; color: rgba(244,247,251,0.4); }
.lugar.jugable { cursor: pointer; border-color: var(--blanco); }
.lugar.jugable span { color: var(--blanco); }
.lugar.activo { border-color: var(--cian); box-shadow: 0 0 0 3px var(--cian), 0 0 18px rgba(61,193,255,0.7); }
.lugar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── VS ── */
#vs { background: #04070c; padding: 0; overflow: hidden; backdrop-filter: none; }
.vs-lado { position: absolute; top: 0; bottom: 0; width: 58%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.vs-izq { left: 0; clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); background: linear-gradient(135deg, #0d4d6e, #04070c 70%); animation: entraIzq 0.45s cubic-bezier(.2,.9,.2,1) both; }
.vs-der { right: 0; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(225deg, #9a3a0c, #04070c 70%); animation: entraDer 0.45s cubic-bezier(.2,.9,.2,1) both; }
.vs-lado canvas { height: 92%; width: auto; max-width: 100%; }
.vs-izq canvas { margin-right: 18%; } .vs-der canvas { margin-left: 18%; }
.vs-nombre { position: absolute; bottom: 6%; font: italic 900 clamp(36px, 7vw, 96px) 'Archivo', sans-serif; text-transform: uppercase; -webkit-text-stroke: 2px #04070c; text-shadow: 0 6px 0 #04070c; }
.vs-izq .vs-nombre { left: 5%; color: var(--cian); } .vs-der .vs-nombre { right: 5%; color: var(--naranja); }
.vs-rayo { position: absolute; left: 50%; top: -2%; height: 104%; width: 9%; transform: translateX(-50%); fill: #fff; filter: drop-shadow(0 0 16px #3dc1ff) drop-shadow(0 0 30px #fff); animation: rayo 0.5s 0.35s both; }
.vs-texto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font: italic 900 clamp(90px, 16vw, 220px) 'Archivo', sans-serif; color: #fff; -webkit-text-stroke: 4px #04070c; text-shadow: 0 0 30px rgba(61,193,255,0.9), 0 10px 0 #04070c; animation: golpeVs 0.5s 0.5s both; }
.vs-lugar { position: absolute; top: 4%; left: 0; right: 0; text-align: center; font: 700 clamp(11px, 1.6vw, 16px) 'Martian', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--menta); }
@keyframes entraIzq { from { transform: translateX(-60%); } to { transform: none; } }
@keyframes entraDer { from { transform: translateX(60%); } to { transform: none; } }
@keyframes rayo { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes golpeVs { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(3); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
@media (max-height: 460px) { .sel-ficha { display: none; } .grilla { gap: 3px; } .lugar span { font-size: 7px; } .sel .subtitulo { font-size: 22px; margin-bottom: 4px; } .sel .btn-volver { margin-top: 6px; } .sel .nota { display: none; } .grilla .fila-titulo { font-size: 9px; margin-top: 2px; } }
@media (max-height: 460px) { .sel { grid-template-columns: minmax(110px, 1fr) minmax(0, 560px) minmax(110px, 1fr); } .sel-nombre { font-size: 22px; } .sel-incognita { font-size: 80px; } }