/* ============================================================
   ANIMIUM — "Deep Mine" skin  (default look)
   Loaded after styles.css. Everything here is scoped to
   html:not([data-skin="classic"]) so Settings → Classic disables it.
   Mine  = underground cavern / ore vein
   Upgrades = lamplit workbench & forge
   Cards = crystal shrine
   ============================================================ */

html:not([data-skin="classic"]) {
  --rock:      #2a2018;
  --rock-lo:   #17110c;
  --rock-hi:   #4a3a2c;
  --torch:     #ff9d3c;
  --torch-dim: #b56a24;
  --vein:      #37d6ff;
  --plank:     #3b2a1c;
  --brass:     #d9a441;
}

/* ---------- ground: layered rock strata + torch + animium glow ---------- */
html:not([data-skin="classic"]) body {
  background:
    radial-gradient(800px 500px at 12% -8%,  rgba(255,157,60,.20), transparent 60%),
    radial-gradient(900px 620px at 88% 4%,   rgba(55,214,255,.14), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(139,92,255,.16), transparent 60%),
    repeating-linear-gradient(178deg,
      rgba(255,255,255,.020) 0 2px,
      transparent 2px 5px,
      rgba(0,0,0,.10) 5px 8px,
      transparent 8px 46px),
    radial-gradient(2px 2px at 20% 30%, rgba(255,200,150,.15), transparent 60%),
    radial-gradient(2px 2px at 70% 60%, rgba(150,220,255,.12), transparent 60%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #0c0a12, #120d0c 40%, #0a0810);
  background-attachment: fixed;
}

/* ---------- HUD: carved stone lintel ---------- */
html:not([data-skin="classic"]) #hud {
  background:
    linear-gradient(180deg, rgba(74,58,44,.35), rgba(23,17,12,.75)),
    var(--panel);
  border-color: #4a3a2c;
  box-shadow:
    0 10px 32px -12px #000,
    inset 0 1px 0 rgba(255,200,150,.14),
    inset 0 -2px 6px rgba(0,0,0,.5);
}
html:not([data-skin="classic"]) .hud-brand {
  background: linear-gradient(90deg, var(--torch), #ffd27a, var(--vein));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255,157,60,.45));
}
html:not([data-skin="classic"]) .hud-stat {
  background: linear-gradient(180deg, rgba(74,58,44,.28), rgba(0,0,0,.30));
  border-color: #4a3a2c;
  box-shadow: inset 0 1px 0 rgba(255,200,150,.10);
}

/* ---------- NAV: hanging mine-shaft signs ---------- */
html:not([data-skin="classic"]) #nav button {
  background:
    linear-gradient(180deg, rgba(90,68,48,.30), rgba(20,14,10,.55)),
    var(--panel-2);
  border-color: #4a3a2c;
  box-shadow: inset 0 1px 0 rgba(255,210,160,.10), 0 4px 10px -6px #000;
}
html:not([data-skin="classic"]) #nav button:hover { color: #ffe6c8; }
html:not([data-skin="classic"]) #nav button.active {
  color: #fff;
  border-color: var(--torch);
  background:
    linear-gradient(180deg, rgba(255,157,60,.30), rgba(255,157,60,.06)),
    var(--panel-2);
  box-shadow: 0 0 0 1px var(--torch) inset, 0 10px 26px -12px var(--torch);
}

