/* The Vailt. Palette from Jace's brief: Night Ink, Bruised Violet, Black Cherry, Bayou Green, Lilac Fog, Old Paper. */
:root {
  --ink: #171117; --ink-soft: #2a1e28; --violet: #75596F; --cherry: #A83456; --bayou: #557260; --lilac: #C7AFD2;
  --paper: #F2EDE3; --paper-deep: #e6ddcf; --cream: #fff9ed; --gold: #d3a85e; --blue: #7590a5;
  --swamp: #557260; --swamp-pale: #9ab19c; --line: rgba(23,17,23,.16); --radius: 26px; --shadow: 0 20px 70px rgba(17,10,16,.17);
  --panel: rgba(23, 17, 23, 0.84);
  --condensed: 'Manrope', 'Arial Narrow', 'Avenir Next Condensed', sans-serif;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Segoe Script', cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper); font: 15px/1.55 var(--sans); }
a { color: var(--lilac); }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; margin: 0 0 0.4em; line-height: 1.15; }
h1 { font-size: 2.1rem; } h2 { font-size: 1.4rem; color: var(--lilac); }
.fine { font-size: 0.8rem; color: var(--lilac); opacity: 0.85; }
.btn, button { background: var(--cherry); color: var(--paper); border: 0; padding: 0.6em 1.3em; font: 600 0.9rem var(--sans); letter-spacing: 0.04em; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-block; }
button.danger { background: #5a1c2b; } button.ok { background: var(--bayou); }
main { padding: 1rem; max-width: 900px; margin: 0 auto; }
main.wide { max-width: none; padding: 0; }
.hero { text-align: center; padding: 14vh 1rem; }
.hero h1 { font-size: 3rem; font-style: italic; }

/* Emblem menu: the seal sits top centre; tapping it slides it left and the options fan out beside it. */
.menu { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 0.6rem; height: 52px; }
.emblem { width: 56px; height: 56px; padding: 0; border-radius: 50%; background: none; border: 0; filter: drop-shadow(0 0 3px rgba(255,220,230,.9)) drop-shadow(0 0 12px rgba(168,52,86,.95)) drop-shadow(0 0 26px rgba(168,52,86,.6)); animation: emblemglow 3s ease-in-out infinite; transition: transform .5s ease, filter .5s ease; flex: none; }
@keyframes emblemglow { 0%,100% { filter: drop-shadow(0 0 3px rgba(255,220,230,.8)) drop-shadow(0 0 10px rgba(168,52,86,.85)) drop-shadow(0 0 22px rgba(168,52,86,.5)); } 50% { filter: drop-shadow(0 0 4px rgba(255,220,230,1)) drop-shadow(0 0 16px rgba(168,52,86,1)) drop-shadow(0 0 34px rgba(168,52,86,.75)); } }
.emblem img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.emblem:hover, .menu.open .emblem { transform: scale(1.12); animation: none; filter: drop-shadow(0 0 4px rgba(255,220,230,1)) drop-shadow(0 0 18px rgba(168,52,86,1)) drop-shadow(0 0 40px rgba(168,52,86,.9)); }
.drawer { display: flex; align-items: center; gap: 0.3rem; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 0.35s ease, opacity 0.25s ease; white-space: nowrap; }
.menu.open .drawer { max-width: 700px; opacity: 1; }
.drawer a { text-decoration: none; color: var(--paper); background: var(--panel); border: 1px solid var(--violet); border-radius: 999px; padding: 0.35em 0.9em; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.drawer a:hover { color: var(--lilac); border-color: var(--lilac); }
.drawer .who { display: flex; align-items: center; gap: 0.4rem; color: var(--lilac); font-size: 0.8rem; margin-left: 0.4rem; }
.drawer img, .av { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
.drawer .leave { color: var(--violet); }
.back { position: fixed; top: 18px; left: 16px; z-index: 50; text-decoration: none; color: var(--paper); background: var(--panel); border: 1px solid var(--violet); border-radius: 999px; padding: 0.4em 1em; font-size: 0.78rem; letter-spacing: 0.04em; }
.back:hover { color: var(--lilac); border-color: var(--lilac); }
main:not(.wide) { padding-top: 76px; }

/* Full-screen scenes, art as background, hotspots in percent. */
.scene { position: relative; width: 100%; height: 100vh; height: 100dvh; margin: 0 auto; background: center / cover no-repeat var(--ink); overflow: hidden; }
.scene > img.layer { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel { position: absolute; left: 4%; bottom: 6%; max-width: 44%; background: var(--panel); padding: 1.1rem 1.3rem; border: 1px solid var(--violet); border-radius: 10px; backdrop-filter: blur(5px); }
main:not(.wide) .panel { position: static; max-width: none; }

/* Map pins (temporary, until the layered art lands). */
.pin { position: absolute; transform: translate(-50%, -50%); text-decoration: none; color: var(--paper); display: flex; flex-direction: column; align-items: center; }
.pin .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--paper); background: var(--cherry); box-shadow: 0 0 14px var(--cherry); }
.pin.locked .dot { background: var(--violet); box-shadow: none; opacity: 0.5; }
.pin.locked { cursor: not-allowed; opacity: 0.7; }
.pin .label { margin-top: 4px; background: var(--panel); padding: 2px 9px; border-radius: 999px; white-space: nowrap; text-align: center; font-family: var(--serif); font-size: 0.95rem; }
.pin .label small { display: none; }
.pin:hover .label small { display: block; font-family: var(--sans); font-size: 0.7rem; color: var(--lilac); }
.pin.open:hover .dot { transform: scale(1.3); }

/* Cover scenes: the 16:9 art fills the screen with no gaps, anchored to the bottom so tables stay in view;
   whatever overflows is cropped, never scrolled. Percent positions stay exact relative to the art. */
.scene.cover { width: max(100vw, calc(100dvh * 16 / 9)); height: max(100dvh, calc(100vw * 9 / 16)); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.scene.cover .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
body:has(.scene.cover), body:has(.scene.fit) { overflow: hidden; }

/* Full-screen scenes: the 16:9 art fills the window edge to edge. Whatever doesn't fit is cropped,
   and each scene says which edge it holds on to: top, center or bottom. */
.scene.fit { position: absolute; inset: 0; width: 100vw; height: 100dvh; overflow: hidden; }
.scene.fit { --ar: 1.7778; }
.scene.fit .frame { position: absolute; left: 50%; width: max(100vw, calc(100dvh * var(--ar))); aspect-ratio: var(--ar); transform: translateX(-50%); }
.scene.fit.top .frame { top: 0; }
.scene.fit.bottom .frame { bottom: 0; }
.scene.fit.center .frame { top: 50%; transform: translate(-50%, -50%); }
.scene.fit .layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Scene transitions: the next page is fetched and dissolved over the current one (see site.js). */
#page, #page-old { position: relative; }
#page-old { z-index: 80; }
.fade-out { transition: opacity 0.8s ease; opacity: 0; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }

/* Invitation */
.invitation .mail { position: absolute; left: 54%; top: 77%; width: 38%; aspect-ratio: 1672 / 941; transform: translate(-50%, -50%); filter: brightness(1) blur(0px) drop-shadow(0 14px 18px rgba(0,0,0,0.55)); transition: filter 0.3s ease 1.5s; }
.invitation .envelope { position: absolute; inset: 0; width: 100%; height: 100%; }
.invitation .seal { position: absolute; left: 50%; top: 68%; width: 19%; aspect-ratio: 1; transform: translate(-50%, -50%); background: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.6)); transition: transform 0.2s; }
.invitation .seal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.invitation .seal .broken { opacity: 0; }
.invitation .seal:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.06); }
.invitation.is-shaking .seal { animation: crack 0.7s ease-in-out; }
@keyframes crack { 0%,100% { transform: translate(-50%, -50%); }
  10% { transform: translate(-54%, -54%); } 20% { transform: translate(-46%, -46%); } 30% { transform: translate(-53%, -55%) rotate(1deg); } 40% { transform: translate(-47%, -45%); }
  50% { transform: translate(-55%, -53%) rotate(-1deg); } 60% { transform: translate(-45%, -47%); } 70% { transform: translate(-52%, -54%); } 80% { transform: translate(-48%, -46%) rotate(1deg); } 90% { transform: translate(-51%, -52%); } }}
.invitation.is-broken .seal .intact { opacity: 0; transition: opacity 0.2s; }
.invitation.is-broken .seal .broken { opacity: 1; transition: opacity 0.2s; }
.invitation.is-broken .mail { filter: brightness(0.55) blur(1px) drop-shadow(0 14px 18px rgba(0,0,0,0.55)); }
.invitation .paper { position: absolute; left: 50%; top: 50%; width: min(46vw, 640px); max-height: calc(100dvh - 40px); overflow-x: hidden; overflow-y: auto; transform: translate(-50%, -40%); opacity: 0; pointer-events: none; background: var(--paper); color: var(--ink); padding: 2.2rem 2.4rem; border-radius: 3px; box-shadow: 0 20px 70px rgba(0,0,0,0.7); font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; transition: opacity 0.7s ease 1.7s, transform 0.7s ease 1.7s; }
.invitation.is-broken .paper { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.invitation.is-closed .paper { opacity: 0; pointer-events: none; transform: translate(-50%, -46%); transition-delay: 0s; }
.invitation.is-closed .mail { filter: brightness(1) blur(0px) drop-shadow(0 14px 18px rgba(0,0,0,0.55)); transition-delay: 0s; }
.invitation.is-broken .seal { cursor: pointer; }
.invitation.is-settled .mail, .invitation.is-settled .paper, .invitation.is-settled .seal img { transition-delay: 0s; transition-duration: 0s; }
.paper .big { font-size: 1.5rem; font-style: italic; }
.paper p { margin: 0 0 0.8em; }
.strike { text-decoration: line-through; text-decoration-color: var(--cherry); text-decoration-thickness: 2px; }
.ink { font-family: var(--hand); font-size: 1.6rem; color: #2a1a22; transform: rotate(-2deg); display: inline-block; }
.move { border-top: 1px solid var(--violet); padding-top: 0.8rem; margin-top: 0.6rem !important; font-family: var(--sans); font-size: 0.85rem; }
.paper .fine { color: var(--violet); opacity: 1; }

/* Tables (admin, leaderboard) */
.grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 1.5rem; }
.grid th, .grid td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--ink-soft); vertical-align: top; }
.grid th { color: var(--lilac); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.actions form { display: inline-block; margin: 0 0.3rem 0.3rem 0; }
.actions button, .inline button { padding: 0.3em 0.8em; font-size: 0.75rem; }
main.wide section { padding: 1rem 1.5rem; }
main.wide > h1 { padding: 76px 1.5rem 0; }
select, input { font: inherit; padding: 0.3em 0.5em; background: var(--ink-soft); color: var(--paper); border: 1px solid var(--violet); border-radius: 6px; }

/* Landscape-only on phones. */
#rotate { display: none; position: fixed; inset: 0; z-index: 99; background: var(--ink); color: var(--paper); align-items: center; justify-content: center; text-align: center; font-family: var(--serif); font-size: 1.3rem; }
#rotate .phone { font-size: 4rem; animation: tilt 1.6s ease-in-out infinite alternate; }
@keyframes tilt { from { transform: rotate(0deg); } to { transform: rotate(-90deg); } }
@media (max-width: 900px) and (orientation: portrait) { #rotate { display: flex; } }
@media (max-height: 500px) {
  .menu { top: 6px; height: 40px; } .emblem { width: 40px; height: 40px; }
  .drawer a { font-size: 0.68rem; padding: 0.3em 0.7em; } .back { top: 12px; font-size: 0.68rem; }
  .panel { padding: 0.6rem 0.8rem; max-width: 55%; font-size: 0.8rem; } .panel h1 { font-size: 1.3rem; }
  .invitation .paper { padding: 1rem 1.2rem; font-size: 0.85rem; width: 56%; } .paper .big { font-size: 1.1rem; } .ink { font-size: 1.2rem; }
}

/* Hotspots: a soft breathing glow where something can be clicked. */
.hot { position: absolute; transform: translate(-50%, -50%); border-radius: 14px; border: 0; padding: 0; cursor: pointer; background: radial-gradient(ellipse at center, rgba(199,175,210,0.22), rgba(199,175,210,0) 70%); box-shadow: 0 0 0 1px rgba(199,175,210,0.25), 0 0 28px rgba(199,175,210,0.35); animation: breathe 2.6s ease-in-out infinite; text-decoration: none; display: flex; align-items: flex-end; justify-content: center; }
.hot span { font: 500 0.8rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: var(--panel); padding: 0.25em 0.8em; border-radius: 999px; margin-bottom: -0.9rem; opacity: 0; transition: opacity 0.2s; }
.hot:hover span { opacity: 1; }
.hot:hover { box-shadow: 0 0 0 1px rgba(199,175,210,0.6), 0 0 40px rgba(199,175,210,0.7); animation: none; }
@keyframes breathe { 0%,100% { box-shadow: 0 0 0 1px rgba(199,175,210,0.2), 0 0 18px rgba(199,175,210,0.25); } 50% { box-shadow: 0 0 0 1px rgba(199,175,210,0.45), 0 0 36px rgba(199,175,210,0.55); } }
.corner { position: fixed; z-index: 50; text-decoration: none; color: var(--paper); background: var(--panel); border: 1px solid var(--violet); border-radius: 999px; padding: 0.4em 1em; font-size: 0.78rem; letter-spacing: 0.04em; }
.corner:hover { color: var(--lilac); border-color: var(--lilac); }
.corner.bl { left: 16px; bottom: 16px; }
.corners.bl { position: fixed; left: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.corners .corner { position: static; }
.mykey { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 0.5rem; background: var(--panel); border: 1px solid var(--violet); border-radius: 999px; padding: 0.3em 1em 0.3em 0.4em; font-size: 0.8rem; }
.mykey img { height: 34px; }

/* The key cabinet: a modal with the velvet cabinet, keys hung on their hooks. */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(23,17,23,0.75); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; gap: 2vw; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s linear .45s; }
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s ease, visibility 0s; }
.modal > * { transform: translateY(10px); transition: transform .45s ease; }
.modal.open > * { transform: translateY(0); }
.cabinet { position: relative; flex: none; height: 92vh; height: 92dvh; aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px var(--ink), 0 30px 80px rgba(0,0,0,0.8); }
.cab-img { width: 100%; height: 100%; display: block; }
.ckey { position: absolute; transform: translate(-50%, -50%); width: 21%; background: none; border: 0; padding: 0; cursor: pointer; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6)); transition: transform 0.2s, filter 0.2s; }
.ckey > img { width: 100%; display: block; }
button.ckey:hover { transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 14px rgba(199,175,210,0.9)); }
.ckey.midnight { width: 42%; cursor: default; }
.ckey.still { cursor: default; opacity: 0.9; }
.card.note { font-family: var(--serif); transition: opacity 1s ease; }
.card.note .big { font-size: 1.4rem; font-style: italic; }
.card.note.gone { opacity: 0; pointer-events: none; }
.close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; padding: 0; font-size: 1.3rem; line-height: 1; background: var(--panel); border: 1px solid var(--violet); }
.cards { width: min(34vw, 420px); flex: none; }
.card { position: relative; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 1.2rem 1.4rem; box-shadow: 0 20px 60px rgba(0,0,0,0.7); animation: arrive 0.3s ease both; }
.card img { width: 45%; display: block; margin: -0.5rem auto 0; }
.card h2 { font-size: 1.5rem; margin: 0 0 0.4rem; text-align: center; }
.card .fine { color: var(--violet); opacity: 1; }
.card p { margin: 0 0 0.6rem; }
button.alt { background: var(--violet); }
@media (max-height: 500px) {
  .cabinet { height: 96dvh; } .cards { width: 40vw; } .card { padding: 0.7rem 0.9rem; font-size: 0.8rem; } .card img { width: 30%; } .card h2 { font-size: 1.1rem; }
  .corner, .mykey { font-size: 0.68rem; bottom: 8px; } .corner.bl, .corners.bl { left: 8px; bottom: 8px; } .mykey { right: 8px; } .mykey img { height: 26px; }
}

