* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #050505; }
body {
  font-family: "Courier New", "Nimbus Mono PS", ui-monospace, Consolas, monospace;
  color: #f2f2f0;
  -webkit-font-smoothing: antialiased;
}

/* ventanas retro (marco doble, sombra sólida) — se pueden arrastrar
   por la barra y escalar desde la esquina inferior derecha */
.win {
  position: fixed; z-index: 10;
  background: #0b0b0b;
  border: 1px solid #f2f2f0;
  box-shadow: 4px 4px 0 rgba(242, 242, 240, 0.22);
  user-select: none;
  transition: opacity 0.22s steps(3, jump-end), transform 0.22s steps(3, jump-end);
}
.win.win-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  visibility: hidden;
}
.win.win-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  visibility: visible;
}
.win::after {
  content: ""; position: absolute; inset: 3px;
  border: 1px solid rgba(242, 242, 240, 0.28);
  pointer-events: none;
}
.win .bbar { cursor: move; touch-action: none; }
/* esquina de escala: invisible, sólo cambia el cursor */
.rsz {
  position: absolute; right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize; touch-action: none; z-index: 6;
}

#win3d { top: 5vh; right: 3.5vw; left: auto; width: 32vw; height: 53vh; }
#win3dBody { width: 100%; height: calc(100% - 23px); position: relative; }
#win3dBody canvas { display: block; width: 100%; height: 100%; }

/* subtítulo con pregunta territorial activa (propiedad q en datasets) */
#win3dSub {
  position: absolute;
  top: 23px;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 8px 14px 14px;
  background: linear-gradient(to bottom,
    rgba(11, 11, 11, 0.95) 0%,
    rgba(11, 11, 11, 0.72) 65%,
    rgba(11, 11, 11, 0) 100%);
  pointer-events: none;
}
#win3dQuestion {
  display: block;
  font-family: "Courier New", "Nimbus Mono PS", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #74acdf;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
#win3dQuestion .cursor {
  display: inline-block; width: 6px; height: 11px;
  background: currentColor; margin-left: 3px; vertical-align: -1px;
  animation: blink 1s steps(1) infinite;
}

/* callouts: anotaciones que salen del terreno voxel hacia los bordes */
#callouts {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.co-line { stroke: #f2f2f0; stroke-width: 1; fill: none; opacity: 0.55; }
.co-dot { fill: #ffffff; }
.co-text {
  fill: #f2f2f0;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em;
}

/* ventanas de glaciares: formato cuadrado 1:1 ampliado, escalonadas */
.glacwin img {
  display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  image-rendering: pixelated;
}
#winGlac0 { left: 5vw; top: 63vh; right: auto; width: 230px; height: auto; }        /* norte: izquierda inferior */
#winGlac1 { left: 17vw; top: 52vh; right: auto; width: 230px; height: auto; }       /* centro: centro escalonada superior */
#winGlac2 { left: 28.5vw; top: 64vh; right: auto; width: 230px; height: auto; }     /* austral: centro-derecha inferior */

/* barra superior tipo ventana de navegador */
.bbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px;
  background: #141414;
  border-bottom: 1px solid #f2f2f0;
}
/* íconos de barra: caja única 10×10, trazo 1px, centrados */
.bbar i { display: block; position: relative; width: 10px; height: 10px; }
.bbar i.min::before {
  content: ""; position: absolute; left: 1px; top: 50%; margin-top: -1px;
  width: 8px; height: 2px; background: #f2f2f0;
}
.bbar i.max::before {
  content: ""; position: absolute; top: 1px; right: 1px;
  width: 6px; height: 6px; border: 1px solid #f2f2f0;
}
.bbar i.max::after {
  content: ""; position: absolute; bottom: 1px; left: 1px;
  width: 6px; height: 6px; border: 1px solid #f2f2f0; background: #141414;
}
.bbar i.cls {
  cursor: pointer;
  padding: 4px;
  margin: -4px -2px -4px 1px;
  touch-action: auto;
}
.bbar i.cls::before, .bbar i.cls::after {
  content: ""; position: absolute; left: 1px; top: 4.5px;
  width: 8px; height: 1px; background: #f2f2f0;
  transition: background 0.15s ease;
}
.bbar i.cls:hover::before, .bbar i.cls:hover::after {
  background: #ff5c5c;
}
.bbar i.cls::before { transform: rotate(45deg); }
.bbar i.cls::after { transform: rotate(-45deg); }

/* ventana bandera: bandas sinusoidales celeste/blanco */
#winFlag { right: 8.5vw; left: auto; top: 66vh; width: 260px; height: 185px; }
#winFlag canvas { display: block; width: 100%; height: calc(100% - 22px); }
/* callouts de color: el svg desborda la ventana (arriba/abajo/derecha) para los rótulos */
#flagCallouts {
  position: absolute; top: -46px; left: 0;
  height: calc(100% + 92px); width: calc(100% + 110px);
  pointer-events: none; overflow: visible;
}

/* ventana wiphala: pixel art 7x7 de las comunidades originarias (junto al mapa arriba a la izquierda) */
#winWiphala { left: 23.5vw; top: 7.8vh; width: 210px; height: 232px; }
#winWiphala canvas { display: block; width: 100%; height: calc(100% - 22px); image-rendering: pixelated; cursor: crosshair; }
#wiphalaCallouts {
  position: absolute; top: -35px; left: -30px;
  height: calc(100% + 70px); width: calc(100% + 280px);
  pointer-events: none; overflow: visible;
}
.wiphala-tooltip {
  position: absolute;
  top: 24px;
  left: calc(100% + 14px); /* Sale hacia el costado exterior sin tapar los colores */
  width: 200px;
  background: rgba(8, 8, 8, 0.95);
  border: 1px solid rgba(242, 242, 240, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.9);
  padding: 8px 11px;
  font-family: "Courier New", ui-monospace, monospace;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 20;
  border-radius: 2px;
}
.wiphala-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}
.wiphala-tooltip.to-left {
  left: auto;
  right: calc(100% + 14px);
  transform: translateX(6px);
}
.wiphala-tooltip.to-left.visible {
  transform: translateX(0);
}
.wiphala-tooltip .tt-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; margin-bottom: 4px;
}
.wiphala-tooltip .tt-desc {
  font-size: 9.5px; line-height: 1.45; color: #d8d8d4;
  letter-spacing: 0.02em;
}

/* fondo: GIF de nubes glitcheado. El asset trae letterbox (franjas negras
   arriba/abajo): el tile se escala 1/0.844 y se desplaza para que sólo el
   contenido (405px útiles de 480) cubra el viewport exacto, sin zoom extra */
#bgLayer {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; background: #050505;
  background-image: url("../assets/nubes5optimize.gif");
  background-repeat: repeat;
  background-size: auto 118.5%;
  background-position: 0 -9.1vh;
  filter: saturate(0.7) contrast(1.06) brightness(0.92);
}
#bgLayer::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(5, 5, 5, 0.38);
}

/* huellas TERRITORIA: sobre el GIF, detrás de las ventanas */
#stampLayer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ventana mapa: malla de Argentina desplazada — líneas horizontales apiladas
   en toda la ventana, planas alrededor del país y con relieve sobre la silueta
   (referencia: tapa de Unknown Pleasures) */
#winMap { left: 3.5vw; top: 6.5vh; right: auto; bottom: auto; width: 260px; }
#winMap .mapbody {
  position: relative; width: 100%; height: 420px; overflow: hidden;
  background: #0d0d0d;
}
#winMap .mapbody canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* log integrado a la ventana 3D: el texto emerge del terreno, sin separador */
#logStrip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 148px; overflow: hidden;
  background: linear-gradient(to bottom,
    rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.78) 44px, rgba(11, 11, 11, 0.92) 100%);
  padding: 34px 14px 10px;
}
.logline {
  font-size: 11px; line-height: 2.1; color: #d8d8d4;
  text-transform: uppercase; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logline::before { content: "> "; color: #555; }
.cursor {
  display: inline-block; width: 7px; height: 12px;
  background: #f2f2f0; margin-left: 4px; vertical-align: -1px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* scanlines CRT sobre toda la composición */
#scan {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 1px,
    transparent 1px, transparent 3px);
}

/* resumen textual para lectores de pantalla: invisible en pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

@media (max-width: 768px) {
  #win3d {
    left: 3vw; right: auto; top: 1.5vh;
    width: 94vw; height: 30vh;
  }
  #win3dSub {
    padding: 5px 8px 8px;
  }
  #win3dQuestion {
    font-size: 9px;
    line-height: 1.35;
  }
  #logStrip {
    height: 98px; padding: 12px 8px 6px;
  }
  .logline {
    font-size: 8.5px; line-height: 1.6;
  }

  /* Ventana mapa: columna izquierda proporcionada */
  #winMap {
    left: 3vw; right: auto; top: 33vh; bottom: auto;
    width: 43vw; height: auto;
  }
  #winMap .mapbody {
    width: 100%; aspect-ratio: 568 / 940; height: auto;
  }

  /* Banderas: columna derecha alineada junto al mapa */
  #winFlag {
    left: 49vw; right: auto; top: 33vh;
    width: 48vw; height: calc(48vw * 0.625 + 22px);
  }
  #flagCallouts {
    display: none;
  }
  #winWiphala {
    left: 54vw; right: auto; top: calc(33vh + 48vw * 0.625 + 26px);
    width: 38vw; height: calc(38vw + 22px);
  }
  #wiphalaCallouts {
    display: none;
  }
  .wiphala-tooltip {
    left: auto; right: 0;
    top: calc(100% + 8px);
    width: 170px;
  }

  /* Glaciares: franja inferior compacta de 3 ventanas lado a lado */
  .glacwin img {
    width: 100%; aspect-ratio: 4 / 3; height: auto;
    object-fit: cover;
  }
  #winGlac0 {
    left: 3vw; right: auto; top: calc(33vh + 43vw * 1.65 + 32px);
    width: 29.3vw; height: auto;
  }
  #winGlac1 {
    left: 35.3vw; right: auto; top: calc(33vh + 43vw * 1.65 + 32px);
    width: 29.3vw; height: auto;
  }
  #winGlac2 {
    left: 67.5vw; right: auto; top: calc(33vh + 43vw * 1.65 + 32px);
    width: 29.3vw; height: auto;
  }
}

/* reduced motion: sólo afecta a quienes lo piden a nivel de sistema */
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}