*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-y: scroll; }
:root {
  --stone: #c8b89a; --stone-dark: #8a7560; --stone-light: #e8ddd0;
  --bg: #1a1510; --bg2: #221c14; --bg3: #2c2418;
  --text: #e8ddd0; --text-dim: #9a8870;
  --accent: #d4a84b; --accent-dim: #7a5e1f; --border: #3a2f1f;
}
body {
  background: var(--bg); color: var(--text);
  font-family: 'Crimson Text', serif; font-size: 18px;
  min-height: 100vh; display: flex; flex-direction: column; align-items: stretch;
  padding: 2rem 2rem;
  background-image: radial-gradient(ellipse at 20% 0%, #2a1f0a 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 100%, #1f1a08 0%, transparent 60%);
}
h1 {
  font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 600;
  color: var(--accent); letter-spacing: 0.15em; margin-bottom: 0.25rem;
  text-shadow: 0 0 40px #d4a84b44; text-align: center;
}
.subtitle { font-size: 14px; color: var(--text-dim); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem; text-align: center; }
.tabs-bar { display: flex; width: 100%; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.tab-btn {
  background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0.5rem 1.5rem; font-family: 'Cinzel', serif; font-size: 0.8rem;
  letter-spacing: 0.12em; color: var(--text-dim); cursor: pointer; transition: color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-view { width: 100%; }
.game-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; width: 100%; }
.resource-panel { display: flex; flex-direction: column; gap: 0.5rem; }
.resource-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  padding: 1rem 1.25rem; position: relative; overflow: hidden;
}
.resource-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.resource-label { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.25rem; }
.resource-value { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 600; color: var(--stone-light); line-height: 1; }
.resource-rate { font-size: 12px; color: var(--text-dim); margin-top: 0.25rem; }
.resource-rate span { color: var(--accent); }
.stone-icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 2.5rem; opacity: 0.15; }
.shop-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.shop-title {
  font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.2em;
  color: var(--text-dim); text-transform: uppercase; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.item-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  padding: 1rem 1.25rem; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 1rem; position: relative; overflow: hidden; transition: border-color 0.2s;
}
.item-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, #d4a84b08); pointer-events: none; }
.item-card.affordable { border-color: var(--stone-dark); }
.item-card.affordable:hover { border-color: var(--accent); }
.item-name { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--stone-light); margin-bottom: 0.2rem; }
.item-stats { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.item-stats .hl { color: var(--accent); }
.item-owned { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--text-dim); text-align: right; min-width: 2rem; }
.item-owned.has-some { color: var(--stone); }
.buy-btn {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.35rem 0.85rem; font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.08em; color: var(--text-dim); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.buy-btn.can-afford { border-color: var(--accent-dim); color: var(--accent); }
.buy-btn.can-afford:hover { background: var(--accent-dim); color: var(--stone-light); }
.buy-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.settings-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; }
.settings-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.save-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  padding: 0.4rem 1rem; font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.1em; color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.save-btn:hover { border-color: var(--text-dim); color: var(--text); }
.mult-selector { display: flex; gap: 4px; }
.mult-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  padding: 0.2rem 0.5rem; font-family: 'Cinzel', serif; font-size: 0.7rem;
  letter-spacing: 0.05em; color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.mult-btn:hover { border-color: var(--text-dim); color: var(--text); }
.mult-btn.active { border-color: var(--accent-dim); color: var(--accent); }

.mint-btn {
  width: 100%; background: var(--bg3); border: 1px solid var(--accent-dim);
  border-radius: 4px; padding: 0.6rem 1rem; font-family: 'Cinzel', serif;
  font-size: 0.85rem; letter-spacing: 0.1em; color: var(--accent);
  cursor: pointer; transition: all 0.15s;
}
.mint-btn:hover:not(:disabled) { background: var(--accent-dim); color: var(--stone-light); }
.mint-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border); color: var(--text-dim); }

