.financial-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.financial-table th,
.financial-table td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid #eee;
}

.financial-table th {
    background: #f5f5f5;
    font-weight: 600;
}

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

html {
    /* Never scale above desktop; gently shrink for small screens */
    font-size: clamp(12px, 2.222vw, 16px);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #ffffff;
    color: #1a1a1a;
    padding: 1.25rem;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    position: relative;
}

.view {
    width: 100%;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Disable VC detail/back transitions when explicitly requested */
#main-view {
    transform: translateX(0);
}

body.vc-active #main-view {
    transition: none;
}

#detail-view {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
}

body.detail-active #main-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
}

body.detail-active #detail-view {
    position: relative;
    top: auto;
    left: auto;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

#vc-detail-view {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    z-index: 1002;
    background: #ffffff;
}

body.vc-active.vc-detail-active #vc-detail-view {
    position: relative;
    top: auto;
    left: auto;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

body.vc-active.vc-detail-active #main-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: none;
}

.header {
    text-align: center;
    margin-bottom: 10px;
}

.header-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    gap: 1.5rem;
}

.wojak-image {
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    background: #ffffff;
    border-radius: 0.75rem;
    border: none;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.wojak-image.is-malding {
    transform: scale(1.06);
}

.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}

.toast {
    position: relative;
    min-width: 240px;
    max-width: 476px;
    padding: 12px 32px 12px 14px;
    /* extra right padding for close button */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: #0f172a;
    background: #ffffff;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.hide {
    opacity: 0;
    transform: translateY(-8px);
}

.toast-info {
    border-color: #bfdbfe;
}

.toast-warn {
    border-color: #fca5a5;
    background: #fff7f7;
}

.toast-macro {
    border-color: #fca5a5;
    background: #fff1f2;
    font-size: 17px;
    line-height: 1.4;
    padding: 15px 34px 15px 16px;
}

.toast-macro-good {
    border-color: #86efac;
    background: #ecfdf3;
    font-size: 17px;
    line-height: 1.4;
    padding: 15px 34px 15px 16px;
}

.toast-macro-bad {
    border-color: #fca5a5;
    background: #fff1f2;
    font-size: 17px;
    line-height: 1.4;
    padding: 15px 34px 15px 16px;
}

.toast-macro-neutral {
    border-color: #93c5fd;
    background: #eff6ff;
    font-size: 17px;
    line-height: 1.4;
    padding: 15px 34px 15px 16px;
}

.toast-error {
    border-color: #fca5a5;
    background: #fff1f2;
}

.toast-success {
    border-color: #bbf7d0;
    background: #ecfdf3;
}

.toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
}

.toast-message {
    white-space: pre-wrap;
    line-height: 1.35;
}

.toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.toast-action-btn {
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-weight: 800;
    font-size: 12px;
    padding: 7px 10px;
    cursor: pointer;
}

.toast-action-btn.toast-action-primary {
    border-color: #16a34a;
    color: #16a34a;
}

.toast-action-btn.toast-action-secondary {
    border-color: #94a3b8;
    color: #475569;
}

.toast-action-btn.toast-action-danger {
    border-color: #fda4af;
    background: #ffffff;
    color: #e11d48;
}

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

.lead-avatar-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.maxwin-help-btn {
    margin-top: 16px;
    white-space: nowrap;
}

.maxwin-help-modal-panel {
    max-width: 52rem;
}

.maxwin-help-header {
    min-height: auto;
    margin-bottom: 14px;
}

.maxwin-help-body {
    max-height: 65vh;
    overflow: auto;
    padding-right: 8px;
}

.maxwin-help-body h3 {
    margin: 14px 0 6px;
    font-size: 18px;
    color: #0f172a;
}

.maxwin-help-body p {
    margin: 0;
    line-height: 1.5;
    color: #334155;
    font-size: 15px;
}

.lead-avatar-name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    line-height: 1.2;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lead-avatar-name:empty {
    display: none;
}

.lead-avatar-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.lead-avatar-label {
    display: inline-block;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-avatar-stack {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 220px;
    min-width: 220px;
    justify-self: start;
    align-self: flex-start;
}

.party-avatars {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    align-self: flex-end;
    flex-wrap: nowrap;
    max-width: none;
    justify-content: flex-start;
}

.party-avatar {
    width: 100px;
    min-height: 100px;
    border-radius: 10px;
    overflow: visible;
    background: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.party-avatar img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.party-avatar-name {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.party-avatar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.party-avatar-label {
    display: inline-block;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-content.many-players .party-avatar {
    width: 80px;
    min-height: 80px;
    border-radius: 8px;
}

.header-content.many-players .party-avatar-name {
    margin-top: 3px;
    font-size: 10px;
}

.header-content.many-players .party-avatar-dot {
    width: 8px;
    height: 8px;
}

.header-content.many-players .party-avatar-label {
    max-width: 64px;
}

.header-content.many-players .lead-avatar .wojak-image {
    width: 115px;
    height: 115px;
    border-radius: 10px;
}

.header-content.many-players .lead-avatar {
    gap: 6px;
}

.header-content.many-players .lead-avatar .lead-avatar-name {
    font-size: 13px;
    gap: 6px;
}

.header-content.many-players .lead-avatar .lead-avatar-dot {
    width: 10px;
    height: 10px;
}

.header-content.many-players .lead-avatar .lead-avatar-label {
    max-width: 96px;
}

.financial-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.header-controls {
    justify-self: end;
    align-self: start;
    margin-top: 26px;
    margin-right: -20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

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

#multiplayerBtn {
    font-size: 1rem;
    padding: 0.8125rem 1.625rem;
    font-weight: 500;
}

#multiplayerBtnContainer {
    position: relative;
    display: inline-block;
}

.mp-public-parties-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #3b82f6;
    color: #ffffff;
    font-weight: 800;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}

.drip-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    flex-shrink: 0;
}

body:not(.multiplayer-active) .drip-toggle {
    margin-left: 0.75rem;
}

.drip-label {
    font-size: 1rem;
    text-transform: none;
    color: #111;
    letter-spacing: 0;
}

.drip-toggle input[type="checkbox"] {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 0.125rem solid #097a32;
    border-radius: 0.25rem;
    background: #ffffff;
    position: relative;
    cursor: pointer;
}

.drip-toggle input[type="checkbox"]:checked {
    background: #097a32;
    border-color: #097a32;
}

.drip-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 0.3125rem;
    top: 0.0625rem;
    width: 0.25rem;
    height: 0.5625rem;
    border: solid #ffffff;
    border-width: 0 0.125rem 0.125rem 0;
    transform: rotate(45deg);
}

.net-worth {
    font-size: 3rem;
    font-weight: 600;
    color: #00c742;
    margin-bottom: 0.3125rem;
    letter-spacing: -1.5px;
}

.net-worth-wrap {
    position: relative;
    display: inline-block;
}

.net-worth-help-wrap {
    position: relative;
    display: inline-block;
    z-index: 40;
}

.net-worth-help-btn {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    flex: 0 0 20px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid rgba(17, 17, 17, 0.5);
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.net-worth-help-btn:hover {
    border-color: rgba(47, 128, 237, 0.9);
}

.net-worth-help-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.18);
}

.net-worth-help-popover {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: min(210px, 86vw);
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    padding: 16px;
    display: none;
    z-index: 50;
}

.net-worth-help-wrap:hover .net-worth-help-popover,
.net-worth-help-wrap:focus-within .net-worth-help-popover {
    display: block;
}

.net-worth-help-greeting {
    font-size: 13px;
    line-height: 1.45;
    color: #111;
    white-space: pre-wrap;
    text-align: left;
}

.net-worth-help-meta {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #111;
    text-align: left;
}

.net-worth-help-popover .feedback-btn {
    margin-top: 14px;
    width: auto;
    min-width: 180px;
    align-self: center;
    background: #16a34a !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.net-worth-help-popover .github-btn {
    margin-top: 10px;
    width: auto;
    min-width: 180px;
    align-self: center;
    background: #2f80ed !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.net-worth-help-popover .github-btn:hover {
    background: #2563eb !important;
}

.maxwin-career-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 16px;
}

.maxwin-career-actions button {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
}

.maxwin-path-cost {
    font-size: 13px;
    color: #b45309;
    font-weight: 600;
    margin: 6px 0 12px;
}

.maxwin-deal-conflict,
.portfolio-conflict-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.maxwin-deal-conflict {
    margin-top: 6px;
}

.portfolio-conflict-badge {
    margin-left: 8px;
}

.date {
    font-size: 1.125rem;
    color: #555;
    font-weight: 500;
}

.sub-financial-display {
    font-size: 0.875rem;
    color: #666;
    font-weight: 400;
    margin-top: 8px;
}

.macro-events-bar {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 10px auto 0;
    max-width: 800px;
}

.macro-events-bar.active {
    display: flex;
}

.macro-event-pill {
    background: #f97316;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
}

.chart-container {
    background: #fdfdfd;
    border-radius: 0.75rem;
    padding: 1.25rem;
    height: 25rem;
    position: relative;
    border: 1px solid #e8e8e8;
    margin-bottom: 1.25rem;
}

.controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
    width: 100%;
    max-width: 900px;
    /* Allow more width for groups */
    margin-left: auto;
    margin-right: auto;
}

.controls-group-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding-right: 0;
}

.controls-group-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding-left: 0;
}

/* Multiplayer Overrides */
body.multiplayer-active .controls {
    gap: 10px;
}

body.multiplayer-active .controls-group-left,
body.multiplayer-active .controls-group-right {
    flex: initial;
    padding: 0;
    justify-content: center;
}

button {
    padding: 0.625rem 1.25rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

button:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #aaa;
}

button:active:not(:disabled) {
    transform: scale(0.98);
}

button:disabled {
    cursor: not-allowed;
    background-color: #f9f9f9;
    color: #aaa;
}

button.speed-active {
    background: #00c742;
    color: white;
    border-color: #00a827;
}

.detail-actions-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.company-detail-controls {
    margin-top: 0;
    align-items: center;
}

.company-detail-controls .time-controls-row {
    justify-content: flex-end;
}

.company-detail-controls label {
    left: auto;
    right: 50%;
    transform: translateX(50%);
    /* Since we align right, we might need to adjust label centering relative to the slider group */
    /* Actually, the slider wrap is column flex, align-items center. So label is centered to the slider. */
    /* But if we align-items: flex-end on the wrapper, the label might shift. */
    /* Let's keep align-items: center on the wrapper, but align-self: flex-end on the container in the header. */
}

/* Hide detail controls in multiplayer */
body.multiplayer-active .company-detail-controls {
    display: none !important;
}

.speed-slider-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #1f2937;
    position: relative;
}

.speed-slider-wrap label {
    position: absolute;
    bottom: -1.0625rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9375rem;
    white-space: nowrap;
    pointer-events: none;
}

.time-controls-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.playback-controls {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    overflow: visible;
}

.playback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0.09375rem solid #097a32;
    background: transparent;
    color: #097a32;
    cursor: pointer;
    border-radius: 0.375rem;
    /* Rounded square */
}

.playback-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.playback-btn:hover {
    background-color: transparent !important;
    color: #097a32 !important;
    border-color: #097a32 !important;
}

.playback-btn:active {
    background-color: #dcfce7 !important;
}

.speed-slider-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    position: relative;
    min-width: 11.1875rem;
}

#speedSlider {
    width: 10.125rem;
    margin: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

#speedSlider::-webkit-slider-runnable-track {
    background: #f0fff4;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    height: 0.5rem;
}

#speedSlider::-moz-range-track {
    background: #f0fff4;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    height: 0.5rem;
}

#speedSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    /* ~5% smaller than previous WebKit size */
    height: 1rem;
    margin-top: -0.28125rem;
    /* centers thumb on 8px track */
    border-radius: 50%;
    background: #097a32;
    border: 0.125rem solid #097a32;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

#speedSlider::-moz-range-thumb {
    width: 0.7rem;
    /* ~2% larger than previous Firefox size */
    height: 0.7rem;
    border-radius: 50%;
    background: #097a32;
    border: 0.125rem solid #097a32;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

#speedThumbLabel {
    position: absolute;
    top: -1.125rem;
    left: 0;
    transform: translateX(-50%);
    font-size: 0.875rem;
    color: #0a7a32;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #speedThumbLabel {
        top: -1.375rem;
        /* raise label a bit more for WebKit browsers (Chrome/Edge/Safari) */
    }
}

button.speed-active:hover {
    background: #00a827;
}

.portfolio,
.companies-section {
    margin-top: 30px;
    width: 100%;
}

.portfolio-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.venture-market-section {
    margin-top: 30px;
    width: 100%;
}

.venture-market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.section-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 0;
}

.market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Changed to space-between */
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.market-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Space between the two dropdowns */
}

.sort-controls,
.filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-controls label,
.filter-controls label {
    font-weight: 500;
    color: #555;
}

.sort-controls select,
.filter-controls select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.sort-controls select:focus,
.filter-controls select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.companies-grid,
.portfolio-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
    gap: 0.9375rem;
}

.company-box,
.portfolio-item {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 0.9375rem;
    transition: all 0.2s ease;
    cursor: grab;
    position: relative;
}

.company-box,
.portfolio-item {
    cursor: pointer;
}

.company-box:hover,
.company-box.hovered,
.portfolio-item:hover {
    border-color: #999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: none;
}

.portfolio-item.bankrupt {
    border: 1px solid #ff9aa2;
    background: #fff1f1;
    opacity: 0.85;
}

.portfolio-bankrupt-label {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portfolio-sector {
    font-style: italic;
    color: #666;
    font-size: 12px;
    margin-top: 4px;
}

.portfolio-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.portfolio-meta-row .portfolio-sector {
    margin-top: 0;
}

.portfolio-return {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.portfolio-return.positive {
    color: #16a34a;
}

.portfolio-return.negative {
    color: #dc2626;
}

.portfolio-ipo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.portfolio-item {
    position: relative;
}

.companies-grid {
    pointer-events: auto;
}

.company-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

.company-ipo-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.company-rnd-flag {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #ec4899;
    background: rgba(236, 72, 153, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

.company-info,
.portfolio-info {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.portfolio-stake {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: #555;
}

.portfolio-stake-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.portfolio-stake-row .portfolio-stake {
    margin-top: 0;
}

.vc-quick-lead-btn {
    margin-top: 12px;
    width: 100%;
    font-size: 13px;
    padding: 6px 10px;
}

.vc-quick-lead-btn:disabled {
    background-color: #c9c9c9;
    border-color: #b5b5b5;
    color: #666;
    cursor: not-allowed;
}

.vc-empty-state {
    text-align: left;
    color: #4b5563;
    font-weight: 500;
    font-size: 18px;
    padding: 8px 0;
    white-space: nowrap;
}

.company-valuation,
.portfolio-value {
    color: #000;
    font-weight: 500;
}

.company-sector,
.portfolio-name,
.company-stage,
.company-status,
.company-note {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.company-status,
.company-sector {
    font-style: italic;
}

.company-note {
    color: #666;
    font-style: normal;
}

.companies-grid .company-box:not(.bankrupt).sector-tech.subsector-space-tech {
    background: #ddcffd;
    /* 1 – space technology */
    border-color: #ccb5fb;
}

.companies-grid .company-box:not(.bankrupt).sector-tech.subsector-aero-tech {
    background: #d0d0ff;
    /* 2 – aerospace technology */
    border-color: #b8b8ff;
}

.companies-grid .company-box:not(.bankrupt).sector-tech.subsector-material-tech {
    background: #c8d6ff;
    /* 3 – material technology */
    border-color: #acbff7;
}

.companies-grid .company-box:not(.bankrupt).sector-tech.subsector-hardware-tech {
    background: #ccd9ff;
    /* 4 – hardware technology */
    border-color: #b3c4f2;
}

.companies-grid .company-box:not(.bankrupt).sector-tech.subsector-web-tech {
    background: #d9e6ff;
    /* 5 – web technology */
    border-color: #bfd2f5;
}

.companies-grid .company-box:not(.bankrupt).sector-tech {
    background: #e6f3ff;
    /* 6 – technology */
    border-color: #cadff1;
}

.companies-grid .company-box:not(.bankrupt).sector-biotech {
    background: #fff0f6;
    border-color: #ffd6e8;
}

.companies-grid .company-box:not(.bankrupt).sector-banking {
    background: #fff7df;
    border-color: #f3d27a;
}

.companies-grid .company-box:not(.bankrupt).sector-retail,
.companies-grid .company-box:not(.bankrupt).sector-staples {
    background: #fff7ec;
    border-color: #ffecd5;
}

.companies-grid .company-box:not(.bankrupt).sector-airlines,
.companies-grid .company-box:not(.bankrupt).sector-aerospace,
.companies-grid .company-box:not(.bankrupt).sector-automotive,
.companies-grid .company-box:not(.bankrupt).sector-industrial {
    background: #f7f1e8;
    border-color: #e2ccb5;
}

.companies-grid .company-box:not(.bankrupt).sector-defense,
.companies-grid .company-box:not(.bankrupt).sector-energy {
    background: #f4f8f3;
    border-color: #d8ead6;
}

.companies-grid .company-box:not(.bankrupt).sector-manufacturing {
    background: #f7f1e8;
    border-color: #d9c0a3;
}

.companies-grid .company-box:not(.bankrupt).sector-realestate {
    background: #f6f3ff;
    border-color: #e3dbff;
}

.companies-grid .company-box:not(.bankrupt).sector-web {
    background: #f0f5ff;
    border-color: #d9e5ff;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-tech.subsector-space-tech {
    background: #ddcffd;
    border-color: #ccb5fb;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-tech.subsector-aero-tech {
    background: #d0d0ff;
    border-color: #b8b8ff;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-tech.subsector-material-tech {
    background: #c8d6ff;
    border-color: #acbff7;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-tech.subsector-hardware-tech {
    background: #ccd9ff;
    border-color: #b3c4f2;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-tech.subsector-web-tech {
    background: #d9e6ff;
    border-color: #bfd2f5;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-tech {
    background: #e6f3ff;
    border-color: #cadff1;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-biotech {
    background: #fff0f6;
    border-color: #ffd6e8;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-banking {
    background: #fff7df;
    border-color: #f3d27a;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-retail,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-staples {
    background: #fff7ec;
    border-color: #ffe7c7;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-airlines,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-aerospace,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-automotive,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-industrial {
    background: #f7f1e8;
    border-color: #d9c0a3;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-defense,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-energy {
    background: #f4f8f3;
    border-color: #d8ead6;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-manufacturing {
    background: #f7f1e8;
    border-color: #d9c0a3;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-realestate {
    background: #f6f3ff;
    border-color: #e3dbff;
}

#ventureCompaniesGrid .company-box:not(.bankrupt).sector-web {
    background: #f0f5ff;
    border-color: #d9e5ff;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-tech.subsector-space-tech {
    background: #ddcffd;
    border-color: #ccb5fb;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-tech.subsector-aero-tech {
    background: #d0d0ff;
    border-color: #b8b8ff;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-tech.subsector-material-tech {
    background: #c8d6ff;
    border-color: #acbff7;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-tech.subsector-hardware-tech {
    background: #ccd9ff;
    border-color: #b3c4f2;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-tech.subsector-web-tech {
    background: #d9e6ff;
    border-color: #bfd2f5;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-tech {
    background: #e6f3ff;
    border-color: #cadff1;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-biotech {
    background: #fff0f6;
    border-color: #ffd6e8;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-banking {
    background: #fff7df;
    border-color: #f3d27a;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-retail,
.portfolio-list .portfolio-item:not(.bankrupt).sector-staples {
    background: #fff7ec;
    border-color: #ffe7c7;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-airlines,
.portfolio-list .portfolio-item:not(.bankrupt).sector-aerospace {
    background: #f7f1e8;
    border-color: #d9c0a3;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-automotive,
.portfolio-list .portfolio-item:not(.bankrupt).sector-industrial {
    background: #f4f7f0;
    border-color: #dde5d4;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-defense,
.portfolio-list .portfolio-item:not(.bankrupt).sector-energy {
    background: #f4f8f3;
    border-color: #d8ead6;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-manufacturing {
    background: #f7f1e8;
    border-color: #d9c0a3;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-realestate {
    background: #f6f3ff;
    border-color: #e3dbff;
}

.portfolio-list .portfolio-item:not(.bankrupt).sector-web {
    background: #f0f5ff;
    border-color: #d9e5ff;
}

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

.detail-header-right {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.detail-title {
    font-size: 36px;
    font-weight: 600;
}

.detail-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.detail-sector {
    font-size: 18px;
    color: #555;
    margin-top: 8px;
}

.detail-subtext {
    font-size: 16px;
    color: #777;
    margin-top: 4px;
}

.detail-meta {
    margin-top: 8px;
}

.detail-mission {
    margin: 4px 0;
    color: #374151;
    font-size: 15px;
}

.detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.detail-pill,
.detail-location {
    background: #eef2ff;
    color: #1f2937;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.detail-location {
    background: transparent;
    color: #555;
    padding: 0;
}

#back-btn {
    background-color: #f0f0f0;
}

.investment-panel {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    display: block;
}

.investment-panel h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.investment-stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 10px;
    font-size: 16px;
}

.stake-label,
.cash-label {
    text-align: center;
}

.investment-input {
    flex: 1 1 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 0;
    height: 40px;
    align-self: flex-start;
}

.buy-btn {
    background-color: #28a745;
}

.buy-btn:hover {
    background-color: #218838;
}

.sell-btn {
    background-color: #dc3545;
}

.sell-btn:hover {
    background-color: #b52a37;
}

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

.investment-actions button {
    flex: 1;
    min-width: 110px;
}

.investment-stats>div {
    margin-bottom: 6px;
}

.investment-stats>div:last-child {
    margin-bottom: 0;
}

.stat-value {
    font-weight: 600;
    color: #00c742;
}

.investment-actions input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
}

.investment-actions .buy-btn {
    background-color: #28a745;
    color: white;
}

.investment-actions .sell-btn {
    background-color: #dc3545;
    color: white;
}

.banking-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.banking-modal.active {
    display: flex;
}

.banking-panel {
    background: white;
    border-radius: 0.75rem;
    padding: 1.875rem;
    max-width: 40rem;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.banking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    position: relative;
    min-height: 140px;
}

.boomer-wojak-icon {
    height: 138px;
    width: auto;
    object-fit: contain;
    position: absolute;
    left: 47%;
    top: 44%;
    transform: translate(-50%, -50%);
}

.banking-title {
    font-size: 24px;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 1.875rem;
    height: 1.875rem;
}

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

.banking-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.stat-box {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
}

.stat-value.positive {
    color: #00c742;
}

.stat-value.negative {
    color: #dc3545;
}

.banking-controls {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 20px;
}

.banking-input-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
}

.input-label {
    font-size: 15px;
    color: #00c742;
    font-weight: 500;
    text-align: center;
}

.banking-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.banking-controls input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    height: 50px;
    /* Match approx height of button rows if needed, or just let it be */
}

.banking-button-grid button {
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.borrow-btn {
    background-color: #007bff;
    color: white;
}

.borrow-btn:hover {
    background-color: #007bff;
}

.repay-btn {
    background-color: #28a745;
    color: white;
}

.repay-btn:hover {
    background-color: #28a745;
}

.banking-info {
    background: #f0f8ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    padding: 15px;
    font-size: 14px;
    color: #0056b3;
}

/* Pipeline Styles */
.product-name-label {
    font-weight: 650;
    text-align: center;
    margin-bottom: 12px;
    color: #374151;
    /* Dark gray for the label */
    font-size: 18px;
}

.pipeline {
    display: flex;
    align-items: flex-start;
    /* Align items to top to handle multi-line labels */
    justify-content: space-between;
    position: relative;
    padding: 20px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 15px;
}

.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 80px;
    /* Give stages a fixed width */
}

.stage-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    /* Prevent node from shrinking */
}

.stage.completed .stage-node {
    background: #22c55e;
    /* Green for success */
    color: white;
    box-shadow: 0 1.5px 3px rgba(34, 197, 94, 0.2);
}

.stage.failed .stage-node {
    background: #ef4444;
    /* Red for failure */
    color: white;
    box-shadow: 0 1.5px 3px rgba(239, 68, 68, 0.2);
}

.stage.incomplete .stage-node {
    background: #e5e7eb;
    color: #9ca3af;
    border: 1.5px solid #d1d5db;
}

.stage.current .stage-node {
    background: #f97316;
    /* Orange for current */
    color: white;
    box-shadow: 0 3px 6px rgba(249, 115, 22, 0.3);
    animation: pulse 2s infinite;
}

.stage.incomplete.current .stage-node {
    background: #3b82f6 !important;
    color: white !important;
    border: 1.5px solid #2563eb;
    box-shadow: 0 3px 6px rgba(59, 130, 246, 0.3);
}

.stage.completed.current .stage-node {
    background: #22c55e !important;
    color: white !important;
    box-shadow: 0 3px 6px rgba(34, 197, 94, 0.3);
    border: none;
}

.stage.completed.current.current-uncertain .stage-node {
    background: #f97316 !important;
    color: white !important;
    box-shadow: 0 3px 6px rgba(249, 115, 22, 0.3);
    border: none;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.stage-label {
    margin-top: 8px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    max-width: 120px;
    line-height: 1.3;
    color: #4b5563;
}

.stage.completed .stage-label,
.stage.current .stage-label {
    font-weight: 600;
}

.stage.failed .stage-label {
    color: #b91c1c;
    font-weight: 600;
}

.connector {
    flex-grow: 1;
    height: 4px;
    margin: 0 -1px;
    /* Overlap slightly with nodes */
    position: relative;
    border-radius: 2px;
    top: 18px;
    /* Align with center of node */
}

.connector.completed {
    background: #22c55e;
}

.connector.failed {
    background: #ef4444;
}

.connector.incomplete {
    background: #e5e7eb;
}

.connector-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0;
    overflow: visible;
    z-index: 5;
    pointer-events: none;
}

.info-prob {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 800;
    color: #000000;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.info-time {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 800;
    color: #000000;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

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

.pipeline-header.subsequent {
    margin-top: 25px;
}

.product-name-header {
    font-size: 16px;
    font-weight: 600;
    color: #4b5563;
}

.pipeline-section {
    /* This class is now just a simple container */
}

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

.investment-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
}

.investment-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.vc-round-title-row {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    align-items: baseline;
}

.vc-round-title-row .vc-round-title-group {
    display: contents;
}

.vc-round-title-row .investment-title {
    grid-column: 1;
    justify-self: start;
}

.vc-round-title-row .vc-round-dilution {
    grid-column: 2;
    justify-self: center;
    white-space: nowrap;
}

.vc-round-title-row #vcDetailTimer {
    grid-column: 3;
    justify-self: end;
}

.vc-round-title-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.vc-detail-timer-inline {
    font-size: 16px;
    font-weight: 600;
    color: #444;
    text-align: right;
    white-space: nowrap;
}

.vc-detail-overview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 16px;
    color: #444;
}

.vc-detail-line {
    font-weight: 600;
}

.vc-investment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.vc-option-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.vc-option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vc-option-label {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.vc-option-value {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.vc-option-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.vc-option-actions {
    display: flex;
    justify-content: center;
}

.vc-option-buy {
    background: #635bff;
    color: #fff;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.vc-detail-description {
    line-height: 1.5;
    color: #555;
}

.vc-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.vc-detail-note {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.vc-detail-note.negative {
    color: #b91c1c;
}

.vc-detail-note.positive {
    color: #0f766e;
}

.invest-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "title"
        "stats"
        "input"
        "actions1"
        "actions2";
    gap: 10px;
    align-items: start;
}

.invest-panel>.investment-actions:nth-of-type(1) {
    grid-area: actions1;
}

.invest-panel>.investment-actions:nth-of-type(2) {
    grid-area: actions2;
}

.invest-panel .investment-title {
    grid-area: title;
    margin: 0;
}

.invest-panel .investment-stats-row {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: flex-start;
    gap: 8px 16px;
    margin: 0;
}

.invest-panel .investment-input {
    grid-area: input;
    width: 100%;
}

.invest-panel .investment-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.invest-panel .investment-actions button {
    min-width: 0;
    width: 100%;
}

.invest-panel .stake-label,
.invest-panel .cash-label {
    text-align: left;
}

.company-box.bankrupt {
    border: 1px solid #ff9aa2;
    background: #fff1f1;
    opacity: 0.85;
}

.company-box.bankrupt .company-name {
    color: #333;
}


#chartjs-tooltip {
    opacity: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    pointer-events: none;
    transform: translate(-50%, 0);
    transition: all .1s ease;
    padding: 6px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#chartjs-tooltip table {
    margin: 0;
    padding: 0;
}

#chartjs-tooltip th {
    font-weight: normal;
    text-align: left;
    padding-bottom: 4px;
    color: #a0a0a0;
}

#chartjs-tooltip td {
    font-weight: normal;
    color: #e0e0e0;
}

#chartjs-tooltip span.bold-value {
    font-weight: 800;
    color: #fff;
}

