@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@500;600;700&display=swap");

:root {
  --ink: #0c0906;
  --coal: #15100b;
  --rock: #211a13;
  --panel: #1b150f;
  --panel-2: #251d15;
  --paper: #eee1c5;
  --muted: #a99a82;
  --gold: #ffc532;
  --gold-2: #e79512;
  --orange: #e9681f;
  --green: #7dc76d;
  --red: #e85c4a;
  --line: rgba(255, 220, 155, .13);
  --hard-line: rgba(255, 197, 50, .28);
  --shadow: 0 20px 55px rgba(0, 0, 0, .42);
  font-family: Inter, "Segoe UI", sans-serif;
  color: var(--paper);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 18% 0, rgba(230, 112, 25, .12), transparent 30%),
    repeating-linear-gradient(118deg, transparent 0 70px, rgba(255,255,255,.018) 72px 73px),
    #0b0805;
}

body[data-theme="light"] {
  --ink: #eee2ca;
  --coal: #dfd0b3;
  --rock: #d3c09e;
  --panel: #eadcc2;
  --panel-2: #f4e9d4;
  --paper: #24190e;
  --muted: #75624a;
  --line: rgba(56, 35, 12, .14);
  --hard-line: rgba(156, 91, 7, .35);
  --shadow: 0 18px 45px rgba(77, 49, 16, .16);
  background: #cdbb9b;
}

