/* ============================================================
   app.css — Pelada Championship
   Tokens (estilo Shadcn), nav-item, modal e utilitários.
   Carregado DEPOIS do Tailwind para que sobrescreva utilities.
   ============================================================ */

:root {
    /* Shadcn-like dark theme */
    --background:        240 10% 4%;
    --foreground:        0   0% 98%;
    --card:              240  6% 10%;
    --card-foreground:   0   0% 98%;
    --muted:             240  4% 16%;
    --muted-foreground:  240  5% 65%;
    --border:            240  4% 16%;
    --input:             240  4% 16%;
    --primary:           158 84% 35%;
    --primary-foreground:158 100% 6%;
    --ring:              158 84% 35%;
    --radius:            0.75rem;
    --theme-surface: #09090b;
    --theme-surface-2: #18181b;
    --theme-surface-3: #27272a;
    --theme-text: #f4f4f5;
    --theme-muted: #a1a1aa;
    --theme-border: #27272a;
    --theme-primary: #0f9f6e;
    --theme-primary-text: #04241b;
    --theme-primary-action: #0d875e;
    --theme-screen-accent: #0a6949;
    --club-primary: #0f9f6e;
    --club-primary-action: #0d875e;
    --club-screen-accent: #0a6949;
    --club-primary-action-foreground: #ffffff;
    --club-secondary: #ffffff;
    --club-tertiary: #151b2a;
    --club-primary-hsl: 158 84% 35%;
    --club-primary-foreground: #04241b;
    --nav-accent: #0f9f6e;
    --nav-accent-foreground: #ffffff;
    --peladacs-green: #0f9f6e;
}

body[data-theme="medium"] {
    --background: 220 18% 18%;
    --foreground: 210 40% 96%;
    --card: 220 16% 23%;
    --muted: 220 14% 29%;
    --muted-foreground: 214 24% 80%;
    --border: 220 12% 34%;
    --input: 220 14% 29%;
    --primary: 199 89% 48%;
    --primary-foreground: 222 47% 11%;
    --ring: 199 89% 48%;
    --theme-surface: #293548;
    --theme-surface-2: #344258;
    --theme-surface-3: #425169;
    --theme-text: #f1f5f9;
    --theme-muted: #cbd5e1;
    --theme-border: #536174;
    --theme-primary: #38bdf8;
    --theme-primary-text: #082f49;
    --theme-primary-action: #2f9fd0;
    --theme-screen-accent: #257ca4;
}

