:root { --paper:#f7f6ee; --ink:#20221f; --muted:#686b60; --lime:#c6f45a; --pink:#f2a8c5; --mono:'Courier New',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid #5b7e19; outline-offset:6px; }
.page { max-width:1440px; margin:auto; padding:0 6.1%; }
.header { display:flex; justify-content:space-between; align-items:center; height:118px; border-bottom:1px solid #d9dacd; }
.wordmark { display:flex; align-items:center; text-decoration:none; font-weight:800; font-size:32px; letter-spacing:-1.5px; }
.brand-icon { width:29px; height:29px; margin-right:11px; }
.wordmark-dot { color:#658522; }
.status { font-family:var(--mono); font-size:12px; display:flex; gap:10px; align-items:center; }
.status-dot,.launch-dot { width:7px; height:7px; background:#769534; display:inline-block; border-radius:50%; }
.hero { display:grid; grid-template-columns:1.13fr 1fr; gap:45px; align-items:center; min-height:666px; padding:66px 0 82px; }
.eyebrow { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:1.8px; margin:0 0 28px; }
.tiny-star { font-size:22px; line-height:1; }
h1 { font-size:clamp(59px,5.5vw,82px); line-height:1.06; font-weight:800; letter-spacing:-5px; margin:0 0 28px; }
.highlight { position:relative; z-index:0; white-space:nowrap; }
.highlight::before { content:''; position:absolute; background:var(--lime); top:13%; bottom:0; left:-9px; right:-9px; z-index:-1; transform:rotate(-2deg); border-radius:48% 38% 41% 31%; }
.highlight svg { position:absolute; width:104%; height:16px; left:-2%; bottom:-10px; fill:none; stroke:var(--ink); stroke-width:3; }
.intro { color:var(--muted); font-size:17px; line-height:1.8; margin:0 0 30px; }
.launch-note { display:flex; gap:9px; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:1.4px; font-weight:700; margin-bottom:18px; }
.launch-dot { width:6px; height:6px; background:var(--ink); }
.play-cta { display:flex; align-items:center; gap:26px; padding:9px 10px 9px 22px; border:1px solid var(--ink); border-radius:7px; background:var(--ink); color:var(--paper); font-weight:700; font-size:14px; transition:transform .2s,box-shadow .2s; }
.play-cta span { display:grid; place-items:center; background:var(--lime); color:var(--ink); border-radius:4px; width:38px; height:38px; font-size:24px; font-weight:400; }
.play-cta:hover { transform:translateY(-3px); box-shadow:0 5px 0 #c6f45a; }
.cta-note { font-family:var(--mono); font-size:10px; color:var(--muted); margin:13px 0 0; }
.arcade-scene { position:relative; padding:20px 16px 0; }
.orbit { position:absolute; inset:15px -5px 40px; border:1px dashed #c7cabc; border-radius:50%; }
.cabinet { position:relative; max-width:410px; margin:auto; padding:20px 21px 0; background:var(--ink); border:2px solid var(--ink); border-radius:16px; box-shadow:10px 10px 0 #d4d9c6; transform:rotate(3deg); transition:transform .35s; }
.cabinet.is-active { transform:rotate(0); }
.cabinet-header { display:flex; align-items:center; justify-content:space-between; color:var(--paper); margin:0 0 17px; }
.game-title { font-family:var(--mono); font-weight:700; font-size:18px; letter-spacing:1.5px; }
.game-number { color:#a6aa9c; font-size:11px; letter-spacing:0; }
.game-tag { color:var(--lime); border:1px solid #666f52; padding:5px 7px; border-radius:3px; font-family:var(--mono); font-size:8px; letter-spacing:1px; }
.scorebar { display:flex; align-items:center; justify-content:space-between; background:#30352b; color:#c2c8b6; border-radius:5px 5px 0 0; padding:10px 13px; font-family:var(--mono); font-size:9px; letter-spacing:1px; }
.scorebar strong { color:var(--lime); margin-left:6px; font-size:14px; }
.scorebar button { display:grid; place-items:center; border:0; background:transparent; color:var(--lime); width:24px; height:24px; padding:4px; }
.scorebar button:disabled { opacity:.35; }
.scorebar svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:3; }
.board { position:relative; aspect-ratio:1; background:#151b15; border:1px solid #394330; border-radius:0 0 5px 5px; overflow:hidden; touch-action:none; }
canvas { display:block; width:100%; height:100%; }
.game-overlay { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; flex-direction:column; background:#151b156b; color:var(--paper); text-align:center; }
.game-overlay[hidden] { display:none; }
.overlay-kicker { color:#c9d2bd; font-family:var(--mono); font-size:8px; letter-spacing:1.5px; margin-bottom:13px; }
.game-overlay h2 { font-size:30px; letter-spacing:-1px; margin:0 0 9px; }
.game-overlay p { font-size:12px; color:#c9d2bd; margin:0 0 23px; }
.game-overlay button { border:0; border-radius:5px; background:var(--lime); color:var(--ink); font-size:12px; font-weight:700; padding:13px 20px; }
.game-overlay button span { margin-left:16px; font-size:16px; }
.game-overlay button:hover { background:#d9ff84; }
.cabinet-bottom { display:flex; align-items:center; justify-content:space-between; color:#c2c8b6; padding:15px 0; font-family:var(--mono); font-size:9px; }
.little-cross { color:var(--lime); font-size:23px; line-height:1; }
.touch-instructions,.touch-controls { display:none; }
.sticker { position:absolute; z-index:2; right:-15px; top:-7px; width:105px; height:105px; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:50%; background:var(--lime); border:2px solid var(--ink); box-shadow:3px 4px 0 var(--ink); transform:rotate(15deg); font-family:var(--mono); text-align:center; font-size:11px; line-height:1.3; font-weight:700; }
.sticker span { font-family:Arial,sans-serif; font-size:27px; line-height:1.1; margin-top:3px; }
.spark { position:absolute; width:39px; height:39px; fill:none; stroke:var(--ink); stroke-width:2.5; }
.spark-top { left:-13px; top:-14px; transform:rotate(12deg); }
.spark-bottom { right:-16px; bottom:18px; width:26px; height:26px; transform:rotate(10deg); }
.scene-caption { position:relative; display:flex; align-items:center; gap:7px; justify-content:center; font-size:12px; font-style:italic; color:var(--muted); margin:25px 0 0; transform:rotate(-3deg); }
.scene-caption svg { width:53px; height:32px; stroke:var(--ink); stroke-width:1.8; fill:none; }
.promise { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9dacd; border-bottom:1px solid #d9dacd; padding:34px 0; }
.promise>div { display:flex; align-items:center; gap:17px; padding:0 30px; border-right:1px solid #d9dacd; }
.promise>div:first-child { padding-left:0; }
.promise>div:last-child { padding-right:0; border:0; }
.promise-icon { width:42px; height:42px; flex-shrink:0; border-radius:50%; background:#eceee1; display:grid; place-items:center; }
.promise-icon svg { width:23px; height:23px; stroke:var(--ink); stroke-width:1.6; fill:none; }
.promise p { font-size:14px; font-weight:700; margin:0; line-height:1.7; }
.promise p span { display:block; font-size:11px; font-weight:400; color:var(--muted); }
footer { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:15px; color:var(--muted); font-family:var(--mono); font-size:10px; }
footer strong { color:var(--ink); font-weight:400; }
.footer-message { display:flex; gap:9px; align-items:center; }
.footer-message span { color:#6e8b33; font-size:20px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-80px; left:20px; z-index:10; padding:15px; background:var(--ink); color:white; }
.skip-link:focus { top:15px; }
.sticker { top:-62px; }
@media (min-width:1440px) { .page { padding:0 88px; } }
@media (max-width:1100px) { .page { padding:0 5%; } .hero { gap:20px; } h1 { font-size:64px; letter-spacing:-3.7px; } .sticker { right:-8px; width:90px; height:90px; font-size:10px; } .promise>div { padding:0 18px; gap:12px; } }
@media (max-width:850px) { .hero { grid-template-columns:1fr 1fr; gap:18px; min-height:590px; padding:60px 0; } h1 { font-size:52px; letter-spacing:-3px; } .eyebrow { font-size:9px; letter-spacing:1px; } .intro { font-size:15px; } .desktop-break { display:none; } .cabinet { padding:15px 14px 0; } .game-title { font-size:15px; } .game-tag { font-size:7px; padding:4px; } .sticker { top:-18px; right:-5px; width:77px; height:77px; font-size:8px; } .sticker span { font-size:23px; } .cabinet-bottom { font-size:8px; } .scene-caption { font-size:10px; } .promise-icon { width:35px; height:35px; } .promise>div { gap:10px; padding:0 12px; } .promise p { font-size:12px; } .promise p span { font-size:10px; } }
@media (max-width:650px) { .page { padding:0 6%; } .header { height:90px; } .wordmark { font-size:27px; } .brand-icon { width:24px; height:24px; } .status { font-size:9px; gap:6px; } .hero { grid-template-columns:1fr; padding:49px 0 38px; gap:45px; } h1 { font-size:clamp(48px,11vw,69px); letter-spacing:-3px; margin-bottom:26px; } .hero-copy { text-align:center; } .eyebrow,.launch-note,.play-cta { justify-content:center; } .eyebrow { font-size:9px; margin-bottom:24px; } .intro { font-size:15px; max-width:310px; margin:0 auto 27px; } .play-cta { margin:auto; } .arcade-scene { width:100%; max-width:410px; margin:auto; padding:17px 16px 0; } .cabinet { padding:18px 18px 0; } .sticker { right:0; top:-8px; width:86px; height:86px; font-size:9px; } .cabinet-header { margin-bottom:14px; } .game-title { font-size:17px; } .game-tag { font-size:8px; } .game-overlay h2 { font-size:30px; } .scene-caption { font-size:11px; margin-top:23px; } .promise { grid-template-columns:1fr; padding:6px 0; } .promise>div,.promise>div:first-child,.promise>div:last-child { border:0; padding:18px 12px; gap:18px; } .promise>div+div { border-top:1px solid #e4e4d9; } .promise-icon { width:42px; height:42px; } .promise p { font-size:14px; } .promise p span { font-size:12px; } footer { flex-wrap:wrap; padding:26px 0; font-size:9px; min-height:100px; } .footer-message { order:3; flex-basis:100%; justify-content:center; padding-top:4px; } }
@media (pointer:coarse) { .keyboard-instructions { display:none; } .touch-instructions { display:inline; } .touch-controls { display:flex; align-items:center; justify-content:center; gap:7px; padding-bottom:15px; } .touch-controls>div { display:flex; gap:7px; } .touch-controls button { width:44px; height:44px; background:#343b2d; border:1px solid #5c6849; color:var(--lime); font-size:21px; border-radius:6px; touch-action:manipulation; } .scorebar button { width:34px; height:34px; } }
@media (max-width:1100px) { .sticker { top:-49px; } }
@media (max-width:850px) { .sticker { top:-39px; } }
@media (max-width:650px) { .sticker { top:-48px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }