/* =========================================================
   CRIMORA CITY — SHARED RESPONSIVE INTERFACE
   Loaded last on every page so the same spacing, controls,
   tables, dialogs and mobile behaviour apply game-wide.
========================================================= */

:root {
    --ec-mobile-gutter: clamp(10px, 3vw, 18px);
    --ec-touch-target: 44px;
    --ec-compact-gap: clamp(10px, 2vw, 16px);
}

html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { min-width: 280px; }
body.ec-dialog-open,
body.ec-mobile-nav-open { overflow: hidden; touch-action: none; }

/* Consistent game-page rhythm without changing landing/auth pages. */
:is(
    .rankings-page,.casino-page,.trade-page,.forum-page,.forums-page,
    .asset-page,.territory-page,.district-page,.profile-page-shell,
    .economy-page,.gang-page,.gym-page,.crime-page,.dashboard-page,
    .inventory-page,.progression-page,.bank-page,.bounty-page,
    .hospital-page,.prison-page,.mission-page,.friends-rivals-page,
    .statistics-page,.admin-page,.city-page,.bug-reports-page,
    .bm-page,.team-page,.crime-shell,.encounter-page,.forum-thread-page,
    .social-page,.ec-gym-page,.ma-page,.statistics-shell,
    .customisation-shell,.rules-page,.crimora-coin-shell,.supporter-shell,
    .living-city-page
) {
    min-width: 0;
    margin-inline: auto;
}

/* Shared tap and focus rules. */
:is(button,.button,[role="button"],input,select,textarea,a[class*="button"],a[class*="action"]) {
    -webkit-tap-highlight-color: transparent;
}
:is(button,.button,[role="button"],a[class*="button"],a[class*="action"]) {
    touch-action: manipulation;
}

