/* ═══════════════════════════════════════════════════════════
   DARK CREDITS  —  VOID CORRUPTION THEME v4
   darkcredits.org
═══════════════════════════════════════════════════════════ */

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

:root {
  --void:          #01000a;
  --deep:          #04020f;
  --surface:       #080614;
  --elevated:      #0e0920;
  --card:          #0b0818;
  --card-hover:    #130e25;

  --acid:          #7700ff;
  --acid-mid:      #9a30ff;
  --acid-bright:   #c078ff;
  --acid-glow:     rgba(119,0,255,0.35);
  --acid-faint:    rgba(119,0,255,0.07);

  --blood:         #5a0000;
  --blood-mid:     #8b0000;
  --blood-bright:  #cc001a;
  --blood-drip:    #aa0010;
  --blood-glow:    rgba(180,0,20,0.4);

  --rot:           #003300;
  --rot-bright:    #39ff14;
  --rot-glow:      rgba(57,255,20,0.28);
  --rot-faint:     rgba(57,255,20,0.06);

  --bone:          #d4c4b0;
  --bone-dim:      #8a7868;
  --bone-mute:     #3e3028;
  --bone-bright:   #fff2e0;

  --gold:          #9a7832;
  --gold-bright:   #d4a840;

  --border:        rgba(119,0,255,0.14);
  --border-mid:    rgba(119,0,255,0.28);
  --border-bright: rgba(119,0,255,0.55);
  --border-blood:  rgba(180,0,20,0.3);

  --glow-acid:     0 0 18px rgba(119,0,255,0.55), 0 0 50px rgba(119,0,255,0.2);
  --glow-blood:    0 0 18px rgba(180,0,20,0.5), 0 0 40px rgba(180,0,20,0.18);
  --glow-rot:      0 0 16px rgba(57,255,20,0.4);
  --glow-subtle:   0 0 8px rgba(119,0,255,0.25);
  --shadow-deep:   0 8px 40px rgba(0,0,0,0.9);

  /* Compatibility aliases */
  --ember:         var(--blood-bright);
  --ember-mid:     var(--blood-mid);
  --ember-bright:  var(--acid-bright);
  --ember-glow:    var(--acid-glow);
  --ember-faint:   var(--acid-faint);
  --text-p:        var(--bone);
  --text-s:        var(--bone-dim);
  --text-m:        var(--bone-mute);
  --text-bright:   var(--bone-bright);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--void);
  color: var(--bone);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Heavier grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.048;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--deep); }
::-webkit-scrollbar-thumb { background: var(--blood-mid); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--blood-bright); }

::selection { background: rgba(119,0,255,0.45); color: var(--bone-bright); }

h1,h2,h3,h4 { font-family: 'Cinzel Decorative', serif; letter-spacing: 0.02em; line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 700; }
h4 { font-size: 1rem; font-weight: 400; }
p  { font-size: 1rem; color: var(--bone-dim); }
a  { color: var(--acid-bright); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--rot-bright); }

/* ── KEYFRAMES ── */
@keyframes rise       { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in    { from { opacity:0; } to { opacity:1; } }
@keyframes flicker    { 0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:0.3;filter:hue-rotate(50deg)} 94%{opacity:1} 97%{opacity:0.7} }
@keyframes corruption { 0%,88%,100%{filter:none;transform:none} 89%{filter:hue-rotate(80deg) saturate(2);transform:skewX(0.4deg)} 91%{filter:none} 94%{filter:hue-rotate(-20deg) brightness(1.2);transform:skewX(-0.2deg)} 96%{filter:none} }
@keyframes spin       { to { transform:rotate(360deg); } }
@keyframes bounce     { 0%,100%{transform:rotate(45deg)translateY(0)} 50%{transform:rotate(45deg)translateY(5px)} }
@keyframes pulse-blood{ 0%,100%{box-shadow:var(--glow-blood)} 50%{box-shadow:0 0 30px rgba(180,0,20,0.8),0 0 60px rgba(180,0,20,0.3)} }
@keyframes pulse-acid { 0%,100%{box-shadow:var(--glow-acid)} 50%{box-shadow:0 0 35px rgba(119,0,255,0.9),0 0 80px rgba(119,0,255,0.35)} }
@keyframes drip       { 0%{transform:scaleY(0);transform-origin:top;opacity:0.9} 100%{transform:scaleY(1);transform-origin:top;opacity:0} }
@keyframes float-up   { 0%{opacity:0;transform:translateY(0)scale(0.8)} 20%{opacity:1} 100%{opacity:0;transform:translateY(-60px)scale(1.2)} }

/* ── NAVBAR ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: 64px;
  background: linear-gradient(to bottom, rgba(1,0,10,0.97), rgba(1,0,10,0.8));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 4%; right: 4%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--blood-bright), var(--acid), transparent);
  opacity: 0.4;
}
.nav-logo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.15rem; font-weight: 900;
  color: var(--bone-bright);
  letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 0.5rem;
}
.nav-logo span { color: var(--acid-bright); }
.nav-logo-icon {
  width: 28px; height: 28px;
  border: 1.5px solid var(--acid);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--acid-bright);
  font-family: 'Share Tech Mono', monospace;
  box-shadow: var(--glow-subtle), inset 0 0 8px rgba(119,0,255,0.1);
}
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-dim); transition: color 0.2s, text-shadow 0.2s;
}
.nav-links a:hover { color: var(--bone-bright); text-shadow: 0 0 14px rgba(119,0,255,0.7); }
.nav-actions { display: flex; gap: 0.75rem; align-items: center; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.65rem 1.6rem;
  border: none; cursor: pointer;
  transition: all 0.22s;
  position: relative; overflow: hidden;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  text-decoration: none;
}
.btn::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.06); opacity:0; transition:opacity 0.2s; }
.btn:hover::before { opacity:1; }
.btn-primary { background: linear-gradient(135deg, var(--blood-mid), var(--blood-bright)); color:#fff; box-shadow: var(--glow-blood); }
.btn-primary:hover { background: linear-gradient(135deg, var(--blood-bright), #ff2030); box-shadow: 0 0 28px rgba(180,0,20,0.75),0 0 70px rgba(180,0,20,0.28); color:#fff; }
.btn-acid { background: linear-gradient(135deg, var(--acid), var(--acid-mid)); color:#fff; box-shadow: var(--glow-acid); }
.btn-acid:hover { background: linear-gradient(135deg, var(--acid-mid), var(--acid-bright)); box-shadow: 0 0 32px rgba(119,0,255,0.9); color:#fff; }
.btn-ghost { background:transparent; color:var(--bone-dim); border:1px solid var(--border-mid); clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); }
.btn-ghost:hover { border-color:var(--acid); color:var(--acid-bright); box-shadow: inset 0 0 16px var(--acid-faint),0 0 12px var(--acid-glow); }
.btn-lg { padding:0.9rem 2.2rem; font-size:0.9rem; }
.btn-sm { padding:0.45rem 1.1rem; font-size:0.75rem; }
.anim-pulse { animation: pulse-blood 2.2s ease-in-out infinite; }
.btn-loading { pointer-events:none; opacity:0.7; }
.btn-loading::after { content:''; width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; margin-left:0.5rem; }

/* ── LAYOUT ── */
.section { padding: 6rem 0; }
.container { width: min(1180px, 100%); margin: 0 auto; padding: 0 2rem; }
.section-header { text-align:center; margin-bottom:4rem; }
.section-eyebrow { font-family:'Share Tech Mono',monospace; font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--acid-bright); margin-bottom:1rem; opacity:0.85; }
.section-title { font-family:'Cinzel Decorative',serif; font-weight:900; color:var(--bone-bright); margin-bottom:1rem; animation: corruption 14s infinite; }
.section-sub { font-size:1rem; color:var(--bone-dim); max-width:560px; margin:0 auto; }

.divider { display:flex; align-items:center; gap:1rem; font-size:0.72rem; font-family:'Share Tech Mono',monospace; letter-spacing:0.12em; color:var(--bone-mute); }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:linear-gradient(to right, transparent, var(--border-mid), transparent); }

