/* ============================================================
   DESIGN TOKENS & RESET
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English:ital@0;1&display=swap');

:root {
  --bg:          transparent;
  --surface:     #120810;
  --panel:       #1a0e18;
  --panel-inner: #130a11;
  --border:      #3a1e2a;
  --border-glow: #8a2a1a;
  --border-gold: #7a5010;
  --gold:        #e8b840;
  --gold-dim:    #d4a830;
  --gold-bright: #ffd060;
  --gold-glow:   rgba(232,184,64,0.22);
  --crimson:     #cc2233;
  --chaos:       #cc2233;
  --chaos-bright:#ff5544;
  --chaos-glow:  rgba(204,34,51,0.22);
  --glory:       #4499ee;
  --glory-dim:   #2266aa;
  --emerald:     #27ae60;
  --sapphire:    #3399dd;
  --amethyst:    #8e44ad;
  --gem:         #cc44ee;
  --gem-dim:     #8822aa;
  --text:        #ffffff;
  --text-dim:    #f0d8b8;
  --text-faint:  #d4b080;
  --shadow:      rgba(0,0,0,0.9);
  --radius:      6px;
  --radius-sm:   4px;
  --radius-lg:   10px;
  --font-display:'Cinzel', serif;
  --font-body:   'IM Fell English', Georgia, serif;
  --relic:      #e8b84b;
  --relic-dim:  #d4a830;
  --relic-glow: rgba(232,184,75,0.22);
  --asc:        #c9a227;
  --artifact:      #e0a060;
  --artifact-dim:  #8a5020;
  --artifact-glow: rgba(224,160,96,0.20);
  --artifact-rare:   #60c8f0;
  --artifact-epic:   #c080f0;
  --artifact-legend: #f0c040;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  background: url('/assets/flame-background.jpg') no-repeat center center / cover fixed;
}

body {
  min-height: 100%;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}





/* ============================================================
   LAYOUT
============================================================ */
#app {
  position:relative; z-index:1;
  max-width:1060px;
  margin:0 auto;
  padding:20px 20px 80px;
}

#header { text-align:center; padding:24px 0 8px; }

#game-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  background: linear-gradient(180deg, #ffe080 0%, #e8b840 45%, #b07820 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(200,120,30,0.7));
  letter-spacing:.16em;
  margin-bottom:3px;
  text-transform: uppercase;
  font-weight: 700;
}

#game-subtitle {
  font-size:.9rem;
  color: var(--gold-dim);
  font-style:italic;
  letter-spacing:.14em;
}

.divider {
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(180,100,20,0.4), var(--gold-dim), rgba(180,100,20,0.4), transparent);
  margin:10px 0;
}

/* ============================================================
   TAB NAVIGATION
============================================================ */
#tab-bar {
  display:flex;
  gap:2px;
  margin:20px 0 0;
  border-bottom: 2px solid rgba(100,50,10,0.8);
  flex-wrap:wrap;
  padding: 2px 2px 0;
  background: linear-gradient(180deg, rgba(25,10,5,0.9), rgba(18,6,3,0.95));
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid rgba(90,45,10,0.55);
  border-bottom: 2px solid rgba(160,80,10,0.9);
}

.tab-btn {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: #c4a070;
  font-family: var(--font-display);
  font-size:.57rem;
  letter-spacing:.09em;
  padding: 10px 14px 9px;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
  white-space:nowrap;
  position: relative;
  text-transform: uppercase;
}
.tab-btn:hover {
  color: #e8c088;
  border-color: rgba(140,70,15,0.3);
  background: rgba(255,255,255,0.02);
}
.tab-btn.active {
  color: var(--gold-bright);
  border-color: rgba(150,75,15,0.9);
  border-bottom-color: var(--panel-inner);
  background: linear-gradient(180deg, rgba(90,35,8,0.45) 0%, var(--panel-inner) 100%);
  margin-bottom:-2px;
  padding-bottom:11px;
  text-shadow: 0 0 14px rgba(240,192,64,0.65);
  z-index: 1;
}
.tab-btn .tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--crimson); color:#fff; border-radius:10px;
  font-size:.46rem; padding:1px 5px; margin-left:4px; vertical-align:middle;
  font-family: var(--font-body);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(204,34,51,0.5); }
  50%    { box-shadow: 0 0 0 3px rgba(204,34,51,0); }
}

.tab-pane { display:none; }
.tab-pane.active { display:block; }

.tab-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.col-full { grid-column:1/-1; }

/* ============================================================
   ORNATE PANEL
============================================================ */
.panel {
  background: linear-gradient(155deg, #1e1018 0%, #160c14 55%, #120a10 100%);
  border: 1px solid rgba(130,70,15,0.65);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow:
    0 4px 32px rgba(0,0,0,0.88),
    inset 0 1px 0 rgba(255,200,100,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 0 1px rgba(70,25,8,0.5);
  position:relative;
  overflow:hidden;
}

.panel::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(160,80,10,0.3) 8%,
    rgba(210,140,25,0.75) 28%,
    rgba(255,195,55,1) 50%,
    rgba(210,140,25,0.75) 72%,
    rgba(160,80,10,0.3) 92%,
    transparent 100%
  );
}

/* Corner inner glow */
.panel::after {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 2% 2%, rgba(200,110,15,0.07) 0%, transparent 35%),
    radial-gradient(circle at 98% 2%, rgba(200,110,15,0.07) 0%, transparent 35%);
  pointer-events: none;
}

.panel-title {
  font-family: var(--font-display);
  font-size:.7rem;
  letter-spacing:.2em;
  color: var(--gold);
  text-transform:uppercase;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 600;
}
.panel-title::after {
  content: '';
  flex:1;
  height:1px;
  background: linear-gradient(90deg, rgba(160,110,15,0.45), transparent);
  margin-left:4px;
}

/* decorative diamonds on panel title */
.panel-title > span:first-child::before {
  content: '✦ ';
  font-size:.5rem;
  color: var(--gold-dim);
  opacity:0.8;
}

/* ============================================================
   TOP BAR & CURRENCY
============================================================ */
#top-bar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding:12px 18px;
  background: linear-gradient(135deg, rgba(90,25,8,0.18) 0%, rgba(22,12,18,0.96) 35%, rgba(22,12,18,0.96) 65%, rgba(70,20,8,0.18) 100%);
  border: 1px solid rgba(110,55,12,0.65);
  border-radius: var(--radius-lg);
  margin-top:14px;
  box-shadow: 0 0 28px rgba(140,55,10,0.14), 0 2px 16px var(--shadow);
  position: relative;
  overflow: hidden;
}
#top-bar::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(210,140,25,0.55), transparent);
}

