* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
    background: #0a0a0a;
    overflow: hidden;
    color: #ffffff;
}

#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: #111111;
    border-bottom: 1px solid #2a2a2a;
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    align-items: stretch;
    z-index: 10001;
    transition: all 0.3s ease;
}

/* Hide top bar when game interface is not fully faded in (during transition overlay) */
.game-interface:not(.fade-in) #top-bar {
    opacity: 0;
    pointer-events: none;
}

/* Blur top bar when in waiting/chat mode only - not during actual gameplay */
body.beer-hall-active #top-bar {
    backdrop-filter: blur(4px);
    opacity: 0.7;
    /* Removed pointer-events: none to allow top bar clicks during gameplay */
}

/* Ready check modal should allow top bar access since players might need it */

/* CARENS extreme value static glow effect (animation removed for performance) */
.carens-extreme-pulse {
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    filter: brightness(1.15);
}

/* Attractiveness emigration warning (animation removed for performance) */
.attractiveness-warning-pulse {
    box-shadow: 0 0 6px #FF6B6B, 0 0 10px #FF6B6B;
    filter: brightness(1.1);
}

/* Attractiveness reveal animation - appears with flourish at 100 residents */
.attractiveness-reveal {
    animation: attractiveness-reveal 2s ease-out forwards;
}

@keyframes attractiveness-reveal {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
        box-shadow: 0 0 0px #4A9EFF;
    }
    50% {
        opacity: 1;
        transform: translateY(0) scale(1.05);
        box-shadow: 0 0 15px #4A9EFF, 0 0 25px #4A9EFF;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0px #4A9EFF;
    }
}

.top-bar-left {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

.top-bar-center {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.top-bar-right {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    width: 300px;
}

.top-bar-section {
    position: relative;
    border-right: 1px solid #2a2a2a;
    display: flex;
    align-items: stretch;
}

.top-bar-btn {
    height: 100%;
    padding: 0 20px;
    background: transparent;
    border: none;
    color: #888888;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.top-bar-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    right: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
    transition: all 0.3s ease;
}

.top-bar-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
    transform: translateY(-0.5px);
}

.top-bar-btn:hover::before {
    left: 100%;
    right: -100%;
}

.top-bar-btn:active {
    transform: translateY(0);
    transition: all 0.1s ease;
}

.top-bar-btn.city-name {
    color: #ffffff;
}

/* Commonwealth Score Styling */
.commonwealth-score {
    height: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 300px;
}

.commonwealth-score:hover {
    background: #2a2a2a;
}

.score-label {
    color: #888888;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.score-value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    min-width: 35px;
    text-align: center;
}

.score-rank {
    color: #ffa500;
    font-size: 12px;
    font-weight: 500;
    min-width: 25px;
}

/* Leaderboard Modal Styling */
.leaderboard-content {
    max-width: 800px;
    width: 90%;
}

.leaderboard-table {
    margin-bottom: 20px;
}

.leaderboard-header {
    display: grid;
    flex-direction: row;
    justify-content: space-between;
    grid-template-columns: 90px .9fr 90px 180px 90px;
    gap: 15px;
    padding: 18px 20px;
    background: #1a1a1a;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
}

.leaderboard-rows {
    background: #0f0f0f;
    overflow: hidden;
}

.leaderboard-row {
    display: grid;
    flex-direction: row;
    justify-content: space-between;
    grid-template-columns: 90px .9fr 90px 180px 90px;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.leaderboard-row.current-player {
    background: rgba(255, 255, 255, 0.1);
}

.lb-rank {
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
}

.lb-player {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
}

.lb-wealth {
    color: #fff;
    text-align: right;
    font-size: 16px;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 400;
}

.lb-lvt {
    color: #fff;
    text-align: right;
    font-size: 16px;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 400;
}

.lb-score {
    color: #fff;
    text-align: right;
    font-weight: 500;
    font-size: 16px;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
}

/* Rank-specific colors - gold gradient */
.leaderboard-row:nth-child(1) .lb-rank {
    color: #FFD700; /* Pure gold for 1st */
}

.leaderboard-row:nth-child(2) .lb-rank {
    color: #DEB887; /* Softer gold for 2nd */
}

.leaderboard-row:nth-child(3) .lb-rank {
    color: #BDB76B; /* Even softer for 3rd */
}

.leaderboard-row:nth-child(n+4) .lb-rank {
    color: #fff; /* White for all others */
}

.victory-info {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.victory-info p {
    margin: 8px 0;
    color: #ccc;
    font-size: 15px;
    font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 400;
}

.victory-info strong {
    color: #fff;
    font-weight: 500;
}

.top-bar-info {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 2px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #666666;
    padding-left: 20px;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.date-value {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.finances-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Ensure finances-row items remain horizontal */
.finances-row .info-item,
.finances-row .finance-item {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 4px;
}

/* Setup Screen Updates for Multiplayer */
/* Note: .setup-form styles defined later in file (line ~4827) */

.setup-column-left,
.setup-column-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.game-mode-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.game-mode-section h3 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    text-align: center;
}

.setup-mode-btn {
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.setup-mode-btn:hover {
    background: linear-gradient(145deg, #202020, #151515);
    border-color: #52C77E;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(82, 199, 126, 0.2);
}

.mode-icon {
    font-size: 32px;
    display: block;
}

.mode-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    display: block;
}

.mode-description {
    color: #888888;
    font-size: 12px;
    line-height: 1.4;
    display: block;
}

.solo-btn:hover {
    border-color: #4CAF50;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
}

.multiplayer-btn:hover {
    border-color: #2196F3;
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3);
}

.multiplayer-note {
    margin-top: auto;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.multiplayer-note p {
    color: #999999;
    font-size: 12px;
    line-height: 1.4;
    margin: 0 0 8px 0;
    text-align: center;
}

.multiplayer-note p:last-child {
    margin-bottom: 0;
}

.future-note {
    color: #666666 !important;
    font-style: italic;
}

/* Make setup preview more prominent */
.setup-preview {
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
}

.preview-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.preview-tile {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 28px;
    background: var(--player-color, #2196F3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.preview-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preview-name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

.preview-subtitle {
    color: #888888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .setup-form {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .setup-column-right {
        border-top: 1px solid #333333;
        padding-top: 24px;
    }
}


.finance-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.zoom-controls {
    display: flex;
    gap: 4px;
    padding: 6px 6px;
}

.zoom-btn {
    width: 28px;
    height: 28px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    user-select: none;
}

.zoom-btn:hover {
    background: #2a2a2a;
    border-color: #ffffff;
}

.zoom-btn:active {
    background: #333333;
}

.zoom-btn:disabled {
    background: #111111;
    border-color: #1a1a1a;
    color: #444444;
    cursor: not-allowed;
}

.zoom-btn:disabled:hover {
    background: #111111;
    border-color: #1a1a1a;
}


.indicator {
    font-size: 16px;
    font-family: "SF Pro Display", "Inter", "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    opacity: 0.5;
    transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
    transform-origin: center;
    display: inline-block;
}

.collapsible.collapsed .indicator {
    transform: rotate(90deg) scale(1.2);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #181818;
    border: 1px solid #2a2a2a;
    border-top: none;
    min-width: 200px;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dropdown-menu.active {
    display: block;
}

.dropdown-item {
    width: 100%;
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #888888;
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid #1a1a1a;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: #222222;
    color: #ffffff;
}

.dropdown-divider {
    height: 1px;
    background: #2a2a2a;
    margin: 8px 0;
}

.layer-option.active {
    background: #0066cc;
    color: #ffffff;
}

.layer-option.active:hover {
    background: #0080ff;
}

/* Enhanced Modal System */

/* Legacy parcel selector system removed - now using parcel-hover.js */

.modal-body {
    padding: 20px;
}



.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-top: 1px solid #2a2a2a;
}

.cost-summary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-label {
    color: #888888;
    font-size: 12px;
}

.cost-value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
}

.btn-primary {
    background: linear-gradient(135deg, #0066cc, #0080ff);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:disabled {
    background: #333333;
    color: #666666;
    cursor: not-allowed;
}

#game-container {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

#main-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0f0f;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/* Game Canvas Loading Animation */
#gameCanvas {
    opacity: 1;
    transform: scale(0.98);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

#gameCanvas {
    opacity: 1;
    transform: scale(1);
}

#main-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}



.sidebar-section {
    border-bottom: 1px solid #1a1a1a;
}

/* Action Manager Styles */
.action-manager {
    background: #0a0a0a;
    border-bottom: 2px solid #2a2a2a;
}

.action-manager .section-header {
    background: #141414;
    color: #42B96E;
    font-weight: 600;
}

.action-manager-content {
    padding: 15px 20px;
}

.action-stats {
    margin-bottom: 15px;
}

.action-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

.action-label {
    color: #888;
    font-weight: 500;
}

.action-value {
    color: #ececec;
    font-weight: 600;
}

.action-value.countdown {
    color: #FFD700;
    font-family: 'Courier New', monospace;
}



.control-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}

.control-group label {
    font-size: 10px;
    color: #ccc;
    min-width: 60px;
    flex-shrink: 0;
}

.control-group input[type="range"] {
    flex: 1;
    margin: 0;
    background: #333;
    border-radius: 3px;
    height: 4px;
    outline: none;
    -webkit-appearance: none;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
}

.control-group input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
    border: none;
}

.control-group span {
    font-size: 10px;
    color: #4CAF50;
    min-width: 30px;
    text-align: right;
    flex-shrink: 0;
}

.control-actions {
    margin-top: 10px;
    text-align: center;
}

.control-actions .secondary-btn {
    font-size: 10px;
    padding: 4px 8px;
}

.action-btn {
    width: 100%;
    padding: 10px 0px;
    background: #161616;
    color: white;
    border: 1px solid #ffffff9e;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #0a0a0a;
    transform: translate(-1px, 1px);
    border: 1px solid white;
}

.action-btn:active {
    transform: translateY(0);
}

/* Base Modal Styles */
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease, visibility 0.14s ease;
}

.modal.visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    margin: 50px auto;
    transform: scale(0.95);
    transition: transform 0.14s ease;
}

.modal.visible .modal-content {
    transform: scale(1);
    width: 800px;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    color: #ececec;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
}

.modal-close:hover {
    color: #ececec;
}

/* Core Needs Modal Styles */
.core-needs-content {
    width: 600px;
    max-width: 90vw;
}

.global-multiplier-display {
    text-align: center;
    padding: 24px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 8px;
    margin-bottom: 24px;
}

.multiplier-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.multiplier-big {
    font-size: 48px;
    font-weight: 700;
    color: #4A90E2;
    margin-bottom: 8px;
}

.multiplier-description {
    font-size: 13px;
    color: #aaa;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
}

.core-needs-breakdown {
    margin-bottom: 24px;
}

.breakdown-header,
.bottleneck-header,
.recommendations-header {
    font-size: 14px;
    font-weight: 600;
    color: #ececec;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #2a2a2a;
}

.core-needs-bar-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #111111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: background 0.2s ease;
}