body[data-theme="club"] {
    --background: 220 18% 15%;
    --foreground: 210 40% 96%;
    --card: 220 16% 20%;
    --muted: 220 14% 26%;
    --muted-foreground: 214 22% 78%;
    --border: 220 12% 31%;
    --input: 220 14% 26%;
    --primary: var(--club-primary-hsl);
    --ring: var(--club-primary-hsl);
    --theme-surface: color-mix(in srgb, #222d3b 88%, var(--club-primary) 12%);
    --theme-surface-2: color-mix(in srgb, #2c394b 90%, var(--club-primary) 10%);
    --theme-surface-3: color-mix(in srgb, #3a485d 90%, var(--club-primary) 10%);
    --theme-text: #f1f5f9;
    --theme-muted: #c3ccd8;
    --theme-border: color-mix(in srgb, #4b5a70 88%, var(--club-primary) 12%);
    --theme-primary: var(--club-primary);
    --theme-primary-text: var(--club-primary-action-foreground);
    --theme-primary-action: var(--club-primary-action);
    --theme-screen-accent: var(--club-screen-accent);
}

html {
    /* NÃO usar overflow-x: hidden aqui — quebra position:fixed no iOS Safari */
    box-sizing: border-box;
    min-height: 100%;
    background-color: hsl(var(--background));
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    min-height: 100dvh;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    /* overflow: clip não cria scroll container, logo não afeta position:fixed */
    overflow-x: clip;
    max-width: 100vw;
    /* Impede bounce horizontal no iOS sem afetar scroll vertical */
    overscroll-behavior-x: none;
    /* Impede zoom por duplo-toque em complemento ao viewport user-scalable=no */
    touch-action: manipulation;
    /* Evita selecao de texto sem querer no mobile (toque em "botao" que na
       verdade so' e' um texto vira selecao + busca do Google no Android). */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Reabilita selecao onde o usuario realmente precisa digitar/copiar texto. */
input,
textarea,
[contenteditable="true"],
.user-select-text {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.app-header {
    position: fixed;
    z-index: 40;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
}

.app-header__inner {
    min-width: 0;
}

body[data-theme] > header,
body[data-theme] .bottom-nav {
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

body[data-theme] .desktop-nav-brand,
body[data-theme] .glass-card,
body[data-theme] .app-modal__box,
body[data-theme] [class~="bg-zinc-900"],
body[data-theme] [class~="bg-zinc-900/95"],
body[data-theme] [class~="bg-zinc-900/80"],
body[data-theme] [class~="bg-zinc-800"],
body[data-theme] [class~="bg-zinc-800/80"],
body[data-theme] [class~="bg-zinc-800/70"],
body[data-theme] [class~="bg-zinc-800/60"],
body[data-theme] [class~="bg-zinc-800/50"],
body[data-theme] [class~="bg-zinc-800/40"],
body[data-theme] [class~="bg-zinc-800/30"],
body[data-theme] [class~="bg-zinc-800/20"] {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

body[data-theme] [class~="bg-zinc-950"],
body[data-theme] [class~="bg-zinc-950/95"],
body[data-theme] [class~="bg-zinc-950/70"],
body[data-theme] [class~="bg-zinc-950/60"],
body[data-theme] [class~="bg-zinc-950/55"],
body[data-theme] [class~="bg-zinc-950/50"],
body[data-theme] [class~="bg-zinc-950/40"],
body[data-theme] [class~="bg-zinc-950/30"],
body[data-theme] [class~="bg-zinc-900/60"],
body[data-theme] [class~="bg-zinc-900/70"],
body[data-theme] [class~="bg-zinc-900/50"] {
    background: var(--theme-surface-2);
    border-color: var(--theme-border);
}

body[data-theme] [class~="border-zinc-800"],
body[data-theme] [class~="border-zinc-700"] {
    border-color: var(--theme-border);
}

body[data-theme] [class~="text-zinc-50"],
body[data-theme] [class~="text-zinc-100"],
body[data-theme] [class~="text-zinc-200"] {
    color: var(--theme-text);
}

body[data-theme] [class~="text-zinc-400"],
body[data-theme] [class~="text-zinc-500"] {
    color: var(--theme-muted);
}

body[data-theme] .cta-primary,
body[data-theme] .nav-item.is-active::before {
    background: var(--theme-primary-action);
    color: var(--theme-primary-text);
}

body[data-theme] .nav-item.is-active,
body[data-theme] .text-primary-400 {
    color: var(--theme-primary);
}

body[data-theme="club"] > header,
body[data-theme="club"] .bottom-nav,
body[data-theme="club"] .desktop-nav-brand {
    border-color: color-mix(in srgb, var(--club-primary) 46%, var(--theme-border));
}

/* ====================== CARD DIM (genérico) ======================
   Aplicar em qualquer card que deva parecer mais "apagado"/transparente
   que os cards vizinhos (ex.: métrica secundária, ainda não disponível).
   Usar junto de "border" (largura) do Tailwind; a cor vem daqui.
   Em tema custom, theme-overrides.css tem a versão que sobrescreve as
   regras genéricas de border/bg-zinc-* que ignoram opacidade. */
.card-dim {
    border-color: rgba(39, 39, 42, 0.5);   /* zinc-800 @ 30% */
    background-color: rgba(15, 15, 17, 0.68);
}

/* ====================== CONTENÇÃO MOBILE ====================== */
#app-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: clip;
    will-change: transform; /* GPU layer para animações de swipe */
}

#app-content::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 10%;
    right: 0;
    width: clamp(15rem, 42vw, 28rem);
    aspect-ratio: 40 / 53;
    pointer-events: none;
    background: var(--app-club-watermark, none) center / contain no-repeat;
    opacity: .07;
    filter: saturate(.85) contrast(1.12) drop-shadow(1.4rem 1.6rem 1.2rem rgba(0, 0, 0, .38));
    transform: translate3d(31%, 0, 0);
}

/* Compatibilidade com uma marca d'água que tenha permanecido em HTML de
   uma versão anterior: ela não pode voltar a ocupar espaço no fluxo. */
.app-tab-club-watermark {
    display: none !important;
}

/* O único escudo de fundo é o ::after de #app-content. */
.elenco-tab::before,
.torneios-tab::before,
.mercado-screen::before,
.amigos-tab::before {
    content: none !important;
    background: none !important;
    transform: none !important;
}

#app-content section,
#app-content .app-screen {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Padding inferior para não ficar atrás da bottom-nav (mobile) */
@media (max-width: 1100px) {
    body:not(.is-unauthenticated) #app-content {
        padding-bottom: 0;
    }

    body:not(.is-unauthenticated) #app-content > section {
        min-height: calc(100dvh - 3.5rem);
        padding-bottom: calc(4rem + 60px + env(safe-area-inset-bottom, 0px));
    }
}

/* ====================== SWIPE NAVIGATION ====================== */
@keyframes swipe-out-left {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-30%); opacity: 0; }
}
@keyframes swipe-out-right {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(30%); opacity: 0; }
}
@keyframes swipe-in-from-right {
    from { transform: translateX(40%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
@keyframes swipe-in-from-left {
    from { transform: translateX(-40%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ====================== AUTH STATE ====================== */
/* Esconde bottom-nav e libera o padding inferior quando
   o usuário não está autenticado (tela de login). */
body.is-unauthenticated .bottom-nav { display: none; }
body.is-unauthenticated [data-auth-only] { display: none; }
body.is-unauthenticated #btn-user-menu { display: none; }
body.is-unauthenticated #app-content { padding-bottom: 0; }
body.is-unauthenticated main#app-content > section { min-height: 100vh; }

/* Modal de compra de Pilas: preserva pacote, selo e preço na mesma linha
   mesmo em celulares estreitos. O HTML é compartilhado, então a apresentação
   fica centralizada aqui sem acoplar CSS aos módulos das abas. */
#pilas-pacotes-list [data-comprar-pacote] {
    padding: 0.75rem !important;
}

#pilas-pacotes-list [data-comprar-pacote] > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
}

#pilas-pacotes-list [data-comprar-pacote] > div > div {
    min-width: 0;
    gap: 0.35rem !important;
    flex-wrap: nowrap;
}

#pilas-pacotes-list [data-comprar-pacote] > div > div > i {
    flex: 0 0 auto;
    font-size: 0.82rem !important;
}

#pilas-pacotes-list [data-comprar-pacote] > div > div > span:nth-of-type(1) {
    min-width: 0;
    font-size: 0.82rem !important;
    line-height: 1.1;
    white-space: nowrap;
}

#pilas-pacotes-list [data-comprar-pacote] > div > div > span:nth-of-type(2) {
    flex: 0 0 auto;
    margin-left: 0 !important;
    padding: 0.15rem 0.32rem !important;
    font-size: 0.46rem !important;
    line-height: 1;
    white-space: nowrap;
}

#pilas-pacotes-list [data-comprar-pacote] > div > span {
    align-self: center;
    font-size: 0.9rem !important;
    line-height: 1;
    white-space: nowrap;
}

#pilas-pacotes-list [data-comprar-pacote] > p {
    margin-top: 0.45rem !important;
    font-size: 0.62rem !important;
}

#pilas-contato {
    font-size: 0.68rem !important;
    line-height: 1.4;
}

@keyframes estadio-hammer-hit {
    0%, 100% { transform: rotate(-18deg) translateY(0); }
    45% { transform: rotate(18deg) translateY(1px); }
    62% { transform: rotate(-8deg) translateY(0); }
}

.estadio-reforma-icon__hammer {
    transform-origin: 55% 80%;
    animation: estadio-hammer-hit 0.9s ease-in-out infinite;
}

