@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap');

:root {
  --bg:     #07071a;
  --bg2:    #0d0d2b;
  --red:    #ff2e63;
  --orange: #ff8a3d;
  --yellow: #ffd93d;
  --green:  #00ffb2;
  --blue:   #4fc3f7;
  --purple: #b388ff;
  --text:   #ffffff;
  --muted:  #6b7a99;
  --card:   rgba(255,255,255,.04);
  --border: rgba(255,255,255,.08);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html, body { height:100%; overflow:hidden }
body {
  font-family: 'Cairo', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  user-select: none;
  touch-action: manipulation;
}

#app { position:relative; width:100%; height:100vh; height:100dvh; overflow:hidden }

/* ─── Screens ─── */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px; gap: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  transform: translateY(16px);
}
.screen.active { opacity:1; pointer-events:auto; transform:translateY(0) }

/* ─── HOME ─── */
.home-bg-rings {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.bg-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,46,99,.12);
  left: 50%; top: 40%; transform: translate(-50%,-50%);
  animation: bgRingPulse 4s ease-in-out infinite;
}
.br1 { width:300px; height:300px; animation-delay:0s }
.br2 { width:500px; height:500px; animation-delay:.6s; border-color:rgba(255,138,61,.08) }
.br3 { width:700px; height:700px; animation-delay:1.2s; border-color:rgba(255,217,61,.05) }

.logo-wrap { text-align:center; position:relative; z-index:1 }

.target-preview {
  position: relative; width:130px; height:130px;
  margin: 0 auto 16px;
  animation: floaty 3s ease-in-out infinite;
}
.tp-ring {
  position:absolute; border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.tp-r3 { width:130px; height:130px; background:var(--yellow); opacity:.85 }
.tp-r2 { width:88px;  height:88px;  background:var(--orange) }
.tp-r1 { width:46px;  height:46px;  background:var(--red);
  box-shadow: 0 0 24px var(--red), 0 0 60px rgba(255,46,99,.4) }
.tp-center {
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:#fff; left:50%; top:50%; transform:translate(-50%,-50%);
  box-shadow: 0 0 16px #fff;
}
.tp-crosshair {
  position:absolute; background:rgba(255,255,255,.25);
  left:50%; top:50%;
}
.ch-h { width:130px; height:1px; transform:translate(-50%,-50%) }
.ch-v { width:1px; height:130px; transform:translate(-50%,-50%) }

h1 {
  font-size: 2.4rem; font-weight:900; letter-spacing:-1px;
  background: linear-gradient(135deg, var(--red), var(--orange), var(--yellow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.subtitle { color:var(--muted); font-size:.9rem; margin-top:4px }

.home-stats-row {
  display: flex; gap:10px; z-index:1;
}
.stat-pill {
  display:flex; flex-direction:column; align-items:center;
  padding:10px 18px; border-radius:14px;
  background:var(--card); border:1px solid var(--border);
  min-width:80px;
}
.stat-pill span { font-size:.7rem; color:var(--muted) }
.stat-pill strong { font-size:1.3rem; font-weight:900; color:var(--yellow) }

.home-btns { display:flex; flex-direction:column; gap:10px; width:100%; max-width:340px; z-index:1 }
.btn-row { display:flex; gap:10px }
.btn-row .btn-ghost { flex:1 }

/* ─── Buttons ─── */
.btn-primary, .btn-ghost, .btn-reward {
  width:100%; padding:15px;
  border:none; border-radius:14px;
  font-size:1rem; font-weight:800; font-family:inherit;
  cursor:pointer; transition:transform .12s, box-shadow .2s, opacity .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--orange));
  color:#fff; box-shadow: 0 8px 28px rgba(255,46,99,.45);
}
.btn-primary:active { transform:scale(.96) }
.btn-ghost {
  background: var(--card); color:var(--muted);
  border:1px solid var(--border);
}
.btn-ghost:active { transform:scale(.96); opacity:.7 }
.btn-reward {
  background: linear-gradient(135deg,#00c9a7,var(--green));
  color:#003d30; font-size:.9rem;
}
.btn-reward:disabled { opacity:.35; cursor:not-allowed }
.btn-back {
  position:absolute; top:16px; right:16px;
  background:var(--card); border:1px solid var(--border);
  color:var(--text); border-radius:10px;
  padding:8px 14px; font-size:1rem; cursor:pointer;
  font-family:inherit;
}
.btn-icon { font-size:1.1rem }

/* ─── LEVELS SCREEN ─── */
.levels-header {
  position:relative; width:100%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
}
.levels-header h2 { font-size:1.4rem; font-weight:900 }

.levels-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; width:100%; max-width:380px;
  max-height:70vh; overflow-y:auto;
  padding: 4px;
}
.level-card {
  aspect-ratio:1; border-radius:16px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  border:2px solid var(--border);
  background:linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015));
  box-shadow:inset 0 1px rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.24);
  transform:perspective(600px) rotateX(3deg);
  cursor:pointer; transition:transform .2s, box-shadow .2s;
  position:relative; overflow:hidden;
}
.level-card.unlocked { border-color:rgba(255,255,255,.2) }
.level-card.unlocked:active { transform:perspective(600px) rotateX(0) translateY(2px) scale(.96) }
.level-card.current {
  border-color:var(--yellow);
  box-shadow:0 0 20px rgba(255,217,61,.3), inset 0 1px rgba(255,255,255,.2), 0 10px 24px rgba(255,217,61,.12);
}
.level-card.locked { opacity:.4; cursor:not-allowed }
.level-card .lc-num { font-size:1.5rem; font-weight:900 }
.level-card .lc-name { font-size:.65rem; color:var(--muted); text-align:center }
.level-card .lc-stars { font-size:.9rem; letter-spacing:1px }
.level-card .lc-lock { font-size:1.4rem }
.level-card .lc-badge {
  position:absolute; top:4px; left:4px;
  font-size:.6rem; background:var(--yellow); color:#000;
  padding:2px 5px; border-radius:6px; font-weight:900;
}

