*{box-sizing:border-box}
:root{
  --accent:#57f0c6;
  --text:#f7fafc;
  --muted:rgba(247,250,252,.55);
  --glass:rgba(24,35,44,.28);
  --glass-strong:rgba(22,34,43,.43);
  --line:rgba(255,255,255,.08);
}
html,body{
  width:100%;
  min-height:100%;
  margin:0;
}
body{
  min-height:100svh;
  overflow-x:hidden;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#0d151b;
}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{
  width:1em;height:1em;display:block;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.background{
  position:fixed;
  inset:0;
  z-index:-3;
  background:center/cover no-repeat;
  transform:scale(1.025);
  animation:bgIn 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.background::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,160,110,.05),transparent 30%),
    linear-gradient(to bottom,rgba(12,14,17,.15),rgba(8,14,18,.08) 40%,rgba(9,20,27,.46) 100%);
  backdrop-filter:blur(var(--bg-blur,0px));
  -webkit-backdrop-filter:blur(var(--bg-blur,0px));
}
.vignette{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(to bottom,transparent 55%,rgba(6,13,17,.28)),
    radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.17) 100%);
}
.page{
  min-height:100svh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:
    max(28px,env(safe-area-inset-top))
    18px
    max(28px,env(safe-area-inset-bottom));
}
.profile{
  width:min(404px,100%);
  position:relative;
  animation:profileIn .8s .06s cubic-bezier(.2,.8,.2,1) both;
}
.banner{
  height:122px;
  border-radius:16px 16px 4px 4px;
  overflow:hidden;
  position:relative;
  background:center/cover no-repeat;
  box-shadow:0 18px 45px rgba(0,0,0,.23);
  border:1px solid rgba(255,255,255,.05);
}
.banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.02),rgba(0,0,0,.24));
}
.banner-decor{
  position:absolute;
  right:10px;
  top:-44px;
  font-size:76px;
  color:#050505;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.2));
  transform:rotate(-9deg);
  animation:floatDecor 5s ease-in-out infinite;
}
.avatar-wrap{
  position:relative;
  width:70px;
  height:70px;
  margin:-35px auto 0;
  z-index:5;
  animation:avatarIn .8s .18s cubic-bezier(.2,.9,.2,1) both;
}
.avatar{
  width:70px;
  height:70px;
  border-radius:15px;
  object-fit:cover;
  display:block;
  border:2px solid rgba(255,255,255,.16);
  background:#111820;
  box-shadow:0 10px 25px rgba(0,0,0,.38);
}
.online-dot{
  position:absolute;
  right:-1px;
  bottom:6px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid #18242c;
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent);
  animation:pulseDot 2.2s ease-in-out infinite;
}
.identity{
  text-align:center;
  margin-top:7px;
  animation:rise .7s .22s both;
}
.username-line{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
}
h1{
  margin:0;
  font-size:13px;
  line-height:1;
  font-weight:700;
  letter-spacing:.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.verified{
  width:13px;
  height:13px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#0b4136;
}
.verified svg{width:9px;height:9px;stroke-width:2.8}
.handle{
  margin-top:4px;
  color:rgba(255,255,255,.45);
  font-size:9px;
}
.stats-row{
  margin-top:11px;
  display:flex;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  animation:rise .7s .28s both;
}
.stat-pill{
  height:21px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:999px;
  background:rgba(16,25,32,.34);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.67);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:8px;
}
.stat-pill svg{width:10px;height:10px}
.badges-row{
  min-height:17px;
  margin-top:5px;
  display:flex;
  justify-content:center;
  gap:5px;
  animation:rise .7s .32s both;
}
.mini-badge{
  width:15px;height:15px;
  display:grid;place-items:center;
  color:rgba(255,255,255,.82);
}
.mini-badge svg{width:13px;height:13px}
.bio{
  max-width:305px;
  margin:4px auto 0;
  text-align:center;
  font-size:9px;
  line-height:1.55;
  color:rgba(255,255,255,.46);
  animation:rise .7s .36s both;
}
.social-row{
  display:flex;
  justify-content:center;
  gap:11px;
  margin-top:15px;
  animation:rise .7s .40s both;
}
.social-btn{
  width:38px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:rgba(255,255,255,.80);
  background:linear-gradient(180deg,rgba(48,66,78,.27),rgba(27,42,52,.21));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.social-btn:hover{
  transform:translateY(-3px) scale(1.035);
  background:rgba(55,76,89,.38);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.social-btn:active{transform:scale(.96)}
.social-btn.is-accent{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,rgba(38,55,66,.22));
}
.social-btn svg{width:18px;height:18px}
.music-card{
  width:350px;
  max-width:calc(100% - 34px);
  min-height:74px;
  margin:18px auto 0;
  border-radius:15px;
  padding:11px 10px 11px 12px;
  display:grid;
  grid-template-columns:43px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  background:linear-gradient(100deg,rgba(18,31,39,.47),rgba(35,55,67,.22));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 14px 30px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  animation:rise .7s .46s both;
  transition:transform .2s ease,background .2s ease;
}
.music-card:hover{
  transform:translateY(-2px);
  background:linear-gradient(100deg,rgba(22,37,47,.52),rgba(39,61,74,.25));
}
.album{
  width:43px;height:43px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 5px 14px rgba(0,0,0,.42);
  animation:spin 11s linear infinite paused;
}
.album.playing{animation-play-state:running}
.track-title{
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
  font-weight:700;
  color:rgba(255,255,255,.84);
}
.track-artist{
  margin-top:3px;
  font-size:7px;
  color:rgba(255,255,255,.37);
}
.timeline{
  margin-top:8px;
  display:grid;
  grid-template-columns:23px minmax(70px,1fr) 23px;
  align-items:center;
  gap:5px;
  font-size:6px;
  color:rgba(255,255,255,.34);
}
.timeline input{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:2px;
  border:0;
  outline:none;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.timeline input::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.82);
}
.timeline input::-moz-range-thumb{
  width:6px;height:6px;border:0;border-radius:50%;
  background:rgba(255,255,255,.82);
}
.player-controls{
  display:flex;
  align-items:center;
  gap:4px;
}
.player-btn{
  width:29px;height:29px;
  border:0;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.065);
  color:rgba(255,255,255,.58);
  cursor:pointer;
  transition:transform .15s ease,background .15s ease,color .15s ease;
}
.player-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.105);
  color:#fff;
}
.player-btn:active{transform:scale(.93)}
.player-btn.main{
  background:rgba(255,255,255,.11);
  color:#fff;
}
.player-btn svg{width:13px;height:13px}

