/* TotemWall v1 — dark-neon-arcade tokens */
:root{
  /* base */
  --bg-deep:#0E0E10; --bg-panel:#1F1F23; --bg-card:#18181B; --bg-elev:#26262C;
  --line:#2E2E36; --line-hot:#3A3A44;
  --text-pri:#EFEFF1; --text-sec:#ADADB8; --text-mute:#6E6E78;
  /* factions */
  --crim:#FF1744; --crim-glow:#FF5252; --crim-trail:#FF8A80;
  --cob:#2979FF;  --cob-glow:#448AFF;  --cob-trail:#82B1FF;
  --tox:#76FF03;  --tox-glow:#B2FF59;  --tox-trail:#CCFF90;
  --volt:#FFEA00; --volt-glow:#FFFF00; --volt-trail:#FFFF8D;
  --myth:#D500F9; --myth-glow:#E040FB; --myth-trail:#EA80FC;
  /* brand */
  --bits:#9146FF; --bits-hot:#A970FF;
  --gold:#FFC107; --gold-deep:#FF8F00;
  --live:#FF1744; --ok:#00E676; --warn:#FFA000;
  /* fonts */
  --f-display:"Tomorrow","Segoe UI",system-ui,sans-serif;
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --f-mono:"JetBrains Mono","SF Mono",Menlo,monospace;
  /* motion */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:var(--f-ui);background:var(--bg-deep);color:var(--text-pri);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block}

/* faction utility */
.f-crim{--c:var(--crim);--g:var(--crim-glow);--t:var(--crim-trail)}
.f-cob{--c:var(--cob);--g:var(--cob-glow);--t:var(--cob-trail)}
.f-tox{--c:var(--tox);--g:var(--tox-glow);--t:var(--tox-trail)}
.f-volt{--c:var(--volt);--g:var(--volt-glow);--t:var(--volt-trail)}
.f-myth{--c:var(--myth);--g:var(--myth-glow);--t:var(--myth-trail)}