#gold-display {
  display:flex;
  align-items:baseline;
  gap:8px;
}
#gold-amount {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(210,140,25,0.65), 0 0 10px rgba(180,70,15,0.2);
  transition: text-shadow .1s;
  line-height:1;
  font-weight: 700;
}
#gold-amount.flash { text-shadow: 0 0 40px var(--gold), 0 0 80px rgba(240,192,64,.5); }

.currency-block {
  display:flex; align-items:center; gap:6px;
  background: rgba(0,0,0,0.32);
  border:1px solid rgba(90,45,10,0.55);
  border-radius: var(--radius); padding:6px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.currency-block:hover { border-color: rgba(204,68,238,0.4); box-shadow: 0 0 10px rgba(204,68,238,0.12); }
.currency-block .cur-icon { font-size:1.1rem; }
.currency-block .cur-amount { font-family: var(--font-display); font-size:.88rem; color: var(--gem); }
.currency-block .cur-label { font-size:.67rem; color: var(--text-dim); }

.stat-chip {
  background: rgba(0,0,0,0.28);
  border:1px solid rgba(75,35,10,0.55);
  border-radius: var(--radius-sm);
  padding:5px 12px; font-size:.78rem; color: var(--text-dim); white-space: nowrap;
}
.stat-chip span { color: var(--gold); font-weight:600; }

#resource-bar { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.res-chip {
  background: rgba(0,0,0,0.3);
  border:1px solid rgba(110,45,10,0.38);
  border-radius: var(--radius); padding:7px 16px;
  display:flex; align-items:center; gap:9px; font-size:.83rem;
  transition: border-color .2s;
}
.res-chip:hover { border-color: rgba(160,70,18,0.55); }
.res-chip .res-icon { font-size:1.1rem; }
.res-chip .res-name { color:var(--text-dim); }
.res-chip .res-val { color:var(--gold); font-weight:600; }
.res-chip .res-rate { color:var(--text-faint); font-size:.73rem; }

/* ============================================================
   CLICK BUTTON — glowing orbit ring style
============================================================ */
#click-panel {
  display:flex; flex-direction:column; align-items:center; gap:22px;
  padding: 28px 22px 22px;
}

#click-btn {
  position:relative;
  width:172px; height:172px;
  border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #2c1228, #0e0810);
  border: none; outline:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  transition: box-shadow .15s, transform .08s;
  cursor: pointer; user-select:none;
}

/* Gold orbit ring */
#click-btn::before {
  content: '';
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    rgba(220,140,20,0.05) 0deg,
    rgba(255,185,45,0.9) 55deg,
    rgba(255,225,80,1) 110deg,
    rgba(255,185,45,0.9) 170deg,
    rgba(210,130,15,0.5) 230deg,
    rgba(160,80,8,0.25) 295deg,
    rgba(220,140,20,0.05) 360deg
  );
  z-index: -1;
  animation: ringRotate 10s linear infinite;
  filter: blur(0.5px);
}

/* Dark gap ring between outer glow and inner button */
#click-btn::after {
  content: '';
  position: absolute; inset: -2px; border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(255,185,45,0.75),
    rgba(170,85,8,0.55),
    rgba(255,185,45,0.75)
  );
  z-index: -1;
  box-shadow:
    0 0 32px rgba(210,135,18,0.55),
    0 0 65px rgba(170,75,8,0.3),
    inset 0 0 35px rgba(0,0,0,0.85);
}

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

#click-btn:hover { transform: scale(1.045); box-shadow: 0 0 55px rgba(210,145,18,0.45), 0 0 90px rgba(170,75,8,0.25); }
#click-btn:hover::after {
  box-shadow: 0 0 55px rgba(210,145,18,0.75), 0 0 100px rgba(170,75,8,0.4), inset 0 0 35px rgba(0,0,0,0.85);
}
#click-btn:active { transform:scale(0.92); }
#click-btn.clicked { animation: clickPulse .25s ease-out; }
@keyframes clickPulse {
  0%   { box-shadow: 0 0 70px rgba(210,145,18,0.85), 0 0 110px rgba(240,192,64,0.5); }
  100% { box-shadow: 0 0 20px rgba(170,75,8,0.15); }
}

#click-coin { font-size:3rem; line-height:1; filter: drop-shadow(0 0 14px rgba(210,140,18,0.65)); }
#click-label {
  font-family: var(--font-display); font-size:.5rem;
  letter-spacing:.16em; color: rgba(210,155,55,0.65); text-transform:uppercase; display:none;
}
#click-value {
  font-family: var(--font-display); font-size:.88rem; color: var(--gold-bright);
  font-weight: 600; letter-spacing:.04em;
  text-shadow: 0 0 10px rgba(210,140,25,0.55);
}

.float-text {
  position:fixed; pointer-events:none;
  font-family: var(--font-display); font-size:1rem;
  color: var(--gold-bright);
  text-shadow: 0 0 10px var(--chaos-bright), 0 0 14px var(--gold);
  z-index:999;
  animation: floatUp .9s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(-70px) scale(0.7); }
}

/* ============================================================
   UPGRADE CARDS
============================================================ */
.upgrades-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px;
}

.upgrade-card {
  background: rgba(0,0,0,0.26);
  border:1px solid rgba(75,38,10,0.55);
  border-radius: var(--radius); padding:15px; cursor:pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s, background .15s;
  position:relative; overflow:hidden;
}
.upgrade-card:hover {
  border-color: rgba(170,85,18,0.75);
  box-shadow: 0 0 14px rgba(170,85,18,0.2), 0 0 8px rgba(210,140,25,0.1);
  background: rgba(255,255,255,0.025);
}
.upgrade-card:active { transform: scale(0.98); }
.upgrade-card.affordable {
  border-color: rgba(170,115,25,0.65); background: rgba(170,115,25,0.05);
}
.upgrade-card.affordable::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); opacity: .7;
}
.upgrade-card.maxed { opacity:.65; cursor:default; }
.upgrade-card.maxed:hover { transform:none; box-shadow:none; }
.upgrade-card.locked { opacity:.55; cursor:not-allowed; }

.upg-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:7px; }
.upg-name { font-family: var(--font-display); font-size:.62rem; color: var(--gold); letter-spacing:.08em; line-height:1.3; }
.upg-level {
  font-size:.7rem; color: var(--text-dim);
  background: rgba(0,0,0,0.3); border:1px solid rgba(75,38,10,0.55);
  border-radius:3px; padding:2px 7px; flex-shrink:0;
}
.upg-category { font-size:.62rem; color:var(--text-faint); margin-bottom:5px; text-transform:uppercase; letter-spacing:.06em; }
.upg-effect { font-size:.83rem; color: var(--text); margin-bottom:9px; line-height:1.4; }
.upg-cost { font-size:.8rem; color: var(--text-dim); }
.upg-cost span { color: var(--gold); }
.upg-cost .chaos-cost { color: var(--gem); }
.upg-bar-bg { height:3px; background: rgba(75,38,10,0.4); border-radius:2px; margin-top:9px; overflow:hidden; }
.upg-bar { height:100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); border-radius:2px; transition: width .4s; }
.upg-req { font-size:.7rem; color:var(--text-faint); margin-top:5px; font-style:italic; }