/* The pool: visual-novel staging. Background, then Jace from the right, then the dialogue box. */
.figure { position: absolute; z-index: 5; pointer-events: auto; cursor: pointer; }
.figure.jace { right: 3%; bottom: -2%; height: 92%; opacity: 0; transform: translateX(30%); filter: drop-shadow(0 0 30px rgba(0,0,0,0.7)); transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.2,.8,.2,1); }
.pool.jace-in .figure.jace { opacity: 1; transform: translateX(0); }
.pool.is-settled .figure.jace { transition: none; }
.bats { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.bat { position: absolute; opacity: 0; animation: flyoff 2s ease-out forwards; }
@keyframes flyoff { 0% { opacity: 0; transform: translate(0, 40px) scale(0.6); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: translate(-120px, -260px) rotate(-20deg) scale(1.2); } }
.dialogue { position: absolute; z-index: 7; right: 34%; bottom: 14%; width: 24%; min-width: 260px; max-width: 360px; background: rgba(242,237,227,0.96); color: var(--ink); border-radius: 14px; padding: 1.4rem 1.6rem 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.7); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.pool.talk .dialogue { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dialogue .speaker { position: absolute; top: -14px; left: 18px; background: var(--cherry); color: var(--paper); font: 600 0.75rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3em 0.9em; border-radius: 999px; }
.dialogue p { margin: 0 0 0.6rem; }
.dialogue .big { font-size: 1.5rem; font-style: italic; }
.dialogue .drink { border-left: 3px solid var(--cherry); padding-left: 0.8rem; }
.dialogue .hand { font-family: var(--hand); font-size: 1.3rem; color: #2a1a22; }
@media (max-height: 500px) {
  .figure.jace { height: 96%; right: 1%; }
  .dialogue { width: 30%; min-width: 220px; right: 32%; padding: 0.8rem 1rem 0.6rem; font-size: 0.8rem; bottom: 6%; } .drink-art { height: 70px; } .dialogue .big { font-size: 1.1rem; } .dialogue .hand { font-size: 1rem; }
}

/* Pool extras */
.drink-art { height: 120px; margin: 0.4rem 0 0.8rem; border: 1px dashed var(--violet); border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font: 500 0.7rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
.hot.off { display: none; }
.hot.glasses { border-radius: 50%; animation-duration: 1.6s; }
.prompt { white-space: pre-wrap; font: 0.85rem/1.4 var(--sans); background: rgba(23,17,23,0.06); border: 1px solid rgba(23,17,23,0.15); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 0.6rem; user-select: all; }
label.btn.disabled { opacity: 0.4; pointer-events: none; }
.gallery-box { position: relative; width: min(92vw, 1100px); max-height: 90dvh; overflow: auto; background: var(--panel); border: 1px solid var(--violet); border-radius: 14px; padding: 1.2rem 1.4rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; }
.gallery-grid figure { margin: 0; }
.gallery-grid img:not(.av) { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.gallery-grid figcaption { font-size: 0.75rem; color: var(--lilac); margin-top: 0.3rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.gallery-grid.admin figcaption { display: block; }

/* Jace, on a return visit: a translucent shape by the water until you reach for him. */
.pool.ghost .figure.jace { opacity: 0.38; filter: drop-shadow(0 0 30px rgba(0,0,0,0.7)) saturate(0.6); transition: opacity 0.5s ease, filter 0.5s ease; }
.pool.ghost .figure.jace:hover { opacity: 1; filter: drop-shadow(0 0 30px rgba(0,0,0,0.7)) saturate(1); }

/* The alley clue */
.bats.alley { z-index: 4; }
.bat.dark { opacity: 0; animation-name: rise; }
@keyframes rise {
  0% { opacity: 0; transform: translate(0, 20px) scale(0.5) rotate(0); }
  12% { opacity: 0.6; }
  35% { transform: translate(var(--wx), calc(var(--dy) * 0.35)) scale(0.9) rotate(calc(var(--rot) * -0.6)); }
  65% { opacity: 0.5; transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.7)) scale(1.05) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(calc(var(--rot) * 0.4)); } }

/* Props: small objects lying in a scene, clickable, no glow box; they catch the light on hover. */
.prop { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; z-index: 3; }
.prop img { width: 100%; display: block; }
.prop.horseshoe img { transform: rotate(-24deg) scaleY(0.78); filter: drop-shadow(0 4px 4px rgba(0,0,0,0.7)) drop-shadow(0 -6px 10px rgba(199,175,210,0.25)); transition: filter 0.3s, transform 0.3s; }
.prop.horseshoe:hover img { filter: drop-shadow(0 4px 4px rgba(0,0,0,0.7)) drop-shadow(0 0 14px rgba(199,175,210,0.9)); transform: rotate(-24deg) scaleY(0.78) scale(1.08); }

/* Mini bats orbiting the haunted back button */
.corners.haunted { position: fixed; }
.minibat { position: absolute; left: 60px; bottom: 10px; pointer-events: none; animation: orbit var(--d) linear infinite; animation-delay: calc(var(--o) * -1); }
@keyframes orbit {
  0% { transform: rotate(0deg) translateX(var(--r)) rotate(0deg) translateY(0); opacity: 0.2; }
  25% { opacity: 0.6; transform: rotate(90deg) translateX(var(--r)) rotate(-90deg) translateY(-6px); }
  50% { opacity: 0.35; transform: rotate(180deg) translateX(var(--r)) rotate(-180deg) translateY(4px); }
  75% { opacity: 0.6; transform: rotate(270deg) translateX(var(--r)) rotate(-270deg) translateY(-5px); }
  100% { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg) translateY(0); opacity: 0.2; } }

/* Ksena on the balcony: the gold lives inside the figure. ::after breathes all the time; ::before is the hover wash,
   fading in and out over 0.9s so nothing ever snaps. Outside: only a wide, faint halo. */
.figure-hot { position: absolute; transform: translate(-50%, -50%); z-index: 4; display: block; cursor: default; }
.figure-hot img { width: 100%; display: block; filter: drop-shadow(0 0 28px rgba(211,168,94,0.22)); transition: filter 0.9s ease; }
.figure-hot::after, .figure-hot::before { content: ''; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; mix-blend-mode: screen; }
.figure-hot::after { background: radial-gradient(ellipse at 50% 42%, rgba(255,232,170,0.75), rgba(211,168,94,0.35) 45%, rgba(211,168,94,0) 78%); animation: innerbreath 3.4s ease-in-out infinite; }
@keyframes innerbreath { 0%,100% { opacity: 0.22; } 50% { opacity: 0.5; } }
.figure-hot::before { background: radial-gradient(ellipse at 50% 40%, rgba(255,240,200,0.9), rgba(211,168,94,0.5) 50%, rgba(211,168,94,0) 80%); opacity: 0; transition: opacity 0.9s ease; }
.figure-hot.on { cursor: pointer; }
.figure-hot.on img { filter: drop-shadow(0 0 36px rgba(211,168,94,0.45)); }
.figure-hot.on::before { opacity: 0.7; }
.sparks { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.spark { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; background: radial-gradient(circle, #fff6d8, var(--gold) 60%, transparent 70%); box-shadow: 0 0 8px var(--gold); animation: sparkfly 1.1s ease-out forwards; }
@keyframes sparkfly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(180deg); } }

/* The salon */
.hot.deck.lit { animation: none; box-shadow: 0 0 0 1px rgba(211,168,94,0.8), 0 0 36px rgba(211,168,94,0.9); background: radial-gradient(ellipse, rgba(211,168,94,0.35), transparent 70%); }
.hot.deck.lit span { opacity: 1; background: var(--gold); color: var(--ink); }
.cards.wide { width: min(44vw, 560px); }
textarea { width: 100%; font: 1rem/1.4 var(--sans); padding: 0.6rem 0.8rem; border: 1px solid var(--violet); border-radius: 8px; background: #fff; color: var(--ink); resize: vertical; }
.ghostbtn { background: transparent; color: var(--violet); border: 1px dashed var(--violet); }
.ghostbtn:hover { border-style: solid; }
.reading { font-family: var(--serif); font-size: 1.1rem; white-space: normal; }
.spread { width: 100%; border-radius: 8px; display: block; margin: 0.4rem 0 0.6rem; }
.spread.small { max-width: 260px; margin-top: 0.5rem; }

/* Séance desk */
.badge { display: inline-block; background: var(--cherry); color: var(--paper); font: 600 0.8rem var(--sans); padding: 0.1em 0.6em; border-radius: 999px; vertical-align: middle; }
.q { display: flex; gap: 1rem; padding: 1rem; margin-bottom: 0.8rem; background: rgba(42,30,40,0.6); border: 1px solid var(--violet); border-radius: 12px; }
.q.done { opacity: 0.75; }
.q .av.blur { width: 44px; height: 44px; filter: blur(6px) saturate(0.6); flex: none; }
.q .qbody { flex: 1; min-width: 0; }
.q .question { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 0.3rem; }
.q .answer textarea { background: var(--ink-soft); color: var(--paper); }

/* The toast (the fortune teller has answered) is styled at the end of the file, with night four. */
@media (max-height: 500px) { .cards.wide { width: 52vw; } .ball { width: 120px; } }

/* The satchel and the tray */
.satchel { position: fixed; top: 10px; right: 16px; z-index: 55; width: 58px; height: 58px; padding: 0; background: none; border: 0; filter: drop-shadow(0 0 3px rgba(255,245,220,.9)) drop-shadow(0 0 12px rgba(211,168,94,.95)) drop-shadow(0 0 26px rgba(211,168,94,.6)); animation: bagglow 3.4s ease-in-out infinite; transition: transform .5s ease, filter .5s ease; }
@keyframes bagglow { 0%,100% { filter: drop-shadow(0 0 3px rgba(255,245,220,.8)) drop-shadow(0 0 10px rgba(211,168,94,.85)) drop-shadow(0 0 22px rgba(211,168,94,.5)); } 50% { filter: drop-shadow(0 0 4px rgba(255,245,220,1)) drop-shadow(0 0 16px rgba(211,168,94,1)) drop-shadow(0 0 34px rgba(211,168,94,.75)); } }
.satchel-ico { width: 100%; height: 100%; object-fit: contain; display: block; }
.satchel-ico { font-size: 1.4rem; line-height: 1; }
.satchel:hover { transform: scale(1.12); animation: none; filter: drop-shadow(0 0 4px rgba(255,245,220,1)) drop-shadow(0 0 18px rgba(211,168,94,1)) drop-shadow(0 0 40px rgba(211,168,94,.9)); }
.satchel.pulse { animation: satchelpulse 1.6s ease-in-out infinite; }
@keyframes satchelpulse { 0%,100% { filter: drop-shadow(0 0 3px rgba(255,245,220,.9)) drop-shadow(0 0 10px rgba(211,168,94,.9)) drop-shadow(0 0 20px rgba(211,168,94,.5)); } 50% { filter: drop-shadow(0 0 5px rgba(255,245,220,1)) drop-shadow(0 0 22px rgba(211,168,94,1)) drop-shadow(0 0 48px rgba(211,168,94,1)); } }
.satchel-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); }
.tray { position: fixed; top: 0; right: 0; left: 0; z-index: 54; display: flex; justify-content: flex-end; padding: 68px 16px 0; pointer-events: none; }
.tray-inner { pointer-events: auto; width: min(92vw, 520px); background: var(--panel); border: 1px solid var(--violet); border-radius: 16px; padding: 1rem 1.2rem 0.8rem; backdrop-filter: blur(6px); box-shadow: 0 20px 60px rgba(0,0,0,0.6); opacity: 0; transform: translateY(-16px); transition: opacity 0.45s ease, transform 0.45s ease; }
.tray.open .tray-inner { opacity: 1; transform: translateY(0); }
.tray:not(.open) .tray-inner { pointer-events: none; }
.tray h2 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.slot { position: relative; background: rgba(0,0,0,0.3); border: 1px solid var(--violet); border-radius: 10px; padding: 0.45rem 0.5rem 0.4rem; text-align: center; color: var(--paper); font: inherit; cursor: default; transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease; letter-spacing: 0; }
.slot img, .slot .emo { height: 50px; display: block; margin: 0 auto 0.25rem; object-fit: contain; font-size: 1.9rem; line-height: 50px; }
.slot-name { display: block; font-family: var(--serif); font-size: .9rem; }
.slot-text { display: block; font-size: .62rem; color: var(--lilac); margin-top: .1rem; line-height: 1.3; }
.slot.usable, .slot[data-id="tarot"] { cursor: grab; }
.slot.usable:hover, .slot[data-id="tarot"]:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(211,168,94,0.5); transform: translateY(-2px); }
.slot.new { border-color: var(--gold); box-shadow: 0 0 14px rgba(211,168,94,0.45); }
.slot.empty { opacity: 0.35; border-style: dashed; }
.tray-hint { margin: 0.6rem 0 0; }
.carry { position: fixed; z-index: 120; pointer-events: none; transform: translate(-50%, -60%) scale(0.6); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.7)) drop-shadow(0 0 16px rgba(211,168,94,0.6)); }
.carry.lifted { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-10deg); }
.carry img { height: 90px; }
body.carrying { cursor: grabbing; }
body.carrying [data-accepts] { box-shadow: 0 0 0 2px rgba(211,168,94,0.6), 0 0 30px rgba(211,168,94,0.7); }

