/* =========================
   0. View Transition Utilities
   ========================= */
.cs-view-enter {
    opacity: 0 !important;
    transform: translateY(8px) !important;
}
#map-container,
#crew-overview,
#crew-locker-panel,
#parley,
#ledger-view,
#alley-view,
#fleet-view,
#kpi-view,
#most-wanted-view,
#chicago-herald-view,
#contacts-graph-view {
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cs-spinner {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 215, 0, 0.2);
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: cs-spin 0.6s linear infinite;
}
@keyframes cs-spin {
    to { transform: rotate(360deg); }
}
.cs-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    gap: 10px;
    color: #888;
    font-size: 14px;
}
.cs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 8px;
    text-align: center;
}
.cs-empty-state-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.7;
    margin-bottom: 4px;
}
.cs-empty-state-text {
    color: #ccc;
    font-size: 15px;
    margin: 0;
}
.cs-empty-state-hint {
    color: #777;
    font-size: 13px;
    margin: 0;
}
.cs-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 90000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cs-fade-in 0.15s ease;
}
@keyframes cs-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cs-confirm-box {
    background: #1e1e1e;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 24px 28px;
    max-width: 380px;
    width: 90%;
    text-align: center;
}
.cs-confirm-title {
    font-size: 16px;
    font-weight: bold;
    color: #f2c94c;
    margin: 0 0 10px;
}
.cs-confirm-message {
    font-size: 14px;
    color: #ccc;
    margin: 0 0 20px;
    line-height: 1.5;
}
.cs-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.cs-confirm-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
}
.cs-confirm-btn--confirm {
    background: #c0392b;
    color: #fff;
}
.cs-confirm-btn--confirm:hover {
    background: #e74c3c;
}
.cs-confirm-btn--cancel {
    background: #444;
    color: #ccc;
}
.cs-confirm-btn--cancel:hover {
    background: #555;
}

/* =========================
   1. Base & Body Styles
   ========================= */
:root {
    --cs-font-heading: Georgia, 'Times New Roman', serif;
    --cs-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --cs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
.most-wanted-title,
.most-wanted-name,
.nickname,
.cs-confirm-title,
.kpi-title,
.fleet-crew-name,
.newspaper-title {
    font-family: var(--cs-font-heading);
}
body {
    font-family: var(--cs-font-body);
    background-color: #2b2b2b;
    color: #fff;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-image: url("../img/gui/screens/background/chicago.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* =========================
   2. Top Bars & Navigation
   ========================= */
#status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #2a2520 0%, #1e1a17 100%);
    color: #fff;
    padding: 10px 15px;
    margin-top: 3px;
    box-sizing: border-box;
    border-bottom: 2px solid #3d3225;
    flex-wrap: nowrap;
    min-height: 50px;
    overflow: visible;
}

.status-left,
.status-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.status-left>*,
.status-right>* {
    flex-shrink: 0;
}

#status-bar button:not(.door-btn) {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s, transform 0.1s;
    flex-shrink: 0;
    opacity: 0.85;
}

#status-bar button:not(.door-btn):hover {
    background-color: #555;
    opacity: 1;
}

#status-bar button:not(.door-btn):active {
    transform: scale(0.97);
}

#status-bar button.active {
    background-color: #555;
    border-bottom: 2px solid #ffd700;
    opacity: 1;
}


/* Submenus and Order Stepper */
#submenue {
    margin: 0 !important;
    padding: 5px !important;
    width: 100% !important;
    box-sizing: border-box;
    background-color: #333;
    height: 50px;
}

#order-overview-menue {
    margin: 0 !important;
    padding: 5px !important;
    width: 100% !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, #363228 0%, #2a2a2a 40%, #333 100%);
    min-height: 80px;
}

/* Applicant count badge on the Fresh Meat tab button */
.freshmeat-count-badge {
    color: #ffd700;
    font-weight: bold;
}

.freshmeat-count-badge[hidden] {
    display: none;
}

#order-overview-menue>* {
    flex-shrink: 0;
}

#order-overview-menue.no-crew > *:not(#order-no-crew-message) {
    display: none !important;
}

.status-metrics {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #2a2a2a;
    border: 1px solid #3d3225;
    border-radius: 6px;
    padding: 4px 10px;
    border-right: 1px solid #444;
    margin-right: 4px;
}

#resources {
    min-width: 80px;
    font-weight: bold;
    color: #ffd700;
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 0.5px;
}

#territory-indicator {
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
}

#server-time-wrap {
    display: inline-block;
    margin: 0 10px;
    position: relative;
    cursor: help;
}

/* Bell pop — fires once when the in-game timeslot rolls over (see serverTime.js). */
#server-time-bell {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    z-index: 30;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
    will-change: transform, opacity;
}
#server-time-bell.is-ringing {
    animation: stt-bell-pop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes stt-bell-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
    18%  { opacity: 1; transform: translate(-50%, -90%) scale(1.5) rotate(-14deg); }
    34%  { transform: translate(-50%, -90%) scale(1.35) rotate(12deg); }
    48%  { transform: translate(-50%, -90%) scale(1.4) rotate(-8deg); }
    62%  { opacity: 1; transform: translate(-50%, -90%) scale(1.4) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1.1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    #server-time-bell.is-ringing {
        animation: stt-bell-fade 1.2s ease-out forwards;
    }
    @keyframes stt-bell-fade {
        0%   { opacity: 0; transform: translate(-50%, -90%) scale(1); }
        20%  { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
    }
}

#server-time {
    position: relative;
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', serif;
    padding: 5px 12px;
    border: 1px solid #5a4a2a;
    border-radius: 8px;
    background: #14110b;
    white-space: nowrap;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.04);
}

#server-time-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #d4a017 0%, #8b6914 100%);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    z-index: 0;
    transition: width 0.25s linear;
    opacity: 0.35;
}

#server-time-stack {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

#server-time-date {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #d4a017;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
}

#server-time-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 1px 0 2px;
}

#server-time-dots .stt-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3d3225;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#server-time-dots .stt-dot.is-current {
    width: 8px;
    height: 8px;
    background: #f0c040;
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}


#server-time-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1c1611;
    border: 1px solid #3d3225;
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 240px;
    z-index: 2001;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    color: #e6e1d3;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    line-height: 1.5;
    display: none;
    pointer-events: none;
}

#server-time-wrap:hover #server-time-tooltip {
    display: block;
}

#server-time-tooltip .stt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

#server-time-tooltip .stt-label {
    color: #8a7c5e;
}

#server-time-tooltip .stt-value {
    color: #e6e1d3;
    font-weight: 600;
}

#server-time-tooltip .stt-value.stt-accent {
    color: #d4a017;
}

#server-time-tooltip .stt-divider {
    height: 1px;
    background: #3d3225;
    margin: 6px 0;
}

#server-time-tooltip .stt-hint {
    justify-content: center;
    color: #8a7c5e;
    font-style: italic;
    font-size: 11px;
}

/* Weekly schedule overlay -- opens on pill click. */
#server-schedule-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#server-schedule-overlay[hidden] {
    display: none;
}

#server-schedule-panel {
    background: #1c1611;
    border: 1px solid #5a4a2a;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    color: #e6e1d3;
    font-family: Georgia, 'Times New Roman', serif;
    max-width: 1100px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#server-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #3d3225;
}

#server-schedule-header h3 {
    margin: 0;
    color: #d4a017;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#server-schedule-close {
    background: transparent;
    border: 1px solid #5a4a2a;
    color: #e6e1d3;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

#server-schedule-close:hover {
    background: #2a2218;
    color: #f0c040;
}

#server-schedule-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
}

#server-schedule-tabs .sst-tab {
    background: transparent;
    border: 1px solid #5a4a2a;
    color: #c8c2b0;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: inherit;
}

#server-schedule-tabs .sst-tab:hover {
    background: #2a2218;
    color: #f0c040;
}

#server-schedule-tabs .sst-tab.is-active {
    background: #d4a017;
    border-color: #d4a017;
    color: #1a140d;
    font-weight: 600;
}

#server-schedule-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    overflow: hidden;
    padding: 12px 18px 18px;
}

#server-schedule-grid {
    overflow: auto;
    min-width: 0;
    position: relative;
}

#server-schedule-grid .sst-row-fill {
    position: absolute;
    z-index: 4;
    background: linear-gradient(90deg,
        rgba(240, 192, 64, 0.28) 0%,
        rgba(212, 160, 23, 0.10) 100%);
    pointer-events: none;
    transition: width 0.25s linear;
    border-right: 1px solid rgba(240, 192, 64, 0.6);
    box-shadow: 2px 0 6px rgba(240, 192, 64, 0.35);
}

#server-schedule-grid .sst-row-fill[hidden] {
    display: none;
}

#server-schedule-legend {
    background: #14110b;
    border: 1px solid #3d3225;
    border-radius: 8px;
    padding: 10px 12px;
    align-self: start;
    max-height: 100%;
    overflow: auto;
}

#server-schedule-legend h4 {
    margin: 0 0 8px;
    color: #d4a017;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#server-schedule-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#server-schedule-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #d8c896;
    line-height: 1.3;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: help;
    transition: background 0.15s ease;
}

#server-schedule-legend li:hover {
    background: rgba(120, 180, 220, 0.18);
    color: #d6e8f5;
}

/* Clickable legend entries — game-tab events that link to the handbook.
 * Admin-tab entries stay cursor:help (tooltip only). */
#server-schedule-legend li.has-handbook {
    cursor: pointer;
}

#server-schedule-legend li.has-handbook .ssl-label::after {
    content: ' ›';
    color: #b39d5e;
    font-weight: 600;
}

#server-schedule-legend li.has-handbook:hover .ssl-label::after {
    color: #ffe6a3;
}

#server-schedule-legend li.has-handbook:focus-visible {
    outline: 2px solid #ffd16a;
    outline-offset: 1px;
}

#server-schedule-legend .ssl-icon {
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex: 0 0 auto;
}

#server-schedule-legend .ssl-label {
    flex: 1 1 auto;
}

#server-schedule-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 12px;
}

#server-schedule-table th,
#server-schedule-table td {
    border: 1px solid #2a2218;
    padding: 6px 8px;
    vertical-align: top;
    background: #14110b;
}

#server-schedule-table thead th {
    background: #221a10;
    color: #d4a017;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

#server-schedule-table thead th.is-now {
    color: #f0c040;
    background: #2d2210;
    box-shadow: inset 0 -2px 0 #f0c040;
}

#server-schedule-table .sst-corner {
    text-align: left;
    color: #8a7c5e;
    left: 0;
    position: sticky;
    z-index: 3;
}

#server-schedule-table .sst-slot-label {
    background: #1a1510;
    text-align: left;
    white-space: nowrap;
    min-width: 110px;
    position: sticky;
    left: 0;
    z-index: 1;
}

#server-schedule-table .sst-slot-name {
    display: block;
    color: #e6e1d3;
    font-weight: 700;
    font-size: 12px;
}

#server-schedule-table .sst-slot-hour {
    display: block;
    color: #8a7c5e;
    font-size: 10px;
    font-family: 'Courier New', monospace;
}

/* Real-world local time per slot. Layout only — the inner
   .real-time-stamp span (from realTimeStampHtml) owns the colour: blue,
   so the player reads it as their own clock, consistent with the
   extortion-cooldown stamp. */
#server-schedule-table .sst-slot-local {
    display: block;
    font-size: 10px;
    margin-top: 2px;
}

#server-schedule-table td {
    width: 90px;
    line-height: 1.35;
}

#server-schedule-table td.sst-empty {
    background: #100d08;
}

#server-schedule-table td.is-now {
    background: #2d2210;
    box-shadow: inset 0 0 0 2px #f0c040;
}

#server-schedule-table .sst-event {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1px 3px 1px 0;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(212, 160, 23, 0.08);
    cursor: help;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}

#server-schedule-table .sst-event:hover {
    background: rgba(240, 192, 64, 0.22);
}

#server-schedule-table td.is-now .sst-event {
    background: rgba(240, 192, 64, 0.18);
}

#server-schedule-table .sst-event.is-highlight {
    background: rgba(120, 180, 220, 0.22);
    box-shadow: 0 0 0 1px rgba(120, 180, 220, 0.5);
}

#server-schedule-table td.has-highlight {
    background: rgba(120, 180, 220, 0.08);
}

/* Floating tooltip that follows the cursor while hovering an event icon. */
#server-schedule-tooltip {
    position: fixed;
    z-index: 3100;
    pointer-events: none;
    background: #1c1611;
    border: 1px solid #5a4a2a;
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff5d6;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    max-width: 320px;
}

#server-schedule-tooltip[hidden] {
    display: none;
}


#user-welcome {
    font-weight: bold;
    color: #fff;
}

#username-label {
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    line-height: 1.1;
    max-width: 140px;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    vertical-align: middle;
}

#username-label.is-avatar {
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    background-color: #1e1a17;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

#username-label.is-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.player-tooltip-entry {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.player-tooltip-entry img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
}

.player-tooltip-entry .ptt-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.player-tooltip-entry .ptt-name {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-tooltip-entry .ptt-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.player-tooltip-entry .ptt-meta .status-badge {
    font-weight: 700;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.player-tooltip-entry .ptt-meta .status-badge-dead {
    background: rgba(255, 100, 100, 0.18);
    color: #ff9b8a;
}

.player-tooltip-entry .ptt-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

/* Fleet manager */
.fleet-wrap {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 12px;
    width: 100%;
    height: calc(100vh - 160px);
    box-sizing: border-box;
}
.fleet-column {
    background: #0f0f0f;
    color: #eee;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.fleet-left {
    width: 260px;
}
.fleet-right {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fleet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    height: 100%;
    align-items: flex-start;
    align-content: flex-start;
}
.fleet-grid .card-wrapper {
    width: 220px;
    height: 320px;
}
.fleet-grid .card {
    width: 220px;
    height: 320px;
    margin: 0;
}
/* mgmt #92: phone-only fleet-wrap single-column reflow removed. */
.fleet-scroll {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 8px;
}
.fleet-crew-card {
    padding: 10px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    cursor: pointer;
}
.fleet-crew-card.active {
    border-color: #b08c3a;
    box-shadow: 0 0 10px rgba(176, 140, 58, 0.4);
}
.fleet-capo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #333;
    background: #222;
}
.fleet-crew-name {
    font-weight: 700;
    margin-bottom: 6px;
}
.fleet-crew-meta {
    font-size: 0.9rem;
    color: #ccc;
}
.fleet-assigned {
    color: #8bc34a;
    font-weight: 600;
}
.fleet-unassigned {
    color: #aaa;
}
.fleet-assign-btn {
    margin-top: 6px;
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #555;
    background: #333;
    color: #fff;
    cursor: pointer;
}
.fleet-assign-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    background: #2e2e2e;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
}

.status-badge-dead {
    background: #b31212;
    color: #fff;
}

/* =========================
   Clash Replay Overlay
   ========================= */
body.clash-overlay-active {
    overflow: hidden;
}

.clash-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 4, 12, 0.92);
    z-index: 5000;
    padding: clamp(12px, 2vw, 24px);
    box-sizing: border-box;
}

.clash-overlay.clash-overlay--active {
    display: flex;
}

.clash-overlay__panel {
    width: 100%;
    height: 100%;
    background: #05070f;
    border-radius: 18px;
    border: 1px solid rgba(242, 201, 76, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}

.clash-overlay__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(12, 13, 22, 0.95), rgba(6, 6, 8, 0.85));
    border-bottom: 1px solid rgba(242, 201, 76, 0.25);
}

.clash-overlay__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    justify-content: space-between;
}

.clash-overlay__share-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clash-overlay__back {
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: #f2c94c;
    color: #1b1102;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 8px 20px rgba(242, 201, 76, 0.35);
}

.clash-overlay__back:hover,
.clash-overlay__back:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(242, 201, 76, 0.45);
    outline: none;
}

.clash-share-button {
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    background: linear-gradient(145deg, rgba(242, 209, 107, 0.9), rgba(192, 139, 47, 0.95));
    color: #141009;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.15s ease, filter 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.clash-share-button.whatsapp {
    background: linear-gradient(145deg, #25d366, #128c7e);
    color: #fff;
}

.clash-share-button:hover,
.clash-share-button:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
    outline: none;
}

.clash-share-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}

#clash-overlay-frame {
    flex: 1;
    width: 100%;
    border: none;
    background: #000;
}

.clash-overlay__panel:focus-within .clash-overlay__back {
    outline: 2px solid rgba(242, 201, 76, 0.6);
    outline-offset: 2px;
}

/* =========================
   13. Alert Tokens & KPI Badges
   ========================= */
:root {
    --alert-amber-bg: #2f1c06;
    --alert-amber-border: #f1a64c;
    --alert-amber-text: #ffe6b4;
    --alert-amber-badge-bg: #c97b20;
    --alert-amber-badge-text: #ffbc53;
    --alert-emerald-bg: #10281f;
    --alert-emerald-border: #49a477;
    --alert-emerald-text: #c9f5db;
    --alert-emerald-badge-bg: #267755;
    --alert-emerald-badge-text: #7ae2a8;
}

.kpi-alerts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.kpi-alert {
    border: 1px solid #4b505f;
    border-radius: 12px;
    padding: 12px 14px;
    background: #131820;
    color: #f4e9c6;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kpi-alert.is-hot {
    background: var(--alert-amber-bg);
    border-color: var(--alert-amber-border);
    color: var(--alert-amber-text);
    box-shadow: 0 0 20px rgba(255, 170, 45, 0.2);
}

.kpi-alert.is-clear {
    background: var(--alert-emerald-bg);
    border-color: var(--alert-emerald-border);
    color: var(--alert-emerald-text);
}

.kpi-alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.kpi-alert-title {
    font-size: 12px;
}

.kpi-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--alert-amber-badge-bg);
    color: var(--alert-amber-badge-text);
}

.kpi-alert.is-clear .kpi-alert-badge {
    background: var(--alert-emerald-badge-bg);
    color: var(--alert-emerald-badge-text);
}

.kpi-alert-tier {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    background: #1f2430;
}

.kpi-alert-body {
    font-size: 13px;
    line-height: 1.45;
}

.kpi-alert-strong {
    font-weight: 700;
}

/* =========================
   13. Most Wanted View
   ========================= */
#most-wanted-view {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* #162 — "The Bureau Wall": the Most Wanted panel is a 1920s Chicago
   Detective-Bureau corkboard of pinned reward bills. Skin only; data,
   accessibility and the player-standing summary below are unchanged. */
.most-wanted-panel {
    --mw-ink: #1c140d;
    --mw-paper: #efe2c4;
    --mw-paper-edge: #d8c49a;
    --mw-red: #9e2b1e;
    width: min(1180px, 100%);
    background-color: #6b5c3e;
    background-image: url('../img/mostwanted/tex-corkboard.png');
    background-size: 520px;
    background-blend-mode: multiply;
    border: 1px solid rgba(40, 28, 16, 0.85);
    border-radius: 10px;
    padding: 22px 22px 26px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 0 80px rgba(0, 0, 0, 0.35);
    /* Wall on the left, the player's own standing pinned to the right rail.
       Title / subtitle / footnote span both columns. */
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "title   title"
        "sub     sub"
        "wall    standing"
        "foot    foot";
    column-gap: 22px;
    row-gap: 14px;
    align-items: start;
    /* The in-game shell (#content-wrapper) clips at viewport height and does not
       page-scroll, so the panel fits the viewport and the WALL column scrolls
       internally — title, the right-rail standing card and footnote stay put. */
    max-height: calc(100vh - 150px);
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
}

/* Below ~860px the right rail drops under the wall (still "beside" on desktop). */
@media (max-width: 860px) {
    .most-wanted-panel {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "sub"
            "wall"
            "standing"
            "foot";
    }
}

.most-wanted-title {
    grid-area: title;
    font-family: "Playbill", "Rockwell", Clarendon, Georgia, serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f3e8cf;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    margin: 0;
    text-align: center;
}

.most-wanted-subtitle {
    grid-area: sub;
    margin: 0;
    color: rgba(243, 232, 207, 0.85);
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-align: center;
}

.most-wanted-footnote {
    grid-area: foot;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(243, 232, 207, 0.55);
    text-align: center;
    font-style: italic;
}

/* the wall itself occupies the left grid cell */
.most-wanted-panel > .most-wanted-list,
.most-wanted-panel > .most-wanted-status { grid-area: wall; }
.most-wanted-panel > .player-wanted-summary { grid-area: standing; }

.most-wanted-status {
    text-align: center;
    padding: 28px 16px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    border: 1px dashed rgba(176, 140, 58, 0.4);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
}

.most-wanted-status.most-wanted-error {
    border-color: rgba(255, 82, 82, 0.6);
    color: #ff9b9b;
}

.most-wanted-list {
    list-style: none;
    margin: 0;
    padding: 6px 6px 2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 24px;
    align-items: start;
    /* the wall scrolls within its grid cell; right rail + chrome stay fixed */
    align-self: stretch;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 1080px) {
    .most-wanted-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .most-wanted-list { grid-template-columns: 1fr; }
}

/* #162 — the player's own standing as a pinned notice card on the right rail,
   dressed to match the Bureau Wall (aged paper, brass pin) rather than the old
   dark-glass card. Sticky so it stays in view while the wall scrolls. */
.player-wanted-summary {
    position: sticky;
    top: 8px;
    margin: 0;
    padding: 16px 16px 14px;
    border: 1px solid var(--mw-paper-edge, #d8c49a);
    border-top: 4px solid var(--mw-player-color, #9e2b1e);
    border-radius: 2px;
    background: #fff7e4;
    color: #1c140d;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
}

.player-wanted-summary::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 24px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe49a, #b8860b 55%, #6b4e07);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.player-wanted-summary:focus {
    outline: 3px solid var(--mw-red, #9e2b1e);
    outline-offset: 3px;
}

.player-wanted-breakdown {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(40, 28, 16, 0.18);
    color: #2a2114;
    font-size: 13px;
    line-height: 1.5;
    cursor: default;
    text-align: left;
}

.player-wanted-summary.is-open .player-wanted-breakdown {
    display: block;
}

.player-wanted-summary.is-open .player-wanted-hint {
    display: none;
}

.player-wanted-breakdown-close {
    display: none;
}

.player-wanted-breakdown-heading {
    font-weight: 800;
    color: #1c140d;
    padding-right: 24px;
    margin-bottom: 2px;
}

.player-wanted-breakdown-sub {
    color: #5a4326;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.player-wanted-components {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.player-wanted-component-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.player-wanted-component-label {
    color: #2a2114;
}

.player-wanted-component-points {
    color: #9e2b1e;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.player-wanted-detail-lines {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 10px;
    color: #5a4326;
    font-size: 12px;
}

.player-wanted-detail-lines li {
    padding: 1px 0;
}

.player-wanted-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-wanted-avatar {
    width: 56px;
    height: 56px;
    border-radius: 0;
    overflow: hidden;
    border: 3px solid #efe2c4;
    outline: 1px solid var(--mw-ink, #1c140d);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    filter: sepia(0.4) grayscale(0.2);
}

.player-wanted-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-wanted-name {
    font-size: 13px;
    color: #5a4326;
}

.player-wanted-heading {
    font-family: "Rockwell", Clarendon, Georgia, serif;
    font-size: 16px;
    font-weight: 800;
    color: #1c140d;
    letter-spacing: 0.3px;
}

.most-wanted-player-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 2px;
    border: 1px solid rgba(40, 28, 16, 0.4);
    background: #3a2f22;
    color: #f3e8cf;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.player-wanted-score {
    font-family: "Rockwell", Clarendon, Georgia, serif;
    font-size: 15px;
    font-weight: 800;
    color: #9e2b1e;
}

.player-wanted-note,
.player-wanted-threshold {
    font-size: 13px;
    color: #4a3a26;
}

.player-wanted-hint {
    font-size: 12px;
    color: #6a5230;
    margin-top: 4px;
    font-style: italic;
}

/* --- The pinned reward bill (one Most-Wanted entry) ---------------------- */
.most-wanted-entry {
    position: relative;
    background: var(--mw-paper);
    border: 1px solid var(--mw-paper-edge);
    padding: 14px 14px 12px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(120, 90, 40, 0.12);
    transform: rotate(var(--mw-tilt, 0deg));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    color: var(--mw-ink);
}

/* foxing / aged grain on the paper */
.most-wanted-entry::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 12%, rgba(120, 80, 30, 0.18), transparent 40%),
        radial-gradient(circle at 18% 88%, rgba(90, 60, 20, 0.14), transparent 38%);
    mix-blend-mode: multiply;
}

.most-wanted-entry:hover,
.most-wanted-entry:focus-within {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 16px 26px rgba(0, 0, 0, 0.55);
    z-index: 5;
}

.most-wanted-entry:focus {
    outline: 3px solid var(--mw-red);
    outline-offset: 2px;
}

/* players aren't clickable — read as a notice, not a hover target */
.most-wanted-entry.player { cursor: default; }

/* brass push-pin */
.mw-poster-pin {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe49a, #b8860b 55%, #6b4e07);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* the slammed WANTED rubber stamp on 5-star men (real letterpress sprite,
   white field knocked out via multiply over the light paper) */
.mw-poster-redstamp { display: none; }
.most-wanted-entry.hot .mw-poster-redstamp {
    display: block;
    position: absolute;
    top: 40%;
    right: -8px;
    z-index: 4;
    pointer-events: none;
    width: 110px;
    height: 60px;
    background: url('../img/mostwanted/sprite-stamp-wanted.png') center/contain no-repeat;
    color: transparent;
    transform: rotate(-12deg);
    mix-blend-mode: multiply;
}

.mw-poster-band {
    text-align: center;
    font-family: "Playbill", "Rockwell", Clarendon, Georgia, serif;
    font-weight: 900;
    letter-spacing: 0.14em;
    font-size: 18px;
    text-transform: uppercase;
    border-top: 3px solid var(--mw-ink);
    border-bottom: 1.5px solid var(--mw-ink);
    padding: 3px 0;
    margin-bottom: 10px;
    color: var(--mw-ink);
}

.most-wanted-mugshot {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 6px solid #efe2c4;
    outline: 2px solid var(--mw-ink);
    background: #241c12;
}

.most-wanted-mugshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(0.55) contrast(1.05) brightness(0.96) grayscale(0.25);
}

.most-wanted-rank {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    background: var(--mw-ink);
    color: var(--mw-paper);
    font-family: "Rockwell", Clarendon, Georgia, serif;
    font-weight: 800;
    font-size: 15px;
    padding: 2px 8px;
    letter-spacing: 0.04em;
}

/* OPAQUE name plate — text never floats on the paper grain (Lucia rule 1) */
.most-wanted-details {
    background: #f7eed7;
    border: 1px solid var(--mw-paper-edge);
    margin-top: 10px;
    padding: 8px 9px;
    position: relative;
    z-index: 1;
}

.most-wanted-name {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.12;
    color: var(--mw-ink);
}

.most-wanted-nickname {
    display: block;
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    color: #5a4326;
    margin-top: 2px;
}

.mw-poster-stars {
    display: block;
    margin-top: 8px;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--mw-red);
    line-height: 1;
}

.mw-poster-stars .off { color: #c2ad82; }

.mw-poster-stars-num {
    font-family: Georgia, serif;
    font-size: 12px;
    color: #4a3a26;
    margin-left: 6px;
    letter-spacing: 0;
}

.mw-poster-meta {
    font-size: 12.5px;
    color: #4a3a26;
    margin-top: 6px;
    line-height: 1.35;
}

.mw-poster-tab {
    display: inline-block;
    margin-top: 8px;
    max-width: 100%;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    color: #fff;
    border-radius: 2px;
    background: #3a2f22;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-poster-tab.freelance { background: #6a5a42; }

.most-wanted-entry.player .most-wanted-player-tag {
    margin-left: 6px;
}

.mw-poster-reward {
    margin-top: 8px;
    text-align: center;
    font-family: "Rockwell", Clarendon, Georgia, serif;
    font-weight: 800;
    color: var(--mw-red);
    border-top: 1px dashed #b9a06f;
    padding-top: 6px;
    font-size: 15px;
}

/* The lead (#1) bill reads dead level and slightly larger — the wall's anchor */
.most-wanted-entry.lead .mw-poster-band { font-size: 20px; }

@media (prefers-reduced-motion: reduce) {
    .most-wanted-entry { transform: none; }
    .most-wanted-entry:hover,
    .most-wanted-entry:focus-within { transform: scale(1.01); }
}

/* mgmt #92: phone-only most-wanted reflow removed. */

/* mgmt #92: .mobile-only utility removed (no game-client markup references it). */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Order dropdown layout */
#order-overview-menue {
    display: flex;
    gap: 0;
    align-items: stretch;
    position: relative;
    z-index: 1000;
    flex-wrap: wrap;
}

#order-overview-menue select {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    padding: 2px 4px;
}


/* ensure each menu element shares a base height and centered content */
#order-overview-menue>button,
#order-overview-menue>.gangster-selection,
#order-overview-menue>.order-rail-connector,
#order-overview-menue>.cs-dropdown {
    display: flex;
    align-items: center;
    min-height: 32px;
}

#order-overview-menue button {
    padding: 2px 6px;
}

#order-overview-menue button:disabled {
    opacity: 0.3;
    cursor: help;
    pointer-events: auto;
}

/* ── Order step button system with numbered badges ── */
.order-step {
    position: relative;
    background: #2a2a2a;
    color: #aaa;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

/* Numbered steps use inline-flex so badge sits left of the label */
.order-step[data-step-num] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 6px;
}

/* Numbered badge rendered via data attribute */
.order-step[data-step-num]::before {
    content: attr(data-step-num);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #555;
    background: transparent;
    color: #666;
    font-size: 0.65rem;
    font-weight: bold;
    font-family: var(--cs-font-body, system-ui, sans-serif);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

/* Completed step: filled gold badge */
.order-step.completed-step {
    background: #3a3520;
    color: #d4af37;
    border-color: #b08c3a;
}

.order-step.completed-step[data-step-num]::before {
    background: #b08c3a;
    border-color: #d4af37;
    color: #1a1a1a;
}

/* Active step: outlined gold badge */
.order-step.active-step {
    border-color: #b08c3a;
    color: #d4af37;
    box-shadow: 0 0 6px rgba(176, 140, 58, 0.3);
}

.order-step.active-step[data-step-num]::before {
    border-color: #d4af37;
    color: #d4af37;
    background: transparent;
}

.order-step:not(:disabled):hover {
    background: #444;
    border-color: #d4af37;
}

/* ── Rail connector (replaces raw arrow characters) ── */
.order-rail-connector {
    width: 20px;
    height: 2px;
    background: #444;
    flex-shrink: 0;
    align-self: center;
    border-radius: 1px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

/* Connector completed state: gold line */
.order-rail-connector.connector-done {
    background: #b08c3a;
    box-shadow: 0 0 4px rgba(176, 140, 58, 0.25);
}

#commit-order {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

#commit-order:not(:disabled) {
    background: #b08c3a;
    color: #1a1a1a;
    font-weight: bold;
    border: 1px solid #d4af37;
    border-radius: 4px;
}

/* Pulse animation when order becomes ready or reopened order has changes */
@keyframes orderReadyPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5); }
    50%  { transform: scale(1.04); box-shadow: 0 0 12px 4px rgba(212, 175, 55, 0.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

#commit-order.commit-ready {
    animation: orderReadyPulse 0.6s ease;
}

/* Green flash on successful order submission */
#commit-order.commit-success {
    background: #2e7d32 !important;
    color: #fff !important;
    border-color: #4caf50 !important;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

#cancel-order:not(:disabled) {
    background: #3a2020;
    color: #cc6666;
    border: 1px solid #884444;
    border-radius: 4px;
}

#map-mode-bar {
    margin: 0 !important;
    padding: 5px 8px !important;
    width: 100% !important;
    box-sizing: border-box;
    background-color: #2b2b2b;
    border-top: 1px solid #474747;
    border-bottom: 1px solid #1f1f1f;
    display: none;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#map-mode-bar .map-mode-viewport-switch {
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    border: 1px solid #555;
    border-radius: 10px;
    background: #1a1a1a;
    gap: 2px;
}

#map-mode-bar .map-mode-switch-btn {
    min-width: 54px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    background: transparent;
    color: #d8d8d8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

#map-mode-bar .map-mode-switch-btn.is-active {
    background: #d4af37;
    color: #111;
}

#map-mode-bar .map-mode-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 0;
    background: #1f1f1f;
    color: #d8d8d8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

#map-mode-bar .map-mode-btn.is-active {
    background: #d4af37;
    color: #111;
    border-color: #e3c35f;
}

/* Text-label variant for the events time-range toggle (24h / 1w). Emoji
   buttons are 18px; short text labels need to be smaller to fit. */
#map-mode-bar .map-mode-btn-events-range {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

#map-mode-bar .map-mode-readout {
    margin-left: 8px;
    font-size: 13px;
    line-height: 1;
    color: #d8d8d8;
    white-space: nowrap;
    font-weight: 600;
}

#map-mode-bar .map-mode-copy-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 0;
    background: #1f1f1f;
    color: #d8d8d8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

#map-mode-bar .map-mode-copy-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

#map-mode-bar .map-mode-business-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 190px;
    max-width: 260px;
}

#map-mode-bar .map-mode-business-search {
    min-width: 0;
    width: 100%;
    height: 34px;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 0 10px;
    background: #1f1f1f;
    color: #d8d8d8;
    font-size: 13px;
    line-height: 1;
}

#map-mode-bar .map-mode-business-search::placeholder {
    color: #8d8d8d;
}

#map-mode-bar .map-mode-business-search:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35);
}

#map-mode-bar .map-mode-business-clear {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid #555;
    border-radius: 999px;
    padding: 0;
    background: #1f1f1f;
    color: #d8d8d8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

#map-mode-bar .map-mode-business-clear:disabled {
    opacity: 0.35;
    cursor: default;
}

#cityiso-admin-ready-hint {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    max-width: min(88vw, 720px);
}

#cityiso-admin-ready-hint[aria-hidden="true"] {
    display: none;
}

.cityiso-admin-ready-entry {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(88vw, 720px);
    box-sizing: border-box;
    background: rgba(20, 20, 20, 0.94);
    color: #d9f6e4;
    border: 1px solid rgba(70, 180, 120, 0.65);
    border-radius: 10px;
    font-family: var(--cs-font-mono);
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 10px;
}

.cityiso-admin-ready-entry-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.cityiso-admin-ready-entry-btn {
    appearance: none;
    border: 1px solid rgba(110, 180, 135, 0.55);
    background: rgba(38, 51, 43, 0.95);
    color: #d9f6e4;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.cityiso-admin-ready-entry-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.cityiso-admin-ready-entry-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* .order-arrow replaced by .order-rail-connector above */

#order-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #555;
}

#order-progress-bar {
    height: 100%;
    width: 0%;
    background: #d4af37;
    transition: width 0.3s ease;
}

#order-progress-bar.progress-complete {
    background: linear-gradient(90deg, #d4af37 0%, #f5e6a3 50%, #d4af37 100%);
    background-size: 200% 100%;
    animation: order-shimmer 2s ease infinite;
}

@keyframes order-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#order-tooltip {
    width: 100%;
    font-size: 0.75rem;
    color: #b08c3a;
    font-style: italic;
    padding: 0 6px 2px;
    font-family: Georgia, 'Times New Roman', serif;
    min-height: 1.1em;
}

#order-draft-summary {
    width: 100%;
    font-size: 0.75rem;
    color: #888;
    padding: 2px 6px 0;
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--cs-font-body);
}

.hidden-map {
    visibility: hidden;
    pointer-events: none;
}

.ai-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-slider-title {
    display: block;
    text-align: center;
    margin: 10px 0 5px;
    font-weight: bold;
}

.ai-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
}

.ai-slider-range {
    flex: 1;
    height: 15px;
    -webkit-appearance: none;
    background: linear-gradient(to right, #999 0%, #ddd 0%);
    border-radius: 10px;
    outline: none;
}

.ai-slider-range::-webkit-slider-runnable-track {
    height: 15px;
    border-radius: 10px;
}

.bug-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#lobby-btn {
    /* Specific layout tweaks for the lobby button can go here */
}

.door-btn {
    background: transparent;
    border: 1px solid red;
    border-radius: 8px;
    color: red;
    padding: 5px 10px;
    font-weight: bold;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.door-btn:hover {
    background: red;
    color: #fff;
}

.door-btn .door-timer {
    font-size: 11px;
    font-weight: 500;
    color: #b0b0b0;
}

/* mgmt #92: phone-only door-timer hide removed. */

#hamburger-container {
    position: relative;
    z-index: 9999;
}

#hamburger-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
}

#hamburger-menu {
    display: none;
    position: fixed;
    background: #333;
    border: 1px solid #444;
    min-width: 120px;
    z-index: 9999;
}

#hamburger-menu.open {
    display: block;
}

#hamburger-menu div {
    padding: 8px 12px;
    cursor: pointer;
}

#hamburger-menu div:hover {
    background: #555;
}

.ai-slider-range::-moz-range-track {
    height: 15px;
    border-radius: 10px;
}

.ai-slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #999;
    cursor: pointer;
}

.ai-slider-range::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #999;
    cursor: pointer;
}

/* Remove #menu and related selectors */
#menu,
#menu button,
#menu button:hover {
    display: none !important;
}

/* Adjust .preset-bar if needed */
.preset-bar {
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 14px;
    gap: 10px;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 5px 10px;
}

/* Keep button and .nobutton styles for general buttons */
button,
.nobutton {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 5px;
}

button:hover,
.nobutton:hover {
    background-color: #555;
}

/* =========================
   3. Layout Wrappers
   ========================= */
#content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#gangster-overview {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    width: 100%;
    background-color: #222;
    padding: 20px;
    gap: 20px;
    overflow: hidden;
}

#recruit-filter-bar-wrapper {
    margin-bottom: 10px;
}

/* =========================
   4. Gangster Panel & List
   ========================= */
#gangster-panel {
    width: 125px;
    background-color: #333;
    padding: 0;
    border-right: 2px solid #444;
    overflow-y: auto;
}

#gangster-panel h2 {
    margin-top: 0;
}

#gangster-panel ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#gangster-panel li {
    margin: 5px 0;
    padding: 5px;
    background-color: #444;
    border-radius: 5px;
}

/* Crew selection rows */
.crew-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 8px 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    color: #111;
    overflow: visible;
}

.crew-row:hover {
    background-color: #ffffff;
}

.crew-row.selected {
    border: 2px solid rgba(255, 77, 77, 0.75);
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.55);
}

/* #96: capo-picker loading skeleton — mirrors the .crew-row shape (64px capo
   circle + two text bars) while crewLoad is in flight. Reuses the fm-shimmer
   keyframe defined for the family-manager skeleton. */
.crew-row-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
}
.crew-row-skeleton__thumb,
.crew-row-skeleton__bar {
    background: linear-gradient(90deg, #d8d8d8 25%, #ececec 50%, #d8d8d8 75%);
    background-size: 200% 100%;
    animation: fm-shimmer 1.2s ease-in-out infinite;
}
.crew-row-skeleton__thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.crew-row-skeleton__bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.crew-row-skeleton__bar {
    height: 12px;
    border-radius: 6px;
    width: 80%;
}
.crew-row-skeleton__bar--short {
    width: 50%;
}

.crew-main {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.crew-capo-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
}

.crew-meta {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.crew-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    flex: 1;
    min-width: 0;
    font-weight: bold;
    overflow: visible;
    white-space: nowrap;
}

.crew-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #285 rename affordance. Always fully visible — a hover-only pencil is
   undiscoverable (you cannot hover what you do not know is there), and this is
   the ONLY entry point to the whole rename feature. Given a bordered chip so it
   reads as a button rather than as punctuation after the crew name. */
.crew-rename-btn {
    flex: 0 0 auto;
    margin-left: 2px;
    padding: 1px 5px;
    border: 1px solid #8a7a5f;
    border-radius: 3px;
    background: #f3e9d2;
    color: #3a2f1e;
    font-size: 0.9em;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.crew-rename-btn:hover {
    background: #e5d4ae;
    border-color: #5c4b32;
}

.crew-rename-btn:focus-visible {
    outline: 2px solid #5c4b32;
    outline-offset: 1px;
}

/* Inline edit field. Sized to the space the name occupied so the card doesn't
   reflow mid-edit. */
.crew-rename-input {
    width: 100%;
    min-width: 0;
    padding: 1px 4px;
    border: 1px solid #8a7a5f;
    border-radius: 2px;
    background: #fdf8ec;
    color: #1a1a1a;
    font: inherit;
    font-weight: normal;
}

.crew-count {
    color: #111;
    margin-left: 8px;
}

.crew-order-count {
    color: #111;
    margin-left: 8px;
}

#order-capo-button {
    display: flex;
    align-items: center;
    gap: 8px;
}

#order-gangster-button {
    white-space: normal;
    line-height: 1.2;
}

#order-gangster-controls {
    display: none;
}

#order-gangster-minus,
#order-gangster-plus {
    cursor: pointer !important;
    border-bottom: none !important;
}

#order-gangster-minus:disabled,
#order-gangster-plus:disabled {
    cursor: not-allowed !important;
}

#order-capo-button img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

#order-capo-panel,
#order-category-panel,
#order-command-panel {
    display: none;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    z-index: 1400;
}

#order-command-panel {
    gap: 0;
    background-color: #333;
    border: 1px solid #111;
}

#order-capo-panel {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.dropdown-row {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #333;
}

.dropdown-row.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dropdown-row.is-disabled:hover {
    background-color: #333;
}

.dropdown-row:hover {
    background-color: #555;
}

.dropdown-row.selected {
    border: 2px solid red;
}

.dropdown-header {
    padding: 6px 10px 3px;
    background-color: #222;
    color: #c9a227;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: default;
    border-top: 1px solid #111;
}

.dropdown-header:first-child {
    border-top: none;
}

.gangster-selection {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
}

.gangster-selection button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
}

.gangster-selection button:disabled {
    opacity: 0.3;
    cursor: default;
}

.gangster-icons {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 4px;
}

.gangster-icon {
    font-size: 0.75em;
    opacity: 0.3;
}

.gangster-icon.active {
    opacity: 1;
}

.repeat-toggle {
    background-color: #333;
    color: #FFD700;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    margin-top: 0;
    font-size: 1.2em;
}

.repeat-toggle.active {
    background-color: #4CAF50;
    color: #FFD700;
}

/* Gangster Tiles (Grid & Small) */
.gangster-tile {
    width: 150px;
    height: 150px;
    background-color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.gangster-tile:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
}

/* Fresh Meat tile — taller to accommodate stat row */
.gangster-tile.fm-tile {
    height: auto;
    overflow: visible;
}

/* Compact crew-member profile tile — Family → Crew view */
.gangster-tile.crew-profile-compact {
    width: 110px;
}

/* Minimal tile — locker name-only view */
.gangster-tile.locker-tile-minimal {
    width: 73px;
}
.locker-tile-minimal .fm-name {
    font-size: 9px;
    padding: 1px 3px;
}
.locker-crew-members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Tile image container */
.gangster-img-wrap { position: relative; }

/* Capo-eligible badge */
.fm-capo-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    pointer-events: none;
    z-index: 6;
    border: 1px solid gold;
}

/* Health / wanted indicators — extracted from inline styles */
.gangster-health-indicator,
.gangster-wanted-indicator {
    position: absolute;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}
.gangster-health-indicator {
    left: 0;
    background: transparent;
    overflow: visible;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
.gangster-health-indicator svg { display: block; }
.gangster-health-indicator.is-critical svg {
    animation: gangsterHeartPulse 0.9s ease-in-out infinite;
    transform-origin: center;
}
@keyframes gangsterHeartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}
.gangster-health-drip {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 4px;
    height: 5px;
    margin-left: -2px;
    background: #b00000;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    box-shadow: 0 0 2px rgba(120, 0, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}
.gangster-health-indicator.is-bleeding .gangster-health-drip {
    display: block;
    animation: gangsterHeartBleed 2.5s ease-in infinite;
    animation-delay: var(--bleed-delay, 0s);
}
@keyframes gangsterHeartBleed {
    0%       { transform: translateY(0) scale(0.4); opacity: 0; }
    15%      { transform: translateY(0) scale(1);   opacity: 1; }
    70%      { transform: translateY(14px) scale(0.9); opacity: 0.9; }
    100%     { transform: translateY(22px) scale(0.3); opacity: 0; }
}
.gangster-wanted-indicator {
    left: 0;
    background-color: white;
}
.gangster-wanted-indicator span { font-size: 14px; }
.gangster-wanted-indicator.shifted { left: 22px; }

/* Score bar — extracted from inline styles */
.score-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: 18px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    overflow: hidden;
}
.score-bar-fill {
    height: 100%;
    border-radius: 2px;
    pointer-events: none;
    position: relative;
}
.score-bar-label {
    position: absolute;
    right: 4px;
    top: 0;
    line-height: 18px;
    font-size: 10px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
}

/* Name row always visible on Fresh Meat tiles */
.fm-name {
    padding: 2px 4px;
    font-size: 11px;
    background: rgba(0,0,0,0.75);
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fm-name.has-nickname {
    background: gold;
    color: #111;
    font-weight: bold;
}

/* Compact stat row on Fresh Meat tiles */
.fm-stats {
    display: flex;
    justify-content: space-between;
    padding: 2px 4px;
    font-size: 10px;
    color: #aaa;
    background: #222;
    gap: 2px;
}
.fm-stats span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Origin flavor line */
.fm-origin {
    font-size: 9px;
    color: #777;
    padding: 0 4px 2px;
    background: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Best-skill row on tile: icon + abbreviation + stars */
.fm-skill-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background: #222;
    font-size: 10px;
    color: #aaa;
}
.fm-skill-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}
.fm-skill-abbr {
    font-weight: bold;
    color: #ccc;
    flex-shrink: 0;
}
/* IQ brain icon on compact crew tiles — tinted per tier */
.fm-iq-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}
.iq-icon-dim       { filter: brightness(0) saturate(100%) invert(50%) sepia(30%) saturate(600%) hue-rotate(330deg); }
.iq-icon-average   { filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg); }
.iq-icon-sharp     { filter: brightness(0) saturate(100%) invert(60%) sepia(40%) saturate(400%) hue-rotate(15deg); }
.iq-icon-brilliant { filter: brightness(0) saturate(100%) invert(90%) sepia(80%) saturate(800%) hue-rotate(10deg) brightness(1.2); }

.fm-skill-inline {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: bold;
    color: #ccc;
}
.fm-skill-row .skill-stars-container {
    display: flex;
    gap: 1px;
    font-size: 10px;
}
.crew-profile-compact .fm-skill-row .skill-stars-container {
    font-size: 8px;
}

/* Quick-recruit button on tile */
.fm-recruit-btn {
    display: block;
    width: 100%;
    padding: 4px 0;
    margin: 0;
    border: none;
    border-radius: 0 0 8px 8px;
    background: #2a6e2a;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}
.fm-recruit-btn:hover { background: #3a8e3a; }

/* Summary count bar */
.fm-summary-bar {
    padding: 6px 10px;
    font-size: 13px;
    color: #ccc;
    background: #1a1a1a;
    border-radius: 4px;
    margin-bottom: 6px;
}

/* High-match divider */
.fm-match-divider {
    grid-column: 1 / -1;
    padding: 4px 8px;
    font-size: 11px;
    color: #888;
    border-top: 1px solid #444;
    margin-top: 4px;
}

/* First-visit onboarding hint */
.fm-hint {
    padding: 8px 12px;
    font-size: 12px;
    color: #bbb;
    background: #1e1e1e;
    border-left: 3px solid gold;
    border-radius: 3px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fm-hint-dismiss {
    background: none;
    border: none;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    padding: 0 0 0 12px;
    margin: 0;
}

/* Preset select — match game UI selects */
.fm-preset-select {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
}

/* Loading skeleton */
.fm-skeleton {
    display: flex;
    gap: 10px;
    padding: 20px 10px;
    flex-wrap: wrap;
}
.fm-skeleton-tile {
    width: 150px;
    height: 150px;
    background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: fm-shimmer 1.2s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes fm-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gangster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.gangster-nickname {
    padding: 3px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: background 0.3s;
    pointer-events: none;
}

.gangster-tile:hover .gangster-nickname {
    background-color: rgba(0, 0, 0, 0.9);
}

/* Small Tiles for List */
.gangster-tile.small {
    width: 75px;
    height: 75px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    transform: none;
    overflow: visible;
    position: relative;
}

.gangster-tile.small:hover {
    transform: scale(1.02);
}

.gangster-image.small {
    width: 75px;
    height: 75px;
}

.gangster-nickname.small {
    font-size: 14px;
}

/* Gangster Overview Grid */
#gangster-overview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
    padding-bottom: 60px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Avoid vertical stretching that creates huge gaps between rows */
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
}

#gangster-overview-list::-webkit-scrollbar {
    width: 10px;
}

#gangster-overview-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

#gangster-overview-list::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================
   5. Map & Overlay Elements
   ========================= */
/* The map box must fill exactly the area below the nav bars — no more.
   It used to declare `height: 100vh`, which is the *full window* height
   and ignores the ~214px of nav chrome above it: the box overflowed its
   parent (#content-wrapper, overflow:hidden), pushing the southern map
   rows below the visible edge. `height: 100%` resolves against
   #content-wrapper instead, so the box ends exactly where the window
   does.

   It also used to declare `min-width: 1400px` (here and on #city-map),
   forcing the canvas host wider than the window on <1400px viewports —
   the right edge and frame fell off-screen. The Pixi map adapts to any
   host size (computeBlockSize + the fit-zoom floor handle it), so the
   host must simply fill its parent and never exceed it. */
#map-container {
    position: relative;
    display: flex;
    background-color: #222;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    overflow: hidden;
}

#city-map {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    background-color: #222;
}

#city-iso-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1400px;
    min-height: 650px;
    border: none;
    margin: 0;
    padding: 0;
    background-color: #222;
    display: none;
    overflow: hidden;
}

#city-iso-map #iso-app {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

#city-iso-map #iso-map-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 650px;
    background: radial-gradient(circle at 18% 18%, #222c3f 0%, #0f1116 46%, #090b10 100%);
}

#city-iso-map #iso-canvas-host {
    position: absolute;
    inset: 0;
}

#city-iso-map #iso-hint {
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(13, 18, 28, 0.76);
    border: 1px solid #33425a;
    font-size: 12px;
    color: #d0def8;
    pointer-events: none;
    z-index: 15;
}

#city-iso-map .cityiso-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(24, 18, 12, 0.95);
    border: 1px solid rgba(176, 133, 82, 0.75);
    color: #f6f1e3;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(30, 20, 10, 0.45);
    max-width: 270px;
    display: none;
    z-index: 20;
}

#city-iso-map canvas.iso-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Overlay Profile & Boxes */
.overlay-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    text-align: center;
    position: relative;
}

.overlay-info {
    margin-bottom: 10px;
    margin-top: 6px;
}

.overlay-box {
    position: absolute;
    background-color: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10;
    font-size: 14px;
    font-weight: bold;
}

/* =========================
   6. Business Dropdown
   ========================= */
#step-select-business {
    position: relative;
    min-width: 80px;
}

#step-select-business .cs-dropdown-trigger,
#step-select-business .cs-dropdown-option {
    font-size: 0.85em;
}

#step-select-business .cs-dropdown-option .business-cost {
    display: block;
    font-size: 0.75em;
    color: #ccc;
}

.cs-dropdown-trigger {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 32px;
}

.cs-dropdown-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-dropdown-arrow {
    margin-left: 4px;
    font-size: 0.8em;
}

.cs-dropdown.is-open .cs-dropdown-trigger {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.cs-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: #333;
    border: 1px solid #555;
    border-top: none;
    z-index: 2000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    min-width: 100%;
}

.cs-dropdown.is-open .cs-dropdown-panel {
    display: block;
}

.cs-dropdown-option {
    padding: 5px 10px;
    cursor: pointer;
}

.cs-dropdown-option:hover {
    background: #555;
}

.cs-dropdown-option.is-selected {
    background: #777;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

.shake {
    animation: shake 0.3s;
}

/* =========================
   7. Overlay Windows & Modals
   ========================= */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    background: linear-gradient(180deg, #3a3022 0%, #2a2418 100%);
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #6b5a3e;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    color: #fff;
    position: relative;
}

.overlay-content--wide {
    max-width: 800px;
}

.overlay-body {
    display: flex;
    gap: 24px;
}

.overlay-col--left {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
}

.overlay-col--right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Stack columns on narrow screens */
/* mgmt #92: phone-only overlay-body stacking removed. */

/* Overlay profile */
.overlay-profile img {
    width: 175px;
    height: 175px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #555;
}

.overlay-names {
    text-align: center;
    margin-top: 10px;
}

.nickname {
    font-size: 20px;
    color: gold;
    font-weight: bold;
}

.realname {
    font-size: 13px;
    color: #ccc;
}

/* .overlay-bars removed — replaced by radar chart */

.overlay-section {
    margin-top: 10px;
}

.overlay-skills h3 {
    margin-bottom: 10px;
}

#overlay-skills .bar-container {
    margin-bottom: 10px;
}

/* Overlay Close Button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
}

.close-btn:hover {
    color: #ff4c4c;
}

/* Overlay bar ID colors removed — replaced by radar chart */

/* Overlay History */
.overlay-history {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #d9d9d9;
    font-family: var(--cs-font-mono);
    font-size: 14px;
    color: black;
}

/* --- Gangster Overlay: Role & Status --- */
.overlay-role-badge {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #c9a227;
    margin-top: 2px;
}

.overlay-status-line {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

/* --- Gangster Overlay: Info Rows (replaces table) --- */
.overlay-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    min-height: 26px;
}

/* --- Gangster Overlay: IQ Descriptors --- */
.iq-descriptor {
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.iq-dim { color: #cc6655; }
.iq-average { color: #999; }
.iq-sharp { color: #d4a843; }
.iq-brilliant { color: #f0d060; }

/* --- Gangster Overlay: Section Headers --- */
.overlay-section summary {
    font-size: 13px;
    font-weight: bold;
    color: #c9a227;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Gangster Overlay: Tab Bar --- */
.overlay-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
}

.overlay-tab {
    flex: 1;
    padding: 7px 0;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    background: transparent;
    border: none;
    border-bottom: 2px solid #444;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.overlay-tab:hover {
    color: #ccc;
}

.overlay-tab--active {
    color: #c9a227;
    border-bottom-color: #c9a227;
}

.overlay-tab-panel--hidden {
    display: none;
}

/* --- Gangster Overlay: Origin Flag --- */
.origin-flag {
    font-size: 18px;
    line-height: 1;
}

/* --- Gangster Overlay: Talent icons 30% larger --- */
#overlay-skills-container .bar-icon {
    width: 29px !important;
    height: 29px !important;
}

/* --- Gangster Overlay: Talent abbreviation label --- */
.skill-abbr {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 28px;
    margin-right: 4px;
}

/* --- Gangster Overlay: Actions Styling --- */
#overlay-actions-section {
    border-top: 1px solid #555;
    padding-top: 10px;
    margin-top: auto;
}

#overlay-actions-section h4 {
    display: none;
}

.overlay-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.overlay-actions button {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: filter 0.15s;
}

.overlay-actions button:hover {
    filter: brightness(1.2);
}

.overlay-actions button[data-action="recruit"],
.overlay-actions button[data-action="promote"] {
    background-color: #b8941e;
}

.overlay-actions button[data-action="fire"],
.overlay-actions button[data-action="kill"] {
    background-color: #8b0000;
}

.overlay-actions button[data-action="demote"] {
    background-color: #555;
}

.overlay-actions button[data-action="close"] {
    background-color: #444;
}

.overlay-actions .disabled-action {
    padding: 8px 12px;
    border: 1px solid #555;
    color: #999;
    border-radius: 6px;
    text-align: center;
    cursor: default;
    font-style: italic;
    font-size: 12px;
}

/* --- Fresh Meat: Applicant Speech Bubble --- */
.applicant-speech-bubble {
    position: absolute;
    top: 15%;
    left: calc(70% + 8px);
    transform: scale(0);
    transform-origin: left center;
    width: max-content;
    max-width: 180px;
    background: #faf3e5;
    color: #2a1e0f;
    font-size: 11px;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(39, 29, 19, 0.25);
    font-style: italic;
    z-index: 20;
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    pointer-events: none;
}

.applicant-speech-bubble.speech-visible {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.applicant-speech-bubble.speech-out {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Tail pointing left toward tile */
.applicant-speech-bubble::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 100%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #faf3e5;
}

.applicant-speech-bubble::before {
    content: '';
    position: absolute;
    top: 11px;
    right: 100%;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid rgba(39, 29, 19, 0.25);
}

/* Crew bubbles: fixed positioning to escape overflow clipping */
.crew-bubble-fixed {
    position: fixed;
}

/* Left-leaning bubble for far-right tiles */
.applicant-speech-bubble.speech-left {
    left: auto;
    right: calc(70% + 8px);
    transform-origin: right center;
}
.applicant-speech-bubble.speech-left::after {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 10px solid #faf3e5;
}
.applicant-speech-bubble.speech-left::before {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 12px solid rgba(39, 29, 19, 0.25);
}

/* --- Gangster Overlay: Bars & Grid --- */
.bar-container {
    position: relative;
}

#overlay-skills-container .bar-container {
    height: 10px;
}

.skill-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: cornflowerblue;
    z-index: 1;
    border-radius: 5px;
}

.bar-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2;
    pointer-events: none;
}

.bar-grid-segment {
    flex: 1;
}

.bar-grid-segment:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.bar-value {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
    z-index: 3;
    line-height: 1;
}

.skill-level-label {
    font-size: 10px;
    color: #999;
    min-width: 32px;
    text-align: right;
    margin-left: 6px;
}

/* --- Gangster Overlay: Star Ratings --- */
.skill-stars-container {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.skill-star {
    font-size: 14px;
    line-height: 1;
    position: relative;
}

.skill-star--filled {
    color: #d4a843;
}

.skill-star--empty {
    color: #5a4a3a;
}

.skill-star--half {
    display: inline-block;
    position: relative;
}

.skill-star--half .skill-star-bg {
    color: #5a4a3a;
}

.skill-star--half .skill-star-fg {
    position: absolute;
    left: 0;
    top: 0;
    clip-path: inset(0 50% 0 0);
    color: #d4a843;
}

/* --- Gangster Overlay: Section Header (non-details) --- */
.overlay-section-header {
    font-size: 13px;
    font-weight: bold;
    color: #c9a227;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* --- Gangster Overlay: Stat Tiles --- */
#overlay-condition-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.3s;
}

.stat-tile__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.85;
}

.stat-tile__value {
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

.stat-tile__label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
}
.stat-tile__label .hb-tip-popup {
    color: #c9bfae;
}

/* Severity states */
.stat-tile--ok {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.25);
}
.stat-tile--ok .stat-tile__value {
    color: #8bc34a;
}

.stat-tile--warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
}
.stat-tile--warning .stat-tile__value {
    color: #ffc107;
}

.stat-tile--danger {
    background: rgba(244, 67, 54, 0.18);
    border-color: rgba(244, 67, 54, 0.4);
}
.stat-tile--danger .stat-tile__value {
    color: #ff5252;
}

/* Reputation special states */
.stat-tile--bronze {
    background: rgba(205, 127, 50, 0.12);
    border-color: rgba(205, 127, 50, 0.25);
}
.stat-tile--bronze .stat-tile__value {
    color: #cd7f32;
}

.stat-tile--silver {
    background: rgba(192, 192, 192, 0.12);
    border-color: rgba(192, 192, 192, 0.25);
}
.stat-tile--silver .stat-tile__value {
    color: #c0c0c0;
}

.stat-tile--gold {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.3);
}
.stat-tile--gold .stat-tile__value {
    color: gold;
}

/* --- Gangster Overlay: Status Icon (CSS-based) --- */
.status-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 175px;
    height: 175px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
}

/* --- Gangster Overlay: History / Rap Sheet --- */
.rap-sheet-entry {
    border-left: 3px solid #c9a227;
    padding-left: 10px;
    margin-bottom: 6px;
    font-size: 13px;
}

.rap-sheet-link {
    color: #c9a227;
    text-decoration: underline;
    font-size: 12px;
    white-space: nowrap;
}
.rap-sheet-link:hover {
    color: #f0c040;
}

.history-latest-entry {
    color: #444;
    font-style: italic;
    border-bottom: 1px solid #555;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.cause-of-death {
    color: #ff6b6b;
    font-style: italic;
    font-size: 12px;
    margin-top: 2px;
}

/* --- Gangster Overlay: Transition --- */
.overlay--visible {
    display: flex !important;
    animation: overlayFadeIn 0.15s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Confirm Overlay (replaces browser confirm()) --- */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.confirm-overlay--visible {
    display: flex;
    opacity: 1;
}
.confirm-overlay__panel {
    background: linear-gradient(180deg, #3a3022 0%, #2a2418 100%);
    border: 2px solid #6b5a3e;
    border-radius: 10px;
    padding: 24px 28px 20px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
    color: #fff;
    animation: overlayFadeIn 0.15s ease;
}
.confirm-overlay__title {
    font-size: 16px;
    font-weight: bold;
    color: gold;
    margin-bottom: 10px;
}
.confirm-overlay__message {
    font-size: 14px;
    line-height: 1.5;
    color: #ddd;
    margin-bottom: 20px;
}
.confirm-overlay__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.confirm-overlay__cancel,
.confirm-overlay__confirm {
    min-height: 36px;
    padding: 8px 20px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    transition: filter 0.15s;
}
.confirm-overlay__cancel {
    background: #444;
}
.confirm-overlay__confirm {
    background: #b8941e;
}
.confirm-overlay__cancel:hover,
.confirm-overlay__confirm:hover {
    filter: brightness(1.2);
}
.confirm-overlay--danger .confirm-overlay__confirm {
    background: #8b0000;
}
/* mgmt #92: phone-only confirm-overlay reflow removed. */

/* =========================
   8. Bar & Skill Elements
   ========================= */
.bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.bar-icon {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
    margin-right: 10px;
}

.bar-container {
    width: 100%;
    background-color: #555;
    border-radius: 5px;
    margin: 5px 0;
    overflow: visible;
}

.bar {
    height: 10px;
    background-color: #4caf50;
    text-align: right;
    padding-right: 5px;
    color: #fff;
    line-height: 20px;
    border-radius: 5px;
}

.skill-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.skill-button {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px solid transparent;
    background-color: #222;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color 0.2s;
    padding: 0;
}

.skill-button.active-desc {
    border: 5px solid gold;
}

.skill-button .filter-icon {
    width: 40px;
    height: 40px;
}

.skill-button.buttonbuilder-composed {
    --bb-bg-filter-inactive: none;
    --bb-icon-filter-inactive: none;
    --bb-bg-filter-hover: none;
    --bb-icon-filter-hover: none;
    --bb-bg-filter-click: none;
    --bb-icon-filter-click: none;
    --bb-bg-filter-active: none;
    --bb-icon-filter-active: none;
    width: var(--bb-size, 44px);
    height: var(--bb-size, 44px);
    position: relative;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    padding: 0;
}

.skill-button.buttonbuilder-composed .skill-button-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--bb-bg-scale, 1));
    transform-origin: center;
    filter: var(--bb-bg-filter-inactive);
    pointer-events: none;
}