.chartjs-tooltip {
    opacity: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 3px;
    pointer-events: none;
    transform: translate(-50%, 0);
    transition: all .1s ease;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 12px;
    padding: 6px;
    z-index: 100;
}

/* Multiplayer Modal Adjustments */
#multiplayerModal .banking-panel {
    max-width: 750px;
    position: relative;
    overflow: hidden;
}

.mp-leave-confirm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: 0;
}

.mp-leave-confirm-box {
    width: min(420px, 92%);
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.mp-leave-confirm-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
}

.mp-leave-confirm-text {
    font-size: 14px;
    color: #111827;
    line-height: 1.35;
}

.mp-leave-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px;
}

.mp-leave-confirm-actions button {
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
}

.mp-leave-confirm-yes {
    border-color: #dc2626;
    color: #dc2626;
}

.mp-leave-confirm-no {
    border-color: #94a3b8;
    color: #475569;
}

#multiplayerModal.mp-state-idle .multiplayer-layout,
#multiplayerModal.mp-state-join .multiplayer-layout {
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 22px;
    align-items: end;
}

#multiplayerModal.mp-state-idle .multiplayer-left,
#multiplayerModal.mp-state-idle .multiplayer-right,
#multiplayerModal.mp-state-join .multiplayer-left,
#multiplayerModal.mp-state-join .multiplayer-right {
    display: contents;
}

#multiplayerModal.mp-state-idle .multiplayer-name-inline,
#multiplayerModal.mp-state-join .multiplayer-name-inline {
    grid-column: 1;
}

#multiplayerModal.mp-state-idle #mpPartyStatusControl,
#multiplayerModal.mp-state-join #mpPartyStatusControl {
    grid-column: 2;
}

#multiplayerModal.mp-state-idle #createPartyBtn,
#multiplayerModal.mp-state-join #createPartyBtn {
    grid-column: 3;
}

#multiplayerModal.mp-state-idle #joinPartyBtn,
#multiplayerModal.mp-state-join #joinPartyBtn {
    grid-column: 4;
}

#multiplayerModal.mp-state-idle .multiplayer-actions,
#multiplayerModal.mp-state-join .multiplayer-actions {
    display: contents;
}

#multiplayerModal.mp-state-idle #multiplayerIdleState {
    grid-column: 1;
}

#multiplayerModal.mp-state-idle .mp-public-parties-panel {
    width: 100%;
}

#multiplayerModal.mp-state-join #multiplayerJoinState {
    grid-column: 3 / 5;
}

#multiplayerModal.mp-state-join.mp-party-status-visible #multiplayerJoinState {
    grid-column: 2 / 5;
}

#multiplayerModal.mp-state-join .mp-roster-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#multiplayerModal .banking-header {
    min-height: 180px;
}

#multiplayerModal .banking-title {
    font-size: 32px;
    margin-left: 1%;
}

.multiplayer-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.multiplayer-layout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.multiplayer-left {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.multiplayer-right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.multiplayer-right>.multiplayer-actions {
    align-self: stretch;
}

.multiplayer-name-inline {
    width: 100%;
}

.multiplayer-name-inline .input-label {
    text-align: center;
    color: #22c55e;
    font-weight: 700;
}

.multiplayer-name-inline input {
    text-align: center;
}

.mp-name-error {
    display: none;
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    text-align: center;
}

.mp-name-error.visible {
    display: block;
}

/* Display-name error shouldn't shift the top-row buttons */
.multiplayer-name-inline {
    position: relative;
}

.multiplayer-name-inline .mp-name-error {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    margin-top: 0;
    height: 14px;
    line-height: 14px;
    white-space: nowrap;
    visibility: hidden;
}

.multiplayer-name-inline .mp-name-error.visible {
    display: block;
    visibility: visible;
}

.multiplayer-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.multiplayer-actions>button,
.multiplayer-actions>.mp-party-status-control {
    min-width: 0;
}

.multiplayer-actions>button {
    padding: 15px 20px;
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.mp-party-status-btn {
    padding: 15px 20px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.mp-party-status-control {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.mp-party-status-control[style*="display: flex"],
.mp-party-status-control[style*="display:flex"] {
    display: flex;
}

.mp-party-status-label {
    text-align: center;
    color: #22c55e;
    font-weight: 700;
}

.mp-party-status-btn.mp-public {
    background: #16a34a;
    border-color: #16a34a;
}

.mp-party-status-btn.mp-private {
    background: #dc2626;
    border-color: #dc2626;
}

.mp-party-status-btn {
    width: 100%;
}

.mp-party-status-btn:disabled.mp-public {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    opacity: 0.85;
}

.mp-party-status-btn:disabled.mp-private {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    opacity: 0.85;
}

.mp-online-panel {
    margin-top: 10px;
    padding: 10px 10px 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.mp-online-label {
    color: #22c55e;
    font-weight: 700;
    text-align: center;
}

.mp-online-list,
.mp-public-party-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mp-online-item,
.mp-public-party-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.mp-online-name,
.mp-public-party-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-online-actions,
.mp-public-party-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
}

.mp-invite-btn,
.mp-join-public-btn {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #16a34a;
    background: #16a34a;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    font-size: 12px;
}

.mp-invite-btn:disabled,
.mp-join-public-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mp-invite-btn.mp-muted {
    background: #94a3b8;
    border-color: #94a3b8;
}

.mp-public-parties-panel {
    margin-bottom: 10px;
}

.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2);
}

.multiplayer-state {
    display: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
}

.multiplayer-state.active {
    display: block;
}

/* Hide idle state when it has no visible content */
#multiplayerIdleState.active.empty {
    display: none;
}

.mp-join-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.join-action-btn {
    display: inline-flex;
    align-items: center;
    min-width: 90px;
    justify-content: center;
}

.mp-join-row input {
    flex: 1;
}

.mp-roster-panel {
    width: 50%;
    min-width: 380px;
    max-width: 520px;
    margin: 6px auto 0;
}

.multiplayer-state.joined .join-code-label,
.multiplayer-state.joined .mp-join-row input {
    display: none;
}

.multiplayer-state.joined .mp-join-row {
    justify-content: center;
    gap: 0;
    width: 100%;
}

.join-action-btn.joined {
    background-color: #22c55e;
    color: #ffffff;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

.join-action-btn.joined:hover {
    background-color: #22c55e;
}

.mp-waiting-host {
    display: none;
    margin-top: 10px;
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.multiplayer-state.joined .mp-waiting-host {
    display: block;
}

.mp-coldstart-hint {
    display: none;
    margin-top: 10px;
    font-size: 13px;
    color: #111111;
    text-align: center;
    line-height: 1.4;
}

.party-code-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* Nudge MP section headings slightly lower */
.mp-roster-panel > .input-label,
.mp-join-share > .input-label,
#multiplayerCreateState > .input-label {
    position: relative;
    top: 3px;
}

#mpPartyCodeDisplay {
    flex: 1;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: #ffffff;
}

.copy-code-btn {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #0f172a;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.05s ease, opacity 0.1s ease;
}

.copy-code-btn:active {
    transform: translateY(1px);
}

.players-label {
    margin-top: 8px;
    white-space: nowrap;
}

.mp-player-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.mp-player-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    width: 72%;
    margin: 0 auto;
}

