/* PIMP.FUN design system
   Loaded AFTER tailwind.css so component classes win over utilities.
   One cool-violet gray family; colour carries meaning:
   brand (magenta) = act, money (gold) = cash, info (cyan) = turns/intel,
   ok (green) = good, warn (amber) = careful, danger (red) = heat/loss. */

:root {
    /* surfaces */
    --bg: #0b0a10;
    --bg-2: #100e17;
    --surface: #15131d;
    --surface-2: #1b1825;
    --surface-3: #252131;
    --sunken: #0e0c14;
    --line: rgba(236, 232, 244, 0.07);
    --line-2: rgba(236, 232, 244, 0.12);
    --line-3: rgba(236, 232, 244, 0.2);

    /* text */
    --text: #efebf6;
    --text-2: #bdb6cc;
    --text-3: #8a8399;
    --text-4: #625c70;

    /* roles */
    --brand: #ff4fb8;
    --brand-2: #ff8ad0;
    --brand-wash: rgba(255, 79, 184, 0.12);
    --brand-line: rgba(255, 79, 184, 0.38);
    --money: #f3cd5a;
    --money-wash: rgba(243, 205, 90, 0.12);
    --info: #4dd8ef;
    --info-wash: rgba(77, 216, 239, 0.12);
    --ok: #46dc9d;
    --ok-wash: rgba(70, 220, 157, 0.12);
    --warn: #ffb54d;
    --warn-wash: rgba(255, 181, 77, 0.12);
    --danger: #ff6170;
    --danger-wash: rgba(255, 97, 112, 0.13);

    /* legacy names used across the JS templates */
    --onyx: var(--bg);
    --neon-magenta: var(--brand);
    --electric-cyan: var(--info);
    --luxe-gold: var(--money);

    --r-xl: 20px;
    --r-lg: 16px;
    --r: 12px;
    --r-sm: 9px;
    --r-xs: 6px;

    --font-display: 'Bungee', 'Outfit', system-ui, sans-serif;
    --font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-term: 'VT323', 'JetBrains Mono', monospace;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shadow-panel:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 22px 48px -28px rgba(255, 79, 184, 0.28),
        0 2px 12px rgba(4, 2, 9, 0.55);

    --z-base: 1;
    --z-header: 20;
    --z-modal: 50;
    --z-toast: 70;
}

/* ---------------------------------------------------------------- base */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    background-color: var(--bg);
    background-image:
        radial-gradient(1200px 600px at 12% -10%, rgba(255, 79, 184, 0.10), transparent 60%),
        radial-gradient(900px 500px at 100% 30%, rgba(77, 216, 239, 0.07), transparent 60%),
        radial-gradient(800px 600px at 50% 110%, rgba(243, 205, 90, 0.05), transparent 60%);
    background-attachment: fixed;
    color: var(--text-2);
    font-family: var(--font-ui);
    font-feature-settings: "ss01", "cv11";
}

::selection { background: rgba(255, 79, 184, 0.35); color: #fff; }

:focus-visible {
    outline: 2px solid var(--info);
    outline-offset: 2px;
    border-radius: 6px;
}

/* unify Tailwind's grays into this palette's gray family */
.text-white { color: var(--text) !important; }
.text-gray-200 { color: var(--text) !important; }
.text-gray-300 { color: var(--text-2) !important; }
.text-gray-400 { color: var(--text-3) !important; }
.text-gray-500 { color: var(--text-4) !important; }
.border-gray-700 { border-color: var(--line-2) !important; }
.border-gray-600 { border-color: var(--line-3) !important; }

.num, .tabular {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* CRT texture: scanlines + a whisper of grain */
.crt-grain::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: var(--z-base);
    opacity: 0.09;
    mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- text accents */
.gold-text { color: var(--money); text-shadow: 0 0 14px rgba(243, 205, 90, 0.28); }
.magenta-glow { color: var(--brand); text-shadow: 0 0 16px rgba(255, 79, 184, 0.4); }
.cyan-glow { color: var(--info); text-shadow: 0 0 16px rgba(77, 216, 239, 0.32); }
.text-gold { color: var(--money); }
.purple-glow { color: #b79cff; text-shadow: 0 0 16px rgba(183, 156, 255, 0.35); }

.tone-money { color: var(--money); }
.tone-info { color: var(--info); }
.tone-brand { color: var(--brand-2); }
.tone-ok { color: var(--ok); }
.tone-warn { color: var(--warn); }
.tone-danger { color: var(--danger); }
.tone-dim { color: var(--text-3); }

/* ---------------------------------------------------------------- panels */
.game-panel {
    position: relative;
    background: linear-gradient(180deg, rgba(31, 27, 42, 0.92) 0%, rgba(21, 19, 29, 0.94) 100%);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(6px);
}

/* hairline of brand light along the top edge */
.game-panel::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto -1px;
    height: 1px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: linear-gradient(90deg, transparent, rgba(255, 79, 184, 0.55) 30%, rgba(77, 216, 239, 0.4) 70%, transparent);
    pointer-events: none;
}

.panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.panel-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    font-size: 15px;
    flex: none;
}

.panel-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--text);
    line-height: 1.1;
}

.panel-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}

.panel-head .spacer { flex: 1; }

.section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-4);
    margin: 14px 0 8px;
}

.divider {
    height: 1px;
    background: var(--line);
    margin: 14px 0;
    border: 0;
}

/* ---------------------------------------------------------------- key/value rows */
.kv { display: grid; gap: 7px; font-size: 14px; }
.kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kv-row dt, .kv-row .k { color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.kv-row dd, .kv-row .v { color: var(--text); font-weight: 500; text-align: right; }
.kv-row .v.num { font-weight: 600; }
.kv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; }
.clickable { cursor: pointer; text-underline-offset: 3px; }
.clickable:hover { text-decoration: underline; text-decoration-color: var(--line-3); }

/* ---------------------------------------------------------------- stat tiles */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat {
    position: relative;
    padding: 10px 12px 11px;
    border-radius: var(--r);
    background: var(--sunken);
    border: 1px solid var(--line);
    overflow: hidden;
}
.stat .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-4);
}
.stat .value {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    margin-top: 3px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.stat .hint { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.stat.money { background: linear-gradient(180deg, rgba(243, 205, 90, 0.07), var(--sunken)); border-color: rgba(243, 205, 90, 0.18); }
.stat.money .value { color: var(--money); }
.stat.info .value { color: var(--info); }
.stat.brand .value { color: var(--brand-2); }
.stat.danger .value { color: var(--danger); }

/* ---------------------------------------------------------------- meters */
.meter {
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.meter > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--ok);
    transition: width 0.5s var(--ease), background-color 0.3s;
}
.meter.lg { height: 10px; }
.meter > span.tone-warn { background: var(--warn); }
.meter > span.tone-danger { background: var(--danger); }
.meter > span.tone-heat { background: linear-gradient(90deg, var(--warn), var(--danger)); }

.turn-meter {
    background: linear-gradient(90deg, var(--info) 0%, var(--brand) 100%) !important;
    box-shadow: 0 0 18px rgba(255, 79, 184, 0.35);
    transition: width 0.5s var(--ease);
}

/* ---------------------------------------------------------------- chips & badges */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    white-space: nowrap;
    line-height: 1.5;
}
.chip-info { color: var(--info); background: var(--info-wash); border-color: rgba(77, 216, 239, 0.28); }
.chip-brand { color: var(--brand-2); background: var(--brand-wash); border-color: var(--brand-line); }
.chip-money { color: var(--money); background: var(--money-wash); border-color: rgba(243, 205, 90, 0.3); }
.chip-ok { color: var(--ok); background: var(--ok-wash); border-color: rgba(70, 220, 157, 0.3); }
.chip-warn { color: var(--warn); background: var(--warn-wash); border-color: rgba(255, 181, 77, 0.3); }
.chip-danger { color: var(--danger); background: var(--danger-wash); border-color: rgba(255, 97, 112, 0.32); }
button.chip { cursor: pointer; transition: border-color 0.2s, background 0.2s; }
button.chip:hover { border-color: var(--line-3); }

.tag-badge {
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(255, 79, 184, 0.3), rgba(77, 216, 239, 0.18)),
        var(--surface-3);
    border: 1px solid var(--brand-line);
    border-radius: 12px;
    box-shadow: 0 10px 30px -14px rgba(255, 79, 184, 0.6);
}

.avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
}

/* ---------------------------------------------------------------- buttons */
.btn, .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--text);
    background: linear-gradient(180deg, rgba(255, 79, 184, 0.2), rgba(255, 79, 184, 0.08));
    border: 1px solid var(--brand-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    user-select: none;
    transition: transform 0.18s var(--ease), box-shadow 0.22s var(--ease), border-color 0.2s, background 0.2s, color 0.2s;
}
.btn:hover:not(:disabled), .action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 138, 208, 0.75);
    background: linear-gradient(180deg, rgba(255, 79, 184, 0.3), rgba(255, 79, 184, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 26px -12px rgba(255, 79, 184, 0.7);
}
.btn:active:not(:disabled), .action-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
.btn:disabled, .action-btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.42;
    cursor: not-allowed;
    filter: saturate(0.4);
}