.skill-button.buttonbuilder-composed .filter-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--bb-icon-size, 80%);
    height: var(--bb-icon-size, 80%);
    transform: translate(-50%, -50%);
    object-fit: contain;
    filter: var(--bb-icon-filter-inactive);
    pointer-events: none;
}

.skill-button.buttonbuilder-composed:hover .skill-button-bg {
    filter: var(--bb-bg-filter-hover);
}

.skill-button.buttonbuilder-composed:hover .filter-icon {
    filter: var(--bb-icon-filter-hover);
}

.skill-button.buttonbuilder-composed:active .skill-button-bg {
    filter: var(--bb-bg-filter-click);
}

.skill-button.buttonbuilder-composed:active .filter-icon {
    filter: var(--bb-icon-filter-click);
}

.skill-button.buttonbuilder-composed.active-desc {
    border: 0;
    outline: none;
    outline-offset: 0;
}

.skill-button.buttonbuilder-composed.active-desc .skill-button-bg {
    filter: var(--bb-bg-filter-active);
}

.skill-button.buttonbuilder-composed.active-desc .filter-icon {
    filter: var(--bb-icon-filter-active);
}

.skill-button.buttonbuilder-composed.bb-preset-gold {
    --bb-bg-filter-inactive: saturate(1.0) contrast(1.02);
    --bb-icon-filter-inactive: saturate(1.0) contrast(1.05);
    --bb-bg-filter-hover: saturate(1.15) contrast(1.08) brightness(1.03);
    --bb-icon-filter-hover: saturate(1.2) contrast(1.12) brightness(1.05);
    --bb-bg-filter-click: saturate(1.1) contrast(1.16) brightness(.95);
    --bb-icon-filter-click: saturate(1.25) contrast(1.22) brightness(.98);
    --bb-bg-filter-active: saturate(1.18) contrast(1.08) brightness(1.02);
    --bb-icon-filter-active: saturate(1.3) contrast(1.15) brightness(1.07);
    transition: box-shadow 0.15s ease;
}

.skill-button.buttonbuilder-composed.bb-preset-gold:hover {
    box-shadow: 0 0 10px rgba(255,205,90,.55), 0 0 18px rgba(255,170,30,.35);
}

.skill-button.buttonbuilder-composed.bb-preset-gold:active {
    box-shadow: 0 0 14px rgba(255,205,90,.70), 0 0 24px rgba(255,170,30,.45);
}

.skill-button.buttonbuilder-composed.bb-preset-gold.active-desc {
    box-shadow: 0 0 12px rgba(255,205,90,.70), 0 0 26px rgba(255,170,30,.50);
}

/* mgmt #92: phone-only gangster-tile sizing removed. */

/* =========================
   9. Crew Overview & Cards
   ========================= */
#crew-overview {
    display: flex;
    height: 90%;
    background-color: #222;
    padding: 0;
    margin: 0;
    gap: 20px;
    width: 98%;
    box-sizing: border-box;
}

#crew-panel,
#crew-unassigned-panel {
    background-color: #0f0f0f;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #222;
}

#crew-unassigned-panel {
    overflow-y: auto;
}

#crew-panel {
    flex: 1;
    padding: 14px;
    position: relative;
    z-index: 1;
    overflow-y: auto;
}

#crew-unassigned-panel {
    flex: 2;
    padding: 14px;
}

.family-split {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.family-left-panel,
.family-right-panel {
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 14px;
    box-sizing: border-box;
    color: #f2f2f2;
}

.family-right-panel {
    flex: 1;
}

.family-left-panel {
    flex: 0 0 auto;
}

.family-panel-title {
    margin: 0 0 12px;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #f7f7f7;
}

#crews-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#crew-unassigned-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* #528 — Crews side-panel member detail view */
.family-panel-title {
    position: relative;
}
.crew-member-detail-close {
    position: absolute;
    top: -2px;
    right: 0;
    background: transparent;
    border: 1px solid #5a4f3e;
    color: #e8dfc8;
    width: 24px;
    height: 24px;
    line-height: 20px;
    padding: 0;
    font-size: 18px;
    cursor: pointer;
    border-radius: 3px;
}
.crew-member-detail-close:hover {
    background: #342d27;
    color: #c89b4a;
    border-color: #c89b4a;
}

.gangster-tile.inspected {
    outline: 1px solid #c89b4a;
    outline-offset: 1px;
    box-shadow: 0 0 8px rgba(200, 155, 74, 0.45);
}

/* The side-panel detail reuses the modal's .overlay-content markup so all
   existing overlay styles apply. These overrides adapt the modal-shaped
   container to live inline inside #crew-member-detail-panel. */
.crew-member-detail.overlay-content {
    max-width: none;
    max-height: none;
    width: auto;
    padding: 16px;
    box-shadow: none;
}

.crew-card {
    padding: 12px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    cursor: grab;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    overflow: visible;
}

.crew-card:hover {
    border-color: #b08c3a;
    box-shadow: 0 0 10px rgba(176, 140, 58, 0.25);
    background: #1f1f1f;
}

.crew-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding: 8px;
    background: #141414;
    border: 1px solid #262626;
    border-radius: 8px;
}

.crew-gangster-card {
    padding: 5px;
    background-color: #666;
    border-radius: 3px;
    margin-bottom: 5px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.crew-gangster-card:hover {
    background-color: #777;
}

/* Mobile Crew Management */
#crews-list .crew-create-btn {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

.crew-entry {
    border: 1px solid #444;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #333;
}

.crew-entry summary {
    list-style: none;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #222;
}

.crew-card-header,
.crew-summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crew-card-header {
    margin-bottom: 6px;
}

.crew-boss-hint {
    font-size: 0.75rem;
    color: #998a6a;
    font-style: italic;
    margin-bottom: 6px;
}

.crew-vehicle-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.crew-vehicle-thumb {
    width: 38px;
    height: 26px;
    padding: 2px;
    border-radius: 4px;
    object-fit: contain;
    box-shadow: 0 0 0 1px #ccc;
    background: #fff;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.crew-vehicle-pill:hover .crew-vehicle-thumb {
    transform: translateY(-1px) scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.crew-vehicle-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    padding: 6px;
    border-radius: 6px;
    background: #fff;
    color: #111;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 1;
    min-width: 120px;
}

.crew-vehicle-pill:hover .crew-vehicle-tooltip {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.crew-vehicle-large {
    width: 140px;
    height: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 4px;
}

.crew-vehicle-label {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.crew-entry summary::-webkit-details-marker {
    display: none;
}

.crew-entry summary::before {
    content: '▸';
    margin-right: 5px;
}

.crew-entry[open] summary::before {
    content: '▾';
}

.crew-members {
    padding: 10px;
}

.crew-member {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.crew-member-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.crew-member-thumb-wrap {
    display: inline-flex;
    flex-shrink: 0;
}

.crew-member-salary {
    margin-left: auto;
}

.crew-member button {
    margin-left: 10px;
}

/* Locker + shared crew list styling */
.locker-left {
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow child scroll areas to shrink inside flex row */
}

#locker-crew-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px; /* breathing room for scrollbar */
}

.locker-crew-entry {
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #eee;
    padding: 8px;
    box-shadow: 0 0 0 1px #0c0c0c inset;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.locker-crew-entry:hover {
    border-color: #b08c3a;
    box-shadow: 0 0 10px rgba(176, 140, 58, 0.2);
    background: #1f1f1f;
}

.locker-crew-entry.expanded {
    border-color: #b08c3a;
    box-shadow: 0 0 10px rgba(176, 140, 58, 0.25);
}

.locker-crew-entry-unassigned {
    border-style: dashed;
}

.locker-crew-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
}

.locker-crew-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-weight: 700;
}

.locker-crew-count {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
}

.locker-crew-chevron {
    color: #ccc;
    transition: transform 0.2s ease;
}

.locker-crew-entry.expanded .locker-crew-chevron {
    transform: rotate(90deg);
}

.locker-crew-body {
    padding: 4px 0 8px 0;
    border-top: 1px solid #262626;
    margin-top: 6px;
}

/* Locker layout — desktop three-column */
.locker-layout {
    gap: 20px;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

.locker-left {
    flex: 0 0 260px;
    width: 260px;
    transition: flex-basis 0.2s ease, width 0.2s ease;
}
.locker-left.locker-left-expanded {
    flex: 0 0 360px;
    width: 360px;
}
.locker-crew-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.locker-expand-btn {
    width: 22px;
    height: 22px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #2a2a2a;
    color: #ccc;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.locker-expand-btn:hover {
    background: #3a3a3a;
    border-color: #b08c3a;
    color: #fff;
}

.locker-character-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 300px;
}

.locker-character-name {
    width: 300px;
    height: 30px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    line-height: 30px;
    font-size: 16px;
    font-family: var(--cs-font-heading);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.locker-character-box {
    position: relative;
    width: 300px;
    height: 500px;
    top: -20px;
    background: url(../img/gui/silhouette.webp) no-repeat center center;
    background-size: contain;
}

.locker-character-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 6px;
}

.locker-slot {
    position: absolute;
    z-index: 3;
    width: 80px;
    height: 60px;
    border: 2px dashed rgba(176, 140, 58, 0.5);
    border-radius: 6px;
    background-color: rgba(255, 253, 208, 0.35);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.locker-slot:hover {
    border-color: #b08c3a;
    background-color: rgba(255, 253, 208, 0.3);
}

.locker-slot-label {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 4;
}

.locker-slot-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.5);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.locker-slot-item:hover .locker-slot-actions,
.locker-slot-item:focus-within .locker-slot-actions,
.locker-slot-item.touch-active .locker-slot-actions {
    opacity: 1;
    pointer-events: auto;
}

.locker-slot-actions button {
    width: 40px;
    height: 60px;
    border: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    font-size: 20px;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.locker-slot-actions button:hover {
    background: rgba(255,255,255,0.1);
}

.locker-slot-item {
    position: relative;
    width: 80px;
    height: 60px;
}

.locker-slot-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.locker-slot-item-info {
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    font-size: 9px;
    text-align: center;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 4;
}

/* === Locker stat board (under the silhouette) ============================ */
.locker-stat-board {
    width: 300px;
    margin-top: -140px;
    position: relative;
    z-index: 4;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 6px;
    color: #e9e0c4;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 4px rgba(0,0,0,0.4);
}
.locker-stat-board.is-empty {
    opacity: 0.7;
}
.locker-stat-empty-hint {
    text-align: center;
    font-style: italic;
    color: #bdb28e;
    padding: 24px 8px;
}
.locker-stat-section-title {
    font-size: 11px;
    letter-spacing: 1.2px;
    color: #d4af37;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Condition tile grid — narrower than the Family overlay to fit the board */
.locker-stat-condition-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.locker-stat-condition-grid .stat-tile {
    padding: 6px 2px 4px;
    gap: 1px;
}
.locker-stat-condition-grid .stat-tile__icon {
    width: 16px;
    height: 16px;
}
.locker-stat-condition-grid .stat-tile__value {
    font-size: 15px;
}
.locker-stat-condition-grid .stat-tile__label {
    font-size: 8px;
}
.locker-stat-tile-changed {
    outline: 1px solid rgba(212, 175, 55, 0.5);
}

/* Skill rows — reuse .bar-row / .skill-stars-container from gangster view,
   tighten spacing inside the board */
.locker-stat-skills {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.locker-stat-skills .bar-row {
    margin-bottom: 0;
    gap: 4px;
}
.locker-stat-skills .skill-abbr {
    min-width: 34px;
    font-size: 11px;
    letter-spacing: 0.5px;
    cursor: help;
}
/* Stars ~20% larger inside the locker stat board only — leaves the
   Family overlay and other surfaces at their canonical 14px. */
.locker-stat-skills .skill-star {
    font-size: 17px;
}

/* Delta overlay: stars change color in-place when the hovered item would
   alter the skill level. Each star is a split cell where the left and right
   halves are tinted independently — so a 0.5★→1.0★ bump shows a half-gold
   plus half-green star, not a fully green one. */
.locker-stat-arrow {
    color: #888;
    margin: 0 4px;
    font-weight: bold;
}
.skill-stars-group {
    display: inline-flex;
    gap: 1px;
}
.skill-star--split {
    position: relative;
    display: inline-block;
    line-height: 1;
}
/* Background outline stays in the normal flow so it sizes the star box.
   Left/right halves are absolutely positioned overlays clipped to their side. */
.skill-star--split .skill-star-bg {
    color: #5a4a3a;
    display: inline-block;
}
.skill-star--split .skill-star-left,
.skill-star--split .skill-star-right {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
.skill-star--split .skill-star-left {
    clip-path: inset(0 50% 0 0);
}
.skill-star--split .skill-star-right {
    clip-path: inset(0 0 0 50%);
}
.skill-star--split .half-gold { color: #d4af37; }
.skill-star--split .half-buff {
    color: #6fdf7a;
    text-shadow: 0 0 4px rgba(111, 223, 122, 0.6);
}
.skill-star--split .half-debuff {
    color: #e07575;
    text-shadow: 0 0 4px rgba(224, 117, 117, 0.6);
}
/* Condition tile numeric delta (unchanged) */
.locker-stat-current-num {
    color: inherit;
}
.locker-stat-projected-num.is-buff {
    color: #6fdf7a;
}
.locker-stat-projected-num.is-debuff {
    color: #e07575;
}
.locker-skill-row.is-buff .skill-abbr {
    color: #6fdf7a;
}
.locker-skill-row.is-debuff .skill-abbr {
    color: #e07575;
}

.locker-stat-nochange {
    margin-top: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-style: italic;
    color: #bdb28e;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}

/* === Item card: render skill stat_bonus values as stars =================== */
.effect-value--stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.effect-value-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
    font-size: 18px;
}
.effect-value-stars-sign {
    font-weight: bold;
    font-size: 16px;
    margin-right: 2px;
}
.effect-value-stars.is-positive .effect-value-stars-sign { color: #d4af37; }
.effect-value-stars.is-negative .effect-value-stars-sign { color: #e07575; }

.effect-value-star {
    display: inline-block;
    line-height: 1;
    position: relative;
}
.effect-value-stars.is-positive .effect-value-star--full,
.effect-value-stars.is-positive .effect-value-star--half .effect-value-star-fg {
    color: #d4af37;
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.9),
        0 1px 1px rgba(0, 0, 0, 0.8),
        0 0 6px rgba(212, 175, 55, 0.55);
}
.effect-value-stars.is-negative .effect-value-star--full,
.effect-value-stars.is-negative .effect-value-star--half .effect-value-star-fg {
    color: #e07575;
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.9),
        0 1px 1px rgba(0, 0, 0, 0.8),
        0 0 6px rgba(224, 117, 117, 0.55);
}
.effect-value-star--half {
    display: inline-block;
    position: relative;
}
.effect-value-star--half .effect-value-star-bg {
    color: #3a2e23;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}
.effect-value-star--half .effect-value-star-fg {
    position: absolute;
    left: 0;
    top: 0;
    clip-path: inset(0 50% 0 0);
}

/* Responsive shrink to match the silhouette's 240px narrow layout */
@media (max-width: 1024px) {
    .locker-stat-board {
        width: 240px;
        margin-top: -110px;
        padding: 8px 10px;
    }
    .locker-stat-condition-grid .stat-tile__value {
        font-size: 13px;
    }
    .locker-stat-condition-grid .stat-tile__label {
        font-size: 7px;
    }
    .locker-stat-skills .bar-icon {
        width: 18px !important;
        height: 18px !important;
        margin-right: 4px;
    }
    .locker-stat-skills .skill-abbr {
        min-width: 28px;
        font-size: 10px;
    }
}

.locker-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.locker-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background-color: #222;
    border-bottom: 2px solid #444;
}

.locker-filterbar .filter-button {
    background: var(--cs-border, #333);
    color: #fff;
    padding: 4px 8px;
    border: 1px solid var(--cs-border, #666);
    border-radius: 6px;
    cursor: pointer;
}

.locker-filterbar .filter-button.active {
    background: #999;
    color: #000;
    font-weight: bold;
}

.locker-inventory-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 220px);
    gap: 10px;
    align-content: flex-start;
    justify-content: start;
    padding: 10px;
    box-sizing: border-box;
}

.locker-inventory-group-header {
    grid-column: 1 / -1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    border-bottom: 1px solid #333;
    padding: 6px 0 4px;
    margin-top: 4px;
}

.locker-inventory-group-header:first-child {
    margin-top: 0;
}

.locker-breadcrumb {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.locker-breadcrumb span {
    color: rgba(255,255,255,0.7);
}

.locker-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255,255,255,0.35);
    text-align: center;
    gap: 8px;
    padding: 40px 20px;
}

.locker-empty-state .locker-empty-icon {
    font-size: 32px;
    opacity: 0.5;
}

.locker-empty-state .locker-empty-text {
    font-size: 14px;
}

.locker-equipped-badge {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: auto;
    white-space: nowrap;
}

.locker-crew-action-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}

.locker-crew-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #444;
    border-radius: 6px;
    background: #1a1a1a;
    color: #ccc;
    transition: border-color 0.15s ease;
}

.locker-crew-action-btn:hover {
    border-color: #b08c3a;
    color: #fff;
}

.locker-crew-action-btn .emoji {
    font-size: 18px;
    line-height: 1;
}

/* Rarity is signalled by the full card color (see .card.Common etc.);
   the redundant left-border stripe has been removed. */

.locker-gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    z-index: 9000;
}

.locker-gallery-overlay .gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.locker-gallery-overlay .gallery-cards {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    align-items: center;
}

.locker-gallery-overlay .gallery-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px;
}

.locker-gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Equip animation */
@keyframes locker-equip-bounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.locker-slot-equip-anim {
    animation: locker-equip-bounce 0.3s ease-out;
}

/* Gangster face in silhouette */
.locker-gangster-face {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) scale(1.2);
    width: 80px;
    height: 80px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 80%);
    object-fit: cover;
    z-index: 2;
}

/* Equipped item image in slot */
.locker-equipped-img {
    width: 80px;
    height: 60px;
    object-fit: contain;
}

/* Responsive locker breakpoints */
@media (max-width: 1024px) {
    .locker-character-wrapper,
    .locker-character-name,
    .locker-character-box {
        width: 240px;
    }
    .locker-character-box {
        height: 400px;
    }
    .locker-slot {
        width: 70px;
        height: 52px;
    }
    .locker-slot-item {
        width: 70px;
        height: 52px;
    }
    .locker-slot-actions {
        width: 70px;
        height: 52px;
    }
    .locker-slot-actions button {
        width: 35px;
        height: 52px;
    }
    .locker-equipped-img {
        width: 70px;
        height: 52px;
    }
    .locker-left {
        flex: 0 0 220px;
        width: 220px;
    }
}

/* mgmt #92: phone-only locker-layout column stacking removed (1024px reflow above is kept). */

/* mgmt #92: phone-only crew-overview drawer removed (.active never JS-toggled). */

#overlay-age,
#overlay-iq,
#overlay-salary {
    text-align: left;
}

/* =========================
   11. Ledger & Tables
   ========================= */
#ledger-view {
    width: 90%;
    margin: 20px auto;
    font-family: var(--cs-font-body);
    color: #c9b896;
    max-height: 80vh;
    overflow-y: auto;
}

.ledger-column {
    box-sizing: border-box;
    padding: 14px 18px;
    margin: 8px 0;
    background: linear-gradient(135deg, #2a2218, #33291d);
    border: 2px solid #8b7355;
    border-left: 4px solid #8b7355;
    border-radius: 4px;
    color: #c9b896;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

#ledger-view table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    color: #c9b896;
}

#ledger-view table,
#ledger-view th,
#ledger-view td {
    border: 1px solid #5c4a32;
}

#ledger-view th {
    padding: 8px;
    text-align: center;
    font-family: var(--cs-font-heading);
    color: #e0d4b8;
    background: rgba(201,184,150,0.08);
}

#ledger-view td {
    padding: 8px;
    text-align: center;
}

#ledger-view table td:nth-child(2),
#ledger-view table td:nth-child(3) {
    text-align: right;
}

