/*Header*/
#header {
    background: url("../../images/section.jpg") no-repeat fixed center;
    min-width: 100%;
    min-height: 400px;
    height: 30vh;
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    z-index: 0;
    display: flex;
    align-items: center;
}

#header .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 150px;
    width: 100%;
}

#header .content .info {
    display: flex;
    flex-direction: column;
}

#header .content .info .minecraft-server-ip {
    color: var(--white-color);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
}

#header .content .info .title {
    color: var(--white-color);
    text-transform: uppercase;
    font-size: 65px;
    font-weight: 900;
}

#header .content .info .title span {
    color: var(--main-color);
}

#header .content .description {
    color: var(--description-color);
    font-size: 18px;
    font-weight: 400;
    max-width: 700px;
    line-height: 1.6;
}

/*Admin-Team*/
#admin-team .content {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

#admin-team .group {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#admin-team .group .rank-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--white-color);
    position: relative;
}

#admin-team .group .rank-title::before {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 0;
    width: 150px;
    height: 1px;
    border-radius: 5px;
    background: var(--description-color);
}

#admin-team .group .rank-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    border-radius: 5px;
    background: var(--main-color);
}

#admin-team .group .users {
    display: flex;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap;
}

#admin-team .group .users .user {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

#admin-team .group .users .user img {
    max-width: 150px;
}

#admin-team .group .users .user .name {
    color: var(--white-color);
    text-transform: uppercase;
    font-size: 17px;
    font-weight: 700;
}

#admin-team .group .users .user .rank {
    color: var(--white-color);
    font-size: 17px;
    width: fit-content;
    padding: 5px 10px;
    text-align: center;
    border-radius: 5px;
}

.rank {
    background: var(--default-rank-color);
}

/*Footer*/
#footer {
    background: var(--stats-background);
}

/*Responsive*/
/*Header*/
@media screen and (max-width: 1625px) {
    #header .content {
        padding: 150px 90px;
    }
}

@media screen and (max-width: 1361px) {
    #header .content {
        flex-direction: column;
        padding: 120px 90px;
    }
}

@media screen and (max-width: 819px) {
    #header .content {
        padding: 150px 30px;
    }

    #header .content .info .minecraft-server-ip {
        font-size: 15px;
    }

    #header .content .info .title {
        font-size: 40px;
    }

    #header .content .info .description {
        font-size: 16px;
    }
}

@media screen and (max-width: 530px) {
    #header .content {
        justify-content: start;
        align-items: start;
    }

    #header .content .info .title {
        font-size: 30px;
    }
}

/*Admin-Team*/
@media screen and (max-width: 390px) {
    #admin-team .group .users .user img {
        max-width: 100%;
    }

    #admin-team .group .users .user .name {
        font-size: 20px;
    }
}

/* --- Animowane modele 3D skinów (skinview3d) --- */
#admin-team .group .users .user .skin-view {
    width: 150px;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#admin-team .group .users .user .skin-view .skin-fallback {
    max-width: 150px;
    max-height: 200px;
}
#admin-team .group .users .user .skin-view .skin-canvas {
    position: absolute;
    inset: 0;
    margin: auto;
    cursor: grab;
}
#admin-team .group .users .user .skin-view .skin-canvas:active {
    cursor: grabbing;
}
/* po udanym załadowaniu modelu 3D chowamy statyczny obrazek */
#admin-team .group .users .user .skin-view.is-3d .skin-fallback {
    display: none;
}

/* ============================================================
   EKIPA: karty-flip (najechanie odwraca) — przód: model 3D + ranga,
   tył: ikona roli + opis. Ten sam styl co Voice Aktorzy.
   ============================================================ */
#admin-team .group .users .user {
    position: relative;
    width: 242px;
    height: 404px;
    perspective: 900px;
    cursor: pointer;
    border-radius: 18px;
    transition: transform 0.25s ease;
}
#admin-team .group .users .user:hover { transform: translateY(-6px); }
#admin-team .group .users .user:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 4px;
}
#admin-team .card-flip {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    will-change: transform;
}
#admin-team .user.flipped .card-flip { transform: rotateY(180deg); }
/* najechanie odwraca kartę (urządzenia z kursorem; na dotyku działa tap) */
@media (hover: hover) and (pointer: fine) {
    #admin-team .user:hover .card-flip { transform: rotateY(180deg); }
}

#admin-team .card-face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 18px;
    border-radius: 18px;
    border: 1px solid transparent;
    background:
        radial-gradient(90% 55% at 50% 108%, rgba(228, 59, 107, 0.16), transparent 70%) padding-box,
        linear-gradient(180deg, rgba(46, 24, 30, 0.92), rgba(16, 8, 11, 0.96)) padding-box,
        linear-gradient(165deg, rgba(228, 59, 107, 0.60), rgba(247, 170, 169, 0.14) 45%, rgba(228, 59, 107, 0.50)) border-box;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    transition: box-shadow 0.25s ease;
}
#admin-team .user:hover .card-face {
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38), 0 0 32px rgba(228, 59, 107, 0.30);
}
#admin-team .card-back {
    transform: rotateY(180deg);
    gap: 9px;
    padding: 18px 20px;
    text-align: center;
    /* przy długiej treści wyrównuj od góry zamiast ucinać nick (safe center) */
    justify-content: safe center;
}
#admin-team .card-back .back-ico { font-size: 28px; color: #F27E9E; opacity: 0.95; text-shadow: 0 0 22px rgba(228, 59, 107, 0.55); }
#admin-team .card-back .desc {
    color: var(--description-color);
    font-size: 12.5px;
    line-height: 1.34;
    max-width: 190px;
}

/* --- awers: model 3D (poświata + świecący podest) --- */
#admin-team .card-front .skin-view {
    position: relative;
    width: 150px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#admin-team .card-front .skin-view::before {
    content: "";
    position: absolute;
    inset: -12px;
    background: radial-gradient(circle at 50% 42%, rgba(228, 59, 107, 0.20), transparent 62%);
    z-index: 0;
    pointer-events: none;
}
#admin-team .card-front .skin-view::after {
    content: "";
    position: absolute;
    bottom: 2px; left: 50%;
    transform: translateX(-50%);
    width: 112px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(50% 60% at 50% 50%, rgba(228, 59, 107, 0.55), rgba(228, 59, 107, 0.12) 60%, transparent 78%);
    animation: atFloor 2.8s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes atFloor { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
#admin-team .skin-view .skin-canvas { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    #admin-team .card-flip { transition: none; }
    #admin-team .card-front .skin-view::after { animation: none; }
}
@media screen and (max-width: 460px) {
    #admin-team .group .users .user { width: 100%; max-width: 260px; }
}

/* --- Dopracowanie strony Ekipa (atmosfera „laboratorium" + tabliczki) --- */
#admin-team {
    position: relative;
    background:
        radial-gradient(70% 45% at 50% 0%, rgba(228, 59, 107, 0.12), transparent 60%),
        radial-gradient(90% 55% at 50% 116%, rgba(178, 68, 74, 0.12), transparent 72%);
}
#admin-team .content { position: relative; z-index: 1; }
#admin-team .group { margin-bottom: 6px; }
#admin-team .group .users {
    gap: 26px;
    justify-content: center;
    align-items: stretch;
}

/* --- Nagłówki grup: wyśrodkowane, z ikoną roli i ozdobnymi liniami --- */
#admin-team .group .group-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

#admin-team .group .group-head::before,
#admin-team .group .group-head::after {
    content: "";
    height: 2px;
    flex: 1;
    max-width: 220px;
    border-radius: 2px;
}

#admin-team .group .group-head::before {
    background: linear-gradient(90deg, transparent, rgba(228, 59, 107, 0.55));
}

#admin-team .group .group-head::after {
    background: linear-gradient(90deg, rgba(228, 59, 107, 0.55), transparent);
}

#admin-team .group .group-head .rank-title {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: center;
}

/* stary podkreślnik tytułu nie pasuje do wyśrodkowanego nagłówka */
#admin-team .group .group-head .rank-title::before,
#admin-team .group .group-head .rank-title::after {
    display: none;
}

#admin-team .group .group-head .rank-title i {
    color: var(--main-color);
    font-size: 24px;
}

/* --- Plakietka roli w rogu karty + akcenty kolorystyczne grup --- */
#admin-team .group .users .user .role-ico {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 14px;
    z-index: 1;
    pointer-events: none;
}

