/* ============================================================
   SANDIA VILLAGE — Front del pueblo
   Basado en el Design System v2 "Corteza" (assets/site.css)
   ============================================================ */

:root {
  --nav-h: 60px;
  --bg: #0B1F12;
  --bg-2: #102A18;
  --card: #14301E;
  --card-2: #183823;
  --line: rgba(244, 237, 222, 0.10);
  --line-strong: rgba(244, 237, 222, 0.18);

  --cream: #F4EDDE;
  --cream-dim: rgba(244, 237, 222, 0.66);
  --cream-faint: rgba(244, 237, 222, 0.42);

  --flesh: #FF5348;
  --flesh-deep: #E2483F;
  --leaf: #52C776;
  --gold: #EFB644;
  --sky: #6FB6D9;
  --orange: #F28C38;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --read: 'Geist', system-ui, -apple-system, sans-serif;   /* lo que se lee en párrafos: diálogos, conversaciones, diarios (5-oct: más legible que Instrument Serif) */
  --body: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* clip (no hidden): hidden convertiría el body en contenedor de scroll y rompería position: sticky */
}

/* Tira invisible pegada al borde superior del documento: iOS Safari pinta bajo la
   franja de la hora los píxeles del documento que quedan por encima de la ventana
   (no los elementos fixed), así que esta tira, que se desplaza con la página y
   sobresale 140px hacia arriba, es lo que se ve ahí: fondo liso en vez de contenido */
.status-cover { position: sticky; top: 0; height: 0; z-index: 99; pointer-events: none; }
.status-cover::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: var(--bg); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--flesh); color: var(--cream); }

/* Film grain */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -6%); }
  30% { transform: translate(3%, -4%); }
  50% { transform: translate(-4%, 5%); }
  70% { transform: translate(6%, 2%); }
  90% { transform: translate(-2%, 6%); }
}


.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }
.pixel { image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11, 31, 18, 0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* En móvil la barra es opaca y se prolonga hacia arriba para tapar también
   la franja de la hora y la batería (iOS pinta el contenido debajo de ella) */
@media (max-width: 860px) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; background: var(--bg); }
}
.nav-inner {
  display: flex; align-items: center; gap: 14px;
  height: var(--nav-h);
  padding: 0 20px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; transition: transform .3s var(--ease-out); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
.nav-title {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.nav-sep { color: var(--cream-faint); font-weight: 400; font-size: 20px; }
.nav-project em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); font-size: 1.06em; padding-right: 3px; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-link {
  font-size: 14px; color: var(--cream-dim);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-link:hover { color: var(--cream); border-color: var(--flesh); }
.nav-cta {
  color: var(--cream);
  border: 1px solid rgba(239, 182, 68, 0.5);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 500;
}
.nav-cta:hover { background: var(--gold); border-color: var(--gold); color: #16240F; }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; }
.nav-cta-ico { display: inline-flex; width: 15px; height: 15px; color: var(--gold); }
.nav-cta-ico svg { width: 15px; height: 15px; }
.nav-cta:hover .nav-cta-ico { color: #16240F; }
/* con sesión abierta: retrato + nombre, lleva a su panel */
.nav-cta.is-user { padding: 3px 14px 3px 4px; border-color: rgba(82, 199, 118, 0.55); background: rgba(82, 199, 118, 0.08); }
.nav-cta.is-user:hover { background: var(--leaf); border-color: var(--leaf); color: #0E1F12; }
.nav-cta-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--mono); font-size: 12px; color: var(--cream);
}
.nav-cta-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.nav-cta.is-user .nav-cta-txt { display: flex; flex-direction: column; line-height: 1.1; }
.nav-cta.is-user .nav-cta-txt b { font-weight: 600; font-size: 13.5px; }
.nav-cta.is-user .nav-cta-txt small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); }
.nav-cta.is-user:hover .nav-cta-txt small { color: #0E1F12; }

/* Panel: botón del usuario con menú (Ir al pueblo / Cerrar sesión) */
.nav-user-wrap { position: relative; }
.nav-user {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 3px 10px 3px 4px;
  border: 1px solid rgba(82, 199, 118, 0.45);
  border-radius: 999px;
  background: rgba(82, 199, 118, 0.07);
  color: var(--cream); font-family: var(--body); cursor: pointer;
  transition: border-color .2s, background .2s;
}
.nav-user:hover, .nav-user.is-open { border-color: var(--leaf); background: rgba(82, 199, 118, 0.14); }
.nav-user-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--mono); font-size: 12px; color: var(--cream);
}
.nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.nav-user-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.nav-user-text b { font-size: 13.5px; font-weight: 600; color: var(--cream); }
.nav-user-text small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leaf); }
.nav-user-chev { width: 14px; height: 14px; color: var(--cream-faint); transition: rotate .2s; }
.nav-user.is-open .nav-user-chev { rotate: 180deg; }
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 210px;
  background: var(--card, #14261A);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  animation: navMenuIn .18s var(--ease-out) both;
  z-index: 110;
}
@keyframes navMenuIn { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.nav-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: none; border-radius: 9px; background: none;
  font-family: var(--body); font-size: 14px; color: var(--cream-dim);
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-menu-item svg { width: 16px; height: 16px; flex: none; }
.nav-menu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--cream); }
.nav-menu-item.is-danger:hover { background: rgba(255, 83, 72, 0.12); color: var(--flesh); }

.source-chip {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--cream-dim);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
/* iconos de estado del chip */
.ci { flex: none; display: inline-flex; align-items: flex-end; justify-content: center; width: 14px; height: 12px; }
.ci-live { align-self: center; width: 24px; height: 12px; color: var(--leaf); }
.ci-live svg { width: 24px; height: 12px; overflow: visible; }
.ci-live path { stroke-dasharray: 46; stroke-dashoffset: 46; animation: ecg 2.2s linear infinite; filter: drop-shadow(0 0 3px rgba(82, 199, 118, 0.6)); }
@keyframes ecg { 0% { stroke-dashoffset: 46; } 55% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ci-zzz { gap: 1px; font-family: var(--mono); font-weight: 500; color: #B7A6E8; line-height: 1; }
.ci-zzz i { font-style: normal; display: inline-block; animation: zzz 3s ease-in-out infinite; }
.ci-zzz i:nth-child(1) { font-size: 11px; }
.ci-zzz i:nth-child(2) { font-size: 8px; transform: translateY(-4px); animation-delay: .3s; }
.ci-zzz i:nth-child(3) { font-size: 10px; transform: translateY(-7px); animation-delay: .6s; }
.ci-stop { align-self: center; width: 9px; height: 9px; border-radius: 2px; background: var(--flesh); box-shadow: 0 0 8px rgba(255, 83, 72, 0.5); }
.ci-off { align-self: center; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--flesh); position: relative; box-sizing: border-box; }
.ci-off::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--flesh); transform: translate(-50%, -50%) rotate(-45deg); }
.ci-local { align-self: center; width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid var(--cream-faint); box-sizing: border-box; }
.ci-wait { align-self: center; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--cream); box-sizing: border-box; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.source-chip.is-paused { color: var(--cream); }
.source-chip.is-whisper { color: #D8CFF5; border-color: rgba(183, 166, 232, 0.45); }
.chip-short { display: none; }
/* espectadores: cuántas personas tienen el pueblo abierto ahora */
.viewers-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; color: var(--cream-dim);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; white-space: nowrap;
}
.viewers-chip[hidden] { display: none; }
.viewers-chip svg { width: 14px; height: 14px; color: var(--sky); flex: none; }
.viewers-chip b { color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes pulse { 50% { opacity: 0.4; } }

@media (max-width: 860px) {
  .nav-link:not(.nav-cta) { display: none; }
  /* chip de estado compacto: icono + palabra */
  .source-chip { padding: 5px 10px; gap: 6px; }
  .viewers-chip { padding: 5px 9px; gap: 5px; }
  .chip-txt { display: none; }
  .chip-short { display: inline; }
  .nav-title { font-size: 17px; min-width: 0; white-space: nowrap; overflow: hidden; }
  .nav-right { gap: 10px; }
}
@media (max-width: 600px) {
  .nav-cta .nav-cta-txt, .nav-cta.is-user .nav-cta-txt small { display: none; }
  .nav-cta { padding: 6px 10px; }
  .nav-cta.is-user { padding: 3px 12px 3px 4px; }
  .nav-cta.is-user .nav-cta-txt { display: flex; }
  .nav-user { padding: 3px 8px 3px 3px; gap: 6px; }
  .nav-user-text { display: none; }
}
@media (max-width: 480px) {
  .nav-inner { gap: 10px; padding: 0 16px; }
  .nav-sep { display: none; }
  .brand img { height: 26px; }
  .nav-cta { padding: 5px 11px; font-size: 13px; }
  .block-chip { padding: 5px 10px; font-size: 11.5px; }
  #weather-text { display: none; }
}

/* ============================================================
   ESCENARIO — habitantes · mapa · crónica
   El pueblo ocupa la pantalla nada más entrar.
   ============================================================ */
.stage {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr) 340px;
  grid-template-areas: "chronicle center villagers";
  gap: 16px;
  height: 100vh;
  padding: calc(var(--nav-h) + 16px) 16px 16px;
  position: relative;
  /* en pantallas grandes el tablero no se estira sin fin: se centra */
  max-width: 1800px;
  margin: 0 auto;
}
@media (min-width: 1700px) { .stage { grid-template-columns: 560px minmax(0, 1fr) 380px; gap: 20px; padding-left: 20px; padding-right: 20px; } }
.stage::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(82, 199, 118, 0.10), transparent 60%),
    radial-gradient(700px 420px at 90% 100%, rgba(239, 182, 68, 0.06), transparent 60%);
  pointer-events: none;
}
.stage > * { position: relative; min-height: 0; min-width: 0; }
.stage-center > *, .stage-side > *, .center-inner > * { min-width: 0; }
.stage { overflow: hidden; }
.stage-center { grid-area: center; display: flex; flex-direction: column; gap: 12px; }
.villagers { grid-area: villagers; }
.chronicle { grid-area: chronicle; }
.stage-tabs { display: none; }

@media (max-width: 1440px) { .stage { grid-template-columns: 400px minmax(0, 1fr) 290px; } }
@media (max-width: 1280px) { .stage { grid-template-columns: 350px minmax(0, 1fr) 260px; } }
@media (max-width: 1180px) {
  .stage { grid-template-columns: 300px minmax(0, 1fr) 250px; }
  .villager-card { grid-template-columns: 36px 1fr; gap: 8px; padding: 8px; }
  .avatar { width: 36px; height: 36px; font-size: 18px; }
  .vc-name { font-size: 13px; }
}

/* ----- Pantallas estrechas: mapa arriba, pestañas para crónica/habitantes ----- */
@media (max-width: 1000px) {
  .stage {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "center" "tabs" "panel";
    padding: calc(var(--nav-h) + 12px) 12px 12px;
  }
  .stage-tabs {
    grid-area: tabs;
    display: flex; gap: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
  }
  .stage-tab {
    flex: 1;
    font-family: var(--mono); font-size: 13px;
    color: var(--cream-dim);
    background: transparent; border: none; border-radius: 999px;
    padding: 9px 12px; cursor: pointer;
  }
  .stage-tab.is-active { background: var(--flesh); color: #fff; font-weight: 500; }
  .villagers, .chronicle { grid-area: panel; height: 70vh; }
  .stage[data-panel="chronicle"] .villagers { display: none; }
  .stage[data-panel="villagers"] .chronicle { display: none; }
}

/* ----- Paneles laterales ----- */
.stage-side {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.side-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.side-head h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--cream-faint); }
.side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 237, 222, 0.18) transparent;
}