.btn-primary {
    color: #1a0712;
    background: linear-gradient(180deg, #ff6cc4, #f23ea9);
    border-color: rgba(255, 170, 220, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -14px rgba(255, 79, 184, 0.9);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #ff80cd, #ff4fb8);
    border-color: rgba(255, 200, 232, 0.8);
}
.btn-money {
    color: #201703;
    background: linear-gradient(180deg, #f8dc7d, #e9b935);
    border-color: rgba(255, 230, 160, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px -14px rgba(243, 205, 90, 0.9);
}
.btn-money:hover:not(:disabled) {
    background: linear-gradient(180deg, #fbe390, #f0c443);
    border-color: rgba(255, 238, 190, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 28px -12px rgba(243, 205, 90, 0.75);
}
.btn-ghost {
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--line-2);
    box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line-3);
    box-shadow: none;
}
.btn-danger {
    color: var(--danger);
    background: var(--danger-wash);
    border-color: rgba(255, 97, 112, 0.35);
    box-shadow: none;
}
.btn-danger:hover:not(:disabled) {
    color: #ffd7db;
    background: rgba(255, 97, 112, 0.2);
    border-color: rgba(255, 97, 112, 0.6);
    box-shadow: 0 10px 24px -14px rgba(255, 97, 112, 0.8);
}
.btn-sm { min-height: 32px; padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.btn-xs { min-height: 26px; padding: 3px 9px; font-size: 12px; border-radius: 7px; }
.btn-block { width: 100%; }

/* dashboard action tiles: icon + label + one-line hint */
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 74px;
    padding: 11px 12px;
    text-align: left;
    border-radius: var(--r);
    color: var(--text);
    background: var(--sunken);
    border: 1px solid var(--line-2);
    cursor: pointer;
    transition: transform 0.18s var(--ease), border-color 0.2s, background 0.2s, box-shadow 0.22s var(--ease);
}
.action-tile:hover {
    transform: translateY(-2px);
    border-color: var(--brand-line);
    background: linear-gradient(180deg, rgba(255, 79, 184, 0.09), var(--sunken));
    box-shadow: 0 14px 30px -18px rgba(255, 79, 184, 0.8);
}
.action-tile:active { transform: translateY(0) scale(0.99); }
.action-tile .t-icon { font-size: 18px; line-height: 1; }
.action-tile .t-label { font-weight: 700; font-size: 14px; letter-spacing: 0.01em; }
.action-tile .t-hint { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.action-tile.wide { grid-column: span 2; flex-direction: row; align-items: center; min-height: 52px; gap: 12px; }
.action-tile.wide .t-text { display: flex; flex-direction: column; gap: 2px; }
.action-tile.wide .t-go { margin-left: auto; color: var(--text-3); font-size: 18px; }

/* heat management keeps its live colour cue (set by updateUI) */
.heat-btn { border-width: 1px; border-style: solid; }
.heat-btn.heat-low { border-color: rgba(70, 220, 157, 0.45); }
.heat-btn.heat-medium { border-color: rgba(255, 181, 77, 0.55); }
.heat-btn.heat-high { border-color: rgba(255, 97, 112, 0.65); box-shadow: 0 0 0 1px rgba(255, 97, 112, 0.15), 0 12px 30px -18px rgba(255, 97, 112, 0.9); }
.heat-btn.heat-low:hover { box-shadow: 0 14px 30px -18px rgba(70, 220, 157, 0.8); border-color: var(--ok); }
.heat-btn.heat-medium:hover { box-shadow: 0 14px 30px -18px rgba(255, 181, 77, 0.8); border-color: var(--warn); }
.heat-btn.heat-high:hover { box-shadow: 0 14px 30px -18px rgba(255, 97, 112, 0.9); border-color: var(--danger); }

/* ---------------------------------------------------------------- inputs */
.field { display: grid; gap: 6px; }
.field > span { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.input,
#modalContainer input[type="number"],
#modalContainer input[type="text"],
#modalContainer input[type="email"],
#modalContainer input[type="password"],
#modalContainer textarea,
#modalContainer select {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    border-radius: var(--r-sm);
    background: var(--sunken) !important;
    border: 1px solid var(--line-2) !important;
    color: var(--text) !important;
    font-family: var(--font-ui);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#modalContainer input[type="number"] { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: center; }
#modalContainer .w-20 { width: 5rem; }
.input:focus,
#modalContainer input:focus,
#modalContainer textarea:focus,
#modalContainer select:focus {
    outline: none;
    border-color: var(--brand-line) !important;
    box-shadow: 0 0 0 3px rgba(255, 79, 184, 0.16);
}
.input-error, #modalContainer .input-error { border-color: rgba(255, 97, 112, 0.65) !important; box-shadow: 0 0 0 3px rgba(255, 97, 112, 0.12); }
.field-error { font-size: 12.5px; color: var(--danger); }
input[type="range"] { accent-color: var(--brand); }

/* quantity steppers (all stores use adjustQuantity) */
#modalContainer button[onclick^="adjustQuantity"] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--text);
    font-weight: 700;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
#modalContainer button[onclick^="adjustQuantity"]:hover { background: #2e2a3c; border-color: var(--line-3); }
#modalContainer button[onclick^="adjustQuantity"]:active { transform: scale(0.94); }

/* segmented control */
.segmented { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 11px; background: var(--sunken); border: 1px solid var(--line); }
.segmented button { padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--text-3); transition: background 0.2s, color 0.2s; }
.segmented button[aria-pressed="true"] { color: var(--text); background: var(--surface-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ---------------------------------------------------------------- modals */
#modalContainer > .fixed {
    z-index: var(--z-modal);
    background: rgba(6, 4, 12, 0.74) !important;
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    animation: pf-fade 0.18s ease-out;
}
#modalContainer .game-panel {
    border-radius: var(--r-xl);
    border-color: var(--line-3);
    background: linear-gradient(180deg, rgba(33, 29, 45, 0.98) 0%, rgba(19, 17, 26, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 79, 184, 0.10),
        0 40px 90px -30px rgba(0, 0, 0, 0.85),
        0 0 70px -20px rgba(255, 79, 184, 0.22);
    max-height: min(88dvh, 880px);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: pf-pop 0.24s var(--ease);
}
#modalContainer .game-panel > h3:first-child,
#modalContainer .game-panel > div:first-child h3,
#modalContainer .modal-title {
    font-family: var(--font-display);
    font-weight: 400 !important;
    font-size: 19px !important;
    letter-spacing: 0.02em;
    color: var(--text);
    text-shadow: none;
}
#modalContainer h4 { color: var(--text); font-weight: 600; letter-spacing: 0.005em; }
#modalContainer .rounded,
#modalContainer .rounded-lg { border-radius: var(--r); }
#modalContainer .space-y-2 > .rounded,
#modalContainer .space-y-3 > .rounded { border-radius: var(--r); }

/* the many "×" close buttons */
#modalContainer button[onclick="closeModal()"].text-2xl,
.modal-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    font-size: 20px !important;
    line-height: 1;
    color: var(--text-3) !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-2);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
#modalContainer button[onclick="closeModal()"].text-2xl:hover,
.modal-close:hover { color: var(--text) !important; background: rgba(255, 255, 255, 0.08); border-color: var(--line-3); }

/* full-width "Close" / "Continue playing" footers become quiet ghost buttons */
#modalContainer button[onclick="closeModal()"].w-full:not(.action-btn):not(.btn) {
    min-height: 42px;
    border-radius: var(--r-sm);
    font-weight: 600;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--line-2);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#modalContainer button[onclick="closeModal()"].w-full:not(.action-btn):not(.btn):hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--line-3);
}

/* shared modal shell (openModal in ui.js) */
.modal-shell { display: flex; flex-direction: column; padding: 0 !important; }
.modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    background: linear-gradient(180deg, rgba(33, 29, 45, 1) 70%, rgba(33, 29, 45, 0));
}
.modal-head .m-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    font-size: 20px;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
}
.modal-head .m-text { flex: 1; min-width: 0; }
.modal-head .m-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.modal-body { padding: 4px 20px 20px; }
.modal-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 14px 20px 18px;
    background: linear-gradient(0deg, rgba(19, 17, 26, 1) 65%, rgba(19, 17, 26, 0));
}

/* cards inside screens */
.card {
    padding: 14px;
    border-radius: var(--r);
    background: var(--sunken);
    border: 1px solid var(--line);
}
:not(.grid):not(.flex) > .card + .card { margin-top: 10px; }
.card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.card-title .muted { margin-left: auto; font-weight: 500; font-size: 12.5px; color: var(--text-3); }

.empty-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 18px 24px;
    text-align: center;
}
.empty-state .e-icon { font-size: 34px; filter: drop-shadow(0 8px 20px rgba(255, 79, 184, 0.45)); }
.empty-state h4 { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--text); }
.empty-state p { max-width: 42ch; color: var(--text-3); font-size: 14px; line-height: 1.55; text-wrap: pretty; }

.callout {
    display: flex;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--r);
    font-size: 13.5px;
    line-height: 1.45;
    background: var(--info-wash);
    border: 1px solid rgba(77, 216, 239, 0.22);
    color: var(--text-2);
}
.callout.warn { background: var(--warn-wash); border-color: rgba(255, 181, 77, 0.28); }
.callout.danger { background: var(--danger-wash); border-color: rgba(255, 97, 112, 0.3); }
.callout.ok { background: var(--ok-wash); border-color: rgba(70, 220, 157, 0.28); }

.list { display: grid; gap: 8px; }
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r);
    background: var(--sunken);
    border: 1px solid var(--line);
    transition: border-color 0.2s, background 0.2s;
}
.list-row:hover { border-color: var(--line-2); }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .meta { font-size: 12.5px; color: var(--text-3); }

/* ---------------------------------------------------------------- hood pimp cards */
.npc-card {
    background: var(--sunken);
    border: 1px solid var(--line-2);
    border-radius: var(--r) !important;
    transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.22s var(--ease);
}
.npc-card:hover {
    border-color: rgba(77, 216, 239, 0.45);
    box-shadow: 0 16px 32px -20px rgba(77, 216, 239, 0.7);
    transform: translateY(-2px);
}
.npc-card.defeated { opacity: 0.45; border-color: rgba(255, 97, 112, 0.25); filter: grayscale(0.4); }
.npc-card .action-btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }

/* ---------------------------------------------------------------- terminal logs */
.terminal {
    font-family: var(--font-num);
    font-size: 11.5px;
    line-height: 1.55;
    padding: 10px 12px;
    border-radius: var(--r);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px),
        #08070c;
    border: 1px solid var(--line);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(70, 220, 157, 0.6);
    animation: pf-ping 2s infinite;
}

/* ---------------------------------------------------------------- header */
.site-header .brand-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 0 26px rgba(77, 216, 239, 0.65), 0 2px 0 rgba(0, 0, 0, 0.6);
}
/* Two-tone neon sign (2026-10-05): EMPIRE in hot-pink tube, CITY in gold, with
   the odd flicker of a 1985 sign that's seen some winters. */
.site-header .brand-title { text-shadow: none; }
.pf-brand-a, .pf-brand-b { display: inline-block; }
.pf-brand-a {
    color: #ffe4f6;
    text-shadow: 0 0 4px #fff, 0 0 12px #ff3fb4, 0 0 26px #ff3fb4, 0 0 52px rgba(255, 63, 180, 0.6), 0 3px 0 #6b0f4f;
    animation: pf-sign-buzz 7s infinite;
}
.pf-brand-b {
    color: #fff3c4;
    text-shadow: 0 0 4px #fff, 0 0 12px #fcd34d, 0 0 26px #f59e0b, 0 0 52px rgba(245, 158, 11, 0.55), 0 3px 0 #7c4a03;
    animation: pf-sign-flicker 5.3s infinite;
}
.pf-brand-kicker {
    display: none;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.32em;
    color: #4dd8ef;
    text-shadow: 0 0 10px rgba(77, 216, 239, 0.8);
}
@media (min-width: 640px) { .pf-brand-kicker { display: block; } }
@keyframes pf-sign-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.35; text-shadow: 0 0 2px #fcd34d, 0 3px 0 #7c4a03; }
}
@keyframes pf-sign-buzz { 0%, 94%, 100% { opacity: 1; } 95% { opacity: 0.6; } 96% { opacity: 1; } 97.5% { opacity: 0.75; } }
/* a slow headlight sweep across the skyline */
.site-header > div::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 48%, transparent 60%);
    transform: translateX(-100%);
    animation: pf-sweep 9s ease-in-out infinite;
}
@keyframes pf-sweep { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .pf-brand-a, .pf-brand-b, .site-header > div::after { animation: none; } }
.site-header .tagline { color: rgba(239, 235, 246, 0.82); font-weight: 500; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- toasts */
.notification {
    position: fixed;
    top: 84px;
    right: 18px;
    z-index: var(--z-toast);
    max-width: min(380px, calc(100vw - 36px));
    padding: 12px 16px 12px 14px;
    border-radius: var(--r);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    background: rgba(27, 24, 37, 0.96);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--info);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    transform: translateX(calc(100% + 30px));
    transition: transform 0.35s var(--ease);
}
.notification.show { transform: translateX(0); }
.notification.success { border-left-color: var(--ok); background: rgba(27, 24, 37, 0.96); }
.notification.error { border-left-color: var(--danger); background: rgba(27, 24, 37, 0.96); }
.notification.warning { border-left-color: var(--warn); background: rgba(27, 24, 37, 0.96); }

/* ---------------------------------------------------------------- misc */
.respawn-timer {
    font-family: var(--font-num);
    color: var(--danger);
    text-shadow: 0 0 6px rgba(255, 97, 112, 0.5);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 79, 184, 0.45); background-clip: padding-box; }

