/* Arma Nariño — Estética de bloques encajables (estilo LEGO):
   colores primarios de plástico brillante, esquinas redondeadas, espigas
   decorativas y botones con luz especular — lo contrario del pixel-art. */

:root {
  --wj-rojo: #d01012;
  --wj-rojo-luz: #ee3340;
  --wj-amarillo: #f5c518;
  --wj-azul: #0d69ab;
  --wj-azul-osc: #0b3d63;
  --wj-verde: #237841;
  --wj-verde-luz: #58ab41;
  --wj-panel: #fdfdfb;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--wj-azul-osc);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Arial Rounded MT Bold", sans-serif;
  color: #f5f5f5;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game-canvas { display: block; width: 100vw; height: 100vh; }

.hidden { display: none !important; }

/* ---------- Cubiertas de pantalla completa ---------- */
.wj-cover {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.10) 0 14px, transparent 15px),
    radial-gradient(circle at 32% 78%, rgba(255,255,255,.08) 0 14px, transparent 15px),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.08) 0 14px, transparent 15px),
    linear-gradient(180deg, #1d86cf 0%, var(--wj-azul-osc) 100%);
  text-align: center; padding: 12px;
}

.wj-logo {
  font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 900; line-height: 1.05;
  color: #fff; letter-spacing: .06em; margin-bottom: 18px;
  text-shadow: 0 3px 0 var(--wj-rojo), 0 6px 14px rgba(0,0,0,.45);
}

/* Ladrillo 2×2 del logo */
.wj-brick-logo {
  display: block; width: 76px; height: 46px; margin: 0 auto 14px;
  background: linear-gradient(180deg, var(--wj-rojo-luz), var(--wj-rojo));
  border-radius: 6px; position: relative;
  box-shadow: 0 6px 0 #8c0b0d, 0 10px 18px rgba(0,0,0,.4);
}
.wj-brick-logo::before, .wj-brick-logo::after {
  content: ''; position: absolute; top: -12px; width: 24px; height: 16px;
  background: linear-gradient(180deg, #ff5a64, var(--wj-rojo));
  border-radius: 6px 6px 3px 3px;
}
.wj-brick-logo::before { left: 9px; }
.wj-brick-logo::after { right: 9px; }

#loading-text { color: #dbeefc; font-size: 1.05rem; letter-spacing: .04em; }

/* Aviso de rotación (móvil vertical) */
#rotate { z-index: 90; background: var(--wj-azul-osc); }
.wj-rotate-icon { font-size: 4rem; animation: wj-tilt 1.4s infinite ease-in-out; }
@keyframes wj-tilt { 50% { transform: rotate(-90deg); } }
.wj-rotate-text { font-size: 1.6rem; font-weight: 800; color: var(--wj-amarillo); margin-top: 10px; }
.wj-rotate-sub { color: #dbeefc; margin-top: 8px; line-height: 1.5; }

/* ---------- Paneles de plástico ---------- */
.wj-panel {
  background: var(--wj-panel); color: #23272b;
  border-radius: 18px;
  border: 4px solid var(--wj-amarillo);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), 0 10px 0 rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.45);
  padding: 18px 22px; max-width: 480px; width: min(94vw, 480px);
  max-height: 92vh; overflow-y: auto;
}

.wj-title { font-size: 1.6rem; font-weight: 900; color: var(--wj-rojo); letter-spacing: .05em;
  text-shadow: 0 2px 0 rgba(0,0,0,.12); margin-bottom: 4px; }
.wj-title-sm { font-size: 1.15rem; font-weight: 900; color: var(--wj-azul); margin-bottom: 8px; }
.wj-subtitle { font-size: .84rem; color: #4c555c; line-height: 1.45; margin-bottom: 10px; }

#avatar-preview { display: block; margin: 0 auto 6px;
  background: linear-gradient(180deg, #bfe3fb, #9dcdf0);
  border: 3px solid var(--wj-azul); border-radius: 12px; }

.wj-row { margin: 8px 0; text-align: left; }
.wj-row label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 4px; }

