@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Cinzel:wght@400;600&display=swap');
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#0a0806;
  overflow:hidden;
  font-family:'Share Tech Mono', monospace;
  font-weight:bold;
  cursor:none;
  display:flex;
  flex-direction:row;
  height:100vh;
  width:100vw;
}

/* ── SIDEBAR ── */
#sidebar {
  width:260px;
  min-width:260px;
  height:100vh;
  background:#0d0b09;
  border-right:1px solid #2a1e10;
  display:flex;
  flex-direction:column;
  z-index:20;
  overflow-y:auto;
  overflow-x:hidden;
  pointer-events:all;
  cursor:auto;
}

#sidebar::-webkit-scrollbar { width:3px; }
#sidebar::-webkit-scrollbar-track { background:#0a0806; }
#sidebar::-webkit-scrollbar-thumb { background:#2a1e10; }

.sidebar-section {
  padding:14px 16px;
  border-bottom:1px solid #1a1208;
}

.sidebar-label {
  font-size:10px;
  letter-spacing:0.35em;
  color:#6a5a30;
  text-transform:uppercase;
  margin-bottom:8px;
}

#game-title {
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:18px;
  color:#c4a882;
  letter-spacing:0.4em;
  text-shadow:0 0 20px rgba(180,140,90,0.2);
  padding:18px 16px 12px;
  border-bottom:1px solid #1a1208;
}

