/* ============================================================
   OPERATION: BLUE ICE — RV Lab Stylesheet
   Aesthetic: dark industrial, chemical orange, corrugated metal,
   hazmat suit yellows, grime and rust throughout.
   ============================================================ */

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* ── Core palette ─────────────────────────────────────── */
    --rv-void      : #0d0c08;   /* absolute dark — floor of the RV        */
    --rv-dark      : #1a1604;   /* base surface — corrugated wall          */
    --rv-steel     : #2a2618;   /* slightly lighter panel                  */
    --rv-rust      : #3d2b1a;   /* rust stain accent                       */

    /* ── Work-light ambers ────────────────────────────────── */
    --rv-amber     : #e8821a;   /* main work-light orange                  */
    --rv-amber-dim : #a85a0a;   /* dimmed amber — inactive states          */
    --rv-amber-hot : #ffaa33;   /* overdriven lamp — hover/active          */

    /* ── Chemical accents ─────────────────────────────────── */
    --rv-hazmat    : #c8d400;   /* hazmat suit yellow-green                */
    --rv-blue-sky  : #00b8d9;   /* the product — crystal blue              */
    --rv-toxic     : #39ff14;   /* toxic green — terminal text             */
    --rv-blood     : #c0392b;   /* danger / bust red                       */
    --rv-clean     : #27ae60;   /* money clean green                       */

    /* ── Grime & dust ─────────────────────────────────────── */
    --rv-grime     : #4a3f28;   /* border color                            */
    --rv-dust      : #7a6a4a;   /* muted text                              */
    --rv-smear     : #2e2910;   /* inset / sunken backgrounds              */

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-rv    : 4px 4px 0 #000;
    --shadow-glow  : 0 0 8px rgba(232, 130, 26, .35);
    --shadow-blue  : 0 0 10px rgba(0, 184, 217, .4);
    --shadow-inset : inset 0 2px 6px rgba(0, 0, 0, .6);

    /* ── Borders ──────────────────────────────────────────── */
    --border-rv    : 2px solid var(--rv-grime);
    --border-hot   : 2px solid var(--rv-amber);

    /* ── Typography ───────────────────────────────────────── */
    --font-mono    : 'Courier Prime', 'Courier New', monospace;
    --font-pixel   : 'VT323', monospace;

    /* ── Corrugated metal texture ─────────────────────────── */
    /*
        We fake corrugated steel using a repeating linear-gradient.
        This is a pure-CSS technique — no image required.
        Each stripe pair = one ridge of the metal sheet.
    */
    --corrugated: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, .18) 3px,
        rgba(0, 0, 0, .18) 4px,
        transparent 4px,
        transparent 6px,
        rgba(255, 255, 255, .02) 6px,
        rgba(255, 255, 255, .02) 7px
    );
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: 16px; }

body {
    background-color: var(--rv-void);
    /*
        Layer 1: noise texture via SVG data-URI — avoids an HTTP request.
        Layer 2: corrugated metal ridges.
        Layer 3: subtle radial vignette — the RV is lit from one bulb.
    */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
        var(--corrugated),
        radial-gradient(ellipse at 50% 0%, #2a200a 0%, var(--rv-void) 70%);
    color: var(--rv-dust);
    font-family: var(--font-mono);
    line-height: 1.45;
    min-height: 100vh;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.hidden { display: none !important; }


/* ============================================================
   SCANLINES  — CRT monitor effect
   ============================================================ */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    /*
        The trick: a 2px repeating gradient at half opacity.
        Every other pixel row is slightly darkened.
        Combined with the flicker animation it sells the CRT look.
    */
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, .12) 1px,
        rgba(0, 0, 0, .12) 2px
    );
    animation: flicker 8s infinite;
}

@keyframes flicker {
    /* Irregular flicker — a perfect loop feels fake */
    0%   { opacity: .4; }
    19%  { opacity: .4; }
    20%  { opacity: .25; }
    21%  { opacity: .4; }
    55%  { opacity: .4; }
    56%  { opacity: .3; }
    57%  { opacity: .4; }
    100% { opacity: .4; }
}


/* ============================================================
   PANELS
   ============================================================ */

