/* ==============================
   BLACK HOLE CLICKER - MAIN STYLES
   ============================== */

:root {
  --bg-dark: #03010a;
  --bg-mid: #070415;
  --purple-deep: #1a0533;
  --purple-mid: #3d1066;
  --purple-light: #7b2ff7;
  --purple-glow: #b366ff;
  --blue-deep: #020b1a;
  --blue-accent: #1a6fff;
  --blue-glow: #4db8ff;
  --cyan: #00f5ff;
  --pink: #ff2d78;
  --gold: #ffd700;
  --gold-glow: #ffaa00;
  --green: #00ff88;
  --red: #ff4444;
  --text-primary: #e8d5ff;
  --text-secondary: #9b7fc8;
  --text-dim: #5a4878;
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(123,47,247,0.25);
  --card-hover: rgba(123,47,247,0.15);
  --header-h: 70px;
  --nav-h: 65px;
  --panel-top: calc(var(--header-h) + 45vh);
  font-size: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100%; height:100%;
  overflow:hidden;
  background: var(--bg-dark);
  font-family: 'Rajdhani', sans-serif;
  color: var(--text-primary);
  user-select: none;
  -webkit-user-select: none;
}

/* ==============================
   BACKGROUND
   ============================== */
#bgCanvas {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:0;
}

#nebulaLayer {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:1;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(100,20,200,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(20,60,180,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 60% 20%, rgba(180,20,100,0.08) 0%, transparent 70%);
  animation: nebulaPulse 12s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes nebulaPulse {
  0% { opacity:0.6; }
  100% { opacity:1; }
}

/* ==============================
   FLOATING NUMBERS
   ============================== */
#floatingNumbers, #particles {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:100;
}

.float-num {
  position:absolute;
  font-family: 'Orbitron', sans-serif;
  font-size:1.1rem;
  font-weight:700;
  color: var(--purple-glow);
  text-shadow: 0 0 10px var(--purple-light);
  pointer-events:none;
  animation: floatUp 1.2s ease-out forwards;
  transform: translateX(-50%);
}

.float-num.crit {
  font-size:1.6rem;
  color: var(--gold);
  text-shadow: 0 0 15px var(--gold-glow);
}

.float-num.auto {
  font-size:0.75rem;
  color: var(--blue-glow);
  text-shadow: 0 0 8px var(--blue-accent);
  opacity:0.7;
}

@keyframes floatUp {
  0% { transform:translateX(-50%) translateY(0); opacity:1; }
  100% { transform:translateX(-50%) translateY(-80px); opacity:0; }
}

/* ==============================
   SCREEN EFFECTS
   ============================== */
#screenFlash {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  background: rgba(180,100,255,0.15);
  pointer-events:none;
  z-index:200;
  opacity:0;
  transition: opacity 0.1s;
}

#shockwave {
  position:fixed;
  border-radius:50%;
  border:2px solid rgba(180,100,255,0.6);
  pointer-events:none;
  z-index:200;
  opacity:0;
}

/* ==============================
   GAME CONTAINER
   ============================== */
#gameContainer {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  z-index:10;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ==============================
   TOP HUD
   ============================== */
#topHud {
  height: var(--header-h);
  min-height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background: linear-gradient(180deg, rgba(10,2,25,0.95) 0%, rgba(10,2,25,0.7) 100%);
  border-bottom:1px solid rgba(123,47,247,0.2);
  backdrop-filter:blur(10px);
  z-index:50;
  gap:8px;
}

.hud-label {
  font-family: 'Orbitron', sans-serif;
  font-size:0.6rem;
  letter-spacing:0.15em;
  color: var(--text-dim);
}

.hud-value {
  font-family: 'Orbitron', sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color: var(--purple-glow);
  text-shadow: 0 0 12px var(--purple-light);
  white-space:nowrap;
}

#massDisplay, #mpsDisplay {
  flex:0 0 auto;
  text-align:center;
  min-width:90px;
}

#massDisplay { text-align:left; }
#mpsDisplay { text-align:right; }

#stageDisplay {
  flex:1;
  text-align:center;
}

.stage-name {
  font-family: 'Orbitron', sans-serif;
  font-size:0.62rem;
  font-weight:700;
  color: var(--purple-glow);
  letter-spacing:0.08em;
  text-shadow: 0 0 10px var(--purple-light);
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stage-progress-bar {
  width:100%;
  height:4px;
  background:rgba(255,255,255,0.08);
  border-radius:2px;
  overflow:hidden;
}

#stageProgressFill {
  height:100%;
  background: linear-gradient(90deg, var(--purple-light), var(--purple-glow));
  border-radius:2px;
  width:0%;
  transition:width 0.5s ease;
  box-shadow: 0 0 6px var(--purple-glow);
}

/* ==============================
   BLACK HOLE AREA
   ============================== */
#blackHoleArea {
  flex:0 0 auto;
  height:45vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:visible;
}

#blackHoleWrapper {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* Outer Glow */
#outerGlow {
  position:absolute;
  width:220px; height:220px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(123,47,247,0.15) 0%, rgba(123,47,247,0.05) 50%, transparent 70%);
  animation: outerGlowPulse 3s ease-in-out infinite;
  pointer-events:none;
}

