*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:#1db2bd;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;position:fixed;inset:0}
#app{position:fixed;inset:0}
canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.hidden{display:none!important}
#hud{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 12px) 0 calc(env(safe-area-inset-left) + 12px);
  pointer-events:none;text-shadow:0 2px 6px rgba(80,45,10,.5)}
#hearts{font-size:22px;letter-spacing:1px;margin-top:6px;white-space:nowrap;display:inline-block;background:linear-gradient(180deg,#fffaf0,#f6e6c4);border:2px solid #e9b23a;border-radius:16px;padding:2px 8px;box-shadow:0 3px 0 #b77d1e,0 5px 12px rgba(80,45,10,.25);text-shadow:none}
#hearts.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.25)}}
.hud-mid{text-align:center}
#score{font-size:46px;font-weight:900;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:#fff8e6;-webkit-text-stroke:1.5px #1f2a5c;text-shadow:0 3px 0 #1f2a5c,0 5px 0 #e9a21f,0 8px 14px rgba(80,45,10,.4)}
#coinsHud{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff0a8,#ffcb2f 45%,#e89a12);color:#1f2a5c;padding:3px 11px 3px 6px;border-radius:14px;box-shadow:0 2px 0 #a8650c,0 4px 10px rgba(80,45,10,.25);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.coin-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7c8,#f6c431 45%,#c98a12);box-shadow:0 0 0 1.5px #1f2a5c inset}
.hud-right{display:flex;justify-content:flex-end}
.icon-btn{pointer-events:auto;width:44px;height:44px;border-radius:22px;border:2px solid #f2c04a;background:linear-gradient(180deg,#7b6ad6,#4b3fa0);color:#fff;box-shadow:0 3px 0 #2e2670,0 5px 12px rgba(40,20,80,.3);font-size:20px;line-height:44px;cursor:pointer}
.icon-btn:focus-visible,.big-btn:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
#toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 112px);transform:translate(-50%,-10px);text-align:center;opacity:0;
  transition:opacity .35s,transform .35s;pointer-events:none;width:92%}
#toast.show{opacity:1;transform:translate(-50%,0)}
.toast-sub{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff8e6;text-shadow:0 2px 4px rgba(60,35,10,.8)}
.toast-name{display:inline-block;margin-top:5px;background:linear-gradient(180deg,#fff0a8,#ffcb2f 45%,#e89a12);color:#1f2a5c;border:2px solid #a8650c;border-radius:14px;padding:7px 16px;font-size:19px;font-weight:900;box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 4px 0 #a8650c,0 8px 20px rgba(80,45,10,.3)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 20px);
  background:linear-gradient(180deg,rgba(255,206,110,.28),rgba(255,180,90,.12) 40%,rgba(20,110,115,.55) 75%,rgba(15,70,80,.72))}
.panel{width:100%;max-width:360px;text-align:center}
.kicker,.over-kicker{display:inline-block;background:linear-gradient(180deg,#7b6ad6,#4b3fa0);color:#fff8e6;border:2px solid #f2c04a;padding:4px 12px;border-radius:14px;box-shadow:0 3px 0 #2e2670;font-weight:800;font-size:13px;letter-spacing:2px;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.6)}
h1{margin-top:12px;font-size:58px;line-height:.92;font-weight:900;letter-spacing:-1.5px;color:#fff8e6;-webkit-text-stroke:2px #1f2a5c;text-shadow:0 5px 0 #1f2a5c,0 9px 0 #f2b01e,0 14px 24px rgba(80,45,10,.45)}
.tag{margin-top:18px;font-size:16px;color:#fff8e6;font-weight:700;line-height:1.35;text-shadow:0 1px 4px rgba(40,25,5,.85),0 0 10px rgba(40,25,5,.4)}
.controls{list-style:none;margin:18px auto 0;max-width:300px;text-align:left;background:linear-gradient(180deg,#fffaf0,#f7e8c8);border:2px solid #e9b23a;border-radius:14px;padding:11px 14px;font-size:15px;line-height:1.75;color:#3a2e1c;box-shadow:0 4px 0 #c08a2a,0 8px 20px rgba(80,45,10,.28)}
.controls b{color:#4b3fa0}
.best{margin-top:16px;color:#fff8e6;font-weight:600;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cta{display:inline-block;margin-top:18px;padding:13px 30px;border-radius:30px;font-size:21px;font-weight:900;color:#1f2a5c;background:linear-gradient(180deg,#fff3b8,#ffcb2f 48%,#e89a12);border:2px solid #a8650c;box-shadow:inset 0 4px 0 rgba(255,255,255,.6),0 5px 0 #a8650c,0 10px 22px rgba(80,45,10,.35);animation:pulse 1.3s ease-in-out infinite;letter-spacing:1px;text-transform:uppercase}
@keyframes pulse{50%{transform:scale(1.06)}}
#finalScore{color:#1f2a5c;text-shadow:0 4px 0 #f2c04a;font-size:76px;font-weight:900;letter-spacing:-2px;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.badge{display:inline-block;margin-top:8px;background:linear-gradient(180deg,#7b6ad6,#4b3fa0);color:#ffe27a;font-weight:900;font-size:12px;padding:4px 9px;border-radius:4px;letter-spacing:1px}
.stats{margin-top:14px;background:rgba(255,255,255,.55);border:1px solid rgba(200,150,60,.35);border-radius:10px;padding:8px 14px;text-align:left}
.stats div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:16px;font-weight:800;border-bottom:1px solid rgba(160,110,40,.18)}
.stats div:last-child{border:0}
.stats .k{color:#6a5536;font-weight:500;white-space:nowrap}
.stats span:last-child{text-align:right}
.big-btn{margin-top:20px;width:100%;height:58px;border:0;border-radius:29px;background:linear-gradient(180deg,#fff3b8,#ffcb2f 48%,#e89a12);border:2px solid #a8650c;color:#1f2a5c;font-size:22px;font-weight:900;letter-spacing:.5px;cursor:pointer;box-shadow:inset 0 4px 0 rgba(255,255,255,.6),0 5px 0 #a8650c,0 10px 20px rgba(80,45,10,.3)}
.big-btn:active{transform:translateY(3px);box-shadow:inset 0 4px 0 rgba(255,255,255,.6),0 2px 0 #a8650c}
#over{background:linear-gradient(180deg,rgba(255,200,110,.3),rgba(15,80,85,.6))}
#over .panel{color:#2a2213;background:linear-gradient(180deg,#fffaf0,#f5e2bb);border:3px solid #e9b23a;border-radius:20px;padding:22px 18px 20px;box-shadow:0 10px 40px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}