:root {
  --dw-bg: #1e120a; --dw-fg: #fff4e0; --dw-accent: #ffb547; --dw-panel: rgba(36, 22, 12, .96);
  --dw-font-body: 'Bricolage Grotesque', system-ui, sans-serif; --display: 'Shrikhand', Georgia, serif; --mono: 'Space Mono', ui-monospace, monospace;
  --red: #e63b2e; --teal: #3fa59c; --wood: #5a3418; --line: rgba(255, 244, 224, .15);
}
body { overflow-x: hidden; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0 0 .45em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); color: var(--dw-accent); }
section { padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 64px); }
[id] { scroll-margin-top: 76px; }
.intro { max-width: 62ch; }
.muted { opacity: .75; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 12px clamp(16px, 4vw, 40px); background: #1e120ad8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); font-size: 1.3rem; color: var(--dw-fg); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--red); }
.topbar nav { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: .82rem; }
.topbar nav a { color: var(--dw-fg); text-decoration: none; }
.topbar nav a:hover { color: var(--dw-accent); }
@media (max-width: 640px) { .topbar nav a { display: none; } .brand { font-size: 1.1rem; } }

.hero { padding-top: clamp(90px, 10vw, 120px); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1320px; margin: 0 auto; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-copy { order: -1; } }
.studio { position: relative; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px #000b, 0 0 0 6px #5a341855; }
.studio img { width: 100%; height: auto; }
.kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin: 0 0 1rem; }
.hero h1 { font-size: clamp(3rem, 7.5vw, 5.8rem); color: var(--dw-fg); text-shadow: 4px 4px 0 var(--red); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.2rem); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.btn { font-weight: 800; font-size: 1rem; text-decoration: none; color: var(--dw-fg); border: 2px solid var(--dw-fg); padding: .75em 1.3em; border-radius: 999px; transition: background .2s, color .2s; }
.btn:hover { background: var(--dw-fg); color: var(--dw-bg); }
.btn-hot { background: var(--red); border-color: var(--red); color: #fff; }
.btn-hot:hover { background: #ff5a4c; border-color: #ff5a4c; color: #fff; }
.hs { position: absolute; z-index: 3; 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(--dw-accent); background: #ffb54722; }
.hs.is-found { border-color: #3fa59c; }
.hs-buzzer { left: 45%; top: 58%; width: 12%; } .hs-timer { left: 38%; top: 60%; width: 7%; } .hs-bulb { left: 62%; top: 9%; width: 10%; }

.round { background: var(--wood); background: linear-gradient(#3a210f, #2a180b); }
.round > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.riddles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 1.4rem; }
.riddle { background: var(--dw-fg); color: #2a180b; border-radius: 18px; padding: 1.2rem 1.3rem; box-shadow: 0 10px 0 #0004; display: grid; gap: .6rem; align-content: start; }
.r-n { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0; }
.r-q { font-size: 1.12rem; font-weight: 600; margin: 0; }
.buzz { justify-self: start; font-family: var(--display); font-size: 1.15rem; color: #fff; background: radial-gradient(circle at 35% 30%, #ff6a5c, #c4241a); border: 0; border-radius: 999px; padding: .45em 1.3em; cursor: pointer;
  box-shadow: 0 5px 0 #7a1410; transition: transform .1s, box-shadow .1s; }
.buzz:active { transform: translateY(4px); box-shadow: 0 1px 0 #7a1410; }
.buzz[disabled] { background: var(--teal); box-shadow: 0 5px 0 #1f5a55; cursor: default; }
.r-a { margin: 0; font-weight: 700; color: #1f5a55; }
.r-score { font-family: var(--mono); color: var(--dw-accent); min-height: 1.4em; }

.vote > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.eps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 1.4rem; }
.ep { width: 100%; height: 100%; font: inherit; text-align: left; color: var(--dw-fg); background: #2c1a0d; border: 2px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; cursor: pointer; display: grid; gap: .3rem;
  transition: border-color .2s, transform .15s, background .2s; position: relative; }
.ep b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--dw-accent); }
.ep span { font-size: .95rem; opacity: .88; }
.ep::after { content: '+'; position: absolute; right: 12px; top: 8px; font-family: var(--mono); font-size: 1.2rem; opacity: .6; }
.ep:hover, .ep:focus-visible { border-color: var(--dw-accent); transform: translateY(-2px); }
.ep.on { background: #3a2410; border-color: var(--teal); }
.ep.on::after { content: '✓'; color: var(--teal); opacity: 1; }
.picks { font-family: var(--mono); margin-top: 1rem; } .picks b { color: var(--teal); }
.picklist { opacity: .8; }
.support { margin-top: 2.4rem; }
.support h3 { color: var(--dw-fg); font-size: 1.6rem; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: .8rem; }
.offer { font: inherit; color: #2a180b; background: var(--dw-fg); border: 0; border-radius: 16px; padding: 1rem 1.1rem; cursor: pointer; display: grid; gap: .2rem; text-align: left; box-shadow: 0 6px 0 #0005; transition: transform .15s; }
.offer b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: var(--red); }
.offer:hover, .offer:focus-visible { transform: translateY(-3px); }

.listen { display: grid; justify-items: center; text-align: center; background: radial-gradient(70% 80% at 50% 100%, #4a1a10, var(--dw-bg)); }
.listen .dw-optin { text-align: left; width: 100%; margin-bottom: 1.4rem; }
.dw-optin input[type=email], .dw-optin button[type=submit] { border-radius: 999px; }
.dw-optin button[type=submit] { background: var(--red); color: #fff; }
.offer-note { margin: 0; color: var(--dw-accent); font-weight: 700; }
.found { font-family: var(--mono); color: var(--teal); }
.journal { max-width: 700px; text-align: left; } .journal li { margin: .5em 0; }
.reward { max-width: 640px; border: 2px solid var(--teal); border-radius: 14px; padding: .8rem 1.1rem; }

.foot { padding: 30px 16px 10px; text-align: center; border-top: 1px solid var(--line); }
.more { font-family: var(--mono); font-size: .85rem; }
.die { font-size: 2rem; color: var(--dw-accent); background: none; border: 0; cursor: pointer; opacity: .55; }
.die:hover, .die.is-found { opacity: 1; }