.upg-tree-header {
  font-family: var(--font-display); font-size:.67rem; letter-spacing:.1em;
  color:var(--chaos-bright); margin:20px 0 12px; padding-bottom:7px;
  border-bottom:1px solid rgba(170,38,18,0.55);
  text-transform:uppercase; display:flex; align-items:center; gap:8px;
}
.upg-tree-header::after {
  content:''; flex:1; height:1px; background: linear-gradient(90deg, rgba(170,38,18,0.4), transparent);
}

/* ============================================================
   SKILLS
============================================================ */
.skill-card {
  background: rgba(0,0,0,0.22); border:1px solid rgba(75,38,10,0.55);
  border-radius: var(--radius); padding:16px; display:flex; flex-direction:column; gap:9px;
  transition: border-color .2s, box-shadow .2s;
}
.skill-card:hover { border-color: rgba(68,153,238,0.4); box-shadow: 0 0 12px rgba(68,153,238,0.08); }
.skill-header { display:flex; justify-content:space-between; align-items:center; }
.skill-name { font-family: var(--font-display); font-size:.67rem; color:var(--chaos-bright); letter-spacing:.08em; }
.skill-level-badge {
  background: rgba(0,0,0,0.3); border:1px solid rgba(95,38,10,0.65); border-radius:4px; padding:2px 9px;
  font-size:.7rem; color:var(--gold);
}
.skill-desc { font-size:.83rem; color:var(--text-dim); line-height:1.45; }
.skill-xp-label { display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-faint); }
.skill-xp-bar-bg { height:6px; background:rgba(75,38,10,0.4); border-radius:3px; overflow:hidden; }
.skill-xp-bar { height:100%; background: linear-gradient(90deg, var(--glory-dim), var(--glory)); border-radius:3px; transition: width .4s; }
.skill-bonus { font-size:.77rem; color:var(--emerald); }

/* ============================================================
   AUTOMATION
============================================================ */
.auto-card {
  background: rgba(0,0,0,0.22); border:1px solid rgba(75,38,10,0.55);
  border-radius: var(--radius); padding:16px; display:flex; flex-direction:column; gap:9px;
  transition: border-color .2s, box-shadow .2s; position: relative; overflow: hidden;
}
.auto-card.is-active { border-color: rgba(39,174,96,0.4); box-shadow: 0 0 14px rgba(39,174,96,0.08); }
.auto-card.is-active::after {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent); opacity: .5;
}
.auto-header { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.auto-name { font-family: var(--font-display); font-size:.66rem; color:var(--gold); letter-spacing:.08em; flex:1; }
.auto-toggle { position:relative; width:46px; height:24px; flex-shrink:0; }
.auto-toggle input { opacity:0; width:0; height:0; }
.auto-slider {
  position:absolute; inset:0; background:rgba(75,38,10,0.55); border-radius:24px; cursor:pointer;
  transition: background .2s, box-shadow .2s;
}
.auto-slider::before {
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .2s;
}
.auto-toggle input:checked + .auto-slider { background: var(--emerald); box-shadow: 0 0 8px rgba(39,174,96,0.4); }
.auto-toggle input:checked + .auto-slider::before { transform:translateX(22px); }
.auto-desc { font-size:.82rem; color:var(--text-dim); line-height:1.4; }
.auto-tier { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.auto-tier-btn {
  background: rgba(0,0,0,0.3); border:1px solid rgba(75,38,10,0.55); border-radius:var(--radius-sm);
  color:var(--text-dim); font-family:var(--font-body); font-size:.77rem; padding:5px 11px; cursor:pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.auto-tier-btn:hover:not(:disabled) { border-color:var(--gold-dim); color:var(--gold); }
.auto-tier-btn:disabled { opacity:.55; cursor:default; }
.auto-tier-btn.active { border-color:var(--gold-dim); color:var(--gold); background:rgba(170,115,25,0.09); }
.auto-status { font-size:.74rem; color:var(--text-faint); }

/* ============================================================
   PRESTIGE
============================================================ */
#prestige-info { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.prestige-stat {
  background: rgba(0,0,0,0.26); border:1px solid rgba(75,38,10,0.55);
  border-radius: var(--radius); padding:12px 18px; flex:1; min-width:130px;
}
.prestige-stat-label { font-size:.68rem; color: var(--text-dim); letter-spacing:.06em; margin-bottom:4px; }
.prestige-stat-value { font-family: var(--font-display); font-size:.92rem; color: var(--gold); }

#prestige-progress { margin-bottom:14px; }
#prestige-progress-label { font-size:.8rem; color: var(--text-dim); margin-bottom:6px; }
#prestige-bar-bg { height:8px; background: rgba(75,38,10,0.4); border-radius:4px; overflow:hidden; }
#prestige-bar { height:100%; background: linear-gradient(90deg, var(--crimson), #e74c3c, #ff6b6b); border-radius:4px; transition: width .5s; }

#prestige-btn {
  background: linear-gradient(135deg, #480a10, #270510, #09102e);
  border:1px solid rgba(155,48,28,0.75);
  border-radius: var(--radius); color: #ff8a7a; font-family: var(--font-display);
  font-size:.67rem; letter-spacing:.1em; padding:11px 24px; cursor:pointer;
  transition: background .2s, border-color .2s, box-shadow .2s; box-shadow: 0 2px 12px rgba(175,48,38,0.2);
}
#prestige-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #782826, #581c1a);
  border-color: rgba(195,58,38,0.85); box-shadow: 0 0 22px rgba(190,55,40,0.45);
}
#prestige-btn:disabled { opacity:.32; cursor:default; }

.gem-upg-card {
  background: rgba(0,0,0,0.22); border:1px solid rgba(58,18,78,0.65);
  border-radius: var(--radius); padding:15px; cursor:pointer;
  transition: border-color .15s, box-shadow .15s, background .15s; position:relative; overflow:hidden;
}
.gem-upg-card:hover { border-color: var(--gem-dim); box-shadow: 0 0 16px rgba(168,85,247,0.22); background: rgba(180,58,220,0.04); }
.gem-upg-card.bought { opacity:.48; cursor:default; border-color:rgba(38,18,58,0.55); }
.gem-upg-card.bought:hover { box-shadow:none; }
.gem-upg-name { font-family:var(--font-display); font-size:.64rem; color:var(--gem); letter-spacing:.08em; margin-bottom:5px; }
.gem-upg-desc { font-size:.82rem; color:var(--text-dim); margin-bottom:9px; line-height:1.4; }
.gem-upg-cost { font-size:.8rem; color:var(--gem); }

/* ============================================================
   ACHIEVEMENTS
============================================================ */
.achievements-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:10px; }
.ach-card {
  background: rgba(0,0,0,0.22); border:1px solid rgba(75,38,10,0.55);
  border-radius: var(--radius); padding:14px; display:flex; flex-direction:column; gap:5px;
  transition: border-color .2s, box-shadow .2s;
}
.ach-card.unlocked { border-color: rgba(38,78,175,0.55); box-shadow: 0 0 10px rgba(30,80,180,0.1); }
.ach-card.unlocked:hover { border-color: var(--glory); box-shadow: 0 0 14px rgba(68,153,238,0.18); }
.ach-card.locked { opacity:.55; filter:grayscale(0.5); }
.ach-icon { font-size:1.65rem; margin-bottom:2px; }
.ach-name { font-family:var(--font-display); font-size:.62rem; color:var(--gold); letter-spacing:.07em; line-height:1.3; }
.ach-desc { font-size:.78rem; color:var(--text-dim); line-height:1.4; }
.ach-reward { font-size:.73rem; color:var(--emerald); }

