* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --blue:#2f7bff; --blue-d:#1c52c4;
  --green:#3fc24a; --green-d:#2a8f33;
  --ui-blue:#3d8bff;
  --gold:#ffcb2e;
}
html,body{ height:100%; overflow:hidden; background:#11161f;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  user-select:none; -webkit-user-select:none; touch-action:none; }

#app{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* ---------- TOP HUD ---------- */
#hud-top{
  position:absolute; top:0; left:0; right:0; height:84px;
  display:flex; align-items:center; gap:10px; padding:14px 14px 0;
  z-index:5; pointer-events:none;
}
#hud-top > *{ pointer-events:auto; }
.hud-btn{
  width:54px; height:54px; flex:0 0 54px; border:none; border-radius:50%;
  background:linear-gradient(#5aa0ff,#2f7bff); color:#fff; font-size:26px;
  box-shadow:0 4px 0 #1b4fb8, 0 6px 10px rgba(0,0,0,.3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding-bottom:4px;
}
.hud-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #1b4fb8; }
#level-bar{ flex:1; height:50px; position:relative; }
#level-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:21px; letter-spacing:1px; z-index:2;
  text-shadow:0 2px 3px rgba(0,0,0,.45);
}
#progress-track{
  position:absolute; inset:0; border-radius:25px; overflow:hidden;
  background:#173a7a; border:3px solid #fff;
  box-shadow:0 4px 0 rgba(0,0,0,.25), inset 0 2px 6px rgba(0,0,0,.35);
  display:flex;
}
#progress-fill{ height:100%; width:50%; background:linear-gradient(#54a6ff,#2f7bff); transition:width .25s ease; }
#coins{
  flex:0 0 auto; min-width:78px; height:50px; border-radius:25px;
  background:linear-gradient(#3a3f4c,#23262e); border:3px solid #fff;
  display:flex; align-items:center; gap:6px; padding:0 14px 0 8px; color:#fff;
  font-weight:800; font-size:19px; box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.coin-ico{ width:24px; height:24px; flex:0 0 24px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe680,#ffb01f 70%,#e08a00);
  border:2px solid #d98800; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.coin-ico.big{ width:34px; height:34px; flex:0 0 34px; }

/* ---------- BOTTOM HUD ---------- */
#hud-bottom{
  position:absolute; left:0; right:0; bottom:0; padding:0 16px 20px;
  display:flex; align-items:flex-end; justify-content:space-between; z-index:5;
  pointer-events:none;
}
#hud-bottom > *{ pointer-events:auto; }
.pill-btn{
  border:none; border-radius:18px; color:#fff; font-weight:800; cursor:pointer;
  display:flex; align-items:center; gap:7px; padding:12px 16px; font-size:16px;
  box-shadow:0 5px 0 rgba(0,0,0,.3); position:relative;
}
#btn-lang{ background:linear-gradient(#6b7280,#454b56); box-shadow:0 5px 0 #2c3038; }
.pill-btn.boost{ background:linear-gradient(#4fd6ff,#2f95e8); box-shadow:0 5px 0 #1d6bb0; }
.pill-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.3); }
.pill-btn.disabled{ filter:grayscale(.6) brightness(.8); pointer-events:none; }
.rush{ font-size:20px; }
.ad-tag{
  background:#ff3b3b; color:#fff; font-size:10px; font-weight:900; border-radius:5px;
  padding:2px 5px; letter-spacing:.5px;
}
.pill-btn.boost .ad-tag{ position:absolute; top:-8px; left:8px; }

/* ---------- MODAL ---------- */
#modal{ position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(10,16,28,.55); backdrop-filter:blur(2px); }
#modal.hidden{ display:none; }
.modal-card{ width:min(86%,420px); display:flex; flex-direction:column; align-items:center;
  animation:pop .35s cubic-bezier(.2,1.3,.5,1); }
@keyframes pop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal-banner{
  width:100%; text-align:center; color:#fff; font-size:34px; font-weight:900; letter-spacing:2px;
  padding:14px; border-radius:20px 20px 6px 6px;
  background:linear-gradient(#54a6ff,#2f7bff); border:4px solid #fff; border-bottom:none;
  box-shadow:0 6px 0 rgba(0,0,0,.25); text-shadow:0 3px 4px rgba(0,0,0,.35);
}
.modal-banner.defeat{ background:linear-gradient(#ff7a7a,#e23b3b); }
.modal-body{ width:100%; background:linear-gradient(#eef2fb,#cdd7ee); border:4px solid #fff; border-top:none;
  border-radius:6px 6px 22px 22px; padding:22px 20px 24px; display:flex; flex-direction:column;
  align-items:center; gap:14px; box-shadow:0 10px 0 rgba(0,0,0,.18); }
.modal-sub{ color:#6b7691; font-weight:800; letter-spacing:2px; font-size:16px; }
.reward-box{ background:rgba(0,0,0,.05); border-radius:14px; padding:14px 28px; }
.reward-coin{ display:flex; align-items:center; gap:10px; font-size:30px; font-weight:900; color:#394559; }
.btn-green,.btn-blue{ border:none; border-radius:16px; color:#fff; font-weight:900; font-size:22px;
  padding:14px 26px; cursor:pointer; display:flex; align-items:center; gap:10px; letter-spacing:1px;
  min-width:200px; justify-content:center; }
.btn-green{ background:linear-gradient(#5ddb5d,#37b03a); box-shadow:0 6px 0 #2a8a2c; }
.btn-blue{ background:linear-gradient(#54a6ff,#2f7bff); box-shadow:0 6px 0 #1d5bc4; }
.btn-green:active,.btn-blue:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.3); }
.btn-text{ background:none; border:none; color:#6b7691; font-weight:800; font-size:18px;
  letter-spacing:1px; cursor:pointer; padding:6px; }
.hidden{ display:none !important; }

/* ---------- START SCREEN ---------- */
#start-screen{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 30%,#3a6ec9,#1a2a52); }
#start-screen.hidden{ display:none; }
.start-card{ width:min(90%,440px); text-align:center; color:#fff; }
.game-title{ font-size:52px; font-weight:900; letter-spacing:2px;
  color:#ffd64a; text-shadow:0 4px 0 #b9791b, 0 8px 12px rgba(0,0,0,.5); }
.game-subtitle{ font-size:20px; font-weight:700; opacity:.9; margin-bottom:26px; letter-spacing:3px; }
#level-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 auto 22px; max-width:360px; }
.lvl-cell{ aspect-ratio:1; border-radius:16px; border:none; cursor:pointer; font-size:22px; font-weight:900;
  color:#fff; background:linear-gradient(#54a6ff,#2f7bff); box-shadow:0 5px 0 #1d5bc4;
  display:flex; align-items:center; justify-content:center; position:relative; }
.lvl-cell:active{ transform:translateY(3px); box-shadow:0 2px 0 #1d5bc4; }
.lvl-cell.locked{ background:linear-gradient(#8b94a6,#5c6576); box-shadow:0 5px 0 #444b58; color:#cfd5e0; }
.lvl-cell.done::after{ content:"\2605"; position:absolute; top:-7px; right:-5px; font-size:18px; color:#ffd64a;
  text-shadow:0 1px 2px rgba(0,0,0,.4); }
.hint{ opacity:.85; font-size:15px; font-weight:600; }