@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-pop { from { opacity: 0; transform: translateY(10px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes pf-ping { 0% { box-shadow: 0 0 0 0 rgba(70, 220, 157, 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(70, 220, 157, 0); } }
@keyframes pf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.stagger > * { animation: pf-rise 0.4s var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: 0.04s; }
.stagger > *:nth-child(3) { animation-delay: 0.08s; }
.stagger > *:nth-child(4) { animation-delay: 0.12s; }
.stagger > *:nth-child(5) { animation-delay: 0.16s; }
.stagger > *:nth-child(n+6) { animation-delay: 0.2s; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 640px) {
    #modalContainer > .fixed { align-items: flex-end !important; padding: 0 !important; }
    #modalContainer .game-panel {
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 22px 22px 0 0;
        max-height: 92dvh;
        animation: pf-sheet 0.28s var(--ease);
    }
    .notification { top: auto; bottom: 18px; right: 12px; left: 12px; max-width: none; transform: translateY(calc(100% + 30px)); }
    .notification.show { transform: translateY(0); }
    .stat .value { font-size: 17px; }
}
@keyframes pf-sheet { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- loading + small controls */
.skeleton {
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.11) 37%, rgba(255, 255, 255, 0.05) 63%);
    background-size: 400% 100%;
    animation: pf-shimmer 1.3s ease infinite;
}
@keyframes pf-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.qty-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.qty-btn:hover { background: #2e2a3c; border-color: var(--line-3); }
.qty-btn:active { transform: scale(0.94); }
.callout.compact { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; margin-top: 6px; }
.chip-quiet { background: transparent; border-color: transparent; color: var(--text-4); font-weight: 500; }

/* component display rules must not beat Tailwind's .hidden */
.btn.hidden, .action-btn.hidden, .chip.hidden, .action-tile.hidden, .list-row.hidden,
.callout.hidden, .empty-state.hidden, .card.hidden, .stat.hidden { display: none; }
@media (min-width: 640px) { .btn.sm\:inline-flex { display: inline-flex; } }
.notification { white-space: pre-line; line-height: 1.45; }

/* ---------------------------------------------------------------- hood pimp move menu */
.move-row { align-items: flex-start; }
.move-row .move-icon { flex: none; width: 34px; padding-top: 1px; font-size: 22px; line-height: 1.2; text-align: center; }
.move-row .meta { margin-top: 3px; line-height: 1.45; }
.move-row .move-expect { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.move-row > .btn { flex: none; align-self: center; min-width: 56px; }
.move-row.is-locked { opacity: 0.62; }
.move-row.is-locked:hover { border-color: var(--line); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ================================================================ mobile shell
   Spec: docs/superpowers/specs/2026-10-04-mobile-shell-design.md
   Phones first: sticky glass stat bar, five views, a bottom tab bar in thumb reach,
   bottom sheets. 1024px and up: tabs become a left rail; 1280px and up the wire
   gets its own column. */
.pf-shell {
    --pf-spring: cubic-bezier(0.2, 0.9, 0.25, 1.05);
    --pf-glass: rgba(18, 15, 27, 0.74);
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

/* ---- sticky stat bar */
.pf-topbar {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr auto auto auto;   /* cash, turns, ledger, heat */
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 18px;
    background: var(--pf-glass);
    border: 1px solid var(--line-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.pf-tb-k { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.pf-tb-cash { position: relative; min-width: 0; }
.pf-tb-cash #money { display: block; font-family: var(--font-num); font-weight: 700; font-size: 21px; line-height: 1.1; color: var(--money); text-shadow: 0 0 18px rgba(243, 205, 90, 0.28); white-space: nowrap; }
.pf-tb-turns { display: flex; align-items: center; gap: 8px; }
.pf-ring { width: 34px; height: 34px; transform: rotate(-90deg); }
.pf-ring circle { fill: none; stroke-width: 3.5; }
.pf-ring-bg { stroke: rgba(77, 216, 239, 0.14); }
.pf-ring-fg { stroke: var(--info); stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease); filter: drop-shadow(0 0 4px rgba(77, 216, 239, 0.5)); }
.pf-tb-tv #currentTurns { display: block; font-family: var(--font-num); font-weight: 700; font-size: 17px; line-height: 1.1; color: var(--info); }
.pf-tb-heat { padding: 7px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--ok-wash); color: var(--ok); border: 1px solid rgba(70, 220, 157, 0.3); white-space: nowrap; }
.pf-tb-heat[data-level="mid"] { background: var(--warn-wash); color: var(--warn); border-color: rgba(255, 181, 77, 0.35); }
.pf-tb-heat[data-level="high"] { background: var(--danger-wash); color: var(--danger); border-color: rgba(255, 97, 112, 0.4); animation: pf-heat 1.4s ease-in-out infinite; }
@keyframes pf-heat { 50% { box-shadow: 0 0 18px -2px rgba(255, 97, 112, 0.55); } }
.pf-delta { position: absolute; left: 0; top: -2px; font-family: var(--font-num); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; }
.pf-delta.is-up { color: var(--ok); }
.pf-delta.is-down { color: var(--danger); }
.pf-delta.go { animation: pf-float 1.3s var(--ease) forwards; }
@keyframes pf-float { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.pf-bump-up { animation: pf-bump-up 0.7s var(--ease); }
.pf-bump-down { animation: pf-bump-down 0.7s var(--ease); }
@keyframes pf-bump-up { 30% { transform: scale(1.08); color: var(--ok); } }
@keyframes pf-bump-down { 30% { transform: scale(0.96); color: var(--danger); } }

/* ---- views */
.pf-view { display: none; }
.pf-view.is-active { display: block; animation: pf-view-in 0.32s var(--ease); }
@keyframes pf-view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pf-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pf-home-grid { display: grid; gap: 14px; }
.pf-view-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 14px; }
.pf-view-head h2, .pf-card-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: 0.02em; color: var(--text); }
.pf-card-sub { font-size: 13px; color: var(--text-3); }
.pf-card {
    padding: 16px;
    border-radius: var(--r-lg);
    background: linear-gradient(165deg, rgba(37, 33, 49, 0.85), rgba(21, 19, 29, 0.92));
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-panel);
}
.pf-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pf-card-head h2 { font-size: 16px; }
.pf-link { font-size: 13px; font-weight: 600; color: var(--brand-2); }
.pf-flash { animation: pf-flash 1.2s var(--ease); }
@keyframes pf-flash { 20% { box-shadow: 0 0 0 2px var(--brand-line), 0 0 40px -6px rgba(255, 79, 184, 0.5); } }

/* ---- profile */
.pf-profile {
    position: relative;
    padding: 16px;
    border-radius: var(--r-xl);
    background:
        radial-gradient(420px 160px at 0% 0%, rgba(255, 79, 184, 0.16), transparent 70%),
        radial-gradient(360px 160px at 100% 0%, rgba(243, 205, 90, 0.10), transparent 70%),
        linear-gradient(165deg, #221d2f, #15131d);
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}
.pf-prof-top { display: flex; gap: 14px; align-items: center; }
.pf-avatar { position: relative; flex: none; width: 64px; height: 90px; border-radius: 9px; overflow: hidden; transform: rotate(-3deg); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(243, 205, 90, 0.35); transition: transform 0.35s var(--pf-spring); }
.pf-avatar:hover, .pf-avatar:active { transform: rotate(0deg) scale(1.04); }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pf-avatar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 235, 170, 0.35) 45%, rgba(190, 120, 255, 0.25) 55%, transparent 70%); background-size: 250% 100%; animation: pf-holo 4.5s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes pf-holo { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.pf-prof-id { min-width: 0; flex: 1; }
.pf-name { font-family: var(--font-display); font-size: 20px; line-height: 1.15; color: var(--money); text-shadow: 0 0 16px rgba(243, 205, 90, 0.25); }
.pf-rankline { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.pf-rank { color: var(--brand-2); font-weight: 700; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-chips .chip { font-size: 12px; }
.pf-statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.pf-stat { display: grid; justify-items: center; gap: 1px; padding: 9px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); transition: transform 0.15s var(--ease), background 0.2s; }
button.pf-stat:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.06); }
.pf-sv { font-size: 17px; font-weight: 700; line-height: 1.2; }
.pf-sk { font-size: 11px; color: var(--text-3); }
.pf-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.pf-mk { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--text-3); margin-bottom: 5px; white-space: nowrap; }
.pf-mk .num { font-weight: 700; }
.pf-turnstrip { margin-top: 12px; }
.pf-ts-text { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }

/* ---- action board */
.pf-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon label" "icon hint";
    align-items: center;
    column-gap: 11px;
    min-height: 74px;
    padding: 12px;
    text-align: left;
    border-radius: 18px;
    color: var(--text);
    background: linear-gradient(165deg, rgba(41, 36, 55, 0.9), rgba(22, 19, 31, 0.95));
    border: 1px solid var(--line-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -20px rgba(0, 0, 0, 0.9);
    transition: transform 0.16s var(--ease), border-color 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.pf-tile:hover { border-color: var(--line-3); }
.pf-tile:active { transform: scale(0.965); }
.pf-ti { grid-area: icon; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 21px; background: linear-gradient(160deg, rgba(255, 79, 184, 0.18), rgba(120, 70, 255, 0.10)); border: 1px solid rgba(255, 79, 184, 0.22); }
.pf-tl { grid-area: label; font-weight: 700; font-size: 15px; line-height: 1.2; align-self: end; }
.pf-th { grid-area: hint; font-size: 12px; color: var(--text-3); line-height: 1.3; align-self: start; margin-top: 2px; }
.pf-th[data-tone="hot"] { color: var(--brand-2); }
.pf-th[data-tone="bad"] { color: var(--danger); font-weight: 600; }
.pf-th[data-tone="warn"] { color: var(--warn); }
.pf-th[data-tone="ok"] { color: var(--ok); }
.pf-th[data-tone="info"] { color: var(--info); }
.pf-cost { position: absolute; top: 8px; right: 9px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--info); opacity: 0.85; }
.pf-tile-hot { border-color: var(--brand-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(255, 79, 184, 0.12), 0 14px 34px -18px rgba(255, 79, 184, 0.55); }
.pf-tile-hot .pf-ti { background: linear-gradient(160deg, rgba(255, 79, 184, 0.35), rgba(255, 97, 112, 0.18)); }
.pf-tile.heat-low .pf-ti { border-color: rgba(70, 220, 157, 0.3); }
.pf-tile.heat-medium .pf-ti { border-color: rgba(255, 181, 77, 0.45); }
.pf-tile.heat-high { border-color: rgba(255, 97, 112, 0.5); }
.pf-tile-wide { width: 100%; grid-template-columns: auto 1fr auto; grid-template-areas: "icon label go" "icon hint go"; margin-top: 10px; }
.pf-go { grid-area: go; font-size: 24px; color: var(--text-3); }

/* ---- streets */
.pf-streets-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.pf-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-2); }
.pf-block-name { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--text); }
.pf-trip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 11px 13px; border-radius: 14px; font-size: 13px; color: var(--text-2); background: var(--info-wash); border: 1px solid rgba(77, 216, 239, 0.3); }
.pf-trip[hidden] { display: none; }
.pf-scene { position: relative; margin: 0 -4px 16px; }
.pf-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px; -webkit-overflow-scrolling: touch; }
.pf-strip::-webkit-scrollbar { display: none; }
.pf-front {
    position: relative;
    flex: 0 0 86%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    border: 1px solid var(--line-2);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.95);
    overflow: hidden;
}
.pf-front::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 20, 0.25) 0%, transparent 30%, transparent 62%, rgba(10, 6, 20, 0.55) 100%); pointer-events: none; }
.pf-front-tag { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text); background: rgba(12, 9, 20, 0.72); border: 1px solid var(--line-2); backdrop-filter: blur(8px); }
.pf-sprite { position: absolute; bottom: 3%; z-index: 3; height: 46%; padding: 0; transform: translateX(-50%); -webkit-tap-highlight-color: transparent; }
.pf-sprite img { animation: pf-breathe 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 100%; }
.pf-sprite img { height: 100%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); transition: transform 0.2s var(--pf-spring); pointer-events: none; }
.pf-sprite::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 70%; height: 9px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); z-index: -1; }
.pf-sprite[data-tier="district"] img { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 7px rgba(255, 181, 77, 0.55)); }
.pf-sprite[data-tier="kingpin"] img { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(243, 205, 90, 0.8)); }
.pf-sprite:active img { animation: none; transform: scale(0.93, 1.05); }
/* planted on the sidewalk: a slow breath and a little weight shift, never floating */
@keyframes pf-breathe { 0%, 100% { transform: none; } 40% { transform: scaleY(1.012); } 70% { transform: skewX(-0.6deg); } }
.pf-smoke { position: absolute; width: 0; height: 0; pointer-events: none; }
.pf-smoke i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(225, 220, 235, 0.55); filter: blur(2px); opacity: 0; animation: pf-puff 3.6s ease-out infinite; animation-delay: var(--d, 0s); }
.pf-smoke i:nth-child(2) { animation-delay: calc(var(--d, 0s) + 1.2s); }
.pf-smoke i:nth-child(3) { animation-delay: calc(var(--d, 0s) + 2.4s); }
@keyframes pf-puff { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 12% { opacity: 0.8; } 100% { opacity: 0; transform: translate(10px, -46px) scale(2.6); } }
.avatar-sprite { overflow: hidden; padding: 0; background: linear-gradient(180deg, #2a2338, #15111e); }
.avatar-sprite img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; transform: scale(2.1); transform-origin: 50% 8%; image-rendering: pixelated; }
.pf-sprite-tag { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; font-size: 11px; white-space: nowrap; color: var(--text); background: rgba(12, 9, 20, 0.82); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.pf-sprite-tag b { font-weight: 700; }
.pf-sprite-tag i { font-style: normal; font-family: var(--font-num); font-weight: 700; }
.pf-sprite-tag i[data-odds="good"] { color: var(--ok); }
.pf-sprite-tag i[data-odds="even"] { color: var(--warn); }
.pf-sprite-tag i[data-odds="bad"] { color: var(--danger); }
.pf-sprite[data-tier="kingpin"] .pf-sprite-tag { border-color: rgba(243, 205, 90, 0.6); }
.pf-strip.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.pf-strip.is-dragging .pf-front { cursor: grabbing; }
.pf-strip-dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
.pf-strip-dots button { position: relative; width: 22px; height: 22px; padding: 0; }
.pf-strip-dots button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--line-3); transition: width 0.3s var(--pf-spring), background 0.3s; }
.pf-strip-dots button.on::before { width: 18px; background: var(--brand); }
.pf-strip-arrow { position: absolute; top: calc(50% - 26px); z-index: 4; display: none; place-items: center; width: 40px; height: 40px; border-radius: 999px; font-size: 24px; line-height: 1; color: var(--text); background: rgba(12, 9, 20, 0.78); border: 1px solid var(--line-2); backdrop-filter: blur(8px); transition: opacity 0.2s, transform 0.15s; }
.pf-strip-arrow:active { transform: scale(0.92); }
.pf-strip-arrow.is-prev { left: 8px; }
.pf-strip-arrow.is-next { right: 8px; }
.pf-scene.at-start .pf-strip-arrow.is-prev, .pf-scene.at-end .pf-strip-arrow.is-next, .pf-scene.no-scroll .pf-strip-arrow { opacity: 0; pointer-events: none; }
.pf-scene.no-scroll .pf-strip-dots { display: none; }
@media (hover: hover) and (pointer: fine) { .pf-strip-arrow { display: grid; } .pf-strip { cursor: grab; } }
.pf-list-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; }
.pf-list-head h3, .pf-more summary { font-weight: 700; font-size: 15px; color: var(--text); }
.pf-count { font-size: 12px; color: var(--text-3); font-family: var(--font-num); }
.pf-list { display: grid; gap: 10px; }
.pf-empty { padding: 22px; text-align: center; font-size: 14px; color: var(--text-3); border: 1px dashed var(--line-2); border-radius: 14px; }
.pf-more { margin-top: 16px; }
.pf-more summary { display: flex; justify-content: space-between; align-items: baseline; list-style: none; cursor: pointer; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.pf-more summary::-webkit-details-marker { display: none; }
.pf-more summary::after { content: '›'; margin-left: 8px; color: var(--text-3); transition: transform 0.25s var(--ease); }
.pf-more[open] summary::after { transform: rotate(90deg); }
.pf-more[open] summary { margin-bottom: 10px; }
.pf-trip-row .btn { flex: none; }

/* ---- stores */
.pf-stores { display: grid; gap: 12px; }
.pf-store { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; text-align: left; border-radius: 18px; color: var(--text); background: linear-gradient(165deg, rgba(41, 36, 55, 0.9), rgba(22, 19, 31, 0.95)); border: 1px solid var(--line-2); transition: transform 0.16s var(--ease), border-color 0.2s; }
.pf-store:active { transform: scale(0.98); }
.pf-store:hover { border-color: var(--line-3); }
.pf-store-art { width: 110px; aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; image-rendering: pixelated; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.9); }
.pf-store-body { display: grid; gap: 3px; min-width: 0; }
.pf-store-name { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.02em; }
.pf-store-sells { font-size: 13px; color: var(--text-3); }
.pf-store-alerts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.pf-store-alerts .chip { font-size: 11px; padding: 2px 8px; }
.pf-store-go { font-size: 26px; color: var(--text-3); }