#admin-team .group.wlasciciele .user .card-face { border-color: rgba(228, 59, 107, 0.45); }
#admin-team .group.wlasciciele .user .role-ico { background: rgba(228, 59, 107, 0.18); color: #F27E9E; }
#admin-team .group.wlasciciele .group-head .rank-title i { color: #F27E9E; }

#admin-team .group.admini .user .card-face { border-color: rgba(178, 68, 74, 0.55); }
#admin-team .group.admini .user .role-ico { background: rgba(178, 68, 74, 0.24); color: #E58F94; }
#admin-team .group.admini .group-head .rank-title i { color: #D8767C; }

#admin-team .group.technicy .user .card-face { border-color: rgba(255, 159, 146, 0.42); }
#admin-team .group.technicy .user .role-ico { background: rgba(255, 159, 146, 0.16); color: #FF9F92; }
#admin-team .group.technicy .group-head .rank-title i { color: #FF9F92; }

#admin-team .group.modele3d .user .card-face { border-color: rgba(247, 170, 169, 0.42); }
#admin-team .group.modele3d .user .role-ico { background: rgba(247, 170, 169, 0.16); color: #F7AAA9; }
#admin-team .group.modele3d .group-head .rank-title i { color: #F7AAA9; }

/* jasne plakietki rang -> biały tekst z cieniem (czytelność na jasnym tle) */
#admin-team .group .users .user .rank.technicy,
#admin-team .group .users .user .rank.modele3d {
    color: var(--white-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    font-weight: 700;
}

/* nick — różowa pigułka, zawsze idealnie na środku karty */
#admin-team .group .users .user .name {
    align-self: center;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 8px;
    padding: 6px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(228, 59, 107, 0.16), rgba(20, 9, 12, 0.55));
    border: 1px solid rgba(228, 59, 107, 0.40);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 0 16px rgba(228, 59, 107, 0.18);
    color: var(--white-color);
    font-family: var(--display-font);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 15px;
    font-weight: 600;
}


/* sociale na rewersie karty ekipy */
#admin-team .card-back .va-socials {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    width: fit-content;
    max-width: 100%;
}
#admin-team .card-back .va-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
#admin-team .card-back .va-social-row i {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(228, 59, 107, 0.14);
    border: 1px solid rgba(228, 59, 107, 0.35);
    color: #F27E9E;
    font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease;
}
#admin-team .card-back .va-social-row span {
    color: var(--white-color);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#admin-team .card-back a.va-social-row:hover i {
    background: var(--main-color);
    color: var(--white-color);
}

/* ============================================================
   Zimowa karta (snow: true) — padający śnieg, szron i lodowa poświata.
   ============================================================ */
#admin-team .user.is-snow .card-face {
  border: 1px solid transparent;
  background:
    radial-gradient(85% 50% at 50% -8%, rgba(200, 235, 255, 0.20), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(28, 38, 58, 0.94), rgba(12, 14, 24, 0.97)) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(168, 222, 255, 0.55) 28%, rgba(120, 196, 255, 0.35) 58%, rgba(228, 59, 107, 0.40)) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), inset 0 0 34px rgba(150, 210, 255, 0.07), 0 0 20px rgba(168, 222, 255, 0.10);
}
#admin-team .user.is-snow:hover .card-face {
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.40), 0 0 34px rgba(150, 210, 255, 0.32);
}

