/* ============================================================
   LAUREL & LANTERN INN — treasures.css (v21, 2026-10-19)
   Hidden treasures in a room's painting. Each one is a faint glint
   drawn over the picture; finding one fills the room with sparkles,
   finding all of them brings a bigger sparkle and a note from the
   Innkeepers. Finds are counted only in the visitor's own browser.
   Motion off ("Still the house" or reduced motion): the glints hold
   still and a soft glow replaces the sparkles. Nothing flashes.
   ============================================================ */

/* show the whole painting on a room that hides treasures, so none is cropped away */
.room-hero.has-treasures { max-height: none; }

.treasure-layer {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1344 / 896;
  z-index: 2;
}
.treasure {
  position: absolute; left: var(--x); top: var(--y);
  width: max(var(--s), 44px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: none; border: 0; border-radius: 50%; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.treasure:focus { outline: none; }
.treasure:focus-visible { outline: 1px dashed rgba(255, 214, 150, 0.8); outline-offset: 2px; }

.glint {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: radial-gradient(circle, #FFF8E4 0%, #F6CF84 40%, rgba(255, 153, 51, 0) 72%);
  opacity: 0;
  animation: glint var(--tw, 8s) ease-in-out infinite;
}
/* a brief, soft shimmer now and then: about 0.7 s lit in every 7-12 s */
@keyframes glint {
  0%, 88%, 100% { opacity: 0; transform: scale(0.6); }
  93% { opacity: 0.85; transform: scale(1.25); }
}
.treasure:hover .glint, .treasure:focus-visible .glint { opacity: 1; transform: scale(1.5); animation: none; }
.treasure.is-found { cursor: default; }
.treasure.is-found .glint {
  animation: none; opacity: 0.95; transform: scale(1.35);
  box-shadow: 0 0 14px 6px rgba(255, 190, 110, 0.35);
}
html.is-still .glint { animation: none; opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .glint { animation: none; opacity: 0.4; } }

/* ---------- the sparkle shower (spawned by js/treasures.js) ---------- */
.treasure-shower { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.treasure-shower i {
  position: absolute; left: var(--x); top: -12px;
  width: var(--sz, 6px); height: var(--sz, 6px); border-radius: 50%;
  background: radial-gradient(circle, #FFF6DC 0%, #F1C77A 35%, rgba(255, 153, 51, 0) 70%);
  opacity: 0;
  animation: shower var(--t, 2s) ease-in var(--d, 0s) forwards;
}
@keyframes shower {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--fall, 70vh)); }
}
/* motion off: a soft warm glow instead */
.room-hero.is-glowing::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 120px 30px rgba(255, 190, 110, 0.45);
}

/* ---------- the count and the Innkeepers' note ---------- */
.treasure-count {
  margin-top: 10px; font-family: var(--serif-caps); font-size: 0.68rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper);
}
.treasure-note {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 85; width: min(88vw, 420px); padding: 28px 26px 24px; text-align: center;
  background: linear-gradient(180deg, #2D0B2C, #160016);
  border: 1px solid rgba(204, 153, 102, 0.6); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 153, 51, 0.15);
  color: var(--parchment);
}
.treasure-note[hidden] { display: none; }
.treasure-note h2 { font-family: var(--serif-caps); font-size: 1.05rem; letter-spacing: 0.12em; margin: 4px 0 10px; color: var(--amber); }
.treasure-note p { font-family: var(--serif-display); font-size: 1.15rem; line-height: 1.45; margin: 0; }
.treasure-note .tn-orn { color: var(--copper); font-size: 1rem; }
.treasure-note .tn-sign { margin-top: 10px; font-style: italic; color: var(--parchment-dim); }
.treasure-note .tn-sign::before { content: "\2014\00a0"; }
.treasure-note .tn-close {
  margin-top: 18px; font-family: var(--serif-caps); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber); background: none; border: 1px solid rgba(255, 153, 51, 0.45);
  border-radius: 999px; padding: 10px 20px; cursor: pointer;
}
.treasure-note .tn-close:hover, .treasure-note .tn-close:focus-visible { color: var(--parchment); border-color: var(--amber); }