/* VELADORA — Alpha. A single full-viewport canvas, letterboxed on black so the
   2:3 portrait scene is preserved on any display (desktop or mobile) without
   stretching the pixel-art artwork. */

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0a0704;        /* the black letterbox bars */
    overflow: hidden;
  }

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

  /* The canvas keeps the scene's 2:3 portrait composition. Its CSS size is set
     in main.js to fill the viewport as a centred 2:3 box. image-rendering keeps
     the pixels crisp (nearest-neighbour), no smoothing. */
  /* Desktop: the scene is centred in the viewport as an absolutely-positioned,
     aspect-preserved box inside the fixed control stage (#stage), so the top-line
     and controls can overlay the letterbox without covering the artwork. The mobile
     (max-width: 768px) block below re-flows these into a normal scrolling document. */
  #v {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;                         /* centres the fixed-size box on both axes */
    z-index: 1;                          /* the .layer controls sit above the scene */
    display: block;
    pointer-events: auto;                 /* the closed-note hit test lives on the canvas */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    /* black bars show through where the letterbox leaves the viewport uncovered */
    background: #0a0704;
  }
/* ── Migrated POC UI overlay ───────────────────────────────────────────────
   A transparent control layer over the letterboxed scene: a small shelf of
   choices that recedes while a candle burns and is revealed by a quiet dot.
   Only the duration selection + light + top-line + "se apagó" cue are in scope;
   devotion/figure and writing-paper are intentionally NOT migrated. */

:root {
  --ink: #ece2cf;
  --ink-dim: rgba(236, 226, 207, 0.60);
  --ink-faint: rgba(236, 226, 207, 0.32);
  --warm: #e8b878;
  --panel: rgba(18, 13, 9, 0.55);
  --edge: rgba(196, 156, 86, 0.35);
}

* { box-sizing: border-box; }

body {
  font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* control layer over the scene */
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}
#stage .layer { pointer-events: auto; position: relative; z-index: 2; }

/* top strip: remaining time, shown only while a candle burns */
#topline {
  padding: 16px 14px 4px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0));
}
#topline .status {
  color: var(--warm);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* bottom controls: a small shelf of choices that recedes while burning */
#controls {
  margin-top: auto;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(to top, rgba(8,6,4,0.66) 0%, rgba(8,6,4,0.42) 55%, rgba(8,6,4,0) 100%);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
#controls .caption {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  margin: 0 2px;
}

.row { display: flex; gap: 8px; align-items: stretch; }

.opt {
  position: relative;
  flex: 1 1 0;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink-dim);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.opt .sub { font-size: 10px; color: var(--ink-faint); letter-spacing: 0.04em; }
.opt::before {
  content: "";
  position: absolute;
  top: 5px; right: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--warm);
  opacity: 0;
  box-shadow: 0 0 6px var(--warm);
  transition: opacity 0.3s;
}
.opt:hover, .opt:focus-visible { color: var(--ink); border-color: rgba(232,184,120,0.55); outline: none; }
.opt[aria-pressed="true"], .opt.selected {
  color: var(--ink);
  border-color: var(--warm);
  background: rgba(232,184,120,0.12);
  box-shadow: 0 0 10px rgba(232,184,120,0.18);
}
.opt[aria-pressed="true"]::before,
.opt.selected::before { opacity: 0.9; }
.opt:active { transform: scale(0.97); }

/* the main act */
.act {
  min-height: 54px;
  border: 1px solid rgba(232,184,120,0.5);
  border-radius: 5px;
  background: rgba(40,26,14,0.6);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.10em;
  cursor: pointer;
  transition: all 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.act:hover, .act:focus-visible { background: rgba(232,184,120,0.18); border-color: var(--warm); outline: none; }
.act:active { transform: scale(0.99); }

/* the secondary "Escribir intención" act — a restrained shelf item, reusing the
   POC's intention button; the value shows the saved intention (or "opcional"). */
.intention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: rgba(30, 23, 16, 0.5);
  color: var(--ink-dim);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.intention:hover, .intention:focus-visible { color: var(--ink); border-color: rgba(232,184,120,0.55); outline: none; }
.intention:active { transform: scale(0.99); }
.intention .label {
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
}
.intention .value {
  color: var(--ink);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.intention .value:empty::before { content: "opcional"; color: var(--ink-faint); font-style: normal; }

/* while a candle burns the shelf recedes; a quiet dot (or hover) reveals it */
#stage.burning #controls { opacity: 0.18; transform: translateY(8px); }
#stage.burning #controls:hover,
#stage.burning #controls:focus-within,
#stage.revealed #controls,
#stage.revealed #controls:hover { opacity: 0.92; transform: translateY(0); }

/* quiet handle that reveals the receded shelf */
#dot {
  position: fixed;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: rgba(0,0,0,0.25);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 6;
  -webkit-tap-highlight-color: transparent;
}
#dot.on { opacity: 0.6; }

/* the gentle "se ha apagado" cue */
#remind {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  max-width: 80vw;
  text-align: center;
  font-size: 13px;
  color: var(--warm);
  background: rgba(10,7,4,0.55);
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--edge);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  z-index: 7;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#remind.show { opacity: 0.9; }
#remind .m { font-size: 20px; font-weight: 400; }