.mp-player-placeholder {
    color: #64748b;
    font-style: italic;
}

.mp-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0f172a;
}

.mp-player-name {
    font-weight: 600;
    color: #0f172a;
    flex: 1;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.start-game-btn {
    width: 100%;
    margin-top: 6px;
}

.multiplayer-wojaks {
    position: absolute;
    left: 57.5%;
    top: 53%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 20px;
    pointer-events: none;
}

.multiplayer-wojak-icon {
    height: 136px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.15));
}

/* Character Selection Overlay */
.character-overlay {
    position: absolute;
    inset: 0;
    background: #ffffff;
    color: #0f172a;
    border-radius: 16px;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    gap: 18px;
    z-index: 5;
    border: 1px solid #e2e8f0;
    overflow-y: auto;
}

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

#multiplayerModal.character-overlay-open .multiplayer-state {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

#multiplayerModal.character-overlay-open .multiplayer-state.active {
    display: block;
}

#multiplayerModal.character-overlay-open .mp-join-row,
#multiplayerModal.character-overlay-open .mp-roster-panel,
#multiplayerModal.character-overlay-open .mp-waiting-host,
#multiplayerModal.character-overlay-open .mp-coldstart-hint {
    display: none;
}

.character-overlay-header h3 {
    margin: 0 0 6px;
    font-size: 22px;
    color: #0f172a;
}

.character-overlay-header p {
    margin: 0;
    color: #334155;
}

.character-option-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
}

.character-option {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
    color: #0f172a;
    overflow: visible;
}

.character-art {
    width: 150px;
    height: 150px;
    max-width: 100%;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.character-option img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

.character-option span {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.character-option:hover {
    transform: translateY(-2px);
    border-color: #22c55e;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.character-option:active {
    transform: translateY(0);
}

.character-option.selected {
    border-color: #22c55e;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.character-overlay-actions {
    display: flex;
    justify-content: flex-end;
}

.secondary-btn {
    background: #1f2937;
    color: #e2e8f0;
    border: 1px solid #334155;
}

.character-back-locked {
    cursor: not-allowed;
    opacity: 1;
}

.character-back-locked:focus {
    outline: none;
}

.character-back-locked:hover {
    cursor: not-allowed;
}

.character-option.locked {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #cbd5e1;
    box-shadow: none;
    transform: none;
}

.character-option.locked:hover {
    transform: none;
    box-shadow: none;
}

/* Specific tweaks to prevent edge cropping for non-square sprites (multiplayer only) */
.character-option--grug img,
.character-option--zoomer img {
    max-width: 100%;
    max-height: 100%;
}

.detail-location {
    font-size: 18px;
    color: #888;
    font-weight: 400;
}

.detail-founders {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}

.detail-founders-label {
    font-weight: 600;
    margin-bottom: 2px;
    color: #555;
}

.detail-founder-name {
    margin-bottom: 2px;
}

/* Bankruptcy Popup */
.bankruptcy-popup {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.bankruptcy-popup.show {
    display: flex;
}

.bankruptcy-content {
    background: #ffffff;
    width: min(384px, 90vw);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
}

.bankruptcy-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -30%);
    border: none;
    background: #ffffff;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    border: 1px solid #000000;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
    font-size: 16px;
    cursor: pointer;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bankruptcy-close-btn:hover {
    background: #f8fafc;
}

.bankruptcy-text {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    text-align: center;
}

.bankruptcy-liquidation-text {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #475569;
    text-align: center;
}

.bankruptcy-wojak {
    width: 60%;
    height: auto;
    object-fit: contain;
}

.bankruptcy-btn {
    background: #16a34a;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    min-width: 140px;
    font-size: 14px;
}

.bankruptcy-btn:hover {
    background: #15803d;
}

#multiplayerEndOkayBtn {
    background: #22c55e;
}

#multiplayerEndOkayBtn:hover {
    background: #16a34a;
}

/* Timeline End Popup */
.timeline-end-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

.timeline-end-subtitle {
    margin: -8px 0 0 0;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
    text-align: center;
}

.timeline-end-wojak {
    width: 45%;
    height: auto;
    object-fit: contain;
}

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

.timeline-end-label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #475569;
    text-align: center;
}

.timeline-end-amount {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    color: #22c55e;
    text-align: center;
}

/* Multiplayer end popup */
.mp-end-leaderboard {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 6px 0;
}

.mp-end-heading {
    font-weight: 700;
}

.mp-end-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
}

.mp-end-rank {
    font-weight: 700;
    color: #0f172a;
    min-width: 28px;
}

.mp-end-name {
    flex: 1;
    font-weight: 600;
    color: #0f172a;
}

.mp-end-networth {
    font-weight: 700;
}

/* Feedback */
.feedback-btn {
    background: #2f80ed !important;
    border: none;
}

.feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 16px;
}

.feedback-modal {
    width: min(512px, 92vw);
    background: #fff;
    border-radius: 14px;
    padding: 18px 18px 16px 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(-6vh);
}

.feedback-email-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feedback-email-label {
    font-size: 13px;
    font-weight: 700;
    color: #111;
}

.feedback-email-input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    padding: 12px;
    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
}

.feedback-email-input:focus {
    border-color: rgba(47, 128, 237, 0.8);
    box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.15);
}

.feedback-title {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    padding-right: 44px;
}

.feedback-input {
    width: 100%;
    min-height: 145px;
    resize: vertical;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    font-size: 14px;
    line-height: 1.4;
    font-family: inherit;
    outline: none;
}

.feedback-email-input::placeholder,
.feedback-input::placeholder {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
}

.feedback-input:focus {
    border-color: rgba(47, 128, 237, 0.8);
    box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.15);
}

.feedback-send-btn {
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 800;
    cursor: pointer;
}