.subtabs-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.subtab-btn {
  background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0.4rem 1.2rem; font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.1em; color: var(--text-dim); cursor: pointer; transition: color 0.15s;
}
.subtab-btn:hover { color: var(--text); }
.subtab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.subtab-btn.locked { color: var(--text-dim); opacity: 0.45; cursor: not-allowed; font-size: 0.65rem; letter-spacing: 0.05em; }
.subtab-btn.locked:hover { color: var(--text-dim); }

.auto-toggle-btn {
  background: transparent; border: 1px solid var(--accent-dim); border-radius: 3px;
  padding: 0.2rem 0.5rem; font-family: 'Cinzel', serif; font-size: 0.65rem;
  letter-spacing: 0.05em; color: var(--accent); cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.auto-toggle-btn.off { border-color: var(--border); color: var(--text-dim); }
.auto-toggle-btn:hover { opacity: 0.8; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  padding: 2rem 2rem 1.5rem; max-width: 420px; width: 90%;
  position: relative; overflow: hidden;
}
.modal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.modal-title {
  font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.15em;
  color: var(--accent); margin-bottom: 1rem;
}
.modal-body { font-size: 0.95rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 1.5rem; }
.modal-body strong { color: var(--text); }
.modal-buttons { display: flex; gap: 0.75rem; justify-content: flex-end; }
.modal-btn {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 3px;
  padding: 0.4rem 1.1rem; font-family: 'Cinzel', serif; font-size: 0.75rem;
  letter-spacing: 0.1em; color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.modal-btn:hover { border-color: var(--text-dim); color: var(--text); }
.modal-btn.primary { border-color: var(--accent-dim); color: var(--accent); }
.modal-btn.primary:hover { background: var(--accent-dim); color: var(--stone-light); }
.modal-btn.danger { border-color: #6b2a2a; color: #c06060; }
.modal-btn.danger:hover { background: #6b2a2a; color: var(--stone-light); }


.save-status { font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 0.75rem; }
.fever-bar-wrap {
  margin-top: 0.6rem;
  background: var(--border); border-radius: 2px; height: 4px; overflow: hidden;
}
.fever-bar-wrap.empty { opacity: 0.3; }
.fever-bar { background: linear-gradient(90deg, #d4a84b 0%, #c0392b 50%, #8b0000 100%); height: 4px; border-radius: 2px; transition: width 0.1s linear; }
.fever-label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  margin-top: 0.3rem; display: flex; justify-content: space-between;
}
.fever-label.empty { color: var(--text-dim); }

.subtab-btn.locked {
  opacity: 0.45; cursor: not-allowed; font-style: italic;
  border-bottom-color: transparent !important;
}
.subtab-btn.locked:hover { color: var(--text-dim); }

.offline-modal-box {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  padding: 2rem 2rem 1.5rem; max-width: 480px; width: 90%;
  position: relative; overflow: hidden;
}
.offline-modal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #6a9fd4, transparent);
}
.offline-title {
  font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.15em;
  color: #6ab4d4; margin-bottom: 0.75rem;
}
.offline-time {
  font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--stone-light);
  text-align: center; margin: 0.75rem 0;
}
.offline-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.5rem; margin: 1rem 0;
}
.offline-resource {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.6rem 0.9rem;
}
.offline-resource-label {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.15rem;
}
.offline-resource-value {
  font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--stone-light);
}
.offline-cap-note {
  font-size: 12px; color: #6ab4d4; text-align: center;
  margin-top: 0.5rem; letter-spacing: 0.05em;
}
@keyframes prestige-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 144, 255, 0); }
  50% { box-shadow: 0 0 0 6px rgba(180, 144, 255, 0.45); }
}
@keyframes tab-new-pulse {
  0%, 100% { color: var(--accent); text-shadow: 0 0 8px rgba(212,168,75,0.5); }
  50% { color: #f5d080; text-shadow: 0 0 16px rgba(212,168,75,0.9); }
}
.tab-btn.tab-new {
  animation: tab-new-pulse 1.2s ease-in-out infinite;
  border-bottom-color: var(--accent) !important;
}
.subtab-btn.tab-new {
  animation: tab-new-pulse 1.2s ease-in-out infinite;
  border-bottom-color: var(--accent) !important;
}
  0%, 100% { box-shadow: 0 0 4px 1px rgba(212, 168, 75, 0.3); opacity: 0.85; }
  50% { box-shadow: 0 0 10px 3px rgba(212, 168, 75, 0.7); opacity: 1; }
}
.mint-bar-auto-glow {
  animation: mint-auto-pulse 1s ease-in-out infinite;
}
.prestige-ready {
  animation: prestige-pulse 1.6s ease-in-out infinite;
  border-color: #c090ff !important;
  color: #e0c0ff !important;
}
.prestige-not-ready {
  border-color: #4a3560 !important;
  color: #6a5080 !important;
}
@keyframes ascension-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 60, 0); }
  50% { box-shadow: 0 0 0 6px rgba(240, 180, 60, 0.45); }
}
.ascension-ready {
  animation: ascension-pulse 1.6s ease-in-out infinite;
  border-color: #f0a030 !important;
  color: #f8d060 !important;
}
.ascension-not-ready {
  border-color: #4a3010 !important;
  color: #6a4820 !important;
}

