@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
    /* ── Design tokens (Phase 1: values match the legacy palette exactly;
       the visual redesign re-points these, not the 4k lines below) ───── */

    /* Neutral ramp — darkest to lightest surface/border grays */
    --ink-0: #0c0e12;   /* page base */
    --ink-1: #11141a;
    --ink-2: #161a21;
    --ink-3: #1d222b;
    --ink-4: #232935;
    --ink-5: #2a303c;
    --ink-6: #313947;
    --ink-7: #3d4655;
    --ink-8: #4c5666;
    --ink-9: #5d6878;

    /* Muted text ramp — dim to bright */
    --mut-1: #7d8798;
    --mut-2: #98a2b1;
    --mut-25: #a8b1bf;
    --mut-3: #b9c1cd;
    --mut-4: #cbd2db;
    --mut-5: #dde2e9;
    --text:  #f4f6f9;

    /* Blue-gray family (funnel / newer panels) */
    --slate: #8892a6;
    --slate-dim: #6a7183;
    --panel-1: #0f1218;
    --panel-2: #12151d;
    --panel-border: #2a2f3a;
    --panel-border-dim: #262b36;

    /* Market semantics */
    --green: #00C805;
    --red:   #E03030;
    --red-soft: #ff6b6b;

    /* Legacy accents — being phased out (repointed during the visual pass) */
    --amber: #FFB800;
    --gold:  var(--coral);   /* gold retired → warm coral takes the celebration role */

    /* New accent — terminal violet (unused until the visual pass) */
    --accent: #8b7cf6;
    --accent-hover: #9d92f8;
    --accent-soft: #b1b9f9;

    /* Secondary warm accents — Claude-terminal salmon/coral pair.
       Use sparingly (ranks, celebrations, EXIT states) so violet stays rare too. */
    --coral: #d97757;
    --coral-soft: #eda27f;

    /* Type */
    --pt-mono: "JetBrains Mono", "Courier New", monospace;
    --pt-sans: "Inter", system-ui, sans-serif;

    /* Legacy aliases (pre-existing names still referenced below) */
    --pt-green: var(--green);
    --pt-red:   var(--red);
    --pt-amber: var(--accent);
    --pt-bg:    var(--ink-0);
    --pt-border: var(--ink-3);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--ink-0);
    font-family: 'Inter', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
}

/* ---- HUD ---- */
#hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 8px 16px;
    background: var(--ink-0);
    border-bottom: 1px solid var(--ink-3);
    flex-shrink: 0;
    width: 100%;
}
/* Three HUD zones: ticker/info (left), controls (centre), portfolio (right). */
#hud-left, #hud-controls, #hud-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
}
#hud-right { justify-content: flex-end; margin-left: auto; }

#liveIndicator {
    font-size: 15px;
    color: var(--text);
    font-weight: bold;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.dot {
    color: #ff0000;
    margin-right: 5px;
    animation: blink 1s infinite alternate;
}

@keyframes blink {
    from { opacity: 1; }
    to { opacity: 0.1; }
}

.hud-item {
    font-size: 14px;
    color: white;
    font-weight: 600;
    white-space: nowrap;
}

#pnlStats {
    font-size: 12px;
    margin-top: 2px;
    font-weight: normal;
}

.profit { color: var(--green); }
.loss   { color: var(--red); }

#musicSelector select {
    background: var(--ink-4);
    color: var(--green);
    border: 1px solid var(--green);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    cursor: pointer;
}

/* Speed control — vertical bar on left side of canvas, SPY mode only */
/* let the top bar's left group (and the speed chip inside it) absorb free width */
#hud-left { flex: 1 1 auto; }

#speedControl {
    flex: 1 1 auto;
    min-width: 140px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: var(--ink-1);
    border: 1px solid var(--ink-6);
    border-radius: 10px;
    padding: 2px 10px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--mut-2);
    font-size: 12px;
    pointer-events: all;
}

.speed-label-txt {
    font-size: 10px;
    opacity: 0.7;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#speedLabel {
    min-width: 34px;
    font-weight: bold;
    text-align: center;
    font-size: 12px;
}

/* horizontal slider footprint inside the top bar — grows to fill the chip */
.speed-slider-wrap {
    flex: 1 1 auto;
    width: auto;
    min-width: 60px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

#speedSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--ink-6);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}


#speedSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(139,124,246,0.5);
}

#speedSlider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* ---- Seat Scoreboard (HUD) ---- */
#seat-scoreboard {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.seat-badge {
    font-size: 11px;
    font-weight: bold;
    color: var(--seat-color, var(--mut-2));
    border: 1px solid var(--seat-color, var(--ink-7));
    border-radius: 10px;
    padding: 2px 8px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.seat-badge.active {
    opacity: 1;
    background: rgba(255,255,255,0.06);
}

.seat-badge:hover {
    opacity: 0.85;
}

/* ---- Seat Settings (in modal) ---- */
#seat-settings {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 4px;
}

.seat-setting-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--ink-4);
}

.seat-setting-row.active-seat {
    border-color: var(--green);
    background: rgba(0,200,5,0.04);
}

.seat-dot {
    font-size: 14px;
    flex-shrink: 0;
}

.seat-name-input {
    width: 70px;
    background: var(--ink-2);
    color: var(--mut-3);
    border: 1px solid var(--ink-6);
    font-family: monospace;
    font-size: 11px;
    padding: 3px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

.seat-secret-input {
    flex: 1;
    background: var(--ink-2);
    color: var(--mut-3);
    border: 1px solid var(--ink-6);
    font-family: monospace;
    font-size: 11px;
    padding: 3px 5px;
    border-radius: 3px;
    min-width: 0;
}

.seat-play-btn {
    background: var(--ink-3);
    color: var(--mut-1);
    border: 1px solid var(--ink-7);
    font-family: monospace;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.seat-play-btn.playing {
    background: #001802;
    color: var(--green);
    border-color: var(--green);
}

/* HUD icon-only buttons (emoji, no border) */
#muteHudBtn, #sfxMuteHudBtn {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 5px;
    opacity: 0.65;
    transition: opacity .15s;
    line-height: 1;
}
#muteHudBtn:hover, #sfxMuteHudBtn:hover { opacity: 1; }

/* HUD text buttons — rounded rectangle */
#settingsBtn, #skinsBtn, #calendarBtn {
    background: transparent;
    color: var(--mut-2);
    border: 1px solid var(--ink-3);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
}
#settingsBtn:hover, #skinsBtn:hover, #calendarBtn:hover { color: var(--text); border-color: var(--ink-7); background: var(--ink-2); }

/* ---- Main Area ---- */
#main-area {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* ---- Unlock toast on game-over screen ---- */
#unlockToast {
    margin: 14px auto;
    padding: 12px 16px;
    background: rgba(20, 0, 30, 0.85);
    border: 1px solid #cc44ff;
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(204, 68, 255, 0.4);
    text-align: left;
    max-width: 360px;
}
.unlock-row {
    display: flex; align-items: center; gap: 10px;
    color: #f0c0ff; font-family: 'JetBrains Mono', monospace; font-size: 14px;
    margin: 4px 0;
}
.unlock-row img { width: 48px; height: 32px; object-fit: contain; flex-shrink: 0; }
.skin-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.unlock-row strong { color: #ffe0ff; }

/* ---- Skins picker modal ---- */
#skinsModal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    overflow-y: auto; padding: 20px;
}
.skins-card {
    background: rgba(10, 0, 20, 0.97);
    border: 2px solid #cc44ff;
    border-radius: 10px;
    padding: 20px 24px;
    max-width: 540px;
    width: 100%;
    color: white;
    font-family: 'JetBrains Mono', monospace;
}
.skins-card h2 { color: #cc44ff; margin: 0 0 6px; font-size: 22px; text-align: center; }
.skins-sub { color: var(--mut-2); font-size: 12px; margin: 0 0 16px; text-align: center; }
#skinsGrid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.skin-cell {
    background: #1a0a26;
    border: 1px solid #4a1f5e;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.skin-cell:hover { background: #2a1238; border-color: #cc44ff; }
.skin-cell.locked { opacity: 0.45; cursor: default; }
.skin-cell.locked:hover { background: #1a0a26; border-color: #4a1f5e; }
.skin-cell.active { border-color: var(--green); background: #0a2a18; box-shadow: 0 0 10px rgba(0, 200, 5, 0.3); }
.skin-preview {
    position: relative;
    height: 60px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
}
.skin-preview img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.skin-lock {
    position: absolute; font-size: 22px;
    text-shadow: 0 0 6px black, 0 0 4px black;
}
.skin-name { font-size: 12px; color: var(--mut-4); margin-bottom: 2px; font-weight: bold; }
.skin-criterion { font-size: 9px; color: var(--mut-1); line-height: 1.2; }
.skin-cell.active .skin-name { color: var(--green); }

#skinsCloseBtn {
    width: 100%; padding: 10px;
    background: #1a0a26; color: #cc44ff; border: 1px solid #cc44ff;
    font-family: inherit; font-size: 14px; cursor: pointer; border-radius: 4px;
}
#skinsCloseBtn:hover { background: #2a1238; }

/* ---- Pause menu + profile modal ---- */
#pauseMenu, #profileModal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.pause-card, .profile-card {
    background: var(--ink-1);
    border: 1px solid var(--ink-4);
    border-radius: 10px;
    padding: 28px 36px;
    min-width: 280px;
    max-width: 360px;
    color: white;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    text-align: center;
    box-shadow: 0 0 24px rgba(0, 200, 5, 0.25);
}
.pause-card h2, .profile-card h2 { color: var(--text); margin: 0 0 14px; font-size: 22px; font-family: "Inter", system-ui, sans-serif; }
.profile-sub { color: var(--mut-2); font-size: 13px; margin: 0 0 18px; }
.pause-hint { color: var(--ink-9); font-size: 11px; margin: 14px 0 0; }
.pause-primary, .pause-secondary, #profileSaveBtn {
    width: 100%; padding: 10px;
    background: var(--green); color: var(--ink-0); border: none;
    font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 8px;
    margin-top: 8px;
}
.pause-secondary { background: #220000; color: #ff6666; border-color: #ff6666; }
.pause-primary:hover, #profileSaveBtn:hover { background: #003300; }
.pause-secondary:hover { background: #330000; }
.profile-field { text-align: left; margin: 12px 0; }
.profile-field > label { display: block; color: var(--mut-2); font-size: 11px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.profile-field input[type="text"] {
    width: 100%; background: #001a00; color: var(--green); border: 1px solid var(--green);
    padding: 8px 10px; font-family: inherit; font-size: 14px; border-radius: 3px; outline: none;
}
.profile-flags { display: flex; flex-direction: column; gap: 6px; }
.profile-flags label { color: var(--mut-4); font-size: 13px; cursor: pointer; }
.profile-flags input[type="radio"] { margin-right: 8px; }
#profileOtherCountry { margin-top: 8px; }

/* ---- Race flip-board (left panel, only visible during ghost races) ---- */
#raceBoard {
    width: 110px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.85);
    border-right: 2px solid var(--ink-3);
    display: flex;
    flex-direction: column;
    color: white;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    overflow-y: auto;
    padding: 4px 2px;
    gap: 2px;
}
.rb-row {
    display: grid;
    grid-template-columns: 18px 8px 1fr;
    grid-template-rows: auto auto;
    gap: 1px 4px;
    padding: 4px 4px;
    border-bottom: 1px solid var(--ink-3);
    font-size: 10px;
    align-items: center;
}
.rb-row.rb-you {
    background: rgba(0, 200, 5, 0.05);
    border: 1px solid var(--ink-3);
    border-left: 3px solid var(--green);
    border-radius: 3px;
}
.rb-row.rb-out {
    opacity: 0.35;
    text-decoration: line-through;
}
.rb-rank {
    grid-row: span 2;
    font-size: 14px;
    text-align: center;
}
.rb-num {
    color: var(--mut-1);
    font-weight: bold;
    font-size: 11px;
}
.rb-dot {
    grid-row: span 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    align-self: center;
}
.rb-name {
    font-weight: bold;
    font-size: 9px;
    color: var(--mut-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rb-pnl {
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
}
.rb-action {
    grid-column: 1 / -1;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    margin-top: 2px;
    padding: 2px 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
}
.rb-action.profit { color: var(--green); box-shadow: inset 0 0 0 1px rgba(0, 200, 5, 0.4); }
.rb-action.loss   { color: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 80, 0, 0.4); }
@media (max-width: 600px) {
    #raceBoard { width: 88px; }
    .rb-row { font-size: 9px; }
    .rb-name, .rb-pnl { font-size: 8px; }
}

#canvas-container {
    flex: 1;
    position: relative;
    min-width: 0;
    touch-action: none;
}

/* Zoom reset pill — floats bottom-right of chart, hidden at default zoom */
#zoomResetBtn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(4, 4, 8, 0.88);
    color: var(--mut-3);
    border: 1px solid rgba(139,124,246, 0.28);
    border-radius: 4px;
    font-family: var(--pt-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    cursor: pointer;
    pointer-events: all;
    transition: border-color 0.15s, background 0.15s;
    letter-spacing: 0.5px;
}
#zoomResetBtn:hover {
    border-color: var(--mut-3);
    background: rgba(139,124,246, 0.1);
}

canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ink-0);
    display: block;
    cursor: pointer;
}

/* ---- Side Panel ---- */
#side-panel {
    width: 220px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.85);
    border-left: 2px solid var(--ink-6);
    display: flex;
    flex-direction: column;
    color: white;
}

#side-panel h3 {
    text-align: center;
    padding: 8px;
    margin: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--ink-4);
    font-size: 13px;
    color: var(--green);
}

/* Column toggle buttons */
#tape-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 5px 6px;
    background: var(--ink-1);
    border-bottom: 1px solid var(--ink-4);
}

.tape-toggle {
    background: var(--ink-3);
    color: var(--ink-8);
    border: 1px solid var(--ink-6);
    border-radius: 3px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 9px;
    padding: 2px 5px;
    cursor: pointer;
    flex: 1;
    white-space: nowrap;
}

.tape-toggle.active {
    background: var(--ink-3);
    color: var(--mut-3);
    border-color: var(--ink-7);
}

.tape-toggle.export-csv {
    background: #001a26;
    color: var(--mut-3);
    border-color: var(--mut-3);
    flex: 0 0 auto;
}
.tape-toggle.export-csv:hover {
    background: #003040;
    color: #66e0ff;
}

#timeAndSales {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 10px;
}

.tape-header {
    display: flex;
    padding: 3px 6px;
    background: #181818;
    font-weight: bold;
    color: var(--ink-8);
    gap: 4px;
}

.tape-header span,
#tapeList li span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column-specific widths */
.col-time  { flex: 1.4; }
.col-side  { flex: 0.8; }
.col-qty   { flex: 1.2; }
.col-price { flex: 1.2; }
.col-pnl   { flex: 1.1; text-align: right; }

/* Column visibility toggles */
#timeAndSales.hide-time  .col-time  { display: none; }
#timeAndSales.hide-side  .col-side  { display: none; }
#timeAndSales.hide-qty   .col-qty   { display: none; }
#timeAndSales.hide-price .col-price { display: none; }
#timeAndSales.hide-pnl   .col-pnl   { display: none; }

#tapeList {
    list-style: none;
    padding: 0;
    margin: 0;
}

#tapeList li {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-bottom: 1px solid var(--ink-2);
}

#tapeList li .col-side { font-weight: bold; }

.tape-buy  .col-side { color: var(--green); }
.tape-sell .col-side { color: var(--red); }
.tape-exit .col-side { color: #ffaa00; }

.tape-pnl-profit { color: var(--green); }
.tape-pnl-loss   { color: var(--red); }

/* ---- Progress Scrubber ---- */
#progress-container {
    flex-shrink: 0;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid var(--ink-4);
    width: 100%;
    position: relative;
    cursor: pointer;
    transition: height 0.12s ease;
    z-index: 5;
}

#progress-container:hover,
#progress-container.scrubbing {
    height: 14px;
}

#progress-bar {
    width: 0%;
    height: 100%;
    background: var(--accent);
    transition: width 0.1s linear;
    pointer-events: none;
}

#progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--text);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(139,124,246, 0.8);
    border: 1px solid var(--ink-6);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 6;
}

#progress-container:hover #progress-thumb,
#progress-container.scrubbing #progress-thumb {
    opacity: 1;
}

/* ---- Speed Toast ---- */
#speed-toast {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--ink-2);
    border: 1px solid var(--ink-6);
    color: var(--text);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 32px;
    font-weight: bold;
    padding: 10px 18px;
    border-radius: 12px;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#speed-toast.visible {
    opacity: 1;
}

/* ---- Start Countdown (3-2-1-GO traffic light) ---- */
#startCountdown {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;   /* trades are blocked in executeTrade, not here */
    z-index: 40;            /* above speed-toast (20), below pause menu */
}

#startCountdown.hidden { display: none; }

/* Horizontal housing, Mario-Kart style — codepen's #333 rounded body */
.cd-lights {
    display: flex;
    gap: 18px;
    padding: 16px 22px;
    background-color: #333;
    border-radius: 30px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

.cd-light {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    background-color: grey;
    transition: background-color 0.1s step-end;
}

/* Lit lamps — colors + glow from the codepen traffic light */
.cd-light.red {
    background-color: #FF0000;
    box-shadow: 0 0 2em #ff3333;
}
.cd-light.green {
    background-color: #00FF00;
    box-shadow: 0 0 2em #33ff33;
}

#cdNumber {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: bold;
    font-size: min(24vh, 150px);
    line-height: 1;
    color: #FF0000;
    text-shadow: 0 0 0.4em #ff3333;
    user-select: none;
}

#cdNumber.go {
    color: #00FF00;
    text-shadow: 0 0 0.4em #33ff33;
}

#cdNumber.pop {
    animation: cdPop 0.75s ease-out;
}

@keyframes cdPop {
    0%   { transform: scale(1.6); opacity: 0; }
    25%  { transform: scale(1);   opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0.25; }
}

@media (max-width: 600px) {
    .cd-light { width: 32px; height: 32px; }
    .cd-lights { gap: 12px; padding: 12px 16px; }
}

/* ---- Mobile Controls ---- */
#mobile-controls {
    display: none;
    flex-shrink: 0;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ink-1);
    border-top: 1px solid var(--ink-3);
    justify-content: center;
}

.mobile-btn {
    flex: 1;
    max-width: 150px;
    padding: 16px 8px;
    font-size: 17px;
    font-weight: bold;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    border: 2px solid;
    border-radius: 6px;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

#mobileBuyBtn {
    background: var(--green);
    color: var(--ink-0);
    border-color: var(--green);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
}

#mobileSellBtn {
    background: var(--red);
    color: var(--text);
    border-color: var(--red);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
}

#mobileSellAllBtn {
    background: rgba(40, 30, 0, 0.95);
    color: #ffaa00;
    border-color: #ffaa00;
    max-width: 100px;
    font-size: 12px;
}

/* ---- Overlays ---- */
#settingsModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: #0a0a1a;
    border: 1px solid var(--ink-6);
    border-radius: 10px;
    padding: 28px 32px 24px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--mut-5);
}

.modal-content h2 {
    color: var(--text);
    font-size: 20px;
    margin: 0 0 14px;
}

.settings-section-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-7);
    border-top: 1px solid var(--ink-4);
    padding-top: 10px;
    margin: 10px 0 8px;
}

#alpacaSettings input[type="text"],
#alpacaSettings input[type="password"] {
    width: 130px;
    background: var(--ink-4);
    color: var(--green);
    border: 1px solid var(--green);
    padding: 3px 5px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
}

#dataSource {
    background: var(--ink-4);
    color: var(--green);
    border: 1px solid var(--green);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    padding: 2px 4px;
    cursor: pointer;
}

.setting-item {
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-item label {
    font-size: 13px;
}

.setting-item input[type="number"] {
    width: 100px;
    background: var(--ink-4);
    color: var(--green);
    border: 1px solid var(--green);
    padding: 3px 5px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

#saveSettingsBtn {
    width: 100%;
    padding: 10px;
    background: rgba(0, 200, 5, .32);
    color: #eaffee;
    border: 1px solid var(--green);
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .12s;
}

#saveSettingsBtn:hover {
    background: rgba(0, 200, 5, .48);
}

