/* ─────────────────────────────────────────────
   RESET & TOKENS
───────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
:root {
  --purple:  #8B5CF6;
  --purple2: #7C3AED;
  --purple3: #6D28D9;
  --cyan:    #06B6D4;
  --yellow:  #F59E0B;
  --green:   #10B981;
  --red:     #EF4444;
  --orange:  #F97316;
  --bg:      #070B15;
  --card:    #0F1624;
  --card2:   #111827;
  --muted:   #6B7280;
  --border:  rgba(255,255,255,0.07);
  --r-xl:    22px;
  --r-lg:    18px;
  --r-md:    14px;
  --r-sm:    10px;
}
html { background: var(--bg); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #fff;
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ─────────────────────────────────────────────
   PAGE SHELL
───────────────────────────────────────────── */
.page {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.scroll-area {
  padding-bottom: 80px;
  position: relative;
  z-index: 2;
}

/* ─────────────────────────────────────────────
   STARS
───────────────────────────────────────────── */
#stars {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--d,4s) ease-in-out infinite var(--delay,0s);
}
@keyframes twinkle {
  0%,100% { opacity: var(--lo,.05); transform: scale(1); }
  50%      { opacity: var(--hi,.3);  transform: scale(1.3); }
}

/* ─────────────────────────────────────────────
   TOP BAR
───────────────────────────────────────────── */
.top-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 10px;
  position: relative; z-index: 10;
}
.avatar-wrap {
  position: relative; flex-shrink: 0;
}
.avatar-ring {
  width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 0 0 2.5px #8B5CF6, 0 0 18px rgba(124,58,237,.5);
  background: #8B5CF6;
  position: relative;
  overflow: hidden;
}
.avatar-inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.avatar-inner img {
  width: 140%; height: 140%;
  object-fit: cover; display: block;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.avatar-level {
  position: absolute; bottom: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--purple2);
  border: 2px solid var(--bg);
  font-size: 9px; font-weight: 900; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.top-greeting { flex: 1; }
.top-greeting .sub { font-size: 11.5px; color: rgba(255,255,255,.5); font-weight: 400; }
.top-greeting .name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin-top: 1px; }
.coins-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px; padding: 6px 10px 6px 8px;
  color: inherit; text-decoration: none;
}
.coins-pill .coin-ico { font-size: 17px; }
.coins-pill .coin-val { font-size: 13px; font-weight: 700; color: #F59E0B; }
.coins-pill .coin-plus {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: rgba(255,255,255,.7); line-height: 1;
}

/* ─────────────────────────────────────────────
   HERO GLOBE SECTION
───────────────────────────────────────────── */
.hero {
  position: relative;
  height: 280px;
  margin-top: -6px;
  background: var(--bg);
  overflow: hidden;
}
/* deep space bg — matched to globe contour */
.hero-bg {
  position: absolute;
  left: 50%; top: 7px;
  transform: translateX(-50%);
  width: 270px; height: 270px;
  background-image: url('../../img/hero-bg.webp');
  display: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
/* globe image */
.hero-globe {
  position: absolute;
  left: 50%; top: -10px;
  transform: translateX(-50%);
  width: 330px; height: 330px;
  object-fit: contain;
  z-index: 2;
  filter: brightness(1.05) saturate(1.1);
}
/* globe ambient glow */
.hero-glow {
  position: absolute;
  left: 50%; top: 10px;
  transform: translateX(-50%);
  width: 260px; height: 260px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 80px 30px rgba(30,100,255,.25),
              0 0 160px 60px rgba(10,60,200,.12);
  z-index: 1;
}
/* location pin */
.hero-pin {
  position: absolute; z-index: 4;
  top: 59px; left: calc(50% - 26px);
  width: 42px; height: 52px;
  filter: drop-shadow(0 0 10px rgba(139,92,246,.9)) drop-shadow(0 2px 6px rgba(0,0,0,.8));
  animation: pinBob 3s ease-in-out infinite;
}
.hero-pin img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes pinBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* compass */
.hero-compass {
  position: absolute; bottom: 38px; left: 18px; z-index: 4;
  width: 52px; height: 52px; opacity: .45;
  animation: compassSpin 20s linear infinite;
}
@keyframes compassSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.compass-svg { width: 100%; height: 100%; }
/* clouds — behind globe */
.cloud { position: absolute; z-index: 1; }
.cloud img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cloud-1 { width: 160px; height: 90px; top: 130px; left: -20px; }
.cloud-2 { width: 140px; height: 85px; top: 110px; right: -10px; }

/* streak card */
.streak-card {
  position: absolute; right: 14px; bottom: 32px; z-index: 5;
  background: rgba(15,22,36,.92);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  padding: 10px 14px;
  backdrop-filter: blur(16px);
  min-width: 108px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.streak-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px;
}
.streak-top .flame { font-size: 20px; line-height: 1; }
.streak-top .streak-num {
  font-size: 28px; font-weight: 900; line-height: 1;
  color: #fff;
}
.streak-label {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.55);
  margin-bottom: 7px;
}
.streak-dots { display: flex; gap: 4px; }
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.dot.on { background: var(--green); box-shadow: 0 0 5px rgba(16,185,129,.6); }

/* ─────────────────────────────────────────────
   LEVEL / XP BAR
───────────────────────────────────────────── */
.xp-bar-wrap {
  margin: -22px 14px 0;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform .15s;
  position: relative; z-index: 10;
}
.xp-bar-wrap:active { transform: scale(.99); }
.xp-hex {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.xp-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xp-hex-num {
  font-size: 18px; font-weight: 900; position: relative; z-index: 1;
  color: #fff;
}
.xp-info { flex: 1; }
.xp-title { font-size: 16px; font-weight: 800; margin-bottom: 5px; }
.xp-track {
  height: 7px; background: rgba(255,255,255,.1);
  border-radius: 10px; overflow: hidden; margin-bottom: 4px;
}
.xp-fill {
  height: 100%; width: 2.7%;
  background: linear-gradient(to right, #7C3AED, #A78BFA);
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(139,92,246,.6);
}
.xp-sub { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.xp-total {
  display: flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 800; color: var(--cyan);
  flex-shrink: 0;
}
.xp-total .arrow { color: rgba(255,255,255,.4); font-size: 16px; }

/* ─────────────────────────────────────────────
   SOLO / DUEL CARDS ROW
───────────────────────────────────────────── */
.mode-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin: 13px 14px 0;
}
.mode-card {
  border-radius: var(--r-xl);
  overflow: hidden; position: relative;
  min-height: 185px;
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer; transition: transform .15s;
  display: flex; flex-direction: column; justify-content: flex-start;
  color: #fff; text-decoration: none;
}
.mode-card:active { transform: scale(.98); }
/* shimmer top */
.mode-card::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.2), transparent);
  z-index: 5;
}
.mode-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.mode-card-overlay {
  position: absolute; inset: 0; z-index: 1;
}
.mode-card-body {
  position: relative; z-index: 3; padding: 12px 12px 10px;
  display: flex; flex-direction: column; flex: 1;
}
.mode-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 3px 8px; border-radius: 20px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; margin-bottom: 6px;
}
.mode-title { font-size: 26px; font-weight: 900; letter-spacing: -.5px; line-height: 1; margin-bottom: 5px; }
.mode-desc { font-size: 11px; color: rgba(255,255,255,.72); line-height: 1.4; margin-bottom: 0; margin-top: -5px; }
.mode-arrow-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
  margin-top: auto;
}

