/* =========================
   Base / Theme
========================= */

:root{
  --bg0:#12090c;
  --bg1:#170c10;

  --card:rgba(250,243,242,.06);
  --border:rgba(250,243,242,.14);

  --text:#faf3f2;
  --muted:rgba(250,243,242,.72);

  --twitch:#9146FF;

  --radius:22px;
  --shadow:0 22px 60px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }

/* =========================
   Page background
========================= */

html{
  min-height:100%;
  background:
    radial-gradient(900px 520px at 15% 5%, rgba(202,115,78,.28), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(221,161,90,.22), transparent 60%),
    radial-gradient(900px 520px at 50% 110%, rgba(229,173,156,.14), transparent 60%),
    linear-gradient(160deg, var(--bg0), var(--bg1));
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

body{
  margin:0;
  min-height:100vh;
  padding:28px 16px;
  background:transparent;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* =========================
   Layout
========================= */

.wrap{
  width:min(760px,96vw);
  margin:0 auto;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}

/* =========================
   Profile
========================= */

.profile{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}

.avatar{
  width:84px;
  height:84px;
  border-radius:22px;
  border:1px solid var(--border);
  object-fit:cover;
  background:#000;
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 4px rgba(202,115,78,.10);
}

.profile-text h1{
  margin:0;
  font-size:24px;
  line-height:1.15;
  letter-spacing:.2px;
}

.profile-text .tagline{
  margin:8px 0 10px;
  font-size:16px;
  color:var(--muted);
}

.profile-text .bio{
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  color:rgba(250,243,242,.85);
  max-width:520px;
}

/* =========================
   Stream section
   - Same height as link cards (header row)
   - Hover glow
   - Live glow via .is-live
========================= */

.stream-section{
  margin:18px 0;
}

/* Make the stream header row match the link card height/feel */
.stream-header{
  display:grid;
  grid-template-columns:40px 1fr auto; /* matches link layout */
  align-items:center;
  gap:12px;
  padding:14px;                        /* matches link padding */
  border-radius:16px;                  /* matches link radius */
  border:1px solid var(--border);
  background:rgba(250,243,242,.05);

  box-shadow: 0 16px 40px rgba(0,0,0,.25) inset; /* base depth */
  transition: box-shadow .2s ease, transform .15s ease, background .15s ease, border-color .15s ease;
}

/* Hover glow (works offline too) */
.stream-header:hover{
  transform: translateY(-2px);
  background: rgba(250,243,242,.07);
  border-color: rgba(145,70,255,.45);
  box-shadow:
    0 16px 40px rgba(0,0,0,.25) inset,
    0 0 0 1px rgba(145,70,255,.45),
    0 0 36px rgba(145,70,255,.65),
    0 0 72px rgba(145,70,255,.35);
}

/* Dot styled like an icon tile so it lines up with other cards */
.live-dot{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(250,243,242,.12);
  background:rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  position:relative;
}

/* inner dot */
.live-dot::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  background: rgba(250,243,242,.22);
  box-shadow: 0 0 0 6px rgba(250,243,242,.06);
}

.stream-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.stream-text strong{
  font-size:14.5px;   /* match link label vibe */
  font-weight:700;
  line-height:1.2;
}

.stream-text span{
  font-size:12px;     /* match hint vibe */
  line-height:1.35;
  color:rgba(250,243,242,.65);
}

/* Button styled like a pill similar to your hint chips */
#streamToggle{
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(250,243,242,.12);
  background:rgba(0,0,0,.12);
  color:rgba(250,243,242,.85);
  cursor:pointer;
  transition: box-shadow .2s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

#streamToggle:hover{
  transform: translateY(-1px);
  border-color: rgba(145,70,255,.75);
  box-shadow:
    0 0 0 1px rgba(145,70,255,.75),
    0 0 36px rgba(145,70,255,.95),
    0 0 64px rgba(145,70,255,.45);
}

/* Stream iframe area */
.stream-wrap{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
}

.stream-wrap iframe{
  display:block;
  width:100%;
  border:0;
}

.stream-hidden .stream-wrap{
  display:none;
}

/* LIVE STATE: add class "is-live" to #streamSection */
.stream-section.is-live .stream-header{
  border-color: rgba(145,70,255,.55);
  box-shadow:
    0 16px 40px rgba(0,0,0,.25) inset,
    0 0 0 1px rgba(145,70,255,.35),
    0 0 28px rgba(145,70,255,.45);
}

/* live dot becomes purple */
.stream-section.is-live .live-dot::after{
  background: rgba(145,70,255,1);
  box-shadow:
    0 0 0 6px rgba(145,70,255,.35),
    0 0 18px rgba(145,70,255,.75);
}

/* "Show" glows more when live */
.stream-section.is-live #streamToggle{
  border-color: rgba(145,70,255,.55);
  box-shadow:
    0 0 0 1px rgba(145,70,255,.45),
    0 0 22px rgba(145,70,255,.55);
}

.stream-section.is-live #streamToggle:hover{
  box-shadow:
    0 0 0 1px rgba(145,70,255,.85),
    0 0 42px rgba(145,70,255,1);
}

/* =========================
   Links
========================= */

