/* Infernal Nexus Theme - Demonic Cyber */
:root{
  --blood-900:#68000C; /* dark */
  --blood-800:#860111; /* primary */
  --blood-600:#BD0219; /* accent */
  --ink:#0b0b0d;
  --smoke:#d6d6e0;
  --muted:#8b8b98;
  --glass:rgba(134,1,17,0.12);
  --glass-strong:rgba(189,2,25,0.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Chakra Petch", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--smoke);
  background: radial-gradient(1200px 800px at 70% 20%, rgba(189,2,25,0.15), transparent 60%),
              radial-gradient(800px 600px at 20% 80%, rgba(104,0,12,0.25), transparent 55%),
              #070709;
  overflow-x:hidden;
}

#bg{position:fixed; inset:0; z-index:-2}
#bg #grid{width:100%; height:100%; display:block}
#bg .vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,0.6));
  pointer-events:none;
}

.container{max-width:100%; margin:0 auto; padding:56px 20px 40px}

.hero{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center}
.hero .avatar{
  width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(189,2,25,0.5), rgba(104,0,12,0.3) 40%, rgba(0,0,0,0.25) 70%),
              linear-gradient(180deg, rgba(134,1,17,0.15), rgba(104,0,12,0.12));
  border:1px solid rgba(189,2,25,0.5);
  box-shadow:0 0 24px rgba(189,2,25,0.35), inset 0 0 22px rgba(104,0,12,0.6);
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  /* Use provided avatar image; center/cover ensures auto-crop inside the circle */
  background-image: url('../img/avatar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero .avatar::after{
  content: attr(data-initials);
  font-family:"Orbitron", ui-sans-serif; font-weight:800; font-size:3rem;
  color:#fff; text-shadow: 0 0 14px rgba(189,2,25,0.6);
  /* Hide initials when an image is used */
  display:none;
}
.name{
  font-family:"Orbitron", ui-sans-serif; letter-spacing:1px;
  font-weight:800; font-size:2.2rem; margin:0;
  text-shadow:0 0 14px rgba(189,2,25,0.5);
}
.name{ position:relative; display:inline-block }
.name::before, .name::after{
  content: attr(data-text);
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
}
.name::before{ transform: translate(1px,0); color:#BD0219; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 55%); opacity:.7 }
.name::after{ transform: translate(-1px,0); color:#860111; clip-path: polygon(0 60%, 100% 50%, 100% 100%, 0 100%); opacity:.7 }

@keyframes textGlitch {
  0%, 100% { filter:none; }
  8% { transform: translateX(0.5px) skewX(0.3deg); }
  9% { transform: translateX(-0.5px) skewX(-0.3deg); }
  10% { transform: translateX(0) skewX(0deg); }
  48% { letter-spacing: 1.2px; }
  50% { letter-spacing: 0.8px; }
  52% { letter-spacing: 1px; }
}
.name{ animation: textGlitch 6s steps(60, end) infinite }
.tag{margin:0; color:var(--muted)}

.cta-row{ display:flex; gap:12px; justify-content:center; margin-top:4px }
.cta{
  display:inline-block; padding:12px 18px; text-decoration:none; font-weight:800;
  color:#fff; letter-spacing:.5px;
  background: linear-gradient(90deg, var(--blood-800), var(--blood-600));
  border:1px solid var(--blood-600); border-radius:999px;
  box-shadow: 0 0 0 2px rgba(134,1,17,0.15) inset, 0 10px 28px rgba(189,2,25,0.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.cta:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 0 0 2px rgba(134,1,17,0.22) inset, 0 14px 36px rgba(189,2,25,0.35); }
.cta:active{ transform: translateY(0); }

.window{ margin:20px auto 0; border:1px solid rgba(189,2,25,0.35); border-radius:12px; overflow:hidden;
  background: linear-gradient(180deg, rgba(134,1,17,0.16), rgba(104,0,12,0.1));
  box-shadow: 0 12px 40px rgba(189,2,25,0.18), inset 0 0 0 1px rgba(104,0,12,0.5);
  max-width: 600px; width: 100%; min-width: 320px;
}
.titlebar{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
  background: linear-gradient(180deg, rgba(189,2,25,0.15), rgba(104,0,12,0.12));
  border-bottom: 1px solid rgba(189,2,25,0.35);
}
.titlebar .traffic{ display:flex; gap:8px }
.titlebar .traffic .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; box-shadow:0 0 8px currentColor }
.titlebar .traffic .dot.red{ color:#BD0219; background: currentColor }
.titlebar .traffic .dot.yellow{ color:#b78b00; background: currentColor }
.titlebar .traffic .dot.green{ color:#0aa86b; background: currentColor }
.titlebar .title{ font-weight:700; letter-spacing:.4px }
.titlebar .actions{ display:flex; gap:6px }
.titlebar .actions .act{ background:transparent; color:var(--smoke); border:1px solid rgba(189,2,25,0.35); border-radius:6px; padding:4px 8px; cursor:pointer }
.titlebar .actions .act:hover{ border-color: var(--blood-600); box-shadow: 0 0 0 1px rgba(189,2,25,0.2) inset }

.window-body{ padding:16px }
.contact-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.contact-email{ font-weight:700; letter-spacing:.3px; color:var(--smoke) }
.contact-actions{ display:flex; gap:10px; align-items:center }
.copy-btn{ width:38px; height:38px; border-radius:8px; cursor:pointer; border:1px solid rgba(189,2,25,0.45);
  background:
    conic-gradient(from 0deg, rgba(189,2,25,0.15), rgba(104,0,12,0.1)),
    linear-gradient(180deg, rgba(134,1,17,0.18), rgba(104,0,12,0.12));
  box-shadow: 0 0 0 2px rgba(134,1,17,0.12) inset;
  position:relative;
}
.copy-btn::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border:2px solid #dcdce6; border-radius:3px; box-shadow: 3px 3px 0 -2px #dcdce6;
}
.copy-btn:hover{ border-color: var(--blood-600); box-shadow: 0 0 0 2px rgba(189,2,25,0.2) inset }
.links.groups .group{ grid-auto-rows: 1fr }

.tabs{ display:flex; gap:8px; justify-content:flex-start; margin:0 0 12px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity }
.tab{ flex: 0 0 auto; scroll-snap-align: start }
.tab{ background:linear-gradient(180deg, rgba(134,1,17,0.18), rgba(104,0,12,0.08)); border:1px solid rgba(189,2,25,0.35);
  color:var(--smoke); font-weight:700; letter-spacing:.3px; padding:10px 14px; border-radius:999px; cursor:pointer }
.tab.is-active{ border-color: var(--blood-600); box-shadow: 0 0 0 2px rgba(189,2,25,0.18) inset }

.links.groups{ position:relative; display:block }
.links.groups .group{ display:none; gap:12px; padding:2px 0; grid-template-columns: 1fr }
.links.groups .group.is-active{ display:grid }
@media (min-width:640px){ 
  .links.groups .group{ 
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
  } 
}

.links{display:grid; gap:24px; margin:12px 0 0}
@media (min-width:640px){ .links{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.link{
  display:block; width:100%; padding:14px 16px; text-decoration:none;
  color:var(--smoke); font-weight:700; letter-spacing:.3px;
  border:1px solid rgba(134,1,17,0.5);
  background:linear-gradient(180deg, var(--glass-strong), rgba(104,0,12,0.16));
  backdrop-filter: blur(6px);
  border-radius:10px;
  position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:44px;
}
.link::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: radial-gradient(600px 80px at var(--x,50%) 0%, rgba(189,2,25,0.22), transparent 40%);
  opacity:.8; pointer-events:none;
}
.link::after{
  /* Nodelings flair: drifting mini-nodes on hover (randomized via CSS variables) */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(var(--g1s,6px) var(--g1s,6px) at var(--g1x,12%) var(--g1y,30%), rgba(189,2,25,var(--g1a,.45)), transparent 60%),
    radial-gradient(var(--g2s,5px) var(--g2s,5px) at var(--g2x,78%) var(--g2y,62%), rgba(134,1,17,var(--g2a,.45)), transparent 60%),
    radial-gradient(var(--g3s,4px) var(--g3s,4px) at var(--g3x,40%) var(--g3y,74%), rgba(189,2,25,var(--g3a,.40)), transparent 60%),
    radial-gradient(var(--g4s,5px) var(--g4s,5px) at var(--g4x,62%) var(--g4y,18%), rgba(189,2,25,var(--g4a,.35)), transparent 60%);
  opacity:0; transition: opacity .25s ease, transform .35s ease;
}
.link:hover::after{ opacity:.9; transform: translateY(-2px) rotate(var(--grot, 0deg)); }
.link:hover{ transform: translateY(-2px); box-shadow:0 8px 24px rgba(189,2,25,0.18); border-color: var(--blood-600); }
.link:active{ transform: translateY(0); }

.link.twitch{ border-color: rgba(134,1,17,0.55); }
.link.youtube{ border-color: rgba(189,2,25,0.55); }
.link.twitter{ border-color: rgba(134,1,17,0.45); }
.link.tiktok{ border-color: rgba(189,2,25,0.45); }
.link.discord{ border-color: rgba(134,1,17,0.45); }
.link.throne{ border-color: rgba(189,2,25,0.45); }
.link.merch{ border-color: rgba(134,1,17,0.45); }
.link.business{ border-color: rgba(189,2,25,0.55); }

.about{ margin-top:6px; color:var(--muted); text-align:center }

.footer{ text-align:center; padding:20px; color:#9b9baa; font-size:.9rem; opacity:.9 }
.footer a{ color:#c8c8d6 }

/* subtle scanline / noise overlay for cyber vibe */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 4px);
  mix-blend-mode: overlay; opacity:.35; background-position: 0.5px 0.5px;
}


/* Konami easter egg: brief demon mode + toast */
.konami .window{ border-color: var(--blood-600); box-shadow: 0 16px 60px rgba(189,2,25,0.35), inset 0 0 0 1px rgba(189,2,25,0.5) }
.konami .titlebar{ background: linear-gradient(180deg, rgba(189,2,25,0.25), rgba(104,0,12,0.18)) }
.konami .link{ border-color: var(--blood-600); box-shadow: 0 10px 28px rgba(189,2,25,0.28) }
.konami .name{ filter: drop-shadow(0 0 14px rgba(189,2,25,0.7)); animation: textGlitch .9s steps(40,end) infinite }

.konami-toast{
  position: fixed; left:50%; top: 10%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(134,1,17,0.9), rgba(104,0,12,0.8));
  border:1px solid var(--blood-600); color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow: 0 12px 40px rgba(189,2,25,0.35), inset 0 0 0 1px rgba(189,2,25,0.35);
  font-weight:800; letter-spacing:.4px; z-index:20; opacity:0;
  animation: toastPulse 3.6s ease forwards;
}
@keyframes toastPulse{
  0%{ opacity:0; transform: translateX(-50%) translateY(-6px) }
  10%{ opacity:1; transform: translateX(-50%) translateY(0) }
  80%{ opacity:1 }
  100%{ opacity:0 }
}



/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .link{ transition:none }
  .link:hover{ transform:none; box-shadow:none }
}