/* ========================================================================== 
   DEADLY FEAR - DEDICATED MOBILE OPTIMIZATION LAYER
   Desktop layout is intentionally untouched. All visual/layout changes below
   activate only at 900px and narrower.
   ========================================================================== */

.df-mobile-toolbar,
.df-mobile-nav-backdrop,
.df-mobile-sidebar-close {
    display: none;
}

@media (max-width: 900px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: 66px;
    }

    body.df-shell {
        width: 100%;
        overflow-x: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    body.df-mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    /* ------------------------------------------------------------------
       Compact mobile banner + sticky command strip
       ------------------------------------------------------------------ */
    .topbar-banner {
        width: 100%;
        overflow: hidden;
        background: #07090d;
        border-bottom: 1px solid #251017;
    }

    .topbar-banner-inner {
        width: 100% !important;
        padding: 0 8px;
    }

    .topbar-banner img {
        width: 100% !important;
        height: auto !important;
        min-height: 32px;
        object-fit: contain !important;
    }

    .df-mobile-toolbar {
        position: sticky;
        top: 0;
        z-index: 1600;
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 56px;
        padding: 8px max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px));
        background: rgba(9, 11, 16, .97);
        border-bottom: 1px solid #2c1820;
        box-shadow: 0 9px 24px rgba(0,0,0,.35);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-family: Arial, Helvetica, sans-serif;
    }

    .df-mobile-menu-toggle,
    .df-mobile-home,
    .df-mobile-player {
        min-height: 40px;
        border: 1px solid #2a303b;
        border-radius: 9px;
        background: #11151c;
        color: #e8edf5;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font: 800 11px/1 Arial, Helvetica, sans-serif;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .df-mobile-menu-toggle {
        flex: 0 0 auto;
        padding: 0 12px;
        cursor: pointer;
        border-color: #5a1b29;
        background: linear-gradient(180deg, #251019, #160b10);
        color: #ff6c82;
    }

    .df-mobile-menu-toggle .bars {
        font-size: 18px;
        line-height: 1;
    }

    .df-mobile-home {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0 10px;
        letter-spacing: .8px;
        color: #f4f6fa;
    }

    .df-mobile-home strong {
        color: #ff3f59;
    }

    .df-mobile-player {
        flex: 0 1 115px;
        min-width: 0;
        padding: 0 9px;
        color: #9ca7b7;
    }

    .df-mobile-player span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Keep the phone command strip intentionally simple: one full-width menu
       control. The former Home and Player chips caused cramped duplicate boxes
       on narrow Android screens. Desktop navigation is unaffected because this
       stylesheet only changes layouts at 900px and below. */
    .df-mobile-home,
    .df-mobile-player {
        display: none !important;
    }

    .df-mobile-menu-toggle {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    /* ------------------------------------------------------------------
       Main content becomes full-width while the sidebar is off-canvas.
       ------------------------------------------------------------------ */
    .mcc-layout-wrapper {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: calc(100dvh - 56px) !important;
        margin: 0 !important;
    }

    .mcc-content-frame {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .mcc-panel-card {
        width: 100%;
        max-width: 100%;
        padding: 14px !important;
        margin-bottom: 12px !important;
    }

    .mcc-content-frame,
    .mcc-content-frame * {
        overflow-wrap: break-word;
    }

    .mcc-content-frame img,
    .mcc-content-frame video,
    .mcc-content-frame canvas,
    .mcc-content-frame iframe,
    .mcc-content-frame svg {
        max-width: 100%;
    }

    .mcc-content-frame iframe,
    .mcc-content-frame video {
        height: auto;
    }

    .mcc-content-frame h1 {
        font-size: clamp(23px, 7vw, 32px) !important;
        line-height: 1.12;
    }

    .mcc-content-frame h2 {
        line-height: 1.2;
    }

    /* ------------------------------------------------------------------
       Touch-friendly forms. 16px prevents iOS Safari form zoom.
       ------------------------------------------------------------------ */
    .mcc-content-frame input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .mcc-content-frame select,
    .mcc-content-frame textarea {
        max-width: 100% !important;
        min-height: 44px;
        font-size: 16px !important;
    }

    .mcc-content-frame textarea {
        min-height: 105px;
        resize: vertical;
    }

    .mcc-content-frame button,
    .mcc-content-frame input[type="submit"],
    .mcc-content-frame input[type="button"],
    .mcc-content-frame input[type="reset"] {
        min-height: 42px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mcc-content-frame a,
    .df-sidebar a {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Older staff/legacy pages contain desktop-only inline grids. Collapse
       those form grids without rewriting every legacy management file. */
    .df-legacy-page form > [style*="grid-template-columns"],
    .df-legacy-page .mcc-panel-card [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .df-legacy-page [style*="width:80%"],
    .df-legacy-page [style*="width: 80%"],
    .df-legacy-page [style*="width:90%"],
    .df-legacy-page [style*="width: 90%"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    .df-legacy-page form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .df-legacy-page form select,
    .df-legacy-page form textarea {
        width: 100% !important;
    }

    .df-legacy-page form [style*="text-align:right"],
    .df-legacy-page form [style*="text-align: right"] {
        text-align: left !important;
    }

    .df-legacy-page form [style*="text-align:right"] button,
    .df-legacy-page form [style*="text-align: right"] button {
        width: 100%;
    }

    /* ------------------------------------------------------------------
       Wide tables are swipe-scrollable instead of stretching the page.
       mobile.js adds this wrapper only on small screens.
       ------------------------------------------------------------------ */
    .df-mobile-table-scroll {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 5px;
        margin-bottom: 8px;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .df-mobile-table-scroll > table {
        min-width: 100%;
        max-width: none !important;
        margin-bottom: 0 !important;
    }

    /* Horizontal action/navigation groups may scroll instead of crushing. */
    .mcc-content-frame .tabs,
    .mcc-content-frame .tab-nav,
    .mcc-content-frame .toolbar,
    .mcc-content-frame .action-bar,
    .mcc-content-frame .rules-links {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    footer {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 9px !important;
    }
}

@media (max-width: 520px) {
    .topbar-banner-inner {
        padding: 0 5px;
    }

    .df-mobile-toolbar {
        gap: 6px;
        min-height: 54px;
        padding-left: max(7px, env(safe-area-inset-left, 0px));
        padding-right: max(7px, env(safe-area-inset-right, 0px));
    }

    .df-mobile-menu-toggle {
        padding: 0 10px;
    }

    .df-mobile-menu-toggle .label {
        display: none;
    }

    .df-mobile-player {
        flex-basis: 86px;
        font-size: 10px;
    }

    .mcc-content-frame {
        padding: 9px !important;
    }

    .mcc-panel-card {
        padding: 12px !important;
        border-radius: 8px;
    }

    .alert {
        padding: 10px !important;
        font-size: 11px !important;
        line-height: 1.45;
    }
}

/* ========================================================================== 
   DEADLY FEAR v19 - MOBILE / TABLET POLISH LAYER
   This section intentionally affects only screens 900px and narrower.
   ========================================================================== */
.df-mobile-bottom-nav { display: none; }
.df-mobile-current { display: none; }

@media (max-width: 900px) {
    :root {
        --df-mobile-dock-h: 64px;
        --df-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    body.df-shell {
        min-width: 0;
        padding-bottom: calc(var(--df-mobile-dock-h) + var(--df-mobile-safe-bottom) + 10px);
        background-attachment: scroll !important;
    }

    /* Keep the header compact and useful on phones. */
    .topbar-banner {
        max-height: 72px;
    }
    .topbar-banner-inner {
        min-height: 0 !important;
    }
    .topbar-banner img {
        display: block;
        max-height: 72px;
        object-fit: cover !important;
        object-position: center;
    }

    .df-mobile-toolbar {
        top: 0;
        min-height: 52px;
        padding-top: max(7px, env(safe-area-inset-top, 0px));
        padding-bottom: 7px;
    }
    .df-mobile-menu-toggle {
        min-height: 42px;
        justify-content: flex-start;
        padding-inline: 12px;
    }
    .df-mobile-menu-toggle .label {
        display: inline !important;
        flex: 0 0 auto;
    }
    .df-mobile-current {
        display: block;
        min-width: 0;
        margin-left: 3px;
        padding-left: 9px;
        border-left: 1px solid #40212a;
        color: #99a4b4;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .35px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Persistent thumb-friendly quick navigation. */
    .df-mobile-bottom-nav {
        position: fixed;
        z-index: 1900;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: var(--df-mobile-dock-h);
        padding: 5px max(7px, env(safe-area-inset-right, 0px)) calc(5px + var(--df-mobile-safe-bottom)) max(7px, env(safe-area-inset-left, 0px));
        background: rgba(8, 10, 15, .98);
        border-top: 1px solid #30222a;
        box-shadow: 0 -12px 30px rgba(0,0,0,.42);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .df-mobile-bottom-nav a,
    .df-mobile-bottom-nav button {
        appearance: none;
        -webkit-appearance: none;
        min-width: 0;
        min-height: 52px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #7f8a99;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .df-mobile-bottom-nav a > span,
    .df-mobile-bottom-nav button > span {
        font-size: 18px;
        line-height: 1;
    }
    .df-mobile-bottom-nav small {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: .15px;
    }
    .df-mobile-bottom-nav a.active,
    .df-mobile-bottom-nav button:active {
        color: #ff647a;
        background: #211018;
    }
    .df-mobile-staff-nav a.active {
        color: #ffc66d;
        background: #241b0d;
    }

    /* The outer game frame owns the padding. Nested modern page frames should
       not add another full desktop gutter on a phone. */
    .mcc-content-frame > .mcc-content-frame,
    .mcc-content-frame > main.mcc-content-frame,
    .mcc-content-frame > .content,
    .mcc-content-frame > main.content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .mcc-content-frame > .mcc-content-frame {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Readability: many newer systems deliberately use tiny desktop HUD text.
       Raise those labels on phones without changing desktop density. */
    .mcc-content-frame p,
    .mcc-content-frame li,
    .mcc-content-frame td,
    .mcc-content-frame label,
    .mcc-content-frame small {
        line-height: 1.45;
    }
    .mcc-content-frame [class*="kicker"],
    .mcc-content-frame [class$="-k"],
    .mcc-content-frame [class$="-label"],
    .mcc-content-frame [class*="eyebrow"] {
        letter-spacing: .7px !important;
    }

    /* Generic touch target upgrade for page-local buttons/links. */
    .mcc-content-frame button:not(.df-mobile-menu-toggle),
    .mcc-content-frame a[class*="btn"],
    .mcc-content-frame a[class*="button"],
    .mcc-content-frame input[type="submit"] {
        min-height: 44px;
    }

    /* Horizontal chip/tab strips scroll cleanly rather than wrapping into tall
       piles or squeezing labels into unreadable widths. */
    .mcc-content-frame .m-tabs,
    .mcc-content-frame .ach-filter,
    .mcc-content-frame .ach-tabs > .ach-grid + *,
    .mcc-content-frame .npc-nav,
    .mcc-content-frame .bh-nav,
    .mcc-content-frame .tabs,
    .mcc-content-frame .gang-hero-actions {
        scrollbar-width: none;
    }
    .mcc-content-frame .m-tabs::-webkit-scrollbar,
    .mcc-content-frame .ach-filter::-webkit-scrollbar,
    .mcc-content-frame .npc-nav::-webkit-scrollbar,
    .mcc-content-frame .bh-nav::-webkit-scrollbar,
    .mcc-content-frame .tabs::-webkit-scrollbar,
    .mcc-content-frame .gang-hero-actions::-webkit-scrollbar {
        display: none;
    }

    /* Dashboard */
    .df-dashboard .df-hero {
        padding: 15px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }
    .df-dashboard .df-profile-row {
        gap: 11px !important;
    }
    .df-dashboard .df-avatar {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
    }
    .df-dashboard .df-grid-4,
    .df-dashboard .df-grid-3 {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    .df-dashboard .df-actions {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
    }
    .df-dashboard .df-card,
    .df-dashboard .df-stat-card {
        padding: 12px !important;
    }

    /* Gangs */
    .gang-page {
        padding: 8px 0 22px !important;
    }
    .gang-page .gang-hero {
        padding: 17px 14px !important;
        border-radius: 12px !important;
    }
    .gang-page .gang-hero-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .gang-page .gang-hero-actions .gang-btn {
        flex: 0 0 auto;
        min-height: 42px;
        white-space: nowrap;
    }
    .gang-page .gang-summary-grid,
    .gang-page .gang-stat-strip {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 7px !important;
    }
    .gang-page .gang-card-actions,
    .gang-page .gang-recruit-actions {
        flex-wrap: wrap;
    }

    /* Market / Auctions */
    .df-market-v12 {
        padding: 0 !important;
    }
    .df-market-v12 .m-hero {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }
    .df-market-v12 .m-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 3px;
    }
    .df-market-v12 .m-tabs a {
        flex: 0 0 auto !important;
        min-width: auto !important;
        white-space: nowrap;
    }
    .df-market-v12 .m-toolbar {
        grid-template-columns: 1fr !important;
        padding: 9px !important;
    }
    .df-market-v12 .m-toolbar .wide,
    .df-market-v12 .m-toolbar input,
    .df-market-v12 .m-toolbar select,
    .df-market-v12 .m-toolbar .m-btn {
        grid-column: auto !important;
    }
    .df-market-v12 .m-stats {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    .df-market-v12 .m-card {
        padding: 12px !important;
    }
    .df-market-v12 .m-card-actions,
    .df-market-v12 .m-card-actions form {
        width: 100%;
    }
    .df-market-v12 .m-card-actions form {
        display: grid !important;
        grid-template-columns: 1fr auto;
        min-width: 0 !important;
    }

    /* Achievements + Collectibles */
    .df-ach,
    .cab {
        padding: 0 !important;
    }
    .df-ach .ach-hero,
    .cab .cab-hero {
        padding: 16px 14px !important;
    }
    .df-ach .ach-stats,
    .cab .cab-stats {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    .df-ach .ach-filter,
    .df-ach .ach-tabs {
        max-width: 100%;
    }
    .df-ach .ach-filter {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .df-ach .ach-filter > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .df-ach .ach-grid,
    .cab .items,
    .cab .side {
        grid-template-columns: 1fr !important;
    }
    .df-ach .ach-card p {
        min-height: 0 !important;
    }

    /* World Events + Prestige */
    .we,
    .pst {
        padding: 0 !important;
    }
    .we .we-hero,
    .pst .pst-hero {
        padding: 16px 14px !important;
    }
    .we .we-live,
    .pst .pst-rank {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }
    .we .we-clock {
        text-align: left !important;
    }
    .we .we-grid,
    .pst .layout {
        grid-template-columns: 1fr !important;
    }
    .we .stats,
    .pst .pst-stats,
    .pst .bonus-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    /* Gang crimes + Territories + NPC combat + Bounties */
    .gc,
    .turf,
    .df-npc,
    .bh {
        padding: 0 !important;
    }
    .gc .gc-grid,
    .turf .map,
    .df-npc .npc-grid,
    .bh .bh-grid {
        grid-template-columns: 1fr !important;
    }
    .gc .metrics,
    .turf .score-grid,
    .df-npc .npc-summary,
    .bh .bh-stats {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    .gc .actions,
    .turf .battle-actions,
    .bh .bh-nav,
    .df-npc .npc-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 7px !important;
        padding-bottom: 4px;
    }
    .gc .actions > *,
    .turf .battle-actions > *,
    .bh .bh-nav > *,
    .df-npc .npc-nav > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Staff Mode. The desktop staff sidebar remains untouched; on mobile the
       existing drawer plus this one-column workspace makes management usable. */
    .df-staff-page,
    .swe,
    .spm,
    .sam,
    .sm,
    .sturf,
    .ec,
    .df-punit {
        padding: 0 !important;
    }
    .df-staff-page .staff-hero,
    .swe .hero,
    .spm .hero,
    .sam .hero,
    .sm .sm-hero,
    .sturf .hero,
    .ec .ec-hero,
    .df-punit .pu-hero {
        padding: 15px 13px !important;
        border-radius: 11px !important;
    }
    .df-staff-page .staff-metrics,
    .swe .stats,
    .spm .stats,
    .sam .stats,
    .sm .sm-stats,
    .sturf .stats,
    .ec .ec-grid,
    .df-punit .pu-stats {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        gap: 7px !important;
    }
    .df-staff-page .staff-grid,
    .swe .layout,
    .spm .layout,
    .sam .layout,
    .sturf .grid,
    .ec .ec-panels,
    .ec .ec-two,
    .df-punit .pu-grid {
        grid-template-columns: 1fr !important;
    }
    .df-staff-page .staff-form-grid,
    .swe .form,
    .spm .form,
    .sam .form,
    .sturf .form,
    .ec .ec-form,
    .df-punit .pu-form-grid {
        grid-template-columns: 1fr !important;
    }
    .df-staff-page .staff-nav,
    .swe .tabs,
    .spm .tabs,
    .sam .tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .df-staff-page .staff-nav > *,
    .swe .tabs > *,
    .spm .tabs > *,
    .sam .tabs > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .df-staff-page .staff-nav::-webkit-scrollbar,
    .swe .tabs::-webkit-scrollbar,
    .spm .tabs::-webkit-scrollbar,
    .sam .tabs::-webkit-scrollbar {
        display: none;
    }

    /* Swipe hint for genuinely wide data tables. */
    .df-mobile-table-scroll.df-mobile-has-overflow {
        position: relative;
        padding-top: 22px;
    }
    .df-mobile-table-scroll.df-mobile-has-overflow::before {
        content: 'Swipe table ↔';
        position: absolute;
        top: 2px;
        right: 2px;
        color: #667384;
        font: 800 9px/1 Arial, Helvetica, sans-serif;
        letter-spacing: .25px;
        pointer-events: none;
    }

    footer {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 520px) {
    .topbar-banner { max-height: 54px; }
    .topbar-banner img { max-height: 54px; }
    .df-mobile-toolbar { min-height: 50px; }
    .df-mobile-current { font-size: 9px; }

    .mcc-content-frame {
        padding: 8px !important;
    }

    .df-dashboard .df-grid-4,
    .df-dashboard .df-grid-3,
    .df-dashboard .df-actions,
    .gang-page .gang-summary-grid,
    .gang-page .gang-stat-strip,
    .df-market-v12 .m-stats,
    .df-ach .ach-stats,
    .cab .cab-stats,
    .we .stats,
    .pst .pst-stats,
    .pst .bonus-grid,
    .gc .metrics,
    .turf .score-grid,
    .df-npc .npc-summary,
    .bh .bh-stats,
    .df-staff-page .staff-metrics,
    .swe .stats,
    .spm .stats,
    .sam .stats,
    .sm .sm-stats,
    .sturf .stats,
    .ec .ec-grid,
    .df-punit .pu-stats {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }

    .df-mobile-bottom-nav small { font-size: 8px; }
    .df-mobile-bottom-nav a > span,
    .df-mobile-bottom-nav button > span { font-size: 17px; }
}

@media (max-width: 360px) {
    .df-dashboard .df-grid-4,
    .df-dashboard .df-grid-3,
    .gang-page .gang-summary-grid,
    .df-market-v12 .m-stats,
    .df-ach .ach-stats,
    .cab .cab-stats,
    .we .stats,
    .pst .pst-stats,
    .gc .metrics,
    .turf .score-grid,
    .df-npc .npc-summary,
    .bh .bh-stats,
    .df-staff-page .staff-metrics,
    .swe .stats,
    .spm .stats,
    .sam .stats,
    .sm .sm-stats,
    .sturf .stats,
    .ec .ec-grid,
    .df-punit .pu-stats {
        grid-template-columns: 1fr !important;
    }
}


/* ========================================================================== 
   V20.3.3 MOBILE BANNER HOTFIX
   Keep the complete Deadly-Fear header artwork visible on phones.
   The old max-height + theme padding combination clipped the image vertically.
   ========================================================================== */
@media (max-width: 900px) {
    body.df-shell .topbar-banner {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 6px 0 !important;
        overflow: hidden !important;
    }

    body.df-shell .topbar-banner-inner {
        display: block !important;
        width: calc(100% - 12px) !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    body.df-shell .topbar-banner img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

@media (max-width: 520px) {
    body.df-shell .topbar-banner {
        max-height: none !important;
        padding: 5px 0 !important;
    }

    body.df-shell .topbar-banner img {
        max-height: none !important;
    }
}

/* ========================================================================== 
   DEADLY FEAR v20.7 - COMPLETE MOBILE OPTIMIZATION PASS
   Phone/tablet-only quality pass. Desktop layout remains unchanged.
   ========================================================================== */
@media (max-width: 900px) {
    /* ---------- Core mobile shell ---------- */
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 66px;
        scroll-padding-bottom: calc(var(--df-mobile-dock-h, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    body.df-shell {
        max-width: 100vw;
        overflow-x: clip;
        overscroll-behavior-x: none;
    }

    .mcc-content-frame,
    .mcc-content-frame > *,
    .mcc-content-frame :where(section, article, aside, form, fieldset, div) {
        min-width: 0;
    }

    .mcc-content-frame :where(a, p, span, strong, small, td, th, label, code, pre) {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .mcc-content-frame :where([id], .df-chat-panel, .jail-bust-panel) {
        scroll-margin-top: 72px;
        scroll-margin-bottom: calc(var(--df-mobile-dock-h, 64px) + 18px);
    }

    .mcc-content-frame details > summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .mcc-content-frame :where(button, a[class*="btn"], a[class*="button"], input[type="submit"], input[type="button"]) {
        touch-action: manipulation;
    }

    /* Keep page-local sticky/fixed content clear of the game dock. */
    .mcc-content-frame :where(.sticky, [style*="position: sticky"], [style*="position:sticky"]) {
        max-width: 100%;
    }

    .df-mobile-bottom-nav {
        min-height: 66px;
        isolation: isolate;
    }

    .df-mobile-bottom-nav a,
    .df-mobile-bottom-nav button {
        min-height: 54px;
    }

    .df-mobile-bottom-nav a:focus-visible,
    .df-mobile-bottom-nav button:focus-visible,
    .df-mobile-menu-toggle:focus-visible {
        outline: 2px solid #ff647a;
        outline-offset: -2px;
    }

    /* Hide the fixed dock while a phone keyboard is open so it never sits on
       top of compose/chat/search fields. mobile.js toggles this class. */
    body.df-mobile-input-active .df-mobile-bottom-nav {
        transform: translateY(115%);
        pointer-events: none;
    }

    body.df-mobile-input-active {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    /* ---------- Dashboard ---------- */
    .df-dashboard .df-profile-row,
    .df-dashboard .df-hero-money {
        min-width: 0;
    }

    .df-dashboard .df-hero-money {
        width: 100%;
    }

    .df-dashboard .df-cash {
        font-size: clamp(27px, 8vw, 40px) !important;
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .df-dashboard .df-grid > *,
    .df-dashboard .df-actions > * {
        min-width: 0;
    }

    /* ---------- Explore / City ---------- */
    .df-explore .df-explore-hero-inner,
    .df-explore .df-section-head,
    .df-explore .df-sector-head,
    .df-explore .df-location,
    .df-explore .df-referral-copy {
        min-width: 0;
    }

    .df-explore .df-explore-hero-meta,
    .df-explore .df-referral-actions {
        max-width: 100%;
    }

    .df-explore .df-location-list,
    .df-explore .df-sector-grid {
        min-width: 0;
    }

    .df-explore .df-referral-code {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Legacy city.php cards use an inline minmax(280px) grid. Override it on
       phones/tablets so a narrow Android viewport cannot create overflow. */
    body.df-page-city .df-legacy-page > .grid,
    body.df-page-city .df-legacy-page [style*="minmax(280px"] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
        gap: 10px !important;
    }

    body.df-page-city .df-legacy-page .panel {
        min-width: 0 !important;
    }

    /* ---------- Daily Ops ---------- */
    .df-ops {
        padding: 0 !important;
    }

    .df-ops .ops-hero,
    .df-ops .ops-panel,
    .df-ops .ops-card {
        max-width: 100%;
    }

    .df-ops .login-days {
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }

    .df-ops .login-day {
        scroll-snap-align: start;
    }

    .df-ops .ops-btn {
        min-height: 44px;
    }

    /* ---------- Gangs + Organized Crimes ---------- */
    .gang-page :where(.gang-panel, .gang-card, .gang-member, .gang-recruit-row, .gang-invite-card),
    .gc :where(.gc-panel, .active-op, .crew-row, .op-card, .role-card) {
        min-width: 0;
    }

    .gang-page [style*="grid-template-columns:minmax(0,1.6fr)"],
    .gang-page [style*="grid-template-columns: minmax(0,1.6fr)"] {
        grid-template-columns: 1fr !important;
    }

    .gc .gc-hero {
        grid-template-columns: 1fr !important;
    }

    .gc .gc-gang {
        text-align: left !important;
    }

    .gc .crew-row,
    .gc .crew-main,
    .gc .crew-support,
    .gc .op-title,
    .gc .hist-row {
        min-width: 0;
    }

    .gc .actions {
        overflow: visible !important;
        flex-wrap: wrap !important;
    }

    .gc .actions > form,
    .gc .actions > a,
    .gc .actions > button {
        flex: 1 1 135px;
    }

    .gc .actions .btn,
    .gc .join-box .btn {
        min-height: 44px;
    }

    .gc .hist-log {
        max-width: 100%;
        overflow-x: auto;
    }

    /* ---------- Mailbox ---------- */
    .mailbox-page :where(.mail-card, .mail-main, .mail-card-title, .mail-card-sub, .mail-text, .mail-subject) {
        min-width: 0;
        max-width: 100%;
    }

    .mailbox-page .mail-toolbar {
        gap: 7px;
    }

    .mailbox-page .mail-tab,
    .mailbox-page .mail-compose-button,
    .mailbox-page .mail-danger-link,
    .mailbox-page .mail-mini-btn,
    .mailbox-page .mail-submit,
    .mailbox-page .mail-cancel-btn {
        min-height: 44px;
    }

    .mailbox-page .mail-text,
    .mailbox-page .mail-subject {
        overflow-wrap: anywhere;
    }

    /* ---------- Player Profile ---------- */
    .profile-page :where(.profile-identity, .profile-name-line, .profile-title-line, .profile-bio, .profile-row, .profile-comment, .profile-card) {
        min-width: 0;
    }

    .profile-page .profile-actions {
        width: 100%;
    }

    .profile-page .profile-btn,
    .profile-page .profile-save,
    .profile-page .profile-comment-compose button {
        min-height: 44px;
    }

    .profile-page .profile-bio,
    .profile-page .profile-comment {
        overflow-wrap: anywhere;
    }

    /* ---------- Hospital + Jail ---------- */
    .df-hospital,
    .df-jail {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .df-hospital :where(.hosp-panel, .hosp-patient, .hosp-patient-name, .hosp-directory, .hosp-visitor-entry),
    .df-jail :where(.jail-panel, .jail-inmate, .jail-inmate-name, .jail-directory, .jail-bust-panel) {
        min-width: 0;
    }

    .df-hospital .df-chat-feed,
    .df-jail .df-chat-feed {
        min-height: 220px !important;
        height: min(42dvh, 360px) !important;
        max-height: 360px !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .df-hospital .df-chat-form,
    .df-jail .df-chat-form {
        gap: 8px;
    }

    .df-hospital .df-chat-input,
    .df-jail .df-chat-input {
        min-width: 0;
    }

    .df-hospital .df-chat-send,
    .df-jail .df-chat-send,
    .df-hospital .hosp-activity-btn,
    .df-jail .jail-activity-btn,
    .df-hospital .hosp-mini-link,
    .df-jail .jail-mini-link,
    .df-jail .jail-bust-attempt-btn {
        min-height: 44px;
    }

    .df-hospital .hosp-patient-links,
    .df-jail .jail-inmate-links {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* ---------- Forums ---------- */
    .df-forums {
        padding: 0 !important;
    }

    .df-forums :where(.forum-board, .forum-board-name, .forum-board-desc, .topic-row, .topic-title, .topic-desc, .forum-post, .post-body, .post-content) {
        min-width: 0;
    }

    .df-forums .post-content img,
    .df-forums .post-content video,
    .df-forums .post-content iframe {
        max-width: 100% !important;
        height: auto;
    }

    .df-forums .moderation-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .df-forums .moderation-bar form {
        flex: 0 0 auto;
    }

    /* ---------- Inventory ---------- */
    .inventory-page :where(.inv-item, .inv-item-title-wrap, .inv-item-name, .inv-description, .inv-loadout-card) {
        min-width: 0;
    }

    .inventory-page .inv-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        max-width: 100%;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .inventory-page .inv-tabs::-webkit-scrollbar { display: none; }

    .inventory-page .inv-tab {
        flex: 0 0 auto;
        width: auto !important;
        min-height: 44px;
        white-space: nowrap;
    }

    .inventory-page .inv-equip-btn,
    .inventory-page .inv-equipped-btn {
        min-height: 44px;
    }

    /* ---------- Crimes ---------- */
    .crimes-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .crimes-page .crime-filters {
        flex-wrap: nowrap !important;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .crimes-page .crime-filters::-webkit-scrollbar { display: none; }

    .crimes-page .crime-filter {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 42px;
    }

    .crimes-page .crime-btn {
        min-height: 44px;
    }

    /* ---------- Gym ---------- */
    .df-gym {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .df-gym :where(.gym-card, .gym-card-top, .gym-form, .gym-resource, .gym-info-panel) {
        min-width: 0;
    }

    .df-gym .gym-link,
    .df-gym .gym-train-btn,
    .df-gym .gym-quick button {
        min-height: 44px;
    }

    /* ---------- Player Search ---------- */
    .df-player-search {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .df-player-search :where(.ps-card, .ps-top, .ps-name, .ps-sub, .ps-meta) {
        min-width: 0;
    }

    .df-player-search .ps-action,
    .df-player-search .ps-btn {
        min-height: 44px;
    }

    /* ---------- Staff ---------- */
    body[class*="df-page-staff"] .mcc-content-frame,
    body.df-page-admin .mcc-content-frame,
    body.df-page-admin-jobs .mcc-content-frame {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    body[class*="df-page-staff"] .mcc-content-frame :where(.panel, .card, .staff-card),
    body.df-page-admin .mcc-content-frame :where(.panel, .card),
    body.df-page-admin-jobs .mcc-content-frame :where(.panel, .card) {
        min-width: 0;
    }

    body[class*="df-page-staff"] .mcc-content-frame :where(button, input[type="submit"], a[class*="btn"]) {
        min-height: 44px;
    }
}

@media (max-width: 600px) {
    /* Make the global content gutter compact but still comfortable. */
    .mcc-content-frame {
        padding: 8px !important;
    }

    .mcc-panel-card {
        padding: 11px !important;
    }

    .df-mobile-toolbar {
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
    }

    .df-mobile-menu-toggle {
        min-width: 0;
    }

    .df-mobile-current {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Dashboard remains information-dense, but action cards get more room. */
    .df-dashboard .df-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Daily login track should swipe rather than squeeze seven days. */
    .df-ops .login-days {
        grid-template-columns: repeat(7, 58px) !important;
        overflow-x: auto !important;
    }

    .df-ops .ops-panel,
    .df-ops .ops-card {
        padding: 12px !important;
    }

    /* Organized crime metrics stay readable at two per row. */
    .gc .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .gc .metric {
        min-height: 58px;
    }

    .gc .crew-row,
    .gc .op-title {
        grid-template-columns: 1fr !important;
    }

    .gc .crew-support {
        text-align: left !important;
    }

    .gc .supply-grid {
        grid-template-columns: 1fr !important;
    }

    .gc .supply-grid .wide {
        grid-column: auto !important;
    }

    /* Mail cards use the full width and place actions below the message. */
    .mailbox-page .mail-card-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .mailbox-page .mail-card-actions > * {
        flex: 1 1 100px;
    }

    /* Hospital/Jail chat composer becomes a simple vertical stack. */
    .df-hospital .df-chat-form,
    .df-jail .df-chat-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .df-hospital .df-chat-send,
    .df-jail .df-chat-send {
        width: 100%;
    }

    .df-hospital .hosp-patient-bottom,
    .df-jail .jail-inmate-bottom {
        flex-direction: column;
        align-items: stretch !important;
    }

    .df-hospital .hosp-patient-links,
    .df-jail .jail-inmate-links {
        width: 100%;
        justify-content: stretch;
    }

    .df-hospital .hosp-mini-link,
    .df-jail .jail-mini-link {
        flex: 1 1 110px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* Forum posts put author details into a compact header. */
    .df-forums .post-user {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }

    .df-forums .post-avatar {
        width: 48px !important;
        height: 48px !important;
    }

    .df-forums .post-content {
        padding: 13px !important;
    }

    /* Gym quick amounts are easier to thumb in a 2-column layout. */
    .df-gym .gym-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .df-gym .gym-quick button:last-child {
        grid-column: auto !important;
    }

    /* Player search actions stay usable without tiny three-column buttons. */
    .df-player-search .ps-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 420px) {
    .df-mobile-bottom-nav {
        padding-left: max(4px, env(safe-area-inset-left, 0px));
        padding-right: max(4px, env(safe-area-inset-right, 0px));
    }

    .df-mobile-bottom-nav a,
    .df-mobile-bottom-nav button {
        padding-inline: 1px;
    }

    .df-mobile-bottom-nav small {
        font-size: 8px;
    }

    .df-dashboard .df-profile-row {
        align-items: flex-start !important;
    }

    .df-dashboard .df-actions,
    .df-player-search .ps-actions {
        grid-template-columns: 1fr !important;
    }

    .df-ops .ops-hero {
        padding: 16px 13px !important;
    }

    .gc .gc-hero {
        padding: 14px 12px !important;
    }

    .mailbox-page .mail-hero,
    .profile-page .profile-hero,
    .df-hospital .hosp-hero,
    .df-jail .jail-hero,
    .df-forums .forum-hero,
    .inventory-page .inv-hero,
    .crimes-page .crime-hero,
    .df-gym .gym-hero,
    .df-player-search .ps-hero {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .profile-page .profile-identity {
        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) !important;
    }

    .profile-page .profile-avatar {
        width: 68px !important;
        height: 68px !important;
    }

    .profile-page .profile-actions .profile-btn {
        flex: 1 1 100% !important;
        width: 100%;
    }

    .df-hospital .hosp-stats,
    .df-jail .jail-stats,
    .inventory-page .inv-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .df-hospital .hosp-patient,
    .df-jail .jail-inmate {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .df-hospital .hosp-avatar,
    .df-jail .jail-avatar {
        width: 42px !important;
        height: 42px !important;
    }

    .df-forums .forum-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .inventory-page .inv-tabs {
        margin-inline: -2px;
    }

    .crimes-page .crime-stats,
    .crimes-page .crime-hud {
        grid-template-columns: 1fr !important;
    }

    .crimes-page .crime-brave-card {
        grid-column: auto !important;
    }
}


/* v21.8 beta-readiness mobile polish */
@media (max-width: 760px) {
  .mcc-content-frame { max-width: 100%; overflow-x: hidden; }
  .df-nav-link, .df-nav-toggle, button, input[type=submit], input[type=button] { min-height: 44px; }
  table { max-width: 100%; }
  .table-wrap, .responsive-table, .df-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  input, select, textarea { font-size: 16px; max-width: 100%; }
  img { max-width: 100%; height: auto; }
}

/* v21.9.13 Mobile UI Final Polish */
@media(max-width:850px){html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}.mcc-content-frame{min-width:0}.mcc-content-frame img,.mcc-content-frame video,.mcc-content-frame canvas{max-width:100%;height:auto}.mcc-content-frame input,.mcc-content-frame select,.mcc-content-frame textarea,.mcc-content-frame button{max-width:100%}.mcc-content-frame input,.mcc-content-frame select,.mcc-content-frame textarea{font-size:16px}.df-mobile-bottom-nav a,.df-mobile-bottom-nav button{touch-action:manipulation}.df-mobile-bottom-nav a.active{box-shadow:inset 0 2px 0 rgba(255,100,122,.65)}}
@media(max-width:480px){.df-mobile-toolbar{gap:6px}.df-mobile-current{max-width:34vw}.df-mobile-player{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mcc-content-frame{padding-left:10px!important;padding-right:10px!important}}
@media(max-width:370px){.df-mobile-bottom-nav small{font-size:8px}.df-mobile-bottom-nav a>span,.df-mobile-bottom-nav button>span{font-size:16px}}