.core-needs-bar-item:hover {
    background: #161616;
}

.core-needs-bar-item.bottleneck {
    border-color: #E74C3C;
    background: rgba(231, 76, 60, 0.1);
}

.need-name {
    width: 120px;
    font-size: 12px;
    font-weight: 600;
    color: #ececec;
    text-transform: uppercase;
}

.need-bar-container {
    flex: 1;
    height: 24px;
    background: #0a0a0a;
    border-radius: 4px;
    position: relative;
    margin: 0 12px;
    overflow: hidden;
}

.need-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.need-stats {
    min-width: 140px;
    text-align: right;
    font-size: 11px;
    color: #888;
}

.need-multiplier {
    font-size: 13px;
    font-weight: 700;
    margin-left: 8px;
}

.bottleneck-section {
    padding: 16px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 6px;
    margin-bottom: 24px;
}

.bottleneck-content {
    font-size: 13px;
    color: #ddd;
    line-height: 1.6;
}

.recommendations-section {
    padding: 16px;
    background: rgba(74, 144, 226, 0.05);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 6px;
}

.recommendation-item {
    padding: 12px;
    background: #111111;
    border-left: 3px solid #4A90E2;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #ddd;
    line-height: 1.5;
}

.recommendation-item:last-child {
    margin-bottom: 0;
}

/* Route Configuration Modal Styles */
.route-config {
    max-width: 700px;
    background: #0a0a0a;
}

.route-config .modal-header h2 {
    font-size: 20px;
    color: #ececec;
}

.route-info-section, .pricing-section, .service-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #111111;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
}

.route-info-section h3, .pricing-section h3, .service-section h3 {
    color: #66BB6A;
    font-size: 16px;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    color: #cccccc;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-control {
    width: 200px;
    padding: 8px 12px;
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 4px;
    color: #ececec;
    font-size: 14px;
    box-sizing: border-box;
    display: inline-block;
}

.form-control:focus {
    outline: none;
    border-color: #66BB6A;
}

.route-stats {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.route-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.route-stats .stat-label {
    color: #888888;
    font-size: 14px;
}

.route-stats .stat-value {
    color: #ececec;
    font-weight: 600;
    font-size: 14px;
}

.revenue-projections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.projection-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #1a1a1a;
    border-radius: 4px;
}

.projection-item.profit {
    border: 1px solid #66BB6A;
    background: rgba(102, 187, 106, 0.1);
}

.proj-label {
    color: #cccccc;
    font-size: 14px;
}

.proj-value {
    color: #ececec;
    font-weight: 600;
    font-size: 14px;
}

.projection-item.profit .proj-value {
    color: #66BB6A;
}

.route-config .btn-secondary {
    background: #333333;
    border: 1px solid #555555;
    color: #ececec;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 10px;
}

.route-config .btn-secondary:hover {
    background: #444444;
}

.service-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-option {
    display: block;
    padding: 12px;
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.radio-option:hover {
    border-color: #66BB6A;
    background: rgba(102, 187, 106, 0.05);
}

.radio-option input[type="radio"]:checked ~ .radio-label {
    color: #66BB6A;
}

.radio-option input[type="radio"] {
    margin-right: 10px;
    accent-color: #66BB6A;
}

.radio-label {
    color: #ececec;
    font-weight: 500;
    font-size: 14px;
    display: block;
}

.radio-desc {
    color: #888888;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
    display: block;
}

.route-config .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-top: 1px solid #2a2a2a;
    background: #111111;
}

.footer-summary {
    color: #cccccc;
    font-size: 14px;
}

.footer-summary strong {
    color: #66BB6A;
}

.footer-buttons {
    display: flex;
    gap: 10px;
}

.route-config .btn-primary {
    background: #66BB6A;
    border: none;
    color: #000000;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.route-config .btn-primary:hover {
    background: #5aa85a;
}