@keyframes outerGlowPulse {
  0%,100% { transform:scale(1); opacity:0.7; }
  50% { transform:scale(1.15); opacity:1; }
}

/* Accretion Disk */
#accretionDisk {
  position:absolute;
  width:200px; height:40px;
  border-radius:50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255,160,50,0.6) 15%,
    rgba(255,100,20,0.8) 25%,
    rgba(255,200,100,0.9) 35%,
    rgba(255,160,50,0.7) 45%,
    transparent 50%,
    rgba(100,50,255,0.5) 65%,
    rgba(150,80,255,0.7) 75%,
    rgba(200,100,255,0.6) 85%,
    transparent 100%
  );
  animation: diskRotate 4s linear infinite;
  pointer-events:none;
  filter:blur(3px);
}

@keyframes diskRotate {
  from { transform:rotateX(80deg) rotate(0deg); }
  to { transform:rotateX(80deg) rotate(360deg); }
}

/* Orbit Rings */
#blackHoleOrbit1, #blackHoleOrbit2, #blackHoleOrbit3 {
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(123,47,247,0.15);
  pointer-events:none;
  animation:orbitExpand 8s ease-in-out infinite;
}

#blackHoleOrbit1 { width:160px; height:160px; animation-delay:0s; }
#blackHoleOrbit2 { width:200px; height:200px; animation-delay:1.5s; border-color:rgba(77,184,255,0.1); }
#blackHoleOrbit3 { width:240px; height:240px; animation-delay:3s; border-color:rgba(255,45,120,0.08); }

@keyframes orbitExpand {
  0%,100% { opacity:0.4; transform:scale(1); }
  50% { opacity:0.1; transform:scale(1.05); }
}

/* Black Hole Core */
#blackHoleCore {
  position:relative;
  width:120px; height:120px;
  border-radius:50%;
  cursor:pointer;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.08s ease;
  -webkit-tap-highlight-color:transparent;
}

#blackHoleCore:active {
  transform:scale(0.94);
}

#blackHoleInner {
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle at 40% 35%,
    rgba(60,0,100,0.3) 0%,
    rgba(10,0,30,0.8) 40%,
    #000 70%
  );
  box-shadow:
    0 0 30px rgba(123,47,247,0.5),
    0 0 60px rgba(123,47,247,0.3),
    0 0 100px rgba(123,47,247,0.15),
    inset 0 0 30px rgba(0,0,0,0.9);
  animation:coreBreath 3s ease-in-out infinite;
}

@keyframes coreBreath {
  0%,100% {
    box-shadow:
      0 0 30px rgba(123,47,247,0.5),
      0 0 60px rgba(123,47,247,0.3),
      0 0 100px rgba(123,47,247,0.15),
      inset 0 0 30px rgba(0,0,0,0.9);
  }
  50% {
    box-shadow:
      0 0 40px rgba(123,47,247,0.7),
      0 0 80px rgba(123,47,247,0.4),
      0 0 140px rgba(123,47,247,0.2),
      inset 0 0 40px rgba(0,0,0,0.95);
  }
}

#lensEffect {
  position:absolute;
  width:90%; height:90%;
  border-radius:50%;
  background:
    radial-gradient(ellipse 45% 30% at 35% 30%,
      rgba(140,80,255,0.2) 0%, transparent 60%
    );
  pointer-events:none;
}

#eventHorizon {
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:transparent;
  box-shadow: 0 0 0 2px rgba(180,100,255,0.3),
              0 0 0 4px rgba(123,47,247,0.15);
  animation:horizonPulse 2s ease-in-out infinite;
}

@keyframes horizonPulse {
  0%,100% { opacity:0.5; }
  50% { opacity:1; }
}

/* Singularity Ring */
#singularityRing {
  position:absolute;
  width:140px; height:140px;
  border-radius:50%;
  border:2px solid rgba(255,215,0,0.0);
  pointer-events:none;
}

/* Click animation */
#blackHoleCore.clicked {
  animation: clickPulse 0.15s ease-out;
}
@keyframes clickPulse {
  0% { transform:scale(1); }
  50% { transform:scale(0.92); }
  100% { transform:scale(1); }
}

/* MPC Display */
#mpcDisplay {
  margin-top:12px;
  font-family:'Orbitron', sans-serif;
  font-size:0.72rem;
  color:var(--text-secondary);
  letter-spacing:0.05em;
}

#multiplierBadge {
  margin-top:6px;
  background: linear-gradient(135deg, var(--gold), var(--gold-glow));
  color:#000;
  padding:3px 10px;
  border-radius:20px;
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:5px;
}

/* ==============================
   BOTTOM NAV
   ============================== */
#bottomNav {
  height: var(--nav-h);
  min-height: var(--nav-h);
  display:flex;
  background: rgba(5,1,15,0.97);
  border-top:1px solid rgba(123,47,247,0.25);
  backdrop-filter:blur(15px);
  order:3;
  position:relative;
  z-index:50;
}

.nav-btn {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:none;
  border:none;
  color:var(--text-dim);
  font-family:'Rajdhani',sans-serif;
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.05em;
  cursor:pointer;
  transition:all 0.2s;
  padding:8px 4px;
  position:relative;
}