/* Save section */
#save-section input {
  width:100%;
  background:#0a0806;
  border:1px solid #2a1e10;
  color:#a89878;
  font-family:'Share Tech Mono', monospace;
  font-size:12px;
  padding:5px 8px;
  letter-spacing:0.1em;
  margin-bottom:6px;
  outline:none;
}
#save-section input:focus { border-color:#6a5a3a; }
#save-section input::placeholder { color:#5a4a28; }
.save-btn {
  width:100%;
  background:transparent;
  border:1px solid #2a1e10;
  color:#8a7a4a;
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  padding:5px;
  letter-spacing:0.2em;
  cursor:pointer;
  transition:all 0.2s;
  margin-bottom:4px;
}
.save-btn:hover { border-color:#8a6a3a; color:#c4a882; }
#save-status { font-size:11px; color:#6a5a30; letter-spacing:0.1em; min-height:14px; margin-top:2px; }

/* Depth stats */
.stat-row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:5px;
}
.stat-label { font-size:11px; color:#7a6a3a; letter-spacing:0.15em; }
.stat-value { font-size:13px; color:#a89878; letter-spacing:0.1em; transition:color 0.4s; }
.stat-value.lit { color:#c4a882; }

/* Inventory */
.frag-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#c4a882;
  letter-spacing:0.08em;
  margin-bottom:5px;
  animation:fadeUp 0.4s ease;
}
.frag-row .frag-label { color:#8a7a4a; font-size:11px; }
.frag-row .frag-count { color:#c4a882; }
.frag-row.flash-collect .frag-count {
  animation: collectFlash 0.6s ease;
}
@keyframes collectFlash {
  0%   { color:#fff; text-shadow:0 0 12px #fff, 0 0 24px #c4a882; }
  100% { color:#c4a882; text-shadow:none; }
}
@keyframes fadeUp { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

/* Upgrades */
.upgrade-btn {
  display:none;
  width:100%;
  background:transparent;
  border:1px solid #2a1e10;
  color:#8a7a4a;
  font-family:'Share Tech Mono', monospace;
  font-size:11px;
  padding:6px 8px;
  letter-spacing:0.12em;
  cursor:pointer;
  transition:all 0.2s;
  text-align:left;
  margin-bottom:4px;
  line-height:1.5;
}
.upgrade-btn.visible { display:block; animation:fadeUp 0.5s ease; }
.upgrade-btn:hover:not(.cant-afford) { border-color:#8a6a3a; color:#c4a882; background:rgba(100,70,30,0.1); }
.upgrade-btn.cant-afford { opacity:0.5; cursor:default; filter:saturate(0.4); }

/* Bot panels */
.bot-card {
  background:#0a0806;
  border:1px solid #1e1408;
  padding:8px;
  margin-bottom:6px;
  animation:fadeUp 0.4s ease;
}
.bot-card-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.bot-name { font-size:11px; color:#a89878; letter-spacing:0.15em; }
.bot-status { font-size:10px; color:#6a5a30; letter-spacing:0.1em; }
.bot-status.active { color:#6a8a4a; }
.bot-status.paused { color:#8a4a2a; }
.bot-upgrade-row {
  display:flex;
  gap:3px;
  margin-top:4px;
}
.bot-upg-btn {
  flex:1;
  background:transparent;
  border:1px solid #2a1e10;
  color:#7a6a3a;
  font-family:'Share Tech Mono', monospace;
  font-size:9px;
  padding:3px 2px;
  cursor:pointer;
  letter-spacing:0.05em;
  transition:all 0.15s;
  text-align:center;
}
.bot-upg-btn:hover:not(.cant-afford) { border-color:#6a5a2a; color:#c4a882; }
.bot-upg-btn.cant-afford { opacity:0.5; cursor:default; filter:saturate(0.4); }
.bot-drag-hint { font-size:9px; color:#5a4a28; letter-spacing:0.1em; margin-top:4px; }

/* Messages */
#message-box {
  position:fixed;
  top:30%;
  left:calc(50vw + 130px);
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.35s;
  z-index:100;
}
#message-box.visible { opacity:1; }
#message-box.sticky { opacity:1 !important; }
#message-text {
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:13px;
  color:#e0c898;
  letter-spacing:0.3em;
  background:rgba(8,6,4,0.82);
  border:1px solid #5a4a28;
  padding:10px 22px;
  box-shadow:0 0 24px rgba(0,0,0,0.7), 0 0 12px rgba(180,140,90,0.15) inset;
  display:inline-block;
  white-space:nowrap;
}

/* Layer banner */
#layer-banner {
  position:fixed;
  top:40%;
  left:calc(50vw + 130px);
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.7s;
  z-index:101;
}
#layer-banner.visible { opacity:1; }
#layer-banner-inner {
  background:rgba(8,6,4,0.9);
  border:1px solid #5a4a28;
  padding:28px 56px;
  box-shadow:0 0 60px rgba(0,0,0,0.85), 0 0 24px rgba(180,140,90,0.08) inset;
}
#layer-banner-roman {
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:56px;
  color:#c4a882;
  letter-spacing:0.4em;
  padding-left:0.4em;
  text-shadow:0 0 40px rgba(180,140,90,0.35);
}
#layer-banner-divider {
  width:48px;
  height:1px;
  background:#5a4a28;
  margin:14px auto;
}
#layer-banner-name {
  font-family:'Cinzel', serif;
  font-weight:600;
  font-size:15px;
  color:#8a7a5a;
  letter-spacing:0.35em;
  padding-left:0.35em;
}

/* Hint */
#hint {
  position:fixed;
  top:50%;
  left:calc(50% + 130px);
  transform:translate(-50%,-50%);
  font-size:10px;
  color:#6a5a30;
  letter-spacing:0.25em;
  text-align:center;
  pointer-events:none;
  line-height:2;
  transition:opacity 1.5s;
  z-index:5;
}
#hint.hidden { opacity:0; }

/* Canvas wrapper */
#canvas-wrap {
  flex:1;
  position:relative;
  overflow:hidden;
}
#gameCanvas { display:block; position:absolute; top:0; left:0; }

/* Intro */
#intro {
  position:fixed; inset:0; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:300; gap:16px; transition:opacity 1.5s;
  cursor:auto;
}
#intro.fade-out { opacity:0; pointer-events:none; }
#intro h1 { font-family:'Cinzel', serif; font-weight:600; font-size:52px; color:#c4a882; letter-spacing:0.5em; padding-left:0.5em; text-shadow:0 0 40px rgba(180,140,90,0.25); }
#intro p { font-size:11px; color:#8a7a5a; letter-spacing:0.3em; padding-left:0.3em; text-align:center; line-height:2.4; }
#intro-btn {
  background:transparent; border:1px solid #5a4a3a;
  color:#a89878; font-family:'Share Tech Mono', monospace; font-size:11px;
  padding:10px 28px 10px calc(28px + 0.3em); letter-spacing:0.3em; transition:all 0.3s;
}
#intro-btn:hover { border-color:#c4a882; color:#c4a882; box-shadow:0 0 20px rgba(180,140,90,0.2); }

/* Save/Load modal */
#saveload-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.72);
  z-index:250;
  align-items:center;
  justify-content:center;
  cursor:auto;
}
#assets-panel, #dev-panel { cursor:auto; }
#saveload-overlay.open { display:flex; }
#saveload-modal {
  background:#0d0b09;
  border:1px solid #3a2a14;
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:268px;
  text-align:center;
  box-shadow:0 0 40px rgba(0,0,0,0.9), 0 0 20px rgba(180,140,90,0.06) inset;
}
#saveload-title {
  font-family:'Cinzel', serif;
  font-size:14px;
  color:#c4a882;
  letter-spacing:0.4em;
  margin-bottom:4px;
}
#saveload-modal input {
  background:#0a0806;
  border:1px solid #2a1e10;
  color:#a89878;
  font-family:'Share Tech Mono', monospace;
  font-size:12px;
  padding:7px 10px;
  letter-spacing:0.15em;
  outline:none;
  text-align:center;
  cursor:text;
}
#saveload-modal input:focus { border-color:#6a5a3a; }
#saveload-modal input::placeholder { color:#5a4a28; }
#saveload-status { font-size:11px; color:#6a5a30; letter-spacing:0.1em; min-height:14px; }
#saveload-confirm-text { font-size:10px; color:#a89878; letter-spacing:0.14em; line-height:1.9; }
#saveload-actions, #saveload-confirm { display:flex; flex-direction:column; gap:6px; }

