/* Cartas: tudo em `em` a partir da largura (--w), entao a mesma carta serve na
   mao, na jogada, no zoom e na tela inicial. Carta pequena (container query)
   esconde o texto e mostra so os icones das habilidades. */
.carta {
  --w: 150px; --c1: #888; --c2: #888;
  --moldura: #f3cf3c; --moldura-2: #d9a921;
  position: relative; width: var(--w); aspect-ratio: 63 / 88; flex: none;
  font-size: calc(var(--w) / 13.5); border-radius: .7em; padding: .42em;
  background: linear-gradient(160deg, #fff1a6, var(--moldura) 22%, var(--moldura-2) 78%, #b98a12);
  box-shadow: 0 .7em 1.6em rgba(0,0,0,.5), inset 0 0 0 .08em rgba(0,0,0,.35);
  container-type: inline-size; user-select: none; -webkit-user-select: none; color: #1b1d22;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s, filter .2s;
}
/* raridade: rara tem moldura prateada-holografica; incomum, prateada */
.carta.r-incomum { --moldura: #e3e8ef; --moldura-2: #aab4c2; background: linear-gradient(160deg, #ffffff, var(--moldura) 25%, var(--moldura-2) 80%, #7e8899); }
.carta.r-rara { background: linear-gradient(125deg, #fff6b0, #ffd84d 18%, #ffb3e6 36%, #9ee7ff 54%, #c8ff7a 72%, #ffd84d 90%); }

.c-corpo {
  position: relative; height: 100%; border-radius: .38em; overflow: hidden; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--c1) 42%, #f6f1e4), color-mix(in srgb, var(--c2) 30%, #efe6d2));
  box-shadow: inset 0 0 0 .07em rgba(0,0,0,.28);
}
.c-topo { display: flex; align-items: center; gap: .2em; padding: .32em .32em .22em; }
.c-pos { font: 800 .62em/1 var(--fonte-t); padding: .22em .28em; flex: none; border-radius: .25em; background: #1b1d22; color: #ffe066; letter-spacing: .04em; }
.c-nome { flex: 1; min-width: 0; font: 700 1.02em/1 "Pixelify Sans", var(--fonte-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
/* numeros: fonte condensada de leitura facil (a pixel confundia 3 com 8),
   em selo colorido com algarismo branco */
.c-num { display: inline-flex; align-items: center; gap: .1em; padding: .06em .22em .06em .16em; border-radius: .28em; flex: none;
  font: 800 1.12em/1 var(--fonte-t); color: #fff; font-variant-numeric: tabular-nums; box-shadow: inset 0 -.08em 0 rgba(0,0,0,.25); }
.c-num small { font: 800 .38em/1 var(--fonte); letter-spacing: 0; opacity: .9; }
.s-atq { background: #d2381c; } .s-def { background: #1f5fc9; }
.c-num.baixo { background: #6f747c; }

.c-arte { position: relative; margin: 0 .38em; aspect-ratio: 72 / 46; flex: none; overflow: hidden;
  border: .2em solid; border-color: #f4f4f4 #9aa3ad #8a939d #e8ecf0; box-shadow: 0 .1em .25em rgba(0,0,0,.35); background: #10162a; }
.c-arte img { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.carta.r-rara .c-arte::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .35;
  background: linear-gradient(115deg, transparent 25%, #ff9ee8 38%, #9ee7ff 50%, #c8ff7a 62%, transparent 75%); background-size: 260% 100%;
  animation: brilho 4.5s ease-in-out infinite; }
@keyframes brilho { 0%, 50% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.c-icones { position: absolute; right: .2em; bottom: .15em; display: none; gap: .1em; }
.c-icones i { font-style: normal; font-size: 1.1em; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 2px #000); }

/* faixa da funcao (no TCG: "NO. / altura / peso") */
.c-faixa { margin: .25em .55em 0; padding: .12em .4em; font: italic 600 .56em/1.3 var(--fonte); text-align: center; color: #3a3326;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65) 15%, rgba(255,255,255,.65) 85%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.c-habs { flex: 1; min-height: 0; overflow: hidden; padding: .2em .5em 0; display: flex; flex-direction: column; gap: .18em; }
.c-hab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: .3em; }
.c-custo { width: 1.35em; height: 1.35em; display: grid; place-items: center; font-size: .75em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--c1) 70%, #fff) 45%, color-mix(in srgb, var(--c1) 80%, #000));
  box-shadow: 0 0 0 .08em rgba(0,0,0,.4); }
.c-hab b { font: 700 .8em/1.1 var(--fonte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-hab em { font: 800 .95em/1 var(--fonte-t); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-hab p { grid-column: 1 / -1; margin: .05em 0 0; font-size: .58em; line-height: 1.25; color: #2d2a24; }
.c-habs.n3, .c-habs.n4 { gap: .08em; }
.c-habs.n3 .c-hab p, .c-habs.n4 .c-hab p { font-size: .5em; line-height: 1.15; }
.c-habs.n4 .c-hab b, .c-habs.n4 .c-hab em { font-size: .7em; }
.c-habs.n4 .c-custo { width: 1.15em; height: 1.15em; font-size: .65em; }
/* 4 habilidades: a arte encolhe um pouco (corta o ceu) para o texto caber */
.carta.habs-4 .c-arte { aspect-ratio: 72 / 37; }
.carta.habs-4 .c-flavor { display: none; }
.carta.habs-4 .c-arte img { object-fit: cover; object-position: 50% 100%; }
.c-sohab { margin: .3em 0 0; font: italic .6em/1.3 var(--fonte); color: #4a4436; }
.c-flavor { margin: .1em .6em 0; font: italic .5em/1.25 var(--fonte); color: #5a5242; border-top: .06em solid rgba(0,0,0,.18); padding-top: .2em; }

/* ficha do jogador: o lugar de fraqueza / resistencia / recuo do TCG */
.c-ficha { display: grid; grid-template-columns: repeat(5, 1fr); margin: .25em .45em 0; border-top: .07em solid rgba(0,0,0,.3); padding-top: .15em; }
.c-ficha div { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.c-ficha small { font: 700 .38em/1.1 var(--fonte); letter-spacing: .02em; color: #5a5242; white-space: nowrap; }
.c-ficha b { font: 800 .95em/1.1 var(--fonte-t); font-variant-numeric: tabular-nums; }
.c-ficha div + div { border-left: .05em solid rgba(0,0,0,.15); }
.c-rodape { display: flex; justify-content: space-between; padding: .15em .55em .3em; font: 700 .4em/1 var(--fonte); color: #4a4436; letter-spacing: .03em; }

.c-status { position: absolute; top: -.5em; right: -.4em; display: flex; gap: .15em; font-size: 1.2em; filter: drop-shadow(0 2px 3px #000); }
.atalho { position: absolute; left: -.35em; top: -.45em; width: 1.6em; height: 1.6em; display: grid; place-items: center;
  border-radius: 50%; background: #000; border: 1px solid var(--borda-forte); font: 700 .8em/1 var(--fonte); color: var(--texto-2); }

/* carta media (mao, jogada): some o que nao cabe para ler */
@container (max-width: 179px) {
  .c-flavor, .c-rodape { display: none; }
  .carta.habs-4 .c-faixa { display: none; }
  .c-ficha { margin-top: .15em; }
}
/* carta pequena: o mesmo layout de TCG (nome e numeros em cima, arte
   emoldurada no meio), com as habilidades virando uma fileira de icones
   embaixo da arte -- a arte nunca ocupa a carta inteira */
@container (max-width: 118px) {
  .c-faixa, .c-ficha, .c-flavor, .c-rodape, .c-sohab { display: none; }
  .c-corpo { justify-content: flex-start; }
  .c-habs { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: .25em; padding: .3em .3em .35em; }
  .c-hab { display: block; }
  .c-hab b, .c-hab em, .c-hab p { display: none; }
  .c-hab .c-custo, .c-habs.n4 .c-custo { width: 1.7em; height: 1.7em; font-size: 1em; }
  .c-topo { flex-wrap: wrap; row-gap: .15em; padding-bottom: .3em; }
  .c-nome { order: -1; flex-basis: 100%; font-size: 1.25em; }
  .c-pos { font-size: .72em; }
  .c-num { font-size: 1.6em; }
  .c-num.s-atq { margin-left: auto; }
  .c-arte, .carta.habs-4 .c-arte { aspect-ratio: 72 / 46; }
  .carta.habs-4 .c-arte img { object-fit: fill; }
}

/* treinador, ambiente, consulta e verso (colecao e impressao) */
.c-tipo-carta { padding: .25em .5em .05em; font: 800 .5em/1 var(--fonte); letter-spacing: .2em; text-transform: uppercase; color: #5a4a12; }
.carta-treinador { --moldura: #d9dde3; --moldura-2: #8e98a6; background: linear-gradient(160deg, #ffffff, var(--moldura) 25%, var(--moldura-2) 85%); }
.carta-treinador .c-hab em { font: 800 .55em/1 var(--fonte); text-transform: uppercase; color: #5a5242; }
.c-ficha.c-ficha-4 { grid-template-columns: repeat(4, 1fr); }
.carta-treinador .c-arte { aspect-ratio: 72 / 36; }
.carta-treinador .c-arte img { object-fit: cover; object-position: 50% 45%; }
.carta-ambiente .c-corpo { background: radial-gradient(120% 70% at 50% 0%, #ffffff, #f2ead6 60%, #e6d9b6); }
.carta-ambiente.amb-árbitro .c-corpo { background: radial-gradient(120% 70% at 50% 0%, #fff, #f6e0e0 60%, #e9c3c3); }
.carta-ambiente.amb-clima .c-corpo { background: radial-gradient(120% 70% at 50% 0%, #fff, #dfeaf7 60%, #bfd3ec); }
.carta-ambiente.amb-estádio .c-corpo { background: radial-gradient(120% 70% at 50% 0%, #fff, #e0f1df 60%, #bfe0bd); }
.c-amb-icone { flex: 1; display: grid; place-items: center; font-size: 3.4em; margin: .1em .4em; border-radius: .3em;
  background: repeating-linear-gradient(90deg, #2f9a43 0 10%, #278a39 10% 20%); box-shadow: inset 0 0 0 .2em #f4f4f4, inset 0 0 0 .28em #9aa3ad; }
.c-amb-texto { margin: .4em .6em .2em; font: 600 .75em/1.3 var(--fonte); text-align: center; min-height: 4em; }
.carta-referencia { --moldura: #c8ff3d; --moldura-2: #6fbf2a; }
.carta-referencia .c-corpo { background: linear-gradient(180deg, #f8fbef, #e6f0d0); }
.c-ref { flex: 1; margin: .1em .5em; display: grid; grid-template-columns: auto 1fr; gap: .25em .4em; align-content: start; }
.c-ref dt { font: 800 .55em/1.2 var(--fonte); white-space: nowrap; }
.c-ref dd { margin: 0; font: 500 .52em/1.25 var(--fonte); color: #2d2a24; }
.carta-verso { background: linear-gradient(160deg, #e2ff8a, #c8ff3d 30%, #78c22e); }
.carta-verso .c-corpo { display: grid; place-items: center; background:
  radial-gradient(circle at 50% 50%, transparent 24%, rgba(255,255,255,.18) 24.5% 25.5%, transparent 26%),
  repeating-linear-gradient(90deg, #1f7a43 0 10%, #1a6b3a 10% 20%); }
.v-logo { display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .6em .8em; border-radius: .4em; background: rgba(5,11,9,.82);
  box-shadow: 0 0 0 .12em #c8ff3d; }
.v-logo span { font-size: 2.2em; }
.v-logo b { font: 700 1.25em/1 "Pixelify Sans", var(--fonte-t); color: #fff; letter-spacing: .08em; }
.v-logo b:last-child { color: #c8ff3d; }

/* verso */
.verso { width: var(--w, 60px); aspect-ratio: 5 / 7; border-radius: 10%/7%; flex: none; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #0f2a1d 0 6px, #123323 6px 12px);
  box-shadow: inset 0 0 0 2px rgba(200,255,61,.35), 0 6px 14px rgba(0,0,0,.5); }
.verso span { font-size: calc(var(--w, 60px) * .38); filter: grayscale(.2) drop-shadow(0 0 6px rgba(200,255,61,.5)); }

/* avatar do treinador com o anel do relogio de decisao */
.avatar { --tam: 56px; position: relative; width: var(--tam); height: var(--tam); flex: none; }
.avatar .rosto { position: absolute; inset: 7%; border-radius: 50%; display: grid; place-items: center;
  font: 900 calc(var(--tam) * .34)/1 var(--fonte-t); background: linear-gradient(140deg, var(--c1), var(--c2));
  box-shadow: inset 0 -4px 10px rgba(0,0,0,.35), 0 0 0 2px rgba(0,0,0,.4); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.avatar svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.avatar .anel-fundo { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 4; }
.avatar .anel { fill: none; stroke: var(--neon); stroke-width: 5; stroke-linecap: round; transition: stroke .3s; }
.avatar .anel.urgente { stroke: var(--perigo); }
.avatar.vez .rosto { box-shadow: 0 0 0 2px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 55%, transparent); }

/* ambiente */
.amb-carta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 12px;
  border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--borda); }
.amb-tipo { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); font-weight: 700; }
.amb-icone { font-size: 30px; line-height: 1.1; }
.amb-carta b { font-family: var(--fonte-t); font-size: 18px; }
.amb-texto { font-size: 12px; color: var(--texto-2); line-height: 1.35; }

/* ficha do time */
.time-ficha { position: relative; padding: 18px; border-radius: var(--raio); overflow: hidden; text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 26%, #0d1a16), #0b1512 60%, color-mix(in srgb, var(--c2) 18%, #0b1512));
  border: 1px solid var(--borda); }
.time-ficha::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.tf-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tf-topo h3 { font-size: 26px; text-transform: uppercase; }
.tf-topo small { color: var(--texto-2); font-weight: 600; }
.time-ficha p { margin: 6px 0 0; font-size: 13.5px; color: #cfdcd4; line-height: 1.4; }
.time-ficha p b { color: var(--texto); }
.tf-estrela { color: var(--ouro) !important; }
.tf-flavor { font-style: italic; color: var(--texto-3) !important; }