/* --- padający śnieg: 3 warstwy o różnej wielkości i tempie --- */
#admin-team .user.is-snow .snow,
#admin-team .user.is-snow .snow::before,
#admin-team .user.is-snow .snow::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: -100%;
  height: 200%;
  z-index: 5;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 100% 50%;   /* wzór powtarza się dokładnie 2x → płynna pętla */
  animation: snow-fall 15s linear infinite;
  transition: opacity 0.3s ease;
}
/* warstwa daleka — drobny, delikatny śnieg */
#admin-team .user.is-snow .snow {
  opacity: 0.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 6%,  rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1.4px 1.4px at 74% 11%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.6px 1.6px at 38% 19%, rgba(255,255,255,0.90), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 26%, rgba(255,255,255,0.80), transparent 60%),
    radial-gradient(1.6px 1.6px at 22% 33%, rgba(255,255,255,0.92), transparent 60%),
    radial-gradient(1.4px 1.4px at 61% 41%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 47%,  rgba(255,255,255,0.88), transparent 60%);
}
/* warstwa środkowa — większe płatki, szybciej */
#admin-team .user.is-snow .snow::before {
  opacity: 0.75;
  animation-duration: 10s;
  background-image:
    radial-gradient(2.6px 2.6px at 30% 4%,  rgba(255,255,255,0.98), transparent 62%),
    radial-gradient(2.2px 2.2px at 85% 15%, rgba(230,245,255,0.92), transparent 62%),
    radial-gradient(2.8px 2.8px at 55% 24%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 15% 31%, rgba(230,245,255,0.90), transparent 62%),
    radial-gradient(2.6px 2.6px at 70% 44%, rgba(255,255,255,0.96), transparent 62%);
}
/* warstwa bliska — duże, rozmyte płatki (głębia) */
#admin-team .user.is-snow .snow::after {
  opacity: 0.55;
  animation-duration: 7s;
  filter: blur(1.2px);
  background-image:
    radial-gradient(4.5px 4.5px at 48% 9%,  rgba(255,255,255,0.95), transparent 65%),
    radial-gradient(3.8px 3.8px at 18% 22%, rgba(220,240,255,0.90), transparent 65%),
    radial-gradient(4.2px 4.2px at 80% 37%, rgba(255,255,255,0.92), transparent 65%);
}
@keyframes snow-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}

/* --- szron: mroźna mgiełka + oddychająca lodowa poświata --- */
#admin-team .user.is-snow .frost {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 18px;
  background:
    radial-gradient(120% 45% at 50% 0%,   rgba(210, 238, 255, 0.24), transparent 62%),
    radial-gradient(120% 40% at 50% 100%, rgba(170, 215, 255, 0.18), transparent 62%);
  box-shadow: inset 0 0 26px rgba(190, 228, 255, 0.16);
  opacity: 0.6;
  animation: ice-breath 6s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
@keyframes ice-breath {
  0%, 100% { box-shadow: inset 0 0 26px rgba(190, 228, 255, 0.14); }
  50%      { box-shadow: inset 0 0 40px rgba(190, 228, 255, 0.30); }
}

/* --- iskrzenie: dwie grupy błysków mrugające na zmianę --- */
#admin-team .user.is-snow .frost::before,
#admin-team .user.is-snow .frost::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  animation: twinkle 3.4s ease-in-out infinite;
}
#admin-team .user.is-snow .frost::before {
  background-image:
    radial-gradient(1.8px 1.8px at 18% 22%, rgba(255,255,255,0.95), transparent 62%),
    radial-gradient(2.2px 2.2px at 74% 34%, rgba(226,244,255,0.90), transparent 62%),
    radial-gradient(1.6px 1.6px at 42% 68%, rgba(255,255,255,0.85), transparent 62%);
}
#admin-team .user.is-snow .frost::after {
  animation-delay: 1.7s;
  background-image:
    radial-gradient(2px 2px at 30% 46%,   rgba(255,255,255,0.92), transparent 62%),
    radial-gradient(1.7px 1.7px at 84% 62%, rgba(226,244,255,0.88), transparent 62%),
    radial-gradient(2.4px 2.4px at 60% 14%, rgba(255,255,255,0.90), transparent 62%);
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  50%      { opacity: 1; transform: scale(1); }
}

/* =========================================================
   Lodowa oprawa: szron w rogach, sople u góry, zaspa u dołu
   ========================================================= */
