/**
 *  filename: assets/css/d2r.scss
 *  description: Main styles entry point for Diablo II: Resurrected
 **/
/**
 *  filename: assets/css/index.scss
 *  description: Styles used accross all evergreen pages
 **/
/* Global Breakpoints */
@import url("./breakpoints/breakpoints.css");
/* Global Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
/* Global Attributes */
@import url("./breakpoints/breakpoints.attribute.css");
@import url("./aspect-ratio/aspect-ratio.attribute.css");
@import url("../attributes/blz-device/blz-device.css");
@import url("../attributes/blz-tooltip/blz-tooltip.css");
/* Global Classes */
@import url("./utilities/blz-text/blz-text.css");
@import url("./utilities/blz-list/blz-list.css");
@import url("./utilities/blz-table/blz-table.css");
@import url("./input/blz-dropdown.css");
@import url("./input/blz-input.css");
@import url("./input/blz-checkbox.css");
@import url("./input/blz-radio-button.css");
@import url("https://assets.blz-contentstack.com/v3/assets/blte73fa86c52047717/blt3de15bbfd6c3f3c5/5f9ae8766f61200bd103dbfe/navbar.css");
html {
  scroll-behavior: smooth;
}

@media (min-width: 720px) {
  html:root {
    /**
    * @tokens Font Size
    * @presenter FontSize
    */
    --font-size-100: var(--font-size-100-sm);
    --font-size-200: var(--font-size-200-sm);
    --font-size-300: var(--font-size-300-sm);
    --font-size-400: var(--font-size-400-sm);
    --font-size-500: var(--font-size-500-sm);
    --font-size-600: var(--font-size-600-sm);
    --font-size-700: var(--font-size-700-sm);
    --font-size-800: var(--font-size-800-sm);
    --font-size-900: var(--font-size-900-sm);
    /**
    * @tokens Spacing
    * @presenter Spacing
    */
    --resize-250: var(--resize-250-sm);
    --resize-300: var(--resize-300-sm);
    --resize-400: var(--resize-400-sm);
    --resize-500: var(--resize-500-sm);
    --resize-600: var(--resize-600-sm);
    --resize-700: var(--resize-700-sm);
    --resize-800: var(--resize-800-sm);
    --resize-900: var(--resize-900-sm);
    --resize-1000: var(--resize-1000-sm);
    --row-gap-spacious: var(--row-gap-spacious-sm);
    --col-gap-spacious: var(--col-gap-spacious-sm);
    --section-padding-vertical: var(--section-padding-vertical-sm);
    --section-padding-horizontal: var(--section-padding-horizontal-sm);
  }
}
@media (min-width: 960px) {
  html:root {
    /**
    * @tokens Spacing
    * @presenter Spacing
    */
    --row-gap-tight: var(--row-gap-tight-md);
    --col-gap-tight: var(--col-gap-tight-md);
    --row-gap-comfy: var(--row-gap-comfy-md);
    --col-gap-comfy: var(--col-gap-comfy-md);
    --row-gap-loose: var(--row-gap-loose-md);
    --col-gap-loose: var(--col-gap-loose-md);
    --row-gap-spacious: var(--row-gap-spacious-md);
    --col-gap-spacious: var(--col-gap-spacious-md);
    --section-padding-vertical: var(--section-padding-vertical-md);
    --section-padding-horizontal: var(--section-padding-horizontal-md);
    --nav-height: var(--nav-height-md);
  }
}
@media (min-width: 1200px) {
  html:root {
    /**
    * @tokens Spacing
    * @presenter Spacing
    */
    --row-gap-spacious: var(--row-gap-spacious-lg);
    --col-gap-spacious: var(--col-gap-spacious-lg);
  }
}
:root {
  /**
    * @tokens Scale
    * @presenter Spacing
    */
  --font-default-scale: 1;
  --font-accent-scale: 1;
  /**
    * @tokens Font Family
    * @presenter FontFamily
    */
  --font-default: roboto;
  --font-accent: montserrat;
  --font-fallback: sans-serif;
  /**
    * @tokens Spacing
    * @presenter Spacing
    */
  --content-width-slim: 960px;
  --content-width-narrow: 1200px;
  --content-width-default: 1400px;
  --content-width-wide: 1600px;
  --size-025: 2px;
  --size-050: 4px;
  --size-075: 6px;
  --size-100: 8px;
  --size-150: 12px;
  --size-200: 16px;
  --size-250: 20px;
  --size-300: 24px;
  --size-350: 28px;
  --size-400: 32px;
  --size-500: 40px;
  --size-600: 48px;
  --size-700: 56px;
  --size-800: 64px;
  --size-900: 72px;
  --size-1000: 80px;
  --size-1100: 88px;
  --size-1150: 92px;
  --resize-025: 2px;
  --resize-050: 4px;
  --resize-075: 6px;
  --resize-100: 8px;
  --resize-150: 12px;
  --resize-200: 16px;
  --resize-250: 16px;
  --resize-300: 16px;
  --resize-400: 24px;
  --resize-500: 32px;
  --resize-600: 32px;
  --resize-700: 40px;
  --resize-800: 40px;
  --resize-900: 48px;
  --resize-1000: 48px;
  --resize-250-sm: 20px;
  --resize-300-sm: 24px;
  --resize-400-sm: 32px;
  --resize-500-sm: 40px;
  --resize-600-sm: 48px;
  --resize-700-sm: 56px;
  --resize-800-sm: 64px;
  --resize-900-sm: 72px;
  --resize-1000-sm: 80px;
  --nav-height: var(--size-700);
  --row-gap-tight: var(--size-150);
  --col-gap-tight: var(--size-150);
  --row-gap-comfy: var(--size-200);
  --col-gap-comfy: var(--size-200);
  --row-gap-loose: var(--size-400);
  --col-gap-loose: var(--size-400);
  --row-gap-spacious: var(--size-300);
  --col-gap-spacious: var(--size-300);
  --row-gap-tight-md: var(--size-200);
  --col-gap-tight-md: var(--size-200);
  --row-gap-comfy-md: var(--size-400);
  --col-gap-comfy-md: var(--size-400);
  --row-gap-loose-md: var(--size-600);
  --col-gap-loose-md: var(--size-600);
  --row-gap-spacious-md: var(--size-500);
  --col-gap-spacious-md: var(--size-500);
  --row-gap-spacious-lg: var(--size-1000);
  --col-gap-spacious-lg: var(--size-1000);
  --row-gap-spacious-sm: var(--size-400);
  --col-gap-spacious-sm: var(--size-400);
  --section-padding-vertical: var(--size-500);
  --section-padding-horizontal: var(--size-200);
  --section-padding: var(--section-padding-vertical)
    var(--section-padding-horizontal);
  --section-padding-vertical-md: var(--size-1000);
  --section-padding-horizontal-md: var(--size-500);
  --section-padding-vertical-sm: var(--size-800);
  --section-padding-horizontal-sm: var(--size-300);
  --tooltip-horizontal-padding: var(--size-150);
  --tooltip-max-width: min(
    calc(100vw - (var(--tooltip-horizontal-padding) * 6)),
    calc(360px - var(--tooltip-horizontal-padding) * 2)
  );
  --tooltip-offset: var(--size-150);
  --tooltip-vertical-transform: calc(100% + var(--tooltip-offset));
  --nav-height-md: calc(var(--size-900) + var(--size-200));
  /**
    * @tokens Font Weight
    * @presenter FontWeight
    */
  --font-default-weight: 400;
  --font-accent-weight: 500;
  /**
    * @tokens Font Size
    * @presenter FontSize
    */
  --font-size-100: 10px;
  --font-size-200: 12px;
  --font-size-300: 14px;
  --font-size-400: 16px;
  --font-size-500: 16px;
  --font-size-600: 20px;
  --font-size-700: 24px;
  --font-size-800: 30px;
  --font-size-900: 36px;
  --font-size-100-sm: 12px;
  --font-size-200-sm: 14px;
  --font-size-300-sm: 16px;
  --font-size-400-sm: 18px;
  --font-size-500-sm: 20px;
  --font-size-600-sm: 24px;
  --font-size-700-sm: 36px;
  --font-size-800-sm: 48px;
  --font-size-900-sm: 60px;
  --font-200: var(--font-default-weight)
      calc(var(--font-size-200) * var(--font-default-scale)) var(--font-default),
    var(--font-fallback);
  --font-300: var(--font-default-weight)
      calc(var(--font-size-300) * var(--font-default-scale)) var(--font-default),
    var(--font-fallback);
  --font-400: var(--font-default-weight)
      calc(var(--font-size-400) * var(--font-default-scale)) var(--font-default),
    var(--font-fallback);
  --font-500: var(--font-default-weight)
      calc(var(--font-size-500) * var(--font-default-scale)) var(--font-default),
    var(--font-fallback);
  --font-600: var(--font-default-weight)
      calc(var(--font-size-600) * var(--font-default-scale)) var(--font-default),
    var(--font-fallback);
  --font-accent-100: var(--font-accent-weight)
      calc(var(--font-size-100) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-200: var(--font-accent-weight)
      calc(var(--font-size-200) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-300: var(--font-accent-weight)
      calc(var(--font-size-300) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-400: var(--font-accent-weight)
      calc(var(--font-size-400) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-500: var(--font-accent-weight)
      calc(var(--font-size-500) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-600: var(--font-accent-weight)
      calc(var(--font-size-600) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-700: var(--font-accent-weight)
      calc(var(--font-size-700) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-800: var(--font-accent-weight)
      calc(var(--font-size-800) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --font-accent-900: var(--font-accent-weight)
      calc(var(--font-size-900) * var(--font-accent-scale)) var(--font-accent),
    var(--font-fallback);
  --typography-tooltip-font: var(--font-300);
  /**
    * @tokens Line Height
    * @presenter LineHeight
    */
  --line-height: 1;
  --line-height-tight: 1.1;
  --line-height-comfy: 1.4;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;
  /**
    * @tokens Colors
    * @presenter Color
    */
  --color-background-100: #0a0d15;
  --color-background-300: #151c28;
  --color-background-500: #232a39;
  --color-background-700: #323a48;
  --color-background-800: #3a465f;
  --color-darken-100: rgb(0 0 0 / 5%);
  --color-darken-300: rgb(0 0 0 / 10%);
  --color-darken-400: rgb(0 0 0 / 15%);
  --color-darken-500: rgb(0 0 0 / 30%);
  --color-darken-600: rgb(0 0 0 / 50%);
  --color-darken-700: rgb(0 0 0 / 70%);
  --color-darken-800: rgb(0 0 0 / 90%);
  --color-darken-900: rgb(0 0 0 / 100%);
  --color-content-100: rgb(255 255 255 / 5%);
  --color-content-300: rgb(255 255 255 / 10%);
  --color-content-400: rgb(255 255 255 / 15%);
  --color-content-500: rgb(255 255 255 / 30%);
  --color-content-600: rgb(255 255 255 / 50%);
  --color-content-700: rgb(255 255 255 / 70%);
  --color-content-800: rgb(255 255 255 / 90%);
  --color-content-900: rgb(255 255 255 / 100%);
  --color-accent-500: rgb(93 113 152 / 40%);
  --color-accent-600: rgb(93 113 152 / 60%);
  --color-accent-700: rgb(93 113 152 / 80%);
  --color-primary-500: #009dff;
  --color-primary-600: #33b1ff;
  --color-primary-700: #66c4ff;
  --color-success-500: #00ff94;
  --color-success-600: #33ffa9;
  --color-success-700: #66ffbf;
  --color-error-500: #f31d77;
  --color-error-600: #f64c93;
  --color-error-700: #f87cb0;
  --color-warning-500: #ffbb33;
  --color-warning-600: #ffcc66;
  --color-warning-700: #ffdd99;
  --color-tooltip-background: var(--color-background-800);
  /**
    * @tokens Shadow
    * @presenter Shadow
    */
  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 12%);
  --shadow-sm: 0 4px 6px 0 rgb(0 0 0 / 12%);
  --shadow-md: 0 5px 15px 0 rgb(0 0 0 / 12%);
  --shadow-lg: 0 10px 24px 0 rgb(0 0 0 / 12%);
  --shadow-xl: 0 15px 35px 0 rgb(0 0 0 / 12%);
  /**
    * @tokens Z-Index
    */
  --measure-z-index-below: -1;
  --measure-z-index-base: 0;
  --measure-z-index-above: 1;
  --measure-z-index-docked: 4;
  --measure-z-index-fixed: 10;
  --measure-z-index-overlay: 50;
  --measure-z-index-menu: 999;
  --measure-z-index-modal: 10000;
  --measure-z-index-toast: 11000;
  /**
    * @tokens Viewport
    */
  --view-min: 320px;
  --view-xs: 480px;
  --view-sm: 720px;
  --view-md: 960px;
  --view-lg: 1200px;
  --view-xl: 1400px;
  --view-xxl: 1600px;
  --view-max: 2600px;
}

blz-showcase.error-page .background-image {
  bottom: 50px;
}
blz-showcase.error-page h2.blz-heading {
  font-weight: bold;
}
blz-showcase.error-page blz-button {
  background-color: #006FB2;
  border: 1px solid #00AEFF;
  border-radius: 0;
  transition: color 200ms, background-color 200ms, border-color 200ms;
  font-family: "Open Sans";
}
blz-showcase.error-page blz-button:hover, blz-showcase.error-page blz-button:focus, blz-showcase.error-page blz-button:focus-within {
  background-color: #007bc6;
  border: solid 1px #79d4ff;
  color: #fff;
}

/**
 *  filename: lib/fruit/styles/styles.scss
 *  description: --
 **/
/**
 *  filename: lib/fruit/styles/after-before.scss
 *  description: --
 **/
/**
 *  filename: styles/asset-url.scss
 *  description: Returns an akamaized link given the suffix of a Contentstack asset url
 **/
/**
 *  filename: lib/fruit/styles/cms-background.scss
 *  description: --
 **/
/**
 *  filename: styles/jump-link.scss
 *  description: Style that maps to a jumplink
 **/
.jump-link {
  display: block;
  position: relative;
  top: -48px;
}
@media (min-width: 960px) {
  .jump-link {
    top: calc(var(--nav-height) * -1);
  }
}

/**
 *  filename: lib/fruit/styles/main-content.scss
 *  description: --
 **/
.main-content {
  width: 100%;
  max-width: 2600px;
  overflow: hidden;
}

/**
 *  filename: lib/fruit/styles/section.scss
 *  description: --
 **/
.section {
  position: relative;
}

/**
 *  filename: lib/fruit/styles/variables.scss
 *  description: --
 **/
/**
 *  filename: lib/fruit/templates/_blz-tab-control.scss
 *  description: --
 **/
blz-tab-control {
  transition: color 350ms;
}
blz-tab-control blz-image {
  position: relative;
}
blz-tab-control blz-image:after, blz-tab-control blz-image:before {
  opacity: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition: opacity 350ms, filter 350ms;
}
blz-tab-control blz-image:after {
  background-image: var(--icon-active);
  z-index: 2;
}
blz-tab-control blz-image:before {
  background-image: var(--icon-hover);
  z-index: 1;
}
blz-tab-control[active] blz-image:after {
  opacity: 1;
}
blz-tab-control:hover blz-image:before {
  opacity: 1;
}

body {
  margin: 0;
  background: #000;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-flow: column;
}

#iconography-block,
#navbar-tokens-block,
#age-gate-tokens-block {
  display: none;
}

:root[lang=ko-kr] {
  word-break: keep-all;
}

/**
 *  filename: assets/css/shared/components/_blz-age-gate.scss
 *  description: --
 **/
blz-age-gate::part(content) {
  background-position: var(--age-gate-background-position, center);
  background-repeat: var(--age-gate-background-repeat, no-repeat);
  background-size: var(--age-gate-background-size, cover);
  background-image: var(--age-gate-background-mobile);
}
@media (min-width: 960px) {
  blz-age-gate::part(content) {
    background-image: var(--age-gate-background-tablet);
  }
}
@media (min-width: 1400px) {
  blz-age-gate::part(content) {
    background-image: var(--age-gate-background-desktop);
  }
}

/**
 *  filename: assets/css/shared/components/_blz-button.scss
 *  description: --
 **/
blz-button::part(host-anchor) {
  z-index: 1;
  text-transform: uppercase;
}

blz-media-gallery::part(cta-text) {
  text-transform: uppercase;
}

/**
 *  filename: assets/css/shared/components/_blz-card.scss
 *  description: --
 **/
blz-card::part(play-icon) {
  background-image: var(--icon-play-button);
  transition: background-image 350ms;
  background-position: center;
  background-size: contain;
  color: transparent;
}
blz-card:hover::part(play-icon) {
  background-image: var(--icon-play-button-hover);
}

/**
 *  filename: assets/css/shared/components/_blz-carousel.scss
 *  description: --
 **/
blz-carousel::part(left-arrow) {
  background: none;
  background-image: var(--icon-arrow-left);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-carousel::part(left-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left);
}
blz-carousel::part(left-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left-hover);
  opacity: 0;
}
blz-carousel::part(left-arrow):hover:after, blz-carousel::part(left-arrow):focus:after {
  opacity: 1;
}
blz-carousel::part(right-arrow) {
  background: none;
  background-image: var(--icon-arrow-right);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-carousel::part(right-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right);
}
blz-carousel::part(right-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right-hover);
  opacity: 0;
}
blz-carousel::part(right-arrow):hover:after, blz-carousel::part(right-arrow):focus:after {
  opacity: 1;
}
blz-carousel::part(left-arrow-icon), blz-carousel::part(right-arrow-icon) {
  display: none;
}
blz-carousel::part(main-content) {
  grid-template-columns: [left-arrow-start] auto [left-arrow-end content-start] minmax(0, 1050px) [content-end right-arrow-start] auto [right-arrow-end];
}

/**
 *  filename: assets/css/shared/components/_blz-comparison-slider.scss
 *  description: --
 **/
blz-comparison-slider {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
blz-comparison-slider blz-video {
  transform: scale(2);
}
blz-comparison-slider::part(handlebar-container) {
  pointer-events: all;
}
blz-comparison-slider::part(left-arrow), blz-comparison-slider::part(right-arrow) {
  display: none;
}
blz-comparison-slider::part(handle) {
  background-image: var(--icon-slider);
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
}

/**
 *  filename: assets/css/shared/components/_blz-cross-sell.scss
 *  description: --
 **/
blz-cross-sell blz-game-card {
  --size-050: 0px;
}
blz-cross-sell [slot=cta] {
  display: flex;
  justify-content: center;
}

/**
 *  filename: assets/css/shared/components/_blz-lightbox.scss
 *  description: --
 **/
blz-lightbox::part(left-arrow) {
  background: none;
  background-image: var(--icon-arrow-left);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-lightbox::part(left-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left);
}
blz-lightbox::part(left-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left-hover);
  opacity: 0;
}
blz-lightbox::part(left-arrow):hover:after, blz-lightbox::part(left-arrow):focus:after {
  opacity: 1;
}
blz-lightbox::part(right-arrow) {
  background: none;
  background-image: var(--icon-arrow-right);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-lightbox::part(right-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right);
}
blz-lightbox::part(right-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right-hover);
  opacity: 0;
}
blz-lightbox::part(right-arrow):hover:after, blz-lightbox::part(right-arrow):focus:after {
  opacity: 1;
}
blz-lightbox::part(left-arrow-icon), blz-lightbox::part(right-arrow-icon) {
  display: none;
}
blz-lightbox::part(close) {
  position: relative;
  background-color: transparent;
  background-image: var(--icon-close);
  background-size: contain;
  transition: opacity 350ms;
}
blz-lightbox::part(close):after {
  transition: opacity 350ms;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: var(--icon-close-hover);
  background-size: contain;
  opacity: 0;
}
blz-lightbox::part(close):hover:after, blz-lightbox::part(close):focus:after {
  opacity: 1;
}
blz-lightbox::part(close-icon) {
  display: none;
}
blz-lightbox blz-image, blz-lightbox blz-video {
  max-width: 1000px;
  position: relative;
  margin: 20px;
}

@media (min-width: 960px) {
  blz-lightbox blz-image, blz-lightbox blz-video {
    margin: 0 auto;
  }
}
/**
 *  filename: assets/css/shared/components/_blz-masthead.scss
 *  description: --
 **/
blz-masthead [slot=platform] {
  text-shadow: 0 0 20px black;
}
blz-masthead [slot=platform] blz-icon {
  transition: filter 350ms;
}
blz-masthead [slot=platform] blz-icon:hover {
  filter: brightness(1.5);
}
blz-masthead blz-icon-group::part(content) {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

/**
 *  filename: assets/css/shared/components/_blz-video.scss
 *  description: --
 **/
blz-video [slot=thumbnail-play] {
  max-width: 70px;
  filter: drop-shadow(0px 2px 9px black);
}
blz-video [slot=thumbnail-play]:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: opacity 350ms;
  background-position: center;
  background-size: contain;
  background-image: var(--icon-play-button-hover);
  opacity: 0;
}
blz-video:hover [slot=thumbnail-play]:after {
  opacity: 1;
}

/**
 *  filename: assets/css/shared/components/_blz-platform-select.scss
 *  description: --
 **/
blz-platform-select::part(close) {
  position: relative;
  background-color: transparent;
  background-image: var(--icon-close);
  background-size: contain;
  transition: opacity 350ms;
}
blz-platform-select::part(close):after {
  transition: opacity 350ms;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: var(--icon-close-hover);
  background-size: contain;
  opacity: 0;
}
blz-platform-select::part(close):hover:after, blz-platform-select::part(close):focus:after {
  opacity: 1;
}
blz-platform-select::part(close-icon) {
  display: none;
}

/**
 *  filename: assets/css/shared/mixins/_icon-colors.scss
 *  description: --
 **/
/**
 *  filename: assets/css/shared/mixins/_multi-bg-feature-carousel.scss
 *  description: Mixin for blz-feature-carousel sections to support backgrounds of different widths + transitions
 **/
/**
 *  filename: assets/css/shared/components/_blz-tab-control.scss
 *  description: --
 **/
blz-tab-control[active] blz-image:after {
  filter: brightness(1.3);
}

/**
 *  filename: assets/css/shared/sections/_masthead-overview.scss
 *  description: --
 **/
.section.masthead-overview > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
  z-index: 1;
}
@media (min-width: 480px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.masthead-overview .section.masthead > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.masthead-overview .section.overview > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.masthead-overview blz-masthead[layout=left]::part(section) {
  min-height: max(220vw, 850px);
  justify-content: flex-start;
}
.section.masthead-overview blz-masthead::part(platform) {
  margin-top: 20px;
}
.section.masthead-overview blz-masthead[layout=left]::part(platform) {
  position: relative;
  bottom: 0;
}

@media (min-width: 480px) {
  .section.masthead-overview blz-masthead[layout=left]::part(section) {
    min-height: max(175vw, 1150px);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview blz-masthead[layout=left]::part(section) {
    min-height: max(165vw, 1350px);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview blz-masthead[layout=left]::part(section) {
    min-height: 900px;
  }
  .section.masthead-overview blz-masthead[layout=left]::part(platform) {
    position: absolute;
    bottom: var(--size-500);
    margin: 0;
  }
}
/**
 *  filename: assets/css/shared/sections/_optional-feature.scss
 *  description: --
 **/
.section.optional-feature > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-max);
  }
}

/**
 *  filename: assets/css/shared/sections/_optional-feature.scss
 *  description: --
 **/
.section.game-features > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.game-features blz-card {
  background: transparent;
}

/**
 *  filename: assets/css/shared/sections/_carousel-media-gallery.scss
 *  description: --
 **/
.section.carousel-media-gallery > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-max);
  }
}