/*
   Base panel — dark steel plate.
   The box-shadow combines a hard offset shadow (depth) with
   an ambient amber glow (work-light bleed).
*/
.retro-panel {
    background: var(--rv-steel);
    background-image: var(--corrugated);
    border: var(--border-rv);
    box-shadow: var(--shadow-rv), var(--shadow-glow);
    padding: .75rem;
}

/* Sub-header strip — looks like a label taped to the panel */
.panel-subheader {
    background: var(--rv-rust);
    color: var(--rv-amber);
    padding: .35rem .6rem;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: var(--border-hot);
    margin: 0 0 .5rem;
    /*
        The skew gives it the look of a label that was
        slapped on in a hurry. Subtle — only 0.4deg.
    */
    position: relative;
}

/* Hazard-tape stripe accent on subheaders */
.panel-subheader::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--rv-amber) 0px,
        var(--rv-amber) 8px,
        var(--rv-dark)  8px,
        var(--rv-dark)  14px
    );
}


/* ============================================================
   BUTTONS
   ============================================================ */
.retro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    border: var(--border-hot);
    /*
        Hard offset shadow in amber — looks like the button
        is recessed into a metal panel.
    */
    box-shadow: 3px 3px 0 #000, var(--shadow-glow);
    background: var(--rv-amber);
    color: var(--rv-void);
    padding: .5rem 1rem;
    transition: all .08s ease;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
    position: relative;
    overflow: hidden;
}

/* Grease-smear sheen on top edge */
.retro-btn::before {
    content: '';
    position: absolute;
    inset: 0 0 60% 0;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.retro-btn:hover:not(:disabled) {
    background: var(--rv-amber-hot);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000, 0 0 12px rgba(232, 130, 26, .6);
}

.retro-btn:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #000;
}

.retro-btn:disabled {
    background: var(--rv-smear);
    color: var(--rv-dust);
    cursor: not-allowed;
    box-shadow: none;
    transform: translate(2px, 2px);
    border-color: var(--rv-grime);
    opacity: .7;
}

/* Cook button — the big one deserves a special treatment */
.btn-cook {
    background: var(--rv-hazmat);
    border-color: var(--rv-hazmat);
    color: var(--rv-void);
    font-family: var(--font-pixel);
    font-size: 1.4rem;
    letter-spacing: .08em;
    box-shadow: 3px 3px 0 #000, 0 0 14px rgba(200, 212, 0, .4);
}

.btn-cook:hover:not(:disabled) {
    background: #dde800;
    box-shadow: 4px 4px 0 #000, 0 0 20px rgba(200, 212, 0, .7);
}


/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress-track {
    width: 100%;
    height: 1.1rem;
    background: var(--rv-smear);
    border: 1px solid var(--rv-grime);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-inset);
}

.progress-fill {
    height: 100%;
    background: var(--rv-amber);
    transition: width .5s ease;
    width: 0%;
    /*
        Animated diagonal stripes — like a industrial fill indicator.
        The animation shifts the background-position to create movement.
    */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.06) 0px,
        rgba(255,255,255,.06) 4px,
        transparent 4px,
        transparent 10px
    );
}

/* Purity bar — Blue Sky crystal color */
.progress-fill--purity {
    background-color: var(--rv-blue-sky);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.1) 0px,
        rgba(255,255,255,.1) 4px,
        transparent 4px,
        transparent 10px
    );
    box-shadow: 0 0 8px rgba(0, 184, 217, .5);
}

.progress-fill--danger {
    background-color: var(--rv-blood);
    background-image: none;
}

.progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.7);
    pointer-events: none;
    text-shadow: 0 1px 2px #000;
}

/* Mini heat/invest track in status cards */
.mini-track {
    width: 100%;
    height: 5px;
    background: var(--rv-smear);
    margin-top: .3rem;
    border: 1px solid var(--rv-grime);
}

.mini-fill {
    height: 100%;
    background: var(--rv-amber);
    width: 0%;
    transition: width .5s ease;
}


/* ============================================================
   BOOT SCREEN
   ============================================================ */
.boot-screen {
    max-width: 28rem;
    margin: 5rem auto 0;
    position: relative;
    z-index: 40;
    padding: 0 1rem;
}