button, input, select { font: inherit; }
button { color: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand-mark strong, .hud-chip strong {
  font-family: "Barlow Condensed", Impact, sans-serif;
  letter-spacing: .035em;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(520px, 2fr) minmax(320px, 1.1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 9, 6, .92);
  backdrop-filter: blur(18px);
}

body[data-theme="light"] .topbar { background: rgba(238, 226, 202, .92); }

.brand-mark {
  display: flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.brand-mark small, .brand-mark strong { display: block; }
.brand-mark small { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; }
.brand-mark strong { color: var(--gold); font-size: 1.55rem; line-height: .95; }
.brand-pick { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--hard-line); background: #23170b; font-size: 1.45rem; transform: rotate(-8deg); }

.hud, .actions, .mine-stats, .buy-modes { display: flex; gap: 8px; }
.hud { justify-content: center; }
.actions { justify-content: flex-end; flex-wrap: wrap; }

.hud-chip {
  min-width: 120px;
  padding: 8px 12px;
  border-left: 2px solid var(--line);
}
.hud-chip span { display: block; color: var(--muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.hud-chip strong { display: inline-flex; align-items: baseline; gap: 6px; color: var(--paper); font-size: 1.35rem; line-height: 1; }
.hud-chip small { color: var(--muted); font-size: .62rem; }
.hud-chip.gold-total strong { color: var(--gold); font-size: 1.6rem; }
.gold-nugget { font-size: .72rem; transform: rotate(14deg); }
.contract-clock strong { color: var(--orange); }

.tool-button, .mode-button, .mini-action, .menu-primary, .menu-secondary {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #20170f;
  color: var(--paper);
  font-weight: 800;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.tool-button { padding: 0 12px; font-size: .75rem; text-transform: uppercase; }
.tool-button:hover, .mini-action:hover, .menu-secondary:hover { border-color: var(--gold); transform: translateY(-1px); }
.menu-tool { border-color: var(--hard-line); color: var(--gold); }
.subtle-tool { color: var(--muted); }

.mine-layout {
  display: grid;
  grid-template-columns: minmax(570px, 1.55fr) minmax(390px, 1fr);
  grid-template-areas: "mine production" "ops production" "upgrades upgrades";
  gap: 16px;
  padding: 16px;
  max-width: 1800px;
  margin: auto;
}

.mine-panel { grid-area: mine; }
.production-panel { grid-area: production; }
.operations-panel { grid-area: ops; }
.upgrade-panel { grid-area: upgrades; }

.panel-shell, .mine-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%), var(--panel);
  box-shadow: var(--shadow);
}
.panel-shell { padding: 18px; }
.mine-panel { padding: 18px; }

.mine-heading, .panel-head, .secondary-head, .fixture-card header, .building-card header, .upgrade-card header, .contract-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.mine-heading h1, .panel-head h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.eyebrow { margin: 0 0 4px; color: var(--gold-2); font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .17em; }
.shift-light { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.shift-light i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px var(--green); }

.mine-stage {
  position: relative;
  min-height: 570px;
  margin-top: 14px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #302419;
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 183, 69, .28), transparent 23%),
    radial-gradient(ellipse at 50% 65%, rgba(143, 67, 22, .16), transparent 46%),
    repeating-linear-gradient(27deg, transparent 0 45px, rgba(255,255,255,.018) 47px 49px),
    linear-gradient(#1c140d, #090705 85%);
  perspective: 800px;
}
.mine-stage::before, .mine-stage::after { content: ""; position: absolute; z-index: -1; background: #080604; box-shadow: inset 0 0 70px #000; }
.mine-stage::before { inset: 0 auto 0 0; width: 23%; clip-path: polygon(0 0, 100% 0, 65% 18%, 82% 35%, 52% 56%, 75% 77%, 45% 100%, 0 100%); }
.mine-stage::after { inset: 0 0 0 auto; width: 23%; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 23% 75%, 46% 55%, 16% 32%, 38% 14%); }

.tunnel-beam { position: absolute; top: 0; bottom: 0; width: 18px; z-index: 1; background: linear-gradient(90deg, #2d1a0c, #75502c 44%, #251509); box-shadow: 0 0 0 2px #120b05, 10px 0 26px rgba(0,0,0,.5); }
.beam-left { left: 13%; transform: rotate(-2deg); }
.beam-right { right: 13%; transform: rotate(2deg); }
.tunnel-beam::after { content: ""; position: absolute; top: 24px; left: -260%; width: 620%; height: 18px; background: inherit; box-shadow: inherit; }
.hanging-lamp { position: absolute; top: 25px; left: 50%; z-index: 4; width: 76px; height: 30px; transform: translateX(-50%); border-radius: 50% 50% 12px 12px; background: #2a2118; border: 2px solid #56422c; }
.hanging-lamp::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 32px; background: #42311f; }
.hanging-lamp i { position: absolute; inset: 15px 15px -8px; border-radius: 50%; background: #ffd263; box-shadow: 0 0 18px #ffb52d, 0 28px 60px rgba(255,177,50,.45); }

.rail-floor { position: absolute; left: 26%; right: 26%; bottom: -20px; height: 175px; transform: rotateX(62deg); background: linear-gradient(90deg, transparent 14%, #56432d 15% 18%, transparent 19% 81%, #56432d 82% 85%, transparent 86%); }
.rail-floor i { display: block; height: 10px; margin-top: 27px; background: #473522; box-shadow: 0 2px 0 #0a0805; }

.ore-button {
  position: absolute;
  inset: 84px 15% 88px;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--paper);
}
.ore-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 8px; }
.ore-button:active .ore-rock { transform: translate(-50%, -48%) scale(.96) rotate(-1deg); filter: brightness(1.24); }

.ore-rock {
  position: absolute;
  left: 50%; top: 49%;
  width: min(330px, 70%); aspect-ratio: 1.1;
  transform: translate(-50%, -50%);
  border: 5px solid #090604;
  border-radius: 42% 56% 47% 38% / 49% 38% 58% 44%;
  background:
    radial-gradient(circle at 67% 28%, #9b6a21 0 3%, transparent 4%),
    radial-gradient(circle at 31% 67%, #71511e 0 4%, transparent 5%),
    radial-gradient(circle at 53% 47%, #42372b, #1e1b18 64%, #0c0a08 100%);
  box-shadow: inset 18px 14px 30px rgba(255,255,255,.05), inset -24px -26px 38px #050403, 0 34px 60px #000;
  transition: transform .09s ease, filter .09s ease;
}
.ore-rock::before, .ore-rock::after { content: ""; position: absolute; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(255,197,50,.8), 28px 18px 0 -5px #bd730d, 51px -8px 0 -7px #ffdb5c; }
.ore-rock::before { width: 18px; height: 12px; left: 23%; top: 27%; transform: rotate(-28deg); }
.ore-rock::after { width: 14px; height: 17px; right: 22%; bottom: 25%; transform: rotate(38deg); }
.vein { position: absolute; display: block; height: 8px; border-radius: 50%; background: linear-gradient(90deg, transparent, #d68a13 12%, #ffd451 45%, #a65b08 80%, transparent); box-shadow: 0 0 12px rgba(255,191,38,.5); transform-origin: left center; }
.vein-a { width: 54%; left: 12%; top: 43%; transform: rotate(19deg); }
.vein-b { width: 39%; left: 43%; top: 56%; transform: rotate(-36deg); }
.vein-c { width: 31%; left: 26%; top: 65%; transform: rotate(64deg); }
.vein-d { width: 26%; left: 54%; top: 28%; transform: rotate(112deg); }

.pickaxe { position: absolute; z-index: 5; width: 112px; height: 180px; transform-origin: 50% 78%; pointer-events: none; }
.pickaxe i { position: absolute; left: 51px; top: 32px; width: 13px; height: 145px; border: 2px solid #2b160a; border-radius: 8px; background: linear-gradient(90deg, #603313, #c5853d 48%, #5a2c0f); }
.pickaxe::before { content: ""; position: absolute; left: 7px; top: 14px; width: 101px; height: 30px; border-radius: 70% 12% 18% 60%; background: linear-gradient(#c4ccd0, #656f73 50%, #343b3e); box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); transform: rotate(-7deg); }
.pickaxe-left { left: 3%; top: 18%; transform: rotate(-39deg); }
.pickaxe-right { right: 3%; top: 15%; transform: rotate(43deg) scaleX(-1); }
.ore-button:active .pickaxe-left { animation: strike-left .22s ease-out; }
.ore-button:active .pickaxe-right { animation: strike-right .22s ease-out; }
@keyframes strike-left { 50% { transform: rotate(1deg); } }
@keyframes strike-right { 50% { transform: rotate(-1deg) scaleX(-1); } }

.strike-copy { position: absolute; left: 50%; bottom: -2px; z-index: 7; transform: translateX(-50%); min-width: 190px; padding: 9px 18px; border: 1px solid var(--hard-line); background: rgba(12,8,4,.88); box-shadow: 0 8px 30px #000; }
.strike-copy strong, .strike-copy small { display: block; }
.strike-copy strong { color: var(--gold); font: 800 1.2rem "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.strike-copy small { color: var(--muted); margin-top: 2px; font-size: .64rem; text-transform: uppercase; }
.depth-marker { position: absolute; left: 18px; bottom: 15px; z-index: 4; border-left: 3px solid var(--orange); padding-left: 10px; }
.depth-marker span, .depth-marker strong { display: block; }
.depth-marker span { color: var(--muted); font-size: .58rem; letter-spacing: .15em; }
.depth-marker strong { font: 800 1.25rem "Barlow Condensed", sans-serif; }
.click-burst { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.click-float { position: absolute; left: 50%; top: 45%; color: #fff1ac; font: 900 1.45rem "Barlow Condensed", sans-serif; text-shadow: 0 0 12px #ff9d00, 0 3px 2px #000; white-space: nowrap; transform: translate(-50%, -50%); }

.mine-message { margin: 12px 0; color: var(--muted); font-size: .82rem; }
.mine-stats { display: grid; grid-template-columns: repeat(5, 1fr); }
.summary-card { min-width: 0; padding: 10px 12px; border-left: 2px solid var(--line); background: rgba(255,255,255,.018); }
.summary-card span, .ledger-grid span { display: block; color: var(--muted); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.summary-card strong, .ledger-grid strong { display: block; margin-top: 4px; font: 800 1.05rem "Barlow Condensed", sans-serif; }

.production-panel { max-height: calc(100vh - 104px); position: sticky; top: 88px; display: flex; flex-direction: column; }
.panel-head > span { color: var(--muted); font-size: .72rem; }
.buy-modes { gap: 4px; }
.mode-button { min-width: 44px; padding: 0 9px; }
.mode-button::before { content: "×"; }
.mode-button.active { color: #211304; border-color: var(--gold); background: var(--gold); }
.building-list, .upgrade-list, .contract-offers { display: grid; gap: 7px; }
.building-list { overflow-y: auto; padding-right: 5px; margin-top: 14px; }

.building-card, .upgrade-card, .contract-card {
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.022);
  cursor: pointer;
  transition: border-color .14s, transform .14s, background .14s;
}
.building-card:hover, .upgrade-card:hover, .contract-card:hover { transform: translateX(2px); border-color: var(--hard-line); background: rgba(255,197,50,.045); }
.building-card.buyable, .upgrade-card.buyable, .contract-card.buyable { border-left: 3px solid var(--gold); }
.building-card.locked, .upgrade-card.locked, .contract-card.locked { opacity: .48; filter: saturate(.4); }
.item-title { display: flex; gap: 10px; align-items: center; min-width: 0; }
.item-icon { display: grid; place-items: center; flex: 0 0 39px; height: 39px; color: var(--gold); border: 1px solid var(--hard-line); background: #16100a; font: 800 .95rem "Barlow Condensed", sans-serif; }
.item-price, .contract-metric { color: var(--gold); font: 800 1rem "Barlow Condensed", sans-serif; white-space: nowrap; }
.building-card .meta, .upgrade-card .meta, .contract-card .meta { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; color: var(--muted); font-size: .7rem; }
.item-title strong, .contract-card strong { font: 800 1rem "Barlow Condensed", sans-serif; }

.operations-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 12px; margin-top: 14px; }
.contract-panel, .ledger-panel { padding: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.13); }
.secondary-head h3 { margin: 0; font-size: 1.05rem; }
.small-copy { margin: 7px 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.mini-action { min-height: 34px; padding: 0 12px; color: var(--gold); }
.active-contract { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold) !important; }
.ledger-seal { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--hard-line); border-radius: 50%; color: var(--gold); font: 800 .7rem serif; }
.ledger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.ledger-grid > div { padding: 8px; border-bottom: 1px solid var(--line); }
.residue-bar { height: 7px; margin-top: 12px; background: #0b0805; overflow: hidden; }
.residue-fill { height: 100%; width: 0; background: linear-gradient(90deg, #765728, var(--gold), #fff0a4); box-shadow: 0 0 10px var(--gold); }
.bailout-panel { margin-top: 12px; padding: 10px; border: 1px solid rgba(232,92,74,.4); }

.upgrade-panel { margin-bottom: 18px; }
.upgrade-list { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }

.menu-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(5,3,2,.82); backdrop-filter: blur(12px); }
.menu-overlay[hidden] { display: none; }
.menu-card { width: min(560px, 100%); padding: 36px; text-align: center; border: 1px solid var(--hard-line); background: radial-gradient(circle at 50% 0, rgba(255,197,50,.12), transparent 38%), #15100b; box-shadow: 0 40px 100px #000; }
.menu-emblem { width: 94px; height: 94px; margin: auto auto 18px; display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 2.8rem; box-shadow: inset 0 0 25px rgba(255,197,50,.1), 0 0 35px rgba(255,197,50,.11); }
.menu-card h1 { margin-bottom: 8px; color: var(--gold); font-size: clamp(2.6rem, 8vw, 4.5rem); line-height: .9; }
.menu-copy, .menu-status { color: var(--muted); line-height: 1.5; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 12px; }
.menu-primary, .menu-secondary { padding: 12px; }
.menu-primary { grid-column: 1 / -1; color: #211304; border-color: var(--gold); background: linear-gradient(#ffdb62, #eaa218); }
.menu-secondary.danger { color: #f38675; border-color: rgba(232,92,74,.32); }

@media (max-width: 1280px) {
  .topbar { grid-template-columns: auto 1fr; }
  .actions { grid-column: 1 / -1; justify-content: center; }
  .mine-layout { grid-template-columns: 1fr 1fr; }
  .upgrade-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .topbar { position: relative; grid-template-columns: 1fr; }
  .hud, .actions { justify-content: flex-start; overflow-x: auto; }
  .actions { grid-column: auto; }
  .mine-layout { grid-template-columns: 1fr; grid-template-areas: "mine" "production" "ops" "upgrades"; }
  .production-panel { position: static; max-height: none; }
  .building-list { max-height: 620px; }
}

@media (max-width: 650px) {
  .mine-layout { padding: 8px; }
  .mine-panel, .panel-shell { padding: 12px; }
  .mine-stage { min-height: 450px; }
  .ore-button { left: 5%; right: 5%; }
  .pickaxe { transform: scale(.76) rotate(-39deg); }
  .pickaxe-right { transform: scaleX(-1) scale(.76) rotate(43deg); }
  .mine-stats, .operations-grid, .upgrade-list { grid-template-columns: 1fr 1fr; }
  .operations-grid { grid-template-columns: 1fr; }
  .summary-card:last-child { grid-column: 1 / -1; }
  .menu-actions { grid-template-columns: 1fr; }
  .menu-primary { grid-column: auto; }
}