.links{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.link{
  display:grid;
  grid-template-columns:40px 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(250,243,242,.05);
  color:var(--text);
  text-decoration:none;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .2s ease;
}

.link:hover{
  transform:translateY(-2px);
  background:rgba(250,243,242,.07);
}

.icon{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(250,243,242,.12);
  background:rgba(0,0,0,.18);
  display:grid;
  place-items:center;
}

.icon img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}

/* Optical size compensation for wide logos (YouTube) */
.icon img[src*="youtube"]{
  width:26px;
  height:auto;
}

.label{
  white-space: nowrap;
  font-weight:700;
  font-size:14.5px;
  padding-right:10px;
}

.hint{
  font-size:12px;
  color:rgba(250,243,242,.70);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(250,243,242,.12);
  background:rgba(0,0,0,.12);
}

/* Platform hover accents */
.link[href*="twitch."]:hover{border-color:rgba(124,92,255,.45);}
.link[href*="instagram."]:hover{border-color:rgba(202,115,78,.45);}
.link[href*="facebook."]:hover{border-color:rgba(66,103,178,.45);}
.link[href*="discord."]:hover{border-color:rgba(114,137,218,.45);}
.link[href*="twitter."]:hover{border-color:rgba(221,161,90,.45);}
.link[href*="youtube."]:hover{border-color:rgba(255,0,0,.35);}
.link[href*="tiktok."]:hover{
  border-color: rgba(255, 0, 80, .40);
  box-shadow:
    0 0 0 1px rgba(0, 242, 234, .22),
    0 0 18px rgba(255, 0, 80, .28),
    0 0 18px rgba(0, 242, 234, .22);
}
/* =========================
   Navbar and Hamburger
========================= */

/* Fixed in top-right, above the card */
.nav{
  position:fixed;
  top:18px;
  right:18px;
  z-index:20000;
}

/* Button */
.nav-toggle{
  width:44px;
  height:44px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(250,243,242,.06);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  cursor:pointer;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.nav-toggle span{
  height:2px;
  width:100%;
  background:rgba(250,243,242,.88);
  border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}

/* Dropdown menu */
.nav-menu{
  position:absolute;
  top:54px;
  right:0;

  min-width:190px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(18,9,12,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);

  display:flex;
  flex-direction:column;
  gap:6px;

  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

.nav-menu a{
  color:rgba(250,243,242,.92);
  text-decoration:none;
  font-size:14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}

.nav-menu a:hover{
  background: rgba(250,243,242,.06);
  border-color: rgba(250,243,242,.10);
}

/* Open state */
.nav.open .nav-menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* Animate hamburger to X */
.nav.open .nav-toggle span:nth-child(1){
  transform: translateY(11px) rotate(45deg);
}

.nav.open .nav-toggle span:nth-child(2){
  opacity:0;
}

.nav.open .nav-toggle span:nth-child(3){
  transform: translateY(-11px) rotate(-45deg);
}

/* On small screens keep it away from edges */
@media (max-width:520px){
  .nav{
    top:12px;
    right:12px;
  }
}


/* =========================
   Footer
========================= */

.footer{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  color:rgba(250,243,242,.72);
  display:flex;
  justify-content:center;
  align-items:center;
}

/* =========================
   Credit hover tooltip
========================= */

.credit{
  position:relative;
  display:inline-block;
}

.credit .name{
  cursor:pointer;
  font-weight:inherit;
}

/* Tooltip (hidden by default) */
.credit .small{
  position:absolute;
  left:50%;
  bottom:140%;
  transform:translateX(-50%) translateY(6px) scale(.95);
  opacity:0;
  pointer-events:none;

  white-space:nowrap;
  padding:8px 12px;
  border-radius:999px;

  font-size:12px;
  color:rgba(250,243,242,.9);
  background:rgba(0,0,0,.65);
  border:1px solid rgba(250,243,242,.18);
  backdrop-filter:blur(8px);

  box-shadow:
    0 12px 28px rgba(0,0,0,.45),
    0 0 18px rgba(145,70,255,.35);

  transition:
    opacity .18s ease,
    transform .22s cubic-bezier(.2,1.4,.4,1);
}

/* Tooltip arrow */
.credit .small::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:rgba(0,0,0,.65) transparent transparent transparent;
}

/* Reveal on hover */
.credit:hover .small{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* Subtle name glow */
.credit:hover .name{
  text-shadow:0 0 10px rgba(145,70,255,.55);
}

/* =========================
   Heart pulse animation
========================= */

@keyframes heartPulse{
  0%,100%{
    transform:scale(1);
    filter:drop-shadow(0 0 0 rgba(255,165,0,0));
  }
  50%{
    transform:scale(1.15);
    filter:drop-shadow(0 0 6px rgba(255,165,0,.55));
  }
}

.credit .heart{
  display:inline-block;
  animation:heartPulse 2.2s ease-in-out infinite;
}


.footer .dot{ opacity:.55; }
.footer .small{ color:rgba(250,243,242,.65); }

/* =========================
   Responsive
========================= */

@media (max-width:520px){
  .avatar{
    width:72px;
    height:72px;
    border-radius:18px;
  }

  .profile-text h1{
    font-size:20px;
  }
}