/* ---- crew */
.pf-crew-card { display: flex; gap: 14px; align-items: center; }
.pf-crew-flag { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 16px; font-size: 28px; background: var(--brand-wash); border: 1px solid var(--brand-line); }
.pf-crew-name { font-family: var(--font-display); font-size: 18px; color: var(--text); }

/* ---- wire feed */
.pf-filters { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.pf-filter { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); transition: all 0.2s var(--ease); }
.pf-filter.is-on { color: var(--text); background: var(--brand-wash); border-color: var(--brand-line); }
.pf-feed { display: grid; gap: 6px; }
.pf-ev { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--line-2); animation: pf-ev-in 0.35s var(--ease); }
@keyframes pf-ev-in { from { opacity: 0; transform: translateY(-6px); } }
.pf-ev-t { font-family: var(--font-num); font-size: 11px; color: var(--text-4); white-space: nowrap; }
.pf-ev-m { font-size: 13.5px; line-height: 1.4; color: var(--text-2); overflow-wrap: anywhere; }
.pf-ev[data-kind="fight"] { border-left-color: var(--danger); }
.pf-ev[data-kind="fight"] .pf-ev-m { color: var(--text); }
.pf-ev[data-kind="money"] { border-left-color: var(--money); }
.pf-ev[data-kind="crew"] { border-left-color: var(--brand); }
.pf-ev[data-kind="alert"] { border-left-color: var(--warn); }
.pf-feed[data-filter="fight"] .pf-ev:not([data-kind="fight"]),
.pf-feed[data-filter="money"] .pf-ev:not([data-kind="money"]),
.pf-feed[data-filter="crew"] .pf-ev:not([data-kind="crew"]) { display: none; }
.pf-feed-sm .pf-ev { padding: 7px 10px; }
.pf-feed-sm .pf-ev-m { font-size: 12.5px; }

/* ---- bottom tab bar */
.pf-tabbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px;
    border-radius: 24px;
    background: var(--pf-glass);
    border: 1px solid var(--line-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 50px -16px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.pf-tab { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 18px; color: var(--text-3); font-size: 11px; font-weight: 600; transition: color 0.25s var(--ease), transform 0.15s var(--ease); -webkit-tap-highlight-color: transparent; }
.pf-tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--pf-spring); }
.pf-tab.is-active { color: var(--text); }
.pf-tab.is-active svg { transform: translateY(-1px) scale(1.08); color: var(--brand-2); }
.pf-tab:active { transform: scale(0.94); }
.pf-tab-ind { position: absolute; top: 6px; left: 0; bottom: 6px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 79, 184, 0.2), rgba(120, 70, 255, 0.12)); border: 1px solid var(--brand-line); transition: transform 0.45s var(--pf-spring), width 0.45s var(--pf-spring), height 0.45s var(--pf-spring); pointer-events: none; }
.pf-badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; color: #fff; background: var(--brand); box-shadow: 0 0 0 2px #16131f; }
.pf-badge[hidden] { display: none; }
.pf-badge-dot { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 6px; left: calc(50% + 9px); background: var(--danger); }

/* ---- bottom sheets (every screen in #modalContainer) */
html.pf-sheet-open, html.pf-sheet-open body { overflow: hidden; }
.pf-grab { display: none; }
/* the rank card in the profile sheet: tap to flip between the art and the stats */
.pf-sheet-card { display: block; width: min(70%, 260px); margin: 0 auto; padding: 0; perspective: 1200px; -webkit-tap-highlight-color: transparent; }
.pf-flip { position: relative; display: block; aspect-ratio: 350 / 490; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.05); }
.pf-sheet-card[aria-pressed="true"] .pf-flip { transform: rotateY(180deg); }
.pf-flip-front, .pf-flip-back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(243, 205, 90, 0.35); }
.pf-flip img { image-rendering: pixelated; }
.pf-flip-back { transform: rotateY(180deg); }
/* the card back is drawn live: rank art from the renderer (blank name/level/turf)
   plus your name, level and home block on top, so it's never out of date */
.pf-live-back { container-type: inline-size; text-align: left; }
.pf-live-back img { display: block; width: 100%; height: 100%; }
.pf-live-back b, .pf-live-back i { position: absolute; font-style: normal; line-height: 1; white-space: nowrap; }
.pf-lb-level { left: 5.5%; top: 11.6%; font-family: var(--font-display); font-weight: 400; font-size: 13cqw; color: #f3efff; text-shadow: 0.6cqw 0.6cqw 0 #5a1e8c, 0 0 2cqw rgba(150, 120, 255, 0.6); }
.pf-lb-name { right: 5%; top: 14.2%; max-width: 48%; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-weight: 400; font-size: 5.4cqw; color: #fff4fb; text-shadow: 0.4cqw 0.4cqw 0 #5a1450; }
.pf-lb-kicker { right: 5.4%; top: 19.6%; font-family: var(--font-ui); font-weight: 800; font-size: 2.8cqw; letter-spacing: 0.08em; color: var(--money); }
.pf-lb-turf { right: 5%; top: 22.4%; max-width: 38%; white-space: normal; text-align: right; font-family: var(--font-display); font-weight: 400; font-size: 5.6cqw; line-height: 1.05; text-transform: uppercase; color: #ffd36b; text-shadow: 0.45cqw 0.45cqw 0 #6b3a08; }
.pf-lb-district { right: 5.4%; top: 27.6%; font-family: var(--font-ui); font-weight: 700; font-size: 2.6cqw; color: rgba(243, 205, 90, 0.75); }
.pf-flip-hint { margin-top: 8px; text-align: center; font-size: 12px; color: var(--text-3); }
@media (max-width: 1023.98px) {
    #modalContainer > div { align-items: flex-end !important; padding: 0 !important; background: rgba(5, 3, 10, 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: pf-fade 0.25s ease; }
    #modalContainer .game-panel {
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 26px 26px 0 0 !important;
        max-height: 90dvh;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
        animation: pf-sheet-up 0.46s var(--pf-spring, cubic-bezier(0.2, 0.9, 0.25, 1.05));
        transition: transform 0.3s var(--ease);
    }
    #modalContainer .pf-grab { display: block; position: sticky; top: 0; z-index: 5; height: 22px; margin: 0 0 -8px; background: linear-gradient(180deg, rgba(33, 29, 45, 1) 50%, rgba(33, 29, 45, 0)); }
    #modalContainer .pf-grab::before { content: ''; position: absolute; left: 50%; top: 8px; width: 42px; height: 5px; transform: translateX(-50%); border-radius: 999px; background: var(--line-3); }
    .notification { top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}
@keyframes pf-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pf-fade { from { opacity: 0; } }

/* ---- phones: tighter page gutters, slim banner */
@media (max-width: 640px) {
    .site-header { margin-bottom: 10px !important; border-radius: 16px !important; }
    .pf-board .pf-th { font-size: 11.5px; }
}
@media (max-width: 370px) {
    .pf-tile { grid-template-columns: 1fr; grid-template-areas: "icon" "label" "hint"; row-gap: 6px; }
    .pf-meters { grid-template-columns: 1fr; }
}

/* ---- tablets: storefronts side by side */
@media (min-width: 640px) {
    .pf-front { flex-basis: 48%; }
    .pf-stores { grid-template-columns: 1fr 1fr; }
    .pf-board { grid-template-columns: repeat(4, 1fr); }
    .pf-tile { grid-template-columns: 1fr; grid-template-areas: "icon" "label" "hint"; row-gap: 8px; min-height: 120px; align-content: start; }
}

/* ---- desktop: left rail, two-column home */
@media (min-width: 1024px) {
    .pf-shell { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; padding-bottom: 40px; }
    .pf-topbar { grid-column: 2; grid-row: 1; top: 12px; }
    .pf-views { grid-column: 2; grid-row: 2; min-width: 0; }
    .pf-tabbar { position: sticky; top: 12px; left: auto; right: auto; bottom: auto; grid-column: 1; grid-row: 1 / span 2; align-self: start; grid-template-columns: 1fr; gap: 4px; padding: 8px; }
    .pf-tab { padding: 12px 2px 10px; }
    .pf-tab-ind { top: 0; left: 8px; right: 8px; bottom: auto; }
    .pf-home-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
    .pf-board { grid-template-columns: repeat(4, 1fr); }
    .pf-front { flex-basis: calc(25% - 8px); }
    .pf-sprite { height: 52%; }
}
/* ---- wide desktop: the wire gets its own column */
@media (min-width: 1280px) {
    .pf-shell { grid-template-columns: 84px minmax(0, 1fr) 340px; }
    .pf-topbar { grid-column: 2 / span 2; }
    .pf-views { display: contents; }
    .pf-view.is-active { grid-column: 2; grid-row: 2; }
    #view-wire { display: block; grid-column: 3; grid-row: 2; align-self: start; position: sticky; top: 92px; max-height: calc(100dvh - 110px); overflow-y: auto; padding: 16px; border-radius: var(--r-lg); background: rgba(21, 19, 29, 0.7); border: 1px solid var(--line-2); animation: none; }
    .pf-tab[data-tab="wire"] { display: none; }
    .pf-feed-peek { display: none; }
}

/* ================================================================ loading splash
   The promo's lowrider at 1:27: three-quarter front view, nose up, hopping on the
   rear wheels. The whole car pivots on its rear tire (bottom right of the art):
   compress, launch with the nose climbing, slam down, two smaller bounces. 2.4s loop. */
.pf-splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: 1fr auto auto;
    overflow: hidden;
    background: #07050d;
    color: var(--text);
    cursor: pointer;
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.pf-splash.is-out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.pf-sp-sky { position: absolute; inset: 0 0 24% 0; background-size: cover; background-position: center bottom; image-rendering: pixelated; animation: pf-sp-drift 18s ease-in-out infinite alternate; }
@keyframes pf-sp-drift { from { transform: scale(1.06) translateX(-1.5%); } to { transform: scale(1.06) translateX(1.5%); } }
.pf-sp-fade { position: absolute; inset: 0; background:
    radial-gradient(70% 45% at 50% 30%, transparent 0%, rgba(7, 5, 13, 0.35) 70%),
    linear-gradient(180deg, rgba(7, 5, 13, 0.55) 0%, rgba(7, 5, 13, 0.05) 35%, rgba(7, 5, 13, 0.25) 62%, #07050d 78%); }
.pf-sp-brand { position: relative; z-index: 2; align-self: center; justify-self: center; text-align: center; padding: 0 20px; }
.pf-sp-logo { width: min(74vw, 420px); height: auto; filter: drop-shadow(0 0 22px rgba(255, 79, 184, 0.55)) drop-shadow(0 0 4px rgba(243, 205, 90, 0.6)); animation: pf-sp-glow 2.4s ease-in-out infinite; }
@keyframes pf-sp-glow { 50% { filter: drop-shadow(0 0 34px rgba(255, 79, 184, 0.8)) drop-shadow(0 0 6px rgba(243, 205, 90, 0.9)); } }
.pf-sp-tag { margin-top: 10px; font-family: var(--font-display); font-size: clamp(13px, 3.6vw, 17px); letter-spacing: 0.18em; color: var(--money); text-shadow: 0 0 14px rgba(243, 205, 90, 0.45); }
.pf-sp-street { position: relative; z-index: 2; display: grid; place-items: end center; padding-top: 56px; }
.pf-sp-street::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 46%; background:
    radial-gradient(40% 40% at 30% 30%, rgba(255, 79, 184, 0.22), transparent 70%),
    radial-gradient(35% 40% at 72% 35%, rgba(77, 216, 239, 0.16), transparent 70%),
    linear-gradient(180deg, #1a1426, #0b0812); border-top: 2px solid rgba(255, 255, 255, 0.06); }
.pf-sp-lane { position: absolute; left: 0; right: 0; bottom: 14px; height: 4px; background: repeating-linear-gradient(90deg, rgba(243, 205, 90, 0.55) 0 34px, transparent 34px 70px); opacity: 0.45; }
.pf-sp-car { position: relative; width: min(84vw, 470px); aspect-ratio: 440 / 269; margin-bottom: 30px; }
.pf-sp-body { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; image-rendering: pixelated; filter: drop-shadow(0 0 18px rgba(178, 107, 255, 0.38)); }
.pf-sp-shadow { position: absolute; left: 6%; right: 4%; bottom: -6px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent); }
/* PiMpToshi: starts off the left edge, struts to the front of his car */
.pf-sp-walker { position: absolute; z-index: 3; bottom: 24px; left: 0; height: min(40vw, 190px); width: auto; image-rendering: pixelated; transform: translateX(-120%); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.6)); }
.pf-sp-walker.is-walking { transform: translateX(max(8px, calc(50vw - min(42vw, 235px) - 30%))); transition: transform 2.1s linear; }
.pf-sp-walker.is-standing { transition: none; animation: pf-sp-turn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.4); transform-origin: 50% 100%; }
@keyframes pf-sp-turn { 0% { scale: 0.92 1.04; } 55% { scale: 1.04 0.97; } 100% { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .pf-sp-walker { transform: translateX(6vw); transition: none !important; } }
.pf-sp-load { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; padding: 0 24px calc(28px + env(safe-area-inset-bottom)); }
.pf-sp-bar { width: min(64vw, 300px); height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; border: 1px solid var(--line-2); }
.pf-sp-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--info), #b26bff, var(--brand)); box-shadow: 0 0 12px rgba(255, 79, 184, 0.6); animation: pf-sp-fill 2.6s cubic-bezier(0.1, 0.7, 0.2, 1) forwards; transition: width 0.25s var(--ease); }
@keyframes pf-sp-fill { to { width: 86%; } }
.pf-sp-quip { min-height: 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); transition: opacity 0.25s; }
.pf-sp-skip { font-size: 11px; color: var(--text-4); letter-spacing: 0.06em; text-transform: uppercase; }
@media (min-width: 1024px) { .pf-sp-car { width: 520px; margin-bottom: 40px; } .pf-sp-walker { height: 220px; } }
@media (prefers-reduced-motion: reduce) { .pf-splash * { animation: none !important; } .pf-sp-bar span { width: 86%; } }

/* demo players: a slim pill instead of the old sign-in card */
.pf-demo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 8px 8px 8px 14px; border-radius: 16px; font-size: 13px; color: var(--text-2); background: rgba(255, 79, 184, 0.08); border: 1px solid var(--brand-line); }
.pf-demo b { color: var(--brand-2); }
.pf-demo[hidden] { display: none; }