/* Action Marketplace Modal Styles */
.action-marketplace {
    max-width: 900px;
    min-width: 700px;
    background: linear-gradient(145deg, #111111, #0a0a0a);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9) translateY(30px);
    transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.visible .action-marketplace {
    transform: scale(1) translateY(0);
}

.action-marketplace .modal-header {
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border-bottom: 1px solid #2a2a2a;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-marketplace .modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.action-marketplace .marketplace-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.marketplace-tabs .tab-btn {
    padding: 12px 24px;
    background: transparent;
    color: #888;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.marketplace-tabs .tab-btn:hover {
    color: #aaa;
    background: rgba(255, 255, 255, 0.05);
}

.marketplace-tabs .tab-btn.active {
    color: #42B96E;
    background: rgba(66, 185, 110, 0.15);
    box-shadow: 0 2px 8px rgba(66, 185, 110, 0.2);
}

.marketplace-tabs .tab-btn.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(66, 185, 110, 0.1) 0%, rgba(66, 185, 110, 0.05) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.action-balance {
    background: linear-gradient(145deg, #1a1a1a, #141414);
    border: 1px solid #2a2a2a;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.balance-display {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 15px 0;
}

.balance-number {
    font-size: 48px;
    font-weight: 700;
    color: #42B96E;
    text-shadow: 0 2px 8px rgba(66, 185, 110, 0.3);
    background: linear-gradient(135deg, #42B96E, #52C77E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.balance-label {
    font-size: 18px;
    color: #888;
}

.action-marketplace .btn-primary {
    background: linear-gradient(135deg, #42B96E, #52C77E);
    box-shadow: 0 4px 12px rgba(66, 185, 110, 0.3);
}

.action-marketplace .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(66, 185, 110, 0.4);
}

.action-marketplace .btn-primary:active {
    box-shadow: 0 2px 8px rgba(66, 185, 110, 0.3);
}

.action-marketplace .sell-form {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 16px;
    align-items: flex-end;
}

.action-marketplace .sell-form input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-marketplace .sell-form input:focus {
    outline: none;
    border-color: #42B96E;
    box-shadow: 0 0 0 3px rgba(66, 185, 110, 0.1);
}

.action-marketplace .sell-form input::placeholder {
    color: #666;
}

.action-marketplace .market-stats {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: #888;
}

.action-marketplace .market-stats span {
    font-weight: 500;
}

.balance-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.balance-info p {
    margin: 0;
    color: #888;
    font-size: 14px;
}

.rollover-text {
    color: #42B96E !important;
    font-size: 12px !important;
    margin-top: 10px !important;
    text-align: left;
}

.sell-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.sell-form input {
    flex: 1;
    padding: 10px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #ececec;
    border-radius: 4px;
}

.sell-form .btn-primary {
    padding: 10px 20px;
    background: linear-gradient(135deg, #42B96E 0%, #2E8B57 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.marketplace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.market-stats {
    display: flex;
    gap: 20px;
    color: #888;
}

.market-stats span {
    font-size: 14px;
}

.tab-content {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    height: 400px;
    max-height: 400px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.tab-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.action-marketplace .modal-body {
    position: relative;
    min-height: 400px;
}

.listings-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-listing {
    background: linear-gradient(145deg, #1a1a1a, #141414);
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.action-listing:hover {
    border-color: #3a3a3a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.action-listing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.listing-info {
    flex: 1;
}

.listing-seller {
    color: #888;
    font-size: 12px;
}

.listing-quantity {
    font-size: 24px;
    font-weight: bold;
    color: #ececec;
    margin: 5px 0;
}

.listing-prices {
    display: flex;
    gap: 20px;
    margin-top: 5px;
}

.listing-reserve {
    color: #FFD700;
}

.listing-buynow {
    color: #42B96E;
}

.listing-actions {
    display: flex;
    gap: 10px;
}

.listing-actions button {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}


.btn-buynow {
    background: linear-gradient(135deg, #42B96E 0%, #2E8B57 100%);
    color: white;
}

.btn-cancel {
    background: #444;
    color: #ccc;
    border: 1px solid #666;
}

.btn-end-now {
    background: linear-gradient(135deg, #FF6B35 0%, #E74C3C 100%);
    color: white;
    font-size: 12px;
}

.btn-reset-server {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    color: white;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-reset-server:hover {
    background: linear-gradient(135deg, #C0392B 0%, #A93226 100%);
    transform: translateY(-1px);
}


.listing-time {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

.listing-time.urgent {
    color: #FF6B35;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255, 107, 53, 0.5);
}

.listing-time.expired {
    color: #E74C3C;
    font-weight: 600;
}

.reserve-countdown {
    font-size: 10px;
    color: #888;
    font-style: italic;
}

.reserve-countdown.urgent {
    color: #FF6B35;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255, 107, 53, 0.5);
}

.section-header {
    padding: 10px 20px;
    font-size: 12px!important;
    font-weight: 500;
    letter-spacing: 1px;
    color: #ececec;
    background: #161616;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.section-header:hover {
    background: #1a1a1a;
}

.collapse-icon {
    font-size: 20px;
    opacity: 0.5;
    transition: transform 0.3s ease;
    display: inline-block;
}

.collapse-icon {
    display: inline-block;
    transition: all 0.3s cubic-bezier(.34, 1.56, .64, 1);
    transform-origin: center;
}

.collapse-icon::after {
    content: '+';
    font-size: 16px;
    font-family: "SF Pro Display", "Inter", "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    display: inline-block;
    transform-origin: center;
    transition: all 0.3s cubic-bezier(.34, 1.56, .64, 1);
}

.collapsible.collapsed .collapse-icon::after {
    content: '−';
    transform: scale(1.2);
}

.section-content {
    overflow: hidden;
    max-height: 800px; /* Large enough for any content */
    opacity: 1;
    transition: max-height 0.3s ease,
                opacity 0.3s ease,
                padding 0.3s ease,
                transform 0.3s ease;
    transform: translateY(0);
}

.collapsible.collapsed .section-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-10px);
}

/* Ensure vitality section is properly hidden when collapsed */
.collapsible.collapsed #vitality {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}


#info {
    padding: 0px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    border-bottom: 1px solid #1a1a1a;
}

.metric-row:last-child {
    border-bottom: none;
}

.metric-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #666666;
}

.metric-value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.metric-value.warning {
    color: #ffc107;
    text-shadow: 0 0 4px rgba(255, 193, 7, 0.5);
}

.metric-value.critical-warning {
    color: #dc3545;
    text-shadow: 0 0 8px rgba(220, 53, 69, 0.8);
    font-weight: 700;
}

.metric-value.excellent {
    color: #28a745;
    text-shadow: 0 0 4px rgba(40, 167, 69, 0.5);
}

/* City Treasury - Golden yellow for both label and value */
#treasury-row {
    background: transparent;
    border: none;
    box-shadow: none;
}

#treasury-row .metric-label,
#treasury-row .metric-value {
    color: #DAA520;
}

/* Residents - Keep white */
#residents-row .metric-value {
    color: #ffffff;
}

@keyframes governance-highlight {
    0% {
        background-color: rgba(255, 235, 59, 0.3);
        box-shadow: 0 0 20px rgba(255, 235, 59, 0.4);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.governance-highlight-animation {
    animation: governance-highlight 5s ease-out;
}

#gameCanvas {
    max-width: 100%;
    max-height: 100%;
    cursor: crosshair;
    image-rendering: crisp-edges;
    display: block !important;
    margin: 0 auto !important;
    position: static !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}

/* Legacy tooltip CSS removed - using unified TooltipManager system */

#context-menu.context-menu {
    position: absolute;
    background: #111111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    z-index: 1001;
    display: none;
    /* Width set in tooltip-styles.css to match tooltip (280px) */
    flex-direction: column;
    font-family: 'SF Mono', Monaco, 'Roboto Mono', monospace;
    font-size: 16px;
    line-height: 1.4;
    padding: 12px;
}

.context-menu.visible {
    display: flex;
}

/* Context menu now uses tooltip system's standardized header classes */

/* Legacy context-status classes removed - using tooltip system's ownership badges */

.context-content {
    padding: 2px;
}

#context-menu .context-btn {
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 4px;
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #888888;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 3px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

#context-menu .context-btn:last-child {
    margin-bottom: 0;
}

#context-menu .context-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.02);
    transition: height 0.2s ease;
    z-index: -1;
}

#context-menu .context-btn:hover {
    background: #1a1a1a;
    border-color: #ffffff;
    color: #ffffff;
    transform: translateX(2px);
}

.context-btn:hover::before {
    height: 100%;
}

.context-btn:active {
    transform: translateX(0);
    transition: all 0.1s ease;
}

.context-btn.primary {
    border-color: #ffffff;
    color: #ffffff;
}

.context-btn.insights {
    background: #9C27B0;
    color: #ffffff;
    border: 1px solid #7B1FA2;
}

.context-btn.insights:hover {
    background: #AD42C4;
    border-color: #E1BEE7;
}

.build-menu {
    border-top: 1px solid #1a1a1a;
    margin-top: 8px;
    padding-top: 8px;
}

.build-menu-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.75px;
    color: #ffffff;
    margin-bottom: 8px;
    padding: 4px;
    text-align: center;
}

.category-btn {
    width: 100%;
    padding: 12px 4px;
    margin-bottom: 4px;
    background: transparent;
    border: none;
    color: #c5c5c5;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 4px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Removed category-btn .arrow styles - using simple → instead */

.building-submenu {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    width: 240px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    max-height: 500px;
    overflow-y: auto;
    pointer-events: none;
    padding: 6px;
}

.building-submenu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Open submenu to the left when near sidebar */
.building-submenu.open-left {
    left: auto;
    right: calc(100% + 8px);
}

.context-section {
    position: relative;
}

.category-container {
    position: relative;
    margin-bottom: 2px;
}

.category-btn {
    width: 100%;
}

.building-btn {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #888888;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    border-bottom: 1px solid #1a1a1a;
}

.building-btn:last-child {
    border-bottom: none;
}

.building-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.context-section {
    border-bottom: 1px solid #1a1a1a;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.context-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}



#vitality {
    padding: 20px;
}

.vitality-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.vitality-row:last-child {
    margin-bottom: 0;
}

.vitality-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    min-width: 110px;
    margin-right: 12px;
}

.vitality-label.energy { color: #fbbf24; }
.vitality-label.food { color: #10b981; }
.vitality-label.housing { color: #8b5cf6; }
.vitality-label.mobility { color: #06b6d4; }
.vitality-label.jobs { color: #f59e0b; }
.vitality-label.education { color: #3b82f6; }
.vitality-label.health { color: #ef4444; }
.vitality-label.safety { color: #6b7280; }
.vitality-label.culture { color: #ec4899; }
.vitality-label.environment { color: #22c55e; }
.vitality-label.affordability { color: #84cc16; }
.vitality-label.noise { color: #a855f7; }
.vitality-label.resilience { color: #14b8a6; }

.vitality-bar {
    flex: 1;
    height: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.vitality-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #444444;
    transform: translateX(-0.5px);
}

.vitality-progress {
    height: 100%;
    border-radius: 4px;
    transition: all 0.3s ease;
    /* background will be set by JavaScript */
}

/* JEEFHH Bar Styling - inherits the nice vitality bar design */
.jeefhh-bars-container,
.carens-bars-container {
    padding: 8px 12px;
}

.jeefhh-bar-row,
.carens-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.jeefhh-bar-row:last-child,
.carens-bar-row:last-child {
    margin-bottom: 0;
}

.jeefhh-label,
.carens-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    min-width: 110px;
    margin-right: 12px;
}

/* JEEFHH color scheme */
.jeefhh-label[data-metric="jobs"],
.jeefhh-bar-row[data-metric="jobs"] .jeefhh-label {
    color: #ec4899; /* Pink for jobs */
}

.jeefhh-label[data-metric="energy"],
.jeefhh-bar-row[data-metric="energy"] .jeefhh-label {
    color: #f59e0b; /* Orange for energy */
}

.jeefhh-label[data-metric="education"],
.jeefhh-bar-row[data-metric="education"] .jeefhh-label {
    color: #8b5cf6; /* Purple for education */
}

.jeefhh-label[data-metric="food"],
.jeefhh-bar-row[data-metric="food"] .jeefhh-label {
    color: #84cc16; /* Lime for food */
}

.jeefhh-label[data-metric="housing"],
.jeefhh-bar-row[data-metric="housing"] .jeefhh-label {
    color: #06b6d4; /* Cyan for housing */
}

.jeefhh-label[data-metric="healthcare"],
.jeefhh-bar-row[data-metric="healthcare"] .jeefhh-label {
    color: #ef4444; /* Red for healthcare */
}

/* CARENS color scheme */
.carens-label[data-metric="safety"],
.carens-bar-row[data-metric="safety"] .carens-label {
    color: #ef4444; /* Red for safety */
}

.carens-label[data-metric="culture"],
.carens-bar-row[data-metric="culture"] .carens-label {
    color: #a855f7; /* Purple for culture */
}

.carens-label[data-metric="affordability"],
.carens-bar-row[data-metric="affordability"] .carens-label {
    color: #f97316; /* Orange for affordability */
}

.carens-label[data-metric="resilience"],
.carens-bar-row[data-metric="resilience"] .carens-label {
    color: #14b8a6; /* Teal for resilience */
}

.carens-label[data-metric="environment"],
.carens-bar-row[data-metric="environment"] .carens-label {
    color: #22c55e; /* Green for environment */
}

.carens-label[data-metric="noise"],
.carens-bar-row[data-metric="noise"] .carens-label {
    color: #6b7280; /* Gray for noise */
}

.jeefhh-bar,
.carens-bar {
    flex: 1;
    height: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* Center line for balance visualization */
.jeefhh-bar::before,
.carens-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #444444;
    transform: translateX(-0.5px);
    z-index: 1;
}

.jeefhh-progress,
.carens-progress {
    height: 100%;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    /* background will be set by JavaScript for center-balanced display */
}

/* Balance indicator dot with pulsing animation */
.jeefhh-bar .balance-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4A90E2;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carens-bar .balance-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7 !important; /* Purple for CARENS neutral */
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 1 !important; /* Always visible for CARENS */
    transition: opacity 0.3s ease;
}

.jeefhh-bar.balanced .balance-dot {
    opacity: 1;
}

/* CARENS dot color changes based on state */
.carens-bar.positive .balance-dot {
    background: #4A90E2; /* Blue for positive trending toward optimal */
}

.carens-bar.negative .balance-dot {
    background: #ef4444; /* Red for negative values */
}

/* Streaming dots removed for performance - balanced state indicated by static dot at center */
.jeefhh-bar.balanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4A90E2;
    z-index: 2;
    box-shadow: 0 0 4px rgba(74, 144, 226, 0.6);
}

/* Enhanced progress bar styling for gradients */
.jeefhh-progress,
.carens-progress {
    height: 100%;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    /* Gradient backgrounds will be set by JavaScript */
}

/* Tooltip color classes for supply/demand numbers */
.tooltip-balanced { color: #4A90E2; }
.tooltip-surplus-light { color: #8B7FE5; }
.tooltip-surplus-heavy { color: #E74C3C; }
.tooltip-deficit-light { color: #8B7FE5; }
.tooltip-deficit-heavy { color: #E74C3C; }



.form-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #1a1a1a;
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h5 {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.form-row.two-col {
    grid-template-columns: 1fr 1fr;
}

.form-row.four-col {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.form-group small {
    display: block;
    font-size: 9px;
    color: #666666;
    margin-top: 4px;
    font-style: italic;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px 12px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    color: #ffffff;
    font-family: inherit;
    font-size: 11px;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #ffffff;
    background: #222222;
}

.impact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.impact-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.impact-row span {
    font-size: 9px;
    font-weight: 600;
    color: #666666;
    min-width: 80px;
    letter-spacing: 0.5px;
}

.impact-row input {
    width: 60px;
    padding: 4px 6px;
    margin: 0;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #1a1a1a;
}

.primary-btn,
.secondary-btn {
    padding: 10px 20px;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.primary-btn {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
}

.primary-btn:hover {
    background: #e0e0e0;
}

.secondary-btn {
    background: transparent;
    color: #888888;
}

.secondary-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #ffffff;
}

.building-images-container {
    margin-bottom: 12px;
}

.building-image-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 0px;
    padding: 12px;
    background: #1a1a1a;
    border-radius: 4px;
}

.building-image-row .form-group {
    margin-bottom: 0;
}

.remove-image-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    color: #888888;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.remove-image-btn:hover {
    background: #2a2a2a;
    color: #ff6b6b;
    border-color: #ff6b6b;
}


.image-preview {
    margin-top: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: #1a1a1a;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #2a2a2a;
    transition: all 0.2s;
}

.image-preview img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 4px;
    object-fit: cover;
}

.image-preview.has-image {
    border: 1px solid #2a2a2a;
    border-style: solid;
}

.image-preview .placeholder {
    font-size: 10px;
    color: #666666;
    text-align: center;
}

#sidebar {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    background: #111111;
    border-left: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    flex-shrink: 0;
}

.building-info-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100vh;
    background: #111111;
    border-left: 1px solid #2a2a2a;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow-y: auto;
    z-index: 200;
    font-family: 'SF Mono', Monaco, 'Roboto Mono', monospace;
}

.building-info-panel.visible {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    flex-direction: column;
}

.building-info-header {
    padding: 12px 16px;
    background: #0a0a0a;
    border-bottom: 1px solid #2a2a2a;
}

.building-info-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

#building-info-panel .building-info-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    gap: 20px;
}

#building-info-panel .building-description {
    padding: 14px 16px;
    background: #1a1a1a;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #cccccc;
    font-style: italic;
    border-left: 3px solid #4a90e2;
    flex-shrink: 0;
}

#building-info-panel .building-info-image {
    text-align: center;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    border-radius: 8px;
    flex-shrink: 0;
}

.building-info-image img {
    max-width: 90%;
    max-height: 100px;
    object-fit: contain;
}

.building-info-details {
    margin-bottom: 20px;
}

.building-info-details .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #1a1a1a;
}

.building-info-details .info-row:last-child {
    border-bottom: none;
}

#building-info-panel .building-info-details .info-label {
    font-size: 15px;
    font-weight: 500;
    color: #808080;
    letter-spacing: 0.5px;
}

#building-info-panel .building-info-details .info-value {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

#building-info-panel .building-impacts h4 {
    font-size: 16px;
    font-weight: 600;
    color: #4a90e2;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#building-info-panel #building-impacts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

#building-info-panel .building-supply-demand {
    border-bottom: 1px solid #222222;
    padding-bottom: 16px;
    flex: 0 0 auto;
}

#building-info-panel .building-impacts {
    flex: 1 1 auto;
    min-height: 0;
}

#building-info-panel .building-supply-demand .vitality-group-title,
#building-info-panel .building-impacts .vitality-group-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #888888;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

#building-info-panel .building-supply-demand .vitality-row,
#building-info-panel .building-impacts .vitality-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 28px;
}

#building-info-panel .building-supply-demand .vitality-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    min-width: 100px;
    margin-right: 16px;
    color: #808080;
}

#building-info-panel .building-supply-demand .info-value {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.building-supply-demand .vitality-progress {
    position: absolute;
    height: 100%;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#building-info-panel .building-impacts .vitality-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    min-width: 90px;
    margin-right: 12px;
    text-transform: uppercase;
    color: #808080;
}

.building-impacts .vitality-bar {
    flex: 1;
    height: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.building-impacts .vitality-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #444444;
    transform: translateX(-0.5px);
}

.building-impacts .vitality-progress {
    position: absolute;
    height: 100%;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.impact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #0a0a0a;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

#building-info-panel .impact-item .impact-label {
    color: #b8b8b8;
    text-transform: capitalize;
    font-size: 15px;
    font-weight: 500;
    z-index: 2;
    position: relative;
    letter-spacing: 0.3px;
}

.impact-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0.2;
    transition: width 0.3s ease;
}

.impact-bar.positive {
    background: linear-gradient(90deg, transparent, #4ade80);
}

.impact-bar.negative {
    background: linear-gradient(90deg, transparent, #f87171);
}

#building-info-panel .impact-item .impact-value {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.impact-item .impact-value.positive {
    color: #22c55e;
}

.impact-item .impact-value.negative {
    color: #ef4444;
}

/* Building Info Panel System Styles - Clean Data-Driven Approach */

/* Labels - ID selector provides sufficient specificity */
#building-info-panel .jeefhh-label,
#building-info-panel .carens-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 110px;
    margin-right: 12px;
}

/* JEEFHH label colors */
#building-info-panel .jeefhh-label[data-color="jobs"] { color: #ec4899; }
#building-info-panel .jeefhh-label[data-color="energy"] { color: #f59e0b; }
#building-info-panel .jeefhh-label[data-color="education"] { color: #8b5cf6; }
#building-info-panel .jeefhh-label[data-color="food"] { color: #84cc16; }
#building-info-panel .jeefhh-label[data-color="housing"] { color: #06b6d4; }
#building-info-panel .jeefhh-label[data-color="healthcare"] { color: #ef4444; }

/* CARENS label colors */
#building-info-panel .carens-label[data-domain="safety"] { color: #ef4444; }
#building-info-panel .carens-label[data-domain="culture"] { color: #a855f7; }
#building-info-panel .carens-label[data-domain="affordability"] { color: #f97316; }
#building-info-panel .carens-label[data-domain="resilience"] { color: #14b8a6; }
#building-info-panel .carens-label[data-domain="environment"] { color: #22c55e; }
#building-info-panel .carens-label[data-domain="noise"] { color: #6b7280; }

/* Rows */
#building-info-panel .jeefhh-bar-row,
#building-info-panel .carens-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    height: 28px;
    font-size: 14px;
}

/* Section titles - ID selector provides sufficient specificity */
#building-info-panel .vitality-group-title {
    font-size: 16px;
    font-weight: 600;
    color: #888888;
    letter-spacing: 1px;
    margin-bottom: 12px;
    text-transform: uppercase;
    display: block;
}

/* Progress bars with data attributes */
#building-info-panel .jeefhh-progress[data-state="balanced"] {
    position: absolute;
    left: 49%;
    width: 2%;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    border: 1px solid rgba(255,255,255,0.3);
}