#ledger-view .total-row td {
    font-weight: bold;
    background-color: rgba(201,184,150,0.15);
    border-top: 2px solid #8b7355;
    font-size: 1.1em;
}

#ledger-view .net-row td {
    font-weight: bold;
    background-color: rgba(201,184,150,0.25);
    font-size: 1.1em;
}

#ledger-view h3 {
    text-align: center;
    color: #e0d4b8;
    font-family: var(--cs-font-heading);
}

#ledger-view .ledger-flavor {
    text-align: center;
    font-size: 0.85em;
    color: #9a8b6f;
    margin-top: -4px;
    margin-bottom: 8px;
    font-style: italic;
}

#ledger-view .round-nav {
    text-align: center;
    margin-top: 10px;
}

#ledger-view .round-nav button {
    padding: 6px 14px;
    font-size: 0.95em;
    cursor: pointer;
    margin: 0 5px;
    color: #e0d4b8;
    background: linear-gradient(180deg, #3a3028, #2a2218);
    border: 1px solid #8b7355;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
}

#ledger-view .round-nav button:hover:not(:disabled) {
    background: linear-gradient(180deg, #4a3f30, #3a3028);
    border-color: #a89060;
}

#ledger-view .round-nav button:disabled {
    opacity: 0.35;
    cursor: default;
}

#ledger-view .amount-neg { color: #e74c3c; }
#ledger-view .amount-pos { color: #2ecc71; }
#ledger-view .net-positive { color: #2ecc71; }
#ledger-view .net-negative { color: #e74c3c; }

#ledger-view .ledger-health-bar {
    margin: 0 0 12px 0;
    padding: 10px 14px;
    border-radius: 4px;
    text-align: center;
    font-family: var(--cs-font-heading);
    font-size: 1.15em;
    font-weight: bold;
    border: 1px solid #5c4a32;
}

#ledger-view .ledger-toggle-bar {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 8px;
}

#ledger-view .ledger-toggle-bar button {
    padding: 4px 12px;
    font-size: 0.85em;
    cursor: pointer;
    color: #c9b896;
    background: transparent;
    border: 1px solid #5c4a32;
    border-radius: 3px;
    transition: background 0.2s, border-color 0.2s;
}

#ledger-view .ledger-toggle-bar button.active {
    background: rgba(201,184,150,0.15);
    border-color: #8b7355;
    color: #e0d4b8;
}

#ledger-view .ledger-toggle-bar button:hover {
    border-color: #8b7355;
}

#ledger-view .round-net-subtitle {
    text-align: center;
    font-size: 0.95em;
    margin-top: -2px;
    margin-bottom: 6px;
    font-weight: bold;
}

#ledger-view .map-jump-button {
    border: none;
    background: transparent;
    color: #a89060;
    cursor: pointer;
    margin-left: 6px;
    font-size: 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
}

#ledger-view .map-jump-button:hover {
    color: #e0d4b8;
    transform: scale(1.1);
}

#ledger-view .map-jump-button:focus-visible {
    outline: 2px solid #a89060;
    outline-offset: 2px;
}

/* ==========================================================================
   MMO mode ledger (.mml-*)
   Designed by Lucia DeLuca, 2026-05-09. Replaces the round-based table for
   continuous worlds. The shell is still #ledger-view; the inner .mml-root
   owns its own layout so it doesn't fight the round-mode flex column rules.
   ========================================================================== */
#ledger-view .mml-root {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 22px;
    color: #e0d4b8;
    /* Solid backdrop — without this the panel floats translucently over
       the city map and becomes unreadable. Round-mode tables had visible
       borders that gave each row its own backdrop; MMO uses card-style
       grouping so the parent needs to carry the contrast. */
    background: rgba(12, 10, 8, 0.92);
    border: 1px solid #5c4a32;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

#ledger-view .mml-loading,
#ledger-view .mml-empty {
    padding: 18px 12px;
    color: #8a8170;
    font-style: italic;
    text-align: center;
}

/* Hero strip — balance + 24h + 7d. Civ-style permanent header. */
#ledger-view .mml-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 18px;
    padding: 14px 16px;
    background: rgba(20, 16, 10, 0.55);
    border: 1px solid #3d342a;
    border-radius: 6px;
    align-items: center;
}
#ledger-view .mml-hero-balance {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
#ledger-view .mml-hero-label {
    font-size: 0.75em;
    color: #9c8c6c;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#ledger-view .mml-hero-amount {
    font-size: 2.2em;
    font-weight: 700;
    color: #f0e2bf;
    line-height: 1.05;
    margin-top: 2px;
}
#ledger-view .mml-hero-deltas {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    gap: 18px;
    align-items: center;
}
#ledger-view .mml-hero-delta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}
#ledger-view .mml-hero-delta-label {
    font-size: 0.7em;
    color: #9c8c6c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#ledger-view .mml-hero-delta-amt {
    font-size: 1.05em;
    font-weight: 600;
    margin-top: 2px;
}
#ledger-view .mml-hero-fresh {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 0.7em;
    color: #6f6759;
    text-align: right;
    margin-top: 4px;
}

/* Color helpers — single source of truth so the recent stream and the
   summary table agree on what positive/negative looks like. */
#ledger-view .mml-pos { color: #6abf6a; }
#ledger-view .mml-neg { color: #d05a4f; }
#ledger-view .mml-zero { color: #7a7060; }

/* Tabs — five scopes. Active tab gets the Vinnie-amber underline that the
   rest of the app uses for active sections. */
#ledger-view .mml-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #3d342a;
    flex-wrap: wrap;
}
#ledger-view .mml-tab {
    background: transparent;
    border: 1px solid transparent;
    color: #9c8c6c;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.95em;
    border-radius: 4px 4px 0 0;
    border-bottom-color: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}
#ledger-view .mml-tab:hover {
    color: #e0d4b8;
    background: rgba(168, 144, 96, 0.08);
}
#ledger-view .mml-tab-active {
    color: #f0e2bf;
    border-bottom: 2px solid #a89060;
    background: rgba(168, 144, 96, 0.12);
}

/* Body = summary + stream stacked. */
#ledger-view .mml-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Summary table */
#ledger-view .mml-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(20, 16, 10, 0.35);
    border: 1px solid #3d342a;
    border-radius: 6px;
    overflow: hidden;
}
#ledger-view .mml-table th,
#ledger-view .mml-table td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid rgba(61, 52, 42, 0.7);
}
#ledger-view .mml-table th {
    background: rgba(40, 32, 22, 0.7);
    color: #c8b88f;
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#ledger-view .mml-table th:first-child,
#ledger-view .mml-table td:first-child {
    text-align: left;
}
#ledger-view .mml-table .mml-cat-cell {
    cursor: help;
}
#ledger-view .mml-amt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#ledger-view .mml-table .mml-total-row td {
    background: rgba(40, 32, 22, 0.45);
    border-top: 2px solid #6e5f48;
    border-bottom: none;
    font-size: 1.02em;
}

/* Recent stream — one line per entry, time + glyph + amount + description. */
#ledger-view .mml-stream {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(20, 16, 10, 0.35);
    border: 1px solid #3d342a;
    border-radius: 6px;
    overflow: hidden;
}
#ledger-view .mml-stream-heading {
    padding: 10px 14px;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c8b88f;
    border-bottom: 1px solid #3d342a;
    background: rgba(40, 32, 22, 0.5);
}
#ledger-view .mml-stream-empty {
    padding: 22px 14px;
}
#ledger-view .mml-stream-row {
    display: grid;
    grid-template-columns: 90px 22px 110px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(61, 52, 42, 0.5);
    font-size: 0.92em;
    transition: background 0.12s ease;
}
#ledger-view .mml-stream-row:last-child { border-bottom: none; }
#ledger-view .mml-stream-row:hover { background: rgba(168, 144, 96, 0.06); }
#ledger-view .mml-stream-time { color: #8a8170; font-variant-numeric: tabular-nums; }
#ledger-view .mml-stream-glyph { text-align: center; font-weight: 700; }
#ledger-view .mml-stream-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
#ledger-view .mml-stream-desc { color: #c0b395; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kind-specific row tints. Loss is the standout (Von Restorff) — it's
   the one entry the player most needs to notice. */
#ledger-view .mml-row-gain    .mml-stream-glyph { color: #6abf6a; }
#ledger-view .mml-row-gain    .mml-stream-amt   { color: #6abf6a; }
#ledger-view .mml-row-spend   .mml-stream-glyph { color: #d05a4f; }
#ledger-view .mml-row-spend   .mml-stream-amt   { color: #d05a4f; }
#ledger-view .mml-row-salary  .mml-stream-glyph { color: #8a8170; }
#ledger-view .mml-row-salary  .mml-stream-amt   { color: #b59b6e; }
#ledger-view .mml-row-loss {
    background: rgba(195, 130, 60, 0.08);
}
#ledger-view .mml-row-loss .mml-stream-glyph { color: #d18d3c; }
#ledger-view .mml-amt-loss {
    color: #d18d3c;
    text-decoration: line-through;
    text-decoration-color: rgba(209, 141, 60, 0.55);
}

#ledger-view .mml-op-tag {
    color: #a89060;
    background: rgba(168, 144, 96, 0.12);
    border: 1px solid rgba(168, 144, 96, 0.3);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

/* By Op tab */
#ledger-view .mml-op-list { display: flex; flex-direction: column; gap: 6px; }
#ledger-view .mml-op-row {
    background: rgba(20, 16, 10, 0.4);
    border: 1px solid #3d342a;
    border-radius: 5px;
    padding: 9px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
#ledger-view .mml-op-row:hover { background: rgba(168, 144, 96, 0.08); }
#ledger-view .mml-op-headline { display: flex; gap: 10px; align-items: center; }
#ledger-view .mml-op-type { color: #c8b88f; text-transform: capitalize; }
#ledger-view .mml-op-state {
    font-size: 0.75em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(168, 144, 96, 0.1);
    color: #a89060;
    letter-spacing: 0.05em;
}
#ledger-view .mml-op-state-completed { background: rgba(106, 191, 106, 0.12); color: #6abf6a; }
#ledger-view .mml-op-state-failed,
#ledger-view .mml-op-state-interrupted { background: rgba(208, 90, 79, 0.12); color: #d05a4f; }
#ledger-view .mml-op-state-active,
#ledger-view .mml-op-state-moving,
#ledger-view .mml-op-state-contested { background: rgba(209, 141, 60, 0.12); color: #d18d3c; }
#ledger-view .mml-op-stats { display: flex; gap: 16px; align-items: center; font-variant-numeric: tabular-nums; }
#ledger-view .mml-op-net { font-weight: 700; }
#ledger-view .mml-op-loss { color: #d18d3c; font-size: 0.85em; }
#ledger-view .mml-op-time { color: #8a8170; font-size: 0.85em; }

/* ─────────────────────────────────────────────────────────────────────────
   Cross-tab alignment: Operations + Conflicts borrow Money's hero skeleton.
   This block is the "DeLuca cut" — same headline, same color language, same
   freshness affordance across all three ledger tabs. See mmoLedger.js for
   the canonical .mml-hero rules; this section only adds tab-specific
   tweaks (Operations spans a 4-stat row, Conflicts adds a record sub-line).
   ───────────────────────────────────────────────────────────────────────── */

/* Operations hero — wider delta gutter so 3 KPIs fit without crowding the
   balance number. Sits between #orders-column's top edge and the scope tabs. */
#ledger-view .lo-hero {
    margin: 0 0 8px 0;
}
#ledger-view .lo-hero .mml-hero-deltas {
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Operations scope tabs sit directly under the hero, just above the
   outcome-filter pills. They share the .mml-tabs underline but get a small
   bottom margin so they don't collide with the existing .lo2-filters bar. */
#ledger-view .lo-scope-tabs {
    margin: 0 0 8px 0;
}

/* Conflicts hero + scope tabs — mirrors operations spacing so the three
   ledger tabs feel like siblings. */
#ledger-view .cl-hero {
    margin: 0 0 8px 0;
}
#ledger-view .cl-hero .mml-hero-deltas {
    gap: 22px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#ledger-view .cl-scope-tabs {
    margin: 0 0 10px 0;
}

/* Unified filter row — time tabs on the left, outcome/specific filters on
   the right. A subtle divider separates the two groups so they read as
   different kinds of filter. Wraps gracefully on narrow screens. */
#ledger-view .lo-filter-row,
#ledger-view .cl-filter-row,
#ledger-view .mml-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 12px 0;
    padding: 0 0 6px 0;
    border-bottom: 1px solid rgba(168, 144, 96, 0.15);
}
/* Time-scope group keeps the underline-style mml-tabs look but loses its own
   bottom border (the row owns that now) and gets a soft right-divider so the
   two groups are visually distinct. */
#ledger-view .lo-filter-row .lo-scope-tabs,
#ledger-view .cl-filter-row .cl-scope-tabs,
#ledger-view .mml-filter-row .mml-scope-tabs {
    margin: 0;
    padding-right: 16px;
    border-right: 1px solid rgba(168, 144, 96, 0.18);
    border-bottom: none;
}
/* Specific-filter group sits on the right and flexes to fill the row. */
#ledger-view .lo-filter-row .lo2-filters,
#ledger-view .cl-filter-row .cl-specific-filters,
#ledger-view .mml-filter-row .mml-specific-filters {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    position: static;
    top: auto;
    z-index: auto;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* mgmt #92: phone-only ledger filter-row stacking removed. */

/* ─────────────────────────────────────────────────────────────────────────
   Unified ledger filter pill (.led-pill) — Lucia DeLuca pass.
   One shape, one weight, one set of padding numbers across all three
   ledger tabs. Visual differentiation between filters comes from the
   semantic dot on the left, not from pill geometry. Reset, outcome,
   "biggest loss" — all the same chassis. The time-scope tabs above stay
   underline-style: they're a different *kind* of filter (a scope, not a
   category) so they get a different visual language by design.
   Color vocabulary (see .led-pill-dot-*):
     green   = good outcome (clean, income, won)
     red     = bad outcome  (busted, loss, lost)
     amber   = neutral-but-noteworthy (missed, slipped)
     purple  = contested / disputed
     cyan    = informational / meta-view (by op)
     no dot  = "all" / "reset" — absence of filter
   ────────────────────────────────────────────────────────────────────── */
#ledger-view .led-pill,
#ledger-view .lo-filter-row .lo2-filter,
#ledger-view .mml-specific-filter,
#ledger-view .cl-specific-filter,
#ledger-view .mml-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(42, 34, 24, 0.5);
    border: 1px solid rgba(168, 144, 96, 0.28);
    color: #b3a487;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 0.88em;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
    user-select: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    flex: 0 0 auto;
}
#ledger-view .led-pill:hover:not(:disabled),
#ledger-view .lo-filter-row .lo2-filter:hover:not(:disabled),
#ledger-view .mml-specific-filter:hover:not(:disabled),
#ledger-view .cl-specific-filter:hover:not(:disabled),
#ledger-view .mml-filter-reset:hover:not(:disabled) {
    color: #e0d4b8;
    background: rgba(168, 144, 96, 0.14);
    border-color: rgba(168, 144, 96, 0.55);
}
#ledger-view .led-pill.is-active,
#ledger-view .lo-filter-row .lo2-filter.active,
#ledger-view .mml-specific-filter.is-active,
#ledger-view .cl-specific-filter.is-active {
    color: #f4e7c2;
    background: rgba(168, 144, 96, 0.22);
    border-color: #a89060;
    box-shadow: inset 0 0 0 1px rgba(168, 144, 96, 0.3);
}
#ledger-view .led-pill:disabled,
#ledger-view .mml-filter-reset:disabled,
#ledger-view .lo-filter-row .lo2-filter:disabled {
    cursor: default;
    opacity: 0.35;
    pointer-events: none;
}

/* The semantic dot — Lucia's "quick identification" mark. Each pill that
   stands for a category gets one. Bumped to 8px so the color does real
   work at a glance; a soft halo in the active state so the selected
   filter reads even faster (Von Restorff). */
#ledger-view .led-pill-dot,
#ledger-view .lo-filter-row .lo2-filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.15s ease;
}
#ledger-view .led-pill.is-active .led-pill-dot,
#ledger-view .lo-filter-row .lo2-filter.active .lo2-filter-dot {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 6px 1px currentColor;
}

/* Semantic dot colors. Used both directly (.led-pill-dot-success) and via
   the legacy operations class names (.lo2-filter-dot.success) so we don't
   churn the JS. Cyan, purple, etc. picked to read clearly on the dark
   bourbon-leather background. */
#ledger-view .led-pill-dot-good,
#ledger-view .lo2-filter-dot.success,
#ledger-view .led-pill-dot-success { background: #2ecc71; color: #2ecc71; }

#ledger-view .led-pill-dot-bad,
#ledger-view .lo2-filter-dot.failed,
#ledger-view .led-pill-dot-loss     { background: #e74c3c; color: #e74c3c; }

#ledger-view .led-pill-dot-warn,
#ledger-view .lo2-filter-dot.missed,
#ledger-view .led-pill-dot-missed   { background: #e67e22; color: #e67e22; }

#ledger-view .led-pill-dot-contested,
#ledger-view .lo2-filter-dot.conflict,
#ledger-view .led-pill-dot-conflict { background: #9b59b6; color: #9b59b6; }

#ledger-view .led-pill-dot-info     { background: #3498db; color: #3498db; }

/* The numeric count badge inside Operations filters — still useful, just
   restyled to match the new chassis. */
#ledger-view .lo-filter-row .lo2-filter .lo2-filter-count {
    font-weight: 700;
    color: inherit;
    min-width: 14px;
    text-align: center;
    opacity: 0.85;
}
#ledger-view .lo-filter-row .lo2-filter.active .lo2-filter-count {
    opacity: 1;
}

/* Reset pill leans on the same chassis but lives at the start of the row.
   No dot — it's the *absence* of a filter, and the dot would lie. */
#ledger-view .mml-filter-reset {
    color: #c8b890;
}

/* Operations: the old .lo2-filters bar style (sticky header, dark bar,
   negative margins) only applies when it's NOT inside the unified filter
   row. Inside the row we want the pills loose, no background, no border. */
#ledger-view .lo-filter-row .lo2-filters {
    background: transparent;
    border: none;
    position: static;
    padding: 0;
    margin: 0;
    gap: 8px;
}

/* Conflicts hero adds a single sub-line under the W-L number ("12 fights
   filed", or the count of evasions) — the only structural deviation from
   Money's hero skeleton. */
#ledger-view .cl-hero {
    margin: 0 0 12px 0;
}
#ledger-view .cl-hero .mml-hero-amount {
    line-height: 1;
}
#ledger-view .cl-hero-sub {
    font-size: 0.78em;
    color: #8a8170;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* Conflicts verdict chips — pull into the .mml-pos/.mml-neg palette so the
   color language matches the hero, the stream, and the Operations filter
   dots. The chip background/border stay soft (10%/45% alpha) for legibility
   on the dark backdrop; only the foreground green/red shift. */
#ledger-view .cl-verdict-won {
    color: #6abf6a;
    background: rgba(106, 191, 106, 0.10);
    border-color: rgba(106, 191, 106, 0.45);
}
#ledger-view .cl-verdict-lost {
    color: #d05a4f;
    background: rgba(208, 90, 79, 0.10);
    border-color: rgba(208, 90, 79, 0.45);
}

/* Back-to-Ledger floating affordance on the map, shown only while ledgerReturnState is active
   and the focused business lacks a clickable tick marker (Option C visibility). */
.ledger-back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: linear-gradient(135deg, #33291d, #2a2218);
    color: #e0d4b8;
    border: 2px solid #a89060;
    border-left: 4px solid #c9b896;
    border-radius: 4px;
    font-family: var(--cs-font-body);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    animation: ledger-back-button-in 0.25s ease-out;
}
.ledger-back-button:hover {
    background: linear-gradient(135deg, #3d3220, #342a1e);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
}
.ledger-back-button:focus-visible {
    outline: 2px solid #e0d4b8;
    outline-offset: 2px;
}
@keyframes ledger-back-button-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* "Back to map" variant is a sibling of #ledger-view (not inside it — ledger renders
   clear innerHTML). Use fixed positioning so it floats at the top-left of the viewport
   below the status/submenu bars, mirroring the map-side "Back to Ledger" affordance. */
#map-back-button.ledger-back-button {
    position: fixed;
    top: 140px;
    left: 16px;
    z-index: 60;
}

