/* cards.css — cartas de cartão laminado (docs/DIRECAO-DE-ARTE.md). Chassis com contorno escuro e aba inferior na
   cor do tipo; silhueta por tipo (Equipamento com rebites, Armadilha de Casa com listras de aviso, Reativa com
   cantos chanfrados, Counter com dentes de relâmpago, Magia Rápida com arco); janela da arte escura; medalhão de
   velocidade; fita com nome e tipo; caixa de regras rebaixada; placa de raridade. Tudo escala com --cw. */
.hcard { --cw: 132px; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hue: 0deg;
  --frame: #2563EB; --frame2: #1E40AF; --lip: #1D4ED8; --edge: #93C5FD; --rar: #64748B;
  width: var(--cw); height: calc(var(--cw) * 1.4); perspective: 1000px; position: relative; flex: none; user-select: none; }
.hcard.size-xs { --cw: 64px; } .hcard.size-sm { --cw: 96px; } .hcard.size-md { --cw: 132px; } .hcard.size-lg { --cw: 190px; } .hcard.size-xl { --cw: min(280px, 70vw); }
.k-EQUIP { --frame: #3B82F6; --frame2: #1E40AF; --lip: #1D4ED8; --edge: #BFDBFE; }
.k-GRID { --frame: #F59E0B; --frame2: #B45309; --lip: #92400E; --edge: #FEF3C7; }
.k-REACTIVE { --frame: #EF4444; --frame2: #B91C1C; --lip: #991B1B; --edge: #FECACA; }
.k-COUNTER { --frame: #8B5CF6; --frame2: #5B21B6; --lip: #4C1D95; --edge: #DDD6FE; }
.k-QUICK { --frame: #10B981; --frame2: #047857; --lip: #065F46; --edge: #A7F3D0; }
.r-COMMON { --rar: #94A3B8; } .r-RARE { --rar: #38BDF8; } .r-EPIC { --rar: #C084FC; } .r-LEGENDARY { --rar: #FFB703; }

.hc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s var(--ease-out-snappy); border-radius: calc(var(--cw) * .09); }
.hcard.tilting .hc-tilt { transition: transform .06s linear; }
.hcard.face-down .hc-tilt { transform: rotateY(180deg); }
.hc-face, .hc-back { position: absolute; inset: 0; border-radius: calc(var(--cw) * .09); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hc-face { display: flex; flex-direction: column; gap: calc(var(--cw) * .028); padding: calc(var(--cw) * .05) calc(var(--cw) * .05) calc(var(--cw) * .09);
  background: linear-gradient(180deg, var(--frame) 0%, var(--frame2) 100%); color: var(--text-main, #F8FAFC);
  border: calc(var(--cw) * .016 + 1.4px) solid #0F141C;
  box-shadow: inset 0 calc(var(--cw) * .018) 0 rgba(255, 255, 255, .3), inset 0 calc(var(--cw) * -.02) 0 rgba(0, 0, 0, .18),
    0 calc(var(--cw) * .026) 0 var(--lip), 0 calc(var(--cw) * .042) 0 #0F141C, 0 calc(var(--cw) * .07) calc(var(--cw) * .1) rgba(0, 0, 0, .5); }
.hc-back { transform: rotateY(180deg); border: calc(var(--cw) * .02 + 1px) solid #C9A24A; background: radial-gradient(circle at 50% 45%, #2A3B5C, #121925); display: grid; place-items: center; overflow: hidden; }
.hc-back.solo { transform: none; }
.hc-back.art { border: none; background: center / 100% 100% no-repeat; box-shadow: 0 calc(var(--cw) * .04) calc(var(--cw) * .1) rgba(0, 0, 0, .6); }
.hc-back-inner { position: relative; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFE58A, #FFB703 55%, #B87D00); border: calc(var(--cw) * .02 + 1px) solid #0F141C; display: grid; place-items: center; }
.hc-back-logo { font-family: var(--font-display); text-align: center; line-height: .95; font-size: calc(var(--cw) * .1); color: #0F141C; }

/* janela da arte: palco escuro com raios suaves; o objeto de vinil em cima */
.hc-art { position: relative; flex: 0 0 auto; height: 43%; border-radius: calc(var(--cw) * .055); overflow: hidden;
  border: calc(var(--cw) * .012 + 1px) solid #0F141C; box-shadow: inset 0 calc(var(--cw) * .025) 0 rgba(0, 0, 0, .45);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c1, #334158) 34%, #334158) 0%, #1B2638 58%, #121925 100%); display: grid; place-items: center; }
.hc-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0 9deg, transparent 9deg 22deg); animation: spin-slow 40s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hc-art .card-icon { position: relative; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 calc(var(--cw) * .025) calc(var(--cw) * .02) rgba(0, 0, 0, .5)); }
.hc-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; pointer-events: none; }
.hcard.vplay .hc-video { opacity: 1; }
/* Lendárias sem vídeo: o objeto flutua e roda um pouco, o brilho da carta pulsa e 4 estrelinhas cintilam */
.hc-alive { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.hc-alive i { position: absolute; width: 9%; aspect-ratio: 1; background: #FFD166; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px rgba(255, 209, 102, .9)); transform: scale(0); }
.hc-alive i:nth-child(1) { left: 14%; top: 18%; } .hc-alive i:nth-child(2) { right: 12%; top: 26%; width: 7%; }
.hc-alive i:nth-child(3) { left: 22%; bottom: 14%; width: 6%; } .hc-alive i:nth-child(4) { right: 20%; bottom: 18%; width: 10%; }
.hcard.aplay .hc-alive { opacity: 1; }
.hcard.aplay .hc-alive i { animation: alive-twinkle 1.6s ease-in-out infinite; }
.hcard.aplay .hc-alive i:nth-child(2) { animation-delay: .4s; } .hcard.aplay .hc-alive i:nth-child(3) { animation-delay: .8s; } .hcard.aplay .hc-alive i:nth-child(4) { animation-delay: 1.2s; }
.hcard.aplay .hc-art .card-icon { animation: alive-float 2.4s ease-in-out infinite; }
.hcard.aplay .hc-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, var(--c1), transparent 62%); mix-blend-mode: screen; animation: alive-glow 2.4s ease-in-out infinite; pointer-events: none; }
.hcard.aplay .hc-rays { animation-duration: 8s; }
@keyframes alive-float { 0%, 100% { transform: translateY(4%) rotate(-3deg); } 50% { transform: translateY(-6%) rotate(3deg) scale(1.05); } }
@keyframes alive-glow { 0%, 100% { opacity: .15; } 50% { opacity: .55; } }
@keyframes alive-twinkle { 0%, 100% { transform: scale(0) rotate(0); } 40% { transform: scale(1) rotate(45deg); } 70% { transform: scale(.4) rotate(90deg); } }
/* silhuetas por tipo */
.k-REACTIVE .hc-art { clip-path: polygon(11% 0, 89% 0, 100% 15%, 100% 85%, 89% 100%, 11% 100%, 0 85%, 0 15%); }
.k-QUICK .hc-art { border-radius: 50% 50% calc(var(--cw) * .055) calc(var(--cw) * .055) / 30% 30% calc(var(--cw) * .055) calc(var(--cw) * .055); }
.hc-face::before { content: ''; position: absolute; pointer-events: none; z-index: 2; }
.k-EQUIP .hc-face::before { left: calc(var(--cw) * .012); right: calc(var(--cw) * .012); top: 47%; height: calc(var(--cw) * .07);
  background: radial-gradient(circle at calc(var(--cw) * .035) 50%, #E2E8F0 0 calc(var(--cw) * .017), #0F141C calc(var(--cw) * .018) calc(var(--cw) * .028), transparent calc(var(--cw) * .029)),
    radial-gradient(circle at calc(100% - var(--cw) * .035) 50%, #E2E8F0 0 calc(var(--cw) * .017), #0F141C calc(var(--cw) * .018) calc(var(--cw) * .028), transparent calc(var(--cw) * .029)); }
.k-GRID .hc-face::before { left: 26%; right: 8%; top: calc(var(--cw) * .008); height: calc(var(--cw) * .034); border-radius: 3px;
  background: repeating-linear-gradient(-45deg, #0F141C 0 calc(var(--cw) * .022), #FDE68A calc(var(--cw) * .022) calc(var(--cw) * .044)); box-shadow: 0 0 0 1px #0F141C; }
.k-COUNTER .hc-face::before { left: 30%; right: 12%; top: calc(var(--cw) * -.03); height: calc(var(--cw) * .06); background: #0F141C;
  clip-path: polygon(0 100%, 10% 0, 20% 100%, 30% 0, 40% 100%, 50% 0, 60% 100%, 70% 0, 80% 100%, 90% 0, 100% 100%); }

/* medalhão de velocidade (fura a moldura no canto) */
.hc-speed { position: absolute; z-index: 3; left: calc(var(--cw) * -.035); top: calc(var(--cw) * -.035); width: calc(var(--cw) * .23); height: calc(var(--cw) * .23);
  border-radius: 50%; background: #0F141C; border: calc(var(--cw) * .012 + 1px) solid #334158; display: grid; place-items: center; box-shadow: 0 calc(var(--cw) * .018) 0 rgba(0, 0, 0, .45); }
.hc-speed .ico { width: 64%; height: 64%; }
.hc-speed b { position: absolute; right: calc(var(--cw) * -.025); bottom: calc(var(--cw) * -.02); min-width: calc(var(--cw) * .1); height: calc(var(--cw) * .1); padding: 0 2px; border-radius: 4px;
  background: #F8FAFC; color: #0F141C; border: 1px solid #0F141C; font: 700 calc(var(--cw) * .07)/calc(var(--cw) * .09) var(--font-num); text-align: center; }
.hc-speed.s2 { border-color: #00B4D8; } .hc-speed.s3 { border-color: #FFB703; }

/* fita com o nome e o tipo */
.hc-ribbon { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cw) * .006); margin: 0 calc(var(--cw) * -.05); padding: calc(var(--cw) * .02) calc(var(--cw) * .05);
  background: #0F141C; text-align: center; }
.hc-name { font-family: var(--font-sans); font-weight: 800; font-size: calc(var(--cw) * .072); line-height: 1.08; letter-spacing: -.01em; color: #F8FAFC; max-width: 100%;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hc-name.n-l { font-size: calc(var(--cw) * .064); }
.hc-name.n-xl { font-size: calc(var(--cw) * .058); }
.hc-name.n-xxl { font-size: calc(var(--cw) * .052); }
.hc-kind { font-family: var(--font-sans); font-weight: 800; font-size: calc(var(--cw) * .044); text-transform: uppercase; letter-spacing: .06em; color: var(--edge); line-height: 1.1; }

/* caixa de regras rebaixada */
.hc-text { flex: 1; min-height: 0; background: #141A24; border-radius: calc(var(--cw) * .04); padding: calc(var(--cw) * .032) calc(var(--cw) * .04);
  box-shadow: inset 0 calc(var(--cw) * .02) 0 rgba(0, 0, 0, .5), inset 0 0 0 1.5px #0F141C;
  font-family: var(--font-sans); font-weight: 600; font-size: calc(var(--cw) * .058); line-height: 1.22; color: #E2E8F0; overflow: hidden; }

/* placa de raridade (insígnias) */
.hc-rar { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--cw) * -.04); transform: translateX(-50%); display: flex; gap: 1px; align-items: center;
  padding: calc(var(--cw) * .012) calc(var(--cw) * .045); border-radius: 999px; background: #0F141C; border: calc(var(--cw) * .008 + 1px) solid var(--rar); }
.hc-rar .ico { width: calc(var(--cw) * .085); height: calc(var(--cw) * .085); }

.size-xs .hc-text, .size-xs .hc-kind, .size-sm .hc-text, .size-xs .hc-rar { display: none; }
.size-xs .hc-name { font-size: calc(var(--cw) * .12); -webkit-line-clamp: 2; }
.size-xs .hc-speed { width: calc(var(--cw) * .3); height: calc(var(--cw) * .3); }
.size-xs .hc-speed b { display: none; }
.size-xs .hc-art, .size-sm .hc-art { flex: 1; height: auto; }

/* acabamento: Rara com reflexo diagonal estático; Épica e Lendária com foil que segue o rato */
.hc-holo, .hc-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.hc-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .45) 0%, transparent 50%); mix-blend-mode: overlay; opacity: 0; transition: opacity .3s; }
.hcard.tilting .hc-glare { opacity: 1; }
.r-RARE .hc-holo { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%); }
.r-EPIC .hc-holo { background: repeating-linear-gradient(115deg, #ff0080 0%, #ff8c00 5%, #40e0d0 10%, #7b2cbf 15%, #ff0080 20%);
  background-size: 300% 300%; background-position: var(--mx) var(--my); mix-blend-mode: color-dodge; opacity: .22; filter: hue-rotate(var(--hue)); }
.r-LEGENDARY .hc-face { border-color: #0F141C; }
.r-LEGENDARY .hc-ribbon { background: linear-gradient(90deg, #0F141C, #3A2A05 50%, #0F141C); }
.r-LEGENDARY .hc-name { color: #FFD166; }
.r-LEGENDARY .hc-holo { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .45), transparent 55%),
  repeating-linear-gradient(135deg, rgba(255, 215, 0, .4) 0%, rgba(0, 229, 255, .35) 15%, rgba(255, 0, 170, .35) 30%);
  mix-blend-mode: color-dodge; opacity: .32; }

/* estados de jogo */
.hcard.playable { cursor: pointer; }
.hcard.picked { z-index: 30; }
.hcard.dim { filter: grayscale(.6) brightness(.72); }
.hcard.respond .hc-face { animation: respond-pulse 1s ease-in-out infinite; }
@keyframes respond-pulse { 50% { filter: brightness(1.15); } }
.hcard .count-badge { position: absolute; top: -8px; right: -8px; z-index: 5; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--color-danger); color: #fff;
  border: 2.5px solid #0F141C; font: 700 13px/21px var(--font-num); text-align: center; box-shadow: 0 3px 0 #090C10; transform: rotate(6deg); }
.hcard.locked { filter: grayscale(1) brightness(.5); }
.hcard.locked::after { content: ''; position: absolute; inset: 0; background: center / 32% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 10.4V7.6a4 4 0 0 1 8 0v2.8' fill='none' stroke='%230F141C' stroke-width='3.6'/%3E%3Cpath d='M8 10.4V7.6a4 4 0 0 1 8 0v2.8' fill='none' stroke='%2394A3B8' stroke-width='1.6'/%3E%3Crect x='5.4' y='10.4' width='13.2' height='9.6' fill='%23FFB703' stroke='%230F141C' stroke-width='2'/%3E%3C/svg%3E"); }