@media (max-width: 360px) {
  .opt { min-height: 44px; }
  .opt .sub { display: none; }
}

  /* ── Mobile: a normal, scrollable vertical document (≤ 768px wide) ───────────
     The fixed full-screen overlay is dropped so the artwork is never covered:
     the scene sits at the top at the full available width (original aspect
     ratio — no crop, stretch or zoom) and every control flows beneath it within
     the same content width. The controls stay visible and interactive while a
     candle burns, vertical scrolling is allowed, and iPhone safe areas are
     respected. Desktops (wider than 768px) keep the centred, letterboxed
     overlay described above. */
  @media (max-width: 768px) {
    html, body {
      height: auto;          /* let the document grow and scroll */
      overflow-x: hidden;    /* the full-width scene must never overflow sideways */
      overflow-y: auto;
    }

    body {
      display: block;        /* abandon the desktop centring flex box */
    }

    /* the control stage becomes an in-flow document section, not a fixed overlay */
    #stage {
      position: static;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 0;
      min-height: 100dvh;
    }

    /* the full-width scene in normal flow, immediately below the status */
    #v {
      position: static;
      margin: 0 auto;
    }

    /* keep every control visible right under the scene — no recede while burning */
    #controls {
      margin-top: 0;
      flex: 1 1 auto;
      justify-content: space-between;
      gap: clamp(4px, 0.8dvh, 10px);
      padding: clamp(6px, 0.8dvh, 12px) 12px
               max(8px, env(safe-area-inset-bottom));
    }

    #controls .row,
    #controls .act,
    #controls .intention {
      flex: 1 1 44px;
      min-height: 44px;
    }

    #controls .opt {
      min-width: 0;
      padding: 5px 4px;
    }

    #controls .act { padding: 6px; }
    #controls .intention { padding: 6px 10px; }
    #controls,
    #stage.burning #controls,
    #stage.burning #controls:hover,
    #stage.burning #controls:focus-within,
    #stage.revealed #controls,
    #stage.revealed #controls:hover {
      opacity: 1;
      transform: none;
    }

    /* the reveal handle is redundant now that the controls are always visible */
    #dot { display: none; }
  }

/* ── Open-note intention editor (live) ────────────────────────────────────────
   The approved open-note paper is the writing surface. A dimming veil darkens the
   whole altar and the bright paper sits on top of it, so the darkness dims the
   altar but never the paper. The editor (a transparent textarea in the sheet's
   lower panel + counter + restrained actions) lives on the image-sized wrapper, so
   it scales with the paper at any window size. The candle scene + its timer keep
   running behind the overlay. ?notePreview=1 remains a shortcut that opens it; on
   the normal URL it opens only via "Escribir intención" or by clicking the note. */
#notePreview {
   position: fixed;
   inset: 0;
   z-index: 9;                       /* above #stage (5–7) and the canvas */
   display: none;                   /* shown via .active ("Escribir intención", the note, or ?notePreview=1) */
   align-items: center;
   justify-content: center;
   pointer-events: none;            /* closed: intercepts nothing; .active re-enables input */
}
#notePreview.active { display: flex; pointer-events: auto; }

/* the dimming veil: dims the whole altar behind the paper. A click on it (outside
   the paper) cancels the editor without saving (the "CERRAR / CANCELAR" path). */
#notePreview .dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

/* image-sized wrapper: the open-note paper and its editor share this ONE box, so
   every editor dimension is a percentage of the displayed image and travels with
   it as it scales (desktop or mobile) — no fixed window coordinates. */
#notePreview .paper-wrap {
  position: relative;
  z-index: 1;
  max-width: 100vw;
  max-height: 100vh;
  line-height: 0;  /* drops the inline-img descender gap around the paper */
}

/* the open-note paper: fills its wrapper, scaled down nearest-neighbour only when
   the window is too small, so pixels stay crisp. It sits above the veil so the
   darkness dims the altar but never the (bright) paper itself. */
#notePreview .paper {
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* the editor: a transparent field anchored in the lower panel of the sheet, just
   below the central ornament, leaving the upper panel untouched. The box is fixed
   to the image with percentages, so its position AND size scale with the paper.
   overflow:hidden + a flexing field keeps the controls from clipping on small
   screens. */