/**
 *  filename: assets/css/shared/sections/_cross-sell.scss
 *  description: --
 **/
.section.cross-sell > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.cross-sell blz-button-group {
  padding: 0 var(--section-padding-horizontal);
  justify-content: center;
}

/**
 *  filename: assets/css/shared/sections/_outro.scss
 *  description: --
 **/
.section.outro > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.outro > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.outro > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.outro > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.outro > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.outro > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.outro > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.outro > [slot=background] {
    background-image: var(--background-max);
  }
}

@media (min-width: 960px) {
  .section.outro blz-header {
    margin-top: 100px;
  }
}
/**
 *  filename: assets/css/shared/sections/_social-footer.scss
 *  description: --
 **/
.section.social-footer > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
  z-index: -1;
}
@media (min-width: 480px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.social-footer blz-social-section::part(header) {
  text-transform: uppercase;
}

/**
 *  filename: assets/css/shared/sections/_error.scss
 *  description: --
 **/
.section.error > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.error > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.error > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.error > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.error > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.error > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.error > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.error > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.error blz-video,
.section.error blz-image {
  position: relative;
}
.section.error blz-page-header::part(section) {
  display: flex;
  flex-flow: column;
  gap: 30px;
}
.section.error blz-button-group {
  justify-content: center;
  z-index: 10;
}

@media (min-width: 960px) {
  .section.error blz-video,
  .section.error blz-image {
    max-width: 800px;
  }
}
/**
 *  filename: assets/css/shared/sections/_feature-carousel.scss
 *  description: --
 **/
.section.feature-carousel [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block !important;
  background-image: var(--mobile-background);
  transition: opacity 700ms;
  opacity: 0;
}
@media (min-width: 960px) {
  .section.feature-carousel [slot=background] {
    background-image: var(--tablet-background, var(--mobile-background));
  }
}
@media (min-width: 1400px) {
  .section.feature-carousel [slot=background] {
    background-image: var(--desktop-background, var(--tablet-background));
  }
}
.section.feature-carousel [slot=background].background-active {
  opacity: 1;
}
.section.feature-carousel [slot=heading] {
  text-shadow: 0px 0px 10px black, 0px 0px 20px black;
}
.section.feature-carousel [slot=description] {
  text-shadow: 0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px black;
}
.section.feature-carousel blz-carousel[slot=mobile-carousel]::part(main-content) {
  min-height: 450px;
  display: flex;
  align-items: flex-end;
}
.section.feature-carousel blz-feature {
  padding-top: 20px;
}
.section.feature-carousel blz-tab-controls {
  overflow: visible;
}
.section.feature-carousel blz-tab-control {
  --icon-size: var(--size-600);
  filter: drop-shadow(0px 3px 8px black) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.4));
}
@media (min-width: 960px) {
  .section.feature-carousel blz-tab-control {
    --icon-size: var(--size-900);
    margin: 10px;
  }
}