/* ---- Game Over ---- */
/* gameOver = full-screen backdrop; gameOverCard = the actual box */
#gameOver {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 10, 0.82);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}
#gameOverCard {
    position: relative;
    background: rgba(12,14,18,0.97);
    padding: 28px 32px;
    border-radius: 10px;
    text-align: center;
    color: white;
    border: 1px solid var(--ink-6);
    width: min(500px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    flex-shrink: 0;
}
.game-over-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 1px solid var(--ink-6);
    color: var(--ink-9);
    font-size: 14px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-family: inherit;
    transition: color .15s, border-color .15s;
}
.game-over-close-btn:hover { color: var(--text); border-color: var(--accent); }

/* ── Game-over ranking panels (AI race + tournament standings) ─────────────── */
.go-rank-panel {
    margin: 14px 0 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139,124,246, 0.35);
    border-radius: 8px;
    text-align: left;
}
.go-rank-panel.hidden { display: none; }
.go-rank-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: 0.3px;
}
.go-rank-rows { display: flex; flex-direction: column; gap: 2px; }
.go-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.3;
}
.go-rank-row.go-rank-me {
    background: rgba(139,124,246, 0.14);
    box-shadow: inset 0 0 0 1px rgba(139,124,246, 0.4);
    font-weight: 700;
}
.go-rank-pos {
    min-width: 30px;
    text-align: center;
    color: var(--mut-3);
    font-variant-numeric: tabular-nums;
}
.go-rank-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.go-rank-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mut-5);
}
.go-rank-score { font-variant-numeric: tabular-nums; font-weight: 700; }
.go-pnl-pos { color: var(--green); }
.go-pnl-neg { color: var(--red); }
.go-rank-sep { text-align: center; color: var(--ink-9); font-size: 12px; padding: 1px 0; }
.go-rank-note {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    text-align: center;
    color: #9fe;
}

#gameOver h2 {
    margin-top: 0;
    font-size: 28px;
    color: var(--text);
}

#gameOver p {
    margin: 6px 0;
    font-size: 15px;
    color: var(--mut-3);
}

/* ---- Leaderboard ---- */
#leaderboard {
    margin-top: 18px;
    text-align: left;
}

#leaderboard h3 {
    color: var(--green);
    font-size: 11px;
    margin: 0 0 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
}

#highScores {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Scroll the Wall of Fame independently so a long list doesn't stretch the
       whole game-over card. Roughly ~4 entries tall before it scrolls. */
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
/* Slim scrollbar so the inner scroll reads as intentional, not clipped. */
#highScores::-webkit-scrollbar { width: 7px; }
#highScores::-webkit-scrollbar-thumb { background: var(--ink-6); border-radius: 4px; }
#highScores::-webkit-scrollbar-thumb:hover { background: var(--ink-7); }
#highScores { scrollbar-width: thin; scrollbar-color: var(--ink-6) transparent; }

/* Inline SVG country flags (render on every OS, unlike flag emoji on Windows). */
.cflag {
    display: inline-block;
    width: 18px;
    height: 12px;
    vertical-align: -1px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    margin-right: 1px;
}
.cflag-globe { font-size: 13px; vertical-align: -1px; }

/* Account username rename UI */
.acct-rename-btn {
    background: none; border: 0; color: #7fb0ff; font-size: 11px;
    cursor: pointer; padding: 2px 0; font-family: inherit; text-align: left;
}
.acct-rename-btn:hover { text-decoration: underline; }
.acct-rename-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.acct-rename-row input {
    flex: 1 1 150px; min-width: 120px; padding: 6px 8px;
    background: #0e0e16; border: 1px solid var(--ink-6); border-radius: 5px;
    color: var(--mut-5); font-family: inherit; font-size: 13px;
}
.acct-rename-save {
    padding: 6px 12px; background: rgba(0,200,5,.32); color: #eaffee; border: 1px solid var(--green);
    border-radius: 5px; font-family: inherit; font-weight: 700; cursor: pointer;
}
.acct-rename-save:disabled { opacity: .5; cursor: default; }
.acct-rename-cancel {
    padding: 6px 10px; background: var(--ink-4); color: var(--mut-3); border: 1px solid var(--ink-7);
    border-radius: 5px; font-family: inherit; cursor: pointer;
}
.acct-rename-hint { flex-basis: 100%; font-size: 10px; color: var(--ink-9); }
.acct-rename-err { flex-basis: 100%; font-size: 11px; color: var(--red-soft); }

#highScores li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--ink-5);
    border-radius: 7px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.lb-name {
    font-size: 13px;
    color: var(--mut-1);
    font-weight: normal;
}

.lb-pnl {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.1;
}

.lb-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.lb-time {
    font-size: 11px;
    color: var(--ink-9);
}

.lb-badge {
    font-size: 10px;
    color: var(--ink-8);
    background: #181818;
    border: 1px solid var(--ink-5);
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
}

.hidden {
    display: none !important;
}

#restartBtn {
    margin: 20px 0;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    background-color: var(--accent);
    border: none;
    border-radius: 5px;
    color: var(--ink-0);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

#restartBtn:hover {
    background-color: #ff66aa;
}

/* ---- Result Summary ---- */
#resultSummary {
    margin: 12px 0 16px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid var(--ink-6);
}

#resultAmount {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 8px;
}

#resultAmount.profit { color: var(--green); }
#resultAmount.loss   { color: var(--red); }

#leaderboardPosition {
    font-size: 18px;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 5px;
}

#resultMessage {
    font-size: 13px;
    color: var(--mut-2);
}

/* ---- Leaderboard glow (leaderboard entry) ---- */
@keyframes lbGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), 0 0 60px rgba(255, 215, 0, 0.1); border-color: var(--gold); }
    50%       { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6), 0 0 100px rgba(255, 215, 0, 0.2); border-color: #ffe55c; }
}

#gameOver.leaderboard-glow #gameOverCard {
    animation: lbGlow 1.8s ease-in-out infinite;
    border-color: var(--gold);
}

.lb-highlight {
    background: rgba(255, 215, 0, 0.08) !important;
    border-color: var(--gold) !important;
}

.lb-highlight .lb-name {
    color: var(--gold);
}

/* ---- Confetti canvas ---- */
#confettiCanvas {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: auto;
    z-index: 300;
}

/* ---- Level Select ---- */
#levelSelect {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.90);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.level-select-inner {
    background: var(--ink-1);
    border: 1px solid var(--ink-3);
    border-radius: 10px;
    padding: 24px 28px;
    width: min(500px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
    color: white;
}

.level-select-inner h2 {
    color: var(--text);
    font-size: 20px;
    margin: 0 0 14px;
}

#quickPlayBtn {
    width: 100%;
    padding: 12px;
    background: var(--green);
    color: var(--ink-0);
    border: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
}

#quickPlayBtn:hover { background: #003804; }

#levelSelectStatus {
    font-size: 11px;
    color: #ff9900;
    min-height: 16px;
    margin: 6px 0 4px;
}

#noKeysWarning {
    font-size: 11px;
    color: #ff6666;
    margin-bottom: 8px;
    padding: 6px 8px;
    background: rgba(255, 80, 0, 0.08);
    border: 1px solid #440000;
    border-radius: 4px;
}

.level-row {
    display: grid;
    grid-template-columns: 88px 1fr 1fr 1fr;
    gap: 5px;
    align-items: center;
    margin-bottom: 5px;
}

.level-date {
    font-size: 11px;
    color: var(--mut-1);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.level-btn {
    padding: 6px 4px;
    background: #001a00;
    color: #00cc00;
    border: 1px solid #003804;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10px;
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
}

.level-btn:hover { background: #003300; border-color: #009804; }

.level-btn-full {
    background: #00001a;
    color: #6699ff;
    border-color: #003399;
}

.level-btn-full:hover { background: #000033; border-color: #6699ff; }

.level-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    #side-panel {
        display: none;
    }

    #mobile-controls {
        display: flex;
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .mobile-btn {
        padding: 18px 8px;
        font-size: 16px;
    }

    #hud {
        padding: 4px 8px;
        gap: 3px 6px;
        justify-content: space-between;
    }

    .hud-item {
        font-size: 12px;
    }

    #liveIndicator {
        font-size: 11px;
        padding: 2px 4px;
    }

    #pnlStats {
        font-size: 9px;
    }

    /* Keep the three HUD zones compact so ticker (left) + portfolio (right) stay
       on the top line and the controls wrap below if needed. */
    #hud-left, #hud-controls, #hud-right { gap: 3px 8px; }
    #hud-controls { flex: 1 1 100%; order: 3; justify-content: flex-start; }
    #portfolioValue { font-size: 15px; min-width: 0; }
    .pb-label { font-size: 8px; letter-spacing: 0.08em; }

    .btn-text {
        display: none;
    }

    #settingsBtn, #accountBtn {
        font-size: 16px;
        padding: 0;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(139,124,246, 0.4);
    }

    #settingsBtn .btn-icon, #accountBtn .btn-icon {
        font-size: 16px;
        line-height: 1;
    }

    /* Keep the mute buttons reachable on mobile — players need to silence audio
       on a phone as much as on desktop. Only the help "?" is dropped for space. */
    #tutHelpSelector {
        display: none !important;
    }
    #muteHudBtn, #sfxMuteHudBtn {
        touch-action: manipulation;
        min-width: 30px; min-height: 30px;
    }

    #speedControl { min-width: 100px; }
    .speed-slider-wrap {
        height: 18px;
        min-width: 50px;
    }


    .level-select-inner {
        padding: 16px 14px;
    }

    .level-row {
        grid-template-columns: 72px 1fr 1fr 1fr;
        gap: 3px;
    }

    .level-btn {
        padding: 8px 2px;
        font-size: 9px;
    }

    .quickplay-row button {
        padding: 14px 8px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    #musicSelector {
        display: none;
    }

    .hud-item {
        font-size: 11px;
    }
}

/* ---- Pause Button in HUD (works on touch + keyboard) ---- */
#pauseBtn {
    background: #220011;
    color: var(--mut-3);
    border: 1px solid var(--ink-6);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 16px;
    touch-action: manipulation;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
}
#pauseBtn:hover { background: #3a1a30; }

/* ---- Calendar Button in HUD ---- */
#calendarBtn {
    background: var(--ink-4);
    color: var(--mut-3);
    border: 1px solid var(--ink-6);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    padding: 4px 10px;
    cursor: pointer;
}
#calendarBtn:hover { background: #2a1a1a; }

/* ---- Quick Play Row ---- */
.quickplay-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}
.quickplay-row button {
    padding: 10px;
    background: #001802;
    color: var(--green);
    border: 2px solid var(--green);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}
.quickplay-row button:hover { background: #003804; }
.quickplay-row button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--ink-7);
    color: var(--ink-9);
}

/* ---- Ticker Selector ---- */
.ticker-selector {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}
.ticker-tab {
    padding: 4px 12px;
    background: var(--ink-2);
    color: var(--ink-8);
    border: 1px solid var(--ink-6);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
}
.ticker-tab.active {
    background: #001a00;
    color: #00cc00;
    border-color: #00cc00;
}
.ticker-tab:hover:not(.active) { background: var(--ink-3); }

#tickerInput {
    width: 100%;
    background: #001a00;
    color: var(--green);
    border: 1px solid var(--green);
    padding: 8px 12px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
    outline: none;
}
#tickerInput::placeholder { color: #006600; font-weight: normal; }
#tickerInput:focus { border-color: var(--green); box-shadow: 0 0 8px var(--green); }

/* ---- Future-locked level buttons ---- */
.level-btn.future-lock {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ---- Calendar Modal ---- */
#calendarModal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.90);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 10px;
}

.calendar-inner {
    background: rgba(0, 0, 10, 0.98);
    border: 1px solid var(--ink-6);
    border-radius: 10px;
    padding: 20px 22px;
    width: min(720px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    color: white;
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.cal-nav-btn {
    background: var(--ink-4);
    color: var(--green);
    border: 1px solid var(--green);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 13px;
    padding: 4px 10px;
    cursor: pointer;
}
.cal-nav-btn:hover { background: var(--ink-6); }
#calMonthLabel {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: var(--text);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.cal-close-btn {
    background: transparent;
    color: var(--mut-1);
    border: 1px solid var(--ink-6);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 15px;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 3px;
}
.cal-close-btn:hover { color: var(--text); border-color: var(--mut-1); }

.cal-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.cal-tab {
    padding: 6px 18px;
    background: var(--ink-2);
    color: var(--ink-8);
    border: 1px solid var(--ink-6);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
}
.cal-tab.active {
    background: #001002;
    color: var(--green);
    border-color: var(--green);
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 3px;
}
.cal-wd {
    text-align: center;
    font-size: 9px;
    color: var(--ink-7);
    padding: 3px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.cal-day {
    min-height: 70px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--ink-3);
    border-radius: 4px;
    padding: 4px 5px;
    cursor: default;
    overflow: hidden;
}
.cal-day.cal-has-scores {
    cursor: pointer;
    border-color: var(--ink-5);
}
.cal-day.cal-has-scores:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--ink-7);
}
.cal-day.empty {
    background: transparent;
    border-color: transparent;
}
.cal-day-num {
    font-size: 10px;
    color: var(--ink-8);
    margin-bottom: 2px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.cal-day.cal-has-scores .cal-day-num { color: var(--mut-1); }
.cal-day-pnl {
    font-size: 10px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 2px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.cal-day.cal-profit .cal-day-pnl { color: var(--green); }
.cal-day.cal-loss .cal-day-pnl { color: var(--red); }
.cal-chart { display: block; }

/* Day detail */
#calDayDetail {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ink-6);
    border-radius: 6px;
}
.cal-detail-header {
    font-size: 13px;
    color: var(--text);
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.cal-session {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--ink-5);
    border-radius: 5px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.02);
}
.cal-session.cal-profit { border-left: 3px solid var(--green); }
.cal-session.cal-loss { border-left: 3px solid var(--red); }
.cal-session-pnl {
    font-size: 15px;
    font-weight: bold;
    min-width: 130px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.cal-session.cal-profit .cal-session-pnl { color: var(--green); }
.cal-session.cal-loss .cal-session-pnl { color: var(--red); }
.cal-session-meta {
    font-size: 10px;
    color: var(--ink-9);
    flex: 1;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    line-height: 1.6;
}

/* All Sessions */
#calAllSessions {
    max-height: 480px;
    overflow-y: auto;
}
/* Clickable, sticky sort header for the Trade History list */
.cal-hist-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(139,124,246, 0.35);
    position: sticky;
    top: 0;
    background: var(--ink-1);
    z-index: 2;
}
.cal-hist-th {
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slate);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.cal-hist-th:hover { color: var(--text); }
.cal-all-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--ink-2);
}
.cal-all-date {
    font-size: 11px;
    color: var(--ink-9);
    min-width: 92px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.cal-all-pnl {
    font-size: 13px;
    font-weight: bold;
    min-width: 110px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.cal-all-entry.cal-profit .cal-all-pnl { color: var(--green); }
.cal-all-entry.cal-loss .cal-all-pnl { color: var(--red); }
.cal-all-meta {
    font-size: 10px;
    color: var(--ink-8);
    flex: 1;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* ── Clickable session rows ── */
.cal-session-clickable {
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.cal-session-clickable:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--ink-8) !important;
}
.csr-view-lbl {
    font-size: 11px;
    color: var(--ink-7);
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}
.cal-session-clickable:hover .csr-view-lbl { color: var(--mut-2); }

/* ── Export buttons in cal-nav ── */
.cal-export-btn {
    background: #0d1a26;
    color: var(--mut-3);
    border: 1px solid var(--ink-7);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
}
.cal-export-btn:hover { background: #1a3040; }

/* ── Session report panel ── */
#calSessionReport {
    padding: 2px 0 8px;
}

.csr-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.csr-back-btn {
    background: var(--ink-2);
    color: var(--mut-1);
    border: 1px solid var(--ink-6);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.csr-back-btn:hover { color: var(--text); border-color: var(--mut-1); }

.csr-title {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    min-width: 0;
}

.csr-export-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.csr-export-btn {
    background: #001a26;
    color: var(--mut-3);
    border: 1px solid var(--ink-7);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
}
.csr-export-btn:hover { background: #003040; }

.csr-equity {
    margin: 0 0 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid #1a1a2e;
    border-radius: 4px;
    padding: 8px 4px 4px;
    overflow: hidden;
}

.csr-table-wrap {
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 8px;
    border: 1px solid var(--ink-3);
    border-radius: 4px;
}
.csr-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    color: var(--mut-3);
}
.csr-table thead {
    position: sticky;
    top: 0;
    background: #0d0d1a;
    z-index: 1;
}
.csr-table th {
    padding: 6px 8px;
    text-align: left;
    color: var(--ink-8);
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-4);
}
.csr-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #0f0f1a;
    white-space: nowrap;
}
.csr-table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* ---- Multiplayer Lobby ---- */
#mpLobby {
    position: fixed;
    inset: 0;
    background: rgba(0,0,20,0.95);
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mp-lobby-card {
    position: relative;
    background: var(--ink-1);
    border: 1px solid var(--ink-6);
    border-radius: 10px;
    padding: 28px 28px 24px;
    width: min(380px, 100%);
    color: white;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.mp-lobby-card h2 { color: var(--text); font-size: 20px; margin: 0 0 14px; }
.mp-sub { font-size: 10px; color: var(--ink-8); margin: -8px 0 14px; }
.mp-status { font-size: 11px; color: var(--mut-2); min-height: 16px; margin: 8px 0 4px; }

.mp-close-btn {
    position: absolute; top: 12px; right: 14px;
    background: transparent; border: 1px solid var(--ink-6); color: var(--ink-8);
    font-family: monospace; font-size: 14px; padding: 2px 8px;
    cursor: pointer; border-radius: 3px;
}
.mp-close-btn:hover { color: var(--text); border-color: var(--mut-1); }

.mp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mp-field label { font-size: 11px; color: var(--mut-1); }
.mp-field input {
    background: var(--ink-2); color: var(--green); border: 1px solid var(--green);
    padding: 7px 9px; font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px; border-radius: 3px; width: 100%;
}

.mp-account-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mp-account-ok  { font-size: 11px; color: var(--green); }

.mp-create-join { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mp-or { text-align: center; font-size: 11px; color: var(--ink-6); letter-spacing: 2px; }

.mp-join-row { display: flex; gap: 8px; align-items: center; }
.mp-join-row input {
    flex: 1; background: var(--ink-2); color: var(--text); border: 1px solid var(--ink-6);
    padding: 8px; font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 18px; letter-spacing: 4px; text-transform: uppercase;
    text-align: center; border-radius: 4px;
}

.mp-primary-btn {
    width: 100%; padding: 10px; background: #001802; color: var(--green);
    border: 2px solid var(--green); font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 14px; font-weight: bold; cursor: pointer; border-radius: 5px; margin-top: 6px;
}
.mp-primary-btn:hover { background: #003804; }
.mp-primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-primary-btn.mp-ready-done { background: #001a00; color: #009804; border-color: #003804; }

.mp-link-btn {
    background: transparent; border: none; color: var(--ink-8);
    font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px;
    cursor: pointer; padding: 0; text-decoration: underline;
}
.mp-link-btn:hover { color: var(--mut-2); }

.mp-room-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mp-room-header h2 { margin: 0; }
.mp-room-code { color: var(--accent-soft); letter-spacing: 4px; font-size: 22px; }

.mp-player-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mp-player-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--pc, var(--ink-6)); border-radius: 6px;
    background: rgba(255,255,255,0.03); font-size: 13px;
}
.mp-player-name { flex: 1; }
.mp-player-name em { font-style: normal; color: var(--ink-8); font-size: 10px; }
.mp-player-ready { font-size: 11px; font-weight: bold; }
.mp-waiting { font-size: 11px; color: var(--ink-7); text-align: center; padding: 10px; border: 1px dashed var(--ink-4); border-radius: 6px; }

.mp-race-btn {
    width: 100%; padding: 10px; background: var(--ink-3); color: var(--accent-soft);
    border: 1px solid var(--ink-6); font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 14px; font-weight: bold; cursor: pointer; border-radius: 5px; margin-top: 4px;
}
.mp-race-btn:hover { background: #2a0033; }

/* ── AI Race button in level select ── */
.ai-race-btn {
    width: 100%; padding: 10px; background: #001a0d; color: var(--green);
    border: 2px solid var(--green); font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 14px; font-weight: bold; cursor: pointer; border-radius: 5px; margin-top: 2px;
    transition: background 0.15s;
}
.ai-race-btn:hover { background: #003322; }

/* ── Race Config Modal ── */
#raceConfigModal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.82);
    display: flex; align-items: center; justify-content: center; z-index: 900;
}
#raceConfigModal.hidden { display: none; }

.race-config-card {
    background: var(--ink-0); border: 1px solid var(--ink-6); border-radius: 10px;
    padding: 28px 28px 22px; width: min(420px, 94vw);
    font-family: 'JetBrains Mono', 'Courier New', monospace; color: var(--mut-3);
    position: relative; max-height: 90vh; overflow-y: auto;
}
.race-config-card h2 { margin: 0 0 6px; color: var(--text); font-size: 20px; font-family: var(--pt-sans); }
.race-config-sub { margin: 0 0 18px; font-size: 12px; color: var(--ink-9); }
.race-config-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--ink-7); font-size: 18px;
    cursor: pointer; line-height: 1;
}
.race-config-close:hover { color: var(--text); }

.race-config-field {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.race-config-field label { font-size: 12px; color: var(--mut-1); min-width: 60px; }
.race-config-field input[type="text"],
.race-config-field input[type="date"] {
    background: var(--ink-1); color: var(--text); border: 1px solid var(--ink-7);
    padding: 7px 10px; font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 14px; border-radius: 4px; flex: 1; outline: none;
}
.race-radio-label { font-size: 12px; color: #999; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.race-radio-label input { accent-color: var(--accent); }

.race-launch-btn {
    width: 100%; padding: 11px; background: var(--ink-3); color: var(--accent-soft);
    border: 1px solid var(--ink-6); font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px; font-weight: bold; cursor: pointer; border-radius: 6px;
    margin-top: 8px; transition: background 0.15s;
}
.race-launch-btn:hover { background: #2a1f00; }

.race-config-bots { margin-top: 18px; }
.race-config-bots-title { font-size: 10px; color: var(--ink-8); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.race-config-bot-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bot toggle chips — checked = vibrant, unchecked = dim */
.race-bot-toggle {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; padding: 4px 10px; border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer; user-select: none;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.race-bot-toggle input[type="checkbox"] { display: none; }
.race-bot-toggle:has(input:checked) {
    background: rgba(255,255,255,0.07);
    border-color: var(--bot-color, var(--green));
    color: var(--bot-color, var(--mut-4));
}
.race-bot-toggle:has(input:not(:checked)) {
    opacity: 0.35;
    filter: grayscale(0.7);
}

/* ── Session Stats panel (game-over screen) ── */
.session-stats {
    margin: 12px 0 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid #1e1e1e;
    border-radius: 8px;
    padding: 12px 14px 10px;
}
.stats-title {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-8);
    margin-bottom: 10px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 6px;
}
.stat-cell {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ink-3);
    border-radius: 6px;
    padding: 7px 8px 5px;
    text-align: center;
}
.stat-label {
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ink-7);
    margin-bottom: 3px;
}
.stat-value {
    font-size: 15px;
    font-weight: bold;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--mut-3);
    line-height: 1;
}
.stat-sub {
    font-size: 9px;
    color: #3a3a3a;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-stats-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.stats-action-btn {
    flex: 1;
    padding: 7px 10px;
    background: rgba(255,255,255,0.04);
    color: var(--mut-1);
    border: 1px solid var(--ink-5);
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.stats-action-btn:hover { background: rgba(255,255,255,0.09); color: var(--mut-4); }

/* ── Stock of the Day card ── */
.sotd-tabs {
    display: flex;
    margin-bottom: 8px;
    background: var(--ink-3);
    border-radius: 4px;
    padding: 2px;
}
.sotd-tab {
    flex: 1;
    background: transparent;
    color: var(--mut-1);
    border: none;
    padding: 6px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    font-family: inherit;
    transition: all 0.2s;
}
.sotd-tab:hover {
    color: var(--mut-3);
}
.sotd-tab.active {
    background: var(--ink-6);
    color: var(--text);
}
.sotd-card {
    background: rgba(139,124,246,0.04);
    border: 1px solid #2a2000;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 6px;
}
.sotd-ticker {
    font-size: 20px; font-weight: bold; color: var(--text); letter-spacing: 1px;
}
.sotd-range {
    font-size: 12px; color: var(--mut-3); font-weight: bold;
}

/* ── Multiplayer public room browser ── */
.mp-secondary-btn {
    display: block; width: 100%; padding: 9px 16px; margin-top: 8px;
    background: rgba(255,255,255,0.04); color: var(--mut-2);
    border: 1px solid var(--ink-6); border-radius: 4px;
    font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 13px;
    cursor: pointer; text-align: center;
    transition: background 0.15s, color 0.15s;
}
.mp-secondary-btn:hover { background: rgba(255,255,255,0.09); color: var(--text); }

.mp-browse-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 320px; overflow-y: auto;
}
.mp-browse-empty { font-size: 12px; color: var(--ink-8); text-align: center; padding: 20px 0; }
.mp-room-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--ink-4);
    border-radius: 6px;
    font-size: 12px;
}
.mp-room-ticker { font-size: 15px; font-weight: bold; color: var(--green); }
.mp-room-stake  { color: var(--accent-soft); font-weight: bold; font-size: 12px; }
.mp-room-meta   { color: var(--ink-9); font-size: 10px; grid-column: 1; }
.mp-room-join   {
    grid-row: 1 / 3; align-self: center;
    padding: 6px 14px; background: var(--green); color: var(--ink-0);
    border: none; border-radius: 4px; font-family: inherit; font-size: 12px;
    font-weight: bold; cursor: pointer; white-space: nowrap;
}
.mp-room-join:hover { background: #00e59a; }

/* ── Race Board panel ── */
#raceBoard {
    flex-direction: column;
    width: 300px;
    min-width: 200px;
    max-width: 500px;
    background: var(--ink-0);
    border-left: 1px solid var(--ink-3);
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    flex-shrink: 0;
    padding: 0;
}

/* Drag-resize handle between raceBoard and canvas */
#raceBoardResizer {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    border-right: 2px solid var(--ink-3);
    transition: border-color 0.15s;
    display: none; /* shown by JS when raceBoard is visible */
    position: relative;
    z-index: 10;
}
#raceBoardResizer:hover,
#raceBoardResizer.dragging {
    border-right-color: var(--accent);
    background: rgba(139,124,246,0.06);
}

.race-header {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--ink-6);
    background: var(--ink-0);
    font-family: var(--pt-sans);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.race-title { font-size: 13px; font-weight: bold; color: var(--text); font-family: var(--pt-sans); }
.race-ticker { font-size: 12px; color: var(--text); font-weight: bold; margin-left: 2px; }
.race-date { font-size: 10px; color: var(--ink-8); margin-left: auto; }

.race-progress-outer {
    height: 3px; background: var(--ink-2); margin: 0;
}
.race-progress-inner {
    height: 3px; background: var(--accent);
    transition: width 0.5s linear;
}

.race-rows { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }

.race-row {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px; font-size: 11px;
    transition: background 0.25s;
    border-radius: 4px; margin: 0 4px;
}
.race-row-player { background: rgba(255,255,255,0.04); border: 1px solid var(--ink-6); }
.race-flash-buy  { background: rgba(0,212,255,0.12) !important; }
.race-flash-sell { background: rgba(255,80,0,0.12) !important; }

.race-rank {
    font-size: 11px; color: var(--ink-8); min-width: 28px; font-weight: bold;
}
.race-moved-up   { color: var(--green); font-size: 9px; }
.race-moved-down { color: var(--red); font-size: 9px; }

.race-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}

.race-info {
    display: flex; flex-direction: column; min-width: 0; flex: 0 0 auto; width: 100px;
}
.race-name  { font-size: 11px; color: var(--mut-4); font-weight: bold; white-space: nowrap; }
.race-label {
    display: inline-flex; align-items: center;
    padding: 1px 8px; border-radius: 999px;
    font-family: var(--pt-mono); font-size: 8px; font-weight: 700;
    letter-spacing: 0.06em; white-space: nowrap;
    border: 1px solid var(--ink-5); background: transparent; color: var(--ink-7);
}

.race-track-wrap { flex: 1; min-width: 0; }
.race-track {
    position: relative; height: 6px; background: var(--ink-2);
    border-radius: 3px; overflow: hidden;
}
.race-center-line {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
    background: var(--ink-3);
}
.race-bar {
    position: absolute; top: 0; bottom: 0; border-radius: 2px;
    transition: width 0.4s ease;
}
.race-bar-pos { background: var(--green); /* left: 50% set inline */ }
.race-bar-neg { background: var(--red); /* right:50% set inline */ }

.race-pnl { font-size: 11px; font-weight: bold; min-width: 52px; text-align: right; }
.pnl-pos { color: var(--green); }
.pnl-neg { color: var(--red); }

.race-pos-tag {
    font-size: 8px; font-weight: bold; padding: 1px 4px;
    border-radius: 3px; min-width: 30px; text-align: center;
}
.race-pos-tag.long  { background: rgba(0,200,5,0.12);  color: var(--green); }
.race-pos-tag.short { background: rgba(255,80,0,0.15);  color: var(--red); }
.race-pos-tag.flat  { background: rgba(255,255,255,0.05); color: var(--ink-7); }

.race-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-top: 1px solid var(--ink-3);
    font-size: 10px; color: var(--ink-8);
    background: var(--ink-0);
}
.race-bar-price { color: var(--green); font-weight: bold; }

/* ── Auth Modal ──────────────────────────────────────────────────────────── */
#authModal, #accountModal, #leaderboardModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#authModal.hidden, #accountModal.hidden, #leaderboardModal.hidden { display: none; }

.auth-card {
    background: #0a0a1a;
    border: 1px solid var(--ink-6);
    border-radius: 10px;
    padding: 28px 32px 24px;
    width: 100%;
    max-width: 380px;
    position: relative;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--mut-5);
}

.auth-close-btn {
    position: absolute;
    top: 12px; right: 14px;
    background: none;
    border: none;
    color: var(--mut-1);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
}
.auth-close-btn:hover { color: var(--text); }

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--ink-6);
}
.auth-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ink-9);
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 4px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.auth-tab.active {
    color: var(--green);
    border-bottom-color: var(--green);
}
.auth-tab:hover:not(.active) { color: var(--mut-2); }

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.auth-field label {
    font-size: 11px;
    color: var(--mut-1);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.auth-field input {
    background: var(--ink-2);
    border: 1px solid var(--ink-6);
    border-radius: 5px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 11px;
    outline: none;
    transition: border-color .15s;
}
.auth-field input:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(0,200,5,0.15); }

.auth-err {
    color: var(--red-soft);
    font-size: 12px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(255,80,80,.08);
    border: 1px solid rgba(255,80,80,.2);
    border-radius: 5px;
}
.auth-err.hidden { display: none; }

.auth-submit-btn {
    width: 100%;
    background: var(--green);
    border: none;
    border-radius: 8px;
    color: var(--ink-0);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 11px;
    cursor: pointer;
    margin-top: 4px;
    transition: filter .15s;
}
.auth-submit-btn:hover { filter: brightness(1.1); }
.auth-submit-btn:disabled { background: #334; color: var(--ink-9); cursor: not-allowed; }

.auth-switch {
    text-align: center;
    font-size: 12px;
    color: var(--ink-9);
    margin: 14px 0 0;
}
.auth-switch a { color: var(--green); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* ── Account / Profile Modal ─────────────────────────────────────────────── */
.acct-card {
    background: #0a0a1a;
    border: 1px solid var(--ink-6);
    border-radius: 10px;
    padding: 24px 28px;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--mut-5);
}

.acct-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ink-4);
}
.acct-avatar { font-size: 36px; line-height: 1; }
.acct-info { flex: 1; min-width: 0; }
.acct-handle { font-size: 20px; font-weight: bold; color: var(--green); }
.acct-email { font-size: 12px; color: var(--ink-9); margin-top: 2px; }

.acct-logout-btn {
    background: none;
    border: 1px solid var(--ink-7);
    border-radius: 5px;
    color: var(--mut-1);
    font-family: inherit;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.acct-logout-btn:hover { border-color: var(--red-soft); color: var(--red-soft); }

.acct-alltime {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 12px 16px;
    background: rgba(0,200,5,.05);
    border: 1px solid rgba(0,200,5,.15);
    border-radius: 7px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--mut-25);
}
.acct-alltime b { color: var(--text); }
.acct-alltime b.profit { color: var(--green); }
.acct-alltime b.loss   { color: var(--red); }

.acct-section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-8);
    margin: 0 0 10px;
}

.acct-table-wrap {
    overflow-x: auto;
    margin-bottom: 22px;
}
.acct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.acct-table th {
    text-align: left;
    padding: 6px 10px;
    color: var(--ink-8);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--ink-4);
    white-space: nowrap;
}
.acct-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ink-2);
    white-space: nowrap;
}
.acct-table tr:hover td { background: rgba(255,255,255,.03); }
.acct-table td.profit { color: var(--green); }
.acct-table td.loss   { color: var(--red); }

.acct-recent-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}
.acct-session-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: rgba(255,255,255,.03);
    border-radius: 5px;
    font-size: 12px;
}
.acct-sess-ticker { font-weight: bold; color: var(--green); min-width: 42px; }
.acct-sess-date   { color: var(--ink-9); min-width: 70px; }
.acct-sess-trades { color: var(--mut-1); min-width: 68px; }
.acct-sess-wr     { color: var(--mut-25); min-width: 44px; text-align: right; }
.acct-sess-pnl    { font-weight: bold; margin-left: auto; }
.acct-sess-pnl.profit { color: var(--green); }
.acct-sess-pnl.loss   { color: var(--red); }

/* Account HUD button */
#accountBtn {
    background: rgba(139,124,246,.12);
    border: 1px solid rgba(139,124,246,.35);
    border-radius: 5px;
    color: var(--accent-soft);
    font-family: inherit;
    font-size: 13px;
    padding: 5px 11px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
#accountBtn:hover { background: rgba(139,124,246,.22); }

/* ── Trade Report ───────────────────────────────────────────────────────── */
.trade-report {
    margin: 16px 0 0;
    padding: 18px 20px;
    background: rgba(0,0,20,0.6);
    border: 1px solid #1a1a3a;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}
.trade-report.hidden { display: none; }

.tr-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #445;
    margin-bottom: 8px;
    font-weight: bold;
}

.tr-section-full {
    margin-bottom: 18px;
}

.tr-section-row {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}
.tr-section-half {
    flex: 1;
    min-width: 0;
}

/* Trade list table */
.tr-list-wrap {
    overflow-x: auto;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--ink-2);
    border-radius: 5px;
}
.tr-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
}
.tr-list-table th {
    position: sticky;
    top: 0;
    background: #0a0a18;
    padding: 6px 10px;
    text-align: left;
    color: #445;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid #1a1a2e;
    white-space: nowrap;
    z-index: 1;
}
.tr-list-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #0d0d1a;
    white-space: nowrap;
}
.tr-row-win  { background: rgba(0,200,5,0.04); }
.tr-row-loss { background: rgba(255,80,0,0.04); }
.tr-list-table tr:hover td { background: rgba(255,255,255,0.04); }
.tr-list-table .profit { color: var(--green); font-weight: bold; }
.tr-list-table .loss   { color: var(--red); font-weight: bold; }

@media (max-width: 560px) {
    .tr-section-row { flex-direction: column; }
}

/* ── SOTD card live price additions ─────────────────────────────────────── */
.sotd-header-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.sotd-current-price {
    font-size: 18px;
    font-weight: bold;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
}
.sotd-change-pct {
    font-size: 13px;
    font-weight: bold;
    font-family: 'JetBrains Mono', monospace;
}
.sotd-spy-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
}
.sotd-spy-label {
    color: var(--ink-9);
    font-weight: bold;
}
.sotd-spy-price {
    color: var(--mut-2);
}
.sotd-spy-change {
    font-weight: bold;
    font-size: 11px;
}
.sotd-range {
    margin-left: auto;
}
.sotd-date {
    font-size: 10px;
    color: var(--ink-8);
    margin-top: 3px;
}
.sotd-up   { color: var(--green); }
.sotd-down { color: var(--red); }

/* ── Level Select section headers (collapsible) ──────────────────────────── */
.ls-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--accent);
    border-radius: 0 4px 4px 0;
    padding: 7px 10px 7px 12px;
    margin: 10px 0 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-left-color 0.15s;
}
.ls-section-header:first-child { margin-top: 0; }
.ls-section-header:hover { background: rgba(255, 255, 255, 0.08); }
.ls-section-header.ls-collapsed {
    border-left-color: var(--ink-6);
    color: #999;
}
.ls-section-header.ls-collapsed:hover { background: rgba(255, 255, 255, 0.06); }
.ls-chevron {
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
}
.ls-section-body {
    margin-bottom: 4px;
}

/* ── Ticker search input + autocomplete dropdown ─────────────────────────── */
.ticker-search-wrap {
    position: relative;
    margin-bottom: 4px;
}
#tickerSearchInput {
    width: 100%;
    background: var(--ink-1);
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    outline: none;
    box-sizing: border-box;
    transition: box-shadow 0.15s, border-color 0.15s;
}
#tickerSearchInput:focus {
    border-color: var(--green);
    box-shadow: 0 0 8px rgba(0, 200, 5, 0.3);
}
.ticker-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #080810;
    border: 1px solid var(--green);
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 300;
    max-height: 220px;
    overflow-y: auto;
}
.ticker-suggestions.hidden { display: none; }
.ticker-suggestion-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--ink-2);
    transition: background 0.1s;
}
.ticker-suggestion-item:last-child { border-bottom: none; }
.ticker-suggestion-item:hover { background: rgba(0, 200, 5, 0.1); }
.ticker-suggestion-item .sug-ticker {
    color: var(--green);
    font-weight: bold;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    min-width: 52px;
    flex-shrink: 0;
}
.ticker-suggestion-item .sug-name {
    color: var(--ink-9);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticker-search-hint {
    font-size: 11px;
    color: var(--mut-1);
    padding: 4px 2px 0;
    font-family: 'JetBrains Mono', monospace;
    display: none;
}
.ticker-search-label {
    font-size: 11px;
    color: var(--ink-8);
    margin: 2px 0 4px;
}
.ticker-search-label span { color: var(--green); font-weight: bold; }

/* ── Google Sign-In divider ─────────────────────────────────────────────── */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
    color: var(--ink-7);
    font-size: 11px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-5);
}