.wj-row input, #chat-input {
  width: 100%; padding: 9px 12px; font: 700 1rem system-ui, sans-serif;
  background: #fff; color: #23272b; border: 3px solid var(--wj-azul);
  border-radius: 10px; outline: none;
}
#chat-input { background: rgba(255,255,255,.94); }

.wj-avatar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.wj-opt span { font-size: .75rem; font-weight: 700; display: block; margin-bottom: 3px; }
.wj-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.wj-swatch {
  width: 24px; height: 24px; border: 2px solid rgba(0,0,0,.25);
  border-radius: 7px; cursor: pointer; padding: 0;
  font-size: 11px; line-height: 1; color: #222;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
}
.wj-swatch.sel { border-color: var(--wj-rojo); outline: 2px solid var(--wj-amarillo); }

.wj-btn {
  display: block; width: 100%; margin-top: 12px; padding: 13px;
  font: 900 1.05rem system-ui, sans-serif; letter-spacing: .06em;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); cursor: pointer;
  background: linear-gradient(180deg, var(--wj-verde-luz), var(--wj-verde));
  border: 0; border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 #14522a, 0 8px 14px rgba(0,0,0,.3);
}
.wj-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 #14522a; }

.wj-error { margin-top: 10px; color: #a40000; font-weight: 700; font-size: .85rem; }
.wj-credits { margin-top: 12px; font-size: .68rem; color: #777; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { pointer-events: auto; }

#crosshair {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 22px; color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.7);
  pointer-events: none;
}
/* Modo grupo: rival congelable en la mira (clic / Q / ⚡ dispara) */
#crosshair.enemy {
  color: #8fe3ff; font-size: 28px; font-weight: 700;
  text-shadow: 0 0 8px rgba(64,180,255,.95), 0 1px 3px rgba(0,0,0,.7);
}

#topbar {
  position: fixed; top: 8px; left: 8px; right: 8px; display: flex; gap: 8px;
  align-items: center; font-size: .85rem; pointer-events: none;
}
#topbar span {
  background: rgba(11,61,99,.75); padding: 6px 11px;
  border-radius: 999px; border: 2px solid rgba(255,255,255,.35); font-weight: 700;
}
#pos-indicator { color: #dbeefc; }
.wj-mini-btn {
  pointer-events: auto; margin-left: auto; width: 36px; height: 36px;
  font: 900 1rem system-ui, sans-serif; color: #fff; cursor: pointer;
  background: rgba(11,61,99,.75); border: 2px solid rgba(255,255,255,.4);
  border-radius: 50%;
}
#help-btn, #fullscreen-btn { margin-left: 0; }
#chat-toggle.off { opacity: .45; }

/* Barra inferior: selector de pieza + colores */
#bottombar {
  position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 8px;
}

#hotbar {
  display: flex; gap: 3px; background: rgba(11,61,99,.6); padding: 4px;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.3);
}
.wj-slot {
  width: 48px; height: 48px; position: relative; cursor: pointer;
  border: 2px solid rgba(255,255,255,.35); border-radius: 9px;
  background: rgba(255,255,255,.12); padding: 2px;
}
.wj-slot canvas { width: 100%; height: 100%; display: block; }
.wj-slot.sel { border-color: var(--wj-amarillo); outline: 3px solid var(--wj-amarillo); z-index: 1; background: rgba(255,255,255,.28); }
.wj-slot .wj-key {
  position: absolute; top: 1px; left: 4px; font-size: 10px; color: #fff;
  font-weight: 700; text-shadow: 0 1px 2px #000;
}

/* Botón LADRILLO/PLACA */
.wj-piece-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-width: 78px; padding: 4px 10px; cursor: pointer;
  background: rgba(11,61,99,.75); color: #fff;
  border: 2px solid rgba(255,255,255,.35); border-radius: 12px;
  font: 800 .62rem system-ui, sans-serif; letter-spacing: .05em;
}
.wj-piece-btn:active { background: rgba(245,197,24,.5); }
.wj-piece-icon {
  display: block; width: 34px; height: 20px; position: relative;
  background: linear-gradient(180deg, var(--wj-rojo-luz), var(--wj-rojo));
  border-radius: 3px; transition: height .12s ease;
}
.wj-piece-icon::before, .wj-piece-icon::after {
  content: ''; position: absolute; top: -5px; width: 10px; height: 7px;
  background: var(--wj-rojo-luz); border-radius: 3px 3px 1px 1px;
}
.wj-piece-icon::before { left: 4px; }
.wj-piece-icon::after { right: 4px; }
.wj-piece-icon.wj-piece-plate { height: 8px; }

#mine-progress {
  position: fixed; left: 50%; top: 56%; transform: translateX(-50%);
  width: 130px; height: 13px; background: rgba(11,61,99,.75);
  border: 2px solid #fff; border-radius: 999px; overflow: hidden;
}
#mine-bar { height: 100%; width: 0; background: linear-gradient(180deg, #ffd95e, var(--wj-amarillo)); }

/* Tarjeta del sitio turístico */
#site-card {
  position: fixed; top: 52px; left: 50%; transform: translateX(-50%);
  max-width: min(92vw, 460px); text-align: center; padding: 10px 18px;
  background: rgba(11,61,99,.92); border: 3px solid var(--wj-amarillo);
  border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.4); pointer-events: none;
}
#site-name { font-weight: 800; color: var(--wj-amarillo); font-size: 1rem; letter-spacing: .03em; }
#site-fact { font-size: .8rem; color: #e3f0fa; margin-top: 4px; line-height: 1.4; }

/* Chat */
#chat-box { position: fixed; left: 8px; bottom: 78px; width: min(78vw, 380px); }
#chat-log { max-height: 30vh; overflow-y: auto; font-size: .8rem; line-height: 1.45;
  display: flex; flex-direction: column; justify-content: flex-end; }
#chat-log div { background: rgba(11,61,99,.6); padding: 3px 9px; margin-top: 2px;
  border-radius: 9px; word-wrap: break-word; }
#chat-log b { color: var(--wj-amarillo); }
#chat-log .wj-sys { color: #b8e6a4; font-style: italic; }
#chat-form { margin-top: 4px; }

/* Controles táctiles */
/* Dos palancas: izquierda mueve (centro: quitar/colocar), derecha mira (centro: saltar) */
#joystick, #joystick-look {
  position: fixed; bottom: 10vh; width: 120px; height: 120px;
  background: rgba(11,61,99,.4); border: 3px solid rgba(255,255,255,.45);
  border-radius: 50%;
}
#joystick { left: 4vw; }
#joystick-look { right: 4vw; }
#joystick-knob, #joystick-look-knob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff, #cfd8e0);
  border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: rgba(11,61,99,.65); pointer-events: none;
}
/* Pistas de uso en el centro de cada palanca */
#joystick-knob::after { content: '🧱'; font-size: .95rem; }
#joystick-look-knob::after { content: '👀'; font-size: .95rem; }
/* Botones de acciones alrededor de las palancas */
#btn-quiz  { position: fixed; left: 4vw;                 bottom: calc(10vh + 132px); }
#btn-chat  { position: fixed; left: calc(4vw + 68px);    bottom: calc(10vh + 132px); }
#btn-view  { position: fixed; right: 4vw;                bottom: calc(10vh + 132px); }
#btn-zap   { position: fixed; right: calc(4vw + 68px);   bottom: calc(10vh + 132px); }
/* En táctil los mensajes suben para no tapar las palancas ni sus botones */
body.wj-touch #chat-box { bottom: auto; top: 46px; width: min(46vw, 300px); }
body.wj-touch #chat-log { max-height: 22vh; font-size: .72rem; }
.wj-touch-btn {
  width: 64px; height: 64px; font-size: 1.5rem; color: #fff; cursor: pointer;
  background: rgba(11,61,99,.55); border: 3px solid rgba(255,255,255,.55);
  border-radius: 50%; text-shadow: 0 1px 2px #000; padding: 0;
}
.wj-touch-btn:active, .wj-touch-btn.on { background: rgba(245,197,24,.6); }
.wj-touch-small { width: 52px; height: 52px; font-size: 1.1rem; }

