:root{
    --bg:#0f0f12;
    --panel:#15151a;
    --muted:#22222a;
    --text:#e8e8ee;
    --sub:#b4b4bf;
    --accent:#f4a6c4; /* rose clair */
    --accent-2:#ffcae2; /* rose encore plus clair pour hovers */
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
    /* Brand colors */
    --tw:#1DA1F2; /* Twitter/X (ancien) */
    --tw-hover:#5ec6ff;
    --twitch:#9146FF;
    --twitch-hover:#b08aff;
    --yt:#FF0000;
    --yt-hover:#ff4d4d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background-size: cover;
    color:var(--text);
    line-height:1.6;
}

/* Player section */
.player{padding:38px 0 18px}
.sub{color:var(--sub); margin-top:-6px}

.profile-card{
    display:grid; grid-template-columns: 180px 1fr; gap:26px; align-items:center;
    background:linear-gradient(180deg, rgba(244,166,196,.08), rgba(244,166,196,.03)) , var(--panel);
    border:1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    padding:22px; box-shadow: var(--shadow);
}
.avatar-lg{aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:var(--muted); border:1px solid rgba(255,255,255,.06)}
.avatar-lg img{width:100%; height:100%; object-fit:cover; display:block}

.title-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
h1{font-size: clamp(26px, 3vw, 34px); margin:0}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:var(--accent-2); background:rgba(244,166,196,.08)}

.meta{
    margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}
.meta li{display:flex; flex-direction:column; gap:2px; background:var(--muted); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:10px 12px}
.meta li span{color:var(--sub); font-size:.85rem}
.meta li strong{font-size:1rem}

.socials{display:flex; gap:12px; margin-top:14px}
.socials a{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.03);
    transition: background 0.2s ease, transform 0.15s ease;
}
.socials a:hover{transform:translateY(-1px)}


/* Twitter */
.socials a.twitter{ color: var(--tw); }
.socials a.twitter:hover{ background: color-mix(in srgb, var(--tw) 18%, transparent); }


/* Twitch */
.socials a.twitch{ color: var(--twitch); }
.socials a.twitch:hover{ background: color-mix(in srgb, var(--twitch) 18%, transparent); }


/* YouTube */
.socials a.youtube{ color: var(--yt); }
.socials a.youtube:hover{ background: color-mix(in srgb, var(--yt) 18%, transparent); }


/* Instagram – icône en dégradé via background-clip */
.socials a.instagram i{
    background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.socials a.instagram:hover{ background: rgba(221,42,123,.18); }


.socials i{font-size:16px; line-height:1}
.btn{
    display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; letter-spacing:.2px;
    color:var(--bg); background:linear-gradient(180deg, var(--accent), var(--accent-2));
    border:0; border-radius:12px; padding:10px 14px; box-shadow:0 6px 20px rgba(244,166,196,.25);
    transition:transform 120ms ease, box-shadow 120ms ease
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(244,166,196,.3)}

.grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; margin-top:22px}
.panel{background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px}
.panel h2{margin:0 0 12px 0; font-size:1.2rem}

.setup{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.setup li{display:flex; justify-content:space-between; gap:12px; background:var(--muted); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:10px 12px}
.label{color:var(--sub)}

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.88) center/cover no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
}

.intro-overlay.show {
    opacity: 1;
    visibility: visible;
}

.back-btn{
    left:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:1200px;
    font-size:0.9rem;
    background:rgba(244,166,196,.1);
    color:var(--accent);
    text-decoration:none;
    border:1px solid rgba(255,255,255,.08);
    transition:background 0.2s ease, transform 0.2s ease;
}
.back-btn:hover{
    background:rgba(244,166,196,.2);
    transform:translateX(-2px);
}

.bio{color:var(--text)}

/* Responsive */
@media (max-width: 820px){
    .profile-card{grid-template-columns: 1fr}
    .grid{grid-template-columns:1fr}
    .meta{grid-template-columns:1fr; gap:8px}
}