@keyframes bgIn{
  from{opacity:0;transform:scale(1.08)}
  to{opacity:1;transform:scale(1.025)}
}
@keyframes profileIn{
  from{opacity:0;transform:translateY(24px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes avatarIn{
  from{opacity:0;transform:translateY(8px) scale(.78)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes rise{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseDot{
  0%,100%{box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent)}
  50%{box-shadow:0 0 18px color-mix(in srgb,var(--accent) 80%,transparent)}
}
@keyframes floatDecor{
  0%,100%{transform:translateY(0) rotate(-9deg)}
  50%{transform:translateY(-3px) rotate(-7deg)}
}

@media (max-width:480px){
  .page{
    align-items:center;
    padding-left:16px;
    padding-right:16px;
  }
  .profile{
    width:min(404px,calc(100vw - 32px));
  }
  .banner{
    width:100%;
    height:clamp(105px,29vw,122px);
  }
  .avatar-wrap{
    width:68px;height:68px;
    margin-top:-34px;
  }
  .avatar{width:68px;height:68px}
  .music-card{
    width:min(350px,calc(100vw - 52px));
    grid-template-columns:42px minmax(0,1fr);
  }
  .player-controls{
    grid-column:1/-1;
    justify-content:flex-end;
    margin-top:-2px;
  }
  .track-title{max-width:none}
}
@media (max-width:360px){
  .page{padding-left:12px;padding-right:12px}
  .profile{width:calc(100vw - 24px)}
  .social-row{gap:8px}
  .social-btn{width:36px;height:36px}
  .music-card{
    width:calc(100vw - 40px);
    padding:10px;
    gap:8px;
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

.avatar-decoration{
  position:absolute;
  left:50%;
  top:50%;
  width:88px;
  height:88px;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  z-index:7;
  display:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
@media (max-width:480px){
  .avatar-decoration{
    width:86px;
    height:86px;
  }
}


/* =========================================================
   CLICK TO ENTER
   ========================================================= */
.enter-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  overflow:hidden;
  opacity:1;
  visibility:visible;
  transition:
    opacity .72s cubic-bezier(.2,.75,.2,1),
    visibility .72s step-end;
}
.enter-overlay.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.enter-glass{
  position:absolute;
  inset:-24px;
  background:rgba(5,10,14,.22);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  transform:scale(1.03);
}
.enter-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.025),transparent 32%),
    linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.24));
}
.enter-button{
  position:relative;
  z-index:2;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.92);
  padding:22px 34px;
  cursor:pointer;
  font:600 11px/1 "Inter",sans-serif;
  letter-spacing:.42em;
  text-indent:.42em;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
  animation:clickPulse 2.1s ease-in-out infinite;
}
.enter-button::before,
.enter-button::after{
  content:"";
  position:absolute;
  left:50%;
  width:42px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  transform:translateX(-50%);
  transition:width .22s ease,opacity .22s ease;
}
.enter-button::before{top:8px}
.enter-button::after{bottom:8px}
.enter-button:hover::before,
.enter-button:hover::after{width:72px}
.enter-button:active{transform:scale(.96)}

body.enter-locked{
  overflow:hidden;
}

@keyframes clickPulse{
  0%,100%{opacity:.64;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-2px)}
}

