:root {
  --ink: #030a0b;
  --night: #071419;
  --deep: #0e2429;
  --teal: #2b5a5d;
  --fog: #8fb3ae;
  --mist: #a9c4c0;
  --bone: #e3e9df;
  --moon: #eef4e6;
  --spectral: #9fe3d4;
  --ember: #ff5a36;
  --blood: #7d1a1a;
  --display: "IM Fell English SC", "Times New Roman", serif;
  --body: "IM Fell English", Georgia, serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* A single, deliberately dark world: it looks the same in light and dark themes. */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night);
  color: var(--bone);
  font-family: var(--body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 3D stage ─────────────────────────────────────────────── */
#stage { position: fixed; inset: 0; overflow: hidden; background: #0b1d20; }
#stage.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 3px); }
  40%, 60% { transform: translate(7px, -3px); }
}
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
#world.hovering { cursor: pointer; }
#world.hovering.taken { cursor: not-allowed; }
#vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 55% 45%, transparent 55%, rgba(2,8,9,.7) 100%);
}
.loading {
  position: fixed; z-index: 7; left: 50%; top: 58%; transform: translateX(-50%); margin: 0;
  font-style: italic; font-size: 18px; color: var(--mist); letter-spacing: .06em;
  transition: opacity .8s; animation: beckon 1.6s ease-in-out infinite;
}
.loading.done { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s, visibility 0s .8s; }
#bolt { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; opacity: 0; }
#flash { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: #eafcff; }

/* Grave buttons: invisible until focused by keyboard, fully visible if WebGL is unavailable. */
.grave-list { position: fixed; z-index: 9; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(720px, calc(100vw - 32px)); pointer-events: none; }
.grave-list button { pointer-events: auto; }
.grave-list button {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  min-height: 40px; padding: 0 14px; border: 1px solid var(--spectral); border-radius: 3px;
  background: rgba(3,10,11,.85); color: var(--bone); font-family: var(--display); cursor: pointer;
}
.grave-list button:focus-visible { position: static; width: auto; height: auto; clip: auto; overflow: visible; outline: none; box-shadow: 0 0 18px rgba(159,227,212,.5); }
body.fallback .grave-list button { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
.no3d { position: fixed; z-index: 9; left: 50%; top: 45%; transform: translateX(-50%); margin: 0; width: min(420px, calc(100vw - 32px)); text-align: center; font-style: italic; color: var(--mist); }

/* ── Title ────────────────────────────────────────────────── */
.marquee {
  position: fixed; z-index: 6; top: 0; left: 0; right: 0;
  padding: max(18px, env(safe-area-inset-top)) 16px 0;
  text-align: center; pointer-events: none;
  text-shadow: 0 2px 2px var(--ink), 0 0 24px rgba(3,10,11,.95);
  transition: opacity .7s ease, transform .7s ease;
}
/* While the camera is zoomed in on a grave the title steps aside. */
body.focused .marquee { opacity: 0; transform: translateY(-16px); }
body.focused .grave-list { visibility: hidden; }
.kicker { margin: 0; font-size: clamp(13px, 1.6vw, 17px); letter-spacing: .14em; color: var(--mist); font-style: italic; }
.marquee h1 {
  margin: .08em 0 .05em;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 7vw, 88px); line-height: .95; letter-spacing: .01em;
  color: var(--moon);
  text-shadow: 0 0 30px rgba(159,227,212,.25), 0 3px 3px var(--ink), 0 0 24px rgba(3,10,11,.95);
}
.when { margin: .35em 0 0; font-size: clamp(14px, 1.7vw, 19px); color: var(--bone); }
.when .sep { color: var(--spectral); margin: 0 .4em; }
.hint {
  display: inline-block; margin: 14px 0 0; padding: 6px 18px;
  font-size: clamp(13px, 1.5vw, 16px); font-style: italic; letter-spacing: .04em; color: var(--spectral);
  border-top: 1px solid rgba(159,227,212,.35); border-bottom: 1px solid rgba(159,227,212,.35);
  background: radial-gradient(ellipse at center, rgba(3,10,11,.6), transparent 75%);
  animation: beckon 3.6s ease-in-out infinite;
}
@keyframes beckon { 50% { opacity: .55; } }


/* ── Corner UI ────────────────────────────────────────────── */
.corner-ui {
  position: fixed; z-index: 9; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; gap: 10px;
}
.ghost-btn {
  min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(227,233,223,.6); border-radius: 3px;
  background: rgba(3,10,11,.72); color: var(--bone); cursor: pointer;
  font-family: var(--display); font-size: 17px; letter-spacing: .06em;
  transition: background .2s, color .2s, border-color .2s;
}
.ghost-btn:hover, .ghost-btn:focus-visible { background: rgba(159,227,212,.15); border-color: var(--spectral); color: var(--spectral); outline: none; }
.ghost-btn.icon { width: 44px; padding: 0; display: grid; place-items: center; }
.ghost-btn svg { width: 22px; height: 22px; }
.ghost-btn .waves { display: none; }
.ghost-btn[aria-pressed="true"] .waves { display: inline; }
.ghost-btn[aria-pressed="true"] .mute { display: none; }
.toast {
  position: fixed; z-index: 11; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); transform: translateX(-50%);
  margin: 0; width: max-content; max-width: calc(100vw - 32px); padding: 10px 18px; text-align: center;
  font-size: 16px; font-style: italic; color: var(--bone);
  background: rgba(3,10,11,.9); border: 1px solid rgba(159,227,212,.5); border-radius: 3px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6); animation: fade-in .3s ease;
}
.toast[hidden] { display: none; }
/* Thriller's YouTube player: it plays, but is never seen (kept rendered, just invisible and behind
   the scene, since some browsers stop media in frames that are display:none). */
.jukebox { position: fixed; z-index: -1; left: 0; bottom: 0; width: 200px; height: 200px; opacity: 0; pointer-events: none; }
.jukebox iframe { width: 200px; height: 200px; border: 0; }
/* Signed out on claude.ai: a "Sign in" card floats over the bottom ~100px, so lift what sits there. */
body.signed-out .corner-ui { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 104px); }
body.signed-out .toast { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 168px); }
body.signed-out .overlay { padding-bottom: 120px; }
body.signed-out .overlay .tomb-card { max-height: calc(100vh - 152px); }
.demo-ribbon {
  position: fixed; z-index: 9; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0; max-width: calc(100vw - 210px);
  padding: 8px 12px; font-size: 13px; line-height: 1.3; font-style: italic;
  background: rgba(3,10,11,.8); border: 1px dashed #d99a5b; color: #f3cfa6; border-radius: 3px;
}

/* ── Overlays ─────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(3,10,11,.5), rgba(3,10,11,.9));
  animation: fade-in .3s ease;
}
.overlay[hidden] { display: none; }
/* Dialogs about a grave sit beside it, so the grave (and its monster) stay in view. */
body:not(.stacked) .overlay.beside {
  justify-items: end; padding-right: max(4vw, 16px);
  background: linear-gradient(to left, rgba(3,10,11,.85) 0%, rgba(3,10,11,.55) 32%, transparent 58%);
}
body.stacked .overlay.beside { align-items: end; background: linear-gradient(to top, rgba(3,10,11,.9) 0%, rgba(3,10,11,.5) 45%, transparent 62%); }
body.stacked .overlay.beside .coffin { width: min(320px, 100%); max-height: 56vh; }
body.stacked .overlay.beside .tomb-card { max-height: 46vh; padding: 34px 20px 20px; }

.form-error.status { color: var(--spectral); }

/* Host ledger (published page) */
.ledger-panel {
  width: min(760px, 100%); max-height: calc(100% - 8px); overflow-y: auto;
  display: grid; gap: 12px; padding: 22px 20px 18px;
  background: var(--grain), linear-gradient(#16282a, #091315);
  border: 1px solid rgba(185,201,196,.6); border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
}
.ledger-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ledger-head .tomb-kicker { color: var(--fog); }
.ledger-head h2 { margin: 2px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 5vw, 32px); color: var(--moon); text-wrap: balance; }
.ledger-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.lg-stat { display: grid; padding: 8px 14px; border: 1px solid rgba(169,196,192,.25); border-radius: 3px; background: rgba(3,10,11,.4); }
.lg-label { font-family: var(--display); font-size: 12px; letter-spacing: .14em; color: var(--fog); }
.lg-stat strong { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--moon); font-variant-numeric: tabular-nums; }
.lg-tally { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; flex: 1 1 220px; min-width: 0; }
.lg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; font-size: 13px; color: var(--bone); background: rgba(3,10,11,.45); border: 1px solid rgba(169,196,192,.2); border-radius: 999px; }
.lg-chip svg { width: 24px; height: 24px; border-radius: 50%; background: #1d3a3f; }
.ledger-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ledger-tools input, .lg-note {
  flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 0 12px;
  font: 15px var(--body); color: var(--bone); background: rgba(3,10,11,.55);
  border: 1px solid rgba(169,196,192,.3); border-radius: 3px;
}
.ledger-tools input:focus, .lg-note:focus { outline: none; border-color: var(--spectral); }
.ledger-tools input::placeholder, .lg-note::placeholder { color: #5f7a77; font-style: italic; }
.ledger-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-row {
  display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; background: rgba(3,10,11,.4); border: 1px solid rgba(169,196,192,.16); border-radius: 3px;
}
.lg-row.arrived { border-color: rgba(159,227,212,.45); background: rgba(159,227,212,.07); }
.lg-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--spectral); }
.lg-pic svg { width: 40px; height: 40px; border-radius: 50%; background: #1d3a3f; display: block; }
.lg-who { display: grid; min-width: 0; }
.lg-who strong { font-weight: 400; font-size: 16px; color: var(--bone); overflow-wrap: anywhere; }
.lg-who span { font-size: 12.5px; font-style: italic; color: var(--fog); }
.lg-del { min-height: 36px; padding: 0 12px; font-size: 14px; }
.lg-del.armed { border-color: #e36b5d; color: #ffb3a8; }
.lg-empty { padding: 24px 12px; text-align: center; font-style: italic; color: var(--mist); }
@media (max-width: 600px) {
  .lg-row { grid-template-columns: 28px 40px minmax(0, 1fr) auto; }
  .lg-row .lg-note { grid-column: 2 / -1; }
}

/* Monster showcase caption: sits where the dialogs do, beside the risen monster. */
.showcase-caption {
  position: fixed; z-index: 9; top: 50%; right: max(5vw, 16px); transform: translateY(-50%);
  width: min(340px, calc(100vw - 32px)); padding: 40px 26px 26px; text-align: center; color: #1a2625;
  background: var(--grain), linear-gradient(165deg, #b4c4c0, #8a9e9a 55%, #5f7370);
  border: 1px solid #0b1514; border-radius: 50% 50% 6px 6px / 24% 24% 6px 6px;
  box-shadow: inset 6px 0 30px rgba(255,255,255,.12), inset -20px -20px 50px rgba(3,10,11,.45), 0 24px 70px rgba(0,0,0,.75);
  animation: tomb-in .6s cubic-bezier(.2,1.2,.4,1);
}
.showcase-caption[hidden] { display: none; }
.showcase-caption h2 { margin: 6px 0 8px; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--blood); }
.showcase-caption .tomb-blurb { margin: 0; }
body.stacked .showcase-caption { top: auto; bottom: 84px; right: 50%; transform: translateX(50%); padding-top: 32px; }
body.stacked .showcase-caption h2 { font-size: 36px; }
body.showcase .corner-ui, body.showcase .demo-ribbon { opacity: .4; }
@keyframes fade-in { from { opacity: 0; } }

.coffin {
  --cut: polygon(24% 0, 76% 0, 100% 19%, 87% 100%, 13% 100%, 0 19%);
  width: min(430px, 100%); aspect-ratio: 43 / 56; max-height: calc(100vh - 32px);
  padding: 3px;
  clip-path: var(--cut);
  background: linear-gradient(160deg, #b9c9c4, #4d605d);
  animation: coffin-in .5s cubic-bezier(.2,1.3,.4,1);
}
@keyframes coffin-in { from { transform: translateY(50px) rotate(-4deg) scale(.88); opacity: 0; } }
.coffin-inner {
  height: 100%; clip-path: var(--cut);
  background:
    var(--grain),
    radial-gradient(ellipse at 50% 28%, rgba(159,227,212,.1), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,255,255,.025) 9px 10px, transparent 10px 17px),
    linear-gradient(#16282a, #091315);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10% 17% 8%; text-align: center;
}
.coffin-cross { margin: 0; font-size: 28px; color: var(--fog); line-height: 1; }
.coffin h2 { font-family: var(--display); font-weight: 400; font-size: clamp(27px, 7vw, 36px); line-height: 1.05; margin: 8px 0 6px; color: var(--moon); }
.coffin-sub { margin: 0 0 18px; font-size: 15px; font-style: italic; line-height: 1.4; color: var(--mist); }
#rsvp-form { width: 100%; display: flex; flex-direction: column; align-items: center; }
#guest-name {
  width: 100%; padding: 10px 4px; font: 20px var(--body); text-align: center;
  color: var(--bone); background: transparent;
  border: 0; border-bottom: 1px solid var(--fog); border-radius: 0;
}
#guest-name::placeholder { color: #5f7a77; font-style: italic; }
#guest-name:focus { outline: none; border-bottom-color: var(--spectral); box-shadow: 0 6px 12px -8px rgba(159,227,212,.6); }
.form-error { min-height: 1.4em; margin: 8px 0 4px; font-size: 14px; font-style: italic; color: #ff9f8c; }
.rise-btn {
  min-height: 46px; padding: 0 34px; cursor: pointer;
  font-family: var(--display); font-size: 22px; letter-spacing: .08em;
  color: var(--ink); background: linear-gradient(#c3f3e8, #86cfc0);
  border: 1px solid #d7fff5; border-radius: 3px;
  box-shadow: 0 0 22px rgba(159,227,212,.35), inset 0 -2px 0 rgba(0,0,0,.2);
  transition: box-shadow .2s, transform .15s;
}
.rise-btn:hover, .rise-btn:focus-visible { box-shadow: 0 0 34px rgba(159,227,212,.7), inset 0 -2px 0 rgba(0,0,0,.2); transform: translateY(-1px); outline: none; }
.rise-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.leave-btn {
  margin-top: 12px; min-height: 40px; padding: 0 10px; cursor: pointer;
  background: none; border: 0; color: var(--mist); font-size: 15px; font-style: italic; text-decoration: underline; text-decoration-color: rgba(169,196,192,.4);
}

.tomb-card {
  position: relative;
  width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 46px 30px 30px; text-align: center;
  color: #1a2625;
  background:
    var(--grain),
    radial-gradient(circle at 18% 84%, rgba(60,92,70,.5) 0 22px, transparent 30px),
    radial-gradient(circle at 86% 14%, rgba(60,92,70,.35) 0 12px, transparent 18px),
    linear-gradient(165deg, #b4c4c0, #8a9e9a 55%, #5f7370);
  border: 1px solid #0b1514;
  border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.08), inset 6px 0 30px rgba(255,255,255,.12), inset -20px -20px 50px rgba(3,10,11,.45), 0 24px 70px rgba(0,0,0,.75);
  animation: tomb-in .6s cubic-bezier(.2,1.2,.4,1);
}
@keyframes tomb-in { from { transform: translateY(80px); opacity: 0; } }
.tomb-kicker { margin: 0; font-family: var(--display); font-size: 14px; letter-spacing: .3em; color: #2f4442; }
.tomb-card h2 {
  margin: 6px 0 4px; font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 9vw, 46px); line-height: 1; color: #0f1918;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.25);
  overflow-wrap: anywhere;
}
.tomb-line { margin: 4px 0 6px; font-size: 19px; color: #0f1918; }
.tomb-line strong { color: var(--blood); font-weight: 400; font-family: var(--display); }
.tomb-blurb { margin: 0 0 16px; font-size: 15px; font-style: italic; color: #2a3d3b; line-height: 1.45; }
.tomb-details {
  margin: 0 0 22px; padding: 14px 16px; text-align: left; font-size: 15px; line-height: 1.45;
  background: rgba(3,10,11,.12); border: 1px solid rgba(3,10,11,.25); border-radius: 3px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.25);
}
.tomb-details dt { font-family: var(--display); font-size: 12px; letter-spacing: .22em; color: #34504d; margin-top: 10px; }
.tomb-details dt:first-child { margin-top: 0; }
.tomb-details dd { margin: 2px 0 0; color: #0f1918; }
.tomb-details ol { margin: 2px 0 0; padding-left: 20px; }

@media (prefers-reduced-motion: reduce) {
  .hint, .loading { animation: none !important; }
  #stage.shake { animation: none; }
}