@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;700;900&display=swap');

/* ===== ROOT ===== */
:root {
  /* ── BLACKS & SURFACES ─────────────────────────────── */
  --black:    #000000;   /* Void Black — logo background */
  --deep:     #080808;   /* Deep Black — panels, cards */
  --surface:  #0f0f0f;   /* Surface — elevated elements */
  --surface2: #161616;   /* Surface 2 — inputs, hovers */
  --border:   #222222;   /* Border — default */
  --border2:  #2a2a2a;   /* Border 2 — hover */

  /* ── BLOOD RED ──────────────────────────────────────── */
  --blood:    #8b0000;   /* Blood Red — primary accent */
  --blood2:   #cc0000;   /* Crimson — bright accent, glows */
  --ember:    #4a0000;   /* Ember — shadow accent, deep red */

  /* ── STEEL SILVER — new from logo ──────────────────── */
  --steel:    #8c9099;   /* Steel Silver — monogram, borders */
  --chrome:   #c4c8d0;   /* Chrome — highlights, headings */
  --iron:     #3a3d42;   /* Iron — dark steel, dividers */

  /* ── TEXT ───────────────────────────────────────────── */
  --bone:     #d4c9a8;   /* Bone White — primary text */
  --bone2:    #8a7d5e;   /* Ash Gold — secondary text */
  --ash:      #666666;   /* Ash — dimmed text */
  --smoke:    #444444;   /* Smoke — very dim */
  --text:     #d4c9a8;   /* Alias → bone */
  --textdim:  #8a7d5e;   /* Alias → bone2 */

  /* ── GOLD (kept for SoulBond/achievements) ──────────── */
  --gold:     #8b6914;   /* Deep Gold */
  --gold2:    #c9a84c;   /* Bright Gold — SND colour */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; height:100%; }
body { font-family:'Rajdhani',sans-serif; background:var(--black); color:var(--text); overflow-x:hidden; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--deep); }
::-webkit-scrollbar-thumb { background:var(--blood); border-radius:3px; }
::selection { background:var(--blood); color:var(--bone); }