#help p { font-size: .84rem; line-height: 1.5; margin: 6px 0; text-align: left; }
.wj-help-tip { color: var(--wj-azul); font-weight: 700; }

#toast {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%);
  background: rgba(11,61,99,.92); color: var(--wj-amarillo); font-weight: 800;
  padding: 8px 16px; border: 2px solid var(--wj-amarillo); border-radius: 999px;
  pointer-events: none; max-width: 90vw; text-align: center;
}

/* Marcador de puntos */
#score-chip { color: var(--wj-amarillo); }

/* ---------- Captura la Bandera ---------- */
.wj-mode-row { display: flex; gap: 8px; }
.wj-mode-btn {
  flex: 1; padding: 10px 8px; cursor: pointer;
  font: 800 .82rem system-ui, sans-serif; color: #23272b;
  background: #fff; border: 3px solid #b9c4cc; border-radius: 10px;
}
.wj-mode-btn.sel { border-color: var(--wj-verde); outline: 2px solid var(--wj-verde-luz); background: #eefbea; }
.wj-team-row { display: flex; gap: 8px; margin-top: 8px; }
.wj-team-btn {
  flex: 1; padding: 10px 8px; cursor: pointer; color: #fff;
  font: 900 .8rem system-ui, sans-serif; letter-spacing: .04em;
  border: 3px solid transparent; border-radius: 10px; opacity: .55;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.wj-team-btn.rojo { background: linear-gradient(180deg, #ee3340, #c4281c); }
.wj-team-btn.azul { background: linear-gradient(180deg, #2b8fd8, #0d69ab); }
.wj-team-btn.sel { opacity: 1; border-color: var(--wj-amarillo); outline: 2px solid var(--wj-amarillo); }
.wj-team-hint { margin-top: 8px; font-size: .72rem; color: #4c555c; line-height: 1.4; }
.wj-disabled { opacity: .35; pointer-events: none; }

#ctf-score {
  color: #fff; font-weight: 900; letter-spacing: .04em;
  border-color: var(--wj-amarillo) !important;
}

/* Tinte de pantalla al estar congelado */
#freeze-tint {
  position: fixed; inset: 0; z-index: 25; pointer-events: none;
  background: radial-gradient(circle, rgba(127,212,255,.18) 40%, rgba(80,170,255,.42) 100%);
}

/* Cartel de victoria */
#ctf-win { z-index: 70; pointer-events: none; background: rgba(11,61,99,.55); }
.wj-win-panel {
  font: 900 clamp(1.6rem, 5vw, 2.6rem)/1.35 system-ui, sans-serif;
  color: #fff; text-align: center; padding: 26px 40px;
  border-radius: 22px; border: 5px solid var(--wj-amarillo);
  box-shadow: 0 14px 40px rgba(0,0,0,.5); text-shadow: 0 3px 0 rgba(0,0,0,.35);
  animation: wj-pop .5s ease;
}
.wj-win-rojo .wj-win-panel { background: linear-gradient(180deg, #ee3340, #a01812); }
.wj-win-azul .wj-win-panel { background: linear-gradient(180deg, #2b8fd8, #094e80); }
.wj-win-panel span { font-size: 1.4em; color: var(--wj-amarillo); }
.wj-win-panel small { font-size: .45em; font-weight: 700; opacity: .9; }

/* Ventana de preguntas (quiz de los sitios turísticos) */
#quiz-modal, #piece-modal { z-index: 60; }
.wj-quiz-panel { text-align: left; }
#quiz-question { font-weight: 800; font-size: 1.02rem; line-height: 1.4; margin: 6px 0 12px; }
#quiz-answers { display: flex; flex-direction: column; gap: 8px; }
.wj-quiz-answer {
  padding: 11px 14px; text-align: left; cursor: pointer;
  font: 700 .95rem system-ui, sans-serif; color: #23272b;
  background: #fff; border: 3px solid var(--wj-azul); border-radius: 10px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 3px 0 rgba(0,0,0,.12);
}
.wj-quiz-answer:hover { background: #eaf4fd; }
.wj-quiz-answer.ok { background: var(--wj-verde-luz); border-color: var(--wj-verde); color: #fff; }
.wj-quiz-answer.bad { background: var(--wj-rojo-luz); border-color: var(--wj-rojo); color: #fff; }
#quiz-hint { margin-top: 10px; font-size: .8rem; color: #5b6770; font-style: italic; }
#quiz-feedback { margin-top: 8px; font-weight: 900; min-height: 1.2em; }
#quiz-feedback.ok { color: var(--wj-verde); }
#quiz-feedback.bad { color: var(--wj-rojo); }

/* Ventana de selección/desbloqueo de tamaños de pieza */
#piece-banner {
  background: linear-gradient(180deg, #ffd95e, var(--wj-amarillo));
  color: #5a4200; font-weight: 900; padding: 10px 14px; border-radius: 10px;
  margin-bottom: 10px; text-align: center;
}
.wj-piece-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px;
}
.wj-piece-card {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; cursor: pointer;
  background: #fff; border: 3px solid #b9c4cc; border-radius: 12px;
  font: 700 .72rem system-ui, sans-serif; color: #23272b;
}
.wj-piece-card.sel { border-color: var(--wj-verde); outline: 3px solid var(--wj-verde-luz); }
.wj-piece-card.nuevo { border-color: var(--wj-amarillo); outline: 3px solid var(--wj-amarillo); animation: wj-pop .45s ease; }
@keyframes wj-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.wj-piece-card.locked { opacity: .55; cursor: not-allowed; background: #eceff1; }
.wj-piece-mini {
  display: block; background: linear-gradient(180deg, var(--wj-rojo-luz), var(--wj-rojo));
  border-radius: 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
}
.wj-piece-card.locked .wj-piece-mini { background: #9aa4ab; }
.wj-piece-name { font-weight: 900; }
.wj-piece-dims { font-size: .66rem; color: #5b6770; }

/* Botón de música (opciones de música del juego original) */
.wj-music-btn {
  position: fixed; bottom: 14px; right: 14px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); color: var(--wj-azul);
  border: 2px solid var(--wj-azul); border-radius: 50%;
  cursor: pointer; z-index: 30; box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.wj-music-btn.off { color: #98a4ad; border-color: #98a4ad; }
.wj-music-btn:active { transform: scale(.94); }

/* Cronómetro del laberinto */
#maze-timer {
  position: fixed; top: 52px; left: 12px; padding: 8px 14px;
  background: rgba(11,61,99,.92); color: var(--wj-amarillo);
  font-weight: 800; font-size: .95rem; letter-spacing: .03em;
  border: 2px solid var(--wj-amarillo); border-radius: 12px;
  pointer-events: none;
}

@media (max-width: 760px) {
  #chat-box { bottom: auto; top: 46px; width: min(60vw, 300px); }
  #maze-timer { top: auto; bottom: 64px; left: 8px; font-size: .8rem; }
  .wj-music-btn { bottom: auto; top: 8px; right: 96px; width: 36px; height: 36px; }
  #chat-log { max-height: 20vh; font-size: .7rem; }
  #bottombar { bottom: 4px; }
  .wj-slot { width: 40px; height: 40px; }
  .wj-piece-btn { min-width: 64px; font-size: .55rem; }
  .wj-avatar-row { grid-template-columns: 1fr; }
  .wj-panel { padding: 12px 14px; }
}