:root{
 --bg:#0b0f0b;
 --card:rgba(255,255,255,.06);
 --card-border:rgba(83,252,24,.3);
 --green:#53FC18;
 --green-dim:rgba(83,252,24,.4);
 --text:#eef6ee;
 --text-dim:rgba(238,246,238,.75);
 --radius-lg:20px;
 --radius-pill:999px;
 --ease:.3s ease;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

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

/* Ambient glow background */
body::before{
 content:"";
 position:fixed;
 inset:-20%;
 background:
 radial-gradient(circle at 20% 30%, rgba(83,252,24,.25), transparent 35%),
 radial-gradient(circle at 80% 20%, rgba(83,252,24,.15), transparent 30%),
 radial-gradient(circle at 60% 80%, rgba(83,252,24,.18), transparent 35%);
 filter:blur(60px);
 animation:move 18s ease-in-out infinite alternate;
 z-index:-2;
}

@keyframes move{
 to{transform:translate(5%,3%) scale(1.1)}
}

@keyframes pulse{
 50%{transform:scale(1.6); opacity:.4}
}

@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto}
 body::before{animation:none}
 .dot{animation:none}
 .btn, .card{transition:none}
}

section{
 padding:80px 20px;
 max-width:1200px;
 margin:auto;
}

section > h2{
 font-size:clamp(1.6rem, 4vw, 2.2rem);
 margin-bottom:1rem;
}

.hero{
 min-height:100vh;
 display:grid;
 place-items:center;
 text-align:center;
}

.avatar{
 width:170px;
 height:170px;
 margin:0 auto;
 border-radius:50%;
 background:#161c16;
 border:4px solid var(--green);
 box-shadow:0 0 40px var(--green-dim);
 display:grid;
 place-items:center;
 font-size:2.5rem;
 font-weight:bold;
 color:var(--green);
}

h1{
 font-size:clamp(2.5rem, 7vw, 5rem);
 margin:.8rem 0;
 letter-spacing:-.02em;
}

.bio{
 max-width:700px;
 margin-left:auto;
 margin-right:auto;
 color:var(--text-dim);
 line-height:1.7;
}

.btn{
 display:inline-block;
 margin-top:1rem;
 padding:14px 28px;
 border:2px solid var(--green);
 color:#fff;
 text-decoration:none;
 border-radius:var(--radius-pill);
 transition:background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.btn:hover,
.btn:focus-visible,
.card:hover,
.card:focus-visible{
 background:var(--green);
 color:#000;
 transform:translateY(-6px);
 box-shadow:0 0 30px var(--green-dim);
}

a:focus-visible,
.btn:focus-visible{
 outline:2px solid var(--green);
 outline-offset:4px;
}

.stream-wrap{
 position:relative;
 width:100%;
 max-width:900px;
 margin:0 auto 30px;
 aspect-ratio:16/9;
 border-radius:var(--radius-lg);
 overflow:hidden;
 border:1px solid var(--card-border);
 box-shadow:0 0 40px rgba(83,252,24,.15);
 background:#000;
}

.stream-wrap iframe{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 border:0;
}

.offline-state{
 position:absolute;
 inset:0;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:10px;
 text-align:center;
 padding:20px;
 background:
 radial-gradient(circle at 50% 30%, rgba(83,252,24,.12), transparent 60%),
 #0f140f;
}

.offline-avatar{
 width:64px;
 height:64px;
 border-radius:50%;
 background:#161c16;
 border:2px solid var(--green);
 display:grid;
 place-items:center;
 font-weight:bold;
 color:var(--green);
 opacity:.8;
}

.offline-title{
 font-size:1.2rem;
 font-weight:bold;
 margin:0;
}

.offline-sub{
 color:var(--text-dim);
 margin:0 0 6px;
 font-size:.95rem;
}

.offline-state .btn{
 margin-top:0;
 padding:10px 22px;
 font-size:.9rem;
}

.dot{
 width:10px;
 height:10px;
 border-radius:50%;
 background:#ff3b3b;
 box-shadow:0 0 10px #ff3b3b;
 animation:pulse 1s infinite;
 flex-shrink:0;
}

.dot.offline{
 background:#555;
 box-shadow:none;
 animation:none;
}

.live{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 color:var(--green);
 font-weight:bold;
 letter-spacing:.04em;
}

.stats{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
 gap:20px;
 margin-top:30px;
}

.card{
 background:var(--card);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 border:1px solid var(--card-border);
 border-radius:var(--radius-lg);
 padding:30px;
 text-align:center;
 transition:background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.num{
 font-size:2.2rem;
 color:var(--green);
 font-weight:bold;
 line-height:1.2;
}

.socials{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
 gap:20px;
}

.socials a{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:12px;
 text-decoration:none;
 color:#fff;
 font-weight:600;
}

.socials svg{
 width:32px;
 height:32px;
 fill:var(--green);
 transition:transform var(--ease);
}

.card:hover svg,
.card:focus-visible svg{
 fill:#000;
 transform:scale(1.1);
}

.kick{grid-column:span 2}

footer{
 text-align:center;
 padding:40px 20px;
 color:var(--text-dim);
}

footer a{color:var(--green); text-decoration:none}
footer a:hover, footer a:focus-visible{text-decoration:underline}

@media (max-width:700px){
 .kick{grid-column:auto}
}

.avatar {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    padding: 0;
    position: relative;
}

.avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    object-position: center 40%;
}