html.borderlands {
  &:root {
    /* Variable Overrides */
    --color-palette-branding-normal: var(--borderlands-tertiary-blue) !important;
    --color-palette-branding-lucent: #260c5a;
    --app-styling-background: var(--lt-3);
    --app-styling-slate-level-1: var(--borderlands-white);
    --header--background: var(--borderlands-black);

    --text-colors-link-default: var(--borderlands-primary);
    --text-colors-link-hover: var(--borderlands-tertiary-blue);

    /* Cards */
    --card--title-color: var(--borderlands-tertiary-yellow);
    --card--subtitle-color: var(--borderlands-tertiary-blue);
    --card--content-color: var(--borderlands-white);

    /* App COC PIPs */
    --ui-bg-inverted: var(--borderlands-tertiary-yellow);
    --ui-border-accented: var(--borderlands-tertiary-blue);

    --input-buttons-primary-bg-default: var(--borderlands-white);
    --input-buttons-primary-text-default: var(--borderlands-black);
    --input-buttons-primary-bg-hover: var(--yellow);
    --input-buttons-primary-text-hover: var(--borderlands-black);

    --input-buttons-secondary-bg-default: transparent;
    --input-buttons-secondary-text-default: var(--borderlands-white);
    --input-buttons-secondary-bg-hover: var(--yellow);
    --input-buttons-secondary-text-hover: var(--borderlands-black);

    --input-buttons-primary-bg-disabled: rgb(12, 77, 162, .1);
    --input-buttons-primary-text-disabled: var(--lt-1);

    /* Brand Colours */

    --borderlands-primary: #f30018;
    --borderlands-black: #000000;
    --borderlands-white: #ffffff;
    --borderlands-tertiary-yellow: #fffc00;
    --borderlands-tertiary-blue: #05c2f2;

    /* Deluxe Colours **/
    --borderlands-deluxe-black: #000000;
    --borderlands-deluxe-yellow: #fffc00;
    --borderlands-deluxe-white: #ffffff;

    /* Super Deluxe Colours */
    --borderlands-super-deluxe-black: #000000;
    --borderlands-super-deluxe-gold: #936b2f;
    --borderlands-super-deluxe-white: #ffffff;

    /* remove */

    --lt-3: #F0F2F5;
    --lt-2: #373737;
    --lt-1: #222;
    --lt-0: #000;

    --nav-blue: #004099;
    --social-bar-bg-color: #1059A4;

    --blue-alt: #0056b3;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #f6b700;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    /* Fonts */
    --h1-font-family: Dharma Gothic Rounded, sans-serif;
    --primary-font-family: bebas-neue-pro, "Dharma Gothic Rounded", "Arial Black", "Helvetica", sans-serif;
    --nav-font: Dharma Gothic Rounded, sans-serif;

    /* Application / Modals */
    --color-palette-branding-normal: var(--borderlands-tertiary-blue);
    --color-palette-branding-lucent: var(--borderlands-white);

    --body_background-color: var(--borderlands-black);
    --body_background-image--desktop: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .15) 10%, rgba(0, 0, 0, .15) 90%, rgba(0, 0, 0, 1) 100%), url(/images/borderlands/borderlands4-black-logo-bg-desktop.png);
    --body_background-image--mobile: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .15) 10%, rgba(0, 0, 0, .15) 90%, rgba(0, 0, 0, 1) 100%), url(/assets/borderlands4-black-logo-bg-mobile.png);
    --body_background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .15) 10%, rgba(0, 0, 0, .15) 90%, rgba(0, 0, 0, 1) 100%), url(/assets/space_bg_desktop.jpg);

    & body {
      font-family: var(--primary-font-family);
      background-color: var(--body_background-color);
      background-image: var(--body_background-image--desktop, var(--body_background-image));
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% auto;
      letter-spacing: 0.5px; /* Improved letter spacing for all text */

      /* Mobile background optimization and typography improvements */
      @media (max-width: 768px) {
        background-attachment: scroll;
        background-size: cover;
        background-image: var(--body_background-image--mobile, var(--body_background-image--desktop, var(--body_background-image)));
        font-size: 28px; /* Very large base font size for mobile readability */
        letter-spacing: 0.75px; /* Increased letter spacing for mobile readability */
      }

      @media (max-width: 480px) {
        font-size: 26px; /* Extra large readable text on small screens */
        letter-spacing: 1px; /* Maximum letter spacing for small screens */
      }

      button:not(.nui) {
        font-family: Dharma Gothic Rounded, bebas-neue-pro, sans-serif;
        font-size: 36px;
        line-height: 40px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 7px 10px 3px;
        height: 42px !important;
        align-items: center;
        cursor: pointer;
        transition: .1s;
        border-radius: 0px;
        border: 0px solid var(--borderlands-primary);
        color: var(--borderlands-primary);
        background-color: var(--borderlands-black);
        margin-top: -3px;

        &.xl{
          font-size: 50px;
          line-height: 55px;
          padding: 10px 15px 5px;
          height: 60px !important;

          /* Mobile button sizing */
          @media (max-width: 768px) {
            font-size: 32px;
            line-height: 36px;
            padding: 8px 12px 4px;
            height: 48px !important;
          }

          @media (max-width: 480px) {
            font-size: 28px;
            line-height: 32px;
            padding: 6px 10px 3px;
            height: 42px !important;
          }
        }

        /* Mobile button responsive sizing */
        @media (max-width: 768px) {
          font-size: 28px;
          line-height: 32px;
          padding: 5px 8px 2px;
          height: 36px !important;
        }

        @media (max-width: 480px) {
          font-size: 24px;
          line-height: 28px;
          padding: 4px 6px 2px;
          height: 32px !important;
        }

        &:hover {
          border: 0px solid var(--borderlands-white);
          color: var(--borderlands-white);
        }

        &[color="secondary"]{
          border: 2px solid var(--borderlands-primary);
          &:hover {
            border: 2px solid var(--borderlands-white)
          }
        }

        &[color="tertiary"] {
          border: 2px solid var(--borderlands-black);
          background-color: var(--borderlands-black);
          color: var(--borderlands-white);

          &:hover {
            border: 2px solid var(--borderlands-black);
            background-color: var(--borderlands-white);
            color: var(--borderlands-black);
          }
        }

      }

      .bandai-namco-border {
        border: 0;
        border-bottom: 10px solid;
        border-image: url(/images/borderlands/WarchestDividersDesktopPrimary.png) 0 0 100%  / 100% 10px repeat;
      }

      .navigation:not(.user-menu) {
        font-family: var(--nav-font);

        & nav{
          flex-direction: row-reverse;
          & button {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            font-family: var(--nav-font);
            font-size: 30px;
            font-style: normal;
            font-weight: 400;
            line-height: 35px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #fff;
            text-decoration: none;
            height: 50px;
            border-radius: 0px;
            &:hover {
              background-color: var(--borderlands-primary);
            }

            /* Mobile navigation button sizing */
            @media (max-width: 768px) {
              font-size: 24px;
              line-height: 28px;
              height: 40px;
              padding: 0 8px;
            }

            @media (max-width: 480px) {
              font-size: 20px;
              line-height: 24px;
              height: 36px;
              padding: 0 6px;
            }
          }
        }
      }

      .user-menu {
        & .wrapper{
          border: 4px solid var(--borderlands-tertiary-blue);
          margin-top: -4px;
        }
        & .bar{
          & .tenure {
            & .tenure-stack {
              & .background { color: var(--borderlands-tertiary-blue) !important; }
              & .text { color: var(--borderlands-white) !important; }
            }
          }
          & .details {
            & .name { color: var(--borderlands-tertiary-blue) !important; }
          }
        }
        & .menu {
          & .details, & .footer{ background: var(--borderlands-tertiary-blue) !important;}
          & .footer {
            & button:not(.nui) {
                --_background: var(--input-buttons-secondary-bg-default);
                --_focus: var(--input-buttons-secondary-bg-default);
                --_color: var(--input-buttons-secondary-text-default);
              }
          }
        }
      }

      .title {
        inset-block-end: calc(30% + 5vh);
      }

      .banner-bg {
        -webkit-mask-image: linear-gradient(
          180deg,
          rgba(0, 0, 0, 1) calc(100% - 25vh),
          rgba(0, 0, 0, 0) 100%
        );
        mask-image: linear-gradient(
          180deg,
          rgba(0, 0, 0, 1) calc(100% - 25vh),
          rgba(0, 0, 0, 0) 100%
        );
        &::before {
          background: none;
        }
      }
    }

    /* FAQ Overrides */
    .faq-header {
      background-image: url("/images/borderlands/chain-bg.png") !important;
      background-size: cover !important;
      background-position: center !important;
      color: var(--borderlands-white) !important;
      font-family: Dharma Gothic Rounded, sans-serif;

      font-size: 36px;
      line-height: 40px;
      letter-spacing: 1px;
      text-transform: uppercase;
      & img {
        z-index: 2;
      }
      & h2{
        margin-top: -4px;
        z-index: 1;
        font-weight: 400;
      }
    }

    .faq-body {
      /* Mobile fixes for FAQ modal */
      @media (max-width: 768px) {
        height: auto !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        padding: 20px !important;

        /* Fix for child elements that force full height */
        & * {
          height: auto !important;
        }

        /* Ensure content is scrollable */
        & .content {
          height: auto !important;
          max-height: none !important;
          overflow: visible !important;
        }
      }

      & h4 {
        color: var(--borderlands-primary) !important;
        font-family: Dharma Gothic Rounded, sans-serif;
        letter-spacing: 1px;;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 400;

        /* Mobile responsive text sizing */
        @media (max-width: 768px) {
          font-size: 24px !important;
          line-height: 28px !important;
          margin-bottom: 16px !important;
        }

        @media (max-width: 480px) {
          font-size: 20px !important;
          line-height: 24px !important;
          margin-bottom: 12px !important;
        }
      }

      & p {
        /* Improve mobile readability for FAQ text */
        @media (max-width: 768px) {
          font-size: 18px !important;
          line-height: 24px !important;
          margin-bottom: 16px !important;
        }

        @media (max-width: 480px) {
          font-size: 16px !important;
          line-height: 22px !important;
          margin-bottom: 12px !important;
        }
      }

      & ul {
        & li {
          margin-bottom: 0px !important;

          /* Mobile responsive list items */
          @media (max-width: 768px) {
            font-size: 16px !important;
            line-height: 22px !important;
            margin-bottom: 8px !important;
          }

          @media (max-width: 480px) {
            font-size: 14px !important;
            line-height: 20px !important;
            margin-bottom: 6px !important;
          }
        }
        & li:last-child { margin-bottom: 10px !important; }
      }
    }

    /* Application Overrides */
    .app-header {
      background-image: url("/images/borderlands/chain-bg.png") !important;
      background-size: cover !important;
      background-position: center !important;
      color: var(--borderlands-white) !important;

      & img {
        z-index: 2;
      }

      & h2 {
        margin-top: -2px;
        z-index: 1;
        font-family: Dharma Gothic Rounded, sans-serif;
        font-weight: 400;
        font-size: 46px;
        line-height: 46px;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
    }
    .UForm {
      & label, & label span {
        font-family: var(--primary-font-family);
        color: var(--borderlands-white) !important;
        font-size: 22px;
        line-height: 24px;
        letter-spacing: 1px;

        /* Mobile form label sizing */
        @media (max-width: 768px) {
          font-size: 32px;
          line-height: 36px;
        }

        @media (max-width: 480px) {
          font-size: 30px;
          line-height: 34px;
        }
      }

      & .UFormHeading {
        & h2 {
          color: var(--borderlands-primary) !important;
          font-family: var(--primary-font-family);
          letter-spacing: normal;
          font-size: 36px;
        }
      }

      & .UCheckbox {
        margin: 0;
        & label {
          & span {
            color: var(--borderlands-white) !important;
          }
        }
      }
    }
  }
}

