:root {
  --classic-accent: #f59e0b;
  --classic-accent-soft: #fde68a;
  --classic-accent-rgb: 245, 158, 11;
  --classic-secondary-rgb: 124, 58, 237;
}

body[data-expansion="mop"] {
  --classic-accent: #34d399;
  --classic-accent-soft: #a7f3d0;
  --classic-accent-rgb: 52, 211, 153;
  --classic-secondary-rgb: 20, 184, 166;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05050b;
}

body {
  color: #f5f3ff;
  font-family: "Manrope", "Rajdhani", system-ui, sans-serif;
}

#retail-root {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100dvh;
  min-height: 0 !important;
  box-sizing: border-box;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(12px, 1.8vh, 22px) clamp(18px, 3vw, 54px) 12px !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(var(--classic-accent-rgb), .2), transparent 35%),
    radial-gradient(circle at 12% 12%, rgba(var(--classic-secondary-rgb), .09), transparent 26%),
    linear-gradient(125deg, #070914 0%, #05050d 52%, #090513 100%) !important;
}

#retail-root::before,
#retail-root::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

#retail-root::before {
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

#retail-root::after {
  width: min(760px, 80vw);
  height: 220px;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(var(--classic-accent-rgb), .22);
  filter: blur(80px);
}

#cors-banner {
  display: none !important;
}

.classic-section-heading {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 auto clamp(10px, 1.5vh, 16px);
  text-align: center;
}

.classic-section-heading .eyebrow {
  margin: 0 0 4px;
  color: var(--classic-accent-soft);
  font: 800 10px/1.2 "Manrope", sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.classic-section-heading h1 {
  margin: 0;
  color: #fffdf8;
  font-family: "Cinzel", serif;
  font-size: clamp(25px, 2.15vw, 37px);
  font-weight: 700;
  letter-spacing: -.025em;
  text-shadow: 0 0 32px rgba(var(--classic-accent-rgb), .22);
}

.classic-section-heading h1::after {
  content: "";
  display: block;
  width: 62px;
  height: 1px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, var(--classic-accent), transparent);
  box-shadow: 0 0 14px rgba(var(--classic-accent-rgb), .7);
}

#retail-root .spec-grid {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: repeat(8, minmax(98px, 1fr)) !important;
  gap: clamp(7px, .65vw, 11px) !important;
  width: min(100%, 1140px) !important;
  max-width: 1140px !important;
  margin: 0 auto clamp(8px, 1.3vh, 14px) !important;
  padding: 0 4px !important;
}

#retail-root .class-card {
  min-width: 0 !important;
  max-width: none !important;
  min-height: clamp(84px, 9.3vh, 108px);
  padding: 12px 7px 11px !important;
  gap: 7px !important;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--classic-accent)) 38%, transparent) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(150deg, rgba(255,255,255,.055), transparent 40%),
    rgba(13, 12, 24, .9) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.18), 0 0 16px color-mix(in srgb, var(--card-color, var(--classic-accent)) 7%, transparent);
  backdrop-filter: blur(12px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

#retail-root .class-card::before {
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--card-color, var(--classic-accent)) 24%, transparent), transparent 66%) !important;
}

#retail-root .class-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.1) 48%, transparent 70%);
  transform: translateX(-135%);
  transition: transform .55s ease;
}

#retail-root .class-card:hover,
#retail-root .class-card.active {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--card-color, var(--classic-accent)) 82%, white 5%) !important;
  box-shadow: 0 13px 32px rgba(0,0,0,.34), 0 0 26px color-mix(in srgb, var(--card-color, var(--classic-accent)) 24%, transparent) !important;
}

#retail-root .class-card:hover::after {
  transform: translateX(135%);
}

#retail-root .class-card .card-icon {
  width: clamp(46px, 4.4vh, 55px) !important;
  height: clamp(46px, 4.4vh, 55px) !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.38), 0 0 16px rgba(var(--classic-accent-rgb), .08);
}

#retail-root .class-card .card-label {
  color: var(--card-color, #edeaf7) !important;
  font-family: "Manrope", sans-serif !important;
  font-size: clamp(9px, .66vw, 11px) !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
}

#retail-root .class-card .card-arrow {
  right: 7px !important;
  bottom: 5px !important;
  color: rgba(255,255,255,.42) !important;
}

#midnight-logo {
  flex: 0 0 auto;
  display: flex !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: clamp(7px, 1vh, 12px) auto clamp(8px, 1.2vh, 14px) !important;
  padding: 0 !important;
}

