/* BMX Race Clash additions on top of Moto Clash's design system (app.css). */

/* ---------------------------------------------------------------- logo */
.bmx-logo { display: block; height: 70px; width: auto; max-width: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }
.bmx-logo.xs { height: 34px; }
.bmx-logo.sm { height: 60px; }
.bmx-logo.lg { height: 150px; max-width: 86vw; }
.appbar-brand { width: auto; padding: 0 6px; }
.brand { padding: 26px 24px 22px; }

/* ---------------------------------------------------------------- landing */
.land-hero.bmx { background: radial-gradient(ellipse at 72% 45%, #2a2f39 0%, #121419 55%, var(--bg) 80%); }
.land-hero.bmx::after { background: linear-gradient(90deg, #090b10 0%, rgba(9,11,16,.82) 38%, rgba(9,11,16,0) 70%), linear-gradient(0deg, var(--bg), transparent 30%); pointer-events: none; }
/* Hero photo (replaces the 3D rider; the old rules are kept commented to go back). */
.land-bg { background-position: 62% center; }
@media (max-width: 900px) { .land-bg { background-image: url('../assets/images/race_hero_m.webp'); background-position: 72% center; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .land-bg { animation: none; } }
/* .land-stage { position: absolute; inset: 0 0 0 34%; }
.land-stage .showroom-canvas { width: 100%; height: 100%; display: block; } */
.land-top .bmx-logo { margin-left: 4px; }

/* ---------------------------------------------------------------- showrooms */
.hero-stage .showroom-canvas, .rider-stage .showroom-canvas { width: 100%; height: 100%; display: block; }
.rider-setup { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.rider-preview { position: relative; height: min(70vh, 560px); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 40%, #2a2f39, #0d0f13 72%); }
.rider-stage { position: absolute; inset: 0; }
.showroom-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; letter-spacing: .04em; pointer-events: none; opacity: 1; transform: none; }
.showroom-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: showroom-spin .8s linear infinite; }
@keyframes showroom-spin { to { transform: rotate(360deg); } }
.rider-preview-tag { position: absolute; left: 16px; top: 16px; }
.swatch.custom { position: relative; overflow: hidden; background: conic-gradient(#ff3c45, #ffd400, #3ddc84, #00a3e0, #6a3cff, #ff3c45); color: #111; cursor: pointer; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; flex: 1; }
.rider-avatar { padding: 0; border-radius: 50%; overflow: hidden; border-width: 2px; border-color: var(--line2, var(--line)); }
.rider-avatar .avatar-img { width: 100% !important; height: 100% !important; }

/* ---------------------------------------------------------------- avatars (js/ui/avatars.js) */
.avatar-img { display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: #161a22; vertical-align: middle; color: var(--muted); }
.avatar-img svg, .avatar-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.avatar-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 0; border-radius: 14px; background: none; color: var(--muted); cursor: pointer; transition: transform .12s ease-out; }
.avatar-opt .avatar-img { box-shadow: 0 0 0 2px var(--line); transition: box-shadow .12s ease-out; }
.avatar-opt:hover .avatar-img { box-shadow: 0 0 0 2px var(--muted); }
.avatar-opt.on .avatar-img { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent); }
.avatar-opt:active { transform: scale(.95); }
.avatar-opt.upload .avatar-img { background: var(--panel2); box-shadow: inset 0 0 0 2px var(--line); }
.avatar-opt small { font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.avatar-row { display: flex; align-items: center; gap: 16px; }
.avatar-row > .avatar-img { box-shadow: 0 0 0 2px var(--line); }

/* ---------------------------------------------------------------- paddock */
.bmx-rider-card .meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin-top: 12px; }
.garage-hero .meters { display: grid; gap: 8px; }
.section-h { font-family: var(--display); font-size: 22px; margin: 26px 0 12px; letter-spacing: .3px; }
.workshop-bar.busy { --c: var(--gold); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; color: var(--text); }
.workshop-bar.busy .build-bar { margin-top: 6px; }
.workshop-bar:not(.busy) { margin: 10px 0 14px; }

/* ---------------------------------------------------------------- circuits */
.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.track-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
.track-card-map { display: grid; place-items: center; background: rgba(255,255,255,.03); border-radius: 12px; padding: 10px; }
.track-card-map .trackmap { width: 100%; height: 150px; }
.track-card-map .trackmap svg { width: 100%; height: 100%; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip.static { height: 26px; font-size: 11.5px; cursor: default; }
.circuit-mini .trackmap svg, .hero-track .trackmap svg, .event-card .trackmap svg { width: 100%; height: 100%; }
.event-card .trackmap { height: 150px; margin: 10px 0; }

/* ---------------------------------------------------------------- career */
.season-dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 6px; margin-top: 12px; }
.season-dots i { height: 34px; border-radius: 8px; background: rgba(255,255,255,.05); display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 13px; color: var(--muted); }
.season-dots i.done { background: rgba(120,170,237,.18); color: var(--blue); }
.season-dots i.podium { background: rgba(233,188,102,.2); color: var(--gold); }
.season-dots i.win { background: var(--gold); color: #111; }
.setting-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }

/* ---------------------------------------------------------------- shop & rewards */
.credit-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 4px; }
.credit-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
/* Pase Pro: highlighted card, topbar chip and the paddock banner. */
.premium-card { border-radius: 14px; }
.surface:has(> .premium-card) { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); background: radial-gradient(circle at 15% 0%, rgba(233,188,102,.16), transparent 55%), var(--panel); }
.premium-card .premium-badge { --c: var(--gold); }
.premium-chip.off { opacity: .85; background: transparent; }
.premium-chip.off:hover { opacity: 1; border-color: var(--gold); }
.premium-badge.sm { width: 40px; height: 40px; border-radius: 11px; }
.premium-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gold) 50%, var(--line)); background: linear-gradient(90deg, rgba(233,188,102,.16), rgba(233,188,102,.03) 70%), var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.premium-banner > div { flex: 1; min-width: 0; }
.premium-banner:hover { border-color: var(--gold); }
.premium-banner .btn { pointer-events: none; flex: none; }
.chest-slot.empty { opacity: .7; text-align: center; padding: 12px; }

@media (max-width: 900px) {
  .rider-setup { grid-template-columns: 1fr; }
  .rider-preview { height: 46vh; }
  .track-grid { grid-template-columns: 1fr; }
  /* .land-stage { inset: 30% 0 0 0; opacity: .55; } */
}
@media (max-width: 520px) {
  .track-card { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- livery studio */
.design-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.design-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 11.5px; transition: .15s; }
.design-card:hover { border-color: var(--line2); color: var(--text); }
.design-card.on { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25); }
.design-card.locked .design-swatch { filter: saturate(.5) brightness(.65); }
.design-swatch { width: 100%; height: 34px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12); display: block; }
.design-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.design-lock { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; background: rgba(0,0,0,.7); color: var(--gold); font-size: 10.5px; font-weight: 700; }
.pack-list { display: grid; gap: 8px; margin: 12px 0; }
.pack-list .design-swatch { width: 54px; height: 26px; flex: none; }
.pack-card { display: flex; flex-direction: column; gap: 8px; }
.pack-card .pack-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* ---------------------------------------------------------------- livery arrows (rider page) */
.rider-preview .lv-pack { top: 9%; }
.rider-preview .lv-helmet { top: 27%; } .rider-preview .lv-jersey { top: 42%; } .rider-preview .lv-pants { top: 57%; } .rider-preview .lv-bike { top: 72%; }
.rider-preview .rider-preview-tag { top: auto; bottom: 16px; }
.rider-preview:has(.lv-locked:not([hidden])) .rider-preview-tag { display: none; }
.color-custom { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel2); cursor: pointer; }
.color-custom:hover { border-color: var(--accent); }
.color-custom .dot { width: 30px; height: 30px; border-radius: 50%; flex: none; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.color-custom > span:nth-child(2) { flex: 1; display: grid; gap: 2px; line-height: 1.1; }
.color-custom .color-hex { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; }
.color-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
@media (max-width: 900px) { .rider-preview { height: max(46vh, 440px); } }

/* ---------------------------------------------------------------- livery arrows (garage hero) */
.garage-hero.livery { height: 430px; }
.garage-hero.livery .hero-stage { left: 40%; }
.garage-hero.livery .lv-pack { top: 9%; }
.garage-hero.livery .lv-helmet { top: 27%; } .garage-hero.livery .lv-jersey { top: 42%; } .garage-hero.livery .lv-pants { top: 57%; } .garage-hero.livery .lv-bike { top: 72%; }
@media (max-width: 649px) {
  /* The copy on top, the bike and its arrows underneath in their own box. */
  .garage-hero.livery { height: auto; display: flex; flex-direction: column; }
  .garage-hero.livery .copy { position: relative; inset: auto; padding: 16px 18px 0; }
  .garage-hero.livery .copy h2 { font-size: 26px; margin: 8px 0 4px; }
  .garage-hero.livery .bikelevel b { font-size: 34px; }
  .garage-hero.livery .hero-stage { position: relative; inset: auto; height: 400px; }
  .garage-hero.livery .lv-pack { top: 30px; }
  .garage-hero.livery .lv-helmet { top: 96px; } .garage-hero.livery .lv-jersey { top: 152px; } .garage-hero.livery .lv-pants { top: 208px; } .garage-hero.livery .lv-bike { top: 264px; }
}

/* Language picker (js/ui/language.js) */
.lang-dialog { text-align: center; }
.lang-dialog .dialog-actions { justify-content: center; }
.lang-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lang-option { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 10px; border-radius: 14px; background: var(--panel2); border: 2px solid var(--line); color: var(--muted); font-size: 18px; transition: .15s; cursor: pointer; }
.lang-option:hover { color: var(--text); border-color: var(--line2); }
.lang-option.on { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2)); }
.lang-option .flag { border-radius: 4px; overflow: hidden; }
.lang-go { min-width: 200px; }
.lang-chips .flag { border-radius: 2px; overflow: hidden; }
.hero-bike-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.hero-bikes { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-bikes .chip { height: 30px; padding: 0 10px; font-size: 12px; background: rgba(13,15,19,.6); backdrop-filter: blur(4px); }
.hero-bikes .chip.on { background: color-mix(in srgb, var(--accent) 28%, rgba(13,15,19,.75)); color: var(--text); border-color: var(--accent); }
.hero-bike-note { color: #cbced2; text-shadow: 0 1px 4px #000; }

/* Circuit picked from the paddock (openTrackModal in js/ui/pages/circuits.js). */
.track-modal .track-card-map .trackmap { height: 140px; }
@media (max-width: 560px) {
  /* Stacked, the main way to race it on top and Cerrar last. */
  .track-modal .dialog-actions { flex-direction: column-reverse; }
  .track-modal .dialog-actions > * { width: 100%; justify-content: center; }
}