/* Flash pulse on the order row the player was returned to — signals "we brought you back here". */
.lo-order-item.lo-return-flash {
    animation: lo-return-flash-anim 1.6s ease-out;
}
@keyframes lo-return-flash-anim {
    0%   { box-shadow: 0 0 0 0 rgba(224, 212, 184, 0.0), inset 0 0 0 0 rgba(224, 212, 184, 0.0); background-color: rgba(224, 212, 184, 0.18); }
    30%  { box-shadow: 0 0 0 2px rgba(224, 212, 184, 0.55); background-color: rgba(224, 212, 184, 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(224, 212, 184, 0.0); background-color: transparent; }
}

/* Ledger Orders — noir-themed classes */
@keyframes pulsate {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

#orders-column {
    box-sizing: border-box;
    padding: 16px 18px 22px;
    color: #e0d4b8;
    background: rgba(12, 10, 8, 0.92);
    border: 1px solid #5c4a32;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

/* Conflicts panel — mirrors Money's .mml-root chrome so the three ledger
   tabs share the same solid backdrop over the city map. Uses flex/gap to
   match Money since the Conflicts renderer (conflictsLedger.js render())
   appends siblings without their own vertical margins. */
#ledger-view .cl-root {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 22px;
    color: #e0d4b8;
    background: rgba(12, 10, 8, 0.92);
    border: 1px solid #5c4a32;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

.lo-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em;
    margin: 0 -18px 0 -18px;
    padding: 6px 18px 8px 18px;
    background: #2e2519;
    border-bottom: 1px solid rgba(92,74,50,0.2);
    position: sticky;
    top: 73px;
    z-index: 2;
    color: #9a8b6f;
}

#order-list {
    overflow-y: auto;
    max-height: 70vh;
}
#order-list::-webkit-scrollbar { width: 8px; }
#order-list::-webkit-scrollbar-track { background: #2a2218; border-radius: 4px; }
#order-list::-webkit-scrollbar-thumb { background: #5c4a32; border-radius: 4px; }
#order-list::-webkit-scrollbar-thumb:hover { background: #8b7355; }

.lo-round-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: bold;
    margin-top: 10px;
    font-family: var(--cs-font-heading);
    color: #e0d4b8;
    font-size: 1.05em;
}
.lo-round-subtitle {
    font-weight: normal;
    font-style: italic;
    color: #9a8b6f;
    font-size: 0.85em;
}
.lo-round-summary {
    margin-left: auto;
    font-size: 0.8em;
    font-weight: normal;
    color: #a89060;
}

