/* ==========================================================================
   Teia Brasil — cartas em HTML/CSS
   Layout portado de editaveis/Carta.dc.html (228×318 px = 63×88 mm).
   A carta é desenhada no tamanho-base e escalada com `zoom` pela variável
   --card-w (largura desejada em px). Assim todo o texto acompanha a escala.
   ========================================================================== */
.card {
  --hue: 150;                     /* matiz do bioma (vem do JSON) */
  --ink: oklch(0.22 0.02 62);     /* tinta escura padrão do baralho */
  --bg: oklch(0.965 0.020 var(--hue));
  --dark: oklch(0.32 0.08 var(--hue));
  --mid: oklch(0.40 0.08 var(--hue));
  --dot: oklch(0.58 0.13 var(--hue));
  --card-w: 228;                  /* largura desejada em px, sem unidade */
  zoom: calc(var(--card-w) / 228);
  width: 228px; height: 318px; box-sizing: border-box;
  border-radius: 13px; position: relative; overflow: hidden;
  background: var(--bg); color: var(--ink);
  outline: 4px solid var(--ink); outline-offset: -4px;
  font-family: 'Bitter', Georgia, serif;
  display: flex; flex-direction: column; gap: 2px; padding: 9px 11px;
  user-select: none; -webkit-user-select: none;
  flex: 0 0 auto;
}
.card * { box-sizing: border-box; }
.card .marca { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .11; pointer-events: none; }
.card > * { position: relative; }
.mono { font-family: 'JetBrains Mono', monospace; }
.cond { font-family: 'Barlow Condensed', sans-serif; }