/* Shared responsive dialog system. */
.ec-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 1100000;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: rgba(2, 4, 7, .78);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .16s ease;
}
.ec-dialog-layer[hidden] { display: none !important; }
.ec-dialog-layer.is-open { opacity: 1; }
.ec-dialog-card {
    width: min(470px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    overflow: auto;
    padding: clamp(20px, 5vw, 28px);
    border: 1px solid var(--ec-line-strong);
    border-radius: var(--ec-radius-lg);
    color: var(--ec-text);
    background: linear-gradient(150deg, rgba(27,34,45,.99), rgba(12,16,22,.99));
    box-shadow: 0 24px 90px rgba(0,0,0,.65);
    transform: translateY(12px) scale(.985);
    transition: transform .18s ease;
}
.ec-dialog-layer.is-open .ec-dialog-card { transform: none; }
.ec-dialog-kicker { color: var(--ec-gold-bright); font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.ec-dialog-card h2 { margin: 6px 0 8px; font-size: clamp(1.35rem, 5vw, 1.8rem); }
.ec-dialog-card p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.ec-dialog-field { display: grid; gap: 7px; margin-top: 18px; }
.ec-dialog-field span { color: var(--ec-muted); font-size: .8rem; font-weight: 800; }
.ec-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.ec-dialog-actions > * { min-width: 110px; }
.ec-dialog-confirm.is-danger { color: #fff; border-color: rgba(240,109,114,.3); background: linear-gradient(135deg,#d74e56,#9f2933); }

/* Dynamically labelled tables become readable cards on narrow screens. */
.ec-table-shell { width: 100%; min-width: 0; }
.ec-table-shell--scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.ec-table-shell--scroll > table { min-width: 760px; }

/* Panels, headings and action rows share consistent mobile spacing. */
:is(
    .rankings-hero,.casino-hero,.trade-hero,.market-hero,.gang-page-hero,
    .asset-hero,.territory-hero,.district-hero,.gym-hero,.crime-hero,
    .dashboard-hero,.progression-hero,.inventory-hero,.forum-hero,
    .bounty-hero,.bank-hero,.mission-hero,.bm-hero,.team-hero,
    .encounter-hero,.ec-gym-hero,.ma-hero,.statistics-hero,
    .forum-thread-hero,.social-hero,.rules-hero,.supporter-hero,
    .crimora-coin-hero,.bug-reports-hero
) {
    overflow-wrap: anywhere;
}
:is(
    .hero-actions,.trade-hero-actions,.asset-actions,.casino-hero__actions,
    .profile-hero-actions,.territory-hero-actions,.district-hero-actions,
    .gang-actions,.forum-actions,.market-actions,.progression-actions
) {
    min-width: 0;
}

/* Tabs are always usable with touch and never push the page wider. */
:is(
    .ranking-tabs,.casino-tabs,.property-view-tabs,.territory-map-modes,
    .territory-map-tools,.district-map-modes,.forum-tabs,.gang-tabs,
    .inventory-tabs,.progression-tabs,.profile-tabs,.admin-tabs
) {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
}
:is(
    .ranking-tabs,.casino-tabs,.property-view-tabs,.territory-map-modes,
    .forum-tabs,.gang-tabs,.inventory-tabs,.progression-tabs,.profile-tabs,
    .admin-tabs
) > :is(button,a) { scroll-snap-align: start; }

/* Maps retain controls and a practical touch viewport. */
:is(.territory-map-shell,.district-map-shell) {
    min-height: clamp(430px, 70dvh, 820px);
    touch-action: none;
    overscroll-behavior: contain;
}
:is(.territory-map-toolbar,.district-map-toolbar) { min-width: 0; }
:is(.territory-map-toolbar,.district-map-toolbar) button { min-height: 40px; }
:is(.territory-map-tooltip,.district-map-tooltip) { pointer-events: none; }

/* Long names, values and IDs never force horizontal overflow. */
:is(
    .ranking-row,.trade-target,.trade-list-item,.forum-row,.property-market-card,
    .asset-card,.gang-member-card,.gang-application-card,.profile-summary-item,
    .casino-history-row,.horse-card,.inventory-card,.shop-item-card
) { min-width: 0; }
:is(
    .ranking-row strong,.ranking-row small,.trade-target strong,.trade-target small,
    .forum-row strong,.forum-row small,.asset-card strong,.asset-card small,
    .gang-member-card strong,.gang-member-card small,.profile-summary-item strong,
    .profile-summary-item small,.shop-item-card h2,.shop-item-card p
) { overflow-wrap: anywhere; }

@media (hover: none), (pointer: coarse) {
    :is(button,.button,[role="button"],a[class*="button"],a[class*="action"]) { min-height: var(--ec-touch-target); }
    :is(button,.button,[role="button"],a):hover { transform: none; }
    [title] { -webkit-touch-callout: none; }
}

@media (max-width: 1080px) {
    /* Mobile navigation behaves as a true slide-out drawer. */
    #navbar { --ec-navbar-hide-distance: 0px !important; }
    #navbar.ec-navbar-hidden { transform: none; pointer-events: auto; }
    .ec-nav-shell { position: relative; }
    .ec-nav-links {
        position: fixed !important;
        z-index: 10030;
        inset: 0 auto 0 0;
        width: min(380px, 88vw) !important;
        max-width: 100%;
        height: 100dvh;
        max-height: none !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: max(78px, calc(64px + env(safe-area-inset-top))) 12px max(22px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-right: 1px solid var(--ec-nav-line);
        background: linear-gradient(180deg, rgba(18,22,29,.995), rgba(8,11,15,.995));
        box-shadow: 22px 0 70px rgba(0,0,0,.58);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .22s cubic-bezier(.22,1,.36,1), visibility .22s;
    }
    .ec-nav-links.is-mobile-open { transform: none; visibility: visible; }
    .ec-nav-links > a,
    .ec-admin-slot > a {
        width: 100% !important;
        min-height: 48px;
        justify-content: flex-start;
        padding: 8px 12px !important;
    }
    .ec-nav-links > a span:not(.ec-nav-link-icon):not(.ec-nav-alert-dot),
    .ec-admin-slot > a span:not(.ec-nav-link-icon) { display: inline !important; }
    .ec-nav-alert-dot { right: 12px; top: 11px; }
    #navMobileBackdrop {
        position: fixed;
        z-index: 10020;
        inset: 0;
        background: rgba(0,0,0,.64);
        backdrop-filter: blur(3px);
    }

    /* Hero actions and summary grids no longer create awkward side columns. */
    :is(
        .rankings-hero,.casino-hero,.trade-hero,.market-hero,.asset-hero,
        .territory-hero,.district-hero,.progression-hero,.inventory-hero,
        .bm-hero,.team-hero,.encounter-hero,.ec-gym-hero,.ma-hero,
        .statistics-hero,.forum-thread-hero,.social-hero,.rules-hero,
        .supporter-hero,.crimora-coin-hero,.bug-reports-hero
    ) { gap: 18px; }

    .profile-page-shell { width: min(calc(100% - 20px), 1280px); }
    .profile-hero-content { min-width: 0; }

    /* Make dense sidebars become normal document flow. */
    :is(
        .territory-layout,.district-layout,.property-market-layout,.asset-layout,
        .horse-racing-layout,.roulette-layout,.trade-layout,.gang-layout,
        .forum-layout,.profile-content-layout
    ) { min-width: 0; }
}

@media (max-width: 760px) {
    body { padding-bottom: env(safe-area-inset-bottom); }

    /* Every signed-in page uses the same safe horizontal gutter. Individual
       page widths remain intact on desktop, including the extra-wide maps. */
    :is(
        .rankings-page,.casino-page,.trade-page,.asset-page,.territory-page,
        .district-page,.profile-page-shell,.economy-page,.gang-page,.gym-page,
        .crime-page,.dashboard-page,.progression-page,.inventory-page,
        .bank-page,.bounty-page,.hospital-page,.prison-page,.mission-page,
        .friends-rivals-page,.statistics-page,.city-page,.forum-page,
        .bug-reports-page,.bm-page,.team-page,.crime-shell,.encounter-page,
        .forum-thread-page,.social-page,.ec-gym-page,.ma-page,
        .statistics-shell,.customisation-shell,.rules-page,.crimora-coin-shell,
        .supporter-shell,.living-city-page
    ) {
        width: calc(100% - (var(--ec-mobile-gutter) * 2)) !important;
        margin-inline: auto !important;
    }

    /* Margin-led page shells receive one consistent top and bottom rhythm. */
    :is(
        .rankings-page,.trade-page,.district-page,.profile-page-shell,
        .economy-page,.gang-page,.dashboard-page,.progression-page,
        .inventory-page,.bank-page,.bounty-page,.hospital-page,.prison-page,
        .city-page,.forum-page,.encounter-page,.forum-thread-page,
        .social-page,.ec-gym-page,.ma-page,.statistics-shell,
        .customisation-shell,.rules-page,.crimora-coin-shell,.supporter-shell,
        .living-city-page
    ) {
        margin-top: 14px !important;
        margin-bottom: max(82px, calc(68px + env(safe-area-inset-bottom))) !important;
    }

    /* Padding-led shells avoid a doubled top gap on small screens. */
    :is(
        .casino-page,.asset-page,.territory-page,.bug-reports-page,
        .bm-page,.team-page,.crime-shell
    ) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 14px !important;
        padding-bottom: max(82px, calc(68px + env(safe-area-inset-bottom))) !important;
    }

    h1 { font-size: clamp(1.8rem, 9vw, 2.55rem); }
    h2 { line-height: 1.16; }

    :is(
        .rankings-hero,.casino-hero,.trade-hero,.market-hero,.gang-page-hero,
        .asset-hero,.territory-hero,.district-hero,.gym-hero,.crime-hero,
        .dashboard-hero,.progression-hero,.inventory-hero,.forum-hero,
        .bounty-hero,.bank-hero,.mission-hero,.bm-hero,.team-hero,
        .encounter-hero,.ec-gym-hero,.ma-hero,.statistics-hero,
        .forum-thread-hero,.social-hero,.rules-hero,.supporter-hero,
        .crimora-coin-hero,.bug-reports-hero
    ) {
        padding: clamp(17px, 5vw, 22px) !important;
        border-radius: 18px !important;
    }

    :is(
        .hero-actions,.trade-hero-actions,.asset-actions,.casino-hero__actions,
        .profile-hero-actions,.territory-hero-actions,.district-hero-actions,
        .gang-actions,.forum-actions,.market-actions,.progression-actions,
        .bm-hero__actions,.social-hero-actions,.supporter-hero__actions,
        .rules-hero__actions,.forum-hero-actions
    ) {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        justify-content: stretch !important;
    }
    :is(
        .hero-actions,.trade-hero-actions,.asset-actions,.casino-hero__actions,
        .profile-hero-actions,.territory-hero-actions,.district-hero-actions,
        .gang-actions,.forum-actions,.market-actions,.progression-actions,
        .bm-hero__actions,.social-hero-actions,.supporter-hero__actions,
        .rules-hero__actions,.forum-hero-actions
    ) > * { width: 100%; min-width: 0 !important; text-align: center; }

    /* Scrollable tabs use a visible edge fade and compact controls. */
    :is(
        .ranking-tabs,.casino-tabs,.property-view-tabs,.territory-map-modes,
        .forum-tabs,.gang-tabs,.inventory-tabs,.progression-tabs,.profile-tabs,
        .admin-tabs
    ) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }
    :is(
        .ranking-tabs,.casino-tabs,.property-view-tabs,.territory-map-modes,
        .forum-tabs,.gang-tabs,.inventory-tabs,.progression-tabs,.profile-tabs,
        .admin-tabs
    ) > :is(button,a) { flex: 0 0 auto !important; white-space: nowrap; }

    /* Ranking categories are compact horizontal rows. */
    .ranking-category { padding: 10px !important; }
    .ranking-category h2 { position: sticky; left: 0; z-index: 1; width: max-content; }
    .ranking-board { padding: 15px !important; }

    /* Card-table layout for ordinary data tables. */
    table[data-ec-responsive-table="cards"] { display: block; width: 100%; }
    table[data-ec-responsive-table="cards"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    table[data-ec-responsive-table="cards"] tbody,
    table[data-ec-responsive-table="cards"] tr,
    table[data-ec-responsive-table="cards"] td { display: block; width: 100%; }
    table[data-ec-responsive-table="cards"] tbody { display: grid; gap: 10px; }
    table[data-ec-responsive-table="cards"] tr {
        padding: 12px 13px;
        border: 1px solid var(--ec-line);
        border-radius: 13px;
        background: rgba(255,255,255,.025);
    }
    table[data-ec-responsive-table="cards"] td {
        display: grid;
        grid-template-columns: minmax(92px, .72fr) minmax(0, 1.28fr);
        gap: 10px;
        align-items: start;
        padding: 7px 0 !important;
        border: 0 !important;
        text-align: right !important;
        overflow-wrap: anywhere;
    }
    table[data-ec-responsive-table="cards"] td::before {
        content: attr(data-ec-label);
        color: var(--ec-muted);
        font-size: .72rem;
        font-weight: 850;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
    }
    table[data-ec-responsive-table="cards"] td:empty { display: none; }

    /* Maps: controls stack, selected details remain below the viewport. */
    :is(.territory-map-controls,.district-map-controls,.territory-map-toolbar,.district-map-toolbar) {
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: stretch !important;
        gap: 9px !important;
    }
    :is(.territory-map-filters,.district-map-filters) { grid-template-columns: 1fr !important; }
    :is(.territory-map-modes,.district-map-modes,.territory-map-tools,.district-map-tools) { width: 100%; }
    :is(.territory-map-shell,.district-map-shell) {
        min-height: 58dvh;
        max-height: 720px;
        border-radius: 14px !important;
    }
    :is(.territory-map-zoom,.district-map-zoom) { margin-left: 0 !important; }

    /* Casino and horse racing preserve the play area on phones. */
    .casino-tabs { position: sticky; top: 60px; z-index: 20; background: rgba(9,12,16,.94); backdrop-filter: blur(10px); }
    .casino-control-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .casino-control-row > * { width: 100%; }
    .horse-race-track { overflow-x: hidden; }
    .horse-lane { min-height: 52px; }
    .horse-lane__runner { min-width: 0; }
    .horse-field { gap: 8px; }
    .horse-bet-slip { width: 100%; }

    /* Trading and properties: important actions stay directly under content. */
    .trade-sidebar { max-height: none !important; overflow: visible !important; }
    .trade-confirm-bar { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 10; box-shadow: 0 -10px 30px rgba(0,0,0,.28); }
    .property-market-card .asset-card__footer,
    .asset-card__footer { width: 100%; }
    .property-market-card .asset-card__footer > *,
    .asset-card__footer > button { width: 100%; }

    /* Profile actions become compact two-column tap targets. */
    .profile-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .profile-action { min-height: 54px !important; padding: 9px 10px !important; }
    .profile-action > span { flex: 0 0 auto; }
    .profile-summary-strip { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

    /* Forums/chat do not rely on hover and inputs remain above mobile keyboards. */
    .forum-row :is(.forum-row__actions,.thread-actions) { opacity: 1 !important; visibility: visible !important; }
    .chat-window,
    .echo-chat-window {
        max-width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 76px) !important;
    }

    .ec-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .ec-dialog-actions > * { min-width: 0; width: 100%; }

    .ec-global-toasts { bottom: max(10px, env(safe-area-inset-bottom)); top: auto; }
}

@media (max-width: 480px) {
    :is(
        .hero-actions,.trade-hero-actions,.asset-actions,.casino-hero__actions,
        .profile-hero-actions,.territory-hero-actions,.district-hero-actions,
        .gang-actions,.forum-actions,.market-actions,.progression-actions,
        .bm-hero__actions,.social-hero-actions,.supporter-hero__actions,
        .rules-hero__actions,.forum-hero-actions
    ) { grid-template-columns: 1fr; }

    .profile-action-grid,
    .profile-summary-strip,
    .casino-control-row { grid-template-columns: 1fr !important; }

    .ranking-row { grid-template-columns: 34px 42px minmax(0,1fr) !important; padding: 10px !important; }
    .ranking-row > b { grid-column: 3 !important; text-align: left !important; }
    .ranking-row img { width: 40px !important; height: 40px !important; }

    .ec-nav-logo { max-width: 62px; }
    .ec-nav-player-copy,
    .ec-nav-action-label { display: none !important; }

    .ec-dialog-card { padding: 18px; border-radius: 17px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
    .ec-nav-links { padding-top: 58px; }
    :is(.territory-map-shell,.district-map-shell) { min-height: 76dvh; }
    .ec-dialog-card { max-height: calc(100dvh - 18px); }
}

@media (prefers-reduced-motion: reduce) {
    .ec-dialog-layer,
    .ec-dialog-card,
    .ec-nav-links { transition-duration: .01ms !important; }
}

/* Page-specific consistency fixes discovered during the responsive audit. */
:is(
    .market-loading,.trade-loading,.forum-loading,.district-detail-loading,
    .territory-map-loading,.gang-loading-card,.inventory-empty,.progression-empty,
    .asset-loading,.casino-notice,.hospital-loading,.prison-loading
) {
    border-radius: 13px;
    overflow-wrap: anywhere;
}

:is(.district-workspace,.territory-layout) { min-width: 0; }
.district-map-wrap {
    min-width: 0;
    min-height: clamp(430px, 64dvh, 760px);
    overflow: hidden;
    touch-action: manipulation;
    overscroll-behavior: contain;
}
.district-map { width: 100%; height: 100%; }

/* Ensure large administration and Gang ledgers scroll inside their cards. */
:is(.admin-economy-ledger-table,.gang-attack-table) {
    white-space: nowrap;
}
:is(.admin-panel,.gang-panel,.gang-section,.forum-thread-panel,.trade-workspace) { min-width: 0; }

@media (max-width: 760px) {
    .district-workspace,
    .territory-layout { grid-template-columns: 1fr !important; }
    .district-detail-panel,
    .territory-detail { position: static !important; max-height: none !important; }
    .district-map-wrap { min-height: 56dvh; aspect-ratio: auto !important; }
    .district-panel-heading,
    .territory-panel-heading { align-items: flex-start !important; }
    .district-map-legend,
    .territory-map-legend { width: 100%; overflow-x: auto; justify-content: flex-start !important; }
    .district-summary,
    .territory-overview,
    .asset-metrics,
    .trade-metrics,
    .casino-stat-grid,
    .gang-dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .district-summary > *,
    .territory-overview > *,
    .asset-metrics > *,
    .trade-metrics > *,
    .casino-stat-grid > *,
    .gang-dashboard-metrics > * { min-width: 0; }
    .district-location-card { min-width: 0 !important; }
    .travel-progress__meta { flex-wrap: wrap; }
    .forum-thread-row { grid-template-columns: minmax(0,1fr) auto !important; }
    .forum-thread-avatar { display: none !important; }
    .forum-post { grid-template-columns: 1fr !important; }
    .forum-post-author { display: flex !important; align-items: center; gap: 10px; }
    .forum-post-actions { flex-wrap: wrap; }
    .gang-application-card,
    .gang-directory-card,
    .gang-member-card { overflow: hidden; }
    .gang-application-card__stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .gang-modal__dialog,
    .forum-modal-card,
    .economy-modal__card,
    .inventory-modal__card { width: min(calc(100vw - 20px), 580px) !important; max-height: calc(100dvh - 24px); overflow-y: auto; }
    .admin-layout { grid-template-columns: 1fr !important; }
    .admin-sidebar { position: static !important; max-height: none !important; }
    .admin-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 480px) {
    .district-summary,
    .territory-overview,
    .asset-metrics,
    .trade-metrics,
    .casino-stat-grid,
    .gang-dashboard-metrics,
    .admin-metric-grid { grid-template-columns: 1fr !important; }
    .gang-application-card__stats { grid-template-columns: 1fr !important; }
    .district-map-wrap { min-height: 52dvh; }
}