/* ╔═══════════════════════════════════════════════════════════════════
     MYCELIUM THEME — additive only, scoped to [data-theme="mycelium"]
     Delete this file + its <link> in index.html to fully revert.
   ╚═══════════════════════════════════════════════════════════════════ */

/* ═════ Theme tokens ═════ */
:root[data-theme="mycelium"] {
  /* Warm earth base layers */
  --bg-base:        #120b06;
  --bg-surface:     #1a130d;
  --bg-elevated:    #241810;
  --bg-hover:       #2f2014;

  /* Amber accent (warm "money light") */
  --accent-primary: #e9a23b;
  --accent-dim:     #b97f26;
  --accent-glow:    rgba(233, 162, 59, 0.22);
  --accent-muted:   rgba(233, 162, 59, 0.08);

  /* Tweak functional colors to sit well on warm earth */
  --green-primary:  #84cc5c;
  --green-dim:      #5fa13e;
  --green-glow:     rgba(132, 204, 92, 0.18);
  --green-muted:    rgba(132, 204, 92, 0.08);

  --teal-primary:   #5eb5a6;
  --teal-dim:       #3f8c7e;
  --teal-glow:      rgba(94, 181, 166, 0.15);

  --text-primary:   #f4ead8;
  --text-secondary: #c9b690;
  --text-muted:     #7a6545;
  --border:         rgba(233, 162, 59, 0.18);
}

/* ═════ Living background (subtle, only in mycelium) ═════ */
:root[data-theme="mycelium"] body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(233,162,59,0.06), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(216,88,140,0.04), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(132,204,92,0.03), transparent 70%);
}

/* ═════ Mycelium hero slot ═════ */
#mycelium-hero { display: none; margin-bottom: 22px; }
:root[data-theme="mycelium"] #mycelium-hero { display: block; }

/* Hide the old summary-grid when mycelium is active — the hero replaces it */
:root[data-theme="mycelium"] .summary-grid { display: none; }

/* ═════ Flow hero ═════ */
.flow-hero {
  position: relative;
  border-radius: 24px;
  padding: 28px 32px 24px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, var(--accent-muted), transparent 70%),
    rgba(26, 19, 13, 0.95);
  border: 1px solid var(--border);
  box-shadow:
    0 12px 48px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(244, 234, 216, 0.03),
    0 0 60px -20px var(--accent-glow);
  overflow: hidden;
}
.flow-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 30%, rgba(233,162,59,0.12), transparent 40%),
    radial-gradient(circle at 90% 70%, rgba(216,88,140,0.08), transparent 40%);
  pointer-events: none;
}

.flow-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px;
  position: relative; z-index: 2;
}
.flow-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent-primary);
}
.flow-title {
  font-size: 22px; font-weight: 700;
  color: var(--text-primary); margin: 4px 0 0;
}

/* ═════ River ═════ */
.river { position: relative; min-height: 260px; z-index: 2; }

.river-topline {
  display: grid;
  grid-template-columns: 190px 1fr 190px;
  align-items: center;
  gap: 12px;
  position: relative; z-index: 4;
}

.bank {
  flex-shrink: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  position: relative; z-index: 2;
}
.bank-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted); margin-bottom: 6px;
}
.bank-value {
  font-size: 30px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
}
.bank-value .money-input {
  background: transparent; border: 1px dashed var(--accent-primary);
  color: inherit; font: inherit;
  width: 120px; padding: 2px 6px; border-radius: 4px;
  outline: none;
}
.bank-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.bank.income .bank-value { color: var(--green-primary); }
.bank.out .bank-value { color: var(--accent-primary); }

.river-stem {
  position: relative;
  height: 64px;
  display: flex; align-items: center;
}
.river-stem-track {
  position: absolute; inset: 0;
  display: flex; align-items: center;
}
.river-stem-track::before {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 18px;
  top: 50%; transform: translateY(-50%);
  background: linear-gradient(90deg,
    var(--green-primary) 0%,
    var(--accent-primary) 50%,
    #d8588c 100%);
  opacity: 0.15;
  border-radius: 9px;
  box-shadow: 0 0 20px var(--accent-glow);
}
.river-stem-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* ═════ Tributaries ═════ */
.tributaries {
  display: grid;
  grid-template-columns: 190px 1fr 190px;
  gap: 12px;
  position: relative; z-index: 3;
}
.tributaries-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 4px;
  gap: 6px;
}
.tributary {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  cursor: grab;
  position: relative;
  padding-top: 8px;
  user-select: none;
}
.tributary:active { cursor: grabbing; }
.tributary-drop {
  width: 2px; height: 22px;
  background: linear-gradient(180deg, var(--bucket-color, var(--accent-primary)) 0%, transparent 100%);
  opacity: 0.5;
  margin-top: -4px;
}
.tributary-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--bucket-tint, rgba(255,255,255,0.06));
  border: 1px solid var(--bucket-color, var(--accent-primary));
  display: flex; align-items: center; justify-content: center;
  color: var(--bucket-color, var(--accent-primary));
  transition: transform 0.18s, box-shadow 0.18s;
}
.tributary-icon svg { width: 26px; height: 26px; }
.tributary:hover .tributary-icon {
  transform: scale(1.08);
  box-shadow: 0 0 20px -4px var(--bucket-color);
}
.tributary-name {
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.tributary-amount {
  font-size: 13px; font-weight: 700;
  color: var(--bucket-color, var(--text-primary));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tributary-drag {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.18s;
}
.tributary:hover .tributary-drag { opacity: 1; }

/* ═════ Mobile ═════ */
@media (max-width: 720px) {
  .river-topline { grid-template-columns: 1fr; gap: 8px; }
  .tributaries { grid-template-columns: 1fr; }
  .river-stem { height: 48px; }
  .tributaries-row { flex-wrap: wrap; gap: 14px 6px; }
  .tributary { flex: 0 0 calc(25% - 6px); }
  .bank { text-align: left !important; }
}