#notePreview .note-editor {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 59%;
  bottom: 30%;
  display: flex;
  flex-direction: column;
  color: #3a2a18;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  overflow: hidden;
}
#notePreview .note-editor .field {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: none;
  background: transparent;
  color: #2a1c10;          /* dark, legible ink on the pale paper */
  font-family: inherit;
  font-size: 17px;        /* overwritten in JS to scale with the paper */
  line-height: 1.45;
  resize: none;
  padding: 0;
  outline: none;
  overflow: auto;
  white-space: pre-wrap;
  text-align: center;
}
#notePreview .note-editor .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
#notePreview .note-editor .count {
  font-size: clamp(9px, 1.2vw, 11px);
  color: rgba(58, 42, 24, 0.7);
  font-family: ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
}
#notePreview .note-editor .actions {
  display: flex;
  gap: 8px;
}
#notePreview .note-editor .actions button {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(10px, 1.3vw, 13px);
  line-height: 1;
  padding: 5px 10px;
  border: 1px solid rgba(58, 42, 24, 0.4);
  border-radius: 3px;
  background: transparent;
  color: #3a2a18;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#notePreview .note-editor .actions button.save {
  background: #3a2a18;
  border-color: #3a2a18;
  color: #efe3c9;
  font-weight: 600;
}


/* Mobile: prevent button rows from overflowing */
@media (max-width: 768px) {
  #stage, #controls, .row {
    width: 100%;
    min-width: 0;
  }

  .row .opt {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Mobile: estado superpuesto en la parte inferior del escenario */
@media (max-width: 768px) {
  #stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(min-content, 1fr);
  }

  #v {
    grid-area: 1 / 1;
  }

  #topline {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: center;
    width: calc(100% - 24px);
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--edge);
    border-radius: 5px;
    background: rgba(18, 13, 9, 0.75);
    pointer-events: none;
  }

  #controls {
    grid-area: 2 / 1;
  }
}

/* Mobile: estado superior igual que desktop */
@media (max-width: 768px) {
  #topline {
    align-self: start;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    padding: 14px 12px 6px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }
}

/* Guided controls: one DOM order on every screen. */
.control-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.35s ease, filter 0.35s ease;
  scroll-margin: 12px;
}
.control-section > .act,
.control-section > .intention { width: 100%; height: 100%; }

@media (min-width: 769px) {
  #stage #controls {
    position: absolute;
    left: calc((100% - var(--canvas-width)) / 2);
    bottom: calc((100% - var(--canvas-height)) / 2);
    width: var(--canvas-width);
    /* Shelf front ends near 78% of the backdrop; reserve a 2% gap. */
    max-height: calc(var(--canvas-height) * 0.20);
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(4px, 0.7vh, 10px) 12px;
    padding: clamp(4px, 0.7vh, 10px) 12px;
  }
  #controls .opt { min-height: 40px; padding: 4px; font-size: 13px; }
  #controls .act { min-height: 40px; font-size: 13px; }
  #controls .intention { min-height: 40px; padding: 6px 10px; }
  #controls .intention .value { max-width: 42%; }
}

#introVeil {
  position: absolute;
  left: calc((100% - var(--canvas-width)) / 2);
  top: calc((100% - var(--canvas-height)) / 2);
  width: var(--canvas-width);
  height: var(--canvas-height);
  background: rgba(8, 5, 3, 0.56);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
#stage.introducing #introVeil { opacity: 1; }
#stage.introducing #controls { opacity: 1; transform: none; }
#stage.introducing .control-section { opacity: 0.24; filter: brightness(0.6); }
#stage.introducing .control-section.intro-active { opacity: 1; filter: brightness(1); }
#stage.introducing .intro-active .caption,
#stage.introducing .intro-active .label {
  color: #ffd59a;
  animation: introduction-amber 0.75s ease-in-out infinite alternate;
}
@keyframes introduction-amber {
  from { text-shadow: 0 0 4px #d9872c, 0 0 9px #d9872c; }
  to { text-shadow: 0 0 6px #ffbd63, 0 0 16px #ef9c39, 0 0 26px #d9872c; }
}
#stage.intro-finishing #introVeil { opacity: 0; }
#stage.intro-finishing .control-section {
  opacity: 1;
  filter: brightness(1);
  transition-duration: 1s;
}
@media (max-width: 768px) {
  #introVeil {
    position: relative;
    grid-area: 1 / 1;
    left: auto;
    top: auto;
    justify-self: center;
    align-self: start;
  }
  #controls .control-section { flex: 1 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  #stage.introducing .intro-active .caption,
  #stage.introducing .intro-active .label {
    animation: none;
    text-shadow: 0 0 6px #ffbd63, 0 0 16px #ef9c39;
  }
}