/* ==================== GAME CSS ==================== */

/* COIN CLICKER */
.game-layout {
  display:grid;
  grid-template-columns:280px 1fr 320px;
  gap:1rem;
  padding:1rem;
  min-height:calc(100vh - 64px);
  align-items:start;
}

@media(max-width:1200px) {
  .game-layout { grid-template-columns:1fr; }
}

/* LEFT PANEL - STATS */
.stats-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem;
  position:sticky; top:80px;
}
.stats-panel h3 {
  font-family:'Orbitron',sans-serif; font-size:0.85rem;
  color:var(--text2); text-transform:uppercase; letter-spacing:0.1em;
  margin-bottom:1rem;
}
.stat-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.5rem 0; border-bottom:1px solid var(--border);
}
.stat-row:last-child { border-bottom:none; }
.stat-label { font-size:0.8rem; color:var(--text2); }
.stat-value {
  font-family:'Orbitron',sans-serif; font-size:0.85rem;
  color:var(--gold); font-weight:700;
}

/* CENTER - CLICKER */
.clicker-panel {
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:2rem 1rem;
  gap:1.5rem;
}

.money-display {
  text-align:center;
}
.money-amount {
  font-family:'Orbitron',sans-serif; font-size:3.5rem; font-weight:900;
  background:linear-gradient(135deg, var(--gold), var(--gold2), var(--green));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:block; line-height:1;
  text-shadow:none;
}
.money-label {
  font-size:0.9rem; color:var(--text2); font-family:'Rajdhani',sans-serif;
  font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
}
.per-second {
  font-size:1rem; color:var(--green); font-family:'Rajdhani',sans-serif;
  font-weight:700; margin-top:0.25rem;
}

/* THE COIN */
.coin-wrapper {
  position:relative; display:flex; align-items:center; justify-content:center;
}

.coin-btn {
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFE066, #FFD700 40%, #FFA500 70%, #CC8800);
  border:none; cursor:pointer; position:relative;
  box-shadow:
    0 0 0 6px rgba(255,215,0,0.2),
    0 0 0 12px rgba(255,215,0,0.1),
    0 20px 60px rgba(255,165,0,0.4),
    inset 0 -4px 8px rgba(0,0,0,0.3),
    inset 0 4px 8px rgba(255,255,255,0.3);
  animation: coinSpin 4s linear infinite;
  transition: transform 0.1s, box-shadow 0.1s;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.coin-btn:hover {
  box-shadow:
    0 0 0 8px rgba(255,215,0,0.3),
    0 0 0 16px rgba(255,215,0,0.15),
    0 30px 80px rgba(255,165,0,0.6),
    inset 0 -4px 8px rgba(0,0,0,0.3),
    inset 0 4px 8px rgba(255,255,255,0.3);
}
.coin-btn:active {
  transform: scale(0.93);
  box-shadow:
    0 0 0 4px rgba(255,215,0,0.2),
    0 10px 30px rgba(255,165,0,0.3),
    inset 0 -4px 8px rgba(0,0,0,0.3),
    inset 0 4px 8px rgba(255,255,255,0.3);
  animation-play-state:paused;
}

.coin-face {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; pointer-events:none;
}
.coin-symbol {
  font-size:4rem; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.coin-text {
  font-family:'Orbitron',sans-serif; font-size:0.65rem; font-weight:900;
  color:rgba(0,0,0,0.6); letter-spacing:0.15em; text-transform:uppercase;
}

@keyframes coinSpin {
  0% { transform:rotateY(0deg); }
  100% { transform:rotateY(360deg); }
}

.coin-ring {
  position:absolute; border-radius:50%;
  border:2px solid rgba(255,215,0,0.2);
  animation:ringPulse 2s ease infinite;
  pointer-events:none;
}
.coin-ring:nth-child(1) { width:220px; height:220px; animation-delay:0s; }
.coin-ring:nth-child(2) { width:260px; height:260px; animation-delay:0.5s; }
.coin-ring:nth-child(3) { width:300px; height:300px; animation-delay:1s; }
@keyframes ringPulse {
  0%,100% { opacity:0; transform:scale(1); }
  50% { opacity:1; transform:scale(1.05); }
}

/* CLICK FLOATERS */
.click-floater {
  position:fixed; pointer-events:none; z-index:500;
  font-family:'Orbitron',sans-serif; font-weight:900;
  color:var(--gold); text-shadow:0 0 10px rgba(255,215,0,0.8);
  animation:floatUp2 1.2s ease forwards;
  font-size:1.2rem;
}
@keyframes floatUp2 {
  0% { opacity:1; transform:translateY(0) scale(1); }
  50% { opacity:1; transform:translateY(-40px) scale(1.2); }
  100% { opacity:0; transform:translateY(-80px) scale(0.8); }
}

/* MULTIPLIER DISPLAY */
.multiplier-display {
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
}
.mult-badge {
  background:var(--card2); border:1px solid var(--border2);
  border-radius:20px; padding:0.3rem 0.9rem;
  font-size:0.8rem; font-family:'Rajdhani',sans-serif; font-weight:600;
}

/* CLICK POWER BAR */
.power-bar-wrap {
  width:200px;
}
.power-label {
  font-size:0.75rem; color:var(--text2); text-align:center; margin-bottom:0.3rem;
}

/* RIGHT PANEL - SHOP */
.shop-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  position:sticky; top:80px; max-height:calc(100vh - 100px);
  display:flex; flex-direction:column;
}
.shop-header {
  padding:1rem; border-bottom:1px solid var(--border);
  background:var(--bg3);
}
.shop-header h3 {
  font-family:'Orbitron',sans-serif; font-size:0.9rem;
  color:var(--gold);
}
.shop-tabs {
  display:flex; background:var(--bg3); border-bottom:1px solid var(--border);
}
.shop-tab {
  flex:1; padding:0.5rem; text-align:center;
  background:none; border:none; color:var(--text2);
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:0.8rem;
  cursor:pointer; border-bottom:2px solid transparent;
  transition:all 0.2s;
}
.shop-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.shop-list {
  overflow-y:auto; flex:1; padding:0.5rem;
}

/* SHOP ITEM */
.shop-item {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.6rem; border-radius:var(--radius2);
  border:1px solid var(--border); background:var(--bg3);
  margin-bottom:0.5rem; cursor:pointer; transition:all 0.2s;
  position:relative;
}
.shop-item:hover { border-color:var(--gold); background:var(--card2); }
.shop-item.affordable { border-color:rgba(255,215,0,0.3); }
.shop-item.maxed { opacity:0.5; cursor:not-allowed; }
.shop-item.cant-afford { opacity:0.6; }
.cant-afford:hover { border-color:var(--border) !important; }

.shop-icon {
  font-size:1.8rem; width:40px; text-align:center; flex-shrink:0;
}
.shop-info { flex:1; min-width:0; }
.shop-name {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:0.9rem;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shop-desc { font-size:0.7rem; color:var(--text2); }
.shop-owned {
  position:absolute; top:4px; right:4px;
  font-size:0.65rem; color:var(--gold);
  font-family:'Orbitron',sans-serif; font-weight:700;
}
.shop-cost {
  text-align:right; flex-shrink:0;
}
.shop-cost-num {
  font-family:'Orbitron',sans-serif; font-size:0.75rem;
  color:var(--gold); font-weight:700;
}
.shop-cost-label { font-size:0.6rem; color:var(--text3); }

/* SECTION DIVIDER IN SHOP */
.shop-section-title {
  font-size:0.7rem; color:var(--text3); text-transform:uppercase;
  letter-spacing:0.1em; padding:0.5rem 0.25rem; font-weight:600;
  font-family:'Rajdhani',sans-serif;
}

/* QUESTS */
.quest-item {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius2); padding:1rem;
  margin-bottom:0.75rem; transition:border-color 0.2s;
}
.quest-item:hover { border-color:var(--border2); }
.quest-header { display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem; margin-bottom:0.5rem; }
.quest-title { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1rem; color:var(--text); }
.quest-reward { font-size:0.8rem; color:var(--green); font-weight:600; }
.quest-desc { font-size:0.8rem; color:var(--text2); margin-bottom:0.75rem; }
.quest-meta { display:flex; justify-content:space-between; align-items:center; font-size:0.75rem; color:var(--text3); }

/* ACHIEVEMENTS */
.achievement-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(80px,1fr));
  gap:0.75rem;
}
.achievement {
  text-align:center; padding:0.75rem 0.5rem;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:var(--radius2); transition:all 0.2s;
}
.achievement.unlocked { border-color:var(--gold); background:rgba(255,215,0,0.05); }
.achievement.locked { filter:grayscale(1) opacity(0.4); }
.achievement-icon { font-size:2rem; display:block; margin-bottom:0.25rem; }
.achievement-name { font-size:0.65rem; color:var(--text2); font-weight:600; }

/* PRESTIGE */
.prestige-panel {
  background:linear-gradient(135deg, rgba(155,89,182,0.1), rgba(100,30,200,0.05));
  border:1px solid rgba(155,89,182,0.3);
  border-radius:var(--radius); padding:1.5rem;
  text-align:center; margin-bottom:1rem;
}

/* GAME SECTION TABS */
.game-section-tabs {
  display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap;
}
.game-section-tab {
  padding:0.5rem 1rem; background:var(--bg3);
  border:1px solid var(--border); border-radius:20px;
  color:var(--text2); font-size:0.85rem; font-weight:600;
  cursor:pointer; transition:all 0.2s;
  font-family:'Rajdhani',sans-serif;
}
.game-section-tab.active {
  background:var(--gold); color:#000; border-color:var(--gold);
}

/* PAY TO WIN SECTION */
.p2w-item {
  background:linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,140,0,0.03));
  border:1px solid rgba(255,215,0,0.3);
  border-radius:var(--radius); padding:1.25rem;
  margin-bottom:0.75rem; display:flex; align-items:center; gap:1rem;
  transition:all 0.2s;
}
.p2w-item:hover { border-color:var(--gold); box-shadow:var(--glow-gold); }
.p2w-icon { font-size:2.5rem; flex-shrink:0; }
.p2w-info { flex:1; }
.p2w-name {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:1.1rem; color:var(--gold);
}
.p2w-desc { font-size:0.8rem; color:var(--text2); margin-top:0.2rem; }
.p2w-effect { font-size:0.75rem; color:var(--green); font-weight:600; margin-top:0.2rem; }

/* STREAK */
.streak-display {
  display:flex; align-items:center; gap:0.5rem;
  background:linear-gradient(135deg, rgba(255,140,0,0.1), rgba(255,69,0,0.05));
  border:1px solid rgba(255,140,0,0.3); border-radius:var(--radius2);
  padding:0.5rem 1rem;
}
.streak-fire { font-size:1.5rem; animation:fireFlicker 0.5s ease infinite alternate; }
@keyframes fireFlicker { from{transform:scale(1)} to{transform:scale(1.1) rotate(5deg)} }

/* OFFLINE EARNINGS MODAL */
.offline-earn {
  text-align:center; padding:1.5rem;
}
.offline-amount {
  font-family:'Orbitron',sans-serif; font-size:3rem; font-weight:900;
  color:var(--gold); margin:1rem 0;
}