@media (min-width: 960px) {
  .section.feature-carousel blz-feature-carousel-section::part(section) {
    min-height: 900px;
    display: flex;
    justify-content: center;
  }
  .section.feature-carousel blz-feature-carousel-section > blz-header,
  .section.feature-carousel blz-tab-controls,
  .section.feature-carousel blz-feature {
    padding-left: 20px;
  }
  .section.feature-carousel blz-feature {
    padding-bottom: 20px;
    padding-top: 0px;
  }
}
/**
 *  filename: assets/css/d2r/divider.scss
 *  description: Styles for the divider between sections
 **/
.masthead::after, .overview::after, .season::after, .game-features::after, .classes::after, .carousel-media-gallery::after, .outro::after, .cross-sell::after, .error::after {
  content: "";
  width: 100%;
  height: 20px;
  position: relative;
  display: block;
  z-index: 98;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt38278990640daad4/657e2479a326be3f480bc090/section_divider.webp?auto=webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2600px auto;
}

@media (min-width: 960px) {
  .masthead::after {
    display: none;
  }
}
/**
 *  filename: assets/css/d2r/fonts.scss
 *  description: Fonts & text presets for Diablo II: Remastered
 **/
/**
 *  filename: assets/css/shared/fonts/diablo.scss
 *  description: Fonts shared across the Diablo franchise
 **/
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 500;
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt721dda3062e62f0a/657e45c3d0868427a6bc0a32/AlegreyaSans-Medium.woff?auto=webp);
}
@font-face {
  font-family: "Exocet Reaper";
  font-weight: 500;
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt9b420a58bed922a2/657e45c837a55372bc3f4b0b/ExocetReaper-Medium.otf?auto=webp);
}
@font-face {
  font-family: "Yoon Myungjo";
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt550ca5ce53817634/65de3b8e204af749d52c2f4a/YoonMyungjo230.ttf?auto=webp);
}
@font-face {
  font-family: "Kodia";
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/bltc37ca517d84d5f03/65de3b8e574bda83d5efe347/Kodia_11172.ttf?auto=webp);
}
:root {
  --font-default: "Alegreya Sans";
  --font-default-scale: 1.1;
  --font-accent: "Exocet Reaper";
}

