/* MU97 home. Desktop geometry follows the measured portal reference. */
:is(body.mu97-portal, .mu97-portal-header) {
    --portal-font: "Segoe UI", -apple-system, system-ui, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --portal-accent: #ae3b17;
    --portal-ink: #222;
    --portal-muted: #626262;
    --portal-rule: #d1d1d1;
    --portal-menu-height: 80px;
    --portal-utility-height: 44px;
    --portal-hero-height: 760px;
    --portal-paging-height: 100px;
}
body.mu97-portal {
    background: #171717;
    font-family: var(--portal-font);
}
.mu97-portal .mu97-main { width: 100%; max-width: none; margin: calc(-1 * var(--portal-menu-height)) 0 0; padding: 0; }
.mu97-portal-shell { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.mu97-portal-header { position: sticky; top: calc(-1 * var(--portal-utility-height)); z-index: 20; }
.mu97-portal-header--single { top: 0; }
.mu97-utility { background: #171717; }
.mu97-utility-inner, .mu97-portal-nav-inner { width: min(1200px, calc(100% - 64px)); margin: auto; display: flex; align-items: center; }
.mu97-utility-inner { min-height: var(--portal-utility-height); gap: 28px; }
.mu97-utility-inner a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--portal-utility-height); color: #b6b6b6; text-transform: uppercase; font: 600 12px/1 var(--portal-font); }
.mu97-utility-inner .mu97-network { width: 105px; color: #f0f0f0; font-size: 20px; font-style: italic; letter-spacing: .05em; }
.mu97-portal-account { margin-left: auto; display: flex; gap: 10px; }
.mu97-portal-account .mu97-register-link span { border: 1px solid #bf4928; color: #e07151; padding: 3px 4px; }
.mu97-portal-menu { background: linear-gradient(#000f, #0009); }
.mu97-portal-nav-inner { min-height: var(--portal-menu-height); }
.mu97-portal-menu .mu97-brand { flex: 0 0 14.4167%; }
.mu97-portal-menu .mu97-brand img { width: 124px; height: auto; }
.mu97-portal-header .mu97-navigation { display: grid; flex: 1; grid-template-columns: 149fr 160fr 160fr 143fr 149fr 116fr; align-items: stretch; gap: 0; }
.mu97-portal-header .mu97-navigation > a, .mu97-portal-header .mu97-navigation > details > summary {
    display: flex; align-items: center; justify-content: center; padding: 0 20px; min-height: var(--portal-menu-height);
    color: #bdbdbd; font: 400 18px/18px var(--portal-font); text-align: center; white-space: normal;
}
.mu97-portal-header .mu97-navigation > details > summary::after { content: none; }
.mu97-portal-header .mu97-navigation > details > div { left: 0; right: auto; background: #111; border-color: #373737; font: 14px/1.2 var(--portal-font); }
.mu97-portal-header .mu97-navigation a:hover, .mu97-portal-header .mu97-navigation summary:hover { color: #fff; }
.mu97-portal-header .mu97-portal-play {
    display: inline-flex; justify-content: flex-end; align-items: center; flex: 0 0 12.5%; min-height: var(--portal-menu-height);
    color: #df6742; font: 600 18px/18px var(--portal-font); text-transform: uppercase;
}
.mu97-portal-header .mu97-portal-play:hover { color: #ff9a7b; }
.mu97-portal-header--single .mu97-navigation { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mu97-portal-header--single .mu97-navigation > a,
.mu97-portal-header--single .mu97-navigation > details > summary { padding-inline: 10px; }
.mu97-portal-header--single .mu97-more--account > div { right: 0; left: auto; }
.mu97-features { background: #101014; }
.mu97-feature { position: relative; isolation: isolate; height: var(--portal-hero-height); }
.mu97-feature[hidden] { display: none; }
.mu97-feature-art, .mu97-feature::after { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.mu97-feature-art { object-fit: cover; object-position: 68% center; }
.mu97-feature::after { content: ''; background: linear-gradient(90deg,#090810b8 0%,#0a0a125c 43%,transparent 72%), linear-gradient(0deg,#0f1014b3,transparent 33%); }
.mu97-feature-link { display: grid; align-items: center; height: 100%; color: #fff; }
.mu97-feature-link:hover { color: #fff; text-decoration: none; }
.mu97-feature-link:focus-visible { outline-offset: -5px; }
.mu97-feature-story { width: min(1090px, calc(100% - 144px)); color: #fff; }
.mu97-feature h1, .mu97-feature h2 { max-width: 580px; margin: 0; color: #fff; font: italic 700 48px/1.3 var(--portal-font); letter-spacing: normal; overflow-wrap: anywhere; }
.mu97-feature p { margin: 25px 0 0; max-width: 580px; color: #fff; font: italic 400 28px/1 var(--portal-font); }
.mu97-feature-counter { position: absolute; bottom: calc(var(--portal-paging-height) + 30px); right: max(72px,calc((100% - 1092px) / 2)); padding: 6px 25px 8px; border-radius: 40px; background: #0f1014cc; color: #aaa; display: flex; align-items: baseline; height: 46px; font: 18px/32px var(--portal-font); }
.mu97-feature-counter strong { color: #df6e47; font: 400 32px/32px var(--portal-font); }
.mu97-feature-strip { position: relative; margin-top: calc(-1 * var(--portal-paging-height)); background: #0f1014cc; }
.mu97-feature-strip-inner { width: min(1200px, calc(100% - 64px)); margin: auto; display: grid; grid-template-columns: 32px minmax(0,1fr) 32px; align-items: center; gap: 20px; }
.mu97-feature-arrow { display: grid; place-items: center; min-height: 50px; padding: 0; color: #eee; border: 1px solid #ffffff24; border-radius: 2px; background: #000c; font: 32px/1 var(--portal-font); }
.mu97-feature-arrow:hover { background: #54281b; }
.mu97-portal .mu97-feature-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); width: 100%; gap: 4px; margin: 0; padding: 0 2px; }
.mu97-portal .mu97-feature-tabs button {
    position: relative; isolation: isolate; min-width: 0; height: var(--portal-paging-height); display: flex; align-items: center;
    padding: 10px 14px 10px 20px; border: 0; border-radius: 0; background: #212531; color: #fff;
    font: italic 400 14px/1 var(--portal-font); text-align: left;
}
.mu97-portal .mu97-feature-tabs button:hover { background: #383640; }
.mu97-portal .mu97-feature-tabs button[aria-selected="true"] { background: #d76440; color: #fff; }
.mu97-portal .mu97-feature-tabs button:focus-visible, .mu97-feature-arrow:focus-visible { outline-offset: -4px; }
.mu97-feature-tabs img { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 45%; height: 100%; object-fit: cover; object-position: right center; mask-image: linear-gradient(90deg,transparent,#000 28%); }
.mu97-feature-tabs span { max-width: 65%; overflow-wrap: anywhere; }
.mu97-portal-content { background: #fff; color: var(--portal-ink); color-scheme: light; }
.mu97-portal-content h2, .mu97-portal-content h3, .mu97-portal-content h4 { color: var(--portal-ink); }
.mu97-portal-content a { color: #84321f; }
.mu97-portal-content a:hover { color: #622113; text-decoration: underline; }
.mu97-portal-content :focus-visible { outline-color: #943722; }
.mu97-portal :is(#mu97-notices,#mu97-ranking-title,#mu97-events,#mu97-play) { scroll-margin-top: 100px; }

.mu97-launch-dock { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--portal-rule); padding: 10px 0; }
.mu97-launch-title { display: flex; align-items: center; gap: 9px; color: #333; font-size: 13px; }
.mu97-launch-title small { display: none; }
.mu97-platform-links { display: flex; gap: 6px; }
.mu97-platform-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #333; }
.mu97-platform-links a span { color: var(--portal-accent); }
.mu97-portal-grid, .mu97-competitive-grid { display: grid; gap: 30px; align-items: start; }
.mu97-portal-grid { min-height: 449px; padding-block: 60px 50px; grid-template-columns: 540fr 492fr; gap: min(7.33%,85px); padding-right: min(3.7%,43px); }
.mu97-competitive { background: #e7e7e7; }
.mu97-competitive-grid { grid-template-columns: 400fr 400fr 300fr; padding-block: 70px 58px; }
.mu97-competitive-grid > * { min-width: 0; }
.mu97-portal-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; }
.mu97-portal-heading h2 { margin: 0; font: italic 400 20px/1 var(--portal-font); }
.mu97-portal-heading .mu97-kicker { display: none; }
.mu97-portal-content .mu97-section-more { color: #646464; font: italic 400 16px/1 var(--portal-font); }
.mu97-notice-list, .mu97-event-results { margin: 0; padding: 0; list-style: none; }
.mu97-notice-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; min-height: 55px; border-bottom: 1px solid var(--portal-rule); }
.mu97-notice-list a { color: var(--portal-ink); overflow-wrap: anywhere; }
.mu97-notice-kind { flex: none; color: #873421; padding: 3px 7px; border: 1px solid #ba806f; width: 110px; text-align: center; font-size: 12px; }
.mu97-notice-list time { margin-left: auto; white-space: nowrap; color: var(--portal-muted); font-size: 12px; }
.mu97-notice-empty { display: flex; align-items: flex-start; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--portal-rule); }
.mu97-notice-empty > i { color: #9b452d; margin-top: 3px; }
.mu97-notice-empty h4 { font: 700 15px/1.4 Arial,sans-serif; }
.mu97-notice-empty p { margin: 0 0 10px; color: var(--portal-muted); font-size: 14px; }
.mu97-notice-empty a, .mu97-ranking-link { font-size: 13px; font-weight: 700; }
.mu97-portal-market .informa-head-ranking { display: none; }
.mu97-portal-market .carousel1 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 4px; }
.mu97-portal-market .carousel1-item { display: block; min-width: 0; padding: 0; }
.mu97-portal-market .item-card { padding: 6px; min-height: 0; height: 100%; background: #fff; border: 1px solid #d4d4d4; box-shadow: 0 4px 5px #0002; color: #252525; }
.mu97-portal-market .item-card .image-container { width: 100%; height: 80px; margin: 0; }
.mu97-portal-market .item-card img { max-width: 90%; max-height: 62px; object-fit: contain; }
.mu97-portal-market .item-card p { font-size: 12px; overflow-wrap: anywhere; margin: 5px 0; }
.mu97-portal-market .item-card small { color: #a54827; font-weight: 700; }
.mu97-store-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.mu97-store-links a { display: flex; align-items: center; gap: 10px; padding: 16px 10px; border: 1px solid #ddd; background: #f7f7f7; font-weight: 700; }
.mu97-portal .mu97-leaderboard { margin: 0; background: transparent; border: 0; padding: 0; box-shadow: none; }
.mu97-portal .mu97-leaderboard .mu97-ranking-tabs { display: flex; margin: 10px 0 4px; gap: 4px; padding: 0; }
.mu97-portal .mu97-leaderboard .mu97-ranking-tabs button { min-height: 40px; padding: 0 12px; background: #fff; border: 1px solid #ccc; color: #222; font: 700 13px Arial,sans-serif; }
.mu97-portal .mu97-leaderboard .mu97-ranking-tabs button[aria-selected="true"] { color: #fff; background: #5d67b1; border-color: #5d67b1; }
.mu97-competitive-grid .mu97-portal-heading h2 { font-size: 32px; }
#mu97-ranking-title { color: #5d67b1; }
#mu97-events-title { color: #377182; }
#mu97-market-title { color: #a94a2a; }
.mu97-portal-market .carousel1-item > a { display: block; height: 100%; }
.mu97-portal .mu97-leaderboard [role=tabpanel] { padding-inline: 0; }
.mu97-rank-ledger { margin: 0 0 12px; }
.mu97-rank-ledger > div, .mu97-event-results li, .mu97-guide-links a { display: flex; align-items: center; gap: 8px; padding: 8px 0; min-height: 42px; border-bottom: 1px solid var(--portal-rule); font-size: 13px; }
.mu97-rank-ledger > div { justify-content: space-between; }
.mu97-rank-ledger dd { display: flex; gap: 7px; margin: 0; }
.mu97-rank-ledger small, .mu97-event-results small { color: var(--portal-muted); }
.mu97-event-caption { margin: 10px 0 0; padding: 8px 12px; background: #3d7585; color: #fff; font: 700 13px Arial,sans-serif; }
.mu97-event-results i { color: #7e331f; width: 18px; text-align: center; }
.mu97-event-results strong { margin-right: 8px; }
.mu97-guide-links a { justify-content: space-between; color: #252525; }
.mu97-portal .mu97-community { margin: 0; width: 100%; max-width: none; padding-inline: max(24px,calc((100vw - 1152px)/2)); border: 0; background: #222; }
@media (max-width: 1100px) {
    :is(body.mu97-portal, .mu97-portal-header) { --portal-menu-height: 66px; }
    .mu97-utility-inner, .mu97-portal-nav-inner, .mu97-portal-shell { width: calc(100% - 40px); }
    .mu97-portal-nav-inner { gap: 14px; }
    .mu97-portal-nav-inner .mu97-portal-play { margin-left: auto; flex: none; }
    .mu97-portal-header .mu97-menu-toggle { display: block; }
    .mu97-portal-header .mu97-navigation { display: none; }
    .mu97-portal-header .mu97-navigation.is-open {
        display: flex; flex-direction: column; gap: 0; position: absolute; z-index: 30; top: 100%; left: 0; right: 0;
        width: 100%; max-height: 75vh; overflow: auto; padding: 6px 20px; background: #171717; border-bottom: 1px solid #555;
    }
    .mu97-portal-header .mu97-navigation > a, .mu97-portal-header .mu97-navigation > details > summary { justify-content: flex-start; min-height: 44px; }
    .mu97-portal-header .mu97-navigation > details > summary::after { content: '⌄'; }
    .mu97-portal-header .mu97-navigation > details > div { position: static; }
    .mu97-portal .mu97-portal-grid, .mu97-competitive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
    .mu97-feature-story { width: calc(100% - 100px); }
    .mu97-feature-strip-inner { width: calc(100% - 40px); gap: 8px; }
}
@media (max-width: 640px) {
    body.mu97-portal { --portal-hero-height: 510px; --portal-paging-height: 66px; }
    .mu97-utility-inner, .mu97-portal-nav-inner, .mu97-portal-shell { width: calc(100% - 32px); }
    .mu97-utility-inner { gap: 12px; }
    .mu97-utility-inner > a:not(.mu97-network) { display: none; }
    .mu97-portal-menu .mu97-brand img { width: 98px; }
    .mu97-feature-link { align-items: end; padding-bottom: 130px; }
    .mu97-feature-art { object-position: 74% center; }
    .mu97-feature::after { background: linear-gradient(0deg,#08090def 0%,#090c13ad 35%,#11121922 78%); }
    .mu97-feature h1, .mu97-feature h2 { font-size: clamp(32px, 9vw, 43px); line-height: 1.12; }
    .mu97-feature p { margin-top: 12px; font-size: 18px; line-height: 1.25; }
    .mu97-feature-counter { right: 16px; bottom: 76px; padding: 2px 12px; }
    .mu97-feature-counter strong { font-size: 24px; }
    .mu97-feature-strip-inner { width: 100%; gap: 2px; grid-template-columns: 32px minmax(0,1fr) 32px; }
    .mu97-portal .mu97-feature-tabs { gap: 2px; }
    .mu97-portal .mu97-feature-tabs button { font-size: 12px; text-align: center; padding: 4px; justify-content: center; }
    .mu97-feature-tabs span { max-width: 100%; }
    .mu97-feature-tabs img { display: none; }
    .mu97-launch-dock { flex-wrap: wrap; gap: 0; padding-block: 11px 3px; }
    .mu97-platform-links { width: 100%; justify-content: space-between; }
    .mu97-platform-links a { padding-inline: 6px; }
    .mu97-portal .mu97-portal-grid, .mu97-competitive-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 32px; min-height: 0; }
    .mu97-portal-market .carousel1 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
