/*/////////////////////////////////////////////////////////
Leave it alone, that's art. (@shadow_voidh)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Body)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
 body {
    background-color: #0a0a0a; 
    background-image: 

        repeating-linear-gradient(90deg, 
            transparent, 
            transparent 80px, 
            #FFD700 80px, 
            #FFD700 81px),

        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 80px, 
            #FFD700 80px, 
            #FFD700 81px);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
background-color: #050505;
    background-image: 
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 215, 0, 0.1) 80px),
        repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255, 215, 0, 0.1) 80px);
    
}

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Estilo) ROOT
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/   
:root {
    /* !---@Shadow_Voidh  (UBERS)---   */
    --bg-black: #0b0b0a;
    --bg-black-soft: #12110f;
    --gold-primary: #c9a227;
    --gold-soft: rgba(201, 162, 39, 0.3);
    --gold-dark: #6f5b1a;
    --gold-glow: rgba(201, 162, 39, 0.2);

    /* !---@Shadow_Voidh  (Texto)  --- */
    --text-primary: #f2f0eb;
    --text-muted: #a8a59a;
    --text-dim: #6f6c63;

    /* !---@Shadow_Voidh  (Borda)  --- */
    --border-gold: rgba(201, 162, 39, .35);
    --border-soft: rgba(255, 255, 255, .08);
    --glass-bg: rgba(18, 17, 15, .65);
    --glass-border: rgba(201, 162, 39, .25);
    --shadow-deep: 0 40px 80px rgba(0, 0, 0, .6);

   /* !---@Shadow_Voidh  (Fonte)  --- */
    --font-heading: "Playfair Display", serif;
    --font-body: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    /* !---@Shadow_Voidh (JOGADORES) --- */
    --accent-aiku: #8a2be2;    
    --accent-lorenzo: #680a81; 
    --accent-barou: #5e0808;   
    --accent-snuffy: #00ff00;  
    --accent-aryu: #7a0f63; 
    --accent-sendou: #ffa500; 
    --accent-niko: #1278cc; 
    --accent-fukaku: #363f46; 
    --accent-canali: #7a0f0f;
    --accent-ubersgif: #5e0808; 
    --accent-ubersmusic: #00ff00;  
}

/*/////////////////////////////////////////////////////////
Botões
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
button {
    background: transparent;
    border: 1px solid var(--gold-primary);
    color: var(--gold-primary);
    padding: 14px 36px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s ease
}

button:hover {
    background: #c9a2271f
}

button.primary {
    background: var(--gold-primary);
    color: #0b0b0a;
    border: none
}

button.primary:hover {
    background: var(--gold-soft)
}
/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Gifs)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.player-multimidia {
    width: 400px; 
    height: 300px;
    object-fit: cover;
    border: 3px solid var(--gold-primary); 
    border-radius: 10px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    display: block;
    margin: 20px auto;
}

.player-multimidia:hover {
    transform: scale(1.05);
}
/* @Shadow_Voidh(Cores dos Gifs) */
.player-aiku { 
    border-color: var(--accent-aiku); 
    box-shadow: 0 0 20px var(--accent-aiku); 
}

.player-lorenzo { 
    border-color: var(--accent-lorenzo); 
    box-shadow: 0 0 20px var(--accent-lorenzo); 
}

.player-barou { 
    border-color: var(--accent-barou); 
    box-shadow: 0 0 20px var(--accent-barou); 
}

.player-snuffy { 
    border-color: var(--accent-snuffy); 
    box-shadow: 0 0 20px var(--accent-snuffy); 
}

.player-aryu { 
    border-color: var(--accent-aryu); 
    box-shadow: 0 0 20px var(--accent-aryu); 
}

.player-sendou { 
    border-color: var(--accent-sendou); 
    box-shadow: 0 0 20px var(--accent-sendou); 
}

.player-niko { 
    border-color: var(--accent-niko); 
    box-shadow: 0 0 20px var(--accent-niko); 
}

.player-fukaku { 
    border-color: var(--accent-fukaku); 
    box-shadow: 0 0 20px var(--accent-fukaku); 
}

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Fontes)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
h1,h2,h3 {
    font-family: var(--font-heading);
    letter-spacing: .5px
}

