:root { --ink:#192238; --navy:#151b3b; --blue:#3557d6; --cream:#fff9ef; --orange:#ff7657; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:"Space Grotesk",sans-serif; background:radial-gradient(circle at 18% 16%,#bde9ff,transparent 28%),radial-gradient(circle at 82% 85%,#ffd6a8,transparent 32%),#f5f0ff; }
.page { min-height:100vh; display:grid; place-items:center; padding:28px 16px; }
.back { position:fixed; top:21px; left:24px; color:var(--ink); font-weight:700; text-decoration:none; }
.shell { width:min(650px,100%); padding:25px; border:1px solid #fff; border-radius:28px; background:#fffdf9d9; box-shadow:0 26px 70px #24214d24; }
header { display:flex; align-items:center; justify-content:space-between; } header p { margin:0; color:var(--orange); font-size:10px; font-weight:700; letter-spacing:2px; } h1 { margin:1px 0 7px; font:800 40px/1 "Baloo 2"; letter-spacing:-1px; }
.pause { width:42px; height:38px; border:0; border-radius:10px; background:var(--navy); color:#fff; font-weight:900; cursor:pointer; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }.stats span { padding:8px; border-radius:9px; background:#eceafa; color:#6b6682; text-align:center; font-size:9px; letter-spacing:1px; font-weight:700; }.stats b { display:block; color:var(--navy); font-size:19px; letter-spacing:0; }
.game-area { display:grid; grid-template-columns:112px minmax(190px,300px) 112px; justify-content:center; align-items:start; gap:12px; }.board-wrap { position:relative; }.board-wrap>canvas { display:block; width:100%; height:auto; border:5px solid #252d59; border-radius:12px; background:#111733; box-shadow:0 8px 0 #252d59; }.side { padding:10px 6px; border-radius:13px; background:#eeeafa; text-align:center; }.side p { margin:0 0 7px; color:#6b6682; font-size:9px; letter-spacing:1px; font-weight:700; }.side canvas { width:100%; height:auto; display:block; }.overlay { position:absolute; inset:0; display:grid; place-content:center; gap:10px; padding:18px; text-align:center; color:#fff; background:#101634d9; border-radius:8px; }.overlay[hidden] { display:none; }.overlay strong { font:800 28px/1 "Baloo 2"; }.overlay span { font-size:12px; line-height:1.5; }.overlay button,.restart { border:0; border-radius:10px; padding:11px 15px; background:var(--orange); color:#fff; cursor:pointer; font:700 12px "Space Grotesk"; }.help { margin:17px 0 12px; color:#6e7080; text-align:center; font-size:12px; }.controls { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }.controls button { min-height:42px; border:0; border-radius:9px; background:#e9e6f6; color:var(--navy); font:800 15px "Space Grotesk"; cursor:pointer; touch-action:none; }.controls button:active { background:#b9b2ea; transform:translateY(2px); }.controls .drop { background:#3557d6; color:#fff; }.restart { display:block; margin:13px auto 0; background:var(--navy); }
@media(max-width:560px) { .page { padding:68px 12px 22px; }.back { top:18px; left:16px; }.shell { padding:18px 12px; }.game-area { grid-template-columns:1fr; }.board-wrap { width:min(100%,270px); margin:auto; order:1; }.side { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; }.side p { margin:0; }.side canvas { width:95px; }.left-side { order:2; }.next-side { order:3; }.next-side canvas { height:66px; }.next-side { overflow:hidden; }.controls { gap:5px; }.controls button { min-height:45px; } }