/* Carta desenhada a partir do Oracle (public/js/cardface.js). Tudo é medido em cqw (% da largura da
   carta), então a mesma carta serve de miniatura no tabuleiro e de prévia grande. A .cf é o contêiner
   (as unidades cqw valem para os filhos dela); o desenho fica na .cf-card. */
/* Fontes das cartas impressas (Beleren nos nomes, Plantin no texto): são da Wizards / Monotype e não podem ser
   distribuídas, então só valem se estiverem instaladas no computador (local()); senão fica a fonte aberta de reserva. */
@font-face { font-family: 'CF Beleren'; font-weight: 700; src: local('Beleren2016-Bold'), local('Beleren2016 Bold'), local('Beleren Bold'), local('Beleren-Bold'), local('Beleren'); }
@font-face { font-family: 'CF Plantin'; font-style: normal; src: local('MPlantin'), local('MPlantin-Regular'), local('PlantinMTPro-Regular'), local('Plantin MT Pro'), local('Plantin'); }
@font-face { font-family: 'CF Plantin'; font-style: italic; src: local('MPlantin-Italic'), local('MPlantin Italic'), local('PlantinMTPro-Italic'), local('Plantin MT Pro Italic'), local('Plantin Italic'); }
:root {
  --cf-title-font: 'CF Beleren', Georgia, 'Times New Roman', serif;
  --cf-text-font: 'CF Plantin', Georgia, 'Times New Roman', serif;
  --ms-W: #f8f4d8; --ms-U: #a9d8f2; --ms-B: #c8bfbc; --ms-R: #f5a98f; --ms-G: #9fd2b0; --ms-N: #cdc8c2; --ms-C: #d9d4cf;
}
.cf {
  --frame: #a7a4a0; --bar: #dcdad6; --box: #eceae6; --ink: #161310;
  container-type: inline-size; isolation: isolate;
  position: relative; width: 100%; aspect-ratio: 63 / 88; border-radius: 4.6% / 3.3%;
  color: var(--ink); text-align: left; user-select: none;
}
.cf-card {
  position: absolute; inset: 0; box-sizing: border-box; overflow: hidden;
  padding: 3.4cqw 3.4cqw 6.5cqw; border-radius: 4.6cqw; background: #141414;
  font-family: Georgia, 'Times New Roman', serif;
}
.cf-W { --frame: #d9d1b0; --bar: #f4efdc; --box: #f7f3e8; }
.cf-U { --frame: #2d6ea8; --bar: #c7dcec; --box: #e4eef6; }
.cf-B { --frame: #3f3634; --bar: #cbc2be; --box: #e7e2df; }
.cf-R { --frame: #c2452c; --bar: #f2cab9; --box: #f7e6de; }
.cf-G { --frame: #2f7a4c; --bar: #cbe2cf; --box: #e3efe4; }
.cf-M { --frame: #c6a24a; --bar: #f2e3af; --box: #f7f0d8; }
.cf-A { --frame: #8c99a1; --bar: #d8dee1; --box: #ecf0f1; }
.cf-L { --frame: #86704f; --bar: #e4d7c2; --box: #f0e8db; }
.cf-inner {
  display: flex; flex-direction: column; gap: 1.6cqw; height: 100%; box-sizing: border-box;
  padding: 2.2cqw; border-radius: 2.6cqw; background: linear-gradient(160deg, var(--frame), color-mix(in srgb, var(--frame) 70%, #000));
}
.cf-title, .cf-type {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5cqw; flex: none;
  padding: 1cqw 2.4cqw; border-radius: 2.4cqw / 50%; background: var(--bar);
  box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .25), 0 .6cqw 1cqw rgba(0, 0, 0, .35);
}
.cf-title { font: 700 6.4cqw/1.15 var(--cf-title-font); }
.cf-type { font: 700 5.1cqw/1.15 var(--cf-title-font); }
.cf-name, .cf-type > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cf-cost { flex: none; white-space: nowrap; font-size: 5.6cqw; }
.cf-art {
  flex: none; aspect-ratio: 1.37; margin: 0 1cqw; background: center / cover no-repeat;
  border: .6cqw solid rgba(0, 0, 0, .55); box-shadow: inset 0 0 2cqw rgba(0, 0, 0, .35);
}
.cf-art.empty {
  display: grid; place-items: center; padding: 3cqw; text-align: center; color: rgba(255, 255, 255, .85);
  font: italic 600 6cqw/1.2 Georgia, serif; text-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .6);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--frame) 55%, #fff), color-mix(in srgb, var(--frame) 60%, #000));
}
.cf-rar { flex: none; font-size: 1.15em; line-height: 1; }
/* O contorno do símbolo da edição: preto nas raridades coloridas, branco na comum (como na carta impressa). */
.cf-rar::before { filter: drop-shadow(.035em 0 0 #000) drop-shadow(-.035em 0 0 #000) drop-shadow(0 .035em 0 #000) drop-shadow(0 -.035em 0 #000); }
.cf-rar.r-common::before { filter: drop-shadow(.035em 0 0 #fff) drop-shadow(-.035em 0 0 #fff) drop-shadow(0 .035em 0 #fff) drop-shadow(0 -.035em 0 #fff); }
.cf-text {
  flex: 1; min-height: 0; overflow: hidden; margin: 0 1cqw; padding: 2.2cqw 2.8cqw;
  background: var(--box); border-radius: .8cqw; box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .18);
  font: 5.6cqw/1.18 var(--cf-text-font);
}
.cf-text p { margin: 0 0 .45em; }
/* Canto reservado para o P/R: um espaçador invisível empurra a reserva (flutuando à direita) para o pé da caixa. */
.cf-text { --spot-w: 15cqw; --spot-h: 2.5cqw; }
.cf-text:has(> .cf-pt-spot)::before { content: ''; float: right; width: 0; height: calc(100% - var(--spot-h)); }
.cf-pt-spot { float: right; clear: right; width: var(--spot-w); height: var(--spot-h); }
.cf-text:has(> .cf-pt-spot.loyal, > .cf-pt-spot.def) { --spot-w: 11cqw; --spot-h: 4.5cqw; }
.cf-text p:last-child { margin-bottom: 0; }
.cf-rem { color: #4d463f; }
.cf-flavor { font-style: italic; border-top: .3cqw solid rgba(0, 0, 0, .15); padding-top: .35em; color: #3a332c; }
/* Lealdade (planeswalker): a forma impressa da fonte Mana com o custo por cima, em branco. */
.cf-loy { position: relative; display: inline-grid; place-items: center; margin-right: .3em; vertical-align: -.35em; line-height: 1; }
.cf-loy > .ms { font-size: 1.7em; color: #1a1a1a; }
.cf-loy > b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 .78em/1 var(--cf-title-font); }
.cf-loy-up > b { padding-top: .15em; }
.cf-loy-down > b { padding-bottom: .2em; }
/* Capítulos das sagas. */
.cf-saga { display: inline-flex; gap: .1em; margin-right: .3em; vertical-align: -.25em; }
.cf-saga .ms { font-size: 1.35em; color: #1a1a1a; }
.cf-sym-txt { display: inline-block; font: 700 .7em/1.85 system-ui, sans-serif; vertical-align: middle; }
.cf-pt {
  position: absolute; right: 4.2cqw; bottom: 3.6cqw; padding: .6cqw 2.6cqw; border-radius: 1.8cqw;
  background: var(--bar); box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .3), 0 .6cqw 1cqw rgba(0, 0, 0, .45);
  font: 700 7cqw/1.1 var(--cf-title-font);
}
/* Lealdade inicial e defesa: as formas impressas (escudo do planeswalker, selo da batalha) com o número por cima. */
.cf-pt.loyal, .cf-pt.def { display: grid; place-items: center; padding: 0; background: none; box-shadow: none; }
.cf-pt.loyal > .ms, .cf-pt.def > .ms { grid-area: 1 / 1; font-size: 1.45em; color: #1a1a1a; filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .6)); }
.cf-pt.def > .ms { color: #7a2e2e; }
.cf-pt.loyal > b, .cf-pt.def > b { grid-area: 1 / 1; position: relative; color: #fff; font-size: .8em; }
.cf-foot {
  position: absolute; left: 5cqw; right: 22cqw; bottom: 1.6cqw; color: #cfcfcf;
  font: 3cqw/1.2 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Dividida: a arte em cima e as duas metades, cada uma com nome, custo, tipo e texto. */
.cf-l-split .cf-art.split { aspect-ratio: 2.6; }
.cf-half { display: flex; flex-direction: column; gap: 1.2cqw; flex: 1; min-height: 0; }
.cf-half .cf-title { font-size: 5.6cqw; }
.cf-half .cf-type { font-size: 4.4cqw; }
.cf-half .cf-text { font-size: 4.6cqw; }
/* Aventura: a aventura à esquerda da caixa de texto, a criatura à direita. */
.cf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; font-size: 4.4cqw; }
.cf-adv { padding-right: 2cqw; border-right: .3cqw solid rgba(0, 0, 0, .25); }
.cf-adv-title { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; margin-bottom: .2em; }
.cf-adv-type { font-style: italic; font-size: .9em; margin-bottom: .3em; color: #3a332c; }
/* Virar: a outra metade de cabeça para baixo no pé da caixa de texto. */
.cf-flip { transform: rotate(180deg); margin-top: .5em; padding-bottom: .4em; border-bottom: .3cqw solid rgba(0, 0, 0, .25); }
.cf-flip-pt { font-weight: 700; }

/* Símbolos de mana: a fonte Mana (/vendor/mana) desenha; aqui só o tamanho dentro da carta e o círculo multicolor. */
.cf .ms-cost { font-size: .82em; margin: 0 .04em; vertical-align: -.1em; }
.cf .cf-cost .ms-cost { font-size: .9em; margin: 0 0 0 .1em; }
/* Custo mudado por outro efeito (na mão: Thalia, reduções): em destaque, como no Arena. */
.cf-cost-up .cf-title .cf-cost, .cf-cost-down .cf-title .cf-cost { border-radius: 1em; padding: 0 .12em; }
.cf-cost-up .cf-title .cf-cost { box-shadow: 0 0 0 .1em #e0533a, 0 0 .5em #e0533a; background: rgba(224,83,58,.35); }
.cf-cost-down .cf-title .cf-cost { box-shadow: 0 0 0 .1em #3fbf6a, 0 0 .5em #3fbf6a; background: rgba(63,191,106,.35); }
.ms-cost.ms-multi { background: linear-gradient(135deg, var(--ms-W) 0 20%, var(--ms-U) 20% 40%, var(--ms-B) 40% 60%, var(--ms-R) 60% 80%, var(--ms-G) 80%); }
.cf-foot .ms { font-size: 1.1em; vertical-align: -.15em; }

/* Carta pequena (campo, mão: 100 a 150px): a carta inteira como no Arena — nome e custo, arte mais baixa, linha de
   tipo e o começo do texto (sem lembretes); a prévia grande mostra o resto. */
@container (max-width: 150px) {
  .cf-card { padding: 2.6cqw 2.6cqw 3.4cqw; }
  .cf-inner { padding: 2.2cqw; gap: 1.6cqw; }
  .cf-title { font: 700 9.2cqw/1.12 "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; padding: 1.2cqw 2.4cqw; border-radius: 3cqw / 50%; gap: 1cqw; }
  .cf-cost { font-size: 8.4cqw; }
  .cf-cost .ms { margin: 0 .01em; }
  .cf-art { aspect-ratio: 1.75; margin: 0; }
  .cf-art.empty { font-size: 9cqw; padding: 2cqw; }
  .cf-type { font: 600 7.6cqw/1.12 "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; padding: .8cqw 2.4cqw; border-radius: 3cqw / 50%; }
  .cf-text { margin: 0; padding: 1.6cqw 2.2cqw; font-size: 7.4cqw; line-height: 1.14; }
  .cf-text p { margin-bottom: .25em; }
  .cf-text { --spot-w: 19cqw; --spot-h: 8.5cqw; }
  .cf-text:has(> .cf-pt-spot.loyal, > .cf-pt-spot.def) { --spot-w: 13cqw; --spot-h: 9cqw; }
  .cf-rem, .cf-flavor, .cf-foot { display: none; }
  .cf-cols { grid-template-columns: 1fr; }
  .cf-adv { display: none; }
  .cf-half { flex: 1; }
  .cf-half .cf-title { font-size: 8cqw; }
  .cf-half .cf-type { font-size: 6.6cqw; }
  .cf-half .cf-text { font-size: 6.6cqw; }
  .cf-pt { font: 700 11cqw/1 "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; right: 2.4cqw; bottom: 2.4cqw; padding: .8cqw 3cqw; }
  .cf-notext .cf-art { flex: 1; aspect-ratio: auto; }
  .cf-notext .cf-text { display: none; }
}
/* Compacta (campo, < 100px): a arte cobre a carta, o nome numa faixa por cima e o P/R num selo (direção A, 2.7). */
@container (max-width: 99px) {
  .cf-card { padding: 2.4cqw; border-radius: 6cqw; }
  .cf-inner { position: relative; padding: 0; gap: 0; border-radius: 4cqw; overflow: hidden; }
  .cf-art, .cf-art.split { position: absolute; inset: 0; margin: 0; border: 0; aspect-ratio: auto; }
  .cf-art.empty { font: 700 13cqw/1.1 "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-style: normal; padding: 6cqw; }
  .cf-art.empty span { display: none; }
  .cf-title { position: relative; z-index: 1; margin: 0; border-radius: 4cqw 4cqw 0 0; padding: 1.5cqw 3cqw; font: 700 11cqw/1.15 "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; }
  .cf-cost { font-size: 9cqw; }
  .cf-type, .cf-text, .cf-half .cf-type { display: none; }
  .cf-half { display: contents; }
  .cf-half + .cf-half .cf-title { display: none; }
  .cf-pt { font: 700 15cqw/1 "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; right: 2.5cqw; bottom: 2.5cqw; padding: 1cqw 3.5cqw; border-radius: 3cqw; }
}
/* Média (lista, escolha de cartas): texto ainda legível. */
@container (min-width: 151px) and (max-width: 230px) {
  .cf-foot { display: none; }
  .cf-text { font-size: 6cqw; }
}

.cf-oracle { margin-top: 8px; font-size: 12px; text-align: left; }
.cf-oracle summary { cursor: pointer; color: var(--muted, #888); }
.cf-oracle div { margin-top: 4px; }
.cf-oracle p { margin: 0 0 4px; }
/* Habilidade na pilha: a caixa de texto mostra só ela, centralizada e um pouco maior. */
.cf-ability .cf-text { display: flex; flex-direction: column; justify-content: center; font-size: 6.4cqw; line-height: 1.22; }
.cf-ability .cf-text .cf-rem { display: inline; }
.cf-ability .cf-pt-spot, .cf-ability .cf-text::before { display: none; }

/* Ficha sem arte: um medalhão com o nome no lugar da arte, para não parecer uma carta em branco. */
.cf-token .cf-art.empty { background:
  radial-gradient(circle at 50% 50%, transparent 33%, rgba(255,255,255,.55) 34% 36%, transparent 37%),
  radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--frame) 55%, #fff), color-mix(in srgb, var(--frame) 60%, #000)); }
.cf-token .cf-art.empty span { display: block !important; max-width: 70%; overflow: hidden; text-overflow: ellipsis; font-style: normal; }