/* ESPORA — pantalla completa, centrada, fondo tierra */
* { margin: 0; padding: 0; box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  height: 100%;
  background: #0d0b08;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

#privacy-link {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: 60;
  color: #8a7a5c;
  font: 11px monospace;
  opacity: 0.72;
}

#privacy-link:hover,
#privacy-link:focus-visible { color: #d8e8a0; opacity: 1; }

body.touch {
  /* respeta notch/lanza en móviles y viste los márgenes (Eva: "espacio negro") */
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
  background: radial-gradient(120% 120% at 50% 40%, #241f15 0%, #17130d 55%, #0d0b08 100%);
}

body.touch, body.touch canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

canvas {
  background: #191410;
  border-radius: 6px;
  box-shadow: 0 0 60px rgba(125, 179, 90, 0.12);
  /* M0: mantiene la proporción 960:576 (5:3) en cualquier pantalla */
  width: min(100vw, calc(100vh * 960 / 576));
  width: min(100vw, calc(100dvh * 960 / 576)); /* navegadores con dvh */
  height: auto;
}

/* ---------- UI táctil (solo existe en modo touch) ---------- */

#touch-ui { display: none; }
body.touch #touch-ui { display: block; }

/* stick flotante: aparece donde posa el pulgar en la mitad izquierda */
#stick {
  position: fixed;
  width: 106px; height: 106px;
  margin: -53px 0 0 -53px;      /* centrado en el punto de origen */
  border-radius: 50%;
  border: 2px solid rgba(216, 232, 160, 0.16);
  background: rgba(125, 179, 90, 0.05);   /* Eva: invadía visualmente la sala */
  display: none;
  z-index: 20;
  pointer-events: none;          /* no roba toques: los gestos pasan al juego */
}
#stick.on { display: block; }
#stick-nub {
  position: absolute;
  width: 46px; height: 46px;
  left: 28px; top: 28px;
  border-radius: 50%;
  background: rgba(184, 233, 134, 0.28);
  border: 2px solid rgba(216, 232, 160, 0.4);
}

/* botones táctiles (compacidad: roban lo mínimo de pantalla) */
.tbtn {
  position: fixed;
  z-index: 21;
  border-radius: 50%;
  border: 2px solid rgba(216, 232, 160, 0.3);
  background: rgba(125, 179, 90, 0.12);
  color: #d8e8a0;
  font-family: monospace;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tbtn:active { background: rgba(184, 233, 134, 0.3); }

#btn-active { right: 14px;  bottom: 92px; width: 72px; height: 72px; font-size: 28px; }
#btn-bomb   { right: 96px;  bottom: 22px;  width: 58px; height: 58px; font-size: 22px; }
#btn-pause  { right: 12px;  top: 10px;     width: 44px; height: 44px; font-size: 14px; }
#btn-map    { right: 66px;  top: 10px;     width: 44px; height: 44px; font-size: 12px; }

/* selector de versión: grande, visible y accesible — solo en el título */
#version-bar { display: none; }
body.in-title #game { cursor: pointer; }   /* el título también responde al ratón */
body.touch.in-title #version-bar {
  display: flex;
  gap: 12px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 22;
}
.vbtn {
  /* letra grande: el público que conoce a Chiquito no va con lupa */
  min-height: 64px;
  padding: 0 30px;
  border-radius: 999px;
  border: 2px solid rgba(216, 232, 160, 0.4);
  background: rgba(20, 17, 12, 0.78);
  color: #9aa88a;
  font: bold 23px monospace;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.vbtn.active {
  background: #b8e986;
  border-color: #d8e8a0;
  color: #1a140e;
}

/* aviso de orientación: solo en touch + vertical */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(13, 11, 8, 0.96);
  color: #d8e8a0;
  font-family: monospace;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 19px;
  line-height: 1.7;
}
@media (orientation: portrait) {
  body.touch #rotate-hint { display: flex; }
}
/* ═══════════════ BINDING TOUCH LAB — build TOUCH-LAB-0.2 ═══════════════
   ARQUITECTURA DE CAPAS (fix regresión columna lateral):
   · Todo overlay del lab nace con `hidden` en el HTML: sin CSS no existe
     visualmente y en espora (y cualquier tema no-lab) el JS jamás lo desoculta.
   · #overlay-root: fixed, pointer-events:none — NUNCA participa del layout
     (los modales no reservan width/height/flex-space del juego).
   · Visibilidad por ESTADO JS (clase .open + hidden), no por media queries.
   · Escalera z-index: juego 0 · HUD 15 · táctil 20-22 · overlay-root 40
     (dentro: quick 1, pausa 2, feedback 3, toast 4, debug 5). */