/* The chapel */
.lockspot { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: none; border: 0; padding: 0; cursor: pointer; z-index: 5; transition: box-shadow 0.6s ease; }
.lock-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(199,175,210,0.35), 0 0 22px rgba(199,175,210,0.45); animation: breathe 2.6s ease-in-out infinite; transition: opacity 0.8s ease; }
.lockspot.done .lock-ring { opacity: 0; animation: none; }
.lockspot.hover .lock-ring { box-shadow: 0 0 0 2px rgba(211,168,94,0.8), 0 0 34px rgba(211,168,94,0.9); animation: none; }
.lockspot.nudge .lock-ring { animation: nudge 0.9s ease; }
@keyframes nudge { 0%,100% { transform: scale(1); } 30% { transform: scale(1.25); box-shadow: 0 0 0 2px rgba(211,168,94,0.8), 0 0 34px rgba(211,168,94,0.9); } }
.bellglow { position: absolute; transform: translate(-50%, -50%); width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,235,180,0.9), rgba(211,168,94,0.35) 45%, transparent 70%); opacity: 0; mix-blend-mode: screen; transition: opacity 1.2s ease; pointer-events: none; }
.church.is-rung .bellglow { animation: bellflash 2.6s ease-out forwards; }
.church.is-settled .bellglow { animation: none; }
@keyframes bellflash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.hoofs { position: absolute; inset: 0; pointer-events: none; }
.hoof { position: absolute; width: 1.6%; aspect-ratio: 20 / 24; transform: translate(-50%, -50%) rotate(var(--r)); opacity: 0; transition: opacity 1.1s ease; }
.hoof:nth-child(even) { transform: translate(-50%, -50%) rotate(var(--r)) translateX(-70%); }
.hoof svg { width: 100%; height: 100%; fill: rgba(245,240,255,0.78); filter: drop-shadow(0 0 4px rgba(199,175,210,0.9)) blur(0.2px); }
.hoof.show { opacity: 1; }
.church .after { position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, 10px); margin: 0; max-width: 60%; text-align: center; font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--paper); text-shadow: 0 2px 10px #000; opacity: 0; transition: opacity 1.2s ease, transform 1.2s ease; }
.church .after.show, .church.is-settled .after { opacity: 1; transform: translate(-50%, 0); }
.corner.br { right: 16px; bottom: 16px; background: var(--panel); color: var(--lilac); }
@media (max-height: 500px) { .satchel { width: 40px; height: 40px; top: 6px; right: 8px; } .tray { padding-top: 50px; } .slot img, .slot .emo { height: 44px; line-height: 44px; font-size: 1.6rem; } .corner.br { right: 8px; bottom: 8px; } }

/* Visual-novel dialogue box: wide, bottom centre, every line fades. */
.scene.vn { cursor: pointer; }
.vnbox { position: absolute; z-index: 7; left: 50%; bottom: 6%; width: min(72%, 900px); transform: translate(-50%, 16px); background: rgba(242,237,227,0.96); color: var(--ink); border-radius: 14px; padding: 1.4rem 1.8rem 1.1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.vnbox.show { opacity: 1; transform: translate(-50%, 0); }
.vn-line { position: relative; }
.vnbox .speaker { position: absolute; top: calc(-1.4rem - 14px); left: 4px; background: var(--cherry); color: var(--paper); font: 600 0.75rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3em 0.9em; border-radius: 999px; }
.vnbox p { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; }
.vnbox .big { font-size: 1.5rem; font-style: italic; margin-bottom: 0.4rem; }
.vnbox p + p { font-family: var(--sans); font-size: 0.95rem; margin-top: 0.5rem; }
.vn-line { transition: opacity 0.38s ease, transform 0.38s ease; }
.vn-line.out { opacity: 0; transform: translateY(-6px); }
.vn-line.in { opacity: 0; transform: translateY(6px); }
.vn-cue { position: absolute; right: 18px; bottom: 8px; font: 500 0.65rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }
@media (max-height: 500px) { .vnbox { width: 80%; padding: 0.8rem 1rem 1.3rem; bottom: 4%; } .vnbox .speaker { top: calc(-0.8rem - 14px); } .vnbox p { font-size: 1rem; } .vnbox .stage { font-size: 1rem; } .vnbox .big { font-size: 1.1rem; } }

/* The swarm over the ASK ONCE card: shoo eight bats to read it. */

/* Bats are one SVG shape (from Jace's brief), never an emoji. */
.bat, .minibat, .swarm-bat { line-height: 0; }
.bat svg, .minibat svg, .swarm-bat svg { width: 100%; height: auto; display: block; fill: currentColor; }
.bat { color: #171117; width: 30px; }
.bat.dark { color: #0b070b; filter: blur(0.3px); }
.minibat { width: var(--s); color: #0b070b; filter: none; opacity: 0.6; }

/* ===== Styles copied from Jace's brief ===== */
.kicker { display: block; color: var(--cherry); font: 800 .7rem/1 var(--condensed); letter-spacing: .16em; text-transform: uppercase; margin-bottom: .5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .72rem 1rem; border: 1px solid var(--ink); border-radius: 999px; color: var(--cream); background: var(--ink); font: 800 .78rem var(--sans); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.button:hover { color: var(--ink); background: var(--lilac); border-color: var(--lilac); }
.button.secondary { color: var(--ink); background: transparent; }
.button.secondary:hover { background: var(--paper-deep); }
.button-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; justify-content: center; }

/* Dialogs: cream, 28px, deep shadow; backdrop dark and blurred. */
.modal { background: rgba(17,10,16,.78); backdrop-filter: blur(8px); }
.card { border-radius: 28px; background: var(--cream); box-shadow: 0 35px 120px rgba(0,0,0,.45); padding: 1.7rem; width: min(560px, calc(100vw - 2rem)); }
.cards { width: min(560px, calc(100vw - 2rem)); }
.cards.wide { width: min(620px, calc(100vw - 2rem)); }
.card h2 { font: 500 2.3rem/1 var(--serif); margin: .5rem 0 .7rem; text-align: left; }
.card button:not(.button), .card .btn, label.btn { border-radius: 999px; min-height: 46px; padding: .72rem 1rem; border: 1px solid var(--ink); color: var(--cream); background: var(--ink); font: 800 .78rem var(--sans); letter-spacing: .09em; text-transform: uppercase; transition: background .35s ease, color .35s ease; }
.card button:not(.button):hover, .card .btn:hover, label.btn:hover { color: var(--ink); background: var(--lilac); border-color: var(--lilac); }
.card button.alt, .card .ghostbtn { color: var(--ink); background: transparent; }
.card button.alt:hover, .card .ghostbtn:hover { background: var(--paper-deep); }

/* The bat field: the whole screen is Jace's dark field; the clue card sits in the middle. */
.modal.field { padding: 0; }
.bat-field { position: relative; width: min(1100px, calc(100vw - 2rem)); height: min(620px, calc(100dvh - 2rem)); border: 1px solid rgba(255,249,237,.2); border-radius: var(--radius); background: linear-gradient(rgba(27,20,27,.36), rgba(27,20,27,.68)); overflow: hidden; box-shadow: var(--shadow); }
.bat-clue { position: absolute; left: 50%; top: 50%; width: min(620px, calc(100% - 2rem)); padding: 1.6rem; border-radius: 20px; color: var(--ink); background: rgba(242,237,227,.95); box-shadow: 0 20px 70px rgba(0,0,0,.3); transform: translate(-50%, -50%); display: grid; grid-template-columns: 120px 1fr; gap: 1.2rem; align-items: center; text-align: left; }
.clue-shoe { width: 120px; transform: rotate(-18deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.bat-clue .locked { opacity: .52; filter: blur(4px); user-select: none; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; transition: opacity .9s ease, filter .9s ease; }
.bat-clue.is-open .locked { opacity: 1; filter: none; user-select: auto; }
.bat-clue .clue-actions { margin: 1rem 0 0; opacity: 0; transition: opacity .9s ease .4s; }
.bat-clue.is-open .clue-actions { opacity: 1; }
.bat-counter { position: absolute; left: 1rem; bottom: 1rem; z-index: 8; padding: .5rem .75rem; border-radius: 999px; color: var(--cream); background: rgba(23,17,23,.86); font: 700 .75rem var(--sans); }
.bat-field .bat { position: absolute; z-index: 6; left: var(--x); top: var(--y); width: calc(44px * var(--scale)); height: calc(44px * var(--scale)); display: grid; place-items: center; padding: 0; border: 0; color: #090609; background: transparent; cursor: pointer; opacity: 1; filter: drop-shadow(0 5px 4px rgba(0,0,0,.36)); animation: flutter var(--dur) ease-in-out var(--delay) infinite alternate; transition: color .3s ease; }
.bat-field .bat svg { width: 100%; height: 100%; fill: currentColor; }
.bat-field .bat:hover { color: var(--cherry); }
.bat-field .bat.gone { pointer-events: none; animation: bat-away .42s ease-in forwards; }
@keyframes flutter { from { transform: translate(-12px, -7px) rotate(-8deg); } to { transform: translate(18px, 10px) rotate(8deg); } }
@keyframes bat-away { to { opacity: 0; transform: translateY(-100px) scale(.1) rotate(35deg); } }

/* The fortune window: dark glass, the crystal, cream buttons. */
.fortune-inner { position: relative; z-index: 2; width: min(620px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-x: hidden; overflow-y: auto; padding: 1.4rem; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; color: var(--cream); background: rgba(23,17,23,.68); backdrop-filter: blur(9px); text-align: center; }
#deck { overflow: hidden; }
#deck::before, #deck::after { content: "☾"; position: absolute; color: rgba(255,249,237,.08); font: 400 18rem/1 var(--serif); pointer-events: none; }
#deck::before { left: -3rem; top: -2rem; } #deck::after { right: -3rem; bottom: -2rem; transform: rotate(180deg); }
.crystal { position: relative; width: 116px; height: 116px; margin: 0 auto 1.2rem; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 34% 28%, white 0 4%, #d8c8e3 9%, #815d88 38%, #251827 70%); box-shadow: 0 0 60px rgba(199,175,210,.45), inset 0 0 26px rgba(255,255,255,.25); }
.crystal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.3); transition: opacity 2.2s ease, transform 3s ease; mix-blend-mode: luminosity; }
.crystal.seen img { opacity: .85; transform: scale(1.05); }
.fortune-inner .kicker { color: rgba(255,249,237,.7); }
.fortune-result { min-height: 60px; margin: 1rem 0; padding: 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; color: rgba(255,249,237,.84); background: rgba(255,255,255,.06); font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; transition: background .8s ease, color .8s ease; }
.fortune-result.secret { color: var(--ink); background: var(--lilac); transform: rotate(-.5deg); }
.fortune-inner .button { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.fortune-inner .button:hover { background: var(--lilac); border-color: var(--lilac); }
.fortune-inner .button.secondary { color: var(--cream); background: transparent; }
.fortune-inner .button.secondary:hover { color: var(--ink); background: var(--lilac); }
.fortune-inner textarea { background: rgba(255,255,255,.08); color: var(--cream); border-color: rgba(255,255,255,.25); }
.fortune-inner .spread { max-height: 38dvh; width: auto; max-width: 100%; margin: 0 auto .4rem; }
.fcard { animation: arrive .5s ease both; }
@media (max-height: 500px) { .crystal { width: 72px; height: 72px; margin-bottom: .6rem; } .fortune-inner { padding: .9rem; } .fortune-result { font-size: .9rem; padding: .7rem; margin: .6rem 0; } .bat-clue { grid-template-columns: 80px 1fr; padding: 1rem; } .clue-shoe { width: 80px; } .bat-clue .locked { font-size: 1rem; } .card { padding: 1.1rem; } .card h2 { font-size: 1.6rem; } }

/* Suite 31 */
.hot.door31 { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.hot.door31.lit { opacity: 1; pointer-events: auto; }
.gift-text { font-family: var(--serif); font-size: 0.95rem; color: var(--paper); margin: 0.3rem 0 0; white-space: pre-wrap; }
.gallery-grid.admin .gift-text { color: var(--paper); }
.gift-blank { width: 100%; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, rgba(199,175,210,0.15), rgba(168,52,86,0.15)); border: 1px dashed var(--violet); }
.gallery-grid.gifts figcaption { display: block; }

/* ===== The letter, in Linn's hand ===== */
.invitation .paper { padding: 2.2rem 2.4rem 1.8rem; background: var(--cream); border-radius: 6px; box-shadow: 0 35px 120px rgba(0,0,0,.55), inset 0 0 0 1px rgba(23,17,23,.06); font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
.paper .kicker { margin-bottom: .2rem; }
.paper .big { font-size: 1.75rem; font-style: italic; margin-bottom: 1rem; }
.paper p { margin: 0 0 .75em; }
.paper b { font-weight: 600; }
.paper .letter-h { font: 500 1.35rem/1.2 var(--serif); margin: 1rem 0 .5rem; color: var(--ink); }
.paper .rule { margin-top: 1.1rem; }
.paper .sign { margin-top: .9rem; font-family: 'Great Vibes', var(--hand); font-size: 2.3rem; line-height: 1; color: #2a1a22; }
.paper .sign .fine { font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); opacity: 1; }
.paper-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; padding: 0; font-size: 1.2rem; line-height: 1; color: var(--ink); background: rgba(23,17,23,.06); border: 1px solid var(--line); transition: background .35s ease; }
.paper-close:hover { background: var(--paper-deep); }
.sym { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.18em; margin: 0 .1em; background: var(--sym) center / contain no-repeat, radial-gradient(circle, var(--gold) 0 28%, transparent 32%); }
/* the vampire line */
.vamp { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink); letter-spacing: .06em; animation: vampglow 2.6s ease-in-out infinite; cursor: pointer; position: relative; transition: color .6s ease; }
.vamp:not(.struck):hover { animation: none; text-shadow: 0 0 10px rgba(168,52,86,.95), 0 0 22px rgba(168,52,86,.6); transition: text-shadow .6s ease; }
@keyframes vampglow { 0%,100% { text-shadow: 0 0 4px rgba(168,52,86,.35); } 50% { text-shadow: 0 0 12px rgba(168,52,86,.9), 0 0 20px rgba(168,52,86,.4); } }
.vamp::after { content: ''; position: absolute; left: 0; top: 54%; height: 3px; width: 0; background: var(--cherry); transform: rotate(-1.2deg); transition: width .7s ease; }
.vamp.struck { animation: none; text-shadow: none; color: #6b2238; cursor: default; }
.vamp.struck::after { width: 100%; }
.noted { max-height: 0; margin: 0; overflow: hidden; opacity: 0; transition: opacity .6s ease, max-height .7s ease, margin .7s ease; }
.noted.show { opacity: 1; max-height: 3rem; margin: 0 0 .75em; }
/* the entrance */
.paper .move { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .4rem; text-align: center; }
.button.enter { gap: .6rem; }
.enter-wrap { position: relative; display: inline-block; }
.button.enter.dead { opacity: .45; cursor: not-allowed; }
.button.enter.dead:hover { color: var(--cream); background: var(--ink); border-color: var(--ink); }
.enter-hint { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); white-space: nowrap; background: var(--ink); color: var(--cream); font: 600 .72rem var(--sans); letter-spacing: .06em; padding: .4em .8em; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.enter-wrap:hover .enter-hint, .enter-hint.show { opacity: 1; transform: translate(-50%, 0); }
/* the candles */
.candles { position: absolute; inset: 0; pointer-events: none; }
.candle { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1 / 1.5; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, rgba(255,196,120,.85), rgba(255,150,70,.45) 35%, rgba(230,110,50,.18) 60%, rgba(230,110,50,0) 75%); mix-blend-mode: screen; filter: blur(3px); animation: candle var(--d) ease-in-out infinite alternate; animation-delay: var(--o); }
@keyframes candle { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } 40% { opacity: .9; } 60% { opacity: .7; transform: translate(-51%, -49%) scale(1.06); } 100% { opacity: 1; transform: translate(-50%, -51%) scale(1.14); } }
@media (max-height: 500px) { .invitation .paper { width: 58%; padding: 1rem 1.2rem; font-size: .85rem; } .paper .big { font-size: 1.15rem; } .paper .sign { font-size: 1.2rem; } }

/* Delicate scrollbars, everywhere. */
* { scrollbar-width: thin; scrollbar-color: rgba(199,175,210,.45) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(199,175,210,.45); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(199,175,210,.75); }
.paper, .card, .bat-clue, .gallery-box.light { scrollbar-color: rgba(117,89,111,.35) transparent; }
.paper::-webkit-scrollbar-thumb, .card::-webkit-scrollbar-thumb { background: rgba(117,89,111,.35); }
.paper::-webkit-scrollbar-thumb:hover, .card::-webkit-scrollbar-thumb:hover { background: rgba(117,89,111,.6); }

/* The letter, opened from the satchel over any scene */
.paper.letter-float { }
#letter-body { transition: opacity .5s ease; }
#letter-body.dim { opacity: 0; }
.paper.letter-float { position: relative; left: auto; top: auto; transform: none; opacity: 1; pointer-events: auto; width: min(46vw, 640px); max-height: calc(100dvh - 40px); overflow-x: hidden; overflow-y: auto; padding: 2.2rem 2.4rem 1.8rem; background: var(--cream); color: var(--ink); border-radius: 6px; box-shadow: 0 35px 120px rgba(0,0,0,.55); font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; }
@media (max-height: 500px) { .paper.letter-float { width: 58vw; padding: 1rem 1.2rem; font-size: .85rem; } }

/* Tooltip pill, same as the invitation's hint */
.tip { position: fixed; z-index: 130; transform: translate(-50%, calc(-100% + 4px)); white-space: nowrap; background: var(--ink); color: var(--cream); font: 600 .72rem var(--sans); letter-spacing: .06em; padding: .4em .8em; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.tip.show { opacity: 1; transform: translate(-50%, -100%); }
.tip.below { transform: translate(-50%, -4px); }
.tip.below.show { transform: translate(-50%, 0); }

/* Lit buildings on the map */
.figure-hot.building { --tint: 211,168,94; --glow: 1; --wash: 1; z-index: 3; opacity: 0; animation: buildingin 1.6s ease .3s both; }
.figure-hot.building.soft { --glow: .65; --wash: .45; }
.figure-hot.building.strong { --glow: 1.5; --wash: 1.25; }
@keyframes buildingin { from { opacity: 0; } to { opacity: 1; } }
.figure-hot.building img { filter: drop-shadow(0 0 18px rgba(var(--tint),.35)) brightness(1.12) saturate(1.1); animation: buildingbreath 4s ease-in-out infinite; transition: filter .9s ease; }
@keyframes buildingbreath { 0%,100% { filter: drop-shadow(0 0 14px rgba(var(--tint),calc(.3 * var(--glow)))) brightness(calc(1 + .08 * var(--wash))) saturate(1.08); } 50% { filter: drop-shadow(0 0 30px rgba(var(--tint),calc(.6 * var(--glow)))) brightness(calc(1 + .2 * var(--wash))) saturate(1.15); } }
.figure-hot.building::after { background: radial-gradient(ellipse at 50% 55%, rgba(236,222,245,calc(.65 * var(--wash))), rgba(var(--tint),calc(.35 * var(--wash))) 45%, rgba(var(--tint),0) 80%); }
.figure-hot.building::before { background: radial-gradient(ellipse at 50% 50%, rgba(244,234,250,calc(.8 * var(--wash))), rgba(var(--tint),calc(.45 * var(--wash))) 50%, rgba(var(--tint),0) 80%); }
.figure-hot.building.on img { animation: none; filter: drop-shadow(0 0 34px rgba(var(--tint),calc(.8 * var(--glow)))) brightness(calc(1 + .25 * var(--wash))) saturate(1.2); }
.figure-hot.building.on::before { opacity: .6; }
/* Fairy dust */
.mote { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; background: var(--hue); box-shadow: 0 0 6px var(--hue), 0 0 12px var(--hue); opacity: 0; animation: mote var(--life) ease-in-out forwards; pointer-events: none; }
@keyframes mote { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 20% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .3), calc(-50% + var(--dy) * .3)) scale(1); } 50% { opacity: .55; transform: translate(calc(-50% + var(--dx) * .6), calc(-50% + var(--dy) * .6)) scale(1.3); } 75% { opacity: .95; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); } }

/* Art is to be looked at, not taken. */
img, .layer, .figure-hot img, .figure img, .prop img, .ckey img { -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; pointer-events: inherit; }
.scene img.layer, .mail img, .ckey > img, .cab-img { pointer-events: none; }

/* Loading order: the picture first, then the glowing pieces. */
.scene.loading { opacity: 0; }
.scene.ready { transition: opacity .8s ease; }
.scene.loading .figure-hot, .scene.loading .shape, .scene.loading .hot { opacity: 0; }
.scene.ready .figure-hot.building { animation-delay: .5s; }

/* Traced shapes: a feathered, glowing copy of the picture itself. */
.shape { position: absolute; inset: 0; z-index: 3; pointer-events: none; --strength: 1; opacity: 0; animation: buildingin 1.4s ease .6s both; }
.shape .shape-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(var(--tint), calc(.35 * var(--strength)))) brightness(calc(1 + .1 * var(--strength))) saturate(1.08); animation: shapebreath 4s ease-in-out infinite; transition: filter .9s ease; }
@keyframes shapebreath { 0%,100% { filter: drop-shadow(0 0 8px rgba(var(--tint), calc(.3 * var(--strength)))) brightness(calc(1 + .08 * var(--strength))) saturate(1.06); } 50% { filter: drop-shadow(0 0 22px rgba(var(--tint), calc(.65 * var(--strength)))) brightness(calc(1 + .22 * var(--strength))) saturate(1.14); } }
.shape .hit { pointer-events: all; cursor: pointer; }
.shape.on .shape-svg { animation: none; filter: drop-shadow(0 0 26px rgba(var(--tint), calc(.85 * var(--strength)))) brightness(calc(1 + .3 * var(--strength))) saturate(1.2); }
.shape.found .shape-svg { animation: none; filter: drop-shadow(0 0 6px rgba(var(--tint), .2)) brightness(1.03); }
.shape.found.on .shape-svg { filter: drop-shadow(0 0 14px rgba(var(--tint), .5)) brightness(1.12); }
.shape .sparks { position: absolute; inset: 0; pointer-events: none; }
.trace-btn { position: fixed; right: 16px; bottom: 70px; z-index: 56; width: 36px; height: 36px; border-radius: 50%; padding: 0; font-size: 1rem; background: var(--panel); color: var(--lilac); border: 1px solid var(--violet); opacity: .55; transition: opacity .4s ease; }
.trace-btn:hover { opacity: 1; }
.frame.tracing { cursor: crosshair; }
.frame.tracing .shape .hit { cursor: pointer; }
.tracer-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; overflow: visible; }
.tracer-svg polygon { fill: rgba(211,168,94,.18); stroke: var(--gold); stroke-width: .3; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.tr-pt { position: absolute; z-index: 46; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); transform: translate(-50%, -50%); cursor: grab; }