/* ── Account modal footer (mode + export) ───────────────────────────────── */
.acct-footer-row {
    border-top: 1px solid #1e1e1e;
    margin-top: 16px;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.acct-mode-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.acct-mode-label {
    font-size: 10px;
    color: var(--ink-8);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.acct-mode-toggle {
    font-size: 12px;
    color: var(--mut-2);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.acct-export-row {
    display: flex;
    gap: 8px;
}
.acct-action-btn {
    background: var(--ink-2);
    border: 1px solid var(--ink-6);
    color: var(--mut-2);
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, color .15s;
}
.acct-action-btn:hover { border-color: #0f0; color: #0f0; }

/* ── Settings modal navigation row ──────────────────────────────────────── */
.settings-nav-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 10px;
}
.settings-nav-btn {
    flex: 1;
    background: var(--ink-2);
    border: 1px solid var(--ink-5);
    color: var(--mut-25);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s, color .12s;
    white-space: nowrap;
}
.settings-nav-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── HUD leverage / allocation label ─────────────────────────────────────── */
#livesBoard {
    font-family: var(--pt-mono);
    font-size: 13px;
    color: var(--mut-3);
    letter-spacing: 0.5px;
}
.hud-sep { color: var(--ink-7); }

/* ── HUD mute / SFX buttons (kept for override specificity) ─────────────── */

/* ── Near-live crypto buttons ────────────────────────────────────────────── */
.crypto-btn-row {
    display: flex;
    gap: 8px;
}
.crypto-play-btn {
    flex: 1;
    background: #061506;
    border: 1px solid #1a4a1a;
    color: #00cc44;
    border-radius: 5px;
    padding: 9px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    letter-spacing: .03em;
    transition: border-color .15s, background .15s, color .15s;
}
.crypto-play-btn:hover:not(:disabled) { border-color: #0f0; background: #0a1f0a; color: #0f0; }
.crypto-play-btn:disabled { opacity: .5; cursor: default; }

/* ── Live (1×) play button ───────────────────────────────────────────────── */
.live-play-btn {
    width: 100%;
    background: #1a0500;
    border: 1px solid #cc4400;
    color: #ff7733;
    border-radius: 5px;
    padding: 9px 14px;
    font-size: 12px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: .05em;
    transition: border-color .15s, background .15s, box-shadow .15s;
    animation: livePulse 2s ease-in-out infinite;
}
.live-play-btn:hover:not(:disabled) {
    border-color: #ff5500;
    background: #2a0a00;
    box-shadow: 0 0 10px rgba(255, 80, 0, 0.35);
}
.live-play-btn:disabled { opacity: .5; cursor: default; animation: none; }

/* ── Live info button ────────────────────────────────────────────────────── */
.live-info-btn {
    background: var(--ink-2);
    border: 1px solid #cc4400;
    color: #ff7733;
    border-radius: 5px;
    padding: 9px 14px;
    font-size: 13px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.live-info-btn:hover {
    border-color: #ff5500;
    background: #2a0a00;
    color: #ffaa77;
}

/* ── Live Info Modal ─────────────────────────────────────────────────────── */
#liveInfoModal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    overflow-y: auto; padding: 20px;
}
.live-info-card {
    background: rgba(15, 5, 0, 0.97);
    border: 2px solid #cc4400;
    border-radius: 10px;
    padding: 24px;
    max-width: 450px;
    width: 100%;
    color: white;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 0 20px rgba(255, 68, 0, 0.4);
}
.live-info-card h2 {
    color: #ff7733; margin: 0 0 12px; font-size: 20px; text-align: center;
}
.live-info-card p {
    margin: 12px 0;
}
.live-info-card strong {
    color: #ff7733;
}
.live-info-card .white-text {
    color: var(--text);
}
.live-info-card .divider {
    border-top: 1px solid var(--ink-7); padding-top: 10px; font-size: 12px; color: var(--mut-25);
}
#liveInfoCloseBtn {
    width: 100%; padding: 10px; background: #2a0a00; color: #ff7733; border: 1px solid #cc4400; border-radius: 5px; font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer; transition: background 0.15s;
}
#liveInfoCloseBtn:hover {
    background: #401000;
}

@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(204, 68, 0, 0.3); }
    50%       { box-shadow: 0 0 12px rgba(255, 100, 0, 0.6); }
}

/* ── LIVE HUD badge ──────────────────────────────────────────────────────── */
.live-badge {
    font-size: 12px;
    font-weight: bold;
    color: #ff4400;
    background: rgba(80, 10, 0, 0.85);
    border: 1px solid #cc3300;
    border-radius: 6px;
    padding: 3px 9px;
    letter-spacing: .08em;
    animation: liveBadgePulse 1s ease-in-out infinite alternate;
    white-space: nowrap;
}
.live-badge.hidden { display: none !important; }

@keyframes liveBadgePulse {
    from { opacity: 1; box-shadow: 0 0 6px rgba(255, 68, 0, 0.5); }
    to   { opacity: 0.65; box-shadow: 0 0 2px rgba(255, 68, 0, 0.2); }
}

/* ── Collapsible level-select sections ───────────────────────────────────── */
.collapsible-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 4px 4px;
    margin-top: 14px;
    border-bottom: 1px solid var(--ink-4);
    color: var(--mut-3);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .04em;
    text-transform: uppercase;
    user-select: none;
}
.collapsible-section-header:hover { color: var(--text); }

.section-chevron {
    font-size: 10px;
    color: var(--ink-8);
    transition: transform .2s;
}

.collapsible-section {
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
    max-height: 400px;
    opacity: 1;
}
.collapsible-section.collapsed {
    max-height: 0;
    opacity: 0;
}

/* ── Forex pair buttons ──────────────────────────────────────────────────── */
.forex-btn-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.forex-play-btn {
    flex: 1 1 calc(50% - 3px);
    min-width: 80px;
    background: #00050f;
    border: 1px solid #003366;
    color: #44aaff;
    border-radius: 5px;
    padding: 8px 6px;
    font-size: 11px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: .02em;
    transition: border-color .15s, background .15s, color .15s;
}
.forex-play-btn:hover:not(:disabled) { border-color: #0077ff; background: #001020; color: #77ccff; }
.forex-play-btn:disabled { opacity: .5; cursor: default; }

/* ── Commodity play buttons (reuse crypto row layout, gold/brown colours) ── */
.commodity-play-btn {
    flex: 1;
    background: #100a00;
    border: 1px solid #5a4000;
    color: #c8900a;
    border-radius: 5px;
    padding: 9px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    letter-spacing: .03em;
    transition: border-color .15s, background .15s, color .15s;
}
.commodity-play-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--ink-3); color: var(--accent-soft); }
.commodity-play-btn:disabled { opacity: .5; cursor: default; }

/* ══════════════════════════════════════════════════════════
   Tutorial Overlay
   ══════════════════════════════════════════════════════════ */
#tutorialOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 10, 0.88);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
#tutorialOverlay.hidden { display: none; }

#tutorialCard {
    position: relative;
    background: #05050f;
    border: 1px solid var(--ink-4);
    border-radius: 12px;
    width: min(480px, 96vw);
    padding: 32px 28px 20px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Skip button */
.tut-skip-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--ink-7);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: color .15s;
    padding: 4px 6px;
}
.tut-skip-btn:hover { color: var(--mut-2); }

/* Step content */
.tut-step { min-height: 220px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tut-step.hidden { display: none; }

.tut-big-icon { font-size: 40px; margin-bottom: 10px; }

.tut-title {
    font-size: 18px;
    color: var(--text);
    margin: 0 0 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}

.tut-body {
    font-size: 13px;
    color: var(--mut-2);
    margin: 0 0 10px;
    line-height: 1.6;
    max-width: 380px;
}
.tut-body strong { color: var(--mut-4); }
.tut-cyan  { color: var(--accent) !important; }
.tut-green { color: var(--green) !important; }
.tut-red   { color: var(--red) !important; }

/* Chart SVG (Step 1) */
.tut-chart {
    width: 100%;
    max-width: 280px;
    height: 80px;
    margin: 4px 0 12px;
}
.tut-chart-line {
    stroke: var(--accent);
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: tut-draw 2.4s ease-in-out infinite;
}
@keyframes tut-draw {
    0%   { stroke-dashoffset: 320; opacity: 0.4; }
    60%  { stroke-dashoffset: 0;   opacity: 1;   }
    85%  { stroke-dashoffset: 0;   opacity: 1;   }
    100% { stroke-dashoffset: 0;   opacity: 0.4; }
}
.tut-chart-dot {
    fill: var(--accent);
    filter: drop-shadow(0 0 5px var(--accent));
    animation: tut-dot-blink 1.2s ease-in-out infinite;
}
@keyframes tut-dot-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}
.tut-chart-axis { stroke: var(--ink-4); stroke-width: 1; }
.tut-chart-label { font-size: 7px; fill: var(--ink-7); font-family: 'JetBrains Mono', monospace; }

/* Key demos (Steps 2 & 3) */
.tut-key-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
}
.tut-key-row { display: flex; align-items: center; gap: 10px; }
.tut-key-sep { font-size: 11px; color: var(--ink-7); }

.tut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a0a16;
    border: 2px solid var(--ink-6);
    border-bottom: 4px solid var(--ink-3);
    border-radius: 7px;
    font-size: 18px;
    font-family: 'JetBrains Mono', monospace;
    padding: 8px 14px;
    min-width: 48px;
    color: var(--mut-3);
    user-select: none;
}
.tut-key-buy  { border-color: var(--accent); color: var(--accent);  box-shadow: 0 0 12px rgba(139,124,246,0.15); }
.tut-key-sell { border-color: var(--red); color: var(--red); border-bottom-color: #882222; box-shadow: 0 0 12px rgba(255,85,85,0.15); }

.tut-action-tag {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 14px;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: .05em;
}
.tut-tag-buy  { background: rgba(139,124,246,0.12); color: var(--accent); border: 1px solid rgba(139,124,246,0.3); }
.tut-tag-sell { background: rgba(255,85,85,0.12);  color: var(--red); border: 1px solid rgba(255,85,85,0.3); }

/* Inline key style (in body text) */
.tut-ik {
    background: #0e0e1a;
    border: 1px solid var(--ink-6);
    border-radius: 4px;
    font-size: 11px;
    padding: 1px 6px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--mut-3);
    white-space: nowrap;
}

/* Hearts (Step 4) */
.tut-hearts-row { display: flex; gap: 10px; font-size: 32px; margin: 8px 0 14px; }
.tut-heart-pulse { animation: tut-heart-fade 2.5s ease-in-out infinite; }
@keyframes tut-heart-fade {
    0%, 30% { filter: none; opacity: 1; transform: scale(1); }
    50%      { filter: grayscale(100%); opacity: 0.35; transform: scale(0.85); }
    70%, 100%{ filter: none; opacity: 1; transform: scale(1); }
}

/* Summary grid (Step 5) */
.tut-summary-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #0a0a14;
    border: 1px solid #1a1a2a;
    border-radius: 8px;
    padding: 14px 18px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.tut-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--mut-2);
}
.tut-summary-row .tut-ik { flex-shrink: 0; }
.tut-summary-icon { font-size: 14px; width: 32px; text-align: center; flex-shrink: 0; color: var(--ink-8); }

/* Navigation */
.tut-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--ink-2);
}
.tut-nav-btn {
    background: transparent;
    border: 1px solid var(--ink-4);
    color: var(--ink-9);
    font-size: 12px;
    font-family: inherit;
    padding: 7px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    min-width: 80px;
}
.tut-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.tut-next-btn      { border-color: var(--green); color: var(--green); background: rgba(0,200,5,0.1); }
.tut-next-btn:hover{ background: rgba(0,200,5,0.08); }

.tut-dots { display: flex; gap: 7px; align-items: center; }
.tut-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-4);
    transition: background .2s, transform .2s;
}
.tut-dot.active { background: var(--accent); transform: scale(1.25); }

/* HUD ? button */
#tutHelpBtn {
    background: transparent;
    border: 1px solid var(--ink-5);
    color: var(--ink-8);
    font-size: 13px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-family: serif;
    transition: border-color .15s, color .15s;
}
#tutHelpBtn:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   PRIME TIME — News Ticker & T&S Filter Tags
   ═══════════════════════════════════════════════════════════ */

/* ── News Ticker ────────────────────────────────────────────────────────── */
#news-ticker {
    height: 28px;
    background: var(--ink-1);
    border-top: 1px solid var(--ink-3);
    display: flex;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.pt-ticker-chip {
    flex-shrink: 0;
    background: var(--accent);
    color: var(--ink-0);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-transform: uppercase;
}

.pt-ticker-track {
    flex: 1;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.pt-ticker-inner {
    display: inline-flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    will-change: transform;
}

.pt-ticker-item {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: var(--mut-3);
    padding: 0 6px;
    white-space: nowrap;
    font-family: 'Inter', system-ui, sans-serif;
}

.pt-ticker-sep {
    color: var(--ink-6);
    margin: 0 4px;
    font-size: 10px;
}

/* ── T&S Filter Tags ─────────────────────────────────────────────────────── */
.tape-filter-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    border: 1px solid var(--ink-5);
    background: transparent;
    color: var(--ink-7);
    transition: all 0.12s;
    white-space: nowrap;
}
.tape-filter-tag.active             { background: var(--ink-3); color: var(--mut-3); border-color: var(--ink-8); }
.tape-filter-tag.filter-buys.active { background: rgba(0,200,5,0.12); color: var(--green); border-color: var(--green); }
.tape-filter-tag.filter-sells.active{ background: rgba(255,80,0,0.12); color: var(--red); border-color: var(--red); }
.tape-filter-tag:hover              { color: var(--mut-2); border-color: var(--ink-7); }

/* ── Side panel Prime Time ────────────────────────────────────────────────── */
#side-panel {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

#side-panel h3 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-7);
    margin: 0;
    padding: 7px 10px;
    background: var(--ink-1);
    border-bottom: 1px solid var(--ink-3);
}

/* ── HUD scorebug portfolio display ─────────────────────────────────────── */
#portfolioBoard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* left-anchored now (portfolio lives on the left) */
    line-height: 1.1;
}

.pb-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--mut-1);
}

#portfolioValue {
    font-size: 20px;
    font-weight: 800;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    /* tabular figures = every digit the same width, so the number never jitters
       as values change. Reserve room so million/billion swings don't reflow. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
    color: var(--text);
    text-align: left;
    min-width: 9.5ch;
}

/* In-game ticker quote (price + $/% change from the session open) */
#tickerQuote {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
#tqPrice { font-size: 15px; font-weight: 700; color: var(--text); }
#tqChange { font-size: 12px; font-weight: 700; }
#tqChange.tq-up { color: var(--green); }
#tqChange.tq-down { color: var(--red); }

#pnlStats {
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    text-align: right;
    white-space: nowrap;
}

/* ── Live badge Prime Time ────────────────────────────────────────────────── */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text);
    background: #cc2200;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    animation: liveBadgePulse 1.2s ease-in-out infinite alternate;
}
.live-badge::before {
    content: '●';
    font-size: 9px;
    animation: dotBlink 1s infinite;
}
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* ── Mobile buttons Prime Time ────────────────────────────────────────────── */
.mobile-btn {
    border-radius: 999px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

#mobileBuyBtn { background: var(--green) !important; color: var(--ink-0) !important; border: none !important; }
#mobileSellBtn { background: var(--red) !important; color: var(--text) !important; border: none !important; }
#mobileSellAllBtn { background: transparent !important; border: 2px solid var(--ink-6) !important; color: var(--text) !important; }

/* ── Progress bar Prime Time ────────────────────────────────────────────── */
#progress-bar {
    background: var(--accent) !important;
}
#progress-thumb {
    border-color: var(--accent) !important;
    box-shadow: 0 0 6px rgba(139,124,246,0.5) !important;
}

/* ── Button overrides for all modal actions ────────────────────────────── */
.auth-submit-btn, .mp-primary-btn, .race-launch-btn, .ai-race-btn {
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
}

/* ── Race board Prime Time ────────────────────────────────────────────────── */
#raceBoard {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.race-title { color: var(--green); }

/* ── Modal card headers Prime Time ────────────────────────────────────────── */
.modal-content h2,
.level-select-inner h2,
.auth-card h2,
.acct-card h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 800;
}

/* Quick End button (Live sessions only) */
#endLiveBtn {
    background: var(--red);
    color: var(--text);
    border: 1px solid #ff5a5a;
    font-weight: 700;
}
#endLiveBtn:hover { background: #ff4444; }

/* Speed control Prime Time */
#speedControl {
    border-color: var(--ink-6);
    color: var(--mut-2);
}
#speedSlider {
    background: var(--ink-6);
    accent-color: var(--accent);
}
#speedSlider::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 0 6px rgba(139,124,246,0.5); }
#speedSlider::-moz-range-thumb { background: var(--accent); }


/* ── Landing / first screen ──────────────────────────────── */
#landingScreen {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: radial-gradient(circle at 50% 30%, #0d1420 0%, #04070c 70%);
    -webkit-tap-highlight-color: transparent;
}
#landingScreen.hidden { display: none; }
.landing-card {
    width: 100%; max-width: 360px;
    background: rgba(10, 12, 18, 0.96);
    border: 1px solid #1e2a3a; border-radius: 16px;
    padding: 28px 24px 24px; text-align: center;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.landing-logo { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.landing-title {
    font-family: var(--pt-sans, sans-serif); font-size: 26px; font-weight: 800;
    color: var(--text); margin: 0 0 4px; letter-spacing: 0.01em;
}
.landing-tagline { color: #8a97a6; font-size: 13px; margin: 0 0 22px; }
.landing-guest input#landingGuestHandle {
    width: 100%; box-sizing: border-box; margin-bottom: 10px;
    padding: 11px 12px; border-radius: 9px;
    border: 1px solid #2a3a4a; background: #0a0e14; color: #e8e8e8;
    font-size: 15px; text-align: center; outline: none;
}
.landing-guest input#landingGuestHandle:focus { border-color: var(--accent); }
.landing-btn {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border-radius: 9px; border: 1px solid #2a3a4a; background: #131b26;
    color: #e8e8e8; font-size: 15px; font-weight: 700; cursor: pointer;
    margin-bottom: 8px; transition: background 0.15s, border-color 0.15s;
}
.landing-btn:hover { background: #1b2735; border-color: #3a4a5a; }
.landing-btn-primary {
    background: var(--green);
    color: #fff; border: none; font-size: 16px;
}
.landing-btn-primary:hover { background: #00e006; }
.landing-guest-note, .landing-account-note { color: #5f6b78; font-size: 11px; margin: 2px 0 0; }
.landing-divider {
    display: flex; align-items: center; gap: 10px;
    color: #4a5563; font-size: 11px; margin: 18px 0 14px;
}
.landing-divider::before, .landing-divider::after {
    content: ''; flex: 1; height: 1px; background: #1e2a3a;
}
.landing-account { display: flex; flex-direction: column; }

.landing-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.landing-nav-btn {
    box-sizing: border-box; padding: 10px 6px;
    border-radius: 9px; border: 1px solid #2a3a4a; background: #0e141d;
    color: #cdd7e2; font-size: 12px; font-weight: 700; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.landing-nav-btn:hover { background: #16202c; border-color: var(--accent); color: var(--text); }

/* ── Global Leaderboard Modal ─────────────────────────────────────────────── */
.lb-card {
    background: #0a0a1a;
    border: 1px solid var(--ink-6);
    border-radius: 10px;
    padding: 24px 28px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--mut-5);
}
.lb-title { font-size: 20px; font-weight: bold; color: var(--accent); margin: 0 0 4px; }
.lb-sub { font-size: 12px; color: var(--ink-9); margin: 0 0 18px; }
.lb-table-wrap { overflow-x: auto; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lb-table th {
    text-align: left; padding: 6px 10px; color: var(--ink-8);
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--ink-4); white-space: nowrap;
}
.lb-table td { padding: 8px 10px; border-bottom: 1px solid var(--ink-2); white-space: nowrap; }
.lb-table tr:hover td { background: rgba(255,255,255,.03); }
.lb-table td.profit { color: var(--green); }
.lb-table td.loss   { color: var(--red); }
.lb-rank { width: 40px; text-align: center; font-weight: bold; }
.lb-name { color: #e8e8e8; font-weight: 600; }
.lb-bal { font-weight: bold; color: var(--text); text-align: right; }
.lb-table th:last-child { text-align: right; }
.lb-me td { background: rgba(139,124,246,.08); }
.lb-me .lb-name { color: var(--accent); }
.lb-bot-badge {
    display: inline-block; margin-left: 6px; padding: 1px 5px;
    font-size: 9px; font-weight: 700; letter-spacing: .05em;
    color: #7fb0ff; background: rgba(90,140,255,.12);
    border: 1px solid rgba(90,140,255,.3); border-radius: 4px;
}

/* ── Race board: collapse toggle + compact summary ───────────────────── */
.race-collapse-btn {
    margin-left: 8px; background: transparent; border: none;
    color: var(--accent); font-size: 14px; line-height: 1; cursor: pointer;
    padding: 2px 4px; flex-shrink: 0;
}
.race-collapse-btn:hover { color: var(--accent-soft); }
.race-trades-btn {
    margin-left: 4px; background: transparent; border: none;
    color: var(--accent); font-size: 14px; line-height: 1; cursor: pointer;
    padding: 2px 4px; flex-shrink: 0;
}
.race-trades-btn:hover { color: var(--accent-soft); }
.race-collapsed-summary {
    display: none; padding: 8px 12px; font-size: 11px; color: #dcdcdc;
    font-family: var(--pt-mono, monospace); line-height: 1.5;
}
.race-collapsed-summary .rcs-you { color: #9fe6a8; }
#raceBoard.collapsed .race-progress-outer,
#raceBoard.collapsed .race-rows,
#raceBoard.collapsed .race-footer { display: none; }
#raceBoard.collapsed .race-collapsed-summary { display: block; }
#raceBoard.collapsed { width: auto; min-width: 0; max-width: none; }

/* ── Race board in portrait / on narrow screens: keep the FULL vertical ──
   leaderboard (all bots + you, ranked) but as a compact floating panel that
   is height-capped + scrollable so it never eats the whole screen. Docked on
   the LEFT to match the desktop column position. ── */
@media (max-width: 820px), (orientation: portrait) {
    #main-area { position: relative; }
    #raceBoardResizer { display: none !important; }

    #raceBoard {
        position: absolute;
        top: 6px; left: 6px; right: auto;
        width: min(72vw, 268px); min-width: 0; max-width: none;
        max-height: 56vh;
        touch-action: manipulation;
        flex-direction: column;
        border: 1px solid var(--accent); border-radius: 10px;
        background: rgba(0, 0, 0, 0.92);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65);
        overflow-y: auto;
        z-index: 45;
    }

    .race-header { padding: 10px 10px 8px; touch-action: manipulation; }
    /* Bigger tap targets for the header controls on touch screens. */
    .race-collapse-btn { font-size: 20px; padding: 6px 10px; touch-action: manipulation; }
    .race-trades-btn   { font-size: 20px; padding: 6px 10px; touch-action: manipulation; }

    /* Tighten each row so all bots + you fit without much scrolling; drop the
       decorative P&L track bar — the % number carries the same information. */
    .race-row { padding: 5px 8px; gap: 5px; }
    .race-track-wrap { display: none; }
    .race-info { flex: 1 1 auto; width: auto; min-width: 0; }
    .race-name { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
    .race-label { font-size: 7px; }
    .race-rank { min-width: 22px; font-size: 10px; }
    .race-pnl { font-size: 11px; min-width: 44px; }

    #raceBoard.collapsed { width: auto; max-height: none; }
}

/* ── Interactive Chart Viewer Preview ────────────────────────────────── */
#previewChartArea {
    margin-top: 14px;
    background: rgba(10, 10, 16, 0.95);
    border: 1px solid rgba(139,124,246, 0.15);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.preview-chart-title {
    font-weight: bold;
    font-family: inherit;
    color: var(--text);
    font-size: 14px;
}

.preview-type-btn {
    padding: 4px 10px;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--mut-3);
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.preview-type-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.3);
}

.preview-timeframes {
    display: flex;
    gap: 4px;
    justify-content: space-between;
}

.preview-tf-btn {
    flex: 1;
    padding: 4px 2px;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--mut-1);
    cursor: pointer;
    border-radius: 4px;
    font-family: var(--pt-mono, monospace);
    font-weight: bold;
    text-align: center;
    transition: all 0.2s ease;
}

.preview-tf-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--mut-3);
}

.preview-tf-btn.active {
    background: rgba(139,124,246, 0.15);
    border-color: rgba(139,124,246, 0.4);
    color: var(--accent);
}

.preview-canvas-container {
    position: relative;
    width: 100%;
    height: 160px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.preview-chart-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.preview-loading {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 16, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 12px;
    color: var(--mut-2);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.preview-loading.hidden {
    opacity: 0;
    pointer-events: none;
}



.toggle-preview-chart-btn {
    width: 100%;
    padding: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--mut-2);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s ease;
    text-align: center;
}

.toggle-preview-chart-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ── Collapsible Settings Sections ── */
.settings-collapsible {
    margin-bottom: 8px;
    border-bottom: 1px solid #1a1a2e;
}
.settings-collapsible .toggle-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mut-1);
    transition: color 0.15s ease;
    border-top: none;
    margin: 0;
}
.settings-collapsible .toggle-header:hover {
    color: var(--green);
}
.settings-section-content {
    padding: 6px 0 14px 0;
}
.settings-section-content.collapsed {
    display: none;
}
.toggle-icon {
    font-size: 10px;
    color: var(--ink-8);
    transition: color 0.15s ease;
}
.toggle-header:hover .toggle-icon {
    color: var(--green);
}

/* ── Account Tabs Navigation ── */
.acct-tabs-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ink-4);
    padding-bottom: 6px;
}
.acct-tab-btn {
    background: none;
    border: 1px solid transparent;
    color: #777;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.acct-tab-btn:hover {
    color: var(--mut-3);
    background: rgba(255, 255, 255, 0.03);
}
.acct-tab-btn.active {
    color: var(--green);
    border-color: var(--green);
    background: rgba(0, 200, 5, 0.05);
    box-shadow: 0 0 10px rgba(0, 200, 5, 0.1);
}

.acct-tab-content {
    display: none;
}
.acct-tab-content.active {
    display: block;
}

/* ── Performance Chart SVG Styling ── */
#acctPerformanceChart svg {
    display: block;
    width: 100%;
    height: 100%;
}
.chart-dot-group circle {
    transition: r 0.15s ease, stroke-width 0.15s ease;
}
.chart-dot-group circle:hover {
    r: 6;
    stroke-width: 2px;
}
.chart-tooltip {
    pointer-events: none;
}

/* ── Calendar Day Session Count Badge ── */
.cal-day-count {
    font-size: 8px;
    color: var(--mut-1);
    margin-left: 2px;
    font-weight: normal;
    opacity: 0.7;
}

/* ---- Multiplayer Lobby responsive fixes ---- */
#mpLobby {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    overflow: auto; /* enable scrolling if content exceeds viewport */
    z-index: 1000;
}

.mp-lobby-card {
    position: relative; /* for absolute positioning of close button */
    max-width: 95%;
    max-height: 80vh;
    width: 100%;
    overflow-y: auto;
    background: var(--ink-2);
    border: 1px solid var(--ink-7);
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

/* Ensure the close button stays visible */
.mp-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text);
    cursor: pointer;
    z-index: 10;
}

#mpPayBox {
    max-height: 70vh;
    overflow-y: auto;
    padding: 12px;
    margin-top: 20px;
    background: var(--ink-4);
    border: 1px solid var(--ink-6);
    border-radius: 6px;
    box-sizing: border-box;
}

/* ---- Dark mode scrollbar styling ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ink-2);
}
::-webkit-scrollbar-thumb {
    background-color: var(--ink-7);
    border-radius: 4px;
    border: 2px solid var(--ink-2);
}

/* ---- Lobby button layout adjustments ---- */
#mpLobby .mp-primary-btn {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 8px auto;
    font-size: 14px;
    padding: 10px 0;
}

/* ---- Multiplayer Lobby responsive fixes ---- */
#mpLobby {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    overflow: auto; /* enable scrolling if content exceeds viewport */
    z-index: 1000;
}

.mp-lobby-card {
    position: relative; /* for absolute positioning of close button */
    max-width: 95%;
    max-height: 95vh;
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--ink-7);
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
}

/* Ensure the close button stays visible */
.mp-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text);
    cursor: pointer;
    z-index: 10;
}

#mpPayBox {
    max-height: 70vh;
    overflow-y: auto;
    padding: 12px;
    margin-top: 20px;
    background: var(--ink-4);
    border: 1px solid var(--ink-6);
    border-radius: 6px;
    box-sizing: border-box;
}

/* ── Wallet (Phase 1 — play money) ──────────────────────────────────────────── */
#walletChipBtn {
    touch-action: manipulation;
    white-space: nowrap;
}
#walletChipAmount { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.wallet-balance-card {
    background: linear-gradient(135deg, #0b1220, #101a2e);
    border: 1px solid #1c2a44;
    border-radius: 8px;
    padding: 18px 16px;
    text-align: center;
    margin-bottom: 18px;
}
.wallet-balance-label {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: #7a8aa5;
    font-weight: 700;
}
.wallet-balance-amount {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    font-size: 34px;
    font-weight: 700;
    color: #00ff88;
    margin: 4px 0 8px;
}
.wallet-play-note { font-size: 11px; color: var(--slate); }

.wallet-deposit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.wallet-deposit-btn {
    flex: 1 1 60px;
    min-width: 60px;
    min-height: 40px;
    padding: 8px 10px;
    background: #14233c;
    border: 1px solid #274063;
    border-radius: 6px;
    color: #cfe3ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.12s, border-color 0.12s;
}
.wallet-deposit-btn:hover { background: #1b3352; border-color: #3a5c8a; }
.wallet-deposit-btn:active { transform: translateY(1px); }
.wallet-deposit-btn:disabled { opacity: 0.5; cursor: default; }

.wallet-msg {
    font-size: 12px;
    margin: 4px 0 8px;
    min-height: 16px;
}

.wallet-txns { display: flex; flex-direction: column; gap: 2px; }
.wallet-txn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #0d1320;
    border: 1px solid #17233a;
    border-radius: 5px;
    font-size: 12px;
}
.wallet-txn-kind { color: #c3cede; }
.wallet-txn-amt {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    font-weight: 700;
}

/* ── Tournaments modal ──────────────────────────────────────────────────────── */
#tournamentsModal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 3000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
#tournamentsModal.hidden { display: none; }
.trn-card {
    background: #0a0a1a; border: 1px solid var(--ink-6); border-radius: 10px;
    padding: 24px 26px; width: 100%; max-width: 460px; position: relative;
    max-height: 90vh; overflow-y: auto;
}
.trn-title { margin: 0 0 4px; font-size: 20px; }
.trn-sub { font-size: 12px; color: #9aa4b8; margin: 0 0 16px; line-height: 1.5; }
.trn-play-badge {
    display: inline-block; font-size: 10px; background: #14233c; border: 1px solid #274063;
    color: #cfe3ff; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.trn-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--ink-4); }
.trn-tab-btn {
    background: none; border: none; color: var(--mut-1); font-family: inherit; font-size: 13px;
    padding: 6px 10px; cursor: pointer; border-bottom: 2px solid transparent;
}
.trn-tab-btn:hover { color: var(--mut-3); }
.trn-tab-btn.active { color: #00ff88; border-bottom-color: #00ff88; }
.trn-tab-content { display: none; }
.trn-tab-content.active { display: block; }

.trn-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.trn-field label { font-size: 11px; color: var(--slate); letter-spacing: 0.03em; }
.trn-field input, .trn-field select {
    background: #12121f; border: 1px solid var(--ink-6); border-radius: 6px; color: var(--text);
    padding: 9px 10px; font-family: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
}
.trn-field-row { display: flex; gap: 12px; }
.trn-field-row .trn-field { flex: 1; }

.trn-primary-btn {
    width: 100%; padding: 11px; background: #14233c; border: 1px solid #2f80ff;
    border-radius: 6px; color: #cfe3ff; font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; touch-action: manipulation; margin-top: 4px;
}
.trn-primary-btn:hover { background: #1b3352; }
.trn-primary-btn:disabled { opacity: 0.5; cursor: default; }
.trn-secondary-btn {
    width: 100%; padding: 9px; background: #161622; border: 1px solid var(--ink-6); border-radius: 6px;
    color: var(--mut-2); font-family: inherit; font-size: 12px; cursor: pointer; margin-top: 8px;
    touch-action: manipulation;
}
.trn-secondary-btn:hover { color: var(--mut-4); border-color: var(--ink-8); }
.trn-err { color: var(--red-soft); font-size: 12px; margin-bottom: 8px; }
.trn-empty { color: #556; font-size: 13px; text-align: center; padding: 20px 8px; }

.trn-list { display: flex; flex-direction: column; gap: 6px; }
.trn-list-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: #0d1320; border: 1px solid #17233a; border-radius: 7px; padding: 10px 12px;
    cursor: pointer; text-align: left; font-family: inherit; color: var(--text); touch-action: manipulation;
}
.trn-list-item:hover { border-color: #2f80ff; background: #10182a; }
.trn-li-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trn-li-title { font-size: 14px; font-weight: 600; }
.trn-li-meta { font-size: 11px; color: var(--slate); }
.trn-li-fee { font-size: 13px; font-weight: 700; color: #00ff88; white-space: nowrap; }

.trn-detail { margin-top: 14px; border-top: 1px solid var(--ink-4); padding-top: 14px; }
.trn-detail.hidden { display: none; }
.trn-back-btn { background: none; border: none; color: var(--slate); font-family: inherit; font-size: 12px; cursor: pointer; padding: 0 0 8px; }
.trn-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.trn-detail-title { font-size: 16px; font-weight: 700; }
.trn-detail-code { font-size: 11px; color: var(--slate); }
.trn-detail-code b { color: #cfe3ff; letter-spacing: 0.1em; }
.trn-copy { background: none; border: 1px solid var(--ink-6); border-radius: 4px; color: var(--slate); font-size: 10px; cursor: pointer; padding: 1px 5px; margin-left: 4px; }
.trn-detail-meta { font-size: 11px; color: #9aa4b8; margin: 8px 0 12px; line-height: 1.6; }
.trn-status { text-transform: uppercase; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.trn-status-open { color: #00ff88; }
.trn-status-settled { color: var(--mut-3); }
.trn-status-closed, .trn-status-cancelled { color: var(--red-soft); }

.trn-standings { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.trn-stand-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #0d1320; border: 1px solid #17233a; border-radius: 5px; font-size: 13px; }
.trn-stand-row.me { border-color: #2f80ff; background: #10182a; }
.trn-stand-rank { width: 32px; color: var(--slate); font-weight: 700; }
.trn-stand-handle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-stand-score { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 700; }

/* toast */
#trnToast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
    background: #14233c; border: 1px solid #2f80ff; color: #eaf2ff; padding: 10px 16px;
    border-radius: 8px; font-family: inherit; font-size: 13px; z-index: 4000; max-width: 90vw;
    text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
#trnToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Tournament create — quick picks */
.trn-quick-row { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.trn-quick-btn {
    background: #161622; border: 1px solid var(--ink-6); border-radius: 6px; color: #cfe3ff;
    font-family: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; touch-action: manipulation;
}
.trn-quick-btn:hover { background: #1b3352; border-color: #3a5c8a; }
.trn-quick-btn:disabled { opacity: 0.6; cursor: default; }
.trn-inline-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--slate); margin-top: 6px; cursor: pointer; }
.trn-inline-check input { width: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Play Funnel — new level-select IA (Category → Ticker → Mode → Settings)
   Replaces the old stacked collapsible level-select. See funnel.js.
   ═══════════════════════════════════════════════════════════════════════════ */
.funnel { display: flex; flex-direction: column; gap: 14px; }
.funnel-topbar { display: flex; justify-content: space-between; align-items: center; }
.funnel-title { margin: 0; font-size: 22px; }
.funnel-menu-btn { padding: 6px 10px; font-size: 12px; background: var(--ink-4); border: 1px solid var(--ink-7); color: var(--text); cursor: pointer; border-radius: 4px; font-family: inherit; }
.funnel-menu-btn:hover { background: #2c2c2c; }

/* Breadcrumb */
.funnel-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; min-height: 20px; }
.fn-crumb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #1a1d26; border: 1px solid var(--panel-border); }
.fn-crumb.done { cursor: pointer; }
.fn-crumb.done:hover { border-color: var(--accent); }
.fn-crumb.active { border-color: var(--accent); background: rgba(139,124,246,0.10); }
.fn-crumb-label { color: var(--slate); }
.fn-crumb-val { color: var(--text); font-weight: 600; }
.fn-crumb-sep { color: #4a5163; margin: 0 2px; }

.funnel-h3 { margin: 0; font-size: 15px; color: #e8ecf4; }
.funnel-steprow { display: flex; align-items: center; gap: 10px; }
.funnel-back { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 6px; background: #1a1d26; border: 1px solid var(--panel-border); color: #cdd3df; cursor: pointer; font-size: 13px; }
.funnel-back:hover { border-color: var(--green); color: var(--text); }

/* Category + Mode tile grids */
.funnel-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.funnel-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.funnel-cat, .funnel-mode {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 14px; border-radius: 10px; cursor: pointer; text-align: left;
    background: #14171f; border: 1px solid var(--panel-border-dim); color: var(--text); font-family: inherit;
    transition: transform .08s ease, border-color .08s ease, background .08s ease;
}
.funnel-cat:hover:not(:disabled), .funnel-mode:hover { border-color: var(--green); background: #17201a; transform: translateY(-1px); }
.funnel-cat.sel, .funnel-mode.sel { border-color: var(--green); background: #14261a; }
.fn-cat-emoji, .fn-mode-emoji { font-size: 22px; }
.fn-cat-label, .fn-mode-label { font-size: 15px; font-weight: 700; }
.fn-cat-sub, .fn-mode-sub { font-size: 11px; color: var(--slate); }
.funnel-cat.fn-cat-soon, .funnel-cat:disabled { opacity: .45; cursor: not-allowed; }

/* Ticker step */
.fn-oft-card {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 14px; border-radius: 10px; cursor: pointer; text-align: left;
    background: var(--ink-2); border: 1px solid var(--ink-6); color: var(--text); font-family: inherit;
}
.fn-oft-card:hover:not(.disabled) { border-color: var(--accent-soft); }
.fn-oft-card.disabled { opacity: .5; cursor: not-allowed; }
.fn-oft-emoji { font-size: 24px; }
.fn-oft-main { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fn-oft-title { font-size: 15px; font-weight: 700; }
.fn-oft-sub { font-size: 12px; color: #d3b483; }
.fn-oft-go { font-size: 16px; color: var(--accent-soft); }
.fn-or { text-align: center; font-size: 11px; color: var(--slate-dim); text-transform: uppercase; letter-spacing: 1px; }

.fn-search-wrap { position: relative; }
.fn-search { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 8px; background: var(--panel-1); border: 1px solid var(--panel-border); color: var(--text); font-family: inherit; font-size: 14px; }
.fn-search:focus { outline: none; border-color: var(--green); }
.fn-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--panel-1); border: 1px solid var(--panel-border); border-radius: 8px; overflow: hidden; max-height: 240px; overflow-y: auto; }
.fn-sugg-item { display: flex; gap: 8px; align-items: baseline; padding: 9px 12px; cursor: pointer; }
.fn-sugg-item:hover { background: #17201a; }
.fn-sugg-sym { font-weight: 700; color: var(--text); }
.fn-sugg-name { font-size: 11px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fn-chip { padding: 8px 12px; border-radius: 999px; background: #14171f; border: 1px solid var(--panel-border-dim); color: #e8ecf4; cursor: pointer; font-family: inherit; font-size: 13px; }
.fn-chip:hover { border-color: var(--green); }
.fn-chip.sel { background: #14261a; border-color: var(--green); color: var(--text); font-weight: 700; }

/* Favourites category — saved picks (removable) + community rows */
.fn-fav-item { display: inline-flex; align-items: stretch; }
.fn-fav-item .fn-chip { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.fn-chip-x {
    padding: 0 9px; border-radius: 0 999px 999px 0;
    background: var(--ink-2); border: 1px solid var(--ink-4);
    color: var(--mut-1); cursor: pointer; font-family: inherit; font-size: 15px; line-height: 1;
}
.fn-chip-x:hover { color: #ff6b6b; border-color: #ff6b6b; }
.fn-chip-meta { margin-left: 6px; font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums; }
.fn-fav-add-wrap { margin: 2px 0 6px; }
.fn-fav-add {
    width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 8px;
    background: var(--ink-2); border: 1px solid var(--ink-4); color: var(--text);
    font-family: inherit; font-size: 13px;
}
.fn-fav-add:focus { outline: none; border-color: var(--accent); }
.fn-fav-empty { font-size: 12px; color: var(--mut-1); padding: 2px 0 4px; }

.fn-ticker-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.fn-ticker-sel { font-size: 12px; color: var(--slate); }
.funnel-next, .funnel-play {
    padding: 11px 16px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--green); color: #fff; font-weight: 800; font-family: inherit; font-size: 14px;
}
.funnel-next:disabled { background: var(--ink-4); color: var(--mut-1); cursor: not-allowed; }
.funnel-next:hover:not(:disabled), .funnel-play:hover { filter: brightness(1.08); }
.funnel-play { width: 100%; padding: 14px; font-size: 16px; }

/* Settings step */
.fn-session-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid #232833; }
.fn-session-label { font-size: 12px; color: var(--slate); text-transform: uppercase; letter-spacing: .5px; }
.fn-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e8ecf4; cursor: pointer; }
.fn-radio-hint { font-size: 11px; color: var(--slate-dim); }
.fn-custom-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 24px; }
.fn-custom-row input[type="date"] { padding: 8px; border-radius: 6px; background: var(--panel-1); border: 1px solid var(--panel-border); color: var(--text); font-family: inherit; }
.fn-rolling-note { font-size: 12px; color: var(--slate); padding: 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid #232833; }
.fn-tourn-box { padding: 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid #232833; }
.fn-tourn-copy { font-size: 13px; color: #cdd3df; margin: 0 0 10px; }
.fn-status { font-size: 12px; color: var(--accent-soft); min-height: 16px; text-align: center; }

/* Funnel preview chart — blend the reused PreviewChartController container in */
.fn-chart { margin: 2px 0 0; }
.fn-chart .toggle-preview-chart-btn {
    width: 100%; padding: 9px 12px; border-radius: 8px; cursor: pointer;
    background: #14171f; border: 1px solid var(--panel-border-dim); color: #cdd3df; font-family: inherit; font-size: 13px;
}
.fn-chart .toggle-preview-chart-btn:hover { border-color: var(--green); color: var(--text); }
.fn-chart .preview-chart-content { margin-top: 8px; }

/* Funnel browse accordion — all markets visible, expand as many as you like */
.fn-accordion { display: flex; flex-direction: column; gap: 8px; }
.fn-acc { border: 1px solid var(--panel-border-dim); border-radius: 10px; background: var(--panel-2); overflow: hidden; }
.fn-acc.open { border-color: var(--ink-7); }
.fn-acc-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: transparent; border: none; color: var(--text); cursor: pointer; font-family: inherit; text-align: left; }
.fn-acc-head:hover { background: var(--ink-3); }
.fn-acc-soon .fn-acc-head { cursor: not-allowed; opacity: .45; }
.fn-acc-emoji { font-size: 20px; }
.fn-acc-label { font-size: 15px; font-weight: 700; }
.fn-acc-sub { font-size: 11px; color: var(--slate); }
.fn-acc-chev { margin-left: auto; font-size: 12px; color: var(--slate); }
.fn-acc-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }

/* Per-section preview chart toggle — a conspicuous triangle show/hide button */
.fn-chart { margin-top: 2px; }
.fn-chart-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    background: #171b24; border: 1px solid #2a3550; color: #9db4ff;
    font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.fn-chart-toggle:hover { border-color: #4d7cff; color: #cdd8ff; background: #1a2033; }
.collapsible-preview-chart:not(.collapsed) .fn-chart-toggle { color: #cdd8ff; border-color: #4d7cff; }

/* Per-section sub-labels, free-text search, and armed (play-selected) highlight */
.fn-sub-label { font-size: 10px; color: var(--slate-dim); text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; }
.fn-search-free { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 8px; background: var(--panel-1); border: 1px solid var(--panel-border); color: var(--text); font-family: inherit; font-size: 14px; }
.fn-search-free:focus { outline: none; border-color: var(--green); }
.fn-hint { font-size: 11px; color: var(--slate-dim); margin-top: 4px; }
.fn-chip.armed { background: #14261a; border-color: var(--green); color: var(--text); font-weight: 700; box-shadow: inset 0 0 0 1px var(--green); }
.fn-oft-card.armed { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

/* ── Extracted inline styles (Phase 2 codemod) — consolidate during the visual pass ── */
.ix-1 { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; border-bottom:1px solid var(--ink-6); padding-bottom:8px; }
.ix-2 { margin:0; }
.ix-settings-back-btn { padding:6px 10px; font-size:12px; background:var(--ink-4); border:1px solid var(--ink-7); color:var(--text); cursor:pointer; border-radius:4px; font-family:inherit; }
.u-row6 { display:flex; gap:6px; align-items:center; }
.ix-exit-threshold { width:100px; }
.ix-exit-threshold-mode { background:var(--ink-2); color:#0f0; border:1px solid var(--ink-6); padding:2px 6px; font-family:inherit; }
.ix-3 { font-size:10px; color:var(--ink-8); margin:2px 0 6px 0; }
.ix-poker-mode-desc { font-size:10px; color:var(--mut-1); display:block; }
.ix-4 { font-size:10px; color:var(--mut-1); margin:2px 0 8px 0; }
.ix-skins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ix-5 { flex-direction:column; align-items:flex-start; }
.ix-6 { margin-bottom:6px; }
.ix-export-bot-checkboxes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; font-size:11px; }
.ix-download-bot-data-btn {
    padding: 7px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; cursor: pointer;
    background: rgba(0, 200, 5, .12); color: var(--green);
    border: 1px solid rgba(0, 200, 5, .4); border-radius: 8px; transition: background .12s;
}
.ix-download-bot-data-btn:hover { background: rgba(0, 200, 5, .22); }
.ix-save-settings-btn { margin-top: 14px; }
.ix-sotd-loading { font-size:11px; color:var(--mut-3); }
.u-ml-auto { margin-left: auto; }
.ix-7 { display:flex; gap:6px; margin-top:8px; }
.u-flex1 { flex:1; }
.u-mt12 { margin-top:12px; }
.ix-sotd-error { font-size:10px; color:#ff4444; }
.ix-search-card { margin-top: 8px; margin-bottom: 8px; }
.u-mt8 { margin-top:8px; }
.ix-stock-race-btn { width:100%; margin-top:6px; }
.ix-8 { margin-top:6px; display: flex; gap: 8px; }
.ix-play-live-btn { flex: 1; }
.ix-live-info-btn { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; }
.ix-9 { font-size:11px; }
.ix-10 { font-size:11px; color:var(--mut-3); margin:4px 0 8px; }
.ix-crypto-status { font-size:11px; color:var(--mut-3); min-height:14px; margin-top:4px; }
.ix-11 { width:100%; margin-top:8px; padding:10px; background:var(--green); color:var(--text); border:none; border-radius:6px; font-weight:bold; cursor:pointer; font-family:inherit; }
.u-upper { text-transform:uppercase; }
.ix-race-session-field { flex-direction:column; gap:6px; }
.ix-race-config-sotd-ticker { color:#00d4ff; font-weight:bold; }
.ix-race-config-sotn-ticker { color:#ab47bc; font-weight:bold; }
.ix-race-date-custom-row { align-items:center; gap:8px; margin-top:4px; }
.ix-play-setup-live-note { font-size:11px; color:var(--mut-1); margin:2px 0 6px; }
.ix-race-status-msg { color:#ff7043; font-size:12px; min-height:16px; margin-top:4px; }
.ix-12 { display:flex; gap:8px; }
.ix-13 { color:var(--ink-7); font-weight:normal; }
.ix-14 { --bot-color:#FF3B30; }
.ix-15 { --bot-color:#FF9500; }
.ix-16 { --bot-color:#FFD60A; }
.ix-17 { --bot-color:#34C759; }
.ix-18 { --bot-color:#0A84FF; }
.ix-19 { --bot-color:#BF5AF2; }
.ix-race-bot-warning { color:#ff7043; font-size:10px; margin-top:4px; }
.ix-20 { font-size: 13px; line-height: 1.6; margin-bottom: 20px; color: var(--mut-4); font-family: inherit; }
.ix-21 { margin: 8px 0; }
.ix-22 { margin: 14px 0 8px; }
.ix-23 { color: #00ffaa; font-weight: bold; }
.ix-24 { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 100%; padding-left: 20px; font-family: inherit; font-size: 14px; }
.ix-25 { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); }
.ix-pause-mute-music { cursor: pointer; width: 16px; height: 16px; }
.ix-26 { color:#ff4444; }
.ix-27 { color:var(--ink-8); }
.ix-28 { margin-top:14px; }
.ix-29 { width: 64px; height: 64px; display: block; margin: 0 auto; border-radius: 12px; }
.ix-30 { margin: 16px 0; }
.ix-main-menu-play-btn { font-size:18px; padding: 16px; width: 100%; }
.ix-31 { display: flex; flex-direction: column; gap: 8px; }
.ix-google-sign-in-section { margin-bottom:12px; }
.ix-google-sign-in-btn { display:flex; justify-content:center; margin-bottom:4px; }
.ix-acct-guest-view { text-align:center; padding: 24px 12px; }
.ix-32 { font-size:36px; margin-bottom:12px; }
.ix-33 { font-size:12px; color:var(--mut-2); margin: 8px 0 20px 0; line-height: 1.5; font-family: inherit; }
.ix-34 { display:flex; gap:12px; justify-content:center; }
.ix-acct-guest-login-btn { min-width:100px; padding: 6px 12px; background:var(--ink-4); border:1px solid var(--ink-7); color:#0f0; cursor:pointer; font-family:inherit; }
.ix-35 { margin-top: 20px; border-top: 1px solid var(--ink-4); padding-top: 16px; }
.ix-acct-rolling-info { font-size:10px; color:var(--ink-8); margin-top:3px; }
.ix-acct-rolling-balance { color:#00ff88; font-weight:bold; }
.ix-36 { margin-top:10px; }
.ix-37 { color:var(--ink-8); font-size:10px; }
.ix-wallet-guest-view { text-align:center; padding:24px 12px; }
.ix-38 { font-size:12px; color:var(--mut-2); margin:8px 0 20px 0; line-height:1.5; font-family:inherit; }
.ix-wallet-guest-login-btn { min-width:120px; padding:6px 12px; background:var(--ink-4); border:1px solid var(--ink-7); color:#0f0; cursor:pointer; font-family:inherit; }
.ix-39 { color:var(--ink-8); font-size:12px; padding:8px 0; }
.ix-40 { margin-bottom: 20px; }
.ix-41 { margin-top: 0; display:flex; justify-content:space-between; align-items:center; }
.ix-chart-mode-label { font-size:11px; font-weight:normal; color:var(--mut-1); }
.ix-acct-performance-chart { width:100%; height:180px; background:#070710; border:1px solid #1a1a2e; border-radius:4px; overflow:visible; position:relative; }
.ix-42 { text-align:center; opacity:.5; padding:16px; }
.ix-43 { margin-bottom: 12px; display:flex; justify-content:space-between; align-items:center; }
.ix-cal-month-label { font-family: 'JetBrains Mono', monospace; font-weight: bold; color: var(--text); font-size: 16px; }
.ix-cal-day-detail { margin-top: 16px; }
.ix-44 { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
.ix-45 { margin: 0; }
.ix-46 { display:flex; gap: 8px; }
.ix-export-all-sessions-btn { padding: 4px 8px; font-size:11px; }
.ix-cal-all-sessions { max-height: 380px; overflow-y: auto; }
.ix-trn-guest-view { text-align:center; padding:20px 12px; }
.ix-47 { font-size:13px; color:var(--mut-2); line-height:1.5; }
.ix-trn-guest-login-btn { min-width:120px; padding:8px 14px; background:var(--ink-4); border:1px solid var(--ink-7); color:#0f0; cursor:pointer; font-family:inherit; }
.ix-48 { color:#667; }
.ix-49 { display:flex; gap:6px; margin:4px 0 10px 0; }
.ix-50 { flex:1; padding:7px 10px; font-family:inherit; font-size:12px; cursor:pointer; border:1px solid var(--ink-6); border-radius:6px; background:#1c6b3a; color:var(--text); }
.ix-51 { flex:1; padding:7px 10px; font-family:inherit; font-size:12px; cursor:pointer; border:1px solid var(--ink-6); border-radius:6px; background:#181818; color:var(--mut-2); }
.ix-52 { text-align:center; opacity:.5; padding:24px; }

/* ═══════════════════════════════════════════════════════════════════════════
   V1 REFINED TERMINAL — approved redesign layer (design branch)
   Appended last so it wins the cascade. Layout/visual only; no behavior.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HUD bar ───────────────────────────────────────────────────────────── */
#hud {
    min-height: 52px;
    padding: 8px 14px;
    gap: 6px 14px;
    background: var(--ink-1);
    border-bottom: 1px solid var(--ink-3);
}
#hud-left, #hud-controls, #hud-right { gap: 6px 10px; }

.pb-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mut-1);
}
#portfolioValue { font-size: 19px; }

/* leverage/alloc + timer boards become uniform chips */
#livesBoard, #timerBoard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--mut-3);
    letter-spacing: 0;
}
#timerBoard #timer { color: var(--text); font-weight: 600; }

/* icon-only HUD buttons — uniform 30px squares */
#pauseBtn, #settingsBtn, #skinsBtn, #calendarBtn, #sfxMuteHudBtn, #muteHudBtn, #tutHelpBtn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 8px;
    color: var(--mut-3);
    font-size: 13px;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    opacity: 1;
    transition: color .12s, border-color .12s, background .12s;
}
#pauseBtn:hover, #settingsBtn:hover, #skinsBtn:hover, #calendarBtn:hover,
#sfxMuteHudBtn:hover, #muteHudBtn:hover, #tutHelpBtn:hover {
    color: var(--text);
    border-color: var(--ink-5);
    background: var(--ink-0);
    opacity: 1;
}
#hud button svg { display: block; }
#hud .btn-icon { display: inline-flex; align-items: center; }

/* account chip — violet accent, keeps its text (username) */
#accountBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: rgba(139,124,246,.10);
    border: 1px solid rgba(139,124,246,.38);
    border-radius: 8px;
    color: var(--accent-soft);
    font-size: 12px;
    font-weight: 600;
}
#accountBtn:hover { background: rgba(139,124,246,.2); }

/* wallet chip */
#walletChipBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 8px;
    color: var(--mut-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    cursor: pointer;
}
#walletChipBtn:hover { color: var(--text); border-color: var(--ink-5); }

/* quick-end chip (live sessions) */
#endLiveBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: rgba(224,48,48,.14);
    border: 1px solid rgba(224,48,48,.5);
    border-radius: 8px;
    color: #ff8080;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
#endLiveBtn:hover { background: rgba(224,48,48,.28); }

/* speed chip */
#speedControl {
    flex: 0 1 210px;
    height: 30px;
    padding: 0 10px;
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 8px;
}
#speedSlider { height: 3px; }
#speedSlider::-webkit-slider-thumb { width: 12px; height: 12px; box-shadow: none; }
#speedSlider::-moz-range-thumb { width: 12px; height: 12px; }

/* quote block on the right */
#liveIndicator { font-size: 13px; font-family: 'JetBrains Mono', monospace; }

/* ── Progress hairline ─────────────────────────────────────────────────── */
#progress-container {
    height: 3px;
    background: var(--ink-2);
    border-bottom: none;
}

/* ── Time & Sales panel ────────────────────────────────────────────────── */
#side-panel {
    width: 232px;
    background: var(--ink-1);
    border-left: 1px solid var(--ink-3);
}
#side-panel h3 {
    text-align: left;
    padding: 10px 12px 6px;
    background: transparent;
    border-bottom: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--mut-1);
}
#tape-toggles {
    background: transparent;
    border-bottom: 1px solid var(--ink-3);
    padding: 0 8px 8px;
    gap: 4px;
}
.tape-toggle {
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 5px;
    color: var(--mut-1);
    font-size: 9.5px;
    font-weight: 600;
    padding: 4px 6px;
}
.tape-toggle.active { background: var(--ink-0); color: var(--mut-3); border-color: var(--ink-5); }
.tape-toggle.export-csv {
    background: var(--ink-2);
    color: var(--mut-3);
    border-color: var(--ink-5);
}
.tape-toggle.export-csv:hover { background: var(--ink-0); color: var(--accent-soft); border-color: var(--accent); }
.tape-filter-tag { border-radius: 5px; padding: 3px 10px; font-size: 9.5px; }
.tape-header {
    background: transparent;
    border-bottom: 1px solid var(--ink-3);
    padding: 5px 12px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mut-1);
}
#timeAndSales { font-size: 10.5px; }
#tapeList li { padding: 5px 12px; border-bottom: 1px solid rgba(34,40,52,.6); }
.tape-exit .col-side { color: var(--accent-soft); }   /* was amber — yellow retired */

/* ── Bottom status strip ───────────────────────────────────────────────── */
#news-ticker { height: 26px; background: var(--ink-1); border-top: 1px solid var(--ink-3); }
.pt-ticker-chip { color: #fff; }
.pt-ticker-item { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--mut-1); }

/* ── Mobile trade dock ─────────────────────────────────────────────────── */
#mobile-controls { padding: 10px 12px 14px; background: var(--ink-1); border-top: 1px solid var(--ink-3); }
.mobile-btn { font-weight: 800 !important; }
#mobileBuyBtn  { background: var(--green) !important; color: #fff !important; border: none !important; }
#mobileSellBtn { background: var(--red) !important; color: #fff !important; border: none !important; }
#mobileSellAllBtn { background: transparent !important; border: 1px solid var(--ink-6) !important; color: var(--mut-3) !important; font-weight: 600 !important; }

/* ── Main menu — desk terminal ─────────────────────────────────────────── */
.landing-card.desk {
    max-width: 360px;
    text-align: left;
    background: var(--ink-1);
    border: 1px solid var(--ink-3);
    border-radius: 18px;
    padding: 26px 24px 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.desk-head { display: flex; align-items: center; gap: 10px; }
.desk-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ink-2);
    border: 1px solid var(--ink-5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.desk-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--text);
    margin: 0;
}
.desk-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--mut-1);
    letter-spacing: 0.1em;
}
.desk-stats {
    display: flex;
    margin: 16px 0 0;
    border: 1px solid var(--ink-3);
    border-radius: 10px;
    overflow: hidden;
}
.desk-stats > div { flex: 1; padding: 10px 12px; background: var(--ink-0); min-width: 0; }
.desk-stats > div + div { border-left: 1px solid var(--ink-3); }
.desk-stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mut-1);
}
.desk-stat-v {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.desk-stat-v.profit { color: var(--green); }
.desk-stat-v.loss   { color: var(--red); }

/* soft-green primary CTA — green outline, translucent fill */
.landing-card.desk .landing-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 16px 0 4px;
    padding: 13px;
    border-radius: 12px;
    border: 1px solid var(--green);
    background: rgba(0,200,5,.32);
    color: #eaffee;
    font-size: 15px;
    font-weight: 800;
    transition: background .12s;
}
.landing-card.desk .landing-btn-primary:hover { background: rgba(0,200,5,.48); }
.landing-card.desk .landing-btn-primary svg { color: var(--green); }

.desk-nav { margin-top: 8px; display: flex; flex-direction: column; }
.desk-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ink-3);
    color: var(--mut-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: left;
    transition: color .12s;
}
.desk-nav-btn:last-child { border-bottom: none; }
.desk-nav-btn svg { color: var(--mut-1); flex-shrink: 0; transition: color .12s; }
.desk-nav-btn:hover, .desk-nav-btn:hover svg { color: var(--accent-soft); }
.desk-nav-btn .chev { margin-left: auto; color: var(--mut-1); font-family: 'Inter', sans-serif; }
.desk-tagline { color: var(--mut-1); font-size: 11px; text-align: center; margin: 10px 0 0; }

/* ── Soft-green PLAY in the funnel ─────────────────────────────────────── */
.funnel-next, .funnel-play {
    border: 1px solid var(--green);
    background: rgba(0,200,5,.32);
    color: #eaffee;
}
.funnel-next:hover:not(:disabled), .funnel-play:hover { background: rgba(0,200,5,.48); filter: none; }
.funnel-next:disabled { background: var(--ink-4); border-color: var(--ink-5); color: var(--mut-1); }

/* ── Small screens: keep the new chip geometry ─────────────────────────── */
@media (max-width: 600px) {
    #settingsBtn, #accountBtn { border-radius: 8px; }
    #accountBtn { width: auto; padding: 0 10px; }
    .landing-card.desk { max-width: 420px; }
    /* long session string ellipsizes instead of wrapping the HUD taller */
    #hud-right { min-width: 0; max-width: 100%; }
    #liveIndicator { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V1 REFINED TERMINAL — round 2 (HUD placement, soft buttons, race board,
   game-over card, coral secondary accents). Appended after round 1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HUD: match the V1 mock — left info · controls pushed right · quote ── */
#hud { justify-content: flex-start; }
#hud-controls { margin-left: auto; }
#hud-right { margin-left: 0; flex-wrap: nowrap; }

/* portfolio: label on top, value + P&L on one baseline */
#portfolioBoard {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 8px;
    align-items: baseline;
}
#portfolioBoard .pb-label { grid-column: 1 / -1; }
#pnlStats { text-align: left; font-size: 11px; }

/* session date: tiny + dim inside the timer chip */
#sessionDate { font-size: 9.5px; color: var(--mut-1); letter-spacing: 0.02em; }

/* quote: bold symbol, tiny dim session info (auto-hides when tight) */
#liveIndicator .dot { font-size: 9px; }
#liveIndicator .li-sym { font-weight: 700; font-size: 13px; color: var(--text); }
#liveIndicator .li-sess {
    font-size: 10px; font-weight: 500; color: var(--mut-1);
    margin-left: 7px; letter-spacing: 0.01em;
}
@media (max-width: 1150px) { #liveIndicator .li-sess { display: none; } }

/* ── Mobile HUD: portfolio + quote left column, controls top-right ─────── */
@media (max-width: 600px) {
    #hud {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 6px 10px;
        padding: 8px 10px;
    }
    #hud-left     { grid-area: 1 / 1 / 2 / 2; }
    #hud-controls { grid-area: 1 / 2 / 2 / 3; margin-left: 0; justify-content: flex-end; align-content: flex-start; max-width: 178px; }
    #hud-right    { grid-area: 2 / 1 / 3 / 3; justify-content: flex-start; }
    #speedControl { flex: 1 1 100%; }
    #livesBoard, #timerBoard { height: 24px; padding: 0 8px; font-size: 10px; }
    #liveIndicator .li-sess { display: none; }
    #liveIndicator .li-sym, #tqPrice { font-size: 14px; }
    /* stack P&L under the value — side-by-side overflows at 390px */
    #portfolioBoard { grid-template-columns: 1fr; }
    #pnlStats { grid-column: 1; font-size: 10px; }
    #portfolioValue { font-size: 17px; min-width: 0; }
    /* symbol must not ellipsize away; let the change % give way instead */
    #liveIndicator { overflow: visible; flex-shrink: 0; }
    #tickerQuote { min-width: 0; overflow: hidden; }
    #tqChange { font-size: 11px; }
}

/* ── Soft buttons everywhere: outline + translucent fill ───────────────── */
#restartBtn, .auth-submit-btn, .trn-primary-btn, .race-launch-btn, .ai-race-btn,
.wallet-deposit-btn, .ix-save-settings-btn, .pause-primary, #profileSaveBtn, .mp-race-btn {
    background: rgba(0,200,5,.32);
    border: 1px solid var(--green);
    color: #eaffee;
    transition: background .12s;
}
#restartBtn:hover, .auth-submit-btn:hover, .trn-primary-btn:hover, .race-launch-btn:hover,
.ai-race-btn:hover, .wallet-deposit-btn:hover, .ix-save-settings-btn:hover,
.pause-primary:hover, #profileSaveBtn:hover, .mp-race-btn:hover {
    background: rgba(0,200,5,.48);
}
#restartBtn { border-radius: 10px; font-family: 'Inter', system-ui, sans-serif; font-weight: 800; }

/* mobile trade dock: same treatment, red for sell */
#mobileBuyBtn {
    background: rgba(0,200,5,.32) !important;
    border: 1px solid var(--green) !important;
    color: #eaffee !important;
}
#mobileSellBtn {
    background: rgba(224,48,48,.32) !important;
    border: 1px solid var(--red) !important;
    color: #ffecec !important;
}
#endLiveBtn { background: rgba(224,48,48,.14); }

/* ── AI race board ─────────────────────────────────────────────────────── */
.race-header { padding: 8px 10px 6px; border-bottom: 1px solid var(--ink-3); background: transparent; }
.race-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.14em; color: var(--mut-1);
}
.race-trades-btn { margin-left: auto; }
.race-pos-tag.short { background: rgba(224,48,48,.15); color: var(--red); }
.race-collapsed-summary {
    padding: 6px 12px;
    font-size: 10.5px;
    color: var(--mut-3);
    white-space: nowrap;
}
.race-collapsed-summary .rcs-you { color: var(--text); font-weight: 700; }
.rcs-expand { color: var(--mut-1); margin-left: 7px; }

/* collapsed = a tiny pill floating over the chart; the header (redundant
   with the HUD) disappears and the canvas reclaims the full width */
#main-area { position: relative; }
#raceBoard.collapsed .race-header { display: none; }
#raceBoard.collapsed {
    cursor: pointer;
    position: absolute;
    top: 6px; left: 6px;
    z-index: 45;
    height: auto;
    border: 1px solid var(--ink-5);
    border-radius: 999px;
    background: rgba(17,20,26,.92);
    box-shadow: none;
    overflow: visible;
    padding: 0;
}
/* the drag-resizer only makes sense against the expanded column */
#raceBoard.collapsed + #raceBoardResizer { display: none !important; }
@media (max-width: 820px), (orientation: portrait) {
    #raceBoard { border-color: var(--ink-5); }
    #raceBoard.collapsed { top: 6px; left: 6px; max-height: none; }
}

/* ── Game-over card ────────────────────────────────────────────────────── */
#gameOverCard {
    background: var(--ink-1);
    border: 1px solid var(--ink-3);
    border-radius: 16px;
    padding: 24px 26px;
}
#gameOver h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
#gameOver p { font-size: 13px; color: var(--mut-3); font-family: 'JetBrains Mono', monospace; }
.game-over-close-btn { border-radius: 8px; color: var(--mut-1); }

#resultSummary {
    background: var(--ink-0);
    border: 1px solid var(--ink-3);
    border-radius: 12px;
    margin: 14px 0;
    padding: 16px 18px;
}
#resultAmount {
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 30px;
    letter-spacing: -0.01em;
}
#leaderboardPosition { color: var(--coral-soft); font-size: 14px; font-weight: 700; }
#resultMessage { color: var(--mut-1); font-size: 12.5px; }

.go-rank-panel { background: var(--ink-0); border: 1px solid var(--ink-3); border-radius: 12px; }
.go-rank-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mut-1); text-align: left;
}
.go-rank-note { color: var(--mut-3); border-top: 1px solid var(--ink-3); }

.session-stats { background: var(--ink-0); border: 1px solid var(--ink-3); border-radius: 12px; }
.stats-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em; color: var(--mut-1); text-align: left;
}
.stat-cell { background: var(--ink-1); border-color: var(--ink-3); border-radius: 8px; }
.stat-sub { color: var(--ink-9); }
.stats-action-btn {
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: 6px;
    color: var(--mut-3);
}
.stats-action-btn:hover { background: var(--ink-0); color: var(--accent-soft); border-color: var(--accent); }

#leaderboard h3 {
    font-family: 'JetBrains Mono', monospace;
    color: var(--mut-1);
    font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
    opacity: 1;
}
#highScores li { background: var(--ink-0); border: 1px solid var(--ink-3); border-radius: 10px; }

/* celebration accents: gold retired → warm coral (Claude-terminal salmon) */
@keyframes lbGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(217,119,87,0.25), 0 0 60px rgba(217,119,87,0.08); border-color: var(--coral); }
    50%       { box-shadow: 0 0 40px rgba(217,119,87,0.5),  0 0 100px rgba(217,119,87,0.15); border-color: var(--coral-soft); }
}
#gameOver.leaderboard-glow #gameOverCard { border-color: var(--coral); }
.lb-highlight { background: rgba(217,119,87,0.10) !important; border-color: var(--coral) !important; }
.lb-highlight .lb-name { color: var(--coral-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   V1 REFINED TERMINAL — ROUND 3 (2026-07-22)
   Funnel (play menu) consistency pass · settings + leaderboard refresh ·
   account tabs mobile fit · auth guest affordance. Appended layer — wins
   the cascade over everything above.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Funnel (play menu) — retint to token surfaces, unify spacing ──────── */
.funnel-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
    color: var(--mut-3); text-transform: uppercase;
}
.funnel-menu-btn, .ix-settings-back-btn {
    padding: 6px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
    background: var(--ink-2); border: 1px solid var(--ink-3);
    color: var(--mut-3); border-radius: 8px; cursor: pointer;
}
.funnel-menu-btn:hover, .ix-settings-back-btn:hover { background: var(--ink-3); color: var(--text); }

.funnel-h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--mut-2);
}
.funnel-back {
    background: var(--ink-2); border: 1px solid var(--ink-3);
    color: var(--mut-3); border-radius: 8px;
}
.funnel-back:hover { border-color: var(--ink-5); color: var(--text); }

.fn-crumb { background: var(--ink-2); border-color: var(--ink-3); }
.fn-crumb.done:hover { border-color: var(--accent); }
.fn-crumb-label { color: var(--mut-1); }
.fn-crumb-sep { color: var(--mut-1); }

/* accordion sections */
.fn-acc { background: var(--ink-1); border-color: var(--ink-3); border-radius: 12px; }
.fn-acc.open { border-color: var(--ink-4); }
.fn-acc-head { padding: 12px 14px; }
.fn-acc-head:hover { background: var(--ink-2); }
.fn-acc-emoji { display: inline-flex; align-items: center; color: var(--mut-3); }
.fn-acc-label { font-size: 14px; }
.fn-acc-sub { color: var(--mut-1); font-size: 10.5px; }
.fn-acc-chev { color: var(--mut-1); }
.fn-acc-body { gap: 10px; padding: 2px 14px 14px; }
.fn-sub-label { display: flex; align-items: center; gap: 5px; color: var(--mut-1); }
.fn-sub-label svg { color: var(--coral-soft); }

/* chips + search — one selection language: translucent green fill */
.fn-chip { background: var(--ink-2); border-color: var(--ink-4); color: var(--mut-4); }
.fn-chip:hover { border-color: var(--mut-1); color: var(--text); }
.fn-chip.sel, .fn-chip.armed {
    background: rgba(0, 200, 5, .14); border-color: var(--green);
    color: #eaffee; font-weight: 600; box-shadow: none;
}
.fn-search, .fn-search-free { background: var(--ink-2); border-color: var(--ink-4); border-radius: 8px; }
.fn-search:focus, .fn-search-free:focus { border-color: var(--accent); }

/* ticker-of-the-day card — coral accent (celebration/heat) */
.fn-oft-card { background: var(--ink-2); border-color: var(--ink-4); }
.fn-oft-card:hover:not(.disabled) { border-color: var(--coral-soft); }
.fn-oft-card.armed { border-color: var(--green); box-shadow: none; background: rgba(0, 200, 5, .10); }
.fn-oft-emoji { display: inline-flex; align-items: center; color: var(--coral); }
.fn-oft-go { display: inline-flex; align-items: center; color: var(--mut-2); }

/* mode cards */
.funnel-cat, .funnel-mode { background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 12px; }
.funnel-cat:hover:not(:disabled), .funnel-mode:hover { border-color: var(--mut-1); background: var(--ink-2); }
.funnel-cat.sel, .funnel-mode.sel { border-color: var(--green); background: rgba(0, 200, 5, .10); }
.fn-mode-emoji { display: inline-flex; align-items: center; justify-content: center; color: var(--mut-3); }
.funnel-mode.sel .fn-mode-emoji { color: var(--green); }

/* session picker — radios become tappable rows */
.fn-session-box { background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 12px; padding: 8px; gap: 2px; }
.fn-radio { padding: 9px 10px; border-radius: 8px; font-size: 13.5px; color: var(--mut-4); }
.fn-radio:hover { background: var(--ink-2); color: var(--text); }
.fn-radio input[type="radio"] { accent-color: var(--green); }
.fn-radio-g { color: var(--mut-2); flex: 0 0 auto; }
.fn-radio-hint { color: var(--mut-1); }
.fn-live-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--red); box-shadow: 0 0 6px rgba(224, 48, 48, .8);
}
.fn-ticker-foot { padding-top: 2px; }
.fn-ticker-sel { color: var(--mut-2); font-size: 12.5px; }

/* ── Settings modal ─────────────────────────────────────────────────────── */
.modal-content {
    background: var(--ink-1);
    border: 1px solid var(--ink-3);
    border-radius: 14px;
    padding: 24px 26px 22px;
}
.modal-content h2 {
    font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--mut-3);
    margin: 0 0 6px;
}
.settings-section-label,
.settings-collapsible .toggle-header {
    font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--mut-1); border-top: 1px solid var(--ink-3);
    padding-top: 12px; margin: 12px 0 10px;
}
.settings-collapsible .toggle-header:hover { color: var(--mut-3); background: transparent; }
.setting-item label { color: var(--mut-4); }
.modal-content input[type="number"],
.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content select {
    background: var(--ink-2); color: var(--text);
    border: 1px solid var(--ink-4); border-radius: 6px;
    padding: 5px 8px; font-family: 'JetBrains Mono', monospace;
}
.modal-content input:focus, .modal-content select:focus { outline: none; border-color: var(--accent); }
.modal-content input[type="checkbox"] { accent-color: var(--green); }

/* ── Leaderboard modal ──────────────────────────────────────────────────── */
.lb-card {
    background: var(--ink-1);
    border: 1px solid var(--ink-3);
    border-radius: 14px;
}
.lb-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--mut-3);
    margin: 0 0 10px;
}
.lb-title svg { color: var(--accent); }
.lb-sub { color: var(--mut-1); margin: 0 0 14px; }
.ix-49 { gap: 6px; margin: 0 0 12px; }
.ix-50, .ix-51 {
    flex: 0 1 auto; padding: 6px 16px; font-size: 12px;
    border: 1px solid var(--ink-4); border-radius: 999px;
    background: var(--ink-2); color: var(--mut-2); cursor: pointer;
}
.lb-tab:hover { color: var(--text); border-color: var(--mut-1); }
.lb-tab.active {
    background: rgba(0, 200, 5, .14); border-color: var(--green);
    color: #eaffee; font-weight: 600;
}
.lb-table th {
    font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--mut-1);
    border-bottom: 1px solid var(--ink-3); background: transparent;
    padding: 6px 10px; text-align: left;
}
.lb-table td { border-bottom: 1px solid var(--ink-2); }
.lb-table tr:hover td { background: var(--ink-2); }

/* ── Account & History — tabs fit on mobile, unified active state ──────── */
.acct-card { background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 14px; }
.acct-tabs-nav { gap: 4px; border-bottom: 1px solid var(--ink-3); }
.acct-tab-btn { color: var(--mut-2); border-radius: 6px; padding: 7px 12px; white-space: nowrap; }
.acct-tab-btn:hover { color: var(--text); background: var(--ink-2); }
.acct-tab-btn.active {
    color: #eaffee; border-color: var(--green);
    background: rgba(0, 200, 5, .14); box-shadow: none;
}
@media (max-width: 600px) {
    .acct-card { padding: 18px 14px; }
    .acct-tabs-nav {
        gap: 3px; overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        margin: 0 -14px 16px; padding: 0 14px 6px;
    }
    .acct-tabs-nav::-webkit-scrollbar { display: none; }
    .acct-tab-btn { font-size: 11.5px; padding: 6px 9px; }
}

/* wallet tab glyph */
.ix-32 { color: var(--mut-2); }
.ix-32 svg { display: inline-block; }

/* ── Auth modal — guest escape hatch ────────────────────────────────────── */
.auth-guest-row { margin-top: 16px; text-align: center; }
.auth-guest-btn {
    width: 100%; padding: 9px 12px;
    background: var(--ink-2); border: 1px solid var(--ink-4);
    color: var(--mut-4); border-radius: 8px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
.auth-guest-btn:hover { border-color: var(--mut-1); color: var(--text); }
.auth-guest-note { margin: 8px 0 0; font-size: 10.5px; color: var(--mut-1); line-height: 1.5; }

/* ── Misc small buttons touched this round ──────────────────────────────── */
.trn-quick-btn {
    background: var(--ink-2); border: 1px solid var(--ink-4);
    color: var(--mut-4); border-radius: 6px;
}
.trn-quick-btn:hover { background: var(--ink-3); border-color: var(--mut-1); color: var(--text); }
.cal-export-btn { background: var(--ink-2); border: 1px solid var(--ink-4); color: var(--mut-4); border-radius: 6px; }
.cal-export-btn:hover { background: var(--ink-3); color: var(--text); }

/* inline glyph baseline alignment for text-flow spots */
.trn-title { display: flex; align-items: center; gap: 8px; }
.trn-title svg { color: var(--accent); }
.trn-quick-btn svg, .cal-export-btn svg { vertical-align: -2px; }
#funnelTournBtn svg { vertical-align: -2px; }

/* ── Round 3 fixups ─────────────────────────────────────────────────────── */
/* back chevron chip */
.funnel-back { font-size: 16px; line-height: 1; }

/* account modal: clear the close button on mobile; calmer guest view */
.ix-acct-guest-view h3 { font-size: 18px; letter-spacing: .5px; }
.ix-acct-guest-login-btn {
    background: var(--ink-2); border: 1px solid var(--ink-4);
    color: var(--mut-4); border-radius: 8px;
}
.ix-acct-guest-login-btn:hover { border-color: var(--mut-1); color: var(--text); }
#acctGuestRegisterBtn {
    background: rgba(0, 200, 5, .32); border: 1px solid var(--green); color: #eaffee;
}
#acctGuestRegisterBtn:hover { background: rgba(0, 200, 5, .48); }
@media (max-width: 600px) {
    .acct-card { padding-top: 46px; }
}

/* leaderboard active tab: stronger fill so state reads at a glance */
.lb-tab.active { background: rgba(0, 200, 5, .25); }

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 4 — quote beside portfolio value (HUD), 2026-07-22
   #hud-right now lives INSIDE #hud-left, directly after #portfolioBoard.
   ══════════════════════════════════════════════════════════════════════════ */
#hud-right { margin-left: 0; justify-content: flex-start; }
#liveIndicator { display: flex; align-items: baseline; }
@media (max-width: 600px) {
    /* free up row-1 width so value + price share the line; icons wrap to 2 rows */
    #hud-controls { max-width: 132px; }
    #hud-left { flex-wrap: wrap; row-gap: 2px; align-items: center; }
    #liveIndicator .dot { display: none; }
    #liveIndicator .li-sym { font-size: 12px; }
    #tqPrice { font-size: 12.5px; }
}

/* Session date now lives as the chart watermark — drop the HUD copies. */
#liveIndicator .li-sess, #sessionDate { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 4b — HUD breathing room (mobile) + full-width speed bar
   #speedControl is now a direct #hud child (moved out of #hud-controls).
   ══════════════════════════════════════════════════════════════════════════ */
/* desktop: SPD chip sits at the far right, after the icon cluster */
#speedControl { margin-left: 10px; }

@media (max-width: 600px) {
    #hud { gap: 8px 10px; padding: 9px 12px; }

    /* icon cluster: tight right-justified rows, no scattered spacing */
    #hud-controls {
        max-width: 152px;
        gap: 6px;
        justify-content: flex-end;
        align-content: flex-start;
    }

    /* speed bar: its own full-width row under portfolio + controls */
    #speedControl {
        grid-area: 2 / 1 / 3 / 3;
        flex: none;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        height: 34px;
        padding: 0 12px;
    }
    .speed-slider-wrap { flex: 1 1 auto; min-width: 0; }
    #speedSlider { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V3 PRO DESK — 2026-07-22
   Segmented top bar · left tool rail (expandable, vertical speed slider).
   #hud-controls moved from #hud into #main-area — same ids, new geometry.
   Appended layer: wins the cascade over every earlier HUD rule.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Segmented top bar ──────────────────────────────────────────────────── */
#hud {
    display: flex;
    align-items: stretch;
    height: 46px;
    padding: 0;
    gap: 0;
    background: var(--ink-1);
    border-bottom: 1px solid var(--ink-3);
}
.hud-brand {
    display: flex; align-items: center; gap: 8px;
    padding: 0 16px;
    border-right: 1px solid var(--ink-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 800; letter-spacing: .18em;
    color: var(--accent-soft);
    white-space: nowrap;
}
#hud-left { display: flex; align-items: stretch; gap: 0; flex: 1; min-width: 0; margin: 0; }

/* every top-level item becomes a segment: flat, hairline-separated */
#hud-left > .hud-item,
#hud-left > #hud-right,
#hud-left > #seat-scoreboard,
#hud-left > #liveBadge {
    display: flex; align-items: center; gap: 8px;
    height: auto; min-height: 0;
    padding: 0 16px; margin: 0;
    background: transparent; border: none; border-radius: 0;
    border-right: 1px solid var(--ink-3);
}
#portfolioBoard { display: flex; align-items: baseline; column-gap: 8px; }
#portfolioBoard .pb-label { grid-column: auto; }
#portfolioValue { font-size: 15px; }
#pnlStats { font-size: 11px; }
#livesBoard, #timerBoard { font-size: 11px; color: var(--mut-3); }
#timer { font-weight: 700; color: var(--text); }
/* quote = the growing right-justified segment */
#hud-right { order: 10; margin-left: auto; border-right: none; justify-content: flex-end; }
#liveBadge { border-right: none; }

/* ── Left tool rail ─────────────────────────────────────────────────────── */
#main-area > #hud-controls {
    flex: 0 0 46px;
    width: 46px;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: normal;
    justify-content: flex-start;
    gap: 5px;
    padding: 8px 0;
    background: var(--ink-1);
    border-right: 1px solid var(--ink-3);
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex-basis .16s ease, width .16s ease;
}
#main-area > #hud-controls .hud-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; justify-content: center;
    background: transparent; border: none; padding: 0; margin: 0; height: auto;
}
.rail-spacer { flex: 1; }
#railToggle {
    width: 30px; height: 30px;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    color: var(--mut-1); font-size: 14px; cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
}
#railToggle:hover { color: var(--text); background: var(--ink-2); }

/* collapsed: icons only — hide any button text */
#hud-controls:not(.expanded) .btn-text,
#hud-controls:not(.expanded) #walletChipAmount { display: none; }
#hud-controls:not(.expanded) #accountBtn,
#hud-controls:not(.expanded) #walletChipBtn { width: 30px; padding: 0; justify-content: center; }
#hud-controls:not(.expanded) #endLiveBtn { width: 30px; padding: 0; font-size: 0; }
#hud-controls:not(.expanded) #endLiveBtn svg { margin: 0; }

/* expanded: labels appear to the right of each icon */
#main-area > #hud-controls.expanded { flex-basis: 132px; width: 132px; }
#main-area > #hud-controls.expanded .hud-item { justify-content: flex-start; padding: 0 9px; }
#main-area > #hud-controls.expanded .hud-item[data-lbl]::after {
    content: attr(data-lbl);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .5px;
    color: var(--mut-3);
    white-space: nowrap;
}
#main-area > #hud-controls.expanded .rail-toggle-item { justify-content: flex-end; }

/* ── Vertical speed slider in the rail ──────────────────────────────────── */
#main-area #speedControl {
    flex: 0 0 auto;
    flex-direction: column;
    width: auto; height: auto; min-width: 0;
    gap: 6px; padding: 8px 0; margin: 6px 0 0;
    background: transparent; border: none;
}
#main-area #speedControl .speed-slider-wrap {
    width: 22px; height: 110px; min-width: 0;
    display: flex; align-items: center; justify-content: center;
}
#main-area #speedSlider {
    writing-mode: vertical-lr;
    direction: rtl;              /* max speed at the top */
    width: 22px; height: 110px;
}
#main-area #speedControl .speed-label-txt { font-size: 9px; }
#main-area #speedLabel { font-size: 10px; min-width: 0; }