#building-info-panel .jeefhh-progress[data-state="supply"] {
    position: absolute;
    left: 50%;
    height: 6px;
    border-radius: 0;
    background: linear-gradient(90deg, #3b82f6, #ef4444);
}

#building-info-panel .jeefhh-progress[data-state="demand"] {
    position: absolute;
    height: 6px;
    border-radius: 0;
    background: #ef4444;
}

#building-info-panel .carens-progress[data-state="neutral"] {
    position: absolute;
    left: 49%;
    width: 2%;
    height: 8px;
    border-radius: 50%;
    background: #8b5cf6;
    border: 1px solid rgba(255,255,255,0.3);
}

#building-info-panel .carens-progress[data-state="positive"] {
    position: absolute;
    left: 50%;
    height: 6px;
    border-radius: 0;
    background: #3b82f6;
}

#building-info-panel .carens-progress[data-state="negative"] {
    position: absolute;
    height: 6px;
    border-radius: 0;
    background: #ef4444;
}

/* Investment score */
#building-info-panel .investment-score-number {
    font-size: 24px;
    font-weight: bold;
}

#building-info-panel .investment-score-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

#building-info-panel .investment-score-circle[data-score-level="excellent"] .investment-score-number,
#building-info-panel .investment-score-circle[data-score-level="excellent"] .investment-score-label {
    color: #4CAF50;
}

