:root {
  --dw-bg: #2a1238; --dw-fg: #fff3e2; --dw-accent: #ffb43b; --dw-panel: rgba(30, 12, 40, .96);
  --dw-font-body: 'Space Grotesk', system-ui, sans-serif; --display: 'Shrikhand', Georgia, serif; --mono: 'Space Mono', ui-monospace, monospace;
  --plum: #2a1238; --deep: #1a0d22; --mint: #7ef2c8; --pink: #ff6fa8; --gold: #ffb43b; --cream: #fff3e2; --line: #fff3e222;
}
body { overflow-x: hidden; background: radial-gradient(90% 60% at 50% 0%, #4a1f5e, var(--plum) 60%, var(--deep)); background-attachment: fixed; }
.marquee { overflow: hidden; white-space: nowrap; background: var(--gold); color: var(--deep); font-family: var(--mono); font-size: .78rem; font-weight: 700; padding: 6px 0; }
.marquee span { display: inline-block; padding-left: 100%; animation: mq 32s linear infinite; }
@keyframes mq { to { transform: translateX(-100%); } }
.bar { display: flex; justify-content: space-between; align-items: center; padding: 12px clamp(16px, 4vw, 40px); }
.mini-logo { font-family: var(--display); color: var(--cream); text-decoration: none; font-size: 1.4rem; }
.dw-audio { font-family: var(--mono); }

.booth { position: relative; display: grid; justify-items: center; text-align: center; padding: clamp(10px, 4vw, 40px) 16px 60px; min-height: 78svh; align-content: start; }
.eyes { width: min(300px, 70vw); }
.eyes-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 30px #0008); }
.white { fill: #fff8ec; stroke: var(--deep); stroke-width: 5; }
.pupil { fill: var(--deep); }
.lid { fill: #6a2d86; transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: transform .09s; }
.lid.is-shut { transform: scaleY(2); }
.blink-btn { position: absolute; top: clamp(10px, 4vw, 40px); width: min(300px, 70vw); height: min(165px, 38vw); border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.logo { font-family: var(--display); font-weight: 400; font-size: clamp(4rem, 14vw, 8.5rem); line-height: .9; margin: .1em 0 0; color: var(--cream);
  text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 #00000055; letter-spacing: -.01em; }
.logo .sub { display: block; font-family: var(--mono); font-size: .8rem; letter-spacing: .5em; text-transform: uppercase; color: var(--mint); text-shadow: none; margin-top: .6rem; }
.tag { font-size: 1.1rem; opacity: .9; margin: .8rem 0 1.4rem; }
.search { width: min(680px, 100%); display: grid; gap: 14px; }
.search input { width: 100%; font: inherit; font-size: 1.15rem; padding: 1em 1.2em; border-radius: 18px; border: 3px solid var(--gold); background: #fff8ec; color: var(--deep); box-shadow: 0 8px 0 #c2851f, 0 20px 40px #0006; }
.search input:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.go, .peculiar { font-family: var(--mono); font-weight: 700; font-size: .95rem; padding: .85em 1.4em; border-radius: 999px; border: 2px solid var(--cream); cursor: pointer; transition: transform .15s; }
.go { background: var(--pink); color: var(--deep); border-color: var(--pink); }
.peculiar { background: transparent; color: var(--cream); }
.go:hover, .peculiar:hover { transform: rotate(-2deg) scale(1.04); }

.results { width: min(760px, 100%); text-align: left; margin-top: 2rem; }
.meta { font-family: var(--mono); font-size: .8rem; opacity: .75; margin: 0 0 1rem; }
.dym { margin: 0 0 1.2rem; }
.dym b { color: var(--mint); }
.res { background: #fff3e20d; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; animation: drop .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.res:nth-child(odd) { transform: rotate(-.4deg); } .res:nth-child(even) { transform: rotate(.4deg); }
@keyframes drop { from { opacity: 0; translate: 0 -10px; } }
.res .u { font-family: var(--mono); font-size: .78rem; color: var(--mint); word-break: break-all; }
.res h3 { font-size: 1.2rem; margin: .2rem 0 .3rem; color: var(--gold); font-weight: 700; }
.res p { margin: 0; opacity: .88; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; font-family: var(--display); font-size: 1.6rem; margin-top: 1rem; }
.pager .o { color: var(--pink); } .pager .o:nth-child(odd) { color: var(--gold); }
.pager button { font-family: var(--mono); font-size: .85rem; background: none; border: 1px solid var(--line); color: var(--cream); padding: .4em .9em; border-radius: 999px; cursor: pointer; }
.ghost-secret { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

.about { padding: clamp(40px, 7vw, 90px) clamp(16px, 5vw, 64px); background: var(--deep); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 1200px; margin: 0 auto; }
.card { background: var(--plum); border: 2px solid var(--line); border-radius: 22px; padding: 22px; }
.card h2 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; margin: 0 0 .5rem; color: var(--gold); }
.small { font-size: .85rem; opacity: .7; }
.offers { display: grid; gap: 10px; }
.offer { display: grid; text-align: left; font: inherit; color: var(--cream); background: var(--deep); border: 2px solid var(--line); border-radius: 14px; padding: .9em 1em; cursor: pointer; }
.offer b { color: var(--pink); }
.offer small { opacity: .75; }
.offer:hover, .offer:focus-visible { border-color: var(--mint); }
.dw-optin button[type=submit] { background: var(--mint); color: var(--deep); font-family: var(--mono); }
.offer-note { margin: 0; color: var(--mint); font-family: var(--mono); font-size: .85rem; }
.found-box { max-width: 720px; margin: 2.4rem auto 0; }
.found { font-family: var(--mono); text-align: center; color: var(--mint); }
.reward { padding: 1rem 1.2rem; border: 2px solid var(--gold); border-radius: 14px; }
.journal li { margin: .5em 0; }
.foot { padding: 30px 16px 10px; text-align: center; background: var(--deep); border-top: 1px solid var(--line); }
.more { font-family: var(--mono); font-size: .85rem; }
.more a { color: var(--mint); }
.tm { cursor: pointer; border-bottom: 1px dotted currentColor; }
