@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #f3f1e8;
  --muted: #999d9a;
  --black: #090b10;
  --panel: #11141b;
  --line: #282d35;
  --cyan: #4ce5d5;
  --amber: #ffbe55;
  --pink: #ff668a;
  --green: #a8ec76;
  color-scheme: dark;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--black);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -20%, #19212d 0, var(--black) 42rem); }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .11; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px); }

.topbar { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4vw; border-bottom: 1px solid var(--line); background: rgba(9,11,16,.86); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.wordmark { display: flex; gap: 12px; align-items: center; text-decoration: none; width: max-content; }
.wordmark-mark { font-weight: 700; font-size: 22px; letter-spacing: -2px; border: 2px solid var(--ink); padding: 2px 6px; transform: skew(-4deg); }
.wordmark-mark span { color: var(--cyan); }
.wordmark-label, .topbar nav, .season-pill, .eyebrow, .kicker, .panel-number, dt, footer, .microcopy { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .12em; }
.wordmark-label { font-size: 12px; color: var(--muted); }
.topbar nav { display: flex; gap: 28px; font-size: 11px; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }
.season-pill { justify-self: end; color: var(--green); border: 1px solid #344331; border-radius: 999px; padding: 8px 12px; font-size: 9px; }
.season-pill i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 10px var(--green); }

main { width: min(1180px, 92vw); margin: auto; }
.hero { padding: 110px 0 64px; text-align: center; }
.eyebrow { color: var(--cyan); font-size: 10px; margin: 0 0 22px; }
.hero h1 { margin: 0; font-size: clamp(3.3rem, 8vw, 7.7rem); line-height: .88; letter-spacing: -.07em; font-weight: 600; }
.hero h1 em { color: var(--amber); font-style: normal; }
.hero-copy { color: #b8b9b5; max-width: 680px; margin: 36px auto 46px; font-size: 18px; line-height: 1.65; }
.hero-rule { border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; align-items: center; max-width: 930px; margin: auto; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; }
.hero-rule span { padding: 17px; color: var(--black); background: var(--cyan); font-weight: 500; }
.hero-rule span:last-child { background: transparent; color: #6f747a; text-decoration: line-through; }
.hero-rule strong { font-weight: 400; padding: 0 20px; }

.status-board { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); margin-bottom: 22px; background: #0d1016; }
.status-board > div { min-height: 128px; padding: 23px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.status-board > div:last-child { border: 0; }
.status-board span, .status-board small { color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .11em; }
.status-board strong { font: 500 38px 'DM Mono', monospace; margin: auto 0 8px; }
.status-board > div:first-child strong { color: var(--amber); }

.funding-machine { border: 1px solid var(--line); background: linear-gradient(135deg, #131924, #0b0e14); padding: 42px; margin-bottom: 22px; }
.funding-head { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; }
.funding-head h2 { margin: 0 0 14px; font-size: clamp(2.1rem, 5vw, 4.8rem); letter-spacing: -.06em; }
.funding-head > div:first-child > p:last-child { color: #a5aaa7; line-height: 1.6; max-width: 760px; }
.funding-total { text-align: right; min-width: 220px; }
.funding-total strong { display: block; color: var(--green); font: 500 clamp(2.4rem, 5vw, 4.5rem) 'DM Mono', monospace; letter-spacing: -.06em; }
.funding-total span, .funding-meta { color: var(--muted); font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.funding-track { height: 18px; border: 1px solid #364039; background: #090c10; margin-top: 32px; padding: 3px; }
.funding-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width .45s ease; }
.funding-meta { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; margin: 12px 0 34px; }
.funding-meta a { color: var(--cyan); text-decoration: none; }
.purchase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.purchase-rail { background: #0f131a; padding: 30px; min-width: 0; }
.purchase-rail h3 { font-size: 24px; margin: 5px 0 10px; }
.purchase-rail > p:not(.kicker):not(.microcopy), .crypto-quote > p { color: #979c99; line-height: 1.55; }
.payment-link { display: inline-block; text-decoration: none; margin: 12px 0 14px; }
.purchase-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.purchase-form label { color: #7b8188; font: 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
.purchase-form input, .purchase-form select { display: block; width: 100%; margin-top: 7px; border: 1px solid #39414b; background: #0a0d12; color: var(--ink); padding: 12px; font: 12px 'DM Mono', monospace; }
.purchase-form label:last-of-type { grid-column: 1 / -1; }
.purchase-form button { justify-self: start; }
.crypto-quote { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.crypto-quote code { display: block; overflow-wrap: anywhere; padding: 13px; border: 1px dashed #3f4852; color: var(--cyan); font-size: 11px; }
.claim-form { grid-template-columns: 1fr; }
.claim-form label { grid-column: 1; }
.purchase-status { margin: 22px 0 0; color: #747a80; font: 9px/1.6 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }
.purchase-status.error { color: var(--pink); }
.purchase-status.success { color: var(--green); }

.machine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.panel { min-height: 490px; border: 1px solid var(--line); position: relative; background: linear-gradient(145deg, #121720, #0d1016); overflow: hidden; }
.panel-number { position: absolute; top: 22px; left: 24px; color: #697079; font-size: 9px; z-index: 2; }
.panel-body { padding: 40px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.kicker { color: var(--cyan); font-size: 9px; margin: 0 0 10px; }
.panel h2 { font-size: clamp(1.6rem, 3vw, 2.55rem); letter-spacing: -.04em; margin: 0 0 15px; line-height: 1.05; }
.panel p:not(.kicker):not(.microcopy) { color: #a8aba9; line-height: 1.55; max-width: 55ch; }
.primary-button, .secondary-button, .play-button { border: 0; cursor: pointer; text-transform: uppercase; font: 500 11px 'DM Mono', monospace; letter-spacing: .1em; }
.primary-button { background: var(--amber); color: #181008; padding: 15px 20px; box-shadow: 5px 5px 0 #7d5722; }
.primary-button:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 #7d5722; }
.primary-button:disabled { background: #343841; color: #777; box-shadow: none; cursor: default; transform: none; }
.microcopy { font-size: 8px; color: #656a70; }
.token-display { position: absolute; right: 8%; top: 42px; display: flex; align-items: center; gap: 18px; transform: rotate(4deg); }
.ticket-stack { width: 170px; height: 135px; position: relative; }
.ticket-stack span { position: absolute; inset: 20px 0 0; border: 2px solid var(--amber); background: #19150f; clip-path: polygon(0 0, 94% 0, 94% 15%, 100% 20%, 94% 25%, 94% 100%, 0 100%, 0 25%, 6% 20%, 0 15%); }
.ticket-stack span:nth-child(2) { transform: translate(-12px,-10px); opacity: .6; }
.ticket-stack span:nth-child(3) { transform: translate(-24px,-20px); opacity: .3; }
.display-copy { color: var(--amber); font: 500 16px 'DM Mono', monospace; letter-spacing: .15em; }
.experiment-head { padding: 42px 35px; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.stage-badge { font: 9px 'DM Mono', monospace; color: var(--green); }
.stage-track { display: flex; gap: 7px; }
.stage-track i { width: 28px; height: 3px; background: #2d3239; }
.stage-track i.active { background: var(--green); box-shadow: 0 0 9px var(--green); }
.experiment-card .panel-body { position: relative; padding-top: 72px; }
.experiment-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.experiment-stats div { padding: 17px 9px; border-right: 1px solid var(--line); }
.experiment-stats div:last-child { border: 0; }
dt { color: #71767c; font-size: 8px; }
dd { margin: 8px 0 0; font: 12px 'DM Mono', monospace; }
.maturity-track { display: flex; justify-content: space-between; color: #60656b; font: 8px 'DM Mono', monospace; text-transform: uppercase; position: relative; }
.maturity-track::before { content: ''; position: absolute; top: -10px; left: 0; width: 100%; border-top: 1px dashed #30353c; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; padding: 110px 0 34px; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: .95; letter-spacing: -.05em; margin: 0; }
.section-heading > p { max-width: 430px; color: #919692; line-height: 1.5; margin: 0; }
.game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.game-cabinet { border: 1px solid var(--line); background: #0e1118; padding: 18px; position: relative; }
.game-cabinet::before, .game-cabinet::after { content: ''; width: 7px; height: 7px; border: 1px solid #494e54; border-radius: 50%; position: absolute; top: 7px; }
.game-cabinet::before { left: 7px; } .game-cabinet::after { right: 7px; }
.cabinet-screen { min-height: 440px; border: 1px solid #303640; padding: 28px; display: flex; flex-direction: column; background: radial-gradient(circle at center 30%, rgba(76,229,213,.08), transparent 50%); }
.amber .cabinet-screen { background: radial-gradient(circle at center 30%, rgba(255,190,85,.08), transparent 50%); }
.cabinet-id { align-self: end; color: #4f555d; font: 10px 'DM Mono', monospace; }
.pixel-icon { width: 90px; height: 90px; margin: 27px auto; display: grid; place-items: center; }
.signal-icon { grid-template-columns: repeat(3,1fr); gap: 7px; align-items: end; }
.signal-icon i { background: var(--cyan); height: 35%; box-shadow: 0 0 12px rgba(76,229,213,.3); }
.signal-icon i:nth-child(2) { height: 70%; } .signal-icon i:nth-child(3) { height: 100%; }
.forge-icon { color: var(--amber); border: 4px solid var(--amber); font: 56px 'DM Mono', monospace; transform: rotate(45deg); box-shadow: 0 0 20px rgba(255,190,85,.18); }
.forge-icon::first-letter { transform: rotate(-45deg); }
.lock-icon { color: #575d65; border: 2px dashed #575d65; font: 38px 'DM Mono', monospace; }
.game-cabinet h3 { margin: 5px 0 8px; font-size: 26px; letter-spacing: -.04em; }
.game-cabinet p { color: #979b99; line-height: 1.5; min-height: 72px; }
.game-cabinet dl { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin: auto 0 20px; padding-top: 17px; }
.play-button { padding: 14px; background: var(--cyan); color: #071312; }
.amber .play-button { background: var(--amber); color: #191106; }
.play-button:disabled { background: #272b31; color: #666; cursor: not-allowed; }

.prize-section { margin-top: 20px; }
.formula-strip { border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 20px 24px; gap: 25px; font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.formula-strip span { color: var(--cyan); }
.formula-strip strong { font-weight: 400; }
.text-button { border: 0; background: none; cursor: pointer; color: var(--amber); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; padding: 8px; }
.formula-details { border: 1px solid var(--line); border-top: 0; padding: 16px 24px; color: #999; font: 11px/1.7 'DM Mono', monospace; }
.prize-wall { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 18px; }
.prize { background: #10131a; padding: 25px; min-height: 275px; display: flex; flex-direction: column; }
.prize .prize-type { font: 8px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); }
.prize h3 { font-size: 21px; margin: 28px 0 10px; }
.prize p { color: #8f9492; font-size: 13px; line-height: 1.5; }
.prize .cost { font: 24px 'DM Mono', monospace; margin: auto 0 16px; color: var(--amber); }
.prize button { border: 1px solid #454b53; background: transparent; padding: 11px; cursor: pointer; font: 9px 'DM Mono', monospace; text-transform: uppercase; }
.prize button:disabled { color: #5f6469; cursor: not-allowed; }
.prize.redeemed { opacity: .55; }
.offer-prize { border: 1px solid var(--line); border-top: 0; padding: 28px; display: flex; align-items: center; justify-content: space-between; }
.offer-prize h3 { margin: 0; font-size: 18px; }
.offer-prize a { color: var(--amber); font: 10px 'DM Mono', monospace; text-transform: uppercase; text-decoration: none; }

.receipts-section { padding-bottom: 100px; }
.receipt-actions { display: flex; gap: 12px; margin-bottom: 18px; }
.secondary-button { background: transparent; border: 1px solid #444b54; padding: 12px 16px; }
.danger { color: #a26874; }
.receipt-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.receipt-list li { display: grid; grid-template-columns: 115px 1fr 160px; gap: 20px; padding: 19px 5px; border-bottom: 1px solid var(--line); align-items: center; }
.receipt-list time, .receipt-hash { font: 9px 'DM Mono', monospace; color: #737980; }
.receipt-copy strong { display: block; font-size: 13px; margin-bottom: 4px; }
.receipt-copy span { color: #8c918f; font-size: 12px; }
.receipt-hash { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-list .empty-state { display: block; color: #646a70; font: 11px 'DM Mono', monospace; padding: 35px 5px; }

footer { border-top: 1px solid var(--line); padding: 28px 4vw; display: flex; justify-content: space-between; color: #62676d; font-size: 8px; }
footer strong { color: #a5aaa8; font-weight: 400; }
.game-dialog { width: min(700px, 92vw); border: 1px solid #3a424c; background: #0d1118; color: var(--ink); padding: 0; box-shadow: 0 30px 100px #000; }
.game-dialog::backdrop { background: rgba(3,5,8,.86); backdrop-filter: blur(6px); }
.dialog-close { position: absolute; right: 15px; top: 12px; border: 0; background: none; font-size: 26px; color: #7e848b; cursor: pointer; z-index: 2; }
.game-inner { padding: 46px; }
.game-progress { height: 3px; background: #252b32; margin: 20px 0 35px; }
.game-progress i { display: block; height: 100%; background: var(--cyan); transition: width .25s; }
.game-prompt { font-size: clamp(1.4rem,4vw,2.3rem); line-height: 1.2; letter-spacing: -.03em; min-height: 130px; }
.answer-grid { display: grid; gap: 9px; }
.answer-grid button { background: #151a22; border: 1px solid #333a43; text-align: left; padding: 15px; cursor: pointer; color: var(--ink); }
.answer-grid button:hover { border-color: var(--cyan); }
.game-result { text-align: center; padding: 55px 25px; }
.game-result .score { font: 600 clamp(4rem,12vw,8rem) 'DM Mono', monospace; color: var(--cyan); letter-spacing: -.08em; }
.game-result h2 { font-size: 28px; }
.game-result p { color: #979c99; }
.receipt-dialog { max-width: 760px; }
.printed-receipt { padding: 48px 48px 20px; }
.printed-receipt h2 { font-size: 28px; }
.printed-receipt dl { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.printed-receipt dl div { padding: 15px; border-bottom: 1px solid var(--line); }
.printed-receipt dl div:nth-last-child(-n+2) { border-bottom: 0; }
.printed-receipt dd { overflow-wrap: anywhere; }
.receipt-print-actions { padding: 0 48px 45px; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 30; background: var(--ink); color: var(--black); padding: 14px 18px; font: 10px 'DM Mono', monospace; transform: translateY(100px); opacity: 0; transition: .25s; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; } .topbar nav { display: none; }
  .status-board { grid-template-columns: repeat(2,1fr); }
  .status-board > div:nth-child(2) { border-right: 0; } .status-board > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .machine-grid { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: 1fr 1fr; } .game-cabinet.locked { grid-column: 1 / -1; }
  .prize-wall { grid-template-columns: 1fr 1fr; }
  .funding-head, .purchase-grid { grid-template-columns: 1fr; }
  .funding-total { text-align: left; }
}
@media (max-width: 640px) {
  main { width: min(100% - 28px, 1180px); }
  .topbar { padding: 0 15px; min-height: 64px; } .wordmark-label { display: none; } .season-pill { font-size: 7px; padding: 7px; }
  .hero { padding: 75px 0 45px; } .hero-copy { font-size: 15px; }
  .hero-rule { grid-template-columns: 1fr; } .hero-rule span { padding: 10px; } .hero-rule strong { padding: 15px; }
  .status-board strong { font-size: 28px; } .status-board > div { min-height: 110px; padding: 17px; }
  .panel { min-height: 540px; } .panel-body { padding: 25px; } .token-display { right: 0; transform: scale(.72) rotate(4deg); transform-origin: top right; }
  .experiment-stats { grid-template-columns: 1fr; } .experiment-stats div { border-right: 0; border-bottom: 1px solid var(--line); }
  .section-heading { display: block; padding-top: 75px; } .section-heading > p { margin-top: 22px; }
  .game-grid, .prize-wall { grid-template-columns: 1fr; } .game-cabinet.locked { grid-column: auto; }
  .formula-strip { grid-template-columns: 1fr; gap: 10px; }
  .offer-prize { display: block; } .offer-prize a { display: inline-block; margin-top: 20px; }
  .receipt-list li { grid-template-columns: 90px 1fr; } .receipt-hash { grid-column: 2; }
  footer { flex-direction: column; gap: 12px; text-align: center; }
  .game-inner { padding: 38px 22px 25px; }
  .funding-machine { padding: 25px; }
  .funding-meta { grid-template-columns: 1fr; }
  .purchase-form { grid-template-columns: 1fr; }
  .purchase-form label { grid-column: 1; }
  .printed-receipt { padding: 38px 22px 20px; }
  .printed-receipt dl { grid-template-columns: 1fr; }
  .receipt-print-actions { padding: 0 22px 30px; }
}

@media print {
  body > * { display: none !important; }
  #receiptDialog[open] { display: block !important; position: static; border: 0; color: #111; background: white; }
  #receiptDialog .dialog-close, #receiptDialog .receipt-print-actions { display: none; }
  #receiptDialog .printed-receipt { padding: 0; }
}