/* =========================================================
   YOUTUBE VIDEO BACKGROUND
   ========================================================= */
.youtube-background{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  display:none;
  background:#0d151b;
  pointer-events:none;
}
.youtube-background iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:177.77777778vh;
  height:56.25vw;
  min-width:100%;
  min-height:100%;
  transform:translate(-50%,-50%) scale(1.08);
  border:0;
  pointer-events:none;
}
.youtube-background::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,160,110,.05),transparent 30%),
    linear-gradient(to bottom,rgba(12,14,17,.15),rgba(8,14,18,.08) 40%,rgba(9,20,27,.46) 100%);
  pointer-events:none;
}

@media (max-width:480px){
  .enter-glass{
    backdrop-filter:blur(15px) saturate(120%);
    -webkit-backdrop-filter:blur(15px) saturate(120%);
  }
  .enter-button{
    font-size:10px;
    letter-spacing:.34em;
    text-indent:.34em;
  }
}


/* Player YouTube jest poza ekranem, ale zachowuje normalny rozmiar.
   Część przeglądarek blokuje odtwarzanie z iframe 1x1 / display:none. */
.youtube-music-player{
  position:fixed;
  width:320px;
  height:180px;
  left:-10000px;
  top:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.01;
}


/* =========================================================
   DISCORD PRESENCE CARD — pod odtwarzaczem
   ========================================================= */
