:root{
  --bg:#1b1f2a; --ink:#fff; --accent:#8a93ff; --gold:#ffd36b; --good:#7dff9b;
  --card:rgba(22,25,34,.82); --chip:rgba(255,255,255,.10);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;color:var(--ink);
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#scene{position:fixed;inset:0;display:block;width:100vw;height:100vh;z-index:0;touch-action:none}
#ui{position:fixed;inset:0;z-index:2;pointer-events:none}
#fx{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.layer{position:fixed;inset:0;pointer-events:auto}
/* The in-game HUD must let touches/clicks fall through to the canvas so the
   hole can be steered. Only its own buttons re-enable pointer events. */
#hud{pointer-events:none}
.hidden{display:none!important}

/* ---------- shared ---------- */
.btn{appearance:none;border:none;cursor:pointer;font-weight:800;font-size:18px;color:#10131c;
  background:linear-gradient(180deg,#fff,#d3dbff);border-radius:999px;padding:14px 28px;margin-top:10px;
  box-shadow:0 10px 26px rgba(110,130,255,.35);transition:transform .12s ease, box-shadow .12s ease;width:100%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.16)}
.chip{appearance:none;border:1px solid rgba(255,255,255,.16);background:var(--chip);color:#fff;
  border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}
.chip:active{transform:scale(.96)}

/* ---------- menu ---------- */
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(8,10,18,.55) 100%)}
.menu-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(24px + var(--safe-t)) 22px calc(24px + var(--safe-b));gap:6px}
.logo{font-size:clamp(44px,12vw,92px);font-weight:900;letter-spacing:-3px;line-height:.92;
  background:linear-gradient(180deg,#fff,#aebcff);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 12px 50px rgba(110,130,255,.4);filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.logo span{font-size:.42em;font-weight:700;letter-spacing:0;opacity:.7;margin:0 .18em;color:#cdd6ff;-webkit-text-fill-color:#cdd6ff}
.tag{opacity:.8;font-size:clamp(14px,3.6vw,18px);max-width:340px;margin-top:4px}
.best-line{opacity:.65;font-size:13px;margin:6px 0 14px;letter-spacing:.3px}
.play-grid{display:flex;flex-direction:column;gap:10px;width:min(360px,86vw)}
.play-btn{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
  color:#fff;border-radius:18px;padding:14px 18px;cursor:pointer;text-align:left;display:flex;flex-direction:column;
  backdrop-filter:blur(8px);transition:transform .12s ease,background .15s ease}
.play-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.play-btn:active{transform:scale(.98)}
.play-btn b{font-size:20px}
.play-btn small{opacity:.6;font-size:12.5px;margin-top:2px}
.play-btn.primary{background:linear-gradient(180deg,rgba(138,147,255,.95),rgba(91,107,255,.85));border-color:transparent;
  box-shadow:0 12px 30px rgba(91,107,255,.4)}
.play-btn.primary small{opacity:.85;color:#eaeeff}
.menu-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}

.install-banner{position:absolute;left:12px;right:12px;bottom:calc(12px + var(--safe-b));display:flex;align-items:center;gap:10px;
  background:rgba(22,25,34,.92);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px 14px;
  font-size:13.5px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.install-banner span{flex:1}
.install-banner button{appearance:none;border:none;background:var(--accent);color:#10131c;font-weight:700;
  border-radius:10px;padding:8px 12px;cursor:pointer}
.install-banner #bannerX{background:transparent;color:#fff;opacity:.6;padding:6px 8px}

/* ---------- HUD ---------- */
.hud-top{position:absolute;top:calc(14px + var(--safe-t));left:0;right:0;display:flex;align-items:flex-start;
  justify-content:space-between;padding:0 16px;gap:12px;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hud-box{background:rgba(16,18,26,.42);backdrop-filter:blur(8px);border-radius:14px;padding:8px 16px;
  min-width:92px;max-width:46vw;flex:0 0 auto}
.hud-box.right{text-align:right}
.hud-label{font-size:10px;text-transform:uppercase;letter-spacing:1.6px;opacity:.6}
.hud-val{font-size:clamp(20px,7vw,30px);font-weight:900;line-height:1;margin-top:2px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
#hTimerBox.low .hud-val{color:#ff6b6b;animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}
.hud-center{flex:1 1 auto;min-width:0;display:flex;justify-content:center;padding-top:10px}
.size-bar{width:min(220px,40vw);height:8px;border-radius:99px;background:rgba(0,0,0,.3);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.size-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#8a93ff,#ffd36b);transition:width .2s ease}
.icon-btn{position:absolute;top:calc(14px + var(--safe-t));left:50%;transform:translateX(-50%);display:none}
.hud .icon-btn,#hPause{position:absolute;right:16px;top:auto;bottom:calc(16px + var(--safe-b));left:auto;transform:none;
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:rgba(16,18,26,.5);color:#fff;border:none;font-size:14px;cursor:pointer;backdrop-filter:blur(8px);pointer-events:auto}

/* ---------- popups / combo ---------- */
.popup{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:20px;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.6);animation:popUp .9s ease-out forwards;pointer-events:none;white-space:nowrap}
.popup.big{font-size:34px;color:var(--gold)}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-150%) scale(1.1)}}
.combo-tag{position:absolute;left:50%;top:24%;transform:translateX(-50%) scale(0);font-weight:900;font-size:clamp(22px,6vw,34px);
  color:var(--gold);text-shadow:0 3px 14px rgba(0,0,0,.6);pointer-events:none;
  transition:transform .14s cubic-bezier(.2,1.7,.4,1)}
.combo-tag.show{transform:translateX(-50%) scale(1)}

/* ---------- modals ---------- */
.modal{display:flex;align-items:center;justify-content:center;background:rgba(8,10,16,.55);backdrop-filter:blur(6px);
  padding:calc(20px + var(--safe-t)) 18px calc(20px + var(--safe-b));animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card{width:min(420px,92vw);max-height:90vh;overflow:auto;background:var(--card);border:1px solid rgba(255,255,255,.1);
  border-radius:24px;padding:26px 24px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.5);animation:rise .25s ease}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.card h2{font-size:26px;font-weight:800;margin-bottom:12px}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 2px;font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.card .row input[type=range]{flex:0 0 130px}
.card .row.toggle input{width:22px;height:22px;accent-color:var(--accent)}
.howto{list-style:none;text-align:left;display:flex;flex-direction:column;gap:12px;margin:6px 0 18px;font-size:14.5px;line-height:1.4}
.howto b{color:#fff}
.steps{text-align:left;margin:8px 4px 6px 22px;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.4}
.steps li{padding-left:4px}
.ios-share{display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:0 6px;font-size:12px}
.hint{opacity:.55;font-size:12.5px;margin-top:12px}
.ok{font-size:16px;margin:10px 0 4px}

/* result */
.result-kicker{font-size:13px;text-transform:uppercase;letter-spacing:2px;opacity:.6}
.result-score{font-size:clamp(54px,16vw,84px);font-weight:900;line-height:1;margin:6px 0;color:var(--gold)}
.result-score.record{animation:pop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.new-best{color:var(--good);font-weight:800;font-size:18px}
.result-best{opacity:.6;font-size:15px}
.result-stats{display:flex;gap:8px;justify-content:center;opacity:.7;font-size:14px;margin:12px 0}
.unlocked{margin:10px 0;padding:10px;border-radius:12px;background:rgba(255,211,107,.14);font-size:14px}
.result-actions{margin-top:14px}
/* result ceremony: staggered reveals + a stamped New Best */
.reveal{opacity:0;animation:revealUp .45s ease forwards}
@keyframes revealUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stamp{opacity:0;animation:stampIn .45s cubic-bezier(.2,1.8,.3,1) forwards}
@keyframes stampIn{0%{opacity:0;transform:scale(1.9) rotate(-7deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
.card.noanim .reveal,.card.noanim .stamp{animation:none;opacity:1;transform:none}

/* skins */
.skins-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 16px}
.skin{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:16px;
  padding:14px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;transition:transform .1s}
.skin:active{transform:scale(.96)}
.skin.sel{border-color:var(--accent);background:rgba(138,147,255,.16)}
.skin.locked{opacity:.45;cursor:not-allowed}
.skin .swatch{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#05060a 52%,var(--rim) 56%,var(--glow) 74%,transparent 90%);
  box-shadow:0 0 18px var(--glow)}
.skin b{font-size:14px}
.skin small{font-size:11px;opacity:.6}

/* coin balance + buy state */
.coin-bal{font-size:15px;font-weight:800;color:var(--gold);margin:-4px 0 12px}
.skin.cant{opacity:.5}
.skin.cant small{color:#ff8a8a}

/* goals: missions + achievements */
.goal-sec{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1px;opacity:.7;text-align:left;margin:4px 0 8px}
.goal{background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;margin-bottom:8px;text-align:left}
.goal.done{background:rgba(125,255,155,.12)}
.goal-top{display:flex;justify-content:space-between;font-size:14px;font-weight:700;gap:8px}
.goal-reward{color:var(--gold);white-space:nowrap}
.goal.done .goal-reward{color:var(--good)}
.goal-bar{height:6px;border-radius:99px;background:rgba(0,0,0,.3);overflow:hidden;margin:6px 0 3px}
.goal-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#8a93ff,#ffd36b);transition:width .3s}
.goal small{opacity:.55;font-size:11px}
.ach-list{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow:auto;margin-bottom:14px}
.ach{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:12px;padding:9px 11px;text-align:left;opacity:.55}
.ach.got{opacity:1;background:rgba(255,211,107,.12)}
.ach-icon{font-size:20px;flex:0 0 auto}
.ach-txt{flex:1;display:flex;flex-direction:column}
.ach-txt b{font-size:14px}
.ach-txt small{font-size:11.5px;opacity:.7}
.ach-reward{color:var(--gold);font-weight:700;font-size:13px;white-space:nowrap}
.ach.got .ach-reward{color:var(--good)}

/* FPS / draw-call debug readout */
.fps-meter{position:fixed;left:50%;top:calc(8px + var(--safe-t));transform:translateX(-50%);z-index:9;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:#9dff9d;
  background:rgba(0,0,0,.45);padding:3px 9px;border-radius:8px;pointer-events:none}

/* feedback form */
.fb-input{width:100%;margin:0 0 10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#fff;font-size:15px;font-family:inherit;resize:none}
.fb-input::placeholder{color:rgba(255,255,255,.4)}
.fb-input:focus{outline:none;border-color:var(--accent)}

/* analytics consent banner */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:8;display:flex;flex-direction:column;gap:10px;
  background:rgba(22,25,34,.96);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 16px;
  font-size:13.5px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:auto}
.consent-btns{display:flex;gap:8px}
.consent-btns .btn{margin:0;padding:10px 18px;font-size:15px;width:auto;flex:1}

/* maps / themes picker */
.maps-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 12px}
.map{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:16px;
  padding:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;transition:transform .1s}
.map:active{transform:scale(.96)}
.map.sel{border-color:var(--accent);background:rgba(138,147,255,.16)}
.map.locked{opacity:.6}
.map-prev{width:100%;height:54px;border-radius:10px;background:linear-gradient(180deg,var(--a) 0%,var(--a) 45%,var(--b) 55%,var(--b) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.map b{font-size:14px}
.map small{font-size:11px;opacity:.65}

/* onboarding */
.onboard{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:auto;z-index:5;
  padding:0 16px calc(28px + var(--safe-b));background:linear-gradient(transparent,rgba(8,10,16,.4))}
.onboard-card{width:min(420px,92vw);background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:22px;
  padding:22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:rise .3s ease}
.big-emoji{font-size:42px}
.onboard-card h3{font-size:22px;margin:6px 0 8px}
.onboard-card p{opacity:.85;font-size:14.5px;line-height:1.5;margin-bottom:8px}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(80px + var(--safe-b));transform:translateX(-50%) translateY(10px);
  background:rgba(16,18,26,.95);border:1px solid rgba(255,255,255,.14);color:#fff;padding:12px 20px;border-radius:14px;
  font-size:14px;font-weight:600;opacity:0;transition:all .3s ease;z-index:9;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* battle leaderboard (HUD) */
.threat{position:absolute;top:calc(46px + var(--safe-t));left:50%;transform:translateX(-50%);
  font-size:15px;letter-spacing:3px;animation:threatPulse 1s ease-in-out infinite;pointer-events:none}
@keyframes threatPulse{0%,100%{opacity:.65}50%{opacity:1}}
.leaderboard{position:absolute;top:calc(86px + var(--safe-t));right:12px;display:flex;flex-direction:column;gap:3px;
  background:rgba(16,18,26,.42);backdrop-filter:blur(8px);border-radius:12px;padding:7px 9px;pointer-events:none;
  min-width:150px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.lb-row{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;opacity:.85}
.lb-row.me{opacity:1;color:#fff}
.lb-rank{width:14px;text-align:center;opacity:.6;font-size:11px}
.lb-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 6px currentColor}
.lb-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-score{font-variant-numeric:tabular-nums;opacity:.9}
.battle-place{font-size:20px;font-weight:800;margin:4px 0 2px}
.battle-place.win{color:var(--gold)}
.battle-board{display:flex;flex-direction:column;gap:3px;margin:10px 0;padding:10px;border-radius:12px;background:rgba(255,255,255,.05)}
.battle-board .lb-row{font-size:15px;opacity:.9}
.battle-board .lb-row.me{color:var(--gold)}

/* size-tier milestone banner */
.milestone{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);opacity:0;
  font-weight:900;font-size:clamp(22px,7vw,40px);letter-spacing:.5px;text-align:center;white-space:nowrap;
  color:#fff;text-shadow:0 0 24px rgba(138,147,255,.9),0 4px 18px rgba(0,0,0,.7);pointer-events:none;z-index:6;
  transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .3s ease}
.milestone.show{transform:translate(-50%,-50%) scale(1);opacity:1}

/* big-moment screen flash */
.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);
  opacity:0;pointer-events:none;z-index:5;transition:opacity .35s ease}
.flash.show{opacity:1;transition:opacity .08s ease}

/* virtual joystick */
.joystick{position:absolute;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 24px rgba(0,0,0,.18);pointer-events:none;z-index:5}
.joystick.hidden{display:none}
.joystick-thumb{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.95),rgba(176,186,255,.72));
  transform:translate(-50%,-50%);box-shadow:0 6px 16px rgba(0,0,0,.45)}

/* segmented control (settings) */
.seg{display:flex;gap:0;border:1px solid rgba(255,255,255,.16);border-radius:12px;overflow:hidden}
.seg button{flex:1;appearance:none;border:none;background:transparent;color:#fff;font-size:13.5px;font-weight:700;
  padding:9px 6px;cursor:pointer;opacity:.6}
.seg button.on{background:var(--accent);color:#10131c;opacity:1}

/* premium unlock row (maps modal) */
.prem{border-top:1px solid rgba(255,255,255,.12);margin-top:12px;padding-top:10px;border-radius:8px}
.prem-actions{display:flex;gap:8px;justify-content:center;margin:8px 0;flex-wrap:wrap}
.prem-actions .btn{text-decoration:none}
.prem-redeem{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin-top:6px}
.prem-redeem .fb-input{flex:1 1 200px;margin:0}
.prem-redeem .hint{flex-basis:100%;min-height:1em}
.prem.pulse{animation:premPulse .9s ease}
@keyframes premPulse{0%,100%{background:transparent}30%{background:rgba(122,134,255,.18)}}