/* Box Box v8.5 — 5:7 compact driver card redesign */
.driver-card-v2{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  aspect-ratio:5/7;
  min-height:0;
  border:2px solid #536171;
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--team-color) 18%,transparent),transparent 36%),
    linear-gradient(148deg,#111822 0%,#0b1017 60%,#070b10 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.driver-card-v2.rarity-edge-r{border-color:#5f6f81}
.driver-card-v2.rarity-edge-sr{border-color:#8a67c5;box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 0 1px rgba(181,140,255,.08) inset}
.driver-card-v2.rarity-edge-ssr{border-color:#bea05a;background:radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--team-color) 15%,transparent),transparent 36%),linear-gradient(148deg,#12171e 0%,#0b1017 58%,#070b10 100%);box-shadow:0 18px 48px rgba(0,0,0,.32),0 0 0 1px rgba(234,202,124,.12) inset}
.driver-card-v2.rarity-edge-ur{
  border:2px solid transparent;
  background:
    linear-gradient(145deg,#10141b,#0b1017) padding-box,
    conic-gradient(from 210deg,#f973ff,#82f7ff,#fff08c,#9eff8c,#76b8ff,#f973ff) border-box;
  box-shadow:0 22px 54px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.08) inset;
}
.driver-card-v2::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
  z-index:6;
}
.driver-card-v2.rarity-edge-ur::before{border-color:rgba(255,255,255,.22)}
.driver-card-v2::after{
  content:"";
  position:absolute;
  inset:-25% -60%;
  pointer-events:none;
  z-index:5;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.13) 50%,transparent 56%);
  opacity:0;
}
.driver-card-v2.rarity-edge-ssr::after,.driver-card-v2.rarity-edge-ur::after{animation:cardSheen 8s ease-in-out infinite}
.driver-card-v2.selected{outline:1px solid var(--team-color);box-shadow:0 0 0 1px var(--team-color),0 18px 46px rgba(0,0,0,.36)}
.driver-card-v2.large{max-width:340px;width:min(100%,340px);margin-inline:auto}
.driver-card-main-v2{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
  width:100%;
  height:100%;
  padding:12px;
  text-align:left;
  overflow:hidden;
  z-index:1;
}
.driver-card-v2.large .driver-card-main-v2{padding:16px}
.driver-card-v2 .driver-card-top{position:relative;z-index:7}
.driver-pure-glow{
  position:absolute;
  width:90%;
  aspect-ratio:1;
  right:-34%;
  top:30px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--team-color) 22%,transparent) 0,transparent 68%);
  filter:blur(30px);
  opacity:.72;
  pointer-events:none;
}
.driver-pure-field{
  position:relative;
  min-height:0;
  margin:9px 0 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  overflow:hidden;
}
.driver-pure-field::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:38%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.22));
  pointer-events:none;
}
.driver-pure-no-label{
  position:absolute;
  left:11px;
  top:10px;
  z-index:4;
  color:#93a0ae;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.driver-pure-number{
  position:absolute;
  left:10px;
  bottom:-2px;
  z-index:1;
  font-size:clamp(72px,10vw,108px);
  line-height:.82;
  font-weight:1000;
  letter-spacing:-.09em;
  color:color-mix(in srgb,var(--team-color) 30%,transparent);
  opacity:.58;
  pointer-events:none;
}
.driver-card-v2.rarity-edge-r .driver-pure-number{opacity:.42}
.driver-card-v2.rarity-edge-sr .driver-pure-number{opacity:.54}
.driver-card-v2.rarity-edge-ssr .driver-pure-number{color:rgba(225,194,105,.26);opacity:1}
.driver-card-v2.rarity-edge-ur .driver-pure-number{color:rgba(255,255,255,.24);opacity:1}
.driver-pure-signature{
  position:absolute;
  right:10px;
  bottom:18px;
  z-index:4;
  color:rgba(255,244,214,.96);
  font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;
  font-size:clamp(20px,3.6vw,28px);
  line-height:1;
  transform:rotate(-8deg);
  text-shadow:0 3px 14px rgba(0,0,0,.42);
  opacity:.96;
  pointer-events:none;
}
.driver-card-v2.rarity-edge-ur .driver-pure-signature{
  color:rgba(255,255,255,.96);
  text-shadow:0 0 16px rgba(255,255,255,.16),0 3px 14px rgba(0,0,0,.42);
}
.driver-pure-lines{position:absolute;inset:0;z-index:2;pointer-events:none}
.driver-pure-lines i{
  position:absolute;
  left:-7%;
  height:1px;
  width:72%;
  background:linear-gradient(90deg,transparent,var(--team-color),transparent);
  opacity:.2;
  transform:skewX(-28deg);
}
.driver-pure-lines i:nth-child(1){top:34%;width:54%}
.driver-pure-lines i:nth-child(2){top:57%;left:16%;width:74%;opacity:.12}
.driver-pure-lines i:nth-child(3){top:76%;left:-3%;width:66%;opacity:.08}
.driver-pure-mark{
  position:absolute;
  right:12px;
  top:12px;
  z-index:3;
  width:38px;
  height:7px;
  border-left:18px solid var(--team-color);
  border-right:8px solid color-mix(in srgb,var(--team-color) 45%,transparent);
  opacity:.76;
  transform:skewX(-30deg);
}
.driver-pure-copy{
  position:relative;
  z-index:7;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
}
.driver-pure-nameblock{min-width:0}
.driver-pure-copy h3{
  margin:0;
  max-width:100%;
  color:#f6f8fb;
  font-size:clamp(15px,3.4vw,18px);
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.025em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.driver-pure-team{
  margin-top:5px;
  color:#939fab;
  font-size:9px;
  line-height:1;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.driver-pure-rating{
  display:grid;
  justify-items:end;
  align-content:end;
  gap:2px;
  padding-left:8px;
  border-left:1px solid rgba(255,255,255,.06);
}
.driver-pure-rating strong{
  color:#fff;
  font-size:32px;
  line-height:.84;
  font-weight:1000;
  letter-spacing:-.06em;
}
.driver-pure-rating span{
  color:#929eab;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.2em;
}
.driver-card-v2.rarity-edge-ssr .driver-pure-copy h3,.driver-card-v2.rarity-edge-ssr .driver-pure-rating strong{color:#f0d487}
.driver-card-v2.rarity-edge-ur .driver-pure-copy h3,.driver-card-v2.rarity-edge-ur .driver-pure-rating strong{color:#ffffff}
.driver-card-v2.large .driver-pure-number{font-size:122px}
.driver-card-v2.large .driver-pure-signature{font-size:31px}
.driver-card-v2.large .driver-pure-copy h3{font-size:22px}
.driver-card-v2.large .driver-pure-team{font-size:10px}
.driver-card-v2.large .driver-pure-rating strong{font-size:42px}
.driver-card-v2.large .driver-pure-no-label{font-size:9px}

/* Detail modal keeps the same data panel, now aligned to the new card design. */
.driver-detail-v2{overflow:hidden}
.driver-detail-hero-pure{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:18px;
  min-height:210px;
  margin:-4px -2px 8px;
  padding:18px 14px 20px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 80% 22%,color-mix(in srgb,var(--team-color) 12%,transparent),transparent 38%),
    linear-gradient(145deg,color-mix(in srgb,var(--team-color) 6%,transparent),transparent 52%);
}
.detail-pure-number{
  position:absolute;
  left:12px;
  bottom:-4px;
  z-index:1;
  font-size:144px;
  line-height:.82;
  font-weight:1000;
  letter-spacing:-.09em;
  color:color-mix(in srgb,var(--team-color) 20%,transparent);
  opacity:.48;
  pointer-events:none;
}
.rarity-edge-ssr .detail-pure-number{color:rgba(225,194,105,.2)}
.rarity-edge-ur .detail-pure-number{color:rgba(255,255,255,.18)}
.detail-pure-signature{
  position:absolute;
  right:16px;
  bottom:24px;
  z-index:2;
  color:rgba(255,244,214,.96);
  font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;
  font-size:32px;
  line-height:1;
  transform:rotate(-8deg);
  text-shadow:0 4px 14px rgba(0,0,0,.38);
  opacity:.94;
}
.rarity-edge-ur .detail-pure-signature{color:#fff}
.detail-pure-lines{
  position:absolute;
  left:-12%;
  top:48%;
  width:72%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--team-color),transparent);
  transform:skewX(-30deg);
  opacity:.24;
}
.detail-title-pure{position:relative;z-index:3;text-align:left;min-width:0}
.detail-title-pure h2{
  margin:20px 0 5px;
  max-width:100%;
  color:#f7f8fb;
  font-size:clamp(29px,6vw,42px);
  line-height:1;
  letter-spacing:-.045em;
}
.detail-title-pure p{margin:0;color:#96a1ae;font-weight:800;letter-spacing:.08em}
.detail-pure-ovr{position:relative;z-index:3;display:grid;justify-items:end;align-self:end}
.detail-pure-ovr span{order:2;color:#929eab;font-size:10px;font-weight:900;letter-spacing:.2em;margin-top:6px}
.detail-pure-ovr strong{color:#fff;font-size:62px;line-height:.78;font-weight:1000;letter-spacing:-.07em}
.rarity-edge-ssr .detail-pure-ovr strong{color:#f0d487}
.trait-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.trait-detail-row{display:grid;gap:4px;padding:11px 12px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.trait-detail-row>span{font-size:8px;letter-spacing:.19em;color:var(--team-color);font-weight:900}
.trait-detail-row strong{font-size:13px}
.trait-detail-row small{font-size:10px;line-height:1.45;color:#8d98a6}
.trait-detail-row.locked{opacity:.48;border-style:dashed}
.trait-detail-row.signature{border-color:color-mix(in srgb,var(--team-color) 46%,rgba(255,255,255,.08));background:linear-gradient(135deg,rgba(255,255,255,.035),color-mix(in srgb,var(--team-color) 18%,rgba(255,255,255,.025)) 140%)}
.trait-detail-row.signature>span{color:#f1d47b}
@keyframes cardSheen{0%,68%,100%{transform:translateX(-24%);opacity:0}78%{opacity:.58}88%{transform:translateX(24%);opacity:0}}

@media(max-width:680px){
  .driver-card-v2{border-radius:16px}
  .driver-card-main-v2{padding:10px}
  .driver-card-v2.large{max-width:300px}
  .driver-pure-field{margin:7px 0 9px;border-radius:13px}
  .driver-pure-number{left:9px;font-size:clamp(60px,18vw,92px)}
  .driver-pure-signature{right:8px;bottom:14px;font-size:clamp(18px,6vw,24px)}
  .driver-pure-copy{gap:10px}
  .driver-pure-copy h3{font-size:15px}
  .driver-pure-team,.driver-pure-rating span{font-size:8px}
  .driver-pure-rating strong{font-size:28px}
  .driver-detail-hero-pure{min-height:188px;padding:15px 10px 17px;gap:10px}
  .detail-pure-number{font-size:106px;left:8px}
  .detail-pure-signature{right:10px;bottom:18px;font-size:24px}
  .detail-title-pure h2{font-size:28px;margin-top:18px}
  .detail-pure-ovr strong{font-size:48px}
  .trait-detail-grid{grid-template-columns:1fr}
}
@media(max-width:390px){
  .driver-card-main-v2{padding:9px}
  .driver-pure-no-label{font-size:7px;left:9px;top:9px}
  .driver-pure-number{font-size:clamp(56px,20vw,84px)}
  .driver-pure-copy h3{font-size:14px}
  .driver-pure-rating strong{font-size:26px}
  .driver-pure-signature{font-size:18px}
}