/* Portrait loading artwork is selected by CSS before any game module executes. */
@media (orientation:portrait) {
  html:not([data-slot-orientation]):has(#preloader:not([hidden])) .artboard {
    width:min(calc(100vw - var(--slot-safe-left) - var(--slot-safe-right)),calc((100dvh - var(--slot-safe-top) - var(--slot-safe-bottom)) * 9 / 16));
    height:auto;aspect-ratio:9/16;transform:translate(-50%,-50%);visibility:visible;pointer-events:auto;
  }
  html:has(#preloader:not([hidden])) .orientation-hint { display:none!important; }
  #preloader {
    --loader-unit:min(1vw,.5625dvh);
    padding:8%;gap:0;text-align:center;
    background:linear-gradient(180deg,#1c16282b 0%,#21142144 40%,#100908c9 77%,#100709ed 100%),url('../assets/art/mobile/portrait-frontier-cartoon-v2.webp') center / cover no-repeat,#261b22;
  }
  html[data-slot-orientation="portrait"] #preloader { --loader-unit:10px; }
  #preloader .loader-mark {
    order:0;width:48%;height:auto;aspect-ratio:1;margin:0 0 4%;border:0;border-radius:0;color:transparent;font-size:0;
    background:url('../assets/art/mobile/portrait-buffalo-charging-v2.webp') center / contain no-repeat;box-shadow:none;filter:drop-shadow(0 calc(var(--loader-unit) * 1.2) calc(var(--loader-unit) * 2) #0009);
  }
  #preloader::after {
    content:'BADASS BUFFALO';order:1;display:block;max-width:90%;margin-bottom:7%;color:#ffda75;
    font:900 calc(var(--loader-unit) * 10)/.95 Impact,Haettenschweiler,serif;letter-spacing:.035em;
    text-shadow:0 calc(var(--loader-unit) * .65) 0 #733c17,0 calc(var(--loader-unit) * 1.2) calc(var(--loader-unit) * 2) #000b;
    -webkit-text-stroke:calc(var(--loader-unit) * .2) #633110;
  }
  #preloader > strong { order:2;margin:0 0 5%;font-size:calc(var(--loader-unit) * 4);line-height:1.4;color:#fff1c5;text-shadow:0 2px 3px #000; }
  #preloader .loader-track { order:3;width:100%;height:calc(var(--loader-unit) * 4.2);border-width:calc(var(--loader-unit) * .5);border-radius:calc(var(--loader-unit) * 3);background:#170d12;box-shadow:0 calc(var(--loader-unit) * .5) calc(var(--loader-unit) * 2) #0008; }
  #preloaderText { order:4;margin-top:4%;font-size:calc(var(--loader-unit) * 4.5);font-weight:800;font-variant-numeric:tabular-nums;color:#fff0ba; }
}
@media (orientation:portrait) and (prefers-reduced-motion:reduce) { #preloader,#preloaderBar { transition:none!important; } }