.feedback-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mp-end-avatar {
    height: 64px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.vc-option-header {
    width: 100%;
    text-align: left;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.vc-round-dilution {
    font-size: 16px;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
}

@media (max-width: 440px) {
    body {
        padding: 0.625rem;
    }

    .banking-modal.active {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    #bankingModal {
        inset: 0;
        width: auto;
        height: auto;
    }

    #bankingModal.active {
        display: grid;
        place-items: center;
    }

	    .detail-header {
	        flex-direction: column;
	        gap: 0.75rem;
	        align-items: stretch;
	    }

	    .detail-header-right {
	        width: 100%;
	        flex-direction: column;
	        align-items: stretch;
	        gap: 0.75rem;
	    }

	    #detail-view .detail-header {
	        display: grid;
	        grid-template-columns: minmax(0, 1fr) auto;
	        grid-template-areas: "left right";
	        align-items: start;
	        gap: 10px 12px;
	    }

	    #detail-view .detail-header-left {
	        grid-area: left;
	        min-width: 0;
	        display: grid;
	        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	        grid-template-areas:
	            "title title"
	            "sector location"
	            "mission mission";
	        gap: 4px 6px;
	        align-items: baseline;
	    }

	    #detail-view .detail-title-row {
	        display: contents;
	    }

	    #detail-view .detail-title {
	        grid-area: title;
	    }

	    #detail-view .detail-sector {
	        grid-area: sector;
	        margin-top: 0;
	    }

	    #detail-view .detail-location {
	        grid-area: location;
	        justify-self: start;
	        margin-top: 0;
	        white-space: nowrap;
	        overflow: hidden;
	        text-overflow: ellipsis;
	    }

	    #detail-view .detail-meta {
	        grid-area: mission;
	        margin-top: 0;
	    }

	    #detail-view .detail-header-right {
	        grid-area: right;
	        justify-self: end;
	        width: auto;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        gap: 8px;
	        min-width: 0;
	        max-width: 46vw;
	    }

	    #detail-view .detail-actions-wrapper {
	        order: 0;
	        flex-direction: column;
	        align-items: center;
	        gap: 6px;
	    }

	    #detail-view .detail-founders {
	        order: 1;
	        margin-top: 0;
	        width: 100%;
	        align-items: center;
	        text-align: center;
	        font-size: 11px;
	    }

	    #detail-view .company-detail-controls {
	        display: none !important;
	    }

	    #detail-view #back-btn {
	        padding: 0.5625rem 1.125rem;
	        font-size: 0.9rem;
	    }

	    #vc-detail-view .detail-header {
	        display: grid;
	        grid-template-columns: minmax(0, 1fr) auto;
	        grid-template-areas: "left right";
	        align-items: start;
	        gap: 10px 12px;
	    }

	    #vc-detail-view .detail-header-left {
	        grid-area: left;
	        min-width: 0;
	        display: grid;
	        grid-template-columns: 1fr;
	        grid-template-areas:
	            "title"
	            "stage"
	            "mission";
	        gap: 4px 6px;
	        align-items: baseline;
	    }

	    #vc-detail-view .detail-title-row {
	        display: contents;
	    }

	    #vc-detail-view .detail-title {
	        grid-area: title;
	        font-size: 1.28rem;
	        line-height: 1.15;
	    }

	    #vc-detail-view #vcDetailCompanySector {
	        grid-area: stage;
	        margin-top: 0;
	    }

	    #vc-detail-view #vcDetailFundingRound {
	        display: none !important;
	    }

	    #vc-detail-view #vcDetailLocation {
	        display: none !important;
	    }

	    #vc-detail-view .detail-meta {
	        grid-area: mission;
	        margin-top: 0;
	    }

	    #vc-detail-view .detail-mission {
	        font-size: 12px;
	    }

	    #vc-detail-view .detail-header-right {
	        grid-area: right;
	        justify-self: end;
	        width: auto;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        gap: 8px;
	        min-width: 0;
	        max-width: 46vw;
	    }

	    #vc-detail-view .detail-actions-wrapper {
	        order: 0;
	        flex-direction: column;
	        align-items: center;
	        gap: 6px;
	    }

	    #vc-detail-view #vcDetailLocationRight {
	        order: 1;
	        margin-top: 0;
	        width: 100%;
	        justify-content: center;
	        text-align: center;
	        font-size: 14px;
	        white-space: nowrap;
	        overflow: hidden;
	        text-overflow: ellipsis;
	    }

	    #vc-detail-view .detail-founders {
	        order: 2;
	        margin-top: 0;
	        width: 100%;
	        align-items: center;
	        text-align: center;
	        font-size: 11px;
	    }

	    #vc-detail-view .company-detail-controls {
	        display: none !important;
	    }

	    #vc-detail-view #back-to-vc-list-btn {
	        padding: 0.5625rem 1.125rem;
	        font-size: 0.9rem;
	    }

	    #vc-detail-view .vc-round-title-row {
	        display: grid;
	        grid-template-columns: 1fr max-content max-content;
	        grid-template-rows: auto auto;
	        column-gap: 10px;
	        row-gap: 2px;
	        align-items: baseline;
	    }

	    #vc-detail-view .vc-round-title-row .investment-title {
	        grid-row: 1;
	        grid-column: 1 / -1;
	        justify-self: start;
	    }

	    #vc-detail-view .vc-round-title-row #vcDetailTimer {
	        grid-row: 2;
	        grid-column: 2;
	        justify-self: start;
	        text-align: left;
	    }

	    #vc-detail-view .vc-round-title-row .vc-round-dilution {
	        grid-row: 2;
	        grid-column: 3;
	        justify-self: start;
	        text-align: left;
	    }

	    .detail-title {
	        font-size: 1.6rem;
	        line-height: 1.15;
	    }

	    #detail-view .detail-title {
	        font-size: 1.28rem;
	    }

	    #detail-view .detail-location {
	        font-size: 14px;
	    }

	    #detail-view .detail-mission {
	        font-size: 12px;
	    }

    .detail-title-row {
        flex-wrap: wrap;
        align-items: center;
    }

    .header-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
        padding: 0 0.5rem;
    }

    .player-avatar-stack {
        min-width: 0;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .party-avatars {
        max-width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .wojak-image {
        width: 6.25rem;
        height: 6.25rem;
    }

    .header-controls {
        margin-top: 0;
        margin-right: 0;
        align-self: center;
        align-items: center;
    }

    .header-controls-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .net-worth {
        font-size: 2.25rem;
        letter-spacing: -1px;
    }

    .chart-container {
        padding: 0.875rem;
        height: 18rem;
    }

    .investment-panel {
        padding: 14px;
    }

	    #detail-view .investment-stats-row {
	        flex-direction: row;
	        flex-wrap: nowrap;
	        justify-content: flex-start;
	        gap: 10px 12px;
	        font-size: 1.06rem;
	    }

	    #detail-view .investment-stats-row .stake-label,
	    #detail-view .investment-stats-row .cash-label {
	        flex: 0 0 auto;
	        max-width: 100%;
	        text-align: left;
	        white-space: nowrap;
	        overflow-wrap: anywhere;
	    }

	    #detail-view .investment-stats-row .stat-value {
	        font-size: inherit;
	    }

    #detail-view .invest-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "stats"
            "actions1"
            "input"
            "actions2";
        row-gap: 10px;
        column-gap: 0;
        align-items: start;
    }

    #detail-view .invest-panel .investment-title {
        grid-area: title;
        margin: 0;
        align-self: end;
        line-height: 1.1;
    }

    #detail-view .invest-panel .investment-stats-row {
        grid-area: stats;
        align-self: start;
        justify-self: stretch;
        min-width: 0;
        line-height: 1.2;
        margin: 0;
    }

    #detail-view .invest-panel #investmentAmountInput {
        grid-area: input;
        width: 100%;
        height: 32px;
        min-height: 32px;
        align-self: stretch;
    }

    /* Note: nth-of-type counts by tag name (div), not class, so these indices account for the stats div. */
    #detail-view .invest-panel > .investment-actions:nth-of-type(2) {
        grid-area: actions1;
    }

    #detail-view .invest-panel > .investment-actions:nth-of-type(3) {
        grid-area: actions2;
    }

    #detail-view .invest-panel .investment-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        justify-self: stretch;
    }

    #detail-view .invest-panel .investment-actions button {
        width: 100%;
        min-width: 0;
        padding: 0.5rem 0.625rem;
    }

    .chart-controls {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 8px;
    }

    .chart-controls h3 {
        width: 100%;
        font-size: 1.05rem;
    }

    .chart-controls > div {
        width: 100%;
        flex-wrap: wrap;
    }

    .chart-range-btn {
        flex: 1 1 auto;
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    .financial-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .financial-table table {
        font-size: 12px;
        min-width: 520px;
    }

    .financial-table th,
    .financial-table td {
        padding: 6px 8px;
    }

    .controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        max-width: none;
        margin-bottom: 1.625rem;
    }

    .controls-group-left,
    .controls-group-right {
        width: 100%;
        flex: initial;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0;
    }

    .time-controls-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .speed-slider-row {
        min-width: 0;
    }

	    .speed-slider-wrap label {
	        position: absolute;
	        top: calc(100% - 4px);
	        left: 50%;
	        bottom: auto;
	        transform: translateX(-50%);
	        margin-top: 0;
	        line-height: 1;
	        pointer-events: none;
	    }

	    #speedSlider {
	        width: clamp(96px, 32vw, 150px);
	    }

    .drip-toggle {
        flex-wrap: wrap;
        justify-content: center;
    }

    body:not(.multiplayer-active) .drip-toggle {
        margin-left: 0;
    }

    .market-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .market-controls {
        width: 100%;
    }

    .market-header .market-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: start;
    }

    .market-header .sort-controls,
    .market-header .filter-controls {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }

    .market-header .sort-controls label,
    .market-header .filter-controls label {
        font-size: 12px;
        line-height: 1.1;
    }

    .market-header .sort-controls select,
    .market-header .filter-controls select {
        width: 100%;
        padding: 6px 8px;
        font-size: 13px;
    }

    .companies-grid,
    .portfolio-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .company-box,
    .portfolio-item {
        padding: 0.75rem;
    }

    .toast-container {
        left: 8px;
        right: 8px;
        top: 8px;
    }

    .toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .banking-panel {
        padding: 1.25rem;
        width: min(420px, 92vw);
        max-height: 92vh;
        overflow-y: auto;
        margin: 0 auto;
    }

    .banking-header {
        min-height: 0;
        margin-bottom: 16px;
        padding-bottom: 10px;
    }

    .boomer-wojak-icon {
        display: none;
    }

    .banking-stats {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }

    .banking-title {
        font-size: 20px;
    }

    .banking-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .banking-button-grid {
        grid-template-columns: 1fr 1fr;
    }

    .banking-controls input {
        height: 44px;
        padding: 10px;
        font-size: 15px;
    }

    .banking-button-grid button {
        padding: 9px 10px;
        font-size: 13px;
        white-space: normal;
        line-height: 1.15;
    }

    .banking-info {
        padding: 12px;
        font-size: 13px;
    }

    #multiplayerModal .banking-header {
        min-height: 112px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }

    #multiplayerModal .banking-title {
        font-size: 17px;
        margin-left: 0;
    }

    #multiplayerModal.active {
        align-items: flex-start;
    }

    #multiplayerModal .banking-panel {
        padding: 1rem;
    }

    #multiplayerModal .multiplayer-wojaks {
        left: auto;
        right: 28px;
        top: 50%;
        transform: translateY(-50%);
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: flex-end;
        max-width: none;
    }

    #multiplayerModal .multiplayer-wojak-icon {
        height: 68px;
    }

    #multiplayerModal .multiplayer-name-inline {
        position: static;
        padding-bottom: 0;
    }

    #multiplayerModal .multiplayer-name-inline .mp-name-error {
        position: static;
        display: none;
        height: auto;
        line-height: 1.2;
        white-space: normal;
        visibility: visible;
        margin-top: 6px;
    }

	    #multiplayerModal .multiplayer-name-inline .mp-name-error.visible {
	        display: block;
	    }

	    /* Multiplayer modal: simplify the grid-based desktop layout for small screens */
	    #multiplayerModal.mp-state-idle .multiplayer-layout,
	    #multiplayerModal.mp-state-join .multiplayer-layout,
	    #multiplayerModal.mp-state-create .multiplayer-layout {
	        display: flex;
	        flex-direction: column;
	        align-items: stretch;
	        gap: 14px;
	    }

	    #multiplayerModal.mp-state-idle .multiplayer-left,
	    #multiplayerModal.mp-state-join .multiplayer-left,
	    #multiplayerModal.mp-state-create .multiplayer-left,
	    #multiplayerModal.mp-state-idle .multiplayer-right,
	    #multiplayerModal.mp-state-join .multiplayer-right,
	    #multiplayerModal.mp-state-create .multiplayer-right {
	        display: flex;
	        flex-direction: column;
	        gap: 10px;
	        width: 100%;
	        max-width: none;
	    }

	    #multiplayerModal.mp-state-idle .multiplayer-actions,
	    #multiplayerModal.mp-state-join .multiplayer-actions,
	    #multiplayerModal.mp-state-create .multiplayer-actions {
	        display: grid;
	        grid-template-columns: 1fr 1fr;
	        gap: 10px;
	        align-items: stretch;
	    }

	    #multiplayerModal .mp-party-status-control {
	        grid-column: 1 / -1;
	    }

	    /* When in a party (mobile), simplify: show only Party Status full-width */
	    #multiplayerModal.mp-party-status-visible .multiplayer-actions {
	        grid-template-columns: 1fr;
	    }

	    #multiplayerModal.mp-party-status-visible .mp-party-status-control {
	        grid-column: 1 / -1;
	        width: 100%;
	    }

	    #multiplayerModal.mp-party-status-visible .mp-party-status-btn {
	        width: 100%;
	    }

	    #multiplayerModal.mp-party-status-visible #createPartyBtn,
	    #multiplayerModal.mp-party-status-visible #joinPartyBtn {
	        display: none;
	    }

	    #multiplayerModal .multiplayer-actions > button,
	    #multiplayerModal .mp-party-status-btn {
	        height: 42px;
	        padding: 10px 12px;
	        font-size: 13px;
	    }

	    #multiplayerModal .multiplayer-name-inline .input-label,
	    #multiplayerModal .mp-party-status-label {
	        text-align: left;
	    }

	    #multiplayerModal .multiplayer-name-inline input {
	        text-align: left;
	    }

	    #multiplayerModal .multiplayer-state {
	        padding: 12px;
	    }

	    #multiplayerModal .mp-roster-panel {
	        width: 100%;
	        min-width: 0;
	        max-width: none;
	        margin: 6px 0 0;
	    }

	    #multiplayerModal .mp-player-list li {
	        width: 100%;
	        margin: 0;
	    }

	    #multiplayerModal .mp-join-row {
	        display: grid;
	        grid-template-columns: 1fr auto;
	        gap: 10px;
	        align-items: center;
	    }

	    #multiplayerModal .mp-join-row input {
	        grid-column: 1;
	    }

	    #multiplayerModal .mp-join-row .join-action-btn {
	        grid-column: 2;
	    }

    #vc-view .detail-title-row img {
        height: 92px !important;
        margin-right: 12px !important;
    }

    #vc-view .detail-title-row {
        flex-wrap: wrap;
        align-items: center;
    }

    #vc-view .detail-title {
        font-size: 20px !important;
        line-height: 1.15;
    }

    #vc-view .detail-title-row p {
        font-size: 14px !important;
    }

    #vc-view .venture-market-section {
        margin-top: 12px;
    }

    #vc-view .venture-market-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    #vc-view .section-title {
        font-size: 18px;
    }

    #ventureCompaniesGrid {
        gap: 0.625rem;
    }

    #ventureCompaniesGrid .company-box {
        padding: 0.625rem;
    }

    #ventureCompaniesGrid .company-name {
        font-size: 14px;
        margin-bottom: 4px;
    }

    #ventureCompaniesGrid .company-info {
        font-size: 13px;
        line-height: 1.25;
    }

    #ventureCompaniesGrid .company-stage,
    #ventureCompaniesGrid .company-note {
        margin-top: 2px;
    }

    #ventureCompaniesGrid .company-ipo-badge {
        font-size: 10px;
    }

    #ventureCompaniesGrid .vc-empty-state {
        font-size: 15px;
        white-space: normal;
    }

	    #multiplayerModal .character-overlay {
	        padding: 12px;
	        gap: 10px;
	        justify-content: flex-start;
        overflow: hidden;
    }

    #multiplayerModal .character-overlay-header h3 {
        font-size: 16px;
        margin-bottom: 4px;
    }

    #multiplayerModal .character-overlay-header p {
        font-size: 13px;
    }

    #multiplayerModal .character-option-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #multiplayerModal .character-option {
        padding: 10px 10px 8px;
        gap: 6px;
        min-width: 0;
    }

    #multiplayerModal .character-art {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 96px;
        border-radius: 10px;
    }

    #multiplayerModal .character-overlay-actions button {
        padding: 8px 12px;
        font-size: 13px;
    }

    #multiplayerModal .character-overlay-actions {
        margin-top: auto;
        padding-top: 10px;
    }

    #multiplayerModal.character-overlay-open .banking-panel {
        height: auto;
        max-height: 92vh;
        overflow-y: auto;
    }
}

