/* Tùy chỉnh nhỏ ngoài Tailwind */
html, body { background: #020617; }
input[type="range"] { accent-color: #10b981; }
input[type="color"] { background: transparent; border: 1px solid #334155; border-radius: 8px; padding: 0; height: 38px; width: 56px; cursor: pointer; }
.scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #334155; border-radius: 8px; }

dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
dialog {
  background: #0f172a; color: #e2e8f0;
  border: 1px solid #334155; border-radius: 12px;
  padding: 0;
  width: min(96vw, 600px);
  max-width: 96vw;
  max-height: min(92vh, 800px);
  overflow: auto;
}
@media (max-width: 640px) {
  dialog { border-radius: 10px; }
  dialog form, dialog > div { padding: 1rem !important; }
}

/* Form field error states */
.field-invalid {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25) !important;
  outline: none !important;
  animation: field-shake 0.35s ease-in-out;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.field-err-msg {
  display: flex; align-items: flex-start; gap: 4px;
  margin-top: 4px;
  color: #fb7185;
  font-size: 11px;
  line-height: 1.3;
}
.field-err-msg::before { content: "⚠"; }

/* Mobile-first touch targets — make inputs/selects/buttons reach ≥44px on small screens */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px; /* tránh iOS Safari auto-zoom khi focus */
    min-height: 42px;
  }
  button, .btn {
    min-height: 38px;
  }
}

/* Bảng dài chuyển sang scroll ngang mượt trên mobile */
.scroll-snap-x { scroll-snap-type: x mandatory; }
.scroll-snap-x > * { scroll-snap-align: start; }

/* Sidebar nav items có touch target tối thiểu */
@media (max-width: 767px) {
  aside nav a { padding-top: 0.625rem; padding-bottom: 0.625rem; }
}

/* Tactics pitch */
.tactics-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #064e3b 0%, #022c22 100%);
  border: 2px solid rgba(255,255,255,0.18);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.tactics-pitch::before,
.tactics-pitch::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 2px solid rgba(255,255,255,0.18);
}
/* Center line */
.tactics-pitch::before {
  left: 4%; right: 4%; top: 50%;
  border-width: 0 0 2px 0;
}
/* Center circle */
.tactics-pitch::after {
  width: 22%; aspect-ratio: 1; left: 39%; top: 41.5%;
  border-radius: 50%;
}
.pitch-stripes {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 14px,
    transparent 14px,
    transparent 28px
  );
}
.pitch-box {
  position: absolute;
  left: 22%; right: 22%;
  border: 2px solid rgba(255,255,255,0.18);
  border-top: none;
  pointer-events: none;
}
.pitch-box.bottom { bottom: 0; height: 14%; }
.pitch-box.top { top: 0; height: 14%; transform: scaleY(-1); }

