/* =====================================================================================================
   PIT STOP ARCADE — exclusive cosmetics (EXCLUSIVES.md). Link after app.css.
   Name FX (.xfx-name), title badges (.xfx-title), garage cards (.xfx-card, .xfx-sethead), entrance overlays
   (.xfx-banner, .xfx-flash, .xfx-glitch). Logical properties everywhere (RTL mirrors). Motion is transform /
   opacity / background-position only and switches off with prefers-reduced-motion.
   ===================================================================================================== */

:root {
  --xfx-gold-1: #fff7d6;
  --xfx-gold-2: #ffe07a;
  --xfx-gold-3: #ffc21f;
  --xfx-gold-4: #b97800;
  --xfx-emerald: #00c483;
  --xfx-cyan: #19f0ff;
  --xfx-magenta: #ff2bd6;
  --xfx-grad-gold: linear-gradient(100deg, #b97800 0%, #ffd24a 14%, #fff7d6 22%, #ffc21f 32%, #b97800 50%, #ffd24a 64%, #fff7d6 72%, #ffc21f 82%, #b97800 100%);
  --xfx-grad-emerald: linear-gradient(100deg, #00a86b 0%, #6fffc6 16%, #e9c46a 30%, #00c483 50%, #6fffc6 66%, #fff4d6 76%, #00a86b 100%);
}

@keyframes xfx-flow { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }
@keyframes xfx-spin { to { transform: rotate(360deg); } }
@keyframes xfx-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-.08em) rotate(4deg); } }
@keyframes xfx-twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: .2; transform: scale(.5) rotate(90deg); } }
@keyframes xfx-sheen { 0% { transform: translateX(-120%) skewX(-20deg); } 55%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes xfx-pulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---- Name FX ----------------------------------------------------------------------------------------- */
.xfx-name {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  max-inline-size: 100%;
  min-inline-size: 0;
  vertical-align: middle;
  position: relative;
  font-weight: 800;
  line-height: 1.2;
}
/* The name shrinks before its title badge (flex: 1 1 auto vs .xfx-title flex: none) and keeps its own direction
   (plaintext), so a truncated Arabic name in the English UI (or a Latin one in Arabic) keeps its beginning. */
.xfx-name .xfx-txt { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: .05em; unicode-bidi: plaintext; text-align: match-parent; }
.xfx-ico { inline-size: 1.2em; block-size: 1.2em; flex: none; display: inline-grid; animation: xfx-bob 2.6s ease-in-out infinite; }
.xfx-ico svg, .xfx-title svg { inline-size: 100%; block-size: 100%; display: block; overflow: visible; }

.xfx-n-founder .xfx-txt, .xfx-n-falcon .xfx-txt {
  background-image: var(--xfx-grad-gold);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: xfx-flow 3.4s linear infinite;
  filter: drop-shadow(0 0 .3em rgba(255, 176, 0, .5)) drop-shadow(0 .06em 0 rgba(70, 40, 0, .95));
}
.xfx-n-founder .xfx-ico { filter: drop-shadow(0 0 .3em rgba(255, 190, 40, .85)); }
.xfx-n-falcon .xfx-txt {
  background-image: var(--xfx-grad-emerald);
  animation-duration: 4.6s;
  filter: drop-shadow(0 0 .3em rgba(0, 220, 140, .45)) drop-shadow(0 .06em 0 rgba(0, 40, 25, .95));
}
.xfx-n-falcon .xfx-ico { filter: drop-shadow(0 0 .3em rgba(0, 227, 154, .8)); }

/* twinkles over gold/emerald names */
.xfx-spk { position: absolute; inset: 0; pointer-events: none; }
.xfx-spk::before, .xfx-spk::after {
  content: '';
  position: absolute;
  inline-size: .55em;
  block-size: .55em;
  background: #fffbe8;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 .2em #fff2b0);
  opacity: 0;
  animation: xfx-twinkle 2.6s ease-in-out infinite;
}
.xfx-spk::before { inset-block-start: -.15em; inset-inline-start: 38%; }
.xfx-spk::after { inset-block-end: -.1em; inset-inline-end: 8%; animation-delay: 1.3s; animation-duration: 3.1s; }
.xfx-n-phantom .xfx-spk { display: none; }

/* Neon Phantom: neon text with RGB-split glitch layers */
/* clip (not visible) so a long name still ends in an ellipsis; the margin keeps most of the glow and the glitch shift */
.xfx-n-phantom .xfx-txt {
  position: relative;
  color: #c9fcff;
  text-shadow: 0 0 .25em var(--xfx-cyan), 0 0 .7em rgba(25, 240, 255, .55);
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: .35em;
}
.xfx-n-phantom .xfx-txt::before, .xfx-n-phantom .xfx-txt::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  text-align: inherit;
  opacity: .9;
}
.xfx-n-phantom .xfx-txt::before { color: var(--xfx-magenta); text-shadow: 0 0 .3em var(--xfx-magenta); clip-path: inset(0 0 58% 0); animation: xfx-glitch-a 2.9s steps(1) infinite; }
.xfx-n-phantom .xfx-txt::after { color: var(--xfx-cyan); clip-path: inset(52% 0 0 0); animation: xfx-glitch-b 2.3s steps(1) infinite; }
.xfx-n-phantom .xfx-ico { filter: drop-shadow(0 0 .3em var(--xfx-cyan)); animation: xfx-flick 3s steps(1) infinite; }
@keyframes xfx-glitch-a { 0%, 86%, 100% { transform: translate(0); opacity: 0; } 87% { transform: translate(-.08em, -.03em); opacity: .95; } 90% { transform: translate(.06em, 0); opacity: .95; } 93% { transform: translate(-.03em, .02em); opacity: .9; } }
@keyframes xfx-glitch-b { 0%, 78%, 100% { transform: translate(0); opacity: 0; } 79% { transform: translate(.09em, .02em); opacity: .95; } 83% { transform: translate(-.05em, 0); opacity: .9; } }
@keyframes xfx-flick { 0%, 91%, 100% { opacity: 1; } 92% { opacity: .2; } 94% { opacity: 1; } 96% { opacity: .4; } }