/* Solo */
.solo-card .mode-card-bg {
  background: linear-gradient(160deg, #0a2a5e 0%, #0d3d7a 40%, #0a4f2e 100%);
}
.solo-card .mode-card-overlay {
  background: linear-gradient(to top, rgba(5,20,50,.9) 0%, rgba(5,20,50,.3) 50%, transparent 100%);
}
.solo-card .mode-badge {
  background: rgba(6,182,212,.2); border: 1px solid rgba(6,182,212,.4);
  color: #67e8f9;
}
.solo-card .mode-arrow-btn { background: var(--cyan); box-shadow: 0 3px 14px rgba(6,182,212,.5); }
/* solo map illustration (CSS) */
.solo-map {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
  overflow: hidden;
}
.solo-map-img {
  position: absolute; right: 0; top: 0;
  width: 150px; height: 100%;
  object-fit: cover; object-position: 65% center;
  opacity: .85;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.95) 30%, rgba(0,0,0,.4) 68%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,.95) 30%, rgba(0,0,0,.4) 68%, transparent 100%);
}

/* Duel */
.duel-card .mode-card-bg {
  background: linear-gradient(160deg, #3d1200 0%, #7a2800 40%, #5c1a00 100%);
}
.duel-card .mode-card-overlay {
  background: linear-gradient(to top, rgba(40,10,0,.92) 0%, rgba(40,10,0,.4) 50%, transparent 100%);
}
.duel-card .mode-badge {
  background: rgba(245,158,11,.2); border: 1px solid rgba(245,158,11,.4);
  color: #fcd34d;
}
.duel-card .mode-arrow-btn { background: var(--orange); box-shadow: 0 3px 14px rgba(249,115,22,.5); }
.duel-terrain {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
}
.duel-terrain-img {
  position: absolute; right: 0; top: 0;
  width: 150px; height: 100%;
  object-fit: cover; object-position: 65% center;
  opacity: .8;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.95) 30%, rgba(0,0,0,.4) 68%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,.95) 30%, rgba(0,0,0,.4) 68%, transparent 100%);
}
.duel-pin { position: absolute; z-index: 4; font-size: 17px; filter: drop-shadow(0 0 5px rgba(239,68,68,.8)); }
.duel-pin-1 { right: 28px; top: 14px; }
.duel-pin-2 { right: 52px; top: 38px; }
.vs-row {
  display: flex; align-items: center; gap: 2px; margin-bottom: 10px;
}
.vs-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  flex-shrink: 0; position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 2px #8B5CF6;
  background: #8B5CF6;
}
.vs-avatar-user { margin-right: -8px; }
.vs-avatar-opp  { box-shadow: 0 0 0 2px #dc2626; margin-left: -8px; background: #dc2626; }
.vs-avatar img {
  width: 140%; height: 140%;
  object-fit: cover; display: block;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.vs-label {
  font-size: 14px; font-weight: 900; color: var(--orange);
  text-shadow: 0 0 10px rgba(249,115,22,.7);
  flex: 1; text-align: center;
}

/* ─────────────────────────────────────────────
   DAILY REWARD BANNER
───────────────────────────────────────────── */
.reward-banner {
  margin: 13px 14px 0;
  border-radius: var(--r-lg);
  background: linear-gradient(130deg, #052e16 0%, #064e3b 50%, #065f46 100%);
  border: 1px solid rgba(16,185,129,.3);
  box-shadow: 0 4px 20px rgba(16,185,129,.15);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  position: relative; overflow: hidden;
}
.reward-banner::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(16,185,129,.4), transparent);
}
.reward-chest { width: 58px; height: 58px; flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(245,158,11,.6)); }
.reward-chest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.reward-text { flex: 1; }
.reward-title { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.reward-sub { font-size: 11px; color: rgba(255,255,255,.6); }
.reward-btn {
  background: var(--green);
  border: none; border-radius: 24px;
  padding: 9px 16px;
  font-size: 12.5px; font-weight: 800; color: #fff;
  font-family: inherit; cursor: pointer;
  position: relative; white-space: nowrap;
  box-shadow: 0 3px 14px rgba(16,185,129,.45);
  flex-shrink: 0;
}
.reward-notif {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px rgba(239,68,68,.8);
  border: 1.5px solid #052e16;
}

/* ─────────────────────────────────────────────
   STATS ROW
───────────────────────────────────────────── */
.stats-row {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 8px; margin: 13px 14px 0;
}
.stat-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-md);
  padding: 12px 6px 10px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.stat-ico { font-size: 22px; line-height: 1; }
