/* Halloway epigraph — a quote, framed on the wall.
 *
 * The house frames authored upstairs lines and a few kept references in calm
 * places: the Gallery, room quote drops, and any static epigraph a shell page
 * hangs. Every one of those cards wears this one look, on purpose: like the
 * wordmark, it is a deliberate repeated motif, so a player learns the frame at
 * a glance and can linger on it or skip past it. The markup is owned by
 * epigraph.js; this file owns the look.
 *
 * One knob: --hw-epigraph-accent tints only the inner fillet, the hook, and the
 * caption rule — never the body text, which keeps the surface's own ink for
 * legibility. Each room sets the accent; absent, it falls back to a muted ink.
 * Shell-only; no hunt engine ever references it.
 */

.hw-epigraph {
  --hw-epigraph-accent: var(--muted, #9aa3c7);
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: 34rem;
  margin: 2.4rem auto;
  padding: clamp(1.5rem, 5.5vw, 2.3rem) clamp(1.3rem, 5.5vw, 2.5rem);
  text-align: center;
  color: var(--fg, #f2f5ff);
  /* A faint matte, lit a touch from the top and pooled warm at its centre, like
     a framed thing on a wall catching the light of the room it hangs in. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  /* Picture frames sit squarer than the app's 16px cards. */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  /* A beaded inner bevel (the mat board) above a soft cast shadow on the wall. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(0, 0, 0, 0.28) inset,
    0 26px 44px -30px rgba(0, 0, 0, 0.9);
}

.hw-epigraph[hidden] {
  display: none;
}

/* The inner mat line — the second rule that makes the frame read as a frame.
   Tinted with the room's accent, dimmed so it stays a fillet, not a highlight. */
.hw-epigraph::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid var(--hw-epigraph-accent);
  border-radius: 1px;
  opacity: 0.55;
  pointer-events: none;
  /* A hair of depth where the mat meets the picture. */
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.18) inset;
}

/* The brass pin it hangs from — a small bead lit from the upper-left. */
.hw-epigraph::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    color-mix(in srgb, var(--hw-epigraph-accent) 92%, #fff),
    var(--hw-epigraph-accent) 70%
  );
  opacity: 0.65;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hw-epigraph__quote {
  position: relative;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.02rem, 3.6vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

/* Each word is its own touch target. The quote reads as plain framed text —
   no underline, no colour, nothing to "learn" — until a finger lands on a word,
   which then lifts a hair, brightens toward the room's accent, and settles.
   A player can wake one word, or light up a whole line. Flavor, never a hint. */
.hw-epigraph__w {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 85%;
  transition: color 260ms ease, text-shadow 260ms ease;
}

/* Lit: stays awake until tapped again. The glow leans on the room's accent so
   each card warms toward its own colour, not a flat white. */
.hw-epigraph__w.is-awake {
  color: var(--hw-epigraph-accent);
  text-shadow:
    0 0 0.4rem rgba(255, 255, 255, 0.45),
    0 0 1rem color-mix(in srgb, var(--hw-epigraph-accent) 60%, transparent);
}

/* The one-shot wake replays on every tap — a small lift and wobble that ends
   exactly where it began, so nothing drifts out of place. */
.hw-epigraph__w.is-waking {
  animation: hw-epigraph-wake 520ms ease;
}

@keyframes hw-epigraph-wake {
  0% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(-0.16em) rotate(-2.4deg); }
  60% { transform: translateY(-0.04em) rotate(1.4deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* The opening and closing marks sit large and faint in the corners, tinted with
   the room's accent — a framed pull-quote, not inline punctuation. Purely
   decorative: kept low in opacity and tucked into the corner gaps, off the
   words, so they read as part of the frame and never get in a finger's way. */
.hw-epigraph__quote::before,
.hw-epigraph__quote::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 1;
  color: var(--hw-epigraph-accent);
  opacity: 0.22;
  pointer-events: none;
}

.hw-epigraph__quote::before {
  content: "\201C";
  top: -1.1rem;
  left: -0.3rem;
}

.hw-epigraph__quote::after {
  content: "\201D";
  bottom: -1.4rem;
  right: -0.3rem;
}

.hw-epigraph__cite {
  display: block;
  margin-top: 0.95rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hw-epigraph-accent);
  opacity: 0.9;
}

/* A short centered rule lifts the attribution off the quote. */
.hw-epigraph__cite::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1px;
  margin: 0 auto 0.75rem;
  background: var(--hw-epigraph-accent);
  opacity: 0.7;
}

/* Inline within a page section (Long Gallery, Landing, Coat Room). */
.hw-epigraph--flow {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* The band the hunt shell drops below a Tinker, Maiden, or Limner entry room. */
.hw-epigraph--entry {
  width: calc(100% - 2rem);
  margin-top: 1.6rem;
  margin-bottom: 2.4rem;
}

/* The transient card the house murmurs after a wrong answer (quote-drop.js).
   It floats over the puzzle, low and out of the way, opaque enough to read over
   anything, and dismisses on a tap or by itself. Clearly one of "those quotes,"
   so a player reads it as flavor, not a hint. */
.hw-epigraph--drop {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--hw-kb-inset));
  margin: 0 auto;
  max-width: 30rem;
  z-index: 2000;
  cursor: pointer;
  /* Opaque backing so it reads over any puzzle art. */
  background: linear-gradient(180deg, rgba(20, 16, 28, 0.96), rgba(10, 8, 16, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px -20px rgba(0, 0, 0, 0.9);
  /* Settle in gently; reset for the entrance below. */
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 280ms ease, transform 280ms ease;
}

.hw-epigraph--drop.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* The drop's keyboard-focusable dismiss control. */
.hw-epigraph-dismiss {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--hw-epigraph-accent);
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: 0.65;
  cursor: pointer;
}

.hw-epigraph-dismiss:hover {
  opacity: 1;
}

.hw-epigraph-dismiss:focus-visible {
  outline: 2px solid var(--hw-epigraph-accent);
  outline-offset: 2px;
  opacity: 1;
}

/* The frame holds still by design — no motion to learn. Stated explicitly so
   the intent survives future edits. */
@media (prefers-reduced-motion: reduce) {
  .hw-epigraph--drop {
    transition: none;
    transform: none;
  }
  .hw-epigraph,
  .hw-epigraph::before,
  .hw-epigraph::after {
    transition: none;
    animation: none;
  }
  /* The word still brightens on a tap (colour is not motion), but never moves. */
  .hw-epigraph__w.is-waking {
    animation: none;
  }
}