/* The boot panel gets the full RV treatment */
.boot-screen .retro-panel {
    background: var(--rv-dark);
    border: var(--border-hot);
    box-shadow: var(--shadow-rv), 0 0 30px rgba(232, 130, 26, .2);
}

.boot-screen__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rv-grime);
    padding-bottom: .75rem;
}

/* Amber indicator light */
.boot-screen__dot {
    width: 1.8rem;
    height: 1.8rem;
    background: var(--rv-amber);
    border-radius: 50%;
    border: 2px solid var(--rv-grime);
    flex-shrink: 0;
    /* Pulsing glow — the RV's power indicator */
    animation: pulse-amber 2s ease-in-out infinite;
    box-shadow: 0 0 10px var(--rv-amber), 0 0 20px rgba(232,130,26,.4);
}

@keyframes pulse-amber {
    0%, 100% { box-shadow: 0 0 8px  var(--rv-amber), 0 0 16px rgba(232,130,26,.3); }
    50%       { box-shadow: 0 0 16px var(--rv-amber), 0 0 32px rgba(232,130,26,.6); }
}

.boot-screen__title {
    font-family: var(--font-pixel);
    font-size: 1.4rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rv-amber);
    text-shadow: 0 0 10px rgba(232, 130, 26, .5);
}

/* Input field — scratched metal inset */
.boot-screen__input {
    width: 100%;
    padding: .7rem;
    border: var(--border-rv);
    background: var(--rv-smear);
    color: var(--rv-amber);
    font-family: var(--font-mono);
    font-size: 1rem;
    text-transform: uppercase;
    outline: none;
    caret-color: var(--rv-amber);
    box-shadow: var(--shadow-inset);
    transition: border-color .15s, box-shadow .15s;
}

.boot-screen__input::placeholder { color: var(--rv-grime); }

.boot-screen__input:focus {
    border-color: var(--rv-amber);
    box-shadow: var(--shadow-inset), 0 0 8px rgba(232, 130, 26, .4);
}

.boot-screen__input--error {
    border-color: var(--rv-blood);
    box-shadow: var(--shadow-inset), 0 0 6px rgba(192, 57, 43, .4);
}

.boot-screen__hint {
    font-size: .7rem;
    color: var(--rv-dust);
    margin-top: .5rem;
    text-align: center;
}

/* Quote block — taped paper note feel on dark background */
.quote-rotator {
    margin: 1rem 0;
    font-style: italic;
    font-size: .85rem;
    color: var(--rv-dust);
    border-left: 3px solid var(--rv-amber);
    padding-left: .75rem;
    min-height: 2.5rem;
}


/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.game-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

/* ── Status board ── */
.status-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
    margin-bottom: .75rem;
}

@media (min-width: 768px) {
    .status-board { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .status-board { grid-template-columns: repeat(8, 1fr); }
}

.status-card {
    background: var(--rv-steel);
    background-image: var(--corrugated);
    border: var(--border-rv);
    padding: .5rem .6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-rv);
    /* Inset top glow — each card is lit by its own colour */
    border-top-width: 3px;
}

/* Per-card top-light colors */
.status-card--dirty   { border-top-color: var(--rv-blood);    box-shadow: var(--shadow-rv), inset 0 3px 8px rgba(192,57,43,.2); }
.status-card--clean   { border-top-color: var(--rv-clean);    box-shadow: var(--shadow-rv), inset 0 3px 8px rgba(39,174,96,.2); }
.status-card--product { border-top-color: var(--rv-blue-sky); box-shadow: var(--shadow-rv), inset 0 3px 8px rgba(0,184,217,.2); }
.status-card--purity  { border-top-color: var(--rv-blue-sky); box-shadow: var(--shadow-rv), inset 0 3px 8px rgba(0,184,217,.15); }
.status-card--heat    { border-top-color: var(--rv-amber);    box-shadow: var(--shadow-rv), inset 0 3px 8px rgba(232,130,26,.2); }
.status-card--invest  { border-top-color: var(--rv-blood);    box-shadow: var(--shadow-rv), inset 0 3px 8px rgba(192,57,43,.25); }
.status-card--dealers { border-top-color: var(--rv-hazmat);   box-shadow: var(--shadow-rv), inset 0 3px 8px rgba(200,212,0,.15); }
.status-card--price   { border-top-color: var(--rv-dust);     }

