@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@500;700;800&display=swap');

:root { --ink:#3c2b2a; --cream:#fff8e8; --peach:#ff8f70; --coral:#ed6258; --yellow:#ffd166; --mint:#8ed9bd; --blue:#77bde8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:Nunito,system-ui,sans-serif; background-image:radial-gradient(#f2c993 1.5px,transparent 1.5px); background-size:24px 24px; }
.shell { width:min(1080px, calc(100% - 28px)); margin:auto; padding:28px 0 48px; }
.hero { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:16px 4px 24px; }
h1,h2 { font-family:'Baloo 2',sans-serif; line-height:.95; margin:0; } h1 { font-size:clamp(2.4rem,6vw,4.7rem); letter-spacing:-1px; } h2 { font-size:2rem; }
.subtitle { margin:14px 0 0; font-size:1.05rem; } .eyebrow { margin:0 0 7px; color:#b85a45; font-weight:800; text-transform:uppercase; letter-spacing:.11em; font-size:.72rem; }
button { border:0; cursor:pointer; color:var(--ink); font:inherit; font-weight:800; } .music-button,.primary { background:var(--ink); color:#fff8e8; padding:12px 16px; border-radius:999px; box-shadow:0 5px 0 #201817; } .music-button:active,.primary:active { transform:translateY(3px); box-shadow:0 2px 0 #201817; }
.game-layout { display:grid; grid-template-columns:minmax(300px, 500px) 260px; gap:24px; justify-content:center; align-items:start; }
.board-wrap { position:relative; width:min(100%,500px); padding:18px; border:4px solid var(--ink); border-radius:28px; background:#fbd7a3; box-shadow:0 10px 0 #d58a63; background-image:url('/corgi-cat-bg.png'); background-size:cover; background-position:center; }
#game { display:block; width:min(100%,300px); height:auto; margin:auto; border:4px solid var(--ink); border-radius:14px; background:rgba(45,31,38,.92); image-rendering:pixelated; }
.overlay { position:absolute; inset:18px; display:grid; place-items:center; border-radius:14px; background:rgba(255,248,232,.8); } .overlay.hidden { display:none; } .overlay-card { max-width:270px; padding:22px; text-align:center; border:3px solid var(--ink); border-radius:22px; background:#fff8e8; box-shadow:0 7px 0 #d58a63; } .mascot { font-size:2.4rem; margin-bottom:8px; } .overlay-card p { line-height:1.45; }
.side-panel { padding:20px; border:3px solid var(--ink); border-radius:24px; background:#fff8e8; box-shadow:0 8px 0 #d58a63; } .score-card { padding-bottom:14px; border-bottom:2px dashed #e8b77c; } .score-card span,.next-card span { display:block; font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#b85a45; } .score-card strong { display:block; font:800 3.7rem/.9 'Baloo 2'; color:var(--coral); }
.stat-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed #e8b77c; } .next-card { text-align:center; padding:16px 0 10px; } #next { display:block; margin:auto; image-rendering:pixelated; }
.controls { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .controls button { min-height:42px; border:2px solid var(--ink); border-radius:12px; background:var(--yellow); } .controls .drop { grid-column:1/-1; background:var(--mint); }
.tip { margin:16px 0 0; font-size:.83rem; line-height:1.4; }
.leaderboard { margin-top:38px; padding:24px; border:3px solid var(--ink); border-radius:24px; background:#fff8e8; box-shadow:0 8px 0 #d58a63; } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:16px; } #scoreStatus { font-size:.8rem; color:#a15e4b; } #scores { margin:0; padding:0; list-style:none; display:grid; gap:8px; } #scores li { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:10px; padding:11px 13px; border-radius:14px; background:#ffe7bd; } #scores li:first-child { background:#ffd166; } .rank { font:800 1.4rem 'Baloo 2'; } .score-name { font-weight:800; } .score-points { font-weight:800; color:var(--coral); }
dialog { border:3px solid var(--ink); border-radius:22px; padding:26px; color:var(--ink); background:var(--cream); box-shadow:0 12px 0 #d58a63; } dialog::backdrop { background:rgba(60,43,42,.35); } dialog h2 { margin-bottom:18px; } dialog form { display:grid; gap:12px; } input { border:2px solid var(--ink); border-radius:12px; padding:12px; font:inherit; background:white; }
@media (max-width:700px) { .hero { align-items:start; flex-direction:column; } .game-layout { grid-template-columns:1fr; } .side-panel { max-width:500px; width:100%; margin:auto; } }