.nav-btn i { font-size:1.1rem; transition:all 0.2s; }

.nav-btn.active {
  color: var(--purple-glow);
}
.nav-btn.active i {
  text-shadow:0 0 12px var(--purple-glow);
}
.nav-btn.active::after {
  content:'';
  position:absolute;
  top:0; left:20%; right:20%;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--purple-glow), transparent);
  border-radius:0 0 2px 2px;
}

.nav-btn:active { transform:scale(0.92); }

/* ==============================
   PANEL CONTAINER
   ============================== */
#panelContainer {
  flex:1;
  overflow:hidden;
  order:2;
  position:relative;
}

.panel {
  display:none;
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:8px;
}

.panel.active { display:block; }

.panel-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px 8px;
  border-bottom:1px solid rgba(123,47,247,0.15);
  background:rgba(10,2,25,0.6);
  backdrop-filter:blur(5px);
  position:sticky;
  top:0;
  z-index:10;
}

.panel-header h2 {
  font-family:'Orbitron',sans-serif;
  font-size:0.85rem;
  font-weight:700;
  color:var(--purple-glow);
  letter-spacing:0.1em;
  display:flex;
  align-items:center;
  gap:8px;
}

/* ==============================
   UPGRADES
   ============================== */
.panel-filter {
  display:flex;
  gap:5px;
}

.filter-btn {
  padding:3px 10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(123,47,247,0.2);
  border-radius:12px;
  color:var(--text-secondary);
  font-family:'Rajdhani',sans-serif;
  font-size:0.7rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.filter-btn.active, .filter-btn:hover {
  background:rgba(123,47,247,0.3);
  border-color:var(--purple-light);
  color:var(--purple-glow);
}

.items-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:8px;
}

.upgrade-card {
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  transition:all 0.2s;
  position:relative;
  overflow:hidden;
}

.upgrade-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--purple-light), transparent);
  opacity:0;
  transition:opacity 0.2s;
}

.upgrade-card:hover::before,
.upgrade-card:active::before {
  opacity:1;
}

.upgrade-card.can-afford {
  border-color:rgba(123,47,247,0.5);
  background:rgba(123,47,247,0.08);
  box-shadow:0 0 15px rgba(123,47,247,0.1);
}

.upgrade-card.can-afford::before { opacity:0.7; }

.upgrade-card.owned {
  border-color:rgba(0,255,136,0.3);
  background:rgba(0,255,136,0.04);
  opacity:0.6;
}

.upgrade-card.locked {
  opacity:0.3;
  cursor:not-allowed;
}

.upgrade-icon {
  font-size:1.6rem;
  margin-bottom:5px;
  display:block;
  line-height:1;
}

.upgrade-name {
  font-family:'Orbitron',sans-serif;
  font-size:0.6rem;
  font-weight:700;
  color:var(--text-primary);
  margin-bottom:3px;
  letter-spacing:0.04em;
  line-height:1.3;
}

.upgrade-desc {
  font-size:0.68rem;
  color:var(--text-secondary);
  margin-bottom:5px;
  line-height:1.3;
}

.upgrade-cost {
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;
  font-weight:700;
  color:var(--gold);
  text-shadow:0 0 8px rgba(255,215,0,0.4);
}

.upgrade-card.owned .upgrade-cost {
  color:var(--green);
}

.upgrade-level-badge {
  position:absolute;
  top:6px; right:6px;
  background:rgba(123,47,247,0.4);
  border:1px solid rgba(123,47,247,0.5);
  border-radius:8px;
  padding:1px 5px;
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;
  color:var(--purple-glow);
}

/* ==============================
   GENERATORS
   ============================== */
.total-stat {
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;
  color:var(--blue-glow);
}

.generators-list {
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.generator-card {
  background:var(--card-bg);
  border:1px solid rgba(77,184,255,0.2);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:all 0.2s;
  position:relative;
  overflow:hidden;
}

.generator-card.can-afford {
  border-color:rgba(77,184,255,0.5);
  background:rgba(77,184,255,0.06);
  box-shadow:0 0 15px rgba(77,184,255,0.08);
}

.generator-card.locked {
  opacity:0.3;
  cursor:not-allowed;
}

.gen-icon { font-size:1.8rem; flex-shrink:0; }

.gen-info { flex:1; min-width:0; }

.gen-name {
  font-family:'Orbitron',sans-serif;
  font-size:0.65rem;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.04em;
}

.gen-desc {
  font-size:0.7rem;
  color:var(--text-secondary);
  margin:2px 0;
}

.gen-production {
  font-family:'Orbitron',sans-serif;
  font-size:0.6rem;
  color:var(--blue-glow);
}

.gen-right {
  text-align:right;
  flex-shrink:0;
}

.gen-count {
  font-family:'Orbitron',sans-serif;
  font-size:1.4rem;
  font-weight:900;
  color:var(--blue-glow);
  text-shadow:0 0 10px var(--blue-accent);
  line-height:1;
}

.gen-cost {
  font-family:'Orbitron',sans-serif;
  font-size:0.62rem;
  color:var(--gold);
  margin-top:3px;
  white-space:nowrap;
}

.gen-buy-btns {
  display:flex;
  gap:3px;
  margin-top:5px;
  justify-content:flex-end;
}

.gen-buy-btn {
  background:rgba(77,184,255,0.15);
  border:1px solid rgba(77,184,255,0.3);
  border-radius:6px;
  color:var(--blue-glow);
  font-family:'Rajdhani',sans-serif;
  font-size:0.65rem;
  font-weight:700;
  padding:2px 6px;
  cursor:pointer;
  transition:all 0.15s;
}
.gen-buy-btn:active,
.gen-buy-btn.active-mode {
  background:rgba(77,184,255,0.35);
  border-color:var(--blue-glow);
}

/* ==============================
   WORLDS
   ============================== */
.worlds-list {
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.world-current {
  font-family:'Orbitron',sans-serif;
  font-size:0.62rem;
  color:var(--purple-glow);
}

.world-card {
  background:var(--card-bg);
  border:1px solid rgba(123,47,247,0.2);
  border-radius:14px;
  padding:14px;
  cursor:pointer;
  transition:all 0.3s;
  position:relative;
  overflow:hidden;
}

.world-card.active-world {
  border-color:var(--purple-glow);
  background:rgba(123,47,247,0.1);
  box-shadow:0 0 20px rgba(123,47,247,0.15);
}

.world-card.locked-world {
  opacity:0.4;
  cursor:not-allowed;
}

.world-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--world-gradient, linear-gradient(135deg, transparent, rgba(123,47,247,0.05)));
  opacity:0;
  transition:opacity 0.3s;
}

.world-card:hover::before { opacity:1; }

.world-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.world-icon { font-size:2rem; }

.world-num {
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;
  color:var(--text-dim);
  letter-spacing:0.1em;
}

.world-name {
  font-family:'Orbitron',sans-serif;
  font-size:0.85rem;
  font-weight:700;
  color:var(--text-primary);
}

.world-desc {
  font-size:0.75rem;
  color:var(--text-secondary);
  line-height:1.4;
  margin-bottom:8px;
}

