:root { --night:#17152b; --cream:#fff4d6; --pink:#ff4d8d; --cyan:#49e6da; --yellow:#ffd84a; --green:#71e36d; --red:#ff5d50; --line:rgba(255,244,214,.3); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--night); }
body { margin:0; color:var(--cream); background:var(--night); font-family:"Courier New", Courier, monospace; overflow-x:hidden; }
button,a { font:inherit; }
a { color:inherit; }
.scanlines { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.1; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px); }
.site-head { height:64px; padding:0 4vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:2px solid var(--cream); font-size:11px; letter-spacing:.09em; }
.site-head a { text-decoration:none; font-weight:700; }
.site-head a:last-child { justify-self:end; }
.brand span { display:inline-grid; place-items:center; width:34px; height:34px; margin-right:9px; color:var(--night); background:var(--yellow); border:2px solid var(--cream); box-shadow:3px 3px 0 var(--pink); }
.hero { min-height:760px; padding:8vh 8vw; position:relative; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; overflow:hidden; background:radial-gradient(circle at 75% 42%,rgba(73,230,218,.18),transparent 26%),linear-gradient(135deg,transparent 70%,rgba(255,77,141,.12) 70%); }
.hero::before { content:""; position:absolute; inset:25px; border:1px dashed rgba(255,244,214,.25); pointer-events:none; }
.hero-copy { z-index:1; max-width:790px; }
.eyebrow { color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:18px 0 30px; font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size:clamp(90px,16vw,220px); line-height:.68; letter-spacing:-.035em; transform:scaleX(.92); transform-origin:left; text-shadow:7px 7px 0 var(--pink); }
h1 span { color:var(--yellow); font-size:.72em; text-shadow:7px 7px 0 var(--cyan); }
.lede { max-width:590px; font-family:Georgia,serif; font-size:clamp(19px,2vw,27px); line-height:1.45; }
.start-btn,.ready button { margin-top:26px; padding:18px 25px; border:3px solid var(--cream); color:var(--night); background:var(--yellow); font-weight:900; letter-spacing:.06em; box-shadow:7px 7px 0 var(--pink); cursor:pointer; transition:.15s; }
.start-btn:hover,.ready button:hover { transform:translate(4px,4px); box-shadow:3px 3px 0 var(--pink); }
.start-btn b { margin-left:40px; }
.micro { margin-top:22px; font-size:10px; opacity:.65; text-transform:uppercase; }
.hero-art { height:440px; position:relative; border:3px solid var(--cream); background:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.04)),repeating-linear-gradient(90deg,transparent 0 49px,rgba(255,255,255,.08) 49px 50px),repeating-linear-gradient(0deg,transparent 0 49px,rgba(255,255,255,.08) 49px 50px); box-shadow:14px 14px 0 var(--cyan); transform:rotate(2deg); }
.hero-art p { position:absolute; right:18px; top:18px; margin:0; color:var(--yellow); text-align:right; font-weight:900; line-height:1.1; }
.pixel { position:absolute; display:grid; place-items:center; width:100px; height:100px; color:var(--night); border:4px solid var(--cream); font:60px Impact,sans-serif; }
.p1{left:30px;top:25px;background:var(--pink);transform:rotate(-7deg)} .p2{left:150px;top:150px;background:var(--cyan);transform:rotate(5deg)} .p3{right:25px;top:240px;background:var(--yellow);transform:rotate(-4deg)}
.stack { position:absolute; bottom:0; height:50px; border:3px solid var(--night); } .s1{left:0;width:45%;background:var(--pink)} .s2{left:45%;width:28%;background:var(--yellow)} .s3{right:0;width:27%;background:var(--cyan)}
.game-shell { max-width:1180px; margin:0 auto 120px; border:3px solid var(--cream); box-shadow:12px 12px 0 var(--pink); }
.game-top { min-height:76px; display:grid; grid-template-columns:repeat(4,1fr); border-bottom:3px solid var(--cream); background:#0e0d1c; }
.game-top div { padding:13px 18px; border-right:1px solid var(--line); }
.game-top div:last-child{border:0}.game-top span{display:block;color:var(--cyan);font-size:9px;letter-spacing:.1em}.game-top strong{font-size:25px;color:var(--yellow)}
.playfield { height:470px; position:relative; overflow:hidden; background:#242044; }
.grid-lines { position:absolute; inset:0; opacity:.22; background:repeating-linear-gradient(90deg,transparent 0 58px,var(--cyan) 59px 60px),repeating-linear-gradient(0deg,transparent 0 58px,var(--cyan) 59px 60px); }
.ready { position:absolute; z-index:2; inset:0; display:grid; place-content:center; justify-items:center; padding:30px; text-align:center; background:rgba(23,21,43,.88); }
.ready[hidden]{display:none}.ready-small{color:var(--cyan);font-size:10px;letter-spacing:.13em}.ready h2{margin:9px 0;font:clamp(35px,6vw,72px)/1 Impact,sans-serif;color:var(--yellow);text-shadow:4px 4px 0 var(--pink)}.ready>p:not(.ready-small){max-width:610px;line-height:1.6}
.falling-card { position:absolute; z-index:2; top:30px; left:50%; width:min(650px,88%); padding:22px 25px; transform:translateX(-50%); color:var(--night); background:var(--cream); border:4px solid var(--night); box-shadow:8px 8px 0 var(--pink); }
.falling-card.drop { animation:float 1.2s ease-in-out infinite alternate}.falling-card.routed{animation:routeOut .35s forwards}.falling-card.wrong{animation:shake .35s 2}.customer{font-size:9px;font-weight:900;letter-spacing:.13em;color:#685f52}.falling-card p{margin:10px 0 17px;font:24px/1.35 Georgia,serif}.timer{height:7px;background:#d3c7a8}.timer span{display:block;width:100%;height:100%;background:var(--pink)}
.feedback { position:absolute; z-index:4; bottom:25px; left:50%; width:min(720px,90%); padding:16px 20px; transform:translateX(-50%); color:var(--night); border:3px solid var(--cream); box-shadow:6px 6px 0 var(--night); }.feedback.good{background:var(--green)}.feedback.bad{background:var(--red)}.feedback strong{font-size:15px}.feedback p{margin:7px 0 0;font-family:Georgia,serif}
.routes { display:grid; grid-template-columns:repeat(4,1fr); border-top:3px solid var(--cream); }
.routes button { min-height:105px; padding:14px; border:0;border-right:2px solid var(--night);color:var(--night);cursor:pointer;text-align:left;transition:.15s}.routes button:nth-child(1){background:var(--yellow)}.routes button:nth-child(2){background:var(--cyan)}.routes button:nth-child(3){background:var(--pink)}.routes button:nth-child(4){background:var(--green)}.routes button:hover,.routes button:focus-visible{filter:brightness(1.12);transform:translateY(-6px);outline:3px solid var(--cream)}.routes kbd{float:right;padding:3px 7px;border:2px solid}.routes span{display:block;font-weight:900;font-size:17px}.routes small{display:block;margin-top:8px;line-height:1.3}
.game-note{margin:0;padding:12px 18px;color:var(--cyan);background:#0e0d1c;font-size:10px;text-align:center;border-top:2px solid var(--cream)}
.learn { padding:110px 8vw; color:var(--night); background:var(--cream); }
.learn-head{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;align-items:end;border-bottom:4px solid var(--night);padding-bottom:35px}.learn .eyebrow{color:#d32668}.learn h2{margin:0;font:clamp(50px,8vw,110px)/.9 Impact,sans-serif;letter-spacing:-.02em}.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:4px solid var(--night)}.learn-grid article{padding:45px 30px;border-right:2px solid var(--night)}.learn-grid article:last-child{border:0}.learn-grid span{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--night);color:var(--yellow);font-weight:900}.learn h3{font-size:20px}.learn-grid p{font:17px/1.65 Georgia,serif}.example{margin-top:60px;display:grid;grid-template-columns:1.2fr .8fr;border:4px solid var(--night);box-shadow:10px 10px 0 var(--pink)}.example>div{padding:35px}.example>div:first-child{background:var(--yellow)}.example-label{font-size:10px;font-weight:900}.example blockquote{margin:12px 0;font:clamp(24px,3vw,40px)/1.3 Georgia,serif}.example-answer{color:var(--cream);background:var(--night)}.example-answer strong{color:var(--cyan)}.example-answer p{font:17px/1.55 Georgia,serif}
.author{padding:80px 8vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.author>p{font:clamp(22px,3vw,34px)/1.4 Georgia,serif}.author>p a{color:var(--yellow)}.author div{display:flex;flex-direction:column;gap:18px}.author div a{color:var(--cyan);font-weight:900;text-underline-offset:6px}
footer{min-height:65px;padding:0 4vw;display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--cream);font-size:10px;letter-spacing:.08em}
@keyframes float{to{transform:translateX(-50%) translateY(8px)}}@keyframes routeOut{to{transform:translateX(110vw) rotate(8deg);opacity:0}}@keyframes shake{25%{transform:translateX(-53%)}75%{transform:translateX(-47%)}}
@media(max-width:800px){.site-head{grid-template-columns:1fr auto}.site-head p{display:none}.hero{min-height:auto;padding:80px 6vw;grid-template-columns:1fr}.hero-art{display:none}.game-shell{margin-inline:4vw}.game-top{grid-template-columns:repeat(2,1fr)}.playfield{height:430px}.routes{grid-template-columns:repeat(2,1fr)}.routes button{min-height:90px;border-bottom:2px solid var(--night)}.learn{padding:80px 6vw}.learn-head,.learn-grid,.example,.author{grid-template-columns:1fr}.learn-grid article{border-right:0;border-bottom:2px solid}.example-answer{min-height:220px}.author{padding-inline:6vw}footer span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}