.bazaar-board {
  height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .65cqw;
}
.bazaar-intro {
  display: flex; align-items: center; justify-content: space-between; gap: .75cqw;
  margin: 0; color: #d8e7f6; font-size: 1.13cqw; line-height: 1.2;
}
.bazaar-intro strong { color: #a6e9ff; letter-spacing: .09em; }
.bazaar-cards {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 25cqw;
  gap: .8cqw; min-height: 0; min-width: 0; padding: .25cqw .35cqw .5cqw;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-padding-inline: .35cqw; scrollbar-color: #749cb8 #132131; scrollbar-width: thin;
}
.bazaar-card {
  --bazaar-accent: #afdeff;
  border-color: color-mix(in srgb, var(--bazaar-accent) 65%, #25334a);
  padding: 1.12cqw; gap: .4cqw; scroll-snap-align: start;
}
.bazaar-card[data-locked] {
  --bazaar-accent: #a3afbd;
  color: #aeb9c6; border-color: #4b596a; background: #101823; box-shadow: none;
}
.bazaar-card[data-locked]:hover { border-color: #4b596a; }
.bazaar-card[data-locked]:active { transform: none; }
.bazaar-card[data-locked]::before { filter: grayscale(1) brightness(.56); }
.bazaar-card:focus-visible { outline-offset: -.3cqw; }
[data-theme="white-line"] {
  --bazaar-art: url("assets/Assets/Levels/Jakarta/Textures/Props/Mountain_Concept.webp");
  --bazaar-accent: #c5f1ff; --bazaar-tint: #9bd8ff6b; --bazaar-position: 57%;
  --bazaar-sky: #567898;
  --bazaar-weather: radial-gradient(circle at 19% 41%, #e1faffe0 0 .12cqw, transparent .25cqw),
    radial-gradient(circle at 76% 48%, #e1faffd0 0 .09cqw, transparent .23cqw),
    radial-gradient(circle at 48% 34%, #e1faffdb 0 .11cqw, transparent .28cqw),
    radial-gradient(circle at 68% 38%, #e1faffb0 0 .08cqw, transparent .2cqw),
    radial-gradient(circle at 27% 58%, #e1faffb0 0 .1cqw, transparent .23cqw);
}
[data-theme="mirror-mile"] {
  --bazaar-art: url("assets/Assets/Core/Art/UI/Loading/loading_keyart_racestart.webp");
  --bazaar-accent: #92f0f6; --bazaar-tint: #12587859; --bazaar-position: 66%;
  --bazaar-weather: repeating-linear-gradient(114deg, transparent 0 2.7cqw, #a2e7ff37 2.73cqw 2.8cqw, transparent 2.85cqw 3.7cqw);
}
[data-theme="after-hours"] {
  --bazaar-art: url("motox-story-art/time-attack.webp");
  --bazaar-accent: #d2c1ff; --bazaar-tint: #42267b69; --bazaar-position: 56%;
}
[data-theme="triple-threat"] {
  --bazaar-art: url("assets/Assets/Core/Art/UI/Loading/loading_keyart_boot.webp");
  --bazaar-accent: #ffb6ae; --bazaar-tint: #63263738; --bazaar-position: 71%;
}
[data-theme="redline-club"] {
  --bazaar-art: url("motox-story-art/shift-trials.webp");
  --bazaar-accent: #c7e99d; --bazaar-tint: #133f292e; --bazaar-position: 54%;
}
[data-theme="breakwater"] {
  --bazaar-art: url("motox-story-art/jakarta-story.webp");
  --bazaar-accent: #ffd0a2; --bazaar-tint: #63422038; --bazaar-position: 54%;
}
[data-theme="vanishing-point"] {
  --bazaar-art: url("assets/Assets/Screenshots/jakarta_dusk_fog2.webp");
  --bazaar-accent: #bdd6e5; --bazaar-tint: #4d708046; --bazaar-position: 58%;
}
.bazaar-card::before, .bazaar-hero {
  background:
    linear-gradient(180deg, #0b1321eb 0%, #0b132119 29%, #0b132111 42%, #0b1321ee 76%, #090f19),
    var(--bazaar-weather, linear-gradient(transparent, transparent)),
    linear-gradient(var(--bazaar-tint), var(--bazaar-tint)),
    var(--bazaar-art) var(--bazaar-position) center / cover var(--bazaar-sky, #101a28);
}
.bazaar-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: .45cqw; }
.bazaar-tag, .bazaar-card-info {
  color: var(--bazaar-accent); font-size: 1.05cqw; line-height: 1.15;
  font-weight: 800; letter-spacing: .07em;
}
.bazaar-state {
  display: grid; place-items: center; padding: .32cqw;
  border: .1cqw solid currentColor; border-radius: .35cqw; background: #0a121fdd; color: #e3e9f2;
}
.bazaar-state svg { width: 1.4cqw; height: 1.4cqw; }
.bazaar-card-copy { display: grid; gap: .42cqw; width: 100%; }
.bazaar-card .activity-title { font-size: 3.45cqw; }
.bazaar-card-info {
  display: flex; align-items: center; justify-content: space-between; gap: .4cqw;
  margin-top: .15cqw; padding-top: .65cqw; border-top: .1cqw solid #bad6f046; color: #e2eaf3;
}
.bazaar-card[data-locked] .bazaar-card-top { justify-content: flex-start; }
.bazaar-card[data-locked] .bazaar-state {
  order: -1; color: #acb9c9; border-color: #536277; background: #151f2c;
}
.bazaar-card[data-locked] .bazaar-card-info { color: #aab6c4; border-color: #55637652; }
.bazaar-controls { display: flex; gap: .45cqw; }
.bazaar-controls button { min-width: 3.4cqw; padding: .15cqw .7cqw; font: 700 2.6cqw/.95 system-ui; }
.bazaar-series {
  height: 100%; display: grid; grid-template-columns: .72fr 1.28fr; gap: 1cqw; min-height: 0;
}
.bazaar-series .bazaar-hero {
  display: grid; align-content: end; gap: .55cqw; padding: 1.45cqw;
}
.bazaar-levels {
  min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(5.5cqw, auto); align-content: start; gap: .65cqw; padding: .3cqw .5cqw;
  scrollbar-color: #749cb8 #132131; scrollbar-width: thin;
}
.bazaar-level {
  display: grid; place-content: center; justify-items: center; gap: .25cqw;
  color: #eef7ff; background: #152639;
}
.bazaar-level strong { font: italic 700 2.55cqw/1 Barlow, "Arial Narrow", sans-serif; }
.bazaar-level span { font-size: .92cqw; font-weight: 750; letter-spacing: .035em; }
.bazaar-level[data-state="NEXT"] { border-color: #91f3ff; }
.bazaar-level[data-state="CLEARED"] { border-color: #a5d699; }
.bazaar-level:disabled { opacity: .68; cursor: default; }
.bazaar-prize { color: #ffdc8f; font-weight: 800; }
.bazaar-race .bazaar-hero { justify-content: flex-end; }
.bazaar-race .bazaar-hero .flow-label { max-width: 32cqw; }
.bazaar-race .bazaar-console .flow-primary { align-self: start; margin-top: .8cqw; }
.bazaar-race .flow-primary:disabled { opacity: .55; cursor: default; }
.bazaar-meter {
  height: 2.4cqw; position: relative; overflow: hidden;
  border: .12cqw solid #839fbb; border-radius: .4cqw; background: #080f1c;
}
.bazaar-target {
  position: absolute; inset: 0 auto 0 50%; width: var(--window); translate: -50% 0;
  background: #48a7c9; border-inline: .1cqw solid #9af3ff;
}
.bazaar-needle {
  position: absolute; inset: 0 auto 0 0; width: .42cqw; translate: -50% 0;
  background: #fff; box-shadow: 0 0 .65cqw #fff;
}