p,span,button,input {
    font-family: var(--font-body)
}

code,pre,.mono,.status-text,.code-text {
    font-family: var(--font-mono)
}

.contract-text {
    font-family: var(--font-heading);
    letter-spacing: .8px
}

.system-text {
    font-family: var(--font-mono);
    letter-spacing: 1px
}
h1 {
    font-size: 32px;
    letter-spacing: 2px
}

h3 {
    font-size: 16px;
    text-transform: uppercase
}

p {
    line-height: 1.6
}

::selection {
    background: #c9a22740
}

 .corletra{
     color: rgb(189, 177, 11)

 } 
 .corletrared{
     color: Red
 
} .corletraorange{
     color: Orange
 
} .corletragreen{
     color: Green
 
} .corletrablue{
     color: Blue
 
} .corletrapurple{
     color: Purple
 
}   
 .corletragrey{
     color: Grey    
}
 .corletraglamur {
     color: #7a0f63
}
/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Musica)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.spotify-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 320px;
    height: 80px;
    background-color: var(--bg-black-soft); 
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 10px;
    box-shadow: var(--shadow-deep);
    z-index: 999999;
    font-family: var(--font-body);
    color: var(--text-primary);
    border-left: 4px solid var(--gold-primary); 
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    cursor: pointer;
}


.spotify-widget:not(:hover) {
    transform: translateX(-290px); 
    opacity: 0.6;
}


/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Cores)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.spotify-aiku { border-left-color: var(--accent-aiku); }
.spotify-aiku .song-title { color: var(--accent-aiku); }
.spotify-aiku .progress { background: var(--accent-aiku); }

.spotify-lorenzo { border-left-color: var(--accent-lorenzo); }
.spotify-lorenzo .song-title { color: var(--accent-lorenzo); }
.spotify-lorenzo .progress { background: var(--accent-lorenzo); }

.spotify-barou { border-left-color: var(--accent-barou); }
.spotify-barou .song-title { color: var(--accent-barou); }
.spotify-barou .progress { background: var(--accent-barou); }

.spotify-aryu { border-left-color: var(--accent-aryu); }
.spotify-aryu .song-title { color: var(--accent-aryu); }
.spotify-aryu .progress { background: var(--accent-aryu); }

.spotify-sendou { border-left-color: var(--accent-sendou); }
.spotify-sendou .song-title { color: var(--accent-sendou); }
.spotify-sendou .progress { background: var(--accent-sendou); }

.spotify-niko { border-left-color: var(--accent-niko); }
.spotify-niko .song-title { color: var(--accent-niko); }
.spotify-niko .progress { background: var(--accent-niko); }

.spotify-fukaku { border-left-color: var(--accent-fukaku); }
.spotify-fukaku .song-title { color: var(--accent-fukaku); }
.spotify-fukaku .progress { background: var(--accent-fukaku); }

.sportify-ubersmusic { border-left-color: var(--accent-ubersmusic); }
.sportify-ubersmusic .song-title { color: var(--accent-ubersmusic); }
.sportify-ubersmusic .progress { background: var(--accent-ubersmusic); }

.album-art img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    margin-right: 12px;
    border: 1px solid var(--border-soft);
}

.song-info { flex-grow: 1; overflow: hidden; }

.song-title {
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.song-artist {
    font-size: 11px;
    color: var(--text-muted);
}

.progress-bar {
    width: 100%;
    height: 3px;
    background: var(--border-soft);
    margin-top: 8px;
    border-radius: 2px;
}

.progress {
    height: 100%;
    border-radius: 2px;
    box-shadow: 0 0 8px currentColor; 
}
/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Botões)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
/* @Shadow_Voidh(CSS: Botões) */
.btn-accept {
    display: block;
    width: fit-content;
    padding: 20px 60px;
    background: transparent;
    color: var(--gold-primary);
    border: 1px solid var(--gold-primary);
    font-family: 'Inter', sans-serif; 
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    position: relative;
    transition: 0.4s all ease;
    overflow: hidden; 
}


