/* ---------------- the midnight fair ---------------- */
.fair-page { max-width: 880px; margin: 0 auto; }
.fair-hero { text-align: center; padding: 1.6rem 0.6rem 0.4rem; }
.fair-moonrow { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: #b9a8cc; letter-spacing: 0.08em; text-transform: uppercase; }
.fair-moonico { font-size: 1.3rem; }
.fair-hero h1 { font-family: Cinzel Decorative, Georgia, serif; font-size: 2.3rem; color: #ffd700; margin: 0.5rem 0 0.3rem; text-shadow: 0 0 34px rgba(212,175,55,0.35); }
.fair-sub { color: #d8b8c8; font-size: 0.98rem; max-width: 34rem; margin: 0 auto 1.1rem; line-height: 1.55; }
.omen-card { text-align: left; background: linear-gradient(150deg, rgba(58,32,64,0.9), rgba(24,12,32,0.95)); border: 1px solid rgba(212,175,55,0.45); border-radius: 18px; padding: 1rem 1.1rem; box-shadow: 0 10px 34px rgba(0,0,0,0.55), inset 0 0 44px rgba(120,70,180,0.10); }
.omen-kicker { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ff6b9d; margin-bottom: 0.45rem; }
.omen-text { font-family: Georgia, serif; font-size: 1.12rem; color: #f3e9d2; line-height: 1.5; margin-bottom: 0.6rem; }
.omen-pair { display: grid; gap: 0.3rem; font-size: 0.84rem; color: #b9a8cc; line-height: 1.45; }
.omen-pair b { color: #d4af37; font-weight: 600; }
.fair-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1.1rem 0 0.4rem; position: sticky; top: 0; z-index: 5; padding: 0.4rem 0; }
.fair-nav a { background: rgba(28,14,20,0.88); border: 1px solid rgba(212,175,55,0.35); color: #f5e6d3; border-radius: 999px; padding: 0.42rem 0.85rem; font-size: 0.85rem; text-decoration: none; backdrop-filter: blur(8px); }
.fair-nav a:hover { border-color: #ff6b9d; }
.fair-booth { background: linear-gradient(165deg, #1c1226 0%, #120b1a 100%); border: 1px solid #3d2b52; border-radius: 20px; padding: 1.2rem 1.1rem 1.3rem; margin: 1rem 0; box-shadow: 0 6px 26px rgba(0,0,0,0.5); scroll-margin-top: 70px; }
.fair-booth h2 { font-family: Georgia, serif; color: #ffd700; font-size: 1.4rem; margin: 0 0 0.35rem; }
.booth-sub { color: #b9a8cc; font-size: 0.9rem; line-height: 1.55; margin: 0 0 1rem; }
.fair-foot { text-align: center; color: #a08090; font-size: 0.88rem; padding: 0.8rem 0.6rem 2rem; }
.fair-foot a { color: #ff6b9d; }

/* tarot */
.tarot-row { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.9rem; }
.tarot-slot { text-align: center; }
.tarot-pos { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #a08090; margin-bottom: 0.45rem; }
.tarot-card { position: relative; width: 108px; height: 158px; border-radius: 14px; border: 1px solid rgba(212,175,55,0.5); background: linear-gradient(160deg, #2a1535, #170b22); cursor: pointer; padding: 0; transform-style: preserve-3d; transition: transform 0.65s ease; box-shadow: 0 8px 22px rgba(0,0,0,0.55); }
button.tarot-card { font: inherit; }
.tarot-card.flipped { transform: rotateY(180deg); }
.tarot-card.facedown { cursor: default; }
.tarot-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; padding: 0.5rem; }
.tarot-back { font-size: 2rem; color: #d4af37; background: radial-gradient(circle at 50% 38%, rgba(212,175,55,0.20), transparent 65%), linear-gradient(160deg, #2a1535, #170b22); }
.tarot-front { transform: rotateY(180deg); background: linear-gradient(165deg, #33203f, #1d0f2a); }
.tarot-ico { font-size: 2.6rem; line-height: 1; }
.tarot-name { font-family: Georgia, serif; color: #ffd700; font-size: 0.92rem; line-height: 1.25; }
.tarot-actions { text-align: center; margin-bottom: 0.8rem; }
.tarot-reading { display: grid; gap: 0.8rem; }
.tarot-line { background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.25); border-radius: 14px; padding: 0.8rem 0.95rem; }
.tarot-line-head { color: #f5e6d3; margin-bottom: 0.3rem; }
.tarot-line-head span { color: #a08090; font-size: 0.85rem; }
.tarot-line p { color: #d8cbe0; font-size: 0.92rem; line-height: 1.6; margin: 0.2rem 0; }
.tarot-line .tarot-shadow { color: #a08090; font-size: 0.85rem; }

/* riddle gate */
.riddle-q { font-family: Georgia, serif; font-size: 1.15rem; color: #f3e9d2; line-height: 1.55; font-style: italic; margin-bottom: 0.9rem; }
.riddle-form { display: flex; gap: 0.6rem; }
.riddle-form input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.4); border-radius: 12px; color: #f5e6d3; padding: 0.65rem 0.8rem; font-size: 1rem; min-width: 0; }
.riddle-meta { color: #a08090; font-size: 0.82rem; margin-top: 0.55rem; }
.riddle-hint { margin-top: 0.6rem; color: #ffd700; font-size: 0.9rem; background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); border-radius: 12px; padding: 0.6rem 0.8rem; }
.riddle-msg { margin-top: 0.6rem; color: #ff9ebc; font-size: 0.9rem; min-height: 1.2em; }
.riddle-solved { background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.35); border-radius: 14px; padding: 0.9rem 1rem; color: #d8f5e2; line-height: 1.55; }
.riddle-solved a { color: #ffd700; }
.riddle-streak { color: #b9a8cc; font-size: 0.88rem; margin-top: 0.3rem; }

/* whisper wall */
.whisper-compose textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.35); border-radius: 14px; color: #f5e6d3; padding: 0.7rem 0.85rem; font-size: 0.98rem; font-family: Georgia, serif; resize: vertical; }
.whisper-row { display: flex; justify-content: space-between; align-items: center; margin: 0.5rem 0 1rem; }
.whisper-row span { color: #a08090; font-size: 0.8rem; }
.whisper-list { display: grid; gap: 0.7rem; }
.whisper { display: flex; gap: 0.8rem; align-items: flex-start; background: linear-gradient(150deg, rgba(245,230,211,0.07), rgba(245,230,211,0.02)); border: 1px solid rgba(245,230,211,0.16); border-radius: 14px; padding: 0.85rem 0.95rem; }
.whisper.mine { border-color: rgba(255,107,157,0.45); }
.whisper p { flex: 1; margin: 0; font-family: Georgia, serif; font-style: italic; color: #f0e6d2; line-height: 1.6; font-size: 0.98rem; }
.candle-btn { background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.4); color: #ffd700; border-radius: 999px; padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.9rem; white-space: nowrap; }
.candle-btn.lit { background: rgba(212,175,55,0.28); box-shadow: 0 0 14px rgba(212,175,55,0.35); cursor: default; }
.candle-btn:disabled { opacity: 0.85; }

/* ember tales */
.tale-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.3); border-radius: 16px; padding: 1rem 1.05rem; }
.tale-kicker { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ff6b9d; margin-bottom: 0.35rem; }
.tale-title { font-family: Georgia, serif; font-size: 1.3rem; color: #ffd700; margin-bottom: 0.3rem; }
.tale-chapters { display: grid; gap: 0.45rem; margin: 0.7rem 0 0.95rem; }
.tale-ch { display: block; color: #f5e6d3; text-decoration: none; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; padding: 0.55rem 0.8rem; font-size: 0.92rem; }
.tale-ch:hover { border-color: rgba(212,175,55,0.55); }
.tale-ch.cur { border-color: #ff6b9d; color: #ffb3cd; }
.tale-ch.back { text-align: center; color: #a08090; }
.tale-page { max-width: 760px; margin: 0 auto; }
.tale-toc { margin-bottom: 1.2rem; }
.tale-toc h1 { font-family: Georgia, serif; color: #ffd700; font-size: 1.8rem; margin: 0.2rem 0 0.8rem; }
.tale-toc .tale-ch { margin-bottom: 0.45rem; }
.tale-body { background: linear-gradient(170deg, #1d1428, #120b1a); border: 1px solid #3d2b52; border-radius: 20px; padding: 1.6rem 1.4rem 1.3rem; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.tale-body h2 { font-family: Georgia, serif; color: #ffd700; font-size: 1.45rem; margin: 0 0 1.1rem; text-align: center; }
.tale-body p { font-family: Georgia, 'Times New Roman', serif; font-size: 1.06rem; line-height: 1.85; color: #ece1cd; margin: 0 0 1.05rem; }
.tale-body p:first-of-type::first-letter { font-size: 2.6em; float: left; line-height: 0.85; padding-right: 0.12em; color: #d4af37; font-family: Cinzel Decorative, Georgia, serif; }
.tale-end { text-align: center; color: #d4af37; font-size: 1.2rem; margin: 0.4rem 0 1rem; }
.tale-nav { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.tale-count { color: #a08090; font-size: 0.85rem; }

/* match the flames */
.flames-bar { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; color: #b9a8cc; font-size: 0.88rem; margin-bottom: 0.8rem; }
.flames-bar b { color: #ffd700; }
.flames-bar .btn { margin-left: auto; }
.flames-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; max-width: 430px; margin: 0 auto; }
.flame-card { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; border: 1px solid rgba(212,175,55,0.4); background: linear-gradient(160deg, #241433, #150a20); cursor: pointer; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; padding: 0; }
.flame-card .fl-front { display: none; }
.flame-card.open .fl-back, .flame-card.matched .fl-back { display: none; }
.flame-card.open .fl-front, .flame-card.matched .fl-front { display: block; }
.flame-card.matched { border-color: rgba(46,204,113,0.6); box-shadow: 0 0 14px rgba(46,204,113,0.25); cursor: default; }
.flames-win { margin-top: 0.9rem; }
.flames-win-card { background: rgba(212,175,55,0.10); border: 1px solid rgba(212,175,55,0.45); border-radius: 14px; padding: 0.85rem 1rem; color: #f3e9d2; text-align: center; line-height: 1.55; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .tarot-card { transition: none; } }

/* =====================================================================
 * THE MIDNIGHT FAIR 10x — a living-glass midway (2026-10-29)
 * A carnival of stained glass and candle-smoke: seductive, a little
 * dangerous, never cheap. Each stall wears its own jewel tint; the
 * lights breathe and twinkle out of sync like real bulbs. Motion is
 * transform/opacity only, and all of it stills for reduced motion.
 * ===================================================================== */

/* jewel tints — the colour of light remembered through stained glass */
.tint-violet{--tint:rgba(146,96,220,.34);--tint-soft:rgba(91,42,134,.16);--tint-line:rgba(178,132,255,.5)}
.tint-gold{--tint:rgba(232,179,75,.30);--tint-soft:rgba(201,162,39,.13);--tint-line:rgba(232,179,75,.55)}
.tint-royal{--tint:rgba(201,162,39,.34);--tint-soft:rgba(125,20,32,.16);--tint-line:rgba(255,217,138,.55)}
.tint-amber{--tint:rgba(255,176,84,.30);--tint-soft:rgba(232,179,75,.12);--tint-line:rgba(255,205,120,.5)}
.tint-ruby{--tint:rgba(229,56,59,.30);--tint-soft:rgba(163,22,33,.15);--tint-line:rgba(255,120,130,.5)}
.tint-ember{--tint:rgba(255,110,64,.30);--tint-soft:rgba(163,22,33,.13);--tint-line:rgba(255,150,90,.5)}

/* ---------- the night sky over the midway ---------- */
.fair-hero{position:relative;padding-top:1.2rem}
.fair-sky{position:relative;height:118px;margin:0 -0.4rem 0.2rem;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.fair-skyline{position:absolute;inset:auto 0 0 0;width:100%;height:118px}
.fair-stringlights{position:absolute;top:0;left:2%;right:2%;height:44px;display:flex;justify-content:space-between;align-items:flex-start}
.fair-stringlights span{width:9px;height:9px;border-radius:50%;margin-top:6px;
  background:radial-gradient(circle,#ffe9a8 0%,#e8b34b 55%,rgba(232,179,75,0) 78%);
  box-shadow:0 0 14px 3px rgba(232,179,75,.55);
  animation:bulbTwinkle 3.4s ease-in-out infinite}
.fair-stringlights span:nth-child(2n){margin-top:16px;animation-duration:4.3s;animation-delay:-1.2s}
.fair-stringlights span:nth-child(3n){margin-top:10px;animation-duration:2.9s;animation-delay:-2s}
.fair-stringlights span:nth-child(4n){margin-top:20px;animation-duration:5.1s;animation-delay:-.6s}
.fair-stringlights span:nth-child(5n){animation-duration:3.9s;animation-delay:-2.7s}
@keyframes bulbTwinkle{0%,100%{opacity:1}38%{opacity:.55}55%{opacity:.92}72%{opacity:.66}}
.fair-motes{position:absolute;inset:0;pointer-events:none}
.fair-motes span{position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#ffd98a 0%,#e5383b 60%,transparent 72%);
  opacity:0;animation:moteDrift 13s linear infinite}
.fair-motes span:nth-child(1){left:12%;animation-delay:-2s}
.fair-motes span:nth-child(2){left:30%;animation-duration:17s;animation-delay:-8s}
.fair-motes span:nth-child(3){left:48%;animation-duration:11s;animation-delay:-5s}
.fair-motes span:nth-child(4){left:63%;animation-duration:19s;animation-delay:-12s}
.fair-motes span:nth-child(5){left:78%;animation-duration:14s;animation-delay:-3s}
.fair-motes span:nth-child(6){left:90%;animation-duration:16s;animation-delay:-9s}
@keyframes moteDrift{
  0%{transform:translate(0,0) scale(1);opacity:0}
  10%{opacity:.85}
  55%{opacity:.5}
  78%{transform:translate(16px,-64px) scale(1.5);opacity:.95} /* the occasional flare */
  100%{transform:translate(24px,-104px) scale(.8);opacity:0}
}

/* ---------- tonight's headline ---------- */
.fair-spotlight{margin:1.1rem 0 0.4rem;border-radius:20px;padding:1rem 1.1rem;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--tint-soft),rgba(14,7,18,.66) 60%),var(--glass-pane,rgba(24,12,26,.6));
  border:1px solid var(--tint-line);
  box-shadow:0 16px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,240,205,.16),inset 0 0 44px var(--tint-soft)}
.spot-kicker{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#ffd98a;margin-bottom:.55rem}
.spot-body{display:flex;gap:.95rem;align-items:center;flex-wrap:wrap}
.spot-icon{font-size:2.6rem;filter:drop-shadow(0 0 14px var(--tint))}
.spot-main{flex:1;min-width:200px}
.spot-name{font-family:Georgia,serif;font-size:1.45rem;color:#ffe9b0}
.spot-invite{color:#e6d3c8;font-size:.94rem;line-height:1.55;margin:.2rem 0 0}
.fair-ribbon{display:inline-block;margin:.1rem 0 .7rem;font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#17100a;background:linear-gradient(120deg,#ffd98a,#c9a227);border-radius:999px;padding:.28rem .7rem;
  box-shadow:0 0 16px rgba(201,162,39,.5)}

/* ---------- the passport of lanterns ---------- */
.fair-passport{margin:1rem 0 .4rem;border-radius:20px;padding:1rem 1.1rem;
  background:var(--glass-pane,rgba(24,12,26,.6));border:1px solid rgba(255,236,200,.16);
  box-shadow:0 16px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,205,.13),inset 0 -16px 30px rgba(0,0,0,.26)}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .fair-passport,.fair-spotlight{-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
}
.passport-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.passport-title{font-family:Georgia,serif;font-size:1.15rem;color:#ffe9b0}
.passport-count{font-size:.8rem;color:#b9a8cc}
.passport-lanterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:.55rem;margin-top:.8rem}
.passport-lantern{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.6rem .3rem;border-radius:14px;
  border:1px solid rgba(255,236,200,.12);background:rgba(0,0,0,.24);text-decoration:none;color:#d8cbe0;transition:border-color .25s ease}
.passport-lantern .pl-flame{font-size:1.35rem}
.passport-lantern.unlit{opacity:.55}
.passport-lantern.unlit .pl-flame{filter:grayscale(.75)}
.passport-lantern.lit{border-color:rgba(232,179,75,.55);box-shadow:0 0 16px rgba(232,179,75,.16),inset 0 0 18px rgba(232,179,75,.08)}
.passport-lantern.lit .pl-flame{animation:bulbTwinkle 3.8s ease-in-out infinite}
.pl-label{font-size:.74rem;text-align:center;line-height:1.3}
.pl-state{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#a08090}
.passport-lantern.lit .pl-state{color:#e8b34b}
.passport-note{margin:.7rem 0 0;font-size:.8rem;color:#a08090;font-style:italic}

/* ---------- the midway stalls ---------- */
.midway-h{font-family:Cinzel Decorative,Georgia,serif;text-align:center;color:#ffd700;font-size:1.7rem;margin:.4rem 0 .2rem;text-shadow:0 0 26px rgba(212,175,55,.3)}
.midway-sub{text-align:center;color:#d8b8c8;max-width:32rem;margin:0 auto 1rem;line-height:1.55;font-size:.94rem}
.midway-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem;margin-bottom:.6rem}
.fair-stall{display:flex;flex-direction:column;gap:.35rem;padding:1.05rem 1.05rem 1.15rem;border-radius:86px 86px 18px 18px;
  text-decoration:none;color:#f5e6d3;position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--tint-soft),rgba(12,6,16,.72) 58%),rgba(18,9,22,.66);
  border:1px solid var(--tint-line);
  box-shadow:0 14px 38px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,240,205,.15),inset 0 0 36px var(--tint-soft);
  transition:border-color .25s ease,box-shadow .25s ease}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .fair-stall{-webkit-backdrop-filter:blur(13px) saturate(1.5);backdrop-filter:blur(13px) saturate(1.5)}
}
.fair-stall::before{content:"";position:absolute;inset:7px;border:1px solid var(--tint-line);opacity:.4;pointer-events:none;
  border-radius:78px 78px 13px 13px;
  -webkit-mask:linear-gradient(180deg,#000 0 52%,transparent 84%);mask:linear-gradient(180deg,#000 0 52%,transparent 84%)}
.fair-stall:hover{border-color:#ffd98a;box-shadow:0 18px 46px rgba(0,0,0,.6),0 0 26px var(--tint),inset 0 1px 0 rgba(255,240,205,.2),inset 0 0 36px var(--tint-soft)}
.fair-stall:active{box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 34px var(--tint),inset 0 0 44px var(--tint-soft)}
.stall-icon{font-size:2.2rem;filter:drop-shadow(0 0 12px var(--tint))}
.stall-name{font-family:Georgia,serif;font-size:1.22rem;color:#ffe9b0}
.stall-invite{font-size:.88rem;color:#dcc6d2;line-height:1.5;flex:1}
.stall-state{font-size:.78rem;color:#ffd98a;font-style:italic}
.stall-enter{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffb3cd}

/* ---------- booths: glass interiors ---------- */
.fair-booth{position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--tint-soft,rgba(91,42,134,.10)),rgba(11,6,16,.78) 55%),rgba(16,9,22,.7);
  border:1px solid var(--tint-line,#3d2b52);border-radius:22px;
  box-shadow:0 18px 48px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,240,205,.13),inset 0 0 54px var(--tint-soft,rgba(91,42,134,.08))}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .fair-booth{-webkit-backdrop-filter:blur(15px) saturate(1.5);backdrop-filter:blur(15px) saturate(1.5)}
}
.fair-booth h2{text-shadow:0 0 22px var(--tint,rgba(212,175,55,.3))}

/* tarot — glass frames, and the shimmer when a card is drawn */
.tarot-card{border:1px solid rgba(255,217,138,.55);
  background:linear-gradient(165deg,rgba(70,40,96,.55),rgba(18,9,28,.8));
  box-shadow:0 12px 28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,205,.22),inset 0 0 26px rgba(91,42,134,.25)}
.tarot-face{box-shadow:inset 0 0 0 1px rgba(255,240,205,.10),inset 0 0 22px rgba(0,0,0,.35)}
.tarot-card.just-flipped .tarot-front::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,240,200,.38) 50%,transparent 70%);
  transform:translateX(-110%);animation:tarotShimmer .95s ease-out .18s 1 both}
@keyframes tarotShimmer{to{transform:translateX(110%)}}
.tarot-line{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(0,0,0,.22));
  box-shadow:inset 0 1px 0 rgba(255,240,205,.10)}

/* whisper wall — a candle truly lit changes the air of the row */
.whisper.has-candles{border-color:rgba(232,179,75,.45);
  box-shadow:0 0 18px rgba(232,179,75,.14),inset 0 0 24px rgba(232,179,75,.05)}
.candle-btn.lit{animation:bulbTwinkle 3.6s ease-in-out infinite}

/* ember tales — a glass storybook */
.tale-body{background:linear-gradient(172deg,rgba(48,20,34,.66),rgba(13,7,18,.86) 60%);
  border:1px solid rgba(255,150,160,.35);border-radius:24px;
  box-shadow:0 20px 54px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,205,.14),inset 0 0 60px rgba(163,22,33,.08)}
.tale-card{background:linear-gradient(160deg,rgba(163,22,33,.12),rgba(0,0,0,.28));
  box-shadow:inset 0 1px 0 rgba(255,240,205,.10),0 10px 28px rgba(0,0,0,.45)}

/* match the flames — glass tiles */
.flame-card{border:1px solid rgba(255,217,138,.45);border-radius:14px;
  background:linear-gradient(160deg,rgba(64,32,54,.6),rgba(16,8,22,.85));
  box-shadow:0 8px 20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,240,205,.18),inset 0 0 20px rgba(91,42,134,.18);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.flame-card.open{transform:rotateY(180deg) scale(1.04);border-color:rgba(255,217,138,.8);
  box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 20px rgba(232,179,75,.3),inset 0 0 22px rgba(232,179,75,.12)}
.flame-card.open:not(.matched) .fl-front{transform:rotateY(180deg)}
.flame-card.matched{transform:none}

/* ---------- Halloween keeps the Fair (Oct 1–31, America/New_York) ---------- */
.fair-halloween{--tint-line:rgba(255,150,60,.55)}
.fair-halloween .fair-hero h1{color:#ffb35c;text-shadow:0 0 38px rgba(255,120,40,.45)}
.hw-pumpkin{display:inline-block;font-size:.62em;vertical-align:.18em;margin:0 .18em;
  filter:drop-shadow(0 0 12px rgba(255,140,40,.85));animation:bulbTwinkle 4.2s ease-in-out infinite}
.hw-line{max-width:34rem;margin:0 auto 1rem;padding:.6rem .9rem;border-radius:14px;font-size:.9rem;line-height:1.55;color:#ffd9ae;
  background:linear-gradient(150deg,rgba(255,120,40,.14),rgba(60,20,8,.3));border:1px solid rgba(255,150,60,.45);
  box-shadow:inset 0 0 26px rgba(255,120,40,.08)}
.fair-halloween .fair-stringlights span{
  background:radial-gradient(circle,#ffd9a8 0%,#ff8b3d 55%,rgba(255,120,40,0) 78%);
  box-shadow:0 0 16px 4px rgba(255,130,40,.6)}
.fair-halloween .fair-stall,.fair-halloween .fair-booth{box-shadow:0 18px 48px rgba(0,0,0,.58),0 0 22px rgba(255,120,40,.10),inset 0 1px 0 rgba(255,220,180,.14),inset 0 0 54px var(--tint-soft,rgba(255,120,40,.06))}

/* ---------- stillness ---------- */
@media (prefers-reduced-motion: reduce){
  .fair-stringlights span,.fair-motes span,.passport-lantern.lit .pl-flame,.candle-btn.lit,.hw-pumpkin{animation:none}
  .fair-motes span{opacity:.35}
  .tarot-card.just-flipped .tarot-front::after{animation:none;opacity:0}
  .flame-card{transition:none}
  .flame-card.open{transform:none}
  .flame-card.open:not(.matched) .fl-front{transform:none}
}

/* The Fair Spotlight (build 2026.11.01.11): tonight's burlesque bill. */
.fair-spot{margin:1.1rem 0 .4rem;border-radius:20px;padding:1.05rem 1.1rem;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(64,16,28,.88),rgba(16,8,20,.92) 58%,rgba(46,10,18,.9));
  border:1px solid rgba(255,185,90,.4);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 12px 34px rgba(0,0,0,.45),inset 0 0 44px rgba(255,120,90,.07)}
.fspot-lit,.fspot-dark{display:flex;gap:1rem;align-items:flex-start}
.fspot-face{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid #e8b34b;box-shadow:0 0 18px rgba(232,179,75,.45);flex-shrink:0}
.fspot-face-none{display:flex;align-items:center;justify-content:center;font-size:2.3rem;background:rgba(0,0,0,.35)}
.fspot-main{flex:1;min-width:0}
.fspot-barker{color:#ffb3a0;font-style:italic;font-size:.92rem;margin-bottom:.15rem}
.fspot-name{font-family:Georgia,serif;font-size:1.5rem;color:#ffe9b0;line-height:1.2}
.fspot-show{color:#e9dcc8;font-size:.95rem;margin-top:.2rem}
.fspot-claimed{color:#ffd98a;font-size:.85rem;margin-top:.3rem}
.fspot-actions{margin-top:.55rem}
.fspot-tip{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.8rem;padding-top:.7rem;border-top:1px dashed rgba(255,217,138,.3)}
.fspot-tip-label{color:#e9dcc8;font-size:.9rem}
.fspot-tip-note{color:#b9a888;font-size:.8rem;width:100%}
.fspot-claimrow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.8rem}
.fspot-claimline{color:#e9dcc8;font-size:.92rem;margin-top:.8rem}
.fspot-others{margin-top:.9rem}
.fspot-others-h{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:#ffd98a;margin-bottom:.45rem}
.fspot-other{display:inline-block;margin:0 .4rem .4rem 0;padding:.45rem .7rem;border-radius:999px;border:1px solid rgba(255,217,138,.35);background:rgba(0,0,0,.3);color:#ffe9b0;cursor:pointer;font-size:.88rem}
.fspot-other:hover{border-color:#e8b34b;background:rgba(64,16,28,.6)}
@media (max-width:560px){.fspot-face{width:64px;height:64px}.fspot-name{font-size:1.25rem}}
/* The spotlight's dressing: a row of marquee bulbs along the top of
   the bill, and the portrait ring breathing like candlelight. */
.fair-spot::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;
  background-image:radial-gradient(circle at 5px 5px,#ffd98a 2.6px,rgba(255,217,138,0) 3.4px);
  background-size:26px 10px;background-repeat:repeat-x;opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,190,90,.85))}
.fspot-face{animation:fspotFlicker 3.6s ease-in-out infinite}
@keyframes fspotFlicker{0%,100%{box-shadow:0 0 16px rgba(232,179,75,.4)}38%{box-shadow:0 0 24px rgba(255,150,80,.62)}57%{box-shadow:0 0 13px rgba(232,179,75,.34)}74%{box-shadow:0 0 21px rgba(255,170,90,.55)}}
.fair-spot .spot-kicker{color:#ffcf99;text-shadow:0 0 12px rgba(255,150,80,.35)}
@media (prefers-reduced-motion: reduce){.fspot-face{animation:none}}

/* ---------------- the keyhole (build .27) ----------------
   The landing's taste: the Fair's own omen card and flames booth,
   dealt to a guest who has sworn the gate and dressed exactly as
   the Fair deals them. This block gives them only their place on
   the front door, and dresses the door the taste ends at. */
.keyhole .omen-card { max-width: 720px; margin: 20px auto; }
.keyhole-game { max-width: 720px; margin: 20px auto; text-align: left; }
.keyhole-listen { max-width: 720px; margin: 20px auto; padding: 20px; text-align: left; }
.keyhole-listen audio { width: 100%; margin-top: 10px; }
.keyhole-door { max-width: 720px; margin: 26px auto 6px; text-align: center; }
.keyhole-door-line { font-family: var(--serif); font-size: 1.15rem; color: var(--muted); margin-bottom: 14px; }
.keyhole-door .btn { margin: 0 6px 8px; }