#building-info-panel .investment-score-circle[data-score-level="excellent"] {
    border-color: #4CAF50;
}

#building-info-panel .investment-score-circle[data-score-level="good"] .investment-score-number,
#building-info-panel .investment-score-circle[data-score-level="good"] .investment-score-label {
    color: #8BC34A;
}

#building-info-panel .investment-score-circle[data-score-level="good"] {
    border-color: #8BC34A;
}

#building-info-panel .investment-score-circle[data-score-level="fair"] .investment-score-number,
#building-info-panel .investment-score-circle[data-score-level="fair"] .investment-score-label {
    color: #FFC107;
}

#building-info-panel .investment-score-circle[data-score-level="fair"] {
    border-color: #FFC107;
}

#building-info-panel .investment-score-circle[data-score-level="poor"] .investment-score-number,
#building-info-panel .investment-score-circle[data-score-level="poor"] .investment-score-label {
    color: #FF9800;
}

#building-info-panel .investment-score-circle[data-score-level="poor"] {
    border-color: #FF9800;
}

#building-info-panel .investment-score-circle[data-score-level="very-poor"] .investment-score-number,
#building-info-panel .investment-score-circle[data-score-level="very-poor"] .investment-score-label {
    color: #F44336;
}

#building-info-panel .investment-score-circle[data-score-level="very-poor"] {
    border-color: #F44336;
}

/* Metrics - ID selector provides sufficient specificity */
#building-info-panel .metric-label {
    font-size: 14px;
    color: #808080;
}

#building-info-panel .metric-value {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

/* Info values - ID selector provides sufficient specificity */
#building-info-panel .info-value {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

/* Cost container */
#building-info-panel .cost-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Style image visibility */
#building-info-img.visible {
    display: block;
}

#building-info-img:not(.visible) {
    display: none;
}

/* New classes for replaced inline styles */
.funding-indicator {
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.funding-indicator.funded {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.15);
}

.funding-indicator.partial {
    color: #FFA726;
    background: rgba(255, 167, 38, 0.15);
}

.no-impacts-message {
    color: #666666;
    font-size: 16px;
    text-align: center;
    padding: 20px;
}

.funding-amount {
    font-size: 16px;
    font-weight: 600;
}

.category-arrow {
    font-size: 18px;
    opacity: 0.7;
}

.building-price-info {
    font-size: 14px;
}

.impact-item .impact-value.neutral {
    color: #666666;
}

.building-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #888888;
    font-family: inherit;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 3px;
}

.filter-btn:hover {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #3a3a3a;
}

.filter-btn.active {
    background: #333333;
    color: #ffffff;
    border-color: #4a4a4a;
}

.building-list {
    margin-top: 16px;
}

.no-buildings {
    color: #666666;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.building-item {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.building-info h5 {
    margin: 0 0 4px 0;
    color: #ffffff;
    font-size: 11px;
}

.building-info p {
    margin: 0;
    color: #888888;
    font-size: 9px;
}

/* Investment Score Styles */
.investment-score-container {
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid #2a2a2a;
}

.investment-score-main {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.investment-score-circle {
    width: 60px;
    height: 60px;
    border: 2px solid;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.investment-score-number {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.investment-score-label {
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
}

.investment-score-breakdown {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.investment-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.investment-metric .metric-label {
    color: #808080;
    font-weight: 500;
}

.investment-metric .metric-value {
    color: #ffffff;
    font-weight: 600;
}

.building-actions {
    display: flex;
    gap: 8px;
}

.building-actions button {
    padding: 4px 8px;
    font-size: 9px;
    border-radius: 2px;
}

/* Cashflow Interface */
.finance-item.clickable {
    cursor: pointer;
    transition: background-color 0.2s;
}

.finance-item.clickable:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Cashflow Modal */
.cashflow-modal {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    background: rgba(0, 0, 0, 0);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
}

.cashflow-modal.visible {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0);
}

.cashflow-modal .modal-content {
    background: linear-gradient(145deg, #111111, #0a0a0a);
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    width: 90vw;
    max-width: 1200px;
    min-width: 900px;
    max-height: 85%;
    overflow: hidden;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9) translateY(30px);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow-y: clip;
}

.cashflow-modal.visible .modal-content {
    transform: scale(1) translateY(0);
}

.cashflow-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #2a2a2a;
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
}

.cashflow-modal .header-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cashflow-modal .header-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cashflow-modal .modal-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cashflow-modal .cashflow-summary-inline {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.cashflow-modal .cashflow-summary-inline .summary-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}

.cashflow-modal .cashflow-summary-inline .summary-value {
    font-size: 12px;
    font-weight: 600;
    color: #4CAF50;
}

.cashflow-modal .cashflow-summary-inline .summary-value.expense {
    color: #F44336;
}

.cashflow-modal .cashflow-summary-inline .summary-item.total .summary-value {
    color: #FFD700;
    font-weight: 700;
}

/* Player Tabs */
.cashflow-modal .player-tabs {
    display: flex;
    gap: 4px;
}

.cashflow-modal .player-tab {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cashflow-modal .player-tab:hover {
    border-color: #555;
    color: #ccc;
    background: rgba(255, 255, 255, 0.05);
}

.cashflow-modal .player-tab.active {
    background: #FFD700;
    border-color: #FFD700;
    color: #000;
    font-weight: 600;
}

.cashflow-modal .modal-body {
    padding: 0;
    overflow-y: auto;
    max-height: calc(85vh - 100px);
}

.cashflow-modal .close-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: all 0.2s;
}

.cashflow-modal .close-btn:hover {
    background-color: #f44336;
    color: white;
}

.cashflow-modal .cashflow-summary {
    display: flex;
    gap: 24px;
    align-items: center;
}

.cashflow-modal .summary-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.cashflow-modal .summary-item.total {
    grid-column: unset;
    background: none;
    border: none;
    font-weight: 700;
}

.cashflow-modal .summary-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.cashflow-modal .summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #4CAF50;
    white-space: nowrap;
}

.cashflow-modal .summary-value.expense {
    color: #F44336;
}

.cashflow-modal .summary-item.total .summary-value {
    font-size: 16px;
    color: #FFD700;
    font-weight: 700;
}

.summary-value {
    color: #4CAF50;
    font-weight: bold;
    font-size: 12px;
}

.summary-value.expense {
    color: #f44336;
}

.cashflow-table-container {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0;
}

.cashflow-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.cashflow-table th {
    background: #2a2a2a;
    color: #ccc;
    padding: 8px 6px;
    text-align: left;
    border-bottom: 1px solid #3a3a3a;
    position: sticky;
    top: 0;
    font-weight: bold;
    font-size: 10px;
}

.cashflow-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s;
}

.cashflow-table th.sortable:hover {
    background: #3a3a3a;
}

.cashflow-table th.sortable:after {
    content: '⇅';
    position: absolute;
    right: 4px;
    color: #666;
    font-size: 8px;
}

.cashflow-table th.sorted-asc:after {
    content: '▲';
    color: #4CAF50;
}

.cashflow-table th.sorted-desc:after {
    content: '⌄';
    color: #4CAF50;
}