.presence-card{
  width:350px;
  max-width:calc(100% - 34px);
  min-height:78px;
  margin:14px auto 0;
  padding:14px 15px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:14px;
  border-radius:15px;
  background:linear-gradient(100deg,rgba(27,41,51,.38),rgba(31,48,59,.22));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 14px 30px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  animation:presenceIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.presence-user{display:flex;align-items:center;gap:10px;min-width:145px}
.presence-avatar-wrap{position:relative;width:42px;height:42px;flex-shrink:0}
.presence-avatar{
  width:42px;height:42px;display:block;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 5px 14px rgba(0,0,0,.25)
}
.presence-dot{
  position:absolute;right:-1px;bottom:1px;width:10px;height:10px;border-radius:50%;
  background:#80848e;border:2px solid rgba(23,34,42,.95)
}
.presence-copy{min-width:0}
.presence-name{
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,.86);font-size:10px;font-weight:700
}
.presence-state{margin-top:4px;color:rgba(255,255,255,.34);font-size:8px}
.presence-activity{
  min-height:48px;display:flex;align-items:center;padding:10px 12px;border-radius:11px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.025);
  color:rgba(255,255,255,.38);font-size:8px;line-height:1.4;overflow:hidden
}
.presence-card[data-status="online"] .presence-dot{background:#23a55a;box-shadow:0 0 11px rgba(35,165,90,.32)}
.presence-card[data-status="idle"] .presence-dot{background:#f0b232;box-shadow:0 0 11px rgba(240,178,50,.26)}
.presence-card[data-status="dnd"] .presence-dot{background:#f23f43;box-shadow:0 0 11px rgba(242,63,67,.28)}
.presence-card[data-status="offline"] .presence-dot{background:#80848e}
@keyframes presenceIn{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:480px){
  .presence-card{width:min(350px,calc(100vw - 52px));grid-template-columns:1fr;gap:10px;padding:12px}
  .presence-user{min-width:0}
  .presence-activity{min-height:42px}
}


/* =========================================================
   GLASS OVERRIDES — neutralne, przezroczyste tło
   ========================================================= */
.music-card{
  background:linear-gradient(100deg,rgba(10,13,16,.20),rgba(16,19,22,.10));
  border-color:rgba(255,255,255,.045);
  box-shadow:0 14px 30px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.018);
  backdrop-filter:blur(22px) saturate(112%);
  -webkit-backdrop-filter:blur(22px) saturate(112%);
}
.music-card:hover{
  background:linear-gradient(100deg,rgba(12,15,18,.25),rgba(17,20,23,.13));
  border-color:rgba(255,255,255,.07);
}
.presence-card{
  background:linear-gradient(100deg,rgba(10,13,16,.18),rgba(16,19,22,.09));
  border-color:rgba(255,255,255,.04);
  box-shadow:0 14px 30px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.016);
  backdrop-filter:blur(22px) saturate(108%);
  -webkit-backdrop-filter:blur(22px) saturate(108%);
}
.presence-activity{
  background:rgba(255,255,255,.012);
  border-color:rgba(255,255,255,.018);
}

/* =========================================================
   ADMIN BUTTON — widoczny tylko przy aktywnej sesji admina
   ========================================================= */
.admin-button{
  position:fixed;
  top:max(16px,env(safe-area-inset-top));
  left:16px;
  z-index:5000;

  padding:8px 12px;
  border-radius:10px;

  border:1px solid rgba(255,255,255,.07);
  background:rgba(8,10,12,.13);

  backdrop-filter:blur(16px) saturate(110%);
  -webkit-backdrop-filter:blur(16px) saturate(110%);

  box-shadow:
    0 8px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.025);

  color:rgba(255,255,255,.55);
  text-decoration:none;

  font:600 8px/1 "Inter",system-ui,sans-serif;
  letter-spacing:.16em;

  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}
.admin-button:hover{
  color:#fff;
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.13);
  transform:translateY(-1px);
}
.admin-button[hidden]{display:none!important;}

/* =========================================================
   TURNSTILE VERIFY
   ========================================================= */

.verify-overlay{
  position:fixed;
  inset:0;

  z-index:10000;

  display:grid;
  place-items:center;

  background:
    rgba(5,8,10,.42);

  backdrop-filter:
    blur(18px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(115%);

  opacity:1;
  visibility:visible;

  transition:
    opacity .55s ease,
    visibility .55s step-end;
}


.verify-overlay.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}


.verify-box{
  width:min(
    330px,
    calc(100vw - 34px)
  );

  padding:24px 20px;

  text-align:center;

  border-radius:17px;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    rgba(10,13,16,.30);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.24),
    inset 0 1px 0
    rgba(255,255,255,.025);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.verify-icon{
  width:34px;
  height:34px;

  margin:
    0 auto 13px;

  color:
    rgba(255,255,255,.72);
}


.verify-icon svg{
  width:100%;
  height:100%;

  fill:none;

  stroke:
    currentColor;

  stroke-width:1.5;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.verify-title{
  font-size:13px;
  font-weight:700;

  color:
    rgba(255,255,255,.9);
}


.verify-text{
  margin:
    6px 0 17px;

  font-size:9px;

  color:
    rgba(255,255,255,.4);
}


.cf-turnstile{
  display:flex;
  justify-content:center;
}