.estadio-reforma-icon {
    box-shadow: 0 0 0 1px rgba(161, 161, 170, 0.08), 0 0 22px rgba(161, 161, 170, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    .estadio-reforma-icon__hammer {
        animation: none;
    }
}

.desktop-nav-brand {
    display: none;
}

.app-device-badge {
    display: none;
    min-height: 28px;
    align-items: center;
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    background: hsl(var(--card));
    color: rgb(161 161 170);
    padding: 0 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Scrollbar minimalista (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(240 4% 24%); }

/* ====================== NAV ITEM ====================== */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: rgb(113 113 122);            /* zinc-500 */
    text-decoration: none;
    gap: 3px;
    transition: color 160ms ease, transform 160ms ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-item:hover { color: rgb(228 228 231); } /* zinc-200 */
.nav-item:active .nav-icon { transform: scale(0.92); }
.nav-item .nav-icon {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-item .nav-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.nav-item.is-active {
    color: var(--nav-accent);
}
.nav-item.is-active .nav-icon {
    transform: translateY(-2px);
}

/* Pílula de destaque (indicador do item ativo) */
.nav-item.is-active { position: relative; }
.nav-item.is-active::before {
    content: "";
    position: absolute;
    top: 4px;
    width: 18px;
    height: 3px;
    border-radius: 9999px;
    background: #1eb783;
    box-shadow: 0 0 10px rgba(30, 183, 131, 0.6);
}

.bottom-nav__list {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    padding: 0 4px;
}

.bottom-nav__list::-webkit-scrollbar {
    display: none;
}

.bottom-nav__list > li {
    flex: 0 0 72px;
    min-width: 72px;
    scroll-snap-align: center;
}

.route-tab-animate {
    animation: route-tab-in 220ms cubic-bezier(.2,.8,.2,1);
}

@keyframes route-tab-in {
    from {
        opacity: .72;
        transform: translateY(8px) scale(.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ====================== MODAL ====================== */
.app-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}
.app-modal.app-modal--hidden {
    display: none;
}
.app-modal.is-open { pointer-events: auto; }

.app-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 220ms ease-out;
}
.app-modal.is-open .app-modal__backdrop { opacity: 1; }

.app-modal__viewport {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-modal__box {
    position: relative;
    width: 100%;
    max-width: calc(100vw - 2rem);
    min-width: 0;
    background: hsl(240 6% 10%);
    border: 1px solid hsl(240 4% 16%);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 220ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}
.app-modal.is-open .app-modal__box {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.app-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid hsl(240 4% 16%);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    flex-shrink: 0;
}
.app-modal__title {
    min-width: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: hsl(var(--foreground));
    overflow-wrap: anywhere;
}
.app-modal__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: rgb(161 161 170);            /* zinc-400 */
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.app-modal__close:hover {
    background: hsl(240 4% 16%);
    color: rgb(228 228 231);            /* zinc-200 */
}
.app-modal__close:focus-visible {
    outline: 2px solid #1eb783;
    outline-offset: 2px;
}
.app-modal__body {
    min-width: 0;
    padding: 1.25rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-modal__body * {
    max-width: 100%;
}

/* Aceite legal obrigatorio: estrutura fisica de modal, com documento rolavel. */
.app-modal--legal .app-modal__box {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(100%, 52rem);
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
}
.app-modal--legal .app-modal__header {
    padding: 0.875rem 1rem;
}
.app-modal--legal .app-modal__body {
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.app-modal--legal .app-modal__footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid hsl(240 4% 20%);
    background: hsl(240 6% 9%);
}
.legal-consent {
    padding: 1rem;
}
.legal-consent__dev {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    padding: 0.75rem;
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: 0.625rem;
    background: rgba(120, 53, 15, .22);
    color: #fde68a;
    font-size: 0.75rem;
    line-height: 1.4;
}
.legal-consent__intro {
    margin: 0 0 0.875rem;
    color: rgb(161 161 170);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.legal-consent__documents {
    display: grid;
    gap: 0.625rem;
}
.legal-consent__document {
    border: 1px solid hsl(240 4% 22%);
    border-radius: 0.625rem;
    background: rgba(24, 24, 27, .7);
    overflow: hidden;
}
.legal-consent__document summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    cursor: pointer;
    color: rgb(244 244 245);
    font-size: 0.8125rem;
    font-weight: 750;
}
.legal-consent__document summary small {
    color: rgb(113 113 122);
    font-size: 0.625rem;
    white-space: nowrap;
}
.legal-consent__copy {
    padding: 0 0.875rem 0.875rem;
    color: rgb(212 212 216);
    font-size: 0.75rem;
    line-height: 1.55;
}
.legal-consent__copy h4 {
    margin: 1rem 0 0.375rem;
    color: rgb(244 244 245);
    font-size: 0.8125rem;
}
.legal-consent__copy p {
    margin: 0.375rem 0;
}
.legal-consent__copy ul {
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.125rem;
    list-style: disc;
}
.legal-consent__copy li + li {
    margin-top: 0.3rem;
}
.legal-consent__checks {
    display: grid;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0.875rem;
    border: 1px solid hsl(240 4% 22%);
    border-radius: 0.625rem;
}
.legal-consent__checks legend {
    padding: 0 0.375rem;
    color: rgb(244 244 245);
    font-size: 0.75rem;
    font-weight: 750;
}
.legal-consent__checks label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: rgb(212 212 216);
    font-size: 0.75rem;
    line-height: 1.4;
}
.legal-consent__checks input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    accent-color: #1eb783;
}
.legal-consent__error {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(239, 68, 68, .35);
    border-radius: 0.5rem;
    background: rgba(127, 29, 29, .2);
    color: #fecaca;
    font-size: 0.75rem;
}
.legal-consent__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
}
.legal-consent__decline,
.legal-consent__accept {
    min-height: 2.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 750;
}
.legal-consent__decline {
    border: 1px solid hsl(240 4% 28%);
    background: transparent;
    color: rgb(161 161 170);
}
.legal-consent__accept {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    background: #1eb783;
    color: #04140f;
}
.legal-consent__accept:disabled {
    cursor: not-allowed;
    opacity: .42;
}
@media (max-width: 520px) {
    .legal-consent__footer {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    }
    .legal-consent__decline,
    .legal-consent__accept {
        width: 100%;
        padding-inline: 0.5rem;
    }
}

body.device-mobile .app-modal__viewport { padding-inline: 0; }
body.device-mobile .app-modal__box { width: 99vw; min-width: 0; max-width: 99vw; }

/*
 * Modal em 3 partes físicas (cabeçalho fixo, corpo com scroll, rodapé fixo).
 * Usado pelo editor de identidade visual (#vi-tabs) e pelo wizard de criação
 * de clube (#vi-wizard) — telas com "Salvar"/navegação sempre visível,
 * substituindo o antigo truque de position:sticky + margem negativa.
 */
.app-modal__box:has(.app-modal-3part) {
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
}
.app-modal__body:has(.app-modal-3part) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.app-modal-3part {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
.app-modal-3part__head {
    flex: 0 0 auto;
    padding: 1.25rem 1.25rem 0;
}
.app-modal-3part__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1.25rem;
}
.app-modal-3part__foot {
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem 1.25rem;
    margin-top: 0.75rem;
    background: #0c0c0f;
    border-top: 1px solid #27272a;
}

/* Miniaturas do preview do editor de identidade visual (bandeira/camisa1/
   camisa2/escudo) — clicaveis no editor por abas, trocam a subaba ativa. */
.wiz-preview-item[data-preview-tab] {
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 0.25rem;
    transition: background-color .15s ease, transform .15s ease;
}
.wiz-preview-item[data-preview-tab]:hover {
    background: rgba(255, 255, 255, .05);
}
.wiz-preview-item--active {
    background: rgba(30, 183, 131, .12);
    box-shadow: 0 0 0 1px rgba(30, 183, 131, .5) inset;
}
.wiz-preview-item--active span {
    color: #34d399;
}

/*
 * Editor de identidade visual por abas (#vi-tabs), estrutura em 3 partes:
 * cabeçalho do modal reduzido (::header) + corpo com nav/prévia/cores +
 * rodapé fixo do modal (Cancelar/Salvar). Cabeçalho/rodapé nativos do
 * modal (.app-modal__header / .app-modal__body) são comprimidos via
 * :has() para não precisar de classe extra passada pro openModal().
 */
.app-modal__box:has(#vi-tabs) .app-modal__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    flex: 0 0 10%;
    gap: 0.25rem 0.5rem;
    padding: 0.25rem 1rem;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.app-modal__box:has(#vi-tabs) .app-modal__title {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1;
}
.app-modal__box:has(#vi-tabs) .app-modal__close {
    grid-column: 2;
    grid-row: 1;
    width: 1.5rem;
    height: 1.5rem;
}
.app-modal__box:has(#vi-tabs) {
    display: grid;
    grid-template-rows: 10% minmax(0, 80%) 10%;
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
    width: min(100%, calc(100vw - 2rem));
    min-width: 0;
    overflow-x: clip;
    background: #123a20;
}
.app-modal__box:has(#vi-tabs)::before {
    position: absolute;
    z-index: 0;
    inset: -32%;
    content: "";
    pointer-events: none;
    background: url("../img/gramado.jpg") center / cover no-repeat;
    transform: scale(1.3) translate3d(-6%, -4%, 0);
    transform-origin: center;
    will-change: transform;
    animation: vi2-pitch-drift 38s ease-in-out infinite alternate;
}
.app-modal__box:has(#vi-tabs)::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background: rgba(2, 12, 7, .68);
}
.app-modal__box:has(#vi-tabs) > * {
    position: relative;
    z-index: 2;
}
.app-modal__box:has(#vi-tabs) .app-modal__header {
    grid-row: 1;
    height: 100%;
    background: rgba(5, 20, 11, .76);
}
.app-modal__body:has(#vi-tabs) {
    grid-row: 2;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.vi2 {
    display: block;
    height: 100%;
    min-height: 0;
}
.vi2-scroll {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    touch-action: pan-y;
    overscroll-behavior: contain;
    box-sizing: border-box;
}
.vi2-nav {
    padding: 0.5rem 1rem 0;
}
.vi2-context-title {
    margin: 0 0 0.375rem;
    color: rgb(244 244 245);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.2;
}
.vi2-section-label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgb(161 161 170);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.25;
}
.vi2-header-tabs {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
.vi2-header-tabs .vi2-l1 {
    margin: 0;
}
.vi2-header-tabs .vi2-l1__btn {
    min-width: 0;
    min-height: 2.75rem;
}
/* Nível 1: Bandeira | Escudo | Camisa 1 | Camisa 2 */
.vi2-l1 {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}
.vi2-l1__btn[data-vi-tab="1"] { order: 1; }
.vi2-l1__btn[data-vi-tab="2"] { order: 2; }
.vi2-l1__btn[data-vi-tab="3"] { order: 3; }
.vi2-l1__btn[data-vi-tab="0"] { order: 4; }
.vi2-l1__btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-height: 3.5rem;
    padding: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-align: center;
    border-radius: 0.5rem;
    border: 1px solid hsl(240 4% 20%);
    background: hsl(240 5% 14%);
    color: rgb(161 161 170);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vi2-l1__btn:hover {
    border-color: hsl(240 4% 32%);
    color: rgb(228 228 231);
}
.vi2-l1__btn.is-active {
    background: rgba(30, 183, 131, .14);
    border-color: rgba(30, 183, 131, .6);
    color: #34d399;
}
/* Aba ainda nao alcancada no wizard de fundacao de clube (ordem obrigatoria
   Escudo -> Camisa 1 -> Camisa 2 -> Bandeira, ver CRIAR_TAB_ORDER em
   screens-auth.js): visivel mas nao clicavel ate a anterior ser concluida. */
.vi2-l1__btn.is-locked,
.vi2-l1__btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.vi2-l1__btn.is-locked:hover,
.vi2-l1__btn:disabled:hover {
    border-color: hsl(240 4% 20%);
    color: rgb(161 161 170);
}
.vi2-l1__thumb {
    display: block;
    width: 1.75rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    overflow: hidden;
}
.vi2-l1__thumb--bandeira {
    width: 2.125rem;
    height: 1.375rem;
}
.vi2-l1__thumb--vertical {
    width: 1.25rem;
    height: 1.5rem;
    border-radius: 0;
    overflow: visible;
}
.vi2-l1__thumb svg {
    width: 100%;
    height: 100%;
}
.vi2-l1__label {
    line-height: 1.1;
}
.vi2-level {
    margin-top: 0.5rem;
}
.vi2-level__label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(113 113 122);
    margin-bottom: 0.375rem;
}
/* Corpo da aba: prévia do contexto ativo, ~80% da altura disponível */
.vi2-preview {
    position: relative;
    z-index: 3;
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 1rem;
    overflow-x: clip;
    box-sizing: border-box;
    touch-action: pan-y;
}
.vi2-preview--bandeira {
    margin-top: 36px;
}
.vi2-preview-object {
    display: block;
    visibility: visible;
    opacity: 1;
}
.vi2-shield-preview {
    display: grid;
    place-items: center;
    transform: translateY(20px);
}
.vi2-shield-preview > svg {
    width: 98% !important;
    height: 98% !important;
}
.vi2-flag-static {
    position: relative;
    overflow: hidden;
    border-radius: 0.35rem;
}
.vi2-flag-static > svg {
    display: block;
    width: 100%;
    height: 100%;
}
.vi2-flag-grid {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.vi2-flag-sector {
    display: grid;
    min-width: 0;
    min-height: 0;
    place-items: center;
    padding: 0.2rem;
    border: 1px dashed rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .04);
    color: rgba(255, 255, 255, .26);
    cursor: pointer;
}
.vi2-flag-sector.is-selected {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(0, 0, 0, .16);
    color: #fff;
}
.vi2-flag-sector.is-pending {
    border-style: solid;
    border-color: rgba(216, 180, 254, .8);
    background: rgba(168, 85, 247, .18);
    color: #d8b4fe;
}
.vi2-flag-sector__shield {
    display: block;
    width: 68%;
    height: 82%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .48));
}
.vi2-flag-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.vi2-add-escudo-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(216, 180, 254, .4);
    border-radius: 0.625rem;
    background: rgba(168, 85, 247, .16);
    color: #d8b4fe;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.vi2-add-escudo-btn:hover {
    background: rgba(168, 85, 247, .26);
    border-color: rgba(216, 180, 254, .6);
}
.vi2-add-escudo-btn i {
    color: #d8b4fe;
}
.vi2-add-escudo-btn__price {
    margin-left: 0.125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(168, 85, 247, .3);
    color: #f3e8ff;
    font-weight: 800;
}
.vi2-charge-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 1rem 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: 0.5rem;
    background: rgba(120, 53, 15, .32);
    color: #fde68a;
    font-size: 0.6875rem;
    line-height: 1.3;
}
.vi2-preview-shine {
    position: relative;
    overflow: visible;
}
.vi2-preview-shine svg {
    filter:
        drop-shadow(0 0 5px rgba(255, 255, 255, .3))
        drop-shadow(0 0 13px rgba(113, 255, 184, .18))
        drop-shadow(0 8px 9px rgba(0, 0, 0, .34));
}
.vi2-shield-preview svg,
.vi2-shirt-preview svg {
    position: relative;
    z-index: 1;
}
.vi2-shirt-preview__shirt {
    position: absolute;
    z-index: 1;
    inset: 0;
}
.vi2-shirt-preview__shield {
    position: absolute;
    z-index: 3;
    top: calc(31% + 20px);
    width: 28px;
    height: 33px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}