#overlay-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;              /* contenedor transparente al juego */
}
#overlay-root > * { pointer-events: none; }
#overlay-root button,
#overlay-root textarea { pointer-events: auto; }

/* guardia: hidden gana siempre (documentación del único caso justificado) */
#overlay-root [hidden] { display: none; }

/* reset de componentes: nada de estilos nativos del navegador */
#overlay-root button,
#overlay-root textarea {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#overlay-root button:focus-visible,
#overlay-root textarea:focus-visible {
  outline: 2px solid #b8e986;
  outline-offset: 2px;
}

/* ── HUD móvil HTML (MobileHUD) — capa 15, fuera del overlay-root ── */
#lab-hud {
  display: none;
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
  flex-direction: column;
  gap: 4px;
  z-index: 15;
  pointer-events: none;
  font-family: monospace;
}
body.touch.lab.playing #lab-hud { display: flex; }   /* solo UI táctil */
#lab-hud .lab-hearts { font-size: 34px; line-height: 1; letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,.8); }
#lab-hud .hh { color: #ff5a4a; }
#lab-hud .hm { color: #ff5a4a; opacity: .45; }
#lab-hud .he { color: #4a4038; }
#lab-hud .lab-res { display: flex; gap: 14px; font-size: 19px; font-weight: bold;
  color: #e8dcc0; text-shadow: 0 2px 3px rgba(0,0,0,.8); }
#lab-hud .res-coin { color: #ffd76a; }
#lab-hud .res-key  { color: #e8d85a; }
#lab-hud .res-bomb { color: #c9c9d8; }
#lab-hud .lab-floor-num { font-size: 20px; font-weight: bold; color: #d8ccb0;
  text-shadow: 0 2px 3px rgba(0,0,0,.9); }
#lab-hud .lab-floor-seed { font-size: 12px; color: #8a7a5c; }
#lab-hud.immersive .lab-res { font-size: 15px; opacity: .8; }
#lab-hud.immersive .lab-floor-seed { display: none; }

/* etiqueta de build discreta durante el juego (capa 15) */
#lab-build {
  display: none;
  position: fixed;
  left: calc(10px + env(safe-area-inset-left, 0px));
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 15;
  font: 11px monospace;
  color: rgba(138, 122, 92, .75);
  pointer-events: none;
}
body.lab #lab-build { display: block; }
body.lab.lab-immersive #lab-build { opacity: .25; }

/* controles táctiles del lab: jerarquía con clamp() (capa 20-22, ya existente) */
body.lab #btn-active { width: clamp(70px, 19vw, 90px); height: clamp(70px, 19vw, 90px);
  font-size: clamp(26px, 7vw, 33px); right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
body.lab #btn-bomb { width: clamp(50px, 13vw, 62px); height: clamp(50px, 13vw, 62px);
  font-size: clamp(19px, 5vw, 22px); right: calc(108px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
body.lab #btn-pause, body.lab #btn-map { width: 38px; height: 38px; font-size: 12px;
  top: calc(10px + env(safe-area-inset-top, 0px)); }

.tbtn.pressed, body.lab .tbtn:active { transform: scale(.92); opacity: 1; }
body.lab #stick { opacity: .45; width: 118px; height: 118px; margin: -59px 0 0 -59px; }
body.lab #stick.live { opacity: .9; }
body.lab #stick-nub { width: 52px; height: 52px; left: 31px; top: 31px; }

/* ── modales: overlay centrado, nada de columna ── */
.game-modal {
  position: fixed;
  inset: 0;
  display: none;                     /* estado cerrado = sin participación */
  place-items: center;
  background: rgba(0, 0, 0, .55);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  pointer-events: auto;              /* activo: bloquea el juego */
}
.game-modal.open { display: grid; }  /* estado explícito JS (uiState.overlay) */

