/* Baller Clash's shared text policy, loaded by both the app and its arena.
 * New screens inherit the same black ink and vivid command materials.
 * Important declarations in this layer also supersede older no-outline rules.
 */
@layer ballerTypography {
  :root[data-baller-type] {
    --baller-ink: #000;
    --baller-gold: #ffb51b;
    --baller-blue: #087fff;
    --baller-green: #1ee72c;
    --baller-red: #ff354c;
  }

  @media not (forced-colors: active) {
    :root[data-baller-type] :where(*) {
      -webkit-text-stroke: clamp(1px, .09em, 2px) var(--baller-ink) !important;
      -webkit-text-fill-color: currentColor !important;
      paint-order: stroke fill !important;
      text-shadow: 0 .065em 0 var(--baller-ink) !important;
    }

    :root[data-baller-type] :where(h1,h2,h3,h4,h5,h6,button,[role=button]),
    :root[data-baller-type] :where(button,[role=button]) :where(span,strong,b,em) {
      -webkit-text-stroke-width: clamp(1.5px, .12em, 5px) !important;
      text-shadow: 0 .075em 0 var(--baller-ink) !important;
    }

    :root[data-baller-type] :where(small,time,option,input,textarea,select) {
      -webkit-text-stroke-width: clamp(1px, .075em, 1.5px) !important;
    }

    :root[data-baller-type] .bc-trophy-scene > header > h2,
    :root[data-baller-type] .bc-road-district {
      -webkit-text-stroke-width: clamp(3px, calc(7 * var(--header-u)), 8px) !important;
    }

    :root[data-baller-type] :where(button,[role=button]),
    :root[data-baller-type] :where(button,[role=button]) :where(span,strong,b,small,em,i):not(.bc-fit-name) {
      color: #fff !important;
    }

    :root[data-baller-type] :where(input,textarea)::placeholder {
      color: #b8f0ff !important;
      opacity: 1 !important;
      -webkit-text-fill-color: currentColor !important;
      -webkit-text-stroke: 1px var(--baller-ink) !important;
      paint-order: stroke fill !important;
      text-shadow: 0 1px var(--baller-ink) !important;
    }

    /* These are image/3D surfaces, rather than text. */
    :root[data-baller-type] :where(svg,svg *,img,canvas,video,iframe) {
      -webkit-text-stroke: 0 !important;
      -webkit-text-fill-color: initial !important;
      paint-order: normal !important;
      text-shadow: none !important;
    }
  }

  :root[data-baller-type] :where(.online-app,.og-modal) {
    --game-text: #fff !important;
    --game-secondary: #c6f5ff !important;
    --control-copy: #fff !important;
    --control-muted: #e7faff !important;
    --control-gold-face: var(--baller-gold-material) !important;
    --control-gold-edge: #fff382 !important;
    --control-gold-foot: #b96b06 !important;
    --control-blue-face: var(--baller-blue-material) !important;
    --control-blue-edge: #6adeff !important;
    --control-blue-foot: #073eaa !important;
    --control-green-face: var(--baller-green-material) !important;
    --control-green-edge: #b5ff7c !important;
    --control-green-foot: #0b8f23 !important;
    --control-danger-face: var(--baller-red-material) !important;
    --control-danger-edge: #ff9ca8 !important;
    --control-danger-foot: #a31429 !important;
  }

  :root[data-baller-type] .og-button {
    --control-label: #fff !important;
    --control-label-shadow: #000 !important;
  }
  :root[data-baller-type] .og-button-gold,
  :root[data-baller-type] #dossierChoose {
    background: var(--baller-gold-material) !important;
  }
  :root[data-baller-type] .og-button-blue,
  :root[data-baller-type] :where(#dossierReadStory,#dossierTry) {
    background: var(--baller-blue-material) !important;
  }
  :root[data-baller-type] .og-button-green,
  :root[data-baller-type] :where(.evolution-upgrade:not(.is-max),#confirmBallerUpgrade,.power-equip) {
    background: var(--baller-green-material) !important;
  }
  :root[data-baller-type] .og-button-danger,
  :root[data-baller-type] .btn.danger {
    background: var(--baller-red-material) !important;
  }
  /* Menu polish must not reskin controls inside the playing mode. */
  :root[data-baller-type] :is(#pause,#exitPrompt,#end,#controlsEditor) .btn.danger {
    background: var(--baller-red) !important;
  }

  :root[data-baller-type] :where(button:disabled,button[aria-disabled=true]) {
    opacity: 1 !important;
    filter: none !important;
  }

  :root[data-baller-type] :where(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,option) {
    color: #fff !important;
    background-color: #0853ad !important;
    caret-color: #fff !important;
  }
  /* Parent menu fields only. The iframe's roster and match controls retain
     their existing rules and transparent catalogue controls below. */
  :root[data-baller-type] .online-app :where(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,option) {
    background-color: #174b45 !important;
  }
  @media (forced-colors: active) {
    :root[data-baller-type] .online-app :where(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,option) {
      background-color: Field !important;
      color: FieldText !important;
    }
  }
  :root[data-baller-type] #ballerPicker :is(#rosterSearch,#rosterSort) {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    max-width: 100%;
    margin: 0;
    padding-block: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
  }
  :root[data-baller-type] #ballerPicker #rosterSort option {
    background: #183d3a !important;
  }

  :root[data-baller-type] :where(.og-fineprint,.bc-cosmetic-hint,.og-auth-apple-hint,.og-auth-legal,.og-notification-state),
  :root[data-baller-type] :where(.bc-master-avatar,.bc-master-win-strip) > small {
    color: #e7faff !important;
  }
  :root[data-baller-type] .bc-road-object-threshold {
    color: #fff !important;
  }
  :root[data-baller-type] #dossierStats li div > span,
  :root[data-baller-type] #dossierSkills .is-equipped small {
    color: #76ff43 !important;
  }
}