* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd06a; font-family: "Trebuchet MS", system-ui, sans-serif; color: #5a3a2a; user-select: none; -webkit-user-select: none; touch-action: none; }
.hidden { display: none !important; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

.round { width: 52px; height: 52px; border-radius: 50%; border: 4px solid #fff; background: #ffb347; color: #fff; font-size: 24px; font-weight: 900; box-shadow: 0 5px 0 rgba(0,0,0,.18); cursor: pointer; position: relative; }
.round.small { width: 46px; height: 46px; font-size: 20px; background: rgba(255,255,255,.9); color: #5a3a2a; }
.round:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.round i { position: absolute; right: -6px; top: -6px; background: #e53935; color: #fff; font-style: normal; font-size: 12px; font-weight: 900; border-radius: 999px; padding: 1px 6px; border: 2px solid #fff; }

#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 12px 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-mid { text-align: center; }
#level-title { font-size: 30px; font-weight: 900; color: #fff; -webkit-text-stroke: 2px #6b3a2a; paint-order: stroke fill; text-shadow: 0 3px 0 #6b3a2a; }
.hud-row { display: flex; gap: 8px; justify-content: center; margin-top: 4px; align-items: center; }
#hearts { font-size: 24px; letter-spacing: 2px; }
#hearts .off { filter: grayscale(1); opacity: .35; }
.pill { background: rgba(255,255,255,.88); border-radius: 999px; padding: 3px 10px; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 rgba(0,0,0,.12); }

#zoom { position: fixed; left: 12px; top: 40%; z-index: 5; display: flex; flex-direction: column; gap: 10px; }

#boosters { position: fixed; left: 0; right: 0; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5; display: flex; justify-content: center; gap: 14px; padding: 0 12px; }
.booster { position: relative; width: 104px; border: 4px solid #fff; border-radius: 20px; background: #fff6e8; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: inherit; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.booster .ico { font-size: 34px; line-height: 1; }
.booster b { font-size: 15px; color: #b03a3a; }
.booster i { position: absolute; top: -10px; right: -8px; background: #43a047; color: #fff; font-style: normal; font-weight: 900; font-size: 14px; border: 3px solid #fff; border-radius: 999px; min-width: 28px; padding: 1px 6px; }
.booster.on { background: #ffe066; transform: translateY(-6px); }
.booster:disabled { opacity: .45; }
#mode-tip { position: fixed; left: 50%; bottom: 140px; transform: translateX(-50%); z-index: 6; background: rgba(90,58,42,.9); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 900; }

.overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(60,90,40,.45); }
.panel { width: min(440px, 100%); max-height: 100%; overflow: auto; background: #fff8ee; border: 6px solid #fff; border-radius: 30px; padding: 20px; text-align: center; box-shadow: 0 10px 0 rgba(0,0,0,.15); animation: pop .3s cubic-bezier(.2,1.5,.5,1); }
.panel.wide { width: min(620px, 100%); }
@keyframes pop { from { transform: scale(.6); } }
.logo { font-size: 46px; }
h1 { margin: 4px 0; color: #e0457b; font-size: 34px; }
h2 { margin: 0 0 8px; color: #e0457b; }
.sub { font-weight: 700; line-height: 1.35; }
.sub.small { font-size: 14px; opacity: .8; }
.big { display: block; width: 100%; margin: 10px 0 0; border: 4px solid #fff; border-radius: 20px; background: #43a047; color: #fff; font-family: inherit; font-weight: 900; font-size: 24px; padding: 12px; cursor: pointer; box-shadow: 0 6px 0 #2a7a36; }
.big.alt { background: #ffb347; box-shadow: 0 6px 0 #c9802a; }
.big:active { transform: translateY(3px); }
.row { display: flex; gap: 8px; }
.row .big { font-size: 18px; }
.stars { font-size: 50px; letter-spacing: 6px; }
.link { display: inline-block; margin-top: 12px; color: #6b3a2a; font-weight: 900; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 900; margin-bottom: 8px; }
#level-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.lvl { aspect-ratio: 1; border: 3px solid #fff; border-radius: 12px; background: #ffb347; color: #fff; font-family: inherit; font-weight: 900; font-size: 15px; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.lvl small { font-size: 8px; }
.lvl.done { background: #43a047; }
.lvl.next { background: #e0457b; }
.lvl:disabled { background: #c9c3bb; cursor: default; }
@media (max-width: 520px) { #level-grid { grid-template-columns: repeat(5, 1fr); } .booster { width: 92px; } }
#loading { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: #8fd06a; color: #fff; font-weight: 900; font-size: 24px; }