@media (max-width: 320px) {
    .wojak-image {
        width: 5.5rem;
        height: 5.5rem;
    }

    .net-worth {
        font-size: 2rem;
    }

	    #speedSlider {
	        width: clamp(88px, 30vw, 132px);
	    }

	    #detail-view .investment-stats-row {
	        flex-direction: column;
	        align-items: flex-start;
	        gap: 4px;
	    }

    .banking-button-grid {
        grid-template-columns: 1fr;
    }

    .financial-table table {
        font-size: 11px;
        min-width: 480px;
    }

    #multiplayerModal .multiplayer-wojaks {
        right: 24px;
        gap: 6px;
        max-width: none;
    }

    #multiplayerModal .multiplayer-wojak-icon {
        height: 56px;
    }
}

@media (max-width: 360px) {
    #detail-view .invest-panel {
        grid-template-columns: minmax(0, 1fr) minmax(150px, 48%);
        grid-template-areas:
            "title title"
            "stats stats"
            "input actions1"
            "input actions2";
    }

    #detail-view .investment-stats-row {
        flex-wrap: wrap;
    }
}

.maxwin-career-hud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
}

.maxwin-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid #d7dde8;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
}

.maxwin-stress-badge.is-hidden,
.maxwin-career-panel.is-hidden,
.maxwin-career-hud.is-hidden {
    display: none;
}

.maxwin-career-panel {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}

.maxwin-career-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.maxwin-career-stat,
.maxwin-deal-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    background: #f8fafc;
}

.maxwin-career-stat strong,
.maxwin-deal-card strong {
    display: block;
    color: #111827;
    font-size: 13px;
}

.maxwin-career-stat span,
.maxwin-deal-card span {
    color: #4b5563;
    font-size: 13px;
}

.maxwin-deal-flow {
    display: grid;
    gap: 10px;
}

.maxwin-career-subhead {
    margin-top: 4px;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.maxwin-valuation-card {
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 12px;
    background: #fffbeb;
}

.maxwin-valuation-card strong,
.maxwin-valuation-card label {
    display: block;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.maxwin-valuation-card span {
    display: block;
    margin: 4px 0 8px;
    color: #92400e;
    font-size: 13px;
}

.maxwin-deal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.maxwin-deal-actions input {
    width: 150px;
    min-height: 34px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 8px;
}

.maxwin-deal-card em {
    display: block;
    margin-top: 6px;
    color: #b45309;
    font-size: 12px;
    font-style: normal;
}

.maxwin-settings-panel,
.maxwin-path-panel {
    max-width: 760px;
}

.maxwin-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    font-weight: 700;
}

.maxwin-setting-row input,
.maxwin-setting-row select {
    min-width: 170px;
    flex: 0 1 220px;
}

.admin-panel-section {
    display: grid;
    gap: 10px;
}

.admin-actions-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#adminModal .banking-panel {
    max-width: 860px;
}

#adminModal .banking-header {
    min-height: 0;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

#adminModal #adminAuthSection,
#adminModal #adminPanelSection {
    display: grid;
    gap: 10px;
}

#adminModal .maxwin-setting-row {
    display: grid;
    grid-template-columns: 170px minmax(180px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-weight: 600;
}

#adminModal #adminAuthSection .maxwin-setting-row {
    grid-template-columns: 170px minmax(220px, 1fr);
}

#adminModal .maxwin-setting-row input,
#adminModal .maxwin-setting-row select {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
}

#adminModal .maxwin-setting-row input:focus,
#adminModal .maxwin-setting-row select:focus {
    outline: none;
    border-color: #00c742;
    box-shadow: 0 0 0 2px rgba(0, 199, 66, 0.18);
}

#adminModal .maxwin-setting-row button,
#adminModal .admin-actions-row button {
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 14px;
}

#adminModal .admin-actions-row {
    margin-top: 6px;
}

@media (max-width: 760px) {
    #adminModal .maxwin-setting-row,
    #adminModal #adminAuthSection .maxwin-setting-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #adminModal .maxwin-setting-row button {
        width: 100%;
    }
}

.maxwin-setting-note,
.maxwin-path-subtitle {
    color: #4b5563;
    margin: 0 0 14px;
}

#maxwinBasicModeRow + #maxwinBasicModeNote {
    margin-top: -4px;
}

.maxwin-path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.maxwin-path-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 150px;
    padding: 14px;
    border: 1px solid #d7dde8;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    text-align: left;
    cursor: pointer;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    line-height: 1.35;
}

.maxwin-path-card[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.maxwin-path-card strong {
    font-size: 18px;
}

.maxwin-path-card span,
.maxwin-path-card em {
    color: #4b5563;
    font-size: 13px;
    font-style: normal;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ===== Terminal Reskin Override Layer (Bloomberg-inspired, no glow/gradients) ===== */
:root {
    color-scheme: dark;
    --ui-bg: #0b0f14;
    --ui-panel: #11161d;
    --ui-panel-2: #151b23;
    --ui-rule: #2c3642;
    --ui-rule-strong: #435264;
    --ui-text: #dbe6f2;
    --ui-text-dim: #8ea1b3;
    --ui-text-inv: #0b0f14;
    --ui-accent: #f3b33e;
    --ui-positive: #60d394;
    --ui-negative: #ff7d7d;
    --ui-warn: #f6c85f;
    --ui-hover: #1a212b;
    --ui-active: #0f141b;
    --ui-input-bg: #0f141b;
    --ui-input-text: #dbe6f2;
    --ui-chart-bg: #0f141b;
    --ui-disabled-bg: #1a212b;
    --ui-disabled-text: #9fb0c2;
    --ui-disabled-border: #3d4a58;
    --ui-card-text: #dce7f3;
    --ui-card-title: #edf4fb;
    --ui-card-subtext: #a8bbcf;
    --ui-sector-tech-bg: #16263a;
    --ui-sector-tech-border: #2f4f73;
    --ui-sector-biotech-bg: #232234;
    --ui-sector-biotech-border: #4c4a77;
    --ui-sector-banking-bg: #2f2b1e;
    --ui-sector-banking-border: #6b6240;
    --ui-sector-retail-bg: #2d2430;
    --ui-sector-retail-border: #654e73;
    --ui-sector-energy-bg: #263022;
    --ui-sector-energy-border: #556d4b;
    --ui-sector-industrial-bg: #252e33;
    --ui-sector-industrial-border: #4f6572;
    --ui-radius: 8px;
    --ui-gap: 10px;
    --ui-font: "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;
    --ui-font-mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;
    --ui-btn-h: 44px;
    --ui-btn-pad-x: 14px;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
    --ui-bg: #f3f6fa;
    --ui-panel: #ffffff;
    --ui-panel-2: #f7fafc;
    --ui-rule: #d3dbe6;
    --ui-rule-strong: #b5c1d1;
    --ui-text: #0f172a;
    --ui-text-dim: #475569;
    --ui-text-inv: #f8fafc;
    --ui-accent: #b45309;
    --ui-positive: #15803d;
    --ui-negative: #b91c1c;
    --ui-warn: #b45309;
    --ui-hover: #eef2f7;
    --ui-active: #e6edf5;
    --ui-input-bg: #ffffff;
    --ui-input-text: #0f172a;
    --ui-chart-bg: #ffffff;
    --ui-disabled-bg: #edf2f7;
    --ui-disabled-text: #64748b;
    --ui-disabled-border: #cbd5e1;
    --ui-card-text: #1f2937;
    --ui-card-title: #0f172a;
    --ui-card-subtext: #4b5563;
    --ui-sector-tech-bg: #e7f1ff;
    --ui-sector-tech-border: #bfd5f5;
    --ui-sector-biotech-bg: #f6efff;
    --ui-sector-biotech-border: #dac7f2;
    --ui-sector-banking-bg: #fff5df;
    --ui-sector-banking-border: #efd7a4;
    --ui-sector-retail-bg: #fdf0f6;
    --ui-sector-retail-border: #edcad9;
    --ui-sector-energy-bg: #eef9ee;
    --ui-sector-energy-border: #c9e1c9;
    --ui-sector-industrial-bg: #eef3f7;
    --ui-sector-industrial-border: #ccd8e4;
}

html {
    font-size: clamp(12px, 1.35vw, 15px);
}

body {
    font-family: var(--ui-font);
    background: var(--ui-bg);
    color: var(--ui-text);
    padding: 0.75rem;
}

.container {
    max-width: 1380px;
    border: 1px solid var(--ui-rule-strong);
    background: var(--ui-panel);
}

/* ===== Structural Layout Shift ===== */
#main-view {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
    grid-template-areas:
        "header header"
        "chart sidebar-top"
        "controls sidebar-top"
        "market sidebar-bottom";
    gap: 10px;
    align-items: start;
    padding: 10px;
}

#main-view > .header {
    grid-area: header;
}

#main-view > .chart-container {
    grid-area: chart;
    margin-bottom: 0;
    min-height: 360px;
}

#main-view > .controls {
    grid-area: controls;
    margin: 0;
    max-width: none;
    justify-content: space-between;
    padding: 0.55rem 0.7rem;
}

#main-view > .companies-section {
    grid-area: market;
    margin-top: 0;
    min-height: 460px;
}

#main-view > .portfolio {
    grid-area: sidebar-top;
    margin-top: 0;
    min-height: 310px;
    max-height: 460px;
    overflow: auto;
}

#main-view > .maxwin-career-panel {
    grid-area: sidebar-bottom;
    margin: 0;
    min-height: 280px;
}

#detail-view,
#vc-detail-view {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.85fr);
    grid-template-areas:
        "detail-head detail-head"
        "detail-chart detail-invest"
        "detail-extra detail-extra";
    gap: 10px;
    padding: 10px;
}

#detail-view > .detail-header,
#vc-detail-view > .detail-header {
    grid-area: detail-head;
    margin-bottom: 0;
}

#detail-view > .chart-container,
#vc-detail-view > .chart-container {
    grid-area: detail-chart;
    margin-bottom: 0;
    min-height: 340px;
}

