:root {
  --dw-bg: #0b0f0a; --dw-fg: #ece3cf; --dw-accent: #ff8a2a; --dw-muted: #9aa58f; --dw-panel: rgba(14, 20, 12, .95);
  --dw-font-body: 'Crimson Pro', Georgia, serif; --dw-font-display: 'Sancreek', Georgia, serif;
  --mono: 'Courier Prime', 'Courier New', monospace; --green: #8dff7e; --wood: #3a2216; --brass: #c9a24a; --line: #2b3526;
}
body { font-size: 1.12rem; }
section { padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 48px); }
h1, h2 { font-family: var(--dw-font-display); font-weight: 400; line-height: 1.05; margin: 0 0 .45em; letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); color: var(--dw-accent); text-shadow: 0 0 24px #ff8a2a44; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 3vw, 32px); background: linear-gradient(#0b0f0af0, #0b0f0a00); }
.brand { font-family: var(--dw-font-display); font-size: 1.35rem; color: var(--dw-accent); text-decoration: none; display: inline-flex; align-items: center; gap: .5em; }
.brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 1.6s steps(2) infinite; }
.brand i:last-child { animation-delay: .8s; }
@keyframes blink { 50% { opacity: .25; } }
.topbar nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); font-family: var(--mono); font-size: .9rem; }
.topbar nav a { color: var(--dw-fg); text-decoration: none; opacity: .8; }
.topbar nav a:hover { opacity: 1; color: var(--dw-accent); }
@media (max-width: 520px) { .topbar nav a[href="#printables"] { display: none; } .brand { font-size: 1.1rem; } }

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 0; overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0b0f0aee 0%, #0b0f0a99 38%, transparent 65%), linear-gradient(transparent 55%, #0b0f0a 98%); }
.hero-copy { position: relative; z-index: 2; max-width: 640px; padding: 0 clamp(16px, 5vw, 64px) clamp(48px, 8vw, 96px); }
.kicker { font-family: var(--mono); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); color: var(--dw-fg); text-shadow: 0 4px 30px #000; }
.hero h1 span { color: var(--dw-accent); }
.lede { font-size: clamp(1.08rem, 1.8vw, 1.28rem); max-width: 560px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.5rem; }
.btn { display: inline-block; padding: .8em 1.4em; border: 1px solid #ece3cf66; color: var(--dw-fg); text-decoration: none; font-family: var(--mono); border-radius: 999px; }
.btn:hover { border-color: var(--dw-accent); color: var(--dw-accent); }
.btn-hot { background: var(--dw-accent); color: #1c0c00; border-color: var(--dw-accent); font-weight: 700; }
.btn-hot:hover { background: #ffa65a; color: #1c0c00; }
.hand { position: absolute; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 50%; background: radial-gradient(#8dff7e33, transparent 70%); animation: pulse 2.8s ease-in-out infinite; }
.hand:hover, .hand:focus-visible { background: radial-gradient(#8dff7e66, transparent 70%); }
@keyframes pulse { 50% { transform: scale(1.3); opacity: .6; } }

/* machine */
.machine-sec { background: radial-gradient(60% 50% at 30% 30%, #142313, var(--dw-bg)); }
.m-head { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
.m-head p { opacity: .88; }
.m-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 820px) { .m-grid { grid-template-columns: 1fr; justify-items: center; } }
.cabinet { position: relative; width: 100%; max-width: 400px; background: linear-gradient(90deg, #26150d, var(--wood) 18%, #4a2c1c 50%, var(--wood) 82%, #26150d); border-radius: 12px 12px 6px 6px;
  padding: 22px 22px 70px; box-shadow: 0 40px 90px #000c, inset 0 0 0 3px #1a0e08, inset 0 0 0 6px #5b3a22; }
.crest { position: absolute; left: 50%; top: -34px; width: 70%; height: 46px; transform: translateX(-50%); background: var(--wood); border-radius: 50% 50% 0 0 / 100% 100% 0 0; box-shadow: inset 0 0 0 3px #1a0e08, inset 0 0 0 6px #5b3a22; }
.case { position: relative; border-radius: 6px; overflow: hidden; background: #071007; box-shadow: inset 0 0 40px #000, 0 0 0 4px var(--brass); }
.marrow { width: 100%; height: auto; }
.cabinet.is-running .marrow { animation: shudder .12s linear infinite; }
@keyframes shudder { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
.jaw { transition: transform .08s; transform-origin: 100px 138px; }
.jaw.is-open { transform: translateY(9px); }
.bulbs { position: absolute; inset: 6px; display: flex; justify-content: space-between; pointer-events: none; z-index: 2; }
.bulbs i { width: 9px; height: 9px; border-radius: 50%; background: #ffcf7a; box-shadow: 0 0 8px #ffb347; opacity: .55; }
.cabinet.is-running .bulbs i { animation: chase .6s steps(2) infinite; }
.bulbs i:nth-child(odd) { animation-delay: .3s !important; }
@keyframes chase { 50% { opacity: .1; } }
.panel { margin-top: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: linear-gradient(#5e4a22, #3f2f14); border-radius: 6px; padding: 12px; box-shadow: inset 0 0 0 2px var(--brass); }
.slot { display: grid; justify-items: center; gap: 4px; background: none; border: 0; color: #f3dfa8; cursor: pointer; font-family: var(--mono); font-size: .72rem; padding: 4px; }
.slot-mouth { width: 34px; height: 46px; border-radius: 6px; background: radial-gradient(#e8c66a, #8a6a24); display: grid; place-items: center; box-shadow: inset 0 0 0 2px #2a1d08; position: relative; }
.slot-mouth::after { content: ''; width: 4px; height: 26px; background: #120b03; border-radius: 2px; }
.slot.is-fed .slot-mouth { box-shadow: inset 0 0 0 2px #2a1d08, 0 0 14px var(--green); }
.slot:disabled { cursor: default; opacity: .7; }
.dial { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; font-family: var(--mono); font-size: .8rem; color: #f3dfa8; min-width: 0; }
.dial legend { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; }
.dial label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.dial input { accent-color: var(--dw-accent); }
.midnight { color: var(--green); }
.dial label[hidden] { display: none; }
.lever { width: 62px; height: 92px; border: 0; background: none; cursor: pointer; position: relative; font-family: var(--mono); color: #f3dfa8; font-size: .72rem; }
.lever::before { content: ''; position: absolute; left: 50%; bottom: 14px; width: 8px; height: 62px; margin-left: -4px; background: linear-gradient(90deg, #8a8a8a, #e6e6e6, #8a8a8a); border-radius: 4px; transform-origin: 50% 100%; transform: rotate(-18deg); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.lever::after { content: ''; position: absolute; left: 50%; top: 4px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9b6b, #b0200f); transform-origin: 50% 74px; transform: rotate(-18deg); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 4px 10px #0008; }
.lever span { position: absolute; bottom: 0; left: 0; right: 0; }
.lever.is-pulled::before, .lever.is-pulled::after { transform: rotate(28deg); }
.lever:disabled { cursor: default; opacity: .55; }
.lever:not(:disabled)::after { box-shadow: 0 0 16px #ff8a2a, 0 4px 10px #0008; }
.chute { position: absolute; left: 50%; bottom: 20px; width: 110px; height: 20px; margin-left: -55px; background: #120b03; border-radius: 4px; box-shadow: inset 0 0 0 3px var(--brass); }
.coinret { position: absolute; right: 18px; bottom: 22px; font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: #c9a24a; background: #1a0e08; border: 1px solid #5b3a22; border-radius: 3px; padding: 2px 6px; }
.coinret:hover, .coinret:focus-visible { color: var(--green); }

.out { display: grid; gap: 14px; justify-items: start; width: 100%; max-width: 560px; }
.status { font-family: var(--mono); font-size: .95rem; color: var(--green); margin: 0; min-height: 2.6em; }
.ticket { width: 100%; background: #f1e6c6; color: #2a1a10; padding: 18px 22px 14px; font-family: var(--mono); position: relative;
  border-left: 8px dotted #0b0f0a; border-right: 8px dotted #0b0f0a; box-shadow: 0 20px 50px #000a; transform-origin: top center; }
.ticket.is-printing { animation: print 1.4s steps(14) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.ticket header { display: flex; justify-content: space-between; font-family: var(--dw-font-display); font-size: 1.1rem; color: #8c1d10; border-bottom: 2px dashed #2a1a1055; padding-bottom: 6px; }
.ticket header span:last-child { font-family: var(--mono); font-size: .85rem; align-self: center; }
.t-level { margin: .5em 0 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #6b5a3a; }
.t-tale { font-family: var(--dw-font-body); font-size: 1.32rem; line-height: 1.35; margin: .3em 0 .8em; color: #1a1008; }
.ticket dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 .8em; font-size: .92rem; }
.ticket dt { font-weight: 700; color: #8c1d10; text-transform: uppercase; font-size: .75rem; letter-spacing: .12em; padding-top: .2em; }
.ticket dd { margin: 0; }
.ticket footer { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #6b5a3a; border-top: 2px dashed #2a1a1055; padding-top: 6px; }
.ticket.is-midnight { background: #101a0f; color: #d9ffd2; }
.ticket.is-midnight .t-tale { color: #d9ffd2; } .ticket.is-midnight header, .ticket.is-midnight dt { color: var(--green); }
.t-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.t-actions button { font-family: var(--mono); font-size: .9rem; padding: .6em 1em; border-radius: 999px; border: 1px solid #ece3cf55; background: transparent; color: var(--dw-fg); cursor: pointer; }
.t-actions button:hover, .t-actions button:focus-visible { border-color: var(--dw-accent); color: var(--dw-accent); }
.pulls { font-family: var(--mono); font-size: .85rem; color: var(--dw-muted); margin: 0; }
.pulls b { color: var(--dw-accent); }

/* prizes */
.prizes { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.prizes .found, .prizes .reward, .prizes .journal { grid-column: 1 / -1; }
@media (max-width: 860px) { .prizes { grid-template-columns: 1fr; } }
.art { position: relative; margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 90px #000c, 0 0 0 6px #3a2216; }
.art img { width: 100%; height: auto; }
.hs { position: absolute; width: 10%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed transparent; background: transparent; transform: translate(-50%, -50%); transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--green); background: #8dff7e22; }
.hs.is-found { border-color: #ff8a2a99; }
.hs-monkey { left: 26%; top: 55%; } .hs-eyes { left: 38%; top: 58%; } .hs-doll { left: 79%; top: 47%; } .hs-roll { left: 87%; top: 62%; }
.found { font-family: var(--mono); font-size: .9rem; text-align: center; opacity: .85; }
.reward { max-width: 640px; margin: 0 auto; padding: 1rem 1.2rem; border: 1px solid var(--green); border-radius: 6px; background: #8dff7e12; }
.journal { max-width: 760px; margin: 0 auto; font-size: 1rem; opacity: .92; }
.journal li { margin: .5em 0; }

.shop { text-align: center; background: linear-gradient(var(--dw-bg), #170d06 60%, var(--dw-bg)); }
.shop > p { max-width: 680px; margin: 0 auto; opacity: .88; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 1040px; margin: 1.8rem auto 0; }
.offer { font: inherit; font-size: 1.18rem; font-weight: 600; color: var(--dw-fg); background: #121a10; border: 1px solid var(--line); border-radius: 10px; padding: 1.2em 1em; cursor: pointer; transition: border-color .2s, transform .2s; }
.offer small { display: block; margin-top: .3em; font-weight: 400; font-size: .92rem; opacity: .78; }
.offer:hover, .offer:focus-visible { border-color: var(--dw-accent); transform: translateY(-2px); }

.roster { display: grid; justify-items: center; text-align: center; }
.roster > p { max-width: 580px; opacity: .88; }
.roster .dw-optin { text-align: left; width: 100%; }
.dw-optin button[type=submit] { font-family: var(--mono); }
.offer-note { margin: 0; color: var(--dw-accent); font-family: var(--mono); font-size: .88rem; }

.foot { padding: 30px 16px 6px; text-align: center; border-top: 1px solid var(--line); }
.more { font-family: var(--mono); font-size: .88rem; }
.glyph { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; padding: 0; }
.glyph:hover, .glyph:focus-visible { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .brand i, .hand, .cabinet.is-running .marrow, .cabinet.is-running .bulbs i { animation: none; }
  .ticket.is-printing { animation: none; }
}

@media print {
  body { background: #fff; }
  body * { visibility: hidden; }
  .ticket, .ticket * { visibility: visible; }
  .ticket { position: absolute; left: 0; top: 0; width: 5.5in; box-shadow: none; border-color: #000; animation: none; clip-path: none; }
  .dw-toast { display: none; }
}

[hidden] { display: none !important; }