/* --- topo: ícone, papel, nome, científico, PV, custo --- */
.card .topo { height: 48px; flex: 0 0 48px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card .topo .esq { display: flex; gap: 7px; align-items: flex-start; min-width: 0; }
.card .icone { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--dark); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card .icone img { width: 70%; height: 70%; object-fit: contain; }
.card .nomes { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.card .papel { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mid); white-space: nowrap; }
.card .nome { font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; white-space: nowrap; font-size: 16px; }
.card .nome.fs-14 { font-size: 14.5px; } .card .nome.fs-12 { font-size: 12px; } .card .nome.fs-10 { font-size: 10.5px; }
.card .cient { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-style: italic; color: oklch(0.22 0.02 62 / .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .pv { display: flex; align-items: baseline; gap: 3px; font-family: 'Barlow Condensed', sans-serif; flex: 0 0 auto; }
.card .pv small { font-size: 8px; font-weight: 600; letter-spacing: .12em; color: oklch(0.22 0.02 62 / .5); }
.card .pv b { font-size: 25px; font-weight: 700; line-height: .78; }
.card .pv b.ferido { color: oklch(0.50 0.19 25); }
/* custo em energia: círculos do bioma abaixo do PV (proposta digital) */
.card .custo { position: absolute; right: 0; top: 24px; display: flex; gap: 2px; }
.card .custo i { width: 8px; height: 8px; border-radius: 50%; background: var(--dark); border: 1px solid oklch(0.97 0.01 var(--hue)); }

/* --- janela de ilustração --- */
.card .janela { height: 120px; flex: 0 0 120px; background: #fff; border: 1px solid oklch(0.22 0.02 62 / .4); position: relative; overflow: hidden; }
.card .janela img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.sem-arte .janela img, .card.sem-arte .arte-fundo, .card.sem-arte .holo { display: none; }   /* modo sala de aula: janela em branco */
.card.sem-arte .janela { background: #fff !important; }

/* --- faixa do bioma e interações --- */
.card .bioma { border-top: 2px solid var(--dark); padding-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.card .inter { display: flex; gap: 6px; align-items: flex-start; }
.card .inter .marcador { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--dot); margin-top: 2px; }
.card .inter.passiva .marcador { background: none; border: 1.5px solid var(--mid); }
.card .inter .txt { display: flex; flex-direction: column; gap: 1px; }
.card .inter .titulo { font-size: 11.5px; font-weight: 600; line-height: 1.1; }
.card .inter p { margin: 0; font-size: 8.5px; line-height: 1.25; color: oklch(0.20 0.02 62 / .95); text-wrap: pretty; }

/* --- caixa Pressão / Resistência (incomuns) --- */
.card .extras { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: oklch(0.22 0.02 62 / .25); border: 1px solid oklch(0.22 0.02 62 / .25); }
.card .extras div { background: var(--bg); padding: 2px 6px; display: flex; flex-direction: column; gap: 1px; }
.card .extras span { font-family: 'JetBrains Mono', monospace; font-size: 6.5px; letter-spacing: .16em; text-transform: uppercase; color: oklch(0.22 0.02 62 / .6); }
.card .extras b { font-size: 9px; font-weight: 600; }
.card .fato { margin: 0; font-size: 8.5px; font-style: italic; line-height: 1.35; color: oklch(0.22 0.02 62 / .8); text-wrap: pretty; }
.card .espaco { flex: 1; }
.card .rodape { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; color: oklch(0.22 0.02 62 / .78); border-top: 1px solid oklch(0.22 0.02 62 / .2); padding-top: 3px; }

/* --- raridade --- */
/* incomum: brilho e bordas prata, ilustração só na janela */
.card.incomum::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid oklch(0.72 0.015 250); border-radius: 8px; pointer-events: none; z-index: 1;
  box-shadow: 0 0 0 1px oklch(0.90 0.01 250 / .7) inset, 0 0 6px oklch(0.85 0.01 250 / .6); }
.card.incomum::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 30%, oklch(0.95 0.01 250 / .35) 45%, transparent 60%); background-size: 250% 100%; animation: brilho 6s linear infinite; }
/* rara: FULL-ART. A arte cobre a carta inteira (par fundo + ser-vivo compostos, ou arte em retrato) e o
   texto fica direto sobre ela, em cor clara com contorno escuro e sombra, sem painéis. Holo = moldura + reflexo leve. */
.card.rara { --ink-claro: oklch(0.985 0.01 var(--hue)); --contorno: oklch(0.16 0.02 62); color: var(--ink-claro); }
.card.rara .arte-fundo { position: absolute; left: 0; top: 0; width: 228px; height: 318px; object-fit: cover; object-position: 50% 50%; pointer-events: none; z-index: 0; }
.card.rara .holo { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: soft-light; opacity: .8;
  /* holográfico dourado: dois reflexos diagonais em tons de ouro percorrendo a carta em ritmos diferentes */
  background:
    linear-gradient(115deg, transparent 22%, oklch(0.93 0.12 92 / .95) 38%, oklch(0.84 0.17 80) 50%, oklch(0.95 0.09 95 / .95) 62%, transparent 78%),
    linear-gradient(295deg, transparent 35%, oklch(0.90 0.14 88 / .8) 50%, transparent 65%);
  background-size: 250% 100%, 320% 100%; animation: brilho 9s linear infinite, brilho 13s linear infinite reverse; }
.card.rara .janela { border: 0; background: transparent; }
/* tipografia legível sobre a arte: contorno + sombra (paint-order desenha o contorno atrás do preenchimento) */
.card.rara .topo, .card.rara .bioma, .card.rara .inter, .card.rara .rodape { z-index: 2; }
.card.rara .nome, .card.rara .papel, .card.rara .cient, .card.rara .pv b, .card.rara .pv small, .card.rara .bioma, .card.rara .inter .titulo, .card.rara .inter p, .card.rara .rodape span {
  color: var(--ink-claro); -webkit-text-stroke: 0.9px oklch(0.16 0.02 62 / .75); paint-order: stroke fill;
  text-shadow: 0 1px 1.5px oklch(0.10 0.02 62 / .85), 0 0 6px oklch(0.10 0.02 62 / .55), 0 0 14px oklch(0.10 0.02 62 / .35); }
.card.rara .papel, .card.rara .cient, .card.rara .pv small, .card.rara .bioma, .card.rara .rodape span { -webkit-text-stroke-width: 0.6px; }
.card.rara .inter p { font-weight: 600; -webkit-text-stroke-width: 0.7px; }
.card.rara .nome, .card.rara .pv b { -webkit-text-stroke-width: 1.1px; }
.card.rara .cient { color: oklch(0.95 0.01 var(--hue)); }
.card.rara .bioma { border-top-color: var(--ink-claro); }
.card.rara .rodape { border-top-color: oklch(0.985 0.01 var(--hue) / .6); }
.card.rara .inter .marcador { box-shadow: 0 0 0 1.5px var(--ink-claro), 0 1px 3px oklch(0.10 0.02 62 / .8); }
.card.rara .inter.passiva .marcador { border-color: var(--ink-claro); background: oklch(0.16 0.02 62 / .5); }
.card.rara .icone { box-shadow: 0 0 0 1.5px var(--ink-claro), 0 1px 3px oklch(0.10 0.02 62 / .8); }
.card.rara .custo i { border-color: var(--ink-claro); box-shadow: 0 1px 2px oklch(0.10 0.02 62 / .8); }
.card.sem-arte .ser-vivo { display: none; }
/* modo sala de aula numa rara: sem arte, volta à tinta escura sobre o fundo claro */
.card.rara.sem-arte, .card.rara.sem-arte .nome, .card.rara.sem-arte .papel, .card.rara.sem-arte .cient, .card.rara.sem-arte .pv b, .card.rara.sem-arte .pv small, .card.rara.sem-arte .bioma, .card.rara.sem-arte .inter .titulo, .card.rara.sem-arte .inter p, .card.rara.sem-arte .rodape span { color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; }
.card.rara.sem-arte .janela { border: 1px solid oklch(0.22 0.02 62 / .4); background: #fff; }
@keyframes brilho { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .card.incomum::after, .card.rara .holo { animation: none; } }

/* ===================== TERRENO ===================== */
.card.terreno { background: oklch(0.965 0.014 88); padding: 0; gap: 0; }
.card.terreno .faixa { height: 49px; flex: 0 0 49px; background: oklch(0.34 0.09 var(--hue)); color: oklch(0.97 0.01 88); padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.card.terreno .faixa .linha { display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.card.terreno .faixa .nome { font-size: 16px; } .card.terreno .faixa .nome.fs-14 { font-size: 14.5px; } .card.terreno .faixa .nome.fs-13 { font-size: 13px; }
.card.terreno .corpo { padding: 11px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card.terreno .efeito { display: flex; gap: 7px; align-items: flex-start; }
.card.terreno .efeito i { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 3px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; font-style: normal; margin-top: 1px; background: oklch(0.52 0.13 var(--hue)); }
.card.terreno .efeito.neg i { background: oklch(0.48 0.14 25); font-size: 13px; }
.card.terreno .efeito p { margin: 0; font-size: 10px; line-height: 1.4; color: oklch(0.20 0.02 62 / .97); text-wrap: pretty; }
.card.terreno .rodape { padding-top: 5px; }

/* ===================== PRESSÃO ===================== */
.card.pressao { background: oklch(0.94 0.012 25); padding: 0; gap: 0; }
.card.pressao .faixa { height: 49px; flex: 0 0 49px; background: oklch(0.34 0.13 25); color: oklch(0.96 0.015 25); padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.card.pressao .faixa .linha { display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.card.pressao .faixa .nome { font-size: 17px; }
.card.pressao .corpo { padding: 11px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card.pressao .janela { height: 100px; flex: 0 0 100px; }
.card.pressao .corpo p { margin: 0; font-size: 10px; line-height: 1.32; color: oklch(0.20 0.02 62 / .97); text-wrap: pretty; }
.card.pressao .corpo p.fato { font-size: 9px; }
.card.pressao .rodape { padding-top: 5px; }

/* ===================== ENERGIA ===================== */
.card.energia { padding: 11px; gap: 0; justify-content: space-between; background: oklch(0.42 0.10 var(--hue)); color: oklch(0.97 0.01 var(--hue)); }
.card.energia .lineart { position: absolute; left: 14px; top: 40px; width: 200px; height: 190px; object-fit: contain; opacity: .95; pointer-events: none; }
.card.energia .rotulo { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.card.energia .base { display: flex; flex-direction: column; gap: 3px; margin: 0 -11px -11px; padding: 26px 11px 12px; background: linear-gradient(to top, oklch(0.42 0.10 var(--hue)) 0%, oklch(0.42 0.10 var(--hue)) 62%, transparent 100%); }
.card.energia .base .nome { font-size: 22px; }
.card.energia .base .sub { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .1em; opacity: .85; }

/* ===================== VERSO ===================== */
.card.verso { padding: 0; background: #1c2b1f; }
.card.verso img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===================== estados de jogo (usados nas etapas seguintes) ===================== */
.card.virada { transform: rotate(90deg); }
.card.jogavel { box-shadow: 0 0 0 3px oklch(0.80 0.16 130), 0 0 18px oklch(0.80 0.16 130 / .7); }
.card.alvo { box-shadow: 0 0 0 3px oklch(0.70 0.20 25), 0 0 18px oklch(0.70 0.20 25 / .7); }
.card.selecionada { box-shadow: 0 0 0 3px oklch(0.85 0.17 90), 0 0 18px oklch(0.85 0.17 90 / .7); }

/* foco de teclado nas cartas acionáveis */
.card:focus-visible { outline: 3px solid oklch(0.80 0.16 130); outline-offset: 3px; }