[slot=heading], [slot=subheading] {
  font-family: "Exocet Reaper", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

[slot=description],
[slot^=content] {
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 500;
}

:root[lang=ko-kr] {
  --font-default: "Kodia";
  --font-accent: "Yoon Myungjo";
}
:root[lang=ko-kr] [slot=heading], :root[lang=ko-kr] [slot=subheading] {
  font-family: "Yoon Myungjo", sans-serif;
  text-transform: uppercase;
}
:root[lang=ko-kr] [slot=description],
:root[lang=ko-kr] [slot^=content] {
  font-family: "Kodia", sans-serif;
  text-transform: uppercase;
}

/**
 *  filename: assets/css/d2r/media.scss
 *  description: --
 **/
[slot=media],
blz-highlights blz-card [slot=image],
blz-comparison-slider,
blz-lightbox [slot^=slide] {
  box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.7);
}
[slot=media]:after,
blz-highlights blz-card [slot=image]:after,
blz-comparison-slider:after,
blz-lightbox [slot^=slide]:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  border: 0px solid transparent;
  border-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt876db165a17af51d/657f859b21f66029f2478898/media_border.webp?auto=webp) 187;
  pointer-events: none;
}
[slot=media]::after,
blz-highlights blz-card [slot=image]::after,
blz-comparison-slider::after,
blz-lightbox [slot^=slide]::after {
  border-image-width: 50px;
  box-shadow: inset 0px 0px 30px 30px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 15px rgba(0, 0, 0, 0.8), inset 0px 0px 0px 16px #625028;
}

