:root{
  --bg:#0d0f14; --ink:#e8f1f2; --muted:#9fb0b6;
  --glass:rgba(255,255,255,0.06); --glass-strong:rgba(255,255,255,0.12);
  --accent:#67e8f9; --accent-2:#a7f3d0; --mc-green:#55ff55;
  --radius:22px;
  --gradA:#0ea5e9; --gradB:#22d3ee; --gradC:#10b981; --gradSpeed:20s;
}
*{box-sizing:border-box;user-select: none;}
html,body{height:100%}
body{
  margin:0; background: var(--bg); color:var(--ink);
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', Arial;
  overflow-x:hidden;
}
/* Fond animé vert/bleu contrôlé par variables */
.bg-wrap{position:fixed; inset:0; overflow:hidden; z-index:-2}
.grad{
  position:absolute; inset:-10%; filter: blur(60px); opacity:.4;
  background:
    radial-gradient(1200px 1200px at 10% 10%, var(--gradA) 0%, transparent 60%),
    radial-gradient(900px 900px at 90% 30%, var(--gradB) 0%, transparent 60%),
    radial-gradient(1200px 1200px at 50% 90%, var(--gradC) 0%, transparent 60%);
  animation: drift var(--gradSpeed) linear infinite alternate;
}
@keyframes drift{to{transform: translate3d(0,-40px,0) scale(1.02)}}
.pixel-layer{position:absolute; inset:0; background-image:
  linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px; image-rendering: pixelated; mix-blend-mode: soft-light;
}

.floaters{position:fixed; inset:0; pointer-events:none; z-index:-1}
.floater{position:absolute; width:10px; height:10px; background:var(--glass-strong); box-shadow: 0 10px 40px rgba(0,0,0,.35); filter: saturate(1.2);}

.wrap{min-height:100%; display:grid; place-items:center; padding:56px 18px;}
.card{width:min(760px, 92vw); background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.12); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.35); backdrop-filter: blur(14px) saturate(1.1);}
.card-inner{padding:28px 24px 22px 24px}

.header{display:flex; gap:18px; align-items:center;}
.avatar{width:auto; height:150px; border-radius:18px; overflow:hidden; border:2px solid rgba(255,255,255,.18); box-shadow: 0 10px 40px rgba(0,0,0,.35); position:relative}
.avatar::after{content:''; position:absolute; inset:0; background:linear-gradient(45deg, transparent, rgba(103,232,249,.15)); mix-blend-mode: screen}
.avatar img{width:100%; height:100%; object-fit:cover; image-rendering: pixelated}
.title{display:flex; flex-direction:column; gap:6px}
.name{font-weight:800; letter-spacing:.3px; font-size: clamp(22px, 3.4vw, 34px)}
.tag{font-family:'VT323', monospace; font-size: clamp(16px, 2.4vw, 22px); color:var(--muted)}

.links{display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px}
@media (min-width:700px){ .links{grid-template-columns:1fr 1fr} }
.link{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background: var(--glass);
  border:1px solid rgba(255,255,255,0.12); text-decoration:none; color:var(--ink);
  transition: transform .15s ease, border-color .2s ease, background .2s ease; will-change: transform; }
.link:hover{ transform: translateY(-2px); border-color: rgba(103,232,249,.55); background: rgba(103,232,249,.06); }
.link .icon{font-size:22px; width:26px; text-align:center}
.link .meta{display:flex; flex-direction:column; line-height:1.2}
.link .meta .label{font-weight:600}
.link .meta .desc{color:var(--muted); font-size:14px}

.player{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px; border-radius:16px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.2)); border:1px solid rgba(255,255,255,.12); }
.controls{display:flex; align-items:center; gap:10px}
.btn{appearance:none; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color:var(--ink); padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; transition: transform .1s ease, background .2s ease, border-color .2s ease}
.btn:hover{background: rgba(255,255,255,.12); border-color: rgba(103,232,249,.55)}
.btn:active{transform: translateY(1px)}
.volume{display:flex; align-items:center; gap:8px}
.volume input{accent-color: var(--accent); width:150px}
.status{font-size:14px; color:var(--muted)}

.footer{margin-top:16px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:13px}
.mc-sparkle{color:var(--mc-green)}
.mc-frame{position:absolute; inset:0; pointer-events:none}
.mc-frame:before, .mc-frame:after{content:""; position:absolute; width:22px; height:22px; border:2px solid rgba(255,255,255,.15)}
.mc-frame:before{left:14px; top:14px; border-right:none; border-bottom:none}
.mc-frame:after{right:14px; bottom:14px; border-left:none; border-top:none}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}