.world-bonuses {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.world-bonus-tag {
  background:rgba(123,47,247,0.15);
  border:1px solid rgba(123,47,247,0.3);
  border-radius:8px;
  padding:2px 8px;
  font-size:0.65rem;
  color:var(--purple-glow);
}

.world-req {
  margin-top:8px;
  font-family:'Orbitron',sans-serif;
  font-size:0.62rem;
  color:var(--gold);
}

.world-active-badge {
  position:absolute;
  top:10px; right:10px;
  background:var(--purple-light);
  color:#fff;
  padding:2px 8px;
  border-radius:10px;
  font-size:0.6rem;
  font-weight:700;
  font-family:'Orbitron',sans-serif;
}

/* ==============================
   PRESTIGE
   ============================== */
#prestigeContent {
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.prestige-section {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:16px;
  text-align:center;
}

.prestige-section.locked-section {
  opacity:0.35;
}

.prestige-icon { font-size:2.5rem; margin-bottom:8px; }

.prestige-title {
  font-family:'Orbitron',sans-serif;
  font-size:0.85rem;
  font-weight:900;
  letter-spacing:0.12em;
  color:var(--purple-glow);
  margin-bottom:8px;
  text-shadow:0 0 15px var(--purple-light);
}

.prestige-desc {
  font-size:0.78rem;
  color:var(--text-secondary);
  line-height:1.5;
  margin-bottom:12px;
}

.prestige-stats {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.pstat {
  background:rgba(123,47,247,0.1);
  border:1px solid rgba(123,47,247,0.2);
  border-radius:10px;
  padding:6px 12px;
  text-align:center;
}

.pstat-label {
  display:block;
  font-size:0.6rem;
  color:var(--text-dim);
  margin-bottom:2px;
  font-family:'Orbitron',sans-serif;
}

.pstat-value {
  font-family:'Orbitron',sans-serif;
  font-size:0.85rem;
  font-weight:700;
  color:var(--purple-glow);
}

.prestige-req {
  font-size:0.72rem;
  color:var(--gold);
  margin-bottom:10px;
}

.prestige-btn {
  padding:10px 24px;
  border:none;
  border-radius:12px;
  font-family:'Orbitron',sans-serif;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  cursor:pointer;
  transition:all 0.25s;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.prestige-btn:disabled {
  opacity:0.4;
  cursor:not-allowed;
}

.singularity-btn {
  background:linear-gradient(135deg, #3d1066, #7b2ff7);
  color:#fff;
  box-shadow:0 4px 20px rgba(123,47,247,0.4);
}

.singularity-btn:not(:disabled):hover {
  box-shadow:0 4px 30px rgba(123,47,247,0.7);
  transform:translateY(-1px);
}

.cosmic-btn {
  background:linear-gradient(135deg, #001a4d, #1a6fff);
  color:#fff;
  box-shadow:0 4px 20px rgba(26,111,255,0.4);
}

.fracture-btn {
  background:linear-gradient(135deg, #1a001a, #cc00ff);
  color:#fff;
  box-shadow:0 4px 20px rgba(204,0,255,0.4);
}

.omni-btn {
  background:linear-gradient(135deg, #1a3300, #33ff00);
  color:#000;
  box-shadow:0 4px 20px rgba(51,255,0,0.3);
}

.infinity-btn {
  background:linear-gradient(135deg, #330000, #ff4400);
  color:#fff;
  box-shadow:0 4px 20px rgba(255,68,0,0.4);
}

/* ==============================
   MORE (Achievements/Stats/Settings)
   ============================== */
.more-tabs {
  display:flex;
  gap:0;
  border-bottom:1px solid rgba(123,47,247,0.15);
}

.more-tab {
  flex:1;
  padding:10px 8px;
  background:none;
  border:none;
  color:var(--text-dim);
  font-family:'Rajdhani',sans-serif;
  font-size:0.75rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  letter-spacing:0.04em;
}

.more-tab.active {
  color:var(--purple-glow);
  border-bottom:2px solid var(--purple-light);
}

.more-content {
  display:none;
  padding:8px;
}

.more-content.active { display:block; }

/* Achievements */
.achievements-summary {
  text-align:center;
  padding:8px;
  font-size:0.78rem;
  color:var(--text-secondary);
  margin-bottom:8px;
}

#achProgressBar {
  width:100%;
  height:5px;
  background:rgba(255,255,255,0.08);
  border-radius:3px;
  margin-top:5px;
  overflow:hidden;
}

#achProgressFill {
  height:100%;
  background:linear-gradient(90deg, var(--gold), var(--gold-glow));
  border-radius:3px;
  width:0%;
  transition:width 0.5s;
}

.achievements-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.ach-card {
  background:var(--card-bg);
  border:1px solid rgba(255,215,0,0.15);
  border-radius:10px;
  padding:8px;
  text-align:center;
  transition:all 0.2s;
}

.ach-card.unlocked {
  border-color:rgba(255,215,0,0.4);
  background:rgba(255,215,0,0.06);
}

.ach-card.locked {
  opacity:0.3;
  filter:grayscale(0.5);
}

.ach-icon { font-size:1.4rem; margin-bottom:3px; }

.ach-name {
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.04em;
  line-height:1.3;
  margin-bottom:2px;
}

.ach-desc {
  font-size:0.62rem;
  color:var(--text-secondary);
  line-height:1.3;
}

.ach-reward {
  font-size:0.6rem;
  color:var(--gold);
  margin-top:3px;
}

/* Stats */
.stats-list {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.stat-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  background:var(--card-bg);
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.05);
}

.stat-label {
  font-size:0.75rem;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:7px;
}

.stat-value {
  font-family:'Orbitron',sans-serif;
  font-size:0.7rem;
  color:var(--purple-glow);
  font-weight:700;
}

/* Settings */
.settings-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.setting-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  background:var(--card-bg);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
}

.setting-item label:first-child {
  font-size:0.8rem;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:8px;
}

.toggle-switch {
  position:relative;
  width:44px;
  height:24px;
  flex-shrink:0;
}

.toggle-switch input { opacity:0; width:0; height:0; }

.toggle-slider {
  position:absolute;
  cursor:pointer;
  inset:0;
  background:rgba(255,255,255,0.1);
  border-radius:24px;
  transition:0.3s;
  border:1px solid rgba(255,255,255,0.1);
}

.toggle-slider:before {
  content:'';
  position:absolute;
  width:18px; height:18px;
  left:2px; bottom:2px;
  background:#666;
  border-radius:50%;
  transition:0.3s;
}

.toggle-switch input:checked + .toggle-slider {
  background:rgba(123,47,247,0.4);
  border-color:var(--purple-light);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform:translateX(20px);
  background:var(--purple-glow);
}

.setting-select {
  background:rgba(123,47,247,0.15);
  border:1px solid rgba(123,47,247,0.3);
  color:var(--text-primary);
  padding:5px 10px;
  border-radius:8px;
  font-family:'Rajdhani',sans-serif;
  font-size:0.8rem;
  outline:none;
}

.setting-divider {
  height:1px;
  background:rgba(255,255,255,0.06);
  margin:4px 0;
}

.setting-btn {
  width:100%;
  padding:11px;
  border:none;
  border-radius:10px;
  font-family:'Orbitron',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all 0.2s;
}

.export-btn { background:rgba(77,184,255,0.15); border:1px solid rgba(77,184,255,0.3); color:var(--blue-glow); }
.import-btn { background:rgba(0,255,136,0.1); border:1px solid rgba(0,255,136,0.3); color:var(--green); }
.import-confirm-btn { background:rgba(0,255,136,0.2); border:1px solid var(--green); color:var(--green); }
.reset-btn { background:rgba(255,68,68,0.1); border:1px solid rgba(255,68,68,0.3); color:var(--red); }

.import-textarea {
  width:100%;
  height:80px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:var(--text-secondary);
  font-size:0.65rem;
  padding:8px;
  resize:none;
  font-family:monospace;
  display:none;
}

.import-textarea.shown { display:block; }

/* ==============================
   MODALS
   ============================== */
.modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(8px);
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.modal.hidden { display:none !important; }

.modal-content {
  background:linear-gradient(145deg, #0d0520, #12072e);
  border:1px solid rgba(123,47,247,0.4);
  border-radius:20px;
  padding:24px;
  text-align:center;
  max-width:340px;
  width:100%;
  box-shadow:0 0 60px rgba(123,47,247,0.3);
  animation:modalIn 0.3s ease-out;
}

@keyframes modalIn {
  from { transform:scale(0.8); opacity:0; }
  to { transform:scale(1); opacity:1; }
}

.modal-icon { font-size:3rem; margin-bottom:12px; }

.modal-content h2 {
  font-family:'Orbitron',sans-serif;
  font-size:1.1rem;
  color:var(--purple-glow);
  margin-bottom:10px;
}

.modal-content p {
  font-size:0.85rem;
  color:var(--text-secondary);
  margin-bottom:8px;
  line-height:1.5;
}

.offline-earned strong {
  color:var(--gold);
  font-size:1rem;
}

.modal-btn {
  padding:12px 28px;
  background:linear-gradient(135deg, #3d1066, #7b2ff7);
  border:none;
  border-radius:12px;
  color:#fff;
  font-family:'Orbitron',sans-serif;
  font-size:0.8rem;
  font-weight:700;
  cursor:pointer;
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.2s;
  box-shadow:0 4px 20px rgba(123,47,247,0.4);
}

.modal-btn:hover { transform:translateY(-1px); box-shadow:0 6px 25px rgba(123,47,247,0.6); }

.modal-buttons {
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:12px;
  flex-wrap:wrap;
}

.confirm-btn {
  background:linear-gradient(135deg, #3d1066, #7b2ff7);
  box-shadow:0 4px 20px rgba(123,47,247,0.4);
}

.cancel-btn {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  padding:12px 20px;
}

/* Prestige modal */
.prestige-modal-content {
  border-color:rgba(255,215,0,0.3);
  box-shadow:0 0 60px rgba(255,215,0,0.2);
}

#prestigeModalStats {
  background:rgba(0,0,0,0.3);
  border-radius:10px;
  padding:10px;
  margin:10px 0;
  font-family:'Orbitron',sans-serif;
  font-size:0.72rem;
  color:var(--gold);
  line-height:1.8;
}

/* Daily modal */
.daily-modal-content { border-color:rgba(255,215,0,0.4); }

.daily-header p {
  color:var(--gold);
  font-family:'Orbitron',sans-serif;
  font-size:0.78rem;
  margin:0;
}

.daily-rewards-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  margin:12px 0;
}

.daily-reward-item {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,215,0,0.2);
  border-radius:8px;
  padding:5px 3px;
  text-align:center;
  font-size:0.9rem;
}

.daily-reward-item.current {
  border-color:var(--gold);
  background:rgba(255,215,0,0.1);
  box-shadow:0 0 10px rgba(255,215,0,0.3);
}

.daily-reward-item.collected {
  opacity:0.5;
  border-color:rgba(0,255,136,0.3);
}

.daily-day-label {
  font-size:0.55rem;
  color:var(--text-dim);
  font-family:'Orbitron',sans-serif;
  margin-top:3px;
}

.daily-claim-btn {
  background:linear-gradient(135deg, #664400, var(--gold));
  color:#000;
  margin-top:0;
}

/* ==============================
   ACHIEVEMENT TOAST
   ============================== */
.achievement-toast {
  position:fixed;
  top:80px;
  left:50%;
  transform:translateX(-50%) translateY(-20px);
  background:linear-gradient(135deg, #1a1000, #332200);
  border:1px solid rgba(255,215,0,0.5);
  border-radius:12px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:600;
  box-shadow:0 4px 20px rgba(255,215,0,0.3);
  min-width:220px;
  max-width:320px;
  opacity:0;
  transition:all 0.3s ease;
}

.achievement-toast.showing {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.toast-icon {
  font-size:1.2rem;
  color:var(--gold);
  text-shadow:0 0 10px var(--gold);
}

.toast-title {
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;
  color:var(--gold-glow);
  letter-spacing:0.08em;
}

.toast-name {
  font-family:'Orbitron',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  color:var(--gold);
}

/* ==============================
   NOTIFICATION
   ============================== */
.notification {
  position:fixed;
  bottom:calc(var(--nav-h) + 12px);
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(10,2,25,0.95);
  border:1px solid rgba(123,47,247,0.4);
  border-radius:10px;
  padding:8px 16px;
  font-size:0.78rem;
  color:var(--text-primary);
  z-index:400;
  opacity:0;
  transition:all 0.3s;
  white-space:nowrap;
  box-shadow:0 4px 20px rgba(123,47,247,0.2);
}

.notification.showing {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ==============================
   PARTICLES
   ============================== */
.particle {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  animation:particleFly var(--dur) ease-out forwards;
}

@keyframes particleFly {
  0% { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--tx), var(--ty)) scale(0); opacity:0; }
}

/* ==============================
   WORLD THEMES
   ============================== */
body.world-1 { --nebula1: rgba(100,20,200,0.12); --nebula2: rgba(20,60,180,0.1); }
body.world-2 { --nebula1: rgba(200,100,20,0.1); --nebula2: rgba(180,60,20,0.08); }
body.world-3 { --nebula1: rgba(20,150,200,0.1); --nebula2: rgba(20,100,180,0.12); }
body.world-4 { --nebula1: rgba(200,20,100,0.1); --nebula2: rgba(180,20,60,0.1); }
body.world-5 { --nebula1: rgba(100,200,20,0.08); --nebula2: rgba(60,180,20,0.06); }
body.world-6 { --nebula1: rgba(200,200,20,0.08); --nebula2: rgba(180,150,20,0.1); }
body.world-7 { --nebula1: rgba(20,200,200,0.1); --nebula2: rgba(20,180,150,0.1); }
body.world-8 { --nebula1: rgba(200,20,200,0.1); --nebula2: rgba(150,20,200,0.12); }
body.world-9 { --nebula1: rgba(255,100,50,0.1); --nebula2: rgba(200,50,20,0.12); }
body.world-10 { --nebula1: rgba(255,215,0,0.08); --nebula2: rgba(200,170,20,0.1); }

/* ==============================
   STAGE VARIATIONS
   ============================== */
.stage-2 #blackHoleCore { width:130px; height:130px; }
.stage-3 #blackHoleCore { width:142px; height:142px; }
.stage-4 #blackHoleCore { width:155px; height:155px; }
.stage-5 #blackHoleCore { width:168px; height:168px; }
.stage-6 #blackHoleCore { width:182px; height:182px; }
.stage-7 #blackHoleCore { width:196px; height:196px; }
.stage-8 #blackHoleCore { width:210px; height:210px; }
.stage-9 #blackHoleCore { width:220px; height:220px; }
.stage-10 #blackHoleCore { width:230px; height:230px; }
.stage-11 #blackHoleCore { width:240px; height:240px; }
.stage-12 #blackHoleCore { width:250px; height:250px; }

/* High stage effects */
.stage-7 #blackHoleInner,
.stage-8 #blackHoleInner,
.stage-9 #blackHoleInner,
.stage-10 #blackHoleInner,
.stage-11 #blackHoleInner,
.stage-12 #blackHoleInner {
  animation:coreBreathLarge 2.5s ease-in-out infinite;
}

@keyframes coreBreathLarge {
  0%,100% {
    box-shadow:
      0 0 50px rgba(123,47,247,0.7),
      0 0 100px rgba(123,47,247,0.4),
      0 0 180px rgba(123,47,247,0.2),
      inset 0 0 50px rgba(0,0,0,0.95);
  }
  50% {
    box-shadow:
      0 0 70px rgba(180,100,255,0.9),
      0 0 140px rgba(123,47,247,0.6),
      0 0 240px rgba(123,47,247,0.3),
      inset 0 0 60px rgba(0,0,0,1);
  }
}

.stage-11 #singularityRing,
.stage-12 #singularityRing {
  border-color:rgba(255,215,0,0.5);
  animation:singRing 1.5s linear infinite;
  box-shadow:0 0 20px rgba(255,215,0,0.3);
}

@keyframes singRing {
  from { transform:rotate(0); }
  to { transform:rotate(360deg); }
}

/* ==============================
   UTILITY
   ============================== */
.hidden { display:none !important; }

/* Scrollbar */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(123,47,247,0.3); border-radius:3px; }

/* Selection */
::selection { background:rgba(123,47,247,0.3); color:#fff; }

/* ==============================
   PURCHASE RIPPLE
   ============================== */
@keyframes purchaseRipple {
  0% { transform:scale(0); opacity:0.6; }
  100% { transform:scale(3); opacity:0; }
}

.purchase-ripple {
  position:absolute;
  border-radius:50%;
  background:rgba(255,215,0,0.3);
  width:40px; height:40px;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  animation:purchaseRipple 0.5s ease-out forwards;
  pointer-events:none;
}

/* ==============================
   REBIRTH FLASH
   ============================== */
@keyframes rebirthFlash {
  0% { opacity:0; }
  20% { opacity:1; }
  80% { opacity:1; }
  100% { opacity:0; }
}

.rebirth-flash {
  position:fixed; inset:0;
  z-index:700;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:rebirthFlash 2s ease-out forwards;
  pointer-events:none;
}

/* ==============================
   LOADING SCREEN
   ============================== */
#loadingScreen {
  position:fixed; inset:0;
  background:#03010a;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  transition:opacity 0.8s ease;
}

#loadingScreen.fade-out {
  opacity:0;
  pointer-events:none;
}

.loading-hole {
  width:80px; height:80px;
  border-radius:50%;
  background:radial-gradient(circle, #000 40%, #3d0066 70%, transparent);
  box-shadow:0 0 40px #7b2ff7, 0 0 80px rgba(123,47,247,0.4);
  animation:loadingPulse 1.2s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%,100% { box-shadow:0 0 40px #7b2ff7, 0 0 80px rgba(123,47,247,0.4); }
  50% { box-shadow:0 0 60px #b366ff, 0 0 120px rgba(123,47,247,0.6); }
}

.loading-title {
  font-family:'Orbitron',sans-serif;
  font-size:1.2rem;
  font-weight:900;
  color:var(--purple-glow);
  text-shadow:0 0 20px var(--purple-light);
  letter-spacing:0.1em;
}

.loading-subtitle {
  font-size:0.8rem;
  color:var(--text-dim);
  letter-spacing:0.1em;
  animation:loadingDots 1.5s steps(3, end) infinite;
}

@keyframes loadingDots {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}

/* ==============================
   BOOST INDICATOR
   ============================== */
#boostIndicator {
  position:absolute;
  top:calc(var(--header-h) + 5px);
  right:10px;
  display:flex;
  flex-direction:column;
  gap:3px;
  pointer-events:none;
  z-index:30;
}

.boost-tag {
  background:rgba(255,215,0,0.15);
  border:1px solid rgba(255,215,0,0.4);
  border-radius:8px;
  padding:3px 8px;
  font-family:'Orbitron',sans-serif;
  font-size:0.55rem;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:4px;
}

/* ==============================
   RESPONSIVE TWEAKS
   ============================== */
@media (max-height: 680px) {
  :root { --header-h: 58px; --nav-h: 54px; }
  #blackHoleArea { height: 40vh; }
  #blackHoleCore { width:100px !important; height:100px !important; }
  .stage-2 #blackHoleCore { width:110px !important; height:110px !important; }
  .stage-3 #blackHoleCore, .stage-4 #blackHoleCore { width:120px !important; height:120px !important; }
}

@media (min-width: 600px) {
  .items-grid { grid-template-columns:1fr 1fr 1fr; }
  .achievements-grid { grid-template-columns:1fr 1fr 1fr; }
  #blackHoleCore { width:140px; height:140px; }
  #gameContainer { max-width:600px; margin:0 auto; }
}

/* glow color variations per stage */
.glow-stage-4 #blackHoleInner { box-shadow: 0 0 40px rgba(255,100,20,0.6), 0 0 80px rgba(255,60,20,0.3), inset 0 0 30px #000; }
.glow-stage-5 #blackHoleInner { box-shadow: 0 0 40px rgba(255,200,20,0.6), 0 0 80px rgba(255,160,0,0.3), inset 0 0 30px #000; }
.glow-stage-6 #blackHoleInner { box-shadow: 0 0 40px rgba(20,200,255,0.5), 0 0 80px rgba(20,150,255,0.3), inset 0 0 30px #000; }
.glow-stage-7 #blackHoleInner { box-shadow: 0 0 50px rgba(0,255,136,0.5), 0 0 100px rgba(0,200,100,0.3), inset 0 0 40px #000; }
.glow-stage-8 #blackHoleInner { box-shadow: 0 0 50px rgba(255,20,150,0.6), 0 0 100px rgba(200,20,100,0.3), inset 0 0 40px #000; }
.glow-stage-9 #blackHoleInner { box-shadow: 0 0 60px rgba(255,255,0,0.5), 0 0 120px rgba(200,200,0,0.3), inset 0 0 50px #000; }
.glow-stage-10 #blackHoleInner { box-shadow: 0 0 70px rgba(255,100,255,0.7), 0 0 140px rgba(200,50,255,0.4), inset 0 0 50px #000; }
.glow-stage-11 #blackHoleInner { box-shadow: 0 0 80px rgba(255,215,0,0.8), 0 0 160px rgba(255,170,0,0.5), 0 0 240px rgba(255,100,0,0.2), inset 0 0 60px #000; }
.glow-stage-12 #blackHoleInner {
  background: radial-gradient(circle, rgba(200,100,255,0.4) 0%, rgba(255,215,0,0.1) 30%, #000 60%);
  box-shadow: 0 0 100px rgba(255,255,255,0.5), 0 0 200px rgba(200,100,255,0.5), 0 0 300px rgba(100,100,255,0.3), inset 0 0 80px #000;
  animation: coreUltimate 2s ease-in-out infinite;
}

@keyframes coreUltimate {
  0%,100% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(180deg) brightness(1.3); }
}

/* Generator card animation on purchase */
.generator-card.just-bought {
  animation: genBought 0.4s ease-out;
}
@keyframes genBought {
  0% { background: rgba(77,184,255,0.25); }
  100% { background: var(--card-bg); }
}

/* Upgrade card animation on purchase */
.upgrade-card.just-bought {
  animation: upgBought 0.4s ease-out;
}
@keyframes upgBought {
  0% { background: rgba(0,255,136,0.2); border-color: var(--green); }
  100% { }
}

/* Buy amount buttons */
.buy-amount-bar {
  display:flex;
  gap:4px;
  padding:6px 8px;
  background:rgba(0,0,0,0.3);
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.buy-amount-btn {
  flex:1;
  padding:4px;
  background:rgba(77,184,255,0.1);
  border:1px solid rgba(77,184,255,0.2);
  border-radius:6px;
  color:var(--blue-glow);
  font-family:'Orbitron',sans-serif;
  font-size:0.6rem;
  cursor:pointer;
  transition:all 0.15s;
}

.buy-amount-btn.active {
  background:rgba(77,184,255,0.3);
  border-color:var(--blue-glow);
}