.btn-accept:hover {
    background: var(--gold-primary);
    color: var(--bg-black);
    box-shadow: 0 0 30px var(--gold-glow);
    transform: translateY(-2px); 
}


.btn-accept::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.6s;
}

.btn-accept:hover::after {
    left: 100%;
}

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Status)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
 .perfil-card {

    background: #0f0f0f;

    border: 1px solid rgba(255, 215, 0, 0.3);

    width: 450px;

    padding: 20px;

    border-radius: 4px;

    position: relative;

    box-shadow: 0 15px 35px rgba(0,0,0,0.8);

    font-family: 'Orbitron', sans-serif;

}



.perfil-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 20px;

}



.status-tag {

    background: #FFD700;

    color: #000;

    font-size: 0.7rem;

    padding: 2px 10px;

    font-weight: bold;

}



.rank-circle {

    color: #FFD700;

    border: 1px solid #FFD700;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.8rem;

}



.perfil-content {

    display: flex;

    gap: 20px;

}



.foto-perfil {

    width: 150px;

    height: 200px;

    object-fit: cover;

    border: 1px solid #333;

    filter: grayscale(30%); 

}



.nome-atleta {

    color: #fff;

    margin: 0;

    font-size: 1.5rem;

    letter-spacing: 2px;

}



.posicao {

    color: #FFD700;

    font-size: 0.8rem;

    margin-bottom: 15px;

}



.stats-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}



.stat-box {

    background: rgba(255, 255, 255, 0.05);

    padding: 8px;

    border-left: 3px solid #FFD700;

}



.stat-box span {

    display: block;

    font-size: 0.6rem;

    color: #888;

}



.stat-box strong {

    color: #fff;

    font-size: 1.1rem;

}



.perfil-wrapper {

    position: relative;

    width: fit-content; 

    margin: 50px auto;  

}





.btn-perfil {

    display: block;

    margin-bottom: 10px; 

    background: #FFD700;

    color: #000;

    border: none;

    padding: 10px 20px;

    font-family: 'Orbitron', sans-serif;

    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;

}



.btn-perfil:hover {

    box-shadow: 0 0 15px #FFD700;

    transform: scale(1.05);

}





#conteudo-perfil {

    position: absolute;

    top: 50px;    

    right: 0;     

    z-index: 999;

}



.hidden {

    display: none !important;

}

.secao-perfil {
    position: static !important;
    width: 100%;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.conteudo-perfil-bloco {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    z-index: 9999 !important; 
    width: 90% !important;
    max-width: 520px !important;
    background: #0d0d0d !important; 
    border: 2px solid var(--gold-primary) !important; 
    border-radius: 4px !important;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.95) !important;
    padding: 25px !important;
}





#conteudo-perfil {

    display: flex;

    justify-content: flex-end;

}

.conteudo-perfil-bloco:not(.hidden) {
    display: block !important;
    animation: modalEntrada 0.3s ease-out;
}



@keyframes modalEntrada {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.overall-badge {

    background: linear-gradient(135deg, #FFD700, #b8860b);

    color: #000;

    padding: 10px;

    border-radius: 8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 60px;

    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);

    font-family: 'Orbitron', sans-serif; 

    border: 2px solid #000;

}



.ovr-number {

    font-size: 2.2rem;

    font-weight: 900;

    line-height: 1;

}



.ovr-rank {

    font-size: 1.2rem;

    font-weight: bold;

    margin-top: -2px;

    border-top: 1px solid rgba(0, 0, 0, 0.2);

    width: 100%;

    text-align: center;

}

.perfil-header {

    display: flex;

    justify-content: space-between; 

    align-items: flex-start;

    width: 100%;

}

.ovr-rank {

    color: #000;

    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);

}


/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Formaçao do Campo Ubers)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.campo-ubers {
    background: radial-gradient(circle, #0f3019 0%, #081c0e 100%);
    border: 3px solid var(--gold-primary);
    box-shadow: 0 0 40px var(--gold-glow);
    height: 750px;                 
    
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 !important;          
}
/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Meio de Campo, Áreas e Círculo Central)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.campo-ubers::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

