/* =====================================================================
   SCOTLAND WARS 3D - piel del juego (Gamerol, 17/10/2026)
   Movil primero. El 3D ocupa toda la pantalla; todo lo demas flota.
   ===================================================================== */
@font-face { font-family: 'Anton'; src: url('/fonts/Anton-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --fondo: #05070d;
  --cian: #22e8ff;
  --magenta: #ff2bd1;
  --verde: #7cffd4;
  --blanco: #eaf6ff;
  --tenue: #8a99b3;
  --linea: rgba(34, 232, 255, .25);
  --display: 'Anton', 'Haettenschweiler', Impact, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cuerpo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --arriba: env(safe-area-inset-top);
  --abajo: env(safe-area-inset-bottom);
  --izq: env(safe-area-inset-left);
  --der: env(safe-area-inset-right);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--fondo); color: var(--blanco); font-family: var(--cuerpo);
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }

#lienzo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* ---------------------------------------------------------------------
   VESTIBULO (el 3D vuela detras)
   ------------------------------------------------------------------ */
#vestibulo {
  position: fixed; inset: 0; z-index: 20;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(5,7,13,.55) 0%, rgba(5,7,13,.78) 38%, rgba(5,7,13,.94) 100%);
  padding: calc(12px + var(--arriba)) 14px calc(28px + var(--abajo));
  touch-action: pan-y;
}
@media (min-width: 900px) {
  #vestibulo { background: linear-gradient(90deg, rgba(5,7,13,.95) 0%, rgba(5,7,13,.86) 40%, rgba(5,7,13,.25) 70%, rgba(5,7,13,0) 100%); }
}
.caja { width: 100%; max-width: 560px; }
@media (min-width: 900px) { .caja { margin-left: 4vw; } }

.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 44px; }
.volver { display: inline-flex; align-items: center; min-height: 44px; color: var(--tenue); text-decoration: none; font-family: var(--mono);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.volver:hover, .volver:active { color: var(--cian); }

.portada { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h1 { margin: 0; font-family: var(--display); font-weight: 400; line-height: .82; text-transform: uppercase; font-size: clamp(50px, 16vw, 108px); }
h1 span { display: block; }
h1 .c1 { color: var(--cian); text-shadow: 0 0 28px rgba(34,232,255,.55); }
h1 .c2 { color: var(--magenta); text-shadow: 0 0 28px rgba(255,43,209,.55); }
.lema { margin: 10px 0 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--tenue); line-height: 1.6; }
.rook { width: clamp(84px, 24vw, 150px); height: auto; aspect-ratio: 360 / 536; object-fit: cover; border: 1px solid var(--linea);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }

h2 { margin: 26px 0 4px; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; color: var(--blanco); }
.nota { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--tenue); }

.campo { display: block; margin: 0 0 12px; }
.campo > span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--tenue); margin-bottom: 6px; }
.campo input { width: 100%; min-height: 52px; padding: 12px 14px; background: rgba(8,14,26,.85); border: 1px solid var(--linea); border-radius: 0;
  color: var(--blanco); font-family: var(--display); font-size: 24px; letter-spacing: .04em; text-transform: uppercase; user-select: text; -webkit-user-select: text; }
.campo input:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 1px var(--cian), 0 0 24px rgba(34,232,255,.25) inset; }

.salas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sala { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; width: 100%; min-height: 66px; padding: 12px 14px;
  background: rgba(8,14,26,.82); border: 1px solid var(--linea); color: var(--blanco); font-family: var(--display); font-size: 21px;
  text-transform: uppercase; cursor: pointer; text-align: left; transition: background-color .12s, border-color .12s, color .12s; }
.sala b { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 1.3px; color: var(--tenue); }
.sala:not(:disabled):hover, .sala:not(:disabled):active { background: var(--cian); border-color: var(--cian); color: #04131a; }
.sala:not(:disabled):hover b, .sala:not(:disabled):active b { color: #04131a; }
.sala:disabled { opacity: .4; cursor: default; }
.aviso { min-height: 18px; margin: 10px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; color: var(--magenta); }

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.opcion { min-height: 46px; padding: 8px 10px; background: rgba(8,14,26,.7); border: 1px solid var(--linea); color: var(--tenue);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; }
.opcion:hover, .opcion:active { color: var(--cian); border-color: var(--cian); }
.opcion[aria-pressed="false"] { opacity: .5; }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.galeria button { position: relative; display: block; padding: 0; border: 1px solid var(--linea); background: #000; cursor: pointer; overflow: hidden; aspect-ratio: 360 / 242; }
.galeria img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .15s, transform .3s; }
.galeria span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-family: var(--display); font-size: 15px; text-transform: uppercase;
  text-align: left; color: #fff; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); }
.galeria button:hover img, .galeria button:active img { opacity: 1; transform: scale(1.04); }
.galeria button.activo { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta), 0 0 18px rgba(255,43,209,.35); }
.galeria button.activo img { opacity: 1; }

.ayuda { padding: 12px 14px; border: 1px solid rgba(138,153,179,.22); background: rgba(8,14,26,.7); }
.ayuda p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.55; color: #b4c4da; }
.ayuda p:last-child { margin-bottom: 0; }
.ayuda b { color: var(--blanco); }
.fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .fichas { grid-template-columns: repeat(6, 1fr); } }
.fichas figure { margin: 0; border: 1px solid var(--linea); background: #000; }
.fichas img { display: block; width: 100%; height: auto; aspect-ratio: 360 / 536; object-fit: cover; }
.fichas figcaption { padding: 5px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--tenue); }
.pie { margin: 22px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; color: var(--tenue); }
.pie a { color: var(--tenue); }

button.idioma-btn { background: transparent !important; border: 1px solid var(--linea) !important; color: var(--tenue) !important; border-radius: 0 !important;
  font-family: var(--mono) !important; letter-spacing: 1.5px !important; }
button.idioma-btn[aria-pressed="true"] { background: var(--cian) !important; border-color: var(--cian) !important; color: #04131a !important; }

/* ---------------------------------------------------------------------
   MARCADOR
   ------------------------------------------------------------------ */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: var(--mono); }