@font-face {
  font-family: 'Borderlands Kana';
  src: url('/fonts/borderlands/BorderlandsKana.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Borderlands Order';
  src: url('/fonts/borderlands/BorderlandsOrder.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Borderlands Ripper';
  src: url('/fonts/borderlands/BorderlandsRipper.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Borderlands Survival';
  src: url('/fonts/borderlands/BorderlandsSurvival.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Dharma Gothic M';
  src: url('/fonts/borderlands/DharmaGothicM_ExBold_R.woff2') format('woff2');
  font-weight: 800;
  /* Extra-Bold */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sofia Pro';
  src: url('/fonts/borderlands/Sofia-Pro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Dharma Gothic Rounded';
  src: url('/fonts/borderlands/Dharma-Gothic-Rounded.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Mobile-specific fixes for FAQ Modal */
@media (max-width: 768px) {
  /* Fix UModal mobile positioning and scrolling issues */
  .faq-header + .faq-body {
    /* Override any problematic Nuxt UI classes */
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    min-height: 50vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Ensure proper mobile scrolling */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* Target the UModal content specifically for mobile */
  [data-headlessui-state="open"] {
    /* Modal container fixes */
    & div[role="dialog"] {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: none !important;
      max-height: none !important;
      border-radius: 0 !important;

      /* FAQ specific modal */
      &:has(.faq-header) {
        display: flex !important;
        flex-direction: column !important;

        /* Header should stay at top */
        & .faq-header {
          flex-shrink: 0 !important;
          position: sticky !important;
          top: 0 !important;
          z-index: 10 !important;
        }

        /* Body should be scrollable */
        & .faq-body {
          flex: 1 !important;
          overflow-y: auto !important;
          overflow-x: hidden !important;
          height: auto !important;
          max-height: none !important;
          padding: 20px !important;

          /* Fix content within body */
          & .content {
            height: auto !important;
            overflow: visible !important;

            /* Remove any forced height constraints */
            & * {
              height: auto !important;
              min-height: unset !important;
            }
          }
        }

        /* Ensure close button is accessible */
        & button[aria-label*="close"],
        & button:has(.fa-xmark) {
          position: fixed !important;
          top: 16px !important;
          right: 16px !important;
          z-index: 20 !important;
          background: rgba(0, 0, 0, 0.8) !important;
          border-radius: 50% !important;
          width: 40px !important;
          height: 40px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
      }
    }
  }

  /* Alternative targeting for Nuxt UI modals */
  div[data-state="open"][role="dialog"] {
    &:has(.faq-header) {
      position: fixed !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: none !important;
      max-height: none !important;
      border-radius: 0 !important;
      display: flex !important;
      flex-direction: column !important;

      /* Header */
      & .faq-header {
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
      }

      /* Body */
      & .faq-body {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        max-height: none !important;
        padding: 20px !important;

        & .content {
          height: auto !important;
          overflow: visible !important;

          & * {
            height: auto !important;
            min-height: unset !important;
          }
        }
      }

      /* Close button */
      & button:has(.fa-xmark) {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 20 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
    }
  }

  /* Global mobile modal overrides for any modal with faq classes */
  div:has(.faq-header, .faq-body) {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 480px) {
  /* Extra mobile adjustments */
  [data-headlessui-state="open"] div[role="dialog"]:has(.faq-header) {
    & .faq-body {
      padding: 16px !important;
    }

    & button[aria-label*="close"],
    & button:has(.fa-xmark) {
      top: 12px !important;
      right: 12px !important;
      width: 36px !important;
      height: 36px !important;
    }
  }
}