blz-media-gallery blz-card [slot=image],
blz-game-card::part(image),
blz-game-card::part(video) {
  box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.7);
}
blz-media-gallery blz-card [slot=image]:after,
blz-game-card::part(image):after,
blz-game-card::part(video):after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  border: 0px solid transparent;
  border-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt876db165a17af51d/657f859b21f66029f2478898/media_border.webp?auto=webp) 187;
  pointer-events: none;
}
blz-media-gallery blz-card [slot=image]:after,
blz-game-card::part(image):after,
blz-game-card::part(video):after {
  border-image-width: 37px;
  box-shadow: inset 0px 0px 30px 30px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 11px rgba(0, 0, 0, 0.8), inset 0px 0px 0px 12px #625028;
}
@media (min-width: 960px) {
  blz-media-gallery blz-card [slot=image]:after,
  blz-game-card::part(image):after,
  blz-game-card::part(video):after {
    border-image-width: 50px;
    box-shadow: inset 0px 0px 30px 30px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 16px rgba(0, 0, 0, 0.8), inset 0px 0px 0px 18px #625028;
  }
}

blz-video::part(overlay),
blz-media-gallery blz-lightbox-trigger {
  transition: filter 350ms;
}
blz-video::part(overlay):hover,
blz-media-gallery blz-lightbox-trigger:hover {
  filter: brightness(1.3);
}

blz-video [slot=thumbnail-play] {
  max-width: 114px;
}

/**
 *  filename: assets/css/d2r/components/_blz-age-gate.scss
 *  description: --
 **/
blz-age-gate::part(select-year), blz-age-gate::part(select-month), blz-age-gate::part(select-day) {
  background-color: rgb(28, 28, 28);
}

/**
 *  filename: assets/css/d2r/components/_blz-button.scss
 *  description: --
 **/
blz-button[type=primary] {
  color: #BD9B4E;
  box-shadow: 0px 2px 9px black;
  font-size: 18px;
  text-align: center;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt823db98ed577ce4f/657e4e5fcd72b15f172c1cc1/primary_button_base_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blta83312346c5fab9f/657e4e5f2357a82e5ea05ac0/primary_button_base_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt06dcf8951166656a/657e4e5f619a8e508b5d66e2/primary_button_base_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms, color 350ms;
  padding: 0 40px;
}
blz-button[type=primary]::part(host-anchor) {
  text-shadow: 0px 2px 9px black, 0px 2px 9px black, 0px 1px 14px black;
  z-index: 2;
}
blz-button[type=primary] blz-icon {
  filter: drop-shadow(0px 2px 9px black) drop-shadow(0px 2px 9px black) drop-shadow(0px 1px 14px black);
  width: 20px;
}
blz-button[type=primary]:hover {
  color: #E9C964;
}
blz-button[type=primary]:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt0545c1ea67fe4f71/657e4e5ffad2f44ae86c5e6c/primary_button_hover_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt5ae28cfc42f3f024/657e4e5febf6a1422d4caddb/primary_button_hover_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt16b5e51f9c403b70/657e4e5fd086841a18bc0a36/primary_button_hover_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms;
  opacity: 0;
}
blz-button[type=primary]:hover:after {
  opacity: 1;
  filter: brightness(1.2);
}
@media (min-width: 720px) {
  blz-button[type=primary] {
    font-size: 24px;
  }
  blz-button[type=primary] blz-icon {
    width: 24px;
  }
}

blz-button[type=default], blz-media-gallery::part(cta) {
  color: #BD9B4E;
  box-shadow: 0px 2px 9px black;
  font-size: 18px;
  text-align: center;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt823db98ed577ce4f/657e4e5fcd72b15f172c1cc1/primary_button_base_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blta83312346c5fab9f/657e4e5f2357a82e5ea05ac0/primary_button_base_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt06dcf8951166656a/657e4e5f619a8e508b5d66e2/primary_button_base_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms, color 350ms;
  padding: 0 40px;
}
blz-button[type=default]::part(host-anchor), blz-media-gallery::part(cta)::part(host-anchor) {
  text-shadow: 0px 2px 9px black, 0px 2px 9px black, 0px 1px 14px black;
  z-index: 2;
}
blz-button[type=default] blz-icon, blz-media-gallery::part(cta) blz-icon {
  filter: drop-shadow(0px 2px 9px black) drop-shadow(0px 2px 9px black) drop-shadow(0px 1px 14px black);
  width: 20px;
}
blz-button[type=default]:hover, blz-media-gallery::part(cta):hover {
  color: #E9C964;
}
blz-button[type=default]:after, blz-media-gallery::part(cta):after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt0545c1ea67fe4f71/657e4e5ffad2f44ae86c5e6c/primary_button_hover_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt5ae28cfc42f3f024/657e4e5febf6a1422d4caddb/primary_button_hover_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt16b5e51f9c403b70/657e4e5fd086841a18bc0a36/primary_button_hover_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms;
  opacity: 0;
}
blz-button[type=default]:hover:after, blz-media-gallery::part(cta):hover:after {
  opacity: 1;
  filter: brightness(1.2);
}
@media (min-width: 720px) {
  blz-button[type=default], blz-media-gallery::part(cta) {
    font-size: 24px;
  }
  blz-button[type=default] blz-icon, blz-media-gallery::part(cta) blz-icon {
    width: 24px;
  }
}

blz-age-gate::part(age-gate-button) {
  color: #BD9B4E;
  box-shadow: 0px 2px 9px black;
  font-size: 18px;
  text-align: center;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt823db98ed577ce4f/657e4e5fcd72b15f172c1cc1/primary_button_base_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blta83312346c5fab9f/657e4e5f2357a82e5ea05ac0/primary_button_base_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt06dcf8951166656a/657e4e5f619a8e508b5d66e2/primary_button_base_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms, color 350ms;
  padding: 0 40px;
}
blz-age-gate::part(age-gate-button)::part(host-anchor) {
  text-shadow: 0px 2px 9px black, 0px 2px 9px black, 0px 1px 14px black;
  z-index: 2;
}
blz-age-gate::part(age-gate-button) blz-icon {
  filter: drop-shadow(0px 2px 9px black) drop-shadow(0px 2px 9px black) drop-shadow(0px 1px 14px black);
  width: 20px;
}
blz-age-gate::part(age-gate-button):hover {
  color: #E9C964;
}
blz-age-gate::part(age-gate-button):after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt0545c1ea67fe4f71/657e4e5ffad2f44ae86c5e6c/primary_button_hover_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt5ae28cfc42f3f024/657e4e5febf6a1422d4caddb/primary_button_hover_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt16b5e51f9c403b70/657e4e5fd086841a18bc0a36/primary_button_hover_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms;
  opacity: 0;
}
blz-age-gate::part(age-gate-button):hover:after {
  opacity: 1;
  filter: brightness(1.2);
}
@media (min-width: 720px) {
  blz-age-gate::part(age-gate-button) {
    font-size: 24px;
  }
  blz-age-gate::part(age-gate-button) blz-icon {
    width: 24px;
  }
}