/* ---- Title badge ------------------------------------------------------------------------------------- */
.xfx-title {
  --b1: #8a5a00; --b2: #ffe07a; --b3: #ffc21f; --bg1: #2a1e05; --bg2: #0d0a03; --glow: rgba(255, 190, 40, .45);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .3em;
  margin-inline-start: .35em;
  padding: .14em .6em .14em .45em;
  border-radius: 999px;
  font-size: .64em;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  line-height: 1.25;
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, var(--bg1), var(--bg2)) padding-box,
    linear-gradient(90deg, var(--b1), var(--b2), var(--b3), #fffbe8, var(--b3), var(--b2), var(--b1)) border-box;
  background-size: 100% 100%, 200% 100%;
  animation: xfx-flow 3s linear infinite;
  box-shadow: 0 0 .7em var(--glow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  vertical-align: middle;
}
.xfx-title svg { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.xfx-title b {
  font-weight: 800;
  background-image: linear-gradient(180deg, var(--xfx-gold-1), var(--b3) 60%, var(--b1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.xfx-title::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inline-size: 35%;
  inset-inline-start: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: xfx-sheen 3.6s ease-in-out infinite;
  z-index: -1;
}
.xfx-t-falcon { --b1: #00553a; --b2: #6fffc6; --b3: #27d99a; --bg1: #063426; --bg2: #02130d; --glow: rgba(0, 227, 154, .4); }
.xfx-t-falcon b { background-image: linear-gradient(180deg, #f4fff9, #8dffd2 55%, #e9c46a); }
.xfx-t-phantom { --b1: #6a2bff; --b2: #19f0ff; --b3: #ff2bd6; --bg1: #1c0d33; --bg2: #08050f; --glow: rgba(25, 240, 255, .45); }
.xfx-t-phantom b { background-image: linear-gradient(180deg, #f0feff, #7df8ff 55%, #ff7ae6); }

/* ---- Garage cards ------------------------------------------------------------------------------------- */
.xfx-card {
  --x1: #ffc21f; --x2: #fff0b8; --x3: #a86a00; --x4: #0b0b0d;
  position: relative;
  display: grid;
  grid-template-rows: minmax(3.4rem, 1fr) auto;
  align-items: center;
  gap: .3rem;
  inline-size: 100%;
  min-block-size: 7.4rem;
  padding: .55rem .45rem .5rem;
  border-radius: var(--radius, 14px);
  border: 1.5px solid color-mix(in srgb, var(--x1) 45%, transparent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--x1) 30%, transparent) 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 115%, color-mix(in srgb, var(--x3) 45%, transparent) 0%, transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--x4) 80%, #20202a), #060609);
  color: var(--text, #f5f5f7);
  font: inherit;
  font-family: var(--font, system-ui);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .38);
  transition: transform .18s var(--ease, ease), box-shadow .18s, border-color .18s;
  -webkit-tap-highlight-color: transparent;
}
.xfx-card:active { transform: scale(.97); }
.xfx-card:focus-visible { outline: 2px solid var(--x2); outline-offset: 2px; }
.xfx-card.is-on {
  border-color: var(--x1);
  box-shadow: 0 0 0 1.5px var(--x1), 0 0 22px color-mix(in srgb, var(--x1) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.xfx-card-foil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 32%, color-mix(in srgb, var(--x2) 22%, transparent) 44%, rgba(255, 255, 255, .22) 50%, color-mix(in srgb, var(--x1) 18%, transparent) 56%, transparent 68%);
  background-size: 260% 100%;
  animation: xfx-flow 5s linear infinite;
  pointer-events: none;
}
.xfx-card-art { display: grid; place-items: center; min-block-size: 3.4rem; position: relative; }
.xfx-card-meta { display: grid; gap: .12rem; justify-items: center; min-inline-size: 0; }
.xfx-card-name {
  font-weight: 800;
  font-size: .8rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-wrap: balance;
  max-inline-size: 100%;
  color: color-mix(in srgb, var(--x2) 55%, #fff);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.xfx-card-slot { display: inline-flex; align-items: center; gap: .25em; font-size: .62rem; font-weight: 600; color: color-mix(in srgb, var(--x2) 60%, #b8b8c2); opacity: .9; }
.xfx-glyph { inline-size: 1.05em; block-size: 1.05em; flex: none; }
.xfx-card-ribbon {
  position: absolute;
  inset-block-start: .4rem;
  inset-inline-start: .4rem;
  padding: .05rem .4rem;
  border-radius: 999px;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #120d02;
  background: linear-gradient(90deg, var(--x2), var(--x1), var(--x2));
  background-size: 200% 100%;
  animation: xfx-flow 3s linear infinite;
  box-shadow: 0 0 .6rem color-mix(in srgb, var(--x1) 50%, transparent);
}
.xfx-s-phantom .xfx-card-ribbon { color: #07060d; }
.xfx-card-check {
  position: absolute;
  inset-block-start: .4rem;
  inset-inline-end: .4rem;
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border-radius: 50%;
  background: var(--x1);
  box-shadow: 0 0 .6rem var(--x1);
}
.xfx-card-check::after {
  /* a check mark does not mirror in RTL: physical borders on purpose */
  content: '';
  position: absolute;
  inset: 26% 22% 36%;
  border-left: 2.5px solid #111;
  border-bottom: 2.5px solid #111;
  transform: rotate(-45deg);
}
.xfx-card.is-locked { cursor: default; }
.xfx-card.is-locked .xfx-card-art { filter: saturate(.55) brightness(.7); }
.xfx-card-lock {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  padding: .28rem .3rem;
  font-size: .56rem;
  font-weight: 700;
  color: #e9e9ef;
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .55));
  backdrop-filter: blur(3px);
}
.xfx-lock { inline-size: 1.1em; block-size: 1.1em; flex: none; color: var(--x1); }
.xfx-card.is-locked .xfx-card-meta { padding-block-end: 1.2rem; }

/* card previews: paint orbs */
.xfx-orb {
  position: relative;
  display: block;
  inline-size: 3.4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset -.45rem -.55rem 1rem rgba(0, 0, 0, .7), inset .25rem .3rem .6rem rgba(255, 255, 255, .22), 0 .35rem 1rem rgba(0, 0, 0, .55), 0 0 1.1rem color-mix(in srgb, var(--x1) 35%, transparent);
}
.xfx-orb i { position: absolute; inset: -35%; animation: xfx-spin 10s linear infinite; }
.xfx-orb b { position: absolute; inset: 8% 40% 55% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent); filter: blur(1px); }
.xfx-orb-molten { background: radial-gradient(circle at 35% 30%, #2a2418, #0b0b0d 68%); }
.xfx-orb-molten i {
  background:
    repeating-radial-gradient(circle at 62% 42%, transparent 0 7px, rgba(255, 194, 31, .95) 7.5px, rgba(255, 240, 180, .9) 8.5px, transparent 10px 17px),
    repeating-linear-gradient(35deg, transparent 0 11px, rgba(255, 190, 40, .75) 11.5px, transparent 13px 22px);
  filter: drop-shadow(0 0 3px #ffb000);
  mix-blend-mode: screen;
}
.xfx-orb-emerald { background: radial-gradient(circle at 35% 30%, #2dffb4 0%, #00a86b 38%, #003d29 70%), #003d29; }
.xfx-orb-emerald i {
  background: radial-gradient(circle, rgba(233, 196, 106, .9) 0 1.5px, transparent 2px) 0 0 / 7px 7px, conic-gradient(from 0deg, transparent, rgba(233, 196, 106, .55), transparent 40%);
  mix-blend-mode: screen;
  animation-duration: 7s;
}
.xfx-orb-phantom { background: radial-gradient(circle at 40% 35%, rgba(106, 43, 255, .35), rgba(7, 6, 13, .55) 70%); box-shadow: inset 0 0 .7rem var(--xfx-cyan), inset 0 0 1.4rem rgba(255, 43, 214, .5), 0 0 1.1rem rgba(25, 240, 255, .45); }
.xfx-orb-phantom i { inset: 0; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(25, 240, 255, .5) 5.5px, transparent 6.5px 11px); animation: xfx-scan 1.8s linear infinite; }
@keyframes xfx-scan { from { transform: translateY(-11px); } to { transform: translateY(0); } }
.xfx-orb-galaxy { background: radial-gradient(circle at 60% 40%, #ff7ae0 0%, #7a4dff 32%, #1b0b4a 62%, #05030d 80%); }
.xfx-orb-galaxy i {
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px) 3px 5px / 11px 13px,
    radial-gradient(circle, #ffe6ff 0 1.2px, transparent 1.8px) 7px 2px / 17px 15px;
  animation-duration: 24s;
  opacity: .9;
}
.xfx-orb-inferno { background: radial-gradient(circle at 35% 30%, #3a1a10, #120605 70%); }
.xfx-orb-inferno i {
  background: repeating-conic-gradient(from 10deg at 55% 45%, transparent 0 22deg, rgba(255, 90, 0, .95) 23deg, rgba(255, 208, 74, .9) 24deg, transparent 25.5deg 47deg);
  filter: blur(.3px) drop-shadow(0 0 3px #ff5a00);
  animation: xfx-spin 16s linear infinite, xfx-pulse 1.6s ease-in-out infinite;
}
.xfx-orb-holo { background: conic-gradient(from 0deg, #9ef3ff, #ff9ef0, #fff59e, #9effc4, #9ef3ff); }
.xfx-orb-holo i { background: repeating-linear-gradient(60deg, rgba(255, 255, 255, .0) 0 4px, rgba(255, 255, 255, .45) 5px, transparent 6px 10px); animation-duration: 6s; mix-blend-mode: overlay; }

/* wheels, horn, fx previews */
.xfx-rim { display: block; inline-size: 3.3rem; aspect-ratio: 1; filter: drop-shadow(0 0 .45rem color-mix(in srgb, var(--x1) 60%, transparent)); }
.xfx-rimsvg { inline-size: 100%; block-size: 100%; animation: xfx-spin 2.2s linear infinite; }
.xfx-kart { inline-size: 5.2rem; block-size: auto; filter: drop-shadow(0 0 .4rem color-mix(in srgb, var(--x1) 45%, transparent)); }
.xfx-wave { display: inline-flex; align-items: center; gap: .35rem; }
.xfx-wave .xfx-emblem { inline-size: 2.2rem; block-size: 2.2rem; filter: drop-shadow(0 0 .4rem var(--x1)); }
.xfx-bars { display: inline-flex; align-items: center; gap: 2px; block-size: 1.8rem; }
.xfx-bars i { display: block; inline-size: 3px; block-size: 100%; border-radius: 2px; background: linear-gradient(0deg, var(--x3), var(--x1), var(--x2)); transform-origin: 50% 50%; animation: xfx-eq .9s ease-in-out infinite; }
.xfx-bars i:nth-child(2) { animation-delay: -.2s; } .xfx-bars i:nth-child(3) { animation-delay: -.45s; } .xfx-bars i:nth-child(4) { animation-delay: -.1s; } .xfx-bars i:nth-child(5) { animation-delay: -.6s; }
@keyframes xfx-eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.xfx-fxart { position: relative; display: grid; place-items: center; inline-size: 3.4rem; aspect-ratio: 1; }
.xfx-fxart .xfx-emblem { inline-size: 2.5rem; block-size: 2.5rem; filter: drop-shadow(0 0 .45rem var(--x1)); position: relative; z-index: 1; }
.xfx-fxart::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--x1) 55%, transparent), transparent);
  animation: xfx-pulse 2.2s ease-in-out infinite;
}
.xfx-fxglyph { position: absolute; inset-block-end: -.1rem; inset-inline-end: -.25rem; inline-size: 1.25rem; block-size: 1.25rem; color: var(--x2); filter: drop-shadow(0 0 .25rem var(--x1)); z-index: 2; }
.xfx-fx-aura::after { content: ''; position: absolute; inset: -6%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--x1) 80%, transparent); animation: xfx-spin 6s linear infinite; }
.xfx-fx-entrance .xfx-emblem { animation: xfx-strike 2.4s steps(1) infinite; }
@keyframes xfx-strike { 0%, 70%, 100% { filter: drop-shadow(0 0 .45rem var(--x1)); } 72% { filter: drop-shadow(0 0 1.2rem #fff) brightness(1.8); } 76% { filter: drop-shadow(0 0 .3rem var(--x1)); } 78% { filter: drop-shadow(0 0 1rem #fff) brightness(1.5); } }
.xfx-fx-victory::after { content: ''; position: absolute; inset: -10%; background: radial-gradient(circle, var(--x2) 0 1.5px, transparent 2px) 0 0 / 12px 14px; mask: radial-gradient(closest-side, transparent 45%, #000 60%, transparent); animation: xfx-spin 9s linear infinite reverse; }
.xfx-fx-underglow::after { content: ''; position: absolute; inset-inline: 2%; inset-block-end: -8%; block-size: 26%; border-radius: 50%; background: radial-gradient(closest-side, var(--x1), transparent); animation: xfx-pulse 1.8s ease-in-out infinite; }
.xfx-fx-boostFx::after { content: ''; position: absolute; inset: 30% -20% 30% auto; inline-size: 55%; background: repeating-linear-gradient(0deg, transparent 0 4px, color-mix(in srgb, var(--x1) 80%, transparent) 4px 6px); mask: linear-gradient(90deg, #000, transparent); animation: xfx-pulse .5s ease-in-out infinite; }
.xfx-art-name { font-size: .95rem; max-inline-size: 100%; display: grid; place-items: center; }
.xfx-art-title { display: grid; place-items: center; max-inline-size: 100%; overflow: hidden; }
.xfx-art-title .xfx-title { margin: 0; font-size: .6rem; padding-inline: .45em; }
.xfx-art-name .xfx-name { max-inline-size: 100%; }

/* set header in the garage "Exclusive" group */
.xfx-sethead {
  --x1: #ffc21f; --x2: #fff0b8; --x3: #a86a00; --x4: #0b0b0d;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem .6rem;
  padding: .5rem .6rem;
  border-radius: var(--radius, 14px);
  border: 1px solid color-mix(in srgb, var(--x1) 40%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--x1) 20%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--x4) 85%, #1b1b22), #07070a);
  position: relative;
  overflow: hidden;
}
.xfx-sethead-emblem { inline-size: 2.3rem; block-size: 2.3rem; filter: drop-shadow(0 0 .45rem var(--x1)); }
.xfx-sethead-emblem svg { inline-size: 100%; block-size: 100%; }
.xfx-sethead-text { display: grid; min-inline-size: 0; }
.xfx-sethead-text b { font-weight: 800; font-size: .95rem; letter-spacing: .03em; background: linear-gradient(90deg, var(--x2), var(--x1), var(--x2)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: xfx-flow 4s linear infinite; }
.xfx-sethead-text small { font-size: .66rem; color: var(--muted, #a2a3ad); line-height: 1.2; }
.xfx-sethead-tag { grid-column: 3; font-size: .58rem; font-weight: 800; color: var(--x2); border: 1px solid color-mix(in srgb, var(--x1) 55%, transparent); border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
.xfx-sethead-btn {
  grid-column: 1 / -1;
  justify-self: stretch;
  min-block-size: 2.4rem;
  border: 0;
  border-radius: var(--radius-s, 9px);
  font: inherit;
  font-weight: 800;
  font-size: .78rem;
  color: #120d02;
  background: linear-gradient(90deg, var(--x3), var(--x1), var(--x2), var(--x1), var(--x3));
  background-size: 200% 100%;
  animation: xfx-flow 3.5s linear infinite;
  box-shadow: 0 0 .9rem color-mix(in srgb, var(--x1) 45%, transparent);
  cursor: pointer;
}
.xfx-s-phantom .xfx-sethead-btn { color: #07060d; }

/* ---- Entrance overlays ------------------------------------------------------------------------------- */
.xfx-flash {
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, var(--xc) 0%, color-mix(in srgb, var(--xc) 55%, transparent) 38%, transparent 85%);
  opacity: var(--xa, .8);
  mix-blend-mode: screen;
  animation: xfx-flash var(--xd, 400ms) cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes xfx-flash { from { opacity: var(--xa, .8); } to { opacity: 0; } }

.xfx-glitch { position: fixed; inset: 0; z-index: 59; pointer-events: none; animation: xfx-flash var(--xd, 400ms) steps(5) forwards; --xa: 1; }
.xfx-glitch i { position: absolute; inset-inline: 0; display: block; background: linear-gradient(90deg, rgba(25, 240, 255, .4), rgba(255, 43, 214, .4)); transform: translateX(var(--dx, 0)); mix-blend-mode: screen; }

.xfx-banner {
  --c1: #fff7d6; --c2: #ffc21f; --c3: #b97800; --ink: rgba(12, 9, 2, .9); --glow: rgba(255, 176, 0, .55);
  --band-top: clamp(2.6rem, 11vh, 5rem);
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  display: grid;
  /* upper band: the kart (screen centre / lower third in every camera) stays visible under it */
  place-items: start center;
  padding-block-start: var(--band-top);
  font-family: var(--font, system-ui);
  overflow: hidden;
  animation: xfx-banner-out .4s ease-in forwards;
  animation-delay: calc(var(--xd, 2000ms) - 400ms);
}
@keyframes xfx-banner-out { to { opacity: 0; transform: scale(1.04); } }
.xfx-b-rays {
  position: absolute;
  inset-block-start: calc(var(--band-top) + 3.5rem - 75vmax);
  inset-inline-start: calc(50% - 75vmax);
  inline-size: 150vmax;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c2) 22%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 18%, transparent 42%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 18%, transparent 42%);
  animation: xfx-spin 14s linear infinite, xfx-in .5s ease-out both;
}
@keyframes xfx-in { from { opacity: 0; } to { opacity: 1; } }
.xfx-b-band {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .05rem;
  inline-size: min(92vw, 44rem);
  padding: 1.7rem 1.5rem .8rem;
  background: linear-gradient(90deg, transparent, var(--ink) 16%, var(--ink) 84%, transparent);
  animation: xfx-band-in .55s var(--ease-back, cubic-bezier(.34, 1.56, .64, 1)) both;
  overflow: visible;
}
.xfx-b-band::before, .xfx-b-band::after {
  content: '';
  position: absolute;
  inset-inline: 6%;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--c3), var(--c1), var(--c2), var(--c1), var(--c3), transparent);
  box-shadow: 0 0 .8rem var(--glow);
}
.xfx-b-band::before { inset-block-start: 0; }
.xfx-b-band::after { inset-block-end: 0; }
@keyframes xfx-band-in { from { opacity: 0; transform: scaleX(.2) scaleY(.6); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.xfx-b-sheen {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  animation: xfx-sheen 1.6s ease-in-out .3s 2;
  pointer-events: none;
}
.xfx-b-emblem {
  position: absolute;
  inset-block-start: -2.3rem;
  inline-size: 3.8rem;
  block-size: 3.8rem;
  filter: drop-shadow(0 0 .9rem var(--glow)) drop-shadow(0 0 .25rem var(--c2));
  animation: xfx-emblem-in .7s var(--ease-back, cubic-bezier(.34, 1.56, .64, 1)) .1s both;
}
.xfx-b-emblem svg { inline-size: 100%; block-size: 100%; }
@keyframes xfx-emblem-in { from { opacity: 0; transform: translateY(-1.5rem) scale(.4) rotate(-25deg); } to { opacity: 1; transform: none; } }
.xfx-b-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .35em; color: var(--c1); opacity: .9; text-shadow: 0 0 .5rem var(--glow); margin-block-start: .4rem; }
.xfx-b-title {
  font-size: clamp(1.5rem, 8.5vh, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  background-image: linear-gradient(100deg, var(--c3) 0%, var(--c2) 15%, var(--c1) 24%, var(--c2) 34%, var(--c3) 50%, var(--c2) 65%, var(--c1) 74%, var(--c2) 84%, var(--c3) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 .45rem var(--glow)) drop-shadow(0 .08em 0 rgba(0, 0, 0, .9));
  animation: xfx-flow 2.2s linear infinite, xfx-title-in .6s cubic-bezier(.16, 1, .3, 1) .12s both;
}
@keyframes xfx-title-in { from { opacity: 0; letter-spacing: .3em; transform: scale(1.3); } to { opacity: 1; letter-spacing: normal; transform: none; } }
.xfx-b-name { font-size: .95rem; font-weight: 700; color: #fff; opacity: .92; margin-block-start: .15rem; text-shadow: 0 1px 0 #000; animation: xfx-in .5s ease-out .35s both; }
.xfx-b-falcon { --c1: #fff4d6; --c2: #27d99a; --c3: #00553a; --ink: rgba(2, 19, 13, .9); --glow: rgba(0, 227, 154, .5); }
.xfx-b-phantom { --c1: #e8feff; --c2: #19f0ff; --c3: #ff2bd6; --ink: rgba(8, 5, 15, .9); --glow: rgba(25, 240, 255, .55); }
.xfx-b-phantom .xfx-b-title { animation: xfx-flow 1.4s linear infinite, xfx-title-in .5s steps(6) .1s both; }
.xfx-b-phantom .xfx-b-band { animation: xfx-band-in .45s steps(5) both; }

@media (prefers-reduced-motion: reduce) {
  .xfx-name *, .xfx-title, .xfx-title::after, .xfx-card, .xfx-card *, .xfx-sethead *, .xfx-banner, .xfx-banner * {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .xfx-banner { animation: xfx-banner-out .01s linear forwards; animation-delay: calc(var(--xd, 2000ms) - 10ms); }
}