/* Escudo desenhado (monograma) — equipe sem imagem oficial.
   Carregado pelo site e pelo painel. partials/team-monogram + App\Support\TeamMonogram. Camadas, de trás para frente:
   ::before aro · __field campo com brilho e chevron · ::after filete interno · __text iniciais.
   Sem cores da equipe: grafite com chevron verde da marca. */
.crest-mono {
    --cm-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3C60 8 74 10 91 9V47C91 72 74 88 50 97C26 88 9 72 9 47V9C26 10 40 8 50 3Z'/%3E%3C/svg%3E");
    --cm-field: #2A3B31;
    --cm-field-2: #121C16;
    --cm-rim: #0B130E;
    --cm-accent: #3DDC46;
    --cm-ink: #FFFFFF;
    --cm-line: rgba(61, 220, 70, .5);
    --cm-inset: 7%;
    --cm-scale: calc(.54 - .08 * var(--cm-len, 3));
    position: relative; display: inline-grid; place-items: center; flex: none; container-type: size;
    vertical-align: middle; isolation: isolate; user-select: none;
}
/* Tamanho nominal sem especificidade: regras da página (.crest no celular, .scoreboard__crest) continuam valendo;
   as letras acompanham a caixa real pelas unidades de contêiner. */
:where(.crest-mono) { width: var(--cm-size, 32px); height: var(--cm-size, 32px); }
.adm-crest.crest-mono { width: var(--cm-size); height: var(--cm-size); }
:root[data-theme='dark'] .crest-mono:not([style*='--cm-field:']) {
    --cm-field: #34483C;
    --cm-field-2: #1C2821;
    --cm-rim: #4F6457;
}
/* Painel administrativo: segue o tema do sistema (o site público sempre define data-theme). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .crest-mono:not([style*='--cm-field:']) {
        --cm-field: #34483C;
        --cm-field-2: #1C2821;
        --cm-rim: #4F6457;
    }
}
.crest-mono::before,
.crest-mono::after,
.crest-mono__field {
    content: ''; position: absolute; inset: 0;
    -webkit-mask: var(--cm-shape) center / 100% 100% no-repeat;
    mask: var(--cm-shape) center / 100% 100% no-repeat;
}
/* Aro: brilho de metal no alto, cor plena embaixo. */
.crest-mono::before {
    background: linear-gradient(165deg, color-mix(in srgb, var(--cm-rim) 62%, #fff) 0%, var(--cm-rim) 42%, var(--cm-rim) 100%);
}
.crest-mono__field {
    inset: var(--cm-inset); overflow: hidden;
    background:
        radial-gradient(120% 70% at 28% 0%, rgba(255, 255, 255, .2), transparent 62%),
        linear-gradient(170deg, var(--cm-field) 20%, var(--cm-field-2) 100%);
}
/* Chevron acompanha a ponta do escudo, abaixo das iniciais. */
.crest-mono__field::after {
    content: ''; position: absolute; inset: 0; background: var(--cm-accent);
    clip-path: polygon(0 66%, 50% 85%, 100% 66%, 100% 76%, 50% 95%, 0 76%);
}
/* Estrela acima das iniciais (só nos tamanhos grandes). */
.crest-mono__field::before {
    content: ''; position: absolute; display: none; left: 50%; top: 9%;
    width: 13%; aspect-ratio: 1; transform: translateX(-50%); background: var(--cm-accent);
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* Filete interno: duas cópias do escudo, uma subtraída da outra. */
.crest-mono::after {
    display: none; background: var(--cm-line);
    -webkit-mask: var(--cm-shape) center / 83% 83% no-repeat, var(--cm-shape) center / 79% 79% no-repeat;
    -webkit-mask-composite: xor;
    mask: var(--cm-shape) center / 83% 83% no-repeat exclude, var(--cm-shape) center / 79% 79% no-repeat;
}
.crest-mono__text {
    position: relative; z-index: 1; margin-bottom: 9%;
    color: var(--cm-ink); font: 800 calc(var(--cm-size, 32px) * var(--cm-scale)) / 1 var(--font, 'Inter', system-ui, sans-serif);
    font-size: calc(100cqw * var(--cm-scale));
    letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: lining-nums;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

/* 20–24 px: aro mais grosso, letras maiores, sem filete nem estrela. */
.crest-mono--xs { --cm-inset: 8.5%; --cm-scale: calc(.57 - .08 * var(--cm-len, 3)); }
.crest-mono--xs .crest-mono__text { letter-spacing: -.05em; text-shadow: none; }
.crest-mono--xs .crest-mono__field { background: linear-gradient(170deg, var(--cm-field) 20%, var(--cm-field-2) 100%); }
/* 48 px em diante: filete interno. */
.crest-mono--md::after,
.crest-mono--lg::after,
.crest-mono--xl::after { display: block; }
.crest-mono--md { --cm-inset: 6%; }
/* 64 px em diante: estrela e letras um pouco mais baixas para equilibrar. */
.crest-mono--lg,
.crest-mono--xl { --cm-inset: 5.5%; }
.crest-mono--lg .crest-mono__field::before,
.crest-mono--xl .crest-mono__field::before { display: block; }
.crest-mono--lg .crest-mono__text,
.crest-mono--xl .crest-mono__text { margin-bottom: 2%; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.crest-mono--xl { --cm-inset: 5%; filter: drop-shadow(0 6px 14px rgba(16, 25, 21, .16)); }
.crest-mono--xl::after {
    -webkit-mask: var(--cm-shape) center / 85% 85% no-repeat, var(--cm-shape) center / 82.5% 82.5% no-repeat;
    -webkit-mask-composite: xor;
    mask: var(--cm-shape) center / 85% 85% no-repeat exclude, var(--cm-shape) center / 82.5% 82.5% no-repeat;
}