/* =========================================================
   SCORCHED DIVIDE — HOME SCREEN
   Command column on the left, the selected theater as a live
   full-bleed backdrop on the right. Loaded after style.css and
   scoped to #main-menu so it never touches the in-match HUD.
   ========================================================= */


#main-menu {
    --ink: #0f151c;
    --panel: rgba(17, 24, 32, 0.78);
    --panel-solid: #141c25;
    --line: rgba(232, 226, 212, 0.14);
    --line-strong: rgba(232, 226, 212, 0.28);
    --bone: #e8e2d4;
    --haze: #98a2ac;
    --amber: #f2a900;
    --amber-hot: #ffbb24;
    --aegis: #3fa7f5;
    --dominion: #e5484d;
    --win: #5bc27a;
    --loss: #ef6a6e;
    --accent: #f39c12;
    --display: 'Barlow Condensed', 'Chakra Petch', 'Arial Narrow', sans-serif;
    --body: 'Barlow', 'Chakra Petch', system-ui, sans-serif;

    position: fixed;
    inset: 0;
    z-index: 200;
    display: block;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--ink);
    backdrop-filter: none;
    color: var(--bone);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

#main-menu.hidden { display: none !important; }

#main-menu[data-theater="desert"]   { --accent: #f39c12; }
#main-menu[data-theater="glacial"]  { --accent: #3fd0e0; }
#main-menu[data-theater="obsidian"] { --accent: #2ecc71; }
#main-menu[data-theater="jungle"]   { --accent: #a3cb38; }
#main-menu[data-theater="urban"]    { --accent: #a29bfe; }
#main-menu[data-theater="coast"]    { --accent: #54a0ff; }
#main-menu[data-theater="lunar"]    { --accent: #dfe6e9; }

#main-menu button {
    font: inherit;
    color: inherit;
    letter-spacing: normal;
    text-transform: none;
}

#main-menu :focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

.mm-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mm-insignia-src { display: none; }

/* ---------- Backdrop: the selected battlefield ---------- */
.mm-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.mm-backdrop-img {
    position: absolute;
    inset: -2%;
    background: url('assets/battlefield_bg.png?v=s1') center / cover no-repeat;
    filter: saturate(0.85) brightness(0.74) blur(1.5px);
}

.mm-backdrop-img.mm-swap {
    animation: mm-swap 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes mm-swap {
    from { opacity: 0.15; transform: scale(1.035); }
    to   { opacity: 1;    transform: scale(1); }
}

.mm-backdrop-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 21, 28, 0.97) 0%, rgba(15, 21, 28, 0.9) 22%, rgba(15, 21, 28, 0.45) 46%, rgba(15, 21, 28, 0.12) 72%, rgba(15, 21, 28, 0.2) 100%),
        linear-gradient(180deg, rgba(15, 21, 28, 0.8) 0%, rgba(15, 21, 28, 0) 16%, rgba(15, 21, 28, 0) 52%, rgba(15, 21, 28, 0.94) 100%);
}

/* ---------- Shell ---------- */
.mm-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1760px;
    margin: 0 auto;
    padding: clamp(16px, 2.4vh, 30px) clamp(18px, 3vw, 52px) clamp(14px, 2vh, 24px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(16px, 3vh, 36px);
}

/* ---------- Top bar ---------- */
.mm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mm-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mm-logo-mark {
    width: 40px;
    height: 35px;
    flex: none;
}

.mm-logo-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mm-logo-word {
    font-family: var(--display);
    font-weight: 800;
    font-size: 28px;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.mm-logo-sub {
    font-size: 13px;
    color: var(--haze);
}

.mm-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 18px 10px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 0;
}

.mm-rank-badge {
    position: relative;
    width: 36px;
    height: 41px;
    flex: none;
    display: grid;
    place-items: center;
}

.mm-rank-badge svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: rgba(242, 169, 0, 0.14);
    stroke: var(--amber);
    stroke-width: 2;
}

.mm-rank-badge span {
    position: relative;
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    color: var(--amber);
    margin-top: -3px;
}

.mm-profile-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mm-callsign {
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mm-rank {
    font-size: 13px;
    color: var(--haze);
    white-space: nowrap;
}

.mm-rating {
    width: 210px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mm-rating-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.mm-rating-num {
    font-size: 12px;
    color: var(--haze);
    white-space: nowrap;
}

#profile-score-text {
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    color: var(--bone);
    font-variant-numeric: tabular-nums;
    margin-right: 2px;
}

.mm-rating-next {
    font-size: 12px;
    color: var(--haze);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mm-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(232, 226, 212, 0.12);
    overflow: hidden;
}

.mm-bar-fill {
    height: 100%;
    background: var(--amber);
    border-radius: 2px;
    transition: width 500ms ease;
}

.mm-stats {
    display: flex;
    gap: 20px;
    margin: 0;
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.mm-stats div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mm-stats dt {
    font-size: 12px;
    color: var(--haze);
    white-space: nowrap;
}

.mm-stats dd {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mm-stat-scrap dd { color: var(--amber); }

/* ---------- Main grid ---------- */
.mm-main {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 88px);
    min-height: 0;
}

.mm-group-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--haze);
    margin-bottom: 8px;
}

