:root {
  --accent-color: #1b1b1b;
  --text-color: #ff0000;
  --background-color: #000000;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height:100%;
  background: var(--background-color);
  overflow:hidden;
  font-family:'Segoe UI',sans-serif;
}

video#bg-video {
  position:fixed;
  top:50%; left:50%;
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  transform:translate(-50%, -50%);
  object-fit:cover;
  z-index:0;
  opacity:0.35;
}

.overlay {
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.92);
  color: var(--text-color);
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
  cursor:pointer;
  transition: opacity .35s ease, visibility .35s;
}

.overlay.hidden { opacity:0; pointer-events:none; visibility:hidden; }

.hidden { display:none !important; }

/* Container: profile + discord centered vertically */
.center-container {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:row;
  align-items:center; /* vertical center */
  gap:28px;
  z-index:20;
}

.profile-card {
  width:280px;
  padding:20px;
  border-radius:15px;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  border:2px solid var(--accent-color);
  text-align:center;
  transition: transform .12s ease-out;
}

.profile-card img.profile-img {
  width:120px; height:120px;
  border-radius:50%;
  object-fit:cover;
  border:5px solid rgba(255,0,0,0.08);
  margin:0 auto 8px;
  display:block;
}

.profile-card h1 { margin:6px 0 4px; font-size:26px; color:var(--text-color); }
.profile-card p.subtext { margin:0 0 12px; font-size:14px; color:var(--text-color); opacity:0.85; }

/* icon buttons */
.link-icons { display:flex; gap:10px; justify-content:center; margin-top:10px; }
.link-icons a {
  width:46px; height:46px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; overflow:hidden; padding:4px;
  border:2px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  transition: transform .12s ease, border-color .12s ease;
}
.link-icons a:hover { transform:translateY(-3px); border-color: rgba(255,26,26,0.9); }
.link-icons img { width:100%; height:100%; object-fit:contain; display:block; }

/* Discord Widget */
.discord-widget {
  width:360px; max-width: calc(100vw - 40px);
  padding:14px;
  border-radius:15px;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  border:2px solid var(--accent-color);
  color:#fff;
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center; /* vertical + horizontal center of widget content */
}

/* inner custom widget */
.discord-custom { width:100%; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; }

.discord-header { display:flex; flex-direction:column; align-items:center; gap:8px; }
.discord-icon img { width:64px; height:64px; border-radius:12px; object-fit:cover; border:2px solid rgba(255,255,255,0.06); }
.discord-name { font-weight:700; font-size:18px; color:var(--text-color); }
.discord-counts { font-size:13px; opacity:0.9; }

.discord-actions { display:flex; justify-content:center; width:100%; }
.join-btn {
  display:inline-block; padding:10px 16px;
  border-radius:10px;
  background: rgba(255,26,26,0.95);
  color:#000; font-weight:700;
  text-decoration:none;
  border:none;
  text-align:center;
}

/* loading state */
.discord-loading { font-size:14px; color:var(--text-color); }

/* mobile: stack vertically */
@media (max-width:720px) {
  .center-container { flex-direction:column; gap:18px; padding:12px; }
  .discord-widget { width:100%; }
}