/* Drag state */
body.dragging-bot { cursor:none !important; }
.drag-ghost {
  position:fixed; pointer-events:none; z-index:50;
  width:14px; height:14px; border-radius:50%;
  border:1px solid #c4a882;
  will-change:transform;
  box-shadow:0 0 10px rgba(180,140,90,0.4);
}

/* ── DEV TOOLS ──────────────────────────────────────────────────────────── */
#assets-toggle {
  position:fixed; bottom:12px; right:58px; z-index:200;
  background:#1a1510; border:1px solid #3a2e1a; color:#6a5a2a;
  font:9px "Share Tech Mono",monospace; letter-spacing:0.2em;
  padding:4px 8px; cursor:pointer;
}
#assets-toggle:hover { border-color:#6a5a2a; color:#c4a882; }
#assets-panel {
  display:none; position:fixed; bottom:40px; right:12px; z-index:199;
  background:#111008; border:1px solid #3a2e1a; padding:10px;
  font:9px "Share Tech Mono",monospace; color:#8a7a4a; letter-spacing:0.1em;
  width:280px; max-height:80vh; overflow-y:auto;
}
#assets-panel.open { display:block; }
#assets-panel canvas { display:block; }
#dev-toggle {
  position:fixed; bottom:12px; right:12px; z-index:200;
  background:#1a1510; border:1px solid #3a2e1a; color:#6a5a2a;
  font:9px "Share Tech Mono",monospace; letter-spacing:0.2em;
  padding:4px 8px; cursor:pointer;
}
#dev-toggle:hover { border-color:#6a5a2a; color:#c4a882; }
#dev-panel {
  display:none; position:fixed; bottom:40px; right:12px; z-index:199;
  background:#111008; border:1px solid #3a2e1a; padding:10px;
  font:9px "Share Tech Mono",monospace; color:#8a7a4a; letter-spacing:0.1em;
  width:200px; max-height:80vh; overflow-y:auto;
}
#dev-panel.open { display:block; }
.dev-section { margin-bottom:10px; }
.dev-label { color:#6a5a2a; margin-bottom:4px; letter-spacing:0.2em; font-size:8px; }
.dev-row { margin-bottom:3px; display:flex; align-items:center; gap:4px; }
.dev-row input[type=number] {
  background:#1a1510; border:1px solid #3a2e1a; color:#c4a882;
  font:9px "Share Tech Mono",monospace; width:54px; padding:2px 4px;
}
.dev-mat-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.dev-mat-row span { color:#8a7a4a; flex:1; }
.dev-mat-row button {
  background:none; border:1px solid #3a2e1a; color:#6a5a2a;
  font:8px "Share Tech Mono",monospace; padding:1px 4px; cursor:pointer; margin-left:2px;
}
.dev-mat-row button:hover { border-color:#6a5a2a; color:#c4a882; }
.dev-rate-row { display:flex; justify-content:space-between; margin-bottom:1px; }
.dev-rate-row span:first-child { color:#8a7a4a; }
.dev-rate-row span:last-child { color:#c4a060; }
/* ── END DEV TOOLS ───────────────────────────────────────────────────────── */