/* ============================================================
   ACTIONS ROW — Export / Import / Hard Reset buttons
============================================================ */
#actions-row {
  display:flex; justify-content:flex-end; gap:10px; margin-top:20px;
  flex-wrap:wrap; padding-top:16px; border-top:1px solid rgba(75,38,10,0.4);
}

.action-btn {
  background: rgba(0,0,0,0.42);
  border:1px solid rgba(115,75,18,0.65);
  border-radius: var(--radius); color: var(--gold-bright);
  font-family: var(--font-display); font-size:.57rem;
  letter-spacing:.12em; padding:9px 18px; cursor:pointer;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
  text-transform: uppercase;
}
.action-btn:hover {
  border-color: rgba(170,115,25,0.85); color: var(--gold);
  background: rgba(115,58,8,0.18); box-shadow: 0 0 10px rgba(170,115,25,0.15);
}
.action-btn.danger { border-color: rgba(135,38,18,0.65); color: #ff7060; }
.action-btn.danger:hover {
  border-color: rgba(195,58,38,0.85); color: #ff6b6b;
  background: rgba(155,38,18,0.14); box-shadow: 0 0 10px rgba(175,38,18,0.22);
}

/* ============================================================
   MODAL
============================================================ */
#modal-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background: rgba(0,0,0,0.9); backdrop-filter: blur(5px);
  align-items:center; justify-content:center;
}
#modal-overlay.active { display:flex; }
#modal-box {
  background: linear-gradient(158deg, #1e1018, #130a11);
  border:1px solid rgba(135,75,18,0.72); border-radius: var(--radius-lg); padding:38px 44px; max-width:480px;
  text-align:center; box-shadow: 0 0 65px rgba(210,145,28,0.15), 0 20px 65px var(--shadow);
  animation: modalIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn { from { opacity:0; transform:scale(.92) translateY(12px); } to { opacity:1; transform:none; } }
#modal-title { font-family: var(--font-display); font-size:1rem; color: var(--gold); margin-bottom:12px; letter-spacing:.1em; }
#modal-body { color: var(--text-dim); font-size:.94rem; margin-bottom:22px; line-height:1.9; }
#modal-body strong { color: var(--gold-bright); font-size:1.1rem; }
#modal-close {
  background: rgba(0,0,0,0.42); border:1px solid rgba(135,75,18,0.72); border-radius: var(--radius);
  color: var(--gold); font-family: var(--font-display); font-size:.62rem; letter-spacing:.1em;
  padding:11px 30px; cursor:pointer; transition: background .2s, box-shadow .2s, border-color .2s;
}
#modal-close:hover { background: rgba(170,95,18,0.14); box-shadow: 0 0 18px rgba(210,145,28,0.22); border-color: var(--gold-dim); }