background: 
        /* Linha do Meio de Campo  */
        linear-gradient(to bottom, transparent 49.7%, rgba(201, 162, 39, 0.3) 49.7%, rgba(201, 162, 39, 0.3) 50.3%, transparent 50.3%),
        
        /* Linha da Área do Barou (Ataque) */
        linear-gradient(to bottom, rgba(201, 162, 39, 0.2) 15%, transparent 15%),
        
        /* Linha da Área do Goleiro */
        linear-gradient(to top, rgba(201, 162, 39, 0.2) 15%, transparent 15%);
        
    pointer-events: none;
    z-index: 1;
}
/* Círculo Central do Campo */
.campo-ubers::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    border: 2px solid rgba(201, 162, 39, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

/* Distribuição das Linhas de Jogadores */
.linha {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2; 
}
.linha.ataque, .linha.goleiro, .linha.vol {
    justify-content: center;
}

.linha.meio {
    display: flex;
    justify-content: center; 
    gap: 30px; 
    padding: 0;
}


.jogador-pos.abdi {
    transform: translateX(-40px); 
}

.jogador-pos.drago {
    transform: translateX(-25px); 
}


.jogador-pos.peron {
    transform: translateX(10px);
}

.jogador-pos.rico {
    transform: translateX(25px);
}
/* Mini-Cards dos Jogadores  */
.jogador-pos {
    background: rgba(18, 17, 15, 0.85);
    backdrop-filter: blur(4px);
    border: 1.5px solid var(--gold-primary);
    color: var(--text-primary);
    padding: 12px 24px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.5px;
    border-radius: 6px;
    transition: all 0.3s ease;
}
.jogador-pos:hover {
    box-shadow: 0 0 25px var(--gold-primary);
    transform: scale(1.1) translateY(-3px);
    background: var(--gold-primary);
    color: #0b0b0a;
    font-weight: bold;
}
.container-tatico {
    display: grid !important;
    flex: 1 !important;
    grid-template-columns: minmax(300px, 800px) 280px !important;
    justify-content: center;       
    align-items: start;           
    gap: 30px;                     
    width: 100%;
    max-width: 1600px;            
    margin: 40px auto;            
    padding: 0 20px;
    box-sizing: border-box;
}
/* O Card do Marc Snuffy */

.card-treinador {
    background: rgba(18, 17, 15, 0.85);
    backdrop-filter: blur(8px);
    border: 2px solid var(--gold-primary);
    box-shadow: 0 0 30px var(--gold-glow);
    
    width: 280px !important;     
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    font-family: var(--font-body);
    color: var(--text-primary);
    box-sizing: border-box;
    margin: 0 !important;          
}
/* Tag dourada acima do card */
.badge-treinador {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-primary);
    color: #0b0b0a;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* Estilização da Imagem do Snuffy */
.foto-treinador {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 10px;
}

.card-treinador:hover .foto-treinador {
    filter: grayscale(0%) brightness(1.1);
    border-color: var(--gold-primary);
}

/* Textos do Card */
.info-treinador h2 {
    font-family: var(--font-heading);
    color: var(--gold-primary);
    margin: 15px 0 5px 0;
    font-size: 22px;
    letter-spacing: 1px;
}

.info-treinador .subtitulo {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1.5px;
}

.frase-snuffy {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
}

/* Animação de entrada  */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.tela-projeto {
    display: none;
    width: 100%;
    min-height: 100vh;
    animation: fadeEntrada 0.5s ease-in-out;
}
.tela-projeto.ativa {
    display: block; 
}

/* Estilo do botão de voltar */
.btn-voltar {
    position: fixed;
    top: 20px;
    left: 20px;
    background: var(--gold-primary);
    color: black;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    z-index: 100;
}

/* Animação para a troca de tela */
@keyframes fadeEntrada {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


.card-container-restrito {
    max-height: 85vh;
    max-width: 780px;
    width: 100%;
    position: relative;
    padding: 40px;
    background: var(--bg-black-soft);
    border: 2px solid var(--border-soft);
    border-radius: 2px;
    box-shadow: var(--shadow-deep);
    overflow: visible !important; 
}
.contract-container {
    background: #0a0a0a !important; 
    border: 2px solid #222222;      
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    padding: 40px;
    max-width: 780px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
.contract-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(var(--border-soft) 1px, transparent 1px),
                              linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            opacity: 0.3;
        }


.corner {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 1px solid var(--gold-primary);
            opacity: 0.4;
        }
.top-left { top: 20px; left: 20px; border-right: 0; border-bottom: 0; }
 .top-right { top: 20px; right: 20px; border-left: 0; border-bottom: 0; }
 .bottom-left { bottom: 20px; left: 20px; border-right: 0; border-top: 0; }
.bottom-right { bottom: 20px; right: 20px; border-left: 0; border-top: 0; }

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Header)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.header-meta {
            display: flex;
            justify-content: space-between;
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: 3px;
            color: var(--text-dim);
            border-bottom: 1px solid var(--border-soft);
            padding-bottom: 20px;
            margin-bottom: 40px;
        }

.status-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--gold-primary);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--gold-primary);
            margin-left: 10px;
        }

 h1 {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            text-align: center;
            letter-spacing: 6px;
            text-transform: uppercase;
            margin: 0;
            font-weight: 400;
        }

        .subtitle {
            text-align: center;
            color: var(--gold-primary);
            font-family: var(--font-heading);
            letter-spacing: 4px;
            font-style: italic;
            margin-top: 10px;
        }

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Regras)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
        .clause {
            position: relative;
            padding-left: 40px;
            margin-bottom: 40px;
        }

        .clause::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 10px;
            height: 10px;
            background: var(--gold-primary);
            border-radius: 50%;
        }

        .clause-title {
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 15px;
            display: block;
            color: #ffd700 !important;
        }

        .clause-title span {
            color: var(--gold-primary);
            font-family: var(--font-mono);
            font-size: 12px;
            margin-right: 15px;
        }

        .clause-body {
            color: var(--text-muted);
            line-height: 1.8;
            font-weight: 300;
            border-left: 1px solid var(--border-soft);
            padding-left: 20px;
            color: #cccccc !important;
        }

        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
            opacity: 0.3;
            margin: 40px 0;
        }
        .verification-seal {
            text-align: center;
            margin: 60px 0;
            border: 1px solid var(--gold-primary);
            padding: 30px;
            background: rgba(201, 162, 39, 0.02);
            position: relative;
        }

        .seal-text {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--gold-primary);
            letter-spacing: 4px;
        }

        .btn-accept {
            display: block;
            width: fit-content;
            margin: 40px auto 0;
            padding: 20px 60px;
            background: transparent;
            color: var(--gold-primary);
            border: 1px solid var(--gold-primary);
            font-family: var(--font-body);
            text-transform: uppercase;
            letter-spacing: 3px;
            cursor: pointer;
            position: relative;
            transition: 0.4s;
            overflow: hidden;
        }

        .btn-accept:hover {
            background: var(--gold-primary);
            color: var(--bg-black);
            box-shadow: 0 0 30px var(--gold-glow);
        }

        .btn-accept::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.5s;
        }

        .btn-accept:hover::after {
            left: 100%;
        }

        footer {
            margin-top: 40px;
            text-align: center;
            font-family: var(--font-mono);
            font-size: 9px;
            color: var(--text-dim);
            letter-spacing: 2px;
        }
        .title-gold {
            color: var(--gold-primary);
            font-family: var(--font-heading);
            letter-spacing: 2px;
        }

        .btn-formacao {
    background: transparent;
    border: 1px solid var(--gold-primary);
    color: var(--gold-primary);
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-formacao:hover, .btn-formacao.active {
    background: var(--gold-primary);
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}


/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Jogadores Arrumados )
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  

