/* cdv_driver_card.css — Carta do Piloto colecionável (DEM-146). */
.cdc-dialog {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 18px 16px;
  border: 0; background: transparent; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  overflow: hidden;
}
.cdc-dialog:not([open]) { display: none; }
.cdc-dialog::backdrop { background: radial-gradient(60% 60% at 50% 45%, rgba(30, 32, 44, 0.92), rgba(3, 4, 8, 0.97)); backdrop-filter: blur(4px); }
.cdc-close { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 28px; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.1); cursor: pointer; }
.cdc-stage { position: relative; perspective: 1200px; }
.cdc-flash { position: absolute; inset: -40%; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 196, 0, 0.4) 30%, transparent 62%); opacity: 0; }

.cdc-card {
  --team: #f39c12; --frame-a: #ffd0a6; --frame-b: #e09155; --frame-c: #8a4b22; --foil: 0.22;
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hyp: 0;
  display: block; position: relative; width: min(340px, 78vw, calc((100dvh - 190px) * 0.714)); aspect-ratio: 5 / 7;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cdc-card.is-active { transition: transform 0.08s linear; }
.cdc--bronze { --frame-a: #ffd0a6; --frame-b: #e09155; --frame-c: #8a4b22; --foil: 0.22; }
.cdc--prata { --frame-a: #ffffff; --frame-b: #c9d1db; --frame-c: #7d8794; --foil: 0.3; }
.cdc--ouro { --frame-a: #fff1a8; --frame-b: #ffc400; --frame-c: #b8860b; --foil: 0.38; }
.cdc--lenda { --frame-a: #ff4ecd; --frame-b: #ffc400; --frame-c: #38f9d7; --foil: 0.65; }
.cdc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.5, 1); }
.cdc-card.is-flipped .cdc-inner { transform: rotateY(180deg); }

.cdc-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 22px; backface-visibility: hidden;
  border: 7px solid transparent;
  background:
    linear-gradient(180deg, #1b1c24, #08090d) padding-box,
    linear-gradient(135deg, var(--frame-a), var(--frame-b) 45%, var(--frame-c)) border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--frame-b) 45%, transparent);
}
.cdc-front::before { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 60% at 50% 42%, color-mix(in srgb, var(--team) 60%, transparent), transparent 70%), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 6px, transparent 6px 26px); }
.cdc-num-bg { position: absolute; right: -8px; top: -22px; font-family: 'Exo 2', sans-serif; font-size: 190px; font-weight: 900; font-style: italic; line-height: 1; color: rgba(255, 255, 255, 0.07); }
.cdc-badge { position: absolute; z-index: 2; left: 14px; top: 10px; display: flex; flex-direction: column; text-align: left; line-height: 1; }
.cdc-badge b { font-family: 'Exo 2', sans-serif; font-size: 40px; font-weight: 900; font-style: italic; color: var(--frame-b); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.cdc-badge small { margin-top: 4px; font-size: 11px; font-weight: 900; letter-spacing: 0.24em; text-transform: uppercase; }
.cdc-figure { position: absolute; left: 0; right: 0; top: 13%; height: 52%; }
.cdc-hero { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 64%; height: 78%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6)); }
.cdc-figure.is-body .cdc-hero { width: 76%; height: 100%; }
.cdc-car { position: absolute; left: 8%; right: 8%; bottom: 0; width: 84%; height: 34%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.7)); }
.cdc-figure.is-body .cdc-car { left: auto; right: -4%; width: 58%; height: 26%; }
.cdc-plate { position: absolute; left: 0; right: 0; top: 66%; padding: 8px 12px 0; text-align: center; border-top: 4px solid var(--team); background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent); }
.cdc-plate h3 { margin: 0; font-family: 'Exo 2', sans-serif; font-size: clamp(18px, 6.4vw, 26px); font-weight: 900; font-style: italic; line-height: 1.05; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.cdc-plate p { margin: 2px 0 0; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdc-stats { position: absolute; left: 10px; right: 10px; bottom: 9%; display: flex; justify-content: space-around; }
.cdc-stats span { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.cdc-stats b { font-family: 'Exo 2', sans-serif; font-size: 26px; font-weight: 900; font-style: italic; color: var(--frame-b); }
.cdc-stats small { margin-top: 3px; font-size: 8.5px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.cdc-season { position: absolute; left: 0; right: 0; bottom: 2.4%; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, 0.45); }

/* Holográfico: arco-íris que corre com o ponteiro + reflexo de luz. */
.cdc-foil {
  --b1: #ff4ecd; --b2: #ffc400; --b3: #38f9d7; --b4: #6a8dff;
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: color-dodge;
  opacity: calc(var(--foil) * (0.35 + var(--hyp) * 1.1));
  background:
    repeating-linear-gradient(110deg, transparent 0%, var(--b1) 3%, transparent 6%, transparent 9%, var(--b2) 12%, transparent 15%, transparent 18%, var(--b3) 21%, transparent 24%, transparent 27%, var(--b4) 30%, transparent 33%),
    repeating-linear-gradient(20deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 6px);
  background-size: 260% 260%, 100% 100%;
  background-position: var(--mx) var(--my), center;
  transition: opacity 0.3s ease;
}
.cdc--bronze .cdc-foil { --b1: #ffd0a6; --b2: #e09155; --b3: #ffd0a6; --b4: #c97a3d; }
.cdc--prata .cdc-foil { --b1: #ffffff; --b2: #9fb3c8; --b3: #e6e9ee; --b4: #b8c7ff; }
.cdc--ouro .cdc-foil { --b1: #fff1a8; --b2: #ffc400; --b3: #ffe27a; --b4: #ff9f1a; }
.cdc-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.7), transparent 45%); opacity: calc(0.2 + var(--hyp) * 0.6); }

.cdc-back { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.cdc-back::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.05) 0 10deg, transparent 10deg 20deg), radial-gradient(circle, color-mix(in srgb, var(--frame-b) 35%, transparent), transparent 70%); }
.cdc-back img { position: relative; width: 46%; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); }
.cdc-back b { position: relative; font-family: 'Exo 2', sans-serif; font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.cdc-back small { position: relative; font-size: 11px; font-weight: 900; letter-spacing: 0.24em; text-transform: uppercase; color: var(--frame-b); }

.cdc-hint { margin: 0; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.6); text-align: center; }
.cdc-hint b { color: #fff; }
.cdc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Abrir a carta: começa de costas, pequena, gira até a frente com clarão. */
.cdc-dialog.is-reveal .cdc-card { animation: cdc-reveal 1.25s cubic-bezier(0.2, 0.9, 0.2, 1) backwards; }
.cdc-dialog.is-reveal .cdc-flash { animation: cdc-flash 1s ease-out 0.75s both; }
.cdc-dialog.is-reveal .cdc-hint, .cdc-dialog.is-reveal .cdc-actions { animation: cdc-up 0.5s ease 1.2s both; }
@keyframes cdc-reveal {
  0% { transform: translateY(40px) scale(0.45) rotateY(540deg); filter: brightness(0.4); }
  70% { transform: translateY(0) scale(1.06) rotateY(-8deg); filter: brightness(1.4); }
  100% { transform: rotateX(var(--rx)) rotateY(var(--ry)); filter: none; }
}
@keyframes cdc-flash { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes cdc-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cdc-card, .cdc-inner { transition: none; }
  .cdc-dialog .cdc-card, .cdc-dialog .cdc-flash, .cdc-dialog .cdc-hint, .cdc-dialog .cdc-actions { animation: none !important; }
}

/* Gatilho no palco do piloto. */
.palco-card-open {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--frame-b, #ffc400) 70%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--frame-b, #ffc400) 30%, #111), #111);
  color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.04em;
  box-shadow: 0 0 22px color-mix(in srgb, var(--frame-b, #ffc400) 35%, transparent);
}
.palco-card-open .pco-mini { width: 22px; height: 30px; border-radius: 4px; background: linear-gradient(135deg, var(--frame-a), var(--frame-b), var(--frame-c)); animation: pco-shimmer 2.6s ease-in-out infinite; }
.palco-card-open:hover { filter: brightness(1.15); }
@keyframes pco-shimmer { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .palco-card-open .pco-mini { animation: none; } }