.status-card__label {
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rv-dust);
    display: block;
    margin-bottom: .15rem;
}

.status-card__value {
    font-family: var(--font-pixel);
    font-size: 1.05rem;
    font-weight: 700;
    display: block;
    color: var(--rv-amber);
}

/* ── Main three-column grid ── */
.dashboard-grid {
    display: grid;
    gap: .75rem;
    margin-bottom: .75rem;
}

@media (min-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Section panels ── */
.dash-section {
    background: var(--rv-dark);
    background-image: var(--corrugated);
    border: var(--border-rv);
    box-shadow: var(--shadow-rv), var(--shadow-glow);
    padding: .85rem;
}

.dash-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--rv-grime);
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    gap: .25rem;
}

.dash-header__title {
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--rv-amber);
    text-shadow: 0 0 8px rgba(232,130,26,.4);
}

.dash-header__sub {
    font-size: .75rem;
    font-style: italic;
    color: var(--rv-dust);
    font-family: var(--font-pixel);
}


/* ============================================================
   FORMULA SELECTOR
   ============================================================ */
.formula-options { display: flex; flex-wrap: wrap; gap: .35rem; }

.formula-btn {
    border: var(--border-rv);
    background: var(--rv-smear);
    color: var(--rv-dust);
    padding: .4rem .6rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 700;
    user-select: none;
    flex: 1 1 auto;
    text-align: center;
    transition: all .1s ease;
    line-height: 1.3;
}

.formula-btn:hover:not(:disabled):not(.formula-btn--active) {
    background: var(--rv-rust);
    color: var(--rv-amber);
    border-color: var(--rv-amber-dim);
}

.formula-btn--active {
    background: var(--rv-amber);
    color: var(--rv-void);
    border-color: var(--rv-amber-hot);
    box-shadow: 0 0 10px rgba(232,130,26,.5);
}

.formula-btn--locked {
    background: var(--rv-void);
    color: var(--rv-grime);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: .55;
}

.formula-purity {
    display: block;
    font-size: .65rem;
    opacity: .75;
    margin-top: .1rem;
}


/* ============================================================
   LAB COOK AREA
   ============================================================ */
.lab-cook-area {
    text-align: center;
    padding: 1rem;
    /*
        Dashed border simulates the yellow hazard marking
        painted on the RV floor around the cook station.
    */
    border: 2px dashed var(--rv-amber-dim);
    background: var(--rv-smear);
    box-shadow: var(--shadow-inset);
    margin: 1rem 0;
}

.lab-cook-hint {
    font-size: .7rem;
    color: var(--rv-dust);
    margin-top: .4rem;
    font-family: var(--font-pixel);
    letter-spacing: .04em;
}


/* ============================================================
   UPGRADES LIST
   ============================================================ */
.upgrades-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 16rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rv-grime) var(--rv-smear);
}

.upgrades-list::-webkit-scrollbar       { width: 5px; }
.upgrades-list::-webkit-scrollbar-track { background: var(--rv-smear); }
.upgrades-list::-webkit-scrollbar-thumb { background: var(--rv-grime); }

/* Individual upgrade button — replaces upgrade-card + btn */
.upg-btn {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: .5rem;
    row-gap: .1rem;
    padding: .45rem .6rem;
    background: var(--rv-smear);
    border: 1px solid var(--rv-grime);
    color: var(--rv-dust);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-mono);
    transition: background .1s, border-color .1s;
    width: 100%;
}

.upg-btn:hover:not(:disabled):not(.upg-btn--owned) {
    background: var(--rv-rust);
    border-color: var(--rv-amber-dim);
}

.upg-btn--owned {
    background: var(--rv-void);
    border-color: var(--rv-grime);
    cursor: default;
    opacity: .6;
}

.upg-btn--locked {
    opacity: .4;
    cursor: not-allowed;
}

.upg-btn__name {
    font-weight: 700;
    font-size: .8rem;
    color: var(--rv-amber);
    grid-column: 1;
    grid-row: 1;
}

.upg-btn__desc {
    font-size: .68rem;
    color: var(--rv-dust);
    grid-column: 1;
    grid-row: 2;
    font-style: italic;
}

.upg-btn__cost {
    font-family: var(--font-pixel);
    font-size: .9rem;
    color: var(--rv-hazmat);
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    white-space: nowrap;
}