/* iPhone Safari zooms the whole page in when you focus a field under 16px, which
   pushed the game past the screen edges. 16px on touch screens stops that; the
   overflow clip stops anything wider than the screen from making it pannable. */
@media (max-width: 1023.98px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}
html, body { overflow-x: clip; }

/* live stat bars on the card back (over the renderer's empty tracks) */
.pf-live-back .pf-lb-bar { position: absolute; left: 29%; width: 12.8%; height: 1.15%; overflow: hidden; }
.pf-live-back .pf-lb-bar > span { display: block; height: 100%; }
.pf-live-back .pf-lb-val { right: 52.6%; font-family: var(--font-ui); font-weight: 700; font-size: 2.2cqw; color: #ece6f6; }

/* Home: card stats */
.pf-cs { display: grid; gap: 7px; }
.pf-cs-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 38% 30px; align-items: center; gap: 8px; }
.pf-cs-icon { font-size: 16px; text-align: center; }
.pf-cs-label { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-cs-label i { display: block; font-style: normal; font-weight: 500; letter-spacing: 0; font-size: 10.5px; color: var(--text-3); }
.pf-cs-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pf-cs-bar > span { display: block; height: 100%; border-radius: inherit; transition: width 0.6s var(--ease); }
.pf-cs-val { text-align: right; font-weight: 700; font-size: 14px; }

/* ================================================================ your pimp card (composite)
   the rank frame rendered with an empty slot + your dealt character */
.pf-comp-front { position: absolute; inset: 0; display: block; }
.pf-comp-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.pf-comp-pimp { position: absolute; left: 0; right: 0; bottom: 6.4%; display: flex; justify-content: center; pointer-events: none; }
.pf-comp-pimp[hidden] { display: none; }
.pf-comp-pimp img { height: 100%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.55)); }
.pf-avatar .pf-comp-pimp img { filter: none; }
.pf-comp-portrait { position: absolute; left: 3%; width: 56%; top: 13.6%; height: 42.9%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.pf-comp-portrait img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }

/* ================================================================ the deal: pick your pimp */
.pf-deal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; overflow-x: hidden; background: radial-gradient(80% 60% at 50% 30%, rgba(120, 40, 180, 0.35), rgba(7, 5, 13, 0.96) 70%); backdrop-filter: blur(6px); animation: pf-fade 0.35s ease; overflow-y: auto; }
.pf-deal-inner { width: min(560px, 100%); text-align: center; }
.pf-deal-step[hidden] { display: none; }
.pf-deal-hat { width: 84px; margin: 0 auto 10px; filter: drop-shadow(0 0 18px rgba(252, 206, 70, 0.5)); }
.pf-deal-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 6vw, 30px); color: var(--money); text-shadow: 0 0 18px rgba(243, 205, 90, 0.35); }
.pf-deal-sub { margin: 6px 0 18px; font-size: 14px; color: var(--text-2); }
.pf-deal-input { text-align: center; font-family: var(--font-display); font-size: 20px !important; min-height: 52px !important; }
.pf-deal-go { margin-top: 14px; min-height: 50px; font-size: 16px; }
.pf-deal-hand { display: flex; justify-content: center; gap: 12px; perspective: 1400px; margin: 6px 0 8px; }
.pf-deal-card { position: relative; width: min(27vw, 150px); aspect-ratio: 520 / 741; --shift: 0px; --lift: 0px; padding: 0; opacity: 0; transform: translateY(60px) rotate(calc((var(--k) - 1) * 6deg)) scale(0.9); -webkit-tap-highlight-color: transparent; }
.pf-deal-card.is-dealt { opacity: 1; transform: translate(var(--shift), var(--lift)) rotate(calc((var(--k) - 1) * 4deg)); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.2) calc(var(--k) * 0.15s), opacity 0.4s ease calc(var(--k) * 0.15s); }
.pf-deal-card.is-moving { transition: transform 0.3s cubic-bezier(0.45, 0, 0.25, 1) !important; }
.pf-deal-card.is-dealt:hover:not(.is-picked):not(.is-passed):not(.is-moving) { transform: translate(var(--shift), -8px) rotate(calc((var(--k) - 1) * 4deg)); }
.pf-deal-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.05); }
.pf-deal-back, .pf-deal-front { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.95); }
.pf-deal-front { transform: rotateY(180deg); }
.pf-deal-card.is-picked { z-index: 2; transform: translate(var(--shift), -14px) scale(1.12) rotate(0deg) !important; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.2); }
.pf-deal-card.is-picked .pf-deal-flip, .pf-deal-card.is-passed .pf-deal-flip { transform: rotateY(180deg); }
.pf-deal-card.is-picked .pf-deal-front { box-shadow: 0 0 0 2px var(--money), 0 0 40px -4px rgba(252, 206, 70, 0.7), 0 24px 50px -18px rgba(0, 0, 0, 0.95); }
.pf-deal-card.is-passed { opacity: 0.45 !important; filter: grayscale(0.6); pointer-events: none; }

.pf-deal-go[hidden] { display: none !important; }  /* .btn's display beats [hidden] */