.cashflow-table td {
    padding: 6px;
    border-bottom: 1px solid #2a2a2a;
    color: #ccc;
}

.cashflow-table tr:hover {
    background-color: #2a2a2a;
}

.cashflow-table .positive {
    color: #4CAF50;
    font-weight: bold;
}

.cashflow-table .negative {
    color: #f44336;
    font-weight: bold;
}

.cashflow-table .neutral {
    color: #ccc;
}


/* Vitality bar grouping */
.vitality-group {
    border-bottom: 1px solid #222222;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.vitality-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.vitality-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    color: #666666;
    letter-spacing: 1px;
    margin-bottom: 6px;
    padding-left: 20px;
}

/* Global Multiplier (Core Needs) in section header */
.section-header .global-multiplier {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
    font-weight: 600;
    margin-left: auto;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header .global-multiplier:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.multiplier-value {
    color: #4A90E2;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Enhanced Parcel Diagram */
.parcel-diagram-enhanced {
    display: grid;
    grid-template-areas:
        ". north ."
        "west center east"
        ". south .";
    grid-template-columns: 250px 200px 250px;
    grid-template-rows: auto auto auto;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

/* Parcel diagram needs no padding on modal body */
.parcel-diagram-enhanced .modal-body {
    padding: 0;
}

.parcel-diagram-enhanced .parcel-center {
    grid-area: center;
    position: static;
    transform: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    border: 2px solid #444444;
    border-radius: 8px;
}

.parcel-diagram-enhanced .land-value {
    font-size: 16px;
}

.parcel-diagram-enhanced .parcel-side {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    background: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 8px;
}

.parcel-side.north { grid-area: north; }
.parcel-side.east { grid-area: east; }
.parcel-side.south { grid-area: south; }
.parcel-side.west { grid-area: west; }

.parcel-diagram-enhanced .side-label {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-align: center;
    text-transform: uppercase;
}

/* Governance Modal */
.governance-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 10000;
    pointer-events: none;
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.governance-modal.visible {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}

.governance-modal .modal-content {
    background: linear-gradient(145deg, #111111, #0a0a0a);
    border: 1px solid #2a2a2a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: none;
    width: 90vw;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 40px;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(calc(-100% - 40px));
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    max-height: calc(100vh - 60px);
    overflow: visible;
}

.governance-modal.visible .modal-content {
    transform: translateY(0);
}

.governance-modal .modal-body {
    padding: 20px;
}

.governance-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(42, 42, 42, 0.4);
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.7), rgba(20, 20, 20, 0.8));
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.governance-modal .modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff, #cccccc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.governance-modal .close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(42, 42, 42, 0.6);
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.governance-modal .close-btn:hover {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 82, 82, 0.2);
}

.governance-info {
    display: flex;
    gap: 24px;
    align-items: center;
}

.voting-points, .lvt-rate {
    color: #999;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.voting-points:hover, .lvt-rate:hover {
    background: rgba(36, 36, 36, 0.9);
    border-color: rgba(147, 112, 219, 0.3);
    transform: translateY(-1px);
}

.voting-points span, .lvt-rate span {
    color: #DDA0DD;
    font-weight: 600;
    margin-left: 4px;
}

/* Action Marketplace Tray */
.action-marketplace-tray {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    pointer-events: none;
    transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-marketplace-tray.visible {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}

.action-marketplace-tray .tray-content {
    background: linear-gradient(145deg, #111111, #0a0a0a);
    border: 1px solid #2a2a2a;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: none;
    width: 90vw;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 40px;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(calc(-100% - 40px));
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.action-marketplace-tray.visible .tray-content {
    transform: translateY(0);
}

.action-marketplace-tray .tray-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(42, 42, 42, 0.4);
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.7), rgba(20, 20, 20, 0.8));
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.action-marketplace-tray .tray-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff, #cccccc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-marketplace-tray .header-stats {
    display: flex;
    gap: 20px;
    align-items: center;
}

.action-marketplace-tray .header-stat {
    color: #999;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 8px;
}

.action-marketplace-tray .header-stat span {
    color: #E8D4A0;
    font-weight: 600;
    margin-left: 4px;
}

.action-marketplace-tray .close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(42, 42, 42, 0.6);
    color: #888;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-marketplace-tray .close-btn:hover {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
    transform: scale(1.05);
}

.action-marketplace-tray .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
}

.action-marketplace-tray .stat-card {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-marketplace-tray .stat-label {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.action-marketplace-tray .stat-value {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.action-marketplace-tray .graph-container {
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    min-height: 300px;
}

.action-marketplace-tray .marketplace-tabs {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(42, 42, 42, 0.6);
}

.action-marketplace-tray .tab-btn {
    padding: 12px 24px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.action-marketplace-tray .tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.action-marketplace-tray .tab-btn.active {
    color: #E8D4A0;
    border-bottom-color: #E8D4A0;
}

.action-marketplace-tray .tab-content {
    display: none;
    padding: 20px;
}

.action-marketplace-tray .tab-content.active {
    display: block;
}

.action-marketplace-tray .listing-form {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.action-marketplace-tray .listing-form h4 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.action-marketplace-tray .form-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.action-marketplace-tray .form-row input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
}

.action-marketplace-tray .form-row input:focus {
    outline: none;
    border-color: #E8D4A0;
}

.action-marketplace-tray .btn-primary {
    padding: 8px 16px;
    background: #E8D4A0;
    color: #000;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.action-marketplace-tray .btn-primary:hover {
    background: #F0E0B0;
    transform: translateY(-1px);
}

.action-marketplace-tray .listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.action-marketplace-tray .listing-card {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid rgba(42, 42, 42, 0.6);
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s;
}

.action-marketplace-tray .listing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.action-marketplace-tray .empty-state {
    text-align: center;
    color: #666;
    padding: 40px;
    font-size: 14px;
}

/* Map Layer Legend */
.layer-legend {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid rgba(232, 212, 160, 0.3);
    border-radius: 8px;
    padding: 12px;
    min-width: 200px;
    max-width: 300px;
    z-index: 9998;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.legend-header {
    font-weight: 600;
    font-size: 14px;
    color: #E8D4A0;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(232, 212, 160, 0.2);
}

.legend-content {
    font-size: 13px;
    color: #DDD;
}

/* Ownership Layer Legend */
.legend-player-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-player-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.legend-player-item:hover {
    background: rgba(232, 212, 160, 0.1);
    transform: translateX(4px);
}

.legend-player-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.legend-player-name {
    flex: 1;
    font-size: 12px;
    color: #DDD;
}

.legend-player-score {
    font-size: 11px;
    color: #999;
    font-weight: 600;
}

/* Gradient Legend */
.legend-gradient {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-gradient-bar {
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.legend-gradient-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #999;
    margin-top: -4px;
}

.legend-gradient-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.legend-note {
    font-size: 11px;
    color: #777;
    font-style: italic;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Financial Overview Panel */
.financial-overview {
    background: linear-gradient(135deg, rgba(72, 61, 139, 0.06), rgba(75, 0, 130, 0.03));
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 10px;
    padding: 16px;
    margin: 16px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(147, 112, 219, 0.06);
    position: relative;
}

.financial-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 20px;
    align-items: center;
}

.financial-overview .metric-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.financial-overview .metric-label {
    color: #999;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.financial-overview .metric-value {
    color: #DAA520;
    font-size: 14px;
    font-weight: 500;
}

.lvt-adjuster .metric-label {
    margin-bottom: 4px;
}

.lvt-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lvt-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(42, 42, 42, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(147, 112, 219, 0.2);
    min-width: 60px;
}

.lvt-display .current-rate {
    color: #DAA520;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(218, 165, 32, 0.4);
}

.lvt-display .vote-points {
    color: #999;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.lvt-display .vote-points:not(:empty) {
    color: #DDA0DD;
}

.lvt-display .vote-points:not(:empty)::before {
    content: '(';
}

.lvt-display .vote-points:not(:empty)::after {
    content: ' pts)';
}

/* more info >> Button */
.more-info-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 4px;
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s ease;
    text-align: left;
}

.more-info-btn:hover {
    color: rgba(255, 255, 255, 1);
}

.more-info-btn:hover::after {
    content: '';
    display: inline-block;
    margin-left: 2px;
    animation: slideArrow 0.3s ease;
}

@keyframes slideArrow {
    0% { transform: translateX(0); }
    50% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

/* Category Details Slide-out Panel */
.category-details-panel {
    position: fixed; /* Fixed to viewport instead of absolute to modal */
    top: 40px; /* Below top bar */
    right: 0; /* Position at right edge */
    width: 400px;
    max-height: calc(100vh - 60px); /* Maximum height with bottom padding */
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.95), rgba(15, 15, 15, 0.98));
    border-left: 1px solid rgba(147, 112, 219, 0.3);
    border-bottom-right-radius: 12px;
    backdrop-filter: blur(8px);
    z-index: 9999; /* Below governance modal (10000) when closed */
    transform: translateX(400px); /* Start hidden off-screen to the RIGHT */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    overflow-y: auto;
    pointer-events: none;
    opacity: 0;
    display: flex;
    flex-direction: column;
}

.governance-modal.visible .category-details-panel {
    pointer-events: auto;
    /* Do NOT set opacity here - only when .open class is added */
}

.category-details-panel.open {
    transform: translateX(0); /* Slide into view from the RIGHT */
    opacity: 1; /* Only visible when open */
    z-index: 10000; /* Same level as governance modal when open, but appears on top due to DOM order */
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(147, 112, 219, 0.2);
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(25, 25, 25, 0.95));
}

.panel-header h4 {
    margin: 0;
    color: #DDA0DD;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(42, 42, 42, 0.6);
    color: #888;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.panel-close-btn:hover {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
    transform: scale(1.05);
}

.panel-content {
    padding: 20px;
}

.maintenance-note {
    background: rgba(218, 165, 32, 0.1);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    color: #DAA520;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

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

.building-item {
    background: rgba(42, 42, 42, 0.4);
    border: 1px solid rgba(147, 112, 219, 0.2);
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;
}

.building-item:hover {
    background: rgba(42, 42, 42, 0.6);
    border-color: rgba(147, 112, 219, 0.3);
}

.building-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.building-details {
    color: #aaa;
    font-size: 11px;
    line-height: 1.3;
}

.category-description {
    color: #ccc;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(42, 42, 42, 0.3);
    border-radius: 8px;
}

.maintenance-note.covered {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}

.maintenance-note.not-covered {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.3);
    color: #FF9800;
}

.buildings-section h5 {
    color: #DDA0DD;
    font-size: 12px;
    font-weight: 600;
    margin: 16px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.governance-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 16px 16px 16px;
}

.governance-section {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(20, 20, 20, 0.9));
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(10px);
    opacity: 0;
    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.governance-section:nth-child(1) { animation-delay: 0.1s; }
.governance-section:nth-child(2) { animation-delay: 0.2s; }
.governance-section:nth-child(3) { animation-delay: 0.3s; }

.governance-section:hover {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9), rgba(24, 24, 24, 0.95));
    border-color: rgba(147, 112, 219, 0.3);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(147, 112, 219, 0.1);
}

@keyframes slideInUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.governance-section h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, #ffffff, #cccccc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}

.governance-section h4::before {
    content: '⌄';
    font-size: 8px;
    opacity: 0.5;
    color: #4CAF50;
    transition: transform 0.3s ease;
    display: inline-block;
    margin-right: 6px;
}

.section-description {
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 500;
}


.budget-categories {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 0;
}

.budget-category {
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.8), rgba(8, 8, 8, 0.9));
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 10px;
    padding: 16px;
    backdrop-filter: blur(4px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.budget-category.special {
    border-color: rgba(218, 165, 32, 0.4);
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.08);
    background: linear-gradient(135deg, rgba(25, 25, 25, 0.9), rgba(18, 18, 18, 0.95));
}