/* ===== LAYOUT HELPERS ===== */
.container { max-width:1100px; margin:0 auto; padding:0 24px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.flex { display:flex; } .flex-center { display:flex; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-20{gap:20px;} .gap-24{gap:24px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;} .mb-20{margin-bottom:20px;}
.mb-24{margin-bottom:24px;} .mb-32{margin-bottom:32px;} .mb-40{margin-bottom:40px;} .mb-48{margin-bottom:48px;}
.p-16{padding:16px;} .p-24{padding:24px;} .p-32{padding:32px;}
.text-center { text-align:center; }
.hidden { display:none !important; }
.w-full { width:100%; }

@media (max-width: 640px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
}

/* ===== TYPOGRAPHY ===== */
.font-display { font-family:'Cinzel Decorative',serif; }
.font-heading  { font-family:'Cinzel',serif; }
.font-tech     { font-family:'Orbitron',monospace; }
.text-blood  { color:var(--blood2); }
.text-bone   { color:var(--bone); }
.text-dim    { color:var(--textdim); }
.text-gold   { color:var(--gold2); }
.text-steel  { color:var(--steel); }
.text-chrome { color:var(--chrome); }
.glow-blood  { text-shadow:0 0 20px rgba(204,0,0,.8),0 0 40px rgba(204,0,0,.4); }
.glow-steel  { text-shadow:0 0 16px rgba(196,200,208,.4),0 0 32px rgba(196,200,208,.2); }

/* ===== BUTTONS ===== */
.btn {
  display:inline-block; cursor:pointer; border:none;
  text-transform:uppercase; letter-spacing:2px;
  font-family:'Cinzel',serif; font-weight:700;
  transition:all .3s;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  text-decoration:none; position:relative; z-index:1;
}
.btn-blood { background:linear-gradient(135deg,var(--blood),#6b0000); color:var(--bone); border:1px solid var(--blood2); padding:12px 28px; font-size:13px; }
.btn-blood:hover { background:linear-gradient(135deg,var(--blood2),var(--blood)); box-shadow:0 0 20px rgba(200,0,0,.5); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--bone2); border:1px solid var(--border2); padding:12px 28px; font-size:13px; }
.btn-ghost:hover { border-color:var(--blood2); color:var(--blood2); }
.btn-sm { padding:7px 16px !important; font-size:11px !important; }
.btn-danger { background:rgba(139,0,0,.2); color:var(--blood2); border:1px solid rgba(139,0,0,.4); padding:7px 14px; font-size:11px; font-family:'Cinzel',serif; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.btn-danger:hover { background:rgba(204,0,0,.3); border-color:var(--blood2); }
.btn-success { background:rgba(0,150,60,.2); color:#00cc44; border:1px solid rgba(0,150,60,.4); padding:7px 14px; font-size:11px; font-family:'Cinzel',serif; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.btn-success:hover { background:rgba(0,200,60,.3); }

/* ===== CARDS ===== */
.card { background:var(--deep); border:1px solid var(--border); border-radius:2px; position:relative; overflow:hidden; }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--steel),var(--blood2),var(--steel),transparent); }

/* ===== BADGES ===== */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:1px; font-family:'Cinzel',serif; font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:700; }
.badge-founder { background:linear-gradient(135deg,#5c4a00,#8b6914); border:1px solid var(--gold2); color:var(--gold2); }
.badge-admin   { background:linear-gradient(135deg,#5c0000,#8b0000); border:1px solid var(--blood2); color:var(--blood2); }
.badge-veteran { background:linear-gradient(135deg,#1a1a2e,#16213e); border:1px solid #4a90d9; color:#4a90d9; }
.badge-member  { background:linear-gradient(135deg,#1a1a1a,#2a2a2a); border:1px solid var(--ash); color:var(--bone2); }
.badge-recruit { background:#0a0a0a; border:1px solid var(--smoke); color:var(--ash); }
.badge-banned  { background:#1a0000; border:1px solid #660000; color:#660000; }

/* ===== FORMS ===== */
input, select, textarea {
  position:relative; z-index:100;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text); padding:10px 14px;
  font-family:'Rajdhani',sans-serif; font-size:15px;
  outline:none; transition:border-color .2s;
  width:100%; border-radius:1px;
  -webkit-user-select:text; user-select:text;
  pointer-events:all !important; cursor:text; display:block;
}
select { cursor:pointer; }
input:focus, select:focus, textarea:focus {
  border-color:var(--blood); box-shadow:0 0 0 2px rgba(139,0,0,.2);
  outline:none; z-index:101;
}
input::placeholder, textarea::placeholder { color:var(--ash); }
label { font-family:'Cinzel',serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--bone2); display:block; margin-bottom:6px; }
.form-group { margin-bottom:18px; position:relative; z-index:100; }

/* ===== TABLES ===== */
table { width:100%; border-collapse:collapse; }
th { font-family:'Cinzel',serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--bone2); padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); background:var(--deep); }
td { padding:14px 16px; border-bottom:1px solid var(--border); font-size:15px; vertical-align:middle; }
tr:hover td { background:rgba(139,0,0,.05); }

/* ===== MISC ===== */
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--blood),var(--blood2),var(--blood),transparent); margin:40px 0; }
.section-header { text-align:center; margin-bottom:40px; }
.section-eyebrow { font-family:'Orbitron',monospace; font-size:10px; letter-spacing:4px; color:var(--blood); text-transform:uppercase; margin-bottom:12px; }
.section-title { font-family:'Cinzel Decorative',serif; font-size:clamp(16px,2.5vw,26px); color:var(--chrome); letter-spacing:3px; text-transform:uppercase; display:inline-block; }
.section-title::after { content:''; display:block; height:1px; background:linear-gradient(90deg,transparent,var(--steel),var(--blood2),transparent); margin-top:6px; }
.section-sub { font-family:'Rajdhani',sans-serif; font-size:15px; color:var(--ash); margin-top:10px; line-height:1.7; }
.stat-block { background:var(--surface); border:1px solid var(--border); padding:20px 24px; position:relative; overflow:hidden; }
.stat-block::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--blood),transparent); }
.notification {
  position: fixed !important;
  bottom: 80px !important;
  left: 24px !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 320px !important;
  z-index: 9999 !important;
  padding: 12px 20px !important;
  border: 1px solid !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  background: rgba(5,5,5,.97) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  animation: notifIn .3s ease !important;
  height: auto !important;
  min-height: unset !important;
  display: block !important;
}
.toggle { width:44px; height:24px; border-radius:12px; background:#2a2a2a; cursor:pointer; position:relative; transition:background .3s; border:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.toggle.on { background:#00cc44; } .toggle.on-blood { background:#cc0000; }
.toggle-knob { width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px; transition:left .3s; box-shadow:0 2px 4px rgba(0,0,0,.3); pointer-events:none; }
.toggle.on .toggle-knob,.toggle.on-blood .toggle-knob { left:22px; }

/* ===== STATUS DOTS ===== */
.status-dot { border-radius:50%; border:2px solid rgba(0,0,0,.5); flex-shrink:0; display:inline-block; }
.status-online  { background:#00cc44; box-shadow:0 0 8px #00cc44; }
.status-away    { background:#cc8800; box-shadow:0 0 8px #cc8800; }
.status-offline { background:#333; }

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes logoGlow { 0%,100%{box-shadow:0 0 20px rgba(139,0,0,.4),0 0 40px rgba(139,0,0,.2);}50%{box-shadow:0 0 40px rgba(204,0,0,.6),0 0 80px rgba(204,0,0,.3);} }
@keyframes titleReveal { from{opacity:0;transform:translateY(20px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);} }
@keyframes notifIn { from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);} }
@keyframes spin { to{transform:rotate(360deg);} }
@keyframes fadeIn { from{opacity:0;}to{opacity:1;} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);} }
@keyframes emberFloat { 0%{transform:translateY(0) translateX(0);opacity:.8;}50%{transform:translateY(-40vh) translateX(20px);opacity:.4;}100%{transform:translateY(-90vh) translateX(-10px);opacity:0;} }


/* ===== GLOBAL READABILITY ===== */
/* Only lift the truly invisible greys — stop before #555 which is intentional dim */

[style*="color:#2a2a2a"],
[style*="color: #2a2a2a"] { color: #777 !important; }

[style*="color:#333"],
[style*="color: #333"],
[style*="color:#333333"],
[style*="color: #333333"] { color: #888 !important; }

[style*="color:#444"],
[style*="color: #444"],
[style*="color:#444444"],
[style*="color: #444444"] { color: #999 !important; }

/* ===== FEED BUTTONS — bypass any override ===== */
.feed-react-btn,
.feed-reply-btn,
.feed-bookmark-btn,
.feed-delete-btn { color: #888 !important; background: none !important; }
.feed-react-btn:hover,
.feed-reply-btn:hover,
.feed-bookmark-btn:hover,
.feed-delete-btn:hover { color: #bbbbbb !important; }
.feed-delete-btn:hover { color: #cc0000 !important; }

/* Nav section labels */
.nav-section-label { color: #888888 !important; }

/* channel message dates */
.channel-msg-date { color: #888888 !important; }

@keyframes notifPulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }