/* Cybertruck fund tracker. Separate from the game CSS so open PRs can keep moving. */

.ct-fund-toggle,
.ct-fund-panel,
.ct-fund-article {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.ct-drive button.ct-fund-toggle {
    pointer-events: auto;
    min-height: 32px;
    margin-left: 10px;
    padding: 4px 8px;
    border: 1px solid #ffffff40;
    border-radius: 2px;
    background: transparent;
    color: #f4f4f4;
    font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: none;
    touch-action: manipulation;
}

.ct-drive button.ct-fund-toggle[aria-expanded="true"],
.ct-drive button.ct-fund-toggle:hover {
    background: #f4f4f4;
    color: #111;
}

.ct-fund-panel {
    position: absolute;
    top: calc(max(12px, env(safe-area-inset-top)) + 84px);
    left: max(12px, env(safe-area-inset-left));
    z-index: 45;
    width: min(400px, calc(100% - 24px));
    max-height: calc(100dvh - 160px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    border: 1px solid #3a3a3a;
    background: #0d0d0d;
    color: #e8e8e8;
    box-shadow: none;
}

.ct-fund-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ct-fund-panel h2,
.site-shell.ct-page .site-content .ct-fund-article h2 {
    margin: 0;
    color: #cfcfcf;
    font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ct-drive button.ct-fund-close {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #4a4a4a;
    border-radius: 2px;
    background: transparent;
    color: #d8d8d8;
    font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ct-fund-article {
    margin: 28px auto 8px;
    padding: 22px 0 8px;
    border-top: 1px solid #222;
}

.ct-fund-article .ct-fund {
    margin-top: 16px;
    padding: 18px 16px 14px;
    border: 1px solid #2c2c2c;
    background: #101010;
}

.ct-driving .ct-fund-article,
.ct-game-start .ct-fund-article {
    display: none;
}

.ct-fund-balance { margin-bottom: 12px; }

.site-shell .site-content .ct-fund-amount,
.ct-fund-amount {
    margin: 0;
    color: #f5f5f5;
    font: 36px/1.05 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.site-shell .site-content .ct-fund-meta,
.ct-fund-meta {
    margin: 8px 0 0;
    color: #a3a3a3;
    font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ct-fund-gauge {
    position: relative;
    height: 12px;
    margin: 4px 0 6px;
    overflow: hidden;
    border: 1px solid #5a5a5a;
    border-radius: 2px;
    background: #1b1b1b;
}

.ct-fund-gauge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: #f2f2f2;
}

.site-shell .site-content .ct-fund-gauge-scale,
.ct-fund-gauge-scale {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 4px;
    color: #c4c4c4;
    font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.ct-fund-trims[hidden] { display: none; }

/* Immersive mode hides the fund toggle and panel with the rest of the HUD. */
.ct-drive.is-immersive .ct-fund-toggle,
.ct-drive.is-immersive .ct-fund-panel { display: none !important; }

/* While the fund is open, the touch controls step aside so nothing sits under the panel. */
.ct-drive.is-fund-open .ct-drive-touch,
.ct-drive.is-fund-open .ct-pad-banner,
.ct-drive.is-fund-open .ct-drive-interact,
.ct-drive.is-fund-open .ct-drive-minimap { visibility: hidden; }

.ct-fund-chart {
    width: 100%;
    min-height: 132px;
    margin: 8px 0 16px;
}

.ct-fund-chart svg {
    display: block;
    width: 100%;
    height: 132px;
}

.ct-fund-chart text {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ct-fund-trims {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
}

.ct-drive .ct-fund-trim,
.ct-fund-trim {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #2f2f2f;
    border-radius: 2px;
    background: transparent;
    color: #d7d7d7;
    font: 12px/1.35 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    touch-action: manipulation;
}

.ct-fund-trim span:first-child { flex: 1 1 auto; min-width: 0; }
.ct-fund-trim span:last-child {
    flex: none;
    color: #bdbdbd;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

.ct-drive .ct-fund-trim:hover,
.ct-fund-trim:hover { border-color: #6a6a6a; }

.ct-drive .ct-fund-trim[aria-pressed="true"],
.ct-fund-trim[aria-pressed="true"] {
    border-color: #e8e8e8;
    background: #ececec;
    color: #161616;
}

.ct-fund-trim[aria-pressed="true"] span:last-child { color: #333; }

.ct-fund-ledger {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #2a2a2a;
}

.ct-fund-ledger li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #2a2a2a;
}

.ct-fund-entry {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #f0f0f0;
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

.site-shell .site-content .ct-fund-ledger p,
.ct-fund-ledger p {
    margin: 4px 0 0;
    color: #9a9a9a;
    font: 12px/1.45 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

.site-shell .site-content .ct-fund-note,
.ct-fund-note {
    margin: 0 0 8px;
    color: #a8a8a8;
    font: 11px/1.5 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

.site-shell .site-content .ct-fund-foot,
.ct-fund-foot {
    margin: 0;
    color: #a0a0a0;
    font: 11px/1.5 Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.ct-fund-panel,
.ct-fund-article .ct-fund {
    box-sizing: border-box;
}

@media (max-width: 430px) {
    .ct-fund-panel {
        top: calc(max(10px, env(safe-area-inset-top)) + 92px);
        left: max(10px, env(safe-area-inset-left));
        right: max(10px, env(safe-area-inset-right));
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 148px);
        padding: 14px;
    }

    .site-shell .site-content .ct-fund-amount,
    .ct-fund-amount { font-size: 30px; }

    .ct-drive button.ct-fund-toggle {
        min-height: 36px;
        margin-left: 6px;
        padding: 6px 8px;
    }

}

@media (max-width: 360px) {
    .site-shell .site-content .ct-fund-amount,
    .ct-fund-amount { font-size: 26px; }

    .ct-fund-panel { padding: 12px; }
}

@media (max-height: 450px) and (orientation: landscape) {
    .ct-fund-panel {
        top: max(8px, env(safe-area-inset-top));
        max-height: calc(100dvh - 16px);
    }

    /* Short landscape screens: the panel takes the top-left corner, so the brand and world row step aside. */
    .ct-drive.is-fund-open .ct-game-brand,
    .ct-drive.is-fund-open .ct-drive-destination { visibility: hidden; }
}

@media (pointer: coarse), (max-width: 700px) {
    .ct-drive button.ct-fund-close,
    .ct-drive .ct-fund-trim { min-height: 44px; }
}