/* ---------- The match ---------- */
.strike-area {
  position: relative;
  height: 74px;
  margin: 0.1rem 0 0.1rem;
}

.strike-area.done { opacity: 0.25; pointer-events: none; transition: opacity 0.6s ease; }

/* matchbox strike strip: white card covered in a honeycomb of dark-red dots */
.strike-strip {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(250px, 72%);
  height: 22px;
  border-radius: 6px;
  border: 3px solid #eeebe2;             /* clean white margin around the dots */
  box-sizing: border-box;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cg fill='%237c2a20'%3E%3Cpolygon points='4,1.2 5.99,2.35 5.99,4.65 4,5.8 2.01,4.65 2.01,2.35'/%3E%3Cpolygon points='0,-2.3 1.99,-1.15 1.99,1.15 0,2.3 -1.99,1.15 -1.99,-1.15'/%3E%3Cpolygon points='8,-2.3 9.99,-1.15 9.99,1.15 8,2.3 6.01,1.15 6.01,-1.15'/%3E%3Cpolygon points='0,4.7 1.99,5.85 1.99,8.15 0,9.3 -1.99,8.15 -1.99,5.85'/%3E%3Cpolygon points='8,4.7 9.99,5.85 9.99,8.15 8,9.3 6.01,8.15 6.01,5.85'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 6px 5.25px,
    #eeebe2;
  box-shadow:
    inset 0 0 3px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.45);
}

.match {
  position: absolute;
  left: calc(50% - 159px); top: 20px;   /* static fallback; JS seats it against the strip */
  width: 12px; height: 64px;
  transform: rotate(-28deg);
  transform-origin: 50% 70%;
  cursor: grab;
  touch-action: none;
  z-index: 6;
}

/* in hand: pinned to the screen, outside the modal's scroll world, so
   carrying it can never stretch or scroll the box */
.match.held {
  position: fixed;
  z-index: 120;
}

.match:active { cursor: grabbing; }

.match.returning { transition: left 0.5s ease, top 0.5s ease; }

.match-stick {
  position: absolute;
  left: 50%; top: 11px;
  width: 4px; height: 50px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #caa165, #ecd0a0 45%, #b98d55);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.match-head {
  position: absolute;
  left: 50%; top: 2px;
  width: 8px; height: 13px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 45% 35%, #b0503c, #7c2d1f 70%);
  border-radius: 50% 50% 45% 45%;
}