/* ---------- panels: hewn rock slabs ---------- */
html:not([data-skin="classic"]) .panel {
  background:
    linear-gradient(180deg, rgba(74,58,44,.14), rgba(10,8,12,.55)),
    var(--panel);
  border-color: #3a2c20;
  box-shadow:
    0 14px 40px -14px #000,
    inset 0 1px 0 rgba(255,200,150,.08),
    inset 0 0 60px rgba(0,0,0,.35);
}
html:not([data-skin="classic"]) .section-title {
  color: #d9b892;
}
html:not([data-skin="classic"]) .section-title::after {
  background: linear-gradient(90deg, #5a4436, transparent);
  height: 2px;
}

/* ============ MINE TAB — the cavern ============ */
html:not([data-skin="classic"]) .ore-stage {
  background:
    radial-gradient(460px 340px at 50% 46%, rgba(55,214,255,.20), transparent 70%),
    radial-gradient(300px 200px at 20% 8%, rgba(255,157,60,.16), transparent 65%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.22) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #1c1510, #0c0a0a 70%, #070606);
  border-color: #3a2c20;
  box-shadow: inset 0 0 80px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,210,160,.06);
}
/* jagged cave ceiling */
html:not([data-skin="classic"]) .ore-stage::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 34px;
  background: linear-gradient(180deg, #0a0708, transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px, #000 20px 44px, transparent 44px 52px);
          mask: repeating-linear-gradient(90deg, #000 0 16px, transparent 16px 20px, #000 20px 44px, transparent 44px 52px);
  pointer-events: none;
}
/* rubble floor */
html:not([data-skin="classic"]) .ore-stage::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background:
    radial-gradient(10px 8px at 15% 90%, #2a2018, transparent 70%),
    radial-gradient(14px 10px at 42% 96%, #221a12, transparent 70%),
    radial-gradient(9px 7px at 68% 92%, #2a2018, transparent 70%),
    radial-gradient(12px 9px at 88% 97%, #1c150e, transparent 70%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.5));
  pointer-events: none;
}

/* the ore — a raw crystal cluster wedged in rock */
html:not([data-skin="classic"]) .ore-btn {
  background:
    radial-gradient(circle at 34% 28%, #fff9, transparent 42%),
    radial-gradient(circle at 66% 74%, rgba(55,214,255,.6), transparent 52%),
    conic-gradient(from 210deg, var(--accent), var(--vein), var(--accent2), var(--accent));
  box-shadow:
    0 0 0 10px #1a130d,
    0 0 0 13px #2f2216,
    0 0 70px -4px var(--vein),
    0 0 30px rgba(255,157,60,.25),
    inset 0 -22px 55px rgba(0,0,0,.45),
    inset 0 22px 44px rgba(255,255,255,.22);
}
html:not([data-skin="classic"]) .ore-hint { color: #b79a7c; }
html:not([data-skin="classic"]) .ore-stage.hit .speedlines {
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 5deg, rgba(255,180,120,.10) 5deg 6deg);
}

/* survey boards */
html:not([data-skin="classic"]) .stat-card {
  background: linear-gradient(180deg, rgba(74,58,44,.20), rgba(0,0,0,.35));
  border-color: #3a2c20;
  box-shadow: inset 0 1px 0 rgba(255,200,150,.08);
}
html:not([data-skin="classic"]) .stat-row { border-bottom-color: #3a2c2088; }
html:not([data-skin="classic"]) .stat-row .k { color: #b79a7c; }
html:not([data-skin="classic"]) .toggle {
  background: linear-gradient(180deg, rgba(74,58,44,.22), rgba(0,0,0,.32));
  border-color: #3a2c20;
}

/* ============ UPGRADES TAB — the workbench ============ */
html:not([data-skin="classic"]) #panel-upgrades {
  background:
    linear-gradient(180deg, rgba(90,68,48,.16), rgba(10,8,10,.6)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 60px),
    var(--panel);
}
html:not([data-skin="classic"]) .shop-buy-modes button {
  background: linear-gradient(180deg, rgba(90,68,48,.30), rgba(0,0,0,.3));
  border-color: #4a3a2c; color: #c9ad8c;
}
html:not([data-skin="classic"]) .shop-buy-modes button.active {
  border-color: var(--brass); color: #fff;
  background: linear-gradient(180deg, rgba(217,164,65,.28), rgba(217,164,65,.05));
}
html:not([data-skin="classic"]) .shop-item {
  background:
    linear-gradient(180deg, rgba(90,68,48,.20), rgba(0,0,0,.34)),
    var(--panel-2);
  border-color: #4a3a2c;
  box-shadow: inset 0 1px 0 rgba(255,210,160,.08), 0 6px 16px -12px #000;
}
html:not([data-skin="classic"]) .shop-item.affordable {
  border-color: var(--torch);
  box-shadow: inset 0 1px 0 rgba(255,210,160,.12), 0 0 18px -8px var(--torch);
}
html:not([data-skin="classic"]) .si-ico {
  background: linear-gradient(160deg, rgba(255,210,160,.16), rgba(0,0,0,.4));
  border-color: #5a4436;
  box-shadow: inset 0 1px 0 rgba(255,220,180,.14);
}
html:not([data-skin="classic"]) .si-prod { color: #8fe3ff; }
html:not([data-skin="classic"]) .si-buy {
  background: linear-gradient(180deg, rgba(217,164,65,.34), rgba(217,164,65,.08));
  border-color: var(--brass);
  box-shadow: 0 4px 12px -8px var(--brass), inset 0 1px 0 rgba(255,235,200,.25);
}
html:not([data-skin="classic"]) .si-buy .cost.crystal { color: #ffe08a; }

/* ============ CARDS TAB — the crystal shrine ============ */
html:not([data-skin="classic"]) .cards-tabs button {
  background: linear-gradient(180deg, rgba(90,68,48,.26), rgba(0,0,0,.3));
  border-color: #4a3a2c; color: #c9ad8c;
}
html:not([data-skin="classic"]) .cards-tabs button.active {
  border-color: var(--accent); color: #fff;
  background: linear-gradient(180deg, rgba(139,92,255,.30), rgba(139,92,255,.06));
}
html:not([data-skin="classic"]) .summon-panel {
  background:
    radial-gradient(520px 280px at 50% -4%, rgba(255,157,60,.16), transparent 65%),
    radial-gradient(420px 300px at 50% 110%, rgba(55,214,255,.16), transparent 65%),
    var(--panel-2);
  border-color: #4a3a2c;
  box-shadow: inset 0 0 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,210,160,.1);
}
html:not([data-skin="classic"]) .banner-art {
  box-shadow: inset 0 0 70px rgba(0,0,0,.45), 0 0 0 2px rgba(255,210,160,.12), 0 0 34px -8px var(--vein);
}
html:not([data-skin="classic"]) .banner-title {
  background: linear-gradient(90deg, #ffd27a, #fff, var(--vein));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html:not([data-skin="classic"]) .summon-btn {
  box-shadow: 0 8px 22px -12px var(--gold), inset 0 1px 0 rgba(255,235,200,.25);
}
html:not([data-skin="classic"]) .ac {
  box-shadow: 0 10px 26px -12px #000, 0 0 0 1px rgba(255,210,160,.06) inset;
}

/* ============ meters ============ */
html:not([data-skin="classic"]) .combo-bar {
  background: #0a0706;
  border-color: #4a3a2c;
}
html:not([data-skin="classic"]) .combo-lbl { color: #b79a7c; }