/* teammini1 (Mortimer, 21-10-2026: «hay que hacer nuevas cards para las secciones donde sale lo de Our Team, son mucho mas
   pequeñitas y con 3 elementos, la foto, el nombre y el role, quiero hacerlas también espectaculares … las cards de los que
   tienen lo de SUPER FX activado (se hace desde bascdao admin/site/team) deben ser un poquito mas espectaculares … trata de
   no hacerlas mucho mas grandes de lo que lo son ahora»).
   The «Our Team» cards of the tribe pages (and of the News hub) in the look of the home's «Meet Our Team»: chamfered HUD
   frame with corner brackets and grid, hexagonal picture, chamfered role chip, energy bar; same size as before (146 px).
   Role colours: Superadmin pink and gold, Leader / Co-Leader / Admin the colours of the element (tribe-atmos.css).
   team-mini.js marks the «Super FX» members (bascdao.com/api/public/team-stars): their colours from bascdao, a light running
   round the frame, the hex ring turning, the scan line, motes of their FX and the ✦.
   Everything under .team-container > .team-member-card; the header menus and the footer are not touched. */

html body .team-container > .team-member-card {
    --m1: var(--xa-glow, var(--tribe-color, #a98bff));
    --m2: var(--xa-glow2, var(--tribe-accent, #ff8fe0));
    --m3: color-mix(in srgb, var(--m2) 55%, #ffffff);
    --mk: 1;
    --cut: 11px;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 146px;
    min-height: 178px;
    padding: 18px 10px 20px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

html body .team-container > .team-member-card.superadmin-card { --m1: #ff2d78; --m2: #ff9cc0; --m3: #ffc857; }
html body .team-container > .team-member-card.co-leader-card {
    --m1: var(--xa-glow2, var(--tribe-accent, #ff8fe0));
    --m2: color-mix(in srgb, var(--xa-glow2, var(--tribe-accent, #ff8fe0)) 55%, #ffffff);
    --m3: var(--xa-glow, var(--tribe-color, #a98bff));
    --mk: 0.85;
}
html body .team-container > .team-member-card.admin-card {
    --m1: color-mix(in srgb, var(--xa-glow, var(--tribe-color, #a98bff)) 72%, #9fb0d6);
    --m2: color-mix(in srgb, var(--xa-glow2, var(--tribe-accent, #ff8fe0)) 55%, #e2e8ff);
    --m3: var(--xa-glow, var(--tribe-color, #a98bff));
    --mk: 0.62;
}

/* the frame (::before) and the body with its grid, corner brackets and energy bar (::after) */
html body .team-container > .team-member-card::before,
html body .team-container > .team-member-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}

html body .team-container > .team-member-card::before {
    inset: 0;
    z-index: -4;
    background: linear-gradient(160deg, color-mix(in srgb, var(--m1) calc(var(--mk) * 78%), transparent), color-mix(in srgb, var(--m3) 16%, transparent) 46%, color-mix(in srgb, var(--m2) calc(var(--mk) * 62%), transparent));
    transition: filter 0.4s ease;
}

html body .team-container > .team-member-card::after {
    inset: 1.5px;
    --cut: 10px;
    z-index: -2;
    background:
        linear-gradient(var(--m2), var(--m2)) left 6px top 6px / 10px 1.5px no-repeat,
        linear-gradient(var(--m2), var(--m2)) left 6px top 6px / 1.5px 10px no-repeat,
        linear-gradient(var(--m2), var(--m2)) right 6px top 6px / 10px 1.5px no-repeat,
        linear-gradient(var(--m2), var(--m2)) right 6px top 6px / 1.5px 10px no-repeat,
        linear-gradient(var(--m2), var(--m2)) left 6px bottom 6px / 10px 1.5px no-repeat,
        linear-gradient(var(--m2), var(--m2)) left 6px bottom 6px / 1.5px 10px no-repeat,
        linear-gradient(var(--m2), var(--m2)) right 6px bottom 6px / 10px 1.5px no-repeat,
        linear-gradient(var(--m2), var(--m2)) right 6px bottom 6px / 1.5px 10px no-repeat,
        linear-gradient(90deg, var(--m1), var(--m2), var(--m3)) center bottom 9px / 24% 2px no-repeat,
        linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)) center bottom 9px / 62% 2px no-repeat,
        radial-gradient(120% 62% at 50% -8%, color-mix(in srgb, var(--m1) calc(var(--mk) * 30%), transparent), transparent 64%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 18px),
        linear-gradient(180deg, color-mix(in srgb, var(--xa-card-a, #160626) 92%, var(--m1) 8%), var(--xa-card-b, #0b0214) 72%);
    transition: background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html body .team-container > .team-member-card:hover {
    transform: translateY(-6px);
    background: none;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m1) 50%, transparent)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
}

html body .team-container > .team-member-card:hover::before { filter: brightness(1.5) saturate(1.2); }

html body .team-container > .team-member-card:hover::after {
    background-size: 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px, 62% 2px, 62% 2px, auto, auto, auto, auto;
}

/* the hexagonal picture: the frame is the badge's own background, the picture sits 3 px inside */
html body .team-container > .team-member-card .team-member-badge {
    --xtm-a: 0deg;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 74px;
    padding: 3px;
    margin-bottom: 11px;
    border: 0;
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: conic-gradient(from var(--xtm-a), var(--m1), var(--m2), var(--m3), var(--m1));
    color: #fff;
    font-size: 22px;
    box-shadow: none;
    overflow: hidden;
    transform: none;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: xtm-spin 5s linear infinite paused;
}

html body .team-container > .team-member-card .team-member-badge.loading { animation: xtm-spin 5s linear infinite paused, pulse 1.5s ease-in-out infinite; }

html body .team-container > .team-member-card .team-member-badge img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: #12051f;
}

html body .team-container > .team-member-card:hover .team-member-badge {
    transform: translateY(-3px) scale(1.07);
    box-shadow: none;
    animation-play-state: running;
}

/* the glow behind the picture (the name's ::before, placed over the picture) */
html body .team-container > .team-member-card .team-member-name {
    position: static;
    line-height: 1.2;
    word-break: break-word;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(90deg, #ffffff, color-mix(in srgb, var(--m2) 75%, #ffffff), #ffffff) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html body .team-container > .team-member-card .team-member-name::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 104px;
    height: 104px;
    margin-left: -52px;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--m1) calc(var(--mk) * 42%), transparent), transparent);
    opacity: 0.7;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

html body .team-container > .team-member-card:hover .team-member-name::before { opacity: 1; transform: scale(1.12); }

/* the role: a chamfered chip with a diamond */
html body .team-container > .team-member-card .team-member-role {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    text-transform: uppercase;
    gap: 6px;
    min-height: 21px;
    padding: 3px 10px 3px 8px;
    border-radius: 0;
    border: 1px solid color-mix(in srgb, var(--m1) 50%, transparent);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--m1) 24%, rgba(8, 2, 16, 0.7)), color-mix(in srgb, var(--m1) 10%, rgba(8, 2, 16, 0.7)));
    box-shadow: none;
    color: color-mix(in srgb, var(--m2) 62%, #ffffff);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-shadow: 0 0 8px color-mix(in srgb, var(--m1) 45%, transparent);
}

html body .team-container > .team-member-card .team-member-role::before {
    position: static;
    inset: auto;
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 0;
    transform: rotate(45deg);
    background: var(--m1);
    box-shadow: 0 0 7px var(--m1);
    opacity: 1;
    z-index: auto;
}

/* the light that crosses the chip on hover (the tribe pages already have it; /nexus/how_to_play does not) */
html body .team-container > .team-member-card .team-member-role::after {
    content: '';
    position: absolute;
    top: -140%;
    left: -28%;
    width: 42%;
    height: 380%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: rotate(24deg);
    opacity: 0;
    transition: opacity 0.35s ease, left 0.55s ease;
    pointer-events: none;
}
html body .team-container > .team-member-card:hover .team-member-role::after { opacity: 0.9; left: 96%; }

html body .team-container > .team-member-card:hover .team-member-role {
    transform: none;
    border-color: var(--m1);
    box-shadow: none;
    filter: brightness(1.15);
}

/* the cards come in one after the other when the section shows (team-mini.js adds .xtm-rv only when it can) */
html body .team-container.xtm-rv > .team-member-card { opacity: 0; transform: translateY(16px) scale(0.96); }
html body .team-container.xtm-rv > .team-member-card.xtm-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease var(--xtm-in, 0s), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--xtm-in, 0s), filter 0.4s ease;
}
html body .team-container.xtm-rv > .team-member-card.xtm-in:hover { transform: translateY(-6px); transition-delay: 0s; }

/* ===== «Super FX» (the ✦ check of bascdao.com/admin/site/team) ===== */
html body .team-container > .team-member-card.xtm-star { --m1: var(--s1); --m2: var(--s2); --m3: var(--s3); --mk: 1; }

html body .team-container > .team-member-card.xtm-star::before {
    background: linear-gradient(160deg, color-mix(in srgb, var(--s1) 66%, transparent), color-mix(in srgb, var(--s3) 22%, transparent) 46%, color-mix(in srgb, var(--s2) 60%, transparent));
}

/* a light running round the frame (only transform moves: cheap) */
.xtm-rim {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0 calc(100% - 11px), 0 11px);
}

.xtm-rim {
    padding: 2px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.xtm-rim::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    background: conic-gradient(var(--s2), transparent 16%, transparent 34%, var(--s1) 50%, transparent 66%, transparent 84%, var(--s2));
    will-change: transform;
    animation: xtm-turn 4.5s linear infinite;
}

/* the hexagon ring around the picture */
.xtm-hexw { position: relative; display: inline-flex; margin-bottom: 11px; }
html body .team-container > .team-member-card .xtm-hexw .team-member-badge { margin-bottom: 0; animation-play-state: running; animation-duration: 3.6s; }
.xtm-ring {
    position: absolute;
    top: -9px;
    left: -8px;
    z-index: -1;
    width: calc(100% + 16px);
    height: calc(100% + 18px);
    overflow: visible;
    pointer-events: none;
    animation: xtm-turn 16s linear infinite;
}
.xtm-ring polygon { fill: none; stroke: var(--s2); stroke-width: 1.5; stroke-dasharray: 2 6; }
.xtm-ring polygon + polygon { stroke: var(--s1); stroke-dasharray: 18 230; stroke-width: 2.2; animation: xtm-dash 3s linear infinite; }

.xtm-crown {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 22px;
    margin-left: -11px;
    fill: #facc15;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.85));
    animation: xtm-float 3s ease-in-out infinite;
}

/* the scan line and the motes, inside the card's shape */
.xtm-clip {
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.xtm-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 34%;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--s1) 12%, transparent) 70%, color-mix(in srgb, var(--s2) 30%, transparent) 97%, transparent);
    animation: xtm-scan 4.6s cubic-bezier(0.45, 0, 0.55, 1) var(--xtm-d, 0s) infinite;
}
.xtm-clip i {
    position: absolute;
    bottom: -8px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--s2);
    box-shadow: 0 0 7px var(--s1);
    opacity: 0;
    animation: xtm-mote var(--t) linear var(--d) infinite;
}
.xtm-fx-fire .xtm-clip i { background: #fde047; box-shadow: 0 0 9px #f97316; }
.xtm-fx-water .xtm-clip i { background: transparent; border: 1px solid #7dd3fc; box-shadow: none; }
.xtm-fx-earth .xtm-clip i { border-radius: 2px; background: #a3e635; }
.xtm-fx-legendary .xtm-clip i { background: #facc15; box-shadow: 0 0 9px #f59e0b; }
.xtm-fx-cyber .xtm-clip i, .xtm-fx-blockchain .xtm-clip i { border-radius: 1px; }
.xtm-fx-solana .xtm-clip i { border-radius: 1px; background: linear-gradient(90deg, #9945ff, #14f195); width: calc(var(--s) * 2.4); }

/* the ✦ of «Super FX» */
.xtm-spark {
    position: absolute;
    top: 7px;
    right: 9px;
    z-index: 2;
    font-size: 12px;
    line-height: 1;
    color: var(--s2);
    text-shadow: 0 0 6px var(--s1), 0 0 12px var(--s1);
    pointer-events: none;
    animation: xtm-twinkle 2.6s ease-in-out infinite;
}

html body .team-container > .team-member-card.xtm-star .team-member-name {
    background-image: linear-gradient(90deg, var(--s2), #ffffff, var(--s1), var(--s2));
    animation: xtm-shine 5s linear infinite;
}
html body .team-container > .team-member-card.xtm-star .team-member-name::before { opacity: 0.95; }
html body .team-container > .team-member-card.xtm-star::after {
    background-size: 10px 1.5px, 1.5px 10px, 0 0, 0 0, 10px 1.5px, 1.5px 10px, 10px 1.5px, 1.5px 10px, 62% 2px, 62% 2px, auto, auto, auto, auto;
}

/* nothing moves while the section is off the screen */
html body .team-container.xtm-idle *,
html body .team-container.xtm-idle *::before,
html body .team-container.xtm-idle *::after { animation-play-state: paused !important; }

@property --xtm-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes xtm-spin { to { --xtm-a: 360deg; } }
@keyframes xtm-turn { to { transform: rotate(360deg); } }
@keyframes xtm-dash { to { stroke-dashoffset: -248; } }
@keyframes xtm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes xtm-shine { to { background-position: -200% 0; } }
@keyframes xtm-scan { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(270%); opacity: 0; } }
@keyframes xtm-mote { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.95; } 80% { opacity: 0.7; } 100% { transform: translateY(-190px); opacity: 0; } }
@keyframes xtm-twinkle { 0%, 100% { opacity: 0.75; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.18) rotate(45deg); } }

/* htpteam1 (21-10-2026): the Leadership of each tribe on /nexus/how_to_play */
html body .team-container.leadership-group { display: flex; flex-wrap: wrap; gap: 14px; }
html body .team-container.leadership-group > .team-member-card { cursor: default; }

@media (max-width: 640px) {
    html body .team-container > .team-member-card { width: 100%; min-height: 172px; padding: 16px 8px 19px; }
}

@media (max-width: 768px) {
    html body .team-container.leadership-group { display: grid; grid-template-columns: repeat(2, minmax(0, 156px)); justify-content: center; gap: 12px; }
}

@media (max-width: 480px) {
    html body .team-container.leadership-group { gap: 8px; }
    html body .team-container.leadership-group > .team-member-card { min-height: 158px; padding: 14px 6px 18px; }
    html body .team-container.leadership-group > .team-member-card .team-member-badge { width: 58px; height: 65px; }
    html body .team-container.leadership-group > .team-member-card .team-member-name { font-size: 12px; }
    html body .team-container.leadership-group > .team-member-card .team-member-role { padding: 3px 8px 3px 6px; letter-spacing: 0.08em; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    html body .team-container > .team-member-card,
    html body .team-container > .team-member-card *,
    html body .team-container > .team-member-card::before,
    html body .team-container > .team-member-card::after { animation: none !important; transition: none !important; }
    html body .team-container.xtm-rv > .team-member-card { opacity: 1; transform: none; }
}