#detail-view > .invest-panel,
#vc-detail-view > .investment-panel:last-of-type {
    grid-area: detail-invest;
    min-height: 340px;
    margin-top: 0;
    align-self: stretch;
}

#detail-view > #pipelineContainer,
#detail-view > .investment-panel:last-of-type,
#vc-detail-view > #vcPipelinePanel,
#vc-detail-view > .investment-panel {
    grid-area: detail-extra;
}

#vc-detail-view > .investment-panel:last-of-type {
    grid-area: detail-invest;
}

#vc-view #vc-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.header {
    margin-bottom: 0;
    border-bottom: 1px solid var(--ui-rule);
    padding: 0.6rem 0.8rem;
}

.header-content {
    max-width: none;
    padding: 0;
    gap: var(--ui-gap);
    align-items: stretch;
}

.wojak-image,
.party-avatar {
    border-radius: var(--ui-radius) !important;
    background: transparent;
    border: 1px solid var(--ui-rule);
}

.lead-avatar-name,
.party-avatar-name,
.net-worth,
.date,
#subFinancialDisplay,
.maxwin-badge {
    font-family: var(--ui-font-mono);
    letter-spacing: 0.01em;
}

.net-worth {
    color: var(--ui-accent);
}

.date,
#subFinancialDisplay,
.maxwin-badge,
.tooltip-text,
.maxwin-setting-note,
.maxwin-path-subtitle {
    color: var(--ui-text-dim);
}

.maxwin-badge {
    border-radius: var(--ui-radius);
    border-color: var(--ui-rule);
    background: var(--ui-panel-2);
}

.macro-events-bar,
.controls,
.portfolio,
.companies-section,
.maxwin-career-panel,
.chart-container,
.investment-panel,
.detail-header,
.banking-panel,
.feedback-modal,
.bankruptcy-content,
.multiplayer-state,
.character-overlay,
.mp-roster-panel,
.mp-join-share {
    background: var(--ui-panel);
    border: 1px solid var(--ui-rule);
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

.controls,
.portfolio,
.companies-section,
.maxwin-career-panel,
.investment-panel,
.banking-panel,
.feedback-modal,
.bankruptcy-content {
    padding: 0.75rem;
}

.controls-group-left,
.controls-group-right {
    flex: 0 1 auto;
    justify-content: flex-start;
    padding: 0;
}

.portfolio-header,
.market-header,
.detail-title-row,
.banking-header,
.character-overlay-header {
    border-bottom: 1px solid var(--ui-rule);
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
}

.section-title,
.detail-title,
.banking-title,
.investment-title,
.timeline-end-title,
.feedback-title {
    color: var(--ui-text);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

button,
.copy-code-btn,
.bankruptcy-btn,
.feedback-send-btn {
    font-family: var(--ui-font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--ui-panel-2);
    color: var(--ui-text);
    border: 1px solid var(--ui-rule-strong);
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
    white-space: nowrap;
    line-height: 1;
}

button:hover:not(:disabled),
.copy-code-btn:hover,
.feedback-send-btn:hover:not(:disabled) {
    background: var(--ui-hover);
    border-color: var(--ui-accent);
}

button:active:not(:disabled) {
    transform: none;
    background: var(--ui-active);
}

button:disabled {
    opacity: 0.5;
    border-color: var(--ui-rule);
    color: var(--ui-text-dim);
}

input,
select,
textarea,
.investment-input,
#investmentAmountInput,
#bankingAmountInput {
    font-family: var(--ui-font-mono);
    background: var(--ui-input-bg);
    color: var(--ui-input-text);
    border: 1px solid var(--ui-rule-strong);
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.investment-input:focus,
#adminModal .maxwin-setting-row input:focus,
#adminModal .maxwin-setting-row select:focus {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: none !important;
}

.drip-toggle input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--ui-rule-strong);
    border-radius: 0 !important;
    background: var(--ui-input-bg);
    position: relative;
}

.drip-toggle input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--ui-positive);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.companies-grid,
.portfolio-list,
.maxwin-career-summary,
.maxwin-deal-flow,
.banking-stats {
    gap: 8px;
}

.portfolio-list,
#companiesGrid {
    align-content: start;
}

#companiesGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-box,
.portfolio-item,
.maxwin-career-stat,
.maxwin-deal-card,
.stat-box,
.financial-table table,
.financial-table th,
.financial-table td,
.company-rnd-flag,
.detail-location,
.portfolio-ipo-badge,
.company-ipo-badge {
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

.company-box,
.portfolio-item,
.maxwin-career-stat,
.maxwin-deal-card,
.stat-box {
    background: var(--ui-panel-2);
    border: 1px solid var(--ui-rule);
}

.company-box:hover,
.company-box.hovered,
.portfolio-item:hover {
    border-color: var(--ui-accent);
    transform: none;
}

.company-name,
.portfolio-name,
.company-valuation,
.portfolio-value,
.portfolio-stake,
.timeline-end-amount {
    font-family: var(--ui-font-mono);
}

.portfolio-return.positive,
.stat-positive,
.toast-success,
.timeline-end-amount.positive {
    color: var(--ui-positive);
}

.portfolio-return.negative,
.stat-negative,
.toast-error,
.timeline-end-amount.negative {
    color: var(--ui-negative);
}

.chart-container {
    padding: 0.5rem;
    background: var(--ui-chart-bg);
}

#netWorthChart,
#companyDetailChart,
#vcCompanyDetailChart {
    background: var(--ui-chart-bg);
}

.banking-modal,
.feedback-overlay,
.bankruptcy-popup {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: none !important;
}

.close-btn,
.bankruptcy-close-btn {
    border-radius: var(--ui-radius) !important;
    background: var(--ui-panel-2);
    border: 1px solid var(--ui-rule);
    color: var(--ui-text);
}

.multiplayer-wojak-icon,
.character-art {
    border-radius: var(--ui-radius) !important;
    border: 1px solid var(--ui-rule);
}

.toast {
    border-radius: var(--ui-radius) !important;
    background: var(--ui-panel-2);
    color: var(--ui-text);
    border: 1px solid var(--ui-rule-strong);
    box-shadow: none !important;
}

.feedback-input,
.feedback-email-input {
    background: var(--ui-input-bg);
    color: var(--ui-text);
}

.timeline-end-subtitle,
.bankruptcy-text,
.input-label {
    color: var(--ui-text-dim);
}

/* Button size normalization (excluding icon/close micro-buttons) */
#main-view button:not(.net-worth-help-btn):not(.maxwin-help-btn):not(.maxwin-path-card):not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
#detail-view button:not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
#vc-view button:not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
#vc-detail-view button:not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
#multiplayerModal button:not(.bankruptcy-close-btn):not(.close-btn),
#bankingModal button:not(.bankruptcy-close-btn):not(.close-btn),
#adminModal button:not(.bankruptcy-close-btn):not(.close-btn),
#maxwinSettingsModal button:not(.bankruptcy-close-btn):not(.close-btn),
#maxwinPathSwitchModal button:not(.maxwin-path-card):not(.bankruptcy-close-btn):not(.close-btn) {
    min-height: var(--ui-btn-h);
    padding: 0 var(--ui-btn-pad-x);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

/* Keep header/control rows from wrapping buttons into odd heights */
.header-controls-row,
.controls-group-left,
.controls-group-right,
.maxwin-career-actions,
.multiplayer-actions,
.banking-button-grid,
.admin-actions-row {
    align-items: center;
}

/* Prevent two-row labels on key action buttons */
#vcBtn,
#bankBtn,
#maxwinSettingsBtn,
#multiplayerBtn,
#adminPanelBtn,
#maxwinSwitchPathBtn,
#maxwinStressReliefBtn {
    white-space: nowrap;
}

/* Force career action buttons to terminal colors even when disabled */
#maxwinSwitchPathBtn,
#maxwinStressReliefBtn,
.maxwin-career-actions button {
    background: var(--ui-panel-2) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-rule-strong) !important;
}

#maxwinSwitchPathBtn:disabled,
#maxwinStressReliefBtn:disabled,
.maxwin-career-actions button:disabled,
#main-view button:disabled,
#detail-view button:disabled,
#vc-view button:disabled,
#vc-detail-view button:disabled {
    background: var(--ui-disabled-bg) !important;
    color: var(--ui-disabled-text) !important;
    border-color: var(--ui-disabled-border) !important;
    opacity: 0.75;
}

/* Dark primary dropdowns and form controls with higher specificity */
.market-header .sort-controls select,
.market-header .filter-controls select,
.banking-controls input,
.maxwin-setting-row input,
.maxwin-setting-row select,
#adminModal .maxwin-setting-row input,
#adminModal .maxwin-setting-row select {
    background: var(--ui-input-bg) !important;
    color: var(--ui-input-text) !important;
    border-color: var(--ui-rule-strong) !important;
}

/* Listing cards: dark-primary sector mapping override */
.companies-grid .company-box,
#ventureCompaniesGrid .company-box,
.portfolio-list .portfolio-item {
    color: var(--ui-card-text);
    border-color: #2d3946;
}

.companies-grid .company-box .company-name,
#ventureCompaniesGrid .company-box .company-name,
.portfolio-list .portfolio-item .portfolio-name,
.companies-grid .company-box .company-valuation,
#ventureCompaniesGrid .company-box .company-valuation,
.portfolio-list .portfolio-item .portfolio-value,
.portfolio-list .portfolio-item .portfolio-stake {
    color: var(--ui-card-title);
}

.companies-grid .company-box:not(.bankrupt).sector-tech,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-tech,
.portfolio-list .portfolio-item:not(.bankrupt).sector-tech,
.companies-grid .company-box:not(.bankrupt).sector-web,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-web,
.portfolio-list .portfolio-item:not(.bankrupt).sector-web {
    background: var(--ui-sector-tech-bg) !important;
    border-color: var(--ui-sector-tech-border) !important;
}

.companies-grid .company-box:not(.bankrupt).sector-biotech,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-biotech,
.portfolio-list .portfolio-item:not(.bankrupt).sector-biotech {
    background: var(--ui-sector-biotech-bg) !important;
    border-color: var(--ui-sector-biotech-border) !important;
}

.companies-grid .company-box:not(.bankrupt).sector-banking,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-banking,
.portfolio-list .portfolio-item:not(.bankrupt).sector-banking,
.companies-grid .company-box:not(.bankrupt).sector-realestate,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-realestate,
.portfolio-list .portfolio-item:not(.bankrupt).sector-realestate {
    background: var(--ui-sector-banking-bg) !important;
    border-color: var(--ui-sector-banking-border) !important;
}

.companies-grid .company-box:not(.bankrupt).sector-retail,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-retail,
.portfolio-list .portfolio-item:not(.bankrupt).sector-retail,
.companies-grid .company-box:not(.bankrupt).sector-staples,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-staples,
.portfolio-list .portfolio-item:not(.bankrupt).sector-staples {
    background: var(--ui-sector-retail-bg) !important;
    border-color: var(--ui-sector-retail-border) !important;
}

.companies-grid .company-box:not(.bankrupt).sector-energy,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-energy,
.portfolio-list .portfolio-item:not(.bankrupt).sector-energy,
.companies-grid .company-box:not(.bankrupt).sector-defense,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-defense,
.portfolio-list .portfolio-item:not(.bankrupt).sector-defense {
    background: var(--ui-sector-energy-bg) !important;
    border-color: var(--ui-sector-energy-border) !important;
}

