*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{background:#0d0021;overflow:hidden;font-family:'Nunito',sans-serif;width:100vw;height:100vh;}
#c{display:block;width:100vw;height:100vh;}

/* ── UI overlay ── */
#ui{position:fixed;inset:0;pointer-events:none;}
.screen{display:none;pointer-events:all;position:absolute;inset:0;
  background:rgba(10,0,30,.88);backdrop-filter:blur(6px);
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  color:#fff;}
.screen.active{display:flex;}
h1{font-size:2.4rem;font-weight:900;
  background:linear-gradient(135deg,#f472b6,#a78bfa,#60a5fa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
h2{font-size:1.6rem;font-weight:800;color:#e879f9;}
.subtitle{color:#c4b5fd;font-size:1rem;}
.title-logo,.go-icon,.win-icon{font-size:4rem;animation:bounce .8s ease infinite alternate;}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-12px)}}

.btn-main{background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;
  border:none;border-radius:999px;padding:.75rem 2.5rem;font-size:1.1rem;
  font-weight:800;cursor:pointer;box-shadow:0 4px 20px rgba(236,72,153,.5);
  transition:transform .15s;}
.btn-main:active{transform:scale(.95);}
.btn-secondary{background:rgba(255,255,255,.12);color:#e2e8f0;border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:.6rem 2rem;font-size:.95rem;cursor:pointer;}

/* ── HUD ── */
#hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:8px 14px;background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);pointer-events:none;font-size:.95rem;font-weight:700;}
#hud.hidden{display:none;}
#hud-level{color:#f472b6;}
#hud-score{color:#fbbf24;}
#hud-coins{color:#a78bfa;}

/* ── Level Select ── */
#level-grid{display:grid;grid-template-columns:repeat(8,44px);gap:8px;
  max-height:60vh;overflow-y:auto;padding:8px;}
.lv-btn{width:44px;height:44px;border-radius:10px;border:none;font-weight:800;
  font-size:.85rem;cursor:pointer;transition:transform .1s;}
.lv-btn:active{transform:scale(.9);}
.lv-unlocked{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;}
.lv-locked{background:#2d1b69;color:#6b7280;cursor:not-allowed;}
.lv-done{background:linear-gradient(135deg,#059669,#34d399);color:#fff;}

/* ── Win stars ── */
#win-stars{font-size:2rem;letter-spacing:4px;}

/* ── Mobile controls ── */
#controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-end;padding:12px 16px 20px;pointer-events:none;}
.ctrl{width:72px;height:72px;border-radius:50%;border:none;font-size:1.6rem;
  background:rgba(255,255,255,.15);backdrop-filter:blur(4px);
  color:#fff;pointer-events:all;cursor:pointer;user-select:none;
  border:2px solid rgba(255,255,255,.25);}
.ctrl.jump{width:80px;height:80px;font-size:1.8rem;
  background:linear-gradient(135deg,#7c3aed88,#ec489988);}

/* ── Pause btn ── */
.pause-btn{position:fixed;top:44px;right:12px;background:rgba(255,255,255,.15);
  border:none;color:#fff;font-size:1.2rem;width:40px;height:40px;
  border-radius:50%;cursor:pointer;pointer-events:all;}
.pause-btn.hidden{display:none;}