.jogador {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
    gap: 4px;             
}

/* Ícone do Jogador  */
.icon-jogador {
    width: 45px;           
    height: 45px;
    border-radius: 50%;    
    object-fit: cover;
    border: 2px solid #d4af37; 
    background-color: #000;
}

/*  Nome do Jogador */
.nome-jogador {
    background-color: rgba(0, 0, 0, 0.6);
    color: #e5b324;         /* Cor do texto amarela/dourada */
    border: 1px solid #d4af37;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;    /* Evita que o nome quebre em duas linhas */
}



/* foto do jogador */
.img-jogador {
    width: 70px;          
    height: 70px;        
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d4af37;
}

/* card do jogador */
.jogador-pos {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 12px;     /* Dá mais espaço interno ao botão/card */
    gap: 6px;
}

/* Container que junta o Banco Esquerdo + Campo Tático */
.container-formacao {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}


/* Container principal da barra esquerda */
.painel-reservas {
    width: 240px;
    background-color: #0b0e0c;
    border: 1px solid #d4af37;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
}

/* Títulos Snuffy */
.titulo-banco {
    background-color: #d4af37;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Divisor horizontal */
.divisor-banco {
    border: none;
    border-top: 1px dashed #d4af37;
    margin: 8px 0;
    opacity: 0.5;
}

/* Linha do Banco Reserva */
.item-reserva {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: transform 0.2s, border-color 0.2s;
}

.item-reserva:hover {
    border-color: #d4af37;
    transform: translateX(3px);
}

/* Foto Reserva */
.foto-reserva {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d4af37;
    background-color: #000;
    flex-shrink: 0;
}

/* Nome do Reserva */
.nome-reserva {
    color: #e5b324;
    font-weight: bold;
    font-size: 13px;
    font-family: monospace, sans-serif;
}

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS:Estrategia )
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.layout-estrategia {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: center;
    align-items: flex-start;        
    gap: 20px;                     
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.layout-estrategia {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/*  largura do painel do Banco */
.painel-reservas {
    width: 200px !important;      
    flex-shrink: 0 !important;      
}

/* carta do Treinador */
.painel-treinador {
    width: 260px !important;       
    flex-shrink: 0 !important;      
}

/*/////////////////////////////////////////////////////////
@Shadow_Voidh(CSS: Campo Tatico)
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/  
.campo-tatico, 
div[class*="campo"] {
    width: 750px !important;       
    min-width: 700px !important;   
}


.layout-estrategia {
    display: none;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}


.layout-estrategia.ativo {
    display: flex !important;
}

.container-tatico {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}

.painel-reservas {
    flex-shrink: 0;
    width: 220px;
}


.campo-ubers {
    flex: 1; 
    max-width: 700px; 
    width: 100%;
    box-sizing: border-box;
}


.campo-ubers .linha {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}


.layout-estrategia,
.layout-estrategia-aba {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important; 
    gap: 25px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}


.painel-reservas {
    flex-shrink: 0 !important;
    width: 240px !important;
    margin-top: 0 !important; 
}

.campo-ubers {
    flex: 1 !important;
    max-width: 650px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
}


.campo-ubers .linha {
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.campo-ubers .linha.meio,
.campo-ubers .linha.defesa {
    justify-content: space-around !important; 
}


.campo-ubers .jogador-pos {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Container principal do banco */
.painel-reservas {
    display: flex !important;
    flex-direction: column !important; 
    width: 220px !important;
    min-width: 220px !important;
    background-color: #0d0d0d;
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box !important;
}

/* Seção interna do banco */
.secao-banco {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}


.item-reserva {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 8px;
    border-radius: 5px;
    width: 100% !important;
    box-sizing: border-box !important;
}


#formacao-2,
#formacao-3 {
    display: none !important;
}


.layout-estrategia-aba:not(.ativa) {
    display: none !important;
}


.container-formacoes {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


.aba-tática {
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}


.aba-tática[style*="display: none"] {
    display: none !important;
}


.layout-estrategia {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block !important;
}




.painel-reservas {
    flex-shrink: 0 !important;
    width: 220px;
}

.campo-ubers {
    flex-shrink: 0 !important;
}
.layout-estrategia-aba {
    display: none;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
}


.layout-estrategia-aba.ativa {
    display: flex !important;
}



.painel-reservas {
    flex-shrink: 0 !important;
    width: 220px !important;
    min-height: 500px !important; 
}


.layout-estrategia-aba {
    display: none;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
}

.layout-estrategia-aba.ativa {
    display: flex !important;
}

.card-treinador {
    width: 250px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
}

.tela-projeto {
    display: none !important;
}

.tela-projeto.ativa {
    display: block !important;
}