:root {
  --blue: #3b8ef0; --blue-d: #1d5fc4; --blue-dd: #1e3a8a;
  --green: #35c05a; --green-d: #1f8a3a;
  --ink: #243040; --muted: #64748b;
  --font: "Fredoka", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--font); color: var(--ink); }
body { background: linear-gradient(180deg, #c9e4ff 0%, #e6f0f9 45%, #fdf3e3 100%) fixed; }
canvas { display: block; touch-action: none; background: transparent; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* chunky toy buttons */
.btn { font-weight: 700; font-size: 18px; line-height: 1; color: #fff; border: 0; border-radius: 18px; padding: 14px 28px;
       background: linear-gradient(var(--blue), #2f7ff3); box-shadow: 0 5px 0 var(--blue-d), 0 8px 16px rgba(0,0,0,.22);
       text-shadow: 0 2px 0 rgba(0,0,0,.25); letter-spacing: .4px; transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blue-d), 0 3px 8px rgba(0,0,0,.2); }
.btn:disabled { filter: saturate(.2) brightness(.9); opacity: .75; }
.btn.green { background: linear-gradient(#5ad072, var(--green)); box-shadow: 0 5px 0 var(--green-d), 0 8px 16px rgba(0,0,0,.22); }
.btn.green:active { box-shadow: 0 1px 0 var(--green-d), 0 3px 8px rgba(0,0,0,.2); }
.btn.big { font-size: 26px; padding: 18px 54px; border-radius: 22px; }
.icon-btn { width: 50px; height: 50px; padding: 0; border-radius: 16px; display: grid; place-items: center; }
.icon-btn svg { width: 26px; height: 26px; fill: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }

.title { font-weight: 700; color: #fff; -webkit-text-stroke: 5px var(--blue-dd); paint-order: stroke fill;
         text-shadow: 0 4px 0 var(--blue-dd), 0 8px 14px rgba(0,0,0,.25); }
.pill { background: rgba(255,255,255,.85); color: var(--ink); font-weight: 700; padding: 5px 12px; border-radius: 999px; font-size: 14px;
        box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.muted { color: var(--muted); font-size: 14px; margin: 6px 0; }

/* screens */
body[data-screen="menu"] #hud { display: none; }
body[data-screen="game"] #menu { display: none; }
#menu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
        background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.35), rgba(30,58,138,.55)); }
#menu .logo { width: min(88vw, 520px); margin-bottom: 4px; filter: drop-shadow(0 12px 18px rgba(20,40,90,.35)); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-1deg); } }
#menu .sub { color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 2px 0 rgba(0,0,0,.3); margin: 0 0 8px; }
#menu .big { min-width: min(220px, 80vw); }
#best { color: #fff; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.3); }

#hud { position: fixed; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
#hud button { pointer-events: auto; }
#hudTop { display: flex; align-items: flex-start; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 14px 6px; }
#hudTop .center { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#level { font-size: 34px; line-height: 1.1; }
.pills { display: flex; gap: 8px; }
#hudBottom { display: flex; justify-content: center; gap: 14px; padding: 8px 10px max(14px, env(safe-area-inset-bottom)); }
.tile { position: relative; width: 94px; padding: 10px 6px 9px; border-radius: 18px; border: 0; color: #fff; font-weight: 700; font-size: 15px; text-align: center;
        background: linear-gradient(var(--blue), #2f7ff3); box-shadow: 0 5px 0 var(--blue-d), 0 8px 16px rgba(0,0,0,.22); text-shadow: 0 2px 0 rgba(0,0,0,.25);
        transition: transform .08s, box-shadow .08s; }
.tile svg { width: 38px; height: 38px; display: block; margin: 0 auto 4px; fill: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.tile:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blue-d), 0 3px 8px rgba(0,0,0,.2); }
.tile .badge { position: absolute; top: -9px; right: -7px; min-width: 18px; height: 20px; padding: 0 4px; border-radius: 12px; background: #ef4444;
               border: 3px solid #fff; font-size: 14px; line-height: 20px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.tile:disabled { background: linear-gradient(#9aa5b4, #7b8797); box-shadow: 0 5px 0 #56606e; opacity: .85; cursor: default; }
.tile:disabled .badge { background: #64748b; }
.tile.armed { background: linear-gradient(#ffd166, #f59e0b); box-shadow: 0 5px 0 #b45309, 0 0 0 4px rgba(255,255,255,.6); animation: pulse .9s infinite; }
@keyframes pulse { 50% { transform: translateY(-3px); } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.tile.shake { animation: shake .25s; }

#hint { position: fixed; top: 112px; left: 0; right: 0; text-align: center; pointer-events: none; }
#hint span { display: inline-block; background: #f59e0b; color: #fff; font-weight: 700; padding: 6px 16px; border-radius: 999px; box-shadow: 0 3px 0 #b45309; }
#banner { position: fixed; left: 0; right: 0; top: 42%; text-align: center; font-size: clamp(36px, 10vw, 56px); pointer-events: none;
          opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s cubic-bezier(.2, 1.6, .4, 1); }
#banner.show { opacity: 1; transform: scale(1); }

.overlay { position: fixed; inset: 0; background: rgba(20,30,45,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { background: #fff; border-radius: 26px; padding: 22px 20px 20px; width: min(360px, 100%); max-height: 90vh; overflow: auto; box-sizing: border-box;
        box-shadow: 0 12px 0 #c7d2e3, 0 24px 60px rgba(0,0,0,.35); text-align: center; display: flex; flex-direction: column; gap: 10px; }
.card h2 { margin: 0; font-size: 34px; color: var(--blue-dd); }
.card .btn { width: 100%; box-sizing: border-box; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
#form { display: flex; gap: 8px; }
#form input { flex: 1; min-width: 0; font: 700 16px var(--font); padding: 12px 14px; border: 3px solid #cbd5e1; border-radius: 14px; }
#form .btn { padding: 12px 18px; width: auto; flex: 0 0 auto; }
#lb { text-align: left; padding-left: 26px; margin: 0; max-height: 36vh; overflow: auto; font-weight: 500; }
#lb li { padding: 3px 4px; display: flex; justify-content: space-between; gap: 8px; }
#lb li.me { font-weight: 700; color: #2563eb; }
#lb small { color: var(--muted); }

/* round 4: coins, combos, popups, shop */
.btn.ghost { background: #eef2f7; color: var(--ink); box-shadow: 0 5px 0 #c7d2e3, 0 8px 16px rgba(0,0,0,.12); text-shadow: none; }
#menu .corner { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 14px; width: 50px; min-width: 0; padding: 0; }
body[data-screen="menu"] #hint { display: none; }
#menu .row { display: flex; gap: 10px; width: min(88vw, 340px); }
#menu .row .btn { min-width: 0; flex: 1; padding: 14px 8px; font-size: 16px; white-space: nowrap; }
.pill.coin { cursor: pointer; pointer-events: auto; }
.pill.coin i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 5px; vertical-align: -1px;
               background: radial-gradient(circle at 35% 35%, #fff2a8, #f5b800 60%, #b07a00); box-shadow: 0 1px 1px rgba(0,0,0,.3); }
.pill.combo { background: #ffd34a; color: #7a4a00; }
.pulse { animation: pulse2 .35s; }
@keyframes pulse2 { 50% { transform: scale(1.25); } }
.tile.empty { background: linear-gradient(#9aa5b4, #7b8797); box-shadow: 0 5px 0 #56606e; }
.tile.empty .badge { background: #64748b; }
.tile.empty::after { content: "+"; position: absolute; left: -6px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--green);
                     color: #fff; font-size: 16px; line-height: 22px; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
#pops { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: 22px; color: #fff; -webkit-text-stroke: 4px var(--blue-dd);
       paint-order: stroke fill; text-shadow: 0 3px 0 var(--blue-dd); animation: pop 1s ease-out forwards; white-space: nowrap; }
.pop.combo { font-size: 36px; color: #ffd34a; }
.pop.coins { font-size: 20px; color: #ffe07a; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
.coin-fly { position: absolute; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%);
            background: radial-gradient(circle at 35% 35%, #fff2a8, #f5b800 60%, #b07a00); box-shadow: 0 2px 4px rgba(0,0,0,.3);
            transition: left .62s cubic-bezier(.3,.8,.4,1), top .62s cubic-bezier(.3,.8,.4,1), transform .62s; }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .65; } 100% { opacity: 0; } }
#shopList { text-align: left; max-height: 48vh; overflow: auto; }
.shop-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 2px solid #eef2f7; }
.shop-item.focus { background: #fff8e1; border-radius: 12px; }
.shop-item .info { flex: 1; min-width: 0; }
.shop-item b { display: block; font-size: 16px; }
.shop-item small { color: var(--muted); font-weight: 500; }
.shop-item .btn { width: auto; padding: 10px 12px; font-size: 14px; white-space: nowrap; flex: 0 0 auto; }