/* ---- ACHIEVEMENTS ---- */
.achievements-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.achievement-counter-badge {
  font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.12em;
  color: var(--accent); background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 0.2rem 0.75rem;
}
.achievement-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem;
}
.achievement-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  padding: 0.85rem 1rem; display: flex; align-items: flex-start; gap: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.achievement-card.locked  { opacity: 0.38; }
.achievement-card.started { border-color: var(--stone-dark); }
.achievement-card.started:hover { border-color: var(--accent); }
.achievement-card.complete {
  border-color: var(--accent-dim);
  box-shadow: 0 0 8px #d4a84b22;
}
.achievement-card.complete:hover { border-color: var(--accent); box-shadow: 0 0 14px #d4a84b44; }
.achievement-card-icon {
  font-size: 1.6rem; line-height: 1; min-width: 2rem; text-align: center; margin-top: 0.1rem;
}
.achievement-card-body { flex: 1; min-width: 0; }
.achievement-card-name {
  font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--stone-light); margin-bottom: 0.3rem;
}
.achievement-card.locked .achievement-card-name { color: var(--text-dim); }
.achievement-card-dots {
  font-size: 0.75rem; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 0.25rem;
}
.achievement-card.locked .achievement-card-dots { color: var(--text-dim); opacity: 0.5; }
.achievement-card-progress { font-size: 12px; line-height: 1.4; }
.ach-next-label { color: var(--text-dim); }
.ach-complete-label { color: var(--accent); font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.1em; }

/* ---- ACHIEVEMENT TOAST ---- */
.achievement-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
  background: var(--bg2); border: 1px solid var(--accent-dim);
  border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 0.75rem 1rem;
  display: flex; align-items: center; gap: 0.75rem;
  box-shadow: 0 4px 24px #0008;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.4s, transform 0.4s;
  min-width: 220px; max-width: 300px;
}
.achievement-toast.visible { opacity: 1; transform: translateY(0); }
.achievement-toast-icon { font-size: 1.6rem; line-height: 1; }
.achievement-toast-label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.15rem;
}
.achievement-toast-name {
  font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.08em;
  color: var(--stone-light); margin-bottom: 0.1rem;
}
.achievement-toast-dots { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--accent); }

/* ---- CHALLENGES ---- */

/* Grid of challenge cells */
#challenge-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

.ch-cell {
  background: #0e151e;
  border: 2px solid #1e2d3d;
  border-radius: 8px;
  padding: 0.9rem 0.7rem 0.75rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  cursor: default;
  user-select: none;
}
.ch-clickable { cursor: pointer; }
.ch-clickable:hover { border-color: #3a7abf; background: #111d2a; }
.ch-locked   { opacity: 0.32; }
.ch-started  { border-color: #1e4a6a; }
.ch-active   { border-color: #e4a44a; background: #18120a; box-shadow: 0 0 12px #e4a44a33; }
.ch-max      { border-color: #2a6a3a; background: #0c1610; }
.ch-done-era { border-color: #2a4a2a; opacity: 0.65; }

.ch-cell-icon  { font-size: 1.5rem; line-height: 1; margin-bottom: 0.35rem; }
.ch-cell-name  {
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.04em;
  color: #8ab8d8; margin-bottom: 0.25rem; line-height: 1.3;
}
.ch-cell-badge {
  display: inline-block; font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; border-radius: 3px;
  padding: 0.08rem 0.35rem; margin-bottom: 0.5rem;
}
.badge-p { background: #1e3a5a; color: #6aaad4; }
.badge-a { background: #2e1e5a; color: #9a7ad4; }

/* Big completion counter */
.ch-cell-count {
  font-size: 2rem; font-weight: 700; line-height: 1;
  color: #7ab4d4; margin-bottom: 0.15rem;
}
.ch-cell-max  { font-size: 1rem; font-weight: 400; color: var(--text-dim); }
.ch-max .ch-cell-count { color: #4abf6a; }
.ch-active .ch-cell-count { color: #e4a44a; }

.ch-cell-dots { font-size: 0.75rem; letter-spacing: 0.15em; color: #2a6a9a; margin-bottom: 0.2rem; }
.ch-max .ch-cell-dots { color: #3a8a4a; }

.ch-cell-hint       { font-size: 0.65rem; color: var(--text-dim); font-style: italic; margin-top: 0.2rem; }
.ch-cell-active-label { font-size: 0.65rem; color: #e4a44a; font-weight: bold; letter-spacing: 0.1em; margin-top: 0.2rem; }
.ch-cell-max-label  { font-size: 0.65rem; color: #4abf6a; font-weight: bold; letter-spacing: 0.1em; margin-top: 0.2rem; }

/* Active challenge banner */
#challenge-active-banner {
  background: #100e08; border: 2px solid #8a6420;
  border-radius: 8px; padding: 0.9rem 1.1rem 0.85rem;
  margin-bottom: 0.8rem;
}
.ch-banner-header {
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem;
}
.ch-banner-icon  { font-size: 1.5rem; line-height: 1; }
.ch-banner-info  { flex: 1; }
.ch-banner-name  { font-family: 'Cinzel', serif; font-size: 0.95rem; color: #e4c484; }
.ch-banner-restr { font-size: 0.75rem; color: #e4a44a; margin-top: 0.1rem; }
.ch-banner-status {
  font-size: 0.65rem; font-weight: bold; letter-spacing: 0.15em;
  color: #8a6420; border: 1px solid #8a6420; border-radius: 3px;
  padding: 0.15rem 0.45rem; white-space: nowrap;
}
.ch-banner-status.done { color: #4abf6a; border-color: #4abf6a; }
.ch-banner-goal-label { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.5rem; }
.ch-banner-bar-wrap {
  height: 5px; background: #1e2a1a; border-radius: 3px; margin-bottom: 0.3rem; overflow: hidden;
}
.ch-banner-bar-fill {
  height: 100%; background: #5abf7a; border-radius: 3px;
  transition: width 0.3s ease; min-width: 2px;
}
.ch-banner-prog-text { font-size: 0.73rem; color: #7ab4d4; margin-bottom: 0.6rem; }
.ch-banner-btns  { display: flex; gap: 0.5rem; }
.ch-exit-btn     { font-size: 0.8rem; padding: 0.3rem 0.8rem; opacity: 0.4; cursor: not-allowed; }
.ch-exit-btn:not([disabled]) { opacity: 1; cursor: pointer; }
.ch-exit-btn.glow { box-shadow: 0 0 8px #4abf6a88; }
.ch-forfeit-btn  { font-size: 0.8rem; padding: 0.3rem 0.8rem; background: #5a1a1a; color: #e47a7a; border-color: #7a2a2a; }
.ch-forfeit-btn:hover { background: #7a2222; }