#admin-team .user.is-snow .ice {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 18px;
  /* mroźne narosty w rogach karty */
  background:
    radial-gradient(60% 40% at 0% 0%,     rgba(226, 244, 255, 0.30), transparent 62%),
    radial-gradient(60% 40% at 100% 0%,   rgba(226, 244, 255, 0.26), transparent 62%),
    radial-gradient(55% 35% at 0% 100%,   rgba(200, 232, 255, 0.20), transparent 62%),
    radial-gradient(55% 35% at 100% 100%, rgba(200, 232, 255, 0.22), transparent 62%);
  transition: opacity 0.3s ease;
}
/* sople zwisające spod górnej krawędzi */
#admin-team .user.is-snow .ice::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34px;
  pointer-events: none;
  background-image:
    radial-gradient(3.5px 15px at 9% 0,  rgba(232, 248, 255, 0.85), transparent 72%),
    radial-gradient(2.6px 9px  at 19% 0, rgba(255, 255, 255, 0.75), transparent 72%),
    radial-gradient(4px 22px   at 30% 0, rgba(226, 244, 255, 0.88), transparent 72%),
    radial-gradient(2.4px 11px at 41% 0, rgba(255, 255, 255, 0.70), transparent 72%),
    radial-gradient(3.2px 17px at 55% 0, rgba(232, 248, 255, 0.82), transparent 72%),
    radial-gradient(2.6px 8px  at 66% 0, rgba(255, 255, 255, 0.68), transparent 72%),
    radial-gradient(4.2px 24px at 78% 0, rgba(226, 244, 255, 0.86), transparent 72%),
    radial-gradient(2.8px 12px at 91% 0, rgba(255, 255, 255, 0.74), transparent 72%);
  filter: drop-shadow(0 2px 3px rgba(120, 180, 220, 0.35));
}
/* zaspa śniegu przy dolnej krawędzi */
#admin-team .user.is-snow .ice::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  pointer-events: none;
  background-image:
    radial-gradient(64% 26px at 14% 100%, rgba(255, 255, 255, 0.50), transparent 72%),
    radial-gradient(52% 19px at 44% 100%, rgba(240, 250, 255, 0.42), transparent 72%),
    radial-gradient(70% 30px at 78% 100%, rgba(255, 255, 255, 0.48), transparent 72%),
    linear-gradient(180deg, transparent 40%, rgba(235, 248, 255, 0.20) 100%);
}

/* --- przy obrocie karty: śnieg gęstnieje i sypie mocniej --- */
#admin-team .user.is-snow:hover .snow,
#admin-team .user.is-snow.flipped .snow { opacity: 0.95; animation-duration: 9s; }
#admin-team .user.is-snow:hover .snow::before,
#admin-team .user.is-snow.flipped .snow::before { opacity: 1; animation-duration: 6s; }
#admin-team .user.is-snow:hover .snow::after,
#admin-team .user.is-snow.flipped .snow::after { opacity: 0.85; animation-duration: 4.5s; }
#admin-team .user.is-snow:hover .frost,
#admin-team .user.is-snow.flipped .frost { opacity: 1; }
#admin-team .user.is-snow .ice { opacity: 0.85; }
#admin-team .user.is-snow:hover .ice,
#admin-team .user.is-snow.flipped .ice { opacity: 1; }

/* --- nick i ranga: lodowy akcent --- */
#admin-team .user.is-snow .name {
  position: relative;
  z-index: 7;
  color: #ffffff;
  text-shadow: 0 0 16px rgba(160, 215, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* wyższa specyficzność niż reguła grupy "technicy", która daje ciemny tekst rangi */
#admin-team .group .users .user.is-snow .card-face .rank {
  position: relative;
  z-index: 7;
  color: #ffffff;
  letter-spacing: 0.4px;
  /* cień utrzymuje czytelność białego napisu na jasnym, lodowym tle */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 18px rgba(150, 210, 255, 0.28);
}
#admin-team .user.is-snow .desc { color: #eaf6ff; }
#admin-team .user.is-snow .desc,
#admin-team .user.is-snow .va-socials { position: relative; z-index: 7; }

@media (prefers-reduced-motion: reduce) {
  #admin-team .user.is-snow .snow,
  #admin-team .user.is-snow .snow::before,
  #admin-team .user.is-snow .snow::after,
  #admin-team .user.is-snow .frost,
  #admin-team .user.is-snow .frost::before,
  #admin-team .user.is-snow .frost::after { animation: none; }
  #admin-team .user.is-snow .frost::before,
  #admin-team .user.is-snow .frost::after { opacity: 0.7; transform: none; }
}
/* ============================================================
   Jesienna karta (leaves: true) — lecące liście i ciepła poświata.
   ============================================================ */
