/* Cartas DONE. Tamaño: el ancho del contenedor; todo escala con cqw. */
.dc { container-type: inline-size; width: 100%; aspect-ratio: 5 / 7; position: relative; font-family: 'Sora', system-ui, sans-serif; user-select: none; }
.dc-in { position: absolute; inset: 0; border-radius: 6.5cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-shadow: 0 1.5cqw 5cqw rgba(0,0,0,.28), 0 .4cqw 1cqw rgba(0,0,0,.18); }

/* ---------- Dorso multicolor ---------- */
.dc-back.rainbow .dc-in {
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(120% 80% at 50% 40%, #1B1424 0%, #0B0910 70%);
  justify-content: center;
}
.dc-back.rainbow .dc-in::before { /* marco arcoíris */
  content: ''; position: absolute; inset: 3.2cqw; border-radius: 4cqw; padding: .9cqw;
  background: linear-gradient(135deg, #E5533F, #F28C38, #F7C531, #35B26F, #2DD4B5, #8A63F2, #B57BE0, #E5533F);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.dc-back.rainbow .dc-in::after { content: ''; position: absolute; inset: 6.2cqw; border-radius: 2.6cqw; border: .3cqw solid rgba(255,255,255,.16); }
.dc-rays {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255,255,255,.10) 0 .6deg, transparent .6deg 7.5deg);
  -webkit-mask: radial-gradient(closest-side at 50% 46%, transparent 18%, #000 30%, #000 60%, transparent 100%);
          mask: radial-gradient(closest-side at 50% 46%, transparent 18%, #000 30%, #000 60%, transparent 100%);
}
.dc-gems i { position: absolute; width: 4.2cqw; height: 6.4cqw; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dc-gems i:nth-child(1) { top: 9cqw; left: 9.5cqw; background: #E5533F; }
.dc-gems i:nth-child(2) { top: 9cqw; right: 9.5cqw; background: #35B26F; }
.dc-gems i:nth-child(3) { bottom: 9cqw; left: 9.5cqw; background: #8A63F2; }
.dc-gems i:nth-child(4) { bottom: 9cqw; right: 9.5cqw; background: #F7C531; }
.dc-deer { position: relative; width: 58cqw; margin-top: -4cqw; filter: drop-shadow(0 0 5cqw rgba(140,100,255,.35)) drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5)); }
.dc-done {
  position: relative; font-weight: 800; font-size: 21cqw; line-height: .9; letter-spacing: -.02em; margin-top: 1cqw;
  background: linear-gradient(90deg, #F7C531, #F28C38 25%, #E5533F 45%, #B57BE0 70%, #2DD4B5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: rotate(-5deg); filter: drop-shadow(0 .8cqw 0 rgba(0,0,0,.55));
}
.dc-swoosh { position: relative; width: 50cqw; height: 3cqw; margin-top: 1cqw; border-bottom: 1cqw solid #F7C531; border-radius: 0 0 50% 50%; transform: rotate(-4deg); opacity: .9; }
.dc-brand { position: relative; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 4cqw; letter-spacing: .5em; margin-top: 4cqw; color: rgba(255,255,255,.75); padding-left: .5em; }

/* ---------- Dorso por casa ---------- */
.dc-back.house .dc-in { background: radial-gradient(90% 70% at 50% 42%, var(--hl), var(--hc) 55%, var(--hd)); justify-content: center; }
.dc-back.house .dc-in::before { content: ''; position: absolute; inset: 3.2cqw; border-radius: 4cqw; border: .7cqw solid rgba(255,255,255,.85); }
.dc-back.house .dc-in::after { content: ''; position: absolute; inset: 5.6cqw; border-radius: 2.8cqw; border: .3cqw solid rgba(255,255,255,.4); }
.dc-back.house .dc-rays { background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.28) 0 .5deg, transparent .5deg 6deg); -webkit-mask: radial-gradient(closest-side at 50% 42%, transparent 22%, #000 32%, #000 58%, transparent 92%); mask: radial-gradient(closest-side at 50% 42%, transparent 22%, #000 32%, #000 58%, transparent 92%); }
.dc-back.house .dc-gems i { background: #fff; }
.dc-medal { position: relative; width: 50cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin-top: -6cqw; background: rgba(0,0,0,.18); box-shadow: 0 0 0 .8cqw #fff, 0 0 0 2.4cqw rgba(255,255,255,.25); }
.dc-medal img { width: 72%; }
.dc-back.house .dc-done { background: none; color: #fff; font-size: 18cqw; margin-top: 7cqw; filter: drop-shadow(0 .8cqw 0 rgba(0,0,0,.28)); }
.dc-back.house .dc-brand { color: #fff; margin-top: 3cqw; }

/* ---------- Frente ---------- */
.dc-front .dc-in { background: linear-gradient(160deg, var(--hl), var(--hc) 45%, var(--hd)); padding: 4.5cqw; justify-content: flex-start; }
.dc-front.wild .dc-in { background: linear-gradient(150deg, #E5533F, #F28C38 18%, #F7C531 34%, #35B26F 52%, #2DD4B5 66%, #8A63F2 82%, #B57BE0); }
.dc-top { position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.dc-pill { display: inline-flex; align-items: center; gap: 1.6cqw; background: rgba(255,255,255,.94); color: var(--hd); font-weight: 700; font-size: 4.6cqw; line-height: 1.1; padding: 1.7cqw 3cqw 1.7cqw 2.2cqw; border-radius: 99cqw; max-width: 72%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-pi { width: 4.8cqw; height: 4.8cqw; flex: none; }
.dc-val { display: inline-flex; align-items: center; gap: 1.2cqw; font-weight: 800; font-size: 6cqw; color: #fff; background: rgba(0,0,0,.28); padding: 1cqw 2.8cqw 1cqw 1.2cqw; border-radius: 99cqw; font-variant-numeric: tabular-nums; }
.dc-val i { width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--dc-coin, url('deer-128.webp')) center/cover; box-shadow: 0 0 0 .4cqw rgba(255,255,255,.5); }
.dc-art { position: relative; flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }
.dc-front .dc-rays { inset: -30% -10%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.30) 0 .5deg, transparent .5deg 7deg); -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 42%, transparent 75%); mask: radial-gradient(closest-side, transparent 30%, #000 42%, transparent 75%); }
.dc-badge { position: relative; width: 31cqw; aspect-ratio: 1; border-radius: 50%; background: #FFFDF8; color: var(--hd); display: grid; place-items: center; box-shadow: 0 0 0 1.4cqw rgba(255,255,255,.35), 0 1.4cqw 3cqw rgba(0,0,0,.25); }
.dc-front.wild .dc-badge { color: #3A1F6E; }
.dc-i { width: 58%; height: 58%; }
.dc-panel { position: relative; width: 100%; background: #FFFDF8; color: #17141A; border-radius: 4.5cqw; padding: 5cqw 4.5cqw 3.4cqw; display: flex; flex-direction: column; gap: 3.4cqw; box-shadow: 0 -.6cqw 0 rgba(255,255,255,.4) inset; }
.dc-text { margin: 0; font-weight: 700; text-align: center; line-height: 1.22; letter-spacing: -.005em; text-wrap: balance; }
.dc-text.s { font-size: 7cqw; } .dc-text.m { font-size: 6cqw; } .dc-text.l { font-size: 5.2cqw; } .dc-text.xl { font-size: 4.6cqw; }
.dc-foot { display: flex; align-items: center; gap: 3cqw; font-size: 3.9cqw; font-weight: 600; color: #6E6455; border-top: .3cqw dashed #E1D6C2; padding-top: 2.6cqw; }
.dc-foot span { display: inline-flex; align-items: center; gap: 1cqw; }
.dc-fi { width: 4.2cqw; height: 4.2cqw; color: var(--hd); }
.dc-mark { margin-left: auto; font-weight: 800; letter-spacing: .06em; color: var(--hd); }
.dc-front.wild .dc-mark, .dc-front.wild .dc-fi, .dc-front.wild .dc-pill { color: #5A2D91; }

/* ---------- Volteo ---------- */
.dc-flip { perspective: 1400px; cursor: pointer; outline: none; }
.dc-flip-in { position: relative; aspect-ratio: 5 / 7; transition: transform .8s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.dc-flip.up .dc-flip-in { transform: rotateY(180deg); }
.dc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dc-face.f { transform: rotateY(180deg); }
.dc-flip:focus-visible .dc-in { outline: 3px solid #C9A24B; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .dc-flip-in { transition: none; } }

/* ---------- Puntos (cartas que no dan Deers) ---------- */
.dc-val.pts { background: rgba(255,255,255,.92); color: var(--hd); padding-left: 1.8cqw; }
.dc-vi { width: 5.6cqw; height: 5.6cqw; }
.dc-front.wild .dc-val.pts { color: #5A2D91; }

/* ---------- Carta manual ---------- */
.dc-mtitle { position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; min-height: 0; }
.dc-mtitle .dc-rays { inset: -40% -10%; }
.dc-mtitle b { position: relative; font-weight: 800; font-size: 19cqw; line-height: .9; letter-spacing: -.02em; transform: rotate(-4deg); text-shadow: 0 1cqw 0 rgba(0,0,0,.3); }
.dc-mtitle small { position: relative; font-weight: 700; font-size: 3.9cqw; margin-top: 2.6cqw; background: rgba(0,0,0,.28); padding: 1.2cqw 3cqw; border-radius: 99cqw; }
.dc-manual .dc-panel { gap: 2.4cqw; padding: 3.8cqw 4cqw 3cqw; }
.dc-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2.2cqw; }
.dc-rules li { display: flex; align-items: center; gap: 2.4cqw; font-size: 3.85cqw; font-weight: 600; line-height: 1.22; }
.dc-rn { flex: none; width: 7.2cqw; height: 7.2cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.dc-rules li:nth-child(1) .dc-rn { background: #F28C38; } .dc-rules li:nth-child(2) .dc-rn { background: #E5533F; }
.dc-rules li:nth-child(3) .dc-rn { background: #35B26F; } .dc-rules li:nth-child(4) .dc-rn { background: #8A63F2; }
.dc-rules li:nth-child(5) .dc-rn { background: #2DD4B5; }
.dc-ri { width: 4.4cqw; height: 4.4cqw; }