/* ---------- Command column ---------- */
.mm-command {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vh, 24px);
    min-width: 0;
}

/* Faction switch */
.mm-faction-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#main-menu .mm-faction-opt {
    --f: var(--aegis);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 12px 13px;
    text-align: left;
    cursor: pointer;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--haze);
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

#main-menu .mm-faction-opt[data-faction="nod"] { --f: var(--dominion); }

#main-menu .mm-faction-opt:hover {
    border-color: var(--line-strong);
    color: var(--bone);
}

#main-menu .mm-faction-opt.active {
    border-color: var(--f);
    background: linear-gradient(180deg, color-mix(in srgb, var(--f) 18%, transparent), color-mix(in srgb, var(--f) 6%, transparent)), var(--panel);
    color: var(--bone);
    box-shadow: inset 0 3px 0 var(--f);
}

.mm-emblem {
    width: 26px;
    height: 29px;
    color: var(--haze);
    transition: color 160ms ease;
}

#main-menu .mm-faction-opt.active .mm-emblem { color: var(--f); }

.mm-faction-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mm-faction-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mm-faction-meta {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--haze);
}

/* Battle button: the one loud thing in the column */
.mm-play {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#main-menu .mm-battle {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 16px 22px 17px;
    border: 0;
    background: none;
    color: #1a1406;
    text-align: left;
    cursor: pointer;
}

#main-menu .mm-battle::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--amber);
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    transition: background-color 140ms ease;
}

#main-menu .mm-battle:hover::before { background: var(--amber-hot); }
#main-menu .mm-battle:active { transform: translateY(1px); }

.mm-battle-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 46px;
    line-height: 0.88;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mm-battle-sub {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.78;
}

/* Opponent + stakes */
.mm-intel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mm-intel-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mm-intel-label {
    font-size: 12px;
    color: var(--haze);
}

.mm-intel-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mm-intel-tier {
    font-family: var(--body);
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--amber);
    border: 1px solid rgba(242, 169, 0, 0.45);
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: 3px;
}

.mm-intel-diff {
    font-size: 13px;
    color: var(--haze);
}

.mm-intel-stakes {
    display: flex;
    gap: 14px;
    align-items: center;
}

.mm-stake {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mm-stake small {
    font-family: var(--body);
    font-size: 11px;
    font-weight: 500;
    color: var(--haze);
    margin-top: 3px;
}

.mm-stake.win { color: var(--win); }
.mm-stake.loss { color: var(--loss); }

.mm-intel-desc {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--haze);
}

/* Secondary actions */
.mm-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#main-menu .mm-sec-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 11px 13px 12px;
    text-align: left;
    cursor: pointer;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 160ms ease;
}

#main-menu .mm-sec-btn:hover { border-color: var(--amber); }
#main-menu .mm-sec-btn:hover .mm-sec-title { color: var(--amber); }

.mm-sec-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: color 160ms ease;
}

.mm-sec-sub {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--haze);
}

/* Daily contract */
.mm-contract {
    margin-top: auto;
    padding: 12px 14px 13px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 4px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mm-contract-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.mm-contract-head .mm-group-label { margin-bottom: 4px; }

.mm-contract-reward {
    font-size: 13px;
    font-weight: 600;
    color: var(--amber);
}

.mm-contract-title {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mm-contract-desc {
    margin: 3px 0 10px;
    font-size: 13px;
    color: var(--haze);
}

.mm-contract-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mm-contract-row .mm-bar { flex: 1; }

.mm-contract-count {
    font-size: 13px;
    color: var(--bone);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#main-menu .mm-claim {
    padding: 5px 14px;
    border: 1px solid var(--amber);
    border-radius: 3px;
    background: var(--amber);
    color: #1a1406;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

#main-menu .mm-claim:disabled {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--haze);
    cursor: default;
}

/* ---------- Theater side ---------- */
.mm-theater {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-width: 0;
}

.mm-theater-info {
    max-width: 760px;
    padding-top: clamp(0px, 4vh, 56px);
}

.mm-theater-sector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.mm-sector-num {
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px 2px;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
}

.mm-theater-name {
    margin: 14px 0 16px;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(56px, 7.6vw, 138px);
    line-height: 0.86;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--bone);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
    text-wrap: balance;
}

.mm-theater-name.mm-swap {
    animation: mm-name 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes mm-name {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.mm-theater-tagline {
    margin: 0;
    max-width: 52ch;
    font-size: 18px;
    line-height: 1.45;
    color: rgba(232, 226, 212, 0.9);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.mm-theater-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin: 22px 0 0;
}

.mm-theater-facts div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mm-theater-facts dt {
    font-size: 12px;
    color: var(--haze);
}

.mm-theater-facts dd {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.1;
}

#menu-theater-hazard { color: var(--accent); }

/* Theater strip */
.mm-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

#main-menu .terrain-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
    text-align: left;
    cursor: pointer;
    color: var(--haze);
}

#main-menu .terrain-card:hover { transform: none; }

#main-menu .mm-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
    outline: 1px solid var(--line);
    outline-offset: 0;
    opacity: 0.62;
    filter: saturate(0.75);
    transition: opacity 160ms ease, filter 160ms ease, outline-color 160ms ease;
}

#main-menu .terrain-card:hover .mm-thumb {
    opacity: 0.95;
    filter: none;
}