/* ─── HUD ─── */
#screen-game { padding:0; justify-content:flex-start }
.hud {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background:rgba(7,7,26,.8); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  gap:8px;
}
.hud-item { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:60px }
.hud-item span { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.8px }
.hud-item strong { font-size:1.25rem; font-weight:900 }
#combo { color:var(--yellow) }

.hud-level { flex:1; align-items:center }
#levelLabel { font-size:.75rem; color:var(--blue); font-weight:700; letter-spacing:.5px }
.level-progress-bar {
  width:100%; height:4px; background:rgba(255,255,255,.1);
  border-radius:4px; overflow:hidden; margin-top:3px;
}
.level-progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue), var(--purple));
  border-radius:4px;
  transition:width .4s ease;
}

/* ─── SHOTS BAR ─── */
.shots-bar {
  width:100%; display:flex; gap:4px; padding:8px 12px;
  background:rgba(0,0,0,.2);
  flex-wrap:wrap; justify-content:center;
}
.shot-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--red); box-shadow:0 0 6px var(--red);
  transition:all .2s;
}
.shot-dot.used {
  background:rgba(255,255,255,.1);
  box-shadow:none;
}

/* ─── ARENA ─── */
#arena {
  position:relative; flex:1; width:100%; overflow:hidden;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,46,99,.06) 0%, transparent 65%);
}
.arena-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:40px 40px;
}

/* ─── TARGET ─── */
#target {
  position:absolute;
  width:160px; height:160px;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
  cursor:crosshair;
  filter:drop-shadow(0 18px 12px rgba(0,0,0,.38));
  transform-style:preserve-3d;
}
#target .ring {
  position:absolute; border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
#target .ring-3 {
  width:160px; height:160px;
  background: radial-gradient(circle, #ffe066 0%, var(--yellow) 100%);
  box-shadow:inset 0 -8px 12px rgba(133,83,0,.26), inset 0 5px 9px rgba(255,255,255,.42), 0 0 0 2px rgba(255,217,61,.3);
}
#target .ring-2 {
  width:105px; height:105px;
  background: radial-gradient(circle, #ffaa5e 0%, var(--orange) 100%);
  box-shadow:inset 0 -7px 10px rgba(125,44,0,.3), inset 0 4px 8px rgba(255,255,255,.38);
}
#target .ring-1 {
  width:55px; height:55px;
  background: radial-gradient(circle, #ff6b8a 0%, var(--red) 100%);
  box-shadow:inset 0 -6px 9px rgba(112,0,24,.3), inset 0 4px 8px rgba(255,255,255,.38), 0 0 20px var(--red), 0 0 50px rgba(255,46,99,.3);
}
.ring-center-dot {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:#fff; left:50%; top:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 12px #fff; z-index:2;
}

.native-ad {
  display:flex; align-items:center; gap:12px;
  min-height:64px; margin:12px 0; padding:10px 14px;
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.72);
  text-align:right;
}
.native-ad-icon { font-size:24px }
.native-ad-copy { display:grid; gap:3px; flex:1 }
.native-ad-copy strong { font-size:.85rem; color:#fff }
.native-ad-copy span, .native-ad-label { font-size:.7rem; color:rgba(255,255,255,.5) }

.target-crosshair {
  position:absolute; background:rgba(255,255,255,.2);
  left:50%; top:50%; pointer-events:none;
}
.tc-h { width:160px; height:1px; transform:translate(-50%,-50%) }
.tc-v { width:1px; height:160px; transform:translate(-50%,-50%) }

#hitFx { position:absolute; inset:0; pointer-events:none; z-index:10 }

/* ─── COMBO BANNER ─── */
.combo-banner {
  position:absolute; top:28%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  font-size:2.8rem; font-weight:900;
  color:var(--yellow); text-shadow:0 0 30px var(--yellow);
  pointer-events:none; opacity:0; z-index:20;
}
.combo-banner.show { animation:comboPop .9s ease forwards }

/* ─── LEVEL UP BANNER ─── */
.level-up-banner {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none; opacity:0; z-index:30;
}
.level-up-banner.show { animation:levelUpAnim 1.4s ease forwards }

/* ─── COUNTDOWN OVERLAY ─── */
.countdown-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:rgba(7,7,26,.92);
  backdrop-filter:blur(12px);
}
.countdown-overlay.hidden { display:none }

.cd-ring {
  position:absolute; border-radius:50%;
  border:2px solid var(--red);
  animation:cdRingPulse 1s ease-in-out infinite;
}
.cd-ring-outer { width:220px; height:220px; opacity:.3 }
.cd-ring-inner { width:160px; height:160px; opacity:.5; animation-delay:.15s }

.cd-number {
  font-size:9rem; font-weight:900; line-height:1;
  background:linear-gradient(135deg, var(--red), var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,46,99,.6));
  animation:cdNumPop .5s ease;
}
.cd-label {
  font-size:1.1rem; color:var(--muted); margin-top:12px;
  letter-spacing:2px; text-transform:uppercase;
}

/* ─── RESULT ─── */
.result-card {
  width:100%; max-width:380px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:24px;
  padding:20px; display:flex; flex-direction:column;
  align-items:center; gap:12px;
  backdrop-filter:blur(20px);
  max-height:95vh; overflow-y:auto;
}
.result-header { text-align:center }
.result-rank-badge { font-size:3rem; margin-bottom:4px }
.result-card h2 { font-size:1.3rem; font-weight:700; color:var(--muted) }
.result-level-reached { font-size:.85rem; color:var(--blue); margin-top:2px }
.result-level-reached strong { color:var(--blue) }

.accuracy-circle { position:relative; width:130px; height:130px }
.accuracy-circle svg { width:100%; height:100%; transform:rotate(-90deg) }
.accuracy-circle .track { fill:none; stroke:rgba(255,255,255,.07); stroke-width:8 }
.accuracy-circle .progress {
  fill:none; stroke:var(--green); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
}
.acc-text {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.acc-text strong { font-size:1.8rem; font-weight:900 }
.acc-text span { font-size:.75rem; color:var(--muted) }

.stats-grid {
  width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
}
.stat-box {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:10px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.stat-box span { font-size:.7rem; color:var(--muted) }
.stat-box strong { font-size:1.2rem; font-weight:900 }

.new-best-banner {
  width:100%; padding:10px; border-radius:12px; text-align:center;
  background:linear-gradient(135deg,#ffd93d,#ff8a3d);
  color:#000; font-weight:900; font-size:.95rem;
}
.new-best-banner.hidden { display:none }

.result-btns { display:flex; flex-direction:column; gap:8px; width:100% }

/* ─── HOW TO ─── */
.how-card {
  width:100%; max-width:380px; position:relative;
  background:var(--card); border:1px solid var(--border);
  border-radius:24px; padding:24px 20px;
  display:flex; flex-direction:column; gap:14px;
}
.how-card h2 { text-align:center; font-size:1.3rem; font-weight:900 }
.how-items { display:flex; flex-direction:column; gap:10px }
.how-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.03);
}
.how-item div:last-child { display:flex; flex-direction:column; gap:1px }
.how-item strong { font-size:.9rem }
.how-item span { font-size:.78rem; color:var(--muted) }
.how-dot {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.how-dot.red    { background:var(--red);    box-shadow:0 0 10px var(--red) }
.how-dot.orange { background:var(--orange) }
.how-dot.yellow { background:var(--yellow) }
.how-dot.gray   { background:#333 }
.how-dot.fire, .how-dot.star { background:transparent; font-size:1.1rem }
.how-item.special { background:rgba(255,217,61,.05); border:1px solid rgba(255,217,61,.1) }