.companies-grid .company-box:not(.bankrupt).sector-airlines,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-airlines,
.portfolio-list .portfolio-item:not(.bankrupt).sector-airlines,
.companies-grid .company-box:not(.bankrupt).sector-aerospace,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-aerospace,
.portfolio-list .portfolio-item:not(.bankrupt).sector-aerospace,
.companies-grid .company-box:not(.bankrupt).sector-automotive,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-automotive,
.portfolio-list .portfolio-item:not(.bankrupt).sector-automotive,
.companies-grid .company-box:not(.bankrupt).sector-industrial,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-industrial,
.portfolio-list .portfolio-item:not(.bankrupt).sector-industrial,
.companies-grid .company-box:not(.bankrupt).sector-manufacturing,
#ventureCompaniesGrid .company-box:not(.bankrupt).sector-manufacturing,
.portfolio-list .portfolio-item:not(.bankrupt).sector-manufacturing {
    background: var(--ui-sector-industrial-bg) !important;
    border-color: var(--ui-sector-industrial-border) !important;
}

.company-sector,
.portfolio-sector {
    color: var(--ui-card-subtext) !important;
}

/* Contrast safety pass for dark theme labels/text */
.drip-label,
.sort-controls label,
.filter-controls label,
.input-label,
.detail-sector,
.detail-mission,
.detail-founders,
.mp-player-list li,
.mp-player-placeholder,
.multiplayer-name-inline .input-label,
.timeline-end-subtitle,
.bankruptcy-text,
.maxwin-setting-note,
.maxwin-path-subtitle,
.sub-financial-display,
#subFinancialDisplay {
    color: var(--ui-text-dim) !important;
}

.market-header .section-title,
.portfolio-header .section-title,
#maxwinCareerTitle {
    color: var(--ui-text) !important;
}

.maxwin-career-stat,
.maxwin-deal-card {
    background: var(--ui-panel-2) !important;
    border-color: var(--ui-rule) !important;
}

.maxwin-career-stat strong,
.maxwin-deal-card strong,
.maxwin-career-subhead {
    color: var(--ui-text) !important;
}

.maxwin-career-stat span,
.maxwin-deal-card span {
    color: var(--ui-text-dim) !important;
}

.controls {
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.controls-group-left,
.controls-group-right {
    flex: 0 0 auto;
    padding: 0;
}

.controls-group-right {
    gap: 0.5rem;
    margin-left: 0;
}

#main-view > .controls {
    justify-content: center;
    gap: 0.35rem;
}

#main-view > .controls .controls-group-left,
#main-view > .controls .controls-group-right {
    gap: 0.35rem;
}

#detail-view .detail-header,
#vc-detail-view .detail-header,
#detail-view .investment-panel,
#vc-detail-view .investment-panel,
#detail-view .financial-table,
#vc-detail-view .financial-table {
    background: var(--ui-panel) !important;
    border-color: var(--ui-rule) !important;
    color: var(--ui-text) !important;
}

#detail-view .detail-header,
#vc-detail-view .detail-header,
#detail-view .investment-panel,
#vc-detail-view .investment-panel {
    padding: 1rem !important;
}

#detail-view .detail-title,
#vc-detail-view .detail-title,
#detail-view .detail-sector,
#vc-detail-view .detail-sector,
#detail-view .detail-mission,
#vc-detail-view .detail-mission,
#detail-view .detail-founders,
#vc-detail-view .detail-founders,
#detail-view .detail-location,
#vc-detail-view .detail-location,
#detail-view .detail-subtext,
#vc-detail-view .detail-subtext {
    color: var(--ui-text) !important;
}

#detail-view .detail-mission,
#vc-detail-view .detail-mission,
#detail-view .detail-sector,
#vc-detail-view .detail-sector,
#detail-view .detail-subtext,
#vc-detail-view .detail-subtext {
    color: var(--ui-text-dim) !important;
}

#detail-view #back-btn,
#detail-view .chart-range-btn,
#vc-detail-view .chart-range-btn {
    background: var(--ui-panel-2) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-rule-strong) !important;
}

#detail-view #back-btn:hover,
#detail-view .chart-range-btn:hover,
#vc-detail-view .chart-range-btn:hover {
    background: var(--ui-hover) !important;
    border-color: var(--ui-accent) !important;
}

#detail-view .financial-table th,
#detail-view .financial-table td,
#vc-detail-view .financial-table th,
#vc-detail-view .financial-table td {
    background: transparent !important;
    color: var(--ui-text) !important;
    border-bottom-color: var(--ui-rule) !important;
    padding: 10px 12px;
}

#detail-view .financial-table th,
#vc-detail-view .financial-table th {
    color: var(--ui-text-dim) !important;
}

#detail-view .investment-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px 18px;
    align-items: start;
    justify-items: start;
    margin-bottom: 0;
}

#detail-view .stake-label,
#detail-view .cash-label {
    text-align: left;
    line-height: 1.2;
}

#detail-view .stake-label .stat-value,
#detail-view .cash-label .stat-value {
    display: block;
    margin-top: 4px;
}

.main-panel-toggle {
    display: none;
}

.main-panel-toggle.is-hidden {
    display: none !important;
}

@media (max-width: 980px) {
    .container {
        border-left: none;
        border-right: none;
    }

    #main-view {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "chart"
            "controls"
            "portfolio"
            "career"
            "market";
        padding: 8px;
    }

    #main-view > .portfolio {
        grid-area: portfolio;
        max-height: none;
    }

    #main-view > .maxwin-career-panel {
        grid-area: career;
    }

    #detail-view,
    #vc-detail-view {
        grid-template-columns: 1fr;
        grid-template-areas:
            "detail-head"
            "detail-chart"
            "detail-invest"
            "detail-extra";
        padding: 8px;
    }

    .header-content {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .controls,
    .portfolio,
    .companies-section,
    .maxwin-career-panel {
        margin-top: 8px;
    }

    #companiesGrid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 981px) and (max-height: 940px) {
    html {
        font-size: clamp(11px, 1.1vw, 14px);
    }

    body {
        padding: 0.5rem;
    }

    .container {
        max-width: min(1380px, calc(100vw - 1rem));
    }

    #main-view {
        grid-template-columns: minmax(0, 1.38fr) minmax(300px, 0.84fr);
        grid-template-areas:
            "header header"
            "chart sidebar-top"
            "controls sidebar-top"
            "panel-toggle panel-toggle"
            "panel-content panel-content";
        gap: 8px;
        padding: 8px;
    }

    .header {
        padding: 0.45rem 0.65rem;
    }

    .header-content {
        gap: 0.8rem;
        align-items: center;
    }

    .player-avatar-stack {
        min-width: 0;
        gap: 10px;
    }

    .wojak-image {
        width: 6.5rem;
        height: 6.5rem;
    }

    .party-avatar {
        width: 80px;
        min-height: 80px;
    }

    .net-worth {
        font-size: 2.35rem;
        margin-bottom: 0.2rem;
    }

    .date {
        font-size: 1rem;
    }

    .sub-financial-display {
        margin-top: 4px;
        font-size: 0.8rem;
    }

    .maxwin-career-hud {
        margin-top: 4px;
        gap: 4px;
    }

    .maxwin-badge {
        min-height: 20px;
        padding: 3px 6px;
        font-size: 11px;
    }

    .header-controls {
        margin-top: 0.75rem;
        margin-right: 0;
        gap: 8px;
    }

    .header-controls-row,
    .controls-group-left,
    .controls-group-right,
    .time-controls-row,
    .market-controls {
        gap: 8px;
    }

    #main-view > .chart-container {
        min-height: 280px;
    }

    .chart-container {
        height: clamp(16rem, 31vh, 20rem);
        padding: 0.65rem;
    }

    #main-view > .controls {
        padding: 0.45rem 0.6rem;
    }

    .controls,
    .portfolio,
    .companies-section,
    .maxwin-career-panel,
    .investment-panel,
    .banking-panel,
    .feedback-modal,
    .bankruptcy-content {
        padding: 0.6rem;
    }

    #main-view > .portfolio {
        min-height: 240px;
        max-height: min(34vh, 320px);
        overflow: auto;
    }

    #main-view > .maxwin-career-panel {
        grid-area: panel-content;
        min-height: 320px;
        max-height: none;
        overflow: visible;
    }

    #main-view > .companies-section {
        grid-area: panel-content;
        min-height: 320px;
    }

    .controls {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .controls-group-left,
    .controls-group-right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 auto;
        width: auto;
        flex-wrap: wrap;
        gap: 0.35rem;
        padding: 0;
    }

    .main-panel-toggle {
        grid-area: panel-toggle;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        justify-self: start;
        padding: 4px;
        border: 1px solid var(--ui-rule);
        border-radius: var(--ui-radius);
        background: var(--ui-panel);
    }

    .main-panel-tab {
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--ui-text-dim);
    }

    .main-panel-tab:hover:not(:disabled) {
        background: var(--ui-hover);
        border-color: var(--ui-rule);
    }

    .main-panel-tab.is-active {
        background: var(--ui-hover);
        border-color: var(--ui-rule-strong);
        color: var(--ui-text);
    }

    #main-view[data-panel-tab="market"] > .maxwin-career-panel {
        display: none;
    }

    #main-view[data-panel-tab="career"] > .companies-section {
        display: none;
    }

    .drip-toggle {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    body:not(.multiplayer-active) .drip-toggle {
        margin-left: 0;
    }

    .portfolio-header,
    .market-header,
    .detail-title-row,
    .banking-header,
    .character-overlay-header {
        margin-bottom: 0.45rem;
        padding-bottom: 0.4rem;
    }

    .maxwin-career-actions {
        gap: 8px;
        margin: 8px 0 12px;
    }

    .companies-grid,
    .portfolio-list,
    .maxwin-career-summary,
    .maxwin-deal-flow,
    .banking-stats {
        gap: 6px;
    }

    .company-box,
    .portfolio-item,
    .maxwin-career-stat,
    .maxwin-deal-card,
    .stat-box {
        padding: 0.7rem;
    }

    #main-view button:not(.net-worth-help-btn):not(.maxwin-help-btn):not(.maxwin-path-card):not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
    #detail-view button:not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
    #vc-view button:not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
    #vc-detail-view button:not(.playback-btn):not(.bankruptcy-close-btn):not(.close-btn),
    #multiplayerModal button:not(.bankruptcy-close-btn):not(.close-btn),
    #bankingModal button:not(.bankruptcy-close-btn):not(.close-btn),
    #adminModal button:not(.bankruptcy-close-btn):not(.close-btn),
    #maxwinSettingsModal button:not(.bankruptcy-close-btn):not(.close-btn),
    #maxwinPathSwitchModal button:not(.maxwin-path-card):not(.bankruptcy-close-btn):not(.close-btn) {
        min-height: 38px;
        padding: 0 10px;
    }

    .speed-slider-row {
        min-width: 9.5rem;
    }

    #speedSlider {
        width: 8.5rem;
    }
}

.banking-modal {
    padding: 12px;
    overflow-y: auto;
    align-items: center;
}

.banking-panel {
    width: min(760px, calc(100vw - 24px));
    max-height: min(88dvh, 780px);
    overflow-y: auto;
    padding: 1.25rem;
}

.banking-header {
    min-height: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
}

.boomer-wojak-icon {
    height: 96px;
    left: 56%;
    top: 50%;
}

.banking-stats {
    gap: 12px;
    margin-bottom: 1rem;
}

.banking-controls {
    gap: 12px;
}

.banking-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 981px) and (max-height: 940px) {
    .portfolio-list,
    .companies-grid,
    .maxwin-deal-flow {
        gap: 0.3rem;
    }

    .banking-panel {
        max-height: 90dvh;
        padding: 1rem;
    }

    .boomer-wojak-icon {
        display: none;
    }
}