@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 — Reaper Inc. Official Colours =====
   Source: Business Card / Official Logo
   Black · Purple · Steel Silver
   ================================================ */
:root {
  /* ── BLACKS & SURFACES ─────────────────────────────── */
  --black:    #000000;   /* Void Black */
  --deep:     #080808;   /* Deep Black — panels */
  --surface:  #0a0a0a;   /* Surface — cards */
  --surface2: #111111;   /* Surface 2 — inputs, hovers */
  --border:   rgba(168,85,247,.15);  /* Purple-tinted border */
  --border2:  rgba(168,85,247,.30);  /* Border hover */

  /* ── PURPLE — primary accent ────────────────────────── */
  --blood:    #6b21a8;   /* Deep Purple — primary */
  --blood2:   #a855f7;   /* Electric Violet — bright */
  --ember:    #3b0764;   /* Void Purple — deep shadow */
  --glow:     rgba(168,85,247,.25);
  --muted:    rgba(107,33,168,.15);

  /* ── STEEL SILVER ───────────────────────────────────── */
  --steel:    #8c9099;   /* Steel Silver — R monogram, borders */
  --chrome:   #c4c8d0;   /* Chrome — headings, highlights */
  --iron:     #1e1e1e;   /* Iron — dark dividers */

  /* ── TEXT ───────────────────────────────────────────── */
  --bone:     #ffffff;   /* Primary text — white */
  --bone2:    #94a3b8;   /* Secondary text — silver grey */
  --ash:      #64748b;   /* Dimmed text */
  --smoke:    #374151;   /* Very dim */
  --text:     #ffffff;
  --textdim:  #94a3b8;

  /* ── GOLD (SoulBond / achievements) ─────────────────── */
  --gold:     #92400e;
  --gold2:    #f59e0b;
}

* { 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(--blood2); color:#fff; }

/* ===== 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(168,85,247,.8),0 0 40px rgba(168,85,247,.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),#3b0764); color:#fff; 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(168,85,247,.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(107,33,168,.2); color:var(--blood2); border:1px solid rgba(107,33,168,.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(168,85,247,.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,#1e0a3c,#2d1a4a); 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(107,33,168,.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(107,33,168,.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(--blood2); 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(--blood2),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:#6b21a8; }
.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(107,33,168,.4),0 0 40px rgba(107,33,168,.2);}50%{box-shadow:0 0 40px rgba(168,85,247,.6),0 0 80px rgba(168,85,247,.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: #a855f7 !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;} }

/* ============================================================
   AVATAR ANIMATIONS — Dynasty Cosmetic System
   Applied via .av-anim-{name} on the avatar wrapper
   ============================================================ */

/* Shared wrapper — overflow visible so glows bleed, contained by flex layout */
.av-anim-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  isolation: isolate;
}
.av-anim-wrap::before,
.av-anim-wrap::after { pointer-events: none; }
.av-anim-wrap img,
.av-anim-wrap .av-initials {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

/* ── BLOOD SMOKE ─────────────────────────────────────────── */
@keyframes bloodSmokeRing {
  0%   { transform: scale(1);    opacity: .7; }
  50%  { transform: scale(1.15); opacity: .3; }
  100% { transform: scale(1);    opacity: .7; }
}
@keyframes bloodSmokeDrift {
  0%,100% { transform: translateY(0) scaleX(1);  opacity: .5; }
  50%     { transform: translateY(-4px) scaleX(1.1); opacity: .2; }
}
.av-anim-blood-smoke::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,0,0,.6) 0%, rgba(60,0,0,.2) 60%, transparent 100%);
  animation: bloodSmokeRing 2.5s ease-in-out infinite;
  z-index: 0;
}
.av-anim-blood-smoke::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(100,0,0,.15) 70%, transparent 100%);
  animation: bloodSmokeDrift 3s ease-in-out infinite;
  z-index: 0;
}

/* ── EMBER RING ───────────────────────────────────────────── */
@keyframes emberSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes emberPulse {
  0%,100% { opacity: .8; transform: rotate(0deg) scale(1); }
  50%     { opacity: .4; transform: rotate(180deg) scale(1.05); }
}
.av-anim-ember-ring::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(#c9a84c 0deg, #cc4400 60deg, transparent 120deg, #c9a84c 180deg, #cc4400 240deg, transparent 300deg, #c9a84c 360deg);
  animation: emberSpin 3s linear infinite;
  z-index: 0;
  mask: radial-gradient(circle, transparent 48%, black 52%);
  -webkit-mask: radial-gradient(circle, transparent 48%, black 52%);
}
.av-anim-ember-ring::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.15) 0%, transparent 70%);
  animation: emberPulse 2s ease-in-out infinite;
  z-index: 0;
}

/* ── DEATH PULSE ─────────────────────────────────────────── */
@keyframes deathPulse {
  0%   { transform: scale(1);    opacity: .8; box-shadow: 0 0 0 0 rgba(107,33,168,.6); }
  70%  { transform: scale(1.05); opacity: .3; box-shadow: 0 0 0 10px rgba(107,33,168,0); }
  100% { transform: scale(1);    opacity: .8; box-shadow: 0 0 0 0 rgba(107,33,168,0); }
}
.av-anim-death-pulse {
  animation: deathPulse 2s ease-out infinite;
  border-radius: 50%;
}
.av-anim-death-pulse::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(168,85,247,.5);
  animation: deathPulse 2s ease-out infinite .5s;
  z-index: 0;
}