#midnight-logo .tbc-logo {
  margin: 0 auto !important;
  filter: drop-shadow(0 0 22px rgba(var(--classic-accent-rgb), .25));
}

#midnight-logo .tbc-logo-title {
  font-size: clamp(34px, 3.6vw, 55px) !important;
  letter-spacing: -.025em !important;
}

#midnight-logo .tbc-logo-classic {
  margin-top: 3px !important;
  font-size: clamp(13px, 1.15vw, 18px) !important;
  letter-spacing: .32em !important;
}

#midnight-logo .tbc-logo-sub {
  margin-top: 3px !important;
  color: var(--classic-accent-soft) !important;
  font-size: clamp(9px, .76vw, 12px) !important;
  letter-spacing: .31em !important;
}

#player-section {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
}

#player-section .video-holder:not(.glass) {
  margin-bottom: 7px !important;
}

#player-section .video-holder.glass {
  width: 100% !important;
  height: min(61vw, calc(100dvh - 420px));
  min-height: 250px;
  max-height: 630px;
  box-sizing: border-box;
  margin: 0 auto !important;
  padding: 8px !important;
  overflow: hidden;
  border: 1px solid rgba(var(--classic-accent-rgb), .24) !important;
  border-radius: 18px !important;
  background: linear-gradient(150deg, rgba(var(--classic-accent-rgb), .08), rgba(7,7,14,.94) 28%) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.48), 0 0 34px rgba(var(--classic-accent-rgb), .08), inset 0 1px 0 rgba(255,255,255,.07);
}

#player-section .video-holder.glass .plyr,
#player-section .video-holder.glass video {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

#player-section .plyr--video {
  --plyr-color-main: var(--classic-accent);
  background: #000;
}

#tab-dropdown,
#history-modal-box,
#search-modal-box,
#scgen-panel {
  border-color: rgba(var(--classic-accent-rgb), .28) !important;
  background: rgba(10, 9, 19, .97) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.55), 0 0 26px rgba(var(--classic-accent-rgb), .08) !important;
  backdrop-filter: blur(20px);
}

#tab-dropdown {
  --selected-class-color: var(--classic-accent);
  border-color: color-mix(in srgb, var(--selected-class-color) 55%, transparent) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.55), 0 0 28px color-mix(in srgb, var(--selected-class-color) 16%, transparent) !important;
}

#tab-dropdown .td-group,
#tab-dropdown .td-group.td-back {
  color: var(--selected-class-color) !important;
  border-color: color-mix(in srgb, var(--selected-class-color) 22%, transparent) !important;
}

#tab-dropdown .td-item {
  border-left: 3px solid transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

#tab-dropdown .td-item:hover {
  color: color-mix(in srgb, var(--selected-class-color) 76%, white) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--selected-class-color) 16%, transparent), transparent) !important;
  border-left-color: color-mix(in srgb, var(--selected-class-color) 65%, transparent);
}

#tab-dropdown .td-item.active {
  color: color-mix(in srgb, var(--selected-class-color) 70%, white) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--selected-class-color) 22%, transparent), color-mix(in srgb, var(--selected-class-color) 5%, transparent)) !important;
  border-left-color: var(--selected-class-color) !important;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--selected-class-color) 11%, transparent) !important;
}

#tab-dropdown .td-item.active::before,
#tab-dropdown .td-back-arrow {
  color: var(--selected-class-color) !important;
}

@media (max-width: 1100px) {
  #retail-root .spec-grid {
    grid-template-columns: repeat(6, minmax(92px, 1fr)) !important;
  }

  #player-section .video-holder.glass {
    height: min(59vw, calc(100dvh - 500px));
  }
}

@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #retail-root {
    height: auto;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding: 18px 12px 28px !important;
  }

  #retail-root .spec-grid {
    grid-template-columns: repeat(4, minmax(68px, 1fr)) !important;
    gap: 7px !important;
  }

  #retail-root .class-card {
    min-height: 82px;
    padding: 10px 4px 9px !important;
  }

  #retail-root .class-card .card-icon {
    width: 40px !important;
    height: 40px !important;
  }

  #retail-root .class-card .card-label {
    font-size: 8px !important;
    white-space: normal !important;
  }

  #midnight-logo .tbc-logo-title {
    font-size: clamp(29px, 9vw, 42px) !important;
  }

  #player-section .video-holder.glass {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding: 5px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 420px) {
  #retail-root .spec-grid {
    grid-template-columns: repeat(3, minmax(76px, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}