/* ============================================================
   MAPA — la simulación en el centro
   ============================================================ */
.stage-center { align-items: stretch; }
.center-inner { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.control { flex: none; }
/* El hueco que queda bajo el panel de mando es un contenedor de tamaño:
   el mapa es el cuadrado más grande que cabe en él (ancho o alto). */
.map-stage {
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  display: flex; align-items: flex-start; justify-content: center;
  position: relative;
}
.live-map {
  position: relative;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1 / 1;
  background-image: url('assets/map.png?v=20260921');
  background-size: cover;
  image-rendering: pixelated;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* luz del día: tinte por fase, ventanas encendidas de noche, sombras de nubes */
.live-map::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: transparent;
  transition: background 2s ease;
}
.live-map.is-dawn::before { background: rgba(255, 214, 170, 0.35); }
.live-map.is-dusk::before { background: rgba(255, 168, 96, 0.42); }
.live-map.is-night::before { background: rgba(58, 72, 150, 0.82); }
.map-lights {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}
.live-map.is-night .map-lights { opacity: 1; }
.live-map.is-dusk .map-lights { opacity: 0.55; }
/* cada casa se ilumina solo si hay alguien dentro (se apaga al salir el último);
   de madrugada (00:00) se apagan todas, también la comisaría, y solo quedan las farolas */
.live-map .map-light-b.is-off,
.live-map.is-late .map-light-b { opacity: 0; }
.map-clouds {
  position: absolute; inset: -60%; z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
  background:
    radial-gradient(closest-side, rgba(40, 60, 40, 0.55), transparent 72%) 6% 12% / 30% 22% no-repeat,
    radial-gradient(closest-side, rgba(40, 60, 40, 0.45), transparent 72%) 62% 48% / 26% 20% no-repeat,
    radial-gradient(closest-side, rgba(40, 60, 40, 0.5), transparent 72%) 30% 80% / 22% 16% no-repeat,
    radial-gradient(closest-side, rgba(40, 60, 40, 0.4), transparent 72%) 85% 85% / 18% 14% no-repeat;
  animation: clouds 110s linear infinite alternate;
}
.live-map.is-night .map-clouds { opacity: 0.25; }
@keyframes clouds {
  from { transform: translate(-14%, -10%); }
  to { transform: translate(12%, 9%); }
}
@media (prefers-reduced-motion: reduce) { .map-clouds { animation: none; } }

/* ── clima real de Sandiás sobre el mapa ── */
.map-weather { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.map-weather > div { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.w-tint { mix-blend-mode: multiply; }
/* nublado: sin velo, solo las nubecitas y sus sombras */
.live-map.is-w-cloud .w-tint { opacity: 0; }
.live-map.is-w-rain .w-tint { background: rgba(120, 135, 160, 0.34); opacity: 1; }
.live-map.is-w-rain, .live-map.is-w-storm { background-image: url('assets/map-rain.png?v=20260921'); }
.live-map.is-w-storm .w-tint { background: rgba(80, 90, 120, 0.55); opacity: 1; }
.live-map.is-w-fog .w-tint { background: rgba(200, 206, 214, 0.4); opacity: 1; }
.live-map.is-w-snow .w-tint { background: rgba(205, 216, 232, 0.5); opacity: 1; }
.w-sun { mix-blend-mode: screen; background: radial-gradient(70% 60% at 18% 10%, rgba(255, 226, 150, 0.55), transparent 70%); }
.live-map.is-w-sun .w-sun { opacity: 1; }
.live-map.is-w-sun .map-clouds { opacity: 0.25; }
.w-clouds { overflow: hidden; }
.w-cloud {
  position: absolute; left: 0; aspect-ratio: 2 / 1;
  background-repeat: no-repeat; background-size: contain;
  image-rendering: pixelated;
  opacity: 0.78;
  filter: drop-shadow(0 10px 6px rgba(20, 40, 24, 0.28));
  animation: cloudDrift linear infinite;
}
.live-map.is-w-cloud .w-clouds { opacity: 1; }
.live-map.is-w-rain .w-clouds, .live-map.is-w-storm .w-clouds { opacity: 0.55; }
.live-map.is-w-storm .w-cloud { filter: brightness(0.55) drop-shadow(0 10px 6px rgba(20, 40, 24, 0.28)); }
.live-map.is-w-rain .w-cloud { filter: brightness(0.8) drop-shadow(0 10px 6px rgba(20, 40, 24, 0.28)); }
.live-map.is-night .w-cloud { filter: brightness(0.45); }
@keyframes cloudDrift { from { transform: translateX(-140%); } to { transform: translateX(760%); } }
@media (prefers-reduced-motion: reduce) { .w-cloud { animation: none; } }
.w-rain {
  background: repeating-linear-gradient(112deg, transparent 0 11px, rgba(220, 232, 255, 0.32) 11px 12px, transparent 12px 23px);
  background-size: 60px 80px;
  animation: rainFall .42s linear infinite;
}
.live-map.is-w-rain .w-rain { opacity: 0.6; }
.live-map.is-w-storm .w-rain { opacity: 0.8; animation-duration: .3s; }
@keyframes rainFall { to { background-position: -30px 80px; } }
/* llovizna: velo suave, nubes a la vista, mapa seco y gotas cortas y sueltas que caen despacio.
   Las rayas no se mueven: una máscara de trazos baja por ellas y parecen gotas resbalando en diagonal */
.live-map.is-w-drizzle .w-tint { background: rgba(130, 145, 168, 0.16); opacity: 1; }
.live-map.is-w-drizzle .w-clouds { opacity: 0.8; }
.live-map.is-w-drizzle .w-rain {
  opacity: 0.8; animation: drizzleFall 1.2s linear infinite;
  background: repeating-linear-gradient(106deg, transparent 0 26px, rgba(230, 238, 255, 0.6) 26px 27.6px, transparent 27.6px 53px);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 9px, transparent 9px 36px);
          mask-image: repeating-linear-gradient(180deg, #000 0 9px, transparent 9px 36px);
}
@keyframes drizzleFall { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 144px; mask-position: 0 144px; } }
.w-snow {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 1.3px, transparent 1.9px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 1.6px, transparent 2.2px);
  background-size: 34px 34px, 52px 52px, 78px 78px;
  background-position: 0 0, 17px 9px, 40px 25px;
  animation: snowFall 7s linear infinite;
}
.live-map.is-w-snow .w-snow { opacity: 1; }
.live-map.is-w-snow { background-image: url('assets/map-snow.png?v=20260921'); }
@keyframes snowFall { to { background-position: 10px 34px, 2px 52px, -14px 78px; } }
.w-fog {
  background:
    radial-gradient(60% 45% at 25% 35%, rgba(232, 236, 240, 0.75), transparent 70%),
    radial-gradient(55% 40% at 78% 65%, rgba(232, 236, 240, 0.7), transparent 70%),
    radial-gradient(70% 50% at 50% 95%, rgba(232, 236, 240, 0.6), transparent 70%);
  filter: blur(8px);
  animation: fogDrift 38s ease-in-out infinite alternate;
}
.live-map.is-w-fog .w-fog { opacity: 1; }
@keyframes fogDrift { from { transform: translate(-4%, -2%) scale(1.05); } to { transform: translate(4%, 2%) scale(1.12); } }
.w-flash { background: rgba(255, 255, 255, 0.85); }
.live-map.is-w-storm .w-flash { opacity: 0; animation: lightning 11s infinite; }
@keyframes lightning {
  0%, 36%, 38.5%, 40%, 71%, 72.5%, 100% { opacity: 0; }
  37%, 39% { opacity: 0.8; }
  71.8% { opacity: 0.55; }
}
.live-map.is-night .w-sun { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .w-rain, .w-snow, .w-fog, .w-flash, .live-map.is-w-drizzle .w-rain { animation: none; } }
@media (max-width: 1000px) {
  .center-inner { height: auto; }
  .map-stage { container-type: normal; display: block; }
  .live-map { width: min(100%, 75vh); margin: 0 auto; }
}

/* ----- Panel de mando (sobre el mapa) ----- */
.control {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px 18px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.control > * { min-width: 0; }
.control-top {
  display: flex;                 /* siempre en una línea: Sandiás a la izquierda, el momento a la derecha */
  align-items: center;
  gap: 18px;
}
.control-top .place { flex: 1 1 140px; }
.control-right { display: flex; align-items: center; gap: 14px; margin-left: auto; min-width: 0; }
.control-right .moment { min-width: 0; }
.control-right .live-strip { flex: none; }
.control-right .moment-day, .control-right .moment-sub { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.place-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* en paneles estrechos la pastilla EN DIRECTO se reduce al punto y al «hace N s» */
@container (max-width: 520px) {
  .live-strip { padding: 7px 10px; }
  .live-pill { font-size: 0; gap: 0; }
  .live-pill .live-dot { width: 8px; height: 8px; }
  .moment-sub { display: none; }
}
.place { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.place-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-name { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
/* tira del clima */
.weather-now {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px;
}
/* icono del tiempo: de línea, en un círculo de su color (sin emojis) */
.wn-emoji { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--cream); background: color-mix(in srgb, currentColor 12%, transparent); }
.wn-emoji svg { width: 26px; height: 26px; }
/* habitante sin retrato: su inicial */
.av-initial { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--display); font-weight: 800; color: var(--cream-dim); }
.wn-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wn-label { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf); white-space: nowrap; }
.wn-info {
  width: 15px; height: 15px; border-radius: 50%; padding: 0;
  font-family: var(--serif); font-style: italic; font-size: 11px; line-height: 1;
  color: var(--cream); background: transparent; border: 1px solid var(--cream-faint); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.wn-info:hover, .wn-info[aria-expanded="true"] { border-color: var(--leaf); color: var(--leaf); }
.wn-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wn-temp { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wn-desc { font-size: 13.5px; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wn-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 0; padding: 10px 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--cream-dim);
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); border-radius: 12px;
  animation: rise .25s var(--ease-out) both;
}
.wn-note::before {
  content: 'i'; flex: none; width: 18px; height: 18px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1;
  color: var(--bg); background: var(--leaf);
}
.wn-chips { display: flex; gap: 6px; margin-left: auto; flex: none; }
.wn-chips span {
  font-family: var(--mono); font-size: 11px; color: var(--cream-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.moment { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; min-width: 0; }
.moment-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-faint); white-space: nowrap;
}
.moment.is-past .moment-eyebrow { color: var(--gold); }
.moment-day { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; }
.moment-sub { font-family: var(--mono); font-size: 11.5px; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(280px, 100%); }
.moment-sub b { color: var(--cream); font-weight: 500; }

/* cifras del día seleccionado */
.control-stats { display: grid; grid-template-columns: 1fr 0.8fr 1.5fr; gap: 8px; }
/* en pantallas bajas el mapa manda: las cifras del día se ocultan */
/* el panel de mando se adapta a su propio ancho */
.control { container-type: inline-size; }
@container (max-width: 640px) {
  .control-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-stats .cs-wide { grid-column: 1 / -1; }
  .wn-chips { display: none; }
}
@container (max-width: 440px) {
  .control-stats { display: none; }
  .place-name { font-size: 24px; }
}
.cs {
  display: grid; grid-template-rows: auto auto; align-items: center;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-width: 0;
}
.cs b { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.live-strip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(255, 83, 72, 0.08);
  border: 1px solid rgba(255, 83, 72, 0.3);
  border-radius: 14px;
  padding: 9px 14px;
  white-space: nowrap;
}
.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--flesh);
}
/* ancho fijo: al pasar de «ahora» a «hace 12 s» la caja no cambia de tamaño */
.live-updated { font-family: var(--mono); font-size: 10.5px; color: var(--cream-faint); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center; line-height: 1.2; }
.live-strip.is-error { background: rgba(239, 182, 68, 0.08); border-color: rgba(239, 182, 68, 0.3); }
.live-strip.is-error .live-pill { color: var(--gold); }

/* ----- Ventana de susurros (de noche, mientras duermen) ----- */
.whisper-banner {
  display: flex; align-items: center; gap: 16px;   /* sin salto: el texto se parte en dos líneas y el botón se queda a la derecha */
  background: #3B2E6E;
  border: 1px solid #6A57B0;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px; color: rgba(244, 237, 222, 0.78);
  animation: rise .4s var(--ease-out) both;
}
.whisper-banner .wb-text { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.whisper-banner .wb-text b { color: var(--cream); font-weight: 600; }
/* «ZzZzZ» de durmiendo, en pixel (mono) y escalonado; cada letra respira a su ritmo */
.wb-zzz {
  flex: none; display: inline-flex; align-items: flex-end; gap: 1px;
  font-family: var(--mono); font-weight: 500; color: #D6CCF5; line-height: 1;
}
.wb-zzz i { font-style: normal; display: inline-block; animation: zzz 3s ease-in-out infinite; }
.wb-zzz i:nth-child(1) { font-size: 18px; animation-delay: 0s; }
.wb-zzz i:nth-child(2) { font-size: 12px; transform: translateY(-9px); animation-delay: .3s; }
.wb-zzz i:nth-child(3) { font-size: 17px; transform: translateY(-3px); animation-delay: .6s; }
.wb-zzz i:nth-child(4) { font-size: 11px; transform: translateY(-12px); animation-delay: .9s; }
.wb-zzz i:nth-child(5) { font-size: 16px; transform: translateY(-6px); animation-delay: 1.2s; }
@keyframes zzz { 50% { opacity: 0.35; } }
.whisper-banner .wb-cta {
  font-family: var(--mono); font-size: 12px; color: #16240F;
  background: var(--cream); border-radius: 999px; padding: 7px 14px; white-space: nowrap;
  transition: transform .2s var(--ease-out);
}
.whisper-banner .wb-cta:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .wb-zzz i { animation: none; } }
/* mientras escriben el diario: el lápiz en lugar del ZzZ, un violeta más apagado */
.whisper-banner.is-writing { background: #2F2856; border-color: #54468F; }
.wb-pen { flex: none; display: inline-grid; place-items: center; width: 34px; color: #D6CCF5; }
.wb-pen .ci-pen { width: 24px; height: 24px; animation: pen-write 1.4s ease-in-out infinite; transform-origin: 20% 80%; }
@media (prefers-reduced-motion: reduce) { .wb-pen .ci-pen { animation: none; } }
.source-chip.is-whisper .dot { background: #B7A6E8; box-shadow: 0 0 8px #B7A6E8; animation: pulse 2s infinite; }

/* ----- Línea de tiempo: filas etiquetadas con controles segmentados ----- */
.control-row { display: flex; align-items: center; gap: 12px; }   /* sin salto: los botones se quedan en la fila de HORA */
.row-label {
  flex: none; width: 34px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-faint);
}
.seg {
  display: inline-flex; gap: 2px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  max-width: 100%;
}
.day-chips { overflow-x: auto; scrollbar-width: none; }
.block-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }   /* nunca en dos líneas: si no cabe, se desliza */
.day-chip, .block-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--cream-dim);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s var(--ease-out);
}
.day-chip { min-width: 38px; justify-content: center; padding: 6px 11px; }
.day-chip:hover, .block-chip:hover { color: var(--cream); background: rgba(244, 237, 222, 0.06); }
.day-chip.is-active { background: var(--flesh); color: #fff; font-weight: 500; box-shadow: 0 4px 14px rgba(255, 83, 72, 0.35); }
.block-chip.is-active { background: var(--card-2); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(239, 182, 68, 0.55); }
.seg-note { font-family: var(--mono); font-size: 11.5px; color: var(--cream-faint); padding: 6px 12px; }
.timeline-actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
/* si no cabe todo, los botones pasan a su versión corta antes que saltar de línea */
.timeline-actions .short { display: none; }
@container (max-width: 660px) {
  .timeline-actions .full { display: none; }
  .timeline-actions .short { display: inline; }
  .block-chip { padding: 6px 10px; }
}
@container (max-width: 520px) {
  .map-play, .live-follow { font-size: 11px; padding: 6px 10px; }
  .block-chip { padding: 6px 8px; font-size: 11.5px; }
}

.map-play, .live-follow {
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.map-play {
  color: var(--leaf);
  background: transparent;
  border: 1px solid rgba(82, 199, 118, 0.4);
}
.map-play:hover { border-color: var(--leaf); background: rgba(82, 199, 118, 0.08); }
.map-play.is-playing { color: var(--gold); border-color: rgba(239, 182, 68, 0.5); }
.live-follow {
  color: #fff;
  background: var(--flesh);
  border: 1px solid var(--flesh);
  animation: rise .3s var(--ease-out) both;
}
.live-follow:hover { background: var(--flesh-deep); }

@media (max-width: 1280px) {
  .moment-day { font-size: 17px; }
  .place-name { font-size: 24px; }
  .control-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .control { padding: 14px 14px 12px; }
  .control-top { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .place { display: none; }
  .control-stats { display: none; }
  .live-strip { grid-column: 1 / -1; justify-content: center; gap: 2px; padding: 7px 12px; }
  .moment-sub { max-width: 180px; }
  .row-label { display: none; }
}

/* ============================================================
   HABITANTES — lista compacta
   ============================================================ */
.villager-grid { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.villager-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 10px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: background .2s, border-color .2s;
}
.villager-card:hover { background: var(--card-2); border-color: var(--line); }
.villager-card.is-thinking { border-color: rgba(255, 83, 72, 0.45); background: rgba(255, 83, 72, 0.06); }
.avatar {
  width: 44px; height: 44px;
  border-radius: 11px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 2px; }
.vc-id { min-width: 0; display: grid; gap: 2px; }
.vc-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap; overflow: hidden;
}
.vc-role { margin: 0; font-family: var(--mono); font-size: 10.5px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-loc { margin: 0; font-size: 11.5px; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.villager-card.is-thinking .avatar { border-color: var(--flesh); box-shadow: 0 0 0 3px rgba(255, 83, 72, 0.25); animation: livePulse 1.6s infinite; }
/* monedas: disco dorado dibujado en CSS */
.coin {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: -1px; margin-right: 4px;
  background: radial-gradient(circle at 35% 35%, #FFE08A, var(--gold) 60%, #B8862E);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.vc-coins { flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--cream); }
.vc-coins .delta { font-size: 10px; margin-left: 4px; }
.delta.up { color: var(--leaf); }
.delta.down { color: var(--flesh); }
/* dos barras con icono, como en los videojuegos y con el acabado de la moneda: vida roja (corazón), comida naranja (muslo),
   batería verde (el robot); del 30 % para abajo parpadean, como la vida baja en un juego. La higiene no se muestra de momento */
.vc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 5px; }
.vs { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 6px; min-width: 0; color: var(--cream-faint); }
/* flecha de cambio (▲ sube, ▼ baja la vida): se ve un minuto y se apaga; la barra da un destello */
.vd { font-family: var(--mono); font-size: 10px; line-height: 1; animation: vd-fade 60s linear forwards; animation-delay: var(--age, 0s); }
.vs .vd { margin-left: -2px; }
.mb-vital b .vd { margin-right: 6px; font-size: 11px; }
@keyframes vd-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.vs.is-up i, .vs.is-down i, .mb-vital.is-up .bar-track, .mb-vital.is-down .bar-track { animation: vd-flash 1.6s ease-out both; animation-delay: var(--age, 0s); }
@keyframes vd-flash { 0%, 30% { box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 0 12px rgba(255,255,255,.35); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.vital-ico { display: block; width: 100%; height: auto; overflow: visible; }
.vs i { display: block; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; }
.vs i::after { content: ''; position: absolute; inset: 0; width: var(--v, 0%); border-radius: 3px; background: currentColor; transition: width .6s var(--ease-out); }
.vs.health { color: var(--flesh); }
.vs.hunger { color: var(--orange); }
.vs.hygiene { color: var(--sky); }
.vs.battery { color: var(--leaf); }
@keyframes vital-low { 50% { opacity: .3; } }
.vs.is-crit .vital-ico, .vs.is-crit i::after, .mb-vital.is-crit .vital-ico, .mb-vital.is-crit .bar-fill { animation: vital-low 1s steps(1, end) infinite; }
.vs.is-empty .vital-ico, .mb-vital.is-empty .vital-ico { animation: none; filter: grayscale(1) brightness(.62); }
.is-empty .vi-level { display: none; }   /* batería vacía: sin carga dentro */
@media (prefers-reduced-motion: reduce) { .vs.is-crit .vital-ico, .vs.is-crit i::after, .mb-vital.is-crit .vital-ico, .mb-vital.is-crit .bar-fill { animation: none; } }

/* barras grandes (ficha) */
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 10px; }
.bar-ico { font-size: 11px; text-align: center; }
.bar-track { height: 6px; background: rgba(0, 0, 0, 0.35); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease-out); }
.bar-fill.health { background: var(--flesh); }
.bar-fill.hunger { background: var(--orange); }
.bar-fill.hygiene { background: var(--sky); }
.bar-fill.battery { background: var(--leaf); }
.bar-val { font-family: var(--mono); font-size: 10.5px; color: var(--cream-faint); text-align: right; }

/* ============================================================
   CRÓNICA
   ============================================================ */
.chronicle-head { display: flex; flex-direction: column; gap: 10px; }
.chronicle-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.type-chips { display: flex; gap: 5px; }
.type-chip {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cream-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition: all .2s;
}
.type-chip:hover { border-color: var(--line-strong); color: var(--cream); }
.type-chip.is-active { background: var(--bg-2); border-color: var(--gold); color: var(--gold); }
#agent-filter {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cream-dim);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 30px 5px 12px;
  flex: 1 1 110px;
  min-width: 0;
  /* flecha propia, dentro de la caja */
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B8A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  cursor: pointer;
}
#agent-filter:hover { border-color: var(--line-strong); color: var(--cream); }
#agent-filter:focus { outline: none; border-color: var(--gold); }

/* buscador de la crónica */
.feed-searchbox { position: relative; flex: 1 1 100%; }
.feed-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--cream-faint); pointer-events: none; }
.feed-search {
  width: 100%; font-family: var(--body); font-size: 13px; color: var(--cream);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 34px 7px 34px;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.feed-search::-webkit-search-cancel-button { display: none; }
.feed-search::placeholder { color: var(--cream-faint); }
.feed-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(239, 182, 68, 0.14); }
.feed-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--cream-faint); cursor: pointer; display: grid; place-items: center; }
.feed-clear svg { width: 14px; height: 14px; }
.feed-clear:hover { color: var(--cream); background: rgba(255, 255, 255, 0.06); }
mark.hl { background: rgba(239, 182, 68, 0.28); color: inherit; border-radius: 3px; padding: 0 1px; }
.feed { padding: 12px; display: grid; gap: 8px; align-content: start; }
.feed > * { min-width: 0; }   /* nada de dentro puede ensanchar la columna de la crónica */
.feed-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  animation: rise .4s var(--ease-out) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.fi-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fi-where { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--gold); text-align: right; }
.fi-time { font-family: var(--mono); font-size: 11px; color: var(--cream-faint); }
.fi-agent {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 13px; font-weight: 700;
}
.fi-agent .mini-avatar {
  width: 20px; height: 20px; border-radius: 6px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; background: var(--card-2); border: 1px solid var(--line);
}
.fi-agent .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.fi-badge {
  display: inline-flex; align-items: center; align-self: center;
  font-family: var(--mono);
  font-size: 10px; line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 4px 7px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.fi-badge.dialogo { color: var(--sky); border-color: rgba(111, 182, 217, 0.35); }
.fi-badge.viaje { color: var(--gold); border-color: rgba(239, 182, 68, 0.35); }
.fi-badge.plan { color: var(--leaf); border-color: rgba(82, 199, 118, 0.35); }
.fi-badge.sueno { color: #B7A6E8; border-color: rgba(183, 166, 232, 0.35); }
.fi-badge.piensa { color: #B7A6E8; border-color: rgba(183, 166, 232, 0.35); border-style: dashed; }
.fi-badge.gm { color: var(--flesh); border-color: rgba(255, 83, 72, 0.35); }
.fi-text { margin: 0; font-size: 13.5px; color: var(--cream-dim); line-height: 1.5; }
.fi-dialogue {
  margin: 8px 0 0;
  font-family: var(--read);
  font-style: normal;
  font-size: 14.5px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.25);
  border-left: 2px solid var(--sky);
  border-radius: 0 10px 10px 0;
  padding: 8px 12px;
  line-height: 1.5;
}
.fi-route {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
}
.fi-deltas { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.fi-delta {
  font-family: var(--mono);
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 9px;
  background: rgba(0, 0, 0, 0.25);
}
.fi-details { margin-top: 8px; }
.fi-details summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--cream-faint);
}
.fi-details p { margin: 8px 0 0; font-size: 13px; color: var(--cream-dim); line-height: 1.55; }
.feed-empty {
  text-align: center;
  color: var(--cream-faint);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  padding: 40px 0;
}


/* ============================================================
   MAPA — edificios, fichas e interiores
   ============================================================ */
.map-node {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, 0);
}
.map-node.is-left { transform: translate(-12%, 0); text-align: left; }
.map-node.is-right { transform: translate(-62%, 0); text-align: right; }   /* pegado al borde pero sin invadir al vecino de la izquierda */
.map-node .node-name { white-space: nowrap; }
.map-node.is-left .node-name, .map-node.is-right .node-name { white-space: nowrap; }
.map-node.is-side-right { transform: translate(0, -50%); text-align: left; }
.map-node.is-side-left { transform: translate(-100%, -50%); text-align: right; }
.map-node.is-wrap .node-name { white-space: normal; max-width: 112px; line-height: 1.3; }
.map-node.x {
  text-align: center;
  width: 170px;
  pointer-events: none;
}
.node-hit {
  pointer-events: auto;
  display: inline-flex;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.map-node .node-name {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(11, 31, 18, 0.78);
  border: 1px solid rgba(244, 237, 222, 0.15);
  border-radius: 999px;
  padding: 3px 9px;
  margin: 2px 0 0;
  transition: border-color .2s, color .2s;
}
.node-hit:hover .node-name { border-color: var(--gold); color: var(--gold); }

/* ----- Interior de edificio ----- */
.int-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.int-head .ih-emoji { font-size: 44px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)); }
.interior-scene {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  /* Sala de respaldo: pared arriba, suelo de madera abajo */
  background:
    linear-gradient(180deg, #23402c 0%, #1c3524 34%, transparent 34%),
    repeating-linear-gradient(90deg, #59452e 0 34px, #4e3c27 34px 36px, #55422c 36px 70px),
    #55422c;
}
.int-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.int-watermark {
  position: absolute;
  top: 6%;
  right: 5%;
  font-size: 58px;
  opacity: 0.4;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.int-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: flex-end;
  justify-content: center;
  align-content: flex-end;
  padding: 16px 20px 18px;
}
.int-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(244, 237, 222, 0.85);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  margin: 0 0 30px;
}
.int-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  animation: idleBob 2.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes idleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.int-avatar {
  width: 64px; height: 80px;
  display: flex; align-items: flex-end; justify-content: center;
  font-size: 40px;
  transition: transform .2s var(--ease-out);
}
.int-char:hover .int-avatar { transform: scale(1.1); }
.int-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.4));
}
.int-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--cream);
  background: rgba(11, 31, 18, 0.8);
  border-radius: 999px;
  padding: 2px 8px;
}
/* luz de los interiores según la hora, como el mapa; los vecinos quedan por encima del tinte */
.interior-scene::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: transparent; transition: background 1s ease; }
.interior-scene.is-dawn::after { background: rgba(255, 214, 170, 0.3); }
/* casa con la luz encendida (de noche, con alguien dentro): luz cálida de lámpara, los vecinos con sus colores */
.interior-scene.is-lit::after { background: radial-gradient(90% 80% at 50% 35%, rgba(255, 214, 150, 0.16), rgba(120, 80, 60, 0.28)); }
.interior-scene.is-dusk::after { background: rgba(255, 168, 96, 0.38); }
.interior-scene.is-night::after { background: rgba(78, 90, 168, 0.55); }
.interior-scene.is-night.is-late::after { background: rgba(18, 24, 72, 0.92); }
/* la plaza es exterior: de noche, cielo y suelo de noche de verdad */
.interior-scene.is-outdoor.is-night::after { background: rgba(40, 50, 120, 0.8); }
.interior-scene.is-outdoor.is-dusk::after { background: rgba(240, 140, 90, 0.5); }
.interior-scene .int-floor { z-index: 2; }
.interior-scene.is-dusk .int-avatar img { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.4)) brightness(.86) sepia(.18); }
.interior-scene.is-night .int-avatar img { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.4)) brightness(.58) saturate(.6); }
.interior-scene.is-night.is-late .int-avatar img { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.4)) brightness(.42) saturate(.5); }
.interior-scene.is-night .int-empty { color: rgba(244, 237, 222, 0.92); }
/* pueblo de fuera del mapa, de noche: cielo con estrellas, monte y los vecinos durmiendo */
.village-scene {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #F4EDDE 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 9%, #F4EDDE 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 47% 22%, #F4EDDE 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #F4EDDE 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 20%, #F4EDDE 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 7%, #F4EDDE 50%, transparent 51%),
    radial-gradient(circle at 84% 22%, #F4EDDE 0 14px, transparent 15px),
    radial-gradient(120% 70% at 30% 100%, #1E3A26 58%, transparent 59%),
    radial-gradient(110% 60% at 85% 100%, #183020 60%, transparent 61%),
    linear-gradient(180deg, #121A3A 0%, #24305E 70%, #2C3A66 100%);
}
/* el dibujo ya trae su luz (noche o día): solo se tiñe al amanecer y al atardecer, y de madrugada se oscurece algo más */
.village-scene.is-day::after, .village-scene.is-night:not(.is-late)::after { display: none; }
.village-scene.is-late::after { background: rgba(40, 48, 110, 0.55); }
.int-char.is-asleep { position: relative; animation: none; }
.int-char.is-asleep .int-avatar img { filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.4)) brightness(.55) saturate(.6); }
.int-zzz { position: absolute; top: -10px; right: 2px; display: inline-flex; z-index: 1; }
.village-note { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--cream-dim); }
.village-note strong { color: var(--cream); font-weight: 600; }
/* casa cerrada de noche: cartel de madera colgado, con la hora a la que vuelve a abrir */
.int-closed { align-self: center; margin: 0 auto 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 30px 14px; border-radius: 10px; background: #3A2A1C; border: 3px solid #22160E; box-shadow: inset 0 0 0 2px rgba(239, 182, 68, .25), 0 10px 24px rgba(0, 0, 0, .45); text-align: center; transform: rotate(-2deg); }
.int-closed b { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: .02em; text-transform: uppercase; color: var(--gold); line-height: 1; }
.int-closed span { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--cream); }
.int-closed small { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--cream-dim); }
@media (max-width: 720px) { .int-closed { padding: 12px 20px 10px; } .int-closed b { font-size: 26px; } }
/* el robot de noche: quieto, enchufado a su poste de carga */
.int-char.is-charging { position: relative; animation: none; margin-right: 54px; }
.int-dock { position: absolute; left: calc(50% + 46px); bottom: 26px; width: 20px; height: 46px; background: #5E6874; border: 2px solid #22202A; border-radius: 3px 3px 1px 1px; box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18), 0 5px 3px rgba(0, 0, 0, .35); }
.int-dock::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -4px; height: 4px; background: #22202A; border-radius: 1px; }
.int-dock i { position: absolute; left: 3px; right: 3px; top: 4px; height: 12px; background: #0E2A18; border: 1px solid #22202A; overflow: hidden; }
.int-dock i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #52C776; transform-origin: left; animation: chargeFill 3.2s steps(6, end) infinite; }
.int-cable { position: absolute; left: calc(50% + 6px); bottom: 26px; width: 46px; height: 26px; overflow: visible; pointer-events: none; }
.int-cable path { fill: none; stroke: #22202A; stroke-width: 3; stroke-linecap: round; }
.interior-scene.is-late .int-cable path { stroke: #5A6170; }
.int-batt { position: absolute; left: 50%; top: -22px; translate: -50% 0; width: 22px; height: 22px; color: #52C776; filter: drop-shadow(0 0 6px rgba(82, 199, 118, .55)); animation: chargePulse 1.6s ease-in-out infinite; }
.int-batt svg { width: 100%; height: 100%; display: block; }
.int-batt .batt-fill { transform-box: fill-box; transform-origin: left; animation: chargeFill 3.2s steps(6, end) infinite; }
@keyframes chargeFill { from { transform: scaleX(0.15); } to { transform: scaleX(1); } }
@keyframes chargePulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (max-width: 720px) {
  .int-avatar { width: 54px; height: 54px; font-size: 26px; }
  .int-floor { gap: 8px 12px; }
}
/* Muñequitos del mapa: solo se ven mientras caminan entre edificios */
.map-token {
  position: absolute;
  width: 32px; height: 40px;
  background: none;
  border: none;
  padding: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition:
    left 1.1s var(--ease-out),
    top 1.1s var(--ease-out),
    transform 1.1s var(--ease-out),
    opacity .3s ease;
}
.map-token.is-walking { opacity: 1; z-index: 6; }
/* puerta abierta mientras alguien entra o sale */
.door-fx { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .14s steps(2, end); }
.door-fx img { position: absolute; height: auto; image-rendering: pixelated; }
.door-fx.is-open { opacity: 1; }
.map-token.is-walking img { transition: transform .15s; }
.map-token.no-trans { transition: none !important; }
.map-token .mt-inner {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 100%;
  font-size: 22px;
}
.map-token img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}
.map-token.is-walking .mt-inner { animation: walkBob .42s ease-in-out infinite; }
/* los vecinos que caminan también reciben la luz de la hora: de noche, en penumbra */
.live-map.is-dusk .map-token img { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35)) brightness(.86) sepia(.18); }
.live-map.is-night .map-token img { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35)) brightness(.55) saturate(.6); }
.live-map.is-night.is-late .map-token img { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35)) brightness(.42) saturate(.5); }
.map-token.face-left img { transform: scaleX(-1); }
@keyframes walkBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-3deg); }
  75% { transform: translateY(-2px) rotate(3deg); }
}

/* contador de vecinos dentro */
.node-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #16240F;
  background: var(--gold);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
}
/* de noche: carteles de los pueblos de fuera del mapa donde viven los vecinos;
   van sobre su camino, en el borde, como una señal de carretera */
.map-exit { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); background: rgba(11, 31, 18, 0.86); border: 1px solid rgba(183, 166, 232, 0.45); border-radius: 999px; padding: 2px 4px 2px 8px; white-space: nowrap; pointer-events: auto; animation: exitIn .6s ease both; }
.map-exit { cursor: pointer; transition: border-color .2s, color .2s; }
.map-exit:hover { border-color: #B7A6E8; color: #E4DCFF; }
.map-exit[hidden] { display: none; }
.map-exit .ci-zzz { display: inline-flex; align-items: flex-end; height: 12px; }
/* de camino a casa (de que se despiden a las 21:00): pasos en vez de zZz */
.map-exit .mx-steps { display: none; width: 13px; height: 13px; color: var(--gold); }
.map-exit.is-camino .ci-zzz { display: none; }
.map-exit.is-camino .mx-steps { display: block; }
.map-exit.is-camino { border-color: rgba(239, 182, 68, .45); }
.map-exit.is-camino b { background: var(--gold); color: #16240F; }
.map-exit.is-camino .mx-faces img { filter: none; }
/* se ha ido a casa antes de las 21:00 y ya ha llegado: una casa, sin animación */
.map-exit .mx-house { display: none; width: 12px; height: 12px; color: var(--gold); }
.map-exit.is-encasa .ci-zzz { display: none; }
.map-exit.is-encasa .mx-house { display: block; }
.map-exit.is-encasa { border-color: rgba(239, 182, 68, .45); }
.map-exit.is-encasa b { background: var(--gold); color: #16240F; }
.map-exit.is-encasa .mx-faces img { filter: none; }
.map-exit .mx-steps .f1 { animation: stepA 1s steps(1) infinite; }
.map-exit .mx-steps .f2 { animation: stepA 1s steps(1) infinite .5s; }
@keyframes stepA { 0% { opacity: 1; } 50% { opacity: .25; } }
.map-exit b { font-size: 10px; font-weight: 700; color: #1B1640; background: #B7A6E8; border-radius: 999px; padding: 1px 6px; }
.map-exit .mx-faces { display: inline-flex; }
.map-exit .mx-faces:empty { display: none; }
.map-exit .mx-faces img { width: 13px; height: 16px; object-fit: contain; image-rendering: pixelated; margin-left: -4px; filter: brightness(.75) saturate(.6); }
.map-exit .mx-faces img:first-child { margin-left: 0; }
.map-exit.is-top { top: 6px; left: 50%; translate: -50% 0; }
.map-exit.is-bottom { bottom: 6px; left: 50%; translate: -50% 0; }
.map-exit.is-right { right: 6px; top: 50%; translate: 0 -50%; }
.map-exit.is-left { left: 6px; top: 50%; translate: 0 -50%; }
@keyframes exitIn { from { opacity: 0; } to { opacity: 1; } }
/* mapa pequeño (móvil): el cartel se queda en zZz + pueblo + número, sin caras */
@media (max-width: 720px) {
  .map-exit { gap: 4px; padding: 1px 3px 1px 6px; font-size: 9px; }
  .map-exit .mx-faces { display: none; }
  .map-exit b { font-size: 9px; padding: 0 5px; }
  .map-exit.is-left, .map-exit.is-right { translate: 0 1px; }
}
/* de noche: cuántos duermen en cada casa */
.node-count.is-sleep { display: inline-flex; align-items: center; gap: 3px; color: #1B1640; background: #B7A6E8; }
.node-count.is-sleep svg { width: 9px; height: 9px; }
.node-count[hidden] { display: none; }


@media (max-width: 720px) {
  .map-node { width: 110px; }
  .map-node .node-name { font-size: 8.5px; padding: 2px 7px; }
  .map-token { width: 28px; height: 28px; }
  .map-token .mt-inner { font-size: 15px; }
}

/* ============================================================
   RUMORES Y NOTICIAS DEL DÍA (bajo el escenario)
   ============================================================ */
.contents { display: contents; }
.daily { padding: 56px 0 24px; border-top: 1px solid var(--line); margin-top: 32px; }
.daily-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.daily-head h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 10px;
}
.daily-day { color: var(--cream); font-weight: 800; }
.daily-head .section-sub { font-size: 15px; }
.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf);
  margin: 0 0 16px;
}
.daily-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.news-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  min-width: 0;
  transition: transform .25s var(--ease-out), border-color .25s;
}
.news-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.news-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.news-tag.is-local { color: var(--leaf); }
.news-tag.is-nacional { color: var(--gold); }
.news-tag.is-internacional { color: var(--sky); }
.news-tag.is-podcast { color: var(--flesh); }
.news-card h3 { margin: 2px 0 0; font-family: var(--display); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.news-card p { margin: 0; font-size: 13.5px; color: var(--cream-dim); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.news-src { margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--cream-faint); }
.news-empty { grid-column: 1 / -1; text-align: center; font-family: var(--serif); font-style: italic; color: var(--cream-faint); padding: 24px 0; }
/* tarjeta del episodio */
.news-card.is-podcast { padding: 12px 20px 20px; border-color: rgba(255, 83, 72, 0.25); }
.ep-thumb { display: block; position: relative; margin: 0 -8px 10px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.ep-thumb:hover img { transform: scale(1.04); }
.ep-thumb::after {
  content: '▶';
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--flesh); color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ep-link { color: var(--cream); font-size: 13px; border-bottom: 1px solid var(--flesh); align-self: flex-start; margin-top: auto; }
@media (max-width: 1100px) { .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .daily-grid { grid-template-columns: 1fr; } .daily { padding-top: 48px; } }

/* ============================================================
   QUÉ ES ESTO — presentación, estadísticas y accesos
   ============================================================ */
.intro { text-align: center; max-width: 780px; margin: 0 auto; padding: 72px 0 64px; }
.intro h1 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0 0 20px;
}
.intro h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--flesh); }
.lede { font-size: 17.5px; color: var(--cream-dim); margin: 0 auto 36px; max-width: 62ch; }
.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  /* seis cifras: la fila sale del ancho del texto (780px) y llega a 1000px, centrada */
  width: min(1000px, calc(100vw - 48px));
  margin: 0 0 36px 50%;
  translate: -50% 0;
}
.stat {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 10px 16px;
  overflow: hidden;
  transition: transform .25s var(--ease-out), border-color .25s;
}
.stat::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 60%;
  background: radial-gradient(60% 80% at 50% 0%, rgba(239, 182, 68, 0.14), transparent 70%);
  pointer-events: none;
}
.stat:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.stat:nth-child(1)::before { background: radial-gradient(60% 80% at 50% 0%, rgba(82, 199, 118, 0.16), transparent 70%); }
.stat:nth-child(2)::before { background: radial-gradient(60% 80% at 50% 0%, rgba(255, 83, 72, 0.16), transparent 70%); }
.stat:nth-child(4)::before { background: radial-gradient(60% 80% at 50% 0%, rgba(111, 182, 217, 0.16), transparent 70%); }

.stat-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; color: var(--cream-dim);
  background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.stat-ico svg { width: 22px; height: 22px; overflow: visible; display: block; }
.stat:nth-child(1) .stat-ico { color: var(--leaf); }
.stat:nth-child(2) .stat-ico { color: var(--flesh); }
.stat:nth-child(3) .stat-ico { color: var(--gold); }
.stat:nth-child(4) .stat-ico { color: var(--sky); }
.stat:nth-child(5) .stat-ico { color: var(--gold); }
.stat:nth-child(6) .stat-ico { color: var(--gold); }
.stat:nth-child(6)::before { background: radial-gradient(60% 80% at 50% 0%, rgba(239, 182, 68, 0.2), transparent 70%); }
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cream-faint);
}
@media (max-width: 720px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: auto; margin-left: 0; translate: none; } .stat { padding: 14px 6px 12px; } .stat-ico { width: 38px; height: 38px; margin-bottom: 8px; } .stat-ico svg { width: 18px; height: 18px; } }

.intro-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-size: 15px; font-weight: 600;
  border-radius: 999px; padding: 13px 24px;
  transition: all .2s var(--ease-out);
}
.btn-primary { background: var(--flesh); color: #fff; box-shadow: 0 10px 30px rgba(255, 83, 72, 0.3); }
.btn-primary:hover { background: var(--flesh-deep); transform: translateY(-2px); }
.btn-ghost { color: var(--cream); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.intro-fine { margin: 22px auto 0; font-size: 13.5px; color: var(--cream-faint); max-width: 52ch; }
@media (max-width: 600px) { .intro { padding: 56px 0 48px; } }

.section-head { margin-bottom: 18px; }
.section-head h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(5, 14, 8, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  max-width: 680px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 30px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  animation: rise .35s var(--ease-out) both;
  scrollbar-width: thin;
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--cream-dim);
  border-radius: 10px;
  width: 34px; height: 34px;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s;
}
.modal-close:hover { color: var(--cream); border-color: var(--flesh); }

.mb-head { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.mb-avatar {
  width: 96px; height: 96px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--card);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.mb-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 4px; }
.mb-name { font-family: var(--display); font-size: 28px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.mb-role { font-family: var(--mono); font-size: 13px; color: var(--gold); margin: 4px 0 8px; }
.mb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mb-chip {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--cream-dim);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}
.mb-section-title {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 22px 0 10px;
}
/* ficha: constantes en dos columnas bajo la cabecera; textos largos en una sola tipografía */
.mb-vitals {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
  margin: 4px 0 6px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.mb-vital { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; color: var(--leaf); }
.mb-vital.health { color: var(--flesh); }
.mb-vital.hunger { color: var(--orange); }
.mb-vital.battery { color: var(--leaf); }
.mb-vital b { min-width: 42px; font-family: var(--mono); font-weight: 500; font-size: 12.5px; color: var(--cream); text-align: right; white-space: nowrap; }
.mb-vital.is-crit b { color: var(--flesh); }
.mb-vital .bar-track { height: 8px; }
.mb-text { font-size: 15.5px; line-height: 1.65; color: var(--cream-dim); margin: 0; max-width: 66ch; }
.mb-muted { color: var(--cream-faint); font-style: italic; }
@media (max-width: 520px) { .mb-vitals { grid-template-columns: 1fr; } }
.mb-feed { display: grid; gap: 8px; }
.mb-foot {
  margin: 26px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--cream-faint);
}
.mb-foot a { color: var(--cream); border-bottom: 1px solid var(--flesh); margin-left: 4px; white-space: nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 32px 0 40px; }
.footer-inner { display: flex; justify-content: center; text-align: center; gap: 16px; flex-wrap: wrap; }
.footer p { margin: 0; font-size: 14px; color: var(--cream-dim); }
.footer a { border-bottom: 1px solid var(--flesh); }
.footer-fine { font-family: var(--mono); font-size: 12px; color: var(--cream-faint); }


/* ============================================================
   DIRECTO
   ============================================================ */
.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--flesh); vertical-align: middle;
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 83, 72, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255, 83, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 83, 72, 0); }
}
.live-strip.is-error .live-dot { background: var(--gold); animation: none; }
.day-chip .live-dot, .block-chip .live-dot { width: 6px; height: 6px; margin-left: 4px; }
.day-chip.is-active .live-dot { background: #fff; }
.chronicle-live {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--flesh);
  margin-left: 8px; vertical-align: middle;
}


/* Ahora mismo en el pueblo */
.now-card {
  display: grid; gap: 10px;
  background: rgba(255, 83, 72, 0.06);
  border: 1px solid rgba(255, 83, 72, 0.28);
  border-radius: 14px; padding: 12px 14px;
}
.now-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cream);
}
.now-title { flex-wrap: wrap; }
.now-sub { flex-basis: 100%; margin-left: 16px; font-size: 10px; letter-spacing: 0.06em; text-transform: none; color: var(--cream-faint); font-weight: 400; }
.now-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--line-strong); font-family: var(--mono); font-size: 11px; color: var(--cream-dim); }
.now-next b { color: var(--cream); font-weight: 600; }
.now-next .now-at { color: var(--cream-faint); }
.now-countdown { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.now-next .mini-avatar { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.now-next .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.now-when, .now-turn { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--cream-faint); margin-left: 4px; }
.now-turn { color: #16240F; background: var(--gold); border-radius: 999px; padding: 1px 7px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.now-thinking { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin: 8px 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(239, 182, 68, 0.08); border: 1px solid rgba(239, 182, 68, 0.35); font-size: 13px; color: var(--cream-dim); }
.now-thinking b { color: var(--cream); font-weight: 600; }
.now-what { white-space: nowrap; }
.now-thinking .now-loc { flex: 0 1 auto; margin-left: auto; padding-left: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.now-thinking { min-width: 0; overflow: hidden; }
.now-thinking .mini-avatar, .now-thinking b { flex: none; }
.now-what { flex: none; }   /* si no cabe, se recorta el sitio, no «está pensando» */
.now-thinking .mini-avatar { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.now-thinking .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.think-dots { display: inline-flex; gap: 3px; margin-left: 1px; }
.think-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); animation: think-dot 1.2s ease-in-out infinite; }
.think-dots i:nth-child(2) { animation-delay: 0.2s; }
.think-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes think-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .think-dots i { animation: none; opacity: 0.7; } }
.now-row { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.now-title + .now-row, .now-next + .now-row, #now-thinking-slot + .now-row { border-top: none; padding-top: 0; }
.now-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.now-card > *, .now-row > * { min-width: 0; }
.now-loc { font-family: var(--mono); font-size: 11px; color: var(--gold); }
/* «Ahora mismo»: la acción entera, sin recortar (Luis, 3-oct) */
.now-row .fi-text { overflow-wrap: anywhere; }

/* sucesos recién llegados */
.feed-item.is-new { animation: rise .4s var(--ease-out) both, newFlash 2.6s ease-out both; }
@keyframes newFlash {
  0% { border-color: var(--flesh); box-shadow: 0 0 0 1px var(--flesh), 0 0 22px rgba(255, 83, 72, 0.25); }
  100% { border-color: var(--line); box-shadow: none; }
}

/* sucesos recién llegados */
.feed-item.is-new { animation: rise .4s var(--ease-out) both, newFlash 2.6s ease-out both; }
@keyframes newFlash {
  0% { border-color: var(--flesh); box-shadow: 0 0 0 1px var(--flesh), 0 0 22px rgba(255, 83, 72, 0.25); }
  100% { border-color: var(--line); box-shadow: none; }
}

.int-desc { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--cream-dim); }

/* Va al final para ganar a las reglas del tablero de arriba */
/* Pantallas bajas (portátiles): el tablero deja de encajar en la altura de la
   ventana. El mapa toma todo el ancho de su columna y la página hace scroll;
   crónica y habitantes se quedan fijas a la vista con su propio scroll. */
@media (min-width: 1001px) and (max-height: 900px) {
  .stage { height: auto; min-height: 100vh; overflow: visible; }   /* con overflow:hidden el sticky no funciona */
  /* las columnas laterales miden EXACTAMENTE lo que la central (panel + mapa):
     la altura la fija village.js en --center-h; por dentro hacen scroll */
  .stage-side { align-self: start; height: var(--center-h, auto); }
  .center-inner { height: auto; }
  .map-stage { container-type: normal; display: block; }
  .live-map { width: 100%; }
  .control-stats { display: none; }
}

/* aviso del filtro activo en la crónica */
.feed-filter-note { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: var(--mono); font-size: 11.5px; color: var(--cream-faint); }
.feed-filter-clear { margin-left: auto; background: none; border: 1px solid var(--line-strong); color: var(--cream); border-radius: 999px; padding: 3px 10px; font-family: var(--mono); font-size: 11px; cursor: pointer; }
.feed-filter-clear:hover { border-color: var(--gold); }

/* ── Bocadillos por tipo de habla ─────────────────────────── */
.say { position: relative; margin: 8px 0 0; border-radius: 14px; padding: 9px 13px 10px; }
.say p { margin: 0; font-family: var(--read); font-size: 14.5px; line-height: 1.5; color: var(--cream); }
.say-meta { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 4px; }
.say-meta b { font-weight: 500; color: var(--sky); }
/* a otro vecino: bocadillo azul con rabito */
.say-to { background: rgba(111, 182, 217, 0.10); border: 1px solid rgba(111, 182, 217, 0.3); border-top-left-radius: 4px; margin-left: 10px; }
.say-to::before { content: ''; position: absolute; left: -9px; top: 10px; border: 5px solid transparent; border-right-color: rgba(111, 182, 217, 0.3); border-left: 0; }
.say-to::after { content: ''; position: absolute; left: -7px; top: 11px; border: 4px solid transparent; border-right-color: #1d3128; border-left: 0; }
/* para sí: pensamiento punteado en violeta, con dos burbujitas */
.say-self { background: rgba(183, 166, 232, 0.07); border: 1px dashed rgba(183, 166, 232, 0.4); margin-left: 16px; }
.say-self p { font-style: italic; color: var(--cream-dim); }
.say-self::before, .say-self::after { content: ''; position: absolute; border-radius: 50%; border: 1px dashed rgba(183, 166, 232, 0.4); background: var(--card); }
.say-self::before { width: 9px; height: 9px; left: -12px; top: 12px; }
.say-self::after { width: 5px; height: 5px; left: -19px; top: 20px; }
/* diario de la noche: papel */
.say-diary { background: rgba(239, 182, 68, 0.06); border: 1px solid rgba(239, 182, 68, 0.25); }
.say-diary p { font-size: 14.5px; color: var(--cream-dim); }
/* plan del día: nota verde en tipografía de rótulos */
.fi-with { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--cream); }
.fi-arrow { color: var(--cream-faint); font-weight: 400; }
.fi-with .mini-avatar, .say-meta .mini-avatar { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); vertical-align: -4px; flex: none; }
.fi-with .mini-avatar img, .say-meta .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.say-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.say-lbl { white-space: nowrap; }
.say-plain { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); }
#villagers-sub { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
#villagers-sub b { color: var(--cream); font-weight: 600; }
#villagers-sub .mini-avatar { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); margin-left: 2px; }
#villagers-sub .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* ── Valla publicitaria (antes de las noticias del día) ───── */
.billboard { position: relative; display: block; width: min(960px, 100%); height: 200px; margin: 40px auto 8px; text-decoration: none; }
.bb-post { position: absolute; bottom: 0; width: 12px; height: 62px; background: linear-gradient(90deg, #6b4a2b, #8a6238 45%, #5a3d22); border: 2px solid #2a1a0e; border-top: 0; box-sizing: border-box; }
.bb-post-l { left: 22%; } .bb-post-r { right: 22%; }
.bb-panel {
  position: absolute; left: 0; right: 0; top: 0; bottom: 56px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: #f4ecd8; border: 4px solid #2a1a0e; box-shadow: inset 0 0 0 3px #8a6238, inset 0 0 0 5px #f4ecd8, 0 10px 24px rgba(0, 0, 0, 0.45);
  padding: 14px 32px; transition: transform .2s var(--ease-out);
}
.billboard:hover .bb-panel { transform: translateY(-2px); }
.bb-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #8a6238; }
.bb-title { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.1; color: #1c1a14; }
.bb-cta { font-family: var(--mono); font-size: 12px; color: #b0432f; }
.bb-dolls { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none; }
.bb-doll { position: absolute; bottom: 0; width: 56px; height: 70px; image-rendering: pixelated; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.4)); }
.bb-doll-1 { left: 6%; } .bb-doll-2 { right: 7%; } .bb-doll-3 { right: 14%; bottom: 2px; width: 50px; height: 62px; }
@media (max-width: 720px) {
  .billboard { height: auto; margin-top: 24px; padding-bottom: 58px; }
  .bb-panel { position: relative; inset: auto; height: auto; padding: 12px 16px 14px; gap: 3px; }
  .bb-kicker { font-size: 9.5px; letter-spacing: 0.14em; }
  .bb-title { font-size: 16px; }
  .bb-cta { font-size: 10.5px; }
  .bb-post { height: 58px; width: 10px; }
  .bb-post-l { left: 20%; } .bb-post-r { right: 20%; }
  .bb-dolls { height: 58px; }
  .bb-doll { width: 40px; height: 50px; }
  .bb-doll-1 { left: 3%; } .bb-doll-2 { right: 3%; } .bb-doll-3 { right: 14%; width: 36px; height: 45px; bottom: 1px; }
}

/* notas de «Ahora mismo»: plan del día y sueño */
.now-note { position: relative; border-radius: 12px; padding: 9px 12px 9px; margin-top: 2px; }
.now-note .now-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; }
.now-note p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cream-dim); }
.now-note.is-clamp:not(.is-open) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.now-note.plan { background: rgba(82, 199, 118, 0.06); border: 1px solid rgba(82, 199, 118, 0.22); }
.now-note.plan .now-tag { color: var(--leaf); }
.now-note.plan p { font-family: var(--display); font-weight: 500; color: var(--cream); font-size: 13.5px; }
.now-note.sleep { background: rgba(183, 166, 232, 0.07); border: 1px solid rgba(183, 166, 232, 0.3); }
.now-note.sleep .now-tag { color: #B7A6E8; }
.now-note.sleep .ci-zzz { width: auto; height: auto; }
.now-note.sleep p { font-family: var(--read); font-size: 14px; color: var(--cream-dim); }
.now-more { display: inline-block; margin-top: 4px; background: none; border: 0; padding: 0; font-family: var(--mono); font-size: 11px; color: var(--cream); border-bottom: 1px solid var(--line-strong); cursor: pointer; }
.now-more:hover { border-color: var(--gold); }

/* ── Diario nocturno: hoja de papel ───────────────────────── */
.diary { margin-top: 8px; border-radius: 6px 14px 14px 6px; overflow: hidden; border: 1px solid rgba(183, 166, 232, 0.35); background: #1b2a22; }
.diary-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px 8px 18px; background: rgba(183, 166, 232, 0.10); border-bottom: 1px solid rgba(183, 166, 232, 0.25); }
.diary-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #B7A6E8; }
.diary-day { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--cream); }
.diary-who { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--cream-faint); }
.diary-page {
  position: relative; padding: 14px 18px 14px 26px;
  /* el renglón cae 1 px por debajo de la línea base de cada línea de 26 px */
  background:
    linear-gradient(90deg, rgba(255, 83, 72, 0.35) 0 1px, transparent 1px) 16px 0 / 100% 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(255, 255, 255, 0.09) 25px 26px) 0 9px / 100% 26px repeat-y;
  background-color: rgba(255, 255, 255, 0.025);
}
.diary-page p { margin: 0; font-family: var(--read); font-size: 14.5px; line-height: 26px; color: var(--cream); }
.diary-page p + p { margin-top: 26px; }
.diary-page .diary-empty { font-style: italic; color: var(--cream-faint); }
.diary-details summary { cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--cream-faint); }
.diary-details[open] summary { color: #B7A6E8; }

/* ── Plan del día: nota de agenda con pinza ───────────────── */
.plan-card { position: relative; margin-top: 8px; border-radius: 12px; border: 1px solid rgba(82, 199, 118, 0.35); background: #1c2c22; }
.plan-head { display: flex; align-items: baseline; gap: 10px; padding: 9px 16px 8px; background: rgba(82, 199, 118, 0.08); border-bottom: 1px solid rgba(82, 199, 118, 0.25); }
.plan-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leaf); }
.plan-day { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--cream); }
.plan-text { margin: 0; padding: 12px 16px 14px; font-family: var(--display); font-weight: 500; font-size: 14.5px; line-height: 1.55; color: var(--cream); }
.plan-list { list-style: none; margin: 0; padding: 10px 16px 12px; display: grid; gap: 7px; }
.plan-list li { position: relative; padding-left: 24px; font-family: var(--display); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--cream); }
.plan-list li::before { content: ''; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid rgba(82, 199, 118, 0.7); background: rgba(82, 199, 118, 0.08); }
/* la primera frase (la intención del día) va marcada con el tick verde */
.plan-list li.is-done::before { background: var(--leaf); border-color: var(--leaf); }
.plan-list li.is-done::after { content: ''; position: absolute; left: 4px; top: 6px; width: 3px; height: 6px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ── Conversaciones como chat (filtro «Diálogos») ─────────── */
.thread { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 12px 12px 10px; margin-bottom: 10px; }
.th-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.th-pair { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 13.5px; color: var(--cream); }
.th-pair .mini-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.th-pair .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.th-x { font-style: normal; color: var(--cream-faint); font-weight: 400; margin: 0 2px; }
.th-note, .th-meta { font-family: var(--mono); font-size: 10.5px; color: var(--cream-faint); }
.th-meta { margin-left: auto; white-space: nowrap; }
.th-msgs { display: grid; gap: 8px; }
.th-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.th-msg .mini-avatar { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 2px; }
.th-msg .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.th-bubble { position: relative; padding: 8px 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); min-width: 0; }
.th-bubble b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 3px; }
.th-bubble p { margin: 0; font-family: var(--read); font-size: 14.5px; line-height: 1.5; color: var(--cream); }
.th-bubble time { position: absolute; right: 10px; bottom: 5px; font-family: var(--mono); font-size: 9.5px; color: var(--cream-faint); }
.th-msg.is-a .th-bubble { border-bottom-left-radius: 4px; }
.th-msg.is-b { flex-direction: row-reverse; margin-left: auto; }
.th-msg.is-b .th-bubble { background: rgba(111, 182, 217, 0.12); border-color: rgba(111, 182, 217, 0.35); border-bottom-right-radius: 4px; }
.th-msg.is-b .th-bubble b { color: var(--sky); }
/* por teléfono: icono de smartphone y bocadillo con borde discontinuo (no está delante) */
.by-phone { display: inline-flex; align-items: center; margin-left: 6px; color: var(--gold); vertical-align: -1px; }
.by-phone svg { width: 14px; height: 14px; flex: none; }
.say-meta .by-phone { margin: 0 2px 0 0; }
.th-msg.is-remote .th-bubble, .say-to.is-remote { border-style: dashed; }
.fi-phone { display: inline-flex; color: var(--gold); vertical-align: -1px; }
.fi-phone svg { width: 14px; height: 14px; }
/* a solas: lo que dice sin nadie delante se ve como un pensamiento (nube violeta, punteado) */
.by-think { display: inline-flex; align-items: center; margin-left: 6px; color: #B7A6E8; vertical-align: -2px; }
.by-think svg { width: 15px; height: 15px; flex: none; }
.say-meta .by-think { margin: 0 2px 0 0; }
.say-self .say-meta { color: #B7A6E8; }
.th-msg.is-think .th-bubble { background: rgba(183, 166, 232, 0.07); border: 1px dashed rgba(183, 166, 232, 0.45); border-radius: 16px; }
.th-msg.is-think .th-bubble p { font-style: italic; color: var(--cream-dim); }
.th-msg.is-think .th-bubble::before, .th-msg.is-think .th-bubble::after { content: ''; position: absolute; border-radius: 50%; border: 1px dashed rgba(183, 166, 232, 0.45); background: rgba(183, 166, 232, 0.07); }
.th-msg.is-think .th-bubble::before { width: 7px; height: 7px; left: -7px; bottom: 3px; }
.th-msg.is-think .th-bubble::after { width: 4px; height: 4px; left: -11px; bottom: -1px; }
.th-msg.is-b.is-think .th-bubble::before { left: auto; right: -7px; }
.th-msg.is-b.is-think .th-bubble::after { left: auto; right: -11px; }
.thread.is-solo .th-bubble { background: rgba(255, 255, 255, 0.035); border-style: dashed; }
.thread.is-solo .th-bubble p { color: var(--cream-dim); }
.th-msg.is-older { display: none; }
.thread.is-open .th-msg.is-older { display: flex; }
.th-more { display: block; margin: 0 auto 10px; background: none; border: 1px solid var(--line-strong); color: var(--cream-dim); border-radius: 999px; padding: 4px 12px; font-family: var(--mono); font-size: 11px; cursor: pointer; }
.th-more:hover { color: var(--cream); border-color: var(--gold); }
.mb-threads { display: grid; gap: 0; }

/* cabecera del hilo como botón: abre la conversación completa */
.th-open { width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px 8px 0 0; transition: background .15s; }
.th-open:hover { background: rgba(255, 255, 255, 0.04); }
.th-arrow { font-size: 18px; line-height: 1; color: var(--cream-faint); margin-left: 4px; }
.th-open:hover .th-arrow { color: var(--gold); }
/* la flecha va pegada a la hora: si no cabe, se recorta el texto, nunca se cae sola a otra línea */
.thread { min-width: 0; container-type: inline-size; }
.th-open { flex-wrap: nowrap; min-width: 0; }
.th-open .th-pair, .th-open .th-new { flex: none; }
.th-end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.th-end .th-meta { margin-left: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.th-end .th-arrow { flex: none; margin-left: 0; }
/* columna estrecha (móvil o crónica lateral): datos y flecha juntos en la línea de abajo */
@container (max-width: 520px) {
  .th-open { flex-wrap: wrap; row-gap: 4px; }
  .th-end { flex: 1 1 100%; justify-content: flex-end; }
}
.th-new { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #16240F; background: var(--leaf); border-radius: 999px; padding: 2px 7px; }
/* mensaje nuevo: solo una marca discreta junto a la hora */
.new-sep { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf); }
.new-sep::before, .new-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(82, 199, 118, 0.7)); }
.new-sep::after { background: linear-gradient(90deg, rgba(82, 199, 118, 0.7), transparent); }
.th-msgs .new-sep { grid-column: 1 / -1; }

/* bandeja de conversaciones del día */
.inbox { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px 8px 8px; margin-bottom: 12px; }
.inbox-title { display: flex; align-items: center; gap: 8px; margin: 0 6px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-faint); }
.inbox-count { font-family: var(--mono); font-size: 10px; color: var(--cream); background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.inbox-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 6px; background: none; border: none; border-radius: 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.inbox-row:hover { background: rgba(255, 255, 255, 0.05); }
.inbox-row.is-extra { display: none; }
.inbox-chev { display: inline-block; margin-left: 6px; color: var(--cream-faint); font-size: 15px; line-height: 1; transition: transform .2s; }
.inbox-row.is-open { background: rgba(255, 255, 255, 0.05); }
.inbox-row.is-open .inbox-chev { transform: rotate(90deg); color: var(--gold); }
.inbox-row.is-open .inbox-last { display: none; }
.conv-inline.thread { padding: 4px 6px 12px; margin: 0 0 4px; border: none; border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, 0.03); box-shadow: none; }
.conv-inline .th-msgs { margin-top: 4px; }
.inbox-open-head { display: flex; align-items: flex-start; gap: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 10px 10px 0 0; }
.inbox-open-head .inbox-row.is-open { background: none; flex: 1; min-width: 0; }
.inbox-open-head + .conv-inline + .inbox-row { border-top: 1px solid var(--line); }
.inbox-row + .inbox-open-head { border-top: 1px solid var(--line); border-radius: 0; }
.conv-pop { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 6px 4px 0 0; border-radius: 8px; background: none; border: 1px solid var(--line-strong); color: var(--cream-dim); cursor: pointer; }
.conv-pop:hover { border-color: var(--gold); color: var(--gold); }
.conv-pop svg { width: 14px; height: 14px; }
.conv-inline { display: flex; flex-direction: column; }
.conv-inline .th-more { align-self: center; }
.inbox-row + .inbox-row { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.inbox-avatars { flex: none; display: flex; }
.inbox-avatars .mini-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.inbox-avatars .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.inbox-avatars .mini-avatar + .mini-avatar { margin-left: -8px; box-shadow: -2px 0 0 var(--bg-2); }
.inbox-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inbox-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inbox-top b { font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-top b i { font-style: normal; font-weight: 400; color: var(--cream-faint); }
.inbox-time { flex: none; font-family: var(--mono); font-size: 10px; color: var(--cream-faint); }
.inbox-last { font-family: var(--read); font-size: 13.5px; line-height: 1.3; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-last em { font-style: normal; color: var(--cream-faint); font-family: var(--mono); font-size: 10.5px; }
.inbox-row.has-new .inbox-last { color: var(--cream); }
.inbox-meta { font-family: var(--mono); font-size: 10px; color: var(--cream-faint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.inbox-more { display: block; margin: 6px auto 2px; background: none; border: 1px solid var(--line-strong); color: var(--cream-dim); border-radius: 999px; padding: 4px 12px; font-family: var(--mono); font-size: 11px; cursor: pointer; }
.inbox-more:hover { color: var(--cream); border-color: var(--gold); }

/* ventana de conversación completa */
.conv-back { background: none; border: none; color: var(--cream-dim); font-family: var(--mono); font-size: 11.5px; cursor: pointer; padding: 0; margin-bottom: 12px; border-bottom: 1px solid transparent; }
.conv-back:hover { color: var(--cream); border-color: var(--flesh); }
.conv-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.conv-pair { display: flex; flex: none; }
.conv-avatar { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line-strong); }
.conv-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.conv-avatar + .conv-avatar { margin-left: -12px; box-shadow: -3px 0 0 var(--card); }
.conv-titles { min-width: 0; }
.conv-titles .mb-role { margin-top: 2px; }
.conv-order { margin-left: auto; align-self: flex-end; flex: none; }
.conv-head { flex-wrap: wrap; }
@media (max-width: 600px) { .conv-order { margin-left: 0; width: 100%; justify-content: center; } }
.conv-msgs { max-height: min(62vh, 640px); overflow-y: auto; padding: 4px 4px 4px 0; scrollbar-width: thin; }
.conv-sep { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-faint); }
.conv-sep::before, .conv-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* sala del edificio: chat de grupo, un color por persona */
.room .th-msg.room-msg .th-bubble b { color: hsl(var(--hue) 55% 72%); }
.room-to { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--cream-faint); }
.room .th-msg { max-width: 94%; }
.room .th-msg.is-away { margin-left: auto; flex-direction: row-reverse; }
.room .th-msg.room-msg.is-away .th-bubble { background: rgba(111, 182, 217, 0.08); border-color: rgba(111, 182, 217, 0.4); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.room .th-msg.room-msg.is-away .th-bubble b { color: var(--sky); }
.room-msg.is-away .by-phone { margin: 0 6px; }
.room .th-pair .is-gone .mini-avatar { opacity: 0.35; filter: grayscale(1); }
.room-gone { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--cream-faint); }

/* entradas y salidas de un edificio */
.moves { display: grid; gap: 6px; }
.move { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--cream-dim); }
.move-time { font-family: var(--mono); font-size: 11px; color: var(--cream-faint); min-width: 40px; }
.move-ico { font-weight: 700; font-size: 15px; }
.move.is-out .move-ico { color: var(--gold); }
.move.is-in .move-ico { color: var(--leaf); }
.move .fi-agent { color: var(--cream); font-weight: 600; }
.move-text i { font-style: normal; color: var(--cream-faint); font-family: var(--mono); font-size: 11px; }
.move-loc { background: none; border: none; padding: 0; font: inherit; color: var(--gold); cursor: pointer; border-bottom: 1px solid rgba(239, 182, 68, 0.4); }
.move-loc:hover { border-color: var(--gold); }
.move.is-new { animation: rise .4s var(--ease-out) both, newFlash 2.6s ease-out both; }
/* entrada o salida de alguien de la conversación, contada dentro del chat */
.room-sys { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 2px 0; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.035); border: 1px dashed var(--line); font-family: var(--mono); font-size: 11px; color: var(--cream-faint); }
.room-sys b { color: var(--cream-dim); font-weight: 600; }
.room-sys .mini-avatar { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.room-sys .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.room-sys .move-ico { font-size: 13px; }
.room-sys .move-ico.is-out { color: var(--gold); }
.room-sys .move-ico.is-in { color: var(--leaf); }
.room-sys.is-coming { border-style: dotted; color: var(--gold); }
.room-sys.is-coming .move-ico { animation: pulse-coming 1.6s ease-in-out infinite; }
@keyframes pulse-coming { 50% { opacity: .35; } }
/* debajo de la escena del edificio: quién viene de camino (aún no ha llegado) */
.int-coming { display: grid; gap: 6px; margin: 10px 0 0; }
.int-coming p { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 12px; background: rgba(239, 182, 68, 0.07); border: 1px dashed rgba(239, 182, 68, 0.45); font-family: var(--mono); font-size: 11.5px; line-height: 1.35; color: var(--cream-dim); min-width: 0; }
.int-coming p > span:not(.mini-avatar):not(.move-ico) { flex: 1; min-width: 0; }
.int-coming b { color: var(--gold); font-weight: 600; }
.int-coming time { flex: none; color: var(--cream-faint); }
.int-coming .move-ico { flex: none; color: var(--gold); font-weight: 700; animation: pulse-coming 1.6s ease-in-out infinite; }
.int-coming .mini-avatar { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 5px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.int-coming .mini-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.room-sys time { margin-left: 4px; }
.room-sys.is-older { display: none; }
.thread.is-open .room-sys.is-older { display: flex; }
.th-more-bottom { margin: 10px auto 2px; }
.room-order { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px; color: var(--cream-dim); font-family: var(--mono); font-size: 10.5px; cursor: pointer; transition: color .15s, border-color .15s; }
.room-order svg { width: 12px; height: 12px; }
.room-order:hover { color: var(--cream); border-color: var(--gold); }
.room .th-head { flex-wrap: wrap; }
.room .th-meta { margin-left: auto; }
.mb-threads .thread { background: var(--bg-2); }

/* ── Valla con vida: el obrero pasea, Poveda pinta «@sandiabyte» y Cangamontes dispara ── */
/* los muñecos animan translate/scale/rotate/bottom por separado: paso, balanceo y giro a la vez */
.bb-doll-1 { animation: bbWalk 12s ease-in-out infinite, bbStep .46s ease-in-out infinite, bbSway .46s ease-in-out infinite; }
@keyframes bbWalk {
  0%, 6% { translate: 0 0; scale: 1 1; }
  42%, 50% { translate: 90px 0; scale: 1 1; }
  52% { translate: 90px 0; scale: -1 1; }
  90%, 98% { translate: 0 0; scale: -1 1; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes bbStep { 0%, 100% { bottom: 0; } 50% { bottom: 4px; } }
@keyframes bbSway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.bb-doll-2 { animation: bbPainter 40s ease-in-out infinite, bbStep .46s ease-in-out infinite, bbShake 40s linear infinite; }
@keyframes bbPainter {
  0%, 4% { translate: 0 0; scale: 1 1; }
  5% { scale: -1 1; }
  7.5% { translate: -196px 0; scale: -1 1; }         /* camina hasta el principio del grafiti */
  8% { translate: -196px -12px; scale: 1 1; }         /* se sube y empieza a pintar */
  20% { translate: -30px -12px; scale: 1 1; }         /* avanza pintando hacia la derecha */
  21.5% { translate: -30px 0; scale: 1 1; }
  24%, 100% { translate: 0 0; scale: 1 1; }
}
@keyframes bbShake { 0%, 8% { rotate: 0deg; } 8.5% { rotate: -4deg; } 9% { rotate: 4deg; } 9.5% { rotate: -4deg; } 10% { rotate: 3deg; } 10.5% { rotate: -3deg; } 11% { rotate: 4deg; } 11.5% { rotate: -4deg; } 12% { rotate: 3deg; } 12.5% { rotate: -3deg; } 13% { rotate: 4deg; } 13.5% { rotate: -4deg; } 14% { rotate: 3deg; } 14.5% { rotate: -3deg; } 15% { rotate: 4deg; } 15.5% { rotate: -4deg; } 16% { rotate: 3deg; } 16.5% { rotate: -3deg; } 17% { rotate: 4deg; } 17.5% { rotate: -4deg; } 18% { rotate: 3deg; } 18.5% { rotate: -3deg; } 19% { rotate: 4deg; } 19.5% { rotate: -4deg; } 20%, 100% { rotate: 0deg; } }
.bb-tag { position: absolute; right: 14px; bottom: 6px; width: 204px; height: auto; clip-path: inset(0 100% 0 0); animation: bbReveal 40s linear infinite; }
/* ciclo de 40 s: pinta entre el 8 % y el 20 %, el grafiti se queda hasta el 96 % y se borra */
@keyframes bbReveal { 0%, 8% { clip-path: inset(0 100% 0 0); opacity: 1; } 20% { clip-path: inset(0 0 0 0); opacity: 1; } 96% { clip-path: inset(0 0 0 0); opacity: 1; } 99.5% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
.bb-doll-3 { animation: bbPhoto 9s ease-in-out infinite; }
@keyframes bbPhoto { 0%, 56% { translate: 0 0; rotate: 0deg; } 60% { translate: -6px 0; rotate: -6deg; } 63% { translate: -6px -6px; rotate: -6deg; } 66% { translate: -6px 0; rotate: -6deg; } 72%, 100% { translate: 0 0; rotate: 0deg; } }
.bb-flash { position: absolute; right: calc(14% + 20px); bottom: 34px; width: 70px; height: 70px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 65%); opacity: 0; animation: bbFlash 9s linear infinite; }
@keyframes bbFlash { 0%, 62% { opacity: 0; } 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bb-doll-1, .bb-doll-2, .bb-doll-3, .bb-tag, .bb-flash { animation: none; }
  .bb-tag { clip-path: none; }
}
@media (max-width: 720px) {
  .bb-tag { width: 112px; right: 8px; bottom: 4px; }
  .bb-doll-1 { animation-name: bbWalkM, bbStep, bbSway; }
  .bb-doll-2 { animation-name: bbPainterM, bbStep, bbShake; }
}
@keyframes bbWalkM { 0%, 6% { translate: 0 0; scale: 1 1; } 42%, 50% { translate: 40px 0; scale: 1 1; } 52% { translate: 40px 0; scale: -1 1; } 90%, 98% { translate: 0 0; scale: -1 1; } 100% { translate: 0 0; scale: 1 1; } }
@keyframes bbPainterM { 0%, 4% { translate: 0 0; scale: 1 1; } 5% { scale: -1 1; } 7.5% { translate: -110px 0; scale: -1 1; } 8% { translate: -110px -8px; scale: 1 1; } 20% { translate: -20px -8px; scale: 1 1; } 21.5% { translate: -20px 0; } 24%, 100% { translate: 0 0; scale: 1 1; } }

/* Registro de entradas y salidas del edificio: plegado tras un botón */
.moves-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 22px 0 10px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  color: var(--cream-faint); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: left; cursor: pointer; transition: border-color .15s, color .15s;
}
.moves-toggle:hover { border-color: var(--cream-faint); color: var(--cream); }
.moves-title { flex: 1; min-width: 0; }
.moves-count { display: flex; gap: 10px; letter-spacing: 0; white-space: nowrap; }
.moves-count .is-in { color: var(--leaf); }
.moves-count .is-out { color: var(--gold); }
.moves-arrow { font-size: 18px; line-height: 1; transition: transform .2s var(--ease-out); }
.moves-toggle[aria-expanded="true"] .moves-arrow { transform: rotate(90deg); }
.moves-toggle[aria-expanded="true"] + .moves { animation: rise .25s var(--ease-out) both; }


/* móvil: el chip de estado se queda solo con su icono (latido, zZz, parada…) y cabe el contador de espectadores */
@media (max-width: 430px) {
  .nav-right { gap: 6px; }
  .nav-inner { gap: 10px; }
  .brand img { height: 26px; }
  .nav-title { font-size: 16px; }
  .source-chip { padding: 6px 9px; gap: 0; }
  .source-chip .chip-short, .source-chip .chip-txt { display: none; }
  .viewers-chip { padding: 5px 8px; gap: 4px; }
  .viewers-chip svg { width: 13px; height: 13px; }
  .nav-cta { padding: 6px 8px; }
  .nav-user-chev { display: none; }
}
@media (max-width: 340px) {
  .nav-title { font-size: 14px; gap: 8px; }
  .nav-sep { font-size: 16px; }
  .nav-inner { gap: 8px; padding: 0 12px; }
  .brand img { height: 24px; }
  .nav-right { gap: 5px; }
  .viewers-chip { padding: 5px 7px; }
}


.room .conv-sep.is-older { display: none; }
.thread.is-open .conv-sep.is-older { display: flex; }

/* «Escribiendo su diario»: recién empezada la noche, quien aún no tiene el suyo (el lápiz se mueve un poco) */
.now-note .ci-pen { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; animation: pen-write 1.4s ease-in-out infinite; transform-origin: 20% 80%; }
@keyframes pen-write { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(2px, -1px) rotate(-6deg); } 60% { transform: translate(4px, 0) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .now-note .ci-pen { animation: none; } }
/* chip de arriba mientras escriben los diarios */
.source-chip .ci-pen-wrap { display: inline-grid; place-items: center; color: #D6CCF5; }
.source-chip .ci-pen { width: 13px; height: 13px; animation: pen-write 1.4s ease-in-out infinite; transform-origin: 20% 80%; }
@media (prefers-reduced-motion: reduce) { .source-chip .ci-pen { animation: none; } }

/* cajas con scroll propio (crónica en el móvil): solo en vertical. En el iPhone, al deslizar en diagonal
   la caja se movía también de lado y el texto quedaba cortado por la izquierda */
.side-scroll { overflow-x: hidden; overscroll-behavior-x: none; }

/* aviso de bloque nuevo en la crónica (en directo, si estás leyendo más abajo no se cambia sola);
   flota sobre el principio de la crónica para no empujar lo que se está leyendo */
.chronicle { position: relative; }
.feed-newblock { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: rgba(28, 22, 18, 0.94); border: 1px solid rgba(255, 83, 72, 0.55); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--cream); white-space: nowrap; cursor: pointer; animation: rise .3s var(--ease-out) both; }
.feed-newblock[hidden] { display: none; }
.feed-newblock b { color: #FF8B82; font-weight: 600; }
.feed-newblock:hover { border-color: #FF8B82; }
.feed-newblock.is-fixed { position: fixed; top: 76px; }