/* Shared Baller Clash materials: lit faces, dark undersides, short shadows.
 * Red is the interface's progression accent; skin scenes keep their own art.
 */
@layer ballerMaterials {
  :root[data-baller-type] {
    --baller-progression-light: #ff9a7b;
    --baller-progression: #ff393d;
    --baller-progression-dark: #970d2b;
    --baller-gold-material: linear-gradient(#fff279 0%, #ffd639 19%, #ffbb15 78%, #e99608 100%);
    --baller-blue-material: linear-gradient(#5cdbff 0%, #158fff 17%, #0870ef 77%, #0949ba 100%);
    --baller-green-material: linear-gradient(#b9ff74 0%, #4cf32b 18%, #18d91f 76%, #079f20 100%);
    --baller-red-material: linear-gradient(#ff9a7b 0%, #ff4a43 20%, #ee233d 77%, #ad1030 100%);
  }

  :root[data-baller-type] :is(.og-button,#dossierChoose,#dossierReadStory,#dossierTry,.evolution-upgrade:not(.is-max),#confirmBallerUpgrade,.power-equip,#play) {
    --material-light: #ffffff9c;
    --material-shade: #0000002e;
    border: 3px solid #020610 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 3px 0 var(--material-light), inset 0 -5px 0 var(--material-shade), 0 5px 0 #020711, 0 8px 6px #01061166 !important;
    transition: translate .1s ease, box-shadow .1s ease;
  }
  :root[data-baller-type] :is(.og-button,#dossierChoose,#dossierReadStory,#dossierTry,.evolution-upgrade,#confirmBallerUpgrade,.power-equip,#play):not(:disabled):active {
    translate: 0 3px;
    box-shadow: inset 0 2px 0 var(--material-light), inset 0 -2px 0 var(--material-shade), 0 2px 0 #020711 !important;
  }
  :root[data-baller-type] #play {
    background: var(--baller-gold-material) !important;
  }

  :root[data-baller-type] .online-app.is-baller-clash {
    --bc-menu-art: url('/assets/baller/stadium-ui-v2/menu-football-blue.webp') !important;
    --bc-menu-canvas-color: #0754d4 !important;
  }
  :root[data-baller-type] #arenaInfo {
    --baller-menu-background: #0754d4 url('/assets/baller/stadium-ui-v2/menu-football-blue.webp') center / cover no-repeat !important;
  }
  :root[data-baller-type] .bc-settings-reference {
    background: transparent !important;
  }

  :root[data-baller-type] #dossierLevel {
    background: url('/assets/baller/red-ui-v1/power-level-red.png') center / contain no-repeat !important;
    filter: drop-shadow(0 3px 0 #01040b) !important;
  }
  :root[data-baller-type] .showcase-training-title > small {
    color: var(--baller-progression-light) !important;
  }
  :root[data-baller-type] #dossierLevelMeter > span {
    background: #26334b !important;
    box-shadow: inset 0 2px #536078, inset 0 -2px #10172a !important;
  }
  :root[data-baller-type] #dossierLevelMeter > span.is-filled {
    background: var(--baller-red-material) !important;
    box-shadow: inset 0 2px #ffb39e, inset 0 -2px #a5102b !important;
  }

  :root[data-baller-type] .dossier-power-card {
    background: linear-gradient(#2488ed, #155ecb 45%, #103e93) !important;
    border-color: #020711 !important;
    box-shadow: inset 0 0 0 2px #66c9ff, inset 0 5px 0 #a4e2ff, 0 6px 0 #020711, 0 9px 7px #01061166 !important;
  }
  :root[data-baller-type] #dossierStats > li,
  :root[data-baller-type] .dossier-current-power {
    background: #071629 !important;
    box-shadow: inset 0 1px #366996, inset 0 -2px #020811 !important;
  }
  :root[data-baller-type] #dossierStats > li > img {
    box-shadow: inset 0 2px #ffffff7a, inset 0 -3px #00000035, 0 2px #01040b !important;
  }
  :root[data-baller-type] .dossier-power-medallion,
  :root[data-baller-type] .ability-slot {
    filter: drop-shadow(0 4px 1px #010611b3);
  }

  :root[data-baller-type] .showcase-name::before {
    background: var(--baller-gold-material) !important;
    box-shadow: inset 0 3px #fff6b0, inset 0 -5px #bb6a08, 0 6px #020711 !important;
  }
  :root[data-baller-type] .dossier-mastery {
    background: linear-gradient(#ba1c3b, #721126) !important;
    border-color: #040812 !important;
    box-shadow: inset 0 2px #ff6e78, inset 0 -3px #480b1a, 0 4px #020711 !important;
  }
  :root[data-baller-type] :is(#dossierMasteryProgress,.bc-mastery-current progress) {
    accent-color: var(--baller-progression) !important;
  }
  :root[data-baller-type] #dossierMasteryProgress::-webkit-progress-bar {
    background: #390d1b;
  }
  :root[data-baller-type] #dossierMasteryProgress::-webkit-progress-value {
    background: var(--baller-red-material);
  }
  :root[data-baller-type] #dossierMasteryProgress::-moz-progress-bar {
    background: var(--baller-red-material);
  }

  :root[data-baller-type] .bc-skin-offer {
    background: linear-gradient(#84fff1 0%, #1ab4ff 74%, #ff6460 74%, #df1833 100%) !important;
    box-shadow: inset 0 3px #d9fffa, inset 0 -4px #8c0b24, 0 6px #020711, 0 9px 6px #01061166 !important;
  }
  :root[data-baller-type] .bc-shop .og-shop-pass-poster {
    background: radial-gradient(ellipse at 28% 43%, #fff0a8 0 18%, #a5e9c455 46%, transparent 68%), linear-gradient(145deg, #387e65, #125d4e 63%, #073829) !important;
    box-shadow: inset 0 3px #fff6b0, inset 0 -5px #7e0d24, 0 6px #020711, 0 9px 6px #01061166 !important;
  }
  :root[data-baller-type] .bc-daily-screen.og-modal {
    background: linear-gradient(115deg, #176b52, #0b5141 54%, #073829) !important;
  }

  /* Menu actions only: translucent material, opaque text and artwork. */
  :root[data-baller-type] #dossierChoose {
    background: linear-gradient(#fff279cc,#ffbb15cc) !important;
  }
  :root[data-baller-type] :is(#dossierTry,#dossierReadStory) {background:linear-gradient(#5cdbffcc,#0870efcc)!important;}
  :root[data-baller-type] :is(.evolution-upgrade:not(.is-max),#confirmBallerUpgrade,.power-equip) {background:linear-gradient(#b9ff74cc,#18d91fcc)!important;}

  /* Keep scenery free around the hero; give edge controls a tangible slab. */
  :root[data-baller-type] .bc-lobby-ui :is(.bc-lobby-left,.bc-lobby-right) .bc-shortcut::before {
    border: 2px solid #020711 !important;
    border-radius: 4px !important;
    background: linear-gradient(#68758d, #3e4b65 22%, #29364d 86%, #182237) !important;
    box-shadow: inset 0 2px #c0d2e6, inset 0 -3px #101a2d, 0 4px #020711, 0 6px 4px #0005 !important;
  }
  :root[data-baller-type] .bc-lobby-ui .bc-lobby-bottom .bc-lobby-pass {
    background: linear-gradient(#c83c48, #9b2034 26%, #681329) !important;
    border-color: #020711 !important;
    box-shadow: inset 0 2px #ffada2, inset 0 -4px #400b1c, 0 4px #020711 !important;
  }
  :root[data-baller-type] .bc-lobby-drawer {
    background: #0a152b !important;
    box-shadow: -5px 0 #020711 !important;
  }
  :root[data-baller-type] :is(.bc-page-corner,#closeBallers,#rosterHome,#dossierWardrobe,#dossierFavorite,.picker-header .close) {
    border-color: #020711 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 2px #c6def68c, inset 0 -4px #0a112c99, 0 4px #020711 !important;
  }

  /* The original blue football canvas leaves the cards and their state easy to read. */
  :root[data-baller-type] #ballerPicker {
    --baller-menu-background: #0754d4 url('/assets/baller/stadium-ui-v2/menu-football-blue.webp') center / cover no-repeat;
    background: #0754d4 !important;
  }
  :root[data-baller-type] #ballerPicker .roster-shell:not(:has(#ballerDossier:not([hidden]))) {
    background: var(--baller-menu-background) !important;
  }
  :root[data-baller-type] #ballerPicker .roster-shell:has(#ballerDossier:not([hidden])) {
    background: #0a1644 var(--dossier-background) center / cover no-repeat !important;
  }
  :root[data-baller-type] .roster-header { background: #0a152be6 !important; }
  :root[data-baller-type] .roster-heading {
    background: #07162c !important;
    border: 2px solid #030711 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 2px #496b8d, 0 3px #020711 !important;
  }
  :root[data-baller-type] :is(.roster-tools>button,.roster-filters .btn) {
    background: linear-gradient(#4b6685, #263e5b) !important;
    border: 2px solid #020711 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 2px #92aec5, inset 0 -3px #14283e, 0 3px #020711 !important;
  }
  :root[data-baller-type] #ballerPicker :is(.roster-sort,.roster-search) {
    height: 44px;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 5px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
  }
  :root[data-baller-type] #ballerPicker .roster-tools {
    height: 44px;
    flex: 0 1 auto;
  }
  :root[data-baller-type] #ballerPicker .roster-sort > span { display: none; }
  :root[data-baller-type] #ballerPicker .roster-search {
    border: 0 !important;
    box-shadow: inset 0 -2px #69d8ff !important;
  }
  :root[data-baller-type] #ballerPicker .roster-search > span {
    font-size: 26px;
    flex: none;
    transform: none;
  }
  :root[data-baller-type] #ballerPicker .roster-tools > button {
    height: 40px;
    min-height: 40px;
    flex: none;
  }
  :root[data-baller-type] :is(.roster-tools>button,.roster-filters .btn)[aria-pressed=true] {
    background: var(--baller-gold-material) !important;
    box-shadow: inset 0 2px #fff9ba, inset 0 -3px #b86b06, 0 3px #020711 !important;
    border-color: #020711 !important;
  }
  :root[data-baller-type] #pick .card {
    background: #073b96 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 0 0 2px #69d8ff, 0 5px #020711, 0 8px 5px #0005 !important;
  }
  :root[data-baller-type] .roster-card-open {
    border-radius: 3px !important;
    background: #087fe8 !important;
  }
  :root[data-baller-type] .roster-portrait {
    border-radius: 3px 0 0 0 !important;
    background: radial-gradient(ellipse at 40% 35%, #a3eeff, #138eff 70%) !important;
  }
  :root[data-baller-type] .card[data-owned=false] .roster-portrait {
    filter: grayscale(1) brightness(.7) !important;
  }
  :root[data-baller-type] .card[data-owned=false]::after {
    content: '';
    position: absolute;
    z-index: 4;
    top: 5px;
    left: 5px;
    width: clamp(16px,2vw,25px);
    height: clamp(19px,2.4vw,30px);
    background: url('/assets/baller/ui-established-v1/lock.webp') center/contain no-repeat;
    pointer-events: none;
  }
  :root[data-baller-type] .roster-mastery {
    background: var(--baller-red-material) !important;
    border-radius: 4px !important;
  }
  :root[data-baller-type] .roster-card-level {
    background: url('/assets/baller/red-ui-v1/power-level-red.png') center / contain no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  :root[data-baller-type] .roster-evolution { border-radius: 0 3px 3px 0 !important; }

  :root[data-baller-type] :is(#ballerAbilities,#ballerUpgradeDialog,#ballerStory) {
    border: 3px solid #020711 !important;
    box-shadow: inset 0 0 0 2px #63c9ff, 0 6px #020711, 0 12px 25px #0008 !important;
  }
  :root[data-baller-type] :is(#ballerAbilities,#ballerUpgradeDialog,#ballerStory)>header {
    background: linear-gradient(#76d4ff, #238ff2 18%, #1269d5) !important;
    border-bottom: 3px solid #082c63 !important;
    box-shadow: inset 0 2px #c2edff !important;
  }
  :root[data-baller-type] .ability-panel {
    border: 2px solid #071731 !important;
    background: linear-gradient(#168ef0, #0878de) !important;
    box-shadow: inset 0 0 0 2px #92dfff, inset 0 4px #c4eeff80, 0 4px #082c63 !important;
  }
  :root[data-baller-type] .ability-details>nav>button[aria-pressed=true] {
    background: #1c86db !important;
    box-shadow: inset 0 2px #90e2ff !important;
    border-bottom-color: #ffbf31 !important;
  }

  @media (max-height: 360px) {
    :root[data-baller-type] :is(.og-button,#dossierChoose,#dossierReadStory,#dossierTry,.evolution-upgrade:not(.is-max),#confirmBallerUpgrade,.power-equip,#play) {
      box-shadow: inset 0 2px 0 var(--material-light), inset 0 -3px 0 var(--material-shade), 0 3px 0 #020711 !important;
    }
    :root[data-baller-type] .dossier-power-card {
      box-shadow: inset 0 0 0 1px #66c9ff, 0 3px #020711 !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :root[data-baller-type] :is(.og-button,#dossierChoose,#dossierReadStory,#dossierTry,.evolution-upgrade,#confirmBallerUpgrade,.power-equip,#play) {
      transition: none;
    }
  }
}