/*
 * Madboys responsive system v8
 *
 * This file is deliberately loaded after the approved Dark Dungeon theme.
 * It does not redesign the two approved endpoints:
 *   - compact portrait phones below 600px;
 *   - standard desktop at 1500px+ with at least 850px of height.
 *
 * Instead it gives the space between those endpoints a small, ordered set of
 * layout modes. Frames and spacing adapt; game art, icons and readable type do
 * not continuously shrink with the viewport.
 */

body.site-final {
  --v8-stage-gutter: clamp(18px, 3.2vw, 42px);
  --v8-panel-gap: clamp(8px, 1.4vw, 16px);
  --v8-readable: 72ch;
  --v8-touch: 44px;
}

/* Keep interaction targets usable in every intermediate layout. */
@media (min-width: 600px) and (max-width: 1499px),
       (min-aspect-ratio: 6/5) and (max-height: 599px) {
  body.site-final :is(
    .round-icon,
    .menu-toggle,
    .gift-toggle,
    .gift-close,
    .usp-close,
    .jackpot-close,
    .ritual-close,
    .region-close,
    .region,
    summary
  ) {
    min-width: var(--v8-touch);
    min-height: var(--v8-touch);
  }

  body.site-final :is(.content, .usp-scroll, .faq-list, .static-page-shell) {
    scrollbar-width: thin;
    scrollbar-color: rgba(94, 143, 190, 0.58) rgba(7, 15, 27, 0.34);
  }
}

/* -------------------------------------------------------------------------
   MODE A — large portrait and near-square tablets (600px+, ratio below 1.2)
   Mobile hierarchy is retained, but it sits in a wider centred stage.
   ---------------------------------------------------------------------- */
