/* One Regular face and proportional black relief for all Baller Clash text.
   Each screen keeps its font sizes, line heights, functional colors and layout. */
@font-face {
  font-family: "Lilita One";
  src: url('./LilitaOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Entry documents declare this layer first. Its first nested layer also wins
   important declarations made directly in ballerLilitaEverywhere by modals. */
@layer ballerLilitaEverywhere {
 @layer glyphFoundation {
  :root[data-baller-type] {
    --bc-display-font: "Lilita One", Arial, sans-serif;
    --display: var(--bc-display-font);
    --body: var(--bc-display-font);
    /* Reference at 56px: -0.5px tracking, 5.5px outline, 5px lower shadow. */
    --bc-type-tracking-ratio: -.008928571;
    --bc-type-outline-ratio: .098214286;
    --bc-type-depth-ratio: .089285714;
    --bc-type-ink: #000;
  }
  :root[data-baller-type],
  :root[data-baller-type] *,
  :root[data-baller-type] *::before,
  :root[data-baller-type] *::after,
  :root[data-baller-type] *::placeholder,
  :root[data-baller-type] *::marker,
  :root[data-baller-type] *::file-selector-button {
    font-family: "Lilita One", Arial, sans-serif!important;
    font-weight: 400!important;
    font-style: normal!important;
    font-synthesis: none!important;
  }
  :root[data-baller-type],
  :root[data-baller-type] :not(svg, svg *),
  :root[data-baller-type] :not(svg, svg *)::before,
  :root[data-baller-type] :not(svg, svg *)::after,
  :root[data-baller-type] :not(svg, svg *)::placeholder,
  :root[data-baller-type] :not(svg, svg *)::marker,
  :root[data-baller-type] :not(svg, svg *)::file-selector-button {
    letter-spacing: calc(1em * var(--bc-type-tracking-ratio))!important;
    -webkit-text-stroke: calc(1em * var(--bc-type-outline-ratio)) var(--bc-type-ink)!important;
    paint-order: stroke fill!important;
    text-shadow: 0 calc(1em * var(--bc-type-depth-ratio)) 0 var(--bc-type-ink)!important;
  }
  /* SVG pictures must not inherit typography paint order or letter effects. */
  :root[data-baller-type] svg {
    letter-spacing: normal!important;
    -webkit-text-stroke: 0!important;
    paint-order: normal!important;
    text-shadow: none!important;
  }
  /* Confirmation bubbles are white; their headings and messages use plain
     black ink. Keep the outlined white lettering on the colored CTA itself. */
  :root[data-baller-type].is-plaza-lobby :is(#ballerSkinPurchaseConfirm,#ballerPowerPurchaseConfirm,#ballerUpgradeConfirm)>:is(h3,p) {
    color:#000!important;
    -webkit-text-fill-color:#000!important;
    -webkit-text-stroke:0!important;
    text-shadow:none!important;
  }
 }
}