/* ===== Screen-safe sweep: every fixed element clamps to the visible screen, notches included ===== */
:root { --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); }
.menu { top: calc(10px + var(--sat)); }
.back { top: calc(18px + var(--sat)); left: calc(16px + var(--sal)); max-width: calc(50vw - 60px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satchel { top: calc(10px + var(--sat)); right: calc(16px + var(--sar)); }
.corner.bl, .corners.bl { left: calc(16px + var(--sal)); bottom: calc(16px + var(--sab)); max-width: calc(60vw); }
.corner.br, .mykey { right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); }
.mykey { max-width: 40vw; }
.mykey span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-btn { right: calc(16px + var(--sar)); bottom: calc(70px + var(--sab)); }
.tray { padding: calc(68px + var(--sat)) calc(16px + var(--sar)) 0 calc(16px + var(--sal)); }
.tray-inner { max-height: calc(100dvh - 90px - var(--sat) - var(--sab)); overflow-y: auto; }
.modal { padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); }
.modal > * { max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); }
.cards, .card, .gallery-box, .paper.letter-float, .fortune-inner, .bat-field { max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); overflow-y: auto; overflow-x: hidden; }
.cards { max-width: calc(100vw - 24px - var(--sar) - var(--sal)); }
.cabinet { max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); height: min(92dvh, calc((100vw - 48px) * 1.5)); }
.vnbox { max-width: calc(100vw - 32px - var(--sar) - var(--sal)); max-height: calc(60dvh); overflow-y: auto; bottom: calc(6% + var(--sab)); }
.dialogue { max-height: calc(100dvh - 40px - var(--sat) - var(--sab)); overflow-y: auto; }
.invitation .paper { max-width: calc(100vw - 24px - var(--sar) - var(--sal)); max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); }
.enter-hint { max-width: calc(100vw - 40px); white-space: normal; text-align: center; }
@media (max-height: 500px) {
  .menu { top: calc(6px + var(--sat)); }
  .back { top: calc(10px + var(--sat)); left: calc(8px + var(--sal)); }
  .satchel { top: calc(6px + var(--sat)); right: calc(8px + var(--sar)); }
  .corner.bl, .corners.bl { left: calc(8px + var(--sal)); bottom: calc(8px + var(--sab)); }
  .corner.br, .mykey { right: calc(8px + var(--sar)); bottom: calc(8px + var(--sab)); }
  .trace-btn { bottom: calc(54px + var(--sab)); right: calc(8px + var(--sar)); width: 30px; height: 30px; }
  .tray { padding-top: calc(50px + var(--sat)); }
  .modal > * { max-height: calc(100dvh - 16px - var(--sat) - var(--sab)); }
  .cards.wide { width: min(60vw, 560px); }
  .vnbox { max-height: 62dvh; }
}

/* Phones: dialogue boxes clear the corner buttons; corner buttons shrink to one line each. */
@media (max-height: 500px) {
  .vnbox { bottom: calc(52px + var(--sab)); max-height: 52dvh; width: min(76%, 900px); padding: .7rem .9rem .8rem; }
  .vnbox .speaker { top: calc(-.7rem - 12px); }
  .dialogue { bottom: calc(52px + var(--sab)); }
  .corner, .corners .corner { font-size: .66rem; padding: .3em .7em; }
  .corners.bl { gap: 4px; }
  .mykey { font-size: .66rem; }
}

/* Controls whose job a traced shape has taken: invisible, still callable. */
.hot.replaced, .figure.replaced, .prop.replaced, .lockspot.replaced { opacity: 0 !important; pointer-events: none !important; animation: none !important; }

/* ===== The editor: panel left, whole picture right, everything live ===== */
body.editing .scene.fit { left: 340px; width: calc(100vw - 340px); }
body.editing .scene.fit .frame { position: absolute; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(100%, calc((100dvh - 24px) * var(--ar))); }
body.editing .hot, body.editing .figure-hot:not(.shape), body.editing .prop, body.editing .figure, body.editing .corners, body.editing .corner, body.editing .mykey, body.editing .vnbox, body.editing .dialogue, body.editing .toast, body.editing .satchel, body.editing .menu, body.editing .back, body.editing .bats, body.editing .candles, body.editing .hoofs, body.editing .lockspot, body.editing .bellglow, body.editing .after, body.editing .mail, body.editing .paper { display: none !important; }
body.editing .shape { animation: none; opacity: 1; }
body.editing .shape .shape-svg { animation: none; }
body.editing .shape.hidden-while-editing { display: none; }
body.editing .scene { opacity: 1 !important; }
.editor { position: fixed; left: 0; top: 0; bottom: 0; width: 340px; z-index: 70; overflow-y: auto; padding: 14px 16px 24px; background: var(--panel); border-right: 1px solid var(--gold); backdrop-filter: blur(8px); font-size: .8rem; display: flex; flex-direction: column; gap: .55rem; }
.editor .ed-head { display: flex; align-items: baseline; gap: .6rem; font-family: var(--serif); font-size: 1.2rem; }
.editor label { display: flex; flex-direction: column; gap: .25rem; color: var(--lilac); }
.editor label span { color: var(--paper); margin-left: .3rem; }
.editor input, .editor select, .editor textarea { font-size: .8rem; padding: .35em .5em; background: var(--ink-soft); color: var(--paper); border: 1px solid var(--violet); border-radius: 6px; width: 100%; }
.editor input[type=range] { padding: 0; accent-color: var(--gold); }
.editor .ed-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.editor .button { min-height: 32px; padding: .4rem .8rem; font-size: .68rem; }
.editor .button.secondary { color: var(--paper); border-color: var(--violet); }
.ed-list { display: flex; flex-direction: column; gap: .3rem; }
.ed-item { display: flex; align-items: center; gap: .5rem; text-align: left; background: rgba(0,0,0,.25); border: 1px solid var(--violet); color: var(--paper); border-radius: 8px; padding: .4rem .6rem; font: inherit; cursor: pointer; }
.ed-item i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ed-item small { margin-left: auto; color: var(--lilac); }
.trace-btn { right: calc(16px + var(--sar)); bottom: calc(70px + var(--sab)); }
body.editing .trace-btn { display: none; }

.editor label[hidden] { display: none; }

.tr-mid { position: absolute; z-index: 46; width: 10px; height: 10px; border-radius: 50%; background: rgba(23,17,23,.6); border: 2px solid var(--gold); transform: translate(-50%, -50%); cursor: copy; opacity: .8; transition: opacity .3s ease, transform .3s ease; }
.tr-mid:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }

/* My own glowing boxes are retired: only traced shapes, the map layers, the horseshoe, Jace and Ksena show. The boxes stay callable. */
.hot:not(.shape), .lockspot:not(.shape) { opacity: 0 !important; pointer-events: none !important; animation: none !important; }