#admin-team .user.is-leaves .card-face {
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(228, 59, 107, 0.16), transparent 70%) padding-box,
    linear-gradient(180deg, rgba(52, 28, 28, 0.93), rgba(20, 10, 11, 0.96)) padding-box,
    linear-gradient(165deg, rgba(228, 59, 107, 0.60), rgba(232, 145, 45, 0.35) 45%, rgba(199, 91, 42, 0.55)) border-box;
}
#admin-team .user.is-leaves:hover .card-face {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38), 0 0 32px rgba(228, 59, 107, 0.26), 0 0 26px rgba(232, 145, 45, 0.20);
}

/* --- ciepła jesienna mgiełka --- */
#admin-team .user.is-leaves .autumn {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 18px;
  opacity: 0.55;
  background:
    radial-gradient(120% 45% at 50% 0%,   rgba(232, 165, 60, 0.16), transparent 62%),
    radial-gradient(120% 40% at 50% 100%, rgba(199, 91, 42, 0.16), transparent 62%);
  transition: opacity 0.3s ease;
}

/* --- lecące liście --- */
#admin-team .user.is-leaves .leaves {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
#admin-team .user.is-leaves .leaf {
  position: absolute;
  top: -26px;
  width: var(--s, 12px);
  height: var(--s, 12px);
  border-radius: 0 100% 0 100%;   /* klasyczny kształt listka */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  animation: leaf-fall var(--d, 12s) linear var(--dl, 0s) infinite;
  will-change: transform;
}
/* nerw listka */
#admin-team .user.is-leaves .leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 44%, rgba(255, 255, 255, 0.35) 47%, transparent 53%);
}
#admin-team .user.is-leaves .leaf-1 { background: linear-gradient(140deg, #f0a53c, #d1701f); }
#admin-team .user.is-leaves .leaf-2 { background: linear-gradient(140deg, #e2703a, #b23c1e); }
#admin-team .user.is-leaves .leaf-3 { background: linear-gradient(140deg, #d9a441, #a9721f); }
#admin-team .user.is-leaves .leaf-4 { background: linear-gradient(140deg, #c5452f, #8e2620); }

/* opadanie z obrotem i kołysaniem na wietrze */
@keyframes leaf-fall {
  0%   { transform: translate3d(0, -30px, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translate3d(15px, 100px, 0) rotate(calc(var(--dir, 1) * 95deg)); }
  50%  { transform: translate3d(-13px, 210px, 0) rotate(calc(var(--dir, 1) * 190deg)); }
  75%  { transform: translate3d(13px, 320px, 0) rotate(calc(var(--dir, 1) * 285deg)); }
  92%  { opacity: 1; }
  100% { transform: translate3d(-8px, 440px, 0) rotate(calc(var(--dir, 1) * 380deg)); opacity: 0; }
}

/* przy obrocie karty liście i poświata mocniej widoczne */
#admin-team .user.is-leaves:hover .leaves,
#admin-team .user.is-leaves.flipped .leaves { opacity: 1; }
#admin-team .user.is-leaves:hover .autumn,
#admin-team .user.is-leaves.flipped .autumn { opacity: 0.9; }

/* treść nad ozdobami */
#admin-team .user.is-leaves .name,
#admin-team .user.is-leaves .rank,
#admin-team .user.is-leaves .desc,
#admin-team .user.is-leaves .va-socials { position: relative; z-index: 7; }

@media (prefers-reduced-motion: reduce) {
  #admin-team .user.is-leaves .leaf { animation: none; opacity: 0.9; }
}
/* ============================================================
   Backrooms (backrooms: true) — brudnożółty szum VHS,
   migotanie świetlówki i przeskoki obrazu.
   ============================================================ */
#admin-team .user.is-backrooms .card-face {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 65%) padding-box,
    linear-gradient(180deg, rgba(30, 30, 34, 0.95), rgba(12, 12, 14, 0.97)) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, 0.70), rgba(200, 200, 205, 0.26) 45%, rgba(228, 59, 107, 0.45)) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36), inset 0 0 40px rgba(255, 255, 255, 0.07);
}
#admin-team .user.is-backrooms:hover .card-face {
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42), 0 0 32px rgba(255, 255, 255, 0.24);
}

