/*
 * Card de clã (16/10/2026) — moldura medieval PRONTA em imagem (uma por cor de bandeira,
 * /img/clas/moldura-{cor}.webp, 480×999). Aqui só se posicionam, em % do card, as peças
 * que vão por cima: emblema no medalhão, rótulo "CLÃ", nome, painel de dados e botão.
 *
 * Medidas tiradas da arte original (794×1652): miolo do medalhão 155→638 × 155→602 px.
 * Card 240×570 como na arte de referência (a moldura enviada é mais baixa, 794×1652). Para não
 * deformar o medalhão, a moldura é montada em 3 faixas da mesma imagem (unidades cqw = largura):
 *   topo  = 0→44% da arte (727 px, medalhão), sem distorção .. 91,55cqw
 *   meio  = 44→88% da arte, esticado só na vertical ......... 120,98cqw
 *   pé    = 88→100% da arte (enfeite de baixo), sem distorção  24,97cqw
 * A imagem inteira, sem distorção, teria 208,06cqw de altura.
 * Fontes em cqw (largura do card), para o card inteiro escalar junto.
 */
.ccl { position: relative; container-type: inline-size; aspect-ratio: 240 / 570; color: #e8e2d6;
       font-family: 'Inter', system-ui, sans-serif; }
.ccl-moldura { position: absolute; inset: 0; pointer-events: none; }
.ccl-moldura > span { position: absolute; left: 0; width: 100%; background-image: var(--moldura); background-repeat: no-repeat; }
.ccl-m-topo { top: 0; height: 91.55cqw; background-size: 100cqw 208.06cqw; background-position: 0 0; }
.ccl-m-meio { top: 91.55cqw; height: 120.98cqw; background-size: 100cqw 274.95cqw; background-position: 0 -120.98cqw; }
.ccl-m-pe { bottom: 0; height: 24.97cqw; background-size: 100cqw 208.06cqw; background-position: 0 100%; }

/* emblema: círculo dentro do anel do medalhão. Centro x = 397 px do molde (794); a altura do
   centro (--em-cy) e o raio (--em-r) vêm de cada cor (App\Support\ClanBandeiras::estiloDoCard). */
/* `.ccl .ccl-emblema` (2 classes): ganha do `.pg-doc img { border-radius: 0; height: auto }` das páginas transcritas */
.ccl .ccl-emblema { position: absolute; object-fit: cover; border-radius: 50%; max-width: none;
               left: calc((397 - var(--em-r, 230)) / 794 * 100cqw); top: calc((var(--em-cy, 384.3) - var(--em-r, 230)) / 794 * 100cqw);
               width: calc(var(--em-r, 230) * 2 / 794 * 100cqw); height: calc(var(--em-r, 230) * 2 / 794 * 100cqw); }

/* nome: serifa clássica, creme com dourado */
.ccl-nome { position: absolute; left: 5%; right: 5%; top: 37.2%; margin: 0; text-align: center; white-space: nowrap; overflow: hidden;
            font: 700 10.4cqw/1.1 'Cormorant Garamond', Georgia, serif;
            background: linear-gradient(180deg, #fffaf0 0%, #f6e6c4 50%, #d9b77a 100%);
            -webkit-background-clip: text; background-clip: text; color: transparent;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }

/* painel de dados: vidro escuro com linhas separadas */
.ccl-dados { position: absolute; left: 7.5%; right: 7.5%; top: 44.3%; height: 36.6%; margin: 0; padding: 0 4cqw;
             display: flex; flex-direction: column; border-radius: 2.5cqw;
             background: linear-gradient(180deg, rgba(10, 10, 12, .78), rgba(18, 16, 16, .7));
             border: 1px solid rgba(217, 180, 108, .18); box-shadow: inset 0 0 6cqw rgba(0, 0, 0, .55); }
.ccl-linha { flex: 1; display: grid; grid-template-columns: 46% 54%; align-items: center;
             border-bottom: 1px solid rgba(255, 255, 255, .09); }
.ccl-linha:last-child { border-bottom: 0; }
.ccl-linha dt { display: flex; align-items: center; gap: 3cqw; font-size: 5.2cqw; color: #b9b2a6; }
.ccl-linha dd { margin: 0; text-align: center; font-size: 5.9cqw; font-weight: 500; color: #f4efe6;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccl-jogo { text-transform: uppercase; }
.ccl-ico { width: 7.5cqw; height: 7.5cqw; flex: none; color: #cfc8bc; }
.ccl-ponto { width: 4.2cqw; height: 4.2cqw; margin: 0 1.2cqw; flex: none; border-radius: 50%;
             background: radial-gradient(circle at 35% 35%, #8dff8d, #19b919 60%, #0b6b0b);
             box-shadow: 0 0 2.5cqw rgba(40, 220, 40, .7); }
.ccl-ponto--off { background: radial-gradient(circle at 35% 35%, #ff9a9a, #c21d1d 60%, #6b0b0b); box-shadow: 0 0 2.5cqw rgba(220, 40, 40, .6); }
.ccl .ccl-plataforma { display: block; width: 12cqw; height: 12cqw; margin: 0 auto; object-fit: contain; }

/* lema: sem ícone, rótulo e frase centralizados, frase em maiúsculas (até 2 linhas) */
.ccl-linha--lema { flex: 1.45; grid-template-columns: 1fr; align-content: center; gap: 1.5cqw; text-align: center; }
.ccl-linha--lema dt { justify-content: center; }
.ccl-linha--lema dd { white-space: normal; font-weight: 500; font-size: 5.4cqw; line-height: 1.3; text-transform: uppercase;
                      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* botão Acessar: a imagem pronta do botão */
.ccl-acessar { position: absolute; left: 12.5%; width: 75%; top: 82.4%; display: block; transition: filter .2s, transform .2s; }
.ccl-acessar img { display: block; width: 100%; height: auto; }
.ccl-acessar:hover, .ccl-acessar:focus-visible { filter: brightness(1.15) drop-shadow(0 0 3cqw rgba(255, 190, 90, .45)); transform: translateY(-1px); }
.ccl-acessar:focus-visible { outline: 2px solid #f0cf86; outline-offset: 2px; }