@media (min-width: 600px) and (max-aspect-ratio: 6/5) {
  body.site-final {
    --v8-portrait-stage: min(820px, calc(100vw - 48px));
    --v8-portrait-core: min(700px, calc(100% - 36px));
  }

  body.site-final .screen {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 760px !important;
    overflow: hidden !important;
  }

  body.site-final .canvas {
    position: relative !important;
    inset: auto !important;
    width: var(--v8-portrait-stage) !important;
    height: 100dvh !important;
    min-height: 760px !important;
    max-height: none !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  body.site-final .canvas::after {
    display: block !important;
    left: 0 !important;
    right: 0 !important;
    top: 52% !important;
    bottom: 0 !important;
    height: auto !important;
  }

  body.site-final .spread-art {
    display: none !important;
  }

  body.site-final section.home .canvas {
    background-image: url('/assets/madboys.screen.01.home/1%20-%20mb_back2.webp') !important;
  }
  body.site-final section.missions .canvas {
    background-image: url('/assets/madboys.screen.02.missions/14%20-%20rw_back.webp') !important;
  }
  body.site-final section.builds .canvas {
    background-image: url('/assets/madboys.screen.03.builds/02%20-%20bd_back.webp') !important;
  }
  body.site-final section.council .canvas {
    background-image: url('/assets/madboys.screen.04.council/21%20-%20cn_back2.webp') !important;
  }
  body.site-final section.stories .canvas {
    background-image: url('/assets/madboys.screen.05.stories/04%20-%20st_back.webp') !important;
  }
  body.site-final section.expansion .canvas {
    background-image: url('/assets/madboys.screen.06.expansion/16%20-%20ex_back.webp') !important;
  }
  body.site-final section.blood .canvas {
    background-image: url('/assets/madboys.screen.07.blood/14%20-%20bd_back.webp') !important;
  }
  body.site-final section.rewards .canvas {
    background-image: url('/assets/madboys.screen.08.rewards/14%20-%20mb_back4.webp') !important;
  }

  body.site-final .global-topbar,
  body.madboys-site.site-final.site-production.site-production .global-cta {
    width: var(--v8-portrait-stage) !important;
    max-width: var(--v8-portrait-stage) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body.site-final .global-topbar {
    padding-inline: clamp(14px, 3vw, 28px) !important;
  }

  body.site-final .content {
    left: var(--v8-stage-gutter) !important;
    right: var(--v8-stage-gutter) !important;
    top: 64px !important;
    bottom: 112px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.site-final :is(
    .home-cards,
    .founder-strip,
    .stats-row,
    .chips-row,
    .mission-cards,
    .ability-row,
    .artifact-row,
    .ruler-cards,
    .influence,
    .bonus-cards,
    .flow-row,
    .shift,
    .fate-cards,
    .section-kicker,
    .journey-row,
    .map-pills,
    .expansion-cards,
    .process-row,
    .blood-power,
    .blood-cards,
    .reward-grid,
    .benefits-row,
    .faq-list
  ) {
    width: var(--v8-portrait-core) !important;
    max-width: var(--v8-portrait-core) !important;
    margin-inline: auto !important;
  }

  body.site-final .screen:not(.home) .title-wide,
  body.site-final :is(.blood-logo, .rewards-logo) {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: min(620px, 82%) !important;
    height: clamp(68px, 9dvh, 92px) !important;
    max-height: 92px !important;
    margin: 0 auto !important;
    transform: none !important;
    object-fit: contain !important;
  }

  body.site-final .screen:not(.home) .ribbon {
    position: relative !important;
    inset: auto !important;
    width: min(700px, 100%) !important;
    min-height: 38px !important;
    height: auto !important;
    max-height: none !important;
    margin: 4px auto 8px !important;
    transform: none !important;
  }

  body.site-final .home .stats-row,
  body.site-final .council .flow-row,
  body.site-final .stories .shift,
  body.site-final .stories .section-kicker,
  body.site-final .stories .journey-row,
  body.site-final .blood .blood-cards {
    display: grid !important;
  }

  body.site-final .home-cards,
  body.site-final .mission-cards,
  body.site-final .expansion-cards,
  body.site-final .blood-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--v8-panel-gap) !important;
  }

  body.site-final .ability-row,
  body.site-final .bonus-cards,
  body.site-final .reward-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--v8-panel-gap) !important;
  }

  body.site-final .stories-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.site-final section.stories :is(.story-stage, .shift, .fate-cards, .section-kicker, .journey-row) {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  body.site-final section.stories .story-stage {
    width: min(700px, 100%) !important;
    height: clamp(250px, 31dvh, 330px) !important;
    min-height: 250px !important;
    overflow: visible !important;
  }

  body.site-final section.stories .shift {
    display: block !important;
    min-height: 68px !important;
    height: 68px !important;
  }

  body.site-final section.stories .fate-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: auto !important;
  }

  body.site-final section.stories .section-kicker {
    display: block !important;
    margin-top: 8px !important;
  }

  body.site-final section.stories .journey-row {
    display: grid !important;
    grid-template-columns: 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr !important;
  }

  body.site-final .builds .build-hero-zone,
  body.site-final .expansion .map-zone {
    width: min(700px, 100%) !important;
    margin-inline: auto !important;
  }

  body.site-final .council-table,
  body.site-final .blood-heroes {
    width: min(720px, 104%) !important;
    margin-inline: auto !important;
  }

  body.site-final section.rewards .reward-grid {
    display: grid !important;
  }

  body.site-final section.rewards .reward-hero-standard {
    display: block !important;
  }

  body.site-final section.rewards .reward-hero-wide {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   MODE B — compact / phone landscape (ratio 1.2+, less than 600px tall)
   A widened mobile hierarchy is used. The chapter may be taller than one
   physical viewport; core content is scrollable instead of being discarded.
   ---------------------------------------------------------------------- */
@media (min-aspect-ratio: 6/5) and (max-height: 599px) {
  body.site-final {
    --v8-short-h: 760px;
    --v8-short-core: min(920px, calc(100vw - 28px));
  }

  html,
  body.site-final {
    scroll-snap-type: y proximity !important;
  }

  body.site-final .screen {
    display: block !important;
    width: 100% !important;
    height: var(--v8-short-h) !important;
    min-height: var(--v8-short-h) !important;
    max-height: none !important;
    overflow: hidden !important;
    scroll-snap-align: start;
  }

  body.site-final section.stories {
    height: 900px !important;
    min-height: 900px !important;
  }

  body.site-final .canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  body.site-final .spread-art {
    display: none !important;
  }

  body.site-final section.home .canvas {
    background-image: url('/assets/madboys.screen.01.home/1%20-%20mb_back2h-1600.webp') !important;
  }
  body.site-final section.missions .canvas {
    background-image: url('/assets/madboys.screen.02.missions/14%20-%20rw_backh2-1600.webp') !important;
  }
  body.site-final section.builds .canvas {
    background-image: url('/assets/madboys.screen.03.builds/02%20-%20bd_backh-1600.webp') !important;
  }
  body.site-final section.council .canvas {
    background-image: url('/assets/madboys.screen.04.council/21%20-%20cn_back2h-1600.webp') !important;
  }
  body.site-final section.stories .canvas {
    background-image: url('/assets/madboys.screen.05.stories/04%20-%20st_backh-1600.webp') !important;
  }
  body.site-final section.expansion .canvas {
    background-image: url('/assets/madboys.screen.06.expansion/16%20-%20ex_backh-1600.webp') !important;
  }
  body.site-final section.blood .canvas {
    background-image: url('/assets/madboys.screen.07.blood/14%20-%20bd_backh-1600.webp') !important;
  }
  body.site-final section.rewards .canvas {
    background-image: url('/assets/madboys.screen.08.rewards/14%20-%20mb_back4h-1600.webp') !important;
  }

  body.site-final .global-topbar {
    top: max(4px, env(safe-area-inset-top)) !important;
    width: calc(100vw - 20px) !important;
    height: 48px !important;
  }

  body.site-final .global-cta {
    display: block !important;
    width: min(300px, 38vw) !important;
    min-width: 224px !important;
    left: auto !important;
    right: 12px !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }

  body.site-final .content {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 54px !important;
    bottom: 72px !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 0 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.site-final .screen:not(.home) .title-wide,
  body.site-final :is(.blood-logo, .rewards-logo) {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: min(500px, 58vw) !important;
    height: 72px !important;
    max-height: 72px !important;
    margin: 0 auto !important;
    transform: none !important;
    object-fit: contain !important;
  }

  body.site-final .screen:not(.home) .ribbon {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: min(760px, 88vw) !important;
    min-height: 38px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto 4px !important;
    transform: none !important;
  }

  body.site-final :is(
    .home .stats-row,
    .council .flow-row,
    .stories .shift,
    .stories .section-kicker,
    .stories .journey-row,
    .blood .blood-cards
  ) {
    display: grid !important;
  }

  body.site-final :is(
    .home .title-madboys,
    .home .gold-title,
    .home .hero-slogan,
    .home .hero-team,
    .home-cards,
    .founder-strip,
    .stats-row,
    .mission-scene,
    .mission-core-trigger,
    .chips-row,
    .mission-cards,
    .build-hero-zone,
    .ability-row,
    .artifact-row,
    .ruler-cards,
    .influence,
    .council-table,
    .bonus-cards,
    .flow-row,
    .story-stage,
    .story-ai-trigger,
    .shift,
    .fate-cards,
    .section-kicker,
    .journey-row,
    .map-pills,
    .map-zone,
    .expansion-cards,
    .process-row,
    .blood-heroes,
    .blood-power,
    .blood-cards,
    .reward-grid,
    .explore-link-wrap,
    .benefits-row,
    .faq-list
  ) {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: var(--v8-short-core) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }

  body.site-final :is(.home-cards, .mission-cards, .expansion-cards, .blood-cards) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.site-final :is(.ability-row, .bonus-cards, .fate-cards, .reward-grid) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  body.site-final .build-hero-zone {
    height: 330px !important;
    min-height: 330px !important;
  }

  body.site-final .home .title-madboys {
    width: min(430px, 58vw) !important;
    max-height: 88px !important;
    object-fit: contain !important;
  }

  body.site-final .home .hero-team {
    width: min(700px, 82vw) !important;
    height: 230px !important;
    max-height: 230px !important;
    object-fit: contain !important;
  }

  body.site-final :is(.mission-core-trigger, .story-ai-trigger) {
    display: block !important;
    width: clamp(132px, 18vw, 172px) !important;
    margin: 0 auto !important;
  }

  body.site-final .map-zone {
    height: 390px !important;
    min-height: 390px !important;
  }

  body.site-final section.stories .story-stage {
    height: 310px !important;
    min-height: 310px !important;
    overflow: visible !important;
  }

  body.site-final section.stories .shift {
    display: block !important;
    width: min(760px, 88vw) !important;
    min-height: 66px !important;
    height: 66px !important;
  }

  body.site-final section.stories .fate-cards {
    height: auto !important;
  }

  body.site-final section.stories .fate-cards article,
  body.site-final section.stories .fate-cards img {
    height: 112px !important;
  }

  body.site-final section.stories .section-kicker {
    display: block !important;
    margin-top: 8px !important;
  }

  body.site-final section.stories .journey-row {
    display: grid !important;
    grid-template-columns: 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr !important;
  }

  body.site-final section.rewards .reward-grid {
    display: grid !important;
  }

  body.site-final section.rewards .reward-hero-standard {
    display: block !important;
  }

  body.site-final section.rewards .reward-hero-wide {
    display: none !important;
  }
}

/* Core-visibility contract. These selectors intentionally match the maximum
   specificity of legacy emergency rules that used display:none. */
@media (min-width: 600px) and (max-width: 1499px),
       (min-aspect-ratio: 6/5) and (max-height: 599px) {
  body.madboys-site.site-final.site-production section.home .stats-row,
  body.madboys-site.site-final.site-production section.council .flow-row,
  body.madboys-site.site-final.site-production section.stories .section-kicker,
  body.madboys-site.site-final.site-production section.stories .journey-row,
  body.madboys-site.site-final.site-production section.blood .blood-cards {
    display: grid !important;
  }

  body.madboys-site.site-final.site-production section.stories .shift {
    display: block !important;
  }
}

/* -------------------------------------------------------------------------
   MODE C — tablet landscape (600px+ tall, 600–1179px wide, ratio 1.2+)
   Use the desktop relationship map, but guarantee enough chapter height and
   restore the core modules that old emergency rules removed.
   ---------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1179px) and
       (min-height: 600px) and (min-aspect-ratio: 6/5) {
  body.site-final .screen {
    height: max(100dvh, 820px) !important;
    min-height: 820px !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body.site-final section.stories {
    height: max(100dvh, 940px) !important;
    min-height: 940px !important;
  }

  body.site-final .canvas {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  body.site-final .home .stats-row,
  body.site-final .council .flow-row,
  body.site-final .stories .shift,
  body.site-final .stories .section-kicker,
  body.site-final .stories .journey-row,
  body.site-final .blood .blood-cards {
    display: grid !important;
  }

  body.site-final section.stories .shift {
    top: 500px !important;
    height: 66px !important;
    min-height: 66px !important;
  }

  body.site-final section.stories .fate-cards {
    top: 590px !important;
  }

  body.site-final section.stories .section-kicker {
    position: absolute !important;
    display: block !important;
    left: 50% !important;
    right: auto !important;
    top: 730px !important;
    width: min(840px, 86vw) !important;
    transform: translateX(-50%) !important;
  }

  body.site-final section.stories .journey-row {
    position: absolute !important;
    display: grid !important;
    left: 50% !important;
    right: auto !important;
    top: 772px !important;
    width: min(840px, 86vw) !important;
    grid-template-columns: 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr !important;
    transform: translateX(-50%) !important;
  }

  body.site-final section.rewards .reward-grid {
    display: grid !important;
  }
}

/* -------------------------------------------------------------------------
   MODE D — compact desktop (1180–1499px, or any desktop shorter than 850px)
   Preserve desktop positions and asset sizes; provide more vertical stage
   rather than hiding key modules.
   ---------------------------------------------------------------------- */
@media (min-width: 1180px) and (max-width: 1499px) and (min-aspect-ratio: 6/5),
       (min-width: 1180px) and (max-height: 849px) and (min-aspect-ratio: 6/5) {
  body.site-final .screen {
    height: max(100dvh, 850px) !important;
    min-height: 850px !important;
    max-height: none !important;
  }

  body.site-final section.stories {
    height: max(100dvh, 960px) !important;
    min-height: 960px !important;
  }

  body.site-final .canvas {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
  }

  body.site-final .home .stats-row,
  body.site-final .council .flow-row,
  body.site-final .stories .shift,
  body.site-final .stories .section-kicker,
  body.site-final .stories .journey-row,
  body.site-final .blood .blood-cards {
    display: grid !important;
  }

  body.site-final section.stories .shift {
    display: block !important;
    top: 520px !important;
  }

  body.site-final section.stories .fate-cards {
    top: 630px !important;
  }

  body.site-final section.stories .section-kicker {
    position: absolute !important;
    display: block !important;
    left: 50% !important;
    right: auto !important;
    top: 772px !important;
    width: min(920px, 76vw) !important;
    transform: translateX(-50%) !important;
  }

  body.site-final section.stories .journey-row {
    position: absolute !important;
    display: grid !important;
    left: 50% !important;
    right: auto !important;
    top: 814px !important;
    width: min(920px, 76vw) !important;
    grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr !important;
    transform: translateX(-50%) !important;
  }

  body.site-final section.rewards .reward-grid {
    display: grid !important;
  }
}

/* -------------------------------------------------------------------------
   Intermediate popups. Two-column desktop popup templates are disabled when
   their minimum columns cannot fit or when the viewport is too short.
   ---------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1199px),
       (min-aspect-ratio: 6/5) and (max-height: 699px) {
  body.site-final :is(.usp-shell, .gift-panel, .jackpot-panel, .jackpot-panel-rich, .ritual-panel, .region-panel) {
    width: min(960px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.site-final :is(.usp-scroll, .jackpot-scroll, .ritual-scroll, .region-scroll) {
    display: block !important;
    height: auto !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.madboys-site.site-final.site-production .usp-panel[data-popup-panel] .usp-scroll {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    height: auto !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.site-final :is(
    .usp-two-col,
    .jackpot-usp-layout,
    .ritual-main-grid,
    .popup-exact-grid,
    .popup-exact-cards
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    gap: 14px !important;
  }

  body.site-final :is(.usp-two-col, .jackpot-usp-layout, .ritual-main-grid) > * {
    grid-area: auto !important;
    min-width: 0 !important;
  }

  body.site-final .popup-hero {
    display: block !important;
    min-height: clamp(180px, 28dvh, 300px) !important;
    max-height: 320px !important;
  }

  body.site-final .gift-panel {
    padding: clamp(18px, 3vw, 28px) !important;
  }

  body.site-final .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.site-final .gift-grid article {
    min-width: 0 !important;
  }

  body.site-final .jackpot-combo-flow,
  body.site-final .jackpot-combo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.site-final :is(.usp-close, .gift-close, .jackpot-close, .ritual-close, .region-close) {
    position: sticky !important;
    float: right;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 10px !important;
    z-index: 20 !important;
  }
}

@media (min-aspect-ratio: 6/5) and (max-height: 599px) {
  body.site-final .popup-hero {
    min-height: 190px !important;
    height: 190px !important;
  }

  body.site-final .gift-grid article {
    min-height: 190px !important;
  }
}

/* -------------------------------------------------------------------------
   Internal feature, popup and comparison pages use the same thresholds as the
   landing page instead of their former independent 720/767/900px switches.
   ---------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1499px) {
  body.site-final.static-feature-page .static-topbar,
  body.site-final.static-feature-page .static-page-shell,
  body.site-final :is(.explore-shell, .privacy-shell, .seo-shell),
  body.comparison-page .comparison-shell {
    width: min(1120px, calc(100vw - 40px)) !important;
    max-width: min(1120px, calc(100vw - 40px)) !important;
    margin-inline: auto !important;
  }

  body.site-final.static-feature-page:not(.static-popup-page) .static-landing-slice > .screen {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 960px !important;
    overflow: visible !important;
  }

  body.site-final.static-feature-page:not(.static-popup-page) .static-landing-slice .canvas {
    position: relative !important;
    inset: auto !important;
    width: min(900px, 100%) !important;
    height: auto !important;
    min-height: 1080px !important;
    max-height: none !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  body.site-final.static-popup-page .static-popup-card {
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;
    margin-inline: auto !important;
  }

  body.site-final.static-popup-page .usp-scroll {
    max-height: none !important;
    overflow: visible !important;
  }

  body.comparison-page .comparison-topbar,
  body.comparison-page .comparison-grid,
  body.comparison-page .related-grid {
    gap: clamp(10px, 1.7vw, 20px) !important;
  }

  body.comparison-page .comparison-card,
  body.comparison-page .comparison-hero,
  body.comparison-page .comparison-cta-banner {
    padding: clamp(18px, 3vw, 34px) !important;
  }

  body.comparison-page .comparison-table {
    width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  body.comparison-page .comparison-grid,
  body.comparison-page .related-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.comparison-page .comparison-topbar {
    grid-template-columns: 1fr auto !important;
  }

  body.comparison-page .comparison-mini-nav {
    display: none !important;
  }
}

/* Stable horizontal art tiers. The standard desktop rules above 1500px remain
   untouched; this only removes the inconsistent quality jump below them. */
@media (min-width: 600px) and (max-width: 1499px) and (min-aspect-ratio: 6/5) {
  body.site-final section.home .canvas {
    background-image: url('/assets/madboys.screen.01.home/1%20-%20mb_back2h-1600.webp') !important;
  }
  body.site-final section.missions .canvas {
    background-image: url('/assets/madboys.screen.02.missions/14%20-%20rw_backh2-1600.webp') !important;
  }
  body.site-final section.builds .canvas {
    background-image: url('/assets/madboys.screen.03.builds/02%20-%20bd_backh-1600.webp') !important;
  }
  body.site-final section.council .canvas {
    background-image: url('/assets/madboys.screen.04.council/21%20-%20cn_back2h-1600.webp') !important;
  }
  body.site-final section.stories .canvas {
    background-image: url('/assets/madboys.screen.05.stories/04%20-%20st_backh-1600.webp') !important;
  }
  body.site-final section.expansion .canvas {
    background-image: url('/assets/madboys.screen.06.expansion/16%20-%20ex_backh-1600.webp') !important;
  }
  body.site-final section.blood .canvas {
    background-image: url('/assets/madboys.screen.07.blood/14%20-%20bd_backh-1600.webp') !important;
  }
  body.site-final section.rewards .canvas {
    background-image: url('/assets/madboys.screen.08.rewards/14%20-%20mb_back4h-1600.webp') !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.site-final .content,
  body.site-final :is(.usp-scroll, .faq-list) {
    scroll-behavior: auto !important;
  }
}

/* V9 desktop cleanup requested after the unified responsive pass. */
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) {
  body.madboys-site.site-final.site-production .desktop-nav a.active {
    color: #111827 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  }

  body.madboys-site.site-final.site-production section.home .stats-row {
    display: none !important;
  }

  body.madboys-site.site-final.site-production section.home .view-rewards-button {
    isolation: isolate !important;
  }

  body.madboys-site.site-final.site-production section.home .founder-strip .view-rewards-art {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
    filter: none !important;
  }

  body.madboys-site.site-final.site-production section.home .view-rewards-text {
    color: #09266f !important;
    z-index: 2 !important;
  }

  body.madboys-site.site-final.site-production section.builds .artifact-row {
    display: none !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row {
    top: clamp(452px, 57dvh, 520px) !important;
    bottom: clamp(22px, 3.5dvh, 36px) !important;
    height: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row article {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(96px, 1fr) auto auto !important;
    grid-template-areas: none !important;
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 12px !important;
    text-align: center !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 96px !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row b {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 8px 12px 3px !important;
    font-size: clamp(13px, 1.05vw, 17px) !important;
    text-align: center !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row small {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 12px !important;
    font-size: clamp(9px, 0.72vw, 12px) !important;
    text-align: center !important;
  }

  body.madboys-site.site-final.site-production section.council .flow-row {
    display: none !important;
  }

  body.madboys-site.site-final.site-production section.stories .fate-cards {
    top: auto !important;
    bottom: clamp(24px, 3.4dvh, 38px) !important;
    height: clamp(122px, 17dvh, 158px) !important;
  }

  body.madboys-site.site-final.site-production section.stories .fate-cards article,
  body.madboys-site.site-final.site-production section.stories .fate-cards img {
    height: 100% !important;
  }

  body.madboys-site.site-final.site-production section.blood .blood-cards {
    display: none !important;
  }

  body.madboys-site.site-final.site-production section.blood .blood-power {
    display: block !important;
    color: #eef2f8 !important;
    background:
      linear-gradient(90deg, rgba(91, 137, 184, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(20, 31, 49, 0.98), rgba(7, 12, 22, 0.99)) !important;
    border: 1px solid rgba(100, 137, 181, 0.62) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  }

  body.madboys-site.site-final.site-production section.blood .blood-power h4 {
    color: #eef2f8 !important;
    background: rgba(6, 11, 20, 0.78) !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92) !important;
  }
}

/* V10 — intermediate audit cleanup.
   Portrait/square layouts inherit the mobile hierarchy; horizontal layouts
   inherit the desktop hierarchy. Secondary modules never win over fit. */
@media (min-width: 600px) and (max-width: 1499px),
       (min-aspect-ratio: 6/5) and (max-height: 599px) {
  html,
  body.madboys-site.site-final {
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #05070d !important;
    scroll-snap-type: y proximity !important;
  }

  body.madboys-site.site-final .site,
  body.madboys-site.site-final .screen,
  body.madboys-site.site-final .canvas {
    background-color: #05070d !important;
  }

  body.madboys-site.site-final .site {
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.madboys-site.site-final .screen {
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
  }

  body.madboys-site.site-final .screen .canvas::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 42% 0 0 !important;
    height: auto !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(4, 7, 14, 0) 0%,
      rgba(4, 7, 14, 0.2) 24%,
      rgba(5, 8, 16, 0.7) 58%,
      rgba(5, 8, 15, 0.94) 84%,
      #05070d 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.madboys-site.site-final .screen .content {
    z-index: 5 !important;
  }

  body.madboys-site.site-final.site-production section.home .stats-row,
  body.madboys-site.site-final.site-production section.builds .artifact-row,
  body.madboys-site.site-final.site-production section.council .flow-row,
  body.madboys-site.site-final.site-production section.stories .shift,
  body.madboys-site.site-final.site-production section.stories .section-kicker,
  body.madboys-site.site-final.site-production section.stories .journey-row,
  body.madboys-site.site-final.site-production section.stories .story-ai-trigger,
  body.madboys-site.site-final.site-production section.blood .blood-cards {
    display: none !important;
  }

  body.madboys-site.site-final.site-production section.blood .blood-power {
    display: block !important;
    color: #eef2f8 !important;
    background:
      linear-gradient(90deg, rgba(91, 137, 184, 0.08), transparent 34%),
      linear-gradient(180deg, rgba(20, 31, 49, 0.98), rgba(7, 12, 22, 0.99)) !important;
    border: 1px solid rgba(100, 137, 181, 0.62) !important;
  }

  body.madboys-site.site-final.site-production section.blood .blood-power h4 {
    color: #eef2f8 !important;
    background: rgba(6, 11, 20, 0.78) !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92) !important;
  }

  body.madboys-site.site-final.site-production section.stories .fate-cards {
    top: auto !important;
    bottom: clamp(24px, 3.4dvh, 38px) !important;
    height: clamp(112px, 16dvh, 154px) !important;
  }

  body.madboys-site.site-final.site-production section.stories .fate-cards article,
  body.madboys-site.site-final.site-production section.stories .fate-cards img {
    height: 100% !important;
  }
}

/* Horizontal intermediate screens use the desktop card hierarchy, with the
   redundant rows removed and the primary cards occupying the released space. */
@media (min-width: 600px) and (max-width: 1499px) and
       (min-height: 600px) and (min-aspect-ratio: 1.001/1) {
  body.madboys-site.site-final.site-production section.builds .ability-row {
    top: clamp(418px, 55dvh, 505px) !important;
    bottom: clamp(22px, 3.5dvh, 34px) !important;
    height: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row article {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(88px, 1fr) auto auto !important;
    grid-template-areas: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 10px !important;
    text-align: center !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 88px !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row b,
  body.madboys-site.site-final.site-production section.builds .ability-row small {
    grid-column: 1 !important;
    text-align: center !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row b {
    grid-row: 2 !important;
    margin: 7px 10px 2px !important;
  }

  body.madboys-site.site-final.site-production section.builds .ability-row small {
    grid-row: 3 !important;
    margin: 0 10px !important;
  }

  body.madboys-site.site-final.site-production section.stories {
    height: 100dvh !important;
    min-height: 760px !important;
  }
}

/* Rewards cannot sustain its desktop two-column composition below 1180px.
   Keep the banner and FAQ, and remove the two secondary grids. */
@media (min-width: 600px) and (max-width: 1179px),
       (min-aspect-ratio: 6/5) and (max-height: 599px) {
  body.madboys-site.site-final.site-production section.rewards .rewards-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: clamp(8px, 1.4dvh, 14px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.madboys-site.site-final.site-production section.rewards .reward-grid,
  body.madboys-site.site-final.site-production section.rewards .benefits-row {
    display: none !important;
  }

  body.madboys-site.site-final.site-production section.rewards .explore-link-wrap.gift-toggle {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: min(700px, 100%) !important;
    min-width: 0 !important;
    height: clamp(136px, 20dvh, 188px) !important;
    min-height: 136px !important;
    max-height: 188px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
  }

  body.madboys-site.site-final.site-production section.rewards .explore-link-wrap.gift-toggle .reward-hero {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  body.madboys-site.site-final.site-production section.rewards .faq-list {
    position: relative !important;
    inset: auto !important;
    width: min(700px, 100%) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 180px !important;
    max-height: none !important;
    margin: 0 auto !important;
    flex: 1 1 0 !important;
    overflow-y: auto !important;
  }
}

/* Localized desktop slogan variant; the approved mobile/tablet copy stays intact. */
body.madboys-site.site-final.site-production section.home .hero-slogan .slogan-desktop {
  display: none;
}

/* V11 — premium desktop Home composition.
   This layer intentionally starts above the tablet/intermediate tiers. */
@media (min-width: 1024px) and (min-height: 760px) and (min-aspect-ratio: 4/3) {
  body.madboys-site.site-final.site-production section.home .hero-slogan .slogan-mobile {
    display: none !important;
  }

  body.madboys-site.site-final.site-production section.home .hero-slogan .slogan-desktop {
    display: inline !important;
  }

  body.madboys-site.site-final.site-production .global-topbar {
    left: 50% !important;
    right: auto !important;
    top: 12px !important;
    width: min(1280px, calc(100vw - 44px)) !important;
    height: 66px !important;
    transform: translateX(-50%) !important;
    padding: 0 18px 0 22px !important;
    gap: clamp(14px, 1.25vw, 24px) !important;
    border-color: rgba(102, 153, 211, 0.42) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      0 0 28px rgba(52, 130, 207, 0.13) !important;
  }

  body.madboys-site.site-final.site-production .global-topbar .brandmark {
    min-width: 188px !important;
    gap: 10px !important;
  }

  body.madboys-site.site-final.site-production .global-topbar .brandmark img {
    width: 43px !important;
    height: 49px !important;
    filter: drop-shadow(0 0 8px rgba(137, 75, 255, 0.75)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55)) !important;
  }

  body.madboys-site.site-final.site-production .global-topbar .brandmark b {
    font-size: 21px !important;
    letter-spacing: 0.7px !important;
  }

  body.madboys-site.site-final.site-production .desktop-nav {
    flex: 1 1 auto !important;
    justify-content: center !important;
    gap: clamp(8px, 0.75vw, 14px) !important;
  }

  body.madboys-site.site-final.site-production .desktop-nav a {
    min-width: 62px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 5px 7px 4px !important;
    font-size: 11px !important;
  }

  body.madboys-site.site-final.site-production .desktop-nav a::before {
    transform: scale(1.12) !important;
    transform-origin: center bottom !important;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.2)) !important;
  }

  body.madboys-site.site-final.site-production .desktop-nav a.active {
    color: #17120a !important;
    background:
      radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.82), transparent 32%),
      linear-gradient(180deg, #ffe16b 0%, #ffc328 48%, #e68b00 100%) !important;
    border: 1px solid #ffe98a !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.72),
      inset 0 -5px 0 rgba(142, 73, 0, 0.26),
      0 0 18px rgba(255, 185, 24, 0.58),
      0 7px 13px rgba(0, 0, 0, 0.38) !important;
  }

  body.madboys-site.site-final.site-production .header-prereg-cta {
    width: clamp(164px, 13vw, 188px) !important;
    height: 52px !important;
    filter: drop-shadow(0 0 11px rgba(255, 184, 21, 0.64)) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.42)) !important;
  }

  body.madboys-site.site-final.site-production .top-actions {
    gap: 10px !important;
  }

  body.madboys-site.site-final.site-production .top-actions .round-icon {
    width: 48px !important;
    height: 48px !important;
  }

  body.madboys-site.site-final.site-production section.home .home-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  body.madboys-site.site-final.site-production section.home .title-madboys {
    position: absolute !important;
    left: 50% !important;
    top: clamp(84px, 9.8dvh, 108px) !important;
    width: clamp(560px, 43vw, 660px) !important;
    height: clamp(94px, 11.2dvh, 124px) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    filter:
      drop-shadow(0 5px 2px rgba(41, 24, 2, 0.68))
      drop-shadow(0 0 12px rgba(255, 205, 75, 0.42)) !important;
    z-index: 15 !important;
  }

  body.madboys-site.site-final.site-production section.home .gold-title {
    position: absolute !important;
    left: 50% !important;
    top: clamp(172px, 20.2dvh, 218px) !important;
    width: min(620px, 48vw) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    font-size: clamp(24px, 2vw, 31px) !important;
    letter-spacing: 2.4px !important;
    color: #ffc44c !important;
    text-shadow: 0 2px 0 #6c3600, 0 0 11px rgba(255, 185, 46, 0.55), 0 4px 8px rgba(0, 0, 0, 0.56) !important;
    z-index: 16 !important;
  }

  body.madboys-site.site-final.site-production section.home .hero-slogan {
    position: absolute !important;
    left: 50% !important;
    top: clamp(214px, 25.5dvh, 264px) !important;
    width: min(1040px, 78vw) !important;
    max-width: none !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 11px 42px !important;
    transform: translateX(-50%) !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: clamp(16px, 1.25vw, 19px) !important;
    line-height: 30px !important;
    letter-spacing: 0.2px !important;
    color: #f7f8fb !important;
    background:
      radial-gradient(circle at 50% 0, rgba(43, 91, 148, 0.22), transparent 64%),
      linear-gradient(180deg, rgba(15, 28, 48, 0.96), rgba(5, 11, 22, 0.97)) !important;
    border: 1px solid rgba(99, 147, 203, 0.32) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.32) !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95) !important;
    z-index: 24 !important;
  }

  body.madboys-site.site-final.site-production section.home .hero-slogan .slogan-gold {
    color: #ffc340 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 10px rgba(255, 187, 40, 0.36), 0 2px 3px rgba(0, 0, 0, 0.95) !important;
  }

  body.madboys-site.site-final.site-production section.home .hero-team {
    position: absolute !important;
    left: 50% !important;
    top: clamp(240px, 29dvh, 302px) !important;
    width: min(1120px, 87vw) !important;
    max-width: none !important;
    height: clamp(430px, 55dvh, 580px) !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    object-position: center top !important;
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.44)) !important;
    z-index: 17 !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards {
    position: absolute !important;
    left: 50% !important;
    top: clamp(480px, 61dvh, 620px) !important;
    width: min(1120px, calc(100vw - 150px)) !important;
    height: clamp(112px, 13.3dvh, 146px) !important;
    min-height: 112px !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.3vw, 22px) !important;
    overflow: visible !important;
    z-index: 34 !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card {
    min-height: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: clamp(96px, 8vw, 122px) minmax(0, 1fr) 38px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: "icon title arrow" "icon text arrow" !important;
    column-gap: clamp(12px, 1.2vw, 18px) !important;
    row-gap: 5px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    text-align: left !important;
    border: 2px solid rgba(85, 148, 212, 0.68) !important;
    border-left-width: 4px !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 16% 50%, rgba(49, 126, 208, 0.22), transparent 28%),
      radial-gradient(circle at 100% 0, rgba(98, 116, 194, 0.18), transparent 42%),
      linear-gradient(145deg, rgba(26, 52, 82, 0.98), rgba(8, 20, 36, 0.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -10px 24px rgba(0, 0, 0, 0.16),
      0 15px 30px rgba(0, 0, 0, 0.42) !important;
    overflow: hidden !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card:nth-child(2) {
    transform: translateY(-8px) !important;
    border-color: rgba(137, 111, 210, 0.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 24px rgba(118, 78, 214, 0.2),
      0 18px 34px rgba(0, 0, 0, 0.46) !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card img {
    grid-area: icon !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 104px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 0 19px rgba(58, 153, 255, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card h3 {
    grid-area: title !important;
    align-self: end !important;
    margin: 0 !important;
    font-size: clamp(16px, 1.25vw, 19px) !important;
    line-height: 1.04 !important;
    text-align: left !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card p {
    grid-area: text !important;
    align-self: start !important;
    margin: 0 !important;
    font-size: clamp(10px, 0.78vw, 12px) !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card::after {
    grid-area: arrow !important;
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    border-radius: 50% !important;
    color: #123879 !important;
    background: linear-gradient(180deg, #fff9d9, #ffc83e) !important;
    border: 2px solid #ffca35 !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 5px 10px rgba(0, 0, 0, 0.34) !important;
    font-size: 20px !important;
  }

  body.madboys-site.site-final.site-production section.home .founder-strip {
    position: absolute !important;
    left: 50% !important;
    top: clamp(606px, 76dvh, 770px) !important;
    width: min(1120px, calc(100vw - 150px)) !important;
    height: clamp(86px, 10.4dvh, 114px) !important;
    min-height: 86px !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    grid-template-columns: clamp(108px, 9vw, 138px) minmax(0, 1fr) clamp(202px, 18vw, 236px) !important;
    gap: 12px !important;
    padding: 8px 16px !important;
    border: 1.5px solid rgba(103, 142, 190, 0.62) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 12% 50%, rgba(202, 137, 33, 0.13), transparent 24%),
      linear-gradient(145deg, rgba(18, 27, 43, 0.98), rgba(5, 10, 19, 0.99)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(0, 0, 0, 0.42) !important;
    z-index: 36 !important;
  }

  body.madboys-site.site-final.site-production section.home .founder-strip > img {
    width: 100% !important;
    height: 100% !important;
    max-height: 90px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 16px rgba(255, 178, 30, 0.65)) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45)) !important;
  }

  body.madboys-site.site-final.site-production section.home .founder-strip b {
    font-size: clamp(20px, 1.55vw, 24px) !important;
    line-height: 1 !important;
  }

  body.madboys-site.site-final.site-production section.home .founder-strip small {
    margin-top: 5px !important;
    font-size: clamp(10px, 0.86vw, 13px) !important;
    line-height: 1.18 !important;
  }

  body.madboys-site.site-final.site-production section.home .view-rewards-button {
    position: relative !important;
    width: 100% !important;
    height: clamp(58px, 7dvh, 72px) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.72), transparent 35%),
      linear-gradient(180deg, #ffe56c 0%, #ffc026 48%, #e98d00 100%) !important;
    border: 2px solid #ffe273 !important;
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.75),
      inset 0 -6px 0 rgba(133, 66, 0, 0.24),
      0 0 20px rgba(255, 183, 31, 0.42),
      0 9px 17px rgba(0, 0, 0, 0.36) !important;
    overflow: hidden !important;
  }

  body.madboys-site.site-final.site-production section.home .founder-strip .view-rewards-art {
    opacity: 0.16 !important;
    filter: sepia(1) saturate(1.35) hue-rotate(345deg) brightness(1.06) !important;
  }

  body.madboys-site.site-final.site-production section.home .view-rewards-text {
    color: #102c62 !important;
    font-size: clamp(16px, 1.3vw, 20px) !important;
    line-height: 0.95 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  }

  body.madboys-site.site-final.site-production section.home .view-rewards-button::after {
    font-size: 30px !important;
    color: #0f4dc4 !important;
  }

  body.madboys-site.site-final.site-production section.home .founder-slogan {
    display: none !important;
  }
}

/* V12 — unified desktop working width and more confident UI typography. */
@media (min-width: 1024px) and (min-height: 760px) and (min-aspect-ratio: 4/3) {
  body.madboys-site.site-final.site-production {
    --v12-work-w: var(--content-safe-w);
  }

  /* The navigation now follows the same horizontal frame as the working UI. */
  body.madboys-site.site-final.site-production .global-topbar,
  body.madboys-site.site-final.site-production section.home .home-cards,
  body.madboys-site.site-final.site-production section.home .founder-strip {
    width: var(--v12-work-w) !important;
  }

  body.madboys-site.site-final.site-production .global-topbar {
    padding-inline: 16px !important;
    gap: clamp(10px, 0.9vw, 17px) !important;
  }

  body.madboys-site.site-final.site-production .global-topbar .brandmark {
    min-width: 174px !important;
  }

  body.madboys-site.site-final.site-production .desktop-nav {
    gap: clamp(5px, 0.48vw, 9px) !important;
  }

  body.madboys-site.site-final.site-production .desktop-nav a {
    min-width: 58px !important;
    padding-inline: 5px !important;
  }

  body.madboys-site.site-final.site-production .header-prereg-cta {
    width: clamp(158px, 12vw, 178px) !important;
  }

  /* Reference composition: a compact ribbon close to the logo, sized by copy. */
  body.madboys-site.site-final.site-production section.home .hero-slogan {
    top: clamp(205px, 24dvh, 264px) !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 180px) !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 10px 34px !important;
    line-height: 28px !important;
    font-size: clamp(17px, 1.2vw, 20px) !important;
  }

  /* Extend the three primary features downward, leaving only a small rhythm gap. */
  body.madboys-site.site-final.site-production section.home .home-cards {
    height: clamp(118px, 14.2dvh, 144px) !important;
    min-height: 118px !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card {
    padding-block: 13px !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card img {
    max-height: 112px !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card h3 {
    font-size: clamp(18px, 1.28vw, 21px) !important;
  }

  body.madboys-site.site-final.site-production section.home .home-cards .feature-card p {
    font-size: clamp(11px, 0.82vw, 13px) !important;
    line-height: 1.2 !important;
  }

  /* Shared desktop type scale for readable game panels on every screen. */
  body.madboys-site.site-final.site-production section:not(.home) :is(
    .feature-card h3,
    .item-card b,
    .ruler-cards h3,
    .ability-row b,
    .journey-step b,
    .process-row h3
  ) {
    font-size: clamp(13px, 1vw, 17px) !important;
    line-height: 1.08 !important;
  }

  body.madboys-site.site-final.site-production section:not(.home) :is(
    .feature-card p,
    .item-card small,
    .ruler-cards p,
    .ability-row small,
    .journey-step small,
    .process-row p
  ) {
    font-size: clamp(9px, 0.72vw, 12px) !important;
    line-height: 1.2 !important;
  }

  body.madboys-site.site-final.site-production section :is(.ribbon, .section-kicker) {
    font-size: clamp(15px, 1.08vw, 18px) !important;
  }

  body.madboys-site.site-final.site-production section :is(.mini-panel h4, .influence h4, .blood-power h4) {
    font-size: clamp(12px, 0.88vw, 15px) !important;
    line-height: 1.1 !important;
  }
}

/* Intermediate layouts inherit the clearer type hierarchy without forcing
   desktop density onto vertical/mobile compositions. */
@media (min-width: 600px) and (max-width: 1199px) and (min-height: 600px) {
  body.madboys-site.site-final.site-production section :is(
    .feature-card h3,
    .item-card b,
    .ruler-cards h3,
    .ability-row b,
    .journey-step b
  ) {
    font-size: clamp(11px, 1.4vw, 14px) !important;
    line-height: 1.08 !important;
  }

  body.madboys-site.site-final.site-production section :is(
    .feature-card p,
    .item-card small,
    .ruler-cards p,
    .ability-row small,
    .journey-step small
  ) {
    font-size: clamp(8px, 1.05vw, 10.5px) !important;
    line-height: 1.16 !important;
  }

  body.madboys-site.site-final.site-production section :is(.ribbon, .section-kicker) {
    font-size: clamp(13px, 1.7vw, 16px) !important;
  }
}

/* V13 — five supplied horizontal backgrounds.
   Portrait and square compositions deliberately keep their existing artwork. */
@media (min-aspect-ratio: 1.001/1) {
  body.site-final.site-production section.missions .canvas,
  body.site-final.site-production section.missions .spread-art {
    background-image: url('/assets/madboys.screen.02.missions/desktop-background-v13.webp') !important;
  }

  body.site-final.site-production section.builds .canvas,
  body.site-final.site-production section.builds .spread-art {
    background-image: url('/assets/madboys.screen.03.builds/desktop-background-v13.webp') !important;
  }

  body.site-final.site-production section.stories .canvas,
  body.site-final.site-production section.stories .spread-art {
    background-image: url('/assets/madboys.screen.05.stories/desktop-background-v13.webp') !important;
  }

  body.site-final.site-production section.expansion .canvas,
  body.site-final.site-production section.expansion .spread-art {
    background-image: url('/assets/madboys.screen.06.expansion/desktop-background-v13.webp') !important;
  }

  body.site-final.site-production section.rewards .canvas,
  body.site-final.site-production section.rewards .spread-art {
    background-image: url('/assets/madboys.screen.08.rewards/desktop-background-v13.webp') !important;
  }

  body.site-final.site-production :is(
    section.missions,
    section.builds,
    section.stories,
    section.expansion,
    section.rewards
  ) :is(.canvas, .spread-art) {
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
}