/* ── PLAGUE RING (green glow ring — PNG overlay coming later) ── */
@keyframes thornGlow {
  0%,100% { opacity: .7; }
  50%     { opacity: 1; }
}
@keyframes thornSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.av-anim-plague-ring::before {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    radial-gradient(circle at 50% 0%,   #00a040 0%, transparent 60%),
    radial-gradient(circle at 85% 15%,  #00a040 0%, transparent 60%),
    radial-gradient(circle at 100% 50%, #00a040 0%, transparent 60%),
    radial-gradient(circle at 85% 85%,  #00a040 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, #00a040 0%, transparent 60%),
    radial-gradient(circle at 15% 85%,  #00a040 0%, transparent 60%),
    radial-gradient(circle at 0% 50%,   #00a040 0%, transparent 60%),
    radial-gradient(circle at 15% 15%,  #00a040 0%, transparent 60%);
  background-clip: padding-box;
  animation: thornSpin 6s linear infinite, thornGlow 2s ease-in-out infinite;
  z-index: 0;
  mask: radial-gradient(circle, transparent 50%, black 54%, black 60%, transparent 64%);
  -webkit-mask: radial-gradient(circle, transparent 50%, black 54%, black 60%, transparent 64%);
  filter: drop-shadow(0 0 4px rgba(0,180,60,.8));
}

/* ── VOID RIPPLE ─────────────────────────────────────────── */
@keyframes voidRipple {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(1.5);  opacity: 0;  }
}
.av-anim-void-ripple::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(74,144,217,.7);
  animation: voidRipple 1.8s ease-out infinite;
  z-index: 0;
}
.av-anim-void-ripple::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(74,144,217,.5);
  animation: voidRipple 1.8s ease-out infinite .9s;
  z-index: 0;
}

/* ── REAPER GLOW ─────────────────────────────────────────── */
@keyframes reaperGlow {
  0%,100% {
    box-shadow: 0 0 8px rgba(220,38,38,.4), 0 0 20px rgba(139,0,0,.2);
    border-color: rgba(220,38,38,.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(220,38,38,.8), 0 0 40px rgba(139,0,0,.4), 0 0 60px rgba(100,0,0,.2);
    border-color: #dc2626;
  }
}
@keyframes reaperFlicker {
  0%,92%,96%,100% { opacity: 1; }
  94% { opacity: .85; }
}
.av-anim-reaper-glow {
  border: 2px solid rgba(220,38,38,.6);
  animation: reaperGlow 3s ease-in-out infinite, reaperFlicker 8s step-end infinite;
  border-radius: 50%;
}

/* ============================================================
   USERNAME ANIMATIONS
   Applied via .un-fx-{name} on the username element
   ============================================================ */

/* Blood Drip */
@keyframes bloodDrip {
  0%,100% { text-shadow: 0 0 8px rgba(139,0,0,.6), 0 2px 4px rgba(139,0,0,.4); color: #e05555; }
  50%     { text-shadow: 0 0 16px rgba(200,0,0,.9), 0 4px 8px rgba(139,0,0,.6); color: #ff4444; }
}
.un-fx-blood-drip { animation: bloodDrip 2s ease-in-out infinite; }

/* Ember Text */
@keyframes emberText {
  0%,100% { text-shadow: 0 0 8px rgba(201,168,76,.6); color: #c9a84c; }
  50%     { text-shadow: 0 0 20px rgba(220,120,20,.9), 0 0 40px rgba(201,168,76,.3); color: #e8a020; }
}
.un-fx-ember-text { animation: emberText 2.5s ease-in-out infinite; }

/* Crimson Pulse */
@keyframes crimsonPulse {
  0%,100% { color: #d4c9a8; text-shadow: none; }
  50%     { color: #cc2222; text-shadow: 0 0 12px rgba(200,0,0,.7); }
}
.un-fx-crimson-pulse { animation: crimsonPulse 3s ease-in-out infinite; }

/* Shadow Shift */
@keyframes shadowShift {
  0%,100% { color: #c4c8d0; text-shadow: -2px 0 6px rgba(107,33,168,.4); }
  50%     { color: #8c9099; text-shadow: 2px 0 12px rgba(107,33,168,.8), 0 0 20px rgba(168,85,247,.3); }
}
.un-fx-shadow-shift { animation: shadowShift 3.5s ease-in-out infinite; }

/* Glitch */
@keyframes glitch {
  0%,100% { transform: translate(0); filter: none; }
  2%  { transform: translate(-2px, 0); filter: hue-rotate(90deg); }
  4%  { transform: translate(2px, 0);  }
  6%  { transform: translate(0); filter: none; }
  94% { transform: translate(0); filter: none; }
  96% { transform: translate(2px, 1px);  filter: hue-rotate(-90deg); }
  98% { transform: translate(-2px, -1px); }
}
.un-fx-glitch { animation: glitch 4s step-end infinite; display: inline-block; }

/* Gold Shimmer */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.un-fx-gold-shimmer {
  background: linear-gradient(90deg, #8b6914 0%, #c9a84c 30%, #f5d78e 50%, #c9a84c 70%, #8b6914 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s linear infinite;
}