.ed-section { display: flex; flex-direction: column; gap: .3rem; padding-top: .4rem; border-top: 1px solid var(--violet); }
.ed-section > b { font-family: var(--serif); font-size: 1rem; font-weight: 500; }
.ed-item.todo { border-style: dashed; border-color: var(--gold); }
.ed-item.todo i { background: transparent; border: 2px solid var(--gold); }

.editor .button.unsaved { background: var(--gold); border-color: var(--gold); color: var(--ink); animation: savepulse 1.4s ease-in-out infinite; }
@keyframes savepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(211,168,94,.0); } 50% { box-shadow: 0 0 0 6px rgba(211,168,94,.35); } }

/* Jace is only there once he has arrived: no invisible click area before. */
.figure.jace { pointer-events: none; }
.pool.jace-in .figure.jace { pointer-events: auto; }

/* Editing zoom: the frame scales, the dots stay the same size on screen. */
body.editing .scene.fit .frame { --z: 1; transform-origin: 50% 50%; transition: none; }
body.editing .tr-pt { transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1))); }
body.editing .tr-mid { transform: translate(-50%, -50%) scale(calc(1 / var(--z, 1))); }
body.editing .tr-mid:hover { transform: translate(-50%, -50%) scale(calc(1.3 / var(--z, 1))); }
body.editing .scene.fit { overflow: hidden; }
.ed-zoom { align-items: center; gap: .4rem; }
.ed-zoom .button { min-width: 32px; padding: .3rem .5rem; }

.shape.dormant { display: none; }
body.editing .shape.dormant { display: block; }

/* ===== Night two script ===== */
.shape.pending { opacity: .0 !important; pointer-events: none !important; transition: opacity 1.4s ease; }
.shape:not(.pending) { transition: opacity 1.4s ease; }
.modal.script .card { max-width: 560px; }
.modal.script .card.out { opacity: 0; transition: opacity .35s ease; }
/* dialogue with a speaker avatar */
.vnbox.script { padding-top: 1.3rem; padding-bottom: 1.9rem; }
.vn-who { position: absolute; top: -34px; display: flex; align-items: center; gap: .6rem; }
.vn-who.left { left: 18px; } .vn-who.right { right: 18px; flex-direction: row-reverse; }
.vn-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--ink); border: 3px solid var(--cream); box-shadow: 0 8px 20px rgba(0,0,0,.4); display: grid; place-items: center; color: var(--cream); font: 500 1.6rem var(--serif); position: relative; }
.vn-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vn-name { background: var(--cherry); color: var(--paper); font: 600 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: .3em .9em; border-radius: 999px; }
.vnbox.script.horse .vn-name { background: var(--violet); }
.vnbox .stage { font-style: italic; color: var(--violet); font-size: 1.3rem; margin-bottom: .5rem; }
.vnbox .button-row { margin-top: .8rem; }
/* the ID card */
.idcard { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; pointer-events: none; }
.idcard .id-inner { pointer-events: auto; cursor: pointer; width: 300px; padding: 1rem 1.2rem 1.1rem; background: linear-gradient(160deg, var(--cream), var(--paper-deep)); color: var(--ink); border-radius: 16px; border: 1px solid rgba(23,17,23,.2); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 3px rgba(211,168,94,.35); display: grid; grid-template-columns: 72px 1fr; gap: .2rem .9rem; align-items: center; transform: translateY(20px) rotate(-3deg); opacity: 0; transition: opacity .5s ease, transform .5s ease; }
.idcard.show .id-inner { opacity: 1; transform: translateY(0) rotate(-2deg); }
.idcard .kicker { grid-column: 1 / -1; margin: 0 0 .3rem; }
.idcard img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); grid-row: span 2; }
.idcard b { font: 500 1.4rem/1.1 var(--serif); }
.idcard small { color: var(--violet); font-size: .72rem; }
.idcard .id-hint { grid-column: 1 / -1; margin-top: .5rem; font: 600 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cherry); opacity: .7; }
.idcard .id-hint.nudge { animation: cue 1.2s ease-in-out infinite; }
/* the filing */
.filed-role { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 .6rem; }
.filed-role img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.filed-role h2 { margin: 0; font: 600 2.2rem/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, var(--cherry), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.keys-text h2 em { font-style: italic; }
.card.keys-text { width: min(360px, 36vw); }
@media (max-height: 500px) { .vn-avatar { width: 44px; height: 44px; font-size: 1.1rem; } .vn-who { top: -24px; } .idcard .id-inner { width: 260px; } .filed-role h2 { font-size: 1.5rem; } .card.keys-text { width: 40vw; font-size: .8rem; } }

/* Script cards: a lighter veil so the scene stays readable behind them. */
.modal.script { background: rgba(17,10,16,.5); backdrop-filter: blur(2px); }

.drawer .asplayer { color: var(--gold); }

/* ===== Reception dialogue: avatar outside the box, name tag above it, nothing clipped ===== */
.vnbox.script { overflow: visible; max-height: none; cursor: pointer; width: min(66%, 820px); }
.vnbox.script .vn-cue, .vnbox.script p { pointer-events: none; }
.vnbox.script .button-row, .vnbox.script .button { pointer-events: auto; cursor: pointer; }
.vn-who { top: auto; bottom: 100%; margin-bottom: 10px; display: block; }
.vn-who.left { left: 0; } .vn-who.right { right: 0; left: auto; }
.vn-who .vn-name { display: inline-block; }
.vn-who .vn-avatar { position: absolute; top: calc(100% + 10px); width: 84px; height: 84px; font-size: 2rem; }
.vn-who.left .vn-avatar { right: calc(100% + 14px); margin-top: 0; }
.vn-who.right .vn-avatar { left: calc(100% + 14px); }
/* the box itself leaves room for the avatar on its side */
.vnbox.script { margin: 0; }
.vnbox.script.horse { }
@media (max-height: 500px) { .vn-who .vn-avatar { width: 56px; height: 56px; font-size: 1.3rem; } .vnbox.script { width: min(70%, 820px); } }

/* While a script card waits or is open, nothing else on the screen takes a click. */
body.scripting .shape, body.scripting .figure-hot, body.scripting .prop, body.scripting .hot, body.scripting .menu, body.scripting .satchel, body.scripting .back, body.scripting .corners, body.scripting .corner, body.scripting .mykey, body.scripting .trace-btn { pointer-events: none !important; }

/* The click lives on the shape's hit polygon: block it there, not just on the wrapper. */
.shape.pending .hit, body.scripting .shape .hit, .shape.dormant .hit { pointer-events: none !important; cursor: default; }
/* Buttons centred in every card and dialogue; the role name hugs its emoji. */
.card .button-row, .fcard .button-row, .vnbox .button-row { justify-content: center !important; }
.filed-role { justify-content: center; gap: .6rem; flex-wrap: wrap; text-align: center; }
.filed-role img { width: 64px; height: 64px; }
.filed-card { text-align: center; }
.filed-card .kicker { text-align: center; }

/* hidden means hidden, whatever display rule an element otherwise has. */
[hidden] { display: none !important; }

/* The purse hint: the arrow points at the bag until the inventory is opened. */
.purse-hint { position: fixed; top: calc(14px + var(--sat)); right: calc(84px + var(--sar)); z-index: 56; display: flex; align-items: center; gap: .6rem; opacity: 0; transform: translateX(-10px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.purse-hint.show { opacity: 1; transform: translateX(0); }
.purse-hint img { width: 44px; height: auto; animation: nudge-x 1.4s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); order: 2; }
.purse-hint span { background: var(--ink); color: var(--cream); font: 600 .72rem var(--sans); letter-spacing: .06em; padding: .4em .8em; border-radius: 999px; order: 1; }
@keyframes nudge-x { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
body.id-pending .satchel { animation: satchelpulse 1.2s ease-in-out infinite; }
/* the ID card inside its modal */
#id-modal .idcard { position: static; display: block; pointer-events: auto; }
#id-modal .id-inner { opacity: 1; transform: rotate(-2deg); width: min(340px, calc(100vw - 32px)); }
#id-modal .id-inner .button-row { grid-column: 1 / -1; margin-top: .8rem; justify-content: center; }
#id-modal .id-inner img { grid-row: span 2; }
/* role title in one piece */
h2.filed-name { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .4rem 0 .6rem; font: 600 2.1rem/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; }
h2.filed-name img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
h2.filed-name span { background: linear-gradient(90deg, var(--cherry), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-height: 500px) { .purse-hint { right: calc(56px + var(--sar)); top: calc(8px + var(--sat)); } .purse-hint img { width: 30px; } h2.filed-name { font-size: 1.4rem; } h2.filed-name img { width: 40px; height: 40px; } }

h2.filed-name img { margin: 0; width: 56px; flex: none; }

/* The cabinet hint: arrow pointing at the key cabinet while the horse waits. */
.cab-hint { position: fixed; z-index: 56; transform: translate(-100%, -50%); display: flex; align-items: center; gap: .6rem; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.cab-hint.show { opacity: 1; }
.cab-hint img { width: 44px; height: auto; animation: nudge-x 1.4s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.cab-hint span { background: var(--ink); color: var(--cream); font: 600 .72rem var(--sans); letter-spacing: .06em; padding: .4em .8em; border-radius: 999px; white-space: nowrap; }
@media (max-height: 500px) { .cab-hint img { width: 30px; } }

.card.role-card { width: min(380px, 38vw); }
.card.role-card .prompt { font-size: .8rem; max-height: 34dvh; overflow-y: auto; }
.card.role-card h2.filed-name { font-size: 1.6rem; margin-bottom: .8rem; }
.card.role-card h2.filed-name img { width: 44px; }
@media (max-height: 500px) { .card.role-card { width: 42vw; } .card.role-card .prompt { font-size: .7rem; max-height: 30dvh; } }

/* The ID in the inventory: a miniature of the card itself. */
.mini-id { display: grid; grid-template-columns: 26px 1fr; gap: .1rem .4rem; align-items: center; width: 100%; padding: .4rem .5rem; margin: 0 auto .3rem; background: linear-gradient(160deg, var(--cream), var(--paper-deep)); color: var(--ink); border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(211,168,94,.35), 0 6px 14px rgba(0,0,0,.4); transform: rotate(-2deg); text-align: left; }
.mini-id .mini-kicker { grid-column: 1 / -1; font: 800 .45rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cherry); }
.mini-id img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--ink); margin: 0; }
.mini-id b { font: 500 .78rem/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.slot-id .slot-name { margin-top: .1rem; }
/* ID buttons on one line */
#id-modal .id-inner .button-row { flex-wrap: nowrap; gap: .5rem; }
#id-modal .id-inner .button { white-space: nowrap; padding: .6rem .8rem; min-height: 40px; font-size: .7rem; }

/* Close buttons ride along at the top of any scrolling popup. */
.paper .paper-close, .paper.letter-float .paper-close { position: sticky; top: calc(-2.2rem + 8px); float: none; display: block; margin: calc(-2.2rem + 8px) calc(-2.4rem + 8px) -34px auto; z-index: 3; }
.cabinet .close { position: absolute; }
.gallery-box .close { position: sticky; top: 0; display: block; margin: -1.2rem -1.4rem -36px auto; z-index: 3; }
@media (max-height: 500px) { .paper .paper-close, .paper.letter-float .paper-close { top: calc(-1rem + 6px); margin: calc(-1rem + 6px) calc(-1.2rem + 6px) -34px auto; } }

/* ===== Night three: Bourbon Street ===== */
/* a shape that has just been lit pulses a few times, then breathes like the others */
@keyframes shapepulse { 0%,100% { filter: drop-shadow(0 0 10px rgba(var(--tint), calc(.35 * var(--strength)))) brightness(calc(1 + .1 * var(--strength))) saturate(1.08); } 50% { filter: drop-shadow(0 0 34px rgba(var(--tint), calc(1 * var(--strength)))) brightness(calc(1 + .42 * var(--strength))) saturate(1.3); } }
.shape.lit .shape-svg { animation: shapepulse 1.7s ease-in-out 3; }
/* the ribbon */
.ribbon { position: fixed; bottom: calc(16px + var(--sab)); left: 50%; transform: translateX(-50%); z-index: 45; width: min(560px, 62vw); pointer-events: none; color: var(--cream); text-align: center; display: flex; flex-direction: column; }
.ribbon-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.rstep { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 800 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.8); opacity: .8; transition: opacity .8s ease; }
.rstep.done { opacity: 1; }
.rstep > img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.rstep .mark, .rstep .lock { position: relative; width: 20px; height: 20px; display: inline-block; }
.rstep .mark svg, .rstep .lock img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .9s ease, transform .9s ease; }
.rstep .mark { color: var(--lilac); }
.rstep .mk-tick { opacity: 0; transform: scale(.5); color: var(--cream); }
.rstep.done .mk-ring { opacity: 0; transform: scale(1.4); }
.rstep.done .mk-tick { opacity: 1; transform: scale(1); }
.rstep .lock .lk-open { opacity: 0; }
.rstep.unlocked .lock .lk-closed { opacity: 0; }
.rstep.unlocked .lock .lk-open { opacity: 1; }
.ribbon-bar { height: 6px; border-radius: 999px; background: rgba(255,249,237,.18); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.ribbon-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--cherry), #d4476f); box-shadow: 0 0 14px rgba(168,52,86,.9); transition: width 1.4s ease; }
.ribbon-note { order: -1; margin: 0 0 .45rem; font: italic 500 1rem var(--serif); color: var(--lilac); text-shadow: 0 2px 8px rgba(0,0,0,.9); opacity: 0; transition: opacity 1.2s ease; }
.ribbon-note.show { opacity: 1; }
@media (max-height: 500px) { .ribbon { bottom: calc(8px + var(--sab)); width: min(440px, 56vw); } .rstep { font-size: .5rem; gap: .25rem; } .rstep > img { width: 16px; height: 16px; } .rstep .mark, .rstep .lock { width: 14px; height: 14px; } .ribbon-bar { height: 4px; } .ribbon-note { font-size: .8rem; margin-bottom: .2rem; } }
/* the glint on the cobbles */
.prop.glint { width: 4.6%; aspect-ratio: 1.6; opacity: 0; transition: opacity 1.4s ease; cursor: pointer; }
.prop.glint.show { opacity: 1; }
.prop.glint::before { content: ''; position: absolute; left: 50%; top: 50%; width: 46%; height: 60%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,246,216,.95), rgba(211,168,94,.55) 40%, rgba(199,175,210,.25) 65%, transparent 72%); filter: blur(1px); animation: glintbreath 2.6s ease-in-out infinite; }
@keyframes glintbreath { 0%,100% { opacity: .55; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }
.prop.glint .orb { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 6px #f1d9a0, 0 0 12px rgba(211,168,94,.9); animation: glintorbit 3.2s linear infinite; }
.prop.glint .orb:nth-child(2) { animation-duration: 4.1s; animation-delay: -1.3s; width: 4px; height: 4px; }
.prop.glint .orb:nth-child(3) { animation-duration: 5s; animation-delay: -2.6s; width: 3px; height: 3px; background: #e4d2f0; box-shadow: 0 0 6px #e4d2f0, 0 0 12px rgba(199,175,210,.9); }
@keyframes glintorbit { from { transform: rotate(0deg) translateX(22px) scaleY(.55); } to { transform: rotate(360deg) translateX(22px) scaleY(.55); } }
.prop.glint .sparks { position: absolute; inset: -60%; pointer-events: none; }
.prop.glint:hover::before { animation-duration: 1.2s; }
/* the bats and their two cards */
.bat-field .fcards { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 1rem; background: rgba(23,17,23,.3); transition: opacity .5s ease; }
.bat-field .fcards.gone { opacity: 0; pointer-events: none; }
.bat-field .fcard { width: min(480px, 100%); }
.bat-field .fcard.out { opacity: 0; transition: opacity .35s ease; }
.fwho { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: -.2rem 0 .8rem; }
.fwho .vn-avatar { width: 64px; height: 64px; }
.bat-field:not(.shooing) .bat { pointer-events: none; }
.bat-counter { opacity: 0; transition: opacity .6s ease; }
.bat-field.shooing .bat-counter { opacity: 1; }
.bat-label { position: absolute; z-index: 8; transform: translate(-30%, -120%); background: var(--cherry); color: var(--cream); font: 800 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .4em .9em; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.5); pointer-events: none; animation: labelpop 1.3s ease-out forwards; }
@keyframes labelpop { 0% { opacity: 0; transform: translate(-30%, -90%) scale(.5); } 18% { opacity: 1; transform: translate(-30%, -130%) scale(1.15); } 30% { transform: translate(-30%, -125%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-30%, -170%) scale(.95); } }
.bat-clue .clue-shoe { transition: filter .9s ease, opacity .9s ease; }
.bat-clue:not(.is-open) .clue-shoe { filter: blur(7px); opacity: .5; }
.bat-clue .clue-actions { text-align: center; }
.bat-clue .locked .fine { color: var(--violet); font-family: var(--sans); font-size: .85rem; display: inline-block; margin-top: .3rem; }
/* the horseshoe in your hands */
.modal.viewer { z-index: 70; }
.shoe-box { position: relative; display: flex; flex-direction: column; width: min(92vw, 880px); height: min(calc(100dvh - 24px - var(--sat) - var(--sab)), 620px); background: var(--paper); color: var(--ink); border-radius: 20px; padding: 1rem 1.2rem .9rem; box-shadow: 0 20px 60px rgba(0,0,0,.7); overflow: hidden; }
.shoe-box .kicker { text-align: center; margin-bottom: .4rem; }
#shoe-canvas { flex: 1; min-height: 0; width: 100%; border-radius: 14px; background: radial-gradient(ellipse at 50% 40%, #3a2a3a, var(--ink) 70%); touch-action: none; cursor: grab; opacity: 0; transition: opacity 1.2s ease; }
#shoe-canvas.ready { opacity: 1; }
#shoe-canvas:active { cursor: grabbing; }
.shoe-hint { margin: .5rem 0 0; text-align: center; font: italic 500 1rem var(--serif); color: var(--violet); }
.shoe-chips { display: flex; justify-content: center; gap: .6rem; margin-top: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; font: 800 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--violet); border: 1px solid var(--violet); border-radius: 999px; padding: .3em .9em; transition: color .6s ease, background .6s ease, border-color .6s ease; }
.chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .6s ease; }
.chip.done { color: var(--cream); background: var(--ink); border-color: var(--ink); }
.chip.done::before { background: var(--gold); border-color: var(--gold); }
.shoe-chips.fallback .chip { cursor: pointer; }
.shoe-box .button-row { margin-top: .6rem; min-height: 0; }
#shoe-leave { opacity: 0; transition: opacity .9s ease; }
#shoe-leave.show { opacity: 1; }
.shoe-detail { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1rem; background: rgba(23,17,23,.55); backdrop-filter: blur(3px); border-radius: 20px; opacity: 0; transition: opacity .5s ease; }
.shoe-detail.show { opacity: 1; }
.shoe-detail .dcard { display: grid; grid-template-columns: 150px 1fr; gap: 1.2rem; align-items: center; text-align: left; width: min(600px, 100%); }
.shoe-detail .dcard .kicker { margin-bottom: .3rem; }
.shoe-detail .dcard p { margin: 0 0 .4rem; }
.shoe-detail .dcard .big { font-size: 1.5rem; letter-spacing: .06em; }
.shoe-detail .dcard .button-row { justify-content: flex-start; margin-top: .6rem; }
.card .detail-img { width: 100%; margin: 0; display: block; }
.card button.coin-flip, .card button.coin-flip:hover { position: relative; background: none; border: 0; padding: 0; min-height: 0; border-radius: 0; box-shadow: none; }
.coin-flip { width: 150px; height: 150px; padding: 0; margin: 0; background: none; border: 0; perspective: 900px; cursor: pointer; }
.coin-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s ease; }
.coin-flip.flipped .coin-inner { transform: rotateY(180deg); }
.card .coin-flip .face { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card .coin-flip .face.rear { transform: rotateY(180deg); }
.coin-flip::after { content: 'Tap to turn it'; position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%); white-space: nowrap; font: 600 .6rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
@media (max-height: 500px) {
  .shoe-box { padding: .5rem .8rem .5rem; border-radius: 14px; }
  .shoe-box > .kicker { margin-bottom: .2rem; font-size: .6rem; }
  .shoe-hint { font-size: .8rem; margin-top: .25rem; }
  .shoe-chips { margin-top: .25rem; } .chip { font-size: .52rem; padding: .25em .7em; }
  .shoe-box .button-row { margin-top: .3rem; } .shoe-box .button { min-height: 34px; padding: .4rem .9rem; font-size: .62rem; }
  .shoe-detail { padding: .5rem; }
  .shoe-detail .dcard { grid-template-columns: 96px 1fr; gap: .8rem; padding: .8rem 1rem; font-size: .82rem; }
  .shoe-detail .dcard .big { font-size: 1.1rem; }
  .coin-flip { width: 96px; height: 96px; }
  .bat-field .fcard { font-size: .85rem; } .fwho .vn-avatar { width: 48px; height: 48px; font-size: 1.1rem; }
}

/* the bats arrive one by one, the card lands on top of them, the clue sits in the middle */
.bat-field .bat { opacity: 0; animation: batin .35s ease-out var(--pop, 0ms) both, flutter var(--dur) ease-in-out var(--delay) infinite alternate; }
.bat-field .bat svg { animation: batpop .6s cubic-bezier(.2, 1.6, .4, 1) var(--pop, 0ms) both; }
.bat-field .bat.gone { opacity: 1; }
.bat-field .bat.gone svg { animation: none; }
@keyframes batin { from { opacity: 0; } to { opacity: 1; } }
@keyframes batpop { 0% { transform: scale(.1) rotate(-40deg); } 100% { transform: scale(1) rotate(0deg); } }
.bat-clue { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(680px, calc(100% - 2rem)); gap: .6rem; opacity: 0; transition: opacity .9s ease; }
.bat-field.shooing .bat-clue, .bat-clue.is-open { opacity: 1; }
.clue-shoe { width: 180px; transform: rotate(-12deg); }
.bat-clue .clue-copy { max-width: 560px; }
@media (max-height: 500px) { .bat-clue { padding: .8rem 1rem; gap: .3rem; } .clue-shoe { width: 90px; } .bat-clue .locked { font-size: .9rem; } }

/* the gate: closed in the picture until the street is satisfied, then the open street fades over it */
.scene.fit .layer-open { z-index: 2; opacity: 0; pointer-events: none; transition: opacity 2.2s ease; }
.scene.fit .layer-open.show { opacity: 1; }

/* ===== Night three: the pool ===== */
.emo-img { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.15em; margin: 0 .04em; }
.card h2.show-me { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.card .emo-img { width: 1.1em; margin: 0 .04em; display: inline-block; }
.button.disabled, label.button.disabled { opacity: .45; pointer-events: none; }
.psst { position: fixed; left: 50%; bottom: calc(18px + var(--sab)); transform: translate(-50%, 12px); z-index: 48; display: flex; align-items: center; gap: .7rem; max-width: min(520px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); border-radius: 14px; padding: .8rem 1.1rem; box-shadow: 0 16px 50px rgba(0,0,0,.6); opacity: 0; transition: opacity 1s ease, transform 1s ease; pointer-events: none; font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; }
.psst.show { opacity: 1; transform: translate(-50%, 0); }
.psst b { font: 800 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cherry); }
.psst-bat { width: 34px; height: 20px; fill: var(--ink); flex: none; }
.dialogue .kicker { margin-bottom: .4rem; }
.dialogue .button-row { margin-top: .6rem; }
.drink-card { display: grid; grid-template-columns: 220px 1fr; gap: 1.3rem; align-items: center; text-align: left; }
.card .drink-img { width: 100%; margin: 0; display: block; border-radius: 14px; }
.drink-card h2 { text-align: left; margin: 0 0 .2rem; }
.drink-card .colour { font-family: var(--serif); font-style: italic; color: var(--violet); margin: 0 0 .5rem; }
.drink-card .label { font: 800 .66rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cherry); margin: .4rem 0 .2rem; }
.drink-card ul.glass { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .9rem; line-height: 1.4; }
.drink-card .hand { font-family: var(--hand); font-size: 1.35rem; color: #2a1a22; margin: 0; }
.drink-card .button-row { justify-content: flex-start; margin-top: .8rem; }
.glass-hint { transform: translate(0, -50%); }
.glass-hint img { transform: scaleX(-1); animation-name: nudge-x-back; }
@keyframes nudge-x-back { 0%,100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(8px); } }
@media (max-height: 500px) {
  .drink-card { grid-template-columns: 120px 1fr; gap: .8rem; font-size: .82rem; }
  .drink-card .hand { font-size: 1.05rem; } .drink-card ul.glass { font-size: .78rem; }
  .psst { font-size: .9rem; padding: .55rem .8rem; bottom: calc(10px + var(--sab)); }
}

/* Jace's box: the name sits above it like at reception, nothing is clipped */
.dialogue { overflow: visible; max-height: none; }
.dialogue .speaker { top: calc(-0.75rem - 14px); left: 12px; }
/* the gallery: title and cross above the window, the window tall and scrollable, click beside it to close */
.gallery-wrap { width: min(92vw, 1100px); max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); display: flex; flex-direction: column; }
.gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .2rem .6rem; }
.gallery-head h2 { margin: 0; color: var(--cream); font: 600 1.6rem var(--serif); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.gallery-head .close { position: static; margin: 0; flex: none; }
.gallery-wrap .gallery-box { flex: 1; min-height: 0; height: 80dvh; max-height: none; overflow-y: auto; }
@media (max-height: 500px) { .gallery-head h2 { font-size: 1.1rem; } .gallery-head { padding-bottom: .3rem; } .gallery-wrap .gallery-box { padding: .6rem .8rem; } }
/* the drink card: no scrolling, the button centred under the whole card */
.cards.drinkw { width: min(74vw, 780px); flex: none; }
.drink-card { grid-template-columns: 190px 1fr; gap: 1rem 1.2rem; font-size: .86rem; line-height: 1.35; align-items: start; }
.drink-card .dtext { align-self: center; }
.card .drink-img { max-height: min(50vh, 340px); object-fit: contain; }
.drink-card h2 { font-size: 1.35rem; }
.drink-card p { margin: 0 0 .3rem; }
.drink-card .colour { margin-bottom: .3rem; }
.drink-card .label { margin: .3rem 0 .1rem; }
.drink-card ul.glass { columns: 2; column-gap: 1rem; font-size: .8rem; line-height: 1.3; margin-bottom: .3rem; }
.drink-card .hand { font-size: 1.15rem; line-height: 1.15; }
.drink-card .button-row { grid-column: 1 / -1; justify-content: center; margin-top: .2rem; }
@media (max-height: 500px) {
  .cards.drinkw { width: min(88vw, 780px); }
  .drink-card { grid-template-columns: 100px 1fr; gap: .4rem .7rem; font-size: .7rem; line-height: 1.25; padding: .7rem .9rem; }
  .card .drink-img { max-height: 36vh; }
  .drink-card h2 { font-size: 1rem; margin-bottom: .1rem; } .drink-card ul.glass { font-size: .66rem; } .drink-card .hand { font-size: .95rem; }
  .drink-card .button-row { margin-top: 0; } .drink-card .button { min-height: 32px; padding: .35rem .8rem; font-size: .6rem; }
}

/* Jace's box sits by his head; his name in black */
.dialogue { right: 27%; bottom: 50%; }
.dialogue .speaker { background: var(--ink); }
@media (max-height: 500px) { .dialogue { right: 25%; bottom: calc(42% + var(--sab)); } }
.prompt.small { font-size: .78rem; line-height: 1.35; max-height: 26vh; overflow-y: auto; }
@media (max-height: 500px) { .prompt.small { font-size: .68rem; max-height: 22vh; } }
/* Jace's box hangs from the same height as his picture: the name pill sits on the picture's top line */
.dialogue { bottom: auto; top: calc(10% + 30px); }
@media (max-height: 500px) { .dialogue { bottom: auto; top: calc(6% + 24px); } }

#drink-modal { align-items: center; justify-content: center; }
#drink-modal .cards.drinkw { width: min(74vw, 780px); max-width: calc(100vw - 32px); margin: 0 auto; }
#drink-modal .drink-card { margin: 0 auto; }
/* Jace's box, one label-width lower; the bat field without its second backdrop */
.dialogue { top: calc(10% + 92px); }
@media (max-height: 500px) { .dialogue { top: calc(6% + 70px); } }
.bat-field { background: transparent; border: 0; box-shadow: none; }
.bat-field .fcards { background: transparent; }

/* ===== Night four: the golden hotel, the salon, Ksena ===== */
/* The hotel on the map burns gold once; the lilac comes back after the street has been visited. */
.shape.gold { --tint: 211,168,94 !important; --strength: 1.9 !important; }

/* Salon flames: bigger, brighter and visibly alive. */
.salon .candle { filter: blur(4px); animation-name: flame; background: radial-gradient(ellipse at 50% 45%, rgba(255,214,140,.95), rgba(255,170,80,.6) 32%, rgba(236,120,60,.26) 58%, rgba(236,120,60,0) 76%); }
@keyframes flame { 0% { opacity: .45; transform: translate(-50%, -50%) scale(.82); } 30% { opacity: .95; transform: translate(-49%, -52%) scale(1.12); } 55% { opacity: .6; transform: translate(-51%, -49%) scale(.94); } 80% { opacity: 1; transform: translate(-50%, -53%) scale(1.22); } 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } }

/* Ksena's figure accepts the coin: an invisible target that only exists while something is carried. */
.spot { position: absolute; transform: translate(-50%, -50%); z-index: 5; border: 0; padding: 0; background: transparent; border-radius: 40%; pointer-events: none; }
body.carrying .spot { pointer-events: auto; cursor: pointer; box-shadow: none !important; }
.carry img { transition: filter .5s ease, transform .5s ease; }
.carry.gold img { filter: drop-shadow(0 0 6px #fff6d8) drop-shadow(0 0 22px var(--gold)) drop-shadow(0 0 44px rgba(211,168,94,.95)); transform: scale(1.08); }
.carry.ghost { transition: none; }
.carry.ghost.pulse { animation: coinpulse 1.5s ease forwards; }
@keyframes coinpulse { 0% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(-10deg); filter: drop-shadow(0 0 16px rgba(211,168,94,.6)); } 35% { opacity: 1; transform: translate(-50%, -60%) scale(1.4) rotate(0deg); filter: drop-shadow(0 0 10px #fff6d8) drop-shadow(0 0 40px var(--gold)) drop-shadow(0 0 70px rgba(211,168,94,1)); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(.5) rotate(10deg); filter: drop-shadow(0 0 60px rgba(211,168,94,0)); } }

/* Easter eggs: no glow, no outline, only a few slow sparks; the pointer is the only other tell. */
.egg { position: absolute; transform: translate(-50%, -50%); z-index: 5; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 30%; }
.egg .sparks { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
body.talking .egg, body.scripting .egg { pointer-events: none !important; }

/* The way out is veiled until Ksena has spoken; it returns with a fade. */
.corner { transition: opacity .8s ease, color .3s ease, border-color .3s ease; }
.corner.veiled { opacity: 0; pointer-events: none; }

/* While someone is talking, nothing else takes a click (the dialogue box itself, and the menu, still do). */
body.talking .shape .hit, body.talking .hot, body.talking .corner, body.talking .corners, body.talking .satchel, body.talking .spot, body.talking .figure-hot, body.talking .prop, body.talking .trace-btn { pointer-events: none !important; }
.vnbox.talk p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; }
.vnbox.talk p + p { font-family: var(--serif); font-size: 1.25rem; margin-top: .55rem; }
.vnbox.talk .vn-name { background: var(--gold); color: var(--ink); }
.vnbox.talk .vn-avatar { border-color: var(--gold); }
.vnbox.talk em { font-style: italic; }
@media (max-height: 500px) { .vnbox.talk p, .vnbox.talk p + p { font-size: 1rem; } }

/* Small pictures beside a kicker (she gives the art; until then the words stand alone). */
.kicker .kicker-ico, .card .kicker-ico { display: inline-block !important; width: 2.6em !important; height: 2.6em; object-fit: contain; vertical-align: middle; margin: -.6em .5em -.4em 0 !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.fortune-inner .kicker-ico { width: 3.2em !important; height: 3.2em; }

/* The ask-once cards */
.ask-title { font: 600 2rem/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .5rem; color: var(--cream); }
.fortune-inner p { margin: .35rem 0; }
.fortune-inner .big { font-family: var(--serif); font-style: italic; font-size: 1.25rem; }
.sugg-label { margin: .7rem 0 .3rem; color: rgba(255,249,237,.6); }
.suggestions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0 0 .4rem; }
.sugg { background: rgba(255,255,255,.08); color: var(--cream); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .45em .9em; font: 500 .8rem var(--sans); letter-spacing: .02em; cursor: pointer; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.sugg:hover { background: var(--lilac); color: var(--ink); border-color: var(--lilac); }
.clue-title { font: 700 .95rem var(--sans); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .5rem; }
.fortune-result.secret p { margin: .3rem 0; }
.fortune-result.secret p:last-child { margin-top: .7rem; font-style: italic; }
.reading-text { text-align: left; }
@media (max-height: 500px) { .ask-title { font-size: 1.4rem; } .fortune-inner .big { font-size: 1.05rem; } .sugg { font-size: .7rem; padding: .35em .7em; } .fortune-inner p { font-size: .85rem; } }

/* The crystal ball with one of her clue pictures: full colour, a little larger. */
.crystal.pic { width: 170px; height: 170px; box-shadow: 0 0 70px rgba(211,168,94,.35), inset 0 0 30px rgba(255,255,255,.2); border-color: rgba(211,168,94,.55); }
.crystal.pic img { mix-blend-mode: normal; }
.crystal.pic.seen img { opacity: 1; transform: scale(1.02); }
@media (max-height: 500px) { .crystal.pic { width: 96px; height: 96px; } }


/* ===== The chapel, night four ===== */
/* The card on the rope: Linn's hand (the signature script from the invitation), then Jace's scrawl beneath it. */
.chapel-card .linn-hand { font-family: 'Great Vibes', var(--hand); font-size: 2rem; line-height: 1.1; color: #2a1a22; margin: -.2rem 0 .7rem; }
.chapel-card .ink { font-size: 1.5rem; margin: -.2rem 0 .6rem; }
.chapel-card .ink.jace { color: var(--cherry); transform: rotate(1.2deg); }
/* A small card for a small hint. */
.cards.small { width: min(360px, calc(100vw - 2rem)); }
.card.small { width: 100%; padding: 1.1rem 1.3rem 1rem; text-align: center; }
.card.small .big { font-size: 1.25rem; margin: 0; }
.card.small .button-row { margin-top: .8rem; }
.card.small .button { min-height: 38px; padding: .5rem .9rem; }
.chapel-card .ink small { font-size: .75em; }
.card .caps { letter-spacing: .08em; text-transform: uppercase; font-size: 1.15rem; font-style: normal; }
/* The teal picture waits on top of the gold one and fades in at the ninth chime. */
.church .layer.teal { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 4s ease; pointer-events: none; z-index: 1; }
.church.teal .layer.teal { opacity: 1; }
/* The windows: gold, then teal. */
.church { --wg: 255,214,140; }
.church.teal { --wg: 70,210,200; }
.winglow { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.winglow i { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; filter: blur(7px); opacity: 0; transition: opacity 2.6s ease; }
.winglow i::before, .winglow i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; transition: opacity 4s ease; }
.winglow i::before { background: radial-gradient(ellipse at center, rgba(255,214,140,.85), rgba(255,214,140,.35) 45%, rgba(255,214,140,0) 72%); opacity: 1; }
.winglow i::after { background: radial-gradient(ellipse at center, rgba(70,210,200,.85), rgba(70,210,200,.35) 45%, rgba(70,210,200,0) 72%); opacity: 0; }
.church.teal .winglow i::before { opacity: 0; }
.church.teal .winglow i::after { opacity: 1; }
.church.glow .winglow i { opacity: .8; animation: winbreath 3.2s ease-in-out infinite alternate; }
@keyframes winbreath { from { opacity: .55; } to { opacity: .95; } }
/* The bell shivers: rings widen from it while the strike rings out. */
.bellring { position: absolute; transform: translate(-50%, -50%); width: 5%; aspect-ratio: 1; pointer-events: none; z-index: 2; }
.bellring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,235,180,.75); opacity: 0; }
.church.ringing .bellring i { animation: ringout 2.1s ease-out infinite; }
.church.ringing .bellring i:nth-child(2) { animation-delay: .7s; }
.church.ringing .bellring i:nth-child(3) { animation-delay: 1.4s; }
@keyframes ringout { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.4); } }
.church.ringing .bellglow { animation: bellflash 6.5s ease-out forwards; }
/* The hooves: her five prints, each fading in and out in turn; all faintly there once the night is settled. */
.hoofimg { position: absolute; opacity: 0; transition: opacity 1.8s ease; pointer-events: none; z-index: 2; }
.hoofimg.show { opacity: 1; }
.church.is-settled .hoofimg { opacity: .5; }
/* The counting: words drift up near the bell and dissolve; sentences settle lower, readable, then go. */
.words { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.bellword { position: absolute; transform: translate(-50%, -50%); color: var(--cream); text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.7); white-space: nowrap; animation: wordfloat var(--life) ease-in-out forwards; }
.bellword.count { font: 500 2.6rem var(--serif); font-style: italic; }
.bellword.title { left: 43%; top: 9%; font: 700 .9rem var(--sans); letter-spacing: .3em; text-transform: uppercase; }
.bellword.line { left: 50%; top: 42%; max-width: min(70vw, 760px); white-space: normal; text-align: center; font: 500 1.45rem/1.3 var(--serif); font-style: italic; }
@keyframes wordfloat { 0% { opacity: 0; transform: translate(-50%, -40%); } 18% { opacity: 1; transform: translate(-50%, -50%); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%); } }
@media (max-height: 500px) { .bellword.count { font-size: 1.7rem; } .bellword.line { font-size: 1.05rem; top: 46%; } .chapel-card .ink { font-size: 1.15rem; } }
/* A silent arrow: only the arrow, no words. */
.purse-hint.silent span { display: none; }
/* The bayou on the map before Friday: there, under moving teal fog, and not yet walkable. */
.shape.fogged { --tint: 90,175,165 !important; }
.shape.fogged .shape-svg { opacity: .82; }
.shape.fogged .hit { cursor: help; }
.shape .fog { position: absolute; left: calc(var(--bx) * 1% - 4%); top: calc(var(--by) * 1% - 6%); width: calc(var(--bw) * 1% + 8%); height: calc(var(--bh) * 1% + 12%); pointer-events: none; mix-blend-mode: screen; opacity: .75; background: radial-gradient(ellipse at 30% 60%, rgba(120,210,200,.55), rgba(120,210,200,0) 55%), radial-gradient(ellipse at 70% 40%, rgba(90,190,180,.5), rgba(90,190,180,0) 55%); filter: blur(14px); animation: fogdrift 11s ease-in-out infinite alternate; }
@keyframes fogdrift { 0% { transform: translate(-3%, 1%) scale(1); opacity: .6; } 50% { opacity: .85; } 100% { transform: translate(3%, -2%) scale(1.08); opacity: .7; } }

.card .locked-line { display: flex; align-items: center; justify-content: center; gap: .5rem; font: 700 .8rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--violet); margin: .4rem 0 0; }

/* ===== Her cursors: the arrow, and the glove for anything that can be touched ===== */
:root { --cur-arrow: url(/img/ui/cur-arrow.png) 0 0, auto; --cur-hand: url(/img/ui/cur-hand.png) 9 0, pointer; }
html, body, *, *::before, *::after { cursor: var(--cur-arrow); }
a, button, label.btn, .hot, .shape .hit, .slot.usable, .slot[data-id="tarot"], .figure, .prop, .scene.vn, .vnbox.script, .lockspot, .egg, .spot, .ckey, .seal, .figure-hot.on, .vamp, .bat-field .bat, .idcard .id-inner, .ed-item, .sugg, .pin.open, .emblem, .satchel, body.carrying, body.carrying *, .frame.tracing .shape .hit, .tr-pt, .tr-mid { cursor: var(--cur-hand) !important; }
textarea, input[type="text"], input[type="search"], input[type="number"], .reading-text, .fortune-result { cursor: text !important; }
.ckey.midnight, .ckey.still, .vamp.struck, button:disabled, .button.enter.dead, .pin.locked, .figure-hot:not(.on), .shape.pending .hit, .shape.dormant .hit { cursor: var(--cur-arrow) !important; }
.frame.tracing { cursor: crosshair !important; }

/* ===== Her navigators: the map top-left, the way back bottom-left ===== */
.back.nav-map, .corner.nav-back { background: none; border: 0; padding: 0; width: 66px; height: 66px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); transition: transform .45s ease, filter .45s ease, opacity .8s ease; }
.back.nav-map { top: calc(10px + var(--sat, 0px)); left: calc(14px + var(--sal, 0px)); border-radius: 0 !important; overflow: visible !important; max-width: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
.back.nav-map img, .corner.nav-back img { width: 100%; height: 100%; object-fit: contain; display: block; }
.back.nav-map:hover, .corner.nav-back:hover { transform: scale(1.08); filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(199,175,210,.75)); }
.corners .corner.nav-back { position: static; }
@media (max-height: 500px) { .back.nav-map, .corner.nav-back { width: 50px; height: 50px; } .back.nav-map { top: 6px; left: 8px; } }

/* Jace's face beside his name on the pool dialogue. */
.dialogue .dlg-avatar { position: absolute; left: -22px; top: -46px; width: 64px; height: 64px; font-size: 1.6rem; }
.dialogue .dlg-avatar ~ .speaker { left: 50px; }
@media (max-height: 500px) { .dialogue .dlg-avatar { width: 48px; height: 48px; top: -36px; font-size: 1.2rem; } .dialogue .dlg-avatar ~ .speaker { left: 34px; } }