.lab-panel {
  display: flex; flex-direction: column; gap: 10px;
  width: min(440px, 90vw);
  max-height: min(92dvh, 92vh);
  overflow-y: auto;
  padding: 20px;
  border-radius: 14px;
  border: 2px solid rgba(216, 232, 160, .25);
  background: #14110c;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  font-family: monospace;
}
#lab-feedback .lab-panel { width: min(520px, 92vw); }
.lab-panel-title { font: bold 17px monospace; color: #d8ccb0; text-align: center; }
.lab-panel-sub { font: 11px monospace; color: #6b5d43; text-align: center; margin-top: -4px; }
.lab-mbtn {
  min-height: 52px;
  border-radius: 10px;
  border: 2px solid rgba(216, 232, 160, .3);
  background: rgba(125, 179, 90, .1);
  color: #d8e8a0;
  font: bold 17px monospace;
  touch-action: manipulation;
}
.lab-mbtn:active { transform: scale(.97); background: rgba(184, 233, 134, .25); }
.lab-mbtn.accent { border-color: #b8e986; }
.lab-mbtn.danger { color: #e8927e; border-color: rgba(224, 90, 74, .4); }
.lab-controls-help { font: 13px monospace; color: #9aa88a; line-height: 1.5;
  border-top: 1px solid rgba(138, 122, 92, .3); padding-top: 10px; }

/* ── feedback 0.2: valoración → categoría → comentario → GUARDAR ── */
.lab-stars { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; }
.lab-star {
  font-size: 36px; line-height: 1;
  background: none; border: none; color: #4a4038;
  padding: 4px 7px; min-width: 44px; min-height: 44px;
  touch-action: manipulation;
}
.lab-star.on { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 215, 106, .5); }
.lab-fb-q { font: bold 13px monospace; color: #9aa88a; margin: 4px 0; }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip {
  min-height: 40px; padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(216, 232, 160, .35);
  background: transparent; color: #9aa88a;
  font: bold 12px monospace;
  touch-action: manipulation;
}
.chip.on { background: #b8e986; color: #1a140e; border-color: #b8e986; }
#lab-fb-text {
  width: 100%; box-sizing: border-box;
  min-height: 68px; padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(216, 232, 160, .3);
  background: #0a0806; color: #e8dcc0;
  font: 14px monospace;
  resize: vertical;
}
.lab-fb-row { display: flex; gap: 8px; margin-top: 6px; }
#fb-save {
  flex: 1; min-height: 50px;
  border-radius: 10px; border: none;
  background: #b8e986; color: #1a140e;
  font: bold 16px monospace;
  touch-action: manipulation;
}
#fb-save:active { transform: scale(.97); }
/* acciones secundarias: pequeñas, en una línea de texto */
.lab-fb-secondary {
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
  margin-top: 2px;
}
.lab-link {
  background: none; border: none;
  color: #8a7a5c; font: 12px monospace;
  text-decoration: underline;
  padding: 8px 6px; min-height: 34px;
  touch-action: manipulation;
}
.lab-link:active { color: #b8e986; }
.lab-fb-note { font: 11px monospace; color: #6b5d43; text-align: center; margin-top: 4px; }

/* ── feedback rápido 👍👎 (capa 1 dentro de overlay-root) ── */
#lab-quick {
  display: none;
  position: absolute;
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  gap: 8px; align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 17, 12, .85);
  border: 1px solid rgba(216, 232, 160, .25);
  color: #9aa88a; font: bold 13px monospace;
  pointer-events: auto;
}
body.lab.q-open #lab-quick:not([hidden]) { display: flex; }
#lab-quick button { font-size: 22px; background: none; border: none;
  min-width: 40px; min-height: 40px; touch-action: manipulation; }
#lab-quick button:active { transform: scale(1.25); }

/* toast (capa 4) y debug (capa 5) */
#lab-toast {
  display: none;
  position: absolute; left: 50%; top: 18%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 10px 18px;
  border-radius: 999px;
  background: #b8e986; color: #1a140e;
  font: bold 15px monospace;
}
body.lab.toast #lab-toast:not([hidden]) { display: block; }
#lab-debug {
  position: absolute;
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(10, 8, 6, .85);
  border: 1px solid rgba(184, 233, 134, .4);
  color: #b8e986; font: 11px monospace;
  white-space: pre;
}

/* portrait: solo la capa "gira el móvil" — ningún overlay del lab compite */
@media (orientation: portrait) {
  #overlay-root { display: none; }
  body.touch #touch-ui { display: none; }   /* checklist: en vertical SOLO el aviso */
}