/* mobile.css - 手机竖屏与小屏覆盖样式，最后加载，避免影响桌面端 */

.node-decision__tabs {
    display: none;
}

.explore__side-dock-toggle {
    display: none;
}

@media (max-width: 768px), (orientation: portrait) and (max-width: 900px) {
    :root {
        --mobile-pad: 12px;
        --mobile-gap: 10px;
        --home-mobile-nav-height: 58px;
        --bp-player-avatar-size: clamp(20px, 6.4vw, 28px);
        --bp-picked-hero-size: clamp(12px, 4.2vw, 18px);
        --bp-hero-grid-card-width: clamp(52px, 16vw, 68px);
        --bp-hero-grid-avatar-size: clamp(42px, 13vw, 54px);
    }

    html, body,
    .game-container {
        min-width: 0;
        height: 100dvh;
        overflow: hidden;
    }

    .scene {
        min-width: 0;
        min-height: 0;
        overscroll-behavior: contain;
    }

    .page-header {
        padding: 10px var(--mobile-pad);
        gap: 8px;
    }

    .page-header__title {
        font-size: 17px;
        letter-spacing: 1px;
    }

    .btn--large {
        min-height: 44px;
    }

    /* ===================== BP / 详细比赛主流程 ===================== */
    .bp-scene-root,
    .bp2 {
        height: 100dvh;
        min-height: 0;
    }

    .bp2 {
        overflow: hidden;
    }

    .bp2__top {
        padding: 6px 8px;
        gap: 4px;
        align-items: flex-start;
    }

    .bp2__top-side {
        gap: 4px;
        min-width: 72px;
    }

    .bp2__team-name {
        font-size: 12px;
        max-width: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bp2__bans {
        gap: 2px;
        flex-wrap: wrap;
        max-width: 78px;
    }

    .bp2-ban {
        width: 24px;
        height: 24px;
    }

    .bp2__top-center {
        min-width: 110px;
        flex: 1;
    }

    .bp2__phase {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .bp2__step {
        font-size: 11px;
        min-height: 16px;
    }

    .bp2-comp-preview {
        display: none;
    }

    .bp2-wr {
        gap: 4px;
    }

    .bp2-wr__val {
        min-width: 26px;
        font-size: 10px;
    }

    .bp2__mid {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .bp2__side {
        width: 100%;
        height: clamp(58px, 18vw, 70px);
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 4px;
        padding: 4px 6px;
        scroll-snap-type: x proximity;
    }

    .bp2__side--dimmed {
        pointer-events: auto;
    }

    .bp2__side--dimmed .bp2-player {
        pointer-events: none;
    }

    .bp2__side--blue {
        order: 1;
        background: linear-gradient(180deg, rgba(30,80,180,0.18), transparent);
    }

    .bp2__grid {
        order: 2;
        flex: 1;
        min-height: 0;
        padding: 4px 6px;
        overflow: hidden;
    }

    .bp2__side--red {
        order: 3;
        background: linear-gradient(0deg, rgba(180,40,40,0.18), transparent);
    }

    .bp2-player {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: clamp(50px, 15.5vw, 62px);
        padding: 3px;
        gap: 3px;
        scroll-snap-align: start;
    }

    .bp2-player--red,
    .bp2-player--blue {
        flex-direction: row;
        text-align: left;
        border-left: 3px solid rgba(255,255,255,0.16);
        border-right: 0;
    }

    .bp2-player__avatar {
        width: var(--bp-player-avatar-size);
        height: var(--bp-player-avatar-size);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .bp2-player__avatar .img-wrapper,
    .bp2-player__avatar .img-wrapper--player,
    .bp2-player__avatar .img-wrapper img,
    .bp2-player__avatar .img-fallback,
    .bp2-player__avatar .img-fallback svg {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .bp2-player__avatar .img-wrapper img {
        object-fit: cover !important;
        object-position: center top;
    }

    .bp2-player__name {
        font-size: clamp(8px, 2.4vw, 10px);
        max-width: 100%;
    }

    .bp2-player__info {
        padding-right: calc(var(--bp-picked-hero-size) + 2px);
    }

    .bp2-player__lane,
    .bp2-player__rating {
        font-size: clamp(7px, 2vw, 8px);
    }

    .bp2-player__hero {
        position: absolute;
        right: 3px;
        bottom: 3px;
        width: var(--bp-picked-hero-size);
        height: var(--bp-picked-hero-size);
        min-height: 0;
        margin: 0;
        border: 1px solid rgba(240,192,64,0.35);
        border-radius: 4px;
        background: rgba(10,14,23,0.86);
        overflow: hidden;
        z-index: 2;
    }

    .bp2-player__hero .bp-hero-card {
        --hero-size: var(--bp-picked-hero-size) !important;
        gap: 0;
    }

    .bp2-player__hero .bp-hero-card__name {
        display: none;
    }

    .bp2-player__hero .img-wrapper,
    .bp2-player__hero .img-wrapper img,
    .bp2-player__hero .img-fallback svg,
    .bp2-player__hero .hero-avatar,
    .bp2-player__hero .hero-avatar img,
    .bp2-player__hero .hero-avatar-fallback {
        width: var(--bp-picked-hero-size) !important;
        height: var(--bp-picked-hero-size) !important;
    }

    .bp2__bot {
        min-height: 78px;
        max-height: min(42dvh, 260px);
    }

    .bp2__coach-resizer {
        display: block;
        height: 12px;
        touch-action: none;
        user-select: none;
    }

    .bp2__coach-bar {
        padding: 5px 10px;
    }

    .bp2__coach-body {
        padding: 5px 10px 8px;
        font-size: 11px;
        line-height: 1.55;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .coach-line:nth-child(n+4) {
        display: none;
    }

    #bp-grid-container {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .bp-coach-suggest {
        margin: 4px 0;
        padding: 7px 9px;
        grid-template-columns: 1fr;
        gap: 2px;
        max-width: 100%;
        min-height: 0;
    }

    .bp-coach-suggest__label {
        grid-row: auto;
        font-size: 11px;
    }

    .bp-coach-suggest__main {
        font-size: 12px;
    }

    .bp-coach-suggest__reason {
        font-size: 10px;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bp-role-tabs,
    .bp-type-tabs {
        gap: 4px;
        padding: 4px 0;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .bp-role-tab,
    .bp-type-tab {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 5px 10px;
    }

    .bp-role-tab-hint {
        display: none;
    }

    .bp-type-panels {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 6px;
    }

    .bp-type-panel {
        justify-content: center;
        gap: clamp(4px, 1.6vw, 7px);
        padding: 6px 0 10px;
    }

    .bp-hero-btn {
        width: var(--bp-hero-grid-card-width);
        min-height: calc(var(--bp-hero-grid-avatar-size) + 30px);
        padding: 4px 3px;
    }

    .bp-hero-btn__avatar {
        width: var(--bp-hero-grid-avatar-size);
        height: var(--bp-hero-grid-avatar-size);
    }

    .bp-hero-btn__avatar .img-wrapper,
    .bp-hero-btn__avatar .img-wrapper img,
    .bp-hero-btn__avatar .img-fallback svg,
    .bp-hero-btn__avatar .hero-avatar,
    .bp-hero-btn__avatar .hero-avatar img,
    .bp-hero-btn__avatar .hero-avatar-fallback {
        width: var(--bp-hero-grid-avatar-size) !important;
        height: var(--bp-hero-grid-avatar-size) !important;
    }

    .bp-hero-btn__name {
        max-width: calc(var(--bp-hero-grid-card-width) - 4px);
        font-size: clamp(8px, 2.2vw, 10px);
    }

    .bp-confirm-bar {
        position: sticky;
        bottom: 0;
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 8px;
        border-radius: 12px 12px 0 0;
        max-height: 42dvh;
        overflow-y: auto;
    }

    .bp-confirm-bar__btn {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
    }

    .confirm-detail__hero {
        gap: 8px;
    }

    .confirm-detail__avatar img,
    .confirm-detail__avatar .img-wrapper {
        width: 42px !important;
        height: 42px !important;
    }

    .confirm-detail__meta,
    .confirm-detail__player-hero-data {
        gap: 6px;
    }

    .confirm-detail__player-stats,
    .confirm-detail__player-season {
        display: none;
    }

    .bp-swap {
        justify-content: stretch;
        height: 100dvh;
        min-height: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        overflow-y: auto;
        gap: 8px;
    }

    .bp-swap__head {
        flex-shrink: 0;
    }

    .bp-swap__head h2 {
        font-size: clamp(18px, 5.2vw, 22px);
        margin-bottom: 4px;
    }

    .bp-swap__head p {
        font-size: clamp(10px, 2.8vw, 12px);
        line-height: 1.45;
    }

    .bp-swap__grid {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, minmax(0, 1fr));
        gap: clamp(5px, 1.5vh, 8px);
    }

    .bp-swap-card {
        display: grid;
        grid-template-columns: clamp(44px, 13vw, 58px) 1fr;
        align-items: center;
        text-align: left;
        padding: clamp(6px, 1.4vh, 10px) 10px;
        min-height: 0;
        overflow: hidden;
    }

    .bp-swap-card__hero {
        grid-row: span 3;
        grid-column: 1;
        min-height: 0;
    }

    .bp-swap-card__hero .bp-hero-card {
        --hero-size: clamp(38px, 11vw, 50px) !important;
    }

    .bp-swap-card__hero .hero-avatar,
    .bp-swap-card__hero .hero-avatar img,
    .bp-swap-card__hero .hero-avatar-fallback {
        width: clamp(38px, 11vw, 50px) !important;
        height: clamp(38px, 11vw, 50px) !important;
    }

    .bp-swap-card__hero .bp-hero-card__name {
        font-size: 9px;
        max-width: 54px;
    }

    .bp-swap-card__player,
    .bp-swap-card__role,
    .bp-swap-card__meta {
        grid-column: 2;
    }

    .bp-swap-card__player {
        font-size: clamp(13px, 3.5vw, 15px);
    }

    .bp-swap-card__role,
    .bp-swap-card__meta,
    .bp-swap__tip {
        font-size: clamp(10px, 2.8vw, 12px);
    }

    .bp-swap__tip {
        flex-shrink: 0;
        margin: 0;
    }

    .bp-swap > .btn {
        flex-shrink: 0;
        width: min(220px, 70vw);
        min-height: 42px;
        padding: 9px 14px;
    }

    .node-decision {
        flex-direction: column;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        gap: 8px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    }

    .node-decision__tabs {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 3px;
        border-radius: 999px;
        background: rgba(10,14,23,0.72);
        border: 1px solid rgba(255,255,255,0.08);
    }

    .node-decision__tab {
        min-height: 36px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--color-text-dim);
        font-family: var(--font-main);
        font-weight: 800;
        letter-spacing: 1px;
    }

    .node-decision__tab--active {
        color: #101018;
        background: linear-gradient(135deg, #f0c040, #ffe08a);
        box-shadow: 0 0 18px rgba(240,192,64,0.18);
    }

    .node-decision__left,
    .node-decision__right {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .node-decision--mobile-analysis .node-decision__right {
        display: none;
    }

    .node-decision--mobile-strategy .node-decision__left {
        display: none;
    }

    .node-decision__right {
        gap: 8px;
    }

    .node-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .node-modifiers__grid,
    .strategy-card-grid {
        grid-template-columns: 1fr;
    }

    .node-confirm {
        position: sticky;
        bottom: 0;
        z-index: 5;
        min-height: 46px;
        margin-top: 4px;
    }

    .battle-replay {
        min-height: 100dvh;
        overflow-y: auto;
        padding: 12px;
    }

    .battle-replay__stage {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .replay-map {
        min-height: 260px;
    }

    .replay-side {
        order: 2;
    }

    .node-result__versus,
    .bp-result__lineup {
        flex-direction: column;
        display: flex;
    }

    .bp-result-stage,
    .node-result,
    .round-result--victory,
    .round-result--defeat {
        padding: 14px 10px;
    }

    .bp-result {
        width: 100%;
        padding: 12px;
    }

    .bp-result__footer {
        flex-direction: column;
        gap: 10px;
    }

    /* ===================== 快速战斗 ===================== */
    .qb {
        padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
    }

    .qb__versus {
        gap: 10px;
    }

    .qb__logo svg {
        width: 54px;
        height: 54px;
    }

    .qb__vs-text {
        font-size: 32px;
    }

    .qb__stats {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 768px), (orientation: portrait) and (max-width: 900px) {
    /* ===================== 管理页面：转会 / 训练 / 选手 ===================== */
    .tfr-layout {
        max-width: none;
        padding: 0 10px 14px;
    }

    .tfr-topbar,
    .training__header,
    .roster-topbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
    }

    .tfr-topbar__left,
    .tfr-topbar__right,
    .roster-topbar__left,
    .roster-topbar__right {
        width: 100%;
        justify-content: space-between;
    }

    .tfr-tabs {
        overflow-x: auto;
    }

    .tfr-tab {
        min-width: 108px;
        flex: 0 0 auto;
    }

    .tfr-table {
        border: none;
        overflow: visible;
    }

    .tfr-table__head {
        display: none;
    }

    .tfr-table__body {
        display: grid;
        gap: 10px;
    }

    .tfr-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
        padding: 12px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.08);
        border-left: 3px solid var(--rc, #4ea8de);
    }

    .tfr-cell {
        width: auto !important;
        text-align: left !important;
        font-size: 12px;
    }

    .tfr-cell--player {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .tfr-cell--action {
        grid-column: 2;
        grid-row: 2 / span 3;
        align-self: end;
    }

    .tfr-buy-btn,
    .tfr-buy-direct-btn,
    .tfr-dismiss-btn {
        min-height: 40px;
        padding: 7px 12px;
    }

    .tfr-direct__filters {
        flex-direction: column;
        align-items: stretch;
    }

    .tfr-refresh {
        display: grid;
        gap: 8px;
        padding: 12px 0;
    }

    .tfr-pity {
        margin: 0;
    }

    .training {
        height: auto;
        min-height: 100dvh;
    }

    .training__header {
        align-items: flex-start;
    }

    .training__header h2,
    .training__gold {
        width: 100%;
        text-align: center;
    }

    .training__grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .training-card {
        padding: 16px 12px;
    }

    .minigame {
        width: 100%;
        max-width: none;
        padding: 12px;
    }

    .minigame__hud,
    .mg-result__btns {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .minigame--result {
        min-height: 100dvh;
        height: auto;
        padding: 24px 12px;
    }

    .memory-grid,
    .match-grid {
        max-width: min(320px, 92vw) !important;
    }

    .roster-layout {
        height: 100dvh;
    }

    .roster-topbar__center {
        width: 100%;
        text-align: center;
        order: 3;
    }

    .roster-body {
        flex-direction: column;
    }

    .roster-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(78,168,222,0.08);
    }

    .roster-nav {
        min-width: 92px;
        text-align: center;
        align-items: center;
        padding: 8px 10px;
    }

    .roster-content {
        padding: 10px;
    }

    .roster-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 28vw, 122px), 122px));
        justify-content: center;
        gap: 8px;
    }

    .roster-card {
        width: 100%;
        max-width: 122px;
        justify-self: center;
    }

    .roster-card__avatar {
        top: 18%;
        left: 23%;
        right: 23%;
        bottom: 40%;
    }

    .roster-card__power {
        font-size: clamp(13px, 4vw, 17px);
    }

    .roster-card__name {
        font-size: clamp(10px, 3vw, 12px);
    }

    .roster-card__meta,
    .roster-card__role {
        font-size: 9px;
    }

    .roster-toolbar__lock {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 768px), (orientation: portrait) and (max-width: 900px) {
    /* ===================== 赛程 / 主页 / 手册 / 设置等信息页 ===================== */
    .home-layout {
        height: 100dvh;
        overflow: hidden;
        padding-bottom: calc(var(--home-mobile-nav-height) + env(safe-area-inset-bottom));
    }

    .home-topbar {
        position: relative;
        justify-content: center;
        padding: 10px;
        background: rgba(10,14,23,0.55);
    }

    .home-brand {
        position: relative;
        top: auto;
        left: auto;
        margin: 10px;
        max-width: none;
        padding: 12px;
    }

    .home-brand__logo {
        width: 54px;
        height: 54px;
    }

    .home-brand__slogan {
        font-size: 18px;
    }

    .home-brand__year,
    .home-brand__name {
        letter-spacing: 1px;
    }

    .home-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
        overflow: hidden;
        padding: 0 10px 0;
    }

    .home-team-art {
        left: 50%;
        right: auto;
        bottom: 0;
        transform: translateX(-50%);
        height: auto;
        width: min(100vw, 460px);
        max-width: 100vw;
        max-height: 34dvh;
        object-position: center bottom;
        z-index: 1;
        opacity: 0.96;
    }

    .home-season-panel {
        grid-column: auto;
        align-self: stretch;
        justify-self: auto;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 10px 12px;
        z-index: 3;
        border-radius: 14px;
    }

    .hsp__header {
        padding-bottom: 6px;
        gap: 8px;
    }

    .hsp__title {
        writing-mode: horizontal-tb;
        font-size: 15px;
        line-height: 1.2;
        letter-spacing: 1px;
    }

    .hsp__subtitle {
        font-size: 10px;
    }

    .hsp__badges,
    .hsp__enter-hint {
        display: none;
    }

    .hsp__phase-progress {
        margin: 8px 0;
    }

    .hsp__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin-top: 8px;
    }

    .hsp__cell {
        min-width: 0;
        padding: 7px 6px;
        border-radius: 10px;
    }

    .hsp__cell-label {
        font-size: 9px;
        white-space: nowrap;
    }

    .hsp__cell-value {
        font-size: 12px;
        line-height: 1.25;
    }

    .hsp__cell-sub {
        display: none;
    }

    .hsp__starter-name {
        font-size: 12px;
    }

    .hsp__starter-role,
    .hsp__starter-rating {
        display: none;
    }

    .home-cards {
        grid-column: auto;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 3;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        padding-bottom: min(30dvh, 210px);
    }

    .home-cards__grid {
        width: min(86vw, 320px);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hcard {
        min-width: 0;
        min-height: 52px;
        padding: 12px 14px;
        gap: 8px;
    }

    .hcard__icon {
        font-size: 22px;
    }

    .hcard__title {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .home-bottombar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        height: calc(var(--home-mobile-nav-height) + env(safe-area-inset-bottom));
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .home-nav-btn {
        padding: 6px 2px;
    }

    .home-nav-btn__icon {
        font-size: 19px;
    }

    .home-nav-btn__label {
        font-size: 10px;
    }

    .mcal__header {
        flex-wrap: wrap;
        padding: 10px;
    }

    .mcal__header-center {
        order: 3;
        width: 100%;
    }

    .mcal__h-title {
        font-size: 17px;
        letter-spacing: 1px;
        white-space: nowrap;
    }

    .mcal__header-right {
        gap: 6px;
    }

    .mcal__h-progress {
        font-size: 11px;
    }

    .mcal__btn-icon {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .mcal__timeline {
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 12px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .mcal__tl-item {
        flex: 0 0 auto;
        min-width: 92px;
        padding: 0 8px;
        scroll-snap-align: start;
    }

    .mcal__tl-name {
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .mcal__tl-line {
        width: 24px;
        flex: 0 0 24px;
    }

    .mcal__timeline-hint {
        display: none;
    }

    .mcal__slots-wrap {
        padding: 10px 0;
        overflow: hidden;
    }

    .mcal__slots {
        justify-content: flex-start !important;
        padding: 0 12px;
        gap: 10px;
        scroll-padding-left: 12px;
    }

    .mcal-s {
        flex-basis: 104px;
        padding: 9px 7px 12px;
        scroll-snap-align: start;
    }

    .mcal-s__logo {
        width: 46px;
        height: 46px;
    }

    .mcal-s__name {
        max-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mcal__detail {
        padding: 0 10px 16px;
    }

    .mcal-detail-card {
        padding: 14px 10px;
    }

    .mcal-detail__matchup {
        gap: 10px;
        margin-bottom: 12px;
    }

    .mcal-detail__team {
        min-width: 64px;
    }

    .mcal-detail__logo {
        width: 48px;
        height: 48px;
    }

    .mcal-detail__vs {
        min-width: 74px;
    }

    .mcal-v__label {
        font-size: 10px;
        text-align: center;
    }

    .mcal-v__vs {
        font-size: 24px;
    }

    .mcal-detail__analysis-entry {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        margin: 10px 0;
    }

    .mcal-detail__analysis-entry .btn {
        width: 100%;
        min-height: 44px;
    }

    .mcal-detail__analysis-entry span {
        font-size: 11px;
    }

    .mcal-detail__rosters {
        padding: 10px 8px;
    }

    .mcal-roster__header {
        font-size: 11px;
        gap: 8px;
    }

    .mcal-roster__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
        gap: 2px;
    }

    .mcal-roster__vs-dot {
        width: 16px;
        font-size: 9px;
    }

    .mcal-roster__p {
        min-width: 0;
        gap: 4px;
        padding: 4px 3px;
    }

    .mcal-roster__cond,
    .mcal-roster__lvstar {
        display: none;
    }

    .mcal-roster__avatar {
        width: 28px;
        height: 28px;
    }

    .mcal-roster__role {
        width: 26px;
        font-size: 10px;
    }

    .mcal-roster__name {
        min-width: 0;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mcal-roster__rating {
        width: 42px;
        font-size: 12px;
    }

    .mcal-detail__act-row {
        flex-direction: column;
        align-items: stretch;
        width: min(230px, 78vw);
    }

    .mcal-detail__act .btn {
        min-width: 0;
        width: 100%;
        padding: 11px 18px !important;
    }

    .mcal-analysis-overlay {
        padding: 10px;
        align-items: stretch;
    }

    .mcal-analysis-modal {
        width: 100%;
        max-height: 94dvh;
        padding: 12px;
    }

    .mcal-analysis-modal__bd,
    .mcal-detail__buffs,
    .mcal-prep__grid {
        grid-template-columns: 1fr;
    }

    .explore--map {
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .explore--map .explore__header {
        padding: 8px 10px !important;
        gap: 8px;
    }

    .explore--map .explore__city-name {
        font-size: 18px !important;
    }

    .explore--map .explore__subtitle {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .explore--map .explore__rep-bar {
        padding: 5px 8px !important;
        gap: 6px !important;
    }

    .explore--map .explore__rep-label {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .explore--map .explore__clock-hud {
        top: 12px !important;
        right: 10px !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 16px !important;
        transform: scale(0.86);
        transform-origin: top right;
    }

    .explore__side-dock-toggle {
        position: fixed;
        left: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: 550;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 14px;
        border: 1px solid rgba(240,192,64,0.45);
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(240,192,64,0.96), rgba(255,224,138,0.96));
        color: #12151f;
        font-family: var(--font-main);
        font-size: 13px;
        font-weight: 900;
        box-shadow: 0 10px 28px rgba(0,0,0,0.38);
    }

    .explore__side-dock {
        position: fixed !important;
        left: 0 !important;
        right: auto !important;
        top: calc(92px + env(safe-area-inset-top)) !important;
        bottom: calc(66px + env(safe-area-inset-bottom)) !important;
        width: clamp(148px, 34vw, 176px) !important;
        max-height: none !important;
        z-index: 540 !important;
        transform: translateX(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
        overflow: hidden !important;
        border-radius: 0 14px 14px 0 !important;
        padding: 10px 8px !important;
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45) !important;
    }

    .explore-dock__title {
        font-size: 12px !important;
    }

    .explore-dock__subtitle {
        font-size: 7px !important;
    }

    .explore-dock__album-btn {
        height: 34px !important;
        font-size: 11px !important;
    }

    .explore-dock__slots {
        max-height: none;
        gap: 6px !important;
    }

    .explore--map--dock-open .explore__side-dock {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* 打开侧边栏时轻微遮罩地图，突出左侧抽屉感 */
    .explore--map--dock-open .explore__map-container::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 400;
        background: rgba(5, 7, 14, 0.28);
        pointer-events: none;
    }

    .strategy-guide,
    .settings,
    .shop,
    .season-view,
    .collection {
        min-width: 0;
        overflow-x: hidden;
    }

    .sg__header,
    .settings__header,
    .shop__header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .sg__tabs,
    .settings-tabs,
    .shop-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 4px;
    }

    .sg__tab,
    .settings-tab,
    .shop-tab {
        flex: 0 0 auto;
        min-width: 88px;
    }

    .sg__body {
        grid-template-columns: 1fr;
    }

    .sg__nav {
        display: flex;
        overflow-x: auto;
        gap: 8px;
    }

    .sg__nav-item {
        min-width: 110px;
    }

    .sg-resource-grid,
    .sg-arch-grid {
        grid-template-columns: 1fr;
    }

    .modal,
    .dialog,
    .postmatch-modal {
        width: min(94vw, 520px) !important;
        max-height: 88dvh;
    }

    .settlement-modal-overlay {
        align-items: flex-start !important;
        padding: 10px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .settlement-modal__panel {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: 480px !important;
        min-height: auto !important;
        padding: 14px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    .settlement-modal__phone {
        width: 100% !important;
        max-width: none !important;
        height: min(64dvh, 520px) !important;
        min-height: 360px;
        border-width: 7px !important;
        border-radius: 28px !important;
        flex: 0 0 auto !important;
    }

    .settlement-modal__report {
        width: 100%;
        flex: 0 0 auto !important;
    }

    .settlement-modal__report h3 {
        font-size: 20px !important;
        line-height: 1.25;
    }

    .settlement-modal__rewards {
        grid-template-columns: 1fr !important;
    }

    .settlement-modal__starters {
        max-height: none !important;
        overflow: visible !important;
    }
}