/* ---------------------------------------------------------------- tour + how to play (2026-10-05) */
.pf-tb-heat { cursor: pointer; }
.pf-tb-heat:hover { filter: brightness(1.2); }
.pf-tour { position: fixed; inset: 0; z-index: 90; }
.pf-tour-ring { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(6, 4, 12, .78), 0 0 0 2px #fcd34d, 0 0 24px rgba(252, 211, 77, .6); transition: all .28s ease; pointer-events: none; }
.pf-tour-card { position: fixed; left: 12px; right: 12px; max-width: 420px; margin: 0 auto; padding: 16px; border-radius: 16px; background: #1a1326; border: 1px solid rgba(252, 211, 77, .35); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); transition: top .28s ease; }
.pf-tour-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: #fcd34d; margin: 2px 0 6px; }
.pf-tour-card p { font-size: 15px; line-height: 1.5; color: rgba(239, 235, 246, .92); margin: 0 0 14px; }
.pf-tour-count { font-size: 11px; letter-spacing: .12em; opacity: .6; }
.pf-tour-btns { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pf-howto-item { border-top: 1px solid rgba(255, 255, 255, .08); }
.pf-howto-item summary { cursor: pointer; padding: 12px 2px; font-weight: 600; list-style: none; }
.pf-howto-item summary::-webkit-details-marker { display: none; }
.pf-howto-item summary::after { content: '+'; float: right; opacity: .6; }
.pf-howto-item[open] summary::after { content: '−'; }
.pf-howto-item p { margin: 0 2px 14px; font-size: 14px; line-height: 1.55; color: rgba(239, 235, 246, .85); }

/* Top bar (2026-10-05): net worth leads, cash in hand underneath */
.pf-tb-cash .pf-tb-nw { display: block; font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--money); text-shadow: 0 0 18px rgba(243, 205, 90, 0.35); white-space: nowrap; }
.pf-tb-cashline { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.pf-tb-cash .pf-tb-cashline #money { display: inline; font-size: 13px; font-weight: 700; color: #f1e6c2; text-shadow: none; }
.pf-front-art { display: grid; place-items: center; font-size: 34px; background: radial-gradient(circle at 50% 40%, rgba(252, 211, 77, .25), rgba(109, 40, 217, .35)); }
.pf-tb-cashline #tbClean { color: #86efac; font-weight: 700; }

/* ---------------------------------------------------------------- pimp dice (v1.8) */
.pf-dice-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(6, 4, 12, .78); backdrop-filter: blur(4px); }
.pf-dice-felt { width: min(420px, 100%); padding: 22px 20px 18px; border-radius: 20px; text-align: center;
  background: radial-gradient(circle at 50% 35%, #1f6b46, #0d3b26 70%); border: 6px solid #5b3a1a; box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 2px rgba(252, 211, 77, .35); }
.pf-dice-title { font-family: var(--font-display); font-size: 18px; color: #fcd34d; }
.pf-dice-line { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.pf-dice-row { display: flex; justify-content: center; gap: 22px; margin: 22px 0 18px; }
.pf-die { width: 74px; height: 74px; padding: 9px; border-radius: 16px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  background: linear-gradient(145deg, #fff3c4, #fcd34d 45%, #b7791f); box-shadow: inset 0 -5px 0 rgba(120, 70, 10, .5), inset 0 3px 0 rgba(255, 255, 255, .6), 0 10px 18px rgba(0, 0, 0, .45); }
.pf-die i { margin: 3px; border-radius: 50%; }
.pf-die i.on { background: radial-gradient(circle at 35% 35%, #c084fc, #6d28d9 60%, #3b0764); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.pf-die.is-rolling { animation: pf-die-tumble .32s linear infinite; }
.pf-die.is-landed { animation: pf-die-land .35s ease-out forwards; }
@keyframes pf-die-tumble { 0% { transform: translateY(-6px) rotate(0); } 50% { transform: translateY(4px) rotate(180deg); } 100% { transform: translateY(-6px) rotate(360deg); } }
@keyframes pf-die-land { 0% { transform: translateY(-14px) rotate(25deg) scale(1.1); } 60% { transform: translateY(3px) rotate(-6deg); } 100% { transform: none; } }
.pf-dice-result { margin-bottom: 14px; padding: 12px; border-radius: 12px; }
.pf-dice-result b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.pf-dice-result span { display: block; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .9); }
.pf-dice-result.is-win { background: rgba(252, 211, 77, .15); border: 1px solid rgba(252, 211, 77, .5); } .pf-dice-result.is-win b { color: #fcd34d; }
.pf-dice-result.is-lucky { background: rgba(168, 85, 247, .25); border: 1px solid #fcd34d; } .pf-dice-result.is-lucky b { color: #fde68a; }
.pf-dice-result.is-lose { background: rgba(220, 38, 38, .2); border: 1px solid rgba(248, 113, 113, .6); animation: pf-siren 1s ease-in-out 2; } .pf-dice-result.is-lose b { color: #fca5a5; }
@keyframes pf-siren { 0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 25% { box-shadow: 0 0 24px rgba(239, 68, 68, .8); } 75% { box-shadow: 0 0 24px rgba(59, 130, 246, .8); } }
@media (prefers-reduced-motion: reduce) { .pf-die.is-rolling, .pf-die.is-landed, .pf-dice-result.is-lose { animation: none; } }

/* ---------------------------------------------------------------- specialty cards (v1.9) */
.pf-sc { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; min-height: 210px;
  background: linear-gradient(160deg, #2a1a40, #120c1e); border: 2px solid var(--rc); box-shadow: 0 0 18px color-mix(in srgb, var(--rc) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.pf-sc-top { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
.pf-sc-art { display: grid; place-items: center; height: 70px; font-size: 42px; border-radius: 10px; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%); }
.pf-sc-name { font-family: var(--font-display); font-size: 13px; line-height: 1.2; color: #fff; }
.pf-sc-text { font-size: 12px; line-height: 1.4; color: rgba(226, 232, 240, .85); flex: 1; }
.pf-sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-family: 'American Typewriter', 'Courier New', monospace; font-size: 11px; color: #e8d6a8; }
.pf-sc-mythic, .pf-sc-pimptastic { background: linear-gradient(160deg, #3b1d55, #1a0f2a 55%, #3a2a0c); }
.pf-sc-pimptastic::after { content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 190, .18) 45%, transparent 60%); animation: pf-foil 3.5s ease-in-out infinite; }
@keyframes pf-foil { 0%, 100% { transform: translateX(-30%); opacity: .4; } 50% { transform: translateX(30%); opacity: 1; } }
.pf-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pf-slot-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.pf-slot-empty { display: grid; place-items: center; min-height: 210px; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .15); font-size: 12px; color: var(--text-3); }
.pf-binder-h { margin: 14px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 15px; color: #fcd34d; }
.pf-binder-h span { margin-left: 6px; font-family: inherit; font-size: 11px; color: var(--text-3); }
.pf-binder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .pf-binder-grid { grid-template-columns: repeat(3, 1fr); } }
.pf-roster .pf-sc { min-height: 190px; } .pf-roster .pf-sc-text { font-size: 11px; }
.pf-reveal { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; background: rgba(6, 4, 12, .82); backdrop-filter: blur(4px); }
.pf-reveal-inner { width: min(300px, 100%); text-align: center; }
.pf-reveal-title { font-family: var(--font-display); font-size: 20px; color: #fcd34d; margin-bottom: 12px; text-shadow: 0 0 18px rgba(252, 211, 77, .6); }
.pf-reveal-flip { animation: pf-reveal 0.8s cubic-bezier(.2, .9, .3, 1.2) both; }
.pf-reveal-flip .pf-sc { min-height: 300px; } .pf-reveal-flip .pf-sc-art { height: 120px; font-size: 70px; } .pf-reveal-flip .pf-sc-name { font-size: 17px; } .pf-reveal-flip .pf-sc-text { font-size: 14px; }
@keyframes pf-reveal { 0% { transform: rotateY(90deg) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-reveal-flip, .pf-sc-pimptastic::after { animation: none; } }
.pf-disclaimer { margin: 18px 4px 6px; padding: 12px 14px; border-radius: 12px; font-size: 12px; line-height: 1.5; color: rgba(226, 232, 240, .75); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.pf-disclaimer b { color: #fcd34d; }
.pf-disclaimer a { color: #fcd34d; text-decoration: underline; }

/* city map (2026-10-05) */
.pf-map-d { border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; margin-bottom: 8px; background: rgba(109, 40, 217, .08); }
.pf-map-d summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; }
.pf-map-d summary::-webkit-details-marker { display: none; }
.pf-map-dname { font-family: var(--font-display); font-size: 14px; color: #fcd34d; }
.pf-map-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.pf-map-real { padding: 0 14px; font-size: 12px; color: var(--text-3); }
.pf-map-act { padding: 8px 14px; }
.pf-map-blocks { display: grid; gap: 6px; padding: 0 10px 12px; }
.pf-map-block { padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.pf-map-bname { font-weight: 700; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; }
.pf-map-count { font-weight: 500; font-size: 11px; color: var(--text-3); }
.pf-map-special { margin-top: 2px; font-size: 11px; color: #c4b5fd; }
.pf-map-corners { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: rgba(226, 232, 240, .85); }
.pf-map-corners i { color: var(--text-3); font-style: normal; }

/* dice duels (2026-10-05): your gold dice vs their purple; stacked on phones, side by side on desktop */
.pf-duel { width: min(560px, 100%); }
.pf-duel-sides { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 14px 0; }
.pf-duel-side .pf-dice-row { margin: 6px 0; }
.pf-duel-k { font-family: var(--font-display); font-size: 13px; color: rgba(255, 255, 255, .85); }
.pf-duel-total { font-family: var(--font-num); font-weight: 700; font-size: 18px; color: #fff; min-height: 24px; }
.pf-duel-vs { font-family: var(--font-display); font-size: 16px; color: #fcd34d; text-shadow: 0 0 12px rgba(252, 211, 77, .6); }
@media (min-width: 640px) { .pf-duel-sides { flex-direction: row; justify-content: center; gap: 22px; } }
.pf-die.pf-die-them { background: linear-gradient(145deg, #c084fc, #7c3aed 45%, #3b0764); box-shadow: inset 0 -5px 0 rgba(30, 5, 60, .55), inset 0 3px 0 rgba(255, 255, 255, .35), 0 10px 18px rgba(0, 0, 0, .45); }
.pf-die.pf-die-them i.on { background: radial-gradient(circle at 35% 35%, #fff3c4, #fcd34d 60%, #b7791f); }

/* ---------------------------------------------------------------- the close pill (2026-10-05) */
.pf-x, .modal-close { display: inline-grid; place-items: center; width: 46px; height: 32px; padding: 0; border-radius: 999px; background: rgba(20, 10, 34, .85); border: 1.5px solid #a855f7; color: #fcd34d; font-size: 15px; font-weight: 800; line-height: 1; box-shadow: 0 0 12px rgba(168, 85, 247, .35); cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; }
.pf-x:hover, .modal-close:hover { transform: scale(1.06); border-color: #c084fc; box-shadow: 0 0 18px rgba(192, 132, 252, .55); }
.pf-x:active, .modal-close:active { transform: scale(.96); }
.pf-x-pinned { position: fixed; z-index: 60; }
.modal-close, .pf-x { color: #fcd34d !important; font-size: 15px !important; }
.modal-close:hover, .pf-x:hover { color: #fde68a !important; background: rgba(40, 18, 64, .9); }

/* ---------------------------------------------------------------- luxe store cards (2026-10-05) */
#modalContainer .game-panel .rounded.border,
#modalContainer .game-panel .border.rounded {
    border-radius: 16px !important;
    border: 1px solid rgba(252, 211, 77, .2) !important;
    background: linear-gradient(160deg, rgba(91, 33, 182, .2), rgba(22, 11, 38, .72) 60%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(168, 85, 247, .06), 0 10px 28px rgba(0, 0, 0, .38);
}
#modalContainer .game-panel .rounded.border .rounded.border {   /* rows inside a card: lighter glass */
    border-radius: 12px !important;
    border-color: rgba(255, 255, 255, .08) !important;
    background: rgba(255, 255, 255, .035) !important;
    box-shadow: none;
}
/* the best-deal rows keep their color, with a gold glow */
#modalContainer .game-panel [class*="bg-green-900"], #modalContainer .game-panel [class*="bg-purple-900"] {
    border-color: rgba(252, 211, 77, .4) !important;
    box-shadow: 0 0 18px rgba(252, 211, 77, .12), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
#modalContainer .game-panel .rounded.border > h4, #modalContainer .game-panel .rounded.border > .font-bold:first-child {
    font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; color: #fcd34d;
}
#modalContainer .game-panel input[type="number"], #modalContainer .game-panel .w-20.text-center {
    border-radius: 10px !important; border: 1px solid rgba(252, 211, 77, .25) !important; background: rgba(10, 6, 20, .8) !important; color: #fff !important;
}

/* ---------------------------------------------------------------- compact scout sheet (2026-10-05) */
.pf-scout-here { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(252, 211, 77, .25); background: linear-gradient(160deg, rgba(91, 33, 182, .22), rgba(22, 11, 38, .7)); margin-bottom: 14px; }
.pf-scout-here-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pf-scout-here-name { font-family: var(--font-display); font-size: 18px; color: #fcd34d; margin-top: 2px; }
.pf-scout-here-perk { font-size: 13px; color: rgba(226, 232, 240, .85); margin-top: 2px; }
.pf-scout-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.pf-scout-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 8px; }
.pf-scout-chip { padding: 9px 0; border-radius: 10px; border: 1px solid rgba(168, 85, 247, .35); background: rgba(255, 255, 255, .03); color: #fff; font-weight: 700; font-size: 14px; }
.pf-scout-chip.is-on { border-color: #fcd34d; background: rgba(252, 211, 77, .14); color: #fcd34d; }
.pf-scout-input { width: 100%; padding: 9px; border-radius: 10px; text-align: center; color: #fff; background: rgba(10, 6, 20, .8); border: 1px solid rgba(252, 211, 77, .25); font-size: 16px; }
.pf-scout-travel { display: flex; gap: 8px; }
.pf-scout-select { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 10px; color: #fff; background: rgba(10, 6, 20, .8); border: 1px solid rgba(168, 85, 247, .35); font-size: 14px; }

/* walkout.js: your pimp's sprite sheet, played once and held on the last frame */
.pf-walkout { display: block; background-repeat: no-repeat; background-position: 0 0; image-rendering: auto; }
.pf-walkout > img { visibility: hidden; }
.pf-walkout-run { animation: pf-wo var(--wo-time) steps(var(--wo-steps)) forwards; }
.pf-walkout-loop { animation: pf-wo var(--wo-time) steps(var(--wo-steps)) infinite; }
@keyframes pf-wo { from { background-position: 0 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .pf-walkout-run, .pf-walkout-loop { animation: none; background-position: 100% 0; } }
.pf-wo-stage { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 70%, rgba(124, 58, 237, .45), rgba(8, 4, 16, .96) 65%); animation: pf-wo-in .35s ease-out; cursor: pointer; }
.pf-wo-stage.pf-wo-out { opacity: 0; transition: opacity .45s ease; }
.pf-wo-sprite { height: min(58vh, 520px); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)); }
.pf-wo-name { font-family: 'Bungee', 'Outfit', sans-serif; font-size: clamp(22px, 6vw, 34px); color: #fcd34d; letter-spacing: .04em; text-shadow: 0 2px 0 #7c3aed, 0 0 18px rgba(252, 211, 77, .4); opacity: 0; animation: pf-wo-in .5s ease-out 4.2s forwards; }
@keyframes pf-wo-in { from { opacity: 0; } to { opacity: 1; } }

/* Chop Shop ride sprites */
.pf-ride-art { display: flex; align-items: flex-end; justify-content: center; height: 92px; margin: -4px 0 8px; border-radius: 10px; background: radial-gradient(ellipse at 50% 92%, rgba(252, 211, 77, .18), transparent 62%), linear-gradient(180deg, rgba(76, 29, 149, .25), rgba(10, 6, 20, .4)); }
.pf-ride-art img { max-height: 84px; max-width: 88%; image-rendering: pixelated; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)); }

/* entourage.js: the girls you lured, walking with you */
.pf-ent { margin: 10px 0 4px; padding: 10px 12px 8px; border-radius: 16px; background: radial-gradient(ellipse at 50% 100%, rgba(236, 72, 153, .16), transparent 70%), rgba(18, 10, 32, .7); border: 1px solid rgba(168, 85, 247, .25); }
.pf-ent-label { font-family: 'Bungee', 'Outfit', sans-serif; font-size: 11px; letter-spacing: .06em; color: #f9a8d4; text-transform: uppercase; }
.pf-ent-row { display: flex; align-items: flex-end; gap: 2px; height: 112px; overflow: hidden; }
.pf-ent-row img { height: 100%; width: auto; image-rendering: pixelated; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .55)); }
.pf-ent-me { height: 112px; margin-right: 6px; }
.pf-ent-girl { height: 96px; animation: pf-ent-bob 1.1s ease-in-out infinite; animation-delay: var(--d); }
.pf-ent-girl.is-new { animation: pf-ent-in 1.4s cubic-bezier(.2, .8, .3, 1) both, pf-ent-bob 1.1s ease-in-out 1.4s infinite; animation-delay: calc(var(--i) * .15s), calc(1.4s + var(--d)); }
.pf-ent-mini-row { display: flex; align-items: flex-end; gap: 1px; margin-top: 10px; height: 54px; }
.pf-ent-mini-label { align-self: center; margin-right: 8px; font-size: 11px; color: #f9a8d4; text-transform: uppercase; letter-spacing: .06em; }
.pf-ent-mini { height: 52px; animation: pf-ent-bob 1.1s ease-in-out infinite; animation-delay: var(--d); }
.pf-ent-mini img { height: 100%; width: auto; image-rendering: pixelated; }
.pf-ent-mini.is-new { animation: pf-ent-in 1.4s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes pf-ent-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes pf-ent-in { from { transform: translateX(240px); opacity: 0; } 60% { opacity: 1; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-ent-girl, .pf-ent-mini { animation: none !important; } }

/* Splash: two of PiMpToShi's girls walk to the car from each side (2026-10-06). Real walk
   cycles (24-frame sheets); when they arrive they turn to face you. Hidden in the HTML so
   a stale stylesheet can never show them unplaced. */
.pf-sp-hoe, .pf-sp-hoe[hidden] { display: block; position: absolute; z-index: 2; bottom: 22px; height: min(34vw, 165px); aspect-ratio: var(--fw) / 240; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.6)); }
.pf-sp-hoe i { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 2400% 100%; image-rendering: pixelated; animation: pf-sp-hoe-walk 1.5s steps(23) infinite; }
.pf-sp-hoe.is-right i { transform: scaleX(-1); }
.pf-sp-hoe.is-standing i { animation: pf-sp-turn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.4); background-size: contain; background-position: 50% 100%; transform: none; transform-origin: 50% 100%; }
@keyframes pf-sp-hoe-walk { from { background-position: 0 0; } to { background-position: 100% 0; } }
.pf-sp-hoe.is-left { left: 0; transform: translateX(-140%); }
.pf-sp-hoe.is-right { right: 0; transform: translateX(140%); }
.pf-sp-hoe.is-back, .pf-sp-hoe.is-back[hidden] { z-index: 1; bottom: 46px; height: min(29vw, 140px); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.6)) brightness(0.85); }
.pf-sp-hoe.is-left.is-walking { transform: translateX(max(0px, calc(50vw - min(42vw, 235px) - 62% - var(--gap) * 100%))); transition: transform 2.6s linear var(--late); }
.pf-sp-hoe.is-right.is-walking { transform: translateX(min(0px, calc(-50vw + min(42vw, 235px) + 4% + var(--gap) * 100%))); transition: transform 2.4s linear var(--late); }
@media (min-width: 1024px) { .pf-sp-hoe, .pf-sp-hoe[hidden] { height: 190px; } .pf-sp-hoe.is-back, .pf-sp-hoe.is-back[hidden] { height: 160px; } }
@media (prefers-reduced-motion: reduce) { .pf-sp-hoe, .pf-sp-hoe[hidden] { display: none; } }
.pf-where { color: #67e8f9; font-weight: 600; }

/* Business sheet: the district's businesses for sale */
.pf-biz-mine { margin-top: 12px; font-size: 13px; color: #a7f3d0; }
.pf-biz-head { margin: 14px 0 8px; font-family: 'Bungee', 'Outfit', sans-serif; font-size: 13px; letter-spacing: .04em; color: #fcd34d; text-transform: uppercase; }
.pf-biz-list { display: grid; gap: 8px; }
.pf-biz { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(76, 29, 149, .18); border: 1px solid rgba(168, 85, 247, .22); }
.pf-biz.is-owned { border-color: rgba(52, 211, 153, .45); background: rgba(6, 78, 59, .2); }
.pf-biz-art { width: 76px; height: 57px; border-radius: 8px; background-size: cover; background-position: center; image-rendering: pixelated; }
.pf-biz-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-biz-body b { font-size: 14px; }
.pf-biz-body small { font-size: 12px; opacity: .75; line-height: 1.3; }

/* Pull rarity on the deal (2026-10-06) */
.pf-pull-badge { position: absolute; top: 6px; left: 6px; z-index: 3; padding: 2px 7px; border-radius: 6px; font-family: 'Bungee', 'Outfit', sans-serif; font-size: 10px; letter-spacing: .05em; color: #0b0a10; background: var(--rc); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.pf-deal-card.is-picked .pf-deal-front { box-shadow: 0 0 0 2px var(--rc), 0 0 40px -4px var(--rc), 0 24px 50px -18px rgba(0, 0, 0, 0.95); }
.pf-deal-card[data-r="og"] .pf-deal-front::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 10px; border: 3px solid #fcd34d; background: linear-gradient(115deg, transparent 30%, rgba(255, 236, 160, .45) 50%, transparent 70%) -200% 0 / 250% 100% no-repeat; animation: pf-og-shine 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes pf-og-shine { to { background-position: 200% 0; } }
.pf-deal.is-big-pull .pf-deal-title { color: #fcd34d; text-shadow: 0 0 18px rgba(252, 211, 77, .7); animation: pf-big-pull .6s ease-out; }
@keyframes pf-big-pull { from { transform: scale(1.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pf-ledger { display: grid; gap: 6px; }
.pf-ledger-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(6, 78, 59, .18); border: 1px solid rgba(52, 211, 153, .25); font-size: 13px; text-align: left; }
.pf-ledger-row small { display: block; opacity: .7; font-size: 11.5px; }
.pf-ledger-row .num { text-align: right; white-space: nowrap; }
.pf-ledger-total { font-size: 12.5px; color: #a7f3d0; padding: 4px 2px; }
.pf-ledger-log { margin-top: 10px; font-size: 12.5px; }
.pf-ledger-log summary { cursor: pointer; color: #fcd34d; margin-bottom: 6px; }
.pf-ledger-log div { padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.pf-ledger-log small { opacity: .6; margin-right: 6px; }
.pf-ent-mini { position: relative; }
.pf-ent-count { position: absolute; right: -6px; bottom: -2px; padding: 0 5px; border-radius: 8px; font-size: 10.5px; line-height: 16px; color: #0b0a10; background: #f9a8d4; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.pf-ent-mini-row { gap: 12px; }
/* stable girls: a 6-frame move, then still for a while; each on her own clock */
.pf-ent-mini.pf-ent-idle { animation: none; height: 52px; aspect-ratio: 3 / 8; }
.pf-ent-idle i { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 600% 100%; image-rendering: pixelated; animation: pf-ent-idle var(--t) infinite; animation-delay: var(--d); }
@keyframes pf-ent-idle { 0%, 82% { background-position: 0 0; animation-timing-function: steps(5); } 100% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .pf-ent-idle i { animation: none; } }
/* top bar Ledger pill (2026-10-06) */
.pf-tb-ledger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 2px solid #a855f7; color: #e9d5ff; font-weight: 700; font-size: 14px; background: rgba(88, 28, 135, .25); box-shadow: 0 0 14px rgba(168, 85, 247, .35); cursor: pointer; }
.pf-tb-ledger:hover { background: rgba(126, 34, 206, .35); }
@media (max-width: 480px) { .pf-tb-ledger-t { display: none; } .pf-tb-ledger { padding: 8px 10px; } }
.pf-ledger-net { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; display: flex; justify-content: space-between; font-weight: 700; }
.pf-ledger-net.is-up { background: rgba(6, 78, 59, .3); color: #6ee7b7; }
.pf-ledger-net.is-down { background: rgba(127, 29, 29, .3); color: #fca5a5; }
.pf-ent-girl.pf-ent-idle { position: relative; animation: none; height: 96px; aspect-ratio: 3 / 8; margin-right: 8px; }
/* Home: girls (pink) and crew (yellow) cards, side by side on desktop, stacked on phones */
.pf-stables { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pf-stable-card { flex: 1 1 190px; flex-wrap: wrap; row-gap: 4px; margin-top: 0; height: auto; min-height: 76px; padding: 10px 14px; border-radius: 14px; align-items: flex-end; }
.pf-stable-card[hidden] { display: none; }
.pf-stable-card.is-girls { border: 1.5px solid rgba(244, 114, 182, .55); background: rgba(131, 24, 67, .14); }
.pf-stable-card.is-thugs { border: 1.5px solid rgba(252, 211, 77, .6); background: rgba(120, 83, 9, .14); justify-content: flex-end; }
.pf-stable-card.is-thugs .pf-ent-mini-label { color: #fcd34d; margin-right: auto; }
.pf-stable-card.is-thugs .pf-ent-count { background: #fcd34d; }
@media (min-width: 1024px) { .pf-stables { flex-wrap: nowrap; } .pf-stable-card .pf-ent-mini-label { flex-basis: 100%; margin-bottom: 2px; } }
/* bigger stable cards: wordmark above, sprites fill the box (2026-10-06) */
.pf-stable-col { flex: 1 1 190px; min-width: 0; }
.pf-stable-col:has(.pf-stable-card[hidden]) { display: none; }
.pf-stable-mark { font-family: 'Bungee', 'Outfit', sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px 4px; }
.pf-stable-col.is-girls .pf-stable-mark { color: #f9a8d4; }
.pf-stable-col.is-thugs .pf-stable-mark { color: #fcd34d; }
.pf-stable-card { flex: none; width: 100%; justify-content: space-around !important; padding: 10px 8px 14px; min-height: 0; }
.pf-stable-card .pf-ent-mini.pf-ent-idle { height: clamp(90px, 9vw, 130px); flex: 0 1 auto; }
.pf-stable-card .pf-ent-count { font-size: 12px; line-height: 18px; padding: 0 7px; right: 50%; transform: translateX(50%); bottom: -10px; }
.pf-stable-card { flex-wrap: nowrap !important; }
.pf-stable-card .pf-ent-mini.pf-ent-idle { height: auto; width: min(22%, 52px); aspect-ratio: 3 / 8; }
@media (max-width: 1023px) { .pf-stable-card .pf-ent-mini.pf-ent-idle { width: min(22%, 60px); } }

/* role x rank labels on the Home stable cards (2026-10-07) */
.pf-stable-card .pf-ent-mini { cursor: pointer; }
.pf-ent-rank { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); white-space: nowrap; font-size: 9px; line-height: 1; color: rgba(255,255,255,0.75); }
.pf-stable-card { padding-bottom: 18px; }
.pf-stable-hint { font-size: 10px; opacity: 0.6; letter-spacing: 0; text-transform: none; font-family: inherit; }
/* phones: the crew back row bunched at the edges (2026-10-07); girls + PiMpToShi only */
@media (max-width: 640px) { .pf-sp-hoe.is-back, .pf-sp-hoe.is-back[hidden] { display: none; } }
/* 2026-10-07: every stable sprite the same HEIGHT (width follows the frame), so wide frames
   (stripper) are not shrunk and narrow ones (lieutenant) do not tower */
.pf-stable-card .pf-ent-mini.pf-ent-idle { width: auto; height: 104px; flex: 0 1 auto; }
@media (max-width: 1023px) { .pf-stable-card .pf-ent-mini.pf-ent-idle { width: auto; height: 88px; } }
@media (max-width: 420px) { .pf-stable-card .pf-ent-mini.pf-ent-idle { height: 76px; } }
.pf-stable-card .pf-ent-mini[data-zero="1"] { opacity: 0.35; filter: grayscale(0.7); }
/* six girls + six jobs do not fit side by side: stack the two cards on desktop too */
@media (min-width: 1024px) { .pf-stables { flex-wrap: wrap; } .pf-stable-col { flex: 1 1 100%; } }
/* 1.9.9 rep ladder */
.pf-repline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; }
.pf-rep { font-weight: 700; color: #fcd34d; }
.pf-rep-bar { width: 70px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; display: inline-block; }
.pf-rep-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.pf-rep-next { opacity: .65; }
.pf-legacy { color: #c4b5fd; font-weight: 600; }
/* jail status (1.9.9.4) */
.pf-tb-heat[data-level="jail"] { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.7); color: #fecaca; }
.pf-jail { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); z-index: 30; max-width: min(560px, calc(100vw - 24px)); width: max-content; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid rgba(239,68,68,.75); background: rgba(40,8,12,.94); color: #fecaca; font-size: 13px; text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer; }
.pf-jail[hidden] { display: none; }
.pf-jail span { opacity: .8; font-size: 12px; }
.pf-jail u { color: #fff; font-weight: 700; }
@media (min-width: 1024px) { .pf-jail { bottom: 24px; } }
/* locked up: crime buttons gray with a gray stroke (1.9.9.5) */
body.is-jailed [data-crime], body.is-jailed .pf-sprite, body.is-jailed [onclick*="openHoodAttackMenu"], body.is-jailed [onclick*="startRoadTrip"] { filter: grayscale(1); opacity: .5; outline: 2px solid #6b7280; outline-offset: -2px; cursor: not-allowed; }
/* jail cell scene (1.9.9.5) */
.pf-jailcell { position: relative; aspect-ratio: 432 / 400; max-height: 260px; margin: 0 auto 12px; border-radius: 12px; overflow: hidden; background: url("../images/streets/jail-cell.webp") center 70% / cover; image-rendering: pixelated; border: 1.5px solid rgba(239,68,68,.5); }
.pf-jailcell-pimp { position: absolute; left: 50%; bottom: 8%; height: 62%; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 6px 4px rgba(0,0,0,.6)); }
.pf-jailcell-bars { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9%, #2b2f36 9% 10.6%, #6b7280 10.6% 11.4%, #1f2228 11.4% 12.5%); }
.pf-jailcell-bars::before, .pf-jailcell-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 4%; background: linear-gradient(#6b7280, #2b2f36); }
.pf-jailcell-bars::before { top: 12%; } .pf-jailcell-bars::after { bottom: 14%; }
.pf-jailcell-tag { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.7); color: #fecaca; font-size: 12px; padding: 2px 8px; border-radius: 6px; }
/* 4:20 payday toast */
.pf-payday { position: fixed; left: 50%; top: 10px; transform: translate(-50%, -140%); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px; border: 2px solid #fcd34d; background: linear-gradient(135deg, #3b2a05, #1a1405); color: #fef3c7; box-shadow: 0 10px 30px rgba(252,211,77,.35); transition: transform .5s cubic-bezier(.2,.9,.25,1.2); text-align: left; cursor: pointer; max-width: calc(100vw - 24px); }
.pf-payday.is-in { transform: translate(-50%, 0); }
/* hidden toasts sit fully off screen (1.9.9.15: the streak and hustle toasts sit lower, so -140% of
   their own height left their bottom edge showing) and can't be seen or tapped */
.pf-payday:not(.is-in) { transform: translate(-50%, calc(-100% - 220px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .5s cubic-bezier(.2,.9,.25,1.2), opacity .3s, visibility 0s .5s; }
.pf-payday.is-in { opacity: 1; visibility: visible; transition: transform .5s cubic-bezier(.2,.9,.25,1.2), opacity .2s; }
.pf-payday-ico { font-size: 34px; }
.pf-payday b { display: block; font-family: "Bungee", sans-serif; letter-spacing: .04em; color: #fcd34d; }
.pf-streak { top: 92px; border-color: #fb923c; background: linear-gradient(135deg, #3b1605, #1a0a05); box-shadow: 0 10px 30px rgba(251,146,60,.35); }
.pf-streak b { color: #fdba74; }
.pf-payday-amt { display: block; font-size: 22px; font-weight: 800; color: #86efac; }
.pf-payday small { opacity: .7; font-size: 11px; }
.pf-payday { white-space: nowrap; min-width: 260px; } .pf-payday b { font-size: 15px; } .pf-payday small { display: block; }

/* 1.9.9.13 Daily Hustle */
.pf-hustle { display: grid; gap: 10px; }
.pf-hustle-row { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.pf-hustle-row.is-done { border-color: rgba(52,211,153,.45); background: rgba(52,211,153,.07); }
.pf-hustle-top { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.pf-hustle-tier { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; flex: none; }
.pf-hustle-tier.t-easy { background: rgba(52,211,153,.18); color: #6ee7b7; }
.pf-hustle-tier.t-medium { background: rgba(252,211,77,.18); color: #fcd34d; }
.pf-hustle-tier.t-stretch { background: rgba(244,114,182,.2); color: #f9a8d4; }
.pf-hustle-text { font-size: 14px; font-weight: 600; }
.pf-hustle-sub { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.pf-hustle .meter span { background: linear-gradient(90deg, #f472b6, #fcd34d); }
.pf-hustle-row.is-done .meter span { background: #34d399; }
.pf-payday.pf-hustle { top: 174px; border-color: #34d399; background: linear-gradient(135deg, #053b2a, #05170f); box-shadow: 0 10px 30px rgba(52,211,153,.3); }
.pf-payday.pf-hustle b { color: #6ee7b7; }

/* 1.9.9.13 feel pass (juice.js); all off under reduced motion */
@keyframes pfShakeWin { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3px,1px); } 40% { transform: translate(3px,-1px); } 60% { transform: translate(-2px,1px); } 80% { transform: translate(2px,0); } }
@keyframes pfShakeBig { 0%,100% { transform: translate(0,0) rotate(0); } 15% { transform: translate(-6px,2px) rotate(-.4deg); } 35% { transform: translate(6px,-2px) rotate(.4deg); } 55% { transform: translate(-4px,1px); } 75% { transform: translate(3px,-1px); } }
@keyframes pfThud { 0% { transform: translateY(0); filter: none; } 30% { transform: translateY(4px); filter: saturate(.4) brightness(.85); } 100% { transform: translateY(0); filter: none; } }
.pf-shake-win { animation: pfShakeWin .35s ease-out; }
.pf-shake-big { animation: pfShakeBig .5s ease-out; }
.pf-thud { animation: pfThud .45s ease-out; }
.pf-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.pf-confetti span { position: absolute; top: -40px; font-size: 22px; animation-name: pfFall; animation-timing-function: cubic-bezier(.3,.6,.5,1); animation-fill-mode: forwards; }
@keyframes pfFall { to { transform: translateY(110vh) rotate(var(--spin, 360deg)); opacity: .9; } }
.pf-loot { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 75; padding: 12px 16px; border-radius: 16px; background: rgba(20,12,28,.96); border: 2px solid #fcd34d; color: #fef3c7; box-shadow: 0 12px 30px rgba(0,0,0,.5); max-width: calc(100vw - 32px); transition: opacity .5s, transform .5s; text-align: center; }
.pf-loot.is-out { opacity: 0; transform: translate(-50%, 12px); }
.pf-loot b { display: block; font-family: "Bungee", sans-serif; color: #fcd34d; margin-bottom: 6px; }
.pf-loot-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pf-loot-items span { padding: 4px 10px; border-radius: 10px; background: rgba(252,211,77,.12); font-weight: 600; opacity: 0; animation: pfFlip .35s ease-out forwards; }
@keyframes pfFlip { from { opacity: 0; transform: rotateX(90deg) scale(.8); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pf-shake-win, .pf-shake-big, .pf-thud { animation: none; }
  .pf-confetti { display: none; }
  .pf-loot-items span { animation: none; opacity: 1; }
}

/* 1.9.9.14 Nemesis + Turf War */
.pf-nemesis { padding: 12px; border-radius: 12px; border: 1px solid rgba(248,113,113,.4); background: rgba(127,29,29,.18); }
.pf-nem-top { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.pf-nem-ico { font-size: 28px; }
.pf-nem-top b { display: block; font-size: 16px; }
.pf-nem-top small { color: #fca5a5; }
.pf-war { display: grid; gap: 2px; padding: 12px; margin-bottom: 10px; border-radius: 12px; border: 2px solid #f59e0b; background: linear-gradient(135deg, rgba(120,53,15,.5), rgba(30,10,5,.6)); }
.pf-war b { font-family: "Bungee", sans-serif; color: #fcd34d; letter-spacing: .03em; }
.pf-war span { font-size: 18px; font-weight: 700; }
.pf-war small { color: #fde68a; opacity: .85; }

/* 1.9.9.16 PimpToshi advisor */
.pf-advisor { border-color: rgba(252,211,77,.35); }
.pf-advisor[data-urgent="1"] { border-color: #f87171; box-shadow: 0 0 0 1px rgba(248,113,113,.4), 0 8px 24px rgba(248,113,113,.15); }
.pf-adv-face { display: inline-block; width: 26px; height: 34px; object-fit: cover; object-position: top; vertical-align: -8px; margin-right: 6px; border-radius: 6px; }
.pf-adv-quote { font-style: italic; color: #fcd34d; font-size: 14px; margin: -2px 0 10px; }
.pf-adv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.pf-adv-row:first-of-type { border-top: 0; }
.pf-adv-row.is-top .pf-adv-txt > div { font-weight: 600; }
.pf-adv-ico { font-size: 22px; line-height: 1.2; }
.pf-adv-txt { font-size: 14px; min-width: 0; }
.pf-adv-txt details { margin-top: 2px; }
.pf-adv-txt summary { font-size: 11px; color: #9ca3af; cursor: pointer; list-style: none; }
.pf-adv-txt summary::-webkit-details-marker { display: none; }
.pf-adv-txt small { display: block; color: #9ca3af; font-size: 12px; margin-top: 2px; }
.pf-adv-row .btn { white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }

/* 1.9.9.21 save light */
.pf-tb-save { display: inline-block; margin-top: 3px; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #9ca3af; white-space: nowrap; cursor: pointer; }
.pf-tb-save[data-state="ok"] { color: #6ee7b7; border-color: rgba(52,211,153,.35); }
.pf-tb-save[data-state="bad"] { color: #fecaca; border-color: #f87171; background: rgba(127,29,29,.5); animation: pulse 1.6s infinite; }

/* 1.9.9.23 heat at 60%+: a hard flash so you notice (reduced motion: solid red, no flash) */
@keyframes pfHeatFlash { 0%, 100% { background: var(--danger-wash); box-shadow: 0 0 0 0 rgba(255,97,112,0); } 50% { background: rgba(239,68,68,.55); box-shadow: 0 0 14px 3px rgba(255,97,112,.55); color: #fff; } }
.pf-tb-heat[data-level="high"] { animation: pfHeatFlash 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pf-tb-heat[data-level="high"] { animation: none; background: rgba(239,68,68,.45); color: #fff; } }

/* 1.9.9.35 heat where you fight */
.pf-fight-heat { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 13px; }
.pf-fight-heat.is-warn { border-color: rgba(255,181,77,.45); }
.pf-fight-heat.is-danger { border-color: #f87171; background: rgba(127,29,29,.3); }
.pf-fight-heat-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; min-width: 40px; }
.pf-fight-heat-bar i { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #fbbf24 50%, #f87171); }
@media (max-width: 420px) { .pf-fight-heat { grid-template-columns: 1fr auto; } .pf-fight-heat-bar { grid-column: 1 / -1; grid-row: 2; } }

/* 1.9.9.36 turns flash like cash */
.pf-tb-turns { position: relative; }
.pf-turns-delta { left: 0; right: 0; text-align: center; white-space: nowrap; }   /* the float animation owns transform */