/* =========================
   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 (glow when live)
========================= */

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

.stream-header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px;
  border-radius:24px;
  border:1px solid var(--border);
  background:rgba(250,243,242,.06);
  box-shadow:0 16px 40px rgba(0,0,0,.25) inset; /* base depth only */
}

.live-dot{
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(250,243,242,.20);
  box-shadow:0 0 0 6px rgba(250,243,242,.06);
  flex:0 0 auto;
}

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

.stream-text strong{
  font-size:20px;
  font-weight:700;
  line-height:1.2;
}

.stream-text span{
  font-size:14px;
  line-height:1.4;
  color:rgba(250,243,242,.65);
}

#streamToggle{
  margin-left:auto;
  font-size:14px;
  padding:10px 18px;
  border-radius:16px;
  border:1px solid rgba(250,243,242,.18);
  background:rgba(0,0,0,.10);
  color:var(--text);
  cursor:pointer;
}

#streamToggle:hover{
  background:rgba(0,0,0,.16);
}

.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{
  box-shadow:
    0 16px 40px rgba(0,0,0,.25) inset,
    0 0 0 1px rgba(145,70,255,.25),
    0 0 28px rgba(145,70,255,.45);
}

.stream-section.is-live .live-dot{
  background:rgba(145,70,255,.90);
  box-shadow:0 0 0 6px rgba(145,70,255,.35);
}

.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,.65),
    0 0 32px rgba(145,70,255,.75);
}

/* =========================
   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;
}

.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;
}

.label{
  font-weight:700;
  font-size:14.5px;
}

.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);}
/* =========================
   Footer
========================= */

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

.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;
  }

  .stream-header{
    padding:16px;
    border-radius:20px;
  }
}