/**
 *  filename: assets/css/d2r/components/_blz-carousel.scss
 *  description: --
 **/
blz-carousel blz-tab-control, blz-carousel::part(tab-control) {
  --color-primary-500: #E9C964;
  --color-content-600: rgba(189, 155, 78, 0.5);
  --color-content-700: #BD9B4E;
  --color-content-900: #E9C964;
  transition: color 350ms, filter 350ms;
  filter: drop-shadow(0px 0px 2px rgba(189, 155, 78, 0.5));
}
blz-carousel blz-tab-control:not([active]), blz-carousel::part(inactive-tab-control) {
  filter: none;
}
blz-carousel::part(tab-control-icon) {
  transition: background-color 350ms;
}

/**
 *  filename: assets/css/d2r/components/_blz-comparison-slider.scss
 *  description: --
 **/
blz-comparison-slider::part(handlebar) {
  width: 6px;
  background: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt7bea85a26ecd27ff/657e24799ac62071b404b2af/slider_divider.webp?auto=webp) no-repeat center/contain transparent;
  background-size: 19px;
  background-repeat: repeat-y;
  background-position-x: -14.6px;
  position: relative;
}
blz-comparison-slider::part(handle) {
  width: 52px;
  height: 120px;
  background-position: left center;
}
blz-comparison-slider::part(handle):after {
  transition: opacity 350ms;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--icon-slider);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: right center;
  background-size: cover;
  opacity: 0;
}
blz-comparison-slider::part(handle):hover:after {
  opacity: 1;
}
@media (min-width: 480px) {
  blz-comparison-slider::part(handle) {
    width: 65px;
    height: 150px;
  }
}
@media (min-width: 1200px) {
  blz-comparison-slider::part(handle) {
    width: 86px;
    height: 199px;
  }
}

/**
 *  filename: assets/css/d2r/components/_blz-platform-select.scss
 *  description: --
 **/
blz-platform-select::part(logo) {
  background: radial-gradient(ellipse, rgb(80, 19, 0) 30%, rgba(26, 0, 0, 0.1) 60%, rgba(255, 255, 0, 0) 80%);
  clip-path: ellipse(70% 50% at 50%);
}

/**
 *  filename: assets/css/d2r/sections/_carousel-media-gallery.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_cross-sell.scss
 *  description: --
 **/
.section.cross-sell blz-game-card {
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.7));
}
.section.cross-sell blz-game-card::part(heading), .section.cross-sell blz-game-card::part(subheading) {
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 500;
}
.section.cross-sell blz-game-card::part(heading) {
  color: rgb(233, 201, 100);
}
.section.cross-sell blz-game-card::part(subheading) {
  color: rgb(209, 209, 209);
}

/**
 *  filename: assets/css/d2r/sections/_error.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_feature_carousel.scss
 *  description: --
 **/
.section.classes [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.classes [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.classes [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.classes [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.classes [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.classes [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.classes [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.classes [slot=background] {
    background-image: var(--background-max);
  }
}
.section.classes [slot=background]:after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: radial-gradient(ellipse at center, transparent 60%, black), linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, 0) 83%, rgb(0, 0, 0) 100%), linear-gradient(180deg, rgb(0, 0, 0) 2%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 82%, rgb(0, 0, 0) 100%);
}

@media (min-width: 960px) {
  .section.classes [slot=background]:after {
    background: none;
  }
}
/**
 *  filename: assets/css/d2r/sections/_optional-feature.scss
 *  description: --
 **/
.section.game-features blz-card [slot=image] {
  margin-bottom: 5px;
}

/**
 *  filename: assets/css/d2r/sections/_masthead-overview.scss
 *  description: --
 **/
.section.masthead-overview > [slot=background] {
  display: none;
}

@media (min-width: 960px) {
  .section.masthead-overview > [slot=background] {
    display: block;
  }
  .section.masthead-overview > [slot=background]:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: radial-gradient(circle at 370px 450px, rgba(255, 0, 0, 0.2) 0, transparent 400px);
    max-width: 1600px;
    margin: 0 auto;
  }
}
/**
 *  filename: assets/css/d2r/sections/_optional-feature.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_outro.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_social-footer.scss
 *  description: --
 **/
.section.masthead blz-icon-group blz-icon, .section.social blz-icon-group blz-icon {
  transition: color 350ms, filter 350ms;
  color: rgb(205, 179, 120);
  filter: drop-shadow(0px 0px 5px rgba(255, 0, 0, 0.5));
}
.section.masthead blz-icon-group blz-icon:hover, .section.social blz-icon-group blz-icon:hover {
  color: rgb(205, 179, 120);
  filter: drop-shadow(0px 0px 8px rgba(255, 0, 0, 0.5)) drop-shadow(0px 0px 2px rgb(255, 0, 0)) brightness(1.5);
}