/* ── FORMS ── */
.form-group { display:flex; flex-direction:column; gap:0.45rem; }
.form-label { font-family:'Share Tech Mono',monospace; font-size:0.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--bone-dim); }
.form-input {
  background:var(--deep); border:1px solid var(--border-mid);
  color:var(--bone-bright); font-family:'Rajdhani',sans-serif;
  font-size:0.95rem; font-weight:500;
  padding:0.7rem 1rem; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  width:100%;
}
.form-input::placeholder { color:var(--bone-mute); opacity:0.8; font-size:0.85rem; }
.form-input:focus { border-color:var(--acid); box-shadow:0 0 0 1px var(--acid-glow),inset 0 0 14px var(--acid-faint); }
.form-input.error { border-color:var(--blood-bright); box-shadow:0 0 0 1px var(--blood-glow); }
.form-input.success { border-color:var(--rot-bright); box-shadow:0 0 0 1px var(--rot-glow); }
.form-hint { font-size:0.72rem; font-family:'Share Tech Mono',monospace; letter-spacing:0.05em; color:var(--bone-mute); min-height:1.1em; }
.form-hint.error { color:#ff5060; }
.form-hint.ok { color:var(--rot-bright); }
.form-check { display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; color:var(--bone-dim); cursor:pointer; user-select:none; }
.form-check input[type=checkbox] { accent-color:var(--acid); width:14px; height:14px; }

.strength-bars { display:flex; gap:3px; margin-top:0.25rem; }
.strength-bar { height:3px; flex:1; background:var(--elevated); border-radius:2px; transition:background 0.3s; }
.strength-bar.weak   { background: var(--blood-bright); }
.strength-bar.fair   { background: var(--gold); }
.strength-bar.good   { background: var(--acid-bright); }
.strength-bar.strong { background: var(--rot-bright); }

/* ── BADGES ── */
.badge { display:inline-block; padding:0.2rem 0.6rem; font-family:'Share Tech Mono',monospace; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; border:1px solid; white-space:nowrap; }
.badge-acid  { color:var(--acid-bright);  border-color:var(--acid-glow);  background:var(--acid-faint); }
.badge-blood { color:var(--blood-bright); border-color:var(--blood-glow); background:rgba(180,0,20,0.08); }
.badge-rot   { color:var(--rot-bright);   border-color:var(--rot-glow);   background:var(--rot-faint); }
.badge-gold  { color:var(--gold-bright);  border-color:rgba(212,168,64,0.3); background:rgba(154,120,50,0.08); }
.badge-ash   { color:#8a8090; border-color:rgba(100,80,120,0.3); background:rgba(80,60,100,0.08); }
.badge-ember { color:var(--acid-bright); border-color:var(--acid-glow); background:var(--acid-faint); }

/* ── MODALS ── */
.modal-overlay { position:fixed; inset:0; background:rgba(1,0,10,0.9); backdrop-filter:blur(8px); z-index:9000; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.modal-overlay.active { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border-bright); padding:2.5rem; max-width:480px; width:100%; position:relative; box-shadow:var(--glow-acid),var(--shadow-deep); clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%); }
.modal::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right, var(--blood-bright), var(--acid), transparent 70%); }

/* ── TOASTS ── */
.toast-container { position:fixed; bottom:2rem; right:2rem; display:flex; flex-direction:column; gap:0.75rem; z-index:9999; }
.toast { padding:0.85rem 1.25rem; background:var(--surface); border:1px solid var(--border-mid); font-family:'Share Tech Mono',monospace; font-size:0.78rem; letter-spacing:0.06em; color:var(--bone); animation:rise 0.25s ease both; display:flex; align-items:center; gap:0.75rem; clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%); box-shadow:var(--shadow-deep); max-width:320px; }
.toast.success { border-color:var(--rot-bright); color:var(--rot-bright); }
.toast.error   { border-color:var(--blood-bright); color:#ff7080; }
.toast.info    { border-color:var(--acid); color:var(--acid-bright); }

/* ── DC FRAME ── */
.dc-frame { position:absolute; pointer-events:none; }
.dc-frame::before,.dc-frame::after,.dc-frame .fr-b,.dc-frame .fr-t { content:''; position:absolute; background:var(--acid); opacity:0.4; }
.dc-frame::before { top:0; left:0; width:70px; height:1px; }
.dc-frame::after  { top:0; left:0; width:1px; height:70px; }
.dc-frame .fr-b   { bottom:0; right:0; width:70px; height:1px; }
.dc-frame .fr-t   { bottom:0; right:0; width:1px; height:70px; }

/* ── TAG STATUS ── */
.tag-status { font-family:'Share Tech Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; }
.tag-status.checking  { color:var(--bone-mute); }
.tag-status.available { color:var(--rot-bright); }
.tag-status.taken     { color:var(--blood-bright); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) { .navbar { padding:0 1.5rem; } .nav-links { display:none; } }