:root {
  --dw-bg: #1e0d2e; --dw-fg: #f4ead2; --dw-accent: #e8c15a; --dw-panel: rgba(42, 18, 64, .96);
  --dw-font-body: 'Crimson Pro', Georgia, serif; --display: 'Almendra', Georgia, serif; --neon: 'Monoton', 'Arial Black', sans-serif;
  --plum: #2a1240; --magenta: #e04ba0; --gold: #e8c15a; --parch: #f4ead2; --ink: #2b1a12; --line: rgba(244, 234, 210, .18);
}
body { overflow-x: hidden; font-size: 1.12rem; background: radial-gradient(80% 50% at 50% 0%, #3d1a5e, var(--dw-bg) 70%) fixed, var(--dw-bg); }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.02; margin: 0 0 .45em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); color: var(--gold); }
section { padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 64px); }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 10px clamp(16px, 4vw, 40px); background: #1e0d2ee0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #e8c15a55; }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--parch); text-decoration: none; }
.brand .p { font-family: var(--neon); font-weight: 400; color: var(--magenta); text-shadow: 0 0 12px #e04ba0aa; font-size: 1.2rem; }
.topbar nav { display: flex; align-items: center; gap: 18px; font-size: 1rem; }
.topbar nav a { color: var(--parch); text-decoration: none; }
.topbar nav a:hover { color: var(--gold); }
@media (max-width: 640px) { .topbar nav a { display: none; } }

.hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 56px); align-items: center; min-height: 100svh; padding-top: 96px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: 0; } .plate { order: -1; } }
.kicker { font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--magenta); margin: 0 0 .8rem; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); color: var(--parch); }
.hero h1 em { font-style: normal; color: var(--gold); }
.lede { font-size: clamp(1.12rem, 1.8vw, 1.3rem); max-width: 50ch; opacity: .94; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.btn { font-family: var(--display); font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--parch); border: 2px solid var(--gold); padding: .6em 1.3em; border-radius: 6px; transition: background .2s, color .2s; }
.btn:hover { background: var(--gold); color: var(--plum); }
.btn-hot { background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: 0 0 24px #e04ba066; }
.plate { position: relative; margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 3px #e8c15a88, 0 30px 80px #000a; }
.plate img { width: 100%; height: auto; }

.hs { position: absolute; width: 8%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed transparent; background: transparent; transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--gold); background: #e8c15a33; }
.hs.is-found { border-color: #e04ba088; }
.hs-moon { left: 79%; top: 14%; width: 9%; } .hs-corsage { left: 23.5%; top: 65.5%; width: 5%; }
.hs-armor { left: 84%; top: 52%; width: 9%; } .hs-punch { left: 26%; top: 71%; width: 9%; } .hs-lute { left: 15%; top: 54%; width: 9%; }

.rules { display: grid; place-items: center; }
.vellum { max-width: 720px; background: var(--parch); color: var(--ink); padding: clamp(24px, 4vw, 44px); border-radius: 4px; box-shadow: 0 0 0 6px #2a1240, 0 0 0 8px var(--gold), 0 30px 80px #000a; }
.vellum h2 { color: #6b1f5a; }
.truths { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.truths li { display: flex; gap: .7rem; align-items: center; }
.truths span { font-size: 1.4rem; }

.game { text-align: center; }
.game-head { max-width: 820px; margin: 0 auto 1.4rem; }
.stage { max-width: 980px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 3px var(--gold), 0 30px 90px #000c; background: #120720; }
#tower { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; }
.narrator { margin: 0; min-height: 3.6em; padding: 12px 18px; background: var(--parch); color: var(--ink); font-size: 1.12rem; font-style: italic; text-align: left; }
.controls { max-width: 980px; margin: 18px auto 0; display: grid; gap: 14px; }
.levers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .levers { grid-template-columns: repeat(2, 1fr); } }
.lever { font: inherit; font-family: var(--display); font-weight: 700; font-size: 1.05rem; padding: .8em .6em; border-radius: 8px; border: 2px solid var(--gold); background: #2a1240; color: var(--parch); cursor: pointer; transition: transform .15s, background .15s; }
.lever span { display: block; font-size: 1.6rem; }
.lever:hover:not([disabled]), .lever:focus-visible { background: #3f1c60; transform: translateY(-2px); }
.lever[disabled] { opacity: .35; cursor: default; }
.order { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; counter-reset: o; }
.order li { counter-increment: o; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .4em; border: 2px dashed #e8c15a66; border-radius: 8px; font-size: .98rem; padding: .3em; }
.order li::before { content: counter(o) '.'; color: var(--gold); font-family: var(--display); font-weight: 700; }
.order li.set { border-style: solid; background: #e8c15a1a; }
.order li.now { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.row { display: flex; justify-content: center; gap: 14px; align-items: center; flex-wrap: wrap; }
.bell { font: inherit; font-family: var(--display); font-weight: 700; font-size: 1.35rem; padding: .45em 1.4em; border-radius: 999px; border: 0; background: var(--gold); color: var(--plum); cursor: pointer; box-shadow: 0 0 24px #e8c15a55; }
.bell[disabled] { opacity: .4; cursor: default; box-shadow: none; }
.ghost { font: inherit; background: none; border: 0; color: var(--parch); text-decoration: underline; cursor: pointer; }
.endings { margin: 0; }
.ending-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 0; }
.ending-list li { font-size: .9rem; padding: .25em .7em; border-radius: 999px; border: 1px solid var(--line); opacity: .45; }
.ending-list li.got { opacity: 1; border-color: var(--gold); color: var(--gold); }
.ending-list li.win.got { background: var(--magenta); color: #fff; border-color: var(--magenta); }

.hall { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hall .reward, .hall .journal { grid-column: 1 / -1; }
@media (max-width: 900px) { .hall { grid-template-columns: 1fr; } }
.art { position: relative; margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 3px #e8c15a88, 0 30px 80px #000a; }
.art img { width: 100%; height: auto; }
.features { padding-left: 1.1em; }
.features li { margin: .4em 0; }
.features b { color: var(--gold); }
.found { color: var(--gold); }
.reward { max-width: 720px; margin: 0 auto; padding: 1rem 1.2rem; border: 2px solid var(--magenta); border-radius: 8px; background: #e04ba01a; }
.journal { max-width: 780px; margin: 0 auto; }
.journal li { margin: .5em 0; }

.vote { text-align: center; max-width: 1000px; margin: 0 auto; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 1.2rem auto 0; }
.offer { font: inherit; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--parch); background: #2a1240; border: 2px solid #e8c15a88; border-radius: 10px; padding: 1em; cursor: pointer; transition: transform .15s, border-color .15s; }
.offer small { font-family: var(--dw-font-body); font-weight: 400; font-size: .92rem; opacity: .85; }
.offer:hover, .offer:focus-visible { transform: translateY(-3px); border-color: var(--magenta); }
.offers.small .offer { font-size: 1rem; }
.also { margin: 2rem 0 0; color: var(--gold); }

.rsvp { display: grid; place-items: center; }
.invite { width: min(640px, 100%); background: var(--parch); color: var(--ink); text-align: center; padding: clamp(24px, 5vw, 48px); border-radius: 4px; box-shadow: 0 0 0 6px var(--plum), 0 0 0 9px var(--gold), 0 30px 80px #000a; }
.invite h2 { color: #6b1f5a; }
.invite-k { font-family: var(--neon); color: var(--magenta); font-size: clamp(.9rem, 2.4vw, 1.2rem); margin: 0 0 .6rem; }
.invite .dw-optin { text-align: left; margin: 0 auto; --dw-fg: #2b1a12; --dw-bg: #f4ead2; --dw-accent: #6b1f5a; }
.invite .dw-optin input[type=email] { background: #fff; border: 2px solid #6b1f5a55; }
.invite .dw-optin button[type=submit] { background: var(--magenta); color: #fff; }
.offer-note { margin: 0; color: #6b1f5a; font-weight: 700; }

.foot { padding: 30px 16px 10px; text-align: center; border-top: 1px solid var(--line); }
.glyph { font: inherit; background: none; border: 0; color: inherit; padding: 0 .3em; cursor: pointer; font-size: 1.1rem; }
.glyph:hover, .glyph:focus-visible { color: var(--gold); }