/* ── Mobile: segments wrap; rail slims down ─────────────────────────────── */
@media (max-width: 600px) {
    #hud { display: flex; height: auto; flex-wrap: wrap; padding: 0; gap: 0; }
    .hud-brand { display: none; }
    #hud-left { flex-wrap: wrap; }
    #hud-left > .hud-item,
    #hud-left > #hud-right,
    #hud-left > #seat-scoreboard,
    #hud-left > #liveBadge { padding: 7px 10px; }
    #hud-right { flex: 1 1 100%; order: 10; justify-content: flex-start; border-top: 1px solid var(--ink-2); }
    #portfolioValue { font-size: 15px; }
    #main-area > #hud-controls { flex-basis: 44px; width: 44px; }
    #main-area > #hud-controls.expanded { flex-basis: 124px; width: 124px; }
    #main-area #speedControl .speed-slider-wrap,
    #main-area #speedSlider { height: 90px; }
}

/* ── Pro Desk fixups ────────────────────────────────────────────────────── */
/* legacy rule at ~3563 sets column; segments need a single baseline row */
#portfolioBoard { flex-direction: row; flex-wrap: nowrap; align-items: baseline; }
/* empty seat scoreboard must not draw a phantom segment */
#seat-scoreboard:empty { display: none; }
/* slimmer vertical slider track */
#main-area #speedSlider { width: 14px; border-radius: 7px; }
#main-area #speedControl .speed-slider-wrap { width: 16px; }
@media (max-width: 600px) {
    /* legacy mobile rule at ~1419 orders the rail after the chart — keep it left */
    #main-area > #hud-controls { order: -1; }
}
/* canvas keeps an explicit px width — without min-width:0 it blocks the flex
   container from shrinking when the rail expands, pushing the tape offscreen */
#canvas-container { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   ROUND 6 — 2026-07-22
   Speed presets + longer slider · collapsed race pill beside the rail ·
   forex chips one line · trade-history day totals.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Speed quick-presets (120 / 60 / 1, top→bottom matches slider ends) ── */
.speed-presets { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
.spd-preset {
    width: 32px; padding: 3px 0;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .5px;
    background: transparent; border: 1px solid var(--ink-4); border-radius: 5px;
    color: var(--mut-2); cursor: pointer; line-height: 1.2;
}
.spd-preset:hover { color: var(--text); border-color: var(--mut-4); }
.spd-preset.active {
    color: var(--accent-soft); border-color: var(--accent);
    background: rgba(139, 124, 246, .14);
}
/* longer slider travel now that the rail owns the vertical space */
#main-area #speedControl .speed-slider-wrap,
#main-area #speedSlider { height: 150px; }

/* ── Collapsed race pill: rectangle, floating BESIDE the rail (not over it) ── */
#raceBoard.collapsed {
    border-radius: 8px;
    left: 52px;            /* 46px rail + 6px gap */
}
#main-area > #hud-controls.expanded ~ #raceBoard.collapsed { left: 138px; }

/* ── Forex quick-picks: keep all five pairs on one line ── */
.fn-acc[data-cat="forex"] .fn-chips { flex-wrap: nowrap; overflow-x: auto; }
.fn-acc[data-cat="forex"] .fn-chip { flex: 0 0 auto; padding: 6px 9px; font-size: 11px; }

/* ── Trade history: day-total rows + pinned TODAY summary ── */
.cal-day-total {
    display: flex; align-items: baseline; gap: 10px;
    padding: 7px 10px; margin: 10px 0 4px;
    background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
}
.cal-day-total .cdt-label { font-size: 10px; letter-spacing: .12em; color: var(--mut-3); }
.cal-day-total .cdt-pnl { font-size: 13px; font-weight: 700; }
.cal-day-total.cal-profit .cdt-pnl { color: var(--green); }
.cal-day-total.cal-loss .cdt-pnl { color: var(--red); }
.cal-day-total .cdt-count { font-size: 10px; color: var(--mut-3); margin-left: auto; }
.cal-today-total {
    margin-top: 0;
    background: var(--ink-2); border-color: var(--ink-5);
    position: sticky; top: 0; z-index: 2;
}

@media (max-width: 600px) {
    #main-area #speedControl .speed-slider-wrap,
    #main-area #speedSlider { height: 120px; }
    #raceBoard.collapsed { left: 50px; }   /* 44px mobile rail + 6px */
    #main-area > #hud-controls.expanded ~ #raceBoard.collapsed { left: 130px; }
}

/* mobile/portrait: the floating race panel (expanded) also clears the rail */
@media (max-width: 820px), (orientation: portrait) {
    #raceBoard { left: 50px; }
}

/* ── Round 6b: Live radio disabled outside market hours ── */
.fn-radio.fn-radio-off { opacity: .45; cursor: not-allowed; }
.fn-radio.fn-radio-off input { cursor: not-allowed; }
.fn-live-closed-note {
    margin-left: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--red);
}

/* ── ROUND 7: sticky funnel footers ─────────────────────────────────────────
   Continue (browse step) and PLAY (settings step) pin to the bottom of the
   New Session card, separated from the scrolling body — no scrolling needed
   to reach them. Negative margins bleed across .level-select-inner padding
   (24px 28px desktop, 16px 14px ≤600px). */
.fn-ticker-foot,
.fn-play-foot {
    position: sticky; bottom: 0; z-index: 6;
    /* NO negative bottom margin — it shrinks the scroller's scrollHeight and the
       pinned foot then permanently covers the last row (Options was cut off). */
    margin: 10px -28px 0; padding: 12px 28px 14px;
    background: var(--ink-1);
    border-top: 1px solid var(--ink-3);
}
.fn-play-foot .funnel-play { width: 100%; }
.fn-play-foot .fn-status:empty { display: none; }
@media (max-width: 600px) {
    .fn-ticker-foot,
    .fn-play-foot { margin: 10px -14px 0; padding: 10px 14px 12px; }
}

/* ── ROUND 7: Info & News panel (beside the chart toggle) ────────────────────── */
.fn-toggle-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 6px; }
.fn-toggle-row > .fn-chart { margin-top: 0; flex: 0 0 auto; min-width: 0; }
.fn-toggle-row > .fn-info { margin-top: 0; }
/* collapsed = compact side-by-side buttons; expanded = full-width row so the
   chart canvas / news list get the whole card width (chart JS removes
   .collapsed before it sizes the canvas). */
.fn-toggle-row > .fn-chart .toggle-preview-chart-btn { width: auto; }
.fn-toggle-row > .fn-chart:not(.collapsed) { flex-basis: 100%; width: 100%; }
.fn-toggle-row > .fn-chart:not(.collapsed) .toggle-preview-chart-btn { width: 100%; }
/* both toggles share one size (chart button had 13px/9px from an older layer) */
.fn-toggle-row .toggle-preview-chart-btn,
.fn-toggle-row .fn-info-toggle {
    padding: 8px 14px; font-size: 12px; font-weight: 600;
    line-height: 1.2; border-radius: 8px;
}
.fn-info { flex: 0 0 auto; min-width: 0; }
/* when open, break to its own full-width row so headlines wrap inside the card */
.fn-info:not(.collapsed) { flex-basis: 100%; width: 100%; }
.fn-info-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    background: var(--ink-2); border: 1px solid var(--ink-5); color: var(--mut-3);
    font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.fn-info-toggle:hover { border-color: var(--accent); color: var(--text); background: var(--ink-3); }
.fn-info:not(.collapsed) .fn-info-toggle { color: var(--text); border-color: var(--accent); }
.fn-info-body {
    width: 100%; max-width: 100%; margin-top: 8px;
    background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 10px;
    padding: 12px 14px; box-sizing: border-box;
}
.fn-info-blurb { margin-bottom: 10px; }
.fn-info-name { font-weight: 700; color: var(--text); font-size: 13px; }
.fn-info-kind {
    margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--mut-1);
    border: 1px solid var(--ink-4); border-radius: 5px; padding: 1px 6px; vertical-align: middle;
}
.fn-info-blurb p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--mut-3); }
.fn-news-list { display: flex; flex-direction: column; gap: 2px; }
.fn-news-item {
    display: flex; align-items: flex-start; gap: 9px; padding: 8px 6px; width: 100%;
    border-radius: 7px; text-decoration: none; border-top: 1px solid var(--ink-3);
}
.fn-news-item:first-child { border-top: none; }
.fn-news-item:hover { background: var(--ink-2); }
.fn-news-sent {
    flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; line-height: 1;
}
.fn-news-sent.pos { color: var(--green); background: rgba(0, 200, 5, .12); }
.fn-news-sent.neg { color: var(--red); background: rgba(224, 56, 72, .12); }
.fn-news-sent.neu { color: var(--mut-1); background: var(--ink-3); }
.fn-news-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fn-news-head { font-size: 12.5px; line-height: 1.35; color: var(--mut-3); overflow-wrap: anywhere; }
.fn-news-item:hover .fn-news-head { color: var(--text); }
.fn-news-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--mut-1);
}
.fn-info-empty { font-size: 12px; color: var(--mut-1); padding: 4px 2px; }
.fn-info-note { margin-top: 8px; font-size: 10px; color: var(--mut-1); font-style: italic; }

/* ── ROUND 7: settings modal sticky Save footer (same pattern as the funnel) ── */
.ix-save-foot {
    position: sticky; bottom: 0; z-index: 6;
    margin: 12px -26px 0; padding: 12px 26px 14px;
    background: var(--ink-1);
    border-top: 1px solid var(--ink-3);
}
.ix-save-foot .ix-save-settings-btn { margin-top: 0; }

/* Feet sit flush with the card bottom — no padding gap where scrolled content
   peeks through beneath the pinned footer. */
.level-select-inner { padding-bottom: 0; }
#funnelStep-mode { padding-bottom: 24px; }      /* steps without a foot keep their breathing room */
#funnelTournBox { margin-bottom: 20px; }
#settingsModal .modal-content { padding-bottom: 0; }
.fn-ticker-foot, .fn-play-foot { padding-bottom: 16px; }
.ix-save-foot { padding-bottom: 16px; }

/* ── Wordle-style session share card (game over) ─────────────────────────── */
.share-card { margin: 12px auto 6px; max-width: 340px; }
.share-card pre {
    margin: 0 0 8px;
    padding: 10px 14px;
    background: var(--ink-0, rgba(255,255,255,0.03));
    border: 1px solid var(--ink-3, #1e1e1e);
    border-radius: 12px;
    /* Monospace on purpose: the app font (Inter) draws ■ ~40% larger than □,
       which makes the win/loss squares look mismatched. */
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: all;          /* one tap selects the whole share text */
}

/* ── Game over: New Session pinned like the funnel footers ───────────────── */
/* Sticky inside the scrolling #gameOverCard, so the button stays clickable
   while stats/leaderboard scroll underneath (same recipe as .fn-play-foot:
   negative margins bleed across the card padding, no negative bottom margin). */
.go-restart-foot {
    position: sticky; bottom: 0; z-index: 6;
    margin: 0 -26px; padding: 2px 26px 12px;
    background: var(--ink-1);
    border-top: 1px solid var(--ink-3);
}
.go-restart-foot #restartBtn { margin: 12px 0 4px; }

/* ── Expanded rail fixups ────────────────────────────────────────────────── */
/* Account + Wallet chips are icon-only 30px squares like every other rail
   button (the words come from data-lbl in expanded mode) — the username and
   wallet balance moved to the top-right header box (#hudUserBox). */
#main-area > #hud-controls #accountBtn,
#main-area > #hud-controls #walletChipBtn {
    width: 30px;
    padding: 0;
    justify-content: center;
}

/* Speed control aligns to the same columns as the rows above it:
   header row = gauge icon + "Speed" word (like Pause / Settings / …), then
   presets (120/60/1) under the icon column, slider centered in the middle,
   and the current speed ("60x") on the right, vertically centered beside the
   track. Presets stretch to the track height so each sits level with its
   speed on the rtl vertical slider (120 top, 60 mid, 1 bottom). */
#main-area > #hud-controls.expanded #speedControl {
    display: grid;
    grid-template-columns: 30px 1fr min-content;   /* icon col · track · value */
    grid-template-areas:
        "icon    label  label"
        "presets slider val";
    justify-items: start;
    column-gap: 9px;                           /* = .hud-item icon/text gap */
    row-gap: 10px;                             /* air under the Speed header */
    padding: 8px 9px;                          /* = .hud-item side padding */
    width: 100%;
}
#main-area > #hud-controls.expanded #speedControl .speed-label-txt { grid-area: icon; justify-self: center; }
#main-area > #hud-controls.expanded #speedControl::after { grid-area: label; align-self: center; }
#main-area > #hud-controls.expanded #speedControl .speed-presets {
    grid-area: presets;
    align-self: stretch;
    justify-self: stretch;
    justify-content: space-between;
    margin: 0;
}
#main-area > #hud-controls.expanded #speedControl .spd-preset { width: 30px; }
#main-area > #hud-controls.expanded #speedControl .speed-slider-wrap {
    grid-area: slider;
    justify-self: center;                      /* track floats mid-rail */
}
#main-area > #hud-controls.expanded #speedControl #speedLabel {
    grid-area: val;
    align-self: center;                        /* reads as "current speed" beside the track */
    justify-self: end;
}
/* gauge icon replaces the old "SPD" text badge (collapsed + expanded) */
#main-area #speedControl .speed-label-txt {
    display: flex; align-items: center; justify-content: center;
    color: var(--mut-2);
    line-height: 0;
}
#main-area #speedControl .speed-label-txt svg { display: block; }

/* The segment reset (#hud-left > #hud-right { margin: 0 }) out-specifies the
   1-id #hud-right { margin-left: auto } rule, so the quote never actually
   right-justified. Restore it here (appended layer wins the tie). */
#hud-left > #hud-right { margin-left: auto; }

/* Expanded rail: whole row is clickable (label forwards to its button) */
#main-area > #hud-controls.expanded .hud-item[data-lbl]:not(#speedControl) { cursor: pointer; }

/* ── Tournaments modal: contrast + current design language ───────────────── */
/* The card never set a text color, so headings inherited the page default —
   black on the dark card. One rule fixes every descendant. */
.trn-card { color: var(--text); }
/* retire the old blue palette for the app's violet/green */
.trn-play-badge {
    background: rgba(139, 124, 246, .12);
    border-color: rgba(139, 124, 246, .4);
    color: var(--accent-soft);
}
.trn-tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.trn-list-item { background: var(--ink-0); border-color: var(--ink-3); }
.trn-list-item:hover { border-color: var(--accent); background: var(--ink-2); }
.trn-stand-row { background: var(--ink-0); border-color: var(--ink-3); }
.trn-stand-row.me { border-color: var(--accent); background: rgba(139, 124, 246, .08); }
.trn-detail-code b { color: var(--accent-soft); }
#trnToast { background: var(--ink-1); border-color: var(--accent); color: var(--text); }
.trn-primary-btn { border-radius: 8px; }
.trn-secondary-btn { border-radius: 8px; }

/* Join confirmation — classed (was inline solid fills + emojis) */
.trn-confirm-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, .72);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.trn-confirm-card {
    background: var(--ink-1); border: 1px solid var(--ink-4); border-radius: 12px;
    max-width: 360px; width: 100%; padding: 20px;
    color: var(--text); font-family: inherit;
}
.trn-confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.trn-confirm-name { font-size: 13px; color: var(--accent-soft); margin-bottom: 12px; }
.trn-confirm-rows {
    display: flex; flex-direction: column; gap: 7px;
    font-size: 12px;
    border-top: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
    padding: 10px 0; margin-bottom: 12px;
}
.trn-confirm-row { display: flex; justify-content: space-between; gap: 10px; }
.trn-confirm-row .k { color: var(--mut-3); }
.trn-confirm-row .v { font-weight: 700; }
.trn-confirm-fee-note { font-size: 11px; color: #ffcf6b; margin-bottom: 12px; }
.trn-confirm-actions { display: flex; gap: 8px; }
.trn-confirm-actions button { flex: 1; margin: 0; }

/* ── StockBux packs (Wallet tab, real mode) ──────────────────────────────── */
.wallet-pack-price {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(139, 124, 246, .16);
    border: 1px solid rgba(139, 124, 246, .38);
    color: var(--accent-soft);
    font-size: 10px;
    font-weight: 700;
}

.wallet-admin-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 176, 32, .16);
    border: 1px solid rgba(255, 176, 32, .45);
    color: #ffb020;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    vertical-align: middle;
}
.wallet-grant-input {
    flex: 2 1 100px;
    min-height: 40px;
    padding: 8px 10px;
    background: #0d1626;
    border: 1px solid #274063;
    border-radius: 8px;
    color: #eaf2ff;
    font-size: 13px;
}
.wallet-grant-input:focus { outline: none; border-color: #3a5c8a; }

/* ── Wall of Fame: collapsible + compact ─────────────────────────────────── */
#leaderboard h3 {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer;
    user-select: none;
}
#leaderboard h3:hover { opacity: 1; }
#leaderboard .lb-chev {
    margin-left: auto;
    font-size: 10px;
    transition: transform .15s ease;
}
#leaderboard.collapsed .lb-chev { transform: rotate(-90deg); }
#leaderboard.collapsed #highScores { display: none; }
/* tighter entries so the open list needs far less scrolling */
#highScores { max-height: 230px; }
#highScores li { padding: 8px 12px; gap: 2px; margin-bottom: 6px; }
#highScores .lb-pnl { font-size: 15px; }
#highScores .lb-name { font-size: 12px; }