.tactics-slot {
  position: absolute;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 2px dashed rgba(255,255,255,0.4);
  color: #cbd5e1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.tactics-slot:hover {
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4);
}
.tactics-slot.assigned {
  background: linear-gradient(160deg, #0f766e 0%, #115e59 100%);
  border-style: solid;
  border-color: rgba(16, 185, 129, 0.65);
  color: white;
}
.tactics-slot.assigned.injured {
  background: linear-gradient(160deg, #7f1d1d 0%, #450a0a 100%);
  border-color: rgba(239, 68, 68, 0.7);
}
.tactics-slot .slot-pos {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 1px;
}
.tactics-slot .slot-jersey {
  font-size: 14px;
  font-weight: 800;
}
.tactics-slot .slot-name {
  font-size: 9px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.85);
  background: rgba(2, 6, 23, 0.7);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Versus pitch — show 2 formations facing each other on one pitch */
.versus-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(14, 165, 233, 0.18) 0%,
      rgba(14, 165, 233, 0.18) 50%,
      rgba(16, 185, 129, 0.18) 50%,
      rgba(16, 185, 129, 0.18) 100%),
    linear-gradient(180deg, #022c22 0%, #064e3b 50%, #064e3b 100%);
  border: 2px solid rgba(255,255,255,0.22);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.versus-pitch::before,
.versus-pitch::after {
  content: ""; position: absolute; pointer-events: none;
  border: 2px solid rgba(255,255,255,0.32);
}
/* Mid line */
.versus-pitch::before { left: 4%; right: 4%; top: 50%; border-width: 0 0 2px 0; }
/* Center circle */
.versus-pitch::after { width: 22%; aspect-ratio: 1; left: 39%; top: 41.5%; border-radius: 50%; }
.versus-pitch .pitch-stripes { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 14px, transparent 14px, transparent 28px);
}
.versus-pitch .pitch-box {
  position: absolute; left: 22%; right: 22%;
  border: 2px solid rgba(255,255,255,0.32); border-top: none;
  pointer-events: none;
}
.versus-pitch .pitch-box.bottom { bottom: 0; height: 12%; }
.versus-pitch .pitch-box.top { top: 0; height: 12%; transform: scaleY(-1); }
.versus-pitch .half-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; opacity: 0.65;
  pointer-events: none;
}
.versus-pitch .half-label.mine { bottom: 4px; color: #6ee7b7; }
.versus-pitch .half-label.opp  { top: 4px;    color: #7dd3fc; }

.vs-slot {
  position: absolute;
  width: 38px; height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.vs-slot.mine { background: linear-gradient(160deg, #047857 0%, #064e3b 100%); border-color: #34d399; }
.vs-slot.opp  { background: linear-gradient(160deg, #0369a1 0%, #082f49 100%); border-color: #38bdf8; }
.vs-slot.empty { background: transparent; border-style: dashed; opacity: 0.6; }
.vs-slot.injured { box-shadow: 0 0 0 2px #f43f5e; }
.vs-slot .vs-pos { font-size: 8px; opacity: 0.75; line-height: 1; }
.vs-slot .vs-jersey { font-size: 11px; font-weight: 800; line-height: 1; margin-top: 1px; }
.vs-slot .vs-health {
  position: absolute; top: -6px; right: -6px;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  background: #0f172a; border: 1px solid #f43f5e;
}

/* ============ FIFA CARD: hover lift + foil shine + fire effect ============
   Cấu trúc:
   .fifa-card-wrap (overflow visible — lửa tràn ra ngoài)
     .fifa-card       (overflow hidden — clip nội dung)
       .fifa-card__shine (sheen quét chéo khi hover)
       ... avatar / stats ...
     .fifa-card__fire  (ngọn lửa nền — pseudo radial gradients flicker)
     .fifa-card__embers (đốm tàn lửa bay lên)
*/
.fifa-card-wrap {
  position: relative;
  display: block;
  width: 100%;
  isolation: isolate;
  perspective: 1000px;
}
.fifa-card {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
  will-change: transform;
}
.fifa-card-wrap:hover .fifa-card,
.fifa-card-wrap:focus-within .fifa-card {
  transform: translateY(-6px) scale(1.035);
  filter: brightness(1.08) saturate(1.15);
}

/* Foil sheen — quét chéo từ trái xuống phải khi hover */
.fifa-card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.22) 47%,
      rgba(255,255,255,0.45) 50%,
      rgba(255,255,255,0.22) 53%,
      transparent 65%);
  background-size: 250% 250%;
  background-position: -100% -100%;
  mix-blend-mode: overlay;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  z-index: 3;
}
.fifa-card-wrap:hover .fifa-card__shine {
  opacity: 1;
  animation: fifa-shine 1.8s ease-in-out infinite;
}
@keyframes fifa-shine {
  0%   { background-position: -100% -100%; }
  100% { background-position: 200% 200%; }
}

/* FIRE — ngọn lửa cuộn quanh viền dưới và lan lên rìa card */
.fifa-card__fire {
  position: absolute;
  left: -8%; right: -8%;
  bottom: -10%;
  height: 70%;
  pointer-events: none;
  opacity: 0;
  filter: blur(14px) saturate(1.4);
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, #ff7a18 0%, #ff2e2e 35%, transparent 65%),
    radial-gradient(ellipse 50% 90% at 50% 100%, #ffce00 0%, #ff7a18 25%, #ff2e2e 55%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 80% 100%, #ff7a18 0%, #ff2e2e 35%, transparent 65%);
  transition: opacity .25s;
  border-radius: 50%;
}
.fifa-card-wrap[data-fire="1"]:hover .fifa-card__fire,
.fifa-card-wrap[data-fire="1"]:focus-within .fifa-card__fire {
  opacity: 0.95;
  animation: fifa-flame 1.1s ease-in-out infinite alternate;
}
@keyframes fifa-flame {
  0%   { transform: translateY(0)   scaleY(1)    scaleX(1);   filter: blur(14px) saturate(1.4) hue-rotate(0deg);   opacity: .85; }
  35%  { transform: translateY(-4%) scaleY(1.12) scaleX(0.96); filter: blur(16px) saturate(1.55) hue-rotate(-6deg); opacity: 1;   }
  70%  { transform: translateY(-2%) scaleY(1.05) scaleX(1.05); filter: blur(13px) saturate(1.35) hue-rotate(4deg);  opacity: .92; }
  100% { transform: translateY(-6%) scaleY(1.18) scaleX(0.92); filter: blur(17px) saturate(1.5)  hue-rotate(-2deg); opacity: 1;   }
}

/* Đốm tàn lửa — chấm sáng bay lên */
.fifa-card__embers {
  position: absolute;
  inset: 0 0 -25% 0;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  background:
    radial-gradient(circle 2px at 20% 90%, #ffce00 0%, transparent 70%),
    radial-gradient(circle 1.5px at 70% 85%, #ff7a18 0%, transparent 70%),
    radial-gradient(circle 2px at 45% 95%, #ffce00 0%, transparent 70%),
    radial-gradient(circle 1.5px at 85% 90%, #ff2e2e 0%, transparent 70%),
    radial-gradient(circle 2px at 30% 95%, #ff7a18 0%, transparent 70%);
  background-size: 100% 200%;
  transition: opacity .25s;
}
.fifa-card-wrap[data-fire="1"]:hover .fifa-card__embers,
.fifa-card-wrap[data-fire="1"]:focus-within .fifa-card__embers {
  opacity: 0.9;
  animation: fifa-embers 2.4s linear infinite;
}
@keyframes fifa-embers {
  0%   { background-position: 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { background-position: 0% -60%, 0% -80%, 0% -50%, 0% -70%, 0% -65%; opacity: 0; }
}

/* Tier-aware: thẻ icon/gold có lửa mạnh hơn, bronze nhỏ hơn */
.fifa-card-wrap[data-tier="icon"] .fifa-card__fire,
.fifa-card-wrap[data-tier="gold"] .fifa-card__fire { height: 90%; left: -12%; right: -12%; bottom: -14%; }
.fifa-card-wrap[data-tier="bronze"] .fifa-card__fire { height: 55%; filter: blur(12px) saturate(1.1) brightness(0.85); }

/* Glow outline ring matching tier */
.fifa-card-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(255,206,0,0.5), rgba(255,46,46,0.5), rgba(255,122,24,0.5));
  opacity: 0;
  filter: blur(8px);
  z-index: 0;
  transition: opacity .3s;
}
.fifa-card-wrap[data-fire="1"]:hover::before,
.fifa-card-wrap[data-fire="1"]:focus-within::before {
  opacity: 0.85;
  animation: fifa-glow 2s ease-in-out infinite alternate;
}
@keyframes fifa-glow {
  0%   { filter: blur(8px)  brightness(0.95); }
  100% { filter: blur(14px) brightness(1.2); }
}

/* Reduced motion: tắt animation, chỉ giữ scale nhẹ */
@media (prefers-reduced-motion: reduce) {
  .fifa-card-wrap:hover .fifa-card { transform: translateY(-3px) scale(1.02); filter: none; }
  .fifa-card__shine, .fifa-card__fire, .fifa-card__embers,
  .fifa-card-wrap::before { animation: none !important; }
  .fifa-card-wrap:hover .fifa-card__shine { opacity: .4; }
  .fifa-card-wrap[data-fire="1"]:hover .fifa-card__fire { opacity: .5; animation: none; }
  .fifa-card-wrap[data-fire="1"]:hover .fifa-card__embers { opacity: 0; }
  .fifa-card-wrap[data-fire="1"]:hover::before { opacity: .4; }
}

/* ============ FIFA CARD V2 — design "Team of the Year" với diagonal accent ============
   Dùng custom properties được set inline trên .fifa-card-v2:
     --c-from, --c-to    → gradient nền theo tier
     --c-text            → màu chữ chủ đạo (tên, OVR)
     --c-accent          → màu nhấn (sao, số chỉ số, trait)
*/
.fifa-card-v2 {
  background:
    /* highlight vignette ở góc trên-trái + phải-dưới cho chiều sâu */
    radial-gradient(ellipse 60% 50% at 25% 20%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(0,0,0,0.25) 0%, transparent 60%),
    linear-gradient(155deg, var(--c-from) 0%, var(--c-to) 100%);
}

/* Diagonal geometric accents — 3 dải nghiêng lighter shade.
   Dùng clip-path để cắt thành hình thoi/đường chéo gọn. */
.fifa-card__deco-tl {
  position: absolute;
  top: -20%; left: -25%;
  width: 90%; height: 70%;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
  transform: skewY(-8deg);
  pointer-events: none;
  z-index: 0;
}
.fifa-card__deco-mr {
  position: absolute;
  top: 25%; right: -30%;
  width: 70%; height: 60%;
  background: linear-gradient(125deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 70%);
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 0;
}
.fifa-card__deco-br {
  position: absolute;
  bottom: -25%; right: -10%;
  width: 90%; height: 60%;
  background: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.30));
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
  transform: skewY(-8deg);
  pointer-events: none;
  z-index: 0;
}

/* Avatar/silhouette: drop-shadow để nhân vật nổi khỏi nền */
.fifa-card__silhouette {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.fifa-card__silhouette > div > img {
  filter: contrast(1.05) saturate(1.05);
}

/* ===== V3 LAYOUT SELECTORS ===== */

/* Cột trái: OVR lớn, không nền — chỉ là số to với màu accent */
.fifa-card__ovr-num {
  color: var(--c-accent);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  line-height: 0.9;
}
.fifa-card__pos {
  color: var(--c-accent);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Chip quốc tịch nhỏ — pill nhỏ với border accent */
.fifa-card__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  letter-spacing: 0.1em;
}

/* Crest CLB — backdrop tối nhẹ */
.fifa-card__crest {
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  padding: 3px;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Tên lớn ở đáy — màu accent, in hoa, drop-shadow rõ */
.fifa-card__firstname {
  color: var(--c-text);
  opacity: 0.75;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.fifa-card__name {
  color: var(--c-accent);
  text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}

/* Đường gạch ngang dưới tên */
.fifa-card__divider {
  height: 1px;
  width: 70%;
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
  opacity: 0.55;
}

/* Cell stat — text inline "VAL LBL", color phân cấp */
.fifa-card__stat { justify-content: center; }
.fifa-card__stat-val { color: var(--c-accent); }
.fifa-card__stat > span:last-child { color: var(--c-text); }


/* ============ 6 DESIGN VARIANTS ============
   Mỗi design tự set --c-from / --c-to / --c-text / --c-accent qua class,
   có thể thêm CSS riêng (texture stripes, fire radial, lens flare…).
   Tất cả implementations là CSS gốc — chỉ dùng primitive (gradient, clip-path,
   repeating-linear-gradient, transformed shapes).
*/

/* MARBLE — kem đá hoa cương, đường cong vàng mềm. */
.design-marble {
  --c-from: #f8f3e8;
  --c-to:   #d8c8a8;
  --c-text: #3a2a14;
  --c-accent: #9a7522;
  background:
    radial-gradient(ellipse 50% 40% at 25% 22%, rgba(255,255,255,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 75% 72%, rgba(154,117,34,0.15) 0%, transparent 60%),
    linear-gradient(160deg, var(--c-from) 0%, var(--c-to) 100%);
}
.design-marble .fifa-card__deco-tl {
  background: linear-gradient(135deg, rgba(184,144,40,0.55), rgba(184,144,40,0.05));
  clip-path: polygon(0 0, 60% 0, 35% 100%, 0 100%);
  transform: none;
  top: -10%; left: -8%; width: 70%; height: 75%;
  border-radius: 60% 0 0 0;
}
.design-marble .fifa-card__deco-mr {
  background: linear-gradient(110deg, rgba(184,144,40,0.45), rgba(184,144,40,0.05));
  clip-path: polygon(20% 0, 100% 0, 100% 90%, 60% 100%);
  border-radius: 0 70% 30% 0;
  top: 8%; right: -10%; width: 55%; height: 80%;
  transform: none;
}
.design-marble .fifa-card__deco-br {
  background: linear-gradient(135deg, rgba(184,144,40,0.30), rgba(154,117,34,0.05));
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 60% 0;
}
.design-marble .fifa-card__flag,
.design-marble .fifa-card__crest {
  background: rgba(255,250,240,0.7);
  border-color: rgba(154,117,34,0.4);
  color: #5a3a08;
}
.design-marble .fifa-card__ovr-num,
.design-marble .fifa-card__pos,
.design-marble .fifa-card__name,
.design-marble .fifa-card__firstname {
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* COSMOS — navy đậm với starburst geometric (KHÔNG copy logo nào). */
.design-cosmos {
  --c-from: #1e3a8a;
  --c-to:   #0c1428;
  --c-text: #e0e7ff;
  --c-accent: #93c5fd;
  background:
    /* Starburst: 4 ellipse mờ tạo cảm giác toả sáng từ trung tâm */
    radial-gradient(ellipse 50% 8% at 50% 45%,  rgba(147,197,253,0.30) 0%, transparent 70%),
    radial-gradient(ellipse  8% 50% at 50% 45%, rgba(147,197,253,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 50% 45%, rgba(59,130,246,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 30% 30% at 50% 45%, rgba(186,230,253,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(15,23,42,0.6) 0%, transparent 70%),
    linear-gradient(160deg, var(--c-from) 0%, var(--c-to) 100%);
}
.design-cosmos .fifa-card__deco-tl {
  background: linear-gradient(135deg, rgba(147,197,253,0.18), rgba(147,197,253,0.02));
}
.design-cosmos .fifa-card__deco-mr {
  background: linear-gradient(125deg, rgba(59,130,246,0.18), rgba(15,23,42,0.30));
}
.design-cosmos .fifa-card__deco-br {
  background: linear-gradient(135deg, rgba(12,20,40,0.5), rgba(0,0,0,0.4));
}
.design-cosmos .fifa-card__name { letter-spacing: 0.08em; }

/* ONYX — đen tuyền với sọc kim loại vàng chéo. */
.design-onyx {
  --c-from: #0a0a0a;
  --c-to:   #1a1a1a;
  --c-text: #f4ecd0;
  --c-accent: #d6b664;
  background:
    /* Sọc kim loại nhỏ ở 135deg + base gradient đen */
    repeating-linear-gradient(135deg,
      transparent 0,
      transparent 14px,
      rgba(214,182,100,0.10) 14px,
      rgba(214,182,100,0.10) 15px),
    radial-gradient(ellipse 50% 40% at 70% 25%, rgba(214,182,100,0.10) 0%, transparent 60%),
    linear-gradient(160deg, var(--c-from) 0%, var(--c-to) 100%);
}
.design-onyx .fifa-card__deco-tl {
  background: linear-gradient(135deg, rgba(214,182,100,0.28), rgba(214,182,100,0.04));
}
.design-onyx .fifa-card__deco-mr {
  background: linear-gradient(125deg, rgba(214,182,100,0.22), rgba(0,0,0,0.30));
}
.design-onyx .fifa-card__deco-br {
  background: linear-gradient(135deg, rgba(214,182,100,0.18), rgba(0,0,0,0.5));
}
.design-onyx .fifa-card__flag,
.design-onyx .fifa-card__crest {
  background: rgba(0,0,0,0.7);
  border-color: rgba(214,182,100,0.55);
}
.design-onyx .fifa-card__ovr-num,
.design-onyx .fifa-card__name {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 12px rgba(214,182,100,0.25);
}

/* GLACIER — xanh băng sáng với lens flare chéo. */
.design-glacier {
  --c-from: #bfdbfe;
  --c-to:   #1e3a8a;
  --c-text: #0c1e44;
  --c-accent: #1e40af;
  background:
    /* Hai dải sweep sáng chéo mô phỏng phản chiếu kính/băng */
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.55) 45%,
      rgba(255,255,255,0.10) 50%,
      transparent 55%),
    linear-gradient(115deg,
      transparent 60%,
      rgba(255,255,255,0.35) 68%,
      transparent 73%),
    radial-gradient(ellipse 60% 50% at 25% 25%, rgba(255,255,255,0.5) 0%, transparent 65%),
    linear-gradient(160deg, var(--c-from) 0%, #60a5fa 45%, var(--c-to) 100%);
}
.design-glacier .fifa-card__deco-tl {
  background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
}
.design-glacier .fifa-card__deco-mr {
  background: linear-gradient(125deg, rgba(255,255,255,0.25), rgba(30,58,138,0.20));
}
.design-glacier .fifa-card__deco-br {
  background: linear-gradient(135deg, rgba(30,58,138,0.45), rgba(12,30,68,0.30));
}
.design-glacier .fifa-card__flag,
.design-glacier .fifa-card__crest {
  background: rgba(255,255,255,0.45);
  border-color: rgba(30,64,175,0.45);
  color: #0c1e44;
}
.design-glacier .fifa-card__ovr-num,
.design-glacier .fifa-card__pos {
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}

/* CRIMSON — đỏ thẫm với sọc kim loại chéo. */
.design-crimson {
  --c-from: #7f1d1d;
  --c-to:   #2a0808;
  --c-text: #fef2f2;
  --c-accent: #f87171;
  background:
    repeating-linear-gradient(135deg,
      transparent 0,
      transparent 12px,
      rgba(248,113,113,0.10) 12px,
      rgba(248,113,113,0.10) 13px),
    radial-gradient(ellipse 60% 50% at 25% 25%, rgba(248,113,113,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(0,0,0,0.4) 0%, transparent 60%),
    linear-gradient(160deg, var(--c-from) 0%, var(--c-to) 100%);
}
.design-crimson .fifa-card__deco-tl {
  background: linear-gradient(135deg, rgba(248,113,113,0.30), rgba(248,113,113,0.04));
}
.design-crimson .fifa-card__deco-mr {
  background: linear-gradient(125deg, rgba(248,113,113,0.22), rgba(0,0,0,0.35));
}
.design-crimson .fifa-card__deco-br {
  background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(127,29,29,0.4));
}
.design-crimson .fifa-card__flag,
.design-crimson .fifa-card__crest {
  background: rgba(0,0,0,0.5);
  border-color: rgba(248,113,113,0.5);
}
.design-crimson .fifa-card__name {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 12px rgba(248,113,113,0.30);
}

/* INFERNO — bão tối với texture lửa cam-đỏ. */
.design-inferno {
  --c-from: #1e293b;
  --c-to:   #020617;
  --c-text: #fef3c7;
  --c-accent: #fb923c;
  background:
    /* Lửa: 4 radial gradients chồng nhau, mô phỏng turbulence */
    radial-gradient(ellipse 55% 80% at 50% 100%, #f97316 0%, #dc2626 22%, transparent 50%),
    radial-gradient(ellipse 30% 50% at 25% 90%,  #fb923c 0%, #b91c1c 25%, transparent 55%),
    radial-gradient(ellipse 30% 50% at 75% 95%,  #fb923c 0%, #b91c1c 25%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 70%,  rgba(251,146,60,0.35) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 20%, rgba(15,23,42,0.5) 0%, transparent 60%),
    linear-gradient(180deg, var(--c-from) 0%, #0c1428 35%, var(--c-to) 100%);
}
.design-inferno .fifa-card__deco-tl {
  background: linear-gradient(135deg, rgba(251,146,60,0.20), rgba(251,146,60,0.02));
}
.design-inferno .fifa-card__deco-mr {
  background: linear-gradient(125deg, rgba(220,38,38,0.18), rgba(2,6,23,0.30));
}
.design-inferno .fifa-card__deco-br {
  /* Bật flame intensity ở góc dưới phải */
  background: radial-gradient(ellipse at 50% 100%, rgba(251,146,60,0.55), rgba(220,38,38,0.30) 50%, transparent 80%);
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
}
.design-inferno .fifa-card__flag,
.design-inferno .fifa-card__crest {
  background: rgba(2,6,23,0.7);
  border-color: rgba(251,146,60,0.6);
}
.design-inferno .fifa-card__ovr-num,
.design-inferno .fifa-card__name {
  text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 0 14px rgba(251,146,60,0.45);
}
.design-inferno .fifa-card__divider {
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(251,146,60,0.6);
}

/* ============ Hover fire effect màu theo design ============ */
.fifa-card-wrap[data-design="onyx"] .fifa-card__fire {
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, #d6b664 0%, #b8902a 35%, transparent 65%),
    radial-gradient(ellipse 50% 90% at 50% 100%, #f5e4a1 0%, #d6b664 25%, #b8902a 55%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 80% 100%, #d6b664 0%, #b8902a 35%, transparent 65%);
}
.fifa-card-wrap[data-design="cosmos"] .fifa-card__fire {
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, #93c5fd 0%, #1d4ed8 40%, transparent 70%),
    radial-gradient(ellipse 50% 90% at 50% 100%, #dbeafe 0%, #60a5fa 30%, #1d4ed8 60%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 80% 100%, #93c5fd 0%, #1d4ed8 40%, transparent 70%);
}
.fifa-card-wrap[data-design="glacier"] .fifa-card__fire {
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, #dbeafe 0%, #60a5fa 35%, transparent 65%),
    radial-gradient(ellipse 50% 90% at 50% 100%, #ffffff 0%, #bfdbfe 30%, #60a5fa 60%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 80% 100%, #dbeafe 0%, #60a5fa 35%, transparent 65%);
}
.fifa-card-wrap[data-design="crimson"] .fifa-card__fire {
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, #f87171 0%, #991b1b 40%, transparent 70%),
    radial-gradient(ellipse 50% 90% at 50% 100%, #fecaca 0%, #f87171 30%, #991b1b 60%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 80% 100%, #f87171 0%, #991b1b 40%, transparent 70%);
}
.fifa-card-wrap[data-design="inferno"] .fifa-card__fire {
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, #fb923c 0%, #b91c1c 40%, transparent 70%),
    radial-gradient(ellipse 50% 90% at 50% 100%, #fef3c7 0%, #fb923c 25%, #dc2626 60%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 80% 100%, #fb923c 0%, #b91c1c 40%, transparent 70%);
}
.fifa-card-wrap[data-design="marble"] .fifa-card__fire {
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, #d4af37 0%, #9a7522 40%, transparent 70%),
    radial-gradient(ellipse 50% 90% at 50% 100%, #f3e1a2 0%, #d4af37 30%, #9a7522 60%, transparent 75%),
    radial-gradient(ellipse 60% 80% at 80% 100%, #d4af37 0%, #9a7522 40%, transparent 70%);
}