:root {
  --bg:#0b0b0c;
  --card:#151518;
  --muted:#8b8b91;
  --text:#f2f2f3;
  --pill:#1e1e22;
  --radius:16px;
  --accent:#ff8a00;
  --ring:0 0 0 1px rgba(255,255,255,.08),
         0 10px 30px rgba(0,0,0,.6),
         inset 0 1px 0 rgba(255,255,255,.04);
  --mx:0; --my:0; --scroll:0;
}

* { box-sizing:border-box }

html,body { height:100% }

body {
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* --- Background --- */
.bg {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  perspective:1200px;
  overflow:hidden;
}
.layer {
  position:absolute;
  inset:-10% -10%;
  transform-style:preserve-3d;
  will-change:transform, filter, opacity;
  filter:saturate(1.05) blur(0px);
  opacity:.9;
  mix-blend-mode:screen;
}
.blob {
  position:absolute;
  width:60vw;
  height:60vw;
  max-width:1100px;
  max-height:1100px;
  border-radius:50%;
  filter: blur(80px);
  opacity:.35;
  will-change:transform;
  animation: float 18s ease-in-out infinite;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.blob.violet { background: radial-gradient(closest-side, rgba(190, 90, 255, .85), rgba(190, 90, 255, 0) 65%); }
.blob.pink   { background: radial-gradient(closest-side, rgba(255, 90, 180, .85), rgba(255, 90, 180, 0) 65%); }
.blob.fuchsia{ background: radial-gradient(closest-side, rgba(255, 0, 150, .7), rgba(255, 0, 150, 0) 65%); }
.blob.blue   { background: radial-gradient(closest-side, rgba(120, 200, 255, .65), rgba(120, 200, 255, 0) 65%); }

@keyframes float {
  0%   { transform:translate(-50%,-50%) translateY(0) }
  50%  { transform:translate(-50%,-50%) translateY(-4%) }
  100% { transform:translate(-50%,-50%) translateY(0) }
}

/* --- Layout --- */
.container {
  max-width:980px;
  margin:0 auto;
  padding:32px 16px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}
.profile {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}
.avatar {
  width:96px;
  height:96px;
  border-radius:50%;
  background:#222 url('../images/delaiilla.png') center/cover no-repeat;
  box-shadow:var(--ring);
}
h1 {
  font-size:28px;
  margin:8px 0 0;
  letter-spacing:.3px;
}
.subtitle {
  color:var(--muted);
  font-size:14px;
}

/* --- Links --- */
.links {
  width:100%;
  max-width:640px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.btn {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  background:linear-gradient(180deg,#1a1a1f,#141418);
  color:var(--text);
  text-decoration:none;
  padding:16px 18px;
  border-radius:var(--radius);
  box-shadow:var(--ring);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .08s ease,border-color .2s ease,
             background .2s ease, box-shadow .2s ease;
}
.btn:hover {
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),
             0 12px 34px rgba(0,0,0,.6),
             0 0 18px -6px rgba(255,138,0,.35);
}
.btn .icon {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  opacity:.9;
  flex:0 0 22px;
}
.btn .icon img {
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
}
.btn .label {
  flex:1;
  font-weight:600;
  letter-spacing:.2px;
}
.btn .chev { opacity:.5 }

/* --- Sections --- */
section {
  width:100%;
  max-width:980px;
}
.section-title {
  font-size:18px;
  font-weight:800;
  letter-spacing:.3px;
  margin:22px 0 12px;
}
.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width:900px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:620px) {
  .grid { grid-template-columns:1fr }
}
.card {
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--ring);
}
.thumb {
  aspect-ratio:16/9;
  width:100%;
  display:block;
  background:#222;
  object-fit:cover;
}
.card-body {
  padding:12px 12px 14px;
}
.card h3 {
  font-size:14px;
  margin:0 0 6px;
}
.meta {
  font-size:12px;
  color:var(--muted);
}

/* --- Twitch --- */
.twitch-stack {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.player,
.chat {
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  overflow:hidden;
  background:#000;
  box-shadow:var(--ring);
}
.player { aspect-ratio:16/9; width:100% }
.chat { width:100%; height:520px }
iframe { display:block; width:100%; height:100%; border:0 }

/* --- Footer --- */
.foot {
  margin-top:18px;
  background:var(--pill);
  padding:10px 14px;
  border-radius:999px;
  color:#d9d9de;
  font-size:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--ring);
}