#main-menu .terrain-card.active .mm-thumb {
    opacity: 1;
    filter: none;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.mm-thumb-name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main-menu .terrain-card.active .mm-thumb-name { color: var(--bone); }
#main-menu .terrain-card:hover .mm-thumb-name { color: var(--bone); }

/* ---------- Footer ---------- */
.mm-foot {
    display: flex;
    justify-content: flex-start;
}

#main-menu .mm-reset {
    padding: 4px 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--haze);
    text-decoration: underline;
    text-decoration-color: rgba(152, 162, 172, 0.4);
    text-underline-offset: 3px;
    cursor: pointer;
}

#main-menu .mm-reset:hover {
    color: var(--loss);
    text-decoration-color: currentColor;
}

/* ---------- Medium desktops ---------- */
@media (max-width: 1360px) {
    .mm-stats { gap: 16px; padding-left: 16px; }
    .mm-rating { width: 170px; }
    .mm-profile { gap: 16px; }
}

@media (max-width: 1440px) {
    .mm-thumb-name { font-size: 13px; white-space: normal; text-overflow: clip; }
}

@media (max-width: 1180px) {
    .mm-main { grid-template-columns: minmax(320px, 370px) minmax(0, 1fr); gap: 32px; }
    .mm-stats div:nth-child(2) { display: none; }
    .mm-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Short landscape screens (laptops, tablets) ---------- */
@media (max-height: 760px) and (min-width: 1021px) {
    .mm-battle-title { font-size: 38px; }
    #main-menu .mm-battle { padding: 13px 20px 14px; }
    .mm-intel-desc { display: none; }
    .mm-contract-desc { display: none; }
    .mm-faction-meta { display: none; }
    .mm-theater-name { font-size: clamp(52px, 6.4vw, 104px); }
    .mm-theater-tagline { font-size: 16px; }
}

/* ---------- Phones in landscape ---------- */
@media (max-height: 500px) and (min-width: 640px) {
    .mm-shell { gap: 12px; padding-top: 10px; }
    .mm-logo-sub, .mm-rating { display: none; }
    .mm-logo-word { font-size: 22px; }
    .mm-profile { padding: 6px 12px 6px 8px; gap: 12px; }
    .mm-main { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 24px; }
    .mm-command { gap: 10px; }
    .mm-faction-opt { padding: 8px 10px; }
    .mm-emblem, .mm-faction-meta, .mm-intel-desc, .mm-contract-desc, .mm-sec-sub { display: none; }
    .mm-battle-title { font-size: 32px; }
    .mm-theater-tagline, .mm-theater-facts { display: none; }
    .mm-theater-name { font-size: 48px; margin: 8px 0 0; }
    .mm-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}

/* ---------- Narrow / portrait: single column ---------- */
@media (max-width: 1020px) and (min-height: 501px), (max-width: 639px) {
    .mm-top { flex-wrap: wrap; }
    .mm-profile { flex-wrap: wrap; width: 100%; }
    .mm-rating { flex: 1; min-width: 160px; }
    .mm-stats { padding-left: 0; border-left: 0; }
    .mm-stats div:nth-child(2) { display: flex; }
    .mm-main { grid-template-columns: 1fr; gap: 28px; }
    .mm-theater { gap: 20px; }
    .mm-theater-info { padding-top: 0; }
    .mm-theater-name { font-size: clamp(48px, 13vw, 96px); }
    .mm-strip {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(132px, 1fr);
        overflow-x: auto;
        padding: 4px 4px 8px;
        scroll-snap-type: x mandatory;
    }
    #main-menu .terrain-card { scroll-snap-align: start; }
    .mm-contract { margin-top: 0; }
    .mm-backdrop-shade {
        background: linear-gradient(180deg, rgba(15, 21, 28, 0.88) 0%, rgba(15, 21, 28, 0.8) 100%);
    }
}

@media (max-width: 420px) {
    .mm-faction-opts, .mm-secondary { grid-template-columns: 1fr; }
    .mm-stats { gap: 14px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .mm-backdrop-img.mm-swap,
    .mm-theater-name.mm-swap { animation: none; }
    .mm-bar-fill { transition: none; }
}