/* ============================================================
   NOTIFICATIONS
============================================================ */
#notif-area {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center;
  z-index:400; pointer-events:none; width:max-content; max-width:90vw;
}
.notif {
  background: linear-gradient(135deg, #1e1018, #130a11); border:1px solid rgba(135,75,18,0.72);
  border-radius: var(--radius); padding:10px 22px; font-size:.84rem; color: var(--gold);
  box-shadow: 0 4px 24px var(--shadow);
  animation: notifIn .3s ease-out, notifOut .4s ease-in 2.6s forwards;
  pointer-events:auto; text-align:center;
}
.notif.ach-notif {
  border-color: rgba(38,78,175,0.72); background: linear-gradient(135deg, #0a0e1a, #141828);
  color:var(--glory); font-size:.88rem; padding:11px 26px;
}
@keyframes notifIn  { from { opacity:0; transform:translateY(16px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes notifOut { from { opacity:1; } to { opacity:0; transform:translateY(-8px); } }

/* ============================================================
   PROGRESS BARS
============================================================ */
.prog-bar-bg { height:5px; background:rgba(75,38,10,0.4); border-radius:3px; overflow:hidden; margin-top:6px; }
.prog-bar { height:100%; border-radius:3px; transition: width .4s; }
.prog-bar.gold-bar { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.prog-bar.green-bar { background: linear-gradient(90deg, #1a6b30, var(--emerald)); }
.prog-bar.blue-bar  { background: linear-gradient(90deg, #1a3f6b, var(--sapphire)); }
.prog-bar.gem-bar   { background: linear-gradient(90deg, var(--gem-dim), var(--gem)); }

/* Auras */
#click-btn.aura-gold::after { background: radial-gradient(circle, rgba(240,192,64,0.22) 60%, transparent 100%); animation: aura-pulse 2s ease-in-out infinite; }
#click-btn.aura-fire::after { background: radial-gradient(circle, rgba(255,80,0,0.25) 50%, transparent 100%); animation: aura-pulse 1.2s ease-in-out infinite; }
#click-btn.aura-lightning::after { box-shadow: 0 0 14px 4px rgba(100,180,255,0.55), 0 0 32px 10px rgba(60,120,255,0.2); animation: aura-flicker 0.55s steps(2) infinite; }
#click-btn.aura-rainbow::after { background: conic-gradient(#ff0000, #ff7700, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000); opacity: 0.28; animation: aura-spin 3s linear infinite; }
@keyframes aura-pulse   { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.10)} }
@keyframes aura-flicker { 0%{opacity:.8} 50%{opacity:.25} 100%{opacity:.8} }
@keyframes aura-spin    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ============================================================
   SHOP
============================================================ */
#shop-balance-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.shop-balance-block {
  background: rgba(0,0,0,0.26); border: 1px solid rgba(75,38,10,0.55);
  border-radius: var(--radius); padding: 16px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 120px;
}
.shop-balance-icon { font-size: 1.5rem; }
.shop-balance-val { font-family: var(--font-display); font-size: 1.2rem; color: var(--sapphire); text-shadow: 0 0 12px rgba(51,153,221,0.4); }
.shop-balance-label { font-size: .67rem; color: var(--text-dim); }

.shop-earn-methods {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(75,38,10,0.55); border-radius: var(--radius);
  padding: 14px 18px; flex: 1; min-width: 200px;
}
.shop-earn-title { font-family: var(--font-display); font-size: .61rem; color: var(--gold-dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
.shop-earn-item { font-size: .82rem; color: var(--text-dim); padding: 4px 0; border-bottom: 1px solid rgba(75,38,10,0.32); }
.shop-earn-item:last-of-type { border-bottom: none; }
.shop-earn-note { font-size: .71rem; color: var(--emerald); margin-top: 9px; font-style: italic; }

.shop-section-label {
  font-family: var(--font-display); font-size: .58rem; letter-spacing: .1em;
  color: var(--gold-dim); text-transform: uppercase; margin-bottom: 9px;
  padding-bottom: 5px; border-bottom: 1px solid rgba(75,38,10,0.42);
}
.shop-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 4px; }

.shop-item-card {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(75,38,10,0.55); border-radius: var(--radius);
  padding: 11px; text-align: center; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s, background .15s; position: relative; overflow: hidden;
}
.shop-item-card:hover:not(.owned):not(.active-theme) {
  border-color: rgba(51,153,221,0.62); box-shadow: 0 0 14px rgba(51,153,221,0.2);
  transform: scale(1.02); background: rgba(51,153,221,0.04);
}
.shop-item-card.active-theme { border-color: var(--gold); box-shadow: 0 0 14px var(--gold-glow); cursor: default; }
.shop-item-card.owned { border-color: var(--emerald); background: rgba(39,174,96,0.06); cursor: pointer; }
.shop-item-icon { font-size: 1.5rem; margin-bottom: 5px; }
.shop-item-name { font-family: var(--font-display); font-size: .55rem; color: var(--gold); letter-spacing: .06em; margin-bottom: 4px; }
.shop-item-desc { font-size: .7rem; color: var(--text-dim); margin-bottom: 7px; line-height:1.35; }
.shop-item-price { font-family: var(--font-display); font-size: .62rem; color: var(--sapphire); }
.shop-item-price.free { color: var(--emerald); }
.shop-item-status { font-size: .62rem; color: var(--emerald); margin-top: 3px; }

.shop-conv-card {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(75,38,10,0.55); border-radius: var(--radius);
  padding: 13px 16px; display: flex; align-items: center; gap: 13px; margin-bottom: 9px;
  transition: border-color .15s, background .15s;
}
.shop-conv-card:hover { border-color: rgba(51,153,221,0.52); background: rgba(51,153,221,0.03); }
.shop-conv-icon { font-size: 1.4rem; flex-shrink: 0; }
.shop-conv-info { flex: 1; }
.shop-conv-name { font-family: var(--font-display); font-size: .62rem; color: var(--gold); letter-spacing: .07em; margin-bottom: 3px; }
.shop-conv-desc { font-size: .78rem; color: var(--text-dim); line-height:1.4; }
.shop-conv-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.shop-conv-price { font-family: var(--font-display); font-size: .68rem; color: var(--sapphire); white-space: nowrap; }
.shop-buy-btn {
  background: rgba(8,18,38,0.62); border: 1px solid var(--sapphire); border-radius: var(--radius-sm);
  color: var(--sapphire); font-family: var(--font-display); font-size: .55rem;
  letter-spacing: .08em; padding: 6px 13px; cursor: pointer; transition: background .2s, box-shadow .2s; white-space: nowrap;
}
.shop-buy-btn:hover:not(:disabled) { background: rgba(18,38,78,0.62); box-shadow: 0 0 12px rgba(51,153,221,0.35); }
.shop-buy-btn:disabled { opacity: .55; cursor: default; }
.shop-buy-btn.active-boost { border-color: var(--emerald); color: var(--emerald); background: rgba(39,174,96,0.09); }

.shop-active-boost-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(39,174,96,0.06); border: 1px solid var(--emerald);
  border-radius: var(--radius); padding: 9px 14px; margin-bottom: 7px;
  animation: boost-glow 2s ease-in-out infinite;
}
@keyframes boost-glow { 0%,100%{ box-shadow: 0 0 0 0 rgba(39,174,96,0.0); } 50%{ box-shadow: 0 0 14px 2px rgba(39,174,96,0.18); } }
.shop-boost-timer { font-family: var(--font-display); font-size: .68rem; color: var(--emerald); margin-left: auto; }
#shop-active-boosts { background: rgba(39,174,96,0.04); border: 1px solid rgba(39,174,96,0.25); border-radius: var(--radius); padding: 12px; margin-top:14px; }

/* Themes */
body.theme-inferno { --bg:#0a0400; --surface:#160800; --panel:#1e0c00; --border:#3a1800; --border-glow:#8b2200; --gold:#ff8c00; --gold-dim:#cc6600; --gold-bright:#ffaa00; --chaos-bright:#ff6633; }
body.theme-abyss   { --bg:#00060a; --surface:#001020; --panel:#001830; --border:#003050; --border-glow:#006090; --gold:#00d4ff; --gold-dim:#0099cc; --gold-bright:#66eeff; }
body.theme-emerald { --bg:#030a04; --surface:#061008; --panel:#0c1e10; --border:#1a3820; --border-glow:#204830; --gold:#00e050; --gold-dim:#00aa30; --gold-bright:#50ff80; }
body.theme-void    { --bg:#040008; --surface:#080018; --panel:#100025; --border:#250045; --border-glow:#4400aa; --gold:#cc44ff; --gold-dim:#8822cc; --gold-bright:#ee88ff; }
body.theme-royal   { --bg:#080605; --surface:#120e08; --panel:#1a1508; --border:#3a2e10; --border-glow:#6a5010; --gold:#ffd700; --gold-dim:#ccaa00; --gold-bright:#ffe44d; }

/* ============================================================
   ASCENSION
============================================================ */
#ascension-info { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.asc-stat { background: rgba(0,0,0,0.26); border:1px solid rgba(78,48,10,0.62); border-radius: var(--radius); padding:12px 18px; flex:1; min-width:130px; }
.asc-stat-label { font-size:.68rem; color: var(--text-dim); letter-spacing:.06em; margin-bottom:4px; }
.asc-stat-value { font-family: var(--font-display); font-size:.92rem; color: var(--relic); }

#asc-btn {
  background: linear-gradient(135deg, #281c05, #181000); border:1px solid rgba(115,88,10,0.72); border-radius: var(--radius);
  color: var(--relic); font-family: var(--font-display); font-size:.67rem; letter-spacing:.1em; padding:11px 24px;
  cursor:pointer; transition: background .2s, border-color .2s, box-shadow .2s; box-shadow: 0 2px 12px rgba(175,138,28,0.2);
}
#asc-btn:hover:not(:disabled) { background: linear-gradient(135deg, #483210, #2c2008); border-color: var(--relic); box-shadow: 0 0 22px rgba(195,158,38,0.45); }
#asc-btn:disabled { opacity:.32; cursor:default; }

.asc-upg-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:12px; margin-top:12px; }
.asc-upg-card {
  background: rgba(0,0,0,0.22); border:1px solid rgba(78,48,10,0.62); border-radius: var(--radius);
  padding:15px; cursor:pointer; transition: border-color .15s, box-shadow .15s, background .15s; position:relative;
}
.asc-upg-card:hover:not(.maxed) { border-color: var(--relic-dim); box-shadow: 0 0 14px var(--relic-glow); background: rgba(195,148,48,0.04); }
.asc-upg-card.maxed { opacity:.48; cursor:default; }
.asc-upg-name { font-family:var(--font-display); font-size:.63rem; color:var(--gold-bright); letter-spacing:.08em; margin-bottom:5px; }
.asc-upg-desc { font-size:.82rem; color:var(--text-dim); margin-bottom:9px; line-height:1.4; }
.asc-upg-cost { font-size:.8rem; color:var(--relic-dim); }
.asc-upg-lv { font-size:.7rem; color:var(--text-faint); margin-top:5px; }
.asc-upg-bar-bg { height:3px; background:rgba(78,48,10,0.42); border-radius:2px; margin-top:7px; overflow:hidden; }
.asc-upg-bar { height:100%; background: linear-gradient(90deg, var(--relic-dim), var(--relic)); border-radius:2px; }

.relic-chip { display:flex; align-items:center; gap:6px; background: rgba(0,0,0,0.26); border:1px solid rgba(78,48,10,0.62); border-radius: var(--radius); padding:6px 13px; }
.relic-chip .cur-amount { color: var(--relic); font-family: var(--font-display); font-size:.92rem; }
.relic-chip .cur-label  { font-size:.7rem; color: var(--text-dim); }

/* ============================================================
   DAILY / WEEKLY
============================================================ */
.daily-section-title {
  font-family:var(--font-display); font-size:.67rem; letter-spacing:.1em; color:var(--gold);
  text-transform:uppercase; margin:18px 0 11px; padding-bottom:6px; border-bottom:1px solid rgba(175,78,18,0.52);
}

#streak-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.streak-day {
  width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid rgba(75,38,10,0.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.7rem; color:var(--text-faint); gap:2px; position:relative; transition: border-color .2s, box-shadow .2s;
}
.streak-day.claimed { border-color: rgba(175,115,18,0.65); background: rgba(175,115,18,0.12); color:var(--gold); }
.streak-day.today   { border-color: var(--emerald); box-shadow: 0 0 12px rgba(39,174,96,0.3); }
.streak-day.missed  { opacity:.28; }
.streak-day-num { font-size:.56rem; color:var(--text-faint); }

.challenge-card {
  background: rgba(0,0,0,0.22); border:1px solid rgba(75,38,10,0.55); border-radius: var(--radius);
  padding:15px; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; transition: border-color .18s, box-shadow .18s;
}
.challenge-card.completed { border-color: rgba(39,174,96,0.52); opacity:.7; }
.challenge-card.claimable { border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); animation: claimable-pulse 2s ease-in-out infinite; }
@keyframes claimable-pulse { 0%,100%{ box-shadow: 0 0 10px var(--gold-glow); } 50%{ box-shadow: 0 0 22px rgba(215,175,38,0.3); } }
.challenge-card.active    { border-color: rgba(175,78,18,0.65); box-shadow: 0 0 8px rgba(175,78,18,0.15); }
.challenge-header { display:flex; justify-content:space-between; align-items:center; }
.challenge-name { font-family:var(--font-display); font-size:.65rem; color:var(--gold); letter-spacing:.07em; }
.challenge-reward { font-size:.77rem; color:var(--emerald); }
.challenge-desc { font-size:.82rem; color:var(--text-dim); line-height:1.4; }
.challenge-prog-label { display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-faint); }
.challenge-prog-bg { height:5px; background:rgba(75,38,10,0.42); border-radius:3px; overflow:hidden; }
.challenge-prog-bar { height:100%; border-radius:3px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .4s; }
.challenge-timer { font-size:.7rem; color:var(--text-faint); text-align:right; }

/* ============================================================
   QUESTS
============================================================ */
.quest-card {
  background: rgba(0,0,0,0.22); border:1px solid rgba(75,38,10,0.55); border-radius: var(--radius);
  padding:15px; display:flex; flex-direction:column; gap:9px; margin-bottom:10px; transition: border-color .18s, box-shadow .18s;
}
.quest-card.completed { border-color: rgba(39,174,96,0.52); }
.quest-card.claimable { border-color: var(--gold); box-shadow: 0 0 14px var(--gold-glow); animation: claimable-pulse 2s ease-in-out infinite; }
.quest-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.quest-name { font-family:var(--font-display); font-size:.65rem; color:var(--gold); letter-spacing:.07em; flex:1; line-height:1.3; }
.quest-type-badge { font-size:.57rem; padding:2px 8px; border-radius:8px; border:1px solid rgba(75,38,10,0.55); color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.quest-type-badge.short { border-color: rgba(38,98,175,0.65); color:var(--sapphire); }
.quest-type-badge.long  { border-color: rgba(118,48,158,0.65); color:var(--amethyst); }
.quest-desc { font-size:.82rem; color:var(--text-dim); line-height:1.4; }
.quest-reward { font-size:.77rem; color:var(--emerald); }
.quest-prog-label { display:flex; justify-content:space-between; font-size:.74rem; color:var(--text-faint); }
.quest-prog-bg { height:5px; background:rgba(75,38,10,0.42); border-radius:3px; overflow:hidden; }
.quest-prog-bar { height:100%; border-radius:3px; background: linear-gradient(90deg, var(--sapphire), #3daef5); transition: width .4s; }
.quest-claim-btn {
  align-self:flex-end; background: rgba(0,0,0,0.42); border:1px solid rgba(175,115,18,0.72);
  border-radius: var(--radius-sm); color: var(--gold-bright); font-family: var(--font-display); font-size:.59rem;
  letter-spacing:.08em; padding:7px 16px; cursor:pointer; transition: background .2s, box-shadow .2s;
}
.quest-claim-btn:hover { box-shadow: 0 0 12px var(--gold-glow); background: rgba(115,68,8,0.22); }

/* Toast variations */
.notif.level-up { border-color: var(--emerald); background: linear-gradient(135deg, #0e1f12, #162a1a); color: #5dde7c; }
.notif.reward-notif { border-color: var(--relic-dim); background: linear-gradient(135deg, #1a1408, #25200e); color: var(--relic); }
.notif.challenge-notif { border-color: var(--sapphire); background: linear-gradient(135deg, #0e1520, #14202e); color: #7ecfff; font-size:.88rem; padding:11px 26px; }
.notif.asc-notif { border-color: var(--relic); background: linear-gradient(135deg, #1e1a08, #2e2510); color: var(--relic); font-size:1rem; padding:13px 30px; font-family: var(--font-display); letter-spacing:.06em; }
.notif.event-notif { border-color: #c97c0a; background: linear-gradient(135deg, #1a1000, #2a1800); color: #f0a030; font-size:.9rem; padding:11px 26px; font-family: var(--font-display); letter-spacing:.05em; }

/* ============================================================
   EVENTS
============================================================ */
.event-card {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(75,38,10,0.55); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 11px;
  transition: border-color .2s, box-shadow .2s; position: relative; overflow: hidden;
}
.event-card.event-active {
  border-color: rgba(195,118,10,0.72); box-shadow: 0 0 24px rgba(195,118,10,0.22), inset 0 0 40px rgba(195,118,10,0.04);
  animation: event-pulse 3s ease-in-out infinite;
}
@keyframes event-pulse { 0%,100%{ box-shadow: 0 0 20px rgba(195,118,10,0.2); } 50%{ box-shadow: 0 0 36px rgba(195,118,10,0.38); } }
.event-card.event-active::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #f0a030, #ffe080, #f0a030, transparent);
  animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer { 0%{ opacity:.5; } 50%{ opacity:1; } 100%{ opacity:.5; } }
.event-card.event-inactive { opacity: .5; }
.event-header { display: flex; align-items: center; gap: 12px; }
.event-icon { font-size: 1.7rem; line-height: 1; }
.event-name { font-family: var(--font-display); font-size: .74rem; color: var(--chaos-bright); letter-spacing: .1em; flex: 1; }
.event-status-badge { font-size: .62rem; padding: 3px 10px; border-radius: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; font-family: var(--font-display); }
.event-status-badge.active   { color: #f0a030; border-color: #f0a030; background: rgba(240,160,48,0.1); }
.event-status-badge.upcoming { color: var(--sapphire); border-color: var(--sapphire); }
.event-status-badge.ended    { color: var(--text-faint); border-color: var(--text-faint); }
.event-effect { font-size: .87rem; color: var(--text); line-height:1.5; }
.event-effect strong { color: #f0c060; }
.event-timer-row { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--text-dim); }
.event-timer-val { font-family: var(--font-display); font-size: .8rem; color: var(--gold-bright); letter-spacing: .06em; }
.event-countdown-bar-bg { height: 5px; background: rgba(75,38,10,0.42); border-radius: 3px; overflow: hidden; }
.event-countdown-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--chaos), var(--gold)); transition: width .5s; }
.event-history-entry { font-size: .78rem; color: var(--text-faint); padding: 5px 0; border-bottom: 1px solid rgba(75,38,10,0.32); }
.event-history-entry:last-child { border-bottom: none; }
#events-no-event { text-align: center; color: var(--text-faint); font-style: italic; font-size: .87rem; padding: 28px 0; }

#event-mini-banner {
  display: none; align-items: center; gap: 7px;
  background: rgba(28,12,0,0.65); border: 1px solid rgba(195,118,10,0.72);
  border-radius: var(--radius); padding: 6px 13px; font-size: .77rem; color: #f0a030;
  white-space: nowrap; cursor: pointer; transition: box-shadow .2s, border-color .2s;
  animation: event-mini-pulse 2.5s ease-in-out infinite;
}
@keyframes event-mini-pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(195,118,10,0); } 50%{ box-shadow: 0 0 10px 2px rgba(195,118,10,0.35); } }
#event-mini-banner:hover { border-color: #f0a030; box-shadow: 0 0 14px rgba(195,118,10,0.4); }
#event-mini-banner .emb-icon { font-size: 1rem; }
#event-mini-banner .emb-timer { font-family: var(--font-display); font-size: .67rem; color: #f0c060; }

/* ============================================================
   COLLECTION / ARTIFACTS
============================================================ */
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.artifact-card {
  background: rgba(0,0,0,0.22); border: 1px solid rgba(75,38,10,0.55); border-radius: var(--radius);
  padding: 15px; display: flex; flex-direction: column; gap: 7px; position: relative; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .1s;
}
.artifact-card.unlocked { border-color: rgba(135,78,28,0.65); }
.artifact-card.unlocked:hover { border-color: var(--artifact); box-shadow: 0 0 14px var(--artifact-glow); transform: translateY(-2px); }
.artifact-card.unlocked.rarity-rare     { border-color: rgba(38,78,118,0.65); }
.artifact-card.unlocked.rarity-rare:hover     { border-color: var(--artifact-rare); box-shadow: 0 0 14px rgba(96,200,240,0.2); }
.artifact-card.unlocked.rarity-epic     { border-color: rgba(98,38,118,0.65); }
.artifact-card.unlocked.rarity-epic:hover     { border-color: var(--artifact-epic); box-shadow: 0 0 14px rgba(192,128,240,0.2); }
.artifact-card.unlocked.rarity-legendary { border-color: rgba(118,78,8,0.75); }
.artifact-card.unlocked.rarity-legendary:hover { border-color: var(--artifact-legend); box-shadow: 0 0 20px rgba(240,192,64,0.28); }
.artifact-card.locked { opacity: .35; cursor: default; filter: grayscale(.65); }
.artifact-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity .2s; }
.artifact-card.unlocked::before { opacity:1; }
.artifact-card.rarity-common::before    { background: linear-gradient(90deg, transparent, var(--artifact-dim), transparent); }
.artifact-card.rarity-rare::before      { background: linear-gradient(90deg, transparent, var(--artifact-rare), transparent); }
.artifact-card.rarity-epic::before      { background: linear-gradient(90deg, transparent, var(--artifact-epic), transparent); }
.artifact-card.rarity-legendary::before { background: linear-gradient(90deg, transparent, var(--artifact-legend), transparent); }
.artifact-icon { font-size:2rem; line-height:1; text-align:center; margin-bottom:2px; }
.artifact-name { font-family:var(--font-display); font-size:.63rem; letter-spacing:.09em; text-align:center; }
.artifact-card.unlocked.rarity-common    .artifact-name { color: var(--artifact); }
.artifact-card.unlocked.rarity-rare      .artifact-name { color: var(--artifact-rare); }
.artifact-card.unlocked.rarity-epic      .artifact-name { color: var(--artifact-epic); }
.artifact-card.unlocked.rarity-legendary .artifact-name { color: var(--artifact-legend); }
.artifact-card.locked .artifact-name { color: var(--text-faint); }
.artifact-rarity-badge { font-size:.55rem; text-align:center; letter-spacing:.1em; text-transform:uppercase; padding:2px 0; }
.rarity-common    .artifact-rarity-badge { color: var(--artifact-dim); }
.rarity-rare      .artifact-rarity-badge { color: var(--artifact-rare); }
.rarity-epic      .artifact-rarity-badge { color: var(--artifact-epic); }
.rarity-legendary .artifact-rarity-badge { color: var(--artifact-legend); }
.artifact-bonus { font-size:.78rem; color:var(--emerald); text-align:center; min-height:1.2em; }
.artifact-card.locked .artifact-bonus { color:var(--text-faint); }
.artifact-source { font-size:.7rem; color:var(--text-faint); text-align:center; font-style:italic; }
.artifact-card.locked .artifact-source::before { content:'🔒 '; }
@keyframes artifactUnlock {
  0%   { box-shadow: 0 0 0 0 rgba(224,160,96,.8); }
  50%  { box-shadow: 0 0 32px 10px rgba(224,160,96,.4); }
  100% { box-shadow: 0 0 14px var(--artifact-glow); }
}
.artifact-unlock-flash { animation: artifactUnlock .6s ease-out forwards; }

#collection-summary { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.coll-stat { background: rgba(0,0,0,0.26); border:1px solid rgba(75,38,10,0.55); border-radius:var(--radius); padding:10px 18px; flex:1; min-width:120px; }
.coll-stat-label { font-size:.68rem; color:var(--text-dim); margin-bottom:3px; }
.coll-stat-value { font-family:var(--font-display); font-size:.86rem; color:var(--artifact); }

#collection-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.coll-filter-btn {
  background:rgba(0,0,0,0.26); border:1px solid rgba(75,38,10,0.55); border-radius:var(--radius-sm);
  color:var(--text-dim); font-family:var(--font-body); font-size:.77rem; padding:5px 13px; cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.coll-filter-btn:hover { border-color: rgba(135,88,18,0.65); color:var(--artifact); }
.coll-filter-btn.active { border-color: rgba(135,88,18,0.65); color:var(--artifact); background:rgba(175,108,48,0.09); }
.notif.artifact-notif { border-color:var(--artifact); background:linear-gradient(135deg,#1a1008,#2a1c0a); color:var(--artifact); font-size:.9rem; padding:11px 26px; font-family:var(--font-display); letter-spacing:.05em; }

/* ============================================================
   HEADER ELEMENTS
============================================================ */
#banner-wrap {
  width: 100%; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 0; position: relative;
  border: 1px solid rgba(115,58,10,0.65);
  box-shadow: 0 0 45px rgba(145,58,10,0.32), 0 0 45px rgba(28,78,175,0.12), 0 6px 30px var(--shadow);
}
#game-banner { width: 100%; height: auto; max-height: 200px; object-fit: cover; object-position: center; display: block; }
#logo-title-row { display: flex; align-items: center; gap: 18px; justify-content: center; padding: 4px 0 10px; }
#game-logo {
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--gold-dim);
  box-shadow: 0 0 20px rgba(145,58,10,0.4), 0 0 20px rgba(215,145,28,0.2); flex-shrink: 0;
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(145,58,10,0.4), 0 0 20px rgba(215,145,28,0.2); }
  50%       { box-shadow: 0 0 38px rgba(175,58,18,0.65), 0 0 38px rgba(215,145,28,0.38), 0 0 22px rgba(68,153,238,0.15); }
}
#title-block { text-align: left; }
#game-title { font-size: clamp(1.3rem, 3.5vw, 2rem) !important; margin-bottom: 2px !important; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:660px) {
  .tab-grid { grid-template-columns:1fr; }
  .tab-btn { font-size:.48rem; padding:7px 9px; }
  #app { padding:12px 12px 70px; }
  .panel { padding:16px; }
  #top-bar { padding:10px 12px; }
}
@media (max-width:480px) {
  #logo-title-row { flex-direction: column; gap: 10px; }
  #title-block { text-align: center; }
  .upgrades-grid { grid-template-columns:1fr; }
}
/* ============================================================
   COMBAT SYSTEM
============================================================ */
.combat-enemy-card {
  background: rgba(30,10,5,0.6);
  border: 1px solid rgba(200,60,30,0.35);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.combat-enemy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.combat-enemy-name {
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--text);
  letter-spacing: .05em;
}
.combat-enemy-hp-label {
  font-size: .8rem;
  color: var(--text-dim);
  font-family: var(--font-display);
}
.combat-hp-bar-bg {
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.combat-hp-bar {
  height: 100%;
  border-radius: 5px;
  transition: width .25s linear, background .3s;
}
.combat-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.combat-stat {
  background: var(--card-inner);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  text-align: center;
}
.combat-stat-label {
  font-size: .68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.combat-stat-val {
  font-family: var(--font-display);
  font-size: .88rem;
  color: var(--text);
  font-weight: 600;
}
.combat-toggle-btn {
  width: 100%;
  padding: 11px;
  border-radius: var(--radius);
  border: 1px solid rgba(200,60,30,0.5);
  background: rgba(120,30,10,0.3);
  color: var(--text);
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.combat-toggle-btn:hover { background: rgba(160,40,15,0.45); border-color: rgba(220,80,40,0.7); }
.combat-toggle-btn.active {
  background: linear-gradient(135deg, rgba(30,80,30,0.5), rgba(10,50,10,0.5));
  border-color: var(--emerald);
  color: var(--emerald);
}

/* ============================================================
   FORGING SYSTEM
============================================================ */
.forging-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.forging-bar-bg {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.forging-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c4a10, var(--gold));
  border-radius: 4px;
  transition: width .4s linear;
}