:root {
  --bg: #fff8df;
  --paper: #fffdf5;
  --ink: #273047;
  --muted: #667085;
  --pink: #f6b5cf;
  --pink-dark: #d94b85;
  --yellow: #ffe28a;
  --green: #b8df9a;
  --blue: #9fd7ec;
  --purple: #cfc0ff;
  --shadow: 0 18px 50px rgba(39, 48, 71, .16);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: ui-rounded, "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 16%, rgba(246,181,207,.46), transparent 22rem),
    radial-gradient(circle at 86% 12%, rgba(159,215,236,.42), transparent 20rem),
    radial-gradient(circle at 50% 100%, rgba(184,223,154,.42), transparent 25rem),
    linear-gradient(180deg, #fffdf0, var(--bg));
  touch-action: manipulation;
}
.app { width: min(1040px, 100%); margin: 0 auto; padding: clamp(16px, 3vw, 34px); }
.hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 4px; color: var(--pink-dark); font-weight: 900; letter-spacing: .04em; }
h1 { margin: 0; font-size: clamp(38px, 7vw, 78px); line-height: .9; }
.subtitle { margin: 10px 0 0; font-size: clamp(17px, 2.4vw, 23px); color: var(--muted); max-width: 760px; }
.score-card { min-width: 112px; padding: 14px 18px; border: 3px solid var(--ink); border-radius: 24px; background: var(--yellow); box-shadow: 6px 6px 0 rgba(39,48,71,.18); text-align: center; transform: rotate(2deg); }
.score-card span { display:block; font-weight:900; }
.score-card strong { font-size:42px; }
.controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:18px; }
label { font-weight:900; display:grid; gap:6px; }
select, button { font: inherit; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); color: var(--ink); padding: 12px 14px; box-shadow: 4px 4px 0 rgba(39,48,71,.14); }
button { cursor:pointer; font-weight:900; }
.secondary { background: var(--blue); }
.game-card { position:relative; overflow:hidden; border:4px solid var(--ink); border-radius:34px; background:rgba(255,253,245,.92); box-shadow:var(--shadow); padding: clamp(18px, 4vw, 42px); text-align:center; }
.game-card::before { content:""; position:absolute; inset:auto -20px -70px -20px; height:170px; background: repeating-linear-gradient(-8deg, rgba(255,226,138,.38), rgba(255,226,138,.38) 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 22px); pointer-events:none; }
.target-house { width:min(260px, 72vw); margin:0 auto 26px; border:4px solid var(--ink); border-top:0; background:#fff; box-shadow:7px 7px 0 rgba(39,48,71,.14); }
.roof { background:var(--green); border-bottom:4px solid var(--ink); padding:10px; font-weight:900; font-size:20px; clip-path: polygon(50% 0, 100% 100%, 0 100%); height:82px; display:grid; place-items:end center; }
.target { font-size: clamp(56px, 12vw, 106px); font-weight:900; padding:4px 10px 12px; }
.pair-wrap { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap: clamp(10px, 2vw, 18px); margin: 20px 0 8px; }
.cloud { min-width: clamp(92px, 18vw, 150px); min-height: clamp(76px, 14vw, 112px); display:grid; place-items:center; border:4px solid var(--ink); border-radius: 46% 54% 48% 52% / 60% 45% 55% 40%; background: var(--pink); font-size: clamp(42px, 9vw, 82px); font-weight:900; box-shadow: 6px 6px 0 rgba(39,48,71,.14); }
.number-cloud { background: var(--purple); }
.missing-cloud { background: var(--pink); transform: rotate(-2deg); }
.heart { font-size: clamp(40px, 8vw, 72px); font-weight: 900; color: var(--pink-dark); }
.equals { font-size: clamp(36px, 7vw, 64px); font-weight:900; }
.sum-badge { min-width: clamp(80px, 15vw, 130px); border:4px solid var(--ink); border-radius:28px; padding:10px 18px; background:var(--yellow); font-size:clamp(40px, 8vw, 72px); font-weight:900; box-shadow: 6px 6px 0 rgba(39,48,71,.14); }
.message { min-height: 38px; margin: 22px 0 16px; font-size: clamp(20px, 3vw, 30px); font-weight:900; }
.message.good { color:#237a3b; }
.message.bad { color:#b42935; }
.number-pad { display:grid; grid-template-columns: repeat(5, minmax(58px, 1fr)); gap:12px; max-width: 720px; margin: 0 auto; }
.num { background:#fff; min-height:64px; font-size: clamp(26px, 5vw, 42px); }
.num:active { transform: translate(3px, 3px); box-shadow:1px 1px 0 rgba(39,48,71,.14); }
.progress { margin-top:18px; text-align:center; font-size:18px; color:var(--muted); font-weight:800; }
.bar { width:100%; height:20px; background:#fff; border:3px solid var(--ink); border-radius:999px; overflow:hidden; }
#barFill { width:0%; height:100%; background: var(--green); transition: width .25s ease; }
.shake { animation: shake .35s ease; }
.pop { animation: pop .38s ease; }
@keyframes shake { 20%,60% { transform: translateX(-8px) rotate(-2deg); } 40%,80% { transform: translateX(8px) rotate(2deg); } }
@keyframes pop { 50% { transform: scale(1.13) rotate(-2deg); } }
.confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.confetti span { position:absolute; top:-20px; font-size:26px; animation: fall 900ms linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); opacity:0; } }
@media (max-width: 720px) { .hero { align-items:flex-start; } .score-card { min-width:92px; padding:10px 12px; } .score-card strong{font-size:34px;} .number-pad { grid-template-columns: repeat(4, minmax(58px,1fr)); } }
@media (max-width: 520px) { .hero { flex-direction:column; } .controls { align-items:stretch; } label, select, .controls button { width:100%; } .number-pad { grid-template-columns: repeat(3, minmax(58px,1fr)); } }