/* neon text shadows */
.glow{ text-shadow: 0 0 6px var(--g), 0 0 16px var(--c), 0 0 32px var(--c) }
.glow-bits{ text-shadow: 0 0 8px #9146FF, 0 0 24px #9146FF99 }
.glow-gold{ text-shadow: 0 0 8px var(--gold), 0 0 24px var(--gold-deep) }

/* live pulse */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 var(--live);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #FF174488}70%{box-shadow:0 0 0 10px #FF174400}100%{box-shadow:0 0 0 0 #FF174400}}

/* totem block */
.totem{
  position:relative;border-radius:4px;
  background:
    linear-gradient(180deg, var(--c) 0%, var(--t) 100%),
    var(--bg-elev);
  background-blend-mode:overlay;
  box-shadow: 0 0 0 1px #0006, 0 4px 16px #0009, 0 0 24px color-mix(in srgb, var(--g) 60%, transparent);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6px 8px;overflow:hidden;
  font-family:var(--f-ui);
}
.totem::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, transparent 30%, #ffffff22 50%, transparent 70%);
  pointer-events:none;
}
.totem .t-name{font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;text-shadow:0 1px 2px #000a}
.totem .t-amt{font-family:var(--f-mono);font-weight:700;color:#fff;text-shadow:0 1px 2px #000a;font-size:14px;line-height:1}

.t-minnow{width:32px;height:22px}
.t-minnow .t-name{display:none}.t-minnow .t-amt{font-size:10px}
.t-guppy{width:48px;height:30px}
.t-guppy .t-name{font-size:8px}.t-guppy .t-amt{font-size:11px}
.t-shark{width:80px;height:48px}
.t-shark .t-amt{font-size:16px}
.t-whale{width:128px;height:78px;padding:8px 10px}
.t-whale .t-amt{font-size:24px}
.t-whale .t-name{font-size:12px}
.t-leviathan{width:220px;height:130px;padding:14px 18px;border:1px solid var(--gold);box-shadow: 0 0 0 1px var(--gold), 0 8px 32px #000c, 0 0 48px color-mix(in srgb, var(--g) 70%, transparent), 0 0 24px var(--gold) inset}
.t-leviathan .t-amt{font-size:40px}
.t-leviathan .t-name{font-size:16px}
.t-leviathan::after{content:"♛";position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:18px;color:var(--gold);text-shadow:0 0 12px var(--gold)}

.decay-aging{opacity:.78;filter:saturate(.7)}
.decay-dying{opacity:.4;filter:saturate(.4) grayscale(.3);transform:rotate(-2deg)}

/* nav */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 24px;background:var(--bg-panel);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:.04em;color:#fff}
.brand-mark{width:28px;height:28px;display:grid;place-items:center;background:var(--bits);box-shadow:0 0 12px #9146FF88,inset 0 -2px 0 #0006;border-radius:6px;font-family:var(--f-display);font-weight:800;color:#fff}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:13px;color:var(--text-sec);font-weight:600;letter-spacing:.02em}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff;text-shadow:0 0 8px #9146FF99}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:4px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--f-ui);transition:transform .12s, box-shadow .12s;border:1px solid transparent}
.btn-bits{background:var(--bits);color:#fff;box-shadow:0 0 24px #9146FF55}
.btn-bits:hover{background:var(--bits-hot);box-shadow:0 0 32px #9146FFAA;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line-hot);color:var(--text-pri)}
.btn-ghost:hover{border-color:#fff}
.btn-faction{background:var(--c);color:#000;font-weight:800;box-shadow:0 0 24px color-mix(in srgb, var(--g) 70%, transparent)}

/* chip / pill */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-hot);background:var(--bg-card)}
.pill-live{border-color:var(--live);color:#fff;background:linear-gradient(90deg,#FF174433,transparent)}

/* hairline / panel */
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:6px}
.panel-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-sec)}

/* faction bar (Splatoon-style) */
.warbar{position:relative;height:14px;border-radius:7px;overflow:hidden;background:var(--bg-elev);border:1px solid var(--line)}
.warbar > span{position:absolute;top:0;bottom:0;display:block}

/* scanlines */
.scan::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* utility */
.row{display:flex;gap:16px;align-items:center}
.col{display:flex;flex-direction:column;gap:12px}
.mono{font-family:var(--f-mono)}
.display{font-family:var(--f-display);font-weight:800;letter-spacing:-.01em}
.caps{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.muted{color:var(--text-mute)}
.sec{color:var(--text-sec)}
.hr{height:1px;background:var(--line);margin:12px 0}

/* ============================================================
   LIGHT MODE — same UX/UI structure, white-canvas palette
   "We sell a wall. We are a canvas. Therefore we are white.
    Accents come from icons, faction colors, and the totem art."
   Toggle via [data-theme="light"] on <html>
   ============================================================ */
[data-theme="light"]{
  --bg-deep:#FFFFFF; --bg-panel:#FFFFFF; --bg-card:#FFFFFF; --bg-elev:#F5F5F7;
  --line:#E5E5EA; --line-hot:#D1D1D6;
  --text-pri:#0E0E10; --text-sec:#4B4B55; --text-mute:#8E8E93;
}

/* Default body — most pages override with their own radial bg.
   Per-file overrides handle those. */
[data-theme="light"] body{
  background:#FFFFFF;
  color:var(--text-pri);
}

/* ---------- topbar / nav ---------- */
[data-theme="light"] .topbar{
  background:#FFFFFF;
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .brand{color:var(--text-pri)}
[data-theme="light"] .brand-mark{box-shadow:0 1px 3px #9146FF33;}
[data-theme="light"] .nav-links a{color:var(--text-sec)}
[data-theme="light"] .nav-links a:hover{color:var(--text-pri)}
[data-theme="light"] .nav-links a.active{
  color:var(--bits);
  text-shadow:none;
  border-bottom:2px solid var(--bits);
  padding-bottom:2px;
}

/* ---------- panels / cards / chips ---------- */
[data-theme="light"] .panel{
  background:#FFFFFF;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
[data-theme="light"] .panel-head{
  color:var(--text-sec);
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .pill{
  background:#FFFFFF;
  border-color:var(--line);
  color:var(--text-pri);
}
[data-theme="light"] .pill-live{
  border-color:var(--live);
  color:var(--live);
  background:#FF174408;
}

/* ---------- buttons ---------- */
[data-theme="light"] .btn-bits{
  background:var(--bits);color:#fff;
  box-shadow:0 1px 2px #9146FF44, 0 4px 12px #9146FF22;
}
[data-theme="light"] .btn-bits:hover{
  box-shadow:0 2px 4px #9146FF55, 0 8px 20px #9146FF33;
}
[data-theme="light"] .btn-ghost{
  background:#FFFFFF;
  border-color:var(--line-hot);
  color:var(--text-pri);
}
[data-theme="light"] .btn-ghost:hover{
  border-color:var(--text-pri);
  background:var(--bg-elev);
}
[data-theme="light"] .btn-faction{
  color:#fff;
  box-shadow:0 2px 8px color-mix(in srgb, var(--c) 40%, transparent);
}

/* ---------- bars ---------- */
[data-theme="light"] .warbar{background:#F5F5F7;border-color:var(--line)}
[data-theme="light"] .hr{background:var(--line)}

/* ---------- scanlines / overlays ---------- */
[data-theme="light"] .scan::before{background:none}

/* ---------- glow text → solid color ---------- */
[data-theme="light"] .glow{text-shadow:none;color:var(--c)}
[data-theme="light"] .glow-bits{text-shadow:none;color:var(--bits)}
[data-theme="light"] .glow-gold{text-shadow:none;color:var(--gold-deep)}

/* ---------- totem blocks: keep neon gradient, tone down outer glow ----------
   The totems ARE the canvas art. They keep their saturated gradients.
   Only their soft outer halo is dialed back so the wall doesn't look
   like a fuzzy mess on white. Inner text-shadow stays (dark on color). */
[data-theme="light"] .totem{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.10),
    0 0 10px color-mix(in srgb, var(--g) 28%, transparent);
}
[data-theme="light"] .t-leviathan{
  border:1px solid var(--gold);
  box-shadow:
    0 0 0 1px var(--gold-deep),
    0 4px 16px rgba(0,0,0,.18),
    0 0 24px color-mix(in srgb, var(--g) 35%, transparent),
    0 0 18px var(--gold) inset;
}
[data-theme="light"] .t-leviathan::after{
  color:var(--gold-deep);
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* ---------- live dot pulse (keep red, slightly softer) ---------- */
/* (no change needed; red on white reads fine) */

/* ---------- form inputs (donor flow + dashboard) ---------- */
[data-theme="light"] input.ph-input,
[data-theme="light"] textarea.ph-msg{
  background:#FFFFFF;
  border:1px solid var(--line);
  color:var(--text-pri);
}
[data-theme="light"] input.ph-input:focus,
[data-theme="light"] textarea.ph-msg:focus{
  outline:none;border-color:var(--bits);
  box-shadow:0 0 0 3px #9146FF22;
}

/* ---------- Theme toggle button ---------- */
.theme-toggle{
  position:fixed;top:12px;right:16px;z-index:1000;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--line-hot);
  color:var(--text-pri);font-family:var(--f-ui);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 4px 16px #0006;
}
[data-theme="light"] .theme-toggle{
  background:#FFFFFF;
  border:1px solid var(--line-hot);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle .ico{font-size:14px;line-height:1}