/* --- szum VHS (biały szum przefarbowany na żółć świetlówki) --- */
#admin-team .user.is-backrooms .br-noise {
  position: absolute;
  inset: -20%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  animation: br-static 0.5s steps(4) infinite;
  transition: opacity 0.3s ease;
}
@keyframes br-static {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

/* --- linie obrazu + pasek przesuwu (VHS tracking) + migotanie świetlówki --- */
#admin-team .user.is-backrooms .br-scan {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 18px;
  opacity: 0.55;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.14) 47%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.14) 53%, transparent 100%);
  background-size: 100% 3px, 100% 240%;
  background-repeat: repeat, no-repeat;
  animation: br-roll 5.5s linear infinite, br-flicker 6s steps(1) infinite;
  transition: opacity 0.3s ease;
}
@keyframes br-roll {
  0%   { background-position: 0 0, 0 -140%; }
  100% { background-position: 0 0, 0 140%; }
}
/* nierówne migotanie — jak przepalająca się świetlówka */
@keyframes br-flicker {
  0%, 5%   { opacity: 0.55; }
  6%       { opacity: 0.95; }
  7%       { opacity: 0.32; }
  8%       { opacity: 0.78; }
  9%, 51%  { opacity: 0.55; }
  52%      { opacity: 0.90; }
  53%      { opacity: 0.38; }
  54%      { opacity: 0.62; }
  55%, 77% { opacity: 0.55; }
  78%      { opacity: 0.28; }
  79%, 100% { opacity: 0.55; }
}

/* --- przeskoki obrazu (glitch bars) --- */
#admin-team .user.is-backrooms .br-glitch {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 18px;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06));
  opacity: 0;
  animation: br-bars 7s steps(1) infinite;
}
@keyframes br-bars {
  0%, 85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(0); }
  86% { opacity: 0.95; clip-path: inset(17% 0 69% 0); transform: translateX(-9px); }
  87% { opacity: 0.70; clip-path: inset(56% 0 32% 0); transform: translateX(10px); }
  88% { opacity: 0; }
  93% { opacity: 0.85; clip-path: inset(38% 0 50% 0); transform: translateX(7px); }
  94% { opacity: 0; }
  97% { opacity: 0.6; clip-path: inset(72% 0 18% 0); transform: translateX(-6px); }
  98% { opacity: 0; }
}

/* --- przy obrocie karty: mocniejszy szum i zakłócenia --- */
#admin-team .user.is-backrooms:hover .br-noise,
#admin-team .user.is-backrooms.flipped .br-noise { opacity: 0.30; }
#admin-team .user.is-backrooms:hover .br-scan,
#admin-team .user.is-backrooms.flipped .br-scan { opacity: 0.85; }

/* --- nick: żółty rozjazd jak na zepsutej taśmie --- */
#admin-team .user.is-backrooms .name {
  position: relative;
  z-index: 7;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.45);
}
#admin-team .user.is-backrooms .name::before,
#admin-team .user.is-backrooms .name::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0; width: 100%;
  pointer-events: none;
}
#admin-team .user.is-backrooms .name::before {
  color: #ffffff;
  animation: br-split-1 3.2s steps(2) infinite;
}
#admin-team .user.is-backrooms .name::after {
  color: #9aa0a6;
  animation: br-split-2 4.1s steps(2) infinite;
}
@keyframes br-split-1 {
  0%, 90%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
  92% { transform: translate(-2px, -1px); clip-path: inset(8% 0 58% 0); opacity: 0.9; }
  95% { transform: translate(2px, 1px);  clip-path: inset(58% 0 14% 0); opacity: 0.9; }
}
@keyframes br-split-2 {
  0%, 86%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
  88% { transform: translate(2px, 1px);  clip-path: inset(44% 0 32% 0); opacity: 0.85; }
  93% { transform: translate(-2px, -1px); clip-path: inset(16% 0 60% 0); opacity: 0.85; }
}

#admin-team .user.is-backrooms .rank,
#admin-team .user.is-backrooms .desc,
#admin-team .user.is-backrooms .va-socials { position: relative; z-index: 7; }
#admin-team .user.is-backrooms .rank { box-shadow: 0 0 18px rgba(255, 255, 255, 0.20); }

@media (prefers-reduced-motion: reduce) {
  #admin-team .user.is-backrooms .br-noise,
  #admin-team .user.is-backrooms .br-scan,
  #admin-team .user.is-backrooms .br-glitch,
  #admin-team .user.is-backrooms .name::before,
  #admin-team .user.is-backrooms .name::after { animation: none; }
}