:root { --ink:#251a3d; --purple:#452c85; --lav:#d8c7ff; --yellow:#ffe363; --orange:#ff8a36; --cream:#fff8e9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--lav); font-family:'Space Grotesk',sans-serif; background-image: radial-gradient(#ad92e7 1.4px, transparent 1.4px); background-size:20px 20px; }
.shell { max-width:1220px; margin:auto; padding:28px 34px 22px; }
.topbar,.bottomline { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar { padding-bottom:25px; border-bottom:2px solid rgba(69,44,133,.25); }
.brand { display:flex; align-items:center; gap:9px; font-family:Bangers,cursive; font-size:34px; letter-spacing:1px; color:var(--purple); }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border:3px solid var(--purple); border-radius:50%; font-size:25px; line-height:1; }
.tagline { font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; opacity:.7; }
.chain-pill { padding:9px 13px; border:2px solid var(--purple); border-radius:99px; color:var(--purple); font-size:10px; font-weight:700; letter-spacing:.08em; }
.chain-pill span,.status i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#5cd77e; box-shadow:0 0 0 3px rgba(92,215,126,.2); }
.game-layout { display:grid; grid-template-columns:270px minmax(420px,560px); justify-content:center; gap:72px; padding:46px 0 38px; }
.side-copy { padding-top:40px; }
.eyebrow { margin:0 0 15px; color:var(--purple); font-size:12px; font-weight:700; letter-spacing:.2em; }
h1 { margin:0; font-family:Bangers,cursive; font-size:82px; font-weight:400; line-height:.82; letter-spacing:2px; color:var(--purple); text-shadow:3px 3px 0 rgba(255,255,255,.6); }
h1 em { color:var(--orange); font-style:normal; }
.intro { max-width:230px; margin:26px 0; font-size:15px; line-height:1.55; font-weight:500; }
.tip-card { display:flex; gap:13px; align-items:flex-start; width:235px; padding:16px; border:2px solid var(--purple); border-radius:16px; background:rgba(255,255,255,.32); box-shadow:4px 4px 0 rgba(69,44,133,.2); font-size:12px; line-height:1.5; }
.tip-icon { font-size:24px; }.tip-card strong { color:var(--orange); font-size:10px; letter-spacing:.14em; }.tip-card span { font-weight:500; }
.micro-copy { margin-top:28px; color:var(--purple); font-family:Bangers,cursive; font-size:19px; letter-spacing:.5px; transform:rotate(-2deg); }
.game-card { width:100%; max-width:560px; padding:16px; border:3px solid var(--purple); border-radius:23px; background:var(--cream); box-shadow:9px 10px 0 rgba(69,44,133,.28); }
.score-row { display:flex; justify-content:space-around; padding:9px 0 13px; }.score-block { text-align:center; }.score-block span { display:block; color:var(--purple); font-size:10px; font-weight:700; letter-spacing:.16em; }.score-block strong { display:block; font-family:Bangers,cursive; font-size:38px; font-weight:400; line-height:1; }
.canvas-wrap { position:relative; overflow:hidden; border:3px solid var(--purple); border-radius:14px; background:#ffc555; aspect-ratio:4/5; }.canvas-wrap canvas { display:block; width:100%; height:100%; touch-action:none; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; background:linear-gradient(180deg,rgba(255,196,68,.12),rgba(69,44,133,.15)); }.overlay.hidden { display:none; }.sticker { padding:7px 12px; border:2px solid var(--purple); border-radius:5px; background:var(--yellow); transform:rotate(-7deg); font-family:Bangers,cursive; font-size:19px; letter-spacing:1px; box-shadow:3px 3px 0 var(--purple); }.overlay h2 { margin:24px 0 9px; color:var(--purple); font-family:Bangers,cursive; font-size:46px; font-weight:400; line-height:.9; letter-spacing:1px; }.overlay h2 span { color:var(--orange); }.overlay p { max-width:240px; margin:0 0 22px; font-size:13px; font-weight:700; line-height:1.4; }.overlay button { cursor:pointer; padding:14px 18px 13px 21px; border:3px solid var(--purple); border-radius:9px; color:var(--purple); background:var(--yellow); box-shadow:4px 4px 0 var(--purple); font-family:Bangers,cursive; font-size:19px; letter-spacing:1px; transition:.15s; }.overlay button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--purple); }.overlay button span { font-size:25px; line-height:0; vertical-align:-2px; }.overlay .high-score { margin-top:24px; margin-bottom:0; color:var(--purple); font-size:10px; letter-spacing:.13em; }.overlay .high-score b { font-size:13px; }
.game-footer { display:flex; justify-content:space-between; gap:10px; padding:13px 3px 1px; color:var(--purple); font-size:9px; font-weight:700; letter-spacing:.1em; }.bottomline { padding-top:19px; border-top:2px solid rgba(69,44,133,.25); color:var(--purple); font-size:10px; font-weight:700; letter-spacing:.12em; }.status i { margin-right:5px; }
@media (max-width:800px) { body { background:var(--purple); background-image:none; overflow:hidden; }.shell { min-height:100svh; padding:0; }.topbar,.side-copy,.bottomline,.game-footer { display:none; }.game-layout { display:block; padding:0; }.game-card { width:100%; max-width:none; min-height:100svh; padding:0; border:0; border-radius:0; box-shadow:none; background:var(--cream); }.score-row { position:absolute; z-index:2; top:16px; left:0; right:0; padding:8px 0; pointer-events:none; }.canvas-wrap { width:100%; height:100svh; aspect-ratio:auto; border:0; border-radius:0; }.overlay { padding:25px; }.overlay h2 { font-size:42px; } }