.upg-btn--owned .upg-btn__cost { color: var(--rv-clean); }


/* ============================================================
   EMPIRE SUMMARY
   ============================================================ */
.empire-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    margin-bottom: .75rem;
}

.empire-stat {
    background: var(--rv-smear);
    border: 1px solid var(--rv-grime);
    padding: .4rem;
    text-align: center;
    box-shadow: var(--shadow-inset);
}

.empire-stat__label {
    font-size: .58rem;
    text-transform: uppercase;
    color: var(--rv-dust);
    display: block;
    letter-spacing: .06em;
}

.empire-stat__value {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--rv-amber);
    display: block;
}


/* ============================================================
   LAUNDER BOARD
   ============================================================ */
.launder-board {
    margin-bottom: .75rem;
}

.launder-stat {
    background: var(--rv-smear);
    border: 1px solid var(--rv-clean);
    padding: .5rem;
    text-align: center;
    box-shadow: var(--shadow-inset), 0 0 8px rgba(39,174,96,.15);
}

.launder-stat__label {
    font-size: .58rem;
    text-transform: uppercase;
    color: var(--rv-dust);
    display: block;
    letter-spacing: .06em;
}

.launder-stat__value {
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    color: var(--rv-clean);
    display: block;
}


/* ============================================================
   BOTTOM GRID — Log + Legends
   ============================================================ */
.bottom-grid {
    display: grid;
    gap: .75rem;
}

@media (min-width: 768px) {
    .bottom-grid { grid-template-columns: 2fr 1fr; }
}

/* ── Surveillance terminal ── */
.terminal-panel {
    background: var(--rv-void);
    border: var(--border-rv);
}

.terminal-panel__body {
    height: 14rem;
    overflow-y: auto;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rv-grime) var(--rv-void);
}

.terminal-panel__body::-webkit-scrollbar       { width: 4px; }
.terminal-panel__body::-webkit-scrollbar-thumb { background: var(--rv-grime); }

.log-entry {
    border-bottom: 1px solid #111;
    padding-bottom: .3rem;
    font-size: .76rem;
    font-family: var(--font-mono);
    /* Prevent text wrapping mid-timestamp */
    word-break: break-word;
}

/* Log color classes */
.log-entry--yellow { color: var(--rv-amber); }
.log-entry--red    { color: var(--rv-blood); }
.log-entry--green  { color: var(--rv-clean); }
.log-entry--blue   { color: #5ba4cf; }
.log-entry--cyan   { color: var(--rv-blue-sky); }
.log-entry--gray   { color: #555; }
.log-entry--quote  { color: var(--rv-dust); font-style: italic; }


/* ── Legends table ── */
.legends-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.legends-table th {
    background: var(--rv-rust);
    color: var(--rv-amber);
    padding: .4rem .5rem;
    text-align: left;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: var(--border-hot);
}

.legends-table td {
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--rv-grime);
    color: var(--rv-dust);
}

.legends-table tr:hover td {
    background: var(--rv-rust);
    color: var(--rv-amber);
}


/* ============================================================
   BUST OVERLAY
   ============================================================ */
.bust-overlay {
    position: fixed;
    inset: 0;
    /*
        Red-tinted void — the world goes dark and red.
        Not pure black — a tinted dark so the card reads as "scene".
    */
    background: rgba(10, 2, 2, .97);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Subtle red-light bleed from behind the card */
    box-shadow: inset 0 0 120px rgba(192, 57, 43, .3);
}

.bust-card {
    background: var(--rv-dark);
    background-image: var(--corrugated);
    border: 2px solid var(--rv-blood);
    box-shadow:
        var(--shadow-rv),
        0 0 40px rgba(192, 57, 43, .5),
        0 0 80px rgba(192, 57, 43, .2);
    padding: 2.5rem;
    max-width: 40rem;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Diagonal red hazard stripes across the top of bust card */
.bust-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        var(--rv-blood)  0px,
        var(--rv-blood)  12px,
        var(--rv-dark)   12px,
        var(--rv-dark)   20px
    );
}

