/* =====================================================
   PHP UNITED — DESIGN SYSTEM
   Preto & roxo · Sora (display) + Inter (corpo)
   ===================================================== */

/* ===========================
   TOKENS
=========================== */
:root {
    /* superfícies */
    --fundo:        #0b0e13;
    --fundo-card:   #131822;
    --fundo-input:  #1a2030;
    --fundo-inset:  #101520;
    --borda:        #232a38;
    --borda-forte:  #333c4d;

    /* marca */
    --roxo:         #6e5be0;
    --roxo-forte:   #5a4ac8;
    --roxo-escuro:  #3a2e78;
    --roxo-suave:   #a79bf0;
    --roxo-brilho:  rgba(0, 0, 0, 0);

    /* texto */
    --texto:        #e7eaf2;
    --texto-suave:  #98a1b3;

    /* semântico */
    --verde:        #2aa36c;
    --vermelho:     #c9524f;
    --ouro:         #c8973b;
    --azul:         #4e7bd4;

    /* cards de agenda / proximo compromisso */
    --home-match-bg-start: #141c26;
    --home-match-bg-mid:   #13211b;
    --home-match-bg-end:   #181725;
    --home-match-border:   #26313d;
    --home-match-surface:  #1a2030;

    /* forma */
    --radius:       14px;
    --radius-sm:    8px;
    --sombra:       0 6px 18px rgba(0, 0, 0, 0.34);
    --sombra-roxa:  0 10px 26px rgba(0, 0, 0, 0.42);

    /* tipografia */
    --fonte-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --fonte-corpo:   'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ===========================
   RESET & BASE
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img { max-width: 100%; height: auto; }

html {
    scrollbar-color: var(--borda-forte) var(--fundo);
    background: var(--fundo);
}

body {
    font-family: var(--fonte-corpo);
    background-color: var(--fundo);
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(90, 74, 200, 0.16), transparent 70%);
    background-repeat: no-repeat;
    color: var(--texto);
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

body.app-loading {
    overflow: hidden;
}

body.ajax-loading {
    cursor: progress;
}

body.ajax-loading .container {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

/* Barra de progresso fina no topo, usada nas trocas de pagina via AJAX
   no lugar do overlay de tela cheia (mais fluido, não bloqueia a leitura). */
.ajax-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 100000;
    background: linear-gradient(90deg, var(--roxo-forte), var(--roxo), var(--roxo-suave));
    box-shadow: 0 0 8px var(--roxo-brilho);
    opacity: 0;
    pointer-events: none;
}

.ajax-progress-bar--ativa {
    opacity: 1;
    width: 78%;
    transition: width 2.2s cubic-bezier(0.15, 0.8, 0.3, 1), opacity 0.15s ease;
}

.ajax-progress-bar--concluir {
    width: 100%;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.25s ease 0.05s;
}

@media (prefers-reduced-motion: reduce) {
    .ajax-progress-bar--ativa,
    .ajax-progress-bar--concluir {
        transition-duration: 0.01ms;
    }
}

/* Transicao suave de conteudo entre paginas (View Transitions API).
   Sem suporte no browser, cai no fade via body.ajax-loading acima. */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: paginaSai 0.16s ease both;
    }

    ::view-transition-new(root) {
        animation: paginaEntra 0.22s ease both;
    }
}

@keyframes paginaSai {
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes paginaEntra {
    from { opacity: 0; transform: translateY(6px); }
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 12% 58%, rgba(34, 211, 238, 0.12), transparent 18%),
        radial-gradient(circle at 86% 16%, rgba(42, 163, 108, 0.1), transparent 20%),
        rgba(2, 2, 7, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

body:not(.app-loading) .app-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loader-mark {
    position: relative;
    width: 128px;
    height: 128px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.1));
}

.app-loader-mark:not(.app-loader-mark-auth) {
    animation: appLoaderSpin 0.85s linear infinite;
}

.app-loader-line,
.app-loader-ring,
.app-loader-dot {
    position: absolute;
    display: block;
}

.app-loader-line {
    display: none;
}

.app-loader-ring {
    width: 94px;
    height: 94px;
    border: 6px solid rgba(156, 165, 178, 0.86);
    border-radius: 50%;
    background: rgba(9, 16, 32, 0.28);
}

.app-loader-dot {
    top: 20px;
    right: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.6),
        0 8px 24px rgba(255, 255, 255, 0.24);
}

@keyframes appLoaderSpin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   TEMA PADRAO — paleta calma (colorida, sem neon)
   Base neutra azul-grafite; a cor vive no conteudo, nao no
   chrome. Sem box-shadow colorido: sombra so preta e suave.
   ========================================================= */
body.tema-padrao,
body.tema-verde {
    --fundo:        #0b0e13;
    --fundo-card:   #131822;
    --fundo-input:  #1a2030;
    --fundo-inset:  #101520;
    --borda:        #232a38;
    --borda-forte:  #333c4d;
    --roxo:         #6e5be0;
    --roxo-forte:   #5a4ac8;
    --roxo-escuro:  #3a2e78;
    --roxo-suave:   #a79bf0;
    --roxo-brilho:  rgba(0, 0, 0, 0);
    --texto:        #e7eaf2;
    --texto-suave:  #98a1b3;
    --verde:        #2aa36c;
    --vermelho:     #c9524f;
    --ouro:         #c8973b;
    --azul:         #4e7bd4;
    --sombra-roxa:  0 10px 26px rgba(0, 0, 0, 0.42);
    --home-match-bg-start: #141c26;
    --home-match-bg-mid:   #13211b;
    --home-match-bg-end:   #181725;
    --home-match-border:   #26313d;
    --home-match-surface:  #1a2030;
}

/* Fundo liso: saiu o halo roxo/ciano que ficava atras do conteudo. */
body.tema-padrao,
body.tema-verde {
    background-color: #0b0e13;
    background-image: none;
}

/* Acao principal: verde chapado com degrade leve, sem halo colorido. */
body.tema-padrao .btn-primary,
body.tema-verde .btn-primary,
body.tema-padrao .btn-success,
body.tema-verde .btn-success,
body.tema-padrao .btn-sortear,
body.tema-verde .btn-sortear,
body.tema-padrao .btn-embaralhar,
body.tema-verde .btn-embaralhar {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, #2aa36c, #22875a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
}

body.tema-padrao .btn-primary:hover,
body.tema-verde .btn-primary:hover,
body.tema-padrao .btn-success:hover,
body.tema-verde .btn-success:hover,
body.tema-padrao .btn-sortear:hover,
body.tema-verde .btn-sortear:hover,
body.tema-padrao .btn-embaralhar:hover,
body.tema-verde .btn-embaralhar:hover {
    background: linear-gradient(180deg, #2fb076, #268f60);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: #fff;
    filter: none;
}

body.tema-padrao .btn-outline,
body.tema-verde .btn-outline {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--borda-forte);
    box-shadow: none;
}

/* Marcadores: roxo da marca chapado, sem gradiente ciano nem glow. */
body.tema-padrao .preferences-badge,
body.tema-verde .preferences-badge,
body.tema-padrao .nav-badge,
body.tema-verde .nav-badge,
body.tema-padrao .home-shortcut-badge,
body.tema-verde .home-shortcut-badge,
body.tema-padrao .jogadores-tab-badge,
body.tema-verde .jogadores-tab-badge {
    background: #6e5be0;
    border-color: rgba(11, 14, 19, 0.9);
    box-shadow: none;
    color: #fff;
}

body.tema-padrao .bottom-nav,
body.tema-verde .bottom-nav,
body.tema-padrao .preferences-menu,
body.tema-verde .preferences-menu {
    background: color-mix(in srgb, #0d1117 96%, transparent);
    border-color: var(--borda);
    box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.4);
}

/* Item ativo: fundo roxo discreto com borda, em vez de pilula brilhante. */
body.tema-padrao .bottom-nav a.ativo,
body.tema-verde .bottom-nav a.ativo,
body.tema-padrao .jogadores-tabs a.ativo,
body.tema-verde .jogadores-tabs a.ativo {
    background: rgba(110, 91, 224, 0.16);
    border: 1px solid rgba(167, 155, 240, 0.34);
    box-shadow: none;
    color: #cfc6ff;
}

body.tema-padrao .sorteio-config-card,
body.tema-verde .sorteio-config-card,
body.tema-padrao .sorteio-contra-clube-card,
body.tema-verde .sorteio-contra-clube-card,
body.tema-padrao .sorteio-enviar-plantel-card,
body.tema-verde .sorteio-enviar-plantel-card,
body.tema-padrao .card,
body.tema-verde .card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%),
        var(--fundo-card);
    border-color: var(--borda);
}

body.tema-padrao .sorteio-accordion-title,
body.tema-verde .sorteio-accordion-title,
body.tema-padrao .sorteio-config-card .config-titulo,
body.tema-verde .sorteio-config-card .config-titulo,
body.tema-padrao .contra-clube-titulo,
body.tema-verde .contra-clube-titulo,
body.tema-padrao .enviar-plantel-titulo,
body.tema-verde .enviar-plantel-titulo {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

body.tema-claro {
    --fundo:        #f4f1fb;
    --fundo-card:   #ffffff;
    --fundo-input:  #eee8fb;
    --fundo-inset:  #e7def8;
    --borda:        #d8cdf1;
    --borda-forte:  #bca9e5;
    --roxo:         #7c3aed;
    --roxo-forte:   #6d28d9;
    --roxo-escuro:  #4c1d95;
    --roxo-suave:   #6d28d9;
    --roxo-brilho:  rgba(124, 58, 237, 0.22);
    --texto:        #171125;
    --texto-suave:  #63577c;
    --verde:        #059669;
    --vermelho:     #dc2626;
    --ouro:         #b45309;
    --azul:         #2563eb;
    --home-match-bg-start: #ffffff;
    --home-match-bg-mid:   #f6f3fb;
    --home-match-bg-end:   #eefdf7;
    --home-match-border:   #d8cdf1;
    --home-match-surface:  #f0eaff;
}

body.tema-vibrante {
    --fundo:        #070b13;
    --fundo-card:   #101827;
    --fundo-input:  #17243a;
    --fundo-inset:  #050812;
    --borda:        #244569;
    --borda-forte:  #0f5595;
    --roxo:         #f2bf00;
    --roxo-forte:   #dd0037;
    --roxo-escuro:  #b5004b;
    --roxo-suave:   #ffe600;
    --roxo-brilho:  rgba(242, 191, 0, 0.34);
    --texto:        #fff8df;
    --texto-suave:  #d8cfae;
    --verde:        #ffe600;
    --vermelho:     #dd0037;
    --ouro:         #ffe600;
    --azul:         #0f5595;
    --home-match-bg-start: #070b13;
    --home-match-bg-mid:   #0f5595;
    --home-match-bg-end:   #b5004b;
    --home-match-border:   #f2bf00;
    --home-match-surface:  #17243a;
}

body.tema-vibrante {
    background-color: #070b13;
    background-image:
        radial-gradient(ellipse 72% 34% at 18% -6%, rgba(221, 0, 55, 0.24), transparent 68%),
        radial-gradient(ellipse 58% 28% at 90% 2%, rgba(242, 191, 0, 0.14), transparent 66%),
        linear-gradient(180deg, #0c0f1a 0%, #070b13 46%, #04060c 100%);
    background-repeat: no-repeat;
    background-size: 100% 560px, 100% 520px, auto;
}

body.tema-vibrante .btn-primary,
body.tema-vibrante .btn-success,
body.tema-vibrante .btn-sortear,
body.tema-vibrante .btn-embaralhar {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(242, 191, 0, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(135deg, #b5004b 0%, #dd0037 48%, #f2bf00 100%);
    box-shadow:
        0 14px 32px rgba(221, 0, 55, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    color: #fff;
}

body.tema-vibrante .btn-primary::before,
body.tema-vibrante .btn-success::before,
body.tema-vibrante .btn-sortear::before,
body.tema-vibrante .btn-embaralhar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.3) 45%, transparent 58% 100%);
    opacity: 0.55;
    pointer-events: none;
    transform: translateX(-55%);
    transition: transform 0.32s ease;
}

body.tema-vibrante .btn-primary:hover,
body.tema-vibrante .btn-success:hover,
body.tema-vibrante .btn-sortear:hover,
body.tema-vibrante .btn-embaralhar:hover {
    box-shadow:
        0 18px 44px rgba(221, 0, 55, 0.34),
        0 0 0 3px rgba(242, 191, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    color: #fff;
}

body.tema-vibrante .btn-primary:hover::before,
body.tema-vibrante .btn-success:hover::before,
body.tema-vibrante .btn-sortear:hover::before,
body.tema-vibrante .btn-embaralhar:hover::before {
    transform: translateX(55%);
}

body.tema-vibrante .btn-outline {
    background: linear-gradient(135deg, rgba(242, 191, 0, 0.1), rgba(255, 255, 255, 0.025));
    border-color: color-mix(in srgb, var(--roxo) 46%, var(--borda));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.tema-vibrante .preferences-badge,
body.tema-vibrante .nav-badge,
body.tema-vibrante .home-shortcut-badge,
body.tema-vibrante .jogadores-tab-badge {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, #0f5595 0%, #b5004b 50%, #dd0037 100%);
    border-color: rgba(255, 230, 0, 0.72);
    box-shadow:
        0 8px 20px rgba(15, 85, 149, 0.42),
        0 0 18px rgba(242, 191, 0, 0.3);
    color: #fff;
}

body.tema-vibrante .bottom-nav,
body.tema-vibrante .preferences-menu {
    background:
        radial-gradient(circle at 18% 0%, rgba(221, 0, 55, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(16, 24, 39, 0.96), rgba(5, 8, 18, 0.98)),
        var(--fundo-card);
    border-color: rgba(242, 191, 0, 0.28);
}

body.tema-vibrante .bottom-nav a.ativo,
body.tema-vibrante .jogadores-tabs a.ativo {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 35%),
        linear-gradient(135deg, #b5004b, #dd0037 54%, #f2bf00);
    box-shadow: 0 12px 28px rgba(221, 0, 55, 0.3);
    color: #fff;
}

body.tema-vibrante .sorteio-config-card,
body.tema-vibrante .sorteio-contra-clube-card,
body.tema-vibrante .sorteio-enviar-plantel-card,
body.tema-vibrante .card {
    background:
        radial-gradient(circle at 18% 0%, rgba(242, 191, 0, 0.09), transparent 34%),
        linear-gradient(145deg, rgba(221, 0, 55, 0.06), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        var(--fundo-card);
    border-color: rgba(242, 191, 0, 0.2);
}

body.tema-vibrante .sorteio-accordion-title,
body.tema-vibrante .sorteio-config-card .config-titulo,
body.tema-vibrante .contra-clube-titulo,
body.tema-vibrante .enviar-plantel-titulo {
    background:
        linear-gradient(135deg, rgba(242, 191, 0, 0.26), rgba(181, 0, 75, 0.12)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

body.tema-fifa21 {
    --fundo:        #061121;
    --fundo-card:   #0b1a30;
    --fundo-input:  #10233d;
    --fundo-inset:  #030916;
    --borda:        #17425a;
    --borda-forte:  #00e6ff;
    --roxo:         #00e6ff;
    --roxo-forte:   #ff006a;
    --roxo-escuro:  #7c0038;
    --roxo-suave:   #a7f7ff;
    --roxo-brilho:  rgba(0, 230, 255, 0.34);
    --texto:        #f5fbff;
    --texto-suave:  #9bc4d8;
    --verde:        #c8ff00;
    --vermelho:     #ff006a;
    --ouro:         #d4af37;
    --azul:         #00e6ff;
    --home-match-bg-start: #061121;
    --home-match-bg-mid:   #0b1a30;
    --home-match-bg-end:   #2a0730;
    --home-match-border:   #00e6ff;
    --home-match-surface:  #10233d;
}

body.tema-fifa21 {
    background-color: #061121;
    background-image:
        radial-gradient(ellipse 72% 34% at 18% -6%, rgba(255, 0, 106, 0.22), transparent 68%),
        radial-gradient(ellipse 58% 28% at 90% 2%, rgba(0, 230, 255, 0.16), transparent 66%),
        linear-gradient(180deg, #081327 0%, #061121 46%, #030814 100%);
    background-repeat: no-repeat;
    background-size: 100% 560px, 100% 520px, auto;
}

body.tema-fifa21 .btn-primary,
body.tema-fifa21 .btn-success,
body.tema-fifa21 .btn-sortear,
body.tema-fifa21 .btn-embaralhar {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 230, 255, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(135deg, #ff006a 0%, #10233d 45%, #00e6ff 100%);
    box-shadow:
        0 14px 32px rgba(255, 0, 106, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    color: #fff;
}

body.tema-fifa21 .btn-primary::before,
body.tema-fifa21 .btn-success::before,
body.tema-fifa21 .btn-sortear::before,
body.tema-fifa21 .btn-embaralhar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.3) 45%, transparent 58% 100%);
    opacity: 0.55;
    pointer-events: none;
    transform: translateX(-55%);
    transition: transform 0.32s ease;
}

body.tema-fifa21 .btn-primary:hover,
body.tema-fifa21 .btn-success:hover,
body.tema-fifa21 .btn-sortear:hover,
body.tema-fifa21 .btn-embaralhar:hover {
    box-shadow:
        0 18px 44px rgba(255, 0, 106, 0.34),
        0 0 0 3px rgba(0, 230, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    color: #fff;
}

body.tema-fifa21 .btn-primary:hover::before,
body.tema-fifa21 .btn-success:hover::before,
body.tema-fifa21 .btn-sortear:hover::before,
body.tema-fifa21 .btn-embaralhar:hover::before {
    transform: translateX(55%);
}

body.tema-fifa21 .btn-outline {
    background: linear-gradient(135deg, rgba(0, 230, 255, 0.1), rgba(255, 255, 255, 0.025));
    border-color: color-mix(in srgb, var(--roxo) 46%, var(--borda));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.tema-fifa21 .preferences-badge,
body.tema-fifa21 .nav-badge,
body.tema-fifa21 .home-shortcut-badge,
body.tema-fifa21 .jogadores-tab-badge {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, #00e6ff 0%, #7c0038 48%, #d4af37 100%);
    border-color: rgba(200, 255, 0, 0.6);
    box-shadow:
        0 8px 20px rgba(124, 0, 56, 0.42),
        0 0 18px rgba(0, 230, 255, 0.26);
    color: #fff;
}

body.tema-fifa21 .bottom-nav,
body.tema-fifa21 .preferences-menu {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 0, 106, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(11, 26, 48, 0.96), rgba(3, 9, 22, 0.98)),
        var(--fundo-card);
    border-color: rgba(0, 230, 255, 0.28);
}

body.tema-fifa21 .bottom-nav a.ativo,
body.tema-fifa21 .jogadores-tabs a.ativo {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 35%),
        linear-gradient(135deg, #ff006a, #10233d 54%, #00e6ff);
    box-shadow: 0 12px 28px rgba(255, 0, 106, 0.3);
    color: #fff;
}

body.tema-fifa21 .sorteio-config-card,
body.tema-fifa21 .sorteio-contra-clube-card,
body.tema-fifa21 .sorteio-enviar-plantel-card,
body.tema-fifa21 .card {
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 230, 255, 0.09), transparent 34%),
        linear-gradient(145deg, rgba(255, 0, 106, 0.06), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        var(--fundo-card);
    border-color: rgba(0, 230, 255, 0.2);
}

body.tema-fifa21 .sorteio-accordion-title,
body.tema-fifa21 .sorteio-config-card .config-titulo,
body.tema-fifa21 .contra-clube-titulo,
body.tema-fifa21 .enviar-plantel-titulo {
    background:
        linear-gradient(135deg, rgba(0, 230, 255, 0.26), rgba(255, 0, 106, 0.1)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

body.tema-fifa20 {
    --fundo:        #05080d;
    --fundo-card:   #0d1b2a;
    --fundo-input:  #1b263b;
    --fundo-inset:  #030507;
    --borda:        #415a77;
    --borda-forte:  #00d2ff;
    --roxo:         #00d2ff;
    --roxo-forte:   #009fd1;
    --roxo-escuro:  #1b263b;
    --roxo-suave:   #ffffff;
    --roxo-brilho:  rgba(0, 210, 255, 0.34);
    --texto:        #ffffff;
    --texto-suave:  #b7c8db;
    --verde:        #00d2ff;
    --vermelho:     #ff3b5f;
    --ouro:         #d4af37;
    --azul:         #00d2ff;
    --home-match-bg-start: #05080d;
    --home-match-bg-mid:   #0d1b2a;
    --home-match-bg-end:   #1b263b;
    --home-match-border:   #415a77;
    --home-match-surface:  #10233d;
}

body.tema-fifa20 {
    background-color: #05080d;
    background-image:
        radial-gradient(ellipse 72% 34% at 18% -6%, rgba(0, 210, 255, 0.2), transparent 68%),
        radial-gradient(ellipse 58% 28% at 90% 2%, rgba(65, 90, 119, 0.22), transparent 66%),
        linear-gradient(180deg, #070c12 0%, #05080d 46%, #030507 100%);
    background-repeat: no-repeat;
    background-size: 100% 560px, 100% 520px, auto;
}

body.tema-fifa20 .btn-primary,
body.tema-fifa20 .btn-success,
body.tema-fifa20 .btn-sortear,
body.tema-fifa20 .btn-embaralhar {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(135deg, #0b3a5c 0%, #00d2ff 48%, #d4f7ff 100%);
    box-shadow:
        0 14px 32px rgba(0, 210, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    color: #04131f;
}

body.tema-fifa20 .btn-primary::before,
body.tema-fifa20 .btn-success::before,
body.tema-fifa20 .btn-sortear::before,
body.tema-fifa20 .btn-embaralhar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.3) 45%, transparent 58% 100%);
    opacity: 0.55;
    pointer-events: none;
    transform: translateX(-55%);
    transition: transform 0.32s ease;
}

body.tema-fifa20 .btn-primary:hover,
body.tema-fifa20 .btn-success:hover,
body.tema-fifa20 .btn-sortear:hover,
body.tema-fifa20 .btn-embaralhar:hover {
    box-shadow:
        0 18px 44px rgba(0, 210, 255, 0.3),
        0 0 0 3px rgba(0, 210, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    color: #02090f;
}

body.tema-fifa20 .btn-primary:hover::before,
body.tema-fifa20 .btn-success:hover::before,
body.tema-fifa20 .btn-sortear:hover::before,
body.tema-fifa20 .btn-embaralhar:hover::before {
    transform: translateX(55%);
}

body.tema-fifa20 .btn-outline {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.08), rgba(255, 255, 255, 0.025));
    border-color: color-mix(in srgb, var(--roxo) 46%, var(--borda));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.tema-fifa20 .preferences-badge,
body.tema-fifa20 .nav-badge,
body.tema-fifa20 .home-shortcut-badge,
body.tema-fifa20 .jogadores-tab-badge {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, #415a77 0%, #00d2ff 50%, #ff3b5f 100%);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 8px 20px rgba(0, 142, 209, 0.42),
        0 0 18px rgba(255, 59, 95, 0.26);
    color: #fff;
}

body.tema-fifa20 .bottom-nav,
body.tema-fifa20 .preferences-menu {
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 210, 255, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(13, 27, 42, 0.96), rgba(3, 5, 7, 0.98)),
        var(--fundo-card);
    border-color: rgba(0, 210, 255, 0.28);
}

body.tema-fifa20 .bottom-nav a.ativo,
body.tema-fifa20 .jogadores-tabs a.ativo {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 35%),
        linear-gradient(135deg, #0b3a5c, #00d2ff 54%, #d4f7ff);
    box-shadow: 0 12px 28px rgba(0, 210, 255, 0.28);
    color: #04131f;
}

body.tema-fifa20 .sorteio-config-card,
body.tema-fifa20 .sorteio-contra-clube-card,
body.tema-fifa20 .sorteio-enviar-plantel-card,
body.tema-fifa20 .card {
    background:
        radial-gradient(circle at 18% 0%, rgba(0, 210, 255, 0.09), transparent 34%),
        linear-gradient(145deg, rgba(255, 59, 95, 0.05), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        var(--fundo-card);
    border-color: rgba(0, 210, 255, 0.18);
}

body.tema-fifa20 .sorteio-accordion-title,
body.tema-fifa20 .sorteio-config-card .config-titulo,
body.tema-fifa20 .contra-clube-titulo,
body.tema-fifa20 .enviar-plantel-titulo {
    background:
        linear-gradient(135deg, rgba(0, 210, 255, 0.28), rgba(9, 111, 168, 0.08)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

body.tema-fifa19 {
    --fundo:        #12051c;
    --fundo-card:   #1b0b32;
    --fundo-input:  #102e8a;
    --fundo-inset:  #090313;
    --borda:        #3346d3;
    --borda-forte:  #15f4e8;
    --roxo:         #15f4e8;
    --roxo-forte:   #e8006d;
    --roxo-escuro:  #9a005d;
    --roxo-suave:   #ff8aa8;
    --roxo-brilho:  rgba(21, 244, 232, 0.34);
    --texto:        #fff7fb;
    --texto-suave:  #f6aac5;
    --verde:        #15f4e8;
    --vermelho:     #e8006d;
    --ouro:         #ffc15e;
    --azul:         #0958d8;
    --home-match-bg-start: #12051c;
    --home-match-bg-mid:   #102e8a;
    --home-match-bg-end:   #e8006d;
    --home-match-border:   #15f4e8;
    --home-match-surface:  #1b0b32;
}

body.tema-fifa19 {
    background-color: #12051c;
    background-image:
        radial-gradient(ellipse 72% 34% at 18% -6%, rgba(232, 0, 109, 0.26), transparent 68%),
        radial-gradient(ellipse 58% 28% at 90% 2%, rgba(21, 244, 232, 0.16), transparent 66%),
        linear-gradient(180deg, #17062a 0%, #0d0318 46%, #090213 100%);
    background-repeat: no-repeat;
    background-size: 100% 560px, 100% 520px, auto;
}

body.tema-fifa19 .btn-primary,
body.tema-fifa19 .btn-success,
body.tema-fifa19 .btn-sortear,
body.tema-fifa19 .btn-embaralhar {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(21, 244, 232, 0.32);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(135deg, #e8006d 0%, #7c1fb0 48%, #15f4e8 100%);
    box-shadow:
        0 14px 32px rgba(232, 0, 109, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    color: #fff;
}

body.tema-fifa19 .btn-primary::before,
body.tema-fifa19 .btn-success::before,
body.tema-fifa19 .btn-sortear::before,
body.tema-fifa19 .btn-embaralhar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.3) 45%, transparent 58% 100%);
    opacity: 0.55;
    pointer-events: none;
    transform: translateX(-55%);
    transition: transform 0.32s ease;
}

body.tema-fifa19 .btn-primary:hover,
body.tema-fifa19 .btn-success:hover,
body.tema-fifa19 .btn-sortear:hover,
body.tema-fifa19 .btn-embaralhar:hover {
    box-shadow:
        0 18px 44px rgba(232, 0, 109, 0.34),
        0 0 0 3px rgba(21, 244, 232, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    color: #fff;
}

body.tema-fifa19 .btn-primary:hover::before,
body.tema-fifa19 .btn-success:hover::before,
body.tema-fifa19 .btn-sortear:hover::before,
body.tema-fifa19 .btn-embaralhar:hover::before {
    transform: translateX(55%);
}

body.tema-fifa19 .btn-outline {
    background: linear-gradient(135deg, rgba(21, 244, 232, 0.1), rgba(255, 255, 255, 0.025));
    border-color: color-mix(in srgb, var(--roxo) 46%, var(--borda));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.tema-fifa19 .preferences-badge,
body.tema-fifa19 .nav-badge,
body.tema-fifa19 .home-shortcut-badge,
body.tema-fifa19 .jogadores-tab-badge {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 34%),
        linear-gradient(135deg, #15f4e8 0%, #0958d8 48%, #e8006d 100%);
    border-color: rgba(255, 138, 168, 0.72);
    box-shadow:
        0 8px 20px rgba(9, 88, 216, 0.42),
        0 0 18px rgba(21, 244, 232, 0.26);
    color: #fff;
}

body.tema-fifa19 .bottom-nav,
body.tema-fifa19 .preferences-menu {
    background:
        radial-gradient(circle at 18% 0%, rgba(232, 0, 109, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(27, 11, 50, 0.96), rgba(9, 3, 19, 0.98)),
        var(--fundo-card);
    border-color: rgba(21, 244, 232, 0.28);
}

body.tema-fifa19 .bottom-nav a.ativo,
body.tema-fifa19 .jogadores-tabs a.ativo {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 35%),
        linear-gradient(135deg, #e8006d, #7c1fb0 54%, #15f4e8);
    box-shadow: 0 12px 28px rgba(232, 0, 109, 0.3);
    color: #fff;
}

body.tema-fifa19 .sorteio-config-card,
body.tema-fifa19 .sorteio-contra-clube-card,
body.tema-fifa19 .sorteio-enviar-plantel-card,
body.tema-fifa19 .card {
    background:
        radial-gradient(circle at 18% 0%, rgba(21, 244, 232, 0.09), transparent 34%),
        linear-gradient(145deg, rgba(232, 0, 109, 0.065), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
        var(--fundo-card);
    border-color: rgba(21, 244, 232, 0.2);
}

body.tema-fifa19 .sorteio-accordion-title,
body.tema-fifa19 .sorteio-config-card .config-titulo,
body.tema-fifa19 .contra-clube-titulo,
body.tema-fifa19 .enviar-plantel-titulo {
    background:
        linear-gradient(135deg, rgba(21, 244, 232, 0.26), rgba(232, 0, 109, 0.1)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

body.tema-claro .app-topbar,
body.tema-claro .bottom-nav,
body.tema-claro .preferences-menu {
    background: rgba(255, 255, 255, 0.94);
}

body.tema-claro .bottom-nav a.ativo,
body.tema-claro .btn-primary {
    color: #fff;
}

body.tema-custom {
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, color-mix(in srgb, var(--roxo) 18%, transparent), transparent 70%);
}

body.tema-custom .app-topbar,
body.tema-custom .bottom-nav {
    background: color-mix(in srgb, var(--custom-nav-bg, var(--fundo-card)) 94%, transparent);
}

body.tema-custom .bottom-nav {
    background: color-mix(in srgb, var(--custom-bottom-nav-bg, var(--fundo-card)) 94%, transparent);
}

body.tema-custom .preferences-menu {
    background: color-mix(in srgb, var(--custom-dropdown-bg, var(--fundo-card)) 98%, transparent);
}

body.tema-custom .modal-box,
body.tema-custom .avatar-crop-panel {
    background: var(--custom-modal-bg, var(--fundo-card));
}

body.tema-custom h1,
body.tema-custom h2,
body.tema-custom h3,
body.tema-custom .page-header h1 {
    color: var(--custom-header-color, var(--texto));
}

body.tema-custom svg.lucide {
    color: var(--custom-icon-color, currentColor);
}

body.tema-custom .btn-primary,
body.tema-custom .btn-sortear,
body.tema-custom .btn-embaralhar {
    background: linear-gradient(135deg, var(--custom-button-bg, var(--roxo-forte)), var(--roxo));
    color: var(--custom-button-text, #fff);
}

body.tema-custom .navbar-menu a:hover,
body.tema-custom .preferences-menu a:hover,
body.tema-custom .bottom-nav a:hover,
body.tema-custom .preferencias-tabs a:hover {
    background: var(--custom-hover-bg, var(--fundo-input));
}

body.tema-custom .navbar-menu a.ativo,
body.tema-custom .bottom-nav a.ativo,
body.tema-custom .preferencias-tabs a.ativo {
    background: color-mix(in srgb, var(--custom-active-bg, var(--roxo-escuro)) 82%, transparent);
}

body.tema-custom button:disabled,
body.tema-custom input:disabled,
body.tema-custom select:disabled {
    color: var(--custom-disabled-color, var(--texto-suave));
}

body.tema-custom progress,
body.tema-custom .passo-barra span,
body.tema-custom .perfil-avatar-spinner {
    accent-color: var(--custom-progress-bg, var(--roxo));
}

body.tema-custom .preferences-badge,
body.tema-custom .nav-badge,
body.tema-custom .home-shortcut-badge {
    background: var(--custom-badge-bg, var(--verde));
}

/* =========================================================
   REBRAND DOS TEMAS — mesma linguagem calma do Verde Campo
   A identidade fica nas cores. Fundo, cards, navegacao e
   acoes evitam halos, reflexos e sombras coloridas.
   ========================================================= */
body.tema-padrao,
body.tema-verde {
    --tema-acao: #2aa36c;
    --tema-acao-forte: #22875a;
    --tema-acao-hover: #2fb076;
    --tema-acao-hover-forte: #268f60;
    --tema-acao-texto: #ffffff;
    --tema-marca: #6e5be0;
    --tema-ativo-fundo: rgba(110, 91, 224, 0.16);
    --tema-ativo-borda: rgba(167, 155, 240, 0.34);
    --tema-ativo-texto: #cfc6ff;
    --tema-nav: #0d1117;
}

body.tema-roxo {
    --fundo: #0b0e13;
    --fundo-card: #151823;
    --fundo-input: #1c2030;
    --fundo-inset: #11141e;
    --borda: #292d3c;
    --borda-forte: #3b4052;
    --roxo: #7565d4;
    --roxo-forte: #5f50bd;
    --roxo-escuro: #3d3572;
    --roxo-suave: #aaa0e7;
    --texto: #e9e8f0;
    --texto-suave: #9d9aab;
    --verde: #41956d;
    --vermelho: #bd5a58;
    --ouro: #b9914e;
    --azul: #5b79b8;
    --home-match-bg-start: #171a25;
    --home-match-bg-mid: #191927;
    --home-match-bg-end: #171a22;
    --home-match-border: #2e3242;
    --home-match-surface: #1c2030;
    --tema-acao: #7565d4;
    --tema-acao-forte: #5f50bd;
    --tema-acao-hover: #8171dd;
    --tema-acao-hover-forte: #6858c7;
    --tema-acao-texto: #ffffff;
    --tema-marca: #7565d4;
    --tema-ativo-fundo: rgba(117, 101, 212, 0.16);
    --tema-ativo-borda: rgba(170, 160, 231, 0.34);
    --tema-ativo-texto: #cbc5f2;
    --tema-nav: #0e1017;
}

body.tema-claro {
    --roxo-brilho: rgba(0, 0, 0, 0);
    --sombra-roxa: 0 8px 20px rgba(40, 30, 64, 0.16);
    --tema-acao: #7c3aed;
    --tema-acao-forte: #6d28d9;
    --tema-acao-hover: #8549ef;
    --tema-acao-hover-forte: #7532df;
    --tema-acao-texto: #ffffff;
    --tema-marca: #7c3aed;
    --tema-ativo-fundo: rgba(124, 58, 237, 0.1);
    --tema-ativo-borda: rgba(109, 40, 217, 0.24);
    --tema-ativo-texto: #5b21b6;
    --tema-nav: #ffffff;
}

body.tema-vibrante {
    --fundo: #0b0d13;
    --fundo-card: #151923;
    --fundo-input: #1d2430;
    --fundo-inset: #10141c;
    --borda: #2b3341;
    --borda-forte: #424c5d;
    --roxo: #c79a3b;
    --roxo-forte: #a94447;
    --roxo-escuro: #67363d;
    --roxo-suave: #dfbd72;
    --texto: #eeeae1;
    --texto-suave: #a9a397;
    --verde: #b9a33f;
    --vermelho: #bd4b4e;
    --ouro: #c79a3b;
    --azul: #4c7196;
    --home-match-bg-start: #171a22;
    --home-match-bg-mid: #18202a;
    --home-match-bg-end: #21191d;
    --home-match-border: #343944;
    --home-match-surface: #1d2430;
    --tema-acao: #b94d4b;
    --tema-acao-forte: #963d40;
    --tema-acao-hover: #c45854;
    --tema-acao-hover-forte: #a34445;
    --tema-acao-texto: #ffffff;
    --tema-marca: #c79a3b;
    --tema-ativo-fundo: rgba(185, 77, 75, 0.16);
    --tema-ativo-borda: rgba(199, 154, 59, 0.3);
    --tema-ativo-texto: #ebc97d;
    --tema-nav: #0e1118;
}

body.tema-fifa21 {
    --fundo: #09111b;
    --fundo-card: #121d2a;
    --fundo-input: #19283a;
    --fundo-inset: #0d1621;
    --borda: #27394b;
    --borda-forte: #3d5369;
    --roxo: #3e91a8;
    --roxo-forte: #b83f70;
    --roxo-escuro: #63354f;
    --roxo-suave: #84b9c8;
    --texto: #edf2f5;
    --texto-suave: #99a9b6;
    --verde: #9aaf4d;
    --vermelho: #bd4c75;
    --ouro: #b99a50;
    --azul: #477ca6;
    --home-match-bg-start: #141e29;
    --home-match-bg-mid: #172431;
    --home-match-bg-end: #211a26;
    --home-match-border: #2b4151;
    --home-match-surface: #19283a;
    --tema-acao: #b83f70;
    --tema-acao-forte: #94325a;
    --tema-acao-hover: #c34b7a;
    --tema-acao-hover-forte: #a13963;
    --tema-acao-texto: #ffffff;
    --tema-marca: #3e91a8;
    --tema-ativo-fundo: rgba(62, 145, 168, 0.16);
    --tema-ativo-borda: rgba(132, 185, 200, 0.3);
    --tema-ativo-texto: #a9ced8;
    --tema-nav: #0b141f;
}

body.tema-fifa20 {
    --fundo: #090d12;
    --fundo-card: #121b25;
    --fundo-input: #1a2734;
    --fundo-inset: #0d131a;
    --borda: #293949;
    --borda-forte: #41566a;
    --roxo: #368da7;
    --roxo-forte: #28728b;
    --roxo-escuro: #284555;
    --roxo-suave: #86b8c7;
    --texto: #edf2f4;
    --texto-suave: #9eabb4;
    --verde: #3f9271;
    --vermelho: #bd5364;
    --ouro: #b79a58;
    --azul: #368da7;
    --home-match-bg-start: #131b23;
    --home-match-bg-mid: #16232e;
    --home-match-bg-end: #19232d;
    --home-match-border: #2c3d4c;
    --home-match-surface: #1a2734;
    --tema-acao: #368da7;
    --tema-acao-forte: #28728b;
    --tema-acao-hover: #4199b3;
    --tema-acao-hover-forte: #2d7c96;
    --tema-acao-texto: #ffffff;
    --tema-marca: #368da7;
    --tema-ativo-fundo: rgba(54, 141, 167, 0.16);
    --tema-ativo-borda: rgba(134, 184, 199, 0.3);
    --tema-ativo-texto: #a7cbd5;
    --tema-nav: #0c1218;
}

body.tema-fifa19 {
    --fundo: #120d17;
    --fundo-card: #1d1725;
    --fundo-input: #272033;
    --fundo-inset: #130f19;
    --borda: #382f45;
    --borda-forte: #51425f;
    --roxo: #3d9f9a;
    --roxo-forte: #b73868;
    --roxo-escuro: #69304c;
    --roxo-suave: #d28da8;
    --texto: #f0eaee;
    --texto-suave: #aa9da6;
    --verde: #3d9f9a;
    --vermelho: #bd466e;
    --ouro: #bd9759;
    --azul: #536fae;
    --home-match-bg-start: #1b1621;
    --home-match-bg-mid: #1b1c2a;
    --home-match-bg-end: #251722;
    --home-match-border: #3d3348;
    --home-match-surface: #272033;
    --tema-acao: #b73868;
    --tema-acao-forte: #932d54;
    --tema-acao-hover: #c24473;
    --tema-acao-hover-forte: #9f345d;
    --tema-acao-texto: #ffffff;
    --tema-marca: #3d9f9a;
    --tema-ativo-fundo: rgba(183, 56, 104, 0.16);
    --tema-ativo-borda: rgba(210, 141, 168, 0.3);
    --tema-ativo-texto: #dfa5ba;
    --tema-nav: #120e16;
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) {
    --roxo-brilho: rgba(0, 0, 0, 0);
    --sombra-roxa: 0 10px 26px rgba(0, 0, 0, 0.3);
    background-color: var(--fundo);
    background-image: none;
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.btn-primary, .btn-success, .btn-sortear, .btn-embaralhar) {
    position: relative;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--tema-acao) 76%, var(--borda));
    background: linear-gradient(180deg, var(--tema-acao), var(--tema-acao-forte));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--tema-acao-texto);
    filter: none;
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.btn-primary, .btn-success, .btn-sortear, .btn-embaralhar):hover {
    background: linear-gradient(180deg, var(--tema-acao-hover), var(--tema-acao-hover-forte));
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: var(--tema-acao-texto);
    filter: none;
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.btn-primary, .btn-success, .btn-sortear, .btn-embaralhar)::before {
    content: none;
    display: none;
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) .btn-outline {
    background: color-mix(in srgb, var(--texto) 3%, transparent);
    border-color: var(--borda-forte);
    box-shadow: none;
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.preferences-badge, .nav-badge, .home-shortcut-badge, .jogadores-tab-badge) {
    background: var(--tema-marca);
    border-color: color-mix(in srgb, var(--fundo) 90%, transparent);
    box-shadow: none;
    color: #ffffff;
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.app-topbar, .bottom-nav, .preferences-menu) {
    background: color-mix(in srgb, var(--tema-nav) 96%, transparent);
    border-color: var(--borda);
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) .bottom-nav {
    box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.34);
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.bottom-nav a.ativo, .jogadores-tabs a.ativo) {
    background: var(--tema-ativo-fundo);
    border: 1px solid var(--tema-ativo-borda);
    box-shadow: none;
    color: var(--tema-ativo-texto);
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.sorteio-config-card, .sorteio-contra-clube-card, .sorteio-enviar-plantel-card, .card) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%),
        var(--fundo-card);
    border-color: var(--borda);
}

body:is(.tema-padrao, .tema-verde, .tema-roxo, .tema-claro, .tema-vibrante, .tema-fifa21, .tema-fifa20, .tema-fifa19) :is(.sorteio-accordion-title, .sorteio-config-card .config-titulo, .contra-clube-titulo, .enviar-plantel-titulo) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
}

/* O tema personalizado conserva as cores escolhidas, mas segue o acabamento sem neon. */
body.tema-custom {
    --roxo-brilho: rgba(0, 0, 0, 0);
    --sombra-roxa: 0 10px 26px rgba(0, 0, 0, 0.3);
    background-color: var(--fundo);
    background-image: none;
}

body.tema-custom :is(.btn-primary, .btn-sortear, .btn-embaralhar) {
    border: 1px solid color-mix(in srgb, var(--custom-button-bg, var(--roxo-forte)) 76%, var(--borda));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--custom-button-bg, var(--roxo-forte)) 92%, #ffffff),
        var(--custom-button-bg, var(--roxo-forte))
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--custom-button-text, #fff);
}

body.tema-custom :is(.btn-primary, .btn-sortear, .btn-embaralhar):hover {
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    filter: none;
}

body.tema-custom :is(.preferences-badge, .nav-badge, .home-shortcut-badge, .jogadores-tab-badge) {
    box-shadow: none;
}

a { color: var(--roxo-suave); text-decoration: none; }
a:hover { color: var(--roxo); }

h1, h2, h3,
.stat-valor,
.navbar-brand {
    font-family: var(--fonte-display);
    letter-spacing: -0.01em;
}

:focus-visible {
    outline: 2px solid var(--roxo);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--roxo-forte); color: #fff; }

/* ===========================
   ÍCONES (Lucide)
=========================== */
svg.lucide {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    stroke-width: 2;
}

.posicao-glove-icon {
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.navbar-menu a svg.lucide { width: 15px; height: 15px; opacity: 0.75; }
.navbar-menu a.ativo svg.lucide { opacity: 1; }
.stat-icon svg.lucide { width: 20px; height: 20px; color: var(--roxo-suave); }
.badge-posicao svg.lucide,
.badge-posicao .posicao-glove-icon { width: 12px; height: 12px; }
.avaliacao-btn svg.lucide { width: 14px; height: 14px; }
.badge-like-stat svg.lucide,
.badge-neutral-stat svg.lucide,
.badge-dislike-stat svg.lucide { width: 12px; height: 12px; fill: currentColor; }
.jogadores-acoes svg.lucide,
.btn-acao svg.lucide { width: 15px; height: 15px; }
.campo-busca-jogadores svg.lucide { width: 16px; height: 16px; opacity: 0.7; }
.jogadores-icon svg.lucide { width: 16px; height: 16px; }
.jc-editar svg.lucide { width: 13px; height: 13px; }
.il-titulo svg.lucide { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
   NAVBAR
=========================== */
.navbar {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 0.75rem 2rem;
    background: rgba(11, 14, 19, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--texto);
    white-space: nowrap;
}

.navbar-brand img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.app-topbar-home .navbar-brand img {
    width: 46px;
    height: 46px;
}

.navbar-brand .brand-dot { color: var(--roxo); }

.club-switcher {
    position: relative;
    display: inline-flex;
    z-index: 360;
}

.club-switcher-toggle {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    transition: opacity 0.15s;
}

.club-switcher-toggle:hover {
    opacity: 0.85;
}

.club-switcher-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    z-index: 380;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    min-width: 190px;
    max-width: 260px;
    padding: 0.6rem;
    border: 1px solid rgba(110, 91, 224, 0.3);
    border-radius: 18px;
    background: rgba(13, 17, 23, 0.98);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.15s, transform 0.15s;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.club-switcher.aberto .club-switcher-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.club-switcher-form {
    display: inline-flex;
}

.club-switcher-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    background: var(--fundo-input);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.club-switcher-item:hover {
    transform: translateY(-1px);
    border-color: rgba(168, 85, 247, 0.55);
}

.club-switcher-item.is-atual {
    cursor: default;
    border-color: var(--roxo);
}

.club-switcher-item img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.navbar-menu {
    display: flex;
    gap: 0.2rem;
    list-style: none;
    flex: 1;
    flex-wrap: wrap;
}

.navbar-menu a {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.navbar-menu a:hover {
    background: var(--fundo-input);
    color: var(--texto);
}

.navbar-menu a.ativo {
    background: rgba(110, 91, 224, 0.15);
    color: var(--roxo-suave);
    font-weight: 600;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--texto-suave);
    white-space: nowrap;
    margin-left: auto;
}

.navbar-user .usuario-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.08rem;
    padding: 0.28rem 0.85rem;
    border-radius: 16px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    color: var(--texto);
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.15;
}

.navbar-user .usuario-chip .perfil {
    color: var(--roxo-suave);
    font-weight: 500;
    font-size: 0.68rem;
    line-height: 1;
    text-transform: capitalize;
}

.moedas-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.28rem 0.7rem;
    border: 1px solid rgba(200, 151, 59, 0.3);
    border-radius: 999px;
    background: rgba(200, 151, 59, 0.1);
    color: var(--ouro);
    font-weight: 900;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.moedas-chip svg {
    width: 16px;
    height: 16px;
}

.moedas-area {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.moedas-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(200, 151, 59, 0.3);
    border-radius: 999px;
    background: rgba(200, 151, 59, 0.1);
    color: var(--ouro);
    cursor: pointer;
}

.moedas-add-btn svg {
    width: 16px;
    height: 16px;
}

.user-preferences {
    position: relative;
    display: inline-flex;
    z-index: 360;
}

.preferences-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}

.preferences-toggle:hover,
.preferences-toggle[aria-expanded="true"] {
    color: #fff;
    border-color: rgba(168, 85, 247, 0.55);
    background: rgba(110, 91, 224, 0.18);
}

.preferences-toggle:hover {
    transform: translateY(-1px);
}

.preferences-toggle svg {
    width: 18px;
    height: 18px;
}

.preferences-menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 380;
    display: grid;
    min-width: 190px;
    padding: 0.45rem;
    border: 1px solid rgba(110, 91, 224, 0.3);
    border-radius: 18px;
    background: rgba(13, 17, 23, 0.98);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.15s, transform 0.15s;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.user-preferences.aberto .preferences-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.preferences-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 2.35rem 0.7rem 0.75rem;
    border-radius: 13px;
    color: var(--texto-suave);
    font-weight: 800;
    font-size: 0.84rem;
    transition: background 0.15s, color 0.15s;
}

.preferences-menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.preferences-menu a svg {
    width: 16px;
    height: 16px;
    color: var(--roxo-suave);
}

.preferences-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(11, 14, 19, 0.9);
    border-radius: 999px;
    background: var(--roxo);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px var(--roxo-brilho);
    pointer-events: none;
}

.preferences-menu a .preferences-badge {
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 340;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: rgba(11, 14, 19, 0.9);
    border-bottom: 1px solid var(--borda);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-sem-clube-banner {
    position: relative;
    z-index: 330;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    background: rgba(110, 91, 224, 0.14);
    border-bottom: 1px solid rgba(110, 91, 224, 0.32);
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.app-sem-clube-banner span {
    flex: 1;
    min-width: 0;
}

.app-sem-clube-banner svg.lucide {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--roxo-suave);
}

.estado-sem-clube-cta {
    margin-top: 0.9rem;
}

.perfil-posicao-travada {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bottom-nav {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 150;
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.25rem;
    width: auto;
    max-width: 800px;
    margin-inline: auto;
    padding: 0.45rem;
    background: color-mix(in srgb, var(--fundo-card) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--roxo) 35%, transparent);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    body {
        min-height: 100svh;
    }

    .app-topbar {
        padding-top: max(0.85rem, env(safe-area-inset-top));
    }

    .bottom-nav {
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    }

    .container {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    min-width: 0;
    min-height: 54px;
    padding: 0.4rem 0.25rem;
    border-radius: 14px;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.bottom-nav a:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.05);
}

.bottom-nav a.ativo {
    color: #fff;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--roxo) 92%, transparent),
        color-mix(in srgb, var(--roxo-forte) 92%, transparent)
    );
    box-shadow: 0 10px 26px var(--roxo-brilho);
}

.bottom-nav a svg {
    width: 19px;
    height: 19px;
}

.nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
}

.bottom-nav a.nav-agenda-reminder .nav-icon-wrap > svg {
    color: var(--verde);
}

.nav-agenda-reminder-pulse {
    position: absolute;
    top: -13px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 12px;
    padding: 0 4px 0 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: #dc4545;
    color: #fff;
    font-size: 0.45rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(220, 69, 69, 0.78), 0 0 10px rgba(220, 69, 69, 0.5);
    transform-origin: center;
    animation: agenda-nav-reminder-pulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

.nav-agenda-reminder-pulse::before {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    content: "";
}

@keyframes agenda-nav-reminder-pulse {
    0%, 100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 0 0 rgba(220, 69, 69, 0.78), 0 0 10px rgba(220, 69, 69, 0.5);
    }
    50% {
        opacity: 0.35;
        transform: translateX(-50%) scale(0.82);
        box-shadow: 0 0 0 7px rgba(220, 69, 69, 0), 0 0 2px rgba(220, 69, 69, 0.15);
    }
}

.nav-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(11, 14, 19, 0.9);
    border-radius: 999px;
    background: var(--roxo);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px var(--roxo-brilho);
    pointer-events: none;
}

@keyframes notif-badge-ping {
    0% { box-shadow: 0 8px 18px var(--roxo-brilho), 0 0 0 0 rgba(190, 72, 70, 0.55); }
    70% { box-shadow: 0 8px 18px var(--roxo-brilho), 0 0 0 7px rgba(190, 72, 70, 0); }
    100% { box-shadow: 0 8px 18px var(--roxo-brilho), 0 0 0 0 rgba(190, 72, 70, 0); }
}

.nav-badge,
.home-shortcut-badge,
.jogadores-tab-badge,
.preferences-badge {
    animation: notif-badge-ping 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .nav-badge,
    .home-shortcut-badge,
    .jogadores-tab-badge,
    .preferences-badge {
        animation: none;
    }

    .nav-agenda-reminder-pulse {
        animation: agenda-nav-reminder-pulse 2.4s ease-in-out infinite !important;
    }

}

/* ===========================
   CONTAINER & LAYOUT
=========================== */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem calc(100px + env(safe-area-inset-bottom));
}

.layout-dois-col {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* ===========================
   PAGE HEADER
=========================== */
.page-header { margin-bottom: 1.75rem; }

.page-eyebrow {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--roxo);
}

.page-header h1 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--texto);
    line-height: 1.25;
}

.page-header p {
    color: var(--texto-suave);
    margin-top: 0.3rem;
    max-width: 60ch;
}

/* ===========================
   HOME PREMIUM
=========================== */
.home-shell {
    display: grid;
    gap: 1.1rem;
}

.home-hero {
    padding: 0.35rem 0.15rem 0.25rem;
}

.home-eyebrow,
.home-card-kicker {
    display: inline-flex;
    align-items: center;
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero h1 {
    margin: 0.35rem 0;
    font-family: var(--fonte-display);
    font-size: clamp(2rem, 8vw, 4.4rem);
    line-height: 0.96;
}

.home-hero p {
    max-width: 560px;
    color: var(--texto-suave);
    font-size: 1rem;
}

.home-match-card {
    position: relative;
    overflow: hidden;
    min-height: 310px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 70%, transparent);
    background: var(--home-match-bg-end);
    cursor: pointer;
}

.home-match-card:focus-visible {
    outline: 2px solid var(--roxo-suave);
    outline-offset: 3px;
}

.home-match-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--verde) 18%, transparent), transparent 26%),
        radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--roxo) 24%, transparent), transparent 34%),
        linear-gradient(145deg, var(--home-match-bg-start), var(--home-match-bg-mid) 54%, var(--home-match-bg-end));
}

.home-match-bg::after {
    content: "";
    position: absolute;
    inset: auto -10% -30% 18%;
    height: 180px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 45%, transparent);
    transform: rotate(-8deg);
}

.home-match-content {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 310px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1.25rem;
}

.home-match-content h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(2.1rem, 11vw, 4.8rem);
    line-height: 0.9;
}

.home-match-meta {
    display: grid;
    gap: 0.55rem;
}

.home-match-meta span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 48%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--home-match-surface) 72%, transparent);
    color: var(--texto-suave);
    font-size: 0.86rem;
    font-weight: 700;
}

.home-match-meta svg {
    width: 16px;
    height: 16px;
    color: var(--verde);
}

.home-primary-action {
    width: fit-content;
    padding-inline: 1.1rem;
}

.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.home-feature-card {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid rgba(110, 91, 224, 0.18);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(31, 24, 52, 0.9), rgba(17, 13, 28, 0.94));
}

.home-feature-card h3 {
    margin: 0.35rem 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.8rem, 7vw, 3rem);
    line-height: 1;
}

.home-feature-card p {
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.home-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid rgba(110, 91, 224, 0.14);
    border-radius: 22px;
    background: rgba(19, 24, 34, 0.58);
}

.home-metrics-row div {
    display: grid;
    gap: 0.18rem;
    min-height: 74px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.home-metrics-row span {
    font-family: var(--fonte-display);
    font-size: 1.45rem;
    font-weight: 800;
}

.home-metrics-row small {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
}

.home-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.home-section-heading h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: 1.1rem;
}

.home-section-heading a {
    color: var(--verde);
    font-size: 0.82rem;
    font-weight: 800;
}

.home-activity-list {
    display: grid;
    gap: 0.55rem;
}

.home-activity-item,
.home-empty-state {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 0.15s, background 0.15s;
}

.home-activity-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.065);
}

.home-activity-item span,
.home-empty-state span {
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 800;
}

.home-activity-item small,
.home-empty-state span {
    color: var(--texto-suave);
}

.home-highlights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.home-last-winner {
    order: 1;
    grid-column: 1 / -1;
}

.home-likes-winners {
    order: 2;
    grid-column: 1 / -1;
}

.home-likes-winners,
.home-last-winner {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(42, 163, 108, 0.18);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(19, 24, 34, 0.72), rgba(42, 163, 108, 0.08));
    backdrop-filter: blur(12px);
}

.home-likes-winners-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
    font-weight: 900;
}

.home-likes-winners-head span {
    font-size: 0.9rem;
}

.home-likes-winners-head a {
    color: var(--verde);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.home-likes-winners-list {
    display: grid;
    gap: 0.55rem;
}

.home-likes-card-rotator {
    position: relative;
    display: grid;
    min-height: 520px;
    overflow: hidden;
    cursor: pointer;
}

.home-likes-card-rotator:focus-visible {
    outline: 2px solid rgba(42, 163, 108, 0.72);
    outline-offset: 4px;
}

.home-likes-card-slide {
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.home-likes-card-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.home-likes-card-slide.is-entering .player-card {
    animation: homeLikesCardSwap 1.35s cubic-bezier(0.18, 0.78, 0.18, 1);
}

@keyframes homeLikesCardSwap {
    0% {
        opacity: 0;
        transform: translateX(54px) rotate(5deg) scale(0.9);
    }

    58% {
        opacity: 1;
        transform: translateX(-12px) rotate(-1.4deg) scale(1.04);
    }

    78% {
        opacity: 1;
        transform: translateX(5px) rotate(0.5deg) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
    }
}

.home-likes-card-stage {
    display: grid;
    justify-items: center;
    width: 100%;
}

.home-likes-card-stage .player-card {
    width: min(78vw, 260px);
}

.home-likes-card-meta {
    display: grid;
    justify-items: center;
    gap: 0.14rem;
    text-align: center;
}

.home-likes-card-meta strong {
    max-width: min(100%, 280px);
    overflow: hidden;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-likes-card-meta small {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.home-evolution-card-rotator {
    min-height: 600px;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.home-evolution-card-rotator.is-pressed {
    cursor: progress;
}

.home-evolution-card-slide {
    align-content: start;
    padding: 0.15rem 0 0.2rem;
}

.home-evolution-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.34rem 0.62rem;
    border: 1px solid rgba(200, 151, 59, 0.28);
    border-radius: 999px;
    background: rgba(200, 151, 59, 0.08);
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 900;
}

.home-evolution-kicker svg {
    width: 15px;
    height: 15px;
    color: var(--ouro);
    fill: currentColor;
}

.home-evolution-card-slide.is-down .home-evolution-kicker {
    border-color: rgba(201, 82, 79, 0.34);
    background: rgba(201, 82, 79, 0.1);
}

.home-evolution-card-slide.is-down .home-evolution-kicker svg {
    color: #c9524f;
    fill: none;
}

.home-evolution-change {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;
    min-width: 138px;
    padding: 0.58rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(8, 5, 18, 0.78);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    color: var(--texto);
    font-family: var(--fonte-display);
    font-weight: 900;
}

.home-evolution-score {
    color: rgba(200, 151, 59, 0.92) !important;
}

.home-evolution-change span {
    color: var(--texto-suave);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.home-evolution-change svg {
    width: 18px;
    height: 18px;
    color: var(--verde);
}

.home-evolution-change strong {
    color: var(--ouro);
    font-size: 1.1rem;
}

.home-evolution-card-slide.is-down .home-evolution-change svg,
.home-evolution-card-slide.is-down .home-evolution-change strong {
    color: #c9524f;
}

/* ===========================
   REVELACAO DE OVERALL
=========================== */
.overall-reveal-modal {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #030208;
}

.overall-reveal-modal[hidden] {
    display: none !important;
}

body.overall-reveal-open {
    overflow: hidden;
}

/* ===========================
   ABERTURA CINEMATOGRAFICA DE PACOTES DA LOJA
=========================== */
.loja-pack-cinematic-modal {
    position: fixed;
    inset: 0;
    z-index: 9850;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #02040a;
    color: #fff;
}

.loja-pack-cinematic-modal.is-closing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.loja-pack-cinematic-arena {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 100vh;
    height: 100dvh;
    min-height: 480px;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint style;
    background:
        radial-gradient(circle at 50% 76%, rgba(93, 143, 255, 0.12), transparent 25%),
        radial-gradient(circle at 50% 45%, rgba(35, 67, 125, 0.32), transparent 42%),
        linear-gradient(#050a18, #091127 42%, #050815 73%, #02030a);
}

.loja-pack-cinematic-status {
    position: absolute;
    top: calc(max(18px, env(safe-area-inset-top)) + 42px);
    right: 24px;
    left: 24px;
    z-index: 40;
    color: #f7e7b1;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}

.loja-pack-stadium,
.loja-pack-sky,
.loja-pack-roof,
.loja-pack-stand,
.loja-pack-pitch {
    position: absolute;
}

.loja-pack-stadium {
    inset: 0;
    overflow: hidden;
    perspective: 900px;
}

.loja-pack-sky {
    inset: 0 0 34%;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(41, 65, 112, 0.3), transparent 58%),
        linear-gradient(#060a17, #101b34 55%, #10182c);
}

.loja-pack-roof {
    top: 4%;
    right: -10%;
    left: -10%;
    height: 23%;
    border-bottom: 2px solid rgba(187, 215, 255, 0.14);
    border-radius: 0 0 50% 50%;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 28px),
        linear-gradient(180deg, #05070e, #11182b 75%, transparent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    transform: perspective(600px) rotateX(-8deg);
}

.loja-pack-stand {
    top: 22%;
    right: -12%;
    left: -12%;
    height: 44%;
    border-radius: 48% 48% 0 0 / 22% 22% 0 0;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(90deg, rgba(118, 145, 205, 0.08) 0 2px, transparent 2px 13px),
        linear-gradient(180deg, #17213c, #0b1021 52%, #060916);
    box-shadow: inset 0 30px 50px rgba(0, 0, 0, 0.6);
}

.loja-pack-stand::after {
    content: "";
    position: absolute;
    inset: 17% 8% 0;
    opacity: 0.18;
    background: radial-gradient(circle, rgba(241, 246, 255, 0.23) 0 1px, transparent 1.5px) 0 0 / 8px 8px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.loja-pack-lights {
    position: absolute;
    top: 16%;
    left: 50%;
    display: flex;
    width: 118%;
    height: 7%;
    justify-content: space-around;
    filter: blur(0.15px);
    transform: translateX(-50%);
}

.loja-pack-lights i {
    width: 18%;
    height: 6px;
    border-radius: 999px;
    opacity: 0.75;
    background: linear-gradient(90deg, transparent, #e6efff, #fff, #e6efff, transparent);
    box-shadow: 0 0 12px #cfe0ff, 0 0 28px rgba(216, 229, 255, 0.6);
}

.loja-pack-pitch {
    right: -20%;
    bottom: -21%;
    left: -20%;
    height: 52%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 12.5%, rgba(0, 0, 0, 0.025) 12.5% 25%),
        linear-gradient(#133a28, #0d281c);
    box-shadow: inset 0 30px 35px rgba(0, 0, 0, 0.5);
    transform: perspective(700px) rotateX(64deg);
    transform-origin: 50% 0;
}

.loja-pack-pitch::before {
    content: "";
    position: absolute;
    inset: 5% 18% 18%;
    border: 2px solid rgba(255, 255, 255, 0.17);
}

.loja-pack-ground-glow {
    position: absolute;
    bottom: 13%;
    left: 50%;
    width: min(86vw, 520px);
    height: 16vh;
    opacity: 0.6;
    background: radial-gradient(ellipse, rgba(132, 210, 255, 0.38), rgba(63, 105, 255, 0.13) 35%, transparent 72%);
    filter: blur(18px);
    transform: translateX(-50%);
}

.loja-pack-beam {
    position: absolute;
    bottom: 15%;
    left: 50%;
    width: 16vw;
    max-width: 95px;
    height: 90vh;
    opacity: 0.12;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.25), rgba(199, 221, 255, 0.04) 57%, transparent);
    filter: blur(7px);
    transform-origin: 50% 100%;
}

.loja-pack-beam-1 { transform: translateX(-50%) rotate(25deg); }
.loja-pack-beam-2 { transform: translateX(-50%) rotate(-25deg); }
.loja-pack-beam-3 { opacity: 0.06; transform: translateX(-50%) rotate(55deg); }
.loja-pack-beam-4 { opacity: 0.06; transform: translateX(-50%) rotate(-55deg); }

.loja-pack-cinematic-modal.is-playing .loja-pack-beam {
    animation: lojaPackBeamPulse 1.1s ease-in-out infinite alternate;
}

.loja-pack-opening-package {
    position: absolute;
    top: 49%;
    left: 50%;
    z-index: 13;
    display: grid;
    width: min(56vw, 220px);
    place-items: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transform-origin: 50% 58%;
}

.loja-pack-opening-package .loja-pacote-pack {
    width: min(48vw, 190px);
    filter:
        drop-shadow(0 24px 22px rgba(0, 0, 0, 0.62))
        drop-shadow(0 0 24px var(--loja-pacote-glow));
    animation: lojaPackPackageIdle 3.2s ease-in-out infinite;
    transform-origin: 50% 58%;
    will-change: transform, filter;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-opening-package {
    animation: lojaPackPackageOpening 1.35s 3.2s cubic-bezier(0.22, 0.86, 0.2, 1) forwards;
}

.loja-pack-cinematic-modal.is-finished .loja-pack-opening-package {
    display: none;
}

.loja-pack-shield-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    width: min(47vw, 238px);
    aspect-ratio: 0.82;
    opacity: 0;
    pointer-events: none;
    perspective: 950px;
    perspective-origin: 50% 42%;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.loja-pack-shield-spin {
    --loja-pack-box-depth: clamp(26px, 6.3vw, 30px);
    --loja-pacote-frame-light: #f4b866;
    --loja-pacote-frame: #b6652c;
    --loja-pacote-frame-dark: #50240f;
    --loja-pacote-glow: rgba(238, 117, 40, 0.3);
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

.loja-pack-shield-stage.loja-pacote-prata .loja-pack-shield-spin {
    --loja-pacote-frame-light: #eef8ff;
    --loja-pacote-frame: #8eabc0;
    --loja-pacote-frame-dark: #344b5d;
    --loja-pacote-glow: rgba(96, 200, 255, 0.3);
}

.loja-pack-shield-stage.loja-pacote-ouro .loja-pack-shield-spin {
    --loja-pacote-frame-light: #fff3a8;
    --loja-pacote-frame: #dcae2c;
    --loja-pacote-frame-dark: #68430b;
    --loja-pacote-glow: rgba(200, 151, 59, 0.32);
}

.loja-pack-shield.loja-pacote-pack,
.loja-pack-box-back.loja-pacote-pack {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    padding: 3.05rem 1.05rem 1.25rem;
    background:
        linear-gradient(118deg, transparent 0 37%, rgba(255, 255, 255, 0.82) 45%, rgba(255, 239, 166, 0.65) 50%, transparent 59%) -220px 0 / 160px 100% no-repeat,
        linear-gradient(145deg,
            var(--loja-pacote-frame-light) 0 7%,
            var(--loja-pacote-frame) 14%,
            var(--loja-pacote-frame-light) 25%,
            var(--loja-pacote-frame-dark) 49%,
            var(--loja-pacote-frame) 72%,
            var(--loja-pacote-frame-light) 88%,
            var(--loja-pacote-frame-dark) 100%);
    box-shadow:
        0 0 0 2px var(--loja-pacote-frame-light),
        0 0 0 5px var(--loja-pacote-frame-dark),
        0 20px 28px rgba(0, 0, 0, 0.62),
        0 0 42px var(--loja-pacote-glow);
    filter:
        drop-shadow(0 24px 22px rgba(0, 0, 0, 0.58))
        drop-shadow(0 0 28px var(--loja-pacote-glow));
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.loja-pack-box-front {
    z-index: 2;
    transform: translateZ(calc(var(--loja-pack-box-depth) / 2));
}

.loja-pack-box-back.loja-pacote-pack {
    z-index: 2;
    filter:
        brightness(0.72)
        drop-shadow(0 20px 18px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 22px var(--loja-pacote-glow));
    transform: rotateY(180deg) translateZ(calc(var(--loja-pack-box-depth) / 2));
}

.loja-pack-box-side {
    --loja-pack-edge-x: 50%;
    --loja-pack-edge-y: 50%;
    --loja-pack-edge-length: 50%;
    --loja-pack-edge-angle: 0deg;
    position: absolute;
    top: var(--loja-pack-edge-y);
    left: var(--loja-pack-edge-x);
    z-index: 1;
    display: block;
    width: var(--loja-pack-edge-length);
    height: var(--loja-pack-box-depth);
    border-radius: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.48), transparent 17% 72%, rgba(0, 0, 0, 0.6)),
        repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 255, 255, 0.12) 14px, transparent 16px),
        linear-gradient(180deg, var(--loja-pacote-frame-light), var(--loja-pacote-frame-dark));
    box-shadow:
        inset 4px 0 7px rgba(255, 255, 255, 0.26),
        inset -7px 0 9px rgba(0, 0, 0, 0.58),
        0 0 14px var(--loja-pacote-glow);
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateZ(var(--loja-pack-edge-angle)) rotateX(90deg);
    backface-visibility: hidden;
}

/* As faces inferiores usam vertices espelhados e precisam permanecer visiveis
   nos dois lados durante o giro para que os chanfros nao abram lacunas. */
.loja-pack-shield-stage .loja-pack-box-side-bottom,
.loja-pack-shield-stage .loja-pack-box-bevel-bottom-left,
.loja-pack-shield-stage .loja-pack-box-bevel-bottom-right {
    backface-visibility: visible;
}

/* Encaixa igualmente frente e verso dentro do acabamento inferior. */
.loja-pack-shield-stage .loja-pack-box-front,
.loja-pack-shield-stage .loja-pack-box-back {
    clip-path: polygon(
        10% 0,
        90% 0,
        100% 7%,
        100% 82%,
        90% 89%,
        10% 89%,
        0 82%,
        0 7%
    );
}

/* Reduz apenas a faixa decorativa frontal, sem mudar o acabamento 3D. */
.loja-pack-shield-stage .loja-pack-box-front .loja-pacote-serrilhado-bottom {
    display: none;
}

/* Mantem somente a faixa traseira com as proporcoes do acabamento superior. */
.loja-pack-shield-stage .loja-pack-box-back .loja-pacote-serrilhado-bottom {
    right: 7%;
    bottom: 5px;
    left: 7%;
    height: 11px;
}

.loja-pack-shield.loja-pacote-pack .loja-pacote-logo {
    width: 54px;
    margin-top: 0.72rem;
}

.loja-pack-shield.loja-pacote-pack .loja-pacote-titulo {
    max-width: 118px;
    font-size: 0.6rem;
}

.loja-pack-shield.loja-pacote-pack .loja-pacote-subtitulo {
    font-size: 0.39rem;
}

.loja-pack-shield.loja-pacote-pack .loja-pacote-raridade {
    font-size: 0.43rem;
}

.loja-pack-shield-orbit,
.loja-pack-shield-light-core {
    position: absolute;
    left: 50%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
}

.loja-pack-shield-orbit {
    width: min(90vw, 430px);
    height: 78px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 252, 209, 0.42), transparent 40%),
        linear-gradient(90deg, transparent 3%, rgba(255, 251, 207, 0.92) 19%, rgba(255, 222, 105, 0.62) 42%, transparent 53% 57%, rgba(255, 252, 214, 0.92) 80%, transparent 97%);
    filter: blur(1.1px) drop-shadow(0 0 13px rgba(255, 231, 135, 0.95));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 11% 42%, transparent 50% 58%, #000 70% 89%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 11% 42%, transparent 50% 58%, #000 70% 89%, transparent);
    transform: translate(-50%, -50%) rotate(var(--loja-pack-orbit-tilt, 0deg)) scaleX(0.55);
}

.loja-pack-shield-orbit-top {
    top: 34%;
    --loja-pack-orbit-tilt: -9deg;
}

.loja-pack-shield-orbit-bottom {
    top: 67%;
    --loja-pack-orbit-tilt: 8deg;
}

.loja-pack-shield-light-core {
    top: -19%;
    bottom: -17%;
    width: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, #fff 18% 48%, #ffe47d 64%, transparent);
    box-shadow:
        0 0 20px #fff,
        0 0 46px rgba(255, 226, 111, 0.88),
        0 0 82px rgba(255, 202, 62, 0.48);
    mix-blend-mode: screen;
    transform: translateX(-50%) scaleY(0.55);
}

.loja-pack-cinematic-modal.is-playing .loja-pack-shield-stage {
    animation: lojaPackShieldStage 6.8s 4.55s linear forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-shield-spin {
    animation: lojaPackShieldSpin 6.8s 4.55s cubic-bezier(0.22, 0.62, 0.2, 1) forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-shield {
    animation: lojaPackPackShine 1.3s 9s ease-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-shield-orbit-top {
    animation: lojaPackOrbitTop 2.35s 8.2s ease-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-shield-orbit-bottom {
    animation: lojaPackOrbitBottom 2.35s 8.55s ease-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-shield-light-core {
    animation: lojaPackLightCore 1.65s 9s ease-out forwards;
}

.loja-pack-cinematic-flash {
    position: absolute;
    inset: 0;
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 52%, #fff 0 2%, rgba(255, 243, 187, 0.95) 5%, rgba(255, 218, 103, 0.35) 14%, transparent 36%);
    mix-blend-mode: screen;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-cinematic-flash {
    animation: lojaPackFlash 1.55s 10.8s ease-out forwards;
}

.loja-pack-speed-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 12;
    width: min(116vw, 620px);
    height: min(52vh, 430px);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.loja-pack-speed-lines i {
    --loja-pack-line-tilt: 0deg;
    --loja-pack-line-drift: 28deg;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 43%;
    border-radius: 50%;
    opacity: 0;
    background: conic-gradient(
        from 12deg,
        transparent 0 10%,
        rgba(255, 255, 255, 0.98) 13% 17%,
        rgba(255, 210, 83, 0.88) 19% 27%,
        transparent 30% 51%,
        rgba(255, 242, 185, 0.98) 55% 62%,
        transparent 66% 100%
    );
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px rgba(255, 204, 75, 0.95));
    -webkit-mask: radial-gradient(ellipse at center, transparent 0 61%, #000 62% 64%, transparent 65%);
    mask: radial-gradient(ellipse at center, transparent 0 61%, #000 62% 64%, transparent 65%);
    transform: translate(-50%, -50%) rotate(var(--loja-pack-line-tilt)) scale(0.58);
}

.loja-pack-speed-lines i:nth-child(1) { --loja-pack-line-tilt: -8deg; --loja-pack-line-drift: 26deg; }
.loja-pack-speed-lines i:nth-child(2) { --loja-pack-line-tilt: 7deg; --loja-pack-line-drift: -22deg; width: 91%; height: 35%; }
.loja-pack-speed-lines i:nth-child(3) { --loja-pack-line-tilt: 88deg; --loja-pack-line-drift: 18deg; width: 66%; height: 32%; }

.loja-pack-cinematic-modal.is-playing .loja-pack-speed-lines i {
    animation: lojaPackEnergyOrbit 3.2s 10.75s ease-in-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-speed-lines i:nth-child(2) { animation-delay: 10.9s; }
.loja-pack-cinematic-modal.is-playing .loja-pack-speed-lines i:nth-child(3) { animation-delay: 11.05s; }

.loja-pack-doors {
    --loja-pack-door-highlight: #8fc4c7;
    --loja-pack-door-edge: #397b82;
    --loja-pack-door-deep: #102c31;
    --loja-pack-door-center: #153b42;
    --loja-pack-door-mid: #265d65;
    --loja-pack-door-border: rgba(126, 196, 201, 0.76);
    --loja-pack-door-glow: rgba(54, 139, 146, 0.34);
    --loja-pack-door-sheen: rgba(205, 239, 240, 0.32);
    position: absolute;
    top: 19%;
    left: 50%;
    z-index: 8;
    width: calc(100% + 12px);
    height: min(62vh, 640px);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

.loja-pack-card-rarity-raro .loja-pack-doors {
    --loja-pack-door-highlight: #91bfe9;
    --loja-pack-door-edge: #356fae;
    --loja-pack-door-deep: #102845;
    --loja-pack-door-center: #17365c;
    --loja-pack-door-mid: #285486;
    --loja-pack-door-border: rgba(126, 181, 233, 0.8);
    --loja-pack-door-glow: rgba(55, 119, 183, 0.38);
    --loja-pack-door-sheen: rgba(208, 231, 252, 0.34);
}

.loja-pack-card-rarity-epico .loja-pack-doors {
    --loja-pack-door-highlight: #d5a08b;
    --loja-pack-door-edge: #a85349;
    --loja-pack-door-deep: #35171b;
    --loja-pack-door-center: #4d2025;
    --loja-pack-door-mid: #78332f;
    --loja-pack-door-border: rgba(220, 140, 119, 0.82);
    --loja-pack-door-glow: rgba(173, 75, 64, 0.38);
    --loja-pack-door-sheen: rgba(250, 220, 205, 0.34);
}

.loja-pack-card-rarity-lendario .loja-pack-doors {
    --loja-pack-door-highlight: #e2c47d;
    --loja-pack-door-edge: #ad8138;
    --loja-pack-door-deep: #30250f;
    --loja-pack-door-center: #453515;
    --loja-pack-door-mid: #6a5020;
    --loja-pack-door-border: rgba(231, 191, 103, 0.84);
    --loja-pack-door-glow: rgba(194, 142, 50, 0.4);
    --loja-pack-door-sheen: rgba(255, 237, 190, 0.36);
}

.loja-pack-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 29%;
    backface-visibility: hidden;
    clip-path: inset(0 0 0 0);
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}

.loja-pack-door-fabric {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border: 1px solid var(--loja-pack-door-border);
    background:
        repeating-linear-gradient(100deg,
            rgba(255, 255, 255, 0.13) 0 3%,
            transparent 8% 15%,
            rgba(0, 0, 0, 0.2) 20%,
            transparent 27% 34%),
        linear-gradient(110deg,
            var(--loja-pack-door-highlight) 0 5%,
            var(--loja-pack-door-deep) 7%,
            var(--loja-pack-door-edge) 9%,
            var(--loja-pack-door-center) 38%,
            var(--loja-pack-door-mid) 75%,
            var(--loja-pack-door-edge) 97%);
    background-size: 84px 100%, 180% 100%;
    box-shadow:
        inset 0 0 24px #000,
        0 0 20px rgba(0, 0, 0, 0.8),
        0 0 22px var(--loja-pack-door-glow);
    backface-visibility: hidden;
    will-change: transform;
}

.loja-pack-door-fabric::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 26%, var(--loja-pack-door-sheen) 40%, transparent 47%);
    transform: translateX(-130%);
}

.loja-pack-door-left {
    left: 0;
}

.loja-pack-door-right {
    right: 0;
}

.loja-pack-door-left .loja-pack-door-fabric {
    transform-origin: 0 50%;
}

.loja-pack-door-right .loja-pack-door-fabric {
    transform-origin: 100% 50%;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-left .loja-pack-door-fabric {
    animation: lojaPackDoorFabricLeft 5.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-right .loja-pack-door-fabric {
    animation: lojaPackDoorFabricRight 6.1s -2.3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.loja-pack-door-fabric::after {
    content: "";
    position: absolute;
    inset: -4% -18%;
    pointer-events: none;
    opacity: 0.38;
    background: linear-gradient(100deg,
        transparent 8%,
        rgba(255, 255, 255, 0.2) 24%,
        rgba(0, 0, 0, 0.16) 39%,
        transparent 54%,
        rgba(255, 255, 255, 0.14) 72%,
        transparent 90%);
    transform: translateX(-7%) skewX(-2deg);
    will-change: transform, opacity;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-fabric::after {
    animation: lojaPackFabricFolds 5.2s ease-in-out infinite;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-right .loja-pack-door-fabric::after {
    animation-delay: -2.6s;
}

.loja-pack-door-roll {
    position: absolute;
    top: 0;
    right: -3px;
    left: -3px;
    z-index: 3;
    height: 14px;
    border: 1px solid var(--loja-pack-door-border);
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(180deg,
        var(--loja-pack-door-highlight),
        var(--loja-pack-door-edge) 45%,
        var(--loja-pack-door-deep) 78%,
        var(--loja-pack-door-highlight));
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.56),
        0 0 12px var(--loja-pack-door-glow);
}

.loja-pack-cinematic-modal.is-playing .loja-pack-doors {
    animation: lojaPackDoorsAppear 0.35s 11.4s forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-left {
    animation: lojaPackDoorLeft 2.6s 11.47s cubic-bezier(0.18, 0.76, 0.18, 1) forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-right {
    animation: lojaPackDoorRight 2.6s 11.47s cubic-bezier(0.18, 0.76, 0.18, 1) forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-roll {
    animation: lojaPackDoorRoll 2.6s 11.47s cubic-bezier(0.18, 0.76, 0.18, 1) forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-door-fabric::before {
    animation: lojaPackDoorShine 1.35s 11.53s ease-out;
}

.loja-pack-card-stage {
    position: absolute;
    top: 48.5%;
    left: 50%;
    z-index: 14;
    width: min(67vw, 285px);
    aspect-ratio: 2 / 3;
    opacity: 0;
    pointer-events: none;
    perspective: 1000px;
    transform: translate(-50%, -50%);
    transition: top 0.48s ease, width 0.48s ease;
}

.loja-pack-card-wrap,
.loja-pack-card-visual,
.loja-pack-card-visual .player-card-module,
.loja-pack-card-visual .player-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.loja-pack-card-wrap {
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.78));
    transform-style: preserve-3d;
    will-change: transform;
}

.loja-pack-card-visual {
    z-index: 6;
    opacity: 0;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-card-visual .player-card > * {
    opacity: 0;
}

.loja-pack-card-visual .player-card {
    max-width: none;
    aspect-ratio: 2 / 3;
    filter: none;
}

.loja-pack-card-visual .player-card-photo.player-card-photo-has-image {
    clip-path: none;
    overflow: visible;
}

.loja-pack-card-glow {
    position: absolute;
    inset: -14%;
    opacity: 0;
    background: radial-gradient(ellipse, #ffd970 0, rgba(255, 210, 90, 0.42) 17%, rgba(183, 36, 46, 0.15) 38%, transparent 70%);
    filter: blur(18px);
}

.loja-pack-card-silhouette {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 1;
    filter: brightness(0.26) saturate(0.4) drop-shadow(0 0 12px rgba(238, 246, 255, 0.72));
}

.loja-pack-card-silhouette img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loja-pack-card-scan {
    position: absolute;
    inset: 0;
    z-index: 7;
    opacity: 0;
    background: linear-gradient(180deg, transparent 0 40%, rgba(255, 245, 196, 0.95) 49%, transparent 58%);
    mix-blend-mode: screen;
    -webkit-mask: url("../img/cards/prata.png") center / contain no-repeat;
    mask: url("../img/cards/prata.png") center / contain no-repeat;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-card-stage {
    animation: lojaPackCardIn 1.2s 12.43s cubic-bezier(0.12, 0.78, 0.16, 1) forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-card-glow {
    animation: lojaPackCardGlow 4.6s 12.25s ease-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-card-scan {
    animation: lojaPackCardScan 2.9s 13.35s ease-in-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-card-silhouette {
    animation: lojaPackSilhouetteOut 0.76s 16.6s ease-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-card-visual {
    animation: lojaPackFinalCard 0.62s 12.85s ease-out forwards;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-card-wrap {
    animation: lojaPackCardFloat 3.4s 16.8s ease-in-out infinite alternate;
}

.loja-pack-cinematic-modal.is-finished .loja-pack-card-wrap {
    animation: lojaPackCardFloat 3.4s ease-in-out infinite alternate;
}

.loja-pack-rarity-reveal {
    position: absolute;
    top: 18.5%;
    left: 50%;
    z-index: 19;
    display: grid;
    min-width: 126px;
    justify-items: center;
    gap: 0.1rem;
    border: 1px solid var(--loja-pack-rarity-border, rgba(255, 255, 255, 0.58));
    border-radius: 999px;
    padding: 0.48rem 1.05rem 0.52rem;
    opacity: 0;
    color: var(--loja-pack-rarity-text, #fff);
    background: linear-gradient(135deg, var(--loja-pack-rarity-bg, rgba(58, 68, 86, 0.93)), rgba(4, 8, 18, 0.92));
    box-shadow: 0 0 18px var(--loja-pack-rarity-glow, rgba(255, 255, 255, 0.24));
    text-shadow: 0 0 15px var(--loja-pack-rarity-glow, rgba(255, 255, 255, 0.45));
    text-transform: uppercase;
    transform: translateX(-50%);
}

.loja-pack-rarity-reveal span {
    opacity: 0.72;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.loja-pack-rarity-reveal strong {
    font-size: clamp(0.78rem, 3.4vw, 1rem);
    font-weight: 950;
    letter-spacing: 0.12em;
}

.loja-pack-rarity-comum,
.loja-pack-rarity-raro {
    --loja-pack-rarity-text: #f2f6fb;
    --loja-pack-rarity-border: rgba(210, 223, 238, 0.78);
    --loja-pack-rarity-bg: rgba(91, 107, 127, 0.94);
    --loja-pack-rarity-glow: rgba(198, 218, 239, 0.58);
}

.loja-pack-rarity-epico {
    --loja-pack-rarity-text: #f2dcff;
    --loja-pack-rarity-border: rgba(211, 132, 255, 0.88);
    --loja-pack-rarity-bg: rgba(109, 38, 148, 0.95);
    --loja-pack-rarity-glow: rgba(196, 91, 255, 0.72);
}

.loja-pack-rarity-lendario {
    --loja-pack-rarity-text: #fff2b0;
    --loja-pack-rarity-border: rgba(255, 210, 64, 0.95);
    --loja-pack-rarity-bg: rgba(143, 85, 3, 0.96);
    --loja-pack-rarity-glow: rgba(255, 186, 35, 0.82);
}

.loja-pack-side-spark {
    position: absolute;
    top: 43%;
    z-index: 9;
    width: 38vw;
    max-width: 260px;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, #fff7cd, #e9b746, transparent);
    box-shadow: 0 0 9px #fff, 0 0 24px #facd5f;
}

.loja-pack-side-spark-left { right: 51%; --loja-pack-spark-rotate: -15deg; }
.loja-pack-side-spark-right { left: 51%; --loja-pack-spark-rotate: 15deg; }

.loja-pack-cinematic-modal.is-playing .loja-pack-side-spark {
    animation: lojaPackSideSpark 1.85s 11.37s ease-out forwards;
}

/* A Web Animations API conduz os movimentos principais para evitar que
   preferencias globais ou CSS antigo do PWA eliminem a coreografia. */
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-beam,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-shield-stage,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-shield-spin,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-cinematic-flash,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-doors,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-door-left,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-door-right,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-card-stage,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-card-glow,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-card-silhouette,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-card-visual,
.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-rarity-reveal {
    animation: none !important;
}

.loja-pack-cinematic-modal.is-script-animated.is-playing .loja-pack-opening-package {
    animation: none !important;
}

.loja-pack-fx {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.loja-pack-start-ui {
    position: absolute;
    right: 0;
    bottom: max(7vh, 32px);
    left: 0;
    z-index: 31;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.62rem;
    padding-inline: 16px;
    transition: 0.35s ease;
}

.loja-pack-start-btn,
.loja-pack-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    border-radius: 999px;
    padding: 0.86rem 1.35rem;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.loja-pack-start-btn {
    border: 1px solid rgba(255, 229, 157, 0.7);
    color: #1b1204;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff1b9, #d5a943);
    box-shadow: 0 5px 0 #79530d, 0 11px 35px rgba(255, 194, 72, 0.27);
}

.loja-pack-start-btn:active {
    box-shadow: 0 2px 0 #79530d, 0 7px 24px rgba(255, 194, 72, 0.22);
    transform: translateY(3px);
}

.loja-pack-start-btn svg,
.loja-pack-action svg { width: 18px; height: 18px; }

.loja-pack-start-btn:disabled {
    cursor: wait;
    opacity: 0.62;
}

.loja-pack-cinematic-modal.is-playing .loja-pack-start-ui,
.loja-pack-cinematic-modal.is-finished .loja-pack-start-ui {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.loja-pack-skip {
    position: absolute;
    top: calc(max(16px, env(safe-area-inset-top)) + 4px);
    right: 14px;
    z-index: 45;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.48rem 0.72rem;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(2, 4, 10, 0.54);
    backdrop-filter: blur(8px);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
}

.loja-pack-end-ui {
    position: absolute;
    right: 14px;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 14px;
    z-index: 35;
    display: grid;
    max-height: 43vh;
    justify-items: center;
    gap: 0.55rem;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px);
    transition: 0.45s ease;
}

.loja-pack-cinematic-modal.is-finished .loja-pack-end-ui {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.loja-pack-cinematic-modal.is-finished .loja-pack-card-stage {
    top: 34%;
    width: min(46vw, 218px);
    opacity: 1;
}

.loja-pack-cinematic-modal.is-finished .loja-pack-card-visual { opacity: 1; }
.loja-pack-cinematic-modal.is-finished .loja-pack-card-silhouette,
.loja-pack-cinematic-modal.is-finished .loja-pack-card-scan { display: none; }

/* Conserva os estandartes abertos durante toda a tela de resultado,
   inclusive quando a animacao e pulada antes de terminarem de desenrolar. */
.loja-pack-cinematic-modal.is-finished .loja-pack-doors {
    display: block;
    opacity: 1;
}

.loja-pack-cinematic-modal.is-finished .loja-pack-door-left {
    opacity: 0.96;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) rotateZ(0) scale(1);
}

.loja-pack-cinematic-modal.is-finished .loja-pack-door-right {
    opacity: 0.96;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) rotateZ(0) scale(1);
}

.loja-pack-cinematic-modal.is-finished .loja-pack-door-roll { display: none; }

.loja-pack-result-copy {
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}

.loja-pack-result-copy span {
    color: #f7da82;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.loja-pack-result-copy h2 {
    margin: 0.08rem 0;
    color: #fff;
    font-family: var(--fonte-display);
    font-size: clamp(1.25rem, 5vw, 1.8rem);
    line-height: 1.05;
}

.loja-pack-result-copy strong {
    color: #f7e7b1;
    font-size: 0.82rem;
}

.loja-pack-duplicate {
    display: grid;
    width: min(360px, 100%);
    gap: 0.12rem;
    border: 1px solid rgba(247, 218, 130, 0.28);
    border-radius: 14px;
    padding: 0.55rem 0.75rem;
    text-align: center;
    background: rgba(7, 9, 19, 0.78);
    backdrop-filter: blur(9px);
}

.loja-pack-duplicate strong { color: #f7da82; font-size: 0.82rem; }
.loja-pack-duplicate span { color: #fff; font-size: 0.76rem; }
.loja-pack-duplicate small { color: rgba(255, 255, 255, 0.7); font-size: 0.68rem; }

.loja-pack-actions {
    display: grid;
    width: min(340px, 100%);
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 0.55rem;
}

.loja-pack-equip-form { display: grid; margin: 0; }
.loja-pack-action { width: 100%; min-height: 44px; border-radius: 14px; padding: 0.7rem 0.9rem; }
.loja-pack-action-primary { border: 0; color: #1b1204; background: linear-gradient(180deg, #fff1b9, #d5a943); }
.loja-pack-action-secondary { border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; background: rgba(7, 9, 19, 0.86); }

.loja-pack-vignette {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 24%, transparent 70%, rgba(0, 0, 0, 0.5));
    box-shadow: inset 0 0 13vw rgba(0, 0, 0, 0.9);
}

@keyframes lojaPackBeamPulse { to { opacity: 0.3; filter: blur(4px); } }
@keyframes lojaPackPackageIdle {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter:
            drop-shadow(0 24px 22px rgba(0, 0, 0, 0.62))
            drop-shadow(0 0 20px var(--loja-pacote-glow));
    }
    50% {
        transform: translateY(-5px) scale(1.025);
        filter:
            drop-shadow(0 28px 24px rgba(0, 0, 0, 0.56))
            drop-shadow(0 0 32px var(--loja-pacote-glow));
    }
}
@keyframes lojaPackPackageIdlePerformance {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.025); }
}
@keyframes lojaPackPackageOpening {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); filter: brightness(1); }
    24% { transform: translate(-50%, -53%) scale(1.035) rotate(-0.8deg); }
    48% { transform: translate(-50%, -55%) scale(1.075) rotate(0.7deg); }
    68% { opacity: 1; transform: translate(-50%, -57%) scale(1.14) rotate(-0.45deg); filter: brightness(1.35); }
    84% { opacity: 0.92; transform: translate(-50%, -58%) scale(1.25) rotate(0.25deg); filter: brightness(2.25); }
    100% { opacity: 0; transform: translate(-50%, -58%) scale(1.48); filter: brightness(4) blur(4px); }
}
@keyframes lojaPackShieldStage {
    0% { opacity: 0; transform: translate(-50%, -176%) scale(0.68) translateZ(-150px); }
    8% { opacity: 0.82; }
    20% { opacity: 1; transform: translate(-50%, -158%) scale(0.74) translateZ(-110px); animation-timing-function: cubic-bezier(0.55, 0.06, 0.82, 0.28); }
    48% { opacity: 1; transform: translate(-50%, -43%) scale(1.055, 0.94) translateZ(8px); animation-timing-function: cubic-bezier(0.18, 0.84, 0.24, 1); }
    55% { opacity: 1; transform: translate(-50%, -58%) scale(0.98, 1.035) translateZ(2px); animation-timing-function: cubic-bezier(0.2, 0.72, 0.25, 1); }
    62% { opacity: 1; transform: translate(-50%, -49%) scale(1.012, 0.99); animation-timing-function: ease-out; }
    69%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) translateZ(70px); }
}
@keyframes lojaPackShieldSpin {
    0% { transform: rotateY(0) rotateX(14deg) rotateZ(-6deg); }
    24% { transform: rotateY(270deg) rotateX(9deg) rotateZ(3deg); }
    45% { transform: rotateY(590deg) rotateX(-6deg) rotateZ(-2deg); }
    55% { transform: rotateY(690deg) rotateX(3deg) rotateZ(1deg); }
    69%, 100% { transform: rotateY(720deg) rotateX(0) rotateZ(0); }
}
@keyframes lojaPackShineSweep { to { background-position: 210px 0, 0 0, 0 0; } }
@keyframes lojaPackPackShine {
    0% { background-position: -220px 0, 0 0; }
    42% { filter: drop-shadow(0 25px 23px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 42px var(--loja-pacote-glow)); }
    100% { background-position: 230px 0, 0 0; filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 30px var(--loja-pacote-glow)); }
}
@keyframes lojaPackOrbitTop {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scaleX(0.28) translateY(12px); }
    28% { opacity: 1; }
    82% { opacity: 0.92; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scaleX(1.06) translateY(-8px); }
}
@keyframes lojaPackOrbitBottom {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(14deg) scaleX(0.24) translateY(-12px); }
    26% { opacity: 0.95; }
    82% { opacity: 0.82; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(5deg) scaleX(1.02) translateY(9px); }
}
@keyframes lojaPackLightCore {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.42); filter: blur(3px); }
    22% { opacity: 0.92; }
    48% { opacity: 1; transform: translateX(-50%) scaleY(1); filter: blur(0); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1.12); filter: blur(6px); }
}
@keyframes lojaPackFlash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    40% { opacity: 0.9; }
    100% { opacity: 0; }
}
@keyframes lojaPackDoorsAppear { to { opacity: 1; } }
@keyframes lojaPackDoorLeft {
    0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-15%) rotateZ(-1.6deg) scale(0.96); }
    10% { opacity: 1; }
    72% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(2%) rotateZ(0.45deg) scale(1.01); }
    86% { opacity: 0.96; transform: translateY(-1%) rotateZ(-0.2deg) scale(0.995); }
    100% { opacity: 0.96; clip-path: inset(0 0 0 0); transform: translateY(0) rotateZ(0) scale(1); }
}
@keyframes lojaPackDoorRight {
    0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-15%) rotateZ(1.6deg) scale(0.96); }
    10% { opacity: 1; }
    72% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(2%) rotateZ(-0.45deg) scale(1.01); }
    86% { opacity: 0.96; transform: translateY(-1%) rotateZ(0.2deg) scale(0.995); }
    100% { opacity: 0.96; clip-path: inset(0 0 0 0); transform: translateY(0) rotateZ(0) scale(1); }
}
@keyframes lojaPackDoorRoll {
    0% { top: 0; opacity: 0; transform: scaleX(0.86) rotate(0); }
    10% { opacity: 1; }
    72% { top: calc(100% - 14px); opacity: 1; transform: scaleX(1.02) rotate(1.5deg); }
    88% { top: calc(100% - 14px); opacity: 0.9; transform: scaleX(0.98) rotate(-0.5deg); }
    100% { top: calc(100% - 14px); opacity: 0; transform: scaleX(1); }
}
@keyframes lojaPackDoorShine { to { transform: translateX(160%); } }
@keyframes lojaPackDoorFabricLeft {
    0%, 100% {
        clip-path: polygon(0 0, 100% 3%, 96% 25%, 100% 50%, 95% 75%, 100% 97%, 0 100%);
        filter: brightness(0.98) saturate(1.08);
        background-position: 0 0, 0% 0;
        transform: perspective(520px) rotateY(-3deg) scaleX(0.98) skewY(-0.4deg);
    }
    25% {
        clip-path: polygon(0 0, 95% 4%, 100% 26%, 96% 49%, 100% 74%, 96% 96%, 0 100%);
        filter: brightness(1.05) saturate(1.12);
        background-position: 13px 0, 8% 0;
        transform: perspective(520px) rotateY(3.5deg) scaleX(1.01) skewY(0.7deg);
    }
    50% {
        clip-path: polygon(0 0, 99% 2%, 94% 24%, 100% 51%, 96% 76%, 99% 98%, 0 100%);
        filter: brightness(0.96) saturate(1.1);
        background-position: -8px 0, -5% 0;
        transform: perspective(520px) rotateY(-1.5deg) scaleX(0.99) skewY(-0.3deg);
    }
    75% {
        clip-path: polygon(0 0, 94% 4%, 100% 25%, 95% 50%, 100% 75%, 97% 96%, 0 100%);
        filter: brightness(1.06) saturate(1.13);
        background-position: 17px 0, 10% 0;
        transform: perspective(520px) rotateY(4deg) scaleX(1.015) skewY(0.8deg);
    }
}
@keyframes lojaPackDoorFabricRight {
    0%, 100% {
        clip-path: polygon(0 3%, 4% 25%, 0 50%, 5% 75%, 0 97%, 100% 100%, 100% 0);
        filter: brightness(0.98) saturate(1.08);
        background-position: 0 0, 0% 0;
        transform: perspective(520px) rotateY(3deg) scaleX(0.98) skewY(0.4deg);
    }
    25% {
        clip-path: polygon(5% 4%, 0 26%, 4% 49%, 0 74%, 4% 96%, 100% 100%, 100% 0);
        filter: brightness(1.05) saturate(1.12);
        background-position: -13px 0, -8% 0;
        transform: perspective(520px) rotateY(-3.5deg) scaleX(1.01) skewY(-0.7deg);
    }
    50% {
        clip-path: polygon(1% 2%, 6% 24%, 0 51%, 4% 76%, 1% 98%, 100% 100%, 100% 0);
        filter: brightness(0.96) saturate(1.1);
        background-position: 8px 0, 5% 0;
        transform: perspective(520px) rotateY(1.5deg) scaleX(0.99) skewY(0.3deg);
    }
    75% {
        clip-path: polygon(6% 4%, 0 25%, 5% 50%, 0 75%, 3% 96%, 100% 100%, 100% 0);
        filter: brightness(1.06) saturate(1.13);
        background-position: -17px 0, -10% 0;
        transform: perspective(520px) rotateY(-4deg) scaleX(1.015) skewY(-0.8deg);
    }
}
@keyframes lojaPackFabricFolds {
    0%, 100% { opacity: 0.3; transform: translateX(-7%) skewX(-2deg) scaleX(0.98); }
    25% { opacity: 0.48; transform: translateX(4%) skewX(1.4deg) scaleX(1.02); }
    50% { opacity: 0.34; transform: translateX(9%) skewX(2deg) scaleX(0.99); }
    75% { opacity: 0.45; transform: translateX(-2%) skewX(-1deg) scaleX(1.015); }
}
@keyframes lojaPackDoorFabricLeftMobile {
    0%, 100% { transform: perspective(420px) rotateY(-4deg) scaleX(0.97) skewY(-0.6deg); }
    25% { transform: perspective(420px) rotateY(3deg) scaleX(1.01) skewY(0.8deg); }
    50% { transform: perspective(420px) rotateY(-2deg) scaleX(0.985) skewY(-0.35deg); }
    75% { transform: perspective(420px) rotateY(4deg) scaleX(1.015) skewY(0.9deg); }
}
@keyframes lojaPackDoorFabricRightMobile {
    0%, 100% { transform: perspective(420px) rotateY(4deg) scaleX(0.97) skewY(0.6deg); }
    25% { transform: perspective(420px) rotateY(-3deg) scaleX(1.01) skewY(-0.8deg); }
    50% { transform: perspective(420px) rotateY(2deg) scaleX(0.985) skewY(0.35deg); }
    75% { transform: perspective(420px) rotateY(-4deg) scaleX(1.015) skewY(-0.9deg); }
}
@keyframes lojaPackEnergyOrbit {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--loja-pack-line-tilt)) scale(0.58); }
    18% { opacity: 0.92; }
    68% { opacity: 0.78; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--loja-pack-line-tilt) + var(--loja-pack-line-drift))) scale(1.02); }
}
@keyframes lojaPackCardIn {
    0% { opacity: 0; transform: translate(-50%, -41%) scale(0.64) rotateY(38deg) rotateX(-10deg); }
    58% { opacity: 1; transform: translate(-50%, -52%) scale(1.025) rotateY(-5deg) rotateX(2deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes lojaPackCardGlow {
    0% { opacity: 0; transform: scale(0.7); }
    20% { opacity: 1; }
    100% { opacity: 0.48; transform: scale(1.13); }
}
@keyframes lojaPackCardScan {
    0% { opacity: 0; transform: translateY(-38%); }
    14%, 24%, 48%, 58%, 82% { opacity: 0.9; }
    20%, 52%, 88%, 100% { opacity: 0; transform: translateY(42%); }
}
@keyframes lojaPackSilhouetteOut { to { opacity: 0; filter: brightness(2.4) blur(5px); } }
@keyframes lojaPackFinalCard {
    0% { opacity: 0; filter: brightness(3.5) blur(3px); transform: scale(1.04); }
    55% { opacity: 1; filter: brightness(1.8) blur(1px); }
    100% { opacity: 1; filter: none; transform: scale(1); }
}
@keyframes lojaPackCardFloat { to { transform: translateY(-5px) rotateX(1.5deg); } }
@keyframes lojaPackSideSpark {
    0% { opacity: 0; transform: scaleX(0.1) rotate(var(--loja-pack-spark-rotate)); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: scaleX(1.2) rotate(var(--loja-pack-spark-rotate)); }
}

@media (max-height: 650px) {
    .loja-pack-card-stage { top: 47%; width: min(48vw, 220px); }
    .loja-pack-doors { height: 66vh; }
    .loja-pack-rarity-reveal { top: 17%; padding-block: 0.38rem 0.42rem; }
    .loja-pack-start-btn { padding: 0.72rem 1.1rem; }
    .loja-pack-cinematic-modal.is-finished .loja-pack-card-stage { top: 30%; width: min(37vw, 170px); }
    .loja-pack-end-ui { max-height: 48vh; }
}

@media (max-width: 520px) {
    .loja-pack-cinematic-arena { max-width: none; }
    .loja-pack-cinematic-status { right: 18px; left: 18px; }

    /* No celular, a bandeira usa somente transformacoes compostas pela GPU.
       Evita recalcular clip-path, filtros e sombras grandes a cada frame. */
    .loja-pack-door-fabric {
        filter: none !important;
        box-shadow:
            inset 0 0 14px rgba(0, 0, 0, 0.78),
            0 0 10px var(--loja-pack-door-glow);
        will-change: transform;
    }

    .loja-pack-cinematic-modal.is-playing .loja-pack-door-left .loja-pack-door-fabric {
        clip-path: polygon(0 0, 100% 3%, 93% 28%, 100% 52%, 92% 76%, 100% 97%, 0 100%);
        transform-origin: 0 50%;
        animation-name: lojaPackDoorFabricLeftMobile;
        animation-duration: 5.2s;
    }

    .loja-pack-cinematic-modal.is-playing .loja-pack-door-right .loja-pack-door-fabric {
        clip-path: polygon(0 3%, 7% 28%, 0 52%, 8% 76%, 0 97%, 100% 100%, 100% 0);
        transform-origin: 100% 50%;
        animation-name: lojaPackDoorFabricRightMobile;
        animation-duration: 5.7s;
    }

    .loja-pack-beam,
    .loja-pack-shield-light-core {
        filter: none !important;
    }

    .loja-pack-shield-orbit,
    .loja-pack-speed-lines i {
        filter: drop-shadow(0 0 6px rgba(255, 218, 105, 0.62));
    }
}

/* Android WebView e dispositivos de toque: preserva a coreografia, mas evita
   filtros e recortes grandes nas camadas que se movem a cada quadro. */
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-opening-package .loja-pacote-pack {
    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.58));
    animation-name: lojaPackPackageIdlePerformance;
    will-change: transform;
}

.loja-pack-cinematic-modal.is-performance-mode .loja-pack-shield.loja-pacote-pack,
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-box-back.loja-pacote-pack,
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-ground-glow,
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-card-glow,
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-beam,
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-shield-light-core,
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-shield-orbit,
.loja-pack-cinematic-modal.is-performance-mode .loja-pack-speed-lines i {
    filter: none !important;
}

.loja-pack-cinematic-modal.is-performance-mode .loja-pack-ground-glow {
    opacity: 0.48;
    transform: translateX(-50%) scale(1.12);
}

.loja-pack-cinematic-modal.is-performance-mode .loja-pack-door-fabric {
    filter: none !important;
    box-shadow:
        inset 0 0 14px rgba(0, 0, 0, 0.78),
        0 0 10px var(--loja-pack-door-glow);
}

.loja-pack-cinematic-modal.is-performance-mode.is-playing .loja-pack-door-left .loja-pack-door-fabric {
    animation-name: lojaPackDoorFabricLeftMobile;
    animation-duration: 5.2s;
}

.loja-pack-cinematic-modal.is-performance-mode.is-playing .loja-pack-door-right .loja-pack-door-fabric {
    animation-name: lojaPackDoorFabricRightMobile;
    animation-duration: 5.7s;
}

/* Esta experiencia possui controle proprio para pular a sequencia. Mantem a
   coreografia mesmo quando a regra global do app reduz outras animacoes. */
@media (prefers-reduced-motion: reduce) {
    .loja-pack-cinematic-modal.is-playing .loja-pack-beam { animation-duration: 1.1s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-shield-stage,
    .loja-pack-cinematic-modal.is-playing .loja-pack-shield-spin { animation-duration: 6.8s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-shield { animation-duration: 1.1s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-shield-orbit-top,
    .loja-pack-cinematic-modal.is-playing .loja-pack-shield-orbit-bottom { animation-duration: 2.35s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-shield-light-core { animation-duration: 1.65s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-cinematic-flash { animation-duration: 1.55s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-speed-lines i { animation-duration: 3.2s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-doors { animation-duration: 0.35s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-door-left,
    .loja-pack-cinematic-modal.is-playing .loja-pack-door-right,
    .loja-pack-cinematic-modal.is-playing .loja-pack-door-roll { animation-duration: 2.6s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-door-fabric::before { animation-duration: 1.35s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-door-left .loja-pack-door-fabric { animation-duration: 5.6s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-door-right .loja-pack-door-fabric { animation-duration: 6.1s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-card-stage { animation-duration: 1.2s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-card-glow { animation-duration: 4.6s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-card-scan { animation-duration: 2.9s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-card-silhouette { animation-duration: 0.76s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-card-visual { animation-duration: 0.62s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-card-wrap,
    .loja-pack-cinematic-modal.is-finished .loja-pack-card-wrap { animation-duration: 3.4s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-rarity-reveal { animation-duration: 3.3s !important; }
    .loja-pack-cinematic-modal.is-playing .loja-pack-side-spark { animation-duration: 1.85s !important; }
}

.overall-reveal-modal.is-closing {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.overall-reveal-arena {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 208, 94, 0.2), transparent 28%),
        radial-gradient(circle at 50% 55%, rgba(42, 163, 108, 0.16), transparent 44%),
        radial-gradient(circle at 18% 16%, rgba(110, 91, 224, 0.24), transparent 36%),
        linear-gradient(180deg, #090611, #020106);
}

.overall-reveal-status {
    position: absolute;
    top: calc(max(18px, env(safe-area-inset-top)) + 34px);
    right: 24px;
    left: 24px;
    z-index: 15;
    color: #ded5ff;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: center;
}

.overall-reveal-particles,
.overall-reveal-burst,
.overall-reveal-flash {
    position: absolute;
    pointer-events: none;
}

.overall-reveal-particles {
    inset: 0;
    opacity: 0.86;
    background-image:
        radial-gradient(circle, rgba(255, 208, 94, 0.92) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(42, 163, 108, 0.78) 0 1.5px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px);
    background-position: 10px 20px, 40px 70px, 80px 30px;
    background-size: 90px 90px, 130px 130px, 70px 70px;
    animation: overallRevealParticles 4s linear infinite;
}

.overall-reveal-burst {
    width: 760px;
    height: 760px;
    border-radius: 50%;
    opacity: 0;
    filter: blur(1px);
    background: conic-gradient(
        from 0deg,
        transparent 0deg 6deg,
        rgba(255, 229, 128, 0.5) 7deg 10deg,
        transparent 11deg 22deg,
        rgba(42, 163, 108, 0.28) 23deg 27deg,
        transparent 28deg 42deg,
        rgba(110, 91, 224, 0.34) 43deg 47deg,
        transparent 48deg 60deg
    );
    animation: overallRevealSpin 5s linear infinite;
}

.overall-reveal-modal.is-opening .overall-reveal-burst,
.overall-reveal-modal.is-revealed .overall-reveal-burst {
    opacity: 1;
}

.overall-reveal-flash {
    inset: 0;
    z-index: 8;
    background: #fff;
    opacity: 0;
}

.overall-reveal-modal.is-revealed .overall-reveal-flash {
    animation: overallRevealFlash 0.8s ease-out;
}

.overall-reveal-sealed {
    position: relative;
    z-index: 5;
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.overall-reveal-pack {
    position: relative;
    display: grid;
    width: 178px;
    height: 248px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 23px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 27%),
        linear-gradient(155deg, #6b45b8, #173f37 54%, #10091c);
    box-shadow:
        0 0 48px rgba(110, 91, 224, 0.62),
        0 22px 70px rgba(0, 0, 0, 0.65),
        inset 0 0 36px rgba(255, 255, 255, 0.08);
}

.overall-reveal-pack span {
    position: absolute;
    top: 24px;
    color: #f3edff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.overall-reveal-pack strong {
    display: grid;
    width: 88px;
    height: 88px;
    place-items: center;
    border-radius: 26px;
    background: linear-gradient(135deg, #ffe48d, #31c48d);
    box-shadow: 0 0 45px rgba(255, 208, 94, 0.68);
    color: #201705;
    clip-path: polygon(50% 0%, 92% 20%, 88% 70%, 50% 100%, 12% 70%, 8% 20%);
    font-family: var(--fonte-display);
    font-size: 1.55rem;
    font-weight: 900;
}

.loja-card-reveal-modal .overall-reveal-pack strong {
    font-size: 1.18rem;
    letter-spacing: 0;
}

.overall-reveal-open,
.overall-reveal-done {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--roxo), var(--verde));
    box-shadow: 0 12px 28px rgba(42, 163, 108, 0.28);
    color: #fff;
    cursor: pointer;
    font-weight: 900;
}

.overall-reveal-open {
    width: min(330px, calc(100vw - 40px));
    padding: 0.95rem 1.2rem;
}

.overall-reveal-done {
    width: min(280px, calc(100vw - 44px));
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
}

.loja-card-reveal-actions {
    display: grid;
    width: min(330px, calc(100vw - 44px));
    gap: 0.55rem;
    margin-top: 0.75rem;
    opacity: 0;
    animation: overallRevealFadeUp 0.45s ease 1.16s forwards;
}

.loja-card-reveal-equip-form {
    display: grid;
    margin: 0;
}

.loja-card-reveal-actions .overall-reveal-done {
    width: 100%;
    margin-top: 0;
}

.loja-card-reveal-continue {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(19, 24, 34, 0.78);
    box-shadow: none;
}

.overall-reveal-open svg {
    width: 18px;
    height: 18px;
}

.overall-reveal-modal.is-opening .overall-reveal-pack {
    animation: overallRevealPackOpening 2.2s ease-in-out forwards;
}

.overall-reveal-modal.is-opening .loja-pacote-pack-reveal {
    animation: overallRevealPackOpening 2.2s ease-in-out forwards;
}

.overall-reveal-modal.is-opening .overall-reveal-open,
.overall-reveal-modal.is-revealed .overall-reveal-sealed {
    opacity: 0;
    pointer-events: none;
}

.overall-reveal-card-wrap {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: none;
    align-content: center;
    justify-items: center;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 86px 18px 24px;
    perspective: 900px;
}

.overall-reveal-modal.is-revealed .overall-reveal-card-wrap {
    display: grid;
}

.overall-reveal-inline {
    position: relative;
    inset: auto;
    z-index: 1;
    min-height: 560px;
    margin-top: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: #030208;
}

.overall-reveal-inline .overall-reveal-arena {
    max-width: none;
    min-height: 560px;
    height: auto;
}

.overall-reveal-inline .overall-reveal-card-wrap {
    position: relative;
    inset: auto;
    min-height: 560px;
    padding: 30px 14px 24px;
    overflow: hidden;
}

.overall-reveal-inline .overall-reveal-card-stage .player-card {
    width: min(300px, 74vw);
}

.overall-reveal-card-head {
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    margin-bottom: 0.35rem;
    color: #fff;
    text-align: center;
}

.overall-reveal-card-head span {
    color: #ffe18a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.overall-reveal-card-head h2 {
    max-width: 330px;
    margin: 0;
    overflow: hidden;
    font-family: var(--fonte-display);
    font-size: clamp(1.35rem, 7vw, 2.1rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overall-reveal-card-stage {
    display: grid;
    justify-items: center;
}

.overall-reveal-card-stage .player-card {
    width: min(315px, 76vw, 37vh);
    width: min(315px, 76vw, 37dvh);
    opacity: 0;
    transform: translateY(80px) rotateY(78deg) scale(0.72);
    animation: overallRevealCardEntrance 1s cubic-bezier(0.16, 1.15, 0.24, 1) 0.16s forwards;
    filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.66));
}

.overall-reveal-change {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: -0.15rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(19, 24, 34, 0.78);
    color: #fff;
    font-family: var(--fonte-display);
    font-weight: 900;
    opacity: 0;
    animation: overallRevealFadeUp 0.45s ease 1s forwards;
}

.overall-reveal-change span {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: line-through;
}

.overall-reveal-change strong {
    color: #ffe18a;
    font-size: 1.3rem;
}

.overall-reveal-change svg {
    width: 18px;
    height: 18px;
    color: var(--verde);
}

.overall-reveal-share {
    display: grid;
    justify-items: center;
    width: min(330px, calc(100vw - 42px));
    gap: 0.48rem;
    margin-top: 0.58rem;
    color: #fff;
    text-align: center;
    opacity: 0;
    animation: overallRevealFadeUp 0.45s ease 1.08s forwards;
}

.overall-reveal-share > strong {
    color: #ffe18a;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
}

.overall-reveal-share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.5rem;
}

.overall-reveal-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    gap: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
}

.overall-reveal-share-facebook {
    background: #1877f2;
}

.overall-reveal-share-instagram {
    background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #515bd4);
}

.overall-reveal-share-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.overall-reveal-share-btn:disabled,
.overall-reveal-share-btn.is-disabled {
    cursor: default;
    opacity: 0.56;
}

.overall-reveal-share-status {
    min-height: 1rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
}

.overall-reveal-share-status[data-estado="ok"] {
    color: var(--verde);
}

.overall-reveal-share-status[data-estado="erro"] {
    color: #fca5a5;
}

.loja-card-reveal-change span {
    text-decoration: none;
}

.loja-card-reveal-change strong {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loja-card-reveal-result {
    display: grid;
    gap: 0.08rem;
}

.loja-card-reveal-result > span {
    color: var(--verde);
    font-family: var(--fonte-principal);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.loja-card-reveal-duplicate {
    display: grid;
    max-width: min(330px, calc(100vw - 42px));
    gap: 0.2rem;
    margin-top: 0.7rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(200, 151, 59, 0.22);
    border-radius: 14px;
    background: rgba(19, 24, 34, 0.78);
    color: #fff;
    text-align: center;
    opacity: 0;
    animation: overallRevealFadeUp 0.45s ease 1.08s forwards;
}

.loja-card-reveal-duplicate strong {
    color: var(--ouro);
    font-family: var(--fonte-display);
}

.loja-card-reveal-duplicate span,
.loja-card-reveal-duplicate small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    line-height: 1.3;
}

@keyframes overallRevealSpin {
    to { transform: rotate(360deg); }
}

@keyframes overallRevealParticles {
    from { background-position: 10px 20px, 40px 70px, 80px 30px; }
    to { background-position: 10px -70px, 40px -60px, 80px -40px; }
}

@keyframes overallRevealPackOpening {
    0% { transform: scale(1) rotate(0); filter: brightness(1); }
    10% { transform: scale(1.05) rotate(-8deg); }
    20% { transform: scale(1.07) rotate(9deg); }
    32% { transform: scale(1.1) rotate(-11deg); filter: brightness(1.2); }
    44% { transform: scale(1.14) rotate(12deg); filter: brightness(1.35); }
    56% { transform: scale(1.19) rotate(-14deg); filter: brightness(1.55); }
    68% { transform: scale(1.25) rotate(10deg); filter: brightness(1.9); }
    82% { transform: scale(1.38) rotate(0); filter: brightness(2.35); box-shadow: 0 0 96px rgba(255, 208, 94, 0.9); }
    100% { transform: scale(3.2); opacity: 0; filter: brightness(4); }
}

@keyframes overallRevealFlash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes overallRevealCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(90px) rotateY(78deg) scale(0.72);
        filter: blur(8px) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.66));
    }

    58% {
        opacity: 1;
        transform: translateY(-16px) rotateY(0) scale(1.06);
        filter: blur(0) drop-shadow(0 0 42px rgba(255, 208, 94, 0.58));
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateY(0) scale(1);
        filter: blur(0) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.66));
    }
}

@keyframes overallRevealFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .overall-reveal-particles,
    .overall-reveal-burst,
    .overall-reveal-modal.is-opening .overall-reveal-pack,
    .overall-reveal-modal.is-opening .loja-pacote-pack-reveal,
    .overall-reveal-card-stage .player-card,
    .overall-reveal-change,
    .overall-reveal-share,
    .loja-card-reveal-actions,
    .loja-card-reveal-duplicate {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 520px) {
    .overall-reveal-arena {
        max-width: none;
    }

    .overall-reveal-status {
        top: calc(max(16px, env(safe-area-inset-top)) + 22px);
        right: 20px;
        left: 20px;
        font-size: 0.92rem;
    }

    .overall-reveal-pack {
        width: min(218px, 62vw);
        height: min(304px, 86vw);
    }

    .overall-reveal-pack strong {
        width: min(96px, 27vw);
        height: min(96px, 27vw);
        font-size: clamp(1.3rem, 7vw, 1.7rem);
    }

    .overall-reveal-open,
    .overall-reveal-done {
        border-radius: 14px;
        font-size: 0.92rem;
        line-height: 1.1;
    }

    .overall-reveal-card-wrap {
        align-content: center;
        padding: 64px 12px max(16px, env(safe-area-inset-bottom));
    }

    .overall-reveal-card-head {
        gap: 0.12rem;
        margin-bottom: 0.2rem;
    }

    .overall-reveal-card-head h2 {
        max-width: calc(100vw - 42px);
        font-size: clamp(1.12rem, 6.2vw, 1.55rem);
    }

    .overall-reveal-card-stage .player-card {
        width: min(292px, 76vw, 36vh);
        width: min(292px, 76vw, 36dvh);
    }

    .overall-reveal-social-modal .overall-reveal-card-stage .player-card {
        width: min(270px, 72vw, 32vh);
        width: min(270px, 72vw, 32dvh);
    }

    .overall-reveal-change {
        margin-top: -0.35rem;
        padding: 0.46rem 0.72rem;
    }

    .overall-reveal-share {
        gap: 0.38rem;
        margin-top: 0.46rem;
    }

    .overall-reveal-share > strong {
        font-size: 0.76rem;
    }

    .overall-reveal-share-btn {
        min-height: 38px;
        border-radius: 12px;
        font-size: 0.82rem;
    }

    .overall-reveal-share-status {
        font-size: 0.68rem;
    }

    .overall-reveal-done {
        width: min(260px, calc(100vw - 36px));
        min-height: 44px;
        margin-top: 0.55rem;
        padding: 0.75rem 0.9rem;
    }
}

@media (max-width: 700px) and (max-height: 680px) {
    .overall-reveal-card-wrap {
        align-content: start;
        padding-top: 68px;
    }

    .overall-reveal-card-head span {
        font-size: 0.64rem;
    }

    .overall-reveal-card-head h2 {
        font-size: clamp(1rem, 5.7vw, 1.38rem);
    }

    .overall-reveal-card-stage .player-card {
        width: min(260px, 74vw, 35vh);
        width: min(260px, 74vw, 35dvh);
    }

    .overall-reveal-social-modal .overall-reveal-card-stage .player-card {
        width: min(230px, 68vw, 30vh);
        width: min(230px, 68vw, 30dvh);
    }

    .overall-reveal-change {
        font-size: 0.9rem;
    }

    .overall-reveal-change strong {
        font-size: 1.12rem;
    }

    .overall-reveal-social-modal .overall-reveal-done {
        min-height: 40px;
        margin-top: 0.4rem;
    }
}

.home-likes-winner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
}

.home-likes-winner svg {
    width: 18px;
    height: 18px;
    color: var(--verde);
    fill: currentColor;
}

.home-likes-winner div {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.home-likes-winner strong,
.home-likes-winner small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-likes-winner small {
    color: var(--texto-suave);
}

.home-last-winner-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid rgba(200, 151, 59, 0.16);
    border-radius: 16px;
    background: rgba(200, 151, 59, 0.06);
}

.home-last-winner-main > svg {
    width: 22px;
    height: 22px;
    color: var(--ouro);
    fill: currentColor;
}

.home-last-winner-main div {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.home-last-winner-main strong,
.home-last-winner-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-last-winner-main small {
    color: var(--texto-suave);
}

.home-winner-result-badge {
    justify-self: flex-start;
    padding: 0.18rem 0.42rem;
    border: 1px solid rgba(200, 151, 59, 0.24);
    border-radius: 999px;
    background: rgba(200, 151, 59, 0.1);
    color: #fde68a;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-last-winner-rotator {
    position: relative;
    display: grid;
}

.home-last-winner-slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.home-last-winner-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.home-last-winner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.home-last-winner-list span {
    max-width: 100%;
    padding: 0.32rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-winner-pitch {
    position: relative;
    min-height: clamp(430px, 48vw, 560px);
    margin-top: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 20px;
    background:
        radial-gradient(ellipse 92% 30% at 50% -5%, rgba(232, 240, 222, 0.32), transparent 76%),
        linear-gradient(180deg, #618b59 0%, #477b49 44%, #315f3d 100%);
    box-shadow:
        inset 0 1px rgba(244, 250, 235, 0.18),
        inset 0 -48px 64px rgba(20, 54, 31, 0.18),
        0 18px 34px rgba(0, 0, 0, 0.16);
    isolation: isolate;
    cursor: zoom-in;
}

.home-winner-pitch:focus-visible {
    outline: 3px solid rgba(94, 234, 212, 0.9);
    outline-offset: 3px;
}

.home-winner-pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 74% 19% at 50% 0%, rgba(245, 248, 238, 0.22), transparent 78%),
        linear-gradient(180deg, rgba(232, 238, 226, 0.1), transparent 18%);
    pointer-events: none;
}

.home-winner-pitch::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(250, 252, 244, 0.08), transparent 20%, rgba(22, 62, 35, 0.03) 70%, rgba(15, 43, 26, 0.16)),
        radial-gradient(ellipse 76% 34% at 50% 4%, rgba(231, 240, 219, 0.13), transparent 76%);
    pointer-events: none;
}

.home-winner-pitch-surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(242, 247, 232, 0.48) 0 2px, transparent 2px calc(100% - 2px), rgba(242, 247, 232, 0.48) calc(100% - 2px)),
        linear-gradient(180deg, rgba(242, 247, 232, 0.46) 0 2px, transparent 2px calc(100% - 2px), rgba(242, 247, 232, 0.46) calc(100% - 2px)),
        repeating-linear-gradient(90deg, rgba(241, 246, 226, 0.035) 0 12.5%, rgba(24, 73, 39, 0.035) 12.5% 25%),
        repeating-linear-gradient(0deg, rgba(236, 243, 220, 0.018) 0 11%, rgba(27, 77, 41, 0.018) 11% 22%);
    pointer-events: none;
}

.home-winner-pitch-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(238, 244, 228, 0.08), transparent 22%),
        repeating-linear-gradient(90deg, transparent 0 24.8%, rgba(236, 243, 222, 0.04) 25%, transparent 25.2% 50%);
}

.home-winner-pitch-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 86% 26% at 50% -2%, rgba(244, 247, 234, 0.12), transparent 82%),
        linear-gradient(180deg, transparent 68%, rgba(16, 50, 29, 0.1));
}

.home-winner-pitch-halfway,
.home-winner-pitch-circle,
.home-winner-pitch-box {
    position: absolute;
    display: block;
    z-index: 3;
    border-color: rgba(236, 253, 245, 0.5);
    pointer-events: none;
}

.home-winner-pitch-halfway {
    top: 50%;
    left: 7%;
    width: 86%;
    border-top: 1px solid rgba(236, 253, 245, 0.5);
}

.home-winner-pitch-circle {
    top: 50%;
    left: 50%;
    width: 19%;
    aspect-ratio: 1;
    border: 1px solid rgba(236, 253, 245, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%) scaleY(0.55);
}

.home-winner-pitch-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(236, 253, 245, 0.62);
    transform: translate(-50%, -50%);
}

.home-winner-pitch-box {
    left: 50%;
    width: 35%;
    height: 13%;
    border: 1px solid rgba(236, 253, 245, 0.5);
    transform: translateX(-50%);
}

.home-winner-pitch-box-top {
    top: -1px;
    border-top: 0;
}

.home-winner-pitch-box-bottom {
    bottom: -1px;
    border-bottom: 0;
}

.home-winner-formation-label {
    position: absolute;
    left: 0.65rem;
    bottom: 0.65rem;
    z-index: 120;
    max-width: calc(100% - 1.4rem);
    padding: 0.3rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(4, 47, 46, 0.72);
    color: rgba(240, 253, 250, 0.88);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}

.home-winner-pitch-slot {
    position: absolute;
    top: var(--slot-y);
    left: var(--slot-x);
    z-index: var(--slot-layer);
    display: grid;
    place-items: center;
    width: 64px;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transform-style: preserve-3d;
}

.home-winner-player-stats {
    position: absolute;
    top: 50%;
    left: -4px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    transform: translate(-100%, -50%);
    pointer-events: none;
}

.home-winner-player-stats span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: auto;
    gap: 0.15rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

.home-winner-player-stats svg {
    width: 11px;
    height: 11px;
    color: #fff;
    stroke-width: 2.5;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.68));
}

.home-winner-player-stats .gols-defesa-icone,
.home-winner-player-stats .gols-bola-icone {
    display: block;
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
}

.home-winner-pitch-slot::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    z-index: 0;
    width: 76%;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(2px);
    transform: translateX(-50%) rotateX(66deg);
    transform-origin: center;
}

/* Reutiliza a miniatura oficial; somente o recipiente controla seu tamanho. */
.home-winner-pitch-slot .player-mini-card {
    z-index: 1;
    width: min(100%, 64px);
    filter:
        drop-shadow(0 4px 2px rgba(0, 0, 0, 0.32))
        drop-shadow(0 13px 15px rgba(0, 0, 0, 0.38));
}

.home-winner-pitch-slot .player-mini-card:hover,
.home-winner-pitch-slot .player-mini-card:focus-visible {
    transform: translateY(-3px) scale(1.04);
}

@media (prefers-reduced-motion: no-preference) {
    .home-last-winner-slide.is-entering .home-winner-pitch-slot {
        animation: home-winner-slot-in 0.48s both;
    }

    @keyframes home-winner-slot-in {
        from {
            opacity: 0;
            transform: translate(-50%, calc(-50% + 10px));
        }
    }
}

@media (max-width: 640px) {
    .home-winner-pitch {
        min-height: 420px;
        border-radius: 16px;
    }

    .home-winner-pitch-slot {
        width: 54px;
    }

    .home-winner-formation-label {
        left: 0.5rem;
        bottom: 0.5rem;
        font-size: 0.6rem;
    }
}

@media (max-width: 380px) {
    .home-winner-pitch {
        min-height: 390px;
    }

    .home-winner-pitch-slot {
        width: 50px;
    }
}

.home-highlight-empty {
    min-height: 92px;
}

body.home-winner-fullscreen-open {
    overflow: hidden;
}

.home-winner-fullscreen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 10000;
    display: none;
    grid-template-rows: auto minmax(0, 1fr);
    background: #07110c;
    color: #f8fafc;
}

.home-winner-fullscreen.is-open {
    display: grid;
}

.home-winner-fullscreen-toolbar {
    z-index: 2;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-height: calc(62px + env(safe-area-inset-top));
    padding:
        calc(0.55rem + env(safe-area-inset-top))
        max(0.65rem, env(safe-area-inset-right))
        0.55rem
        max(0.65rem, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(5, 15, 10, 0.96);
}

.home-winner-fullscreen-toolbar > div {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.home-winner-fullscreen-toolbar strong,
.home-winner-fullscreen-toolbar small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-winner-fullscreen-toolbar strong {
    font-size: 0.92rem;
}

.home-winner-fullscreen-toolbar small {
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.7rem;
}

.home-winner-fullscreen-icon,
.home-winner-fullscreen-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #f8fafc;
    cursor: pointer;
}

.home-winner-fullscreen-icon {
    width: 44px;
    padding: 0;
}

.home-winner-fullscreen-download {
    gap: 0.4rem;
    padding: 0 0.75rem;
    background: #16a34a;
    border-color: #22c55e;
    font-size: 0.78rem;
    font-weight: 900;
}

.home-winner-fullscreen-download:disabled {
    cursor: wait;
    opacity: 0.82;
}

.home-winner-fullscreen-download.is-loading svg {
    display: none;
}

.home-winner-fullscreen-download.is-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: home-winner-download-spin 0.7s linear infinite;
}

.home-winner-fullscreen-icon svg,
.home-winner-fullscreen-download svg {
    width: 18px;
    height: 18px;
}

.home-winner-fullscreen-stage {
    display: grid;
    place-items: center;
    min-height: 0;
    padding:
        0.6rem
        max(0.6rem, env(safe-area-inset-right))
        max(0.6rem, env(safe-area-inset-bottom))
        max(0.6rem, env(safe-area-inset-left));
    overflow: hidden;
}

.home-winner-download-status {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    width: min(310px, calc(100% - 2rem));
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(5, 15, 10, 0.94);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
    color: #f8fafc;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.home-winner-download-status[hidden] {
    display: none;
}

.home-winner-download-status > div {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

.home-winner-download-status strong {
    font-size: 0.82rem;
}

.home-winner-download-status small {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.68rem;
}

.home-winner-download-status-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(40, 140, 85, 0.28);
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: home-winner-download-spin 0.7s linear infinite;
}

.home-winner-download-status.is-success .home-winner-download-status-icon {
    border-color: #22c55e;
    animation: none;
}

.home-winner-download-status.is-success .home-winner-download-status-icon::after {
    content: '\2713';
    color: #86efac;
    font-size: 1rem;
    font-weight: 900;
}

@keyframes home-winner-download-spin {
    to {
        transform: rotate(360deg);
    }
}

.home-winner-pitch.is-fullscreen {
    width: min(100%, 720px);
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    border-radius: 8px;
    cursor: default;
}

.home-winner-pitch.is-fullscreen .home-winner-pitch-slot {
    width: clamp(54px, 8.5vh, 82px);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.home-winner-pitch.is-fullscreen .home-winner-pitch-box {
    width: 56%;
    height: 16%;
}

.home-winner-pitch.is-fullscreen .home-winner-pitch-slot.is-dragging {
    z-index: 500 !important;
    cursor: grabbing;
}

.home-winner-pitch.is-fullscreen .home-winner-pitch-slot .player-mini-card {
    width: 100%;
    pointer-events: none;
}

.home-winner-pitch.is-fullscreen .home-winner-player-stats {
    top: 50%;
    left: -5px;
}

.home-winner-pitch.is-fullscreen .home-winner-player-stats span {
    min-width: 0;
    height: auto;
    font-size: 0.7rem;
}

@media (max-width: 520px) {
    .home-winner-fullscreen-toolbar {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .home-winner-fullscreen-download {
        width: 44px;
        padding: 0;
    }

    .home-winner-fullscreen-download span {
        display: none;
    }

    .home-winner-fullscreen-stage {
        padding:
            0.35rem
            max(0.35rem, env(safe-area-inset-right))
            max(0.35rem, env(safe-area-inset-bottom))
            max(0.35rem, env(safe-area-inset-left));
    }

    .home-winner-pitch.is-fullscreen .home-winner-player-stats {
        left: 2px;
        transform: translate(-45%, -50%);
    }
}

/* ===========================
   CARDS
=========================== */
.card {
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--sombra);
}

.card h2 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--texto);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-header h2 { margin-bottom: 0; }

.card-acao {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.card-acao h2 { margin-bottom: 0.25rem; }

/* ===========================
   STATS
=========================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.35rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--roxo), transparent);
    opacity: 0.7;
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.6rem;
    border-radius: 10px;
    background: rgba(110, 91, 224, 0.12);
    border: 1px solid rgba(110, 91, 224, 0.25);
    font-size: 1.25rem;
}

.stat-valor {
    font-size: 2rem;
    font-weight: 800;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-top: 0.25rem;
}

/* ===========================
   DASHBOARD GRID
=========================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* ===========================
   BOTÕES
=========================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); color: inherit; }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
}

.btn-primary:hover {
    box-shadow: var(--sombra-roxa);
    color: #fff;
}

.btn-success {
    background: rgba(42, 163, 108, 0.12);
    border-color: rgba(42, 163, 108, 0.4);
    color: var(--verde);
}

.btn-success:hover {
    border-color: var(--verde);
    background: rgba(42, 163, 108, 0.18);
    color: var(--verde);
}

.btn-outline {
    background: transparent;
    border-color: var(--borda-forte);
    color: var(--texto);
}

.btn-outline:hover {
    border-color: var(--roxo);
    color: var(--roxo-suave);
}

.btn-draft {
    border-color: color-mix(in srgb, var(--roxo) 62%, var(--borda));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--roxo) 24%, var(--fundo-input)),
        color-mix(in srgb, var(--verde) 16%, var(--fundo-input))
    );
    color: var(--roxo-suave);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px color-mix(in srgb, var(--roxo) 14%, transparent);
}

.btn-draft:hover,
.btn-draft:focus-visible {
    border-color: color-mix(in srgb, var(--verde) 54%, var(--roxo));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--roxo) 36%, var(--fundo-input)),
        color-mix(in srgb, var(--verde) 26%, var(--fundo-input))
    );
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 16%, transparent), 0 12px 26px color-mix(in srgb, var(--verde) 13%, transparent);
    outline: none;
}

.btn-draft-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--roxo) 38%, transparent));
}

.btn-danger {
    background: rgba(201, 82, 79, 0.12);
    border-color: rgba(201, 82, 79, 0.4);
    color: var(--vermelho);
}

.btn-danger:hover {
    border-color: var(--vermelho);
    background: rgba(201, 82, 79, 0.2);
    color: var(--vermelho);
}

.btn-sm   { padding: 0.35rem 0.8rem; font-size: 0.82rem; }
.btn-full { width: 100%; }

/* Tooltip do botão excluir */
.btn-excluir { position: relative; }

.btn-excluir::after {
    content: "Excluir";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fundo-inset);
    border: 1px solid var(--borda-forte);
    color: var(--texto);
    padding: 4px 9px;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

.btn-excluir:hover::after { opacity: 1; }

/* ===========================
   FORMULÁRIOS
=========================== */
.form-group { margin-bottom: 1rem; }

.form-group label {
    display: block;
    font-size: 0.82rem;
    color: var(--texto-suave);
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group textarea {
    min-height: 135px;
    resize: vertical;
    line-height: 1.5;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px rgba(110, 91, 224, 0.18);
}

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texto);
    box-shadow: 0 0 0 1000px var(--fundo-input) inset;
    caret-color: var(--texto);
    transition: background-color 999999s ease-in-out 0s;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 2.6rem !important;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--texto-suave);
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--texto);
}

.password-toggle svg {
    width: 19px;
    height: 19px;
}

.password-toggle .icon-eye-off {
    display: none;
}

.password-toggle[aria-pressed="true"] .icon-eye {
    display: none;
}

.password-toggle[aria-pressed="true"] .icon-eye-off {
    display: block;
}

.form-group select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.form-group select[multiple] option {
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
}

.form-group select[multiple] option:checked {
    background: rgba(110, 91, 224, 0.28);
    color: var(--texto);
}

.form-busca { display: flex; gap: 0.5rem; }

.form-busca input {
    width: 180px;
    padding: 0.35rem 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-size: 0.85rem;
}

/* ===========================
   TABELA
=========================== */
.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabela th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--texto-suave);
    border-bottom: 1px solid var(--borda);
}

.tabela td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--borda);
    font-variant-numeric: tabular-nums;
}

.tabela tr:last-child td { border-bottom: none; }
.tabela tr:hover td { background: rgba(110, 91, 224, 0.05); }

.acoes { display: flex; gap: 0.4rem; }

/* ===========================
   BADGES — OVERALL
=========================== */
.badge-overall {
    display: inline-block;
    color: #fff;
    font-family: var(--fonte-display);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    min-width: 34px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.badge-ovr {
    display: inline-block;
    background: rgba(42, 163, 108, 0.14);
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
}

/* escala de nível (semáforo de rating) */
.badge-ovr.overall-1, .badge-overall.overall-1 { background: #dc2626; color: #fff; }
.badge-ovr.overall-2, .badge-overall.overall-2 { background: #ea580c; color: #fff; }
.badge-ovr.overall-3, .badge-overall.overall-3 { background: #ca8a04; color: #fff; }
.badge-ovr.overall-4, .badge-overall.overall-4 { background: #65a30d; color: #fff; }
.badge-ovr.overall-5, .badge-overall.overall-5 { background: #16a34a; color: #fff; }
.badge-ovr.overall-6, .badge-overall.overall-6 { background: #059669; color: #fff; }

/* ===========================
   BADGES — POSIÇÃO
=========================== */
.badge-posicao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
    letter-spacing: 0.2px;
    position: relative;
}

.badge-posicao.goleiro,
.badge-posicao.goleiro        { background: rgba(78, 123, 212, 0.14); color: var(--azul); }
.badge-posicao.convidado      { background: rgba(244, 114, 182, 0.14); color: #f9a8d4; }
.badge-posicao.zagueiro,
.badge-posicao.defensivo      { background: rgba(42, 163, 108, 0.12); color: var(--verde); }
.badge-posicao.lateral        { background: rgba(48, 150, 140, 0.14); color: #2dd4bf; }
.badge-posicao.volante        { background: rgba(129, 140, 248, 0.16); color: #818cf8; }
.badge-posicao.meiocampista   { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
.badge-posicao.meia           { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.badge-posicao.pontadireita   { background: rgba(251, 146, 60, 0.15); color: #c9834a; }
.badge-posicao.pontaesquerda  { background: rgba(253, 186, 116, 0.18); color: #fdba74; }
.badge-posicao.centroavante   { background: rgba(251, 113, 133, 0.15); color: #fb7185; }
.badge-posicao.ala            { background: rgba(196, 150, 60, 0.14); color: #c4963c; }
.badge-posicao.pivo,
.badge-posicao.ofensivo       { background: rgba(201, 82, 79, 0.13); color: var(--vermelho); }

.badge-posicao .posicao-tooltip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    pointer-events: none;
}

.badge-posicao:hover .posicao-tooltip,
.badge-posicao:focus-visible .posicao-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.badge-posicao .posicao-tooltip .caracteristica-range {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    background: var(--fundo-card);
    border-color: var(--borda);
}

.caracteristica-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.caracteristica-control {
    gap: 0.55rem;
}

.caracteristica-control input[type="range"],
.lote-caracteristica input[type="range"] {
    width: 100%;
    accent-color: var(--vermelho);
}

.caracteristica-preview {
    min-height: 30px;
}

.caracteristica-range {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.caracteristica-label {
    font-size: 10px;
    line-height: 1;
}

.caracteristica-label.def {
    color: var(--verde);
}

.caracteristica-label.atk {
    color: var(--vermelho);
}

.caracteristica-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.caracteristica-star,
.caracteristica-star svg {
    width: 13px;
    height: 13px;
}

.caracteristica-star.def,
.caracteristica-star.def svg {
    color: var(--verde);
    fill: currentColor;
}

.caracteristica-star.atk,
.caracteristica-star.atk svg {
    color: var(--vermelho);
    fill: currentColor;
}

.lote-caracteristica {
    min-width: 170px;
}

.lote-row .lote-caracteristica {
    display: grid;
    gap: 0.35rem;
}

/* ===========================
   ALERTAS
=========================== */
.alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-sucesso {
    background: rgba(42, 163, 108, 0.1);
    border: 1px solid rgba(42, 163, 108, 0.45);
    color: var(--verde);
}

.alert-erro {
    background: rgba(201, 82, 79, 0.1);
    border: 1px solid rgba(201, 82, 79, 0.45);
    color: var(--vermelho);
}

.sorteio-alerta-flutuante {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top));
    right: 1rem;
    z-index: 100001;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    width: min(420px, calc(100vw - 2rem));
    min-height: 68px;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(42, 163, 108, 0.38);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(14, 18, 30, 0.98), rgba(10, 16, 24, 0.98));
    color: var(--texto);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sorteio-alerta-flutuante.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sorteio-alerta-flutuante-icone {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(42, 163, 108, 0.14);
    border: 1px solid rgba(42, 163, 108, 0.45);
    position: relative;
}

.sorteio-alerta-flutuante-icone::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 9px;
    width: 10px;
    height: 17px;
    border-right: 3px solid var(--verde);
    border-bottom: 3px solid var(--verde);
    transform: rotate(42deg);
}

.sorteio-alerta-flutuante-texto {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.sorteio-alerta-flutuante strong {
    font-family: var(--fonte-display);
    font-size: 0.88rem;
    line-height: 1.2;
    color: var(--verde);
}

.sorteio-alerta-flutuante span[data-sorteio-alerta-mensagem],
.sorteio-alerta-flutuante span[data-app-alerta-mensagem] {
    color: var(--texto);
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.sorteio-alerta-flutuante[data-tipo="erro"] {
    border-color: rgba(201, 82, 79, 0.45);
}

.sorteio-alerta-flutuante[data-tipo="erro"] .sorteio-alerta-flutuante-icone {
    background: rgba(201, 82, 79, 0.12);
    border-color: rgba(201, 82, 79, 0.48);
}

.sorteio-alerta-flutuante[data-tipo="erro"] .sorteio-alerta-flutuante-icone::before,
.sorteio-alerta-flutuante[data-tipo="erro"] .sorteio-alerta-flutuante-icone::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 10px;
    width: 3px;
    height: 18px;
    border: 0;
    background: var(--vermelho);
    transform: rotate(45deg);
}

.sorteio-alerta-flutuante[data-tipo="erro"] .sorteio-alerta-flutuante-icone::before {
    transform: rotate(-45deg);
}

.sorteio-alerta-flutuante[data-tipo="erro"] strong {
    color: var(--vermelho);
}

.sorteio-alerta-flutuante[data-tipo="aviso"] {
    border-color: rgba(200, 151, 59, 0.42);
}

.sorteio-alerta-flutuante[data-tipo="aviso"] .sorteio-alerta-flutuante-icone {
    background: rgba(200, 151, 59, 0.12);
    border-color: rgba(200, 151, 59, 0.46);
}

.sorteio-alerta-flutuante[data-tipo="aviso"] .sorteio-alerta-flutuante-icone::after {
    left: 17px;
    top: 8px;
    width: 4px;
    height: 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ouro);
    transform: none;
}

.sorteio-alerta-flutuante[data-tipo="aviso"] .sorteio-alerta-flutuante-icone::before {
    content: "";
    position: absolute;
    left: 17px;
    bottom: 8px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--ouro);
}

.sorteio-alerta-flutuante[data-tipo="aviso"] strong {
    color: var(--ouro);
}

@media (max-width: 640px) {
    .sorteio-alerta-flutuante {
        top: auto;
        right: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        left: 0.75rem;
        width: auto;
    }
}

/* ===========================
   TABS (HISTÓRICO)
=========================== */
.historico-tabs {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding: 0.3rem;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 999px;
}

.historico-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.35rem 1.2rem;
    border-radius: 999px;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s;
}

.historico-tabs a:hover { color: var(--texto); }

.historico-tabs a.ativo {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
}

.sorteio-tabs {
    width: fit-content;
}

.sorteio-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.35rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s;
}

.sorteio-tabs button:hover {
    color: var(--texto);
}

.sorteio-tabs button.ativo {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
}

.sorteio-tab-panel {
    display: none;
}

.sorteio-tab-panel.ativo {
    display: block;
}

.sorteio-resultado-vazio p {
    color: var(--texto-suave);
    text-align: center;
}

.sorteio-status-linha {
    min-height: 18px;
    margin-bottom: 0.75rem;
    color: var(--texto-suave);
    font-size: 13px;
}

/* ===========================
   TIMES — CARDS DE RESULTADO
=========================== */
.times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.time-card {
    border-radius: var(--radius-sm);
    overflow: visible;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
}

.time-header {
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    background: var(--fundo-input);
    font-family: var(--fonte-display);
    font-weight: 700;
}

.time-lista {
    list-style: none;
    padding: 10px 14px;
    margin: 0;
}

.time-lista li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--borda);
    font-size: 13px;
    color: var(--texto);
    gap: 6px;
}

.time-lista li:last-child { border-bottom: none; }

.time-lista .li-nome {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================
   HISTÓRICO DE JOGOS
=========================== */
.jogo-card { margin-bottom: 1.25rem; }

.jogo-card-accordion {
    overflow: hidden;
}

.inicio-jogo-atual { margin-bottom: 1.5rem; }

.jogo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--borda);
}

.jogo-card-accordion > summary.jogo-card-header {
    cursor: pointer;
    list-style: none;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.jogo-card-accordion > summary.jogo-card-header::-webkit-details-marker {
    display: none;
}

.jogo-card-accordion[open] > summary.jogo-card-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--borda);
}

.jogo-card-conteudo {
    display: grid;
    gap: 1rem;
}

.jogo-card-oculto {
    display: none;
}

.jogos-carregar-mais {
    width: 100%;
    margin-top: 0.25rem;
}

.jogos-shell,
.jogos-lista {
    display: grid;
    gap: 1rem;
}

.jogos-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.jogos-header h1 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.7rem, 8vw, 2.5rem);
    line-height: 1.05;
}

.jogos-header p {
    color: var(--texto-suave);
    margin-top: 0.25rem;
}

.jogo-resumo-card {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(110, 91, 224, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.jogo-resumo-top,
.jogo-resumo-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.jogo-resumo-data {
    display: grid;
    gap: 0.18rem;
}

.jogo-resumo-data span {
    color: var(--roxo-suave);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.jogo-resumo-data small {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.jogo-resumo-body {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
}

.jogo-resumo-body h2 {
    margin: 0;
    font-size: 1.02rem;
}

.jogo-resumo-body strong {
    color: var(--texto);
    font-size: 0.9rem;
}

.jogo-resumo-body span,
.jogo-resumo-body small {
    color: var(--texto-suave);
    font-size: 0.84rem;
}

.jogo-resumo-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    color: var(--texto-suave);
    font-weight: 800;
}

.jogo-resumo-meta span + span::before {
    content: "•";
    margin-right: 0.65rem;
    color: var(--borda-forte);
}

.jogo-resumo-acao {
    width: 100%;
    justify-content: center;
}

.jogo-resumo-acoes {
    display: grid;
    gap: 0.5rem;
}

.jogo-card-menu {
    position: relative;
    z-index: 5;
}

.jogo-card-menu summary {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(110, 91, 224, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto-suave);
    cursor: pointer;
    list-style: none;
}

.jogo-card-menu summary::-webkit-details-marker {
    display: none;
}

.jogo-card-menu form {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 170px;
    padding: 0.35rem;
    border: 1px solid rgba(110, 91, 224, 0.24);
    border-radius: 8px;
    background: rgba(13, 17, 23, 0.98);
    box-shadow: var(--sombra);
}

.jogo-card-menu button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 36px;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vermelho);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.jogo-card-menu button:hover {
    background: rgba(201, 82, 79, 0.1);
}

.jogo-detalhe-top {
    margin-bottom: 1rem;
}

.jogo-voltar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--texto-suave);
    font-weight: 900;
}

.jogo-detalhe-tabs {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: none;
}

.jogo-detalhe-tabs::-webkit-scrollbar {
    display: none;
}

.jogo-detalhe-tabs a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.jogo-detalhe-tabs.historico-tabs a {
    min-width: 0;
}

.jogo-detalhe-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.jogo-detalhe-hero h1 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.5rem, 7vw, 2.3rem);
}

.jogo-detalhe-hero p,
.jogo-detalhe-hero strong {
    color: var(--texto-suave);
}

.jogo-detalhe-conteudo,
.jogo-resumo-grid,
.avaliacao-lista {
    display: grid;
    gap: 1rem;
}

.jogo-resumo-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0.7rem;
}

.jogo-resumo-info > div,
.jogo-resumo-classificacao,
.avaliacao-progresso,
.avaliacao-jogador-card {
    display: grid;
    gap: 0.28rem;
    padding: 0.8rem;
    border: 1px solid rgba(110, 91, 224, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.jogo-resumo-info span,
.avaliacao-jogador-card span,
.avaliacao-jogador-card small,
.avaliacao-progresso span {
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.jogo-resumo-info strong {
    color: var(--texto);
    font-size: 1rem;
}

.jogo-detalhe-section-head,
.jogo-rank-row,
.avaliacao-jogador-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.jogo-detalhe-section-head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.jogo-rank-row {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(110, 91, 224, 0.14);
}

.jogo-rank-row span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(110, 91, 224, 0.14);
    color: var(--roxo-suave);
    font-weight: 900;
}

.avaliacao-progresso div {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.avaliacao-progresso i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--roxo), var(--verde));
}

.avaliacao-jogador-card > div {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.jogo-times-accordion .time-mini summary {
    cursor: pointer;
    list-style: none;
}

.jogo-times-accordion .time-mini summary::-webkit-details-marker {
    display: none;
}

.jogo-times-accordion .time-mini summary i {
    transition: transform 0.15s ease;
}

.jogo-times-accordion .time-mini[open] summary i {
    transform: rotate(180deg);
}

@media (max-width: 640px) {
    .jogos-header {
        align-items: stretch;
        flex-direction: column;
    }

    .jogos-header .btn {
        width: 100%;
    }

    .jogo-detalhe-hero,
    .jogo-detalhe-section-head,
    .avaliacao-jogador-card {
        align-items: stretch;
        flex-direction: column;
    }

    .jogo-detalhe-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.35rem;
        overflow: visible;
        border-radius: 14px;
    }

    .jogo-detalhe-tabs a {
        min-width: 0;
        padding-inline: 0.55rem;
        white-space: normal;
    }
}

.jogo-info { min-width: 0; }

.jogo-info strong {
    display: block;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

.jogo-info span {
    display: block;
    color: var(--texto-suave);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.jogo-excluir {
    display: flex;
    align-self: stretch;
    flex-shrink: 0;
    margin: -0.95rem -0.95rem -0.95rem 0;
}

.jogo-excluir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-height: 100%;
    border-left: 1px solid var(--borda);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.jogo-excluir-btn:hover,
.jogo-excluir-btn:focus-visible {
    outline: none;
    background: rgba(190, 72, 70, 0.12);
    color: #fca5a5;
}

.jogo-excluir-btn svg {
    width: 18px;
    height: 18px;
}

.jogos-vazio p {
    margin: 0;
    text-align: center;
    color: var(--texto-suave);
}

.times-historico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 0.5rem;
}

.time-mini {
    min-width: 0;
    overflow: hidden;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.time-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 13px 16px;
    background: var(--fundo-input);
    border-left: 4px solid var(--cor-time, var(--roxo));
}

.time-mini-header strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.time-mini > strong {
    display: block;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.1rem;
    padding: 13px 16px;
    background: var(--fundo-input);
    border-left: 4px solid var(--cor-time, var(--roxo));
}

.time-mini ul {
    list-style: none;
    color: var(--texto);
    padding: 14px 16px;
    margin: 0;
}

.time-mini li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--borda);
    font-size: 15px;
    line-height: 1.3;
}

.time-mini li:last-child { border-bottom: none; }

.time-mini li.editar-time-extra {
    border-top: 1px dashed var(--borda-forte);
    border-bottom: none;
    margin-top: 4px;
    padding-top: 10px;
}

.time-mini-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-mini .badge-ovr {
    flex-shrink: 0;
    min-width: 38px;
    text-align: center;
    font-size: 14px;
    padding: 3px 9px;
    border-radius: 7px;
}

.time-mini-header .badge-ovr {
    min-width: 0;
    font-size: 14px;
    padding: 5px 11px;
    border-radius: 7px;
}

.time-mini-badges {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.time-mini-badges .badge-posicao {
    min-width: 68px;
    justify-content: center;
    font-size: 12px;
    padding: 4px 8px;
}

.time-mini-header-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.editar-times-form {
    display: none;
}

.editar-time-select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--radius-sm);
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 0.9rem;
}

.editar-time-select:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px rgba(110, 91, 224, 0.22);
}

.editar-time-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 0.65rem;
    align-items: end;
    padding: 0.75rem 0.85rem 0.25rem;
}

.editar-time-meta label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.editar-time-meta input[type="text"],
.editar-time-meta input[type="color"] {
    width: 100%;
    min-height: 36px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--radius-sm);
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
}

.editar-time-meta input[type="text"] {
    padding: 0.45rem 0.6rem;
}

.editar-time-meta input[type="color"] {
    padding: 0.18rem;
    cursor: pointer;
}

.editar-time-meta input[type="color"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.editar-time-sem-cor {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.editar-time-sem-cor input[type="checkbox"] {
    width: auto;
    min-height: auto;
    accent-color: var(--roxo);
}

.time-mini-sem-cor .time-mini-header strong::after {
    content: 'sem cor';
    margin-left: 0.5rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.editar-time-meta input:focus {
    outline: none;
    border-color: var(--cor-time, var(--roxo));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-time, var(--roxo)) 24%, transparent);
}

.editar-time-meta small {
    grid-column: 1 / -1;
    color: var(--texto-suave);
    font-size: 0.82rem;
    line-height: 1.35;
}

.time-mini-jogador {
    border-left: 3px solid var(--presenca-cor, transparent);
    padding-left: 0.45rem;
}

.presenca-status-presente {
    --presenca-cor: var(--verde);
    --presenca-bg: rgba(42, 163, 108, 0.13);
}

.presenca-status-atraso-leve {
    --presenca-cor: #c8973b;
    --presenca-bg: rgba(200, 151, 59, 0.14);
}

.presenca-status-atraso-pesado {
    --presenca-cor: #c9834a;
    --presenca-bg: rgba(251, 146, 60, 0.15);
}

.presenca-status-falta {
    --presenca-cor: #c9524f;
    --presenca-bg: rgba(201, 82, 79, 0.15);
}

.presenca-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--presenca-cor, var(--verde)) 48%, transparent);
    border-radius: 999px;
    background: var(--presenca-bg, rgba(42, 163, 108, 0.13));
    color: var(--presenca-cor, var(--verde));
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.presenca-status-badge svg {
    width: 15px;
    height: 15px;
}

button.presenca-status-badge {
    cursor: pointer;
}

button.presenca-status-badge:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--presenca-cor, var(--verde)) 32%, transparent);
}

.presenca-status-menu {
    position: fixed;
    z-index: 9800;
    display: grid;
    min-width: 190px;
    gap: 0.25rem;
    padding: 0.4rem;
    border: 1px solid var(--borda-forte);
    border-radius: 14px;
    background: color-mix(in srgb, var(--fundo-card) 97%, transparent);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.presenca-status-menu[hidden] {
    display: none !important;
}

.presenca-status-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    width: 100%;
    padding: 0.48rem 0.58rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    text-align: left;
}

.presenca-status-menu button:hover,
.presenca-status-menu button:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.presenca-status-menu svg {
    width: 16px;
    height: 16px;
    color: var(--verde);
}

.jogo-times-press-hint {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.jogo-times-press-hint svg {
    width: 16px;
    height: 16px;
    color: var(--verde);
}

.times-grid.jogo-times-cards {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-top: 0.5rem;
}

.jogo-time-card {
    min-width: 0;
    overflow: hidden;
}

.jogo-time-card-header strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jogo-time-card-hand.sorteio-team-hand {
    display: grid;
    grid-template-columns: repeat(auto-fit, 64px);
    justify-content: start;
    align-items: flex-start;
    gap: 7px;
    min-height: 96px;
    padding: 10px;
}

.jogo-time-player-card {
    position: relative;
    display: grid;
    justify-items: center;
    width: 64px;
    min-width: 0;
    padding: 4px 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.jogo-time-player-card[data-presenca-row] {
    border-color: color-mix(in srgb, var(--presenca-cor, var(--borda)) 34%, transparent);
    background: color-mix(in srgb, var(--presenca-bg, var(--fundo-input)) 68%, transparent);
    cursor: context-menu;
}

.jogo-time-player-card[data-presenca-row].is-pressing {
    transform: scale(0.95);
    border-color: var(--presenca-cor, var(--verde));
    background: var(--presenca-bg, var(--fundo-input));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--presenca-cor, var(--verde)) 18%, transparent);
}

.jogo-time-player-card[data-presenca-row]:focus-visible {
    outline: none;
    border-color: var(--presenca-cor, var(--verde));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--presenca-cor, var(--verde)) 22%, transparent);
}

.jogo-time-player-card-visual {
    display: grid;
    place-items: center;
    width: 64px;
}

.jogo-time-card-hand.sorteio-team-hand .jogo-time-player-card .player-mini-card {
    width: 64px;
    max-width: none;
}

.jogo-time-player-card img {
    -webkit-user-drag: none;
}

.jogo-time-player-card > .presenca-status-badge {
    position: absolute;
    z-index: 3;
    top: 1px;
    right: 1px;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.jogo-time-player-card > .presenca-status-badge svg {
    width: 12px;
    height: 12px;
}

.jogo-time-player-card.presenca-status-falta .player-mini-card {
    opacity: 0.56;
    filter: grayscale(0.65);
}

.jogo-time-player-card.is-external {
    --presenca-cor: var(--texto-suave);
    --presenca-bg: var(--fundo-input);
}

.jogo-time-player-actions {
    display: flex;
    justify-content: center;
    min-height: 25px;
    margin-top: 2px;
}

.jogo-time-player-change {
    position: relative;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    cursor: pointer;
}

.jogo-time-player-change svg {
    width: 13px;
    height: 13px;
}

.jogo-time-player-change select,
.jogo-time-add-player select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.jogo-time-add-player {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    width: 64px;
    min-height: 100px;
    padding: 6px 4px;
    border: 1px dashed var(--borda-forte);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fundo-input) 72%, transparent);
    color: var(--texto-suave);
    font-size: 0.62rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.jogo-time-add-player svg {
    width: 20px;
    height: 20px;
    color: var(--verde);
}

@media (max-width: 700px) {
    .jogo-time-add-player {
        min-height: 100px;
        font-size: 0.56rem;
    }
}

.editar-times-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.editar-times-acoes span {
    color: var(--texto-suave);
    font-size: 0.88rem;
    line-height: 1.35;
}

.time-vencedor {
    border-color: rgba(42, 163, 108, 0.55);
    box-shadow: 0 0 0 1px rgba(42, 163, 108, 0.3);
}

.time-empate {
    border-color: rgba(196, 150, 60, 0.55);
    box-shadow: 0 0 0 1px rgba(196, 150, 60, 0.28);
}

/* Placar / resumo do resultado */
.resultado-resumo {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 1.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.resultado-resumo span,
.badge-placar,
.badge-vencedor {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.resultado-resumo span {
    min-height: 40px;
    padding: 0.45rem 0.9rem;
    background: var(--fundo-input);
    color: var(--texto);
    border: 1px solid var(--borda-forte);
    font-family: var(--fonte-display);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.resultado-resumo .vencedor,
.badge-vencedor {
    background: rgba(42, 163, 108, 0.15);
    color: var(--verde);
    border: 1px solid rgba(42, 163, 108, 0.55);
}

.resultado-resumo .empate,
.badge-empate {
    background: rgba(196, 150, 60, 0.14);
    color: #c4963c;
    border: 1px solid rgba(196, 150, 60, 0.55);
}

.badge-placar {
    background: var(--fundo-inset);
    color: var(--texto);
    border: 1px solid var(--borda-forte);
    font-family: var(--fonte-display);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.resultado-form-inline {
    display: none;
}

.placar-time-input {
    width: 48px;
    min-height: 32px;
    padding: 0.22rem 0.35rem;
    background: var(--fundo-inset);
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.placar-time-input:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px rgba(110, 91, 224, 0.25);
}

.resultado-acoes-inline {
    display: flex;
    justify-content: flex-end;
}

.resultado-acoes-inline .btn {
    width: min(100%, 280px);
}

/* Formulário de resultado (diretor) */
.resultado-form {
    padding: 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.resultado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.resultado-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.resultado-grid input,
.resultado-grid select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font: inherit;
}

.resultado-grid input:focus,
.resultado-grid select:focus {
    outline: none;
    border-color: var(--roxo);
}

.resultado-grid select option {
    background: var(--fundo-input);
    color: var(--texto);
}

/* ===========================
   AVALIACAO (LIKES/DISLIKES)
=========================== */
.avaliacao-shell {
    display: grid;
    gap: 1rem;
}

.avaliacao-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid rgba(110, 91, 224, 0.28);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(110, 91, 224, 0.16), rgba(15, 23, 42, 0.84));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.avaliacao-hero.concluida { border-color: rgba(42, 163, 108, 0.38); }

.avaliacao-hero-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: rgba(110, 91, 224, 0.18);
    color: var(--roxo-suave);
}

.avaliacao-hero-icon svg { width: 24px; height: 24px; }

.avaliacao-hero-main {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.avaliacao-hero h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: 1.45rem;
}

.avaliacao-hero p {
    margin: 0;
    color: var(--texto-suave);
    line-height: 1.45;
}

.avaliacao-progress-wrap {
    display: grid;
    gap: 0.45rem;
}

.avaliacao-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--texto-suave);
    font-size: 0.86rem;
}

.avaliacao-progress-meta strong { color: var(--texto); }

.avaliacao-progress-track,
.home-avaliacao-progress {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
}

.avaliacao-progress-track i,
.home-avaliacao-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--roxo), var(--verde));
}

.avaliacao-grupo {
    display: grid;
    gap: 0.7rem;
}

.avaliacao-grupo-head,
.avaliacao-avaliados summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0.1rem;
}

.avaliacao-grupo-head h3,
.avaliacao-avaliados summary span {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.avaliacao-grupo-head span,
.avaliacao-avaliados summary b {
    min-width: 30px;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(110, 91, 224, 0.18);
    color: var(--roxo-suave);
    text-align: center;
}

.avaliacao-avaliados summary {
    cursor: pointer;
    list-style: none;
}

.avaliacao-avaliados summary::-webkit-details-marker { display: none; }

.avaliacao-completa,
.avaliacao-vazio {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 1.1rem;
    border: 1px solid rgba(42, 163, 108, 0.26);
    border-radius: 8px;
    background: rgba(42, 163, 108, 0.08);
    text-align: center;
}

.avaliacao-completa svg,
.avaliacao-vazio svg {
    width: 34px;
    height: 34px;
    color: var(--verde);
}

.avaliacao-completa p,
.avaliacao-vazio p {
    margin: 0;
    color: var(--texto-suave);
}

.avaliacao-toast {
    position: fixed;
    left: 50%;
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 80;
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(110, 91, 224, 0.28);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.96);
    color: var(--texto);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    transition: opacity 0.18s, transform 0.18s;
}

.avaliacao-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.avaliacao-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
    color: var(--texto-suave);
    font-size: 0.87rem;
}

.avaliacao-status-bar.aberta { border-color: rgba(42, 163, 108, 0.35); }
.avaliacao-status-bar.aguardando { border-color: rgba(78, 123, 212, 0.32); }
.avaliacao-status-bar.encerrada { opacity: 0.8; }
.avaliacao-status-bar span { font-weight: 600; }
.avaliacao-status-bar form { margin: 0; }

.time-mini-nome-com-avaliacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.avaliacao-voto-form {
    display: block;
    flex-shrink: 0;
    margin: 0;
}

.avaliacao-botoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
}

.avaliacao-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--borda-forte);
    border-radius: 6px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.avaliacao-btn svg.lucide { width: 17px; height: 17px; }

.avaliacao-btn span {
    color: inherit;
    font-size: 0.88rem;
    font-weight: 800;
}

.avaliacao-btn:hover { transform: translateY(-1px); }
.avaliacao-btn-like:hover { border-color: var(--verde); color: var(--verde); }
.avaliacao-btn-neutro:hover { border-color: rgba(196, 150, 60, 0.85); color: #c4963c; }
.avaliacao-btn-dislike:hover { border-color: var(--vermelho); color: var(--vermelho); }

.avaliacao-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.avaliacao-btn:disabled:hover {
    transform: none;
}

.avaliacao-btn-like.selecionado {
    border-color: rgba(42, 163, 108, 0.7);
    background: rgba(42, 163, 108, 0.16);
    color: var(--verde);
    opacity: 1;
}

.avaliacao-btn-neutro.selecionado {
    border-color: rgba(196, 150, 60, 0.78);
    background: rgba(196, 150, 60, 0.16);
    color: #c4963c;
    opacity: 1;
}

.avaliacao-btn-dislike.selecionado {
    border-color: rgba(201, 82, 79, 0.7);
    background: rgba(201, 82, 79, 0.16);
    color: var(--vermelho);
    opacity: 1;
}

.avaliacao-jogador-card {
    align-items: flex-start;
    padding: 0.9rem;
    border-color: rgba(110, 91, 224, 0.22);
    background: rgba(255, 255, 255, 0.055);
}

.avaliacao-jogador-card.avaliado {
    opacity: 0.72;
    background: rgba(255, 255, 255, 0.035);
}

.avaliacao-jogador-card[hidden] {
    display: none;
}

.avaliacao-jogador-card.is-active {
    border-color: rgba(110, 91, 224, 0.42);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.avaliacao-card-registrado {
    animation: avaliacaoRegistrada 0.35s ease;
}

.avaliacao-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(110, 91, 224, 0.35), rgba(42, 163, 108, 0.18));
    color: var(--texto);
    font-weight: 900;
}

.avaliacao-card-body {
    display: grid;
    gap: 0.7rem;
    flex: 1;
    min-width: 0;
}

.avaliacao-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.avaliacao-card-top > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.avaliacao-card-top strong {
    font-size: 1rem;
}

.avaliacao-card-side {
    display: grid;
    justify-items: end;
    gap: 0.4rem;
    min-width: min(100%, 290px);
}

.avaliacao-jogo-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    width: min(100%, 290px);
}

.avaliacao-jogo-stats > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 34px;
    padding: 0.38rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.42);
    color: var(--texto);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.avaliacao-jogo-stats svg.lucide {
    width: 13px;
    height: 13px;
    color: var(--roxo-suave);
}

.avaliacao-jogo-stats b {
    color: var(--texto);
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1;
}

.avaliacao-card-top .avaliacao-jogo-stats small {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--texto-suave);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.avaliacao-jogo-stats .resultado-vencedor {
    border-color: rgba(42, 163, 108, 0.36);
    background: rgba(42, 163, 108, 0.12);
}

.avaliacao-jogo-stats .resultado-vencedor svg.lucide,
.avaliacao-jogo-stats .resultado-vencedor small {
    color: var(--verde);
}

.avaliacao-jogo-stats .resultado-empate {
    border-color: rgba(196, 150, 60, 0.34);
    background: rgba(196, 150, 60, 0.11);
}

.avaliacao-jogo-stats .resultado-empate svg.lucide,
.avaliacao-jogo-stats .resultado-empate small {
    color: #c4963c;
}

.avaliacao-jogo-stats .resultado-nao-venceu {
    border-color: rgba(201, 82, 79, 0.26);
    background: rgba(201, 82, 79, 0.1);
}

.avaliacao-jogo-stats .resultado-nao-venceu svg.lucide,
.avaliacao-jogo-stats .resultado-nao-venceu small {
    color: var(--vermelho);
}

.avaliacao-card-top small {
    padding: 0.24rem 0.45rem;
    border-radius: 999px;
    background: rgba(110, 91, 224, 0.12);
    white-space: nowrap;
}

.avaliacao-card-body p {
    margin: 0;
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 700;
}

.avaliacao-card-hint {
    color: var(--texto-suave);
    line-height: 1.25;
}

.avaliacao-view-only,
.avaliacao-viewer-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.avaliacao-view-only {
    width: fit-content;
    max-width: 100%;
    padding: 0.58rem 0.7rem;
    border: 1px solid rgba(110, 91, 224, 0.24);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.42);
    color: var(--texto-suave);
    font-size: 0.84rem;
    font-weight: 800;
}

.avaliacao-view-only svg {
    width: 16px;
    height: 16px;
    color: var(--roxo-suave);
}

.avaliacao-viewer-actions {
    justify-content: space-between;
    width: 100%;
}

.avaliacao-viewer-actions span {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 900;
}

@keyframes avaliacaoRegistrada {
    from { transform: translateY(4px); border-color: rgba(42, 163, 108, 0.7); }
    to { transform: translateY(0); }
}

@media (max-width: 640px) {
    .avaliacao-hero {
        grid-template-columns: 1fr;
    }

    .avaliacao-progress-meta,
    .avaliacao-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .avaliacao-card-side,
    .avaliacao-jogo-stats {
        justify-items: stretch;
        width: 100%;
        min-width: 0;
    }

    .avaliacao-card-top small {
        white-space: normal;
    }
}

.home-avaliacao-pendente,
.home-notificacao-avaliacao {
    display: grid;
    gap: 0.45rem;
    max-width: 420px;
    padding: 0.72rem;
    border: 1px solid rgba(110, 91, 224, 0.3);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
}

.home-avaliacao-pendente span,
.home-notificacao-avaliacao {
    color: var(--texto-suave);
}

.home-avaliacao-pendente span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.home-notificacao-avaliacao span {
    display: grid;
    gap: 0.15rem;
}

.home-notificacao-avaliacao em {
    color: var(--verde);
    font-style: normal;
    font-weight: 900;
    margin-top: 0.2rem;
}

.home-avaliacao-pendente svg,
.home-notificacao-avaliacao svg {
    width: 17px;
    height: 17px;
    color: var(--roxo-suave);
}

.home-notificacao-avaliacao {
    grid-template-columns: auto 1fr;
    align-items: center;
    max-width: none;
    margin-bottom: 1rem;
    text-decoration: none;
}

.home-notificacao-avaliacao strong {
    color: var(--texto);
}

/* Home app layout */
.home-legacy-home-block {
    display: none !important;
}

.home-shell {
    gap: 1rem;
}

.home-app-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.1rem 0.05rem 0.15rem;
}

.home-app-head h1 {
    margin: 0.15rem 0 0;
    font-family: var(--fonte-display);
    font-size: 1.85rem;
    line-height: 1;
}

.home-club-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 48%;
    min-height: 44px;
    padding: 0.38rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.home-club-chip img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.home-club-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-alert-stack {
    display: grid;
    gap: 0.65rem;
}

.home-match-card {
    min-height: auto;
    border-color: color-mix(in srgb, var(--home-match-border) 70%, transparent);
    border-radius: 26px;
    background: var(--home-match-bg-end);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.home-match-bg {
    background:
        linear-gradient(140deg, var(--home-match-bg-start), var(--home-match-bg-mid) 54%, var(--home-match-bg-end)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--home-match-border) 22%, transparent) 0 1px, transparent 1px 46px);
}

.home-match-bg::after {
    inset: auto 10% -72px 10%;
    height: 160px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 42%, transparent);
    border-radius: 50% 50% 0 0;
    transform: none;
}

.home-match-content {
    min-height: auto;
    gap: 1rem;
    padding: 1rem;
}

.home-match-topline,
.home-match-actions,
.home-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.home-match-type {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 48%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--home-match-surface) 72%, transparent);
    color: var(--texto);
    font-size: 0.75rem;
    font-weight: 900;
}

.home-match-type svg {
    width: 15px;
    height: 15px;
    color: var(--verde);
}

.home-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
}

.home-team-side {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    min-width: 0;
    text-align: center;
}

.home-team-side strong {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 1.1em;
}

.home-shield {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 60%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--home-match-surface) 82%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 14px 28px rgba(0, 0, 0, 0.18);
}

.home-shield img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.home-opponent-logo-form {
    margin: 0;
}

.home-opponent-logo-button {
    display: grid;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.home-opponent-logo-button:hover .home-shield-opponent,
.home-opponent-logo-button:focus-visible .home-shield-opponent {
    border-color: var(--verde);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent);
}

.home-opponent-logo-button:focus-visible {
    outline: none;
}

.home-opponent-logo-button[aria-busy="true"] {
    cursor: wait;
    opacity: 0.62;
}

.home-shield-opponent.is-empty {
    background: color-mix(in srgb, var(--home-match-surface) 54%, transparent);
}

.home-shield-initials {
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 1.5rem;
    font-weight: 900;
}

.home-versus {
    display: grid;
    justify-items: center;
    gap: 0.18rem;
    min-width: 58px;
}

.home-versus b {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--verde) 16%, var(--home-match-surface));
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 1.05rem;
}

.home-versus-result {
    min-width: 82px;
}

.home-versus-result b {
    width: auto;
    min-width: 72px;
    padding: 0 0.55rem;
    white-space: nowrap;
}

.home-versus span,
.home-versus small {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.home-match-info h2,
.home-card-head h2 {
    margin: 0;
    font-family: var(--fonte-display);
    line-height: 1.05;
}

.home-match-info h2 {
    font-size: 1.75rem;
}

.home-match-meta {
    grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
    margin-top: 0.75rem;
}

.home-match-info .home-match-meta {
    display: flex;
    flex-wrap: wrap;
}

.home-match-location-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex: 0 0 100%;
}

.home-schedule-match-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 30px;
    margin-left: auto;
    padding: 0.34rem 0.52rem;
    border: 1px solid color-mix(in srgb, var(--verde) 48%, var(--home-match-border));
    border-radius: 11px;
    background: color-mix(in srgb, var(--verde) 11%, var(--home-match-surface));
    color: var(--verde);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.home-schedule-match-action:hover,
.home-schedule-match-action:focus-visible {
    border-color: var(--verde);
    background: color-mix(in srgb, var(--verde) 20%, var(--home-match-surface));
    color: var(--texto);
    outline: none;
    transform: translateY(-1px);
}

.home-schedule-match-action svg {
    width: 13px;
    height: 13px;
}

.home-match-meta span {
    max-width: 100%;
    border-radius: 14px;
}

.home-match-meta .home-match-weight {
    --home-weight-accent: var(--roxo);
    border-color: color-mix(in srgb, var(--home-weight-accent) 58%, var(--home-match-border));
    background: color-mix(in srgb, var(--home-weight-accent) 14%, var(--home-match-surface));
    color: var(--texto);
    white-space: nowrap;
}

.home-match-meta .home-match-weight[data-faixa="normal"] {
    --home-weight-accent: var(--verde);
}

.home-match-meta .home-match-weight[data-faixa="zero"] {
    --home-weight-accent: var(--texto-suave);
}

.home-match-meta .home-match-weight svg,
.home-match-meta .home-match-weight b {
    color: var(--home-weight-accent);
}

.home-match-meta .home-match-weight b {
    font-weight: 950;
}

.home-match-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.home-match-actions > .home-avaliacao-pendente {
    grid-column: 1 / -1;
}

.home-primary-action,
.home-secondary-action {
    min-height: 44px;
}

.home-presenca-form {
    width: auto;
    margin: 0;
}

.home-presenca-form .home-primary-action {
    width: 100%;
}

.home-match-actions > .home-primary-action:only-child {
    width: 100%;
}

.home-edit-event-action {
    min-width: 108px;
}

.home-match-actions > .home-edit-event-action:only-child {
    grid-column: 1 / -1;
    width: 100%;
}

.home-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.home-shortcut-card {
    position: relative;
    display: grid;
    gap: 0.34rem;
    min-height: 104px;
    padding: 0.78rem;
    border: 1px solid color-mix(in srgb, var(--roxo) 30%, rgba(255, 255, 255, 0.09));
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--roxo) 10%, rgba(255, 255, 255, 0.07)), rgba(255, 255, 255, 0.035));
    color: var(--texto);
    text-decoration: none;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        0 0 0 1px color-mix(in srgb, var(--roxo) 14%, transparent);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.home-shortcut-card:hover,
.home-shortcut-card:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--roxo) 55%, transparent);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.32),
        0 0 0 1px color-mix(in srgb, var(--roxo) 30%, transparent),
        0 0 26px var(--roxo-brilho);
}

.home-shortcut-card:active {
    transform: translateY(-1px);
}

.home-shortcut-card > span {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--verde) 28%, transparent), color-mix(in srgb, var(--verde) 10%, transparent));
    color: var(--verde);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--verde) 22%, transparent);
}

.home-shortcut-card svg {
    width: 20px;
    height: 20px;
}

.home-shortcut-badge {
    position: absolute;
    top: -8px;
    right: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(11, 14, 19, 0.9);
    border-radius: 999px;
    background: var(--roxo);
    color: #fff;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px var(--roxo-brilho);
    pointer-events: none;
}

.home-shortcut-card strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-shortcut-card small {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
}

.home-shortcut-card-promo {
    border-color: color-mix(in srgb, #c2743a 55%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, #c2743a 16%, rgba(255, 255, 255, 0.07)), rgba(255, 255, 255, 0.035));
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.28),
        0 0 0 1px color-mix(in srgb, #c2743a 30%, transparent),
        0 0 22px rgba(194, 116, 58, 0.25);
}

.home-shortcut-card-promo:hover,
.home-shortcut-card-promo:focus-visible {
    border-color: color-mix(in srgb, #c2743a 70%, transparent);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.32),
        0 0 0 1px color-mix(in srgb, #c2743a 45%, transparent),
        0 0 30px rgba(194, 116, 58, 0.4);
}

.home-shortcut-promo {
    position: absolute;
    top: -0.5rem;
    right: 0.7rem;
    z-index: 2;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #c2743a, #be4846);
    color: #fff;
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(190, 72, 70, 0.45);
    animation: home-shortcut-promo-pulse 1.8s ease-in-out infinite;
}

@keyframes home-shortcut-promo-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .home-shortcut-promo {
        animation: none;
    }
}

.home-shortcut-card.is-disabled {
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
}

.home-shortcut-card-locked > span {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    color: var(--texto-suave);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.home-shortcut-alert {
    position: absolute;
    top: -8px;
    right: -9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(11, 14, 19, 0.9);
    border-radius: 999px;
    background: linear-gradient(135deg, #c2743a, #be4846);
    color: #fff;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(190, 72, 70, 0.45);
    pointer-events: none;
    animation: home-shortcut-promo-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .home-shortcut-alert {
        animation: none;
    }
}

/* =========================================================
   HOME DO APK — nova ordem e novos blocos
   Sequencia na vertical: alerta -> proximo compromisso ->
   evolucoes -> destaques -> time ganhador -> atalhos. A ordem
   sai do `order` no grid da .home-shell,
   para nao mover os blocos de markup de lugar.
   Overlays (modal de overall, tour, painel de presencas) ficam
   em order 0 porque sao fixed/hidden e nao ocupam linha.
   ========================================================= */
.home-alert-stack     { order: 1; }
.home-match-card      { order: 2; }
.home-highlights-grid { order: 3; }
.home-shortcuts       { order: 4; }

/* Dentro dos destaques: evolucoes, cards em pe, time ganhador. */
.home-highlights-grid .home-likes-winners { order: 1; }
.home-highlights-grid .home-destaques     { order: 2; grid-column: 1 / -1; }
.home-highlights-grid .home-last-winner   { order: 3; }

/* ---------- cards em pe (retrato) ---------- */
.home-destaques {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    min-width: 0;
}

.home-destaque-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 230px;
    padding: 0.85rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    background: var(--fundo-card);
    box-shadow: var(--sombra);
    color: var(--texto);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.home-destaque-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--destaque-tint, transparent) 0%, transparent 62%);
    pointer-events: none;
}

.home-destaque-card:hover,
.home-destaque-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--borda-forte);
}

.home-destaque-azul    { --destaque-cor: var(--azul);  --destaque-tint: rgba(78, 123, 212, 0.1); }
.home-destaque-verde   { --destaque-cor: var(--verde); --destaque-tint: rgba(42, 163, 108, 0.1); }
.home-destaque-roxo    { --destaque-cor: var(--roxo);  --destaque-tint: rgba(110, 91, 224, 0.1); }
.home-destaque-laranja { --destaque-cor: #c2743a;      --destaque-tint: rgba(194, 116, 58, 0.12); }

.home-destaque-card-promo {
    border-color: color-mix(in srgb, #c2743a 40%, transparent);
}

.home-destaque-promo {
    position: absolute;
    top: -0.5rem;
    right: 0.7rem;
    z-index: 2;
    padding: 0.14rem 0.44rem;
    border-radius: 999px;
    background: #c2743a;
    color: #fff;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.3;
}

.home-destaque-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--fundo-card);
    border-radius: 999px;
    background: var(--roxo);
    color: #fff;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.home-destaque-icone {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid color-mix(in srgb, var(--destaque-cor, var(--roxo)) 26%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--destaque-cor, var(--roxo)) 13%, transparent);
    color: var(--destaque-cor, var(--roxo));
}

.home-destaque-icone svg {
    width: 23px;
    height: 23px;
}

.home-destaque-copy {
    position: relative;
    z-index: 1;
    margin-top: 0.7rem;
    min-width: 0;
}

.home-destaque-copy strong {
    display: block;
    font-family: var(--fonte-display);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.2;
}

.home-destaque-copy small {
    display: block;
    margin-top: 0.14rem;
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 700;
}

.home-destaque-desc {
    position: relative;
    z-index: 1;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 0.71rem;
    font-weight: 500;
    line-height: 1.5;
}

.home-destaque-card.is-disabled {
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
}

/* ---------- ultimas evolucoes: 3 cartas, trocando de 3 em 3 ---------- */
.home-evolution-card-rotator {
    min-height: 0;
    /* A coluna do rotator e `auto` por padrao e passava a medir pelo max-content
       do grupo, o que estourava a largura do painel e cortava a 3a carta. */
    grid-template-columns: minmax(0, 1fr);
}

/* Mao de baralho: as 3 cartas se sobrepoem em leque em vez de ficarem em
   colunas separadas. Flex + margem negativa (gap negativo nao existe), e a
   sobreposicao e para dentro, entao nada encosta na borda do painel. */
.home-evolution-group {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
    /* Folga no topo: o rotator recorta o que passa da borda, e a carta do meio
       sobe 5px e cresce 7% a partir da base, invadindo esse limite. */
    padding: 1.7rem 0 0.2rem;
}

.home-evolution-item {
    display: grid;
    justify-items: stretch;
    gap: 0.3rem;
    flex: 0 0 auto;
    width: 34%;
    min-width: 0;
}

.home-evolution-item + .home-evolution-item {
    margin-left: -8%;
}

/* A carta inclina; o texto embaixo fica reto. */
.home-evolution-group .home-likes-card-stage {
    transform: rotate(var(--carta-leque, 0deg));
    transform-origin: bottom center;
}

.home-evolution-item:nth-child(1) { z-index: 1; --carta-leque: -9deg; }
.home-evolution-item:nth-child(3) { z-index: 2; --carta-leque: 9deg; }

/* A do meio vem na frente, um pouco maior e mais alta - a carta que se
   destaca na mao. */
.home-evolution-item:nth-child(2) {
    z-index: 3;
    --carta-leque: 0deg;
}

.home-evolution-item:nth-child(2) .home-likes-card-stage {
    transform: translateY(-5px) scale(1.07);
}

/* Entrada do proximo trio: chegam juntas, mas uma atras da outra, para nao
   parecerem um bloco colado. A animacao padrao era pensada para uma carta
   sozinha e de 260px - aqui o deslocamento e proporcionalmente menor.
   `backwards` mantem a carta no primeiro quadro enquanto o atraso corre,
   senao ela apareceria no lugar e depois saltaria para tras. */
@keyframes homeEvolutionLeque {
    0% {
        opacity: 0;
        transform: translate(26px, 12px) rotate(9deg) scale(0.86);
    }

    62% {
        opacity: 1;
        transform: translate(-5px, -2px) rotate(-2.5deg) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

.home-evolution-group.is-entering .player-card {
    animation: homeEvolutionLeque 0.72s cubic-bezier(0.2, 0.8, 0.24, 1) backwards;
}

.home-evolution-group.is-entering .home-evolution-item:nth-child(1) .player-card { animation-delay: 0s; }
.home-evolution-group.is-entering .home-evolution-item:nth-child(2) .player-card { animation-delay: 0.11s; }
.home-evolution-group.is-entering .home-evolution-item:nth-child(3) .player-card { animation-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
    .home-evolution-group.is-entering .player-card {
        animation: none;
    }
}

/* A carta ocupa a largura da coluna. Os `justify-items: center` herdados
   fariam cada nivel medir pelo conteudo, e a carta (que e toda absoluta,
   logo sem largura propria) colapsava para zero. */
.home-evolution-group .home-likes-card-stage,
.home-evolution-group .player-card-module {
    justify-items: stretch;
    width: 100%;
    min-width: 0;
}

.home-evolution-item > .home-evolution-change,
.home-evolution-item > .home-evolution-kicker {
    justify-self: center;
}

/* A carta passa a se medir pela propria largura (cqw) em vez de vw:
   com 3 por linha, os tamanhos em vw sairiam gigantes. */
/* Meio termo de tamanho: a versao de uma carta por tela ficava grande demais,
   e encolher para caber 3 lado a lado deixava tudo pequeno e sem interacao. */
.home-evolution-group .home-likes-card-stage .player-card {
    container-type: inline-size;
    width: min(100%, 104px);
    margin-inline: auto;
    filter: drop-shadow(-4px 6px 10px rgba(0, 0, 0, 0.55));
}

/* O overall nasce com min-width: 54px, que numa carta de 300px equivale a 18%
   da largura; numa de 104px viram 52% e o numero, centrado dentro dessa caixa,
   saia do lugar. Aqui a largura e proporcional, como no resto da carta. */
.home-evolution-group .player-card-overall {
    min-width: 0;
    width: 18%;
    font-size: 13.6cqw;
}
.home-evolution-group .player-card-position { font-size: 4.6cqw; }
.home-evolution-group .player-card-position svg { width: 4.4cqw; height: 4.4cqw; }
.home-evolution-group .player-card-name {
    bottom: calc(39% - 2px);
    font-size: 8.3cqw;
}
.home-evolution-group .player-card-photo span { font-size: 11cqw; }

/* As estrelas de ATK/DEF usam coluna de 1.45rem fixa e texto de ~0.5rem:
   nesse tamanho nao ha como deixar legivel, entao continuam fora. */
.home-evolution-group .player-card-traits,
.home-evolution-group .player-card-club {
    display: none;
}

/* Estatisticas de volta. O bloco original mistura rem e vw fixos, que numa
   carta de 104px viram 2-3px; por isso os titulos usam cqw e ficam sem icones. */
.home-evolution-group .player-card-stats {
    bottom: 28%;
    padding: 0;
}

.home-evolution-group .player-card-stats-grid > div {
    grid-template-rows: 5.4cqw 8cqw;
    padding: 0 0.08rem;
}

.home-evolution-group .player-card-stats-grid > div > span {
    display: inline-flex;
    min-height: 5.4cqw;
    color: var(--card-player-stats-label-color, currentColor);
    font-size: 4.4cqw;
    line-height: 1;
}

.home-evolution-group .player-card-stats-grid > div > span svg {
    display: none;
}

.home-evolution-group .player-card-stats strong {
    margin-top: 0;
    font-size: 7.5cqw;
    line-height: 1;
}

.home-evolution-group .player-card-evolution-average {
    position: absolute;
    right: 20%;
    bottom: calc(11% + 4px);
    left: 20%;
    z-index: 4;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25cqw;
    min-height: 8cqw;
    color: var(--card-player-stats-value-color, #fff4de);
    font-family: var(--card-player-stats-font, var(--fonte-display));
    line-height: 1;
    text-align: center;
    text-shadow: var(--card-player-text-shadow, none);
}

.home-evolution-group .player-card-evolution-average span {
    color: var(--card-player-stats-label-color, currentColor);
    font-size: 4.4cqw;
    font-weight: 900;
    text-transform: uppercase;
}

.home-evolution-group .player-card-evolution-average strong {
    font-size: 7.2cqw;
    font-weight: 900;
}

/* O chip nasce com min-width: 138px (pensado para uma carta por tela).
   Com 3 por linha isso somava 3x138 e era o que estourava o painel. */
.home-evolution-group .home-evolution-change {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    padding: 0.14rem 0.44rem;
    gap: 0.24rem;
    font-size: 0.72rem;
    box-shadow: none;
}

.home-evolution-group .home-evolution-change svg {
    width: 11px;
    height: 11px;
}

.home-evolution-group .home-evolution-kicker {
    max-width: 100%;
    padding: 0.06rem 0.38rem;
    font-size: 0.62rem;
}

.home-evolution-group .home-likes-card-meta {
    max-width: 100%;
    min-width: 0;
}

.home-evolution-group .home-likes-card-meta strong {
    max-width: 100%;
    font-size: 0.74rem;
}

.home-evolution-group .home-likes-card-meta small { font-size: 0.62rem; }

/* A variacao trocou de lugar: antes ficava no slide, agora em cada carta. */
.home-evolution-item.is-down .home-evolution-kicker,
.home-evolution-item.is-down .home-evolution-change svg,
.home-evolution-item.is-down .home-evolution-change strong {
    color: var(--vermelho);
}

.home-evolution-item.is-down .home-evolution-kicker {
    border-color: color-mix(in srgb, var(--vermelho) 30%, transparent);
    background: color-mix(in srgb, var(--vermelho) 12%, transparent);
}

/* Media/Nota final nao cabe legivel com 3 cartas na largura do celular. */
@media (max-width: 620px) {
    .home-evolution-group .home-evolution-score {
        display: none;
    }
}

/* ---------- atalhos restantes: 2 colunas, sem halo ---------- */
.home-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-shortcut-card,
.home-shortcut-card-promo {
    box-shadow: var(--sombra);
}

.home-shortcut-card:hover,
.home-shortcut-card:focus-visible,
.home-shortcut-card-promo:hover,
.home-shortcut-card-promo:focus-visible {
    border-color: var(--borda-forte);
    box-shadow: var(--sombra);
}

.home-shortcut-promo,
.home-shortcut-alert,
.home-shortcut-badge {
    box-shadow: none;
}

body.home-tour-active {
    overflow: hidden;
}

.home-tour {
    position: fixed;
    inset: 0;
    z-index: 9800;
    pointer-events: none;
}

.home-tour[hidden] {
    display: none !important;
}

.home-tour-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--tour-x, 50%) var(--tour-y, 50%), rgba(45, 160, 105, 0.15), transparent 10rem),
        rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    pointer-events: auto;
}

body.home-tour-active .home-shortcut-card.home-tour-highlight {
    position: relative;
    z-index: 9802;
    border-color: color-mix(in srgb, var(--roxo) 72%, #ffffff 12%);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--roxo) 20%, rgba(255, 255, 255, 0.1)), rgba(255, 255, 255, 0.045)),
        var(--fundo-card);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--roxo) 42%, transparent),
        0 0 0 8px rgba(45, 160, 105, 0.08),
        0 20px 48px rgba(0, 0, 0, 0.55),
        0 0 42px var(--roxo-brilho);
    transform: translateY(-2px) scale(1.015);
    pointer-events: auto;
}

body.home-tour-active .home-shortcut-card.home-tour-highlight::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.28);
    opacity: 0.75;
    pointer-events: none;
}

body.home-tour-active .page-tour-highlight:not(.home-shortcut-card) {
    position: relative;
    z-index: 9802;
    border-radius: 12px;
    outline: 2px solid color-mix(in srgb, var(--roxo) 72%, #ffffff 12%);
    outline-offset: 6px;
    box-shadow:
        0 0 0 8px rgba(45, 160, 105, 0.08),
        0 18px 42px rgba(0, 0, 0, 0.46),
        0 0 38px var(--roxo-brilho);
}

.home-tour-card {
    position: fixed;
    left: var(--tour-card-left, 1rem);
    top: var(--tour-card-top, 1rem);
    z-index: 9803;
    width: min(360px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--roxo) 48%, rgba(255, 255, 255, 0.12));
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
        color-mix(in srgb, var(--fundo-card) 92%, #000);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), 0 0 36px var(--roxo-brilho);
    pointer-events: auto;
}

.home-tour-card::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: var(--tour-arrow-left, 28px);
    top: -8px;
    border-left: 1px solid color-mix(in srgb, var(--roxo) 48%, rgba(255, 255, 255, 0.12));
    border-top: 1px solid color-mix(in srgb, var(--roxo) 48%, rgba(255, 255, 255, 0.12));
    background: color-mix(in srgb, var(--fundo-card) 92%, #000);
    transform: rotate(45deg);
}

.home-tour-card.is-above::before {
    top: auto;
    bottom: -8px;
    transform: rotate(225deg);
}

.home-tour-kicker {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: rgba(42, 163, 108, 0.13);
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.home-tour-card h2 {
    margin: 0.72rem 0 0.38rem;
    font-family: var(--fonte-display);
    font-size: 1.22rem;
    line-height: 1.12;
}

.home-tour-card p {
    color: var(--texto-suave);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
}

.home-tour-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 1rem;
}

.home-tour-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    font-family: var(--fonte-display);
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.home-tour-skip {
    padding: 0 0.85rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--texto-suave);
}

.home-tour-next {
    gap: 0.45rem;
    padding: 0 0.95rem;
    background: linear-gradient(135deg, var(--roxo), var(--roxo-forte));
    color: #fff;
    box-shadow: 0 12px 28px var(--roxo-brilho);
}

.home-tour-next svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 640px) {
    .home-tour-card {
        width: min(330px, calc(100vw - 1.5rem));
    }

    body.home-tour-active .home-shortcut-card.home-tour-highlight {
        transform: translateY(-1px) scale(1.02);
    }
}

body.presencas-panel-open {
    overflow: hidden;
}

.home-presencas-panel {
    position: fixed;
    inset: 0;
    z-index: 9600;
    display: grid;
    place-items: end center;
    padding: 1rem;
}

.home-presencas-panel[hidden] {
    display: none !important;
}

.home-presencas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(8px);
}

.home-presencas-sheet {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(620px, calc(100vw - 1.5rem));
    max-height: min(720px, calc(100vh - 2rem));
    gap: 1rem;
    overflow: auto;
    padding: 1rem;
    border: 1px solid rgba(48, 150, 140, 0.26);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(12, 18, 32, 0.98), rgba(6, 10, 20, 0.98));
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.58);
}

.home-presencas-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.home-presencas-head h2,
.home-presencas-head p {
    margin: 0;
}

.home-presencas-head h2 {
    margin-top: 0.2rem;
    font-family: var(--fonte-display);
    font-size: 1.6rem;
}

.home-presencas-head p {
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.home-presencas-close {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    cursor: pointer;
}

.home-presencas-close svg {
    width: 17px;
    height: 17px;
}

.home-presencas-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.home-presencas-stats span {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
}

.home-presencas-stats strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.35rem;
    line-height: 1;
}

.home-presencas-list {
    display: grid;
    gap: 0.42rem;
}

.home-presencas-rankings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.home-presencas-ranking-card {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.04);
}

.home-presencas-ranking-card summary {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    cursor: pointer;
    list-style: none;
}

.home-presencas-ranking-card summary::-webkit-details-marker {
    display: none;
}

.home-presencas-ranking-card summary span {
    display: grid;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 10px;
    background: rgba(42, 163, 108, 0.12);
    color: var(--verde);
}

.home-presencas-ranking-card summary span svg,
.home-presencas-ranking-card summary > i {
    width: 15px;
    height: 15px;
}

.home-presencas-ranking-card summary > i {
    margin-left: auto;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.home-presencas-ranking-card[open] summary > i {
    transform: rotate(180deg);
}

.home-presencas-ranking-card summary strong {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-presencas-ranking-card ol {
    display: grid;
    gap: 0.34rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-presencas-ranking-card li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.42rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.home-presencas-ranking-card li span {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.8rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-presencas-ranking-card li em,
.home-presencas-ranking-card p {
    flex: 0 0 auto;
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
}

.home-presencas-meses {
    display: grid;
    gap: 0.8rem;
}

.home-presencas-mes {
    display: grid;
    gap: 0.62rem;
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.home-presencas-mes > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.home-presencas-mes > summary::-webkit-details-marker {
    display: none;
}

.home-presencas-mes h3 {
    margin: 0;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.05rem;
}

.home-presencas-mes > summary > span {
    flex: 0 0 auto;
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 900;
}

.home-presencas-mes > summary > i {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.home-presencas-mes[open] > summary > i {
    transform: rotate(180deg);
}

.home-presencas-mes-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.home-presencas-mes-stats span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.48rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 800;
}

.home-presencas-mes-stats strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
    line-height: 1;
}

.home-presencas-jogo {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.12);
}

.home-presencas-jogo summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 42px;
    padding: 0.58rem 0.68rem;
    cursor: pointer;
    list-style: none;
}

.home-presencas-jogo summary::-webkit-details-marker {
    display: none;
}

.home-presencas-jogo summary span {
    color: var(--texto);
    font-weight: 900;
}

.home-presencas-jogo summary small {
    margin-left: auto;
    color: var(--texto-suave);
    font-weight: 800;
}

.home-presencas-jogo summary svg {
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.home-presencas-jogo[open] summary svg {
    transform: rotate(180deg);
}

.home-presencas-jogo .home-presencas-list {
    padding: 0 0.5rem 0.5rem;
}

.home-presencas-form {
    display: grid;
    gap: 0.65rem;
    padding: 0 0.5rem 0.6rem;
}

.home-presencas-form .home-presencas-list {
    padding: 0;
}

.home-presencas-edit-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
    padding-top: 0.2rem;
}

.home-presencas-edit-actions label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.home-presencas-edit-actions label span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.home-presencas-edit-actions select {
    min-width: 0;
    min-height: 38px;
    width: 100%;
    padding: 0.46rem 0.58rem;
    border: 1px solid var(--borda-forte);
    border-radius: 11px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 0.86rem;
}

.home-presencas-edit-actions select:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px rgba(110, 91, 224, 0.2);
}

.home-presencas-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 42px;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-left: 4px solid var(--presenca-cor, var(--verde));
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
}

.home-presencas-row span {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-presencas-row em {
    flex: 0 0 auto;
    color: var(--presenca-cor, var(--verde));
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 900;
}

.home-presencas-empty {
    margin: 0;
}

@media (max-width: 520px) {
    .home-presencas-rankings {
        grid-template-columns: 1fr;
    }

    .home-presencas-edit-actions {
        grid-template-columns: 1fr;
    }

    .home-presencas-stats,
    .home-presencas-mes-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-card-head > svg {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--verde);
}

.home-card-head h2 {
    margin-top: 0.2rem;
    font-size: 1.35rem;
}

@media (max-width: 640px) {
    .home-app-head {
        align-items: flex-start;
    }

    .home-app-head h1 {
        font-size: 1.55rem;
    }

    .home-club-chip {
        max-width: 52%;
    }

    .home-match-content {
        padding: 0.9rem;
    }

    .home-scoreboard {
        gap: 0.45rem;
    }

    .home-shield {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }

    .home-shield img {
        width: 48px;
        height: 48px;
    }

    .home-versus b {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .home-match-info h2 {
        font-size: 1.35rem;
    }

    .home-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .home-shortcut-card {
        min-height: 96px;
        padding: 0.64rem;
        border-radius: 18px;
    }

    .home-shortcut-card strong {
        white-space: normal;
    }

    .home-performance-stats {
        gap: 0.4rem;
    }
}

@media (max-width: 390px) {
    .home-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .home-shortcut-card {
        min-height: 88px;
        padding: 0.5rem 0.38rem;
        border-radius: 15px;
    }

    .home-shortcut-card > span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    .home-shortcut-card svg {
        width: 16px;
        height: 16px;
    }

    .home-shortcut-card strong {
        font-size: 0.72rem;
        line-height: 1.1;
    }

    .home-shortcut-card small {
        font-size: 0.63rem;
        line-height: 1.15;
    }

    .home-club-chip span {
        display: none;
    }
}

.push-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 680px) {
    .push-control-actions,
    .push-control-actions .btn {
        width: 100%;
    }
}

.avaliacao-meu-voto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

.avaliacao-meu-voto svg.lucide { width: 14px; height: 14px; }

.avaliacao-meu-voto.meu-voto-like {
    background: rgba(42, 163, 108, 0.15);
    color: var(--verde);
}

.avaliacao-meu-voto.meu-voto-dislike {
    background: rgba(201, 82, 79, 0.15);
    color: var(--vermelho);
}

.avaliacao-totais {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.avaliacao-total {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.avaliacao-total svg.lucide { width: 11px; height: 11px; }
.avaliacao-total-like { color: var(--verde); }
.avaliacao-total-dislike { color: var(--vermelho); }
.avaliacao-badge { font-size: 12px; line-height: 1; }

.badge-like-stat,
.badge-neutral-stat,
.badge-dislike-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 42px;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-like-stat {
    background: rgba(42, 163, 108, 0.1);
    border: 1px solid rgba(42, 163, 108, 0.35);
    color: var(--verde);
}

.badge-neutral-stat {
    background: rgba(196, 150, 60, 0.1);
    border: 1px solid rgba(196, 150, 60, 0.35);
    color: #c4963c;
}

.badge-dislike-stat {
    background: rgba(201, 82, 79, 0.1);
    border: 1px solid rgba(201, 82, 79, 0.35);
    color: var(--vermelho);
}

.badge-like-stat svg.lucide,
.badge-neutral-stat svg.lucide,
.badge-dislike-stat svg.lucide { width: 12px; height: 12px; }

.estatisticas-presenca-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.presenca-mini-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 32px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.presenca-mini-item svg.lucide {
    width: 12px;
    height: 12px;
}

.presenca-mini-item.presente {
    background: rgba(42, 163, 108, 0.1);
    border: 1px solid rgba(42, 163, 108, 0.35);
    color: var(--verde);
}

.presenca-mini-item.falta {
    background: rgba(201, 82, 79, 0.1);
    border: 1px solid rgba(201, 82, 79, 0.35);
    color: var(--vermelho);
}

.presenca-mini-item.atraso-leve {
    background: rgba(196, 150, 60, 0.1);
    border: 1px solid rgba(196, 150, 60, 0.35);
    color: #c4963c;
}

.presenca-mini-item.atraso-pesado {
    background: rgba(194, 116, 58, 0.1);
    border: 1px solid rgba(194, 116, 58, 0.35);
    color: #c9834a;
}

/* ===========================
   ESTATÍSTICAS
=========================== */
.estatisticas-header {
    gap: 1rem;
    align-items: flex-start;
}

.estatisticas-header p {
    margin: 0.2rem 0 0;
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.form-busca-estatisticas {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.form-busca-estatisticas input {
    width: 220px;
    padding: 0.55rem 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font: inherit;
}

.form-busca-estatisticas input:focus {
    outline: none;
    border-color: var(--roxo);
}

.tabela-estatisticas-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.tabela-estatisticas th { background: rgba(110, 91, 224, 0.05); }

.tabela-estatisticas th a {
    display: block;
    color: inherit;
    white-space: nowrap;
}

.tabela-estatisticas th.ordenacao-ativa,
.tabela-estatisticas th:hover {
    background: rgba(110, 91, 224, 0.13);
}

.tabela-estatisticas th.ordenacao-ativa a { color: var(--roxo-suave); }

.estatisticas-vazio {
    padding: 2rem 1rem !important;
    text-align: center;
    color: var(--texto-suave);
}

.estatisticas-toolbar {
    margin-bottom: 0.65rem;
}

.estatisticas-order-card {
    overflow: hidden;
    background: color-mix(in srgb, var(--fundo-card) 94%, var(--verde) 6%);
    border: 1px solid color-mix(in srgb, var(--borda) 82%, var(--verde) 18%);
    border-radius: var(--radius-sm);
}

.estatisticas-order-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    list-style: none;
}

.estatisticas-order-summary::-webkit-details-marker {
    display: none;
}

.estatisticas-order-summary::marker {
    content: "";
}

.estatisticas-order-title {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.estatisticas-order-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0.38rem;
    color: var(--verde);
    background: rgba(40, 140, 85, 0.1);
    border: 1px solid rgba(40, 140, 85, 0.18);
    border-radius: var(--radius-sm);
}

.estatisticas-order-title strong,
.estatisticas-order-title small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estatisticas-order-title strong {
    font-size: 0.85rem;
}

.estatisticas-order-title small {
    margin-top: 0.1rem;
    color: var(--texto-suave);
    font-size: 0.68rem;
}

.estatisticas-order-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--texto-suave);
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.estatisticas-order-chev svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.estatisticas-order-card[open] .estatisticas-order-chev svg {
    transform: rotate(180deg);
}

.estatisticas-order-card[open] {
    overflow: visible;
}

.estatisticas-ordenacao-form {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    align-items: end;
    padding: 0 0.75rem 0.75rem;
}

.estatisticas-ordenacao-form > label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.estatisticas-ordenacao-form > label > span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estatisticas-ordenacao-form > label > select,
.estatisticas-ordenacao-form > label > input {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0.5rem 2rem 0.5rem 0.7rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font: inherit;
}

.estatisticas-ordenacao-form > label > select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
        linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 17px,
        calc(100% - 11px) 17px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.estatisticas-ordenacao-form > label > select:focus,
.estatisticas-ordenacao-form > label > input:focus {
    outline: none;
    border-color: rgba(40, 140, 85, 0.5);
    box-shadow: 0 0 0 2px rgba(40, 140, 85, 0.08);
}

.estatisticas-posicoes-field {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    background: color-mix(in srgb, var(--fundo-input) 76%, transparent);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.estatisticas-posicoes-field > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.55rem 0.65rem;
    cursor: pointer;
    list-style: none;
}

.estatisticas-posicoes-field > summary::-webkit-details-marker {
    display: none;
}

.estatisticas-posicoes-field > summary::marker {
    content: "";
}

.estatisticas-posicoes-field > summary strong,
.estatisticas-posicoes-field > summary small {
    display: block;
}

.estatisticas-posicoes-field > summary strong {
    color: var(--texto);
    font-size: 0.74rem;
    text-transform: uppercase;
}

.estatisticas-posicoes-field > summary small {
    margin-top: 0.08rem;
    color: var(--texto-suave);
    font-size: 0.66rem;
    font-weight: 500;
}

.estatisticas-posicoes-field > summary svg {
    width: 17px;
    height: 17px;
    color: var(--texto-suave);
    transition: transform 0.2s ease;
}

.estatisticas-posicoes-field[open] > summary svg {
    transform: rotate(180deg);
}

.estatisticas-posicoes-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: 0.4rem;
    padding: 0 0.6rem 0.6rem;
}

.estatisticas-posicao-opcao {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.estatisticas-posicao-opcao input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.estatisticas-posicao-opcao span {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.38rem 0.5rem;
    overflow: hidden;
    color: var(--texto-suave);
    background: color-mix(in srgb, var(--fundo-card) 74%, transparent);
    border: 1px solid var(--borda);
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.estatisticas-posicao-opcao span svg {
    width: 18px;
    height: 18px;
    padding: 0.18rem;
    color: transparent;
    border: 1px solid var(--borda-forte);
    border-radius: 5px;
    stroke-width: 3;
}

.estatisticas-posicao-opcao:hover span {
    color: var(--texto);
    border-color: var(--borda-forte);
}

.estatisticas-posicao-opcao input:focus-visible + span {
    outline: 2px solid color-mix(in srgb, var(--roxo) 65%, transparent);
    outline-offset: 2px;
}

.estatisticas-posicao-opcao input:checked + span {
    color: color-mix(in srgb, var(--vermelho) 80%, white 20%);
    background: color-mix(in srgb, var(--vermelho) 11%, var(--fundo-input));
    border-color: color-mix(in srgb, var(--vermelho) 45%, var(--borda));
}

.estatisticas-posicao-opcao input:checked + span svg {
    color: #fff;
    background: var(--vermelho);
    border-color: var(--vermelho);
}

.estatisticas-filtrar-btn {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    height: 40px;
    margin: 0;
}

.estatisticas-filtrar-btn svg {
    width: 16px;
    height: 16px;
}

.estatisticas-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0.75rem;
}

.estatisticas-player-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.estatisticas-player-card:hover,
.estatisticas-player-card:focus-visible {
    border-color: rgba(40, 140, 85, 0.38);
    box-shadow: 0 0 0 1px rgba(40, 140, 85, 0.08);
    outline: none;
}

.estatisticas-player-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 30px;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.estatisticas-player-main {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.estatisticas-player-main > strong {
    overflow-wrap: anywhere;
    font-size: 0.98rem;
    line-height: 1.2;
}

.estatisticas-player-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.estatisticas-ranking-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    min-width: 68px;
    padding: 0.38rem 0.48rem;
    overflow: hidden;
    color: color-mix(in srgb, var(--verde) 80%, white 20%);
    background:
        linear-gradient(145deg, rgba(40, 140, 85, 0.14), rgba(40, 140, 85, 0.035)),
        var(--fundo-input);
    border: 1px solid rgba(40, 140, 85, 0.28);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    font-variant-numeric: tabular-nums;
}

.estatisticas-ranking-card::after {
    content: "";
    position: absolute;
    top: -18px;
    right: -18px;
    width: 38px;
    height: 38px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.09;
    filter: blur(7px);
}

.estatisticas-ranking-label {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    color: var(--texto-suave);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.estatisticas-ranking-label svg {
    width: 10px;
    height: 10px;
    color: currentColor;
    stroke-width: 2.4;
}

.estatisticas-ranking-card strong {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    color: currentColor;
    font-family: var(--fonte-display);
    font-size: 0.98rem;
    line-height: 1;
}

.estatisticas-ranking-card small {
    color: var(--texto-suave);
    font-family: var(--fonte-corpo);
    font-size: 0.57rem;
    font-weight: 700;
}

.estatisticas-ranking-card.is-top-1 {
    color: #c4963c;
    background:
        linear-gradient(145deg, rgba(196, 150, 60, 0.17), rgba(196, 150, 60, 0.035)),
        var(--fundo-input);
    border-color: rgba(196, 150, 60, 0.34);
}

.estatisticas-ranking-card.is-top-2 {
    color: #cbd5e1;
    border-color: rgba(203, 213, 225, 0.28);
}

.estatisticas-ranking-card.is-top-3 {
    color: #d59a6f;
    border-color: rgba(213, 154, 111, 0.3);
}

.estatisticas-aproveitamento {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 0.1rem;
    flex: 0 0 auto;
    min-width: 64px;
}

.estatisticas-aproveitamento span {
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estatisticas-aproveitamento strong {
    font-family: var(--fonte-display);
    font-size: 1.05rem;
    color: var(--verde);
}

.estatisticas-detail-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--texto-suave);
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.estatisticas-detail-toggle:hover,
.estatisticas-detail-toggle:focus-visible {
    color: var(--verde);
    border-color: rgba(40, 140, 85, 0.35);
    outline: none;
}

.estatisticas-detail-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.estatisticas-player-card.is-details-open .estatisticas-detail-toggle svg {
    transform: rotate(180deg);
}

.estatisticas-record-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.estatisticas-record-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 32px;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.estatisticas-record-pill strong {
    color: var(--texto);
    font-size: 0.95rem;
}

.estatisticas-record-pill.jogos {
    border-color: rgba(110, 91, 224, 0.32);
    background: rgba(110, 91, 224, 0.1);
}

.estatisticas-record-pill.vitoria {
    border-color: rgba(42, 163, 108, 0.3);
    background: rgba(42, 163, 108, 0.08);
}

.estatisticas-record-pill.empate {
    border-color: rgba(78, 123, 212, 0.3);
    background: rgba(78, 123, 212, 0.08);
}

.estatisticas-record-pill.derrota {
    border-color: rgba(201, 82, 79, 0.3);
    background: rgba(201, 82, 79, 0.08);
}

.estatisticas-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
}

.estatisticas-metric-grid[hidden] {
    display: none;
}

.estatisticas-metric-grid > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    min-height: 70px;
    padding: 0.5rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.estatisticas-metric-grid > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.estatisticas-metric-grid dt {
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.estatisticas-metric-grid dd {
    margin: 0;
    color: var(--texto);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.estatisticas-metric-combo {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.estatisticas-metric-combo strong {
    color: var(--texto);
    font-size: 0.98rem;
    line-height: 1.1;
}

.estatisticas-metric-combo span {
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.estatisticas-nota-recente-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.estatisticas-nota-recente-toggle span {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    text-transform: none;
    font-size: 0.7rem;
    line-height: 1.2;
}

.estatisticas-nota-recente-toggle svg {
    width: 12px;
    height: 12px;
}

.estatisticas-notas-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(8px);
}

.estatisticas-notas-modal[hidden] {
    display: none;
}

.estatisticas-notas-modal-panel {
    position: relative;
    z-index: 1;
    width: min(360px, 92vw);
    max-height: min(78vh, 520px);
    display: grid;
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: var(--fundo-card);
    box-shadow: var(--sombra-roxa);
}

.estatisticas-notas-modal-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: pointer;
}

.estatisticas-notas-modal-head,
.estatisticas-notas-modal-lista {
    position: relative;
    z-index: 1;
}

.estatisticas-notas-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.estatisticas-notas-modal-head span {
    color: var(--texto-suave);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.estatisticas-notas-modal-head h3 {
    margin: 0.2rem 0 0;
    font-size: 1.05rem;
    line-height: 1.2;
}

.estatisticas-notas-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    cursor: pointer;
}

.estatisticas-notas-modal-lista {
    display: grid;
    gap: 0.45rem;
    max-height: 52vh;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 0.2rem;
}

.estatisticas-nota-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.8rem;
}

.estatisticas-nota-item span:first-child {
    color: var(--texto-suave);
}

.estatisticas-nota-item-resultado {
    min-width: 1.4rem;
    text-align: center;
    color: var(--texto-suave);
    font-weight: 800;
}

.estatisticas-nota-item strong {
    color: var(--texto);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.estatisticas-nota-item-vazia {
    display: flex;
    justify-content: center;
    color: var(--texto-suave);
    font-weight: 700;
}
}

.estatisticas-nota-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.2);
    border: 1px solid var(--borda);
    color: var(--texto);
    font-size: 0.72rem;
}

.estatisticas-nota-item span,
.estatisticas-nota-item strong {
    font-size: 0.72rem;
}

.estatisticas-nota-item-resultado {
    color: var(--texto-suave);
    font-weight: 900;
}

.estatisticas-nota-item-vazia {
    display: block;
    color: var(--texto-suave);
    text-align: center;
    padding: 0.55rem;
}

.estatisticas-nota-item-clicavel {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.estatisticas-nota-item-clicavel:hover,
.estatisticas-nota-item-clicavel:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--borda-forte);
}

.estatisticas-detalhe-item {
    display: grid;
    gap: 0.3rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.estatisticas-detalhe-item-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.estatisticas-detalhe-item-topo span {
    color: var(--texto-suave);
}

.estatisticas-detalhe-item-topo strong {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.estatisticas-detalhe-item p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.7rem;
    line-height: 1.35;
}

.estatisticas-detalhe-item-total {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--borda-forte);
}

.estatisticas-detalhe-item-total .estatisticas-detalhe-item-topo strong {
    font-size: 0.95rem;
}

.estatisticas-detalhe-item-resumo {
    min-width: 0;
    gap: 0.35rem;
    padding: 0.65rem 0.7rem;
}

.estatisticas-detalhe-resumo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.estatisticas-detalhe-resumo-cabecalho > span:first-child {
    min-width: 0;
    color: var(--texto-suave);
    font-size: 0.76rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.estatisticas-detalhe-resumo-valor {
    min-width: 0;
    color: var(--texto);
    font-size: 1.05rem;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.estatisticas-detalhe-item-impacto {
    gap: 0.45rem;
    padding: 0.72rem;
    background: color-mix(in srgb, var(--verde) 9%, var(--fundo-card));
    border-color: color-mix(in srgb, var(--verde) 48%, var(--borda));
}

.estatisticas-detalhe-item-impacto .estatisticas-detalhe-resumo-valor {
    color: var(--verde);
    font-size: 1.4rem;
}

.estatisticas-detalhe-peso {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 0.22rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--verde) 42%, var(--borda));
    border-radius: 999px;
    background: color-mix(in srgb, var(--verde) 13%, transparent);
    color: var(--verde);
    font-size: 0.65rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.estatisticas-detalhe-item p.estatisticas-detalhe-calculo {
    margin-top: 0.1rem;
    padding-top: 0.4rem;
    border-top: 1px solid color-mix(in srgb, var(--borda) 75%, transparent);
    font-size: 0.67rem;
    overflow-wrap: anywhere;
}

.estatisticas-last-game {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.estatisticas-last-game span {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.estatisticas-last-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    max-width: 100%;
    white-space: nowrap;
}

.estatisticas-last-rating .badge-like-stat,
.estatisticas-last-rating .badge-dislike-stat {
    min-width: 36px;
    padding-inline: 6px;
}

.estatisticas-last-rating .estatisticas-rating-neutral {
    min-width: 36px;
    padding-inline: 6px;
}

.estatisticas-player-card .badge-like-stat,
.estatisticas-player-card .badge-neutral-stat,
.estatisticas-player-card .badge-dislike-stat,
.estatisticas-player-card .presenca-mini-item {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--texto-suave);
}

.estatisticas-player-card .badge-like-stat svg,
.estatisticas-player-card .badge-neutral-stat svg,
.estatisticas-player-card .badge-dislike-stat svg,
.estatisticas-player-card .presenca-mini-item svg {
    color: currentColor;
}

.estatisticas-player-card .overall-progress-card,
.estatisticas-player-card .overall-progress-disabled {
    min-width: 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--borda);
}

.texto-suave { color: var(--texto-suave); }

.aproveitamento {
    display: inline-flex;
    width: 72px;
    height: 7px;
    margin-right: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fundo-input);
    vertical-align: middle;
}

.aproveitamento span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--roxo-escuro), var(--roxo));
}

.overall-progress-card {
    min-width: 230px;
    display: grid;
    gap: 0.45rem;
}

.overall-progress-summary {
    display: grid;
    gap: 0.45rem;
    list-style: none;
    cursor: pointer;
    border-radius: 8px;
    outline: none;
}

.overall-progress-summary::-webkit-details-marker {
    display: none;
}

.overall-progress-summary:focus-visible {
    box-shadow: 0 0 0 3px var(--roxo-brilho);
}

.overall-progress-summary:hover .overall-progress-bar {
    filter: brightness(1.08);
}

.overall-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.78rem;
}

.overall-progress-head strong {
    color: var(--texto);
}

.overall-progress-head span {
    color: var(--texto-suave);
    font-weight: 700;
    white-space: nowrap;
}

.overall-progress-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.overall-progress-meta span {
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 0.16rem 0.45rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    white-space: nowrap;
}

.overall-progress-bar {
    display: block;
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fundo-input);
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.overall-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--verde);
    transition: width 0.25s ease;
}

.overall-progress-estavel .overall-progress-bar span {
    background: var(--azul);
}

.overall-progress-queda .overall-progress-bar span {
    background: var(--vermelho);
}

.overall-progress-info {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding: 0.75rem;
    border: 1px solid rgba(42, 163, 108, 0.24);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(42, 163, 108, 0.12), rgba(59, 130, 246, 0.08));
    animation: overallInfoIn 0.18s ease-out;
}

.overall-progress-queda .overall-progress-info {
    border-color: rgba(201, 82, 79, 0.28);
    background: linear-gradient(135deg, rgba(201, 82, 79, 0.13), rgba(196, 150, 60, 0.08));
}

.overall-progress-estavel .overall-progress-info {
    border-color: rgba(59, 130, 246, 0.24);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(148, 163, 184, 0.08));
}

.overall-progress-info-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.overall-progress-info-title > span {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(42, 163, 108, 0.16);
    color: var(--verde);
}

.overall-progress-queda .overall-progress-info-title > span {
    background: rgba(201, 82, 79, 0.16);
    color: var(--vermelho);
}

.overall-progress-estavel .overall-progress-info-title > span {
    background: rgba(59, 130, 246, 0.14);
    color: var(--azul);
}

.overall-progress-info-title svg.lucide {
    width: 16px;
    height: 16px;
}

.overall-progress-info-title strong {
    color: var(--texto);
    font-size: 0.86rem;
}

.overall-progress-info p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.76rem;
    line-height: 1.45;
}

.overall-progress-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: fit-content;
    min-height: 36px;
    padding: 0.5rem 0.72rem;
    border: 1px solid rgba(42, 163, 108, 0.34);
    border-radius: 8px;
    background: rgba(42, 163, 108, 0.12);
    color: var(--texto);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.overall-progress-report-link:hover,
.overall-progress-report-link:focus-visible {
    border-color: rgba(42, 163, 108, 0.62);
    background: rgba(42, 163, 108, 0.18);
    transform: translateY(-1px);
}

.overall-progress-report-link svg.lucide {
    width: 16px;
    height: 16px;
    color: var(--verde);
}

.overall-progress-info-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.overall-progress-info-stats span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    color: var(--texto);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

@keyframes overallInfoIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.overall-progress-disabled {
    min-width: 220px;
    display: grid;
    gap: 0.2rem;
}

.overall-progress-disabled strong {
    font-size: 0.82rem;
    color: var(--texto);
}

.overall-progress-disabled span {
    color: var(--texto-suave);
    font-size: 0.76rem;
}

/* ===========================
   PÁGINA SORTEIO
=========================== */
.sort-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sort-bar .sort-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--texto-suave);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-right: 4px;
}

.sort-bar .btn-sort {
    background: transparent;
    border: 1px solid var(--borda-forte);
    color: var(--texto-suave);
    border-radius: 999px;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.sort-bar .btn-sort:hover { border-color: var(--roxo); color: var(--texto); }

.sort-bar .btn-sort.ativo {
    background: rgba(110, 91, 224, 0.15);
    border-color: var(--roxo);
    color: var(--roxo-suave);
    font-weight: 600;
}

.selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.selection-bar .contador {
    font-size: 15px;
    font-weight: 600;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.selection-bar .contador span {
    color: var(--roxo-suave);
    font-family: var(--fonte-display);
    font-weight: 700;
}

.selection-bar .contador small {
    display: block;
    margin-top: 0.15rem;
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 800;
}

.selection-bar .contador small.salva { color: var(--verde); }
.selection-bar .contador small.agenda { color: var(--verde); }
.selection-bar .contador small.suja { color: var(--ouro); }
.selection-bar .contador small.desatualizada { color: var(--vermelho); }

.selection-bar .btn-selecao {
    background: transparent;
    border: 1px solid var(--borda-forte);
    color: var(--texto-suave);
    border-radius: var(--radius-sm);
    padding: 5px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.selection-bar .btn-selecao:hover { border-color: var(--roxo); color: var(--texto); }

/* Grid de jogadores para seleção */
.convidados-panel {
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.convidados-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, rgba(110, 91, 224, 0.16), rgba(15, 23, 42, 0.56));
}

.convidados-head::-webkit-details-marker {
    display: none;
}

.convidados-head strong {
    display: block;
    color: var(--texto);
    font-size: 14px;
}

.convidados-head span {
    color: var(--texto-suave);
    font-size: 12px;
}

.convidados-head-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

#contadorConvidados {
    flex: 0 0 auto;
    color: var(--roxo-suave);
    font-family: var(--fonte-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.convidados-head svg {
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.18s ease;
}

.convidados-panel[open] .convidados-head svg {
    transform: rotate(180deg);
}

.convidados-body {
    padding: 12px;
}

.convidado-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    align-items: center;
}

.convidado-form input {
    width: 100%;
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.convidado-form input::placeholder {
    color: var(--texto-suave);
    opacity: 0.78;
}

.convidado-form input:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px rgba(110, 91, 224, 0.18);
}

.convidado-form .btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    min-height: 38px;
}

.convidado-form .btn svg,
.btn-confirmar-topo svg,
.confirmar-jogadores-acoes .btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    stroke-width: 2.4;
}

.convidados-lista {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}

.convidados-vazio,
#statusConvidados {
    color: var(--texto-suave);
    font-size: 12px;
}

#statusConvidados {
    display: block;
    margin-top: 8px;
    color: var(--ouro);
}

.convidado-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: space-between;
    width: 198px;
    min-height: 34px;
    max-width: 100%;
    border: 1px solid rgba(110, 91, 224, 0.28);
    background: rgba(110, 91, 224, 0.1);
    color: var(--texto);
    border-radius: 8px;
    padding: 5px 7px 5px 10px;
}

.convidado-chip strong {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.convidado-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto-suave);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.convidado-chip button:hover {
    color: var(--vermelho);
    background: rgba(190, 72, 70, 0.14);
}

.jogadores-grid-novo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.confirmar-jogadores-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.confirmar-jogadores-acoes .btn {
    width: auto;
}

#statusConfirmarJogadores {
    color: var(--texto-suave);
    font-size: 13px;
}

.jogador-card-novo {
    position: relative;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    user-select: none;
}

.jogador-card-novo:hover {
    border-color: var(--roxo);
    box-shadow: 0 0 0 1px var(--roxo-brilho);
}

.jogador-card-novo.fora-sorteio {
    opacity: 0.58;
}

.jogador-card-novo.selecionado {
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px var(--roxo-brilho);
    background: rgba(110, 91, 224, 0.1);
}

.jogador-card-novo.selecionado.confirmado-agenda {
    border-color: color-mix(in srgb, var(--verde) 72%, var(--borda));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 22%, transparent);
    background: color-mix(in srgb, var(--verde) 10%, var(--fundo-input));
}

.jogador-card-novo.goleiro-rotativo {
    border-color: rgba(70, 135, 185, 0.62);
    background: rgba(70, 135, 185, 0.09);
}

.jogador-card-novo.lista-salva:not(.selecionado) {
    border-color: rgba(200, 151, 59, 0.35);
}

.jogador-card-novo .jc-checkbox {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 16px;
    height: 16px;
    accent-color: var(--roxo);
    cursor: pointer;
}

.jogador-card-novo .jc-remover {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--texto-suave);
    opacity: 0.6;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s, opacity 0.15s;
}

.jogador-card-novo .jc-remover:hover { color: var(--vermelho); opacity: 1; }

.jogador-card-novo .jc-nome-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    margin-bottom: 5px;
}

.jogador-card-novo .jc-nome {
    font-size: 14px;
    font-weight: 700;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 22px);
}

.jogador-card-novo .jc-editar {
    color: var(--texto-suave);
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.jogador-card-novo .jc-editar:hover { color: var(--roxo-suave); }

.jc-status {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto-suave);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.jogador-card-novo.selecionado .jc-status {
    background: rgba(42, 163, 108, 0.14);
    color: var(--verde);
}

.jogador-card-novo.goleiro-rotativo .jc-status {
    background: rgba(70, 135, 185, 0.16);
    color: var(--azul);
}

.jc-info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

/* Configuração do sorteio */
.sorteio-config-card { margin-top: 24px; }

.sorteio-config-card,
.sorteio-contra-clube-card,
.sorteio-enviar-plantel-card {
    border: 1px solid color-mix(in srgb, var(--roxo) 32%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--roxo) 16%, transparent), color-mix(in srgb, var(--fundo-card) 94%, transparent)),
        var(--fundo-card);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.28);
    overflow: hidden;
}

.sorteio-accordion-title,
.sorteio-config-card .config-titulo,
.contra-clube-titulo,
.enviar-plantel-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--fonte-display);
    font-weight: 800;
    letter-spacing: 0;
    color: var(--texto);
    text-transform: none;
    margin: -1rem -1rem 18px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--roxo-forte) 45%, transparent), color-mix(in srgb, var(--fundo-input) 45%, transparent));
}

.sorteio-accordion-title::-webkit-details-marker,
.sorteio-config-card .config-titulo::-webkit-details-marker,
.contra-clube-titulo::-webkit-details-marker,
.enviar-plantel-titulo::-webkit-details-marker {
    display: none;
}

.sorteio-accordion-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sorteio-accordion-icon,
.sorteio-accordion-chevron {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sorteio-accordion-icon svg,
.sorteio-accordion-chevron svg {
    width: 18px;
    height: 18px;
}

.sorteio-accordion-chevron {
    transition: transform 0.18s ease, background 0.18s ease;
}

.sorteio-config-details[open] .sorteio-accordion-chevron,
.sorteio-contra-clube-card[open] .sorteio-accordion-chevron,
.sorteio-enviar-plantel-card[open] .sorteio-accordion-chevron {
    transform: rotate(180deg);
    background: color-mix(in srgb, var(--roxo) 28%, transparent);
}

.sorteio-config-body {
    padding-top: 2px;
}

.config-fields-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.config-fields-row .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.config-fields-row .form-group-full {
    align-items: flex-start;
    flex: 1 1 100%;
}

.config-fields-row .form-group label {
    margin-bottom: 0;
    font-size: 14px;
    color: var(--texto-suave);
    white-space: nowrap;
}

.config-fields-row .form-group input,
.config-fields-row .form-group select,
.config-fields-row .form-group textarea {
    width: 150px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    padding: 6px 8px;
    background: var(--fundo-inset);
    color-scheme: dark;
}

.config-fields-row .duracao-partida-group {
    flex: 0 0 auto;
    white-space: nowrap;
}

.config-fields-row .duracao-partida-group input {
    width: 74px;
    min-width: 74px;
    text-align: left;
}

.config-fields-row .form-group textarea {
    width: min(100%, 520px);
    min-height: 76px;
    text-align: left;
    resize: vertical;
}

.evolucao-peso-card {
    --peso-accent: #22c55e;
    --peso-accent-rgb: 34, 197, 94;
    position: relative;
    margin: 18px 0 4px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(var(--peso-accent-rgb), 0.3);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% -20%, rgba(var(--peso-accent-rgb), 0.2), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--fundo-inset) 94%, transparent), rgba(var(--peso-accent-rgb), 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(2, 6, 23, 0.16);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.tabela-gols-select {
    display: block;
    max-width: 100%;
    padding-right: 2.75rem !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.evolucao-peso-card[data-faixa="zero"] {
    --peso-accent: #94a3b8;
    --peso-accent-rgb: 148, 163, 184;
}

.evolucao-peso-card[data-faixa="reduzido"] {
    --peso-accent: #f59e0b;
    --peso-accent-rgb: 245, 158, 11;
}

.evolucao-peso-card[data-faixa="aumentado"] {
    --peso-accent: #a855f7;
    --peso-accent-rgb: 168, 85, 247;
}

.evolucao-peso-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.evolucao-peso-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--peso-accent-rgb), 0.38);
    border-radius: 13px;
    color: var(--peso-accent);
    background: rgba(var(--peso-accent-rgb), 0.12);
    box-shadow: 0 8px 18px rgba(var(--peso-accent-rgb), 0.12);
}

.evolucao-peso-icon svg {
    width: 21px;
    height: 21px;
}

.evolucao-peso-title {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.evolucao-peso-title strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
}

.evolucao-peso-title span {
    color: var(--texto-suave);
    font-size: 0.82rem;
    line-height: 1.35;
}

.evolucao-peso-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    min-width: 94px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--peso-accent-rgb), 0.4);
    border-radius: 12px;
    color: var(--peso-accent);
    background: rgba(var(--peso-accent-rgb), 0.1);
    font-family: var(--fonte-display);
    font-weight: 900;
}

.evolucao-peso-value input {
    width: 58px;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: 1.28rem;
    line-height: 1;
    text-align: right;
    appearance: textfield;
}

.evolucao-peso-value input::-webkit-inner-spin-button,
.evolucao-peso-value input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.evolucao-peso-value span {
    font-size: 0.82rem;
}

.evolucao-peso-control {
    position: relative;
    margin: 20px 4px 0;
    padding-bottom: 23px;
}

.evolucao-peso-control input[type="range"] {
    width: 100%;
    height: 8px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    outline: 0;
    appearance: none;
    cursor: pointer;
    background: linear-gradient(90deg, var(--peso-accent) 0 var(--peso-progress), rgba(148, 163, 184, 0.2) var(--peso-progress) 100%);
    box-shadow: inset 0 1px 3px rgba(2, 6, 23, 0.35);
}

.evolucao-peso-control input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    border: 4px solid var(--fundo-card);
    border-radius: 50%;
    appearance: none;
    background: var(--peso-accent);
    box-shadow: 0 0 0 2px rgba(var(--peso-accent-rgb), 0.45), 0 5px 14px rgba(var(--peso-accent-rgb), 0.38);
    transition: transform 0.15s ease;
}

.evolucao-peso-control input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 4px solid var(--fundo-card);
    border-radius: 50%;
    background: var(--peso-accent);
    box-shadow: 0 0 0 2px rgba(var(--peso-accent-rgb), 0.45), 0 5px 14px rgba(var(--peso-accent-rgb), 0.38);
}

.evolucao-peso-control input[type="range"]:focus-visible::-webkit-slider-thumb,
.evolucao-peso-control input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.12);
}

.evolucao-peso-scale {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 16px;
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
}

.evolucao-peso-scale span {
    position: absolute;
    left: var(--scale-position);
    transform: translateX(-50%);
}

.evolucao-peso-scale span:first-child { transform: none; }
.evolucao-peso-scale span:last-child { transform: translateX(-100%); }

.evolucao-peso-feedback {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: color-mix(in srgb, var(--peso-accent) 78%, var(--texto));
    background: rgba(var(--peso-accent-rgb), 0.08);
    font-size: 0.8rem;
    line-height: 1.4;
}

.evolucao-peso-feedback svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    color: var(--texto);
    font-weight: 700;
}

.home-match-meta .home-match-note {
    width: min(100%, 680px);
    line-height: 1.35;
    white-space: normal;
}

.form-check-inline input {
    width: 18px;
    height: 18px;
    accent-color: var(--verde);
}

.btn-contra-clube {
    justify-content: center;
    cursor: pointer;
}

.btn-contra-clube input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.install-prompt {
    position: fixed;
    right: 16px;
    bottom: calc(94px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 520;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    max-width: 560px;
    margin: 0 auto;
    padding: 0.85rem;
    border: 1px solid rgba(110, 91, 224, 0.42);
    border-radius: 16px;
    background: rgba(13, 17, 23, 0.96);
    color: var(--texto);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.install-prompt.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.install-prompt[hidden] {
    display: none;
}

.install-prompt strong,
.install-prompt span {
    display: block;
}

.install-prompt strong {
    font-family: var(--fonte-display);
    font-size: 0.86rem;
    line-height: 1.2;
}

.install-prompt span {
    color: var(--texto-suave);
    font-size: 0.75rem;
    line-height: 1.35;
}

.install-prompt-primary,
.install-prompt-close {
    border: 0;
    cursor: pointer;
    font-family: var(--fonte-corpo);
    font-weight: 800;
}

.install-prompt-primary {
    min-height: 38px;
    padding: 0 0.85rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--roxo), var(--roxo-forte));
    color: #fff;
}

.install-prompt-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto-suave);
    font-size: 1.25rem;
    line-height: 1;
}

.btn-contra-clube.ativo {
    border-color: var(--verde);
    color: var(--verde);
    background: rgba(40, 140, 85, 0.12);
}

.clube-adversario-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.clube-adversario-inline label {
    margin: 0;
    color: var(--texto-suave);
    font-size: 13px;
    white-space: nowrap;
}

.clube-adversario-inline input {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 10px;
    background: var(--fundo-inset);
    color-scheme: dark;
}

.modelo-confronto-group {
    max-width: 180px;
}

.modelo-confronto-select {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alerta-validacao {
    display: none;
    background: rgba(200, 151, 59, 0.09);
    border: 1px solid rgba(202, 138, 4, 0.6);
    color: var(--ouro);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.alerta-validacao.visivel { display: block; }

.alerta-validacao:not(.aviso) {
    background: rgba(201, 82, 79, 0.11);
    border-color: rgba(201, 82, 79, 0.4);
    color: var(--vermelho);
}

.config-subpanel,
.campeonato-config,
.travas-panel {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--radius-sm);
}

.config-subpanel {
    border: 1px solid var(--borda);
    background: var(--fundo-inset);
}

.campeonato-config {
    border: 1px solid rgba(110, 91, 224, 0.22);
    background: rgba(110, 91, 224, 0.06);
}

.config-subpanel > summary,
.campeonato-config > summary,
.travas-panel > summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding-right: 28px;
}

.config-subpanel > summary::-webkit-details-marker,
.campeonato-config > summary::-webkit-details-marker,
.travas-panel > summary::-webkit-details-marker {
    display: none;
}

.config-subpanel > summary::marker,
.campeonato-config > summary::marker,
.travas-panel > summary::marker {
    content: "";
}

.config-subpanel-head,
.campeonato-config-head {
    display: block;
}

.config-subpanel-head span,
.campeonato-config-head strong {
    color: var(--texto);
    font-family: var(--fonte-display);
}

.config-subpanel-head i,
.campeonato-config-head i,
.travas-header i {
    position: absolute;
    top: 1px;
    right: 0;
    width: 16px;
    height: 16px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.config-subpanel[open] .config-subpanel-head i,
.campeonato-config[open] .campeonato-config-head i,
.travas-panel[open] .travas-header i {
    transform: rotate(180deg);
}

.campeonato-config-head span {
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.config-subpanel-body,
.campeonato-config > .config-fields-row {
    margin-top: 0.8rem;
}

.config-subpanel-body .form-group {
    margin-bottom: 0;
}

.evento-times-panel,
.evento-confrontos-panel {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
}

.evento-times-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.evento-times-head div {
    display: grid;
    gap: .15rem;
}

.evento-times-head span,
.evento-time-hint,
.evento-times-actions small {
    color: var(--texto-suave);
    font-size: .85rem;
}

.evento-times-lista,
.evento-confrontos-lista {
    display: grid;
    gap: .75rem;
}

.evento-time-bloco {
    border: 1px solid color-mix(in srgb, var(--cor-time, var(--borda)) 45%, var(--borda));
    border-left: 4px solid var(--cor-time, var(--borda));
    border-radius: 8px;
    padding: .85rem;
    background: rgba(0,0,0,.12);
}

.evento-time-bloco-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.evento-time-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.evento-time-grid label,
.evento-time-jogadores {
    display: grid;
    gap: .35rem;
    color: var(--texto-suave);
    font-size: .85rem;
}

.evento-time-jogadores {
    grid-column: 1 / -1;
}

.evento-time-grid input,
.evento-time-grid select,
.evento-confronto-row input,
.evento-confronto-row select {
    width: 100%;
}

.evento-times-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.evento-confronto-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto minmax(0, 1fr) 120px 150px 40px;
    gap: .5rem;
    align-items: center;
}

.btn-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
}

.btn-icon:hover {
    border-color: #be4846;
    color: #be4846;
}

@media (max-width: 640px) {
    .sorteio-contra-clube-card .contra-clube-body,
    .sorteio-enviar-plantel-card .contra-clube-body {
        padding-inline: 0;
    }

    .sorteio-contra-clube-card .config-fields-row,
    .sorteio-enviar-plantel-card .config-fields-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .sorteio-contra-clube-card .config-fields-row .form-group,
    .sorteio-contra-clube-card .config-fields-row .form-group-full,
    .sorteio-enviar-plantel-card .config-fields-row .form-group,
    .sorteio-enviar-plantel-card .config-fields-row .form-group-full {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.35rem;
        width: 100%;
        min-width: 0;
    }

    .sorteio-contra-clube-card .config-fields-row .form-group label,
    .sorteio-enviar-plantel-card .config-fields-row .form-group label {
        white-space: normal;
    }

    .sorteio-contra-clube-card .config-fields-row .form-group input,
    .sorteio-contra-clube-card .config-fields-row .form-group select,
    .sorteio-contra-clube-card .config-fields-row .form-group textarea,
    .sorteio-enviar-plantel-card .config-fields-row .form-group input,
    .sorteio-enviar-plantel-card .config-fields-row .form-group select,
    .sorteio-enviar-plantel-card .config-fields-row .form-group textarea {
        width: 100%;
        max-width: none;
        text-align: left;
    }

    .evento-times-panel,
    .evento-confrontos-panel {
        padding: 0.75rem;
        margin-inline: 0;
    }

    .evento-times-head {
        align-items: stretch;
        flex-direction: column;
    }

    .evento-times-head .btn,
    .evento-times-actions .btn,
    .sorteio-contra-clube-card .btn-sortear,
    .sorteio-enviar-plantel-card .btn-sortear {
        width: 100%;
    }

    .evento-time-bloco {
        padding: 0.75rem;
    }

    .evento-time-bloco-head {
        gap: 0.5rem;
    }

    .evento-time-grid,
    .evento-confronto-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .evento-time-grid input,
    .evento-time-grid select,
    .evento-time-grid select[multiple],
    .evento-confronto-row input,
    .evento-confronto-row select {
        min-width: 0;
        width: 100%;
    }

    .evento-confronto-row {
        padding: 0.75rem;
        border: 1px solid var(--borda);
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.12);
    }

    .evento-confronto-row > span {
        text-align: center;
    }

    .evento-confronto-row .btn-icon {
        width: 100%;
    }
}

/* Travas do sorteio */
.travas-panel {
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    margin-bottom: 16px;
}

.travas-header {
    display: block;
}

.travas-header strong { color: var(--texto); font-size: 14px; }

.travas-header span {
    display: block;
    color: var(--texto-suave);
    font-size: 12px;
    margin-top: 2px;
}

.btn-trava-add {
    margin-top: 10px;
    background: transparent;
    border: 1px solid rgba(110, 91, 224, 0.5);
    color: var(--roxo-suave);
    border-radius: 7px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn-trava-add:hover { border-color: var(--roxo); color: #fff; }

.travas-lista {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trava-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 110px 32px;
    gap: 8px;
    align-items: center;
}

.trava-row select {
    width: 100%;
    min-width: 0;
    height: 36px;
    background: var(--fundo-input);
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    color: var(--texto);
    padding: 6px 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

.trava-row select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.trava-remover {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid rgba(201, 82, 79, 0.4);
    background: rgba(201, 82, 79, 0.1);
    color: var(--vermelho);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s;
}

.trava-remover:hover { border-color: var(--vermelho); }

.travas-vazio { color: var(--texto-suave); font-size: 12px; }

/* Botões do sorteio */
.config-botoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.sorteio-config-acoes {
    margin-top: 12px;
}

.sorteio-contra-clube-card,
.sorteio-enviar-plantel-card {
    margin-top: 14px;
}

.sorteio-resultado-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sorteio-resultado-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.sorteio-resultado-acoes .btn-embaralhar {
    padding: 8px 12px;
    font-size: 13px;
}

.contra-clube-body {
    display: grid;
    gap: 12px;
    padding-top: 16px;
}

.sorteio-enviar-plantel-card .config-fields-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.sorteio-enviar-plantel-card .config-fields-row .form-group,
.sorteio-enviar-plantel-card .evento-time-grid label {
    display: grid;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    color: var(--texto-suave);
    font-size: 13px;
    font-weight: 700;
}

.sorteio-enviar-plantel-card .config-fields-row .form-group label {
    white-space: normal;
}

.sorteio-enviar-plantel-card .config-fields-row .form-group input,
.sorteio-enviar-plantel-card .config-fields-row .form-group select,
.sorteio-enviar-plantel-card .evento-time-grid input,
.sorteio-enviar-plantel-card .evento-time-grid select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-weight: 600;
    text-align: left;
    color-scheme: dark;
}

.sorteio-enviar-plantel-card .config-fields-row .form-group input:focus,
.sorteio-enviar-plantel-card .config-fields-row .form-group select:focus,
.sorteio-enviar-plantel-card .evento-time-grid input:focus,
.sorteio-enviar-plantel-card .evento-time-grid select:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px rgba(110, 91, 224, 0.22);
}

.sorteio-enviar-plantel-card .evento-time-grid input[type="color"] {
    padding: 4px;
    cursor: pointer;
}

.btn-sortear {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 28px;
    font-family: var(--fonte-display);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.1s, filter 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(90, 74, 200, 0.25);
}

.btn-sortear:hover { box-shadow: var(--sombra-roxa); filter: brightness(1.08); }
.btn-sortear:active { transform: scale(0.97); }

.btn-sortear:disabled {
    background: var(--borda-forte);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-embaralhar {
    background: transparent;
    color: var(--verde);
    border: 1px solid rgba(42, 163, 108, 0.4);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-embaralhar:hover {
    border-color: var(--verde);
    background: rgba(42, 163, 108, 0.08);
}

.btn-limpar {
    background: transparent;
    color: var(--texto-suave);
    border: 1px solid var(--borda-forte);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-limpar:hover { border-color: var(--vermelho); color: var(--vermelho); }

#resultado { margin-top: 24px; }

/* Revelacao progressiva do sorteio */
#resultado.is-revealing .aviso-balanceamento {
    display: none;
}

#resultado.is-revealing .sorteio-resultado-acoes {
    opacity: 0.45;
}

.times-grid.sorteio-reveal-grid {
    align-items: start;
}

.sorteio-reveal-stage {
    position: relative;
    grid-column: 1 / -1;
    min-height: 330px;
    padding: 18px clamp(18px, 4vw, 42px) 22px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--roxo) 45%, var(--borda));
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 35%, rgba(110, 91, 224, 0.24), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, #211446 84%, var(--fundo-card)), color-mix(in srgb, #101520 90%, var(--fundo-inset)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 45px rgba(5, 3, 15, 0.22);
    text-align: center;
    isolation: isolate;
}

.sorteio-reveal-stage::before,
.sorteio-reveal-stage::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(2px);
    pointer-events: none;
}

.sorteio-reveal-stage::before {
    width: 240px;
    height: 240px;
    left: calc(50% - 120px);
    top: 38px;
    border: 1px solid rgba(167, 139, 250, 0.2);
    box-shadow: 0 0 70px rgba(110, 91, 224, 0.18);
}

.sorteio-reveal-stage::after {
    width: 8px;
    height: 8px;
    left: 18%;
    top: 34%;
    background: #a79bf0;
    box-shadow:
        90px -44px 0 -2px #c4963c,
        230px 32px 0 -2px #a78bfa,
        410px -20px 0 -1px #2aa36c,
        570px 48px 0 -2px #f472b6;
    opacity: 0.75;
}

.sorteio-reveal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sorteio-reveal-topbar > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--verde);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sorteio-reveal-topbar svg {
    width: 15px;
    height: 15px;
}

.sorteio-reveal-skip {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--texto-suave) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--home-match-surface) 72%, transparent);
    color: var(--texto-suave);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.sorteio-reveal-skip:hover,
.sorteio-reveal-skip:focus-visible {
    border-color: var(--home-match-border);
    background: color-mix(in srgb, var(--home-match-surface) 88%, transparent);
    color: var(--texto);
    outline: none;
}

.sorteio-reveal-kicker {
    margin: 0 0 5px;
    color: var(--verde);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sorteio-reveal-title {
    margin: 0;
    color: var(--texto-suave);
    font-family: inherit;
    font-size: clamp(14px, 2vw, 17px);
    font-weight: 600;
}

.sorteio-reveal-title[hidden],
.sorteio-deal-player-name[hidden],
.sorteio-reveal-destination[hidden] {
    display: none;
}

.sorteio-reveal-destination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--reveal-team-color, var(--home-match-border)) 65%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--reveal-team-color, var(--home-match-surface)) 13%, transparent);
    color: var(--texto);
    font-size: 12px;
    font-weight: 800;
}

.sorteio-reveal-progress {
    width: min(420px, 86%);
    height: 5px;
    margin: 18px auto 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.sorteio-reveal-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--home-match-border), var(--verde));
    box-shadow: 0 0 14px color-mix(in srgb, var(--verde) 45%, transparent);
    transition: width 0.28s ease;
}

.sorteio-reveal-counter {
    color: var(--texto-suave);
    font-size: 11px;
}

.sorteio-reveal-team-card {
    border-color: color-mix(in srgb, var(--reveal-team-color) 34%, var(--borda));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.sorteio-reveal-team-card.is-receiving {
    border-color: color-mix(in srgb, var(--reveal-team-color) 78%, white);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--reveal-team-color) 22%, transparent), 0 10px 28px rgba(0, 0, 0, 0.18);
}

.sorteio-reveal-team-card .time-header strong {
    color: var(--texto);
}

.sorteio-reveal-team-card .time-lista {
    min-height: 44px;
}

.sorteio-reveal-team-count {
    border: 1px solid color-mix(in srgb, var(--reveal-team-color) 45%, transparent);
    border-radius: 999px;
    padding: 2px 8px;
    background: color-mix(in srgb, var(--reveal-team-color) 11%, transparent);
    color: color-mix(in srgb, var(--reveal-team-color) 75%, white);
    font-size: 11px;
}

.sorteio-reveal-stage.is-complete {
    border-color: color-mix(in srgb, var(--verde) 55%, var(--borda));
}

@media (max-width: 700px) {
    .times-grid.sorteio-reveal-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .sorteio-reveal-stage,
    .sorteio-reveal-team-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .sorteio-reveal-stage {
        position: sticky;
        z-index: 30;
        top: var(--reveal-sticky-top, calc(70px + env(safe-area-inset-top)));
        min-height: 270px;
        padding: 10px 12px 14px;
        box-shadow: 0 16px 36px rgba(5, 3, 15, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .sorteio-reveal-stage::after {
        display: none;
    }

    .sorteio-reveal-topbar {
        margin-bottom: 2px;
    }

    .sorteio-reveal-topbar > span {
        letter-spacing: 0.08em;
    }

    .sorteio-reveal-kicker {
        margin-bottom: 2px;
    }

    .sorteio-reveal-title {
        font-size: 13px;
    }

    .sorteio-reveal-progress {
        margin-top: 10px;
    }
}

/* Mesa de cartas do sorteio */
.sorteio-deal-stage {
    min-height: 380px;
    border-color: color-mix(in srgb, var(--home-match-border) 70%, transparent);
    border-radius: 21px;
    background:
        linear-gradient(140deg, var(--home-match-bg-start), var(--home-match-bg-mid) 54%, var(--home-match-bg-end)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--home-match-border) 22%, transparent) 0 1px, transparent 1px 46px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22);
}

.sorteio-deal-stage::before {
    border-color: color-mix(in srgb, var(--home-match-border) 45%, transparent);
    box-shadow: 0 0 70px color-mix(in srgb, var(--home-match-border) 18%, transparent);
}

.sorteio-deal-stage::after {
    inset: auto 10% -72px 10%;
    width: auto;
    height: 128px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 42%, transparent);
    border-radius: 50% 50% 0 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    filter: none;
    transform: none;
}

.sorteio-deal-table {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    width: min(590px, 100%);
    min-height: 250px;
    margin: 0 auto;
}

.sorteio-deck-zone {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.sorteio-deck-zone small,
.sorteio-deck-zone > b {
    color: var(--texto-suave);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sorteio-deck {
    position: relative;
    width: 78px;
    aspect-ratio: 2 / 3;
}

.sorteio-card-back {
    position: relative;
    display: grid;
    place-items: center;
    width: 78px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 3px solid #d8d1eb;
    border-radius: 9px;
    background:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(255, 255, 255, 0.08) 8px 10px),
        radial-gradient(circle at center, #5a4ac8, #25104d 68%);
    box-shadow: inset 0 0 0 3px #3d2670, 0 10px 22px rgba(0, 0, 0, 0.36);
    color: #fff;
}

.sorteio-card-back::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 5px;
}

.sorteio-card-back span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(8, 5, 18, 0.26);
}

.sorteio-card-back span svg {
    width: 18px;
    height: 18px;
}

.sorteio-card-back b {
    position: absolute;
    bottom: 12px;
    z-index: 1;
    font-family: var(--fonte-display);
    font-size: 8px;
    letter-spacing: 0.12em;
}

.sorteio-deck > .sorteio-card-back {
    position: absolute;
    inset: 0;
}

.sorteio-deck > .sorteio-card-back:nth-child(1) { transform: translate(-5px, 3px) rotate(-3deg); }
.sorteio-deck > .sorteio-card-back:nth-child(2) { transform: translate(3px, 1px) rotate(2deg); }
.sorteio-deck > .sorteio-card-back:nth-child(3) { transform: translate(0, -2px); }

.sorteio-deal-stage.is-shuffling .sorteio-deck > .sorteio-card-back:nth-child(1) {
    animation: sorteioDeckShuffleLeft 0.56s ease-in-out infinite alternate;
}

.sorteio-deal-stage.is-shuffling .sorteio-deck > .sorteio-card-back:nth-child(2) {
    animation: sorteioDeckShuffleRight 0.56s ease-in-out 0.12s infinite alternate;
}

.sorteio-deal-current {
    display: grid;
    justify-items: center;
    align-content: center;
    min-width: 0;
}

.sorteio-deal-card-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    aspect-ratio: 2 / 3;
    margin: 4px auto 8px;
    perspective: 700px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.sorteio-deal-card-slot > .sorteio-card-back {
    width: 100%;
}

.sorteio-deal-card-slot .player-mini-card {
    width: 112px;
    max-width: none;
    cursor: default;
    pointer-events: none;
    filter: drop-shadow(0 15px 24px rgba(0, 0, 0, 0.5));
}

.sorteio-deal-card-slot .player-mini-card-overall {
    font-size: 1rem;
}

.sorteio-deal-card-slot .player-mini-card-name {
    font-size: 0.58rem;
}

.sorteio-deal-card-slot .player-mini-card-photo span {
    font-size: 1.35rem;
}

.sorteio-deal-card-slot.is-revealed .player-mini-card {
    animation: sorteioCardFlipIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sorteio-deal-card-slot.is-dealing {
    opacity: 0;
    transform: scale(0.88);
}

.sorteio-deal-player-name {
    display: block;
    min-height: 24px;
    margin: 3px 0 5px;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: clamp(17px, 3vw, 23px);
    line-height: 1.15;
    text-align: center;
}

.sorteio-team-hand {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 88px;
    padding: 8px;
}

.sorteio-team-hand > span {
    align-self: center;
    color: var(--texto-suave);
    font-size: 11px;
}

.sorteio-team-hand .player-mini-card {
    width: 52px;
    max-width: none;
    cursor: default;
    pointer-events: none;
}

.sorteio-team-hand .sorteio-card-dealt {
    animation: sorteioCardLand 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sorteio-flying-card.player-mini-card {
    position: fixed;
    z-index: 10000;
    max-width: none;
    margin: 0;
    pointer-events: none;
    transform: translate(0, 0) rotate(0) scale(1);
    transform-origin: center;
    transition: transform 0.48s cubic-bezier(0.55, 0, 0.25, 1), opacity 0.42s ease;
    filter: drop-shadow(0 18px 25px rgba(0, 0, 0, 0.55));
}

.sorteio-flying-card.player-mini-card.is-flying {
    opacity: 0.28;
    transform: translate(var(--deal-x), var(--deal-y)) rotate(12deg) scale(0.28);
}

/* Draft manual de jogadores */
.times-grid.sorteio-draft-grid {
    align-items: start;
}

.sorteio-draft-stage {
    grid-column: 1 / -1;
}

.sorteio-draft-kicker-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--roxo) 34%, transparent));
}

.sorteio-draft-table {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    width: min(520px, 100%);
    min-height: 245px;
    margin: 0 auto;
}

.sorteio-draft-current {
    display: grid;
    justify-items: center;
    align-content: center;
    min-width: 0;
}

.sorteio-draft-card-slot {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.sorteio-draft-card-slot:active,
.sorteio-draft-card-slot.is-dragging {
    cursor: grabbing;
}

.sorteio-draft-card-slot.is-dragging {
    opacity: 0.4;
    transform: scale(0.94);
}

.sorteio-draft-card-slot .player-mini-card {
    pointer-events: none;
}

.sorteio-draft-arrow {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 64%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--home-match-surface) 82%, transparent);
    color: var(--texto);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.sorteio-draft-arrow:hover,
.sorteio-draft-arrow:focus-visible {
    border-color: var(--verde);
    background: color-mix(in srgb, var(--verde) 15%, var(--home-match-surface));
    outline: none;
    transform: scale(1.06);
}

.sorteio-draft-arrow:disabled {
    cursor: default;
    opacity: 0.28;
    transform: none;
}

.sorteio-draft-arrow svg {
    width: 23px;
    height: 23px;
}

.sorteio-draft-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 0;
    color: var(--texto-suave);
    font-size: 11px;
    font-weight: 700;
}

.sorteio-draft-help svg {
    width: 14px;
    height: 14px;
}

.sorteio-draft-save {
    width: fit-content;
    margin: 12px auto 0;
}

.sorteio-draft-team {
    min-height: 142px;
    cursor: pointer;
    outline: none;
}

.sorteio-draft-team:hover,
.sorteio-draft-team:focus-visible,
.sorteio-draft-team.is-drag-over {
    border-color: color-mix(in srgb, var(--reveal-team-color) 82%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reveal-team-color) 22%, transparent), 0 14px 32px rgba(0, 0, 0, 0.24);
    transform: translateY(-2px);
}

.sorteio-draft-team.is-overfull {
    border-color: var(--vermelho);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--vermelho) 22%, transparent);
}

.sorteio-draft-team-hand {
    min-height: 96px;
}

.sorteio-draft-empty {
    max-width: 150px;
    line-height: 1.35;
    text-align: center;
}

.sorteio-draft-assigned-card {
    appearance: none;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.sorteio-draft-assigned-card:hover,
.sorteio-draft-assigned-card:focus-visible {
    outline: none;
    filter: brightness(1.12);
    transform: translateY(-3px);
}

.sorteio-draft-assigned-card.is-long-pressing {
    filter: brightness(1.12) drop-shadow(0 0 8px color-mix(in srgb, var(--verde) 54%, transparent));
    animation: sorteioDraftPressionar 0.3s ease both;
}

.sorteio-draft-assigned-card.is-dragging {
    opacity: 0.3;
}

body.sorteio-draft-arrastando {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

body.sorteio-draft-arrastando .sorteio-draft-team {
    transition-duration: 0.1s;
}

@keyframes sorteioDraftPressionar {
    from {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
        transform: scale(1);
    }
    to {
        filter: brightness(1.12) drop-shadow(0 0 8px color-mix(in srgb, var(--verde) 54%, transparent));
        transform: scale(1.08);
    }
}

.sorteio-draft-finished {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 9px;
    min-height: 245px;
    padding: 20px;
    text-align: center;
}

.sorteio-draft-finished > span {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 2px solid color-mix(in srgb, var(--verde) 68%, white);
    border-radius: 50%;
    background: color-mix(in srgb, var(--verde) 16%, transparent);
    color: var(--verde);
}

.sorteio-draft-finished > span svg {
    width: 34px;
    height: 34px;
}

.sorteio-draft-finished strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: clamp(17px, 3vw, 23px);
}

.sorteio-draft-finished small {
    max-width: 360px;
    color: var(--texto-suave);
    line-height: 1.4;
}

.sorteio-draft-drag-ghost.player-mini-card {
    position: fixed;
    z-index: 10000;
    width: 82px;
    max-width: none;
    margin: 0;
    pointer-events: none;
    opacity: 0.92;
    transform: translate(-50%, -50%) rotate(4deg);
    filter: drop-shadow(0 18px 25px rgba(0, 0, 0, 0.58));
}

.sorteio-deal-complete {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border: 2px solid color-mix(in srgb, var(--verde) 70%, white);
    border-radius: 50%;
    background: color-mix(in srgb, var(--verde) 18%, transparent);
    color: var(--verde);
    box-shadow: 0 0 32px color-mix(in srgb, var(--verde) 22%, transparent);
}

.sorteio-deal-complete svg {
    width: 38px;
    height: 38px;
    stroke-width: 3;
}

@keyframes sorteioDeckShuffleLeft {
    from { transform: translate(-5px, 3px) rotate(-3deg); }
    to { transform: translate(-30px, -4px) rotate(-12deg); }
}

@keyframes sorteioDeckShuffleRight {
    from { transform: translate(3px, 1px) rotate(2deg); }
    to { transform: translate(30px, -5px) rotate(12deg); }
}

@keyframes sorteioCardFlipIn {
    0% { opacity: 0; transform: rotateY(90deg) translateY(-8px) scale(0.92); }
    70% { opacity: 1; transform: rotateY(-5deg) translateY(0) scale(1.04); }
    100% { opacity: 1; transform: rotateY(0) scale(1); }
}

@keyframes sorteioCardLand {
    0% { opacity: 0; transform: translateY(-14px) rotate(7deg) scale(1.12); }
    100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 700px) {
    .times-grid.sorteio-reveal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .times-grid.sorteio-draft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sorteio-deal-stage {
        min-height: 330px;
        padding: 9px 10px 12px;
    }

    .sorteio-deal-table {
        grid-template-columns: 76px minmax(0, 1fr);
        min-height: 205px;
    }

    .sorteio-deck {
        width: 54px;
    }

    .sorteio-deck .sorteio-card-back {
        width: 54px;
        border-width: 2px;
    }

    .sorteio-deck-zone {
        gap: 5px;
    }

    .sorteio-deck-zone small,
    .sorteio-deck-zone > b {
        font-size: 8px;
    }

    .sorteio-deal-card-slot {
        width: 82px;
        margin-bottom: 5px;
    }

    .sorteio-deal-card-slot .player-mini-card {
        width: 82px;
    }

    .sorteio-deal-card-slot .player-mini-card-overall {
        font-size: 0.86rem;
    }

    .sorteio-deal-card-slot .player-mini-card-name {
        font-size: 0.46rem;
    }

    .sorteio-deal-card-slot .player-mini-card-photo span {
        font-size: 1.05rem;
    }

    .sorteio-deal-player-name {
        min-height: 20px;
        margin: 2px 0 4px;
        font-size: 16px;
    }

    .sorteio-team-hand {
        min-height: 76px;
        padding: 6px 4px;
        gap: 2px;
    }

    .sorteio-team-hand .player-mini-card {
        width: 43px;
    }

    .sorteio-draft-table {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        min-height: 205px;
        gap: 4px;
    }

    .sorteio-draft-arrow {
        width: 36px;
        height: 36px;
    }

    .sorteio-draft-arrow svg {
        width: 19px;
        height: 19px;
    }

    .sorteio-draft-help {
        margin-top: 1px;
        font-size: 9px;
    }

    .sorteio-draft-team {
        min-height: 122px;
    }

    .sorteio-draft-team-hand {
        min-height: 78px;
    }

    .sorteio-draft-finished {
        min-height: 205px;
        padding: 12px;
    }
}

/* Importar lista do dia */
.importar-lista-panel {
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.importar-lista-panel .il-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

.importar-lista-panel .il-titulo {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--roxo);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.importar-lista-panel .il-chevron {
    color: var(--texto-suave);
    font-size: 12px;
    transition: transform 0.2s;
}

.importar-lista-panel.aberto .il-chevron { transform: rotate(180deg); }

.importar-lista-panel .il-body { display: none; margin-top: 14px; }
.importar-lista-panel.aberto .il-body { display: block; }

.importar-lista-panel .il-hint {
    font-size: 12px;
    color: var(--texto-suave);
    margin-bottom: 10px;
    line-height: 1.5;
}

.importar-lista-panel textarea.il-textarea {
    width: 100%;
    min-height: 100px;
    background: var(--fundo-input);
    border: 1px solid var(--borda-forte);
    border-radius: var(--radius-sm);
    color: var(--texto);
    font-size: 14px;
    padding: 10px 12px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s;
    line-height: 1.5;
}

.importar-lista-panel textarea.il-textarea:focus {
    outline: none;
    border-color: var(--roxo);
}

.importar-lista-panel .il-acoes {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.importar-lista-panel .btn-importar {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.15s, filter 0.15s;
}

.importar-lista-panel .btn-importar:hover {
    box-shadow: var(--sombra-roxa);
    filter: brightness(1.08);
}

.importar-lista-panel .btn-limpar-lista {
    background: transparent;
    color: var(--texto-suave);
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.importar-lista-panel .btn-limpar-lista:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.il-resultado { margin-top: 12px; display: none; }
.il-resultado.visivel { display: block; }

.il-resultado .il-res-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 8px;
}

.il-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.il-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

.il-chip.encontrado {
    background: rgba(42, 163, 108, 0.12);
    border: 1px solid rgba(42, 163, 108, 0.35);
    color: var(--verde);
}

.il-chip.nao-encontrado {
    background: rgba(201, 82, 79, 0.12);
    border: 1px solid rgba(201, 82, 79, 0.35);
    color: var(--vermelho);
}

.il-res-nao-encontrados {
    font-size: 12px;
    color: var(--vermelho);
    margin-top: 4px;
}

.il-add-nao-encontrados { margin-top: 10px; }

.btn-adicionar-nao-encontrados {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    transition: box-shadow 0.15s, transform 0.1s;
}

.btn-adicionar-nao-encontrados:hover {
    box-shadow: var(--sombra-roxa);
    color: #fff;
    transform: translateY(-1px);
}

.aviso-balanceamento {
    font-size: 12px;
    color: var(--ouro);
    background: rgba(200, 151, 59, 0.07);
    border: 1px solid rgba(202, 138, 4, 0.35);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
    display: none;
}

.aviso-balanceamento.visivel { display: block; }

.campeonato-painel {
    gap: 1rem;
    margin-top: 1rem;
}

.campeonato-historico {
    display: grid;
}

.campeonato-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.autosave-status {
    display: inline-flex;
    align-items: center;
    margin-right: auto;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--texto-suave);
    transition: opacity 0.3s ease;
}

.autosave-status:empty {
    display: none;
}

.autosave-status-salvando {
    color: var(--texto-suave);
}

.autosave-status-salvo {
    color: var(--verde, #2aa36c);
}

.autosave-status-local {
    color: #d88a17;
}

.autosave-status-erro {
    color: var(--vermelho, #c9524f);
}

.campeonato-bloco {
    min-width: 0;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
    overflow: hidden;
}

.campeonato-accordion > summary {
    cursor: pointer;
    list-style: none;
}

.campeonato-accordion > summary::-webkit-details-marker {
    display: none;
}

.campeonato-accordion:not([open]) > .campeonato-head {
    border-bottom: none;
}

.times-nomes-bloco {
    grid-column: 1 / -1;
    overflow: visible;
}

.campeonato-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--fundo-input);
    border-bottom: 1px solid var(--borda);
}

.campeonato-head strong {
    display: block;
    color: var(--texto);
    font-family: var(--fonte-display);
}

.campeonato-head span {
    display: block;
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.campeonato-head b {
    flex-shrink: 0;
    color: var(--verde);
    font-size: 0.88rem;
}

.campeonato-tabela-wrap {
    overflow-x: auto;
}

.campeonato-tabela {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.campeonato-tabela th,
.campeonato-tabela td {
    padding: 0.58rem 0.7rem;
    border-bottom: 1px solid var(--borda);
    text-align: left;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.campeonato-tabela th {
    color: var(--texto-suave);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.campeonato-tabela tr.campeao td {
    color: var(--verde);
    background: rgba(42, 163, 108, 0.08);
    font-weight: 900;
}

.ranking-card {
    grid-column: 1 / -1;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 0.85rem;
}

.ranking-coluna {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.ranking-coluna h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--borda);
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 0.88rem;
}

.ranking-coluna h3 svg {
    width: 16px;
    height: 16px;
    color: var(--roxo-suave);
}

.ranking-lista {
    display: grid;
}

.ranking-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.62rem 0.8rem;
    border-bottom: 1px solid var(--borda);
}

.ranking-linha:last-child {
    border-bottom: 0;
}

.ranking-linha > span {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.84rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-linha > strong {
    flex: none;
    color: var(--verde);
    font-family: var(--fonte-display);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.ranking-linha > strong small {
    color: var(--texto-suave);
    font-family: var(--fonte-corpo);
    font-size: 0.68rem;
    font-weight: 700;
}

.ranking-vazio {
    margin: 0;
    padding: 0.9rem 0.8rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
}

@media (max-width: 620px) {
    .ranking-grid {
        grid-template-columns: 1fr;
    }
}

.partidas-lista {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem;
}

.gols-jogo-form {
    gap: 0.75rem;
}

.gols-placar-row .partida-placar {
    pointer-events: none;
}

.gols-times-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.gols-time-card {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
    padding: 0.7rem;
    border: 1px solid var(--cor-time, var(--borda));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 3px 0 0 var(--cor-time, transparent);
}

.gols-time-card[hidden] {
    display: none !important;
}

.gols-time-card h3 {
    margin: 0 0 0.2rem;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 0.88rem;
}

.gols-time-vazio {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.gols-jogador-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(96px, auto);
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
}

/* Faixa da linha inteira: liga o nome aos dois controles, para nao somar gol
   ou assistencia no jogador de cima ou de baixo. Bem discreta - o cartao do
   time ja e claro, entao o degrau precisa ser pequeno para nao virar listra. */
.gols-jogador-row:not(.gols-jogador-row-readonly) {
    padding: 0.22rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
}

.gols-jogador-header {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(96px, auto);
    align-items: center;
    gap: 0.55rem;
    color: var(--texto);
    font-size: 0.7rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.gols-jogador-header > span:not(:empty) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0.25rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--roxo) 48%, var(--borda-forte));
    border-radius: 7px;
    background: color-mix(in srgb, var(--roxo) 14%, var(--fundo-input));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--roxo) 28%, transparent);
    color: var(--texto);
    letter-spacing: 0.04em;
    line-height: 1;
}

.gols-jogador-row > span {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gols-stat-control {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 0.22rem;
}

.gols-stat-botoes {
    display: grid;
    grid-template-columns: 32px 28px 32px;
    align-items: center;
    gap: 0.22rem;
}

.gols-jogador-row button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--borda-forte);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.gols-jogador-row button:hover,
.gols-jogador-row button:focus-visible {
    border-color: var(--roxo-suave);
    color: var(--roxo-suave);
}

.gols-jogador-row strong {
    min-width: 0;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 0.98rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.gols-jogador-row-readonly {
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    min-height: 30px;
}

.gols-jogador-row-gol-contra > span {
    color: var(--texto-suave);
    font-style: italic;
}

.gols-stat-control-vazio {
    min-height: 1px;
}

.gols-jogador-row-readonly > span {
    text-align: left;
}

.gols-jogador-nome-goleiro {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.12rem;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

.gols-jogador-row:not(.gols-jogador-row-readonly) .gols-jogador-nome-goleiro {
    justify-content: center;
}

.gols-jogador-nome-texto {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gols-defesa-controle {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.gols-defesa-botao-unico {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    min-width: 0;
    padding: 0.08rem 0.28rem;
    border: 1px solid rgba(200, 151, 59, 0.4);
    border-radius: 999px;
    background: linear-gradient(160deg, rgba(200, 151, 59, 0.24), rgba(200, 151, 59, 0.06));
    color: var(--ouro);
    font: inherit;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gols-defesa-botao-unico:hover,
.gols-defesa-botao-unico:focus-visible {
    border-color: var(--ouro);
    background: rgba(200, 151, 59, 0.32);
}

.gols-defesa-botao-unico:active {
    transform: scale(0.93);
}

.gols-defesa-botao-unico:disabled {
    opacity: 0.35;
}

.gols-defesa-icone {
    width: 9px;
    height: 9px;
    flex: none;
}

.gols-defesa-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    margin-left: 0.32rem;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    background: rgba(200, 151, 59, 0.12);
    box-shadow: inset 0 0 0 1px rgba(200, 151, 59, 0.32);
    color: var(--ouro);
    font-size: 0.66rem;
    font-weight: 800;
    vertical-align: 1px;
}

.gols-defesa-chip .gols-defesa-icone {
    width: 10px;
    height: 10px;
}

body.resultado-focado .container {
    max-width: none;
    min-height: 100vh;
    padding: 1rem 1rem calc(112px + env(safe-area-inset-bottom));
}

body.resultado-focado .jogo-detalhe-conteudo {
    margin: 0;
}

.placar-lock-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--borda) 80%, transparent);
    border-radius: 999px;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--fundo-card) 78%, transparent);
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.placar-lock-toggle svg {
    width: 16px;
    height: 16px;
}

.placar-lock-toggle[aria-pressed="true"] {
    color: var(--texto-suave);
}

[data-placar-bloqueado="1"] [data-gols-menos],
[data-placar-bloqueado="1"] [data-gols-mais],
[data-placar-bloqueado="1"] [data-gols-partida-select] {
    cursor: not-allowed;
    opacity: 0.48;
}

[data-placar-bloqueado="1"] [data-gols-partida-select] {
    pointer-events: none;
}

.times-nomes-editor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
    padding: 0.85rem;
}

.times-nomes-editor label {
    display: grid;
    gap: 0.35rem;
}

.times-nomes-editor span {
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
}

.times-nomes-editor input,
.partida-row select {
    width: 100%;
    min-width: 0;
    padding: 0.48rem 0.55rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-weight: 800;
}

.time-nome-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
}

.time-cor-dropdown {
    position: relative;
}

.time-cor-atual {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 5px;
    background: var(--time-cor);
    box-shadow: 0 0 0 1px var(--borda);
    cursor: pointer;
}

.time-cor-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    grid-template-columns: repeat(2, 18px);
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-inset);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.time-cor-menu.is-open {
    display: grid;
}

.time-cor-opcao {
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    background: var(--time-cor);
    cursor: pointer;
}

.time-cor-opcao.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--time-cor);
}

.time-cor-atual:focus-visible,
.time-cor-opcao:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.partida-row select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.partida-row select.partida-time-select {
    border-color: var(--cor-time, var(--borda));
    box-shadow: inset 3px 0 0 var(--cor-time, transparent);
}

.partida-row select.partida-time-select:focus {
    border-color: var(--cor-time, var(--roxo));
    box-shadow: inset 3px 0 0 var(--cor-time, transparent), 0 0 0 2px color-mix(in srgb, var(--cor-time, var(--roxo)) 24%, transparent);
}

.campeonato-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 1, 12, 0.72);
    backdrop-filter: blur(10px);
}

.campeonato-modal.is-open {
    display: grid;
}

.campeonato-modal-card {
    position: relative;
    width: min(420px, 100%);
    overflow: hidden;
    border: 1px solid rgba(110, 91, 224, 0.45);
    border-radius: 18px;
    padding: 1.35rem;
    background:
        radial-gradient(circle at top left, rgba(110, 91, 224, 0.26), transparent 34%),
        linear-gradient(145deg, #1e1733, #0d0718 68%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    text-align: center;
    color: var(--texto);
}

.campeonato-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 32px;
    height: 32px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--texto);
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}

.campeonato-modal-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 0.85rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(110, 91, 224, 0.95), rgba(42, 163, 108, 0.82));
    box-shadow: 0 14px 34px rgba(110, 91, 224, 0.32);
    font-size: 2rem;
}

.campeonato-modal h3 {
    margin: 0 0 0.55rem;
    font-family: var(--fonte-display);
    font-size: 1.35rem;
}

.campeonato-modal p {
    margin: 0 auto 1.15rem;
    max-width: 32ch;
    color: var(--texto-suave);
    font-size: 0.92rem;
}

.campeonato-modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.campeonato-modal-card-campeao {
    width: min(520px, 100%);
    padding: 2.1rem 1.6rem;
    border-radius: 22px;
    border-color: rgba(196, 150, 60, 0.55);
    background:
        radial-gradient(circle at 50% 0%, rgba(196, 150, 60, 0.30), transparent 38%),
        radial-gradient(circle at 0% 20%, rgba(42, 163, 108, 0.22), transparent 32%),
        linear-gradient(145deg, #24183a, #0d0718 70%);
}

.campeonato-modal-trofeu {
    background: linear-gradient(135deg, #c4963c, #6e5be0);
    box-shadow: 0 14px 38px rgba(196, 150, 60, 0.28);
}

.campeao-kicker {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: #c4963c;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.campeonato-modal-card-campeao .campeonato-modal-icon {
    width: 82px;
    height: 82px;
    margin-bottom: 1.15rem;
    border-radius: 24px;
    font-size: 2.45rem;
}

.campeonato-modal-card-campeao h3 {
    max-width: 15ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.65rem;
    line-height: 1.16;
}

.campeonato-modal-card-campeao p {
    max-width: 34ch;
    margin-top: 0.75rem;
    margin-bottom: 1.45rem;
    line-height: 1.45;
}

.campeonato-confetes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.campeonato-confetes i {
    position: absolute;
    top: -18px;
    left: var(--x);
    width: 8px;
    height: 14px;
    border-radius: 3px;
    background: var(--cor);
    transform: rotate(var(--rot));
    animation: campeonato-confete-fall var(--dur) linear var(--delay) infinite;
}

@keyframes campeonato-confete-fall {
    to {
        top: 110%;
        transform: translateX(26px) rotate(calc(var(--rot) + 520deg));
    }
}

/* ===========================
   AVISO DE VOTACAO POPULAR
=========================== */
body.avaliacao-popular-modal-open {
    overflow: hidden;
}

.avaliacao-popular-modal {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 5, 15, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.avaliacao-popular-modal[hidden] {
    display: none !important;
}

.avaliacao-popular-modal.is-open {
    opacity: 1;
}

.avaliacao-popular-modal-card {
    position: relative;
    isolation: isolate;
    width: min(460px, 100%);
    overflow: hidden;
    padding: 2rem 1.55rem 1.45rem;
    border: 1px solid color-mix(in srgb, var(--verde) 42%, rgba(255, 255, 255, 0.12));
    border-radius: 26px;
    background:
        radial-gradient(circle at 12% 0%, rgba(42, 163, 108, 0.28), transparent 36%),
        radial-gradient(circle at 92% 8%, rgba(110, 91, 224, 0.32), transparent 34%),
        linear-gradient(155deg, #17251f 0%, #15132a 52%, #0b0915 100%);
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    color: var(--texto);
    text-align: center;
    transform: translateY(18px) scale(0.965);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1), opacity 0.22s ease;
}

.avaliacao-popular-modal.is-open .avaliacao-popular-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.avaliacao-popular-modal.is-closing .avaliacao-popular-modal-card {
    transform: translateY(10px) scale(0.98);
}

.avaliacao-popular-modal-aurora {
    position: absolute;
    top: -150px;
    left: 50%;
    z-index: -2;
    width: 390px;
    height: 280px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, rgba(42, 163, 108, 0.35), rgba(110, 91, 224, 0.42), rgba(56, 189, 248, 0.2), rgba(42, 163, 108, 0.35));
    filter: blur(48px);
    transform: translateX(-50%);
    animation: avaliacao-popular-aurora 8s linear infinite;
}

.avaliacao-popular-modal-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, black, transparent 66%);
}

.avaliacao-popular-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto-suave);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.avaliacao-popular-modal-close:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(5deg);
}

.avaliacao-popular-modal-close svg {
    width: 18px;
    height: 18px;
}

.avaliacao-popular-modal-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: 0 auto 1rem;
    border: 1px solid rgba(52, 211, 153, 0.34);
    border-radius: 27px;
    background: linear-gradient(145deg, rgba(42, 163, 108, 0.28), rgba(110, 91, 224, 0.24));
    box-shadow: 0 18px 45px rgba(42, 163, 108, 0.18);
    color: #73e7b1;
}

.avaliacao-popular-modal-icon > svg {
    width: 39px;
    height: 39px;
    stroke-width: 1.8;
}

.avaliacao-popular-modal-icon span {
    position: absolute;
    top: -7px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 3px solid #15172a;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #fff7d6;
    box-shadow: 0 8px 22px rgba(249, 115, 22, 0.35);
}

.avaliacao-popular-modal-icon span svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.avaliacao-popular-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
    color: #73e7b1;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.avaliacao-popular-modal-kicker svg {
    width: 14px;
    height: 14px;
}

.avaliacao-popular-modal-card h2 {
    max-width: 13ch;
    margin: 0 auto 0.7rem;
    font-family: var(--fonte-display);
    font-size: clamp(1.65rem, 5vw, 2.05rem);
    line-height: 1.08;
}

.avaliacao-popular-modal-card > p {
    max-width: 38ch;
    margin: 0 auto 1.15rem;
    color: var(--texto-suave);
    font-size: 0.92rem;
    line-height: 1.55;
}

.avaliacao-popular-modal-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    width: fit-content;
    min-width: 245px;
    margin: 0 auto 0.75rem;
    padding: 0.78rem 1rem;
    border: 1px solid rgba(52, 211, 153, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    text-align: left;
}

.avaliacao-popular-modal-count strong {
    color: #73e7b1;
    font-family: var(--fonte-display);
    font-size: 2rem;
    line-height: 1;
}

.avaliacao-popular-modal-count span {
    display: grid;
    gap: 0.12rem;
    font-size: 0.86rem;
    font-weight: 800;
}

.avaliacao-popular-modal-count small {
    color: var(--texto-suave);
    font-size: 0.73rem;
    font-weight: 600;
}

.avaliacao-popular-modal-reward {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin-bottom: 1.25rem;
    color: var(--texto-suave);
    font-size: 0.78rem;
}

.avaliacao-popular-modal-reward svg,
.avaliacao-popular-modal-reward strong {
    color: var(--ouro);
}

.avaliacao-popular-modal-reward svg {
    width: 16px;
    height: 16px;
}

.avaliacao-popular-modal-actions {
    display: grid;
    gap: 0.65rem;
}

.avaliacao-popular-modal-primary.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #2aa36c, #6e5be0);
    color: #fff;
    box-shadow: 0 14px 34px rgba(42, 163, 108, 0.22);
    font-weight: 900;
}

.avaliacao-popular-modal-primary.btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 17px 40px rgba(42, 163, 108, 0.3);
}

.avaliacao-popular-modal-primary svg {
    width: 18px;
    height: 18px;
}

.avaliacao-popular-modal-later {
    justify-self: center;
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
}

.avaliacao-popular-modal-later:hover {
    color: var(--texto);
}

@keyframes avaliacao-popular-aurora {
    to { transform: translateX(-50%) rotate(360deg); }
}

@media (max-width: 520px) {
    .avaliacao-popular-modal {
        align-items: end;
        padding: 0.75rem;
    }

    .avaliacao-popular-modal-card {
        padding: 1.6rem 1.1rem 1.15rem;
        border-radius: 24px;
    }

    .avaliacao-popular-modal-icon {
        width: 72px;
        height: 72px;
        border-radius: 23px;
    }

    .avaliacao-popular-modal-icon > svg {
        width: 33px;
        height: 33px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .avaliacao-popular-modal,
    .avaliacao-popular-modal-card {
        transition-duration: 0.01ms;
    }

    .avaliacao-popular-modal-aurora {
        animation: none;
    }
}

.partida-row {
    display: grid;
    grid-template-columns: 70px minmax(90px, 1fr) 58px 18px 58px minmax(90px, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    position: relative;
}

.confronto-card-menu {
    position: absolute;
    right: 0.65rem;
    bottom: calc(100% - 0.25rem);
    z-index: 8;
    min-width: 132px;
    padding: 0.35rem;
    border: 1px solid rgba(201, 82, 79, 0.35);
    border-radius: 12px;
    background: #15101f;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.42);
}

.confronto-card-menu button {
    width: 100%;
    border: 0;
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    background: rgba(201, 82, 79, 0.14);
    color: #fecaca;
    cursor: pointer;
    font-weight: 800;
}

.confronto-card-menu button:hover {
    background: rgba(201, 82, 79, 0.24);
}

.partida-row-historico {
    grid-template-columns: 64px minmax(0, 1fr) 52px 18px 52px minmax(0, 1fr);
}

.partida-row-com-cronometro {
    grid-template-rows: auto auto;
    row-gap: 0.28rem;
}

.partida-row-com-cronometro > .partida-jogo-label {
    grid-column: 1;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-cronometro {
    grid-column: 3 / 6;
    grid-row: 1;
    justify-self: center;
}

.partida-row-com-cronometro > .partida-time-fixo:first-of-type,
.partida-row-com-cronometro > .partida-time-select:first-of-type {
    grid-column: 2;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-time-fixo:last-of-type,
.partida-row-com-cronometro > .partida-time-select:last-of-type {
    grid-column: 6;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-placar:first-of-type {
    grid-column: 3;
    grid-row: 2;
}

.partida-row-com-cronometro > .partida-placar:last-of-type {
    grid-column: 5;
    grid-row: 2;
}

.partida-row-com-cronometro > b {
    grid-column: 4;
    grid-row: 2;
}

.partida-row span {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.partida-jogo-label {
    min-width: 0;
    display: grid;
    align-items: center;
}

.partida-jogo-label > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partida-cronometro {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.partida-cronometro .partida-cronometro-display {
    min-width: 44px;
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.partida-cronometro button {
    display: inline-grid;
    width: 26px;
    min-width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
}

.partida-cronometro button:hover,
.partida-cronometro button:focus-visible {
    background: rgba(110, 91, 224, 0.16);
    color: var(--roxo-suave);
}

.partida-cronometro button:disabled {
    opacity: 0.38;
    cursor: default;
}

.partida-cronometro button:disabled:hover {
    background: transparent;
    color: var(--texto-suave);
}

.partida-cronometro svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
}

.partida-row strong,
.partida-row button.partida-time-fixo {
    min-width: 0;
    overflow: hidden;
    color: var(--texto);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partida-row strong.partida-time-fixo,
.partida-row button.partida-time-fixo {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--cor-time, var(--borda));
    border-radius: 7px;
    background: var(--fundo-input);
    box-shadow: inset 3px 0 0 var(--cor-time, transparent);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    text-align: left;
}

.partida-row input {
    width: 58px;
    min-width: 0;
    padding: 0.4rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    text-align: center;
    font-weight: 900;
}

.partida-row-historico input[type="number"],
.partida-row-historico .partida-placar {
    width: 52px;
}

.partida-row b {
    color: var(--texto-suave);
    text-align: center;
}

.partida-placar {
    width: 58px;
    padding: 0.4rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    text-align: center;
    font-weight: 900;
}

.partida-row-varzea {
    grid-template-columns: 70px minmax(110px, 1fr) 58px 18px 58px minmax(110px, 1fr);
}

.partida-row.partida-invalida {
    border-color: rgba(201, 82, 79, 0.45);
}

.partida-row small {
    grid-column: 2 / -1;
    color: var(--vermelho);
    font-size: 0.74rem;
    font-weight: 800;
}

/* ===========================
   PÁGINA JOGADORES
=========================== */
.jogadores-form-card,
.jogadores-lista-card { overflow: hidden; }

.jogadores-form-title {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1.15rem;
}

.jogadores-form-toggle {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.jogadores-form-toggle > div {
    flex: 1;
    min-width: 0;
}

.jogadores-form-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--texto-suave);
    transition: transform 0.18s ease, color 0.18s ease;
}

.jogadores-form-toggle:hover .jogadores-form-chevron,
.jogadores-form-toggle:focus-visible .jogadores-form-chevron {
    color: var(--texto);
}

.jogadores-form-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--roxo) 50%, transparent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.jogadores-form-card.is-open .jogadores-form-chevron {
    transform: rotate(180deg);
}

.jogadores-form-card.is-collapsed .jogadores-form-title {
    margin-bottom: 0;
}

.jogadores-form-card.is-collapsed {
    display: none;
}

.jogadores-form-card.is-collapsed .jogadores-form-content {
    display: none;
}

.jogadores-form-title h2,
.jogadores-lista-header h2 { margin-bottom: 0.15rem; }

.jogadores-form-title p,
.jogadores-lista-header p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.alert-estatisticas-periodo {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin: 0.45rem 0 0;
    padding: 0.52rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.25;
}

.alert-estatisticas-periodo svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.jogadores-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--roxo) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--roxo) 35%, transparent);
    color: var(--roxo-suave);
    font-weight: 800;
}

.jogadores-lista-header {
    gap: 1rem;
    flex-wrap: wrap;
}

.jogadores-lista-topo-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
}

.jogadores-contador,
.overall-contador {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 0.82rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.form-busca-jogadores-compacta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.form-busca-jogadores-compacta.form-busca-com-plantel {
    display: grid;
    grid-template-columns: minmax(124px, 142px) minmax(0, 1fr);
    width: min(100%, 390px);
    flex-wrap: nowrap;
}

.form-busca-jogadores-compacta.form-busca-cartinhas {
    grid-template-columns: minmax(66px, 0.8fr) minmax(92px, 1fr) minmax(82px, 1fr);
    grid-template-areas: "periodo plantel busca";
    width: min(100%, 500px);
    gap: 0.28rem;
    padding: 0.3rem;
    border: 1px solid color-mix(in srgb, var(--borda) 85%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fundo-input) 72%, transparent);
}

.form-busca-jogadores-compacta.form-busca-com-plantel .campo-busca-jogadores {
    width: auto;
}

.form-busca-jogadores-compacta.form-busca-cartinhas .campo-busca-jogadores {
    grid-area: busca;
    max-width: none;
}

.form-busca-jogadores-compacta.form-busca-cartinhas .plantel-filtro-busca {
    grid-area: plantel;
    max-width: none;
}

.form-busca-jogadores-compacta.form-busca-cartinhas .btn-periodo-cartinhas {
    grid-area: periodo;
    width: 100%;
    min-width: 0;
    height: 30px;
    justify-content: flex-start;
    gap: 0.24rem;
    padding: 0 0.38rem;
    border-color: color-mix(in srgb, var(--verde) 42%, var(--borda));
    background: color-mix(in srgb, var(--verde) 12%, var(--fundo-input));
    color: var(--verde);
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
}

.form-busca-jogadores-compacta.form-busca-cartinhas .btn-periodo-cartinhas span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-busca-jogadores-compacta.form-busca-estatisticas-periodo {
    display: grid;
    grid-template-columns: minmax(140px, 150px) minmax(110px, 1fr);
    width: min(100%, 380px);
    gap: 0.28rem;
    padding: 0.3rem;
    border: 1px solid color-mix(in srgb, var(--borda) 85%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fundo-input) 72%, transparent);
}

.form-busca-jogadores-compacta.form-busca-estatisticas-periodo .stats-periodo-select {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 30px;
    background: color-mix(in srgb, var(--verde) 12%, var(--fundo-input));
    color: var(--verde);
    border: 1px solid color-mix(in srgb, var(--verde) 42%, var(--borda));
    border-radius: 7px;
}

.form-busca-jogadores-compacta.form-busca-estatisticas-periodo .stats-periodo-select > svg {
    position: absolute;
    left: 0.4rem;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.form-busca-jogadores-compacta.form-busca-estatisticas-periodo .stats-periodo-select select {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 1.25rem 0 1.45rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
}

.form-busca-jogadores-compacta.form-busca-estatisticas-periodo .stats-periodo-select:focus-within {
    border-color: color-mix(in srgb, var(--roxo) 65%, transparent);
    color: #fff;
}

.form-busca-jogadores-compacta.form-busca-estatisticas-periodo .campo-busca-jogadores {
    width: auto;
    min-width: 0;
}

.btn-periodo-estatisticas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--roxo-suave);
    cursor: pointer;
}

.btn-periodo-estatisticas:hover,
.btn-periodo-estatisticas:focus-visible {
    border-color: color-mix(in srgb, var(--roxo) 65%, transparent);
    color: #fff;
    outline: none;
}

.btn-periodo-estatisticas svg {
    width: 14px;
    height: 14px;
}

.form-busca-jogadores-compacta .campo-busca-jogadores {
    width: clamp(150px, 22vw, 230px);
    min-height: 30px;
    height: 30px;
    padding: 0 0.55rem;
    border-radius: 7px;
}

.form-busca-jogadores-compacta .campo-busca-jogadores input {
    padding: 0;
    font-size: 0.78rem;
}

.form-busca-jogadores-compacta .campo-busca-jogadores svg {
    width: 14px;
    height: 14px;
}

.plantel-filtro-compacto {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 30px;
    width: 100%;
    max-width: 142px;
    padding: 0 0.5rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto-suave);
}

.plantel-filtro-compacto[hidden] {
    display: none;
}

.plantel-filtro-compacto svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.plantel-filtro-compacto select {
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    outline: none;
}

.plantel-filtro-compacto select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.btn-limpar-busca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto-suave);
}

.btn-limpar-busca:hover {
    border-color: rgba(201, 82, 79, 0.45);
    color: var(--vermelho);
}

.btn-limpar-busca svg {
    width: 14px;
    height: 14px;
}

.jogadores-lista-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.jogadores-lista-rodape > .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 0.38rem 0.55rem;
    font-size: 0.68rem;
    gap: 0.3rem;
    line-height: 1.1;
    text-align: center;
}

.jogadores-lista-rodape > .btn svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
}

.form-por-pagina-rodape {
    margin: 0;
}

.por-pagina-control-compacto {
    min-height: 32px;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    border-radius: 7px;
}

.por-pagina-control-compacto select {
    min-width: 38px;
    font-size: 0.74rem;
}

.btn-montar-lote { margin-top: 0.65rem; }

.plantel-manager-form {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.plantel-manager-head {
    display: grid;
    gap: 0.65rem;
}

.plantel-manager-head strong {
    display: block;
    color: var(--texto);
    font-size: 0.92rem;
}

.plantel-manager-head span {
    color: var(--texto-suave);
    font-size: 0.78rem;
}

.plantel-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.plantel-chips span,
.jogador-card-plantel {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(110, 91, 224, 0.28);
    border-radius: 999px;
    background: rgba(110, 91, 224, 0.12);
    color: #a79bf0;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.1;
}

.plantel-chips span {
    padding: 0.32rem 0.55rem;
}

.plantel-manager-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.plantel-manager-add input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 0.88rem;
}

.plantel-manager-add input::placeholder {
    color: var(--texto-muted);
}

.plantel-manager-add input:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px rgba(110, 91, 224, 0.14);
}

.lote-preview {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.lote-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 70px 58px 32px;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: var(--fundo-inset);
}

.lote-row input,
.lote-row select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0.35rem 0.55rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto);
    font: inherit;
    font-size: 0.84rem;
}

.lote-row input[name="lote_nomes[]"] { font-weight: 600; }

.lote-row select[name="lote_posicoes[]"],
.lote-row select[name="lote_overalls[]"] {
    padding-inline: 0.35rem;
    text-align: center;
    font-weight: 700;
}

.lote-row select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.lote-row input:focus,
.lote-row select:focus {
    outline: none;
    border-color: var(--roxo);
}

.lote-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(201, 82, 79, 0.4);
    border-radius: 7px;
    background: rgba(201, 82, 79, 0.1);
    color: var(--vermelho);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: border-color 0.15s;
}

.lote-remover:hover { border-color: var(--vermelho); }

.lote-vazio {
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--borda-forte);
    border-radius: var(--radius-sm);
    color: var(--texto-suave);
    font-size: 0.85rem;
}

/* Busca + paginação */
.form-busca-jogadores {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.campo-busca-jogadores {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 240px;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 0.75rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto-suave);
    transition: border-color 0.15s;
}

.campo-busca-jogadores:focus-within { border-color: var(--roxo); }

.campo-busca-jogadores input {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0.55rem 0;
    background: transparent;
    border: 0;
    color: var(--texto);
    font-size: 0.9rem;
}

.campo-busca-jogadores input:focus { outline: none; }

.por-pagina-control {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.65rem;
    min-height: 40px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto-suave);
    font-size: 0.82rem;
    white-space: nowrap;
}

.por-pagina-control select {
    background: transparent;
    border: 0;
    color: var(--texto);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.por-pagina-control select option {
    background: var(--fundo-input);
    color: var(--texto);
}

.por-pagina-control select:focus { outline: none; }

.tabela-jogadores-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.tabela-jogadores th,
.tabela-jogadores td { vertical-align: middle; }

.tabela-jogadores th { background: color-mix(in srgb, var(--roxo) 5%, transparent); }

.tabela-jogadores tbody tr:hover td { background: color-mix(in srgb, var(--roxo) 6%, transparent); }

.jogador-card-lista {
    width: 190px;
    min-width: 172px;
    text-align: center;
}

.jogador-card-lista .player-mini-card,
.jogador-card-lista .player-card-medium {
    width: 64px;
    margin-inline: auto;
}

.jogador-card-lista .player-card-medium {
    width: 150px;
}

.jogador-card-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.jogador-card-selecao-wrap {
    position: relative;
    display: inline-block;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.jogador-card-selecao-indicador {
    position: absolute;
    right: -7px;
    top: -7px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--roxo), var(--verde));
    color: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.55) rotate(-14deg);
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jogador-card-selecao-indicador svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.jogador-card-selecao-wrap.is-selected .jogador-card-selecao-indicador {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.jogador-card-menu {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 10px);
    z-index: 8;
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--roxo) 34%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fundo-card) 90%, transparent);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.38);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(0.84);
    transform-origin: bottom center;
    transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
}

.jogador-card-menu::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    background: color-mix(in srgb, var(--fundo-card) 90%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--roxo) 34%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--roxo) 34%, transparent);
    transform: translateX(-50%) rotate(45deg);
}

.jogador-card-selecao-wrap.is-single-selected .jogador-card-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.jogador-card-menu a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.jogador-card-menu a:hover,
.jogador-card-menu a:focus-visible {
    background: color-mix(in srgb, var(--roxo) 34%, transparent);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.jogador-card-menu button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.jogador-card-menu button:hover,
.jogador-card-menu button:focus-visible {
    background: color-mix(in srgb, var(--roxo) 34%, transparent);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.jogador-card-menu a.btn-excluir:hover,
.jogador-card-menu a.btn-excluir:focus-visible {
    background: rgba(201, 82, 79, 0.2);
    color: var(--vermelho);
}

.jogador-card-menu svg {
    width: 15px;
    height: 15px;
}

.jogador-card-menu-form {
    display: inline-flex;
    margin: 0;
}

.lote-row-com-plantel {
    grid-template-columns: minmax(120px, 1fr) minmax(92px, 0.75fr) 70px 58px 32px;
}

.jogadores-posicionar-card {
    margin: 1rem 0 1.25rem;
}

.jogadores-posicionar-card .perfil-avatar-ajuste-toggle {
    cursor: default;
}

.jogadores-posicionar-upload {
    margin: 1rem 0;
}

.jogadores-posicionar-upload .perfil-avatar-preview {
    width: 96px;
    min-height: 132px;
    border-radius: 8px;
}

.jogadores-posicionar-upload .player-card-medium {
    width: 82px;
}

.jogador-card-selecao-wrap.is-selected .player-mini-card,
.jogador-card-selecao-wrap.is-selected .player-card-medium {
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 0 rgba(34, 211, 238, 0));
}

.jogador-card-selecao-wrap.is-selected::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(34, 211, 238, 0.5);
    border-radius: 10px;
    opacity: 0.9;
    pointer-events: none;
    animation: cardSelectPulse 0.34s ease;
}

@keyframes cardSelectPulse {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 0.9;
        transform: scale(1);
    }
}

.jogador-card-posicao {
    display: block;
    margin-top: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
}

.jogador-card-plantel {
    margin-top: 0.22rem;
    padding: 0.24rem 0.45rem;
}

.jogador-card-plantel svg {
    width: 0.72rem;
    height: 0.72rem;
}

.jogador-card-caracteristica {
    display: block;
    margin-top: 0.12rem;
    color: rgba(226, 232, 240, 0.52);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    white-space: nowrap;
}

.jogadores-lista-header > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
}

.jogadores-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
}

.jogadores-tabs-com-add {
    grid-template-columns: 38px repeat(2, minmax(0, 1fr));
}

.jogadores-tabs-com-tools {
    grid-template-columns: 38px 38px minmax(80px, 1fr) minmax(110px, 1.3fr);
}

.jogadores-tabs a,
.jogadores-tab-add {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
    min-height: 34px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-input);
    color: var(--texto-suave);
    font-size: 0.84rem;
    font-weight: 900;
}

.jogadores-tab-add {
    width: 38px;
    padding-inline: 0;
    cursor: pointer;
}

.jogadores-tab-add svg.lucide {
    width: 16px;
    height: 16px;
}

.jogadores-tabs a:hover,
.jogadores-tabs a.ativo,
.jogadores-tab-add:hover,
.jogadores-tab-add:focus-visible {
    border-color: color-mix(in srgb, var(--roxo) 58%, transparent);
    background: color-mix(in srgb, var(--roxo) 16%, transparent);
    color: var(--texto);
}

.jogadores-tab-add:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--roxo) 55%, transparent);
    outline-offset: 2px;
}

.jogadores-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(11, 14, 19, 0.9);
    border-radius: 999px;
    background: var(--roxo);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 18px var(--roxo-brilho);
}

.col-check {
    width: 42px;
    text-align: center;
}

.col-check input,
.overall-checkbox,
.overall-select-all {
    width: 16px;
    height: 16px;
    accent-color: var(--roxo);
    cursor: pointer;
}

.jogador-nome {
    display: inline-block;
    max-width: 260px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.jogador-nome:hover,
.jogador-nome:focus-visible {
    color: var(--verde);
    outline: none;
}

.jogadores-acoes { align-items: center; }

.jogadores-acoes a,
.btn-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    color: var(--texto);
    line-height: 1;
    transition: border-color 0.15s, color 0.15s, transform 0.1s;
}

.jogadores-acoes a:hover,
.btn-acao:hover {
    border-color: var(--roxo);
    color: var(--roxo-suave);
    transform: translateY(-1px);
}

.jogadores-acoes .btn-acao-danger:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.btn-acao:disabled,
.btn-acao[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.form-inline .btn-acao {
    padding: 0;
}

.acoes-em-lote {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.jogadores-vazio {
    padding: 2rem 1rem !important;
    color: var(--texto-suave);
    text-align: center;
}

.paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn-pag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--fundo-input);
    color: var(--texto);
    border: 1px solid var(--borda);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-variant-numeric: tabular-nums;
}

.btn-pag:hover:not(.disabled):not(.ativo) {
    border-color: var(--roxo);
    color: var(--roxo-suave);
}

.btn-pag.ativo {
    background: linear-gradient(135deg, var(--roxo-forte), var(--roxo));
    color: #fff;
    border-color: var(--roxo);
    pointer-events: none;
}

.btn-pag.disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

/* ===========================
   PÁGINA EVOLUÇÃO DE OVERALL
=========================== */
.overall-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.overall-card .card-header h2 { margin-bottom: 0.2rem; }

.overall-votos-info {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.overall-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0.95rem;
    background: var(--fundo-inset);
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
}

.overall-check-col {
    width: 40px;
    text-align: center;
}

.overall-voto-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.overall-liberar-form { margin: 0; }

.overall-input {
    min-width: 88px;
    padding: 0.4rem 0.55rem;
    background: var(--fundo-input);
    border: 1px solid var(--borda);
    border-radius: 6px;
    color: var(--texto);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.overall-input:focus {
    outline: none;
    border-color: var(--roxo);
}

.overall-btn { width: auto; }

.badge-overall-novo {
    display: inline-flex;
    min-width: 44px;
    justify-content: center;
}

.overall-voto-lista {
    display: grid;
    gap: 0.65rem;
}

.overall-voto-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.overall-voto-jogador {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.6rem;
}

.overall-voto-jogador strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overall-voto-form-compacto {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
}

.overall-voto-form-compacto .overall-input {
    width: 70px;
    min-width: 70px;
    text-align: center;
}

.overall-voto-vazio {
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.jogadores-evolucao-lista {
    gap: 0.85rem;
}

.jogadores-evolucao-card {
    position: relative;
    grid-template-columns: 172px minmax(0, 1fr) minmax(180px, auto);
    align-items: center;
    border-radius: var(--radius-sm);
}

.jogadores-evolucao-card-preview {
    position: relative;
    text-align: center;
}

.jogadores-evolucao-card-preview .overall-checkbox {
    position: absolute;
    left: 0.15rem;
    top: 0.15rem;
    z-index: 2;
}

.jogadores-evolucao-card-preview .player-card-medium {
    width: 150px;
    margin-inline: auto;
}

.jogadores-evolucao-card-info {
    min-width: 0;
}

.jogadores-evolucao-card-info strong {
    display: block;
    margin-bottom: 0.65rem;
    overflow: hidden;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jogadores-evolucao-overalls {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 800;
}

.jogadores-evolucao-overalls span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.overall-votos-pendentes {
    width: min(100%, 430px);
    margin-top: 0.65rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
}

.overall-votos-pendentes summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    color: var(--texto);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 850;
    list-style: none;
}

.overall-votos-pendentes summary::-webkit-details-marker {
    display: none;
}

.overall-votos-pendentes summary::after {
    content: "+";
    display: inline-grid;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid var(--borda);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: 0.78rem;
    line-height: 1;
}

.overall-votos-pendentes[open] summary::after {
    content: "-";
}

.overall-votos-pendentes summary span {
    min-width: 0;
}

.overall-votos-pendentes summary b {
    color: var(--verde);
    font-variant-numeric: tabular-nums;
}

.overall-votos-pendentes summary em {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-style: normal;
    white-space: nowrap;
}

.overall-votos-pendentes-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 0.65rem 0.65rem;
}

.overall-votos-pendentes-lista span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.18rem 0.45rem;
    border: 1px solid rgba(201, 82, 79, 0.28);
    border-radius: 999px;
    background: rgba(201, 82, 79, 0.08);
    color: var(--texto);
    font-size: 0.72rem;
    font-weight: 750;
}

.overall-votos-pendentes-lista .overall-votos-pendentes-vazio {
    border-color: rgba(42, 163, 108, 0.28);
    background: rgba(42, 163, 108, 0.08);
    color: var(--texto-suave);
}

.avaliacao-votos-pendentes {
    width: 100%;
    margin: 0.55rem 0 0.7rem;
}

.avaliacao-lembrete-form {
    display: flex;
    justify-content: flex-end;
    padding: 0 0.65rem 0.65rem;
    margin: 0;
}

.avaliacao-lembrete-form .btn {
    min-height: 32px;
    gap: 0.35rem;
    white-space: nowrap;
}

.overall-alcancado-chip {
    color: var(--verde);
}

.badge-overall-alcancado {
    border-color: var(--verde);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--verde) 25%, transparent);
}

.overall-alcancado-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--verde) 38%, var(--borda));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--verde) 8%, transparent);
}

.overall-alcancado-panel > div:first-child {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.overall-alcancado-panel strong {
    font-size: 0.82rem;
}

.overall-alcancado-panel span {
    color: var(--texto-suave);
    font-size: 0.76rem;
}

.overall-alcancado-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.overall-alcancado-actions form {
    margin: 0;
}

.jogadores-evolucao-voto {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.jogadores-evolucao-voto-registrado {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.jogadores-evolucao-voto-registrado i {
    width: 16px;
    height: 16px;
    color: var(--verde, #2aa36c);
}

.overall-batch-action {
    position: sticky;
    top: 0.65rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(110, 91, 224, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(18, 12, 35, 0.92);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
}

.overall-batch-action[hidden] {
    display: none !important;
}

.overall-batch-action span {
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 800;
}

.overall-batch-action b {
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.overall-batch-action .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.overall-batch-action svg {
    width: 15px;
    height: 15px;
}

/* ===========================
   LOJA
=========================== */
.loja-header {
    display: flex;
    flex-direction: column;
}

.loja-resumo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.loja-resumo-pacotes {
    grid-template-columns: 1fr;
}

.loja-saldo-card,
.loja-jogador-card {
    display: grid;
    gap: 0.35rem;
}

.loja-pacotes-atalho {
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.loja-pacotes-atalho::after {
    content: "";
    position: absolute;
    inset: auto -18px -34px auto;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    background: rgba(110, 91, 224, 0.18);
    pointer-events: none;
}

.loja-pacotes-atalho:hover,
.loja-pacotes-atalho:focus-visible,
.loja-pacotes-atalho.is-active {
    border-color: rgba(110, 91, 224, 0.72);
    background: rgba(110, 91, 224, 0.1);
    transform: translateY(-1px);
    outline: none;
}

.loja-pacotes-atalho .loja-pacote-promo-badge {
    left: auto;
    right: 0.7rem;
}

.loja-resumo-label,
.loja-card-kicker {
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.loja-saldo-card strong,
.loja-jogador-card strong {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--fonte-display);
    font-size: 1.65rem;
    line-height: 1.1;
}

.loja-saldo-card strong {
    color: var(--ouro);
    font-variant-numeric: tabular-nums;
}

.loja-saldo-card svg {
    width: 23px;
    height: 23px;
}

.loja-saldo-card small,
.loja-jogador-card small {
    color: var(--texto-suave);
}

.loja-carousel {
    position: relative;
    display: grid;
    gap: 0.75rem;
}

.loja-carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.loja-carousel-btn {
    color: var(--texto);
}

.loja-carousel-btn:hover,
.loja-carousel-btn:focus-visible {
    border-color: var(--roxo);
    color: var(--roxo-suave);
    outline: none;
}

.loja-carousel-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.loja-grid {
    display: flex;
    gap: 0.85rem;
    align-items: stretch;
    margin-inline: -0.35rem;
    padding: 0.1rem 0.35rem 0.65rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0.35rem;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(110, 91, 224, 0.52) transparent;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.loja-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.loja-grid::-webkit-scrollbar {
    height: 8px;
}

.loja-grid::-webkit-scrollbar-track {
    background: transparent;
}

.loja-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(110, 91, 224, 0.52);
}

@media (hover: hover) and (pointer: fine) {
    .loja-grid {
        cursor: grab;
    }
}

.loja-card {
    display: flex;
    flex: 0 0 clamp(188px, 23vw, 224px);
    min-width: 0;
    flex-direction: column;
    gap: 0.75rem;
    scroll-snap-align: start;
}

.loja-card-preview {
    display: flex;
    justify-content: center;
    min-height: 234px;
}

.loja-card-preview .player-card-medium {
    width: 150px;
    cursor: default;
}

.loja-card-preview .player-card-medium:hover,
.loja-card-preview .player-card-medium:focus-visible {
    transform: none;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.42));
}

.loja-card-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.loja-card-info h2 {
    margin-top: 0.1rem;
    font-size: 1rem;
}

.loja-card-nivel {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 0.28rem;
    padding: 0.18rem 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.loja-card-nivel-raro {
    border-color: rgba(70, 135, 185, 0.36);
    background: rgba(70, 135, 185, 0.12);
    color: #7dd3fc;
}

.loja-card-nivel-epico {
    border-color: rgba(168, 85, 247, 0.42);
    background: rgba(168, 85, 247, 0.14);
    color: #d8b4fe;
}

.loja-card-nivel-lendario {
    border-color: rgba(200, 151, 59, 0.42);
    background: rgba(200, 151, 59, 0.14);
    color: #c8973b;
}

.loja-preco {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(200, 151, 59, 0.26);
    border-radius: 999px;
    background: rgba(200, 151, 59, 0.08);
    color: var(--ouro);
    font-size: 0.78rem;
    white-space: nowrap;
}

.loja-preco svg {
    width: 15px;
    height: 15px;
}

.loja-card-form {
    margin-top: auto;
}

.loja-card-form .btn[disabled] {
    opacity: 0.62;
    cursor: not-allowed;
}

.loja-pacotes-topo {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
}

.loja-pacotes-grid {
    gap: 0.9rem;
}

.loja-pacote-card {
    position: relative;
    display: flex;
    flex: 0 0 clamp(218px, 28vw, 260px);
    min-width: 0;
    min-height: 444px;
    flex-direction: column;
    gap: 0.85rem;
    scroll-snap-align: start;
}

.loja-pacote-promo-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--vermelho, #c9524f), #c2743a);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.loja-pacote-promo-badge svg {
    width: 13px;
    height: 13px;
}

.loja-pacote-precos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.loja-preco-original {
    color: var(--texto-suave);
    font-size: 0.78rem;
    text-decoration: line-through;
    white-space: nowrap;
}

.loja-pacote-precos .loja-preco {
    width: auto;
    flex: 1 1 auto;
}

.loja-pacote-preview {
    display: flex;
    min-height: 244px;
    align-items: center;
    justify-content: center;
}

.loja-pacote-pack {
    --loja-pacote-frame-light: #f4b866;
    --loja-pacote-frame: #b6652c;
    --loja-pacote-frame-dark: #50240f;
    --loja-pacote-accent: #ffad5c;
    --loja-pacote-glow: rgba(238, 117, 40, 0.3);
    --loja-pacote-face-top: #481916;
    --loja-pacote-face-mid: #210c12;
    --loja-pacote-face-bottom: #09070b;
    --loja-pacote-line: rgba(255, 180, 92, 0.26);
    position: relative;
    display: grid;
    width: 154px;
    aspect-ratio: 0.72;
    align-content: start;
    justify-items: center;
    padding: 2.6rem 1rem 1.2rem;
    overflow: hidden;
    border: 0;
    clip-path: polygon(
        10% 0,
        90% 0,
        100% 7%,
        100% 93%,
        90% 100%,
        10% 100%,
        0 93%,
        0 7%
    );
    color: #fff;
    isolation: isolate;
    background:
        linear-gradient(145deg,
            var(--loja-pacote-frame-light) 0 7%,
            var(--loja-pacote-frame) 14%,
            var(--loja-pacote-frame-light) 25%,
            var(--loja-pacote-frame-dark) 49%,
            var(--loja-pacote-frame) 72%,
            var(--loja-pacote-frame-light) 88%,
            var(--loja-pacote-frame-dark) 100%);
    filter:
        drop-shadow(0 18px 15px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 14px var(--loja-pacote-glow));
    transition: filter 0.24s ease, transform 0.24s ease;
}

.loja-pacote-card:hover .loja-pacote-pack {
    filter:
        drop-shadow(0 21px 17px rgba(0, 0, 0, 0.48))
        drop-shadow(0 0 20px var(--loja-pacote-glow));
    transform: translateY(-4px);
}

.loja-pacote-pack-reveal {
    width: min(198px, 56vw);
    filter:
        drop-shadow(0 22px 24px rgba(0, 0, 0, 0.58))
        drop-shadow(0 0 22px rgba(20, 184, 166, 0.36));
}

.loja-pacote-pack::before,
.loja-pacote-pack::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.loja-pacote-pack::before {
    inset: 5px;
    clip-path: polygon(
        9% 0,
        91% 0,
        100% 6%,
        100% 94%,
        91% 100%,
        9% 100%,
        0 94%,
        0 6%
    );
    background:
        linear-gradient(128deg, transparent 0 25%, rgba(255, 255, 255, 0.13) 26%, transparent 28%),
        linear-gradient(232deg, transparent 0 23%, var(--loja-pacote-line) 24%, transparent 26%),
        radial-gradient(circle at 50% 42%, var(--loja-pacote-glow), transparent 43%),
        linear-gradient(180deg,
            var(--loja-pacote-face-top) 0%,
            var(--loja-pacote-face-mid) 52%,
            var(--loja-pacote-face-bottom) 100%);
}

.loja-pacote-pack::after {
    inset: 17px 13px 21px;
    clip-path: polygon(8% 0, 92% 0, 100% 6%, 100% 94%, 92% 100%, 8% 100%, 0 94%, 0 6%);
    background:
        linear-gradient(90deg, var(--loja-pacote-line), transparent 8% 92%, var(--loja-pacote-line)),
        linear-gradient(180deg, var(--loja-pacote-line), transparent 10% 88%, var(--loja-pacote-line)),
        repeating-linear-gradient(125deg, transparent 0 17px, rgba(255, 255, 255, 0.025) 18px 19px),
        radial-gradient(circle at 50% 43%, var(--loja-pacote-glow), transparent 48%);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.42);
}

.loja-pacote-serrilhado {
    position: absolute;
    left: 7%;
    right: 7%;
    z-index: 2;
    height: 11px;
    opacity: 0.72;
    background:
        repeating-linear-gradient(115deg, transparent 0 7px, rgba(255, 255, 255, 0.28) 7px 9px),
        linear-gradient(180deg, var(--loja-pacote-frame-light), var(--loja-pacote-frame-dark));
    box-shadow: 0 0 9px var(--loja-pacote-glow);
}

.loja-pacote-serrilhado-top {
    top: 5px;
}

.loja-pacote-serrilhado-bottom {
    right: 24%;
    bottom: 7px;
    left: 24%;
    height: 8px;
    transform: rotate(180deg);
}

.loja-pacote-lacre {
    position: relative;
    z-index: 3;
    display: grid;
    width: 38px;
    height: 43px;
    margin-top: -1.35rem;
    place-items: center;
    clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%),
        linear-gradient(180deg, var(--loja-pacote-face-mid), var(--loja-pacote-face-bottom));
    color: var(--loja-pacote-accent);
    box-shadow:
        inset 0 0 0 2px var(--loja-pacote-frame),
        0 0 16px var(--loja-pacote-glow);
}

.loja-pacote-lacre svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.2;
}

.loja-pacote-logo {
    position: relative;
    z-index: 3;
    width: 62px;
    aspect-ratio: 1;
    margin-top: 0.9rem;
    background: var(--loja-pacote-accent);
    filter: drop-shadow(0 0 9px var(--loja-pacote-glow));
    -webkit-mask: url('../img/logo_deLogin.png') center / contain no-repeat;
    mask: url('../img/logo_deLogin.png') center / contain no-repeat;
}

.loja-pacote-titulo,
.loja-pacote-subtitulo,
.loja-pacote-raridade {
    position: relative;
    z-index: 3;
    text-align: center;
    text-transform: uppercase;
}

.loja-pacote-titulo {
    max-width: 112px;
    margin-top: 0.42rem;
    color: #fff;
    font-family: var(--fonte-display);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.05;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.loja-pacote-subtitulo {
    margin-top: 0.24rem;
    color: var(--loja-pacote-accent);
    font-size: 0.43rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.loja-pacote-raridade {
    margin-top: auto;
    padding: 0.2rem 0.48rem;
    border: 1px solid var(--loja-pacote-line);
    border-radius: 999px;
    color: var(--loja-pacote-accent);
    font-size: 0.48rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    background: rgba(0, 0, 0, 0.25);
}

.loja-pacote-prata .loja-pacote-pack {
    --loja-pacote-frame-light: #eef8ff;
    --loja-pacote-frame: #8eabc0;
    --loja-pacote-frame-dark: #344b5d;
    --loja-pacote-accent: #bdeaff;
    --loja-pacote-glow: rgba(96, 200, 255, 0.3);
    --loja-pacote-face-top: #153b52;
    --loja-pacote-face-mid: #0a2131;
    --loja-pacote-face-bottom: #040b12;
    --loja-pacote-line: rgba(174, 226, 255, 0.28);
}

.loja-pacote-ouro .loja-pacote-pack {
    --loja-pacote-frame-light: #fff3a8;
    --loja-pacote-frame: #dcae2c;
    --loja-pacote-frame-dark: #68430b;
    --loja-pacote-accent: #ffe16b;
    --loja-pacote-glow: rgba(200, 151, 59, 0.32);
    --loja-pacote-face-top: #263358;
    --loja-pacote-face-mid: #101a36;
    --loja-pacote-face-bottom: #050817;
    --loja-pacote-line: rgba(255, 225, 107, 0.3);
}

.loja-pacote-info {
    display: grid;
    grid-template-rows: minmax(92px, 1fr) auto;
    min-height: 138px;
    align-content: stretch;
    gap: 1rem;
}

.loja-pacote-info > div {
    display: grid;
    min-height: 92px;
    align-content: start;
    gap: 0.18rem;
}

.loja-pacote-info h2 {
    min-height: 2.15em;
    line-height: 1.08;
}

.loja-pacote-info small {
    display: block;
    color: var(--texto-suave);
    font-size: 0.78rem;
    line-height: 1.35;
}

.loja-pacote-info .loja-preco {
    width: 100%;
    min-height: 34px;
    align-self: end;
    justify-content: center;
}

.loja-pacote-card > .btn {
    min-height: 40px;
    margin-top: auto;
}

.loja-pacote-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: none;
    place-items: center;
    padding: 1rem;
}

body.loja-pacote-confirm-open,
body.confirm-global-open {
    overflow: hidden;
}

.loja-pacote-confirm-modal.is-open {
    display: grid;
}

.loja-pacote-confirm-modal[hidden] {
    display: none !important;
}

.loja-pacote-confirm-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(48, 150, 140, 0.18), transparent 34%),
        rgba(2, 1, 8, 0.82);
    backdrop-filter: blur(10px);
}

.loja-pacote-confirm-panel {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(380px, calc(100vw - 28px));
    gap: 1rem;
    overflow: hidden;
    padding: 1.1rem;
    border: 1px solid rgba(48, 150, 140, 0.28);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(16, 24, 39, 0.98), rgba(7, 9, 19, 0.98)),
        radial-gradient(circle at 82% 18%, rgba(110, 91, 224, 0.22), transparent 32%);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.62),
        0 0 42px rgba(48, 150, 140, 0.16);
}

.loja-pacote-confirm-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto);
    cursor: pointer;
}

.loja-pacote-confirm-close svg {
    width: 16px;
    height: 16px;
}

.loja-pacote-confirm-pack {
    position: relative;
    display: grid;
    width: 92px;
    aspect-ratio: 0.72;
    place-items: center;
    justify-self: center;
    overflow: hidden;
    border: 1px solid rgba(48, 150, 140, 0.44);
    border-radius: 8px 8px 13px 13px;
    background:
        linear-gradient(120deg, transparent 0 16%, rgba(48, 150, 140, 0.9) 17%, transparent 19% 100%),
        linear-gradient(240deg, transparent 0 16%, rgba(34, 211, 238, 0.86) 17%, transparent 19% 100%),
        linear-gradient(180deg, #0c1627, #030812);
    box-shadow: 0 0 28px rgba(48, 150, 140, 0.24);
}

.loja-pacote-confirm-pack span {
    color: #20e7b7;
    font-family: var(--fonte-display);
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 900;
    text-shadow: 0 0 14px rgba(32, 231, 183, 0.5);
}

.loja-pacote-confirm-copy {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
}

.loja-pacote-confirm-copy > span {
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.loja-pacote-confirm-copy h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: 1.65rem;
    line-height: 1;
}

.loja-pacote-confirm-copy p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.9rem;
    line-height: 1.35;
}

.loja-pacote-confirm-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid rgba(200, 151, 59, 0.28);
    border-radius: 999px;
    background: rgba(200, 151, 59, 0.1);
    color: var(--ouro);
}

.loja-pacote-confirm-copy strong svg {
    width: 16px;
    height: 16px;
}

.loja-pacote-confirm-probabilidades {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
}

.loja-pacote-confirm-probabilidades > span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.loja-pacote-confirm-prob-list {
    display: grid;
    gap: 0.42rem;
}

.loja-pacote-confirm-prob {
    display: grid;
    gap: 0.22rem;
}

.loja-pacote-confirm-prob > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--texto);
    font-size: 0.8rem;
    font-weight: 800;
}

.loja-pacote-confirm-prob strong {
    color: var(--ouro);
    font-variant-numeric: tabular-nums;
}

.loja-pacote-confirm-prob i {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.loja-pacote-confirm-prob i::before {
    content: "";
    display: block;
    width: var(--probabilidade, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--verde), var(--roxo-suave));
}

.loja-pacote-confirm-prob-lendario i::before {
    background: linear-gradient(90deg, #c8973b, #c2743a);
}

.loja-pacote-confirm-prob-epico i::before {
    background: linear-gradient(90deg, #a855f7, #22d3ee);
}

.loja-pacote-confirm-prob-raro i::before {
    background: linear-gradient(90deg, #38bdf8, #2dd4bf);
}

.loja-pacote-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.loja-vinculo-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    max-width: 760px;
}

.loja-vinculo-card h2 {
    margin-bottom: 0.25rem;
}

.loja-vinculo-card p {
    margin-bottom: 0.9rem;
    color: var(--texto-suave);
}

.loja-vinculo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(110, 91, 224, 0.14);
    color: var(--roxo-suave);
}

.loja-vinculo-icon svg {
    width: 25px;
    height: 25px;
}

/* ===========================
   SELEÇÃO DE JOGADORES (LEGADO)
=========================== */
.jogadores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.jogador-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    background: var(--fundo-input);
    border: 2px solid var(--borda);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
}

.jogador-card:hover {
    border-color: var(--roxo);
    transform: translateY(-2px);
}

.jogador-card input {
    width: 18px;
    height: 18px;
    accent-color: var(--roxo);
}

.jogador-card:has(input:checked),
.jogador-card.checked {
    border-color: var(--roxo);
    background: rgba(110, 91, 224, 0.1);
}

.jogador-card .nome {
    font-size: 15px;
    font-weight: 600;
    color: var(--texto);
}

.jogador-card .overall {
    display: inline-block;
    width: max-content;
    padding: 4px 10px;
    background: var(--roxo-forte);
    color: #fff;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
}

/* ===========================
   PREFERENCIAS
=========================== */
.preferencias-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    max-width: 1040px;
    margin-bottom: 1.1rem;
    padding: 0.2rem 0;
}

.preferencias-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(110, 91, 224, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto);
}

.preferencias-back-link:hover {
    border-color: rgba(110, 91, 224, 0.46);
    background: rgba(110, 91, 224, 0.12);
    color: #fff;
}

.preferencias-header h1 {
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.preferencias-header p {
    max-width: 48ch;
}

.preferencias-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1.1rem;
    width: 100%;
    max-width: 1040px;
    align-items: start;
}

.preferencias-shell > *,
.preferencias-card,
.preferencias-form,
.preferencias-form > *,
.notificacoes-preferencias-head > div,
.custom-theme-editor,
.custom-theme-head > div,
.custom-theme-groups,
.custom-theme-group,
.custom-theme-group summary > span {
    min-width: 0;
}

.preferencias-form input,
.preferencias-form select,
.preferencias-form textarea {
    max-width: 100%;
}

.preferencias-tabs {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
    border: 1px solid rgba(110, 91, 224, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.preferencias-nav-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 34px;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(110, 91, 224, 0.14);
    border-radius: 10px;
    background: rgba(110, 91, 224, 0.075);
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.preferencias-nav-title::-webkit-details-marker {
    display: none;
}

.preferencias-nav-title svg {
    width: 14px;
    height: 14px;
    opacity: 0.68;
    transition: transform 0.16s ease;
}

.preferencias-nav-group {
    display: grid;
    gap: 0.35rem;
}

.preferencias-nav-group[open] .preferencias-nav-title {
    color: var(--roxo-suave);
    border-color: rgba(110, 91, 224, 0.28);
    background: rgba(110, 91, 224, 0.12);
}

.preferencias-nav-group[open] .preferencias-nav-title svg {
    transform: rotate(180deg);
}

.preferencias-tabs a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    color: var(--texto-suave);
    font-weight: 900;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.preferencias-tabs a:hover {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.05);
}

.preferencias-tabs a.ativo {
    color: #fff;
    background: rgba(110, 91, 224, 0.2);
    box-shadow: inset 0 0 0 1px rgba(110, 91, 224, 0.34);
}

.preferencias-tabs svg {
    width: 18px;
    height: 18px;
}

.preferencias-tabs a svg:last-child {
    justify-self: end;
    opacity: 0.6;
}

.preferencias-card {
    min-width: 0;
    border-color: rgba(110, 91, 224, 0.18);
    border-radius: 18px;
    background: rgba(19, 16, 32, 0.78);
}

.preferencias-card .card-header p {
    color: var(--texto-suave);
    margin-top: 0.15rem;
}

.preferencias-form {
    display: grid;
    gap: 0.9rem;
}

.preferencias-form .btn {
    justify-self: start;
    margin-top: 0.15rem;
}

.notificacoes-preferencias-card {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--roxo) 35%, var(--borda));
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.notificacoes-preferencias-card.is-highlighted {
    border-color: color-mix(in srgb, var(--verde) 70%, var(--borda));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent), var(--sombra-roxa);
    transform: translateY(-2px);
}

.notificacoes-preferencias-head {
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.notificacoes-preferencias-head h2 {
    margin: 0.15rem 0 0;
}

.notificacoes-preferencias-head p,
.notificacoes-status-box p {
    color: var(--texto-suave);
    overflow-wrap: anywhere;
}

.notificacoes-preferencias-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--roxo) 26%, transparent);
    color: var(--roxo-suave);
    flex-shrink: 0;
}

.notificacoes-preferencias-icon svg {
    width: 24px;
    height: 24px;
}

.notificacoes-status-box {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
}

.notificacoes-status-box strong {
    color: var(--texto);
    font-size: 1.03rem;
}

.notificacoes-status-pill {
    width: max-content;
    max-width: 100%;
    padding: 0.38rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--roxo) 45%, var(--borda));
    border-radius: 999px;
    color: var(--texto);
    background: color-mix(in srgb, var(--roxo) 12%, transparent);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.notificacoes-preferencias-card[data-push-estado="ativo"] .notificacoes-status-pill {
    border-color: color-mix(in srgb, var(--verde) 55%, var(--borda));
    background: color-mix(in srgb, var(--verde) 14%, transparent);
}

.notificacoes-preferencias-card[data-push-estado="erro"] .notificacoes-status-pill,
.notificacoes-preferencias-card[data-push-estado="bloqueado"] .notificacoes-status-pill {
    border-color: color-mix(in srgb, var(--vermelho) 65%, var(--borda));
    background: color-mix(in srgb, var(--vermelho) 14%, transparent);
}

.notificacoes-preferencias-actions {
    flex-wrap: wrap;
}

/* ===========================
   GERENCIAR CLUBE
=========================== */
.clube-shell {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 1040px;
    min-width: 0;
}

.clube-shell > *,
.clube-card,
.clube-accordion-header > div,
.clube-accordion > form,
.clube-accordion > form > *,
.clube-logo-editor > *,
.clube-form-grid > *,
.overall-dinamico-config > *,
.overall-dinamico-fields > * {
    min-width: 0;
}

.clube-overall-settings-card {
    inline-size: 100%;
    max-inline-size: 100%;
    contain: inline-size;
}

.clube-overall-settings-card > * {
    max-inline-size: 100%;
}

.clube-page-header {
    display: grid;
    gap: 0.35rem;
    align-items: start;
}

.clube-page-header .page-eyebrow,
.clube-page-header h1,
.clube-page-header p {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
}

.clube-char-counter {
    justify-self: end;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.clube-card .card-header p {
    color: var(--texto-suave);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.clube-accordion {
    padding: 0;
    overflow: hidden;
    scroll-margin-top: 1rem;
}

.clube-accordion-header {
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    margin-bottom: 0;
    list-style: none;
    user-select: none;
}

.clube-accordion-header::-webkit-details-marker {
    display: none;
}

.clube-accordion-header > svg {
    color: var(--texto-suave);
    transition: transform 0.15s, color 0.15s;
}

.clube-accordion[open] .clube-accordion-header {
    border-bottom: 1px solid var(--borda);
    margin-bottom: 1rem;
}

.clube-accordion[open] .clube-accordion-header > svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.clube-accordion > form,
.clube-accordion > .tabela-jogadores-wrap,
.clube-accordion > .clube-usuarios-lista {
    width: 100%;
    min-width: 0;
    padding: 0 1.4rem 1.4rem;
}

.clube-accordion > .preferencias-form input,
.clube-accordion > .preferencias-form select,
.clube-accordion > .preferencias-form textarea {
    min-width: 0;
    max-width: 100%;
}

.clube-accordion > .preferencias-form input[type="file"] {
    overflow: hidden;
}

.clube-accordion > form.preferencias-form {
    gap: 1rem;
}

.clube-form-section {
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.clube-form-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.clube-form-section > summary::-webkit-details-marker {
    display: none;
}

.clube-form-section > summary span {
    color: var(--texto);
    font-weight: 800;
}

.clube-form-section > summary svg {
    width: 18px;
    height: 18px;
    color: var(--texto-suave);
    transition: transform 0.15s ease, color 0.15s ease;
}

.clube-form-section[open] > summary {
    border-bottom: 1px solid var(--borda);
}

.clube-form-section[open] > summary svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.clube-form-section > .clube-form-grid,
.clube-form-section > .clube-plano-status {
    margin: 0.95rem;
}

.clube-logo-editor {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 1rem;
    align-items: start;
}

.clube-logo-editor img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.05);
}

.clube-logo-editor .form-group {
    margin-bottom: 0;
}

.clube-logo-actions {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
}

.overall-dinamico-config {
    align-items: start;
}

.overall-dinamico-config strong {
    display: block;
    margin-bottom: 0.2rem;
}

.overall-dinamico-config p {
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Usa a mesma grade e a mesma contencao do formulario "Dados do clube". */
.overall-dinamico-form,
.overall-dinamico-form > *,
.overall-dinamico-config > *,
.overall-dinamico-fields > *,
.overall-dinamico-peso-resultado-grid > *,
.overall-dinamico-recalculo-form > * {
    min-width: 0;
    max-width: 100%;
}

.overall-dinamico-form {
    width: 100%;
}

.overall-dinamico-field {
    min-width: 0;
    margin: 0;
}

.overall-dinamico-field--full {
    grid-column: 1 / -1;
}

.overall-dinamico-field label {
    margin-bottom: 0.5rem;
}

.overall-dinamico-field small {
    display: block;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.overall-dinamico-field > label,
.overall-dinamico-field small,
.overall-dinamico-recalculo-info strong,
.overall-dinamico-recalculo-info p {
    overflow-wrap: anywhere;
    word-break: normal;
}

.overall-dinamico-select-wrap {
    position: relative;
    min-width: 0;
}

.overall-dinamico-select-wrap > svg {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    width: 17px;
    height: 17px;
    color: var(--texto-suave);
    pointer-events: none;
    transform: translateY(-50%);
}

.overall-dinamico-select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-right: 2.75rem !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
}

.overall-dinamico-peso-resultado-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.overall-dinamico-peso-resultado-grid label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    color: var(--texto-suave);
}

.overall-dinamico-peso-resultado-grid input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* IDs (especificidade maior que .form-group input, inclusive dentro dos @media que reduzem
   o font-size no resto do site) - sem isso, o campo fica com menos de 16px e o iOS aplica
   zoom automatico da pagina ao focar o input, dando a sensacao de tela "sambando". */
#overall_dinamico_peso_resultado_vitoria,
#overall_dinamico_peso_resultado_empate,
#overall_dinamico_peso_resultado_derrota {
    font-size: 16px;
}

.overall-dinamico-recalculo-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0;
    padding: 0.85rem 1.4rem 1.4rem;
    border-top: 1px solid var(--borda);
}

.overall-dinamico-recalculo-info {
    min-width: 0;
    flex: 1 1 260px;
}

.overall-dinamico-recalculo-info strong {
    display: block;
    margin-bottom: 0.2rem;
}

.overall-dinamico-recalculo-info p {
    margin: 0;
}

.overall-dinamico-recalculo-botao {
    flex: 0 0 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

/* Barra de progresso indeterminada (mesma linguagem visual da .ajax-progress-bar global),
   escopada ao card - some quando nao esta em uso (atributo hidden). */
.overall-dinamico-recalculo-progresso {
    flex-basis: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.overall-dinamico-recalculo-progresso-barra {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--roxo-forte), var(--roxo), var(--roxo-suave));
}

.overall-dinamico-recalculo-progresso.is-ativa .overall-dinamico-recalculo-progresso-barra {
    width: 85%;
    transition: width 1.6s cubic-bezier(0.15, 0.8, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .overall-dinamico-recalculo-progresso.is-ativa .overall-dinamico-recalculo-progresso-barra {
        transition-duration: 0.01ms;
    }
}

.recalculo-ciclos-modal-panel {
    width: min(440px, 92vw);
    /* dvh (nao vh) porque a barra de endereco do mobile entra/sai e muda o vh, o que
       redimensionava o painel no meio da rolagem. */
    max-height: min(78vh, 560px);
    max-height: min(78dvh, 560px);
    /* O painel e o UNICO container rolavel do modal (a lista interna nao rola mais) - sem
       isso o conteudo passava do card em vez de rolar dentro dele. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Travar a rolagem do fundo enquanto o modal esta aberto: sem isso o toque rolava a pagina
   por tras do modal, o que faz a barra de endereco do mobile entrar/sair e o overlay
   (position:fixed) se redimensionar junto - a "tremedeira" da tela. */
body.recalculo-ciclos-modal-aberto {
    overflow: hidden;
}

/* O atributo hidden nao funciona sozinho em elemento que declara display no CSS: a regra
   do autor vence o display:none do navegador. Sem estas guardas, "Calculando previa...",
   o resultado e o botao "Recalcular agora" apareciam todos ao mesmo tempo, empilhados, e o
   conteudo estourava a altura do card. */
.recalculo-ciclos-carregando[hidden],
.recalculo-ciclos-resultado[hidden],
.recalculo-ciclos-vazio[hidden],
.recalculo-ciclos-erro[hidden],
.recalculo-ciclos-modal-panel .btn[hidden] {
    display: none !important;
}

.recalculo-ciclos-carregando {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    padding: 0.5rem 0;
}

.recalculo-ciclos-carregando > span {
    color: var(--texto-suave);
    font-size: 0.8rem;
}

.recalculo-ciclos-carregando .overall-dinamico-recalculo-progresso {
    width: 100%;
}

.recalculo-ciclos-resultado {
    display: grid;
    gap: 0.6rem;
}

.recalculo-ciclos-resumo {
    margin: 0;
    font-size: 0.85rem;
}

.recalculo-ciclos-detalhes summary {
    cursor: pointer;
    color: var(--roxo-suave);
    font-size: 0.8rem;
    font-weight: 700;
}

.recalculo-ciclos-detalhes[open] summary {
    margin-bottom: 0.5rem;
}

/* Anula o scroll proprio herdado de .estatisticas-notas-modal-lista: dois containers
   rolaveis aninhados (painel + lista) brigam pelo toque no mobile e e o que dava a sensacao
   de tela "sambando" ao rolar a lista. Agora so o painel rola. */
.recalculo-ciclos-tabela {
    max-height: none;
    overflow: visible;
}

.recalculo-ciclos-linha {
    grid-template-columns: minmax(0, 1fr) auto;
    overflow: hidden;
}

/* Grid item tem min-width:auto por padrao (mesmo com a coluna em minmax(0, 1fr)) - sem
   isso, nome/valores longos nao encolhem e vazam pra fora do card em telas estreitas. */
.recalculo-ciclos-linha > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.recalculo-ciclos-linha-valores {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.recalculo-ciclos-linha-valores .positive {
    color: var(--verde);
}

.recalculo-ciclos-linha-valores .negative {
    color: var(--vermelho);
}

.recalculo-ciclos-aviso {
    margin: 0;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(201, 82, 79, 0.35);
    background: rgba(201, 82, 79, 0.08);
    color: var(--texto-suave);
    font-size: 0.78rem;
}

.recalculo-ciclos-vazio,
.recalculo-ciclos-erro {
    padding: 0.5rem 0;
}

.recalculo-ciclos-vazio p,
.recalculo-ciclos-erro p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.85rem;
    text-align: center;
}

.overall-config-toggle {
    min-width: 0;
    max-width: 100%;
    align-self: center;
    justify-self: end;
}

.overall-config-toggle-status::before {
    content: attr(data-off);
}

.overall-config-toggle input[type="checkbox"]:checked ~ .overall-config-toggle-status::before {
    content: attr(data-on);
}

@media (max-width: 768px) {
    .overall-config-toggle {
        justify-self: start;
    }

    .overall-dinamico-recalculo-form {
        flex-direction: column;
        align-items: stretch;
        padding: 0.8rem 0.9rem 0.9rem;
    }

    .overall-dinamico-recalculo-info {
        flex-basis: auto;
    }

    .overall-dinamico-recalculo-botao {
        width: 100%;
    }

    .recalculo-ciclos-modal-panel {
        width: 92vw;
    }

    .recalculo-ciclos-linha {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .recalculo-ciclos-linha-valores {
        white-space: normal;
    }

    .recalculo-ciclos-modal-panel .clube-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .recalculo-ciclos-modal-panel .clube-form-actions button {
        width: 100%;
    }

    /* O painel muda de altura sozinho (carregando -> resultado, e ao abrir "Ver
       detalhes") - com o modal centralizado (place-items:center padrao), cada mudanca de
       altura reposiciona o painel inteiro, dando a sensacao de tela "pulando"/instavel.
       Ancorando no topo, o painel so cresce pra baixo, sem recentralizar. */
    #recalculo-ciclos-abertos-modal {
        align-items: start;
    }
}

@media (max-width: 430px) {
    .overall-dinamico-peso-resultado-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .overall-dinamico-recalculo-botao {
        padding-inline: 0.65rem;
    }
}

.clube-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.clube-form-actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.clube-plano-status {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin-bottom: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--fundo-input) 72%, transparent);
}

.clube-plano-status strong {
    color: var(--texto);
    font-size: 0.9rem;
    white-space: nowrap;
}

.clube-plano-status span:not(.badge-posicao),
.clube-plano-status small {
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.clube-plano-status small {
    grid-column: 1 / -1;
}

.clube-accordion > form.clube-busca-usuarios {
    padding: 0.75rem 1.4rem;
    border-bottom: 1px solid var(--borda);
}

.clube-busca-usuarios.form-busca-jogadores-compacta .campo-busca-jogadores {
    width: min(100%, 320px);
}

.clube-usuarios-lista {
    display: grid;
    gap: 0.55rem;
}

.clube-usuario-linha {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) minmax(88px, auto) minmax(140px, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.025);
}

.clube-usuario-identidade {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.clube-usuario-identidade strong,
.clube-usuario-identidade span,
.clube-usuario-jogador {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clube-usuario-identidade span,
.clube-usuario-jogador {
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.clube-usuario-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.clube-usuario-linha-recusada {
    position: relative;
}

.clube-usuario-linha-recusada .btn-remover-recusada {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: auto;
}

.clube-atletas-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem;
}

.clube-atleta-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    background: var(--fundo-card);
    transition: border-color 0.15s, transform 0.15s;
}

.clube-atleta-card:hover {
    border-color: var(--borda-forte);
    transform: translateY(-2px);
}

.clube-atleta-card-cabecalho {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.clube-atleta-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--roxo) 20%, transparent);
    color: var(--roxo-suave);
    font-family: var(--fonte-display);
    font-weight: 800;
    font-size: 0.9rem;
}

.clube-atleta-card-identidade {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.clube-atleta-card-nome,
.clube-atleta-card-email {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clube-atleta-card-email {
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.clube-atleta-card-perfil {
    flex-shrink: 0;
}

.clube-atleta-card-perfil.perfil-diretor {
    background: color-mix(in srgb, var(--roxo) 18%, transparent);
    color: var(--roxo-suave);
}

.clube-atleta-card-perfil.perfil-jogador {
    background: rgba(78, 123, 212, 0.14);
    color: var(--azul);
}

.clube-atleta-card-vinculo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--texto) 6%, transparent);
    color: var(--texto-suave);
    font-size: 0.85rem;
    min-width: 0;
}

.clube-atleta-card-vinculo svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--roxo-suave);
}

.clube-atleta-card-vinculo span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clube-atleta-card-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto;
}

.clube-atleta-card-acoes form {
    margin: 0;
}

.form-inline {
    display: inline-flex;
    margin: 0;
}

.perfil-jogador-card-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.perfil-jogador-card {
    width: 100%;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem;
    padding-right: 3.65rem;
    border: 1px solid rgba(42, 163, 108, 0.2);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(42, 163, 108, 0.09), rgba(110, 91, 224, 0.055));
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.perfil-jogador-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(42, 163, 108, 0.12);
    color: var(--verde);
}

.perfil-jogador-icon svg {
    width: 22px;
    height: 22px;
}

.perfil-jogador-info {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.perfil-jogador-info > span {
    color: var(--verde);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.perfil-jogador-info strong {
    color: var(--texto);
    font-size: 1.05rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.perfil-jogador-badges {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.perfil-jogador-card-disabled {
    cursor: not-allowed;
    border-color: var(--borda);
    background: rgba(255, 255, 255, 0.03);
}

.perfil-jogador-card-disabled .perfil-jogador-icon {
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto-suave);
}

.perfil-jogador-card-disabled .perfil-jogador-info > span {
    color: var(--texto-suave);
}

.perfil-jogador-card-disabled-hint {
    color: var(--texto-suave);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.perfil-jogador-switch-form {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    margin: 0;
}

.perfil-jogador-switch-btn,
.perfil-jogador-expand-btn,
.perfil-jogador-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.perfil-jogador-switch-btn,
.perfil-jogador-expand-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    border: 1px solid rgba(42, 163, 108, 0.22);
    background: rgba(255, 255, 255, 0.055);
    color: var(--verde);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.perfil-jogador-switch-form .perfil-jogador-switch-btn {
    position: static;
}

.perfil-jogador-switch-btn:hover,
.perfil-jogador-expand-btn:hover,
.perfil-jogador-switch-btn:focus-visible,
.perfil-jogador-expand-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(42, 163, 108, 0.45);
    background: rgba(42, 163, 108, 0.12);
    outline: none;
}

.perfil-jogador-switch-btn svg,
.perfil-jogador-expand-btn svg {
    width: 18px;
    height: 18px;
}

.perfil-segundo-jogador-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(110, 91, 224, 0.22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(110, 91, 224, 0.12), rgba(42, 163, 108, 0.055));
    color: var(--texto);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.perfil-segundo-jogador-card:hover,
.perfil-segundo-jogador-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(42, 163, 108, 0.4);
    background: linear-gradient(135deg, rgba(110, 91, 224, 0.16), rgba(42, 163, 108, 0.09));
    outline: none;
}

.perfil-segundo-jogador-icon,
.perfil-segundo-jogador-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(42, 163, 108, 0.24);
    border-radius: 16px;
    background: rgba(42, 163, 108, 0.12);
    color: var(--verde);
}

.perfil-segundo-jogador-icon svg,
.perfil-segundo-jogador-head svg,
.perfil-segundo-jogador-card > svg {
    width: 20px;
    height: 20px;
}

.perfil-segundo-jogador-text {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.perfil-segundo-jogador-text strong {
    font-size: 0.98rem;
    line-height: 1.2;
}

.perfil-segundo-jogador-text small {
    color: var(--texto-suave);
    font-size: 0.8rem;
    font-weight: 800;
}

.perfil-segundo-jogador-card > svg {
    color: var(--texto-suave);
}

.perfil-segundo-jogador-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.perfil-segundo-jogador-modal.is-open {
    display: flex;
}

.perfil-segundo-jogador-modal[hidden] {
    display: none !important;
}

.perfil-segundo-jogador-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 8, 0.74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.perfil-segundo-jogador-panel {
    position: relative;
    display: grid;
    gap: 1rem;
    width: min(460px, 94vw);
    padding: 1.1rem;
    border: 1px solid rgba(110, 91, 224, 0.34);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(110, 91, 224, 0.12), rgba(42, 163, 108, 0.06)),
        var(--fundo-card);
    box-shadow: var(--sombra);
}

.perfil-segundo-jogador-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    cursor: pointer;
}

.perfil-segundo-jogador-close:hover,
.perfil-segundo-jogador-close:focus-visible {
    border-color: rgba(201, 82, 79, 0.4);
    color: var(--vermelho);
    outline: none;
}

.perfil-segundo-jogador-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 2.6rem;
}

.perfil-segundo-jogador-head div {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.perfil-segundo-jogador-head h3 {
    color: var(--texto);
    font-size: 1.08rem;
    line-height: 1.2;
}

.perfil-segundo-jogador-head p {
    color: var(--texto-suave);
    font-size: 0.86rem;
}

.perfil-segundo-jogador-form {
    gap: 1rem;
}

.perfil-segundo-jogador-form .btn {
    margin-top: 0;
}

.perfil-segundo-jogador-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
}

.perfil-foto-section {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(110, 91, 224, 0.16);
}

.perfil-foto-accordion {
    padding: 0.85rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
}

.perfil-foto-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.perfil-foto-head::-webkit-details-marker {
    display: none;
}

.perfil-foto-head > span {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.perfil-foto-head > svg {
    flex-shrink: 0;
    color: var(--texto-suave);
    transition: transform 0.16s, color 0.16s;
}

.perfil-foto-accordion[open] .perfil-foto-head > svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.perfil-foto-head h3 {
    color: var(--texto);
    font-size: 1rem;
}

.perfil-foto-head p {
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.perfil-standalone-shell {
    display: grid;
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto 2rem;
}

.perfil-salvar-perfil-topo {
    display: flex;
    justify-content: flex-end;
    max-width: 980px;
    margin: 0 auto 1rem;
}

.perfil-salvar-perfil-topo .btn {
    margin: 0;
}

.perfil-standalone-card {
    overflow: visible;
}

.perfil-jogador-vinculado-accordion[open] {
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(110, 91, 224, 0.16);
}

.perfil-jogador-vinculado-summary.is-locked {
    cursor: not-allowed;
    margin-bottom: 0;
}

.perfil-jogador-vinculado-summary.is-locked h2,
.perfil-jogador-vinculado-summary.is-locked p {
    color: var(--texto-suave);
}

.perfil-dados-jogador-form {
    margin-top: 0.5rem;
}

.perfil-foto-card-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.perfil-foto-card-summary::-webkit-details-marker {
    display: none;
}

.perfil-foto-card-summary > svg {
    flex-shrink: 0;
    color: var(--texto-suave);
    transition: transform 0.16s, color 0.16s;
}

.perfil-foto-card-accordion[open] .perfil-foto-card-summary > svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.perfil-foto-card-accordion:not([open]) .perfil-foto-card-summary {
    margin-bottom: 0;
}

.perfil-carta-geral-summary,
.perfil-ultima-evolucao-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.perfil-carta-geral-summary::-webkit-details-marker,
.perfil-ultima-evolucao-summary::-webkit-details-marker {
    display: none;
}

.perfil-carta-geral-summary > svg,
.perfil-ultima-evolucao-summary > svg {
    flex-shrink: 0;
    color: var(--texto-suave);
    transition: transform 0.16s, color 0.16s;
}

.perfil-carta-geral-accordion[open] .perfil-carta-geral-summary > svg,
.perfil-ultima-evolucao-accordion[open] .perfil-ultima-evolucao-summary > svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.perfil-carta-geral-accordion:not([open]) .perfil-carta-geral-summary,
.perfil-ultima-evolucao-accordion:not([open]) .perfil-ultima-evolucao-summary {
    margin-bottom: 0;
}

.perfil-jogador-vinculado-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.perfil-jogador-vinculado-summary::-webkit-details-marker {
    display: none;
}

.perfil-jogador-vinculado-summary > svg {
    flex-shrink: 0;
    color: var(--texto-suave);
    transition: transform 0.16s, color 0.16s;
}

.perfil-jogador-vinculado-accordion[open] .perfil-jogador-vinculado-summary > svg {
    color: var(--roxo-suave);
    transform: rotate(180deg);
}

.perfil-jogador-vinculado-accordion:not([open]) .perfil-jogador-vinculado-summary {
    margin-bottom: 0;
}

.perfil-carta-geral-preview {
    display: block;
    text-align: center;
    min-width: 0;
    width: 100%;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(5, 3, 12, 0.28);
    margin-bottom: 1rem;
}

.perfil-carta-geral-preview .player-card {
    width: min(100%, 230px);
    margin: 0 auto;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.38));
}

.perfil-ultima-evolucao-head {
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.perfil-ultima-evolucao-card.is-clickable {
    cursor: pointer;
}

.perfil-ultima-evolucao-card.is-clickable:hover .perfil-ultima-evolucao-open,
.perfil-ultima-evolucao-card.is-clickable:focus-visible .perfil-ultima-evolucao-open {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(42, 163, 108, 0.24);
}

.perfil-ultima-evolucao-open {
    display: inline-grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--roxo), var(--verde));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(42, 163, 108, 0.18);
    transition: transform 0.16s, box-shadow 0.16s, opacity 0.16s;
}

.perfil-ultima-evolucao-open:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    box-shadow: none;
}

.perfil-ultima-evolucao-open svg {
    width: 19px;
    height: 19px;
}

.perfil-ultima-evolucao-resumo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(5, 3, 12, 0.3);
    font-family: var(--fonte-display);
    font-weight: 900;
}

.perfil-ultima-evolucao-resumo span {
    color: var(--texto-suave);
    text-decoration: line-through;
}

.perfil-ultima-evolucao-resumo strong {
    color: #ffe18a;
    font-size: 1.12rem;
}

.perfil-ultima-evolucao-resumo svg {
    width: 17px;
    height: 17px;
    color: var(--verde);
}

.perfil-ultima-evolucao-vazia {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: var(--texto-suave);
    font-weight: 800;
}

.perfil-ultima-evolucao-vazia svg {
    width: 20px;
    height: 20px;
    color: var(--roxo-suave);
}

.perfil-carta-geral-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.perfil-carta-geral-posicao-form .form-group {
    margin-bottom: 0;
}

.perfil-carta-geral-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.perfil-carta-geral-modal.is-open {
    display: flex;
}

.perfil-carta-geral-modal[hidden] {
    display: none !important;
}

.perfil-carta-geral-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 8, 0.74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.perfil-carta-geral-panel {
    position: relative;
    display: grid;
    gap: 1rem;
    width: min(460px, 94vw);
    max-height: 86vh;
    overflow-y: auto;
    padding: 1.1rem;
    border: 1px solid rgba(110, 91, 224, 0.34);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(110, 91, 224, 0.12), rgba(42, 163, 108, 0.06)),
        var(--fundo-card);
    box-shadow: var(--sombra);
}

.perfil-carta-geral-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto);
    cursor: pointer;
}

.perfil-carta-geral-close-btn:hover,
.perfil-carta-geral-close-btn:focus-visible {
    border-color: rgba(201, 82, 79, 0.4);
    color: var(--vermelho);
    outline: none;
}

.perfil-carta-geral-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 2.6rem;
}

.perfil-carta-geral-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(42, 163, 108, 0.24);
    border-radius: 16px;
    background: rgba(42, 163, 108, 0.12);
    color: var(--verde);
}

.perfil-carta-geral-head svg {
    width: 20px;
    height: 20px;
}

.perfil-carta-geral-head div {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
}

.perfil-carta-geral-head h3 {
    color: var(--texto);
    font-size: 1.08rem;
    line-height: 1.2;
}

.perfil-carta-geral-head p {
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.perfil-carta-geral-opcoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.75rem;
}

.perfil-carta-geral-opcao-form {
    margin: 0;
}

.perfil-carta-geral-opcao {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.65rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.perfil-carta-geral-opcao:hover,
.perfil-carta-geral-opcao:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(42, 163, 108, 0.4);
    background: rgba(42, 163, 108, 0.09);
    outline: none;
}

.perfil-carta-geral-opcao.is-selected {
    border-color: var(--verde);
    background: rgba(42, 163, 108, 0.14);
}

.perfil-carta-geral-opcao img {
    width: 100%;
    max-width: 64px;
    aspect-ratio: 3 / 4;
    object-fit: contain;
}

.perfil-carta-geral-opcao span {
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.perfil-live-alert {
    max-width: 980px;
    margin-inline: auto;
}

.perfil-avatar-form {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.perfil-avatar-form.is-loading {
    pointer-events: none;
}

.perfil-avatar-form.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 20px;
    background: rgba(13, 9, 24, 0.68);
    backdrop-filter: blur(3px);
}

.perfil-avatar-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border: 1px solid rgba(110, 91, 224, 0.32);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(110, 91, 224, 0.16), rgba(255, 255, 255, 0.05));
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.65rem;
    font-weight: 900;
}

.perfil-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perfil-avatar-body {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.perfil-avatar-upload-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px dashed rgba(42, 163, 108, 0.4);
    border-radius: 18px;
    background: rgba(42, 163, 108, 0.06);
    color: var(--verde);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.perfil-avatar-upload-tile:hover,
.perfil-avatar-upload-tile:focus-within {
    transform: translateY(-1px);
    border-color: rgba(42, 163, 108, 0.7);
    background: rgba(42, 163, 108, 0.12);
}

.perfil-avatar-upload-tile svg {
    width: 26px;
    height: 26px;
}

.perfil-avatar-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.perfil-avatar-opcao {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    color: var(--texto);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
}

.perfil-avatar-opcao input {
    width: 16px;
    height: 16px;
    accent-color: var(--verde);
}

.perfil-avatar-ajuda-link {
    width: fit-content;
    color: var(--roxo-suave);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.35;
    text-decoration: none;
}

.perfil-avatar-ajuda-link:hover,
.perfil-avatar-ajuda-link:focus-visible {
    color: var(--verde);
    text-decoration: underline;
    outline: none;
}

.perfil-avatar-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1rem;
    color: var(--texto);
    font-size: 0.92rem;
    font-weight: 900;
    text-align: center;
}

.perfil-avatar-form.is-loading .perfil-avatar-loading {
    display: flex;
}

.perfil-avatar-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--verde);
    border-radius: 50%;
    animation: avatar-spin 0.8s linear infinite;
}

@keyframes avatar-spin {
    to { transform: rotate(360deg); }
}

.perfil-avatar-remover-form {
    margin-top: -0.2rem;
}

.perfil-avatar-remover-form .btn {
    color: var(--texto-suave);
    border-color: rgba(201, 82, 79, 0.18);
    background: transparent;
}

.perfil-avatar-remover-form .btn:hover {
    color: var(--vermelho);
    border-color: rgba(201, 82, 79, 0.38);
}

.perfil-fotos-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 0.7rem;
    margin-top: 0.75rem;
}

.perfil-fotos-vazia {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 76px;
    padding: 0.85rem;
    border: 1px dashed rgba(110, 91, 224, 0.28);
    border-radius: var(--radius-sm);
    color: var(--texto-suave);
    font-weight: 800;
}

.perfil-fotos-vazia svg {
    width: 20px;
    height: 20px;
    color: var(--roxo-suave);
}

.perfil-foto-thumb {
    position: relative;
    display: grid;
    gap: 0.55rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
}

.perfil-foto-thumb.is-current {
    border-color: rgba(42, 163, 108, 0.5);
    box-shadow: 0 0 0 1px rgba(42, 163, 108, 0.12);
}

.perfil-foto-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: calc(var(--radius-sm) - 3px);
    background: rgba(255, 255, 255, 0.05);
}

.perfil-foto-thumb-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.perfil-foto-thumb-actions form {
    margin: 0;
}

.perfil-foto-thumb-actions span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 34px;
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 900;
}

.perfil-foto-thumb-actions svg {
    width: 15px;
    height: 15px;
}

.perfil-avatar-crop-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.7rem;
}

.avatar-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.avatar-crop-modal.is-open {
    display: flex;
}

.avatar-crop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 8, 0.74);
    backdrop-filter: blur(10px);
}

.avatar-crop-panel {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(280px, 1fr) auto;
    gap: 0.85rem;
    width: min(760px, 96vw);
    max-height: min(92vh, 820px);
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: var(--fundo-card);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.avatar-crop-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.1rem;
}

.avatar-crop-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--texto-suave);
    cursor: pointer;
}

.avatar-crop-tool.active {
    background: rgba(255, 255, 255, 0.09);
    color: var(--texto);
}

.avatar-crop-tool:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.avatar-crop-tool svg {
    width: 20px;
    height: 20px;
}

.avatar-crop-head {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
}

.avatar-crop-head h3 {
    margin: 0;
    color: var(--texto);
    font-size: 1rem;
}

.avatar-crop-head p {
    margin: 0.2rem 0 0;
    color: var(--texto-suave);
    font-size: 0.86rem;
}

.avatar-crop-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
        var(--fundo-inset);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    touch-action: none;
}

.avatar-crop-stage img {
    display: block;
    max-width: 100%;
    max-height: min(58vh, 520px);
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.avatar-crop-box {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
    touch-action: none;
}

.avatar-crop-box::before,
.avatar-crop-box::after {
    content: "";
    position: absolute;
    inset: 33.333% 0 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.38);
}

.avatar-crop-box::after {
    inset: 66.666% 0 auto;
}

.avatar-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #111;
    border-radius: 50%;
    background: #fff;
}

.avatar-crop-handle.nw { top: -8px; left: -8px; cursor: nwse-resize; }
.avatar-crop-handle.n { top: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.avatar-crop-handle.ne { top: -8px; right: -8px; cursor: nesw-resize; }
.avatar-crop-handle.e { top: 50%; right: -8px; transform: translateY(-50%); cursor: ew-resize; }
.avatar-crop-handle.se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.avatar-crop-handle.s { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.avatar-crop-handle.sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.avatar-crop-handle.w { top: 50%; left: -8px; transform: translateY(-50%); cursor: ew-resize; }

.avatar-crop-form {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.player-card-photo.player-card-photo-has-image {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    z-index: 2;
}

.player-mini-card-photo.player-mini-card-photo-has-image {
    background: transparent;
    border-radius: 0;
}

.player-card-photo.player-card-photo-has-image img {
    position: relative;
    z-index: 2;
    object-fit: contain;
}

.player-mini-card-photo.player-mini-card-photo-has-image img {
    object-fit: contain;
    transform: translate(var(--avatar-x, 0), var(--avatar-y, 0)) rotate(var(--avatar-rotate, 0deg)) scaleX(var(--avatar-flip, 1)) scale(var(--avatar-zoom, 1));
    transform-origin: center;
}

.player-card-photo.player-card-photo-has-image img {
    transform: translate(var(--avatar-x, 0), var(--avatar-y, 0)) rotate(var(--avatar-rotate, 0deg)) scaleX(var(--avatar-flip, 1)) scale(var(--avatar-zoom, 1));
    transform-origin: center;
}

.player-card:has(.player-card-photo-has-image) .player-card-name {
    z-index: 4;
}

.player-card:has(.player-card-photo-has-image) .player-card-overall,
.player-card:has(.player-card-photo-has-image) .player-card-position,
.player-card:has(.player-card-photo-has-image) .player-card-stats,
.player-card:has(.player-card-photo-has-image) .player-card-traits {
    z-index: 4;
}

.perfil-avatar-ajuste {
    margin-top: 0;
    border: 1px solid rgba(110, 91, 224, 0.18);
    border-radius: 16px;
    background: rgba(110, 91, 224, 0.045);
    overflow: hidden;
}

.perfil-avatar-ajuste-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-height: 54px;
    padding: 0.9rem;
    color: var(--texto);
    cursor: pointer;
    font-weight: 900;
    list-style: none;
}

.perfil-avatar-ajuste-toggle::-webkit-details-marker {
    display: none;
}

.perfil-avatar-ajuste-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.perfil-avatar-ajuste-toggle svg {
    width: 17px;
    height: 17px;
    color: var(--roxo-suave);
}

.perfil-avatar-ajuste-toggle > svg:last-child {
    transition: transform 0.16s ease;
}

.perfil-avatar-ajuste[open] .perfil-avatar-ajuste-toggle > svg:last-child {
    transform: rotate(180deg);
}

.perfil-avatar-ajuste-form {
    display: grid;
    gap: 0.9rem;
    padding: 0.9rem;
    border-top: 1px solid var(--borda);
}

.perfil-avatar-ajuste-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.perfil-avatar-ajuste-head div {
    display: grid;
    gap: 0.15rem;
}

.perfil-avatar-ajuste-head strong {
    color: var(--texto);
}

.perfil-avatar-ajuste-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.perfil-avatar-ajuste-workspace {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.9rem;
}

.perfil-avatar-card-preview {
    display: grid;
    justify-items: center;
    min-width: 0;
    width: 100%;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(5, 3, 12, 0.28);
}

.perfil-avatar-card-preview .player-card {
    width: min(100%, 230px);
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.38));
}

.perfil-avatar-card-preview .player-card-stats span {
    font-size: clamp(0.37rem, 1.15vw, 0.46rem);
}

.perfil-avatar-controles {
    display: grid;
    gap: 0.75rem;
    align-content: center;
    min-width: 0;
    width: 100%;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

.perfil-avatar-controles label {
    display: grid;
    gap: 0.35rem;
    color: var(--texto-suave);
    font-size: 0.84rem;
    font-weight: 800;
}

.perfil-avatar-controles input[type="range"] {
    width: 100%;
    accent-color: var(--roxo);
}

.perfil-avatar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-height: 42px;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.perfil-avatar-controles .perfil-avatar-toggle {
    display: flex;
}

.perfil-avatar-toggle input {
    order: 2;
    width: 18px;
    height: 18px;
    accent-color: var(--roxo);
}

.perfil-avatar-crop-inline {
    width: 100%;
    justify-content: center;
}

.tema-opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.tema-opcao {
    position: relative;
    display: grid;
    gap: 0.45rem;
    min-height: 178px;
    padding: 0.8rem;
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

.tema-opcao:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.tema-opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tema-opcao:has(input:checked) {
    border-color: var(--verde);
    box-shadow: 0 0 0 1px rgba(42, 163, 108, 0.22);
}

.tema-preview {
    display: grid;
    gap: 0.45rem;
    min-height: 80px;
    padding: 0.6rem;
    border-radius: 15px;
    background: #0b0e13;
}

.tema-preview span {
    display: block;
    border-radius: 999px;
}

.tema-preview span:nth-child(1) {
    width: 52%;
    height: 12px;
    background: #6e5be0;
}

.tema-preview span:nth-child(2) {
    width: 78%;
    height: 22px;
    background: #1a2030;
}

.tema-preview span:nth-child(3) {
    width: 42%;
    height: 12px;
    background: #2aa36c;
}

.tema-opcao-padrao .tema-preview,
.tema-opcao-verde .tema-preview {
    background: #0b0e13;
}

.tema-opcao-padrao .tema-preview span:nth-child(1),
.tema-opcao-verde .tema-preview span:nth-child(1) {
    background: #6e5be0;
}

.tema-opcao-padrao .tema-preview span:nth-child(2),
.tema-opcao-verde .tema-preview span:nth-child(2) {
    background: #1a2030;
}

.tema-opcao-claro .tema-preview {
    background: #f4f1fb;
}

.tema-opcao-claro .tema-preview span:nth-child(1) {
    background: #5a4ac8;
}

.tema-opcao-claro .tema-preview span:nth-child(2) {
    background: #ffffff;
}

.tema-opcao-vibrante .tema-preview {
    background: #0b0d13;
}

.tema-opcao-vibrante .tema-preview span:nth-child(1) {
    background: #b94d4b;
}

.tema-opcao-vibrante .tema-preview span:nth-child(2) {
    background: #1d2430;
}

.tema-opcao-vibrante .tema-preview span:nth-child(3) {
    background: #c79a3b;
}

.tema-opcao-fifa21 .tema-preview {
    background: #09111b;
}

.tema-opcao-fifa21 .tema-preview span:nth-child(1) {
    background: #3e91a8;
}

.tema-opcao-fifa21 .tema-preview span:nth-child(2) {
    background: #19283a;
}

.tema-opcao-fifa21 .tema-preview span:nth-child(3) {
    background: #b83f70;
}

.tema-opcao-fifa20 .tema-preview {
    background: #090d12;
}

.tema-opcao-fifa20 .tema-preview span:nth-child(1) {
    background: #368da7;
}

.tema-opcao-fifa20 .tema-preview span:nth-child(2) {
    background: #1a2734;
}

.tema-opcao-fifa20 .tema-preview span:nth-child(3) {
    background: #86b8c7;
}

.tema-opcao-fifa19 .tema-preview {
    background: #120d17;
}

.tema-opcao-fifa19 .tema-preview span:nth-child(1) {
    background: #b73868;
}

.tema-opcao-fifa19 .tema-preview span:nth-child(2) {
    background: #272033;
}

.tema-opcao-fifa19 .tema-preview span:nth-child(3) {
    background: #3d9f9a;
}

.tema-opcao-custom .tema-preview {
    background: #0b0e13;
}

/* Documentos legais e confirmacao obrigatoria */
.page-login .login-box.aceite-legal-box {
    max-width: 440px;
    padding: 1.55rem 1.45rem;
}

.aceite-legal-box .login-logo {
    width: 52px;
    height: 52px;
    margin-bottom: .55rem;
}

.aceite-legal-box .login-eyebrow {
    margin-bottom: .22rem;
    font-size: .58rem;
    letter-spacing: .16em;
}

.login-box.aceite-legal-box h1 {
    margin-bottom: .2rem;
    font-size: 1.22rem;
}

.aceite-legal-box .login-sub {
    margin-bottom: .9rem;
    font-size: .76rem;
    line-height: 1.4;
}

.aceite-legal-box .alert {
    margin-bottom: .75rem;
    padding: .65rem .75rem;
    font-size: .74rem;
    line-height: 1.4;
    text-align: left;
}

.aceite-legal-documentos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 11px;
}

.aceite-legal-documentos > a {
    display: grid;
    gap: 2px;
    padding: 10px 11px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--fundo-input);
    color: var(--texto);
    text-align: left;
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

.aceite-legal-documentos > a:hover,
.aceite-legal-documentos > a:focus-visible {
    border-color: var(--roxo);
    transform: translateY(-1px);
}

.aceite-legal-documentos span {
    font-weight: 800;
    font-size: .76rem;
}

.aceite-legal-documentos small {
    color: var(--texto-suave);
    font-size: .62rem;
}

.aceite-legal-form {
    display: grid;
    gap: 10px;
}

.aceite-legal-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    color: var(--texto-suave);
    font-size: .72rem;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}

.aceite-legal-check input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--verde);
}

.aceite-legal-check a,
.documento-legal a {
    color: var(--roxo-suave);
    font-weight: 700;
}

.aceite-legal-check-cadastro {
    margin: 0 0 14px;
}

.aceite-legal-box .btn {
    min-height: 40px;
    padding: .62rem 1rem;
    font-size: .78rem;
}

.aceite-legal-sair {
    display: block;
    margin-top: 11px;
    color: var(--texto-suave);
    text-align: center;
    font-size: .68rem;
}

.footer-legal-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: .75rem;
}

.footer-legal-links a {
    color: var(--texto-suave);
}

.pagina-documento-legal {
    min-height: 100vh;
    padding: max(24px, env(safe-area-inset-top)) 18px max(36px, env(safe-area-inset-bottom));
    background: var(--fundo);
    color: var(--texto);
}

.documento-legal {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 30px clamp(20px, 5vw, 54px);
    border: 1px solid var(--borda);
    border-radius: 20px;
    background: var(--fundo-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}

.documento-legal-voltar {
    position: static;
    display: inline-flex;
    margin-bottom: 26px;
}

.documento-legal header {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--borda);
}

.documento-legal h1 {
    margin: 8px 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.8rem, 6vw, 2.7rem);
}

.documento-legal header p,
.documento-legal section p {
    color: var(--texto-suave);
    line-height: 1.72;
}

.documento-legal section {
    padding-top: 20px;
}

.documento-legal h2 {
    margin: 0 0 8px;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.02rem;
}

.documento-legal section p {
    margin: 0 0 10px;
    font-size: .92rem;
}

.documento-legal footer {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--borda);
}

@media (max-width: 620px) {
    .aceite-legal-documentos { grid-template-columns: 1fr; }
    .page-login .login-box.aceite-legal-box { padding: 1.3rem 1.1rem; }
    .documento-legal { padding: 24px 18px; border-radius: 16px; }
}

.tema-opcao-custom .tema-preview span:nth-child(1) {
    background: #6e5be0;
}

.tema-opcao-custom .tema-preview span:nth-child(2) {
    background: #1a2030;
}

.tema-opcao-custom .tema-preview span:nth-child(3) {
    background: #c9524f;
}

.tema-opcao strong {
    color: var(--texto);
}

.tema-opcao small {
    color: var(--texto-suave);
    line-height: 1.4;
}

.tema-opcoes-colapsaveis[data-theme-collapsed="1"] .tema-opcao:nth-of-type(n + 3):not(.tema-opcao-ativa-forcada) {
    display: none;
}

.tema-ativo-label {
    justify-self: start;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    background: rgba(42, 163, 108, 0.14);
    color: var(--verde);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tema-ver-mais {
    justify-self: start;
    margin: 0 0 0.8rem;
}

.custom-theme-editor {
    display: none;
    gap: 1.05rem;
    margin: 0.7rem 0 1rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fundo-card) 88%, transparent), var(--fundo-inset));
}

.preferencias-form:has(input[name="tema"][value="custom"]:checked) .custom-theme-editor {
    display: grid;
}

.custom-theme-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.custom-theme-head h3 {
    margin: 0;
    font-size: 1rem;
}

.custom-theme-head p {
    color: var(--texto-suave);
    font-size: 0.88rem;
    max-width: 56ch;
}

.custom-theme-live {
    display: grid;
    grid-template-rows: 12px 1fr 16px;
    gap: 0.42rem;
    min-width: 150px;
    width: 150px;
    height: 92px;
    padding: 0.55rem;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
}

.custom-theme-live span {
    display: block;
}

.custom-live-nav {
    border-radius: 999px;
    background: var(--custom-nav-bg, var(--fundo-card));
}

.custom-live-card {
    display: grid;
    align-content: center;
    gap: 0.3rem;
    padding: 0.42rem;
    border: 1px solid var(--borda);
    border-radius: 7px;
    background: var(--fundo-card);
}

.custom-live-card span {
    height: 6px;
    border-radius: 999px;
}

.custom-live-card span:nth-child(1) {
    width: 70%;
    background: var(--custom-header-color, var(--texto));
}

.custom-live-card span:nth-child(2) {
    width: 92%;
    background: var(--texto-suave);
}

.custom-live-card span:nth-child(3) {
    width: 46%;
    background: var(--roxo);
}

.custom-live-button {
    border-radius: 999px;
    background: var(--custom-button-bg, var(--roxo));
}

.custom-theme-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--borda) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fundo-card) 72%, transparent);
}

.custom-theme-presets > span {
    color: var(--texto-suave);
    font-size: 0.86rem;
    font-weight: 700;
}

.custom-theme-preset {
    display: inline-flex;
    align-items: center;
    gap: 0.46rem;
    min-height: 36px;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--fundo-input);
    color: var(--texto);
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

.custom-theme-preset:hover {
    transform: translateY(-1px);
    border-color: var(--roxo);
}

.custom-theme-preset span {
    display: inline-flex;
    overflow: hidden;
    width: 36px;
    height: 18px;
    border: 1px solid var(--borda-forte);
    border-radius: 999px;
}

.custom-theme-preset i {
    display: block;
    flex: 1;
}

.custom-theme-groups {
    display: grid;
    gap: 0.75rem;
}

.custom-theme-group {
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: color-mix(in srgb, var(--fundo-card) 72%, transparent);
}

.custom-theme-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
    list-style: none;
}

.custom-theme-group summary::-webkit-details-marker {
    display: none;
}

.custom-theme-group summary span {
    display: grid;
    gap: 0.2rem;
}

.custom-theme-group summary strong {
    color: var(--texto);
}

.custom-theme-group summary small {
    color: var(--texto-suave);
}

.custom-theme-group summary svg {
    width: 18px;
    height: 18px;
    color: var(--texto-suave);
    transition: transform 0.15s ease;
}

.custom-theme-group[open] summary svg {
    transform: rotate(180deg);
}

.custom-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0 0.9rem 0.9rem;
}

.custom-color-control {
    display: grid;
    grid-template-columns: 42px 26px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 84px;
    padding: 0.75rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.custom-color-control:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--roxo) 55%, var(--borda));
}

.custom-color-swatch {
    width: 26px;
    height: 26px;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    flex-shrink: 0;
}

.custom-color-control input[type="color"] {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.custom-color-text {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.custom-color-text strong {
    color: var(--texto);
    font-size: 0.88rem;
    line-height: 1.2;
}

.custom-color-text small {
    color: var(--texto-suave);
    font-size: 0.76rem;
    line-height: 1.25;
}

.custom-color-text em {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

/* ===========================
   MODAL
=========================== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 3, 10, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.modal.show { display: flex; }

.modal-box {
    background: var(--fundo-card);
    border: 1px solid var(--borda-forte);
    padding: 1.5rem;
    border-radius: var(--radius);
    width: 340px;
    max-width: 92vw;
    text-align: center;
    box-shadow: var(--sombra);
}

.modal-box h3 {
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
}

.modal-box p { color: var(--texto-suave); }

.modal-acoes {
    display: flex;
    justify-content: space-between;
    margin-top: 1.15rem;
    gap: 10px;
}

.modal-acoes .btn { flex: 1; }

.modal-plantel-massa .modal-box {
    border-color: rgba(110, 91, 224, 0.38);
    background:
        linear-gradient(145deg, rgba(110, 91, 224, 0.12), rgba(40, 140, 85, 0.06)),
        var(--fundo-card);
}

.modal-plantel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.7rem;
    border: 1px solid rgba(110, 91, 224, 0.42);
    border-radius: 50%;
    background: rgba(110, 91, 224, 0.16);
    color: #a79bf0;
}

.modal-plantel-icon svg {
    width: 20px;
    height: 20px;
}

.modal-plantel-massa p strong {
    color: var(--texto);
    font-weight: 900;
}

.modal-fechar {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto-suave);
    cursor: pointer;
}

.modal-fechar svg {
    width: 16px;
    height: 16px;
}

.modal-comprar-moedas .modal-box {
    position: relative;
    width: 380px;
    text-align: center;
}

.moedas-comprar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 1.1rem;
}

.moedas-comprar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.9rem 0.6rem;
    border: 1px solid rgba(200, 151, 59, 0.3);
    border-radius: var(--radius);
    background: rgba(200, 151, 59, 0.08);
    color: var(--texto);
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.moedas-comprar-item:hover {
    background: rgba(200, 151, 59, 0.16);
    transform: translateY(-2px);
}

.moedas-comprar-item strong {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ouro);
    font-size: 1.05rem;
    font-weight: 900;
}

.moedas-comprar-item strong svg {
    width: 16px;
    height: 16px;
}

.moedas-comprar-item span {
    color: var(--texto-suave);
    font-size: 0.85rem;
    font-weight: 700;
}

/* ===========================
   LOGIN / REGISTRO
=========================== */
body.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    --sombra-roxa: 0 4px 20px rgba(40, 140, 85, 0.35);
    background-image:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(40, 140, 85, 0.22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(20, 83, 45, 0.18), transparent 70%);
}

body.page-login-auth-bg {
    background:
        radial-gradient(ellipse 44% 38% at 95% 8%, rgba(40, 140, 85, 0.9), transparent 62%),
        radial-gradient(ellipse 36% 30% at 8% 62%, rgba(40, 140, 85, 0.68), transparent 62%),
        radial-gradient(ellipse 34% 28% at 90% 80%, rgba(20, 184, 166, 0.46), transparent 66%),
        radial-gradient(ellipse 80% 58% at 50% 54%, rgba(15, 23, 42, 0.82), transparent 72%),
        #080812;
}

.page-login-auth-bg .login-box {
    z-index: 1;
}

.page-login-auth-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-radial-gradient(ellipse at 10% 62%, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 5px),
        repeating-radial-gradient(ellipse at 92% 12%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px);
    opacity: 0.5;
    mix-blend-mode: screen;
}

.login-box {
    width: 100%;
    max-width: 408px;
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: 22px;
    padding: 2.4rem 2.1rem;
    box-shadow: var(--sombra), 0 0 70px rgba(110, 91, 224, 0.14);
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: authCardIn 0.35s ease both;
}

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--roxo), transparent);
}

.login-voltar {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    margin: 0 0 1.1rem;
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.login-voltar svg {
    width: 15px;
    height: 15px;
}

.login-voltar:hover,
.login-voltar:focus-visible {
    color: var(--roxo-suave);
    outline: none;
}

.login-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 0.85rem;
}

.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(40, 140, 85, 0.35));
}

.app-loader-mark-auth {
    width: 84px;
    height: 84px;
}

.app-loader-mark-auth .auth-logo-icone {
    width: 100%;
    height: 100%;
}

.login-box h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.login-eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--roxo-suave);
}

.login-sub {
    color: var(--texto-suave);
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 1.6rem;
}

.login-box .form-group { text-align: left; }

.login-campo-label-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.login-campo-label-linha label {
    margin-bottom: 0;
}

.login-esqueci-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--roxo-suave);
    text-decoration: none;
    white-space: nowrap;
}

.login-esqueci-link:hover,
.login-esqueci-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}

.login-lembrar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    margin: -0.25rem 0 1rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.login-lembrar input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--roxo);
    flex: 0 0 auto;
}

.login-lembrar span {
    line-height: 1;
}

.registro-step label:not(:first-child) {
    margin-top: 0.75rem;
}

.registro-step input + label,
.registro-step select + label,
.registro-clube-preview + label,
.texto-suave + label {
    display: block;
}

.registro-progressivo {
    display: grid;
    gap: 0.95rem;
}

.registro-progressivo .form-group {
    margin-bottom: 0;
}

.registro-step {
    animation: registroStepIn 0.22s ease both;
}

.registro-step[hidden],
.registro-clube-preview[hidden] {
    display: none !important;
}

.registro-modo-cadastro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.registro-step .registro-modo-cadastro .registro-modo-opcao:not(:first-child) {
    margin-top: 0;
}

.registro-modo-cadastro .registro-modo-opcao {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 1.1rem 0.7rem 0.9rem;
    border: 1px solid var(--borda);
    border-radius: 16px;
    background: var(--fundo-input);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.registro-modo-cadastro .registro-modo-opcao:hover {
    border-color: var(--borda-forte);
}

.registro-modo-opcao strong {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--texto);
    text-wrap: balance;
}

.registro-modo-opcao small {
    font-size: 0.74rem;
    color: var(--texto-suave);
    line-height: 1.3;
}

.registro-modo-cadastro .registro-modo-opcao input[type="radio"] {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.registro-modo-opcao:has(input:focus-visible) {
    outline: 2px solid var(--roxo);
    outline-offset: 2px;
}

.registro-modo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(110, 91, 224, 0.12);
    color: var(--roxo-suave);
    transition: background 0.15s ease, color 0.15s ease;
}

.registro-modo-icone svg {
    width: 21px;
    height: 21px;
}

.registro-modo-check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--borda-forte);
    background: var(--fundo-inset);
    color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.registro-modo-check svg {
    width: 10px;
    height: 10px;
}

.registro-modo-opcao:has(input:checked) {
    border-color: var(--roxo);
    background: rgba(110, 91, 224, 0.12);
}

.registro-modo-opcao:has(input:checked) .registro-modo-icone {
    background: var(--roxo);
    color: #fff;
}

.registro-modo-opcao:has(input:checked) .registro-modo-check {
    background: var(--roxo);
    border-color: var(--roxo);
    color: #fff;
}

.registro-clube-preview {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.78rem;
    border: 1px solid rgba(110, 91, 224, 0.28);
    border-radius: 14px;
    background: rgba(110, 91, 224, 0.09);
    text-align: left;
    animation: registroStepIn 0.22s ease both;
}

.registro-clube-preview img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(90, 74, 200, 0.28));
}

.registro-clube-preview div {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.registro-clube-preview span {
    color: var(--roxo-suave);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.registro-clube-preview strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1rem;
}

.registro-clube-preview small {
    color: var(--texto-suave);
    line-height: 1.35;
}

.registro-erro-campo {
    display: block;
    margin-top: 0.45rem;
    color: var(--vermelho);
    font-size: 0.82rem;
    font-weight: 600;
}

.registro-clube-preview svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--roxo-suave);
}

.registro-progresso {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.registro-progresso-barra {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--roxo), var(--roxo-suave));
    transition: width 0.25s ease;
}

.registro-progresso-texto {
    margin: 0 0 0.9rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.registro-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.registro-step-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.registro-step-nav .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@keyframes registroStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-register {
    margin-top: 1.25rem;
    font-size: 0.88rem;
    color: var(--texto-suave);
}

.recuperacao-ajuda {
    color: var(--texto-suave);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.campo-com-icone {
    position: relative;
}

.campo-com-icone input {
    padding-left: 2.7rem !important;
}

.campo-com-icone .campo-icone {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--texto-suave);
    pointer-events: none;
}

.campo-com-icone:focus-within .campo-icone {
    color: var(--roxo-suave);
}

/* ===========================
   PAGINA PUBLICA DE PLANOS
=========================== */
body.page-planos {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 42% 28% at 88% 8%, rgba(40, 140, 85, 0.22), transparent 68%),
        radial-gradient(ellipse 32% 26% at 8% 36%, rgba(20, 184, 166, 0.16), transparent 64%),
        linear-gradient(180deg, #07110d 0%, var(--fundo) 42%, #040806 100%);
}

.planos-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
    padding: 0.85rem clamp(1rem, 4vw, 2rem);
    background: rgba(5, 12, 9, 0.86);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.planos-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-weight: 800;
    text-decoration: none;
}

.planos-brand .auth-logo-icone {
    width: 38px;
    height: 38px;
}

.planos-brand span {
    white-space: nowrap;
}

.planos-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.planos-nav a {
    color: var(--texto-suave);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
}

.planos-nav a:hover,
.planos-nav a:focus-visible,
.planos-nav a.is-selected {
    color: var(--texto);
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.planos-login-link {
    flex-shrink: 0;
}

.planos-login-link svg,
.planos-hero-actions svg,
.planos-profile-option svg,
.planos-contact .btn svg {
    width: 17px;
    height: 17px;
}

.planos-page {
    width: min(1160px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 2.6rem 0 4rem;
}

.planos-hero {
    min-height: calc(100vh - 112px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.7fr);
    gap: clamp(1.25rem, 5vw, 4rem);
    align-items: center;
    padding-bottom: 2rem;
}

.planos-hero-copy {
    display: grid;
    gap: 1rem;
    align-content: center;
}

.planos-hero-copy h1 {
    max-width: 780px;
    font-family: var(--fonte-display);
    font-size: clamp(2.35rem, 7vw, 5.2rem);
    line-height: 0.98;
    color: #fff;
}

.planos-hero-copy p {
    max-width: 640px;
    color: rgba(237, 253, 244, 0.78);
    font-size: clamp(1rem, 2vw, 1.16rem);
}

.planos-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.planos-profile-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.35rem;
}

.planos-profile-option {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    min-height: 118px;
    padding: 1rem;
    color: var(--texto);
    text-decoration: none;
    border: 1px solid rgba(134, 239, 172, 0.2);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(180deg, rgba(40, 140, 85, 0.14), rgba(255, 255, 255, 0.03)),
        color-mix(in srgb, var(--fundo-card) 86%, transparent);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.planos-profile-option:hover,
.planos-profile-option:focus-visible,
.planos-profile-option.is-selected {
    transform: translateY(-2px);
    border-color: rgba(134, 239, 172, 0.46);
    background:
        linear-gradient(180deg, rgba(40, 140, 85, 0.2), rgba(255, 255, 255, 0.045)),
        color-mix(in srgb, var(--fundo-card) 82%, transparent);
    outline: none;
}

.planos-profile-option-clube {
    border-color: rgba(78, 123, 212, 0.24);
    background:
        linear-gradient(180deg, rgba(78, 123, 212, 0.14), rgba(255, 255, 255, 0.03)),
        color-mix(in srgb, var(--fundo-card) 86%, transparent);
}

.planos-profile-option-clube:hover,
.planos-profile-option-clube:focus-visible,
.planos-profile-option-clube.is-selected {
    border-color: rgba(147, 197, 253, 0.48);
    background:
        linear-gradient(180deg, rgba(78, 123, 212, 0.21), rgba(255, 255, 255, 0.045)),
        color-mix(in srgb, var(--fundo-card) 82%, transparent);
}

.planos-profile-option > svg {
    width: 44px;
    height: 44px;
    padding: 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--roxo-suave);
    background: rgba(40, 140, 85, 0.14);
}

.planos-profile-option-clube > svg {
    color: #93c5fd;
    background: rgba(78, 123, 212, 0.14);
}

.planos-profile-option span {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.planos-profile-option strong {
    font-family: var(--fonte-display);
    font-size: 1.08rem;
    line-height: 1.15;
}

.planos-profile-option small {
    color: var(--texto-suave);
    font-size: 0.86rem;
    line-height: 1.42;
}

.planos-hero-panel {
    display: grid;
    gap: 0.9rem;
    align-self: center;
}

.planos-product-mini,
.planos-product-card,
.plano-card,
.planos-contact {
    border: 1px solid rgba(134, 239, 172, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
        color-mix(in srgb, var(--fundo-card) 88%, transparent);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.planos-product-mini {
    padding: 1.25rem;
    border-radius: var(--radius-sm);
}

.planos-product-mini-clube {
    border-color: rgba(78, 123, 212, 0.2);
}

.planos-product-mini span,
.plano-badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    border-radius: 999px;
    background: rgba(40, 140, 85, 0.14);
    color: var(--roxo-suave);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 0.42rem 0.58rem;
    text-transform: uppercase;
}

.planos-product-mini strong {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-family: var(--fonte-display);
    font-size: 1.35rem;
    line-height: 1.15;
}

.planos-product-mini small {
    display: block;
    color: var(--texto-suave);
    font-size: 0.9rem;
    line-height: 1.5;
}

.planos-section {
    scroll-margin-top: 92px;
    padding: 3.25rem 0 0;
}

.planos-section-head {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.planos-section-head h2,
.planos-contact h2 {
    font-family: var(--fonte-display);
    font-size: clamp(1.45rem, 4vw, 2.2rem);
    line-height: 1.15;
}

.planos-products-grid,
.planos-grid {
    display: grid;
    gap: 1rem;
}

.planos-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planos-grid-treinador {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planos-grid-clube {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planos-product-card,
.plano-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-radius: var(--radius-sm);
    padding: 1.25rem;
}

.planos-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    background: rgba(40, 140, 85, 0.14);
    color: var(--roxo-suave);
}

.planos-card-icon svg {
    width: 22px;
    height: 22px;
}

.planos-product-card h3,
.plano-card h3 {
    font-family: var(--fonte-display);
    font-size: 1.25rem;
    line-height: 1.2;
}

.planos-product-card p,
.plano-card p,
.planos-contact p {
    color: var(--texto-suave);
    font-size: 0.94rem;
}

.planos-product-card ul,
.plano-card ul {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.15rem;
    padding-left: 1.05rem;
    color: var(--texto);
}

.planos-product-card li::marker,
.plano-card li::marker {
    color: var(--roxo);
}

.plano-card {
    min-height: 100%;
}

.planos-product-card .btn,
.plano-card .btn {
    margin-top: auto;
}

.plano-card-popular {
    border-color: rgba(40, 140, 85, 0.48);
    box-shadow: var(--sombra), 0 0 40px rgba(40, 140, 85, 0.14);
}

.plano-preco {
    font-family: var(--fonte-display);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
}

.plano-preco span {
    margin-left: 0.25rem;
    color: var(--texto-suave);
    font-family: var(--fonte-corpo);
    font-size: 0.86rem;
    font-weight: 700;
}

.planos-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
}

.planos-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.planos-table th,
.planos-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--borda);
    text-align: left;
}

.planos-table th {
    color: var(--roxo-suave);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(40, 140, 85, 0.07);
}

.planos-table td:nth-child(2),
.planos-table td:nth-child(3),
.planos-table th:nth-child(2),
.planos-table th:nth-child(3) {
    text-align: center;
}

.planos-table tr:last-child td {
    border-bottom: 0;
}

.planos-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 3.25rem;
    padding: 1.4rem;
    border-radius: var(--radius-sm);
}

.planos-contact > div {
    display: grid;
    gap: 0.25rem;
}

.planos-footer {
    width: min(1160px, calc(100vw - 32px));
    margin-inline: auto;
}

/* ===========================
   FOOTER
=========================== */
.footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
    border-top: 1px solid var(--borda);
    margin-top: 3rem;
}

.footer strong {
    color: var(--roxo-suave);
    font-family: var(--fonte-display);
    font-weight: 700;
}

/* ===========================
   RESPONSIVO
=========================== */
@media (max-width: 768px) {
    .layout-dois-col { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; gap: 1rem; }
    .home-feature-grid { grid-template-columns: 1fr; }
    .home-highlights-grid { grid-template-columns: 1fr; }
    .home-match-card,
    .home-match-content { min-height: 290px; }

    .navbar {
        padding: 0.7rem 0.85rem;
        gap: 0.45rem;
    }

    .navbar-menu {
        width: 100%;
        justify-content: space-between;
        order: 3;
        gap: 0.2rem;
    }

    .navbar-menu a {
        padding: 0.3rem 0.55rem;
        font-size: 0.78rem;
    }

    .navbar-user {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        padding-top: 0.2rem;
        font-size: 0.78rem;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .navbar-user .btn {
        width: auto;
        padding: 0.35rem 0.65rem;
        font-size: 0.78rem;
    }

    .app-topbar {
        padding: 0.75rem 0.9rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .app-topbar .navbar-user {
        width: auto;
        margin-left: auto;
        padding-top: 0;
    }

    .bottom-nav {
        right: 8px;
        left: 8px;
        width: auto;
        max-width: 640px;
        bottom: max(8px, env(safe-area-inset-bottom));
        border-radius: 16px;
    }

    .loja-card-preview {
        min-height: 222px;
    }

    .preferencias-shell {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .preferencias-tabs {
        position: static;
        grid-template-columns: 1fr;
    }

    .preferencias-tabs a {
        min-height: 48px;
        padding: 0.72rem 0.75rem;
        font-size: 0.86rem;
    }

    .tema-opcoes {
        grid-template-columns: 1fr;
    }

    .custom-theme-head {
        align-items: stretch;
    }

    .custom-theme-head {
        flex-direction: column;
    }

    .custom-theme-live {
        width: 100%;
    }

    .custom-theme-grid {
        grid-template-columns: 1fr;
    }

    .custom-color-control {
        grid-template-columns: 40px 24px minmax(0, 1fr);
        min-height: 78px;
    }

    .preferencias-form .btn {
        justify-self: stretch;
    }

    .clube-logo-editor,
    .clube-form-grid {
        grid-template-columns: 1fr;
    }

    .clube-plano-status {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .clube-plano-status strong {
        white-space: normal;
    }

    .clube-page-header {
        gap: 0.42rem;
    }

    .clube-usuario-linha {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem 0.65rem;
    }

    .clube-usuario-linha .badge-posicao,
    .clube-usuario-jogador {
        grid-column: 1;
    }

    .clube-usuario-acoes {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        flex-direction: column;
    }

    .clube-logo-editor img {
        width: 64px;
        height: 64px;
    }

    .clube-logo-actions {
        grid-column: auto;
    }

    .clube-form-actions .btn,
    .form-inline,
    .form-inline .btn {
        width: 100%;
    }

    .container { padding: 0.9rem 0.9rem 7rem; }

    .page-header { margin-bottom: 1rem; }
    .page-header h1 { font-size: 1.3rem; }
    .page-header p { font-size: 0.9rem; }

    .card { padding: 0.95rem; }

    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .stat-card { padding: 0.85rem 0.5rem; }
    .stat-icon { width: 34px; height: 34px; font-size: 1rem; }
    .stat-valor { font-size: 1.4rem; }
    .stat-label { font-size: 0.66rem; }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.95rem;
        padding: 0.5rem 0.7rem;
    }

    .form-busca { flex-direction: column; }
    .form-busca input { width: 100%; }

    .btn {
        width: 100%;
        padding: 0.55rem 0.8rem;
        font-size: 0.85rem;
    }

    .btn-sm { width: auto; }

    .tabela {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .time-card .time-header,
    .time-lista li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .login-box { padding: 1.6rem 1.2rem; }

    .modal-box {
        width: min(92vw, 340px);
        padding: 1.15rem;
    }
}

@media (max-width: 700px) {
    .times-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .time-card .time-header {
        padding: 9px 10px;
    }

    .time-card .time-header strong {
        font-size: 0.95rem;
        line-height: 1.15;
    }

    .time-card .time-header .badge-ovr {
        font-size: 0.72rem;
        padding: 0.25rem 0.45rem;
    }

    .time-card .time-lista {
        padding: 8px 10px;
    }

    .time-card .time-lista li {
        font-size: 0.78rem;
    }

    .time-card .time-lista .badge-posicao {
        font-size: 0.68rem;
        padding: 0.2rem 0.35rem;
    }

    .time-card .time-lista .badge-ovr {
        font-size: 0.72rem;
        min-width: 34px;
        padding: 0.24rem 0.38rem;
    }

    .estatisticas-header,
    .form-busca-estatisticas,
    .form-busca-estatisticas input,
    .form-busca-estatisticas .btn {
        width: 100%;
    }

    .estatisticas-header { flex-direction: column; }

    .historico-tabs {
        display: flex;
        width: 100%;
    }

    .historico-tabs a,
    .sorteio-tabs button { flex: 1; }

    .jogo-detalhe-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.02rem;
        padding: 0.08rem;
    }

    .jogo-detalhe-tabs a {
        flex: none;
        min-height: 30px;
        padding: 0.25rem 0.04rem;
        font-size: 0.82rem;
        line-height: 1;
    }

    .resultado-grid { grid-template-columns: 1fr; }

    .resultado-resumo {
        flex-direction: column;
        align-items: stretch;
    }

    .avaliacao-status-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .avaliacao-status-bar form,
    .avaliacao-status-bar .btn { width: 100%; }
}

@media (max-width: 640px) {
    .jogadores-lista-header,
    .overall-card .card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-busca-jogadores {
        flex-direction: column;
        align-items: stretch;
        padding: 0.6rem;
        gap: 0.5rem;
    }

    .form-busca-jogadores .btn,
    .por-pagina-control { width: 100%; }

    .jogadores-lista-topo-acoes {
        width: 100%;
        justify-content: space-between;
        gap: 0.45rem;
    }

    .form-busca-jogadores-compacta {
        flex: 1;
        flex-direction: row;
        align-items: center;
        padding: 0;
        gap: 0.3rem;
    }

    .form-busca-jogadores-compacta.form-busca-com-plantel {
        display: grid;
        grid-template-columns: minmax(118px, 132px) minmax(0, 1fr);
        width: 100%;
    }

    .form-busca-jogadores-compacta.form-busca-cartinhas {
        grid-template-columns: minmax(66px, 0.8fr) minmax(92px, 1fr) minmax(82px, 1fr);
        grid-template-areas: "periodo plantel busca";
        gap: 0.28rem;
        padding: 0.3rem;
        border: 1px solid color-mix(in srgb, var(--borda) 85%, transparent);
        border-radius: 8px;
        background: color-mix(in srgb, var(--fundo-input) 72%, transparent);
    }

    .form-busca-jogadores-compacta .plantel-filtro-compacto {
        width: 100%;
        max-width: 132px;
    }

    .form-busca-jogadores-compacta.form-busca-cartinhas .plantel-filtro-busca {
        max-width: none;
    }

    .form-busca-jogadores-compacta .campo-busca-jogadores {
        flex: 1 1 auto;
        width: auto;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
    }

    .form-busca-jogadores-compacta .campo-busca-jogadores input {
        font-size: 0.74rem;
    }

    .jogadores-lista-rodape {
        align-items: center;
        flex-direction: row;
        gap: 0.45rem;
    }

    .jogadores-lista-rodape > .btn {
        flex: 1 1 calc(50% - 0.225rem);
        width: auto;
        min-height: 34px;
        padding-inline: 0.25rem;
        font-size: 0.54rem;
        gap: 0.22rem;
        white-space: nowrap;
    }

    .form-por-pagina-rodape {
        flex: 0 0 auto;
    }

    .por-pagina-control-compacto {
        width: auto;
    }

    .por-pagina-control {
        justify-content: space-between;
        min-height: 38px;
    }

    .por-pagina-control-compacto {
        width: auto;
        min-height: 32px;
    }

    .campo-busca-jogadores {
        flex: 0 0 auto;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }

    .campo-busca-jogadores input {
        height: 100%;
        min-height: 0;
    }

    .plantel-manager-add,
    .lote-row,
    .lote-row-com-plantel { grid-template-columns: 1fr; }
    .lote-remover { width: 100%; }

    .jogadores-form-card,
    .jogadores-lista-card { padding: 0.85rem; }

    .tabela-jogadores-wrap {
        overflow: visible;
    }

    .tabela-jogadores {
        display: block;
        overflow: visible;
        white-space: normal;
        width: 100%;
    }

    .tabela-jogadores thead {
        display: none;
    }

    .tabela-jogadores tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(104px, 1fr));
        gap: 1rem 0.5rem;
        padding: 0.75rem 0.35rem 1rem;
    }

    .tabela-jogadores tr,
    .tabela-jogadores td {
        display: block;
    }

    .tabela-jogadores tr {
        min-width: 0;
        justify-self: center;
        width: 100%;
    }

    .tabela-jogadores td {
        padding: 0;
        border: 0;
        background: transparent;
    }

    .tabela-jogadores tbody tr:hover td {
        background: transparent;
    }

    .jogador-card-lista {
        width: 100%;
        min-width: 0;
    }

    .jogador-card-selecao-wrap {
        width: clamp(104px, 38vw, 128px);
    }

    .jogador-card-lista .player-card-medium {
        width: 100%;
    }

    .jogador-card-posicao {
        margin-top: 0.28rem;
        font-size: 0.66rem;
    }

    .jogador-card-caracteristica {
        font-size: 0.61rem;
    }

    .jogador-nome { max-width: 140px; }

    .estatisticas-ordenacao-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 0 0.65rem 0.65rem;
    }

    .estatisticas-ordenacao-form > label {
        grid-column: auto;
    }

    .estatisticas-ordenacao-form > label:first-of-type,
    .estatisticas-filtrar-btn {
        grid-column: 1 / -1;
    }

    .estatisticas-filtrar-btn {
        width: 100%;
    }

    .estatisticas-cards-list {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .estatisticas-player-card {
        padding: 0.75rem;
    }

    .estatisticas-player-head {
        align-items: flex-start;
    }

    .estatisticas-aproveitamento {
        min-width: 58px;
    }

    .overall-acoes,
    .overall-voto-form {
        flex-direction: column;
        align-items: stretch;
    }

    .overall-input,
    .overall-btn { width: 100%; }

    .overall-voto-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .jogadores-tabs {
        width: 100%;
    }

    .jogadores-tabs a {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .jogadores-evolucao-card {
        justify-items: center;
        text-align: center;
    }

    .jogadores-evolucao-card-info {
        width: 100%;
    }

    .jogadores-evolucao-card-info strong,
    .jogadores-evolucao-overalls,
    .jogadores-evolucao-voto {
        justify-content: center;
    }

    .overall-votos-pendentes {
        width: 100%;
        text-align: left;
    }

    .overall-votos-pendentes summary {
        flex-wrap: wrap;
    }

    .overall-votos-pendentes summary::after {
        margin-left: auto;
    }

    .jogadores-evolucao-voto {
        width: 100%;
    }

    .overall-alcancado-panel {
        align-items: stretch;
        flex-direction: column;
        text-align: left;
    }

    .overall-alcancado-actions {
        width: 100%;
    }

    .overall-alcancado-actions form,
    .overall-alcancado-actions .btn {
        flex: 1;
        width: 100%;
    }

    .overall-batch-action {
        position: sticky;
        top: 0.5rem;
        z-index: 6;
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.45rem;
        width: 100%;
        margin-bottom: 0.85rem;
    }

    .overall-batch-action .btn {
        flex: 1 1 calc(50% - 0.45rem);
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
    }

    .overall-batch-action [data-overall-select-page] {
        flex: 0 0 100%;
    }

    .overall-batch-action [data-overall-batch-submit] {
        flex: 1 1 0;
        width: 0;
    }

    .overall-voto-form-compacto {
        flex-direction: row;
        align-items: center;
    }

    .overall-voto-form-compacto .overall-input {
        width: 72px;
        min-width: 72px;
    }

    .overall-voto-form-compacto .overall-btn {
        flex: 1;
        width: auto;
    }

    .loja-resumo {
        grid-template-columns: 1fr;
    }

    .loja-card-info {
        flex-direction: column;
    }

    .loja-vinculo-card {
        grid-template-columns: 1fr;
    }

    .perfil-avatar-form {
        grid-template-columns: 70px 70px;
        grid-template-areas:
            "preview tile"
            "body body"
            "button button";
        align-items: start;
        gap: 0.75rem;
    }

    .perfil-avatar-preview,
    .perfil-avatar-upload-tile {
        justify-self: start;
    }

    .perfil-avatar-preview {
        grid-area: preview;
    }

    .perfil-avatar-upload-tile {
        grid-area: tile;
    }

    .perfil-avatar-body {
        grid-area: body;
    }

    .perfil-avatar-form [data-avatar-upload-submit] {
        grid-area: button;
        width: 100%;
        justify-content: center;
        margin-top: 0.65rem;
    }

    .jogadores-posicionar-upload button[type="submit"] {
        grid-area: button;
        width: 100%;
        justify-content: center;
        margin-top: 0.65rem;
    }

    .perfil-jogador-card {
        grid-template-columns: 46px minmax(0, 1fr) 30px;
        padding: 0.8rem;
        border-radius: 14px;
    }

    .perfil-jogador-icon {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .perfil-segundo-jogador-card {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 0.8rem;
        border-radius: 14px;
    }

    .perfil-segundo-jogador-icon,
    .perfil-segundo-jogador-head > span {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .perfil-segundo-jogador-panel {
        width: 96vw;
        padding: 0.9rem;
        border-radius: 14px;
    }

    .perfil-segundo-jogador-head {
        align-items: flex-start;
    }

    .perfil-segundo-jogador-actions {
        flex-direction: column-reverse;
    }

    .perfil-segundo-jogador-actions .btn {
        width: 100%;
        justify-content: center;
    }


    .perfil-avatar-form .btn,
    .perfil-salvar-perfil-topo .btn,
    .perfil-avatar-remover-form .btn {
        width: 100%;
        justify-content: center;
    }

    .perfil-salvar-perfil-topo {
        justify-content: stretch;
    }

    .avatar-crop-panel {
        width: 96vw;
        padding: 0.75rem;
        border-radius: 14px;
    }

    .avatar-crop-stage {
        min-height: 280px;
    }

    .avatar-crop-form {
        flex-direction: column;
    }

    .avatar-crop-form .btn {
        width: 100%;
    }

    .perfil-avatar-ajuste-head {
        align-items: stretch;
        flex-direction: column;
    }

    .perfil-avatar-ajuste-head .btn {
        width: 100%;
    }

    .perfil-avatar-ajuste-actions {
        width: 100%;
    }

    .perfil-avatar-card-preview .player-card {
        width: min(74vw, 230px);
    }

    .perfil-fotos-galeria {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .perfil-foto-thumb-actions .btn {
        width: auto;
        min-width: 42px;
    }
}

@media (max-width: 600px) {
    body:has(.preferencias-shell) .app-topbar,
    body:has(.clube-shell) .app-topbar,
    body:has(.perfil-standalone-shell) .app-topbar {
        align-items: center;
        flex-wrap: nowrap;
        padding: 0.65rem 0.8rem;
    }

    body:has(.preferencias-shell) .app-topbar .navbar-brand span,
    body:has(.clube-shell) .app-topbar .navbar-brand span,
    body:has(.perfil-standalone-shell) .app-topbar .navbar-brand span,
    body:has(.preferencias-shell) .moedas-chip,
    body:has(.clube-shell) .moedas-chip,
    body:has(.perfil-standalone-shell) .moedas-chip,
    body:has(.preferencias-shell) .usuario-chip,
    body:has(.clube-shell) .usuario-chip,
    body:has(.perfil-standalone-shell) .usuario-chip {
        display: none;
    }

    body:has(.preferencias-shell) .navbar-brand img,
    body:has(.clube-shell) .navbar-brand img,
    body:has(.perfil-standalone-shell) .navbar-brand img {
        width: 28px;
        height: 28px;
    }

    body:has(.preferencias-shell) .container,
    body:has(.clube-shell) .container,
    body:has(.perfil-standalone-shell) .container {
        padding-bottom: calc(132px + env(safe-area-inset-bottom));
    }

    .preferencias-header {
        align-items: flex-start;
        margin-bottom: 0.9rem;
    }

    .preferencias-header h1 {
        font-size: 1.45rem;
    }

    .preferencias-header p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .preferencias-back-link {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .preferencias-card {
        border-radius: 16px;
    }

    .preferencias-card .card-header {
        margin-bottom: 0.85rem;
    }

    .preferencias-card .card-header h2 {
        font-size: 1.08rem;
    }

    .preferencias-form {
        gap: 0.85rem;
    }

    .preferencias-form .form-group {
        gap: 0.4rem;
    }

    .preferencias-form input,
    .preferencias-form select,
    .preferencias-form textarea {
        min-height: 46px;
        width: 100%;
    }

    .preferencias-form .btn {
        width: 100%;
        justify-content: center;
    }

    .clube-page-header {
        gap: 0.3rem;
        margin-bottom: 0.75rem;
    }

    .clube-page-header .page-eyebrow,
    .clube-page-header h1,
    .clube-page-header p {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .clube-page-header p {
        margin-top: 0.15rem;
        line-height: 1.4;
    }

    .clube-shell {
        width: 100%;
        min-width: 0;
        gap: 0.7rem;
    }

    .clube-accordion {
        width: 100%;
        min-width: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 14px;
    }

    .clube-accordion-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20px;
        align-items: center;
        gap: 0.7rem;
        min-height: 68px;
        padding: 0.85rem 0.9rem;
    }

    .clube-accordion-header > div {
        min-width: 0;
    }

    .clube-accordion-header h2 {
        font-size: 1rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .clube-accordion-header p {
        margin-top: 0.25rem;
        font-size: 0.8rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .clube-accordion-header > svg {
        width: 20px;
        height: 20px;
        flex: none;
    }

    .clube-accordion[open] .clube-accordion-header {
        margin-bottom: 0.8rem;
    }

    .clube-accordion > form,
    .clube-accordion > form.preferencias-form,
    .clube-accordion > .tabela-jogadores-wrap,
    .clube-accordion > .clube-usuarios-lista {
        min-width: 0;
        padding: 0 0.9rem 0.9rem;
    }

    .clube-accordion > form.preferencias-form {
        gap: 0.8rem;
    }

    .clube-accordion > .preferencias-form .form-group {
        min-width: 0;
        margin-bottom: 0;
    }

    .clube-accordion > .preferencias-form input,
    .clube-accordion > .preferencias-form select,
    .clube-accordion > .preferencias-form textarea {
        min-width: 0;
        max-width: 100%;
    }

    .clube-logo-editor {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.8rem;
        align-items: center;
    }

    .clube-logo-editor img {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .clube-logo-editor > .form-group:first-of-type {
        grid-column: 2;
        grid-row: 1;
    }

    .clube-logo-editor > .form-group:nth-of-type(n + 2),
    .clube-logo-actions {
        grid-column: 1 / -1;
    }

    .overall-dinamico-config p {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .clube-posicoes-select {
        min-height: 210px;
    }

    .clube-form-actions {
        margin-top: 0;
    }

    .clube-form-actions .btn,
    .clube-logo-actions .btn {
        min-height: 44px;
    }

    .jogadores-grid-novo {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }

    .config-fields-row { flex-direction: column; gap: 10px; }

    .config-fields-row .form-group,
    .config-fields-row .form-group-full {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .config-fields-row .form-group label {
        white-space: normal;
    }

    .config-fields-row .form-group input,
    .config-fields-row .form-group select,
    .config-fields-row .form-group textarea {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .config-fields-row .duracao-partida-group {
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }

    .config-fields-row .duracao-partida-group label {
        white-space: nowrap;
    }

    .config-fields-row .duracao-partida-group input {
        width: 64px;
        min-width: 64px;
        text-align: left;
    }

    .config-fields-row .form-group textarea {
        display: block;
        min-height: 92px;
    }

    .evolucao-peso-card {
        padding: 15px;
    }

    .evolucao-peso-head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .evolucao-peso-value {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
    }

    .selection-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .selection-bar > div:last-child {
        width: 100%;
        flex-wrap: wrap;
    }
    .selection-bar .btn-selecao,
    .selection-bar .btn-confirmar-topo {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        min-height: 50px;
        width: auto;
        justify-content: center;
        padding: 0.45rem 0.7rem;
        line-height: 1.15;
        text-align: center;
    }

    .selection-bar .btn-confirmar-topo {
        white-space: normal;
    }

    .selection-bar .btn-sortear-topo,
    .selection-bar .btn-draft-topo {
        flex: 1 1 calc(50% - 4px);
        width: auto;
        justify-content: center;
    }

    .convidado-form {
        grid-template-columns: 1fr 88px;
    }

    .convidado-form .btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    .sort-bar { gap: 6px; }

    .sort-bar .btn-sort {
        flex: 1 1 calc(50% - 6px);
        padding: 0.35rem 0.6rem;
        font-size: 0.78rem;
    }

    .travas-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .trava-row { grid-template-columns: 1fr; }
    .trava-remover { width: 100%; }

    .config-botoes {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .config-botoes button,
    .config-botoes .btn-sortear,
    .config-botoes .btn-embaralhar,
    .config-botoes .btn-limpar,
    .config-botoes .btn-contra-clube {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 0.7rem;
    }

    .sorteio-resultado-header {
        align-items: stretch;
        flex-direction: column;
    }

    .sorteio-resultado-acoes {
        width: 100%;
    }

    .sorteio-resultado-acoes .btn,
    .sorteio-resultado-acoes .btn-embaralhar {
        flex: 1 1 140px;
        justify-content: center;
    }

    .clube-adversario-inline {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .jogo-card-header {
        align-items: stretch;
        flex-direction: row;
        gap: 0.65rem;
    }

    .campeonato-config-head,
    .campeonato-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .partida-row {
        grid-template-columns: 1fr 48px 18px 48px 1fr;
    }

    .partida-row span {
        grid-column: 1 / -1;
    }

    .partida-jogo-label {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .partida-jogo-label > span {
        grid-column: auto;
    }

    .partida-row-historico {
        grid-template-columns: minmax(0, 1fr) 44px 14px 44px minmax(0, 1fr);
        gap: 0.38rem;
        padding: 0.55rem;
    }

    .partida-row-com-cronometro {
        grid-template-rows: auto auto auto;
    }

    .partida-row-com-cronometro > .partida-jogo-label {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .partida-row-com-cronometro > .partida-cronometro {
        grid-column: 2 / 5;
        grid-row: 2;
    }

    .partida-row-com-cronometro > .partida-time-fixo:first-of-type,
    .partida-row-com-cronometro > .partida-time-select:first-of-type {
        grid-column: 1;
        grid-row: 3;
    }

    .partida-row-com-cronometro > .partida-time-fixo:last-of-type,
    .partida-row-com-cronometro > .partida-time-select:last-of-type {
        grid-column: 5;
        grid-row: 3;
    }

    .partida-row-com-cronometro > .partida-placar:first-of-type {
        grid-column: 2;
        grid-row: 3;
    }

    .partida-row-com-cronometro > .partida-placar:last-of-type {
        grid-column: 4;
        grid-row: 3;
    }

    .partida-row-com-cronometro > b {
        grid-column: 3;
        grid-row: 3;
    }

    .partida-row input {
        width: 48px;
    }

    .partida-row-historico input[type="number"],
    .partida-row-historico .partida-placar {
        width: 44px;
        padding-inline: 0.2rem;
    }

    .partida-row .partida-placar {
        grid-column: auto;
        width: 48px;
    }

    .partida-row-historico .partida-placar {
        width: 44px;
    }

    .partida-row-historico strong,
    .partida-row-historico button.partida-time-fixo,
    .partida-row-historico select.partida-time-select {
        min-width: 0;
        font-size: 0.78rem;
    }

    .partida-row-historico select.partida-time-select {
        padding-inline: 0.35rem;
    }

    .gols-times-grid {
        grid-template-columns: 1fr;
    }

    .gols-jogador-row {
        grid-template-columns: 84px minmax(0, 1fr) 84px;
        gap: 0.35rem;
    }

    .gols-jogador-header {
        grid-template-columns: 84px minmax(0, 1fr) 84px;
        gap: 0.35rem;
        font-size: 0.66rem;
    }

    .gols-jogador-row button {
        width: 28px;
        min-width: 28px;
        height: 30px;
    }

    .gols-stat-botoes {
        grid-template-columns: 28px 24px 28px;
        gap: 0.15rem;
    }

    .gols-jogador-nome-goleiro {
        gap: 0.16rem;
    }

    .gols-jogador-row .gols-defesa-botao-unico {
        width: auto;
        min-width: 0;
        height: auto;
        padding: 0.05rem 0.22rem;
        font-size: 0.58rem;
    }

    .gols-defesa-icone {
        width: 8px;
        height: 8px;
    }

    .gols-jogador-row-readonly {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .jogo-excluir {
        margin: -0.95rem -0.95rem -0.95rem 0;
    }

    .jogo-excluir-btn {
        width: 42px;
    }

    .acoes-em-lote .btn-danger { width: 100%; }
}

@media (max-width: 480px) {
    .navbar-brand { font-size: 0.9rem; }
    .home-shell { gap: 0.9rem; }
    .home-match-content { padding: 1rem; }
    .home-metrics-row {
        gap: 0.45rem;
        padding: 0.45rem;
    }
    .home-metrics-row div { min-height: 66px; }
    .home-metrics-row span { font-size: 1.2rem; }
    .home-metrics-row small { font-size: 0.64rem; }

    .navbar-menu a {
        padding: 0.28rem 0.45rem;
        font-size: 0.74rem;
    }

    .bottom-nav {
        padding: 0.35rem;
    }

    .bottom-nav a {
        min-height: 50px;
        font-size: 0.6rem;
        border-radius: 12px;
    }

    .bottom-nav a svg {
        width: 17px;
        height: 17px;
    }

    .install-prompt {
        grid-template-columns: minmax(0, 1fr) auto;
        bottom: calc(82px + env(safe-area-inset-bottom));
        gap: 0.55rem;
        padding: 0.72rem;
    }

    .install-prompt-close {
        grid-column: 2;
        grid-row: 1;
    }

    .install-prompt-primary {
        grid-column: 1 / -1;
    }

    .moedas-chip,
    .navbar-user .usuario-chip {
        font-size: 0.74rem;
        padding-inline: 0.58rem;
    }

    .loja-card-preview {
        min-height: 212px;
    }

    .container { padding: 0.7rem 0.7rem 6.75rem; }
    .card { padding: 0.8rem; }

    .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .page-header p { font-size: 0.85rem; }
}

.agenda-header {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 62%, transparent);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--roxo) 18%, transparent), transparent 32%),
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--verde) 14%, transparent), transparent 28%),
        linear-gradient(145deg, var(--home-match-bg-start), var(--home-match-bg-end));
    box-shadow: var(--sombra);
}

.agenda-header::after {
    content: "";
    position: absolute;
    inset: auto -10% -65% 25%;
    height: 170px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 38%, transparent);
    transform: rotate(-8deg);
    pointer-events: none;
}

.agenda-header h1,
.agenda-header p,
.agenda-header .page-eyebrow {
    position: relative;
    z-index: 1;
}

.agenda-header h1 {
    font-size: clamp(2rem, 8vw, 3.6rem);
    line-height: 0.95;
}

.agenda-header p {
    max-width: 620px;
}

.agenda-schedule-match-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--verde) 42%, var(--home-match-border));
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--verde) 18%, transparent), transparent 34%),
        color-mix(in srgb, var(--verde) 7%, var(--fundo-card));
    color: var(--texto);
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.agenda-schedule-match-card:hover,
.agenda-schedule-match-card:focus-visible {
    border-color: var(--verde);
    background: color-mix(in srgb, var(--verde) 14%, var(--fundo-card));
    outline: none;
    transform: translateY(-2px);
}

.agenda-schedule-match-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--verde) 18%, transparent);
    color: var(--verde);
}

.agenda-schedule-match-icon svg {
    width: 22px;
    height: 22px;
}

.agenda-schedule-match-card > span:nth-child(2) {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.agenda-schedule-match-card strong {
    font-size: 1rem;
}

.agenda-schedule-match-card small {
    color: var(--texto-suave);
    font-size: 0.82rem;
    line-height: 1.35;
}

.agenda-schedule-match-arrow {
    width: 20px;
    height: 20px;
    color: var(--verde);
}

/* RESUMO */

/* FORMULÁRIO */

.agenda-form-card {
    margin-bottom: 1.35rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(110, 91, 224, 0.16), transparent 34%),
        var(--fundo-card);
}

.agenda-form-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 0.8rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.agenda-form-toggle > div {
    flex: 1;
    min-width: 0;
}

.agenda-form-toggle h2 {
    margin-bottom: 0.15rem;
    font-size: 1.15rem;
}

.agenda-form-toggle p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.agenda-form-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--texto-suave);
    transition: transform 0.18s ease, color 0.18s ease;
}

.agenda-form-toggle:hover .agenda-form-chevron,
.agenda-form-toggle:focus-visible .agenda-form-chevron {
    color: var(--texto);
}

.agenda-form-toggle:focus-visible {
    outline: 2px solid rgba(110, 91, 224, 0.5);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.agenda-form-card.is-open .agenda-form-chevron {
    transform: rotate(180deg);
}

.agenda-form {
    display: none;
    gap: 1rem;
    margin-top: 1.15rem;
}

.agenda-form-card.is-open .agenda-form {
    display: grid;
}

.agenda-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
}

.agenda-form-title {
    grid-column: span 2;
}

.agenda-form-description {
    grid-column: 1 / -1;
}

.agenda-form-description textarea {
    min-height: 110px;
}

.agenda-form .btn {
    width: fit-content;
}

.agenda-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

/* PRÓXIMOS COMPROMISSOS */

.agenda-proximos {
    margin-bottom: 1.5rem;
}

.agenda-proximos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.agenda-evento-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    min-height: 190px;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 54%, transparent);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--roxo) 14%, transparent), transparent 30%),
        linear-gradient(180deg, var(--home-match-bg-start), var(--home-match-bg-end));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.agenda-evento-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--roxo) 42%, var(--home-match-border));
}

.agenda-evento-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--roxo);
    opacity: 0.9;
}

.agenda-evento-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--roxo) 28%, var(--home-match-border));
    background: color-mix(in srgb, var(--roxo) 12%, var(--home-match-surface));
    color: var(--roxo-suave);
}

.agenda-evento-icon svg {
    width: 21px;
    height: 21px;
}

.agenda-evento-main {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.45rem;
}

.agenda-evento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.agenda-evento-top span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.22rem 0.58rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--roxo) 14%, var(--home-match-surface));
    color: var(--roxo-suave);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.agenda-evento-top small {
    color: var(--texto-suave);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.agenda-evento-main h3 {
    margin: 0;
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.15;
}

.agenda-evento-main p {
    display: flex;
    align-items: flex-start;
    gap: 0.38rem;
    color: var(--texto-suave);
    font-size: 0.88rem;
    line-height: 1.45;
}

.agenda-evento-main p svg {
    width: 15px;
    height: 15px;
    margin-top: 0.18rem;
    color: var(--verde);
}

.agenda-evento-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--home-match-border) 42%, transparent);
}

.agenda-resposta-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.agenda-evento-botoes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    width: 100%;
}

.convite-jogador-preview {
    margin-bottom: 1rem;
}

.convite-jogador-form {
    text-align: left;
}

.convite-jogador-form .btn-full {
    margin-top: 0.35rem;
}

.agenda-evento-botoes .agenda-resposta-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.agenda-evento-botoes .agenda-resposta-form .btn,
.agenda-evento-botoes .agenda-cancelar-form,
.agenda-evento-botoes .agenda-cancelar-form .btn,
.agenda-evento-botoes .agenda-organizar-times {
    width: 100%;
}

.agenda-evento-botoes .agenda-resposta-form .btn:only-of-type {
    grid-column: 1 / -1;
}

.agenda-gestao-botoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.agenda-gestao-botoes > *,
.agenda-gestao-botoes .btn {
    width: 100%;
    margin: 0;
}

.agenda-gestao-botoes > :only-child {
    grid-column: 1 / -1;
}

.agenda-linha-acoes .agenda-cancelar-form {
    margin-top: 0.25rem;
}

/* STATUS */

.agenda-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    width: fit-content;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--borda);
    background: color-mix(in srgb, var(--home-match-surface) 64%, transparent);
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.agenda-status.aceito {
    border-color: rgba(42, 163, 108, 0.38);
    background: rgba(42, 163, 108, 0.12);
    color: var(--verde);
}

.agenda-status.recusado {
    border-color: rgba(201, 82, 79, 0.42);
    background: rgba(201, 82, 79, 0.12);
    color: var(--vermelho);
}

.agenda-status.pendente {
    border-color: rgba(200, 151, 59, 0.34);
    background: rgba(200, 151, 59, 0.09);
    color: var(--ouro);
}

/* CALENDÁRIO / TIMELINE */

.agenda-meses {
    display: grid;
    gap: 1.2rem;
}

.agenda-mes-bloco {
    display: grid;
    gap: 0.8rem;
}

.agenda-mes-bloco > h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 900;
}

.agenda-mes-bloco > h2::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--roxo);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--roxo) 12%, transparent);
}

.agenda-timeline {
    position: relative;
    display: grid;
    gap: 0.75rem;
}

.agenda-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 38px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--borda-forte), transparent);
    opacity: 0.8;
}

.agenda-linha {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: stretch;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 45%, transparent);
    border-radius: 22px;
    background:
        linear-gradient(180deg, var(--home-match-bg-start), var(--home-match-bg-end));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.agenda-linha::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 50%;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--roxo);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--roxo) 14%, transparent);
    transform: translateY(-50%);
}

.agenda-data {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    min-height: 78px;
    border: 1px solid color-mix(in srgb, var(--home-match-border) 48%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--home-match-surface) 70%, transparent);
    text-align: center;
}

.agenda-data strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.agenda-data span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.agenda-linha-corpo {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.45rem;
}

.agenda-linha-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.agenda-linha-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    color: var(--roxo-suave);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.agenda-linha-head span svg {
    width: 15px;
    height: 15px;
}

.agenda-linha-corpo h3 {
    margin: 0;
    color: var(--texto);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
}

.agenda-linha-corpo p {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    max-width: 72ch;
    color: var(--texto-suave);
    font-size: 0.88rem;
}

.agenda-linha-corpo p svg {
    width: 15px;
    height: 15px;
    margin-top: 0.17rem;
    color: var(--verde);
}

.agenda-origem {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--verde) 34%, transparent);
    background: color-mix(in srgb, var(--verde) 10%, var(--home-match-surface));
    color: var(--verde);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.agenda-visibilidade {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 24px;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.agenda-visibilidade svg.lucide {
    width: 12px;
    height: 12px;
}

.agenda-visibilidade-diretores {
    border: 1px solid rgba(200, 151, 59, 0.38);
    background: rgba(200, 151, 59, 0.1);
    color: #c4963c;
}

.agenda-visibilidade-ninguem {
    border: 1px solid rgba(201, 82, 79, 0.42);
    background: rgba(201, 82, 79, 0.12);
    color: var(--vermelho);
}

/* ===========================
   QUADRO TATICO
=========================== */
body.tactical-open {
    overflow: hidden;
}

body.tactical-open .bottom-nav {
    display: none;
}

.tactical-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(42, 163, 108, 0.26);
    background:
        radial-gradient(circle at 88% 12%, rgba(42, 163, 108, 0.18), transparent 34%),
        linear-gradient(160deg, rgba(31, 24, 52, 0.94), rgba(11, 28, 22, 0.94));
    cursor: pointer;
}

.tactical-card::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -36%;
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.tactical-card h3 {
    font-size: clamp(1.65rem, 6vw, 2.5rem);
}

.tactical-card-badges {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.tactical-card-badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 28px;
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(42, 163, 108, 0.24);
    border-radius: 999px;
    background: rgba(42, 163, 108, 0.09);
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 900;
}

.tactical-card-badges svg {
    width: 13px;
    height: 13px;
}

.tactical-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    visibility: hidden;
    pointer-events: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background:
        radial-gradient(circle at 18% 0%, rgba(110, 91, 224, 0.18), transparent 32%),
        linear-gradient(180deg, #090713, #05090a);
    color: var(--texto);
}

.tactical-screen.is-open {
    display: grid;
    visibility: visible;
    pointer-events: auto;
}

.tactical-topbar,
.tactical-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: max(0.7rem, env(safe-area-inset-top)) 0.85rem 0.7rem;
    background: rgba(8, 7, 14, 0.82);
    border-bottom: 1px solid rgba(110, 91, 224, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tactical-topbar strong {
    font-family: var(--fonte-display);
    font-size: 1rem;
}

.tactical-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.tactical-history-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.18rem;
    border: 1px solid rgba(200, 151, 59, 0.28);
    border-radius: 10px;
    background: rgba(200, 151, 59, 0.1);
}

.tactical-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(110, 91, 224, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    cursor: pointer;
}

.tactical-stage {
    min-height: 0;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    align-items: center;
    gap: 0.75rem;
}

.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-stage {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    overflow-y: auto;
}

.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-field,
.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-reserves {
    display: none;
}

.tactical-screen:not(.is-editing-activity):not(.is-board-hidden) .tactical-activities-panel {
    max-height: none;
}

.tactical-screen.is-editing-activity .tactical-stage {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding-top: 0.35rem;
}

.tactical-screen.is-editing-activity .tactical-field {
    width: min(100%, 980px);
    min-height: 0;
    height: calc(100dvh - 154px);
    max-height: calc(100dvh - 154px);
    margin-inline: auto;
}

.tactical-screen.is-editing-activity .tactical-activities-panel {
    display: none;
}

.tactical-toast {
    position: absolute;
    left: 50%;
    top: calc(max(0.7rem, env(safe-area-inset-top)) + 54px);
    z-index: 1200;
    max-width: calc(100vw - 2rem);
    transform: translate(-50%, -8px);
    padding: 0.5rem 1rem;
    border: 1px solid rgba(42, 163, 108, 0.4);
    border-radius: 999px;
    background: rgba(13, 17, 23, 0.94);
    color: var(--verde);
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tactical-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tactical-screen:not(.is-editing-activity) .tactical-toolbar {
    display: none;
}

.tactical-screen.is-board-hidden {
    grid-template-rows: auto minmax(0, 1fr);
}

.tactical-screen.is-board-hidden .tactical-stage {
    grid-template-columns: 1fr;
    align-items: stretch;
    overflow-y: auto;
}

.tactical-screen.is-board-hidden .tactical-field,
.tactical-screen.is-board-hidden .tactical-reserves,
.tactical-screen.is-board-hidden .tactical-toolbar,
.tactical-screen.is-board-hidden .tactical-assets-panel,
.tactical-screen.is-board-hidden .tactical-save-menu,
.tactical-screen.is-board-hidden .tactical-agenda-menu {
    display: none;
}

.tactical-screen.is-board-hidden .tactical-activities-panel {
    display: grid;
    max-height: none;
    min-height: 0;
}

.tactical-field {
    position: relative;
    width: min(100%, 560px);
    height: 100%;
    min-height: 420px;
    max-height: calc(100dvh - 150px);
    overflow: hidden;
    border: 2px solid rgba(236, 232, 248, 0.76);
    border-radius: 18px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 12.5%, rgba(255, 255, 255, 0.01) 12.5% 25%),
        linear-gradient(180deg, #176d43, #0f5535);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    touch-action: none;
}

.tactical-field.is-half {
    height: min(56dvh, 520px);
    max-height: calc(100dvh - 190px);
}

.tactical-field.is-half .tactical-midfield-line {
    top: auto;
    bottom: 0;
}

.tactical-field.is-half .tactical-center-circle {
    top: 100%;
}

.tactical-field.is-half .tactical-box-bottom,
.tactical-field.is-half .tactical-goal-bottom {
    display: none;
}

.tactical-drawing,
.tactical-connections,
.tactical-field-lines,
.tactical-assets-layer,
.tactical-zones-layer,
.tactical-team {
    position: absolute;
    inset: 0;
}

.tactical-drawing {
    z-index: 4;
    pointer-events: none;
}

.tactical-connections {
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.tactical-zones-layer {
    z-index: 3;
    pointer-events: auto;
}

.tactical-field.is-drawing .tactical-connections {
    pointer-events: none;
}

.tactical-connection-hit {
    stroke: transparent;
    stroke-width: 18;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
}

.tactical-connection-line {
    stroke: rgba(236, 253, 245, 0.82);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
    pointer-events: none;
}

.tactical-connection.is-selected .tactical-connection-line {
    stroke: #c4963c;
    stroke-width: 5;
}

.tactical-arrow-hit {
    stroke: transparent;
    stroke-width: 22;
    stroke-linecap: round;
    pointer-events: stroke;
    cursor: pointer;
}

.tactical-arrow-line {
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
    pointer-events: none;
}

.tactical-arrow-head {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
    pointer-events: none;
}

.tactical-arrow.is-dashed .tactical-arrow-line {
    stroke-dasharray: 1 10;
}

.tactical-field.is-drawing .tactical-drawing {
    pointer-events: auto;
}

.tactical-field.is-drawing .tactical-player,
.tactical-field.is-drawing .tactical-ball,
.tactical-field.is-drawing .tactical-asset,
.tactical-field.is-drawing .tactical-zone {
    pointer-events: none;
}

.tactical-zone {
    position: absolute;
    z-index: 3;
    min-width: 26px;
    min-height: 26px;
    border: 2px solid rgba(42, 163, 108, 0.76);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.18);
    cursor: grab;
    touch-action: none;
}

.tactical-zone-remove,
.tactical-zone-resize {
    position: absolute;
    z-index: 1;
}

.tactical-zone-remove {
    top: -12px;
    right: -12px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(201, 82, 79, 0.62);
    border-radius: 50%;
    background: rgba(127, 29, 29, 0.92);
    color: #fee2e2;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.tactical-zone-resize {
    right: -6px;
    bottom: -6px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 6px;
    background: rgba(13, 17, 23, 0.82);
    cursor: nwse-resize;
}

.tactical-midfield-line {
    position: absolute;
    inset: 50% 0 auto;
    z-index: 1;
    border-top: 2px solid rgba(255, 255, 255, 0.72);
}

.tactical-center-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 34%;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.tactical-box {
    position: absolute;
    left: 18%;
    z-index: 1;
    width: 64%;
    height: 18%;
    border: 2px solid rgba(255, 255, 255, 0.72);
}

.tactical-box-top {
    top: -2px;
    border-top: 0;
}

.tactical-box-bottom {
    bottom: -2px;
    border-bottom: 0;
}

.tactical-goal {
    position: absolute;
    left: 38%;
    z-index: 1;
    width: 24%;
    height: 5%;
    border: 2px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
}

.tactical-goal-top {
    top: 0;
    border-top: 0;
}

.tactical-goal-bottom {
    bottom: 0;
    border-bottom: 0;
}

.tactical-player,
.tactical-ball,
.tactical-asset {
    position: absolute;
    z-index: 6;
    display: inline-grid;
    place-items: center;
    border: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tactical-player {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background: linear-gradient(180deg, #5a4ac8, #3a2e78);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.35);
}

.tactical-team-away .tactical-player {
    background: linear-gradient(180deg, #111827, #020617);
}

.tactical-player.is-connection-start {
    box-shadow: 0 0 0 3px rgba(196, 150, 60, 0.42), 0 7px 18px rgba(0, 0, 0, 0.35);
}

.tactical-ball {
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%) scale(var(--tactical-item-scale, 1));
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.32));
}

.tactical-ball svg,
.tactical-ball-icon {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tactical-ball-icon {
    display: inline-grid;
    place-items: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 20px;
    line-height: 1;
    transform: translateY(-1px);
}

.tactical-asset {
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: transparent;
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    transform: translate(-50%, -50%) scale(var(--tactical-item-scale, 1));
}

.tactical-asset[data-kind="dot"],
.tactical-asset[data-kind="ball"],
.tactical-asset[data-kind="mini-goal"],
.tactical-asset[data-kind="flag"],
.tactical-asset[data-kind="mark"] {
    width: 42px;
    height: 42px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.32));
}

.tactical-asset[data-kind="player-blue"],
.tactical-asset[data-kind="player-red"],
.tactical-asset[data-kind="goalkeeper"],
.tactical-asset[data-kind="referee"],
.tactical-asset[data-kind="cone"] {
    width: 42px;
    height: 50px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, 0.32));
}

.tactical-asset[data-kind="cone"] {
    width: 42px;
    height: 50px;
}

.tactical-asset[data-kind="mini-goal"] {
    width: 68px;
    height: 44px;
}

.tactical-asset[data-kind="flag"] {
    width: 30px;
    height: 58px;
}

.tactical-asset[data-kind="mark"] {
    width: 46px;
    height: 46px;
}

.tactical-asset[data-kind="dot"] {
    width: 48px;
    height: 32px;
}

.tactical-asset[data-kind="referee"] {
    width: 40px;
    height: 56px;
}

.tactical-asset svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.tactical-trash {
    position: absolute;
    right: 0.65rem;
    top: 0.65rem;
    z-index: 9;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(201, 82, 79, 0.42);
    border-radius: 14px;
    background: rgba(13, 17, 23, 0.66);
    color: #fecaca;
    cursor: default;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.tactical-trash svg {
    width: 19px;
    height: 19px;
}

.tactical-trash.is-hot {
    transform: scale(1.08);
    border-color: rgba(201, 82, 79, 0.82);
    background: rgba(127, 29, 29, 0.9);
}

.tactical-field-save {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    z-index: 9;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.tactical-connection-menu {
    position: absolute;
    z-index: 8;
    display: none;
    transform: translate(-50%, -100%);
    padding: 0.22rem;
    border: 1px solid rgba(196, 150, 60, 0.45);
    border-radius: 10px;
    background: rgba(13, 17, 23, 0.96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.38);
}

.tactical-connection-menu.is-open {
    display: block;
}

.tactical-connection-menu button {
    min-height: 30px;
    border: 0;
    border-radius: 8px;
    padding: 0 0.58rem;
    background: rgba(190, 72, 70, 0.16);
    color: #fecaca;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.tactical-reserves {
    position: fixed;
    left: 0.7rem;
    top: calc(max(0.7rem, env(safe-area-inset-top)) + 66px);
    z-index: 1008;
    display: grid;
    gap: 0.5rem;
    width: 86px;
    max-height: calc(100dvh - 160px);
    padding: 0.55rem;
    border: 1px solid rgba(236, 232, 248, 0.22);
    border-radius: 16px;
    background: rgba(13, 17, 23, 0.88);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.tactical-reserves.is-collapsed {
    width: 46px;
    padding: 0.35rem;
}

.tactical-reserves.is-collapsed strong,
.tactical-reserves.is-collapsed .tactical-reserves-list,
.tactical-reserves.is-collapsed .tactical-reserves-pager {
    display: none;
}

.tactical-reserves strong {
    font-size: 0.68rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.tactical-reserves-toggle {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    border: 1px solid rgba(42, 163, 108, 0.28);
    border-radius: 11px;
    background: rgba(42, 163, 108, 0.1);
    color: var(--verde);
    cursor: pointer;
}

.tactical-reserves-list {
    display: grid;
    gap: 0.42rem;
    min-height: 90px;
    max-height: 204px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tactical-reserves-list .tactical-player {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto;
}

.tactical-reserves-pager {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    gap: 0.25rem;
}

.tactical-reserves-pager[hidden] {
    display: none;
}

.tactical-reserves-pager button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(42, 163, 108, 0.26);
    border-radius: 8px;
    background: rgba(42, 163, 108, 0.09);
    color: var(--verde);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.tactical-reserves-pager button:disabled {
    opacity: 0.42;
    cursor: default;
}

.tactical-reserves-pager span {
    color: var(--texto-suave);
    font-size: 0.66rem;
    font-weight: 900;
    text-align: center;
}

.tactical-activities-panel {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.65rem;
    min-height: 0;
    max-height: calc(100dvh - 150px);
    padding: 0.7rem;
    border: 1px solid rgba(236, 232, 248, 0.18);
    border-radius: 16px;
    background: rgba(13, 17, 23, 0.72);
    overflow: hidden;
}

.tactical-activities-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.tactical-activities-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.tactical-activities-head strong {
    font-family: var(--fonte-display);
    font-size: 0.92rem;
}

.tactical-activities-list {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    min-height: 0;
    overflow-y: auto;
}

.tactical-activity-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.55rem;
    border: 1px solid rgba(110, 91, 224, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.tactical-activity-card.is-active {
    border-color: rgba(42, 163, 108, 0.58);
    box-shadow: 0 0 0 1px rgba(42, 163, 108, 0.14);
}

.tactical-unsaved {
    color: var(--ouro);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.tactical-activity-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, #176d43, #0f5535);
    cursor: pointer;
}

.preview-field {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 12.5%, rgba(255, 255, 255, 0.01) 12.5% 25%);
}

.preview-field img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.preview-arrows {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.preview-arrows line {
    stroke-width: 1.8;
    stroke-linecap: round;
}

.preview-zone,
.preview-player,
.preview-asset {
    position: absolute;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
}

.preview-zone {
    transform: none;
    border: 1px solid rgba(42, 163, 108, 0.76);
    border-radius: 4px;
}

.preview-player {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: #5a4ac8;
    color: #fff;
    font-size: 0.48rem;
    font-style: normal;
    font-weight: 900;
}

/* ===========================
   HISTORICO DE MOEDAS
=========================== */
.moedas-historico-summary {
    grid-template-columns: repeat(3, 1fr);
}

.moedas-historico-valor-ganho { color: var(--verde); }
.moedas-historico-valor-perda { color: var(--vermelho); }

.moedas-historico-icone-ganho {
    background: rgba(42, 163, 108, 0.12);
    border-color: rgba(42, 163, 108, 0.3);
    color: var(--verde);
}

.moedas-historico-icone-perda {
    background: rgba(201, 82, 79, 0.12);
    border-color: rgba(201, 82, 79, 0.3);
    color: var(--vermelho);
}

.moedas-historico-filtros {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.moedas-historico-filtro {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--borda-forte);
    color: var(--texto-suave);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.moedas-historico-filtro:hover {
    border-color: var(--roxo);
    color: var(--roxo-suave);
}

.moedas-historico-filtro.is-ativo {
    background: var(--roxo);
    border-color: var(--roxo);
    color: #fff;
}

.moedas-historico-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.moedas-historico-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--borda);
    background: var(--fundo-card-suave, transparent);
}

.moedas-historico-item-icone {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(110, 91, 224, 0.12);
    border: 1px solid rgba(110, 91, 224, 0.25);
    color: var(--roxo-suave);
}

.moedas-historico-item-icone svg {
    width: 18px;
    height: 18px;
}

.moedas-historico-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.moedas-historico-item-info strong {
    font-size: 0.92rem;
    color: var(--texto);
    overflow-wrap: break-word;
}

.moedas-historico-item-info small {
    font-size: 0.78rem;
    color: var(--texto-suave);
}

.moedas-historico-item-valor {
    flex-shrink: 0;
    font-weight: 800;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--texto);
}

.moedas-historico-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--texto-suave);
    text-align: center;
}

.moedas-historico-vazio svg {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.moedas-historico-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.moedas-historico-paginacao-info {
    font-size: 0.82rem;
    color: var(--texto-suave);
}

@media (max-width: 640px) {
    .moedas-historico-summary {
        grid-template-columns: 1fr 1fr;
    }

    .moedas-historico-summary .stat-card:first-child {
        grid-column: 1 / -1;
    }
}

.preview-player.is-away {
    background: #111827;
}

.preview-asset {
    width: 16px;
    height: 16px;
    color: #c2743a;
    font-size: 0.75rem;
    font-style: normal;
}

.preview-asset svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tactical-activity-body {
    display: grid;
    gap: 0.16rem;
}

.tactical-activity-body strong {
    text-transform: uppercase;
    font-size: 0.84rem;
}

.tactical-activity-body span,
.tactical-activity-body p {
    margin: 0;
    color: var(--texto-suave);
    font-size: 0.76rem;
}

.tactical-activity-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
}

.tactical-activity-actions button {
    min-height: 30px;
    padding: 0 0.28rem;
    border: 1px solid rgba(110, 91, 224, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    font: inherit;
    font-size: 0.64rem;
    font-weight: 800;
    cursor: pointer;
}

.tactical-assets-panel {
    position: fixed;
    top: calc(max(0.7rem, env(safe-area-inset-top)) + 58px);
    right: 0.75rem;
    z-index: 1010;
    display: none;
    width: min(330px, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 150px);
    overflow: auto;
    padding: 0.8rem;
    border: 1px solid rgba(110, 91, 224, 0.32);
    border-radius: 20px;
    background: rgba(13, 17, 23, 0.96);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.tactical-assets-panel.is-open {
    display: grid;
    gap: 0.75rem;
}

.tactical-panel-head,
.tactical-color-picker,
.tactical-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.tactical-tool-grid,
.tactical-asset-buttons,
.tactical-zone-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.tactical-tool-grid button,
.tactical-asset-buttons button,
.tactical-zone-buttons button,
.tactical-toolbar button,
.tactical-toolbar select,
.tactical-save-menu button {
    position: relative;
    overflow: hidden;
    min-height: 38px;
    border: 1px solid rgba(110, 91, 224, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--texto);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.tactical-click-feedback {
    position: fixed;
    left: var(--tactical-feedback-x, 50%);
    top: var(--tactical-feedback-y, 50%);
    z-index: 1300;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.4);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 18%, rgba(42, 163, 108, 0.78) 19% 42%, rgba(42, 163, 108, 0) 72%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34), 0 0 18px rgba(42, 163, 108, 0.46);
    animation: tacticalClickFeedback 0.72s ease-out forwards;
}

@keyframes tacticalClickFeedback {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.45);
    }
    55% {
        opacity: 0.55;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(7.8);
    }
}

.tactical-asset-buttons button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.3rem;
    text-align: center;
    line-height: 1.15;
}

.tactical-asset-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
}

.tactical-asset-icon svg,
.tactical-asset-icon .tactical-ball-icon {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tactical-asset-label {
    font-size: 0.66rem;
}

.tactical-actions-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tactical-toolbar .tactical-clear-btn,
.tactical-toolbar .tactical-animate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.9rem;
}

.tactical-toolbar .tactical-clear-btn svg,
.tactical-toolbar .tactical-animate-btn svg {
    width: 16px;
    height: 16px;
}

.tactical-toolbar .tactical-clear-btn {
    color: var(--vermelho);
    background: rgba(201, 82, 79, 0.1);
    border-color: rgba(201, 82, 79, 0.4);
}

.tactical-toolbar .tactical-clear-btn:hover {
    background: rgba(201, 82, 79, 0.18);
    border-color: var(--vermelho);
}

.tactical-toolbar .tactical-animate-btn {
    color: var(--verde);
    background: rgba(42, 163, 108, 0.1);
    border-color: rgba(42, 163, 108, 0.4);
}

.tactical-toolbar .tactical-animate-btn:hover {
    background: rgba(42, 163, 108, 0.18);
    border-color: var(--verde);
}

.tactical-history-actions button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    padding: 0;
    color: #dc2626;
    background: rgba(200, 151, 59, 0.22);
    border-color: rgba(200, 151, 59, 0.34);
}

.tactical-history-actions button:disabled {
    color: rgba(248, 250, 252, 0.34);
    cursor: not-allowed;
    opacity: 0.48;
}

.tactical-history-actions svg {
    width: 21px;
    height: 21px;
    stroke-width: 3;
}

.tactical-panel-section {
    display: grid;
    gap: 0.6rem;
    padding: 0.6rem;
    border: 1px solid rgba(110, 91, 224, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
}

.tactical-panel-section summary {
    cursor: pointer;
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 900;
}

.tactical-info-grid {
    display: grid;
    gap: 0.52rem;
    margin-top: 0.6rem;
}

.tactical-info-grid label {
    display: grid;
    gap: 0.25rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.tactical-info-grid input,
.tactical-info-grid select,
.tactical-info-grid textarea {
    width: 100%;
    min-height: 36px;
    padding: 0.48rem 0.58rem;
    border: 1px solid rgba(110, 91, 224, 0.26);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--texto);
    font: inherit;
    font-size: 0.8rem;
}

.tactical-info-grid textarea {
    resize: vertical;
}

.tactical-tool-grid button {
    display: grid;
    place-items: center;
    gap: 0.18rem;
}

.tactical-tool-grid button.is-active {
    border-color: rgba(42, 163, 108, 0.5);
    background: rgba(42, 163, 108, 0.13);
    color: var(--verde);
}

.tactical-color-picker input {
    width: 52px;
    height: 34px;
    border: 0;
    background: transparent;
}

.tactical-toolbar {
    position: relative;
    z-index: 1005;
    grid-template-columns: 1.1fr repeat(2, 1fr);
    gap: 0.55rem;
    padding: 0.72rem 0.8rem calc(0.72rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(110, 91, 224, 0.22);
    border-bottom: 0;
}

.tactical-toolbar button,
.tactical-toolbar select {
    min-height: 46px;
    padding: 0 0.78rem;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.1;
}

.tactical-toolbar select {
    background-color: rgba(255, 255, 255, 0.08);
}

.tactical-save-menu,
.tactical-agenda-menu {
    position: fixed;
    right: 0.8rem;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 1012;
    display: none;
    min-width: 210px;
    padding: 0.4rem;
    border: 1px solid rgba(42, 163, 108, 0.28);
    border-radius: 16px;
    background: rgba(13, 17, 23, 0.96);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5);
}

.tactical-save-menu.is-open,
.tactical-agenda-menu.is-open {
    display: grid;
    gap: 0.35rem;
}

.tactical-save-menu button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: flex-start;
    padding: 0 0.75rem;
    text-align: left;
}

.tactical-save-menu button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tactical-agenda-menu {
    width: min(360px, calc(100vw - 1.6rem));
    gap: 0.6rem;
    border-color: rgba(110, 91, 224, 0.34);
}

.tactical-agenda-menu.is-open {
    gap: 0.65rem;
}

.tactical-agenda-menu-head,
.tactical-agenda-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.tactical-agenda-menu-head strong {
    font-family: var(--fonte-display);
    font-size: 0.95rem;
}

.tactical-agenda-menu .tactical-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.tactical-agenda-menu label {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
}

.tactical-agenda-menu input,
.tactical-agenda-menu select,
.tactical-agenda-menu textarea {
    width: 100%;
    min-height: 38px;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(110, 91, 224, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--texto);
    font: inherit;
    font-size: 0.82rem;
}

.tactical-agenda-menu textarea {
    resize: vertical;
}

.tactical-agenda-menu .btn {
    width: 100%;
}

.agenda-quadro-link,
.tactical-view-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    min-height: 34px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(42, 163, 108, 0.3);
    border-radius: 999px;
    background: rgba(42, 163, 108, 0.1);
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 900;
}

.agenda-quadro-link:hover,
.tactical-view-back:hover {
    border-color: rgba(42, 163, 108, 0.55);
    color: var(--verde);
}

.tactical-view-shell {
    display: grid;
    gap: 1rem;
}

.tactical-view-head {
    display: grid;
    gap: 0.8rem;
}

.tactical-view-head h1 {
    margin: 0.25rem 0;
    font-size: clamp(2rem, 8vw, 3.6rem);
    line-height: 0.98;
}

.tactical-view-head p {
    color: var(--texto-suave);
}

.tactical-view-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
}

.tactical-view-info-item {
    display: grid;
    gap: 0.24rem;
    padding: 0.7rem;
    border: 1px solid rgba(110, 91, 224, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.tactical-view-info-item strong {
    color: var(--texto);
    font-size: 0.76rem;
}

.tactical-view-info-item span {
    color: var(--texto-suave);
    font-size: 0.84rem;
    white-space: pre-wrap;
}

.tactical-plan-view-list {
    display: grid;
    gap: 1rem;
}

.tactical-plan-view-card {
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid rgba(110, 91, 224, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.tactical-plan-view-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tactical-plan-view-card-head > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(42, 163, 108, 0.13);
    color: var(--verde);
    font-weight: 900;
}

.tactical-plan-view-card-head h2 {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(1.25rem, 4vw, 2rem);
}

.tactical-plan-view-card-head p {
    margin: 0.12rem 0 0;
    color: var(--texto-suave);
    font-weight: 800;
}

.tactical-view-stage {
    display: grid;
    place-items: center;
    min-height: min(720px, calc(100dvh - 220px));
}

.tactical-view-field {
    height: min(720px, calc(100dvh - 220px));
    min-height: 520px;
    touch-action: pan-y;
}

.tactical-view-field .tactical-player,
.tactical-view-field .tactical-ball,
.tactical-view-field .tactical-asset {
    pointer-events: none;
}

.tactical-drawing-image {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.tactical-view-away-player {
    background: linear-gradient(180deg, #111827, #020617);
}

.tactical-view-ball {
    z-index: 7;
}

.tactical-player.is-animated {
    animation: tacticalPulse 0.75s ease-in-out 2;
}

@keyframes tacticalPulse {
    50% { transform: translate(-50%, -50%) scale(1.18); }
}

@media (max-width: 640px) {
    .tactical-stage {
        padding: 0.45rem;
        grid-template-columns: 1fr;
        align-content: start;
        overflow-y: auto;
    }

    .tactical-field {
        width: 100%;
        border-radius: 16px;
        min-height: 0;
        height: min(52dvh, 420px);
    }

    .tactical-screen.is-editing-activity .tactical-field {
        width: 100%;
        height: calc(100dvh - 160px);
        max-height: calc(100dvh - 160px);
    }

    .tactical-screen.is-editing-activity .tactical-field.is-half {
        height: min(54dvh, 430px);
    }

    .tactical-reserves {
        top: calc(max(0.7rem, env(safe-area-inset-top)) + 58px);
    }

    .tactical-reserves-list {
        max-height: 196px;
    }

    .tactical-activities-panel {
        width: 100%;
        max-height: none;
        min-height: 260px;
    }

    .tactical-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        padding-inline: 0.5rem;
    }

    .tactical-toolbar button,
    .tactical-toolbar select {
        min-height: 44px;
        padding: 0 0.42rem;
        font-size: 0.74rem;
    }

    .tactical-toolbar select {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tactical-toolbar .tactical-clear-btn,
    .tactical-toolbar .tactical-animate-btn {
        padding: 0 0.55rem;
        gap: 0.25rem;
    }

    .tactical-actions-group {
        gap: 0.3rem;
    }

    .tactical-history-actions button {
        width: 34px;
        min-width: 34px;
    }

    .tactical-agenda-row {
        align-items: stretch;
        flex-direction: column;
        gap: 0.55rem;
    }

    .tactical-view-stage {
        min-height: calc(100dvh - 190px);
    }

    .tactical-view-field {
        min-height: 0;
        height: calc(100dvh - 190px);
    }
}

.agenda-contagem {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.15rem;
}

.agenda-contagem span,
.agenda-confirmados-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 800;
}

.agenda-confirmados-trigger {
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--verde) 30%, transparent);
    background: color-mix(in srgb, var(--verde) 10%, var(--home-match-surface));
    color: color-mix(in srgb, var(--verde) 84%, white);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.agenda-confirmados-trigger:hover {
    border-color: color-mix(in srgb, var(--verde) 55%, transparent);
    background: color-mix(in srgb, var(--verde) 16%, var(--home-match-surface));
    transform: translateY(-1px);
}

.agenda-confirmados-trigger:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

.agenda-contagem svg,
.agenda-confirmados-trigger svg {
    width: 14px;
    height: 14px;
}

.agenda-contagem .agenda-confirmados-trigger svg,
.agenda-confirmados-trigger svg {
    color: var(--verde);
}

.agenda-contagem span:last-child svg {
    color: var(--vermelho);
}

body.agenda-confirmados-open {
    overflow: hidden;
}

.agenda-confirmados-panel {
    position: fixed;
    z-index: 1250;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.agenda-confirmados-panel[hidden] {
    display: none;
}

.agenda-confirmados-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(2, 6, 23, 0.74);
    backdrop-filter: blur(5px);
    cursor: default;
}

.agenda-confirmados-sheet {
    position: relative;
    width: min(480px, 100%);
    max-height: min(680px, calc(100dvh - 2rem));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--roxo) 30%, var(--home-match-border));
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--verde) 12%, transparent), transparent 34%),
        var(--home-match-surface);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.agenda-confirmados-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.15rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--home-match-border) 70%, transparent);
}

.agenda-confirmados-head span {
    color: var(--verde);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agenda-confirmados-head h2,
.agenda-confirmados-head p {
    margin: 0;
}

.agenda-confirmados-head h2 {
    margin-top: 0.25rem;
    color: var(--texto);
    font-size: 1.25rem;
}

.agenda-confirmados-head p {
    margin-top: 0.2rem;
    color: var(--texto-suave);
    font-size: 0.8rem;
    font-weight: 700;
}

.agenda-confirmados-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--home-match-border);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--texto);
    cursor: pointer;
}

.agenda-confirmados-close svg {
    width: 18px;
    height: 18px;
}

.agenda-confirmados-resumo {
    padding: 0.8rem 1.15rem 0;
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.agenda-confirmados-lista {
    min-height: 120px;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding: 0.8rem 1.15rem 1.15rem;
}

.agenda-confirmado-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--verde) 20%, var(--home-match-border));
    border-radius: 17px;
    background: color-mix(in srgb, var(--verde) 7%, transparent);
}

.agenda-confirmado-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--verde) 16%, transparent);
    color: var(--verde);
}

.agenda-confirmado-avatar svg {
    width: 19px;
    height: 19px;
}

.agenda-confirmado-item > span:last-child {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.agenda-confirmado-item strong {
    overflow: hidden;
    color: var(--texto);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-confirmado-item small {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
}

.agenda-confirmado-item.sem-jogador {
    border-color: color-mix(in srgb, #c4963c 34%, var(--home-match-border));
    background: color-mix(in srgb, #c4963c 8%, transparent);
}

.agenda-confirmado-item.sem-jogador .agenda-confirmado-avatar {
    background: color-mix(in srgb, #c4963c 16%, transparent);
    color: #c4963c;
}

.agenda-confirmados-vazio {
    align-self: center;
    margin: 1.5rem 0;
    color: var(--texto-suave);
    text-align: center;
}

.agenda-linha-acoes {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 0.5rem;
    min-width: 220px;
}

.agenda-linha-acoes .agenda-resposta-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.agenda-linha-acoes form:not(.agenda-resposta-form),
.agenda-linha-acoes .btn {
    width: 100%;
}

/* CORES POR TIPO */

.tipo-treino::before {
    background: var(--verde);
    box-shadow: 0 0 0 6px rgba(42, 163, 108, 0.12);
}

.agenda-evento-card.tipo-treino::before {
    background: var(--verde);
}

.tipo-treino .agenda-evento-icon,
.tipo-treino .agenda-data {
    border-color: rgba(42, 163, 108, 0.24);
    background: rgba(42, 163, 108, 0.08);
    color: var(--verde);
}

.tipo-treino .agenda-evento-top span,
.tipo-treino .agenda-linha-head span {
    color: var(--verde);
}

.tipo-jogo::before {
    background: var(--ouro);
    box-shadow: 0 0 0 6px rgba(200, 151, 59, 0.12);
}

.agenda-evento-card.tipo-jogo::before {
    background: var(--ouro);
}

.tipo-jogo .agenda-evento-icon,
.tipo-jogo .agenda-data {
    border-color: rgba(200, 151, 59, 0.26);
    background: rgba(200, 151, 59, 0.08);
    color: var(--ouro);
}

.tipo-jogo .agenda-evento-top span,
.tipo-jogo .agenda-linha-head span {
    color: var(--ouro);
}

.tipo-reuniao::before {
    background: var(--azul);
    box-shadow: 0 0 0 6px rgba(78, 123, 212, 0.12);
}

.agenda-evento-card.tipo-reuniao::before {
    background: var(--azul);
}

.tipo-reuniao .agenda-evento-icon,
.tipo-reuniao .agenda-data {
    border-color: rgba(78, 123, 212, 0.26);
    background: rgba(78, 123, 212, 0.08);
    color: var(--azul);
}

.tipo-reuniao .agenda-evento-top span,
.tipo-reuniao .agenda-linha-head span {
    color: var(--azul);
}

.tipo-aviso::before {
    background: var(--vermelho);
    box-shadow: 0 0 0 6px rgba(201, 82, 79, 0.12);
}

.agenda-evento-card.tipo-aviso::before {
    background: var(--vermelho);
}

.tipo-aviso .agenda-evento-icon,
.tipo-aviso .agenda-data {
    border-color: rgba(201, 82, 79, 0.26);
    background: rgba(201, 82, 79, 0.08);
    color: var(--vermelho);
}

.tipo-aviso .agenda-evento-top span,
.tipo-aviso .agenda-linha-head span {
    color: var(--vermelho);
}

/* TOGGLE EVENTO */

.agenda-linha {
    display: grid;
    grid-template-columns: 1fr;
}

.agenda-linha-head-toggle {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto auto;
    gap: 0.9rem;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.agenda-linha-head-toggle:hover {
    opacity: 0.9;
}

.agenda-linha-head-toggle .agenda-data {
    min-height: auto;
}

.agenda-linha-head-toggle .agenda-linha-head-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.agenda-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--texto-suave);
    transition: transform 0.25s ease;
}

.agenda-linha.is-open .agenda-chevron {
    transform: rotate(180deg);
}

.agenda-linha-corpo,
.agenda-linha-acoes {
    display: none;
}

.agenda-linha.is-open .agenda-linha-corpo,
.agenda-linha.is-open .agenda-linha-acoes {
    display: block;
}

.agenda-linha.is-open .agenda-linha-corpo {
    grid-column: 1 / -1;
    padding: 0.85rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(110, 91, 224, 0.16);
    margin-top: 0.45rem;
}

.agenda-linha.is-open .agenda-linha-acoes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    grid-column: 1 / -1;
    padding: 0.85rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(110, 91, 224, 0.16);
}

/* ESTADOS VAZIOS */

.agenda-proximos .home-empty-state,
.agenda-meses .jogos-vazio {
    border: 1px solid rgba(110, 91, 224, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
}

.agenda-meses .jogos-vazio p {
    color: var(--texto-suave);
    text-align: center;
}

/* RESPONSIVO */

@media (max-width: 900px) {
    .agenda-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agenda-form-title {
        grid-column: 1 / -1;
    }

    .agenda-proximos-grid {
        grid-template-columns: 1fr;
    }

    .agenda-linha {
        grid-template-columns: 1fr;
    }

    .agenda-linha-head-toggle {
        grid-template-columns: 70px minmax(0, 1fr) auto auto;
    }

    .agenda-linha.is-open .agenda-linha-acoes {
        min-width: auto;
        padding-left: 80px;
    }
}

@media (max-width: 640px) {
    .agenda-header {
        padding: 1rem;
        border-radius: 22px;
    }

    .agenda-form-card {
        padding: 1rem;
        border-radius: 22px;
    }

    .agenda-form-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .agenda-form .btn {
        width: 100%;
    }

    .agenda-form-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .agenda-evento-card {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 22px;
    }

    .agenda-evento-icon {
        width: 42px;
        height: 42px;
    }

    .agenda-evento-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .agenda-evento-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .agenda-resposta-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .agenda-resposta-form .btn {
        width: 100%;
    }

    .agenda-resposta-form .btn:only-of-type {
        grid-column: 1 / -1;
    }

    .agenda-timeline::before {
        left: 25px;
    }

    .agenda-linha {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.9rem;
    }

    .agenda-linha-head-toggle {
        grid-template-columns: 54px minmax(0, 1fr) 24px;
        column-gap: 0.65rem;
        row-gap: 0.5rem;
    }

    .agenda-linha-head-toggle .agenda-data {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: stretch;
    }

    .agenda-linha-head-toggle .agenda-linha-head-info {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .agenda-linha-head-toggle > .agenda-status {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .agenda-linha-head-toggle > .agenda-chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .agenda-linha::before {
        display: none;
    }

    .agenda-data {
        display: flex;
        justify-content: space-between;
        min-height: auto;
        padding: 0.65rem 0.75rem;
    }

    .agenda-data strong {
        font-size: 1.45rem;
    }

    .agenda-linha-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .agenda-linha.is-open .agenda-linha-acoes {
        padding-left: 0;
        padding-right: 0;
    }

    .agenda-linha-acoes .agenda-status {
        width: 100%;
    }

    .agenda-confirmados-panel {
        place-items: end center;
        padding: 0;
    }

    .agenda-confirmados-sheet {
        width: 100%;
        max-height: min(78dvh, 680px);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 24px 24px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    .bottom-nav {
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
        max-width: 800px;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    }

    .container {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }
}

/* ===========================
   REFINO MOBILE (alvos de toque e legibilidade)
   Normalizacoes finais aplicadas por cima dos breakpoints existentes,
   sem alterar o layout em telas maiores.
=========================== */
@media (max-width: 640px) {
    /* iOS aplica zoom automatico ao focar campo com font-size < 16px;
       forcar 16px aqui evita esse "pulo" ao abrir o teclado. */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px;
        min-height: 44px;
    }

    .form-group textarea {
        min-height: 110px;
    }

    /* Alvo minimo de toque recomendado (44x44px) para botoes de acao. */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }
}

/* Ajuste final: card principal da Home 20% menor. */
.home-match-card {
    border-radius: 21px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22);
}

.home-match-card,
.home-match-card .home-match-content {
    min-height: auto;
}

.home-match-bg::after {
    height: 128px;
}

.home-match-content {
    gap: 0.8rem;
    padding: 0.8rem;
}

.home-match-topline,
.home-match-actions {
    gap: 0.64rem;
}

.home-match-type {
    gap: 0.3rem;
    padding: 0.3rem 0.48rem;
    font-size: 0.6rem;
}

.home-match-type svg {
    width: 12px;
    height: 12px;
}

.home-scoreboard {
    gap: 0.6rem;
    padding: 0.36rem 0;
}

.home-team-side {
    gap: 0.4rem;
}

.home-team-side strong {
    font-size: 0.69rem;
}

.home-shield {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.home-opponent-logo-button {
    border-radius: 18px;
}

.home-shield img {
    width: 45px;
    height: 45px;
}

.home-shield-initials {
    font-size: 1.2rem;
}

.home-versus {
    gap: 0.14rem;
    min-width: 46px;
}

.home-versus b {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 0.84rem;
}

/* Jogo contra outro clube: relacionados e escalação */
body.sorteio-modo-contra-clube #painelConfirmarJogadores .convidados-panel,
body.sorteio-modo-contra-clube #painelConfirmarJogadores .travas-panel,
body.sorteio-modo-contra-clube #painelConfirmarJogadores .btn-sortear-topo,
body.sorteio-modo-contra-clube #painelConfirmarJogadores .btn-draft-topo,
body.sorteio-modo-contra-clube #painelConfirmarJogadores #btnSortearLista,
body.sorteio-modo-contra-clube #painelConfirmarJogadores #btnDraftLista {
    display: none !important;
}

#escalacaoExternaGlobal > .escalacao-externa-etapa {
    margin: 0;
}

.contra-clube-novo-fluxo {
    display: grid;
    gap: 18px;
}

.contra-clube-etapa[hidden] { display: none !important; }

.contra-clube-etapa {
    padding: 18px;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.contra-clube-etapa-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.contra-clube-etapa-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.contra-clube-etapa-head strong { color: var(--texto); }
.contra-clube-etapa-head small { color: var(--texto-suave); }

.contra-clube-acoes-linha,
.escalacao-campo-toolbar,
.escalacao-reservas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.escalacao-reserva-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 9px;
    background: rgba(9, 6, 22, .58);
    color: var(--texto);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.escalacao-reserva-card:hover { transform: translateY(-2px); border-color: rgba(70, 135, 185, .62); }
.escalacao-jogador-carta { display: block; width: 72px; pointer-events: none; }
.escalacao-jogador-carta.is-compact { width: 58px; }
.escalacao-jogador-carta .player-mini-card { width: 100%; }
.escalacao-jogador-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.escalacao-jogador-avatar { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: var(--roxo); color: #fff; font-weight: 900; }
.contra-clube-acoes-linha { justify-content: flex-start; flex-wrap: wrap; margin-top: 14px; }
.contra-clube-acoes-linha > span { color: var(--texto-suave); font-size: 13px; }

.escalacao-externa-layout { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 14px; }
.escalacao-reservas { position: relative; min-width: 0; padding: 12px; border: 1px solid var(--borda); border-radius: 16px; background: rgba(9, 6, 22, .52); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.escalacao-reservas.is-drop-ready { border-style: dashed; border-color: rgba(70, 160, 105, .72); background: rgba(40, 140, 85, .09); }
.escalacao-reservas.is-drag-over { border-style: solid; border-color: #4ade80; background: rgba(40, 140, 85, .18); box-shadow: 0 0 0 3px rgba(70, 160, 105, .14), 0 0 24px rgba(40, 140, 85, .16); }
.escalacao-reservas.is-drop-ready::after { content: 'Solte aqui para os reservas'; position: absolute; z-index: 10; inset: 48px 10px 10px; display: grid; place-items: center; border-radius: 12px; background: rgba(3, 18, 13, .88); color: #86efac; font-size: 12px; font-weight: 900; text-align: center; pointer-events: none; }
.escalacao-reservas-head { margin-bottom: 10px; }
.escalacao-reservas-head span { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: rgba(110, 91, 224, .18); color: #a79bf0; text-align: center; font-weight: 800; }
.escalacao-reservas-lista { display: grid; gap: 8px; max-height: 640px; overflow-y: auto; }
.escalacao-reserva-card { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; }
.escalacao-reserva-card .escalacao-jogador-nome { width: 100%; }
.escalacao-reserva-card > svg { width: 17px; color: #38bdf8; }
.escalacao-lista-vazia { padding: 18px 8px; color: var(--texto-suave); text-align: center; font-size: 13px; }
.escalacao-campo-wrap { min-width: 0; }
.escalacao-campo-toolbar { margin-bottom: 9px; }

.escalacao-campo {
    position: relative;
    width: min(100%, 680px);
    min-height: 660px;
    margin-inline: auto;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .42);
    border-radius: 24px;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 72px, rgba(0,0,0,.045) 72px 144px),
        linear-gradient(145deg, #137347, #075b36);
    box-shadow: inset 0 0 70px rgba(0, 0, 0, .25);
}

.escalacao-campo::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px solid rgba(255,255,255,.45);
    border-radius: 14px;
    pointer-events: none;
}

.escalacao-campo-meio { position: absolute; left: 12px; right: 12px; top: 50%; border-top: 2px solid rgba(255,255,255,.42); }
.escalacao-campo-circulo { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; border: 2px solid rgba(255,255,255,.42); border-radius: 50%; transform: translate(-50%, -50%); }
.escalacao-campo-area { position: absolute; left: 50%; width: 47%; height: 17%; border: 2px solid rgba(255,255,255,.42); transform: translateX(-50%); }
.escalacao-campo-area-topo { top: 12px; border-top: 0; }
.escalacao-campo-area-base { bottom: 12px; border-bottom: 0; }
.escalacao-campo-jogadores { position: absolute; inset: 0; }

.escalacao-titular-card {
    position: absolute;
    left: var(--escalacao-x);
    top: var(--escalacao-y);
    z-index: 3;
    display: grid;
    width: 72px;
    justify-items: center;
    gap: 3px;
    transform: translate(-50%, -50%);
    color: #fff;
    cursor: grab;
    touch-action: none;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.42));
}

.escalacao-titular-card:active { cursor: grabbing; }
.escalacao-titular-card.is-dragging { z-index: 20; cursor: grabbing; filter: drop-shadow(0 14px 20px rgba(0,0,0,.56)); }
.escalacao-externa-etapa.is-disabled .escalacao-externa-layout,
.escalacao-externa-etapa.is-disabled .escalacao-externa-acoes { opacity: .52; }

@media (max-width: 760px) {
    .contra-clube-etapa { padding: 14px; }
    .escalacao-externa-layout { grid-template-columns: 1fr; }
    .escalacao-reservas { order: 2; }
    .escalacao-reservas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 360px; }
    .escalacao-campo { min-height: 560px; }
    .escalacao-titular-card { width: 62px; }
    .escalacao-jogador-carta { width: 62px; }
    .escalacao-jogador-carta.is-compact { width: 48px; }
    .escalacao-externa-acoes .btn { flex: 1 1 100%; }
}

.home-lineup-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 11px 13px;
    border: 1px solid rgba(70, 135, 185, .22);
    border-radius: 15px;
    background: rgba(9, 6, 22, .6);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.home-lineup-scoreboard:hover,
.home-lineup-scoreboard:focus-visible {
    border-color: rgba(70, 160, 105, .62);
    background: rgba(40, 140, 85, .08);
    box-shadow: 0 0 0 3px rgba(70, 160, 105, .1);
    transform: translateY(-1px);
    outline: none;
}

.home-lineup-match-time {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid rgba(70, 160, 105, .24);
    border-radius: 999px;
    background: rgba(40, 140, 85, .08);
    color: #86efac;
    line-height: 1;
}
.home-lineup-match-time[hidden] { display: none; }
.home-lineup-match-time svg { width: 13px; height: 13px; }
.home-lineup-scoreboard .home-lineup-match-time b { color: #86efac; font-size: 12px; font-variant-numeric: tabular-nums; }

.home-lineup-scoreboard > div { display: flex; align-items: center; justify-content: flex-end; gap: 9px; min-width: 0; }
.home-lineup-scoreboard > .home-lineup-side-away { justify-content: flex-start; }
.home-lineup-scoreboard span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); font-size: 13px; font-weight: 750; }
.home-lineup-scoreboard strong { font-size: 1.65rem; color: #fff; }
.home-lineup-scoreboard b { color: var(--texto-suave); }
.home-lineup-scoreboard > small { grid-column: 1 / -1; color: var(--texto-suave); text-align: center; font-size: 11px; }
.home-lineup-pitch { margin-top: 0; }
.home-lineup-pitch .home-winner-player-stats {
    left: 2px;
    gap: 0.16rem;
    transform: translate(-45%, -50%);
}
.home-lineup-pitch .home-winner-player-stats span {
    font-size: 0.7rem;
}
.home-lineup-pitch .home-winner-pitch-slot::before { display: none; }

.home-lineup-bench {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 7px;
    margin-top: 10px;
    overflow: hidden;
}

.home-lineup-bench > strong { color: var(--texto-suave); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.home-lineup-bench-list {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 7px;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}
.home-lineup-bench span { flex: 0 0 auto; scroll-snap-align: start; padding: 5px 9px; border: 1px solid var(--borda); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--texto); font-size: 11px; white-space: nowrap; }

.home-lineup-awaiting {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 28px;
    text-align: center;
}

.home-lineup-awaiting > svg { width: 52px; height: 52px; color: #38bdf8; }
.home-lineup-awaiting strong { color: var(--texto); font-size: 1.05rem; }
.home-lineup-awaiting span { max-width: 340px; color: var(--texto-suave); font-size: 13px; line-height: 1.5; }

.home-related-players { display: grid; gap: 6px; margin-top: 10px; }
.home-related-players > strong { color: var(--texto-suave); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.home-related-players > div { display: flex; flex-wrap: wrap; gap: 5px; }
.home-related-players span { padding: 4px 8px; border: 1px solid var(--borda); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--texto); font-size: 10px; }
.home-lineup-related { width: min(100%, 430px); margin-top: 4px; text-align: left; }
.home-lineup-related > div { max-height: 128px; justify-content: center; overflow-y: auto; padding: 2px 2px 5px; scrollbar-width: thin; }
.home-lineup-related span { background: rgba(70, 135, 185, .07); border-color: rgba(70, 135, 185, .2); }

.home-versus.home-versus-result {
    min-width: 74px;
}

.home-versus-result b {
    width: auto;
    min-width: 64px;
    padding: 0 0.45rem;
    white-space: nowrap;
}

.home-versus span,
.home-versus small {
    font-size: 0.58rem;
}

.home-match-info h2 {
    font-size: 1.4rem;
}

.home-match-meta {
    gap: 0.44rem;
    grid-template-columns: repeat(auto-fit, minmax(104px, max-content));
    margin-top: 0.6rem;
}

.home-match-meta span {
    gap: 0.36rem;
    padding: 0.34rem 0.54rem;
    border-radius: 11px;
    font-size: 0.69rem;
}

.home-match-meta svg {
    width: 13px;
    height: 13px;
}

.home-match-card .home-avaliacao-pendente {
    gap: 0.36rem;
    max-width: 336px;
    padding: 0.58rem;
    font-size: 0.8rem;
}

.home-match-card .home-avaliacao-pendente strong {
    font-size: 0.8rem;
}

.home-match-card .home-avaliacao-progress {
    height: 7px;
}

.home-match-card .btn {
    min-height: 35px;
    padding: 0.48rem 0.88rem;
    font-size: 0.8rem;
}

@media (max-width: 640px) {
    .home-match-content {
        gap: 0.72rem;
        padding: 0.72rem;
    }

    .home-scoreboard {
        gap: 0.36rem;
    }

    .home-shield {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .home-shield img {
        width: 38px;
        height: 38px;
    }

    .home-versus {
        min-width: 42px;
    }

    .home-versus b {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 0.76rem;
    }

    .home-versus.home-versus-result {
        min-width: 68px;
    }

    .home-versus-result b {
        width: auto;
        min-width: 58px;
        padding: 0 0.35rem;
    }

    .home-match-info h2 {
        font-size: 1.08rem;
    }

    .home-match-card .btn {
        min-height: 35px;
    }
}

@media (max-width: 420px) {
    .estatisticas-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .estatisticas-player-head {
        grid-template-columns: minmax(0, 1fr) auto 30px;
        gap: 0.55rem;
    }

    .estatisticas-player-main {
        grid-column: 1;
        grid-row: 1;
    }

    .estatisticas-ranking-card {
        grid-column: 2;
        grid-row: 1;
        min-width: 66px;
    }

    .estatisticas-detail-toggle {
        grid-column: 3;
        grid-row: 1;
    }

    .estatisticas-aproveitamento {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-auto-flow: column;
        justify-content: space-between;
        justify-items: start;
        width: 100%;
    }
}

/* Painel do Desenvolvedor */
body:has(.dev-shell) .container {
    width: 100%;
    max-width: 1560px;
    padding-top: 1rem;
    padding-right: clamp(1rem, 2vw, 1.75rem);
    padding-bottom: 2rem;
    padding-left: clamp(1rem, 2vw, 1.75rem);
}

.loja-card-package-only {
    display: grid;
    justify-items: start;
    gap: 0.18rem;
    width: 100%;
    flex: 0 0 auto;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(190, 135, 45, 0.28);
    border-radius: 10px;
    background: rgba(190, 135, 45, 0.07);
    text-align: left;
}

.loja-card-package-only strong {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #f59e0b;
    font-size: 0.78rem;
    line-height: 1.2;
}

.loja-card-package-only strong svg {
    width: 16px;
    height: 16px;
}

.loja-card-package-only small {
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
}

.loja-card-package-exclusive {
    border-color: rgba(190, 135, 45, 0.34);
}

.loja-card-package-exclusive .loja-card-info {
    align-items: stretch;
    flex-direction: column;
}

.dev-shell {
    display: grid;
    gap: 1.1rem;
    padding-bottom: 2rem;
}

.dev-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--borda);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 10%, rgba(42, 163, 108, 0.16), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--fundo-card) 94%, var(--verde) 6%), var(--fundo-card));
    box-shadow: var(--sombra);
}

.dev-heading {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.dev-heading-icon {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border: 1px solid color-mix(in srgb, var(--verde) 38%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--verde) 14%, transparent);
    color: var(--verde);
}

.dev-heading-icon svg {
    width: 23px;
    height: 23px;
}

.dev-topbar h1 {
    margin: 0;
    font-size: 1.55rem;
}

.dev-heading .page-eyebrow {
    margin-bottom: 0.25rem;
}

.dev-heading p {
    margin: 0.28rem 0 0;
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.dev-topbar-actions,
.dev-tabs,
.dev-search,
.dev-toggle,
.dev-row,
.dev-color-grid label {
    display: flex;
    align-items: center;
}

.dev-topbar-actions {
    gap: 0.6rem;
    flex: 0 0 auto;
}

.dev-tabs {
    position: sticky;
    top: 0.5rem;
    z-index: 20;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.4rem;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: color-mix(in srgb, var(--fundo-card) 94%, transparent);
    box-shadow: var(--sombra);
    backdrop-filter: blur(14px);
    scrollbar-width: none;
}

.dev-tabs::-webkit-scrollbar {
    display: none;
}

.dev-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 1 0 auto;
    min-height: 44px;
    padding: 0.62rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-suave);
    font-weight: 800;
    text-decoration: none;
    scroll-snap-align: center;
}

.dev-tabs a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-tabs a svg {
    width: 17px;
    height: 17px;
}

.dev-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 0.35rem;
    border-radius: 999px;
    background: var(--vermelho);
    color: #fff;
    font-size: 0.68rem;
    line-height: 1;
}

.dev-tabs a.ativo,
.dev-tabs a:hover {
    border-color: rgba(42, 163, 108, 0.48);
    color: var(--texto);
    background: rgba(42, 163, 108, 0.12);
}

.dev-grid {
    display: grid;
    grid-template-columns: minmax(400px, 0.8fr) minmax(520px, 1.2fr);
    gap: 1.1rem;
    align-items: start;
}

.dev-panel {
    min-width: 0;
    border-radius: 16px;
}

.dev-panel .card-header {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent);
}

.dev-panel .card-header p {
    margin: 0.3rem 0 0;
    color: var(--texto-suave);
    font-size: 0.82rem;
}

.dev-user-editor {
    padding: 0;
    overflow: hidden;
}

.dev-user-editor-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 72px;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
}

.dev-user-editor-summary::-webkit-details-marker {
    display: none;
}

.dev-user-editor-summary > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    flex: 1 1 auto;
}

.dev-user-editor-summary strong {
    color: var(--texto);
    font-size: 0.95rem;
}

.dev-user-editor-summary small {
    overflow: hidden;
    color: var(--texto-suave);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-user-editor-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--verde) 14%, transparent);
    color: var(--verde);
}

.dev-user-editor-icon svg,
.dev-user-editor-chevron {
    width: 19px;
    height: 19px;
}

.dev-user-editor-chevron {
    flex: 0 0 auto;
    color: var(--texto-suave);
    transition: transform 0.18s ease;
}

.dev-user-editor[open] .dev-user-editor-chevron {
    transform: rotate(180deg);
}

.dev-user-editor[open] .dev-user-editor-summary {
    border-bottom: 1px solid var(--borda);
}

.dev-user-editor-body {
    padding: 1.1rem;
}

.dev-user-club-field {
    grid-column: 1 / -1;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--verde) 28%, var(--borda));
    border-radius: 12px;
    background: color-mix(in srgb, var(--verde) 7%, transparent);
}

.dev-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.dev-shell select,
.dev-shell textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.58rem 0.78rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background-color: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.25;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dev-shell textarea {
    min-height: 110px;
    resize: vertical;
}

.dev-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"])::placeholder,
.dev-shell textarea::placeholder {
    color: color-mix(in srgb, var(--texto-suave) 72%, transparent);
}

.dev-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
.dev-shell select:focus,
.dev-shell textarea:focus {
    outline: none;
    border-color: var(--roxo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 22%, transparent);
}

.dev-shell input:disabled,
.dev-shell select:disabled,
.dev-shell textarea:disabled {
    border-color: color-mix(in srgb, var(--borda) 72%, transparent);
    background-color: color-mix(in srgb, var(--fundo-input) 78%, #000 22%);
    color: var(--texto-suave);
    cursor: not-allowed;
    opacity: 1;
}

.dev-shell select option {
    background-color: var(--fundo-input);
    color: var(--texto);
}

.dev-shell input:-webkit-autofill,
.dev-shell input:-webkit-autofill:hover,
.dev-shell input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--texto);
    box-shadow: 0 0 0 1000px var(--fundo-input) inset;
    caret-color: var(--texto);
}

.dev-search {
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.dev-search input,
.dev-search select {
    min-width: 0;
}

.dev-search-submit {
    min-height: 46px;
}

.dev-list {
    display: grid;
    gap: 0.65rem;
}

.dev-empty-state {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--borda-forte);
    border-radius: 12px;
    color: var(--texto-suave);
    text-align: center;
}

.dev-empty-state svg {
    width: 28px;
    height: 28px;
    margin-bottom: 0.25rem;
    color: var(--verde);
}

.dev-empty-state strong {
    color: var(--texto);
    font-size: 0.9rem;
}

.dev-empty-state span {
    max-width: 320px;
    font-size: 0.78rem;
    line-height: 1.45;
}

.dev-row {
    gap: 0.7rem;
    min-width: 0;
    padding: 0.78rem;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fundo-input) 56%, transparent);
}

.dev-row-summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 200px;
    flex: 1 1 260px;
}

.dev-row-summary > div {
    min-width: 0;
    flex: 1 1 auto;
}

.dev-row-summary > img,
.dev-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--fundo-input);
}

.dev-avatar {
    display: inline-grid;
    place-items: center;
    color: var(--verde);
    font-weight: 900;
}

.dev-avatar svg {
    width: 18px;
    height: 18px;
}

.dev-row-meta,
.dev-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.dev-row-meta {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dev-row-actions .form-inline {
    width: auto;
}

.dev-row-actions .btn-acao {
    width: 36px;
    height: 36px;
}

.dev-request-accept {
    gap: 0.35rem;
    white-space: nowrap;
}

.dev-request-accept svg {
    width: 16px;
    height: 16px;
}

.dev-link-club-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 280px;
    flex: 1 1 320px;
}

.dev-link-club-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dev-link-club-form select {
    min-width: 170px;
    min-height: 38px;
    padding-block: 0.4rem;
}

.dev-link-club-form .btn {
    min-height: 38px;
    white-space: nowrap;
}

.dev-row .dev-link-club-form .btn span {
    display: inline;
    overflow: visible;
    color: inherit;
    white-space: nowrap;
}

.dev-link-club-form .btn svg {
    width: 15px;
    height: 15px;
}

.dev-link-club-hint {
    color: var(--vermelho);
}

.dev-row strong,
.dev-row span,
.dev-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-row span,
.dev-row small {
    color: var(--texto-suave);
    font-size: 0.78rem;
}

.dev-row .dev-row-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.15rem;
    color: var(--verde);
    font-size: 0.78rem;
    line-height: 1.35;
    text-decoration: none;
}

.dev-row .dev-row-contact:hover {
    color: var(--texto);
}

.dev-row .dev-row-contact svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

.dev-row .dev-row-contact span {
    color: inherit;
}

.dev-row .dev-row-contact.is-empty {
    color: var(--vermelho);
}

.dev-row .dev-avatar {
    display: inline-grid;
    place-items: center;
    margin-top: 0;
    overflow: visible;
    white-space: nowrap;
}

.dev-row .badge-alerta {
    border-color: rgba(201, 82, 79, 0.42);
    background: rgba(201, 82, 79, 0.12);
    color: var(--vermelho);
}

.dev-toggle {
    gap: 0.5rem;
    margin: 0.35rem 0 0.85rem;
    color: var(--texto);
    font-weight: 800;
}

.dev-toggle-inline {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

.dev-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.dev-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0.85rem 0;
}

.dev-color-grid label {
    align-items: stretch;
    gap: 0.45rem;
    flex-direction: column;
    min-width: 0;
}

.dev-color-grid label > span {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.dev-color-grid input[type="color"] {
    width: 100%;
    min-height: 36px;
    padding: 0.18rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-input);
}

.dev-current-image {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.55rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 800;
}

.dev-current-image img {
    width: 34px;
    height: 46px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--fundo-input);
}

.dev-color-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
    gap: 0.3rem;
    padding: 0.38rem;
    border: 1px solid color-mix(in srgb, var(--borda) 78%, transparent);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-color-swatch {
    aspect-ratio: 1;
    min-width: 0;
    min-height: 22px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%),
        var(--swatch-color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dev-color-swatch:hover,
.dev-color-swatch:focus-visible {
    border-color: var(--texto);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch-color) 50%, transparent);
    transform: translateY(-1px);
}

.dev-color-swatch-empty {
    position: relative;
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), rgba(201, 82, 79, 0.95) calc(50% - 1px), rgba(201, 82, 79, 0.95) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.12) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.12) 75%),
        var(--fundo-input);
    background-position: 0 0, 0 0, 6px 6px, 0 0;
    background-size: auto, 12px 12px, 12px 12px, auto;
}

.dev-text-style-section,
.dev-font-style-section,
.dev-club-shadow-section {
    margin: 0.9rem 0;
    padding: 0.85rem;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fundo-input) 42%, transparent);
}

.dev-style-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.dev-style-section-heading h3 {
    margin: 0;
    color: var(--texto);
    font-size: 0.92rem;
}

.dev-style-section-heading p {
    margin: 0.18rem 0 0;
    color: var(--texto-suave);
    font-size: 0.76rem;
    line-height: 1.4;
}

.dev-text-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.dev-text-style-card {
    min-width: 0;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--borda-forte) 72%, transparent);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-text-style-card legend {
    padding: 0 0.35rem;
    color: var(--texto);
    font-size: 0.82rem;
    font-weight: 900;
}

.dev-text-style-card label,
.dev-font-style-grid label {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.dev-text-style-card label > span,
.dev-font-style-grid label > span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
}

.dev-solid-color-control,
.dev-gradient-controls {
    margin-top: 0.55rem;
}

.dev-color-input-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.45rem;
}

.dev-color-input-row input[type="color"],
.dev-gradient-colors input[type="color"] {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0.16rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-input);
    cursor: pointer;
}

.dev-gradient-colors {
    display: grid;
    grid-template-columns: 54px 54px minmax(0, 1fr);
    gap: 0.45rem;
    align-items: end;
}

.dev-gradient-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.dev-gradient-presets button {
    min-width: 0;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 7px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dev-gradient-presets button:hover,
.dev-gradient-presets button:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--roxo) 45%, transparent);
    transform: translateY(-1px);
}

.dev-font-style-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.dev-club-shadow-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 0.7rem;
}

.dev-club-shadow-controls label {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.dev-club-shadow-controls label > span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
}

.dev-club-shadow-controls input[type="color"] {
    width: 100%;
    min-height: 40px;
    padding: 0.16rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-input);
    cursor: pointer;
}

.dev-color-grid-secondary {
    margin-top: 0.9rem;
}

.dev-card-band-config {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.8rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-mini-card-config {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--verde) 38%, var(--borda));
    border-radius: 8px;
    background: color-mix(in srgb, var(--verde) 6%, rgba(255, 255, 255, 0.035));
}

.dev-mini-card-controls {
    display: grid;
    grid-template-columns: minmax(110px, 0.55fr) minmax(150px, 1fr);
    gap: 0.7rem;
    transition: opacity 0.16s ease;
}

.dev-mini-card-config.is-disabled .dev-mini-card-controls {
    opacity: 0.48;
}

.dev-mini-card-controls label {
    display: grid;
    gap: 0.35rem;
}

.dev-mini-card-controls label > span {
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 700;
}

.dev-mini-card-controls input[type="color"] {
    width: 100%;
    min-height: 40px;
    padding: 0.16rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-input);
    cursor: pointer;
}

.dev-card-band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.dev-card-band-head > div {
    display: grid;
    gap: 0.18rem;
}

.dev-card-band-head strong {
    color: var(--texto);
    font-size: 0.86rem;
}

.dev-card-band-head small,
.dev-card-band-controls label > span {
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 700;
}

.dev-card-band-toggle {
    margin: 0;
}

.dev-card-band-controls {
    display: grid;
    grid-template-columns: minmax(90px, 0.4fr) minmax(180px, 1fr);
    gap: 0.7rem;
    transition: opacity 0.16s ease;
}

.dev-card-band-config.is-disabled .dev-card-band-controls {
    opacity: 0.48;
}

.dev-card-band-controls label {
    display: grid;
    gap: 0.35rem;
}

.dev-card-band-mode,
.dev-card-band-tips,
.dev-card-band-gradient {
    grid-column: 1 / -1;
}

.dev-card-band-gradient {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.dev-card-band-gradient[hidden],
.dev-card-band-controls [hidden] {
    display: none;
}

.dev-card-band-gradient-angle {
    grid-column: 1 / -1;
}

.dev-card-band-tips {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--borda);
}

.dev-card-band-tips.is-disabled > .dev-card-band-opacity {
    opacity: 0.48;
}

.dev-card-band-tip-toggle {
    margin: 0;
}

.dev-card-band-controls input[type="color"] {
    width: 100%;
    min-height: 40px;
    padding: 0.16rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo-input);
    cursor: pointer;
}

.dev-card-band-opacity {
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
}

.dev-card-band-opacity > span {
    grid-column: 1 / -1;
}

.dev-card-band-opacity input[type="range"] {
    width: 100%;
    accent-color: var(--verde);
}

.dev-card-band-opacity output {
    color: var(--texto);
    font-size: 0.76rem;
    font-weight: 900;
    text-align: right;
}

.dev-layout-editor {
    margin: 0.9rem 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-layout-editor summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem;
    cursor: pointer;
}

.dev-layout-editor summary span {
    color: var(--texto);
    font-weight: 900;
}

.dev-layout-editor summary small {
    color: var(--texto-suave);
    font-size: 0.75rem;
}

.dev-layout-grid {
    display: grid;
    gap: 0.7rem;
    padding: 0 0.75rem 0.75rem;
}

.dev-layout-fieldset {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--borda) 76%, transparent);
    border-radius: 8px;
}

.dev-layout-fieldset summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0;
    cursor: pointer;
    color: var(--verde);
    font-size: 0.78rem;
    font-weight: 900;
    list-style: none;
}

.dev-layout-fieldset summary::-webkit-details-marker {
    display: none;
}

.dev-layout-fieldset summary::after {
    content: '+';
    color: var(--texto-suave);
    font-size: 0.9rem;
}

.dev-layout-fieldset[open] summary::after {
    content: '-';
}

.dev-layout-fieldset-body {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.55rem;
}

.dev-layout-control {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 68px;
    align-items: center;
    gap: 0.5rem;
}

.dev-layout-control span {
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 800;
}

.dev-layout-control input[type="range"] {
    width: 100%;
    accent-color: var(--verde);
}

.dev-layout-control input[type="number"] {
    min-height: 34px;
    padding: 0.35rem 0.45rem;
    text-align: center;
}

.dev-layout-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding: 0 0.75rem 0.75rem;
}

.dev-preview-panel {
    display: grid;
    justify-items: stretch;
}

.dev-preview-photo-form {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1rem;
    padding: 0.7rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.dev-preview-photo-form .form-group {
    margin-bottom: 0;
}

.dev-preview-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dev-preview-photo-adjust-card {
    margin-bottom: 1rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
}

.dev-preview-photo-adjust-card summary {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    color: var(--texto);
    font-weight: 900;
}

.dev-preview-photo-adjust-card summary small {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 700;
}

.dev-preview-photo-adjust-form {
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid var(--borda);
    border-radius: 0;
    background: transparent;
}

.dev-preview-photo-adjust-form .btn {
    justify-content: center;
}

.dev-preview-panel [data-card-style-preview] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: center;
    gap: 1rem;
    justify-items: center;
    margin-bottom: 1rem;
}

.dev-card-preview-stage {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.dev-card-preview-stage > span {
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dev-card-preview-stage-mini {
    align-self: start;
    padding: 0.75rem;
    border: 1px dashed var(--borda-forte);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
}

.dev-card-preview-stage-mini .player-mini-card {
    width: 64px;
}

.dev-template-mini-preview {
    display: grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    flex: 0 0 48px;
}

.dev-row-summary > .dev-template-mini-preview {
    flex: 0 0 48px;
}

.dev-template-mini-preview .player-mini-card {
    width: 44px;
    cursor: default;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}

.dev-template-mini-preview .player-mini-card:hover {
    transform: none;
}

.dev-row .dev-template-mini-preview .player-mini-card span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    overflow: visible;
    text-overflow: clip;
}

.dev-template-list {
    max-height: 460px;
    overflow: auto;
    padding-right: 0.15rem;
}

.dev-template-list .dev-template-name,
.dev-template-list .dev-template-image-reference {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
}

.dev-template-list .dev-template-image-reference {
    color: var(--texto-suave);
}

.dev-log-row {
    align-items: flex-start;
}

.dev-log-row .dev-row-summary {
    flex-basis: 100%;
}

.dev-log-row small {
    white-space: normal;
}

.dev-layout-subheading {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.25rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--borda);
}

.dev-layout-subheading strong {
    color: var(--texto);
    font-size: 0.76rem;
}

.dev-layout-subheading small {
    color: var(--texto-suave);
    font-size: 0.7rem;
    line-height: 1.4;
}

.dev-packages-layout,
.dev-package-list {
    display: grid;
    gap: 1.1rem;
}

.dev-package-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dev-promotion-panel {
    border-color: color-mix(in srgb, #c2743a 42%, var(--borda));
    background:
        radial-gradient(circle at 92% 8%, rgba(194, 116, 58, 0.15), transparent 34%),
        var(--fundo-card);
}

.dev-promotion-panel .card-header,
.dev-package-editor .card-header,
.dev-package-title,
.dev-package-form-footer,
.dev-promotion-actions,
.dev-promotion-history {
    display: flex;
    align-items: center;
}

.dev-promotion-panel .card-header,
.dev-package-editor .card-header,
.dev-package-form-footer {
    justify-content: space-between;
    gap: 0.8rem;
}

.dev-promotion-badge {
    flex: 0 0 auto;
    padding: 0.48rem 0.72rem;
    border: 1px solid rgba(194, 116, 58, 0.42);
    border-radius: 999px;
    background: rgba(194, 116, 58, 0.14);
    color: #c9834a;
    font-size: 0.8rem;
    font-weight: 900;
}

.dev-promotion-form {
    display: grid;
    grid-template-columns: minmax(220px, 0.65fr) minmax(300px, 1fr);
    gap: 1rem;
    align-items: end;
}

.dev-percent-input {
    position: relative;
    display: block;
}

.dev-percent-input input {
    padding-right: 2.35rem !important;
}

.dev-percent-input > span {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    color: var(--texto-suave);
    font-weight: 800;
    pointer-events: none;
    transform: translateY(-50%);
}

.dev-promotion-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.dev-promotion-preview > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: color-mix(in srgb, var(--fundo-input) 72%, transparent);
}

.dev-promotion-preview span {
    overflow: hidden;
    color: var(--texto-suave);
    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-promotion-preview strong {
    color: var(--verde);
    font-size: 0.82rem;
}

.dev-promotion-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

.dev-promotion-history {
    gap: 0.45rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 0.76rem;
}

.dev-promotion-history svg {
    width: 15px;
    height: 15px;
}

.dev-package-editor {
    position: relative;
    overflow: hidden;
    padding: clamp(1.15rem, 1.6vw, 1.5rem);
}

.dev-package-editor::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #a16207, #f59e0b);
    content: '';
}

.dev-package-editor.loja-pacote-prata::before {
    background: linear-gradient(90deg, #64748b, #e2e8f0);
}

.dev-package-editor.loja-pacote-ouro::before {
    background: linear-gradient(90deg, #ca8a04, #fde047);
}

.dev-package-title {
    gap: 0.6rem;
    min-width: 0;
}

.dev-package-title h2,
.dev-package-title p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-package-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.46fr);
    gap: 0.8rem;
}

.dev-package-probabilities {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--borda);
    border-radius: 12px;
}

.dev-package-probabilities legend {
    padding: 0 0.35rem;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dev-package-probabilities label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    color: var(--texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
}

.dev-package-form-footer {
    grid-column: 1 / -1;
}

.dev-package-guarantee {
    grid-column: 1 / -1;
    line-height: 1.45;
}

.dev-package-form-footer > span {
    color: var(--texto-suave);
    font-size: 0.75rem;
    font-weight: 800;
}

.dev-package-form-footer > span.is-valid {
    color: var(--verde);
}

.dev-package-form-footer > span.is-invalid {
    color: var(--vermelho);
}

.dev-card-purchasable-toggle {
    grid-column: 1 / -1;
    align-items: flex-start;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--verde) 24%, var(--borda));
    border-radius: 12px;
    background: color-mix(in srgb, var(--verde) 7%, transparent);
}

.dev-card-purchasable-toggle > span {
    display: grid;
    gap: 0.2rem;
}

.dev-card-purchasable-toggle strong,
.dev-card-purchasable-toggle small {
    display: block;
}

.dev-card-purchasable-toggle small {
    color: var(--texto-suave);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.4;
}

.badge-pacote-exclusivo {
    border: 1px solid rgba(190, 135, 45, 0.34);
    background: rgba(190, 135, 45, 0.1);
    color: #c4963c;
}

/* Desktop intermediário: prioriza leitura em vez de comprimir os painéis. */
@media (min-width: 881px) and (max-width: 1180px) {
    body:has(.dev-shell) .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .dev-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dev-tabs a {
        min-width: 0;
    }

    .dev-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-package-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-template-list {
        max-height: none;
    }
}

/* Monitores amplos: menu lateral persistente e conteúdo com largura confortável. */
@media (min-width: 1400px) {
    .dev-shell {
        grid-template-columns: 205px minmax(0, 1fr);
        column-gap: 1.35rem;
        align-items: start;
    }

    .dev-topbar {
        grid-column: 1 / -1;
    }

    .dev-tabs {
        grid-column: 1;
        grid-row: 2 / span 30;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 0.3rem;
        top: 1rem;
        padding: 0.55rem;
        overflow: visible;
    }

    .dev-tabs a {
        justify-content: flex-start;
        flex: 0 0 auto;
        width: 100%;
        min-height: 46px;
        padding: 0.7rem 0.8rem;
    }

    .dev-tabs a svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .dev-tabs .dev-tab-count {
        margin-left: auto;
    }

    .dev-shell > .alert,
    .dev-shell > .dev-grid,
    .dev-shell > .dev-packages-layout,
    .dev-shell > .dev-panel,
    .dev-shell > .mensalidade-canais-config,
    .dev-shell > .mensalidade-resumo,
    .dev-shell > .mensalidade-grid,
    .dev-shell > .mensalidade-historico {
        grid-column: 2;
    }

    .dev-grid {
        grid-template-columns: minmax(420px, 0.76fr) minmax(0, 1.24fr);
        gap: 1.25rem;
    }

    .dev-package-list {
        gap: 1.25rem;
    }
}

@media (max-width: 880px) {
    .dev-grid {
        grid-template-columns: 1fr;
    }

    .dev-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .dev-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .dev-package-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body:has(.dev-shell) .container {
        padding: 0.6rem 0.6rem calc(1.5rem + env(safe-area-inset-bottom));
    }

    .dev-shell {
        gap: 0.75rem;
        padding-bottom: 0;
    }

    .dev-topbar {
        gap: 0.8rem;
        padding: 0.85rem;
        border-radius: 14px;
    }

    .dev-heading {
        gap: 0.7rem;
        width: 100%;
    }

    .dev-heading-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }

    .dev-heading-icon svg {
        width: 20px;
        height: 20px;
    }

    .dev-topbar h1 {
        font-size: 1.08rem;
        line-height: 1.2;
    }

    .dev-heading .page-eyebrow {
        font-size: 0.6rem;
        letter-spacing: 0.16em;
    }

    .dev-heading p {
        font-size: 0.73rem;
        line-height: 1.35;
    }

    .dev-topbar-actions {
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--borda);
    }

    .dev-topbar-actions .usuario-chip {
        min-width: 0;
        max-width: calc(100% - 88px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dev-topbar-actions .btn {
        min-height: 42px;
        padding-inline: 0.85rem;
    }

    .dev-tabs {
        top: 0;
        gap: 0.3rem;
        margin-inline: -0.6rem;
        padding: 0.35rem 0.6rem;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        scroll-snap-type: x proximity;
    }

    .dev-tabs a {
        flex: 0 0 74px;
        min-height: 52px;
        gap: 0.25rem;
        flex-direction: column;
        padding: 0.4rem 0.5rem;
        font-size: 0.68rem;
    }

    .dev-tabs a svg {
        width: 18px;
        height: 18px;
    }

    .dev-panel {
        padding: 0.85rem;
        border-radius: 14px;
    }

    .dev-user-editor {
        padding: 0;
    }

    .dev-user-editor-summary {
        min-height: 66px;
        padding: 0.8rem;
    }

    .dev-user-editor-body {
        padding: 0.85rem;
    }

    .dev-user-club-field {
        padding: 0.7rem;
    }

    .dev-panel .card-header {
        margin-bottom: 0.8rem;
        padding-bottom: 0.7rem;
    }

    .dev-panel .card-header h2 {
        font-size: 0.95rem;
    }

    .dev-panel .card-header p {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .dev-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .dev-shell select,
    .dev-shell textarea {
        min-height: 48px;
        font-size: 16px;
    }

    .dev-color-grid,
    .dev-text-style-grid,
    .dev-font-style-grid,
    .dev-search,
    .dev-shell .clube-form-grid,
    .dev-shell .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-search {
        display: grid;
        gap: 0.6rem;
        padding: 0.7rem;
        border: 1px solid var(--borda);
        border-radius: 12px;
        background: color-mix(in srgb, var(--fundo-input) 50%, transparent);
    }

    .dev-search .dev-toggle-inline {
        width: 100%;
        min-height: 42px;
        margin: 0;
    }

    .dev-search-submit {
        width: 100%;
    }

    .dev-shell .clube-form-actions,
    .dev-preview-photo-actions,
    .dev-layout-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .dev-shell .clube-form-actions .btn,
    .dev-preview-photo-actions .btn,
    .dev-layout-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    .dev-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .dev-row-summary {
        grid-column: 1 / -1;
        align-items: flex-start;
        min-width: 0;
        width: 100%;
    }

    .dev-row-summary > img,
    .dev-row-summary > .dev-avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .dev-row strong,
    .dev-row span,
    .dev-row small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dev-row strong {
        line-height: 1.35;
    }

    .dev-row span,
    .dev-row small {
        margin-top: 0.15rem;
        line-height: 1.4;
    }

    .dev-row-meta {
        justify-content: flex-start;
    }

    .dev-link-club-form,
    .dev-link-club-hint {
        grid-column: 1 / -1;
        width: 100%;
    }

    .dev-link-club-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    .dev-link-club-form select,
    .dev-link-club-form .btn {
        width: 100%;
        min-height: 48px;
    }

    .dev-row-meta .badge-posicao {
        margin: 0;
        white-space: nowrap;
    }

    .dev-row-actions {
        align-self: end;
        justify-content: flex-end;
    }

    .dev-row-actions .form-inline {
        width: auto;
    }

    .dev-row-actions .btn-acao,
    .dev-row-actions .form-inline .btn-acao {
        width: 42px;
        height: 42px;
    }

    .dev-template-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .dev-color-grid {
        gap: 0.85rem;
    }

    .dev-card-band-head {
        align-items: stretch;
        flex-direction: column;
    }

    .dev-card-band-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-mini-card-controls,
    .dev-preview-panel [data-card-style-preview] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-card-preview-stage-mini {
        width: min(100%, 180px);
        justify-self: center;
    }

    .dev-card-band-gradient {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-card-band-gradient-angle {
        grid-column: 1;
    }

    .dev-promotion-form,
    .dev-promotion-preview,
    .dev-package-form,
    .dev-package-probabilities {
        grid-template-columns: minmax(0, 1fr);
    }

    .dev-package-name,
    .dev-package-price,
    .dev-package-probabilities,
    .dev-package-guarantee,
    .dev-package-form-footer,
    .dev-promotion-actions {
        grid-column: 1;
    }

    .dev-promotion-actions .btn,
    .dev-package-form-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .dev-package-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dev-text-style-section,
    .dev-font-style-section,
    .dev-club-shadow-section {
        padding: 0.7rem;
    }

    .dev-gradient-colors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dev-gradient-colors label:last-child {
        grid-column: 1 / -1;
    }

    .dev-club-shadow-controls {
        grid-template-columns: minmax(0, 1fr) 88px;
    }

    .dev-color-grid label {
        padding: 0.7rem;
        border: 1px solid var(--borda);
        border-radius: 12px;
        background: color-mix(in srgb, var(--fundo-input) 48%, transparent);
    }

    .dev-color-swatches {
        grid-template-columns: repeat(8, minmax(24px, 1fr));
        gap: 0.4rem;
    }

    .dev-color-swatch {
        min-height: 28px;
    }

    .dev-layout-editor summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .dev-layout-grid {
        padding-inline: 0.55rem;
    }

    .dev-layout-fieldset {
        padding: 0.7rem;
    }

    .dev-layout-control {
        grid-template-columns: minmax(0, 1fr) 72px;
    }

    .dev-layout-control span {
        grid-column: 1 / -1;
    }

    .dev-preview-photo-form,
    .dev-preview-photo-adjust-card,
    .dev-layout-editor {
        border-radius: 12px;
    }
}

@media (max-width: 380px) {
    .dev-color-swatches {
        grid-template-columns: repeat(6, minmax(24px, 1fr));
    }

    .dev-shell .clube-form-actions,
    .dev-preview-photo-actions,
    .dev-layout-actions {
        grid-template-columns: 1fr;
    }

    .dev-row {
        grid-template-columns: 1fr;
    }

    .dev-row-meta,
    .dev-row-actions {
        grid-column: 1;
    }

    .dev-row-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 980px) {
    .planos-hero,
    .planos-products-grid,
    .planos-grid-treinador,
    .planos-grid-clube {
        grid-template-columns: 1fr;
    }

    .planos-hero {
        min-height: auto;
        padding-top: 1.25rem;
    }

    .planos-hero-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .planos-topbar {
        min-height: 64px;
        padding: 0.7rem 0.9rem;
    }

    .planos-nav {
        display: none;
    }

    .planos-brand .auth-logo-icone {
        width: 34px;
        height: 34px;
    }

    .planos-brand span {
        font-size: 0.95rem;
    }

    .page-planos .planos-topbar .btn {
        width: auto;
        padding: 0.48rem 0.7rem;
    }

    .planos-login-link svg {
        display: none;
    }

    .planos-page {
        width: min(100% - 24px, 1160px);
        padding-top: 1.4rem;
    }

    .planos-hero-copy h1 {
        font-size: clamp(2.15rem, 13vw, 3.5rem);
    }

    .planos-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .planos-profile-picker {
        grid-template-columns: 1fr;
    }

    .planos-profile-option {
        min-height: auto;
    }

    .page-planos .planos-hero-actions .btn,
    .page-planos .plano-card .btn,
    .page-planos .planos-contact .btn {
        width: 100%;
    }

    .planos-hero-panel {
        grid-template-columns: 1fr;
    }

    .planos-section {
        padding-top: 2.35rem;
    }

    .planos-product-card,
    .plano-card,
    .planos-contact {
        padding: 1rem;
    }

    .planos-contact {
        align-items: stretch;
        flex-direction: column;
    }

    .planos-footer {
        width: min(100% - 24px, 1160px);
    }
}

.jogador-card-menu button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--roxo) 34%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--roxo) 12%, transparent);
    color: var(--roxo-suave);
    cursor: pointer;
}

.modal-presente-icon,
.presente-recebido-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(200, 151, 59, 0.22), rgba(42, 163, 108, 0.18));
    color: var(--ouro);
    box-shadow: 0 16px 36px rgba(200, 151, 59, 0.12);
}

.modal-presente-jogadores .modal-box {
    display: grid;
    gap: 0.8rem;
}

.modal-presente-jogadores form {
    display: grid;
    gap: 0.75rem;
}

.presente-recebido-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 6, 18, 0.76);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.presente-recebido-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    width: min(420px, 100%);
    overflow: hidden;
    padding: 1.35rem;
    border: 1px solid rgba(200, 151, 59, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(160deg, rgba(17, 24, 39, 0.98), rgba(14, 11, 26, 0.98)),
        var(--fundo-card);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
    text-align: center;
}

.presente-recebido-glow {
    position: absolute;
    inset: -30% -20% auto;
    z-index: -1;
    height: 220px;
    background:
        radial-gradient(circle at 35% 45%, rgba(200, 151, 59, 0.24), transparent 36%),
        radial-gradient(circle at 64% 38%, rgba(42, 163, 108, 0.18), transparent 34%);
}

.presente-recebido-kicker {
    color: var(--ouro);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.presente-recebido-panel h2 {
    margin: 0;
    font-size: 1.55rem;
}

.presente-recebido-panel p,
.presente-recebido-panel small {
    color: var(--texto-suave);
}

.presente-recebido-modal.is-received .presente-recebido-panel {
    transform: scale(0.98);
    opacity: 0.9;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.goleiros-rotativos-config,
.goleiros-partida-row {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.toggle-switch,
.goleiro-rotativo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--texto);
}

.goleiro-rotativo-item input {
    width: 18px;
    height: 18px;
    accent-color: var(--roxo);
}

.toggle-switch {
    width: fit-content;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.toggle-switch-track {
    position: relative;
    width: 66px;
    height: 34px;
    border-radius: 999px;
    background: var(--fundo-input);
    border: 1px solid var(--borda-forte);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.toggle-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.32);
    transition: transform 0.22s ease;
}

.toggle-switch input:checked + .toggle-switch-track {
    border-color: rgba(70,135,185,.55);
    background: linear-gradient(135deg, #69e7a0, #5fa8f5);
    box-shadow: 0 0 0 3px rgba(70,135,185,.16);
}

.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
    transform: translateX(32px);
}

.toggle-switch input:focus-visible + .toggle-switch-track {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
}

/* Correcoes finais do modal de revelacao: ficam no fim para vencer regras gerais. */
.overall-reveal-modal.is-revealed .overall-reveal-share {
    display: grid;
    justify-items: center;
    width: min(292px, calc(100vw - 48px));
    gap: 0.34rem;
    margin-top: 0.48rem;
    opacity: 1;
    color: #fff;
    text-align: center;
    animation: overallRevealFadeUp 0.45s ease 1.08s both;
}

.overall-reveal-modal.is-revealed .overall-reveal-share > strong {
    color: #f8e08a;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62);
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.44rem;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    gap: 0.35rem;
    margin: 0;
    padding: 0.58rem 0.64rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
    color: #fff;
    cursor: pointer;
    font-family: var(--fonte-principal);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-facebook {
    background: linear-gradient(135deg, #1b74e4, #0b4fb3);
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-instagram {
    background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #515bd4);
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke-width: 2.7;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn small {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 18px;
    padding: 0 0.34rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn:disabled,
.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn.is-disabled {
    cursor: default;
    opacity: 0.58;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn.is-rewarded {
    border-color: rgba(42, 163, 108, 0.58);
    box-shadow: 0 0 0 1px rgba(42, 163, 108, 0.16), 0 12px 24px rgba(0, 0, 0, 0.26);
}

.overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn.is-rewarded small {
    background: rgba(4, 20, 14, 0.42);
    color: #a7f3d0;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-status {
    min-height: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-status[data-estado="ok"] {
    color: #2aa36c;
}

.overall-reveal-modal.is-revealed .overall-reveal-share-status[data-estado="erro"] {
    color: #fca5a5;
}

.overall-reveal-story-capture {
    position: fixed;
    top: 0;
    left: -9999px;
    z-index: 0;
    width: 1080px;
    height: 1920px;
    overflow: hidden;
    background: #030208;
    color: #fff;
    pointer-events: none;
}

.overall-reveal-story-bg,
.overall-reveal-story-content {
    position: absolute;
    inset: 0;
}

.overall-reveal-story-bg {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 208, 94, 0.2), transparent 28%),
        radial-gradient(circle at 50% 56%, rgba(42, 163, 108, 0.16), transparent 44%),
        radial-gradient(circle at 18% 16%, rgba(110, 91, 224, 0.24), transparent 36%),
        linear-gradient(180deg, #090611, #020106);
}

.overall-reveal-story-bg .overall-reveal-particles,
.overall-reveal-story-bg .overall-reveal-burst {
    opacity: 1;
    animation: none;
}

.overall-reveal-story-confetti {
    position: absolute;
    inset: 0;
    opacity: 0.98;
    pointer-events: none;
    background-image:
        radial-gradient(circle, #ffe18a 0 8px, transparent 9px),
        radial-gradient(circle, #2aa36c 0 7px, transparent 8px),
        radial-gradient(circle, #a79bf0 0 6px, transparent 7px),
        radial-gradient(circle, #c4963c 0 5px, transparent 6px),
        linear-gradient(64deg, transparent 0 22%, rgba(42, 163, 108, 0.38) 22.6% 24.2%, transparent 24.8%),
        linear-gradient(108deg, transparent 0 54%, rgba(110, 91, 224, 0.34) 54.6% 56%, transparent 56.6%),
        linear-gradient(76deg, transparent 0 68%, rgba(255, 225, 138, 0.32) 68.5% 69.8%, transparent 70.2%);
    background-position:
        82px 102px,
        206px 278px,
        354px 154px,
        512px 346px,
        0 0,
        0 0,
        0 0;
    background-size:
        260px 312px,
        332px 384px,
        420px 480px,
        510px 546px,
        100% 100%,
        100% 100%,
        100% 100%;
}

.overall-reveal-story-confetti::before,
.overall-reveal-story-confetti::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.overall-reveal-story-confetti::before {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 4px, transparent 5px),
        radial-gradient(circle, rgba(255, 225, 138, 0.86) 0 6px, transparent 7px),
        radial-gradient(circle, rgba(42, 163, 108, 0.74) 0 5px, transparent 6px);
    background-position:
        144px 188px,
        680px 112px,
        850px 420px;
    background-size:
        190px 230px,
        370px 430px,
        310px 360px;
}

.overall-reveal-story-confetti::after {
    opacity: 0.72;
    background:
        linear-gradient(122deg, transparent 0 15%, rgba(255, 225, 138, 0.26) 15.4% 17%, transparent 17.4%),
        linear-gradient(28deg, transparent 0 74%, rgba(42, 163, 108, 0.22) 74.4% 75.8%, transparent 76.2%);
}

.overall-reveal-story-content {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 28px;
    padding: 104px 72px 116px;
}

.overall-reveal-story-head {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
}

.overall-reveal-story-head span,
.overall-reveal-story-head strong {
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.overall-reveal-story-head span {
    color: #ded5ff;
    font-size: 38px;
}

.overall-reveal-story-head strong {
    color: #ffe18a;
    font-size: 30px;
    letter-spacing: 0.08em;
}

.overall-reveal-story-head h3 {
    max-width: 920px;
    margin: 0;
    overflow: hidden;
    font-family: var(--fonte-display);
    font-size: 76px;
    line-height: 0.95;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overall-reveal-story-card .player-card {
    width: 560px;
    opacity: 1;
    transform: none;
    animation: none;
    filter: drop-shadow(0 38px 62px rgba(0, 0, 0, 0.72));
}

.overall-reveal-story-card .player-card-overall {
    font-size: 44px;
}

.overall-reveal-story-card .player-card-position {
    font-size: 18px;
}

.overall-reveal-story-card .player-card-position svg {
    width: 18px;
    height: 18px;
}

.overall-reveal-story-card .player-card-name {
    font-size: 34px;
}

.overall-reveal-story-card .player-card-stats-grid div {
    grid-template-rows: 24px 40px;
}

.overall-reveal-story-card .player-card-stats span {
    min-height: 24px;
    font-size: 13px;
}

.overall-reveal-story-card .player-card-stats span svg {
    width: 14px;
    height: 14px;
}

.overall-reveal-story-card .player-card-stats strong {
    font-size: 34px;
    margin-top: 4px;
}

.overall-reveal-story-card .player-card-traits {
    gap: 4px;
}

.overall-reveal-story-card .player-card-trait {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
}

.overall-reveal-story-card .player-card-trait > span:first-child {
    font-size: 15px;
}

.overall-reveal-story-card .player-card-trait-stars svg {
    width: 15px;
    height: 15px;
}

.overall-reveal-story-change {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    padding: 18px 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(19, 24, 34, 0.82);
    font-family: var(--fonte-display);
    font-weight: 900;
}

.overall-reveal-story-change span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 44px;
    text-decoration: line-through;
}

.overall-reveal-story-change strong {
    color: #ffe18a;
    font-size: 56px;
}

.overall-reveal-story-change svg {
    width: 38px;
    height: 38px;
    color: var(--verde);
}

.overall-reveal-story-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(900px, 100%);
    gap: 18px;
}

.overall-reveal-story-metrics div {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 22px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(19, 24, 34, 0.8);
}

.overall-reveal-story-metrics span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.overall-reveal-story-metrics strong {
    color: #fff;
    font-family: var(--fonte-display);
    font-size: 48px;
    line-height: 1;
}

.overall-reveal-story-brand {
    color: rgba(255, 255, 255, 0.58);
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
}

@media (max-width: 520px) {
    .overall-reveal-social-modal .overall-reveal-card-wrap {
        padding-top: 58px;
    }

    .overall-reveal-social-modal .overall-reveal-card-head {
        margin-bottom: 0.1rem;
    }

    .overall-reveal-social-modal .overall-reveal-card-stage .player-card {
        width: min(258px, 70vw, 31vh);
        width: min(258px, 70vw, 31dvh);
    }

    .overall-reveal-modal.is-revealed .overall-reveal-share {
        width: min(292px, calc(100vw - 50px));
        gap: 0.3rem;
        margin-top: 0.36rem;
    }

    .overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn {
        min-height: 36px;
        padding: 0.52rem 0.5rem;
        border-radius: 11px;
        font-size: 0.76rem;
    }
}

@media (max-width: 700px) and (max-height: 680px) {
    .overall-reveal-social-modal .overall-reveal-card-stage .player-card {
        width: min(218px, 66vw, 28vh);
        width: min(218px, 66vw, 28dvh);
    }

    .overall-reveal-modal.is-revealed .overall-reveal-share > strong {
        font-size: 0.72rem;
    }

    .overall-reveal-modal.is-revealed .overall-reveal-share-actions > button.overall-reveal-share-btn {
        min-height: 34px;
        padding: 0.45rem 0.46rem;
        font-size: 0.72rem;
    }
}

.toggle-switch-label {
    font-weight: 800;
}

.goleiros-rotativos-painel {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
}

.goleiros-rotativos-painel[hidden] {
    display: none !important;
}

.goleiros-rotativos-busca {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    padding: 9px 11px;
    outline: none;
}

.goleiros-rotativos-busca:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 2px rgba(70,135,185,.2);
}

.goleiros-rotativos-vazio {
    padding: 10px 12px;
    border: 1px dashed var(--borda);
    border-radius: 8px;
    color: var(--texto-suave);
    font-size: 13px;
}

.goleiros-rotativos-painel small,
.goleiros-partida-row small,
.goleiros-partida-mini {
    color: var(--texto-suave);
    font-size: 12px;
}

.goleiros-rotativos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.goleiro-rotativo-item {
    justify-content: space-between;
    padding: 9px 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
}

.goleiro-rotativo-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partida-card {
    display: grid;
    gap: 8px;
}

.goleiros-partida-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: rgba(255,255,255,.03);
}

.goleiros-partida-row label {
    display: grid;
    gap: 6px;
}

.goleiros-partida-row select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    background: var(--fundo-input);
    color: var(--texto);
    font: inherit;
    padding: 8px 10px;
    outline: none;
}

.goleiros-partida-row select:focus {
    border-color: var(--roxo);
    box-shadow: 0 0 0 2px var(--roxo-brilho);
}

.goleiros-partida-row select option {
    background: var(--fundo-card);
    color: var(--texto);
}

.goleiros-partida-row.goleiros-duplicados {
    border-color: rgba(201,82,79,.75);
}

.goleiros-partida-mini {
    grid-column: 1 / -1;
}

[data-goleiro-rotativo-slot] {
    display: contents;
}

.gols-time-card[hidden],
.goleiro-rotativo-stat-row[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .goleiros-partida-row {
        grid-template-columns: 1fr;
    }
}

/* Painel do Desenvolvedor - mensalidades */
.mensalidade-canais-config {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 14px;
}

.mensalidade-canais-config span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: var(--texto-suave);
    font-size: .76rem;
    font-weight: 800;
}

.mensalidade-canais-config span.ok {
    border-color: rgba(42, 163, 108, .28);
    background: rgba(42, 163, 108, .08);
    color: var(--verde);
}

.mensalidade-canais-config span.erro {
    border-color: rgba(201, 82, 79, .3);
    background: rgba(201, 82, 79, .08);
    color: var(--vermelho);
}

.mensalidade-canais-config svg {
    width: 15px;
    height: 15px;
}

.mensalidade-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.mensalidade-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 96px;
    padding: 18px;
}

.mensalidade-kpi > svg {
    width: 30px;
    height: 30px;
    color: var(--roxo-suave);
}

.mensalidade-kpi div {
    display: grid;
    gap: 2px;
}

.mensalidade-kpi strong {
    color: var(--texto);
    font-family: var(--fonte-display);
    font-size: 1.8rem;
    line-height: 1;
}

.mensalidade-kpi span {
    color: var(--texto-suave);
    font-size: .82rem;
    font-weight: 800;
}

.mensalidade-kpi-ok > svg { color: var(--verde); }
.mensalidade-kpi-alerta > svg { color: #c4963c; }
.mensalidade-kpi-vencida > svg { color: var(--vermelho); }

.mensalidade-grid {
    align-items: start;
    margin-bottom: 18px;
}

.mensalidade-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mensalidade-plano-atual {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(110, 91, 224, .08);
}

.mensalidade-plano-atual span,
.mensalidade-plano-atual small {
    color: var(--texto-suave);
    font-size: .78rem;
}

.mensalidade-plano-atual strong { color: var(--roxo-suave); }

.mensalidade-aviso-canais {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(42, 163, 108, .25);
    border-radius: 12px;
    background: rgba(42, 163, 108, .07);
    color: var(--texto-suave);
    font-size: .82rem;
    line-height: 1.45;
}

.mensalidade-aviso-canais svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    color: var(--verde);
}

.mensalidade-lista { gap: 9px; }

.mensalidade-assinatura-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(130px, .8fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.mensalidade-assinatura-row > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.mensalidade-assinatura-row strong,
.mensalidade-assinatura-row span,
.mensalidade-assinatura-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mensalidade-assinatura-row > div > span,
.mensalidade-assinatura-row small {
    color: var(--texto-suave);
    font-size: .78rem;
}

.mensalidade-status {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .12);
    color: var(--texto-suave);
    font-size: .72rem;
    font-weight: 900;
}

.mensalidade-status.ok { background: rgba(42, 163, 108, .12); color: var(--verde); }
.mensalidade-status.alerta { background: rgba(196, 150, 60, .13); color: #c4963c; }
.mensalidade-status.vencida { background: rgba(201, 82, 79, .13); color: var(--vermelho); }

.mensalidade-tabela-wrap {
    overflow-x: auto;
    border: 1px solid var(--borda);
    border-radius: 14px;
}

.mensalidade-tabela {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.mensalidade-tabela th,
.mensalidade-tabela td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--borda);
    text-align: left;
    vertical-align: middle;
}

.mensalidade-tabela th {
    background: var(--custom-table-bg, rgba(0, 0, 0, .16));
    color: var(--texto-suave);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mensalidade-tabela td {
    color: var(--texto);
    font-size: .82rem;
}

.mensalidade-tabela td > strong,
.mensalidade-tabela td > small {
    display: block;
}

.mensalidade-tabela td > small {
    margin-top: 3px;
    color: var(--texto-suave);
}

.mensalidade-tabela tbody tr:last-child td { border-bottom: 0; }
.mensalidade-tabela-vazia { padding: 32px !important; text-align: center !important; color: var(--texto-suave) !important; }
.mensalidade-pagamento-estornado { opacity: .62; }

.mensalidade-canais {
    display: flex;
    gap: 7px;
}

.mensalidade-canais span {
    display: inline-grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid var(--borda);
    border-radius: 9px;
    color: var(--texto-suave);
}

.mensalidade-canais span.enviado {
    border-color: rgba(42, 163, 108, .28);
    background: rgba(42, 163, 108, .1);
    color: var(--verde);
}

.mensalidade-canais svg { width: 15px; height: 15px; }

/* Gestao de mensalistas do clube */
.mensalistas-shell {
    display: grid;
    gap: 18px;
}

.mensalistas-topbar {
    margin-bottom: 0;
}

.mensalistas-heading-icon {
    background: linear-gradient(145deg, rgba(42, 163, 108, .2), rgba(110, 91, 224, .18));
    color: var(--verde);
}

.mensalistas-section-card > summary.card-header {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.mensalistas-section-card > summary.card-header::-webkit-details-marker {
    display: none;
}

.mensalistas-section-card > summary.card-header:focus-visible {
    outline: 2px solid var(--roxo-suave);
    outline-offset: 5px;
    border-radius: 8px;
}

.mensalistas-section-card[open] > summary.card-header {
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--borda) 70%, transparent);
}

.mensalistas-section-meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.mensalistas-section-chevron {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    color: var(--texto-suave);
    transition: transform .2s ease;
}

.mensalistas-section-card[open] > summary .mensalistas-section-chevron {
    transform: rotate(180deg);
}

.mensalistas-grid-principal {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: start;
    gap: 18px;
}

.mensalistas-cadastro-form,
.mensalistas-lista,
.mensalistas-cobrancas-lista {
    display: grid;
    gap: 12px;
}

.mensalistas-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr);
    gap: 10px;
}

.mensalistas-filtros label {
    display: grid;
    gap: 6px;
}

.mensalistas-filtros label > span {
    color: var(--texto-suave);
    font-size: .76rem;
    font-weight: 800;
}

.mensalistas-selecao-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mensalistas-selecao-toolbar strong {
    margin-left: auto;
    color: var(--verde);
    font-size: .78rem;
}

.mensalistas-opcoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 330px;
    overflow-y: auto;
    padding: 2px 5px 2px 2px;
}

.mensalista-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.mensalista-opcao:hover {
    border-color: color-mix(in srgb, var(--verde) 45%, var(--borda));
    transform: translateY(-1px);
}

.mensalista-opcao:has(input:checked) {
    border-color: color-mix(in srgb, var(--verde) 60%, var(--borda));
    background: color-mix(in srgb, var(--verde) 10%, transparent);
}

.mensalista-opcao[hidden] { display: none; }
.mensalista-opcao > input { position: absolute; opacity: 0; pointer-events: none; }

.mensalista-opcao-check {
    display: inline-grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid var(--borda-forte);
    border-radius: 8px;
    color: transparent;
    background: var(--fundo-input);
}

.mensalista-opcao:has(input:checked) .mensalista-opcao-check {
    border-color: var(--verde);
    background: var(--verde);
    color: #07120d;
}

.mensalista-opcao-check svg { width: 15px; height: 15px; stroke-width: 3; }
.mensalista-opcao > span:last-child { display: grid; min-width: 0; gap: 2px; }
.mensalista-opcao strong,
.mensalista-opcao small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mensalista-opcao strong { color: var(--texto); font-size: .82rem; }
.mensalista-opcao small { color: var(--texto-suave); font-size: .7rem; }

.mensalistas-config-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mensalistas-lote-resumo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(110, 91, 224, .24);
    border-radius: 12px;
    background: rgba(110, 91, 224, .07);
    color: var(--texto-suave);
    font-size: .77rem;
    line-height: 1.45;
}

.mensalistas-lote-resumo svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--roxo-suave); }

.mensalistas-total {
    display: inline-grid;
    min-width: 34px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--borda);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .76rem;
    font-weight: 900;
}

.mensalista-item,
.mensalista-cobranca {
    border: 1px solid var(--borda);
    border-radius: 13px;
    background: rgba(255, 255, 255, .025);
    overflow: hidden;
}

.mensalista-item > summary,
.mensalista-cobranca > summary {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    list-style: none;
    cursor: pointer;
}

.mensalista-item > summary { grid-template-columns: minmax(150px, 1fr) minmax(105px, auto) auto 18px; }
.mensalista-cobranca > summary { grid-template-columns: minmax(150px, 1fr) minmax(100px, .55fr) auto 18px; }
.mensalista-item > summary::-webkit-details-marker,
.mensalista-cobranca > summary::-webkit-details-marker { display: none; }

.mensalista-item-identidade {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mensalista-avatar {
    display: inline-grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(110, 91, 224, .13);
    color: var(--roxo-suave);
}

.mensalista-avatar svg { width: 19px; height: 19px; }
.mensalista-item-identidade > span:last-child,
.mensalista-item-valor,
.mensalista-cobranca > summary > div { display: grid; min-width: 0; gap: 2px; }
.mensalista-item-identidade strong,
.mensalista-item-identidade small,
.mensalista-item-valor strong,
.mensalista-item-valor small,
.mensalista-cobranca > summary strong,
.mensalista-cobranca > summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mensalista-item-identidade small,
.mensalista-item-valor small,
.mensalista-cobranca > summary small { color: var(--texto-suave); font-size: .72rem; }
.mensalista-item-identidade strong,
.mensalista-item-valor strong,
.mensalista-cobranca > summary strong { font-size: .82rem; }

.mensalista-item-chevron,
.mensalista-cobranca > summary > svg:last-child { width: 17px; height: 17px; color: var(--texto-suave); transition: transform .18s ease; }
.mensalista-item[open] .mensalista-item-chevron,
.mensalista-cobranca[open] > summary > svg:last-child { transform: rotate(180deg); }

.mensalista-item-body {
    display: grid;
    gap: 10px;
    padding: 0 13px 13px;
    border-top: 1px solid var(--borda);
}

.mensalista-programacao {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 10px 11px;
    border: 1px solid rgba(42, 163, 108, .22);
    border-radius: 10px;
    background: rgba(42, 163, 108, .06);
}

.mensalista-programacao.is-ending { border-color: rgba(201, 82, 79, .23); background: rgba(201, 82, 79, .06); }
.mensalista-programacao > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--verde); }
.mensalista-programacao.is-ending > svg { color: var(--vermelho); }
.mensalista-programacao > span { display: grid; gap: 2px; }
.mensalista-programacao strong { font-size: .78rem; }
.mensalista-programacao small { color: var(--texto-suave); font-size: .72rem; }

.mensalista-edicao-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, .45fr) auto;
    align-items: end;
    gap: 9px;
}

.mensalista-edicao-form .form-group { margin: 0; }
.mensalista-encerrar-form { display: flex; justify-content: flex-end; }
.mensalista-encerrar { color: var(--vermelho); }

.mensalistas-cobrancas-card,
.mensalistas-historico-card { margin-top: 0; }

.mensalistas-cobrancas-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.mensalistas-cobrancas-acoes .form-inline {
    display: inline-flex;
}

.mensalistas-cobrancas-acoes > small {
    flex: 1 1 250px;
    color: var(--texto-suave);
    font-size: .72rem;
    line-height: 1.4;
}

.mensalistas-exportar-painel {
    display: grid;
    gap: 9px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(42, 163, 108, .23);
    border-radius: 12px;
    background: rgba(42, 163, 108, .055);
}

.mensalistas-exportar-painel[hidden] { display: none; }

.mensalistas-exportar-painel > label {
    color: var(--texto);
    font-size: .78rem;
    font-weight: 900;
}

.mensalistas-exportar-painel textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    font-family: var(--fonte-principal);
    font-size: .8rem;
    line-height: 1.55;
}

.mensalistas-exportar-painel > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mensalista-cobranca.is-overdue { border-color: rgba(201, 82, 79, .25); }

.mensalista-pendencias-aviso {
    margin-top: 3px;
    color: #c4963c;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
}

.mensalista-pagamento-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, .6fr)) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 12px 13px 13px;
    border-top: 1px solid var(--borda);
}

.mensalista-pagamento-form .form-group { margin: 0; }
.mensalistas-tabela { min-width: 920px; }
.mensalista-estorno-form { display: inline-flex; }

@media (max-width: 1100px) {
    .mensalistas-grid-principal { grid-template-columns: 1fr; }
    .mensalista-pagamento-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mensalista-pagamento-form .btn { width: 100%; }
}

@media (max-width: 980px) {
    .mensalidade-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mensalidade-assinatura-row { grid-template-columns: 1fr auto; }
    .mensalidade-assinatura-dados { grid-column: 1; grid-row: 2; }
    .mensalidade-assinatura-row > .mensalidade-status { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 620px) {
    .mensalidade-resumo { gap: 9px; }
    .mensalidade-kpi { min-height: 82px; padding: 13px; gap: 10px; }
    .mensalidade-kpi > svg { width: 24px; height: 24px; }
    .mensalidade-kpi strong { font-size: 1.45rem; }
    .mensalidade-form-grid { grid-template-columns: 1fr; }
    .mensalidade-assinatura-row { grid-template-columns: 1fr; }
    .mensalidade-assinatura-dados,
    .mensalidade-assinatura-row > .mensalidade-status { grid-column: 1; grid-row: auto; }
    .mensalistas-filtros,
    .mensalistas-opcoes,
    .mensalistas-config-grid,
    .mensalista-edicao-form,
    .mensalista-pagamento-form { grid-template-columns: 1fr; }
    .mensalistas-selecao-toolbar strong { width: 100%; margin-left: 0; }
    .mensalistas-opcoes { max-height: 390px; }
    .mensalista-item > summary,
    .mensalista-cobranca > summary { grid-template-columns: minmax(0, 1fr) auto; }
    .mensalista-item-valor,
    .mensalista-cobranca > summary > div:nth-child(2) { grid-column: 1; }
    .mensalista-item > summary > .mensalidade-status,
    .mensalista-cobranca > summary > .mensalidade-status { grid-column: 1; }
    .mensalista-item-chevron,
    .mensalista-cobranca > summary > svg:last-child { grid-column: 2; grid-row: 1; }
    .mensalista-edicao-form .btn,
    .mensalista-encerrar-form .btn { width: 100%; }
    .mensalistas-cobrancas-acoes > .btn,
    .mensalistas-cobrancas-acoes > .form-inline,
    .mensalistas-cobrancas-acoes > .form-inline .btn,
    .mensalistas-exportar-painel > div .btn { width: 100%; }
}

/* Acoes em lote da pagina Jogadores */
.jogadores-lote-toolbar {
    position: sticky;
    top: 74px;
    z-index: 24;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.9rem 0 1rem;
    padding: 0.72rem 0.78rem 0.72rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--roxo) 42%, var(--borda));
    border-radius: 18px;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--roxo) 24%, transparent), transparent 48%),
        color-mix(in srgb, var(--fundo-card) 94%, transparent);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: jogadoresLoteEntrada 0.2s ease-out;
}

.jogadores-lote-toolbar[hidden] { display: none !important; }

@keyframes jogadoresLoteEntrada {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.jogadores-lote-resumo,
.jogadores-lote-acoes,
.jogadores-lote-acao {
    display: flex;
    align-items: center;
}

.jogadores-lote-resumo { gap: 0.7rem; min-width: 0; }

.jogadores-lote-resumo > span:last-child {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.jogadores-lote-resumo strong { font-size: 0.82rem; line-height: 1.1; }
.jogadores-lote-resumo small { color: var(--texto-suave); font-size: 0.68rem; white-space: nowrap; }

.jogadores-lote-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid color-mix(in srgb, var(--verde) 42%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--verde) 16%, transparent);
    color: var(--verde);
    font-size: 0.9rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.jogadores-lote-acoes { justify-content: flex-end; gap: 0.48rem; }

.jogadores-lote-acao,
.jogadores-lote-limpar {
    min-height: 40px;
    border: 1px solid var(--borda-forte);
    border-radius: 12px;
    color: var(--texto);
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.jogadores-lote-acao {
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--fundo-card) 82%, var(--roxo) 18%);
    font-size: 0.75rem;
    font-weight: 850;
}

.jogadores-lote-acao-overall { border-color: color-mix(in srgb, var(--verde) 45%, var(--borda)); }
.jogadores-lote-acao-ciclo { border-color: color-mix(in srgb, var(--roxo) 52%, var(--borda)); }
.jogadores-lote-acao:hover,
.jogadores-lote-acao:focus-visible,
.jogadores-lote-limpar:hover,
.jogadores-lote-limpar:focus-visible {
    border-color: var(--roxo-suave);
    outline: none;
    transform: translateY(-1px);
}

.jogadores-lote-limpar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex: 0 0 40px;
    padding: 0;
    background: transparent;
    color: var(--texto-suave);
}

.jogadores-lote-acao svg,
.jogadores-lote-limpar svg { width: 17px; height: 17px; }

body.modal-jogadores-lote-aberto { overflow: hidden; }

.modal-jogadores-lote { padding: 1rem; }

.modal-jogadores-lote .jogadores-lote-modal-box {
    position: relative;
    width: min(540px, 100%);
    max-width: 100%;
    max-height: min(760px, calc(100svh - 2rem));
    overflow-y: auto;
    padding: 1.25rem;
    border-color: color-mix(in srgb, var(--roxo) 42%, var(--borda-forte));
    border-radius: 24px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--roxo) 20%, transparent), transparent 42%),
        var(--fundo-card);
    text-align: left;
}

.jogadores-lote-modal-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding-right: 2rem;
}

.jogadores-lote-modal-head h3 { margin: 0.15rem 0 0.25rem; font-size: 1.15rem; }
.jogadores-lote-modal-head p { margin: 0; font-size: 0.78rem; line-height: 1.45; }
.jogadores-lote-modal-head p strong { color: var(--texto); }

.jogadores-lote-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--roxo) 42%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--roxo) 16%, transparent);
    color: var(--roxo-suave);
}

.jogadores-lote-modal-icon.is-overall {
    border-color: color-mix(in srgb, var(--verde) 42%, transparent);
    background: color-mix(in srgb, var(--verde) 13%, transparent);
    color: var(--verde);
}

.jogadores-lote-modal-icon svg { width: 22px; height: 22px; }

.jogadores-lote-kicker {
    color: var(--roxo-suave);
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.jogadores-lote-form { display: grid; gap: 0.9rem; margin-top: 1.1rem; }

.jogadores-lote-escolhas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.jogadores-lote-escolhas-vertical { grid-template-columns: 1fr; }

.jogadores-lote-escolhas legend,
.jogadores-lote-valor-wrap > label {
    grid-column: 1 / -1;
    margin-bottom: 0.05rem;
    color: var(--texto-suave);
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jogadores-lote-choice {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid var(--borda);
    border-radius: 15px;
    background: color-mix(in srgb, var(--fundo-card) 90%, transparent);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.jogadores-lote-choice:hover { transform: translateY(-1px); border-color: var(--borda-forte); }
.jogadores-lote-choice:has(input:checked) {
    border-color: color-mix(in srgb, var(--roxo) 65%, var(--borda));
    background: color-mix(in srgb, var(--roxo) 13%, var(--fundo-card));
}
.jogadores-lote-choice:focus-within { outline: 2px solid color-mix(in srgb, var(--roxo) 42%, transparent); outline-offset: 2px; }
.jogadores-lote-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.jogadores-lote-choice > span:nth-of-type(2) { display: grid; gap: 0.16rem; min-width: 0; }
.jogadores-lote-choice strong { font-size: 0.79rem; }
.jogadores-lote-choice small { color: var(--texto-suave); font-size: 0.66rem; line-height: 1.35; }

.jogadores-lote-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--texto-suave);
}
.jogadores-lote-choice-icon.is-up { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); }
.jogadores-lote-choice-icon.is-down,
.jogadores-lote-choice-icon.is-reset { background: color-mix(in srgb, var(--vermelho) 13%, transparent); color: var(--vermelho); }
.jogadores-lote-choice-icon svg { width: 18px; height: 18px; }
.jogadores-lote-choice-check { width: 17px; height: 17px; color: var(--verde); opacity: 0; transform: scale(0.6); transition: 0.16s ease; }
.jogadores-lote-choice:has(input:checked) .jogadores-lote-choice-check { opacity: 1; transform: scale(1); }

.jogadores-lote-valor-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 1rem;
}

.jogadores-lote-stepper {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 38px 64px 38px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--borda-forte);
    border-radius: 13px;
    background: color-mix(in srgb, var(--fundo-card) 86%, #000 14%);
}

.jogadores-lote-stepper button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--texto);
    cursor: pointer;
}
.jogadores-lote-stepper button:hover { background: color-mix(in srgb, var(--roxo) 20%, transparent); }
.jogadores-lote-stepper button svg { width: 16px; height: 16px; }
.jogadores-lote-stepper input {
    width: 64px;
    height: 42px;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--borda);
    border-left: 1px solid var(--borda);
    border-radius: 0;
    background: transparent;
    color: var(--texto);
    font-size: 1rem;
    font-weight: 950;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
.jogadores-lote-stepper input::-webkit-inner-spin-button,
.jogadores-lote-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.jogadores-lote-stepper input:focus { outline: none; }

.jogadores-lote-preview,
.jogadores-lote-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.58rem;
    padding: 0.7rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--verde) 30%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--verde) 9%, transparent);
    color: var(--texto-suave);
    font-size: 0.71rem;
    line-height: 1.45;
}
.jogadores-lote-preview strong { color: var(--texto); }
.jogadores-lote-preview > svg,
.jogadores-lote-aviso > svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: var(--verde); }
.jogadores-lote-aviso { border-color: color-mix(in srgb, var(--roxo) 28%, transparent); background: color-mix(in srgb, var(--roxo) 8%, transparent); }
.jogadores-lote-aviso > svg { color: var(--roxo-suave); }
.jogadores-lote-aviso.is-warning { border-color: color-mix(in srgb, #f59e0b 35%, transparent); background: color-mix(in srgb, #f59e0b 9%, transparent); }
.jogadores-lote-aviso.is-warning > svg { color: #f59e0b; }

.jogadores-lote-modal-acoes { margin-top: 0.1rem; }
.jogadores-lote-modal-acoes .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; }
.jogadores-lote-modal-acoes .btn svg { width: 16px; height: 16px; }
.jogadores-lote-modal-acoes .btn.is-loading { opacity: 0.7; cursor: wait; }

@media (max-width: 720px) {
    body.jogadores-modo-selecao .container { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }

    .jogadores-lote-toolbar {
        position: fixed;
        right: 10px;
        left: 10px;
        top: auto;
        bottom: calc(82px + env(safe-area-inset-bottom));
        z-index: 320;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.62rem;
        width: auto;
        max-width: 540px;
        margin: 0 auto;
        padding: 0.68rem;
        border-radius: 18px;
        box-shadow: 0 20px 55px rgba(0, 0, 0, 0.48);
    }

    .jogadores-lote-resumo { padding-inline: 0.15rem; }
    .jogadores-lote-resumo small { white-space: normal; }
    .jogadores-lote-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 40px; width: 100%; }
    .jogadores-lote-acao { min-width: 0; padding-inline: 0.55rem; }
    .jogadores-lote-acao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .modal-jogadores-lote {
        align-items: flex-end;
        padding: 0;
    }

    .modal-jogadores-lote .jogadores-lote-modal-box {
        width: 100%;
        max-height: min(88svh, 780px);
        padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 24px 24px 0 0;
        animation: jogadoresLoteSheetEntrada 0.22s ease-out;
    }

    @keyframes jogadoresLoteSheetEntrada {
        from { transform: translateY(24px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}

@media (max-width: 480px) {
    .jogadores-lote-toolbar { bottom: calc(75px + env(safe-area-inset-bottom)); }
    .jogadores-lote-resumo small { font-size: 0.63rem; }
    .jogadores-lote-acao { gap: 0.35rem; font-size: 0.68rem; }
    .jogadores-lote-acao svg { width: 15px; height: 15px; }
    .jogadores-lote-modal-head { grid-template-columns: 42px minmax(0, 1fr); gap: 0.7rem; }
    .jogadores-lote-modal-icon { width: 42px; height: 42px; border-radius: 13px; }
    .jogadores-lote-escolhas:not(.jogadores-lote-escolhas-vertical) { grid-template-columns: 1fr; }
    .jogadores-lote-choice { padding: 0.65rem; }
    .jogadores-lote-choice-wide { grid-template-columns: 36px minmax(0, 1fr) 18px; }
    .jogadores-lote-choice-icon { width: 36px; height: 36px; }
    .jogadores-lote-modal-acoes { position: sticky; bottom: 0; padding-top: 0.4rem; background: linear-gradient(transparent, var(--fundo-card) 24%); }
}