.hud-yo { position: absolute; left: calc(10px + var(--izq)); top: calc(8px + var(--arriba)); width: min(210px, 46vw); }
.hud-nombre { font-family: var(--display); font-size: 15px; letter-spacing: .03em; text-shadow: 0 1px 3px #000; }
.barra { position: relative; height: 9px; margin-top: 4px; background: rgba(0,0,0,.55); border: 1px solid rgba(34,232,255,.35); overflow: hidden; }
.barra i { position: absolute; inset: 0; background: var(--cian); transform-origin: 0 50%; box-shadow: 0 0 10px rgba(34,232,255,.7); transition: transform .12s; }
.barra.escudo { height: 5px; border-color: rgba(159,246,255,.3); }
.barra.escudo i { background: #bff8ff; }
.vida-baja .barra.vida i { background: var(--magenta); box-shadow: 0 0 10px rgba(255,43,209,.8); }
.hud-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; font-size: 9.5px; letter-spacing: 1.2px; color: var(--tenue); text-shadow: 0 1px 2px #000; }
.hud-chips .rapido { color: var(--verde); }
.hud-puntos { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.hud-puntos b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--magenta); text-shadow: 0 0 12px rgba(255,43,209,.6); }
.hud-puntos span { font-size: 9.5px; letter-spacing: 1.2px; color: var(--tenue); }
.hud-equipo { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--tenue); text-shadow: 0 1px 2px #000; }
.hud-equipo i { font-style: normal; }
.hud-equipo i.caido { color: var(--magenta); }

.hud-ola { position: absolute; top: calc(8px + var(--arriba)); left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 1px 4px #000; white-space: nowrap; }
#hPueblo { font-family: var(--display); font-size: 17px; letter-spacing: .04em; }
#hInfo { font-size: 10px; letter-spacing: 1.4px; color: var(--cian); margin-top: 2px; }
#hQuedan { font-size: 10px; letter-spacing: 1.4px; color: var(--magenta); margin-top: 2px; }
@media (max-width: 640px) {
  .hud-ola { left: auto; right: calc(10px + var(--der)); transform: none; text-align: right; top: calc(58px + var(--arriba)); }
  #hPueblo { font-size: 15px; }
}

#minimapa { position: absolute; right: calc(10px + var(--der)); top: calc(58px + var(--arriba)); width: 150px; height: auto; opacity: .92;
  border: 1px solid rgba(34,232,255,.3); image-rendering: pixelated; }
@media (max-width: 640px) { #minimapa { top: calc(118px + var(--arriba)); width: 112px; } }
@media (max-height: 460px) { #minimapa { width: 104px; } .hud-ola { top: calc(8px + var(--arriba)); } }

.hud-jefe { position: absolute; left: 50%; transform: translateX(-50%); top: calc(64px + var(--arriba)); width: min(460px, 70vw); text-align: center; }
.hud-jefe span { display: block; font-family: var(--display); font-size: 13px; letter-spacing: .1em; color: #ffb9ec; text-shadow: 0 0 10px rgba(255,43,209,.8); }
.hud-jefe .barra { height: 11px; border-color: rgba(255,43,209,.6); }
.hud-jefe .barra i { background: var(--magenta); box-shadow: 0 0 14px rgba(255,43,209,.9); }
@media (max-width: 640px) { .hud-jefe { top: auto; bottom: calc(200px + var(--abajo)); } }

.hud-chat { position: absolute; left: calc(10px + var(--izq)); bottom: calc(14px + var(--abajo)); max-width: min(420px, 60vw); font-family: var(--cuerpo); font-size: 12px; text-shadow: 0 1px 3px #000; }
.hud-chat p { margin: 2px 0; }
.hud-chat p.sistema { color: var(--tenue); }
.hud-chat b { color: var(--cian); }
@media (pointer: coarse) { .hud-chat { bottom: auto; top: calc(150px + var(--arriba)); font-size: 11px; } }

.cartel { position: absolute; left: 0; right: 0; top: 30%; text-align: center; opacity: 0; transform: scale(.92); transition: opacity .25s, transform .25s; }
.cartel.ver { opacity: 1; transform: none; }
.cartel b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 9vw, 76px); letter-spacing: .02em; color: #fff;
  text-shadow: 0 0 22px rgba(34,232,255,.9), 0 0 60px rgba(34,232,255,.5); }
.cartel span { display: block; margin-top: 6px; font-family: var(--display); font-size: clamp(16px, 4vw, 28px); letter-spacing: .08em; color: var(--magenta);
  text-shadow: 0 0 16px rgba(255,43,209,.8); }
.cuenta { position: absolute; left: 0; right: 0; top: 57%; text-align: center; font-size: 12px; letter-spacing: 2px; color: var(--blanco); text-shadow: 0 1px 4px #000; }
.caido { position: absolute; left: 0; right: 0; top: 42%; text-align: center; }
.caido b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 8vw, 56px); color: var(--magenta); text-shadow: 0 0 20px rgba(255,43,209,.8); }
.caido span { font-size: 12px; letter-spacing: 1.2px; color: var(--blanco); text-shadow: 0 1px 4px #000; }

#etiquetas { position: absolute; inset: 0; }
.etiqueta { position: absolute; left: 0; top: 0; margin: -22px 0 0 -40px; width: 80px; text-align: center; will-change: transform; }
.etiqueta span { display: block; font-size: 10px; letter-spacing: 1px; color: var(--c, #fff); text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.8); font-weight: 600; }
.etiqueta i { display: block; width: 34px; height: 3px; margin: 2px auto 0; background: rgba(0,0,0,.6); }
.etiqueta i b { display: block; height: 100%; background: var(--c, #fff); transform-origin: 0 50%; }
.etiqueta.yo i { display: none; }
.etiqueta.caido span { color: var(--magenta); }

#ayudaMandos { position: absolute; inset: 0; display: flex; animation: aparecer 7s ease both; }
#ayudaMandos .zona { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(60px + var(--abajo));
  border: 2px dashed rgba(34,232,255,.35); margin: 110px 6px calc(8px + var(--abajo)); background: rgba(34,232,255,.04); }
#ayudaMandos .zona.der { border-color: rgba(255,43,209,.35); background: rgba(255,43,209,.04); }
#ayudaMandos b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .06em; }
#ayudaMandos span { font-size: 11px; letter-spacing: 1.6px; color: var(--tenue); text-transform: uppercase; }
@media (pointer: fine) { #ayudaMandos { display: none; } }
@keyframes aparecer { 0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

.botonImpulso { position: absolute; right: calc(22px + var(--der)); bottom: calc(190px + var(--abajo)); width: 66px; height: 66px; border-radius: 50%;
  border: 2px solid rgba(124,255,212,.55); background: rgba(5,15,24,.55); color: var(--verde); pointer-events: auto; touch-action: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.botonImpulso:active { background: var(--verde); color: #04131a; }
@media (max-height: 460px) { .botonImpulso { bottom: calc(150px + var(--abajo)); right: calc(14px + var(--der)); width: 58px; height: 58px; } }

/* Palancas flotantes */
#palancas { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.pal { position: absolute; width: 0; height: 0; transition: opacity .2s; opacity: .35; }
.pal-izq { left: calc(96px + var(--izq)); top: calc(100% - 110px - var(--abajo)); }
.pal-der { left: calc(100% - 96px - var(--der)); top: calc(100% - 110px - var(--abajo)); }
.pal.activa { opacity: 1; transition: none; }
.pal-base { position: absolute; left: -62px; top: -62px; width: 124px; height: 124px; border-radius: 50%; border: 2px solid rgba(34,232,255,.45);
  background: radial-gradient(circle, rgba(34,232,255,.10), rgba(5,7,13,.35)); }
.pal-pomo { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; border-radius: 50%; background: rgba(34,232,255,.35);
  border: 2px solid var(--cian); box-shadow: 0 0 18px rgba(34,232,255,.55); }
.pal-der .pal-base { border-color: rgba(255,43,209,.45); background: radial-gradient(circle, rgba(255,43,209,.10), rgba(5,7,13,.35)); }
.pal-der .pal-pomo { background: rgba(255,43,209,.35); border-color: var(--magenta); box-shadow: 0 0 18px rgba(255,43,209,.55); }
.pal-txt { position: absolute; left: -80px; width: 160px; top: 70px; text-align: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1.6px; color: var(--tenue); }
.pal.activa .pal-txt { display: none; }

/* Bordes de dano y de vida baja */
#bordeVida { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(255,43,209,.45) 100%); }
#bordeVida.activo { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
#flashDano { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,43,209,.1), rgba(255,43,209,.45)); }
#flashDano.ver { animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Presentacion de cada pueblo */
#presentacion { position: fixed; inset: 0; z-index: 15; pointer-events: none; opacity: 0; transition: opacity .6s; background: #000; }
#presentacion.ver { opacity: 1; }
#presentacion img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: acercar 4.5s ease-out both; }
#presentacion::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2) 40%, rgba(0,0,0,.85)); }
.pres-texto { position: absolute; left: 0; right: 0; bottom: calc(14% + var(--abajo)); text-align: center; z-index: 1; }
.pres-texto span { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 4px; color: var(--cian); }
.pres-texto b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 13vw, 120px); line-height: .95; color: #fff;
  text-shadow: 0 0 30px rgba(255,43,209,.8), 0 0 80px rgba(255,43,209,.4); }
@keyframes acercar { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Botones de arriba y chat */
#superior { position: fixed; top: calc(8px + var(--arriba)); right: calc(8px + var(--der)); z-index: 12; display: flex; gap: 6px; }
.mini { min-width: 44px; min-height: 44px; padding: 6px 10px; background: rgba(5,12,22,.72); border: 1px solid var(--linea); color: var(--tenue);
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mini:hover, .mini:active { color: var(--cian); border-color: var(--cian); }
.mini[aria-pressed="true"] { color: var(--magenta); border-color: var(--magenta); }
#btnChat { position: fixed; left: calc(8px + var(--izq)); bottom: calc(60px + var(--abajo)); z-index: 12; }
#chatCaja { position: fixed; left: 50%; bottom: calc(18px + var(--abajo)); transform: translateX(-50%); width: min(460px, calc(100% - 28px)); z-index: 14; }
#chatCaja input { width: 100%; min-height: 48px; padding: 10px 14px; background: rgba(5,12,22,.95); border: 1px solid var(--cian); color: var(--blanco);
  font-family: var(--cuerpo); font-size: 15px; user-select: text; -webkit-user-select: text; }
#chatCaja input:focus { outline: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }