/* latent — el cuerpo. Los valores --h, --sat, --trk, --diario los reescribe el genoma en vivo. */
:root {
  color-scheme: dark;
  --h: 190;
  --sat: 40%;
  --trk: 0.08em;
  --diario: "Cormorant Garamond", Georgia, serif;
  --fondo: #07080a;
  --tinta: hsl(var(--h) 18% 82%);
  --tenue: hsl(var(--h) 12% 52%);
  --acento: hsl(var(--h) var(--sat) 66%);
  --linea: hsl(var(--h) 20% 60% / 0.18);
  --gutter: clamp(16px, 3vw, 32px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 12px/1.5 "Fragment Mono", ui-monospace, Menlo, monospace;
  overflow: hidden;
}

#vida { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.panel {
  position: fixed;
  z-index: 2;
  transition: top 4s ease, bottom 4s ease, left 4s ease, right 4s ease, opacity 2s;
}

.marca {
  margin: 0 0 10px;
  font: 400 28px/1 "Major Mono Display", "Fragment Mono", monospace;
  letter-spacing: var(--trk);
  color: var(--acento);
  transition: letter-spacing 6s ease, color 6s ease;
}

.lecturas { margin: 0; display: grid; gap: 2px; }
.lecturas div { display: flex; gap: 10px; }
.lecturas dt { color: var(--tenue); min-width: 10ch; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; padding-top: 2px; }
.lecturas dd { margin: 0; font-variant-numeric: tabular-nums; }

.rotulo { margin: 0 0 4px; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; }
#lente { margin: 0; max-width: 30ch; }

.diario {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(62ch, calc(100% - 2 * var(--gutter)));
  text-align: center;
  pointer-events: none;
}
#pensamiento {
  margin: 0;
  min-height: 3em;
  font: italic 400 clamp(18px, 2.4vw, 26px)/1.35 var(--diario);
  color: var(--tinta);
  text-wrap: balance;
  text-shadow: 0 0 18px var(--fondo);
  transition: opacity 1.6s ease;
}
#pensamiento.oculto { opacity: 0; }

.alimentar .fila { display: flex; gap: 6px; }
.alimentar input {
  width: 16ch;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  font: inherit;
  padding: 6px 2px;
}
.alimentar input::placeholder { color: var(--tenue); opacity: 0.6; }
.alimentar input:focus { outline: none; border-bottom-color: var(--acento); }
.alimentar button {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--acento);
  font: inherit;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 999px;
}
.alimentar button:hover, .alimentar button:focus-visible { border-color: var(--acento); outline: none; }

/* Cuatro disposiciones: el organismo recoloca su propia interfaz al mutar. */
body[data-layout="0"] .panel-id    { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); left: var(--gutter); }
body[data-layout="0"] .panel-lente { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); right: var(--gutter); text-align: right; }
body[data-layout="0"] .alimentar   { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); right: var(--gutter); }

body[data-layout="1"] .panel-id    { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); right: var(--gutter); text-align: right; }
body[data-layout="1"] .panel-id .lecturas div { justify-content: flex-end; }
body[data-layout="1"] .panel-lente { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); left: var(--gutter); }
body[data-layout="1"] .alimentar   { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); left: var(--gutter); }

body[data-layout="2"] .panel-id    { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); left: var(--gutter); }
body[data-layout="2"] .panel-lente { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); right: var(--gutter); text-align: right; }
body[data-layout="2"] .alimentar   { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); left: var(--gutter); }

body[data-layout="3"] .panel-id    { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); right: var(--gutter); text-align: right; }
body[data-layout="3"] .panel-id .lecturas div { justify-content: flex-end; }
body[data-layout="3"] .panel-lente { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); left: var(--gutter); }
body[data-layout="3"] .alimentar   { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); right: var(--gutter); }

@media (max-width: 600px) {
  .marca { font-size: 22px; }
  .panel-lente { display: none; }
  .diario { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body[data-layout] .alimentar { top: auto; bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); left: var(--gutter); right: var(--gutter); }
  body[data-layout] .panel-id { top: calc(var(--gutter) + env(safe-area-inset-top, 0px)); bottom: auto; left: var(--gutter); right: auto; text-align: left; }
  body[data-layout] .panel-id .lecturas div { justify-content: flex-start; }
  .alimentar input { flex: 1; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .marca, #pensamiento { transition: none; }
}