.match.lit .match-head { background: radial-gradient(ellipse at 45% 35%, #4a3327, #2b1d14 70%); }

.match-tip {
  position: absolute;
  left: 50%; top: 8px;
  width: 2px; height: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* the anchor counter-rotates the match's tilt, so the flame stands upright
   (like the candles') centered on the red tip */
.match-flame-anchor {
  position: absolute;
  left: 50%; top: 8px;
  width: 0; height: 0;
  transform: rotate(28deg);
  pointer-events: none;
  z-index: 2;
}

.match-flame {
  position: absolute;
  left: 0; bottom: 2px;
  width: 10px; height: 17px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 78%,
    var(--flame-1) 0%, var(--flame-2) 38%, var(--flame-3) 68%, rgba(255, 110, 20, 0) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.match.lit .match-flame { opacity: 1; animation: flicker 1.6s ease-in-out infinite; }
.match.burnout .match-flame { opacity: 0; transition: opacity 0.7s ease; }

/* spent: once the candle catches, the match fades away instead of lingering
   behind the candle body */
.match.spent { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }

/* quick flash where the match catches */
.spark {
  position: fixed;
  width: 30px; height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff8dc 0%, #ffd56b 40%, rgba(255, 150, 40, 0) 70%);
  pointer-events: none;
  z-index: 60;
  animation: spark-pop 0.3s ease-out forwards;
}

@keyframes spark-pop {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

/* friction sparks thrown off while scrubbing the strip */
.strike-spark {
  position: fixed;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c0 0%, #ffb84d 55%, rgba(255, 120, 20, 0) 100%);
  pointer-events: none;
  z-index: 120;
  animation: spark-fly 0.45s ease-out forwards;
}

@keyframes spark-fly {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 0.9; }
  to   {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 8px)), calc(-50% + var(--dy, -14px))) scale(0.35);
  }
}

.strike-hint {
  text-align: center;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-dim);
  margin-bottom: 0.15rem;
}

/* The simple, always-available way to light the candle — a real, tappable
   button (not fine print), for anyone who can't or won't do the match. */
.simple-light {
  display: block;
  /* hint above is 0.15rem away; with this the gap over the pill matches the
     modal's 1.7rem bottom padding, so the button floats evenly */
  margin: 1.55rem auto 0;
  font-family: inherit;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  cursor: pointer;
  opacity: 0;                 /* hidden until it's needed in the Light act */
  pointer-events: none;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.5s ease;
}

.simple-light.shown { opacity: 1; pointer-events: auto; }

.simple-light:hover { background: rgba(255, 255, 255, 0.09); color: var(--ink); }
.simple-light:focus-visible { outline: 2px solid var(--flame-2); outline-offset: 2px; }
.simple-light[hidden] { display: none; }

/* compact optional attachment inside compose */
.compose .dropzone { padding: 0.7rem 1rem; }
.compose .dropzone-hint small { font-style: italic; opacity: 0.75; }

/* media attached to a letter, shown above its text */
#viewer-media { margin-bottom: 0.8rem; }
#viewer-media[hidden] { display: none; }

/* Swipeable photo/video stack: cards piled with a slight upward fan, the front
   one draggable. */
.mstack-wrap { width: 100%; }
.mstack {
  position: relative;
  height: 44vh;
  max-height: 400px;
  touch-action: pan-y;
}
.mcard {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}
.mcard img, .mcard video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #b9a274;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  -webkit-user-drag: none;
  background: rgba(0, 0, 0, 0.04);
}
.mcard.is-front { cursor: grab; }
.mcard.is-front:active { cursor: grabbing; }
.mcard-spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid rgba(60, 55, 45, 0.2);
  border-top-color: #b98d3e;
  animation: mcard-spin 0.8s linear infinite;
  pointer-events: none;
}
@keyframes mcard-spin { to { transform: rotate(360deg); } }

.mstack-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.3rem;
}
.mnav {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #b9a274;
  background: rgba(0, 0, 0, 0.03);
  color: #6a6152;
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s ease;
}
.mnav:hover { background: rgba(0, 0, 0, 0.08); }
.mnav:focus-visible { outline: 2px solid #b98d3e; outline-offset: 2px; }
.mstack-count {
  font-size: 0.8rem; color: #7c7260;
  font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center;
}

/* Voice messages beneath the stack, above the words. */
#viewer-voice { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
#viewer-voice[hidden] { display: none; }

/* Letter viewer */
/* Above the other overlays so a note opened FROM the album sits on top of it —
   drill into a photo, close, and you're back on the wall where you were. */
#viewer-overlay { z-index: 25; }
.viewer { background: linear-gradient(to bottom, var(--paper), #dfddd5); border-color: #a9a8a1; }
.viewer .close { color: #85837b; }
.viewer .close:hover { color: var(--paper-ink); }

.letter { color: var(--paper-ink); }

.letter p:first-child {
  font-size: 1.02rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* unbroken pasted text wraps instead of one long line */
}

.letter-from {
  margin-top: 1.2rem;
  text-align: right;
  font-style: italic;
  font-size: 0.98rem;
}

.letter-date {
  margin-top: 0.2rem;
  text-align: right;
  font-size: 0.78rem;
  color: #85837b;
}

/* Quiet mark that a letter's words are machine-translated, with a link back to
   the original — so a machine never silently speaks for a person. */
.viewer-trans {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-size: 0.74rem;
}
.viewer-trans[hidden] { display: none; }
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(90, 80, 45, 0.1);
  color: #7c7260;
  letter-spacing: 0.03em;
}
.vt-badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #b98d3e;
}
.vt-badge[hidden] { display: none; }
.vt-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 0.74rem;
  color: #6a6152;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.vt-toggle:hover { color: #45403a; }
.vt-toggle:focus-visible { outline: 2px solid #b98d3e; outline-offset: 2px; border-radius: 3px; }