.vi2-shirt-stack {
    position: relative;
    width: min(100%, 350px);
    max-width: calc(100vw - 3rem);
    height: 343px;
    margin: 0 auto;
    overflow: clip;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}
.vi2-shirt-stack__item {
    position: absolute !important;
    margin: 0 !important;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    appearance: none;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}
.vi2-shirt-stack__item svg,
.vi2-shirt-stack__item img,
.vi2-shirt-stack__item > div {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.vi2-shirt-stack__item:focus-visible {
    outline: 2px solid #34d399;
    outline-offset: 3px;
    border-radius: 1rem;
}
.vi2-shirt-stack__item--secondary {
    z-index: 1;
    top: 18px;
    right: 0;
}
.vi2-shirt-stack__item--primary {
    z-index: 2;
    bottom: 0;
    left: 0;
}
@keyframes vi2-pitch-drift {
    0% { transform: scale(1.3) translate3d(-7%, -5%, 0); }
    50% { transform: scale(1.5) translate3d(7%, 6%, 0); }
    100% { transform: scale(1.36) translate3d(-5%, 8%, 0); }
}
.vi2-symbol-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}
#vi-tabs #svg-biblioteca-grid {
    padding: 0.25rem;
    scroll-padding-inline: 0.25rem;
}
#vi-tabs .bib-card {
    width: 3rem;
    height: 3rem;
    padding: 0.4375rem;
}
.vi2-symbol-search {
    display: inline-flex;
    flex: 0 0 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    border: 1px dashed rgb(82 82 91);
    border-radius: 0.5rem;
    background: rgb(24 24 27);
    color: rgb(161 161 170);
    font-size: 0.5625rem;
}
.vi2-size-position {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
}
.vi2-icon-radio {
    display: grid;
    min-height: 2rem;
    place-items: center;
    padding: 0.375rem;
    font-size: 0.75rem;
}
#vi-tabs label > [data-wiz-radio] + div {
    border-color: rgb(63 63 70);
    background: transparent;
    color: rgb(161 161 170);
    box-shadow: none;
}
#vi-tabs label.is-selected > [data-wiz-radio] + div,
#vi-tabs [data-wiz-radio]:checked + div {
    border-color: #1eb783;
    background: rgba(30, 183, 131, .16);
    color: #a7f3d0;
    box-shadow: 0 0 0 1px rgba(30, 183, 131, .35), 0 0 10px rgba(30, 183, 131, .18);
}
#vi-tabs label.is-selected > div:last-child,
#vi-tabs label:has([data-wiz-radio]:checked) > div:last-child {
    color: #34d399;
    font-weight: 700;
}
/* Rodapé da ABA: cores do contexto ativo */
.vi2-colors {
    flex: 1 1 auto;
    min-width: 0;
}
.vi2-colors .grid { gap: 0.375rem; }
.vi2-colors label {
    margin-bottom: 0.125rem;
    overflow: hidden;
    font-size: 0.5rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vi2-colors input[type="color"],
.vi2-colors [data-color-trigger] {
    width: 2rem;
    height: 2rem;
}
.vi2-colors [class*="wiz-hex-"] { display: none; }
/* Rodapé do MODAL: Cancelar / Salvar — max 50px */
.vi2-foot {
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    background: rgba(4, 15, 9, .88);
    border-top: 1px solid #27272a;
    overflow: hidden;
    box-sizing: border-box;
}
.app-modal__box:has(#vi-tabs) > .app-modal__footer {
    position: relative;
    z-index: 2;
    grid-row: 3;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
.vi2-foot__btn {
    display: inline-grid;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    place-items: center;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .15s ease;
}
.vi2-foot__btn:hover {
    filter: brightness(1.08);
}
.vi2-foot__btn--ghost {
    background: transparent;
    border-color: hsl(240 4% 24%);
    color: rgb(212 212 216);
}
.vi2-foot__btn--primary {
    background: linear-gradient(135deg, #1eb783, #17a074);
    color: #04140f;
}

#vi-tabs .vi2-nav label.w-28 { width: 5rem; }
#vi-tabs .vi2-nav label.w-28 > div:nth-of-type(1) { max-height: 5.25rem; }
#vi-tabs .vi2-level .rounded-lg.border-2.px-3.py-2 {
    padding: 0.375rem 0.5rem;
    font-size: 0.6875rem;
}
#vi-tabs #custicon-q,
#vi-tabs #custicon-btn {
    min-height: 2rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* A seleção é feita por clique; esta tela não usa respostas de hover. */
.app-modal__box:has(#vi-tabs) .vi2-nav *,
.app-modal__box:has(#vi-tabs) .vi2-header-tabs * {
    transition: none;
}
.app-modal__box:has(#vi-tabs) .vi2-nav label:not(:has(input:checked)):hover > div,
.app-modal__box:has(#vi-tabs) .vi2-nav .bib-card:not(.border-primary-500):hover {
    border-color: rgb(63 63 70);
}
.app-modal__box:has(#vi-tabs) .vi2-l1__btn:not(.is-active):hover {
    border-color: hsl(240 4% 20%);
    color: rgb(161 161 170);
}

@media (max-width: 520px) {
    .app-modal__box:has(#vi-tabs) .app-modal__header {
        gap: 0.1875rem 0.375rem;
        padding-inline: 0.5rem;
    }
    .app-modal__box:has(#vi-tabs) .app-modal__title {
        font-size: 0.625rem;
    }
    .vi2-header-tabs .vi2-l1 {
        gap: 0.25rem;
    }
    .vi2-header-tabs .vi2-l1__btn {
        min-height: 2.625rem;
        padding-inline: 0.125rem;
        font-size: 0.5625rem;
    }
    .vi2-size-position {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-modal__box:has(#vi-tabs)::before {
        animation: none;
    }
}

/* Body lock quando modal está aberto — position:fixed é aplicado inline via JS (iOS Safari) */
body.modal-open {
    overflow: hidden;
}

/* ====================== UTILITÁRIOS ====================== */
@keyframes pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
/* Card gamificado reutilizável */
.glass-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
    border: 1px solid hsl(240 4% 16%);
    border-radius: var(--radius);
}

/* Toque de "energia" para o botão primário em ações críticas */
.cta-primary {
    background: linear-gradient(180deg, #1eb783 0%, #0f9f6e 100%);
    color: #04241b;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 24px -10px rgba(30, 183, 131, 0.55);
    transition: filter 150ms ease, transform 150ms ease;
}
.cta-primary:hover { filter: brightness(1.06); }
.cta-primary:active { transform: scale(0.98); }

/* ============================================================
   Botões de Confirmação (Identidade Visual)
   Utilizados em modais de confirmação com 3 variantes:
   - coins (amarelo, jogo)
   - pilas (roxo, premium)
   - default (azul, sem custo)
   ============================================================ */
.app-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: filter 150ms ease, transform 150ms ease, background 150ms ease;
    cursor: pointer;
}

.app-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.app-confirm-btn--cancel {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
}

.app-confirmacao-form {
    width: 100%;
}

.app-modal--confirmacao .app-modal__body {
    padding-top: 1rem;
}

.app-modal--confirmacao .app-modal__body > form,
.app-modal--confirmacao .app-modal__body > div {
    width: 100%;
}

@media (max-width: 640px) {
    .app-modal__box {
        width: 99vw !important;
        max-width: 99vw !important;
    }
}

.app-confirm-btn:disabled:hover {
    filter: none;
}

.app-confirm-btn:not(:disabled):hover {
    filter: brightness(1.08);
}

.app-confirm-btn:not(:disabled):active {
    transform: scale(0.97);
}

.app-confirm-btn--coins {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 8px 16px -4px rgba(245, 158, 11, 0.4);
    border-color: #d97706;
}

.app-confirm-btn--coins:not(:disabled):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 12px 20px -6px rgba(245, 158, 11, 0.5);
}

.app-confirm-btn--pilas {
    background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    color: #faf5ff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 16px -4px rgba(168, 85, 247, 0.4);
    border-color: #7e22ce;
}

.app-confirm-btn--pilas:not(:disabled):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 12px 20px -6px rgba(168, 85, 247, 0.5);
}

.app-confirm-btn--default {
    background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 8px 16px -4px rgba(59, 130, 246, 0.4);
    border-color: #1d4ed8;
}

.app-confirm-btn--default:not(:disabled):hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 12px 20px -6px rgba(59, 130, 246, 0.5);
}

.app-user-menu-button {
    display: inline-grid;
    place-items: center;
    height: 36px;
    width: 36px;
    padding: 3px;
    border: 1px solid hsl(var(--theme-border, 240 4% 16%));
    border-radius: 999px;
    background: hsl(var(--theme-surface-2, 240 6% 10%));
    color: hsl(var(--theme-text, 0 0% 98%));
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.app-user-menu-button:hover {
    border-color: rgba(15, 159, 110, 0.42);
    background: rgba(15, 159, 110, 0.12);
}

.app-user-menu-button:active {
    transform: scale(0.98);
}

.app-user-menu-button__avatar {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(63, 63, 70, 0.7);
    background: rgba(63, 63, 70, 0.4);
    color: rgb(212 212 216);
}

.app-user-menu-button__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ====================== DEVICE-AWARE DESKTOP ====================== */
@media (min-width: 1101px) {
    body.device-desktop:not(.is-unauthenticated) {
        --desktop-nav-width: 228px;
        max-width: none;
        overflow-x: clip;
    }

    body.device-desktop:not(.is-unauthenticated) .app-device-badge {
        display: inline-flex;
    }

    body.device-desktop:not(.is-unauthenticated) .app-header {
        left: var(--desktop-nav-width);
        width: auto;
        height: 52px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-header__inner {
        max-width: none;
        padding-left: 18px;
        padding-right: 18px;
        overflow: visible;
    }

    body.device-desktop:not(.is-unauthenticated) header .w-9.h-9 {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    body.device-desktop:not(.is-unauthenticated) #btn-user-menu {
        width: 32px;
        height: 32px;
    }

    body.device-desktop:not(.is-unauthenticated) main#app-content {
        width: calc(100% - var(--desktop-nav-width));
        max-width: none;
        min-width: 0;
        margin-left: var(--desktop-nav-width);
        padding-top: 52px;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        overflow-x: visible;
        background-color: hsl(var(--background));
    }

    body.device-desktop:not(.is-unauthenticated) main#app-content > section {
        /* O fundo ocupa toda a largura; o conteúdo interno é limitado abaixo. */
        min-width: 0;
        min-height: calc(100vh - 52px);
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.device-desktop:not(.is-unauthenticated) .app-screen {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    body.device-desktop:not(.is-unauthenticated) .elenco-tab {
        overflow: visible;
    }

    body.device-desktop:not(.is-unauthenticated) .torneios-tab {
        overflow-x: clip;
        overflow-y: visible;
    }

    body.device-desktop:not(.is-unauthenticated) .torneios-tab > *,
    body.device-desktop:not(.is-unauthenticated) .torneios-tab [data-torneios-content],
    body.device-desktop:not(.is-unauthenticated) .torneios-tab [data-torneios-panel] {
        min-width: 0;
        max-width: 100%;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard {
        display: grid;
        gap: 12px;
    }

    /* A tela inicial usa duas áreas de leitura no desktop. No mobile, a
       estrutura original continua empilhada e sem qualquer sobrescrita. */
    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        padding: 24px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance > header,
    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance > .inicio-tournaments {
        grid-column: 1 / -1;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance > header {
        margin-bottom: 8px;
        padding-top: 20px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance > #dashboard-elenco,
    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance > section:has(.inicio-management-grid) {
        min-width: 0;
        margin-bottom: 0;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance .inicio-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance .inicio-management-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-glance .inicio-management-item {
        min-height: 126px;
    }

    /* Listas paralelas deixam de desperdiçar largura no desktop. */
    body.device-desktop:not(.is-unauthenticated) .torneios-tab [data-torneios-panel]:not(.hidden) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
    }

    body.device-desktop:not(.is-unauthenticated) .torneios-tab [data-torneios-panel="internos"] > * {
        grid-column: 1 / -1;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-hero {
        min-height: 118px;
        padding: 18px 20px;
        border-radius: 12px;
        background:
            radial-gradient(circle at right top, rgba(255,255,255,0.08), transparent 32%),
            linear-gradient(135deg, hsl(240 6% 11%) 0%, hsl(240 10% 5%) 100%);
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-hero__glow {
        width: 220px;
        height: 220px;
        top: -80px;
        right: -56px;
        opacity: 0.12 !important;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-hero__inner {
        align-items: center;
        min-height: 78px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-hero__badge > div {
        width: 50px;
        height: 58px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-hero__content h1 {
        max-width: 620px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-hero__meta {
        gap: 8px;
        margin-top: 10px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-hero__metric {
        min-height: 30px;
        border: 1px solid hsl(var(--border));
        border-radius: 999px;
        background: rgb(24 24 27 / 0.72);
        padding: 0 10px;
        font-size: 12px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-grid > div {
        min-height: 92px;
        padding: 13px 14px;
    }

    /* Folha, Sócios/Marketing e Compras+Avisos ja carregam seu proprio card
       (borda/fundo/padding) quando o conteudo chega via fetch; sem isto,
       herdavam o padding generico acima e ficavam com caixa dentro de caixa. */
    body.device-desktop:not(.is-unauthenticated) #clube-folha-card,
    body.device-desktop:not(.is-unauthenticated) #marketing-card,
    body.device-desktop:not(.is-unauthenticated) .app-dashboard-extras {
        min-height: 0;
        padding: 0;
    }

    /* Compras pendentes + Avisos do clube ocupam 2 das 4 colunas — ficam lado a
       lado com Folha e Sócios/Marketing na mesma linha, em vez de empilhados
       ocupando a largura toda sozinhos. */
    body.device-desktop:not(.is-unauthenticated) .app-dashboard-extras {
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
    }

    body.device-desktop:not(.is-unauthenticated) .app-dashboard-extras > * {
        margin: 0;
    }

    body.device-desktop:not(.is-unauthenticated) .app-shortcuts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-shortcuts a {
        min-height: 70px;
        display: grid;
        align-content: center;
        justify-items: center;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-page {
        display: grid;
        gap: 12px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-identity {
        display: grid;
        grid-template-columns: minmax(320px, 0.9fr) minmax(300px, 0.7fr);
        gap: 12px;
        align-items: stretch;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-flag {
        min-height: 260px;
        max-height: 300px;
        border: 1px solid hsl(var(--border));
        border-radius: 12px;
        aspect-ratio: auto !important;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-flag__media svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-kits {
        min-height: 260px;
        display: grid;
        align-content: center;
        border-radius: 12px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-kits > .flex {
        justify-content: center;
        gap: 24px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-kits .w-20.h-24 {
        width: 76px;
        height: 92px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-club-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    /* ── Elenco no desktop ───────────────────────────────────────────
       A grade organiza os blocos da aba; a tabela acompanha integralmente
       o card para não deixar uma faixa vazia depois da coluna de ações. */
    body.device-desktop:not(.is-unauthenticated) [data-elenco-conteudo] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    body.device-desktop:not(.is-unauthenticated) [data-elenco-conteudo] > * {
        grid-column: 1 / -1;
        /* Neutraliza o "space-y-3" do Tailwind (margin-top nos irmaos) —
           o gap do grid ja cuida do espacamento, sem isso ficava dobrado. */
        margin-top: 0;
    }

    body.device-desktop:not(.is-unauthenticated) [data-elenco-jogadores-tabela] table {
        width: 100%;
        max-width: none;
    }

    body.device-desktop:not(.is-unauthenticated) .bottom-nav {
        top: 0;
        bottom: auto;
        left: 0;
        right: auto;
        width: var(--desktop-nav-width);
        height: 100vh;
        border-top: 0;
        border-right: 1px solid hsl(var(--border));
        background:
            linear-gradient(180deg, rgb(12 12 15) 0%, rgb(7 7 9) 100%);
        box-shadow: 16px 0 36px -32px rgba(0, 0, 0, 0.85);
    }

    body.device-desktop:not(.is-unauthenticated) .desktop-nav-brand {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 58px;
        margin: 16px 14px 10px;
        padding: 10px 10px;
        color: rgb(244 244 245);
        text-decoration: none;
        border-radius: 10px;
        border: 1px solid rgba(63, 63, 70, 0.72);
        background: rgba(24, 24, 27, 0.72);
    }

    body.device-desktop:not(.is-unauthenticated) .desktop-nav-brand:hover {
        border-color: rgba(15, 159, 110, 0.38);
        background: rgba(24, 24, 27, 0.95);
    }

    body.device-desktop:not(.is-unauthenticated) .desktop-nav-brand__mark {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: linear-gradient(180deg, #1eb783 0%, #0f9f6e 100%);
        color: #04241b;
        font-size: 14px;
        font-weight: 900;
        box-shadow: 0 10px 22px -14px rgba(30, 183, 131, 0.9);
    }

    body.device-desktop:not(.is-unauthenticated) .desktop-nav-brand__text {
        min-width: 0;
        display: grid;
        gap: 1px;
        line-height: 1.1;
    }

    body.device-desktop:not(.is-unauthenticated) .desktop-nav-brand strong {
        display: block;
        color: rgb(244 244 245);
        font-size: 14px;
        font-weight: 850;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.device-desktop:not(.is-unauthenticated) .desktop-nav-brand small {
        display: block;
        color: rgb(113 113 122);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    body.device-desktop:not(.is-unauthenticated) .bottom-nav ul {
        height: auto;
        max-width: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 8px 14px 14px;
    }

    body.device-desktop:not(.is-unauthenticated) .bottom-nav li {
        height: auto;
    }

    body.device-desktop:not(.is-unauthenticated) .nav-item {
        min-height: 40px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 11px;
        padding: 0 11px;
        border: 1px solid transparent;
        border-radius: 8px;
        font-size: 12px;
        color: rgb(161 161 170);
    }

    body.device-desktop:not(.is-unauthenticated) .nav-item:hover {
        background: rgba(39, 39, 42, 0.72);
        border-color: hsl(var(--border));
        color: rgb(244 244 245);
    }

    body.device-desktop:not(.is-unauthenticated) .nav-item .nav-icon {
        width: 16px;
        font-size: 14px;
        text-align: center;
    }

    body.device-desktop:not(.is-unauthenticated) .nav-item .nav-label {
        font-size: 12px;
        font-weight: 700;
    }

body.device-desktop:not(.is-unauthenticated) .nav-item.is-active {
        background: color-mix(in srgb, var(--nav-accent) 16%, transparent);
        border-color: color-mix(in srgb, var(--nav-accent) 38%, transparent);
        color: var(--nav-accent);
    }

    body.device-desktop:not(.is-unauthenticated) .nav-item.is-active .nav-icon {
        transform: none;
    }

    body.device-desktop:not(.is-unauthenticated) .nav-item.is-active::before {
        top: 8px;
        left: -1px;
        width: 3px;
        height: 18px;
        border-radius: 999px;
    }

    body.device-desktop:not(.is-unauthenticated) #app-content .p-4 {
        padding: 14px;
    }

    body.device-desktop:not(.is-unauthenticated) #app-content .p-6 {
        padding: 18px;
    }

    body.device-desktop:not(.is-unauthenticated) main#app-content > section[class] {
        padding-right: max(18px, calc((100% - 800px) / 2));
        padding-left: max(18px, calc((100% - 800px) / 2));
    }

    body.device-desktop:not(.is-unauthenticated) #app-content .rounded-xl {
        border-radius: 8px;
    }

    body.device-desktop:not(.is-unauthenticated) #app-content .text-2xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    body.device-desktop:not(.is-unauthenticated) #app-content .text-xl {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    body.device-desktop:not(.is-unauthenticated) #app-content button,
    body.device-desktop:not(.is-unauthenticated) #app-content a {
        scroll-margin-top: 68px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-modal__box {
        width: min(100%, 800px);
        max-width: min(800px, calc(100vw - 2rem));
        border-radius: 10px;
    }

    body.device-desktop:not(.is-unauthenticated) .app-modal__header {
        padding: 0.85rem 1rem;
    }

    body.device-desktop:not(.is-unauthenticated) .app-modal__body {
        padding: 1rem;
    }
}

@media (max-width: 1100px) {
    .app-device-badge {
        display: none;
    }
}

/* Parallax suave da bandeira — JS aplica translateY via scroll */
.app-club-flag__media {
    will-change: transform;
    transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
    .app-club-flag__media { transform: none !important; will-change: auto; }
}

.age-profile {
    display: grid;
    gap: 16px;
}

.age-profile__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto;
    border: 1px solid rgba(168, 85, 247, .35);
    border-radius: 50%;
    background: rgba(126, 34, 206, .14);
    color: #d8b4fe;
    font-size: 21px;
}

.age-profile__intro,
.age-profile__help {
    margin: 0;
    color: #a1a1aa;
    font-size: 13px;
    line-height: 1.6;
}

.age-profile__field {
    display: grid;
    gap: 7px;
    color: #e4e4e7;
    font-size: 12px;
    font-weight: 700;
}

.age-profile__field input {
    width: 100%;
    border: 1px solid #3f3f46;
    border-radius: 10px;
    background: #18181b;
    color: #fafafa;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    outline: none;
}

.age-profile__field input:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .16);
}

.age-profile__error {
    margin: 0;
    border: 1px solid rgba(239, 68, 68, .28);
    border-radius: 9px;
    background: rgba(239, 68, 68, .1);
    color: #fca5a5;
    padding: 10px 12px;
    font-size: 12px;
}

.age-profile__submit {
    width: 100%;
    border: 0;
    border-radius: 10px;
    background: #7e22ce;
    color: #fff;
    padding: 12px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.age-profile__submit:hover {
    background: #9333ea;
}

.age-profile__submit:disabled {
    cursor: wait;
    opacity: .6;
}

.coins-extract {
    display: grid;
    gap: 16px;
}

.coins-extract__period {
    margin: 0;
    color: #a1a1aa;
    font-size: 12px;
    font-weight: 700;
}

.coins-extract__summary {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 10px;
}

.coins-extract__balance,
.coins-extract__metric {
    display: grid;
    gap: 7px;
    min-width: 0;
    border: 1px solid #3f3f46;
    border-radius: 12px;
    background: #18181b;
    padding: 13px;
}

.coins-extract__balance span,
.coins-extract__metric span {
    color: #a1a1aa;
    font-size: 11px;
}

.coins-extract__balance strong,
.coins-extract__metric strong {
    overflow-wrap: anywhere;
    color: #f4f4f5;
    font-size: 16px;
}

.coins-extract__balance strong {
    color: #fcd34d;
}

.coins-extract__metric--entry strong {
    color: #6ee7b7;
}

.coins-extract__metric--exit strong {
    color: #fca5a5;
}

.coins-extract__list {
    display: grid;
    max-height: min(52vh, 510px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.coins-extract__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border-bottom: 1px solid rgba(63, 63, 70, .72);
    padding: 12px 3px;
}

.coins-extract__signal {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: 12px;
}

.coins-extract__item--entry .coins-extract__signal {
    background: rgba(16, 185, 129, .13);
    color: #6ee7b7;
}

.coins-extract__item--exit .coins-extract__signal {
    background: rgba(239, 68, 68, .12);
    color: #fca5a5;
}

.coins-extract__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.coins-extract__copy strong {
    overflow-wrap: anywhere;
    color: #e4e4e7;
    font-size: 12px;
}

.coins-extract__copy small,
.coins-extract__limit {
    color: #71717a;
    font-size: 10px;
}

.coins-extract__item > b {
    white-space: nowrap;
    font-size: 12px;
}

.coins-extract__item--entry > b {
    color: #6ee7b7;
}

.coins-extract__item--exit > b {
    color: #fca5a5;
}

.coins-extract__loading,
.coins-extract__error,
.coins-extract__empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 170px;
    color: #a1a1aa;
    text-align: center;
}

.coins-extract__error {
    color: #fca5a5;
}

.coins-extract__loading i,
.coins-extract__error i,
.coins-extract__empty i {
    font-size: 24px;
}

.coins-extract__limit {
    margin: 0;
    text-align: center;
}

.coins-extract__partner-cta {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(245, 196, 81, .32);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 196, 81, .13), rgba(168, 85, 247, .08));
    color: #f4f4f5;
    padding: 13px;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.coins-extract__partner-cta:hover {
    border-color: rgba(245, 196, 81, .62);
    background-color: rgba(245, 196, 81, .1);
    transform: translateY(-1px);
}

.coins-extract__partner-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(245, 196, 81, .16);
    color: #fcd34d;
}

.coins-extract__partner-cta > span:nth-child(2) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.coins-extract__partner-cta strong {
    color: #fef3c7;
    font-size: 12px;
}

.coins-extract__partner-cta small {
    color: #d4d4d8;
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .coins-extract__summary {
        grid-template-columns: 1fr 1fr;
    }

    .coins-extract__balance {
        grid-column: 1 / -1;
    }

    .coins-extract__partner-cta {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .coins-extract__partner-cta > .fa-arrow-right {
        display: none;
    }
}

/* ============================================================
   Botões de Confirmação — Sistema Unificado
   app-confirm-btn com 3 variantes (coins, pilas, default)
============================================================ */

.app-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms ease-in-out;
    white-space: nowrap;
    user-select: none;
}

.app-confirm-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.app-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variante: Coins (amarelo — moeda do jogo) */
.app-confirm-btn--coins {
    background-color: #d97706;
    border-color: rgba(217, 119, 6, 0.4);
    color: #fef3c7;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}

.app-confirm-btn--coins:hover:not(:disabled) {
    background-color: #ea8c16;
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.3);
}

.app-confirm-btn--coins:active:not(:disabled) {
    background-color: #b45309;
}

/* Variante: Pilas (roxo — dinheiro real premium) */
.app-confirm-btn--pilas {
    background-color: #a855f7;
    border-color: rgba(168, 85, 247, 0.4);
    color: #f3e8ff;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

.app-confirm-btn--pilas:hover:not(:disabled) {
    background-color: #c084fc;
    box-shadow: 0 6px 16px rgba(168, 85, 247, 0.3);
}

.app-confirm-btn--pilas:active:not(:disabled) {
    background-color: #9333ea;
}

/* Variante: Default (azul — ações sem custo) */
.app-confirm-btn--default {
    background-color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.4);
    color: #eff6ff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.app-confirm-btn--default:hover:not(:disabled) {
    background-color: #60a5fa;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

.app-confirm-btn--default:active:not(:disabled) {
    background-color: #1d4ed8;
}