.bust-card__title {
    font-family: var(--font-pixel);
    font-size: 4rem;
    color: var(--rv-blood);
    margin: .5rem 0;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow:
        0 0 20px rgba(192, 57, 43, .8),
        0 0 40px rgba(192, 57, 43, .4);
    /* Glitch effect on bust title — because it hits hard */
    animation: glitch 3s infinite;
}

@keyframes glitch {
    0%, 94%, 100% { text-shadow: 0 0 20px rgba(192,57,43,.8), 0 0 40px rgba(192,57,43,.4); transform: none; }
    95%  { transform: translate(-2px, 0); text-shadow: 2px 0 var(--rv-blue-sky), -2px 0 var(--rv-blood); }
    96%  { transform: translate(2px, 0);  text-shadow: -2px 0 var(--rv-blue-sky), 2px 0 var(--rv-blood); }
    97%  { transform: none; }
}

.bust-card__divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--rv-blood), transparent);
    margin: 1rem 0 1.5rem;
}

.bust-card__quote {
    color: var(--rv-dust);
    font-style: italic;
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

.bust-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    text-align: left;
    border: 1px solid var(--rv-blood);
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: .88rem;
    background: var(--rv-smear);
}

.bust-card__label { color: var(--rv-dust); font-size: .75rem; text-transform: uppercase; }
.bust-card__value { font-weight: 700; color: var(--rv-amber); font-family: var(--font-pixel); font-size: 1rem; }
.bust-card__value--clean  { color: var(--rv-clean); }
.bust-card__value--cooked { color: var(--rv-blue-sky); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .bust-card__stats          { grid-template-columns: 1fr; }
    .status-board              { grid-template-columns: 1fr 1fr; }
    .sell-actions,
    .manual-launder            { grid-template-columns: 1fr !important; }
    .bust-card                 { padding: 1.5rem; }
    .bust-card__title          { font-size: 3rem; }
}

@media (max-width: 400px) {
    .dash-header__sub          { display: none; }
    .status-card__value        { font-size: .9rem; }
    .game-container            { padding: .5rem; }
}

/* ============================================================
   MODAL EMERGENCY FIX — solid backgrounds, readable text
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-box {
    background: #1a1604 !important;
    border: 2px solid var(--rv-amber);
    box-shadow: 0 0 40px rgba(0,0,0,0.9), 0 0 20px rgba(232,130,26,0.2);
    color: #d4c5a0;
    padding: 1.75rem;
    max-width: 460px;
    width: 90%;
    border-radius: 3px;
    position: relative;
    z-index: 10000;
}

.modal-title {
    color: var(--rv-amber) !important;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 .75rem 0;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.modal-body {
    color: #d4c5a0 !important;
    line-height: 1.65;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.modal-quote {
    color: #9a8a6a !important;
    font-style: italic;
    border-left: 3px solid var(--rv-amber);
    padding-left: .75rem;
    margin: 0 0 1.25rem 0;
    font-size: .85rem;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.modal-choice--red {
    background: var(--rv-blood) !important;
    color: #ffffff !important;
    border: 1px solid #e74c3c;
    padding: .65rem 1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    width: 100%;
}

.modal-choice--gray {
    background: #2a2415 !important;
    color: #d4c5a0 !important;
    border: 1px solid var(--rv-grime);
    padding: .65rem 1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    width: 100%;
}

.modal-choice--red:hover:not(:disabled)  { background: #e74c3c !important; }
.modal-choice--gray:hover:not(:disabled) { background: #3a3020 !important; }


/* ── Fall Guy Grid ──────────────────────────────────────────── */
.fall-guy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-top: .75rem;
}
/* ── Associates Hint Banner ─────────────────────────────────── */
.associates-hint {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: rgba(192, 57, 43, 0.12);
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-left: 3px solid var(--rv-blood);
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    font-size: .75rem;
    color: #a09070;
    line-height: 1.5;
}

.associates-hint strong {
    color: var(--rv-amber);
    font-weight: 700;
}

.hint-icon {
    flex-shrink: 0;   /* stops icon from squishing on narrow screens */
    font-size: .85rem;
    margin-top: 1px;
}
.associates-table tbody tr {
    cursor: pointer;
    transition: background .15s ease;
}

.associates-table tbody tr:hover {
    background: rgba(192, 57, 43, 0.15);  /* blood red tint on hover */
    color: #d4c5a0;
}