*{box-sizing:border-box}
:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif}
body{margin:0;min-height:100vh;background:linear-gradient(135deg,#ffe8f3,#e8f6ff);display:flex;justify-content:center;align-items:center;padding:18px;user-select:none}
.app{width:min(760px,100%);text-align:center}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
h1{margin:0;font-size:clamp(28px,7vw,48px);line-height:1}
p{margin:7px 0 0;font-size:clamp(15px,4vw,20px)}
.counter{background:#fff;border-radius:999px;padding:10px 16px;font-weight:800;font-size:20px;box-shadow:0 6px 18px #0001}
.game-area{position:relative;min-height:65vh;display:flex;align-items:center;justify-content:center}
.popit{width:min(92vw,650px);padding:clamp(18px,4vw,34px);display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(9px,2.2vw,18px);background:linear-gradient(145deg,#ff7ab6,#ff9bc8);border-radius:28px;box-shadow:inset 0 -12px 0 #d95d99,0 18px 35px #0002}
.bubble{aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,#fff0 28%),#7ed7ff;box-shadow:inset 0 9px 0 #fff5,inset 0 -9px 0 #0002,0 5px 0 #0002;cursor:pointer;touch-action:manipulation;transition:transform .12s,box-shadow .12s,filter .12s}
.bubble:active{transform:scale(.9)}
.bubble.popped{transform:scale(.9);background:#8c91d8;box-shadow:inset 0 7px 8px #0003,0 2px 0 #0002;cursor:default;filter:saturate(.75)}
.reset,button{border:0;border-radius:999px;padding:14px 22px;background:#fff;font-weight:800;font-size:17px;box-shadow:0 6px 15px #0002;cursor:pointer}
.win{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffffff2;border-radius:28px;padding:20px;animation:appear .35s ease}
.win h2{font-size:clamp(42px,12vw,78px);margin:8px 0}
.win p{margin:0 0 20px}
.stars{font-size:35px}
.hidden{display:none!important}
@keyframes appear{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media(max-width:520px){.popit{grid-template-columns:repeat(5,1fr);gap:10px;padding:18px;border-radius:24px}.game-area{min-height:60vh}header{align-items:flex-start}.counter{font-size:16px;padding:9px 13px}}