:root { --ink:#111222; --violet:#684cff; --pink:#ff4fa3; --mint:#63f5cd; --paper:#f7f5ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--paper); background:radial-gradient(circle at 85% 10%,#5940b7 0,transparent 30%),radial-gradient(circle at 12% 75%,#134971 0,transparent 31%),var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.45; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:37px 37px; }
.shell { position:relative; width:min(1040px,calc(100% - 40px)); margin:auto; padding:24px 0 48px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:36px; }
.brand { color:#fff; text-decoration:none; font-weight:900; letter-spacing:.1em; font-size:.9rem; } header p,.help { color:#c4c0df; margin:0; }
.screen { display:none; } .screen.active { display:block; }
.hero { position:relative; isolation:isolate; max-width:760px; margin-bottom:26px; padding:26px 30px 24px; overflow:hidden; border:1px solid #ffffff1c; border-radius:28px; background:linear-gradient(115deg,#282052b8,#171b41a8); box-shadow:0 20px 60px #0004; } .hero:after { content:"✦"; position:absolute; z-index:-1; right:5%; top:-28px; color:#ff72b5; font-size:13rem; opacity:.16; transform:rotate(18deg); } .eyebrow,.pill { display:inline-block; color:var(--mint); letter-spacing:.12em; font-size:.72rem; font-weight:800; }
h1 { max-width:620px; font-size:clamp(2rem,4.3vw,3.7rem); line-height:1.08; letter-spacing:-.035em; margin:10px 0 14px; } .hero p { font-size:1.08rem; color:#d6d2e9; }
.game-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; } .game-card { display:flex; gap:30px; align-items:center; max-width:760px; padding:24px 28px; border:1px solid #7564bc; border-radius:24px; background:linear-gradient(120deg,#282052cc,#30276599); box-shadow:0 20px 60px #0004; }.race-card { border-color:#e85e9b88; background:linear-gradient(120deg,#48203bcc,#44234299); }.race-card .game-icon { background:linear-gradient(135deg,#ff9d35,#ec327d); }
.game-icon { display:grid; place-items:center; flex:0 0 125px; height:125px; border-radius:20px; font-size:4.1rem; background:linear-gradient(135deg,#ff4fa3,#684cff); } h2 { margin:9px 0; font-size:1.85rem; letter-spacing:-.04em; } .game-card p { margin:0 0 18px; color:#d5d0e8; line-height:1.55; }
button { cursor:pointer; border:0; color:#131225; background:var(--mint); padding:11px 17px; border-radius:999px; font:800 .92rem inherit; transition:transform .16s,box-shadow .16s; } button:hover { transform:translateY(-2px); box-shadow:0 8px 22px #63f5cd55; } .back { color:#d6d2e9; background:#ffffff12; }
.game-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }.scoreboard { display:flex; gap:20px; color:#c7c2e2; }.scoreboard b { color:var(--mint); margin-left:5px; }
.game-wrap { position:relative; overflow:hidden; border:1px solid #7c6cc6; border-radius:22px; box-shadow:0 24px 70px #0008; } canvas { display:block; width:100%; height:auto; background:#080b26; touch-action:none; user-select:none; }.overlay { position:absolute; inset:0; display:grid; place-content:center; text-align:center; background:#090a22b8; backdrop-filter:blur(4px); }.overlay.hidden { display:none; }.overlay h2 { font-size:clamp(2.1rem,5vw,3.5rem); margin:8px 0; }.overlay p { color:#e0dded; line-height:1.6; margin:0 0 22px; }.overlay button { margin:auto; }
.touch-controls { display:none; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }.touch-controls span { color:#c4c0df; text-align:center; font-size:.78rem; line-height:1.3; }.touch-button { width:76px; min-width:76px; min-height:58px; padding:10px; border:1px solid #8a7cce; border-radius:18px; color:#fff; background:#302765; font-size:1.7rem; touch-action:none; user-select:none; }.touch-button.active { transform:translateY(2px) scale(.97); color:#111222; background:var(--mint); box-shadow:0 0 24px #63f5cd55; }
.help { text-align:center; font-size:.86rem; margin-top:18px; } @media(max-width:620px) { .shell { width:min(100% - 20px,1040px); padding-top:14px; } header { margin-bottom:18px; } header p { display:none; }.hero { padding:22px 20px 20px; border-radius:22px; }.hero:after { right:-8%; font-size:10rem; }.hero p { font-size:1rem; }.game-card { align-items:flex-start; gap:18px; padding:18px; }.game-icon { flex-basis:76px; height:76px; font-size:2.4rem; }.game-card h2 { font-size:1.45rem; }.game-card p { font-size:.9rem; }.game-top { align-items:flex-start; gap:10px; }.scoreboard { gap:8px; font-size:.8rem; }.scoreboard span:nth-child(2) { display:none; }.game-wrap { border-radius:16px; }.overlay { padding:16px; }.overlay h2 { font-size:clamp(1.8rem,9vw,2.7rem); }.touch-controls { display:flex; }.help { margin-top:12px; font-size:.78rem; } }
@media (hover:none) and (pointer:coarse) { .touch-controls { display:flex; } }