/* ==========================================================================
   KARTY TCG 3D · SAN ANDREAS CDL × CHROME EDITION (v13) & STUDIO KART
   ========================================================================== */

.deck-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 120;
  padding: 16px;
  gap: 14px;
  perspective: 1300px;
}
.deck-overlay.open {
  display: flex;
  animation: fadeScale 0.2s ease-out;
}

.deck-topbar {
  width: 100%;
  max-width: 390px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.deck-title-group {
  display: flex;
  flex-direction: column;
}
.deck-owner { font-size: 0.95rem; font-weight: 700; color: #ffffff; }
.deck-sub { font-size: 0.7rem; color: #a1a1aa; }

.deck-pills-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 440px;
}
.deck-slot-btn {
  padding: 5px 11px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #141417;
  border: 1px solid #27272a;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s;
}
.deck-slot-btn:hover { border-color: #52525b; color: #ffffff; }
.deck-slot-btn.active {
  background: #ffffff;
  color: #050505;
  border-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .tcg-card, .card-flip-inner, .card-3d-wrapper {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   KARTA 3D TILT + ARCHETYPY WIZUALNE SAN ANDREAS
   ========================================================= */
.card-3d-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 356px;
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
  will-change: transform;
  cursor: pointer;
}
.card-3d-wrapper.is-resetting {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-flip-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7.35;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-3d-wrapper.is-flipped .card-flip-inner {
  transform: rotateY(180deg);
}

.tcg-card, .tcg-card-back {
  --c1: #facc15;
  --c-rgb: 250, 204, 21;
  --frame-bg: linear-gradient(135deg, #27272a 0%, #141417 50%, #27272a 100%);
  --frame-glow: rgba(255, 255, 255, 0.1);
  --rank-accent: #fde047;
  --rank-rgb: 250, 204, 21;
  --holo-opacity: 0.75;
  --glare-opacity: 0.32;
  --mx: 50%;
  --my: 50%;
  --holo-angle: 125deg;
  --bg-pos-x: 50%;
  --bg-pos-y: 50%;

  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  padding: 11px;
  background: var(--frame-bg);
  box-shadow:
    0 30px 64px -12px rgba(0, 0, 0, 0.96),
    0 0 46px -4px var(--frame-glow),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.5),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.85);
  font-family: 'Inter', -apple-system, sans-serif;
  color: #ffffff;
  user-select: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tcg-card-back { transform: rotateY(180deg); }
.tcg-card::before, .tcg-card-back::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 4;
}

/* TIERY STYLI */
.tcg-card[data-style="ms_1of1"], .tcg-card-back[data-style="ms_1of1"] {
  --c1: #fef08a; --c-rgb: 250, 204, 21; --rank-accent: #fde047; --rank-rgb: 250, 204, 21;
  --frame-glow: rgba(250, 204, 21, 0.55); --holo-opacity: 0.88; --glare-opacity: 0.36;
  --frame-bg: linear-gradient(135deg, #fef9c3 0%, #eab308 16%, #713f12 34%, #fde047 50%, #854d0e 68%, #facc15 84%, #fef08a 100%);
}
.tcg-card[data-style="ms_2of3"], .tcg-card-back[data-style="ms_2of3"] {
  --c1: #ffffff; --c-rgb: 244, 244, 245; --rank-accent: #f4f4f5; --rank-rgb: 244, 244, 245;
  --frame-glow: rgba(244, 244, 245, 0.38); --holo-opacity: 0.80; --glare-opacity: 0.32;
  --frame-bg: linear-gradient(135deg, #ffffff 0%, #a1a1aa 22%, #27272a 42%, #f4f4f5 58%, #52525b 78%, #e4e4e7 100%);
}
.tcg-card[data-style="ms_3of3"], .tcg-card-back[data-style="ms_3of3"] {
  --c1: #fdba74; --c-rgb: 251, 146, 60; --rank-accent: #fb923c; --rank-rgb: 251, 146, 60;
  --frame-glow: rgba(251, 146, 60, 0.36); --holo-opacity: 0.78; --glare-opacity: 0.30;
  --frame-bg: linear-gradient(135deg, #fed7aa 0%, #ea580c 22%, #431407 42%, #fb923c 58%, #7c2d12 78%, #fdba74 100%);
}
.tcg-card[data-style="ms_top10"], .tcg-card-back[data-style="ms_top10"] {
  --c1: #c4b5fd; --c-rgb: 168, 85, 247; --rank-accent: #c4b5fd; --rank-rgb: 168, 85, 247;
  --frame-glow: rgba(168, 85, 247, 0.30); --holo-opacity: 0.68; --glare-opacity: 0.26;
  --frame-bg: linear-gradient(135deg, #ddd6fe 0%, #7c3aed 24%, #1e1b4b 48%, #8b5cf6 74%, #ede9fe 100%);
}
.tcg-card[data-style="ms_top50"], .tcg-card-back[data-style="ms_top50"] {
  --c1: #93c5fd; --c-rgb: 96, 165, 250; --rank-accent: #60a5fa; --rank-rgb: 96, 165, 250;
  --frame-glow: rgba(59, 130, 246, 0.24); --holo-opacity: 0.54; --glare-opacity: 0.22;
  --frame-bg: linear-gradient(135deg, #dbeafe 0%, #2563eb 24%, #172554 48%, #60a5fa 74%, #eff6ff 100%);
}
.tcg-card[data-style="ms_base"], .tcg-card-back[data-style="ms_base"] {
  --c1: #d4d4d8; --c-rgb: 161, 161, 170; --rank-accent: #a1a1aa; --rank-rgb: 161, 161, 170;
  --frame-glow: rgba(255, 255, 255, 0.06); --holo-opacity: 0.18; --glare-opacity: 0.12;
  --frame-bg: linear-gradient(145deg, #27272a 0%, #121215 48%, #1f1f23 100%);
}
.tcg-card[data-style="global_record"], .tcg-card-back[data-style="global_record"] {
  --c1: #fda4af; --c-rgb: 244, 63, 94; --rank-accent: #fb7185; --rank-rgb: 244, 63, 94;
  --frame-glow: rgba(244, 63, 94, 0.42); --holo-opacity: 0.78; --glare-opacity: 0.3;
  --frame-bg: linear-gradient(135deg, #fecdd3 0%, #be123c 20%, #4c0519 42%, #fb7185 56%, #881337 78%, #ffe4e6 100%);
}
/* REKORD DOBOWY MIESIĄCA (24H · M-C) — ODRÓŻNIONY OD ALL-TIME 1/1 */
.tcg-card[data-style="hof_reign"], .tcg-card-back[data-style="hof_reign"] {
  --c1: #bae6fd; --c-rgb: 56, 189, 248; --rank-accent: #38bdf8; --rank-rgb: 56, 189, 248;
  --frame-glow: rgba(56, 189, 248, 0.55); --holo-opacity: 0.90; --glare-opacity: 0.38;
  --frame-bg: linear-gradient(135deg, #e0f2fe 0%, #0284c7 20%, #0f172a 42%, #38bdf8 58%, #0369a1 80%, #fef9c3 100%);
}

/* EWOLUCJA MIESIĘCZNA (1★–6★) */
.tcg-card[data-style="monthly_1"], .tcg-card-back[data-style="monthly_1"] {
  --c1: #6ee7b7; --c-rgb: 52, 211, 153; --rank-accent: #6ee7b7; --rank-rgb: 52, 211, 153;
  --frame-glow: rgba(16, 185, 129, 0.12); --holo-opacity: 0.22; --glare-opacity: 0.14;
  --frame-bg: linear-gradient(145deg, #1e293b 0%, #0f172a 32%, #064e3b 52%, #0f172a 72%, #1e293b 100%);
}
.tcg-card[data-style="monthly_2"], .tcg-card-back[data-style="monthly_2"] {
  --c1: #34d399; --c-rgb: 16, 185, 129; --rank-accent: #34d399; --rank-rgb: 16, 185, 129;
  --frame-glow: rgba(16, 185, 129, 0.24); --holo-opacity: 0.42; --glare-opacity: 0.20;
  --frame-bg: linear-gradient(135deg, #6ee7b7 0%, #065f46 26%, #022c22 50%, #059669 76%, #a7f3d0 100%);
}
.tcg-card[data-style="monthly_3"], .tcg-card-back[data-style="monthly_3"] {
  --c1: #5eead4; --c-rgb: 20, 184, 166; --rank-accent: #5eead4; --rank-rgb: 20, 184, 166;
  --frame-glow: rgba(20, 184, 166, 0.32); --holo-opacity: 0.56; --glare-opacity: 0.25;
  --frame-bg: linear-gradient(135deg, #99f6e4 0%, #0d9488 24%, #042f2e 48%, #14b8a6 74%, #ccfbf1 100%);
}
.tcg-card[data-style="monthly_4"], .tcg-card-back[data-style="monthly_4"] {
  --c1: #a7f3d0; --c-rgb: 52, 211, 153; --rank-accent: #a7f3d0; --rank-rgb: 52, 211, 153;
  --frame-glow: rgba(52, 211, 153, 0.38); --holo-opacity: 0.68; --glare-opacity: 0.28;
  --frame-bg: linear-gradient(135deg, #d1fae5 0%, #10b981 22%, #064e3b 45%, #34d399 64%, #047857 82%, #ecfdf5 100%);
}
.tcg-card[data-style="monthly_5"], .tcg-card-back[data-style="monthly_5"] {
  --c1: #fef08a; --c-rgb: 250, 204, 21; --rank-accent: #fde047; --rank-rgb: 250, 204, 21;
  --frame-glow: rgba(52, 211, 153, 0.44); --holo-opacity: 0.78; --glare-opacity: 0.32;
  --frame-bg: linear-gradient(135deg, #fef08a 0%, #10b981 22%, #064e3b 45%, #facc15 62%, #047857 82%, #d1fae5 100%);
}
.tcg-card[data-style="monthly_6"], .tcg-card-back[data-style="monthly_6"] {
  --c1: #fef08a; --c-rgb: 250, 204, 21; --rank-accent: #fde047; --rank-rgb: 250, 204, 21;
  --frame-glow: rgba(16, 185, 129, 0.52); --holo-opacity: 0.86; --glare-opacity: 0.35;
  --frame-bg: linear-gradient(135deg, #fef9c3 0%, #eab308 18%, #064e3b 42%, #34d399 58%, #854d0e 78%, #fef08a 100%);
}

/* EWOLUCJA TYGODNIOWA (1★–6★) */
.tcg-card[data-style="weekly_1"], .tcg-card-back[data-style="weekly_1"] {
  --c1: #93c5fd; --c-rgb: 96, 165, 250; --rank-accent: #93c5fd; --rank-rgb: 96, 165, 250;
  --frame-glow: rgba(96, 165, 250, 0.10); --holo-opacity: 0.20; --glare-opacity: 0.12;
  --frame-bg: linear-gradient(145deg, #27272a 0%, #172554 48%, #18181b 100%);
}
.tcg-card[data-style="weekly_2"], .tcg-card-back[data-style="weekly_2"] {
  --c1: #60a5fa; --c-rgb: 59, 130, 246; --rank-accent: #60a5fa; --rank-rgb: 59, 130, 246;
  --frame-glow: rgba(59, 130, 246, 0.22); --holo-opacity: 0.38; --glare-opacity: 0.18;
  --frame-bg: linear-gradient(135deg, #93c5fd 0%, #1d4ed8 26%, #0f172a 50%, #2563eb 76%, #dbeafe 100%);
}
.tcg-card[data-style="weekly_3"], .tcg-card-back[data-style="weekly_3"] {
  --c1: #38bdf8; --c-rgb: 14, 165, 233; --rank-accent: #38bdf8; --rank-rgb: 14, 165, 233;
  --frame-glow: rgba(14, 165, 233, 0.30); --holo-opacity: 0.54; --glare-opacity: 0.24;
  --frame-bg: linear-gradient(135deg, #bae6fd 0%, #0284c7 24%, #082f49 48%, #0ea5e9 74%, #e0f2fe 100%);
}
.tcg-card[data-style="weekly_4"], .tcg-card-back[data-style="weekly_4"] {
  --c1: #c4b5fd; --c-rgb: 168, 85, 247; --rank-accent: #c4b5fd; --rank-rgb: 168, 85, 247;
  --frame-glow: rgba(168, 85, 247, 0.36); --holo-opacity: 0.66; --glare-opacity: 0.28;
  --frame-bg: linear-gradient(135deg, #ddd6fe 0%, #7c3aed 24%, #1e1b4b 48%, #8b5cf6 74%, #ede9fe 100%);
}
.tcg-card[data-style="weekly_5"], .tcg-card-back[data-style="weekly_5"] {
  --c1: #fde047; --c-rgb: 250, 204, 21; --rank-accent: #fde047; --rank-rgb: 250, 204, 21;
  --frame-glow: rgba(59, 130, 246, 0.42); --holo-opacity: 0.76; --glare-opacity: 0.31;
  --frame-bg: linear-gradient(135deg, #fef08a 0%, #2563eb 22%, #172554 45%, #facc15 62%, #1d4ed8 82%, #dbeafe 100%);
}
.tcg-card[data-style="weekly_6"], .tcg-card-back[data-style="weekly_6"] {
  --c1: #fef08a; --c-rgb: 250, 204, 21; --rank-accent: #fde047; --rank-rgb: 250, 204, 21;
  --frame-glow: rgba(250, 204, 21, 0.48); --holo-opacity: 0.85; --glare-opacity: 0.34;
  --frame-bg: linear-gradient(135deg, #fef9c3 0%, #eab308 18%, #172554 42%, #3b82f6 58%, #854d0e 78%, #fef08a 100%);
}

.tcg-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--rank-rgb), 0.14) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(var(--c-rgb), 0.08) 0%, transparent 52%),
    linear-gradient(180deg, #131316 0%, #08080a 58%, #050506 100%);
  border: 1px solid rgba(var(--rank-rgb), 0.42);
  padding: 12px 13px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.tcg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(var(--rank-rgb), 0.18) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%);
  background-size: 12px 12px, 24px 24px;
  opacity: 0.42;
  pointer-events: none;
  z-index: 1;
}

@keyframes pulseGoldAura {
  0%, 100% { box-shadow: 0 30px 64px -12px rgba(0, 0, 0, 0.96), 0 0 42px -2px rgba(250, 204, 21, 0.45), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65); }
  50% { box-shadow: 0 30px 64px -12px rgba(0, 0, 0, 0.96), 0 0 68px 4px rgba(250, 204, 21, 0.72), inset 0 1.5px 2px rgba(255, 255, 255, 0.85); }
}
@keyframes pulseRubyLaser {
  0%, 100% { box-shadow: 0 30px 64px -12px rgba(0, 0, 0, 0.96), 0 0 38px -2px rgba(244, 63, 94, 0.42), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 30px 64px -12px rgba(0, 0, 0, 0.96), 0 0 62px 3px rgba(244, 63, 94, 0.68), inset 0 1.5px 2px rgba(253, 164, 175, 0.75); }
}
@keyframes pulseHofFrost {
  0%, 100% { box-shadow: 0 30px 64px -12px rgba(0, 0, 0, 0.96), 0 0 44px -2px rgba(56, 189, 248, 0.48), inset 0 1.5px 1.5px rgba(224, 242, 254, 0.7); }
  50% { box-shadow: 0 30px 64px -12px rgba(0, 0, 0, 0.96), 0 0 72px 5px rgba(56, 189, 248, 0.75), inset 0 1.5px 2px rgba(255, 255, 255, 0.9); }
}

.tcg-card[data-style="ms_1of1"], .tcg-card[data-style$="_6"] {
  animation: pulseGoldAura 3.6s ease-in-out infinite;
}
.tcg-card[data-style="global_record"] {
  animation: pulseRubyLaser 2.8s ease-in-out infinite;
}
.tcg-card[data-style="hof_reign"] {
  animation: pulseHofFrost 4s ease-in-out infinite;
}

.tcg-superfractor-rings {
  position: absolute;
  inset: -35%;
  background: repeating-radial-gradient(circle at 50% 36%, rgba(var(--rank-rgb), 0.14) 0px, rgba(var(--rank-rgb), 0.14) 2px, transparent 2px, transparent 9px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.tcg-card[data-style="ms_1of1"] .tcg-superfractor-rings,
.tcg-card[data-style="hof_reign"] .tcg-superfractor-rings,
.tcg-card[data-style$="_6"] .tcg-superfractor-rings { opacity: 0.95; }

.tcg-foil-texture {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.tcg-card[data-style="ms_2of3"] .tcg-foil-texture,
.tcg-card[data-style="ms_3of3"] .tcg-foil-texture {
  opacity: 0.45;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 3px);
}
.tcg-card[data-style="ms_top10"] .tcg-foil-texture,
.tcg-card[data-style$="_4"] .tcg-foil-texture,
.tcg-card[data-style$="_5"] .tcg-foil-texture {
  opacity: 0.55;
  background-image:
    linear-gradient(60deg, rgba(var(--rank-rgb), 0.12) 25%, transparent 25.5%, transparent 75%, rgba(var(--rank-rgb), 0.12) 75%),
    linear-gradient(-60deg, rgba(var(--rank-rgb), 0.12) 25%, transparent 25.5%, transparent 75%, rgba(var(--rank-rgb), 0.12) 75%);
  background-size: 20px 35px;
}
.tcg-card[data-style="ms_top50"] .tcg-foil-texture,
.tcg-card[data-style$="_2"] .tcg-foil-texture,
.tcg-card[data-style$="_3"] .tcg-foil-texture {
  opacity: 0.4;
  background-image: radial-gradient(rgba(var(--rank-rgb), 0.25) 1px, transparent 1px);
  background-size: 8px 8px;
}
.tcg-card[data-style="global_record"] .tcg-foil-texture {
  opacity: 0.6;
  background: repeating-linear-gradient(-35deg, rgba(244, 63, 94, 0.12) 0px, rgba(244, 63, 94, 0.12) 3px, transparent 3px, transparent 11px);
}

.tcg-holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(var(--holo-angle), rgba(255, 255, 255, 0) 0%, rgba(var(--rank-rgb), 0.22) 7%, rgba(125, 211, 252, 0.14) 15%, rgba(244, 114, 182, 0.14) 23%, rgba(var(--rank-rgb), 0.22) 31%, rgba(255, 255, 255, 0) 40%);
  background-size: 250% 250%;
  background-position: var(--bg-pos-x) var(--bg-pos-y);
  mix-blend-mode: color-dodge;
  opacity: var(--holo-opacity);
  pointer-events: none;
  z-index: 8;
}
.tcg-card[data-style="ms_1of1"] .tcg-holo,
.tcg-card[data-style="hof_reign"] .tcg-holo {
  background:
    conic-gradient(from var(--holo-angle) at var(--mx) var(--my), rgba(253, 224, 71, 0.28), rgba(56, 189, 248, 0.22), rgba(244, 114, 182, 0.22), rgba(74, 222, 128, 0.22), rgba(253, 224, 71, 0.28)),
    repeating-linear-gradient(var(--holo-angle), rgba(255,255,255,0) 0%, rgba(var(--rank-rgb), 0.25) 10%, rgba(255,255,255,0) 20%);
  background-size: 180% 180%;
}
.tcg-card[data-style="ms_base"] .tcg-holo,
.tcg-card[data-style$="_1"] .tcg-holo {
  background: linear-gradient(var(--holo-angle), rgba(255,255,255,0) 20%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 80%);
  mix-blend-mode: screen;
}

.tcg-glass-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(var(--holo-angle), rgba(255,255,255,0) 35%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0) 65%);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 0.25s ease;
}
.card-3d-wrapper:hover .tcg-glass-sheen { opacity: 1; }

/* ARCHETYPY UKŁADU */
.tcg-card[data-archetype="milestone"] .tcg-art-frame { border-width: 2px; border-radius: 12px; }

.tcg-card[data-archetype="record"] .tcg-inner {
  background: repeating-linear-gradient(-45deg, rgba(244, 63, 94, 0.04) 0px, rgba(244, 63, 94, 0.04) 6px, transparent 6px, transparent 14px), linear-gradient(180deg, #16090d 0%, #090507 100%);
}
.tcg-card[data-archetype="record"] .tcg-art-frame {
  border-radius: 4px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.tcg-card[data-archetype="record"] .tcg-hp-box { background: linear-gradient(135deg, #e11d48, #881337); border-color: #fda4af; }
.tcg-card[data-archetype="record"] .tcg-hp-val { color: #ffffff; }
.tcg-card[data-archetype="record"] .tcg-hp-label { color: #ffe4e6; }

.tcg-card[data-archetype="hof"] .tcg-inner {
  background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.24) 0%, transparent 60%), linear-gradient(180deg, #0b192c 0%, #050811 100%);
}
.tcg-card[data-archetype="hof"] .tcg-hp-box {
  background: linear-gradient(135deg, #0284c7, #0c4a6e); border-color: #7dd3fc;
}
.tcg-card[data-archetype="hof"] .tcg-hp-val { color: #ffffff; }
.tcg-card[data-archetype="hof"] .tcg-hp-label { color: #e0f2fe; }

.tcg-card[data-archetype="monthly"] .tcg-art-frame { border-radius: 8px; }
.tcg-card[data-archetype="monthly"] .tcg-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tcg-card[data-archetype="monthly"] .tcg-move-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 9px; }
.tcg-card[data-archetype="monthly"] .tcg-move-val, .tcg-card[data-archetype="monthly"] .tcg-move-val-sub { text-align: left; }

.tcg-card[data-archetype="weekly"] .tcg-art-frame { border-radius: 14px; }
.weekly-star-meter { display: none; position: relative; z-index: 4; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 4px 0 2px; }
.tcg-card[data-archetype="weekly"] .weekly-star-meter { display: grid; }
.w-meter-seg { height: 4px; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); transition: background 0.2s, box-shadow 0.2s; }
.w-meter-seg.filled { background: var(--rank-accent); box-shadow: 0 0 8px rgba(var(--rank-rgb), 0.7); }

.tcg-top-meta { display: flex; align-items: center; gap: 5px; row-gap: 3px; margin-bottom: 3px; flex-wrap: wrap; }
.tcg-stage-pill {
  display: inline-flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: rgba(var(--rank-rgb), 0.16); border: 1px solid rgba(var(--rank-rgb), 0.55); color: var(--rank-accent); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.streak-flame-badge {
  display: none; align-items: center; gap: 2px; font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.04em; padding: 2px 5px; border-radius: 4px; background: linear-gradient(135deg, #f43f5e, #fb923c); color: #ffffff; box-shadow: 0 0 10px rgba(244, 63, 94, 0.55);
}
.streak-flame-badge.visible { display: inline-flex; }

.wanted-stars { display: inline-flex; gap: 1px; font-size: 0.62rem; line-height: 1; }
.wanted-star.active { color: var(--rank-accent); text-shadow: 0 0 8px rgba(var(--rank-rgb), 0.75); }
.wanted-star.dim { color: rgba(255, 255, 255, 0.14); }

.tcg-name {
  font-family: 'Bebas Neue', 'Inter', sans-serif; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.03em; line-height: 1.05; color: #ffffff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); padding-top: 1px;
}
.tcg-header { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.tcg-header > div:first-child { flex: 1; min-width: 0; }
.tcg-hp-box { text-align: right; flex-shrink: 0; background: rgba(0, 0, 0, 0.68); border: 1px solid rgba(var(--c-rgb), 0.42); padding: 4px 8px; border-radius: 8px; }
.tcg-hp-label { font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.08em; color: #a1a1aa; text-transform: uppercase; }
.tcg-hp-val { font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.04em; color: var(--c1); line-height: 1.1; }

.tcg-art-frame {
  position: relative; z-index: 4; width: 100%; flex: 1 1 176px; min-height: 120px; max-height: 214px; border-radius: 10px; border: 1.5px solid rgba(var(--rank-rgb), 0.55); background: #09090b; overflow: hidden; box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.85), 0 6px 18px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px;
}
.tcg-art-frame::after {
  content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0px, rgba(0, 0, 0, 0.07) 1px, transparent 1px, transparent 3px); pointer-events: none; z-index: 5;
}
.scene-svg-full { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.art-corner { position: absolute; width: 8px; height: 8px; border-color: rgba(var(--rank-rgb), 0.8); border-style: solid; pointer-events: none; z-index: 7; }
.art-corner.tl { top: 4px; left: 4px; border-width: 1.5px 0 0 1.5px; }
.art-corner.tr { top: 4px; right: 4px; border-width: 1.5px 1.5px 0 0; }
.art-corner.bl { bottom: 4px; left: 4px; border-width: 0 0 1.5px 1.5px; }
.art-corner.br { bottom: 4px; right: 4px; border-width: 0 1.5px 1.5px 0; }

.art-top-badges { position: relative; z-index: 7; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.art-serial-stamp {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; padding: 2.5px 8px; border-radius: 5px; background: rgba(5, 5, 5, 0.88); border: 1px solid rgba(var(--rank-rgb), 0.75); color: var(--rank-accent); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75); flex-shrink: 0; white-space: nowrap;
}
.tcg-card[data-style="ms_1of1"] .art-serial-stamp, .tcg-card[data-style$="_6"] .art-serial-stamp { background: linear-gradient(135deg, #fef08a, #eab308); color: #050505; border-color: #ffffff; }
.tcg-card[data-style="hof_reign"] .art-serial-stamp { background: linear-gradient(135deg, #bae6fd, #0284c7); color: #ffffff; border-color: #e0f2fe; }
.tcg-card[data-style="global_record"] .art-serial-stamp { background: linear-gradient(135deg, #fda4af, #e11d48); color: #ffffff; border-color: #ffe4e6; }
.tcg-card[data-style="ms_2of3"] .art-serial-stamp { background: linear-gradient(135deg, #ffffff, #d4d4d8); color: #050505; border-color: #ffffff; }
.tcg-card[data-style="ms_3of3"] .art-serial-stamp { background: linear-gradient(135deg, #fed7aa, #ea580c); color: #ffffff; border-color: #ffedd5; }

.sa-plate {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); border: 1.5px solid #1e293b; border-radius: 4px; padding: 1.5px 7px 2px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8); line-height: 1; flex-shrink: 0; white-space: nowrap;
}
.sa-plate-top { font-size: 0.42rem; font-weight: 900; letter-spacing: 0.08em; color: #b91c1c; text-transform: uppercase; }
.sa-plate-num { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; font-weight: 800; color: #1e3a8a; letter-spacing: 0.05em; }

.art-autograph {
  position: absolute; right: 14px; bottom: 46px; font-family: 'Caveat', cursive; font-size: 1.6rem; font-weight: 700; line-height: 1.1; padding: 2px 12px 2px 8px; color: var(--rank-accent); transform: rotate(-5.5deg); transform-origin: right bottom; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.98), 0 0 14px rgba(var(--rank-rgb), 0.65); opacity: 0; pointer-events: none; z-index: 7; white-space: nowrap;
}
.tcg-card[data-style="ms_1of1"] .art-autograph,
.tcg-card[data-style="ms_2of3"] .art-autograph,
.tcg-card[data-style="ms_3of3"] .art-autograph,
.tcg-card[data-style="global_record"] .art-autograph,
.tcg-card[data-style="hof_reign"] .art-autograph,
.tcg-card[data-style$="_4"] .art-autograph,
.tcg-card[data-style$="_5"] .art-autograph,
.tcg-card[data-style$="_6"] .art-autograph,
.tcg-card.force-autograph .art-autograph { opacity: 0.96; }

.art-bottom-bar { position: relative; z-index: 7; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.sa-radar-minimap { width: 28px; height: 28px; border-radius: 50%; background: #0a1410; border: 2px solid #d4d4d8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), inset 0 0 6px rgba(0, 0, 0, 0.9); position: relative; overflow: hidden; flex-shrink: 0; }
.sa-radar-minimap svg { width: 100%; height: 100%; display: block; }

.art-bottom-caption {
  flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; background: rgba(5, 5, 5, 0.84); backdrop-filter: blur(4px); padding: 4.5px 8px; border-radius: 6px; border: 1px solid rgba(var(--rank-rgb), 0.35);
}
.art-bottom-caption > span { white-space: nowrap; }
.art-bottom-caption > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.art-bottom-caption > span:last-child { flex-shrink: 0; }

.tcg-spec-strip {
  position: relative; z-index: 4; margin: 5px 0; padding: 4px 9px; border-radius: 5px; background: linear-gradient(90deg, rgba(var(--rank-rgb), 0.18), rgba(var(--rank-rgb), 0.03)); border-left: 3px solid var(--rank-accent); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700; color: #f4f4f5; letter-spacing: 0.04em; display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.tcg-spec-strip > span { white-space: nowrap; }
.tcg-spec-strip > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tcg-spec-strip > span:last-child { flex-shrink: 0; }

.tcg-moves { position: relative; z-index: 4; display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.tcg-move-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(var(--rank-rgb), 0.2); }
.tcg-move-left { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.tcg-move-left > div:last-child { min-width: 0; }
.tcg-move-row > div:last-child { flex: 0 1 auto; min-width: 0; max-width: 55%; }
.tcg-card[data-archetype="monthly"] .tcg-move-left { flex: none; width: 100%; }
.tcg-card[data-archetype="monthly"] .tcg-move-row > div:last-child { max-width: 100%; width: 100%; }

.tcg-energy-orb { width: 20px; height: 20px; border-radius: 6px; background: rgba(var(--rank-rgb), 0.15); border: 1px solid rgba(var(--rank-rgb), 0.45); display: grid; place-items: center; font-size: 0.66rem; color: var(--rank-accent); flex-shrink: 0; }
.tcg-move-title { font-size: 0.76rem; font-weight: 700; color: #f4f4f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-move-sub { font-size: 0.6rem; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-move-val { font-family: 'JetBrains Mono', monospace; font-size: 0.86rem; font-weight: 800; color: var(--rank-accent); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-move-val-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; color: #a1a1aa; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tcg-footer { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.09); font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 600; color: #a1a1aa; letter-spacing: 0.03em; }
.tcg-footer > span { white-space: nowrap; flex-shrink: 0; }
.tcg-verified-pill { color: #4ade80; display: inline-flex; align-items: center; gap: 4px; }
.tcg-holo-seal {
  display: inline-flex; align-items: center; justify-content: center; padding: 1.5px 6px; border-radius: 4px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.06em; color: var(--rank-accent); background: rgba(var(--rank-rgb), 0.14); border: 1px solid rgba(var(--rank-rgb), 0.4);
}

/* Rewers karty (San Andreas CDL) */
.back-header { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0 8px; border-bottom: 1px solid rgba(var(--rank-rgb), 0.3); }
.back-brand-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.1em; color: var(--rank-accent); line-height: 1; white-space: nowrap; }
.back-brand-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; color: #a1a1aa; white-space: nowrap; }
.back-license-badge { font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; font-weight: 800; padding: 3px 7px; border-radius: 4px; background: rgba(var(--rank-rgb), 0.16); border: 1px solid rgba(var(--rank-rgb), 0.5); color: var(--rank-accent); flex-shrink: 0; white-space: nowrap; }
.back-driver-box { position: relative; z-index: 3; margin-top: 9px; padding: 9px 11px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(var(--rank-rgb), 0.25); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.back-driver-box > div:first-child { min-width: 0; }
.back-dna-box { position: relative; z-index: 3; margin-top: 7px; padding: 7px 10px; border-radius: 8px; background: rgba(var(--rank-rgb), 0.06); border: 1px solid rgba(var(--rank-rgb), 0.2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; font-family: 'JetBrains Mono', monospace; }
.back-dna-box > div { min-width: 0; }
.back-section-lbl { position: relative; z-index: 3; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1aa; margin: 8px 0 5px; }
.back-milestones-list { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 3.5px; flex: 1; overflow-y: auto; }
.back-m-row { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 8px; padding: 4.5px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.7rem; }
.back-m-row.is-active-card { border-color: rgba(var(--rank-rgb), 0.55); background: rgba(var(--rank-rgb), 0.12); }
.back-cap { font-size: 0.58rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.08em; }
.back-nick { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.03em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-plate { font-size: 0.66rem; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-right { text-align: right; flex-shrink: 0; white-space: nowrap; }
.back-stat { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; font-weight: 800; color: var(--rank-accent); }
.back-dna-lbl { font-size: 0.54rem; color: #a1a1aa; text-transform: uppercase; }
.back-dna-val { font-size: 0.64rem; font-weight: 800; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-dna-val.is-accent { color: var(--rank-accent); }
.back-row-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.back-row-main { font-weight: 800; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-row-sub { font-size: 0.58rem; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-row-tag { font-weight: 800; flex-shrink: 0; white-space: nowrap; }
.is-ok { color: #4ade80; }
.back-cert-box { position: relative; z-index: 3; margin-top: 7px; padding: 6px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.6); border: 1px dashed rgba(var(--rank-rgb), 0.4); font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: #a1a1aa; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.back-cert-box > span { white-space: nowrap; }

.deck-action-bar {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 356px;
  flex-wrap: wrap;
}

/* ==========================================================================
   LAYOUT STUDIA KART (cards.html)
   ========================================================================== */
.studio-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; }
}

.studio-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.studio-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-500);
  font-weight: 600;
}

.studio-stage {
  background: radial-gradient(circle at 50% 42%, #18181f 0%, #08080b 72%, #050505 100%);
  border: 1px solid var(--neutral-800);
  border-radius: 18px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  perspective: 1300px;
  min-height: 620px;
  position: relative;
  overflow: hidden;
}
.stage-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}