/* ============================================================
   HUD de juego — layout por capas (mobile-first).
   Capa 0 escena · 1 cabecera · 2 widgets · 3 sheet · 4 tab-bar.
   Aquí vive SOLO el posicionamiento/forma del HUD; el estilo del
   contenido de cada panel sigue en styles.css.
   Breakpoints: ≥720px (drawer lateral + dock), ≥1100px (sprites ×6).
   ============================================================ */

/* ---------- Raíz: el juego ocupa el viewport entero ---------- */
#screen-game {
  position: fixed;
  inset: 0;
  height: 100vh;   /* fallback */
  height: 100dvh;
  overflow: hidden;
}
#app { position: absolute; inset: 0; }

/* ---------- Capa 0: escena a pantalla completa ---------- */
#scene {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
  overflow: hidden;
}
#scene::after {
  /* suelo */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--ground-h);
  background: var(--ground, #1c2028);
  border-top: 2px solid rgba(0, 0, 0, 0.35);
}
#scene-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* En ultra-ancho, héroe (left:26%) y objetivo (right:26%) no se separan kilómetros. */
  max-width: 1100px;
  margin: 0 auto;
}
#scene-location {
  top: calc(var(--sat) + var(--hud-top-h) + var(--space-2));
  left: var(--space-4);
}
.sprite-hero, .sprite-target {
  bottom: calc(var(--ground-h) - 10px);
  width: var(--sprite);
  height: var(--sprite);
}
.target-boss {
  width: var(--sprite-boss);
  height: var(--sprite-boss);
  bottom: calc(var(--ground-h) + 12px);
}
#scene-peers { bottom: calc(var(--ground-h) - 22px); }
.floater { bottom: calc(var(--ground-h) + 90px); }

/* ---------- Capa 1: cabecera fina superpuesta ---------- */
#header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--sat) + var(--hud-top-h));
  padding: calc(var(--sat) + var(--space-1)) var(--space-3) var(--space-1);
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.82) 0%, rgba(6, 8, 12, 0.45) 70%, rgba(6, 8, 12, 0) 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.brand { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.brand h1 { margin: 0; font-size: var(--fs-lg); color: var(--gold); letter-spacing: 1px; white-space: nowrap; }
.subtitle { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.resources { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

/* Menú "⋯" de 🔥/👤/⚙️: en escritorio se disuelve (display:contents en las dos capas
   de wrapper) y los botones quedan inline en la cabecera, igual que siempre. Solo se
   convierte en dropdown real por debajo de 480px (ver más abajo). */
.header-more { display: contents; }
#header-more-menu { display: contents; }
#header-more-btn { display: none; }

/* ---------- Capa 2: widgets flotantes ---------- */
#hud-widgets {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none; /* la capa no bloquea la escena… */
}
.hud-widget { pointer-events: auto; } /* …pero los widgets sí reciben clicks */

/* Barra de actividad: tarjeta flotante sobre la tab-bar. COMPACTA a propósito
   (una línea + barra fina): en móvil compite con la escena por el espacio vertical
   y no debe tapar al héroe/objetivo (que además quedan elevados por --ground-h). */
#activity-strip {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: calc(var(--nav-h) + var(--sab) + var(--space-2));
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-3);
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--panel-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.banner-text {
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.banner-text > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#activity-strip .progressbar { grid-column: 1; height: 5px; }
#stop-btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; padding: var(--space-1) var(--space-3); }

/* Píldora de mundo: resumen de era/boss/evento, clicable → panel Mundo */
#world-pill {
  position: absolute;
  top: calc(var(--sat) + var(--hud-top-h) + var(--space-2));
  right: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(340px, 72vw);
  padding: var(--space-1) var(--space-3);
  background: var(--panel-glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-sm);
}
#world-pill[hidden] { display: none; }
#pill-era {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pill-boss { color: #e879b0; font-weight: 600; white-space: nowrap; }
#pill-event { flex: none; }

/* Vistazo de chat (solo escritorio): últimos mensajes sobre la escena, clic → Social */
#chat-peek { display: none; }
@media (min-width: 720px) {
  #chat-peek {
    position: absolute;
    left: var(--space-3);
    bottom: calc(var(--nav-h) + var(--space-5) + 72px); /* encima de la barra de actividad */
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: min(380px, 34vw);
    padding: var(--space-2) var(--space-3);
    background: var(--panel-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
  }
  #chat-peek[hidden] { display: none; }
  .peek-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .peek-row.system { color: var(--gold); }
}

/* Pestaña bloqueada de la tab-bar (Mercado hasta la Era 2): promesa visible */
#nav button:disabled { opacity: 0.45; }
#nav .nav-lock { position: absolute; top: 4px; right: 10px; font-size: 10px; }
@media (min-width: 720px) {
  #nav .nav-lock { position: static; margin-left: 4px; }
}

/* ---------- Capa 3: panel overlay (sheet) ---------- */
#sheet { position: absolute; inset: 0; z-index: var(--z-sheet); }
#sheet-backdrop { position: absolute; inset: 0; background: var(--overlay); }
#sheet-panel {
  position: absolute;
  inset: auto 0 0 0;
  height: 85vh;   /* fallback */
  height: 85dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-3) var(--radius-3) 0 0;
  box-shadow: var(--shadow-2);
  animation: sheet-up 0.22s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
#sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
#sheet-title {
  margin: 0;
  font-size: var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
}
#sheet-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: var(--fs-md);
  line-height: 1;
}
#views {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-3) calc(var(--nav-h) + var(--sab) + var(--space-4));
}

/* ---------- Capa 4: tab-bar inferior ---------- */
#nav {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-nav);
  display: flex;
  height: calc(var(--nav-h) + var(--sab));
  padding: 0 var(--space-2) var(--sab);
  background: var(--panel-glass);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#nav button {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px; /* área táctil */
  padding: var(--space-1);
  background: none;
  border: none;
  border-radius: var(--radius-1);
  color: var(--muted);
  font-size: var(--fs-xs);
}
#nav button.active { color: var(--gold); background: rgba(232, 185, 90, 0.08); }
#nav button:hover:not(:disabled) { color: var(--gold); border: none; }
.nav-ico { font-size: 20px; line-height: 1; }
#nav .nav-dot { position: absolute; top: 5px; left: calc(50% + 10px); margin: 0; }

/* ---------- Breakpoint escritorio: drawer lateral + dock flotante ---------- */
@media (min-width: 720px) {
  /* El sheet se convierte en un drawer a la derecha: la escena sigue viéndose. */
  #sheet-backdrop { background: rgba(6, 8, 12, 0.35); }
  #sheet-panel {
    inset: 0 0 0 auto;
    height: auto;
    width: min(480px, 92vw);
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    animation: drawer-in 0.22s ease-out;
  }
  @keyframes drawer-in {
    from { transform: translateX(36px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  /* Tab-bar → dock flotante centrado */
  #nav {
    left: 50%;
    right: auto;
    bottom: var(--space-3);
    transform: translateX(-50%);
    height: auto;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
  }
  #nav button {
    flex: none;
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-md);
  }
  .nav-ico { font-size: 16px; }
  #nav .nav-dot { position: static; margin-left: 4px; }

  /* Widgets: actividad abajo-izquierda, sin pisar el dock */
  #activity-strip {
    left: var(--space-3);
    right: auto;
    width: min(420px, 44vw);
    bottom: calc(var(--nav-h) + var(--space-5));
  }
}

/* ---------- Breakpoint pantalla grande: sprites ×6 ---------- */
@media (min-width: 1100px) {
  :root { --sprite: 96px; --sprite-boss: 128px; --ground-h: clamp(64px, 16dvh, 150px); }
}

/* ---------- Móvil: la escena manda ----------
   El suelo se eleva para que héroe/objetivo (de pie sobre --ground-h) queden POR
   ENCIMA de la barra de actividad flotante — antes la barra tapaba la acción. */
@media (max-width: 719px) {
  :root { --ground-h: clamp(118px, 20dvh, 168px); }
}

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 479px) {
  .brand { display: none; } /* cabecera compacta: oro/PC/online/mute */
  /* Sin la marca, `.resources { margin-left: auto }` (pensado para separarla de
     "La Frontera" en escritorio) empuja el oro hacia el centro cuando el resto de la
     fila no llena el ancho (p. ej. offline, con el aviso reducido a "⚠" más abajo) —
     el oro debe quedar SIEMPRE pegado a la izquierda en móvil. */
  .resources { margin-left: 0; }
  .nav-label { display: none; } /* con 5 pestañas, solo iconos ya desde 480px */
  /* "✦ 12 PC" → "✦ 12", "🌍 3 aventureros" → "🌍 3": icono + número, sin la palabra.
     Sin esto el texto no cabía en una línea y partía en dos, hinchando la cabecera
     según el ancho exacto de la ventana (bug real, ver CLAUDE.md §12). */
  .hud-word { display: none; }

  /* Con marca oculta y palabras ocultas, 🔥/👤/⚙️ (+🐛 si el debug está activo)
     seguían sin caber en una fila: el contenido mínimo superaba el ancho de un móvil
     en vertical y ⚙️ (el último) quedaba fuera del viewport — solo era accesible
     rotando a horizontal (bug real, reportado 2026-07-22). Se agrupan en un menú. */
  .header-more { position: relative; display: block; }
  #header-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #header-more-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    z-index: var(--z-hud);
  }
  #header-more-menu.open { display: flex; }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  #sheet-panel { animation: none !important; }
}