.lo-jump-latest {
    display: block;
    width: 100%;
    padding: 6px;
    margin-bottom: 6px;
    text-align: center;
    cursor: pointer;
    color: #e0d4b8;
    background: linear-gradient(180deg, #3a3028, #2a2218);
    border: 1px solid #8b7355;
    border-radius: 4px;
    font-size: 0.85em;
    transition: background 0.2s, border-color 0.2s;
}
.lo-jump-latest:hover {
    background: linear-gradient(180deg, #4a3f30, #3a3028);
    border-color: #a89060;
}

.lo-order-item {
    display: grid;
    grid-template-columns: 50px 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 4px;
    color: #c9b896;
    background: rgba(42,34,24,0.6);
    border: 1px solid #5c4a32;
    transition: background 0.2s, border-color 0.2s;
}
.lo-order-item:hover {
    background: linear-gradient(180deg, #4a3f30, #3a3028);
    border-color: #a89060;
}
.lo-order-item:focus-visible {
    outline: 2px solid #a89060;
    outline-offset: 2px;
}
.lo-order-item.selected {
    background: rgba(139,115,85,0.2);
    border-color: #a89060;
}

.lo-capo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #8b7355;
    object-fit: cover;
}
.lo-capo-avatar-placeholder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 2px solid #8b7355;
    border-radius: 50%;
    background: rgba(42,34,24,0.6);
}

.lo-order-crew { font-weight: bold; }
.lo-order-type { color: #9a8b6f; }
.lo-order-status.success { color: #2ecc71; }
.lo-order-status.failed { color: #e74c3c; }
.lo-order-status.pending { color: #e67e22; }

.lo-conflict-badge {
    display: inline-flex;
    vertical-align: middle;
}
.lo-conflict-badge img {
    width: 36px;
    height: 36px;
    animation: lo-flip-y 2s ease-in-out infinite;
}
@keyframes lo-flip-y {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

.lo-order-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.lo-order-details.open {
    max-height: 3000px;
}

.lo-detail-panel {
    background: linear-gradient(135deg, #1e1a14, #2a2218);
    color: #c9b896;
    border: 1px solid #5c4a32;
    border-radius: 4px;
    padding: 14px;
    margin: 4px 0 8px 0;
}
.lo-detail-panel h3 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #e0d4b8;
    font-family: var(--cs-font-heading);
}

.lo-empty-state {
    font-style: italic;
    color: #9a8b6f;
}

.lo-unplanned-note {
    margin: 10px 0;
    padding: 10px;
    background: rgba(58,48,32,0.8);
    border: 1px dashed #8b7355;
    border-radius: 4px;
    color: #c9b896;
    font-style: italic;
    font-family: var(--cs-font-heading);
}
.lo-unplanned-note p { margin: 0 0 6px 0; }
.lo-unplanned-targets-header {
    font-weight: bold;
    font-style: normal;
}
.lo-unplanned-targets { padding-left: 20px; }

.lo-day-header {
    font-family: var(--cs-font-heading);
    font-size: 1.15em;
    font-weight: bold;
    padding: 6px 10px;
    margin: 10px 0 4px 0;
    background: linear-gradient(135deg, #2a2218, #33291d);
    border-left: 3px solid #8b7355;
    border-radius: 2px;
    color: #e0d4b8;
}

.lo-detail-row {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(92,74,50,0.4);
    padding-bottom: 8px;
}
.lo-detail-primary {
    width: 25%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lo-detail-primary .status-fail { color: #e74c3c; }
.lo-detail-primary .status-success { color: #2ecc71; }
.lo-detail-secondary {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.9em;
    color: #9a8b6f;
}
.lo-outcome { color: #c9b896; }

/* ── Single-line detail row ── */
.lo-detail-line {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin: 1px 0;
    border-bottom: 1px solid rgba(92,74,50,0.2);
    font-size: 0.88em;
    color: #c9b896;
    flex-wrap: wrap;
}
.lo-detail-line:last-child { border-bottom: none; }

/* Lucia — map-pinned row: persistent left accent bar */
.lo-detail-line.lo-detail-pinned {
    border-left: 3px solid #f1c40f;
    padding-left: 6px;
}
/* One-shot arrival pulse: the bar itself widens + brightens, no background. */
.lo-detail-line.lo-detail-pinned-flash {
    animation: loDetailPinnedBarPulse 700ms ease-out 1;
}
@keyframes loDetailPinnedBarPulse {
    0%   { border-left-width: 3px; border-left-color: #f1c40f; box-shadow: none; }
    30%  { border-left-width: 6px; border-left-color: #fff1a8; box-shadow: -2px 0 8px rgba(241,196,15,0.8); }
    100% { border-left-width: 3px; border-left-color: #f1c40f; box-shadow: none; }
}
.lo-line-status {
    flex-shrink: 0;
    font-size: 0.9em;
}
.lo-line-target {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lo-line-target .map-jump-button {
    font-size: 0.8em;
    padding: 0 2px;
    margin-left: 2px;
}
.lo-line-clash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}
.lo-line-clash.won  { background: rgba(46,204,113,0.3); border: 2px solid #2ecc71; }
.lo-line-clash.lost { background: rgba(231,76,60,0.3);  border: 2px solid #e74c3c; }
.lo-line-clash img {
    width: 32px;
    height: 32px;
    animation: lo-flip-y 2s ease-in-out infinite;
}
.lo-line-clash::after {
    content: "\1F446";
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-size: 18px;
    opacity: 0;
    pointer-events: none;
    animation: lo-tap-hint 3s ease 1s 2 forwards;
    z-index: 3;
}
.lo-extortion-result {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    white-space: nowrap;
}
.lo-extortion-result.one-time {
    color: #7a6a30;
    background: rgba(138, 115, 64, 0.15);
    border: 1px solid rgba(138, 115, 64, 0.35);
}
.lo-extortion-result.controlled {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.13);
    border: 1px solid rgba(46, 125, 50, 0.35);
}
.lo-line-sep {
    color: #5c4a32;
    flex-shrink: 0;
    font-size: 0.8em;
}
.lo-line-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #5c4a32;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s;
    object-fit: cover;
}
.lo-line-avatar:hover { border-color: #a89060; }

.lo-gangster-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.lo-gangster-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #5c4a32;
    transition: border-color 0.2s;
}
.lo-gangster-avatar:hover { border-color: #a89060; }

.lo-conflict-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.lo-conflict-wrap.won { background: rgba(46,204,113,0.3); border: 2px solid #2ecc71; }
.lo-conflict-wrap.lost { background: rgba(231,76,60,0.3); border: 2px solid #e74c3c; }
.lo-conflict-wrap::after {
    content: "\1F446";
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-size: 18px;
    opacity: 0;
    pointer-events: none;
    animation: lo-tap-hint 3s ease 1s 2 forwards;
    z-index: 3;
}
@keyframes lo-tap-hint {
    0%   { opacity: 0; transform: translate(10px, 10px) scale(1); }
    20%  { opacity: 1; transform: translate(0, 0) scale(1); }
    35%  { opacity: 1; transform: translate(0, 0) scale(0.8); }
    45%  { opacity: 1; transform: translate(0, 0) scale(1); }
    65%  { opacity: 1; transform: translate(0, 0) scale(1); }
    80%  { opacity: 0; transform: translate(10px, 10px) scale(1); }
    100% { opacity: 0; transform: translate(10px, 10px) scale(1); }
}
.lo-conflict-icon {
    width: 32px;
    height: 32px;
    animation: lo-flip-y 2s ease-in-out infinite;
}

.lo-loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid rgba(201,184,150,0.3);
    border-top-color: #c9b896;
    border-radius: 50%;
    animation: cs-spin 0.6s linear infinite;
    vertical-align: middle;
}

/* mgmt #92: phone-only ledger order/hero stacking removed. */

/* ──────────────────────────────────────────────────────────────────────────
   Operations Log — Lucia/Sofia rework (2026-05-04)
   The Books: archive of closed operations, MMO-aware, progressive-disclosure.
   ────────────────────────────────────────────────────────────────────────── */

.lo-archive-header {
    padding: 14px 18px 10px 18px;
    border-bottom: 1px solid rgba(168,144,96,0.25);
    margin: 0 -18px 12px -18px;
    background: linear-gradient(180deg, rgba(34,28,20,0.55), rgba(34,28,20,0.0));
}
.lo-archive-title {
    margin: 0 0 4px 0;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 1.4em;
    color: #d4b87a;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.lo-archive-subtitle {
    margin: 0;
    color: #9a8b6f;
    font-style: italic;
    font-size: 0.92em;
}

.lo-empty-archive {
    padding: 40px 18px;
    text-align: center;
    color: #9a8b6f;
    font-style: italic;
}
.lo-empty-archive-title {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 1.25em;
    color: #c9b896;
    margin-bottom: 10px;
    font-style: normal;
}
.lo-empty-archive-body {
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.5;
}

.lo-order-runchip {
    font-size: 0.78em;
    padding: 2px 9px;
    border-radius: 10px;
    border: 1px solid currentColor;
    opacity: 0.9;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.lo-order-runchip.clean { color: #6fc18a; border-color: rgba(111,193,138,0.45); background: rgba(46,204,113,0.06); }
.lo-order-runchip.sour { color: #d68a78; border-color: rgba(214,138,120,0.45); background: rgba(231,76,60,0.06); }
.lo-order-runchip.mixed { color: #d2b87c; border-color: rgba(210,184,124,0.45); background: rgba(210,184,124,0.06); }
.lo-order-runchip.running {
    color: #e6c87c;
    border-color: rgba(230,200,124,0.55);
    background: rgba(230,200,124,0.08);
}
/* (#281) "Filed 2 hours ago" on closed ops — deliberately quieter than the
   live chips: it is a timestamp, not a status, and must not compete with the
   outcome label sitting next to it. */
.lo-order-runchip.filed {
    color: #8a8071;
    border-color: rgba(138,128,113,0.35);
    background: rgba(138,128,113,0.05);
    cursor: help;
}
.lo-order-runchip.running::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e6c87c;
    margin-right: 6px;
    vertical-align: 1px;
    box-shadow: 0 0 6px rgba(230,200,124,0.8);
    animation: lo-pulse 1.6s ease-in-out infinite;
}
@keyframes lo-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Active-order status pill colors */
.lo-order-status.running { color: #e6c87c; }
.lo-order-status.queued { color: #b8a878; font-style: italic; }

/* Section headers — replace per-round (Stretch/Week N) headers entirely */
.lo-section-header {
    margin: 18px 0 6px 0;
    padding: 8px 0 6px 0;
    border-bottom: 1px solid rgba(168,144,96,0.20);
}
.lo-section-header:first-child { margin-top: 4px; }
.lo-section-title {
    margin: 0;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 1.1em;
    color: #d4b87a;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: normal;
}
.lo-section-count {
    font-size: 0.78em;
    color: #9a8b6f;
    background: rgba(168,144,96,0.12);
    padding: 1px 9px;
    border-radius: 10px;
    border: 1px solid rgba(168,144,96,0.30);
    font-family: inherit;
    font-weight: normal;
}
.lo-section-subtitle {
    margin: 3px 0 0 0;
    color: #9a8b6f;
    font-style: italic;
    font-size: 0.82em;
}
.lo-section-header-active .lo-section-title {
    color: #e6c87c;
}
.lo-section-header-active .lo-section-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e6c87c;
    box-shadow: 0 0 7px rgba(230,200,124,0.8);
    animation: lo-pulse 1.6s ease-in-out infinite;
}
.lo-section-empty {
    margin: 6px 0 14px 0;
    padding: 18px 14px;
    background: rgba(42,34,24,0.35);
    border: 1px dashed rgba(168,144,96,0.25);
    border-radius: 4px;
    text-align: center;
    color: #9a8b6f;
}
.lo-section-empty-title {
    color: #c9b896;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 1.02em;
    margin-bottom: 4px;
}
.lo-section-empty-body {
    font-size: 0.88em;
    font-style: italic;
}

.lo-run-summary.lo-detail-line {
    background: rgba(46,204,113,0.04);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 4px 0;
}
.lo-run-span {
    color: #9a8b6f;
    font-size: 0.88em;
    font-style: italic;
    margin: 0 6px;
}
.lo-run-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid #5c4a32;
    color: #c9b896;
    font-size: 0.82em;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.lo-run-toggle:hover {
    background: rgba(168,144,96,0.12);
    border-color: #a89060;
    color: #e0d4b8;
}
.lo-run-breakdown {
    margin-left: 16px;
    padding-left: 10px;
    border-left: 2px solid rgba(168,144,96,0.25);
    margin-bottom: 8px;
}
.lo-day-header-nested {
    font-size: 0.92em;
    color: #9a8b6f;
    margin-top: 6px;
    margin-bottom: 2px;
}

/* mgmt #92: phone-only lo-capo-avatar reflow removed. */

/* ── filter bar ── */
.lo2-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 18px 8px 18px;
    margin: 0 -18px 0 -18px;
    background: #2e2519;
    border-bottom: 1px solid rgba(92,74,50,0.3);
    position: sticky;
    top: 35px;
    z-index: 3;
}
.lo2-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid #5c4a32;
    background: rgba(42,34,24,0.5);
    color: #9a8b6f;
    font-size: 0.82em;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
}
.lo2-filter:hover {
    border-color: #8b7355;
    color: #c9b896;
}
.lo2-filter.active {
    border-color: #a89060;
    background: rgba(168,144,96,0.2);
    color: #e0d4b8;
}
.lo2-filter:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.lo2-filter .lo2-filter-count {
    font-weight: 700;
    min-width: 14px;
    text-align: center;
}
.lo2-filter .lo2-filter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lo2-filter-dot.success  { background: #2ecc71; }
.lo2-filter-dot.failed   { background: #e74c3c; }
.lo2-filter-dot.missed   { background: #e67e22; }
.lo2-filter-dot.conflict { background: #9b59b6; }

/* hide filtered elements (used by both Orders and Orders 2) */
.lo2-hidden { display: none !important; }

/* mgmt #92: phone-only lo2-row reflow removed. */
/* mgmt #92: phone-only lo2-stats reflow removed. */

/* =========================
   12. Miscellaneous & Tooltips
   ========================= */
/* Start Week hover panel styles live in section 1 (above). Auto-ready + AI warn pills: */
.player-tooltip-auto-ready {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #8fd08f;
    white-space: nowrap;
}
.player-tooltip-auto-ready.warn    { color: #f0c76a; }
.player-tooltip-auto-ready.crit    { color: #ff9b8a; }
.player-tooltip-auto-ready.expired { color: #cfd3db; font-weight: 500; }

.player-tooltip-ai-warn {
    font-size: 10px;
    color: #ffd37a;
    white-space: nowrap;
}

.admin-tool-strip {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* =========================
   Debug Panel
   ========================= */
.debug-panel-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Burst-mode poll indicator — sits left of the 🔬 button. Hidden until
   the "Burst mode poll" debug toggle is flipped on. Each map-poller
   tick adds .is-flashing for ~250ms so the emoticon pops. The
   data-tier attribute drives which emoticon shows: ⚡ HOT (1s),
   💛 WARM (2s), 🌙 IDLE (5s). */
.burst-poll-indicator {
    display: none;
    margin-right: 4px;
    width: 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    transition: opacity 120ms ease-out, transform 120ms ease-out;
    transform: scale(0.85);
    pointer-events: none;
    user-select: none;
}
.burst-poll-indicator.is-enabled {
    display: inline-block;
}
.burst-poll-indicator.is-flashing {
    opacity: 1;
    transform: scale(1.15);
}

.admin-tool-panel {
    position: fixed;
    top: 64px;
    left: 12px;
    background: #1a1a1a;
    border: 1px solid #484848;
    border-radius: 8px;
    padding: 14px;
    min-width: 220px;
    max-width: min(92vw, 360px);
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    box-sizing: border-box;
    overscroll-behavior: contain;
    z-index: 2147483600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
    font-size: 13px;
    color: #ccc;
}

.debug-panel-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.debug-panel-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.debug-panel-info-label {
    color: #777;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.debug-panel-info-value {
    font-family: monospace;
    font-size: 12px;
    color: #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    text-align: right;
}

.debug-panel-copy-btn {
    margin-top: 6px;
    padding: 4px 10px;
    background: #2a2a2a;
    border: 1px solid #484848;
    border-radius: 5px;
    color: #bbb;
    font-size: 12px;
    cursor: pointer;
    align-self: flex-start;
}

.debug-panel-copy-btn:hover {
    background: #333;
    color: #fff;
}

.debug-panel-divider {
    border: none;
    border-top: 1px solid #333;
    margin: 10px 0;
}

.debug-panel-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.debug-category {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.debug-category + .debug-category {
    margin-top: 6px;
}

.debug-category-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.debug-category-chevron {
    background: none;
    border: none;
    color: #777;
    font-size: 10px;
    width: 14px;
    height: 14px;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.debug-category-chevron:hover {
    color: #ccc;
}

.debug-category.is-collapsed .debug-category-chevron {
    transform: rotate(-90deg);
}

.debug-category.is-collapsed .debug-category-items {
    display: none;
}

.debug-category-header-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

.debug-category-header-label input[type="checkbox"] {
    accent-color: #d4af37;
    width: 13px;
    height: 13px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.debug-category-items {
    padding-left: 19px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.debug-panel-toggle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.debug-panel-toggle-row input[type="checkbox"] {
    accent-color: #d4af37;
    width: 13px;
    height: 13px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.debug-panel-toggle-row span {
    font-size: 12px;
    color: #ddd;
}

.debug-panel-link-btn {
    padding: 6px 10px;
    background: #252525;
    border: 1px solid #484848;
    border-radius: 5px;
    color: #ddd;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}

.debug-panel-link-btn:hover {
    background: #333;
    color: #fff;
}

.debug-panel-link-meta {
    font-size: 11px;
    color: #8f8f8f;
}

.debug-panel-link-meta code {
    font-family: monospace;
    color: #c8c8c8;
}

/* Map Health (MAP-R2) — 3-mode segmented control + live readout + actions */
.debug-maphealth-modes {
    display: flex;
    gap: 14px;
    margin-bottom: 8px;
}

.debug-maphealth-modes .debug-panel-toggle-row input[type="radio"] {
    accent-color: #d4af37;
    width: 13px;
    height: 13px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.debug-maphealth-readout {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.debug-maphealth-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* =========================
   Cheats Workbench — full-screen tabbed overlay
   Overrides the .admin-tool-panel positioning rules for #cheat-panel
   only; leaves the other admin tools (debug, AI control center) on
   their compact dropdown layout.
   ========================= */
.admin-tool-panel.cheat-overlay {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(8, 6, 4, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2147483600;
}

/* The [hidden] HTML attribute would normally hide the element, but our
   .admin-tool-panel.cheat-overlay rule above has higher specificity than the
   user-agent [hidden] { display: none } rule and would keep it visible.
   Re-assert display:none when hidden is set so closing actually works. */
.admin-tool-panel.cheat-overlay[hidden] {
    display: none;
}

.cheat-overlay-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-bottom: 1px solid #3a2f1c;
    background: linear-gradient(180deg, #1a140a 0%, #110d06 100%);
}

.cheat-overlay-titlebar {
    display: flex;
    align-items: baseline;
    gap: 22px;
    flex-wrap: wrap;
}

.cheat-overlay-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #f2e2b7;
    letter-spacing: 0.6px;
}

.cheat-overlay-meta {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: #b8a982;
}

.cheat-overlay-meta-label {
    color: #7a6c4a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    margin-right: 4px;
}

.cheat-overlay-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #6a5930;
    background: linear-gradient(180deg, #2a2018, #1a130b);
    color: #f2e2b7;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, transform 0.08s;
}

.cheat-overlay-close:hover {
    background: linear-gradient(180deg, #4b2222, #2a1212);
    border-color: #a14a4a;
    color: #fff;
}

.cheat-overlay-close:active {
    transform: scale(0.95);
}

.cheat-overlay-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    min-height: 0;
    overflow: hidden;
}

/* Left rail — list of category tabs */
.cheat-tab-rail {
    grid-column: 1;
    border-right: 1px solid #2a2218;
    overflow-y: auto;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #0d0a06;
}

.cheat-tab-group-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7a6c4a;
    padding: 12px 12px 4px 12px;
    border-top: 1px solid #2a2218;
    margin-top: 4px;
}
.cheat-tab-group-heading:first-child {
    border-top: none;
    margin-top: 0;
}

.cheat-tab-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: #b8a982;
    text-align: left;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.cheat-tab-btn:hover {
    background: rgba(255, 215, 120, 0.06);
    color: #f2e2b7;
}

.cheat-tab-btn.is-active {
    background: linear-gradient(180deg, #4b3a18, #30240f);
    border-color: #6a5930;
    color: #f2e2b7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Center stage — only the active section is visible */
.cheat-overlay-stage {
    grid-column: 2;
    overflow-y: auto;
    padding: 24px 28px;
    min-width: 0;
}

.cheat-category {
    display: none;
}

.cheat-category.is-active {
    display: block;
}

.cheat-category-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

/* Right column — description / explanation for the active tab */
.cheat-overlay-info {
    grid-column: 3;
    border-left: 1px solid #2a2218;
    padding: 22px 22px;
    background: #0d0a06;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cheat-overlay-info-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #d4af37;
}

.cheat-overlay-info-desc {
    font-size: 13px;
    line-height: 1.55;
    color: #d8cca8;
}

.cheat-overlay-info-hint {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #2a2218;
    font-size: 11px;
    line-height: 1.5;
    color: #7a6c4a;
    font-style: italic;
}

/* Debug presets — vertical button stack with subtle grouping */
.debug-presets {
    gap: 18px;
}
.debug-preset-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #2a2218;
}
.debug-preset-group:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.debug-preset-btn {
    text-align: left;
    justify-content: flex-start;
}

@media (max-width: 1100px) {
    .cheat-overlay-body {
        grid-template-columns: 200px minmax(0, 1fr);
    }
    .cheat-overlay-info {
        display: none;
    }
}

/* mgmt #92: phone-only cheat-overlay stacking removed (1100px desktop reflow above is kept). */

.cheat-panel-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cheat-panel-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cheat-panel-field-label {
    color: #999;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cheat-panel-field select {
    width: 100%;
    min-height: 34px;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    background: #222;
    color: #eee;
    padding: 7px 10px;
    box-sizing: border-box;
}

.cheat-panel-field select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.cheat-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A labeled group of related action buttons — e.g. "Fast-forward all ops
   to" sitting above the 10s / 20s / 30s row. */
.cheat-panel-action-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cheat-panel-action-label {
    font-size: 12px;
    font-weight: 600;
    color: #d4af37;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.cheat-panel-action-btn {
    min-height: 34px;
    border: 1px solid #6a5930;
    border-radius: 6px;
    background: linear-gradient(180deg, #4b3a18, #30240f);
    color: #f2e2b7;
    padding: 7px 12px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.cheat-panel-action-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.cheat-panel-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cheat-panel-status {
    min-height: 17px;
    font-size: 12px;
    line-height: 1.4;
    color: #a8a8a8;
}

.cheat-panel-status.is-success {
    color: #7ed48b;
}

.cheat-panel-status.is-error {
    color: #f08e7c;
}

/* mgmt #92: phone-only cheat-panel-field-grid reflow removed. */

/* =========================
   Tooltip Visual Affordance (shared)
   ========================= */
/* Any element with a tooltip gets a dotted underline signal */
.has-tip,
.hb-tip {
    cursor: help;
    border-bottom: 1px dotted rgba(255, 215, 0, 0.25);
    transition: color 0.15s, border-bottom-color 0.15s;
}
.has-tip:hover,
.hb-tip:hover {
    color: #ffd700;
    border-bottom-color: #ffd700;
}
/* Icon-style tips: no underline, just cursor change + subtle glow on hover */
.has-tip-icon {
    cursor: help;
    transition: filter 0.15s;
}
.has-tip-icon:hover {
    filter: brightness(1.3);
}

/* =========================
   Handbook Tip Popups (rich tooltip with handbook link)
   ========================= */
.hb-tip {
    position: relative;
}
.hb-tip-popup {
    display: none;
    position: fixed;
    background: #1c1a17;
    border: 1px solid #3d3225;
    border-radius: 6px;
    padding: 10px 14px;
    width: 280px;
    z-index: 100001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    text-align: left;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
}
/* Popup is positioned dynamically by JS toward the viewport center */
.hb-tip-title {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #ffd700;
    font-family: Georgia, 'Times New Roman', serif;
    margin-bottom: 5px;
    line-height: 1.2;
}
.hb-tip-body {
    display: block;
    font-size: 12px;
    color: #c9bfae;
    line-height: 1.5;
}
.hb-tip-crumb {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 10px;
    color: #888;
    text-decoration: none;
    border-top: 1px solid #333;
    padding-top: 6px;
    transition: color 0.15s;
}
.hb-tip-crumb:hover {
    color: #ffd700;
}
.hb-tip-crumb-icon {
    font-size: 12px;
    flex-shrink: 0;
}
/* Popup visibility is managed by JS hover delay — these are fallback safety rules */
.hb-tip-popup.hb-tip-visible {
    display: block;
}
/* =========================
   Handbook Slide-Out Panel (in-game)
   ========================= */
.handbook-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90vw;
    background: linear-gradient(180deg, #16140f, #111010);
    border-left: 2px solid #3d3225;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
}
.handbook-panel.open {
    transform: translateX(0);
}
.handbook-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, #1e1a14, #16140f);
    border-bottom: 1px solid #3d3225;
    flex-shrink: 0;
}
.handbook-panel-title {
    margin: 0;
    font-size: 18px;
    color: #ffd700;
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: 0.03em;
}
.handbook-panel-title::before {
    content: '📖 ';
    font-size: 14px;
}
.handbook-panel-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.handbook-panel-close,
.handbook-panel-expand,
.handbook-panel-collapse {
    background: none;
    border: 1px solid #333;
    border-radius: 4px;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 8px;
    line-height: 1;
    transition: all 0.15s;
    font-family: inherit;
}
.handbook-panel-close { font-size: 18px; }
.handbook-panel-close:hover,
.handbook-panel-expand:hover,
.handbook-panel-collapse:hover {
    color: #fff;
    border-color: #888;
    background: rgba(255,255,255,0.05);
}
/* Mode-conditional visibility: compact shows [Expand][Close], full shows [Collapse][Close] */
.handbook-panel-collapse { display: none; }
.handbook-panel.handbook-panel--full .handbook-panel-expand { display: none; }
.handbook-panel.handbook-panel--full .handbook-panel-collapse { display: inline-block; }
.handbook-panel-search {
    margin: 14px 20px 0;
    padding: 9px 14px 9px 32px;
    background: #1a1816 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat;
    border: 1px solid #2a2520;
    border-radius: 6px;
    color: #ccc;
    font-size: 13px;
    flex-shrink: 0;
}
.handbook-panel-search:focus {
    outline: none;
    border-color: #b08c3a;
    background-color: #1c1a17;
}
/* Sticky category nav pills */
.handbook-panel-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 20px;
    border-bottom: 1px solid #2a2520;
    flex-shrink: 0;
    background: #141210;
}
.hbp-nav-pill {
    background: rgba(176, 140, 58, 0.08);
    border: 1px solid rgba(176, 140, 58, 0.2);
    border-radius: 999px;
    color: #c9bfae;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.hbp-nav-pill:hover {
    background: rgba(176, 140, 58, 0.18);
    border-color: #b08c3a;
    color: #ffd700;
}
/* Category headers inside the panel */
.handbook-panel-body .handbook-category-label {
    font-size: 13px;
    font-weight: 700;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 22px 0 8px;
    margin-top: 10px;
    border-bottom: 2px solid rgba(176, 140, 58, 0.2);
    font-family: Georgia, 'Times New Roman', serif;
}
.handbook-panel-body .handbook-category-label:first-child {
    padding-top: 16px;
    margin-top: 0;
}
/* Collapse indicator on entry headings */
.handbook-panel-body .handbook-entry h3::after {
    content: '▾';
    float: right;
    font-size: 12px;
    color: #666;
    transition: transform 0.2s;
    margin-right: 4px;
}
.handbook-panel-body .handbook-entry.hbp-collapsed h3::after {
    content: '▸';
}
.handbook-panel-body .handbook-entry.hbp-collapsed h3 {
    opacity: 0.7;
}
.handbook-panel-body .handbook-entry.hbp-collapsed h3:hover {
    opacity: 1;
}
.handbook-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 40px;
}
/* Styled scrollbar */
.handbook-panel-body::-webkit-scrollbar {
    width: 6px;
}
.handbook-panel-body::-webkit-scrollbar-track {
    background: transparent;
}
.handbook-panel-body::-webkit-scrollbar-thumb {
    background: #3d3225;
    border-radius: 3px;
}
.handbook-panel-body::-webkit-scrollbar-thumb:hover {
    background: #5a4a35;
}
.handbook-panel-body .handbook-entry {
    padding: 0;
}
.handbook-panel-body .handbook-entry h3 {
    font-size: 16px;
    padding-top: 20px;
    margin-bottom: 10px;
    border-left: 3px solid #b08c3a;
    padding-left: 10px;
    border-top: none;
}
.handbook-panel-body .handbook-entry:first-child h3 {
    padding-top: 14px;
}
.handbook-panel-body .handbook-nutshell {
    font-size: 12px;
    padding: 8px 12px;
    background: rgba(212, 175, 55, 0.08);
    border-left: 3px solid rgba(176, 140, 58, 0.4);
    margin-bottom: 10px;
    border-radius: 0 4px 4px 0;
}
.handbook-panel-body .handbook-body {
    font-size: 13px;
    padding-bottom: 6px;
}
.handbook-panel-body .handbook-body table {
    font-size: 11px;
}
/* Cross-links between handbook entries. Without this they fall back to the
   browser default #0000EE, which is unreadable on the panel's black ground and
   fights the 1920s palette. Gold to match the category labels (#d4af37) and the
   hb-tip hover (#ffd700), dotted underline so they read as links without the
   heavy solid rule. Applies to the whole handbook, not just one entry. */
.handbook-panel-body .handbook-body a,
.handbook-area .handbook-body a {
    color: #d4af37;
    text-decoration: none;
    border-bottom: 1px dotted rgba(212, 175, 55, 0.5);
    transition: color 0.15s, border-bottom-color 0.15s;
}
.handbook-panel-body .handbook-body a:hover,
.handbook-panel-body .handbook-body a:focus,
.handbook-area .handbook-body a:hover,
.handbook-area .handbook-body a:focus {
    color: #ffd700;
    border-bottom-color: #ffd700;
}
.handbook-panel-body .handbook-body a:visited,
.handbook-area .handbook-body a:visited {
    color: #d4af37;
}
/* Word highlight when jumping to a handbook entry from a tooltip */
.hb-word-highlight {
    background: rgba(255, 215, 0, 0.3);
    color: #ffd700;
    padding: 1px 3px;
    border-radius: 3px;
    font-style: normal;
    transition: background 0.3s ease;
}
/* Highlights stay visible until panel closes or a new topic is navigated to */
.handbook-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
}
.handbook-panel-backdrop.open {
    display: block;
}

/* Left-rail wrapper: in compact mode it's a flat stack above the body; in full
   mode it becomes a vertical sidebar with a sticky search+pills region at the
   top and a scrollable index below. */
.handbook-panel-rail {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
/* Index is hidden in compact mode; shown only in full overlay. */
.hbp-index {
    display: none;
}

/* Full-overlay mode: panel spans the viewport, header spans full width, and
   body is a two-column grid with a sidebar and the content. */
.handbook-panel.handbook-panel--full {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    transform: none;
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
    border-left: none;
    box-shadow: none;
}
.handbook-panel.handbook-panel--full .handbook-panel-header {
    grid-column: 1 / -1;
    grid-row: 1;
}
.handbook-panel.handbook-panel--full .handbook-panel-rail {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid #2a2520;
    background: #0f0e0b;
    overflow-y: auto;
    min-height: 0;
}
.handbook-panel.handbook-panel--full .handbook-panel-body {
    grid-column: 2;
    grid-row: 2;
    padding: 0 40px 40px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* In full mode the search + pills region sticks to the top of the scrollable
   rail so the reader always has them within reach. */
.handbook-panel.handbook-panel--full .handbook-panel-search {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 14px 14px 10px 32px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    background-color: #0f0e0b;
    background-position: 10px 18px;
}
.handbook-panel.handbook-panel--full .handbook-panel-nav {
    position: sticky;
    top: 48px;
    z-index: 2;
    padding: 8px 14px;
    background: #0f0e0b;
    border-bottom: 1px solid #2a2520;
}
.handbook-panel.handbook-panel--full .hbp-index {
    display: block;
    padding: 8px 14px 24px;
}

/* Index structure: collapsible category sections with a chevron header and
   a list of entry links. Active entry gets a gold left-border. */
.hbp-index-section {
    margin-top: 10px;
}
.hbp-index-section-header {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #d4af37;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    padding: 6px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hbp-index-section-header:hover {
    color: #ffd700;
}
.hbp-index-section-chevron {
    display: inline-block;
    transition: transform 0.15s;
    font-size: 10px;
    width: 10px;
}
.hbp-index-section.hbp-index-collapsed .hbp-index-section-chevron {
    transform: rotate(-90deg);
}
.hbp-index-section.hbp-index-collapsed .hbp-index-list {
    display: none;
}
.hbp-index-list {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
}
.hbp-index-list li {
    margin: 0;
}
.hbp-index-link {
    display: block;
    padding: 4px 8px 4px 14px;
    color: #c9bfae;
    text-decoration: none;
    font-size: 13px;
    border-left: 2px solid transparent;
    transition: all 0.12s;
}
.hbp-index-link:hover {
    color: #ffd700;
    background: rgba(176, 140, 58, 0.08);
}
.hbp-index-link.active {
    color: #ffd700;
    border-left-color: #b08c3a;
    background: rgba(176, 140, 58, 0.12);
}

/* Invisible bridge: extends the popup's hover hitarea toward the trigger element.
   Direction set dynamically by JS via data-bridge attribute. */
.hb-tip-popup::before {
    content: '';
    position: absolute;
}
.hb-tip-popup[data-bridge="top"]::before    { left: 0; right: 0; bottom: -16px; height: 16px; }
.hb-tip-popup[data-bridge="bottom"]::before { left: 0; right: 0; top: -16px; height: 16px; }
.hb-tip-popup[data-bridge="left"]::before   { top: 0; bottom: 0; right: -16px; width: 16px; }
.hb-tip-popup[data-bridge="right"]::before  { top: 0; bottom: 0; left: -16px; width: 16px; }

/* Out-on-a-job lockout state — shared by crews and locker views.
   Dim only the thumb so the on-job label stays fully legible. */
.crew-member-on-job .crew-member-thumb {
    opacity: 0.55;
    filter: grayscale(0.6);
    cursor: pointer;
}
.crew-member-on-job-badge,
.locker-on-job-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #1a1206;
    background: #f1c27d;
    border: 1px solid #f1c27d;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Bug #75 FE3 — leaderless crew (capo died/jailed): a clear danger badge and a
   dimmed empty capo slot so the player sees the crew can't operate. */
.crew-leaderless-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: #2a0b0b;
    background: #e07a5f;
    border: 1px solid #c84b32;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.crew-entry-leaderless > summary {
    border-left: 3px solid #c84b32;
}
.crew-member-no-capo {
    opacity: 0.85;
}
.crew-capo-empty-slot {
    width: 40px;
    height: 40px;
    border: 2px dashed #c84b32;
    border-radius: 50%;
    background: rgba(200, 75, 50, 0.08);
}
.crew-no-capo-label {
    font-style: italic;
    color: #e07a5f;
    font-size: 13px;
}
.crew-disbanding-hint {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #e07a5f;
    font-style: italic;
    margin-left: 8px;
    white-space: nowrap;
}
.locker-crew-disbanding {
    border-left: 3px solid #c84b32;
    padding-left: 6px;
}
.mmo-board-op-capo-lost {
    background: rgba(200, 75, 50, 0.07);
    border-left: 2px solid #c84b32;
}
.mmo-board-op-capo-lost-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    color: #e07a5f;
    border: 1px solid #c84b32;
    border-radius: 6px;
    padding: 1px 5px;
    margin-left: 7px;
    letter-spacing: 0.4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Locker tile is a small (73px) absolutely-laid-out card, so the badge
   needs to sit as a compact overlay rather than a full-width pill. */
.gangster-tile .locker-on-job-badge {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    font-size: 8px;
    padding: 1px 4px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    pointer-events: none;
    z-index: 3;
    max-width: calc(100% - 8px);
}
.gangster-tile-on-job {
    position: relative;
    cursor: pointer !important;
}
.gangster-tile-on-job img {
    opacity: 0.55;
    filter: grayscale(0.7);
}
.gangster-tile-on-job-badge {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 800;
    color: #1a1206;
    background: #f1c27d;
    border: 1px solid #f1c27d;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.locker-tile-on-job img {
    opacity: 0.55;
    filter: grayscale(0.7);
}
.locker-character-on-job {
    position: relative;
}
.locker-character-on-job::after {
    content: 'OUT ON A JOB — EQUIPMENT LOCKED';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: #f1c27d;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(241, 194, 125, 0.5);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 5;
}

/* Crew popup — opens on click of own crew sprite on the strategic map */
/* Crew popup — opened by clicking a friendly crew badge on the strategic
   map. Hierarchy: sticky header (crew name + capo subtitle + close + stat
   chips + Call home/Attack actions) → scrolling roster body. Each roster
   row is one line: `+` toggle, face, name, energy/health icons, item-count
   chip. Clicking the `+` reveals an inline `.crew-popup-row-items` panel
   directly under that row, where 50px mini cards render. Hovering a mini
   card pops the full-size native card to the left of the popup. */
.crew-popup {
    position: absolute;
    background: rgba(20, 15, 10, 0.97);
    border: 1px solid rgba(176, 133, 82, 0.75);
    color: #f6f1e3;
    padding: 0;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    width: 290px;
    max-width: 300px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    /* Clip the scrolling body to the popup's bounds so .crew-popup-body
       can be the scroll container when content (expanded equipment
       panels) exceeds the 60vh max-height cap. */
    overflow: hidden;
}
/* Header cluster — the crew title, stat chips, and action buttons stay
   pinned at the top while the roster scrolls underneath. The popup is
   the flex container, so making this a non-shrinking flex item keeps it
   visually anchored without needing position: sticky (which interacts
   poorly with flex sizing inside an overflow: hidden parent). */
.crew-popup-sticky {
    flex: 0 0 auto;
    background: rgba(20, 15, 10, 0.97);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.crew-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 7px;
    border-bottom: 1px solid rgba(176, 133, 82, 0.30);
    background: linear-gradient(180deg, rgba(58, 44, 28, 0.55), rgba(40, 30, 20, 0.35));
}
.crew-popup-title { flex: 1 1 auto; min-width: 0; }
.crew-popup-crew-name {
    font-weight: 700;
    font-size: 14px;
    color: #f4d06a;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crew-popup-crew-meta {
    font-size: 10px;
    color: #9c8a6c;
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crew-popup-close {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(176, 133, 82, 0.45);
    color: #d4b878;
    width: 22px;
    height: 22px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.crew-popup-close:hover {
    background: rgba(176, 133, 82, 0.20);
    border-color: #d4b878;
}

/* ── Stat chips (count + carried cash) ──────────────────────────────── */
.crew-popup-stats {
    display: flex;
    gap: 6px;
    padding: 7px 10px 4px;
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(176, 133, 82, 0.18);
}
.crew-popup-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(40, 30, 20, 0.55);
    border: 1px solid rgba(176, 133, 82, 0.30);
    font-size: 11px;
    line-height: 1.3;
    color: #c9b693;
    font-variant-numeric: tabular-nums;
}
.crew-popup-stat-icon {
    font-size: 11px;
    opacity: 0.9;
}
.crew-popup-stat-val {
    font-weight: 700;
    color: #f6f1e3;
}
.crew-popup-stat-cash .crew-popup-stat-icon { color: #6cb86c; opacity: 1; font-weight: 700; }
.crew-popup-stat-cash .crew-popup-stat-val  { color: #6cb86c; }
.crew-popup-stat-cash.is-empty .crew-popup-stat-icon,
.crew-popup-stat-cash.is-empty .crew-popup-stat-val { color: #6e6452; }

/* ── Action row (recall + attack) ───────────────────────────────────── */
.crew-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 10px 8px;
    border-bottom: 1px solid rgba(176, 133, 82, 0.22);
    background: rgba(0, 0, 0, 0.10);
}
.crew-popup-action {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    background: transparent;
    color: #d4b878;
    border: 1px solid rgba(212, 184, 120, 0.50);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    overflow: hidden;
}
.crew-popup-action-icon  { font-size: 12px; line-height: 1; }
.crew-popup-action-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.crew-popup-action:hover:not(:disabled) {
    background: rgba(212, 184, 120, 0.10);
    border-color: #d4b878;
}
.crew-popup-action:disabled {
    color: #6e6452;
    border-color: rgba(212, 184, 120, 0.18);
    cursor: not-allowed;
}
/* Attack button — heavier weight than recall. Recall is recoverable;
   attack starts a fight. Resting state is a muted red-bronze; active
   state (targeting mode) goes full red so it reads as "armed". */
.crew-popup-action-attack {
    color: #e09a8a;
    border-color: rgba(200, 110, 90, 0.55);
}
.crew-popup-action-attack:hover:not(:disabled) {
    background: rgba(200, 110, 90, 0.14);
    border-color: #e09a8a;
    color: #ffb5a3;
}
.crew-popup-action-attack.is-active {
    background: rgba(200, 80, 70, 0.22);
    color: #ffb5a3;
    border-color: #ff9b88;
    box-shadow: 0 0 0 1px rgba(255, 155, 136, 0.25) inset;
}
.crew-popup-action-attack.is-active:hover:not(:disabled) {
    background: rgba(200, 80, 70, 0.32);
}

.crew-popup-combat-banner {
    margin: 0 10px 6px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 90, 70, 0.55);
    background: rgba(120, 30, 22, 0.22);
    color: #ffb5a3;
    font-size: 11px;
    line-height: 1.35;
    border-radius: 3px;
    text-align: center;
}
.crew-popup-combat-banner-title {
    display: block;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ff8a78;
    margin-bottom: 2px;
}
.crew-popup-combat-banner-target {
    color: #ffe1d4;
    font-weight: 600;
}
.crew-popup-combat-banner-family {
    color: #d8b18a;
}

/* ── Body / roster rows ─────────────────────────────────────────────── */
/* Body is the scroll container for the roster. The popup's outer
   max-height is set in JS (60vh cap); the sticky header sits above this
   and never scrolls away. */
.crew-popup-body {
    flex: 1 1 auto;
    padding: 4px 6px 6px;
    overflow-y: auto;
    min-height: 0;
}
.crew-popup-row {
    padding: 7px 4px;
    border-bottom: 1px solid rgba(176, 133, 82, 0.12);
    border-left: 3px solid transparent;
    margin-left: -3px;
    padding-left: 7px;
    transition: background-color 120ms ease, border-left-color 120ms ease;
}
.crew-popup-row:last-child { border-bottom: none; }
/* Row-level Von Restorff: low vital → attention (red), mid vital → watch
   (amber). Picks the worst signal (attention beats watch). */
.crew-popup-row.is-watch     { border-left-color: rgba(224, 160, 64, 0.85); }
.crew-popup-row.is-attention { border-left-color: rgba(229, 72, 72, 0.95); }
/* Expanded — the row whose inline equipment panel is currently open.
   Subtle warm tint so the player can trace which gangster the cards
   below belong to. */
.crew-popup-row.is-expanded {
    background: rgba(212, 184, 120, 0.08);
}
.crew-popup-row-line {
    display: flex;
    align-items: center;
    gap: 10px;
}
.crew-popup-face {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #1a140d;
    border: 1px solid rgba(176, 133, 82, 0.5);
    flex: 0 0 auto;
}
.crew-popup-face-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4d06a;
    font-weight: 700;
    font-size: 16px;
}
.crew-popup-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
    color: #f6f1e3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vital strip — battery (energy) + heart (HP), icon-only. The battery
   fills proportionally to current energy; the heart darkens through
   health bands. Hover either for the family-view-style tooltip with
   exact values. Same visual language used elsewhere in the game so the
   player learns the symbols once and reads them everywhere. */
.crew-popup-vitals {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.crew-popup-vital {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: help;
    color: #d4b878;
    transition: transform 120ms ease, color 120ms ease;
}
.crew-popup-vital:hover { transform: scale(1.10); }
.crew-popup-vital svg { display: block; }

/* Energy (battery) — amber default, mid yellow, low red. */
.crew-popup-vital-energy        { color: #d4b878; }
.crew-popup-vital-energy.is-mid { color: #e0a040; }
.crew-popup-vital-energy.is-low { color: #d96a4a; }
/* Health (heart) — pink-red full, deeper red mid, hot red critical. */
.crew-popup-vital-health           { color: #e98a8a; }
.crew-popup-vital-health.is-mid    { color: #d96a6a; }
.crew-popup-vital-health.is-low    { color: #e54848; }

/* Inline expand toggle — the small `+` (or `−` when open) on the LEFT of
   each row that has equipment. Click flips the row's hidden item panel.
   Empty variant is a same-width spacer so faces line up across rows. */
.crew-popup-row-expand {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 14px;
    text-align: center;
    background: rgba(40, 30, 20, 0.55);
    border: 1px solid rgba(176, 133, 82, 0.45);
    border-radius: 4px;
    color: #d4b878;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.crew-popup-row-expand:hover {
    background: rgba(212, 184, 120, 0.18);
    border-color: #d4b878;
    color: #f4d06a;
}
.crew-popup-row-expand.is-open {
    background: rgba(212, 184, 120, 0.22);
    border-color: #f4d06a;
    color: #f4d06a;
}
.crew-popup-row-expand-empty {
    display: inline-block;
    background: transparent;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* Item count chip — passive, lives on the right of the row to tell the
   player at a glance how much gear the gangster has. Clicking it does
   nothing; the `+` button on the left drives the expansion. */
.crew-popup-row-itemcount {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(40, 30, 20, 0.45);
    border: 1px solid rgba(176, 133, 82, 0.25);
    border-radius: 999px;
    color: #c9b693;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* Per-row expanded equipment panel. Hidden by default; revealed when the
   `+` toggle is clicked. Mini cards (50px) wrap across the available
   width below the gangster row. The 46px left margin lines them up
   under the face, leaving the `+` column flush against the row edge. */
.crew-popup-row-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    margin-left: 46px;
    padding: 4px 0 2px;
}
/* The `display: flex` above wins over the user-agent default
   `[hidden] { display: none }` because of specificity. We re-apply
   the hidden behavior explicitly so the panel actually collapses. */
.crew-popup-row-items[hidden] { display: none; }
.crew-popup-mini-slot {
    cursor: help;
    transition: transform 0.12s ease;
}
.crew-popup-mini-slot:hover { transform: scale(1.04); }

.crew-popup-empty {
    padding: 10px;
    color: #c9b693;
    font-style: italic;
    text-align: center;
}

/* Skeleton "Loading crew…" / "Reading crew…" state shown on the instant first
   paint, before the roster fetch lands. Gently pulses so it reads as
   in-progress, not as the terminal "No crew on this op." empty state. */
.crew-popup-loading {
    animation: crew-popup-loading-pulse 1.1s ease-in-out infinite;
}

@keyframes crew-popup-loading-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
}

/* Read-only ENEMY INSPECT card (#97) — identity only: family + capo + op type.
   Deliberately spare so it reads as "a rival, glance only", not the rich
   own-crew roster. No vitals/cash/roster ever render here. */
.crew-popup-enemy-inspect {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
}
.crew-popup-enemy-face .crew-popup-face {
    width: 44px;
    height: 44px;
    font-size: 18px;
}
.crew-popup-enemy-meta {
    min-width: 0;
}
.crew-popup-enemy-capo {
    font-size: 13px;
    font-weight: 600;
    color: #ede3d2;
}
.crew-popup-enemy-capo-unknown {
    color: #9b8f7c;
    font-style: italic;
    font-weight: 500;
}
.crew-popup-enemy-hint {
    margin-top: 2px;
    font-size: 11px;
    color: #9b8f7c;
    letter-spacing: 0.02em;
}

/* Pending stat chips (count / cash) on the placeholder frame — neutral grey
   "…" so a server-authoritative number never flashes a wrong value (e.g. $0 or
   a crew count that would jump when the reconcile lands). Gentle pulse marks it
   as in-progress. */
.crew-popup-stat-chip.is-pending {
    opacity: 0.55;
    animation: crew-popup-loading-pulse 1.1s ease-in-out infinite;
}
.crew-popup-stat-chip.is-pending .crew-popup-stat-val {
    letter-spacing: 1px;
}

/* Magnified item card shown on mini-slot hover; uses createScaledItemCard. */
.crew-popup-magnify {
    position: absolute;
    z-index: 26;
    pointer-events: auto;
}

/* Targeting cursor — applied to <body> while attack mode is active.
   The crosshair signals "pick an enemy crew on the map". The * selector
   propagates through Pixi's <canvas>, which otherwise sets its own cursor. */
body.crew-attack-targeting,
body.crew-attack-targeting * {
    cursor: crosshair !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Ledger → Conflicts tab. The Book of Fights.
   Inherits .lo-* (Ledger Orders) section vocabulary so the rhythm matches
   the Operations tab; adds .cl-* (Conflicts Ledger) for the bits that are
   genuinely new — page header, filter bar, outcome verdict pills, fallen
   chips, detail panel.
   ───────────────────────────────────────────────────────────────────────── */
#ledger-view .cl-page-header {
    margin: 4px 0 12px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgba(168, 144, 96, 0.20);
}
#ledger-view .cl-page-title {
    margin: 0;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    color: #d4b87a;
    letter-spacing: 0.04em;
    font-weight: 400;
    font-size: 1.45em;
}
#ledger-view .cl-page-subtitle {
    margin: 4px 0 0 0;
    color: #9a8b6f;
    font-style: italic;
    font-size: 0.88em;
}

/* Filter bar — pill groups + opponent select + search box. */
#ledger-view .cl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 10px 0 8px 0;
    border-bottom: 1px solid rgba(168, 144, 96, 0.12);
}
#ledger-view .cl-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#ledger-view .cl-pill-group-label {
    color: #9a8b6f;
    font-size: 0.82em;
    font-style: italic;
    margin-right: 4px;
}
#ledger-view .cl-pill {
    padding: 3px 11px;
    background: transparent;
    border: 1px solid #5c4a32;
    border-radius: 12px;
    color: #c9b896;
    font-family: inherit;
    font-size: 0.82em;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#ledger-view .cl-pill:hover {
    background: rgba(168, 144, 96, 0.10);
    border-color: #a89060;
}
#ledger-view .cl-pill.is-active {
    background: rgba(212, 184, 122, 0.18);
    border-color: #d4b87a;
    color: #f4e6c0;
}
#ledger-view .cl-opponent-select {
    background: rgba(42, 34, 24, 0.6);
    border: 1px solid #5c4a32;
    color: #c9b896;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: inherit;
    font-size: 0.85em;
    max-width: 200px;
}
#ledger-view .cl-search-input {
    flex: 1 1 200px;
    min-width: 180px;
    padding: 5px 10px;
    background: rgba(42, 34, 24, 0.6);
    border: 1px solid #5c4a32;
    border-radius: 4px;
    color: #e6d6bd;
    font-family: inherit;
    font-size: 0.88em;
}
#ledger-view .cl-search-input::placeholder { color: #7c6e54; font-style: italic; }
#ledger-view .cl-search-input:focus {
    outline: none;
    border-color: #a89060;
    background: rgba(42, 34, 24, 0.85);
}

/* Active-filter sentence ("Showing: Won fights, this month."). */
#ledger-view .cl-active-filter-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 10px 0;
    color: #9a8b6f;
    font-size: 0.88em;
    font-style: italic;
}
#ledger-view .cl-active-filter-text { color: #c9b896; }
#ledger-view .cl-clear-link {
    background: transparent;
    border: none;
    color: #d4b87a;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    text-decoration: underline;
    text-decoration-color: rgba(212, 184, 122, 0.4);
    padding: 0;
}
#ledger-view .cl-clear-link:hover {
    color: #f4e6c0;
    text-decoration-color: #f4e6c0;
}

/* Empty states. */
#ledger-view .cl-empty {
    margin: 22px 0;
    padding: 28px 20px;
    background: rgba(42, 34, 24, 0.40);
    border: 1px dashed rgba(168, 144, 96, 0.30);
    border-radius: 4px;
    text-align: center;
    color: #9a8b6f;
}
#ledger-view .cl-empty-title {
    color: #d4b87a;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 1.08em;
    margin-bottom: 6px;
}
#ledger-view .cl-empty-body { font-style: italic; font-size: 0.92em; }

/* Row — base layout mirrors .lo-order-item but the verdict pill replaces
   the multi-status column the ops list uses. */
#ledger-view .cl-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 4px;
    color: #c9b896;
    background: rgba(42, 34, 24, 0.6);
    border: 1px solid #5c4a32;
    transition: background 0.18s, border-color 0.18s;
}
#ledger-view .cl-row:hover {
    background: linear-gradient(180deg, #4a3f30, #3a3028);
    border-color: #a89060;
}
#ledger-view .cl-row:focus-visible {
    outline: 2px solid #a89060;
    outline-offset: 2px;
}
#ledger-view .cl-row.is-expanded {
    border-color: #d4b87a;
    background: rgba(168, 144, 96, 0.10);
}
#ledger-view .cl-row-active {
    border-color: #e6c87c;
    background: linear-gradient(135deg, rgba(110, 50, 40, 0.18), rgba(42, 34, 24, 0.60));
    cursor: default;
}
#ledger-view .cl-row-headline {
    font-size: 1.02em;
    font-weight: 600;
}
#ledger-view .cl-row-mine { color: #f4e6c0; }
#ledger-view .cl-row-vs   { color: #7c6e54; font-weight: 400; font-style: italic; }
#ledger-view .cl-row-opp  { font-weight: 600; }
#ledger-view .cl-row-sub {
    margin-top: 2px;
    color: #9a8b6f;
    font-style: italic;
    font-size: 0.84em;
}
#ledger-view .cl-row-sub-active { color: #e6c87c; }

/* Verdict pill — Lucia's "one word at a glance" element. */
#ledger-view .cl-verdict {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}
#ledger-view .cl-verdict-won {
    color: #6cb86c;
    background: rgba(108, 184, 108, 0.10);
    border-color: rgba(108, 184, 108, 0.45);
}
#ledger-view .cl-verdict-lost {
    color: #e98a8a;
    background: rgba(233, 138, 138, 0.10);
    border-color: rgba(233, 138, 138, 0.45);
}
#ledger-view .cl-verdict-evasion {
    color: #d4b87a;
    background: rgba(212, 184, 122, 0.10);
    border-color: rgba(212, 184, 122, 0.45);
}
#ledger-view .cl-verdict-pending {
    color: #ffb5a3;
    background: rgba(255, 155, 136, 0.10);
    border-color: rgba(255, 155, 136, 0.55);
    animation: cl-verdict-pulse 1.6s ease-in-out infinite;
    font-variant-numeric: tabular-nums;
}
@keyframes cl-verdict-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 155, 136, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 155, 136, 0.18); }
}

/* Detail panel injected after an expanded row. */
#ledger-view .cl-detail {
    margin: 0 0 8px 60px;  /* aligned past the avatar gutter */
    padding: 12px 14px;
    background: linear-gradient(135deg, #1e1a14, #2a2218);
    border: 1px solid #5c4a32;
    border-top-color: #d4b87a;
    border-radius: 0 0 4px 4px;
    color: #c9b896;
}
#ledger-view .cl-detail-loading,
#ledger-view .cl-detail-error {
    color: #9a8b6f;
    font-style: italic;
    text-align: center;
    padding: 6px 0;
}
#ledger-view .cl-detail-line {
    margin: 4px 0;
    font-size: 0.92em;
}
#ledger-view .cl-detail-label {
    color: #9a8b6f;
    font-style: italic;
    margin-right: 4px;
}
#ledger-view .cl-detail-block {
    margin: 10px 0;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(42, 34, 24, 0.45);
    border: 1px solid rgba(92, 74, 50, 0.55);
}
#ledger-view .cl-detail-block-title {
    color: #d4b87a;
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 0.95em;
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}
#ledger-view .cl-detail-casualties-mine {
    border-color: rgba(233, 138, 138, 0.45);
}
#ledger-view .cl-detail-epitaph {
    margin-top: 6px;
    color: #9a8b6f;
    font-style: italic;
    font-size: 0.86em;
}
#ledger-view .cl-fallen-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 3px 8px 3px 0;
    padding: 3px 8px 3px 3px;
    background: rgba(20, 14, 10, 0.45);
    border: 1px solid rgba(168, 144, 96, 0.30);
    border-radius: 14px;
    font-size: 0.86em;
}
#ledger-view .cl-fallen-face {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: #1a140d;
    border: 1px solid rgba(168, 144, 96, 0.40);
}
#ledger-view .cl-fallen-face-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4b87a;
    font-weight: 700;
    font-size: 11px;
}
#ledger-view .cl-fallen-name { color: #c9b896; }
#ledger-view .cl-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(168, 144, 96, 0.20);
}
#ledger-view .cl-action-primary {
    color: #d4b87a;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92em;
    padding: 5px 10px;
    border: 1px solid rgba(212, 184, 122, 0.55);
    border-radius: 4px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#ledger-view .cl-action-primary:hover {
    background: rgba(212, 184, 122, 0.12);
    border-color: #f4e6c0;
    color: #f4e6c0;
}

/* =========================================================================
   "The Wire" — live ambient world-news crawl banner
   -------------------------------------------------------------------------
   A full-width banner pinned to the bottom edge (just above the legal
   footer). When a world event arrives the banner appears and the message
   crawls right-to-left across the whole viewport ONCE, then the banner is
   removed from the DOM. There is NO permanent band — the element only
   exists while a message is crawling. Hidden completely when quiet.

   Perf rules (Vince): the crawl is a CSS @keyframes animation on
   `transform: translateX` ONLY — compositor-thread, off the main thread,
   auto-pauses when the tab is hidden. No `left`/`margin` animation, no
   `filter: drop-shadow`, no JS rAF loop. `will-change: transform` only on
   the moving text element.

   Opacity rule (memory feedback_translucent_panel_over_map): the banner is
   a text carrier — fully OPAQUE aged paper, not a translucent panel.
   ========================================================================= */

.the-wire-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 18px;                /* clears the ~14px legal-footer at bottom:0 */
    z-index: 9000;               /* above the Pixi map, below event overlays (~10000) */
    height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    overflow: hidden;            /* clips the crawling text at both edges */
    font-family: "Courier New", "Consolas", monospace;
    background: linear-gradient(180deg, #2a2218 0%, #161009 100%);
    border-top: 2px solid #6b5836;
    border-bottom: 2px solid #6b5836;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
    pointer-events: none;        /* ambient — never intercepts map clicks */
}

/* Fixed brass "THE WIRE" plate on the left — does not scroll. */
.the-wire-banner__plate {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: linear-gradient(180deg, #7a6336 0%, #4a3c22 100%);
    border-right: 2px solid #2c2415;
    color: #f6ecd0;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}
.the-wire-banner__plate::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #d4452f;         /* a small red signal bulb */
    box-shadow: 0 0 6px rgba(212, 69, 47, 0.9);
}

/* The scrolling lane — clips its child, the crawling text. */
.the-wire-banner__lane {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}

/* The crawling text. Starts fully off-screen right, ends fully off-screen
   left. translateX only — compositor-thread. theWire.js sets the animation
   duration inline (proportional to text length, for a constant speed) and
   removes the banner on animationend. */
.the-wire-banner__text {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-left: 100%;          /* begins just past the right edge */
    color: #f3e9d2;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    will-change: transform;
    transform: translateX(0);
}
.the-wire-banner__text--run {
    animation-name: theWireCrawl;
    animation-timing-function: linear;
    /* animation-iteration-count is set inline by theWire.js (CRAWL_LOOPS) so
       each message loops at least twice before the banner is removed. */
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

/* Divider between messages joined into one crawl — a dim brass pipe. */
.the-wire-banner__sep {
    color: #8a7240;
    font-weight: 400;
}

@keyframes theWireCrawl {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Mobile: smaller text, same full-width crawl. */
/* mgmt #92: phone-only the-wire-banner reflow removed (desktop-only client). */