/* ===== Night five: the bayou ===== */
/* Fog: two soft banks drifting over the lower scene, coloured per place (teal in the bayou, magenta at the pool). */
.fogbank { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.fogbank::before, .fogbank::after { content: ''; position: absolute; left: -20%; right: -20%; height: 70%; bottom: -15%; mix-blend-mode: screen; filter: blur(28px); }
.fogbank::before { background: radial-gradient(ellipse 45% 60% at 25% 80%, rgba(var(--fog), .42), rgba(var(--fog), 0) 70%), radial-gradient(ellipse 40% 55% at 75% 90%, rgba(var(--fog), .34), rgba(var(--fog), 0) 70%); animation: fogA 22s ease-in-out infinite alternate; }
.fogbank::after { background: radial-gradient(ellipse 50% 50% at 55% 85%, rgba(var(--fog), .3), rgba(var(--fog), 0) 70%), radial-gradient(ellipse 35% 45% at 10% 95%, rgba(var(--fog), .28), rgba(var(--fog), 0) 70%); animation: fogB 31s ease-in-out infinite alternate; }
@keyframes fogA { 0% { transform: translateX(-4%) translateY(1%); opacity: .7; } 50% { opacity: 1; } 100% { transform: translateX(5%) translateY(-2%); opacity: .8; } }
@keyframes fogB { 0% { transform: translateX(4%) scale(1); opacity: .6; } 50% { opacity: .95; } 100% { transform: translateX(-5%) scale(1.06); opacity: .75; } }
.glimmers { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.mote.glim { animation-name: glim; }
@keyframes glim { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 15% { opacity: .9; transform: translate(calc(-50% + var(--dx) * .2), calc(-50% + var(--dy) * .2)) scale(1); } 45% { opacity: .35; } 70% { opacity: .9; transform: translate(calc(-50% + var(--dx) * .7), calc(-50% + var(--dy) * .7)) scale(1.2); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); } }
/* Three voices on the boardwalk: the name tag takes each speaker's colour. */
/* A name tag in the middle of the box; the face stays at its side. */
.vn-who.center { left: 0; right: 0; text-align: center; }
.vnbox.spk-linn .vn-name { background: var(--lilac); color: var(--ink); }
.vnbox.spk-jace .vn-name { background: #0b080b; color: var(--cream); }
.vnbox.spk-horse .vn-name { background: #3b4252; color: var(--cream); }
.vnbox.spk-linn .vn-avatar { border-color: var(--lilac); }
.vnbox.spk-jace .vn-avatar { border-color: #0b080b; }
.vnbox.spk-horse .vn-avatar { border-color: #3b4252; }
.vnbox.talk .stage { font-style: italic; color: var(--violet); font-size: inherit; }
.vnbox.talk .stage b { color: var(--ink); }
body.talking .back, body.talking .nav-map { pointer-events: none !important; }
#chase .words .bellword.line { top: 46%; font-size: 1.6rem; }

/* Replay and sound as her images; the menu's "What's next?" */
.corner.nav-replay, .corner.nav-sound { background: none; border: 0; padding: 0; width: 60px; height: 60px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); transition: transform .45s ease, filter .45s ease; }
.corner.nav-replay img, .corner.nav-sound img { width: 100%; height: 100%; object-fit: contain; display: block; }
.corner.nav-replay:hover, .corner.nav-sound:hover { transform: scale(1.08); filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(199,175,210,.75)); }
.corners .corner.nav-replay { position: static; }
.corner.br.nav-sound { right: 16px; bottom: 16px; }
@media (max-height: 500px) { .corner.nav-replay, .corner.nav-sound { width: 46px; height: 46px; } }
.drawer .whatnext { text-decoration: none; color: var(--paper); background: var(--panel); border: 1px solid var(--violet); border-radius: 999px; padding: 0.35em 0.9em; font: inherit; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; transition: color .3s ease, border-color .3s ease, background .3s ease; }
.drawer .whatnext:hover { color: var(--lilac); border-color: var(--lilac); }
.drawer a.lavender { color: var(--ink); background: var(--lilac); border-color: var(--lilac); }
.drawer a.lavender:hover { color: var(--ink); background: var(--cream); border-color: var(--cream); }
/* The guest's name reads against whatever is behind it: light on dark scenery, ink on light. */
.who-name { font-weight: 600; color: var(--cream); text-shadow: 0 1px 4px rgba(0,0,0,.7); transition: color .5s ease, text-shadow .5s ease; }
.who-name.on-light { color: var(--ink); text-shadow: 0 1px 4px rgba(255,255,255,.6); }
.card.next-card { text-align: left; }
.card.next-card h2 { font-size: 1.7rem; margin: .2rem 0 .4rem; }
.card.next-card .big { font-size: 1.15rem; margin: 0; }

/* ===== The front desk: tabs, the progress sheet, the golden menu entries ===== */
.drawer a.golden { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.drawer a.golden:hover { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 1.5rem 1rem; }
.tabs .tab { text-decoration: none; color: var(--paper); background: var(--panel); border: 1px solid var(--violet); border-radius: 999px; padding: .4em 1em; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; transition: color .3s ease, border-color .3s ease, background .3s ease; }
.tabs .tab:hover { color: var(--lilac); border-color: var(--lilac); }
.tabs .tab.on { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.badge.soft { background: rgba(255,255,255,.14); color: var(--paper); font-size: .7rem; }
.tabs .tab.on .badge.soft { background: rgba(23,17,23,.18); color: var(--ink); }
body.desk .satchel, body.desk .tray, body.desk .carry, body.desk .back { display: none !important; }
body.desk main.wide h1 { padding: 4.6rem 1.5rem 0; text-align: center; }
body.desk main:not(.wide) { padding-top: 4.6rem; } body.desk main:not(.wide) h1 { text-align: center; }
body.desk .tabs { justify-content: center; margin: .6rem auto 1.4rem; }
.grid.players td { vertical-align: middle; }
.role-pill { display: inline-block; padding: .2em .7em; border-radius: 999px; font: 600 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.1); color: var(--paper); border: 1px solid var(--violet); }
.role-pill.admin { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.role-pill.moderator { background: var(--cherry); color: var(--paper); border-color: var(--cherry); }
.role-pill.tester { background: var(--bayou); color: var(--paper); border-color: var(--bayou); }
.grid .actions { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; }
.grid .actions form { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.grid .actions button, .grid .actions .btn, .grid .actions select { font-size: .7rem; padding: .32em .75em; letter-spacing: .04em; }
.grid .actions select { background: var(--ink-soft); color: var(--paper); border: 1px solid var(--violet); border-radius: 999px; }
.grid .actions small { color: var(--lilac); }
.btn.small { padding: .35em .9em; font-size: .75rem; }
.sheet h2 { display: flex; align-items: center; gap: .6rem; color: var(--paper); font-size: 1.5rem; }
.sheet h2 small { font: .8rem var(--sans); color: var(--lilac); }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.night { background: rgba(42,30,40,.6); border: 1px solid var(--violet); border-radius: 12px; padding: .9rem 1rem; }
.night h3 { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--lilac); }
.night.secrets { border-color: var(--gold); }
.steps { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.steps li { display: flex; align-items: flex-start; gap: .5rem; padding: .22rem 0; color: rgba(242,237,227,.55); }
.steps li i { flex: none; width: 14px; height: 14px; margin-top: .2rem; border-radius: 50%; border: 1px solid var(--violet); }
.steps li.done { color: var(--paper); }
.steps li.done i { background: var(--gold); border-color: var(--gold); }
.steps li small { color: var(--lilac); }

/* The notification: a quiet card in the middle of the screen, over whatever the guest is doing. */
.toast { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; pointer-events: none; opacity: 0; transform: none; transition: opacity .7s ease; }
.toast.show { opacity: 1; transform: none; }
.toast-card { pointer-events: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; text-align: center; padding: 1.3rem 1.4rem 1.1rem; border-radius: 22px; color: var(--cream); background: rgba(23,17,23,.74); backdrop-filter: blur(10px); border: 1px solid rgba(211,168,94,.65); box-shadow: 0 0 0 4px rgba(211,168,94,.14), 0 30px 80px rgba(0,0,0,.6); transform: translateY(10px) scale(.97); transition: transform .7s ease; }
.toast.show .toast-card { transform: none; }
.toast-card .t-ico { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto .5rem; font-size: 0; filter: drop-shadow(0 0 14px rgba(211,168,94,.7)); }
.toast-card b { display: block; font: 500 1.5rem/1.15 var(--serif); }
.toast-card span { display: block; font-size: .9rem; color: rgba(255,249,237,.8); margin-top: .3rem; }
.toast-card .button-row { margin-top: .9rem; }
.toast-card .button { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.toast-card .button:hover { background: var(--lilac); border-color: var(--lilac); }
.toast-card .button.secondary { background: transparent; color: var(--cream); }
.toast-card .button.secondary:hover { color: var(--ink); background: var(--lilac); }
@media (max-height: 500px) { .toast-card { padding: .8rem 1rem .7rem; } .toast-card .t-ico { width: 40px; height: 40px; } .toast-card b { font-size: 1.15rem; } .toast-card span { font-size: .78rem; } .toast-card .button-row { margin-top: .5rem; } }

/* ===== Night six: Suite 31 ===== */
/* Dark translucent cards, in the salon's manner. */
.modal.dark .card { background: rgba(23,17,23,.74); color: var(--cream); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(9px); box-shadow: 0 35px 120px rgba(0,0,0,.55); }
.modal.dark .card h2, .modal.dark .card .big { color: var(--cream); }
.modal.dark .card .kicker { color: rgba(255,249,237,.72); }
.modal.dark .card .fine { color: rgba(255,249,237,.6); }
.modal.dark .card .button { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.modal.dark .card .button:hover { background: var(--lilac); border-color: var(--lilac); }
.modal.dark .card .button.secondary { color: var(--cream); background: transparent; }
.modal.dark .card .button.secondary:hover { color: var(--ink); background: var(--lilac); }
.modal.dark .card textarea { background: rgba(255,255,255,.08); color: var(--cream); border-color: rgba(255,255,255,.25); }
.modal.dark .card pre.prompt { background: rgba(255,255,255,.07); color: var(--cream); border: 1px solid rgba(255,255,255,.18); }
.modal.dark .card label.btn { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.modal.dark .card .plaque { display: block; width: max-content; margin: .2rem auto .9rem; padding: .4em 1.2em; border: 1px solid rgba(211,168,94,.7); color: var(--gold); font: 600 1.1rem var(--serif); letter-spacing: .3em; text-transform: uppercase; }
/* Figures standing in the scene: feet on the floor, a given height, arriving with a fade. */
.cast { position: absolute; bottom: 2%; left: 50%; height: var(--h, 70%); width: auto; transform: translate(-50%, 2%); opacity: 0; transition: opacity 1.6s ease, transform 1.6s ease; pointer-events: none; z-index: 4; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.cast.show { opacity: 1; transform: translate(-50%, 0); }
/* The lobby staircase wakes: small lights along the rail, one after another. */
.stairlights { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.stairlights i { position: absolute; width: 3.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,236,190,.95), rgba(255,200,120,.45) 40%, rgba(255,200,120,0) 70%); mix-blend-mode: screen; filter: blur(2px); opacity: 0; transition: opacity 1.4s ease; transition-delay: calc(var(--i) * .55s); }
.stairlights.lit i { opacity: 1; animation: stairbreath 3s ease-in-out calc(var(--i) * .55s + 1.4s) infinite alternate; }
@keyframes stairbreath { from { opacity: .7; } to { opacity: 1; } }
/* A ceiling of stars that twinkle and drift slowly to one side. */
.stars { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.stars i { position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 14px rgba(199,175,210,.7); opacity: 0; animation: twinkle var(--d) ease-in-out var(--o) infinite alternate, stardrift var(--drift) linear infinite; }
@keyframes twinkle { 0% { opacity: .15; transform: scale(.7); } 100% { opacity: 1; transform: scale(1.25); } }
@keyframes stardrift { from { margin-left: 0; } to { margin-left: 4%; } }
/* The party dissolves into its chess-table version; the chess table and the gift table wake afterwards. */
.kiss .layer.alt { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 6s ease-in-out; pointer-events: none; z-index: 1; }
.kiss .layer.alt.show { opacity: 1; }
.kiss .hot.chess, .kiss .hot.table { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.kiss.chessed .hot.chess:not(.replaced), .kiss.chessed .hot.table:not(.replaced), .kiss.cake-ready .hot.cake:not(.replaced) { opacity: 1 !important; pointer-events: auto !important; animation: breathe 2.6s ease-in-out infinite !important; }
.kiss .hot { z-index: 5; }
.egg.knight { display: none; }
/* the knight's outline sits above the chess table's, whichever was traced first */
.kiss .shape[data-replaces="#egg-knight"] { z-index: 4; }
.kiss .cast { z-index: 3; }
.button-row.tight { margin-top: .5rem; gap: .5rem; }
.card .centre { text-align: center; }
.spell-fold { margin: .5rem 0 .2rem; text-align: left; }
.spell-fold .kicker { margin-bottom: .3rem; }
.modal.dark .card pre.prompt.small { font-size: .78rem; max-height: 26dvh; overflow: auto; }
.back.nav-map.veiled { opacity: 0; pointer-events: none; }
.psst.dark { background: rgba(23,17,23,.82); color: var(--cream); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.psst.dark b { color: var(--lilac); }
.psst.dark .psst-bat { fill: var(--cream); }
/* Photographs laid on the table: a white border, a tilt, and a drop from above. */
.modal.photo-card .photo-wrap { display: flex; flex-direction: column; align-items: center; gap: .6rem; width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 24px); }
.modal.photo-card .photo { width: auto; height: auto; max-width: min(560px, 100%); max-height: 46dvh; background: none; padding: 0; border: 1px solid #0b080b; border-radius: 0; box-shadow: 0 24px 60px rgba(0,0,0,.65); transform: translateY(-40px) rotate(-6deg) scale(.96); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
.modal.photo-card .photo.second { transform: translateY(-40px) rotate(5deg) scale(.96); }
.modal.photo-card.open .photo { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
.modal.photo-card.open .photo.second { transform: translateY(0) rotate(2.5deg) scale(1); }
.modal.photo-card .card { width: 100%; padding: 1rem 1.3rem; }
.modal.photo-card .card h2 { font-size: 1.6rem; margin: .1rem 0 .3rem; }
@media (max-height: 500px) { .modal.photo-card .photo-wrap { flex-direction: row; align-items: center; width: min(820px, calc(100vw - 2rem)); } .modal.photo-card .photo { width: 42%; max-height: 80dvh; padding: 5px 5px 14px; } .modal.photo-card .card { width: 58%; font-size: .85rem; } }
/* The figure editor: figures become draggable, the picked one is outlined, everything else steps aside. */
.fig-btn { right: 16px; bottom: 16px; font-size: .72rem; background: var(--panel); color: var(--gold); border-color: var(--gold); opacity: .7; }
.fig-btn:hover { opacity: 1; color: var(--gold); }
body.placing .cast { opacity: 1 !important; transform: translate(-50%, 0) !important; transition: none; pointer-events: auto; cursor: var(--cur-hand) !important; touch-action: none; outline: 1px dashed rgba(199,175,210,.6); outline-offset: 2px; }
body.placing .cast.picked { outline: 2px solid var(--gold); filter: drop-shadow(0 0 18px rgba(211,168,94,.9)); }
body.placing .modal, body.placing .hot, body.placing .shape, body.placing .glimmers, body.placing .stars, body.placing .corners, body.placing .satchel, body.placing .words { display: none !important; }
.fig-panel { position: fixed; left: 16px; top: 76px; z-index: 70; width: 300px; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--gold); border-radius: 14px; backdrop-filter: blur(8px); font-size: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.fig-panel b { font: 500 1.1rem var(--serif); color: var(--gold); }
.fig-panel label { display: flex; align-items: center; gap: .5rem; }
.fig-panel select { flex: 1; background: var(--ink-soft); color: var(--paper); border: 1px solid var(--violet); border-radius: 8px; padding: .3rem .5rem; font: inherit; }
.fig-panel input[type=range] { flex: 1; accent-color: var(--gold); }
.fig-panel .button-row { margin-top: .4rem; justify-content: flex-start !important; }
.fig-panel .button { min-height: 36px; padding: .45rem .9rem; font-size: .7rem; }
/* The horse stands behind the two of them. (Not "back": that class is the map button.) */
.cast.behind { z-index: 3; }
/* While tracing, nothing may cover the picture. */
body.editing .modal, body.editing .fogbank, body.editing .glimmers, body.editing .stars, body.editing .cast, body.editing .words, body.editing .stairlights, body.editing .layer.alt, body.editing .egg, body.editing .spot { display: none !important; }

/* The door and the 31 wait until their moment. */
.corridor .hot.door31 { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.corridor.is-settled .hot.door31 { opacity: 1; pointer-events: auto; }
.kiss .hot.cake { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.kiss.cake-ready .hot.cake { opacity: 1; pointer-events: auto; }
.lockline { left: 72% !important; top: 30% !important; font-size: 1.5rem !important; }
@media (max-height: 500px) { .lockline { font-size: 1.1rem !important; } }