/* Player allocation indicators - colored dots showing budget priorities */
.player-allocation-indicators {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    min-height: 16px;
    align-items: center;
    justify-content: center;
}

.player-allocation-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0);
}

.player-allocation-dot.visible {
    opacity: 1;
    transform: scale(1);
}

.player-allocation-dot.size-1 { width: 6px; height: 6px; }
.player-allocation-dot.size-2 { width: 8px; height: 8px; }
.player-allocation-dot.size-3 { width: 10px; height: 10px; }
.player-allocation-dot.size-4 { width: 12px; height: 12px; }
.player-allocation-dot.size-5 { width: 14px; height: 14px; }



/* LVT adjuster with player allocation */
.lvt-adjuster.player-allocated {
    border-color: rgba(147, 112, 219, 0.4);
    box-shadow: 
        0 0 20px rgba(147, 112, 219, 0.2),
        inset 0 0 30px rgba(147, 112, 219, 0.1);
}

.budget-category:hover {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(12, 12, 12, 0.95));
    border-color: rgba(147, 112, 219, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Budget Categories Grid - 5 columns */
.budget-categories {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 16px;
}

/* Compact Budget Category Design - Column Layout */
.budget-category-compact {
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.7), rgba(8, 8, 8, 0.8));
    border: 1px solid rgba(42, 42, 42, 0.5);
    border-radius: 8px;
    padding: 10px 12px;
    backdrop-filter: blur(3px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    text-align: center;
    min-height: 100px;
}

.budget-category-compact:hover {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.8), rgba(12, 12, 12, 0.9));
    border-color: rgba(147, 112, 219, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.budget-category-compact.special {
    border-color: rgba(218, 165, 32, 0.3);
    box-shadow: 0 0 15px rgba(218, 165, 32, 0.06);
}

.budget-category-compact .category-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    width: 100%;
}

.budget-category-compact .category-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.budget-category-compact .vote-count {
    color: #DAA520;
    font-size: 18px;
    font-weight: 700;
    min-width: 35px;
    text-align: center;
}

.budget-category-compact .category-funds {
    color: #88cc88;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
}

/* LVT Section Compact - 3 Column Layout */
.lvt-section-compact {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.8), rgba(8, 8, 8, 0.9));
    border: 1px solid rgba(42, 42, 42, 0.6);
    border-radius: 10px;
    margin-bottom: 20px;
}

.lvt-current-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(10, 10, 10, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(42, 42, 42, 0.4);
    text-align: center;
}

.lvt-point-allocator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(10, 10, 10, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(42, 42, 42, 0.4);
    text-align: center;
}

.lvt-amended-rate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: rgba(10, 10, 10, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(42, 42, 42, 0.4);
    text-align: center;
}

.lvt-label {
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lvt-rate-display {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

.lvt-effective-date {
    color: #888;
    font-size: 11px;
    font-style: italic;
    margin-top: 4px;
}

.lvt-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.lvt-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Header Updates */
.governance-info {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.treasury-info {
    color: #88cc88;
    font-size: 12px;
    font-weight: 500;
}

.section-helper {
    color: #888;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    margin-left: 8px;
}

/* Side Panel Stats */
.allocation-stats {
    background: rgba(10, 10, 10, 0.5);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label {
    color: #888;
    font-size: 12px;
    font-weight: 500;
}

.stat-value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.no-buildings {
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.category-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.category-allocation {
    color: #DAA520;
    font-size: 15px;
    font-weight: 700;
    background: rgba(218, 165, 32, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(218, 165, 32, 0.2);
}

.category-voting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.vote-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(51, 51, 51, 0.8);
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(20, 20, 20, 0.95));
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}

.vote-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.3), transparent);
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.vote-btn:hover {
    background: linear-gradient(135deg, rgba(36, 36, 36, 0.95), rgba(28, 28, 28, 1));
    border-color: rgba(147, 112, 219, 0.4);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(147, 112, 219, 0.2);
}

.vote-btn:hover::before {
    width: 40px;
    height: 40px;
}

.vote-btn:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.vote-btn:disabled:hover {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(20, 20, 20, 0.95));
    border-color: rgba(51, 51, 51, 0.8);
}

.vote-btn:disabled:hover::before {
    width: 0;
    height: 0;
}


.vote-btn.decrease:hover {
    background: linear-gradient(135deg, rgba(204, 0, 0, 0.9), rgba(170, 0, 0, 0.95));
    border-color: rgba(204, 0, 0, 0.8);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}

.vote-btn.decrease:hover::before {
    background: radial-gradient(circle, rgba(204, 0, 0, 0.4), transparent);
}

.vote-btn.increase:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(56, 142, 60, 0.95));
    border-color: rgba(76, 175, 80, 0.8);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.vote-btn.increase:hover::before {
    background: radial-gradient(circle, rgba(76, 175, 80, 0.4), transparent);
}

.vote-count {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
    background: rgba(42, 42, 42, 0.6);
    border-radius: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(147, 112, 219, 0.2);
    transition: all 0.2s ease;
}

.vote-count.changed {
    background: rgba(147, 112, 219, 0.2);
    border-color: rgba(147, 112, 219, 0.5);
    color: #DDA0DD;
    transform: scale(1.1);
}

.category-coffers {
    color: #999;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    background: rgba(10, 10, 10, 0.6);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(42, 42, 42, 0.4);
}

.category-coffers span {
    color: #DDA0DD;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(221, 160, 221, 0.3);
}

/* LVT Point Allocation Section */
/* Legacy LVT voting interface removed - now using new governance modal */
/* Game Setup Screen */
.setup-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* Fallback visible state */
}


.setup-content {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(82, 199, 126, 0.2);
    border-radius: 16px;
    padding: 60px 80px;
    max-width: 900px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 100px rgba(82, 199, 126, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    /* Fallback for unsupported browsers */
    transform: translateY(0); /* Fallback position */
}

.setup-content h2 {
    color: #ffffff;
    margin: 0 0 16px 0;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.02em;
    background: #52C77E;
    background: linear-gradient(135deg, #ffffff 0%, #52C77E 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback for unsupported browsers */
    color: #ffffff;
    opacity: 1; /* Fallback visible */
    transform: translateY(0); /* Fallback position */
}

.setup-content p {
    color: #cccccc;
    margin: 0 0 48px 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 1; /* Fallback visible */
    transform: translateY(0); /* Fallback position */
}


.setup-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
    align-items: start;
}

.setup-field {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setup-field label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.setup-field input {
    background: rgba(26, 26, 26, 0.6);
    border: 2px solid rgba(82, 199, 126, 0.2);
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    /* Fallback background for unsupported browsers */
}

.setup-field input:focus {
    outline: none;
    border-color: #52C77E;
    background: rgba(26, 26, 26, 0.8);
    box-shadow: 0 0 0 4px rgba(82, 199, 126, 0.1);
    transform: translateY(-2px);
}

.setup-field input::placeholder {
    color: #666666;
}

.color-picker,

.color-option {
    width: 33px;
    height: 33px;
    border-radius: 3px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.color-option::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.color-option:hover {
    transform: scale(1.15) rotate(5deg);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.color-option:hover::before {
    opacity: 1;
}

.color-option.selected {
    transform: scale(1.15);
}

.emoji-option {
    width: 64px;
    height: 64px;
    background: rgba(26, 26, 26, 0.6);
    border: 3px solid rgba(82, 199, 126, 0.2);
    border-radius: 16px;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    position: relative;
}

.emoji-option::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(82, 199, 126, 0.1) 0%, rgba(82, 199, 126, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.emoji-option:hover {
    background: rgba(82, 199, 126, 0.1);
    border-color: rgba(82, 199, 126, 0.4);
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 8px 25px rgba(82, 199, 126, 0.2);
}

.emoji-option:hover::before {
    opacity: 1;
}

.emoji-option.selected {
    border-color: #52C77E;
    background: rgba(82, 199, 126, 0.2);
    box-shadow: 
        0 0 0 4px rgba(82, 199, 126, 0.3),
        0 8px 25px rgba(82, 199, 126, 0.3);
    transform: scale(1.2);
}

.setup-preview {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px;
    background: rgba(26, 26, 26, 0.3);
    border: 2px solid rgba(82, 199, 126, 0.2);
    border-radius: 20px;
    margin-top: 32px;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
    opacity: 1; /* Fallback visible */
    transform: translateY(0); /* Fallback position */
}

.setup-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(82, 199, 126, 0.05) 0%, rgba(82, 199, 126, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.setup-preview:hover::before {
    opacity: 1;
}

.preview-container {
    display: flex;
    align-items: center;
    gap: 32px;
}

.preview-tile {
    width: 80px;
    height: 80px;
    background: #52C77E;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 4px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.preview-tile::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
    z-index: -1;
}

.preview-emoji {
    font-size: 36px;
    transform: rotate(-45deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.preview-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.preview-name {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.preview-subtitle {
    color: #888888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.setup-start-btn {
    background: linear-gradient(135deg, #52C77E 0%, #42B96E 100%);
    color: #ffffff;
    border: none;
    padding: 20px 40px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(82, 199, 126, 0.3);
}

.setup-start-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.setup-start-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 40px rgba(82, 199, 126, 0.4);
}

.setup-start-btn:hover::before {
    opacity: 1;
}

.setup-start-btn:active {
    transform: translateY(-1px) scale(1.02);
}

/* Player Menu Modal Styles */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    border-left: 3px solid #52C77E;
}

.stat-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-card .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    font-family: 'SF Mono', Monaco, monospace;
}

.stat-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* Save Game Modal Styles */
.save-game-content {
    max-width: 400px;
}

.save-info {
    margin: 16px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.save-details {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.save-details div {
    margin: 4px 0;
}

.save-actions {
    display: flex;
    gap: 12px;
    margin: 16px 0;
}

.save-note {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    text-align: center;
}

/* Wealth Leaderboard Styles */
.leaderboard-content {
    padding: 12px;
}

.leaderboard-list {
    margin-bottom: 8px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.leaderboard-item.player-item {
    border-left-color: #52C77E;
    background: rgba(82, 199, 126, 0.1);
}

.leaderboard-item.player-item:hover {
    background: rgba(82, 199, 126, 0.15);
}

.leaderboard-item .rank {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    min-width: 28px;
    text-align: left;
}

.leaderboard-item.player-item .rank {
    color: #52C77E;
}

.leaderboard-item .player-name {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-item.player-item .player-name {
    color: #ffffff;
    font-weight: 600;
}

.leaderboard-item .player-wealth {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'SF Mono', Monaco, monospace;
}

.leaderboard-item.player-item .player-wealth {
    color: #52C77E;
}

.leaderboard-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-note {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    text-align: center;
    display: block;
}

/* Insufficient Funds Visual Feedback */
.insufficient-funds-blink {
    animation: insufficientFundsBlink 0.5s ease-in-out 1;
}

.cash-blink {
    animation: cashBlink 0.5s ease-in-out 1;
}

@keyframes insufficientFundsBlink {
    0%, 100% { border-color: transparent; }
    50% { border-color: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
}

@keyframes cashBlink {
    0%, 100% { color: inherit; }
    50% { color: #ef4444; text-shadow: 0 0 4px rgba(239, 68, 68, 0.8); }
}

/* Magic Link Section */
.setup-multiplayer-section {
    margin: 32px 0;
}

.section-divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    opacity: 0.6;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.section-divider span {
    margin: 0 16px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.setup-magic-btn {
    background: linear-gradient(135deg, #4285F4 0%, #3367D6 100%);
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(66, 133, 244, 0.3);
    width: 100%;
    margin-bottom: 8px;
}

.setup-magic-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.setup-magic-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 32px rgba(66, 133, 244, 0.4);
}

.setup-magic-btn:hover::before {
    opacity: 1;
}

.setup-magic-btn:active {
    transform: translateY(-1px) scale(1.01);
}

.magic-link-help {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    text-align: center;
    font-style: italic;
}



/* Action Market Modal Redesign */
.action-marketplace .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #111;
    border-bottom: 1px solid #333;
}

.action-marketplace .modal-header h2 {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin: 0;
}

.action-availability {
    font-size: 13px;
    color: #888;
    margin-left: auto;
    margin-right: 16px;
}

.action-availability strong {
    color: #52C77E;
    font-weight: 600;
}

.marketplace-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #333;
    background: #0a0a0a;
}

.marketplace-tabs .tab-btn {
    flex: 1;
    padding: 12px 16px;
    background: #1a1a1a;
    border: none;
    border-radius: 0;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.marketplace-tabs .tab-btn:hover {
    background: #222;
    color: #999;
}

.marketplace-tabs .tab-btn.active {
    background: #fff;
    color: #000;
}

.sell-actions-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: rgba(0, 184, 148, 0.05);
    border-radius: 4px;
}

.sell-actions-row input {
    flex: 1;
    padding: 8px 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
}

.sell-actions-row button {
    padding: 8px 20px;
}

/* Remove action-balance styles */
.action-balance,
.action-balance-section {
    display: none !important;
}

/* Inline Style Replacements */
.quit-game-btn-danger {
    color: #ff4444;
    border-top: 1px solid #333;
    margin-top: 5px;
}

.hidden-element {
    display: none;
}

.game-title-main {
    font-size: 28px;
    color: #fff;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.game-subtitle {
    font-size: 14px;
    color: #888;
    margin: 0 0 24px 0;
    line-height: 1.4;
}


.sell-actions-section {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(0, 184, 148, 0.1);
    border-radius: 8px;
}

.sell-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sell-form input {
    padding: 8px;
}

/* Responsive Design for Setup Screen */

.form-field input::placeholder {
    color: #666666;
}

.form-field small {
    display: block;
    color: #666666;
    font-size: 11px;
    margin-top: 4px;
}

/* Legacy auth and profile system removed - authentication disabled */
/* State management classes */
.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.visible {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-direction: column;
}


/* Continue button styles */
.continue-btn {
    background: linear-gradient(135deg, #52C77E 0%, #4CAF50 100%);
    color: white;
    border: none;
    padding: 20px 32px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(82, 199, 126, 0.3);
}

.continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(82, 199, 126, 0.4);
}

.continue-icon {
    font-size: 24px;
}

.continue-title {
    font-size: 18px;
    font-weight: 600;
}

.continue-description {
    font-size: 14px;
    opacity: 0.9;
}

.setup-info {
    color: #ccc;
    font-size: 14px;
}

.setup-info p {
    margin: 8px 0;
    padding-left: 8px;
}

/* Lobby mode buttons */
.lobby-mode-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
}

.lobby-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #52C77E;
    transform: translateY(-2px);
}

.lobby-mode-btn.selected {
    background: rgba(82, 199, 126, 0.2);
    border-color: #52C77E;
}

.lobby-mode-btn .mode-icon {
    font-size: 32px;
    min-width: 40px;
}

.mode-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.lobby-mode-btn .mode-title {
    font-size: 18px;
    font-weight: 600;
}

.lobby-mode-btn .mode-description {
    font-size: 14px;
    opacity: 0.8;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .waiting-room-content {
        width: 95%;
        height: 90%;
        padding: 20px;
    }
    
    .waiting-room-body {
        flex-direction: column;
        gap: 20px;
    }
    
    .waiting-room-left, .waiting-room-right {
        flex: none;
    }
    
    .chat-messages {
        min-height: 200px;
    }
    
    .lobby-mode-btn .mode-icon {
        font-size: 24px;
    }
    
    .lobby-mode-btn .mode-title {
        font-size: 16px;
    }
}