.stat-val { font-size: 15px; font-weight: 900; letter-spacing: -.3px; }
.stat-lbl { font-size: 9px; color: var(--muted); font-weight: 500; line-height: 1.3; text-align: center; }

/* ─────────────────────────────────────────────
   VIŠE MODOVA
───────────────────────────────────────────── */
.modes-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 9px; margin: 13px 14px 0;
}
.mini-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-md);
  padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  cursor: pointer; transition: transform .15s;
  position: relative; overflow: hidden;
  color: #fff; text-decoration: none;
}
.mini-card:active { transform: scale(.97); }
.mini-card::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.15), transparent);
}
.mini-ico-wrap {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.mini-title { font-size: 12px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2; }
.mini-desc { font-size: 9.5px; color: var(--muted); line-height: 1.4; }

/* mini card themes */
.mc-blue  .mini-ico-wrap { background: rgba(6,182,212,.15);  border: 1px solid rgba(6,182,212,.25); }
.mc-purple .mini-ico-wrap { background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.25); }
.mc-orange .mini-ico-wrap { background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.25); }
.mc-yellow .mini-ico-wrap { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.25); }
.mc-green  .mini-ico-wrap { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.25); }
.mc-pink   .mini-ico-wrap { background: rgba(236,72,153,.15); border: 1px solid rgba(236,72,153,.25); }

/* ─────────────────────────────────────────────
   BOTTOM NAVIGATION
───────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  background: rgba(7,11,21,.97);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: 10px 4px 24px; z-index: 200;
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none;
  color: var(--muted); font-family: inherit;
  font-size: 10px; font-weight: 500;
  cursor: pointer; padding: 0 6px; min-width: 52px;
  transition: color .15s; text-decoration: none;
}
.nav-btn .nav-ico {
  width: 22px; height: 22px; display: block; margin-bottom: 1px;
}
.nav-btn .nav-ico img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  opacity: .45; transition: opacity .15s;
}
.nav-btn.active { color: var(--purple); }
.nav-btn.active .nav-ico img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(49%) sepia(97%) saturate(1283%) hue-rotate(235deg) brightness(101%) contrast(94%);
}
.nav-center {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: -26px;
}
.nav-disc {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 60%, #a78bfa 100%);
  box-shadow: 0 4px 28px rgba(109,40,217,.7), 0 0 0 3px var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 27px;
}
.nav-center-lbl { font-size: 10px; font-weight: 700; color: var(--muted); }