/* ===========================================================================
   SmartScorer · Auction Projector (static v2) — light broadcast layout.
   Header · [Single Player Card (Photo + Details) | Overlapping Bid Card] ·
   Bottom Stat Bar.
   =========================================================================== */
:root {
    --pj-navy: #0e2a5e;
    --pj-navy-soft: #35508a;
    --pj-blue: #2563eb;
    --pj-blue-ink: #0a63e6;
    --pj-sky: #eaf3ff;
    --pj-sky-brd: #cfe3ff;
    --pj-amber: #f59e0b;
    --pj-amber-dark: #b45309;
    --pj-green: #10b981;
    --pj-red: #ef4444;
    --pj-card-bg: rgba(255, 255, 255, 0.82);
    --pj-card-border: rgba(255, 255, 255, 0.95);
    --pj-card-shadow: 0 16px 45px -10px rgba(15, 47, 102, 0.16), 0 4px 16px rgba(15, 47, 102, 0.04);
    --pj-muted: #64748b;
    --pj-font: 'Poppins', system-ui, -apple-system, sans-serif;
    --pj-ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: var(--pj-font);
    background: #cfe3f5;
    color: var(--pj-navy);
    -webkit-font-smoothing: antialiased;
}

.pj {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(8px, 1vw, 16px);
    padding: clamp(10px, 1.2vw, 20px) clamp(16px, 1.8vw, 32px);
    overflow: hidden;
}

.pj__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 60% at 50% -15%, rgba(255, 255, 255, 0.85), transparent 75%),
        radial-gradient(circle at 15% 25%, rgba(186, 220, 255, 0.45), transparent 45%),
        radial-gradient(circle at 85% 25%, rgba(199, 228, 255, 0.45), transparent 45%),
        linear-gradient(180deg, #d8e9f8 0%, #c4dcf5 50%, #b4d3f0 100%);
}

.pj > *:not(.pj__bg) {
    position: relative;
    z-index: 1;
}

/* ===========================================================================
   HEADER (Broadcast Style — Seamless Transparent on Stadium Background)
   =========================================================================== */
.pj__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: clamp(2px, 0.3vw, 5px) clamp(4px, 0.6vw, 10px);
}

.pj__brandline {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.1vw, 20px);
    min-width: 0;
}

.pj__logo-ring {
    position: relative;
    width: clamp(48px, 4.4vw, 76px);
    height: clamp(48px, 4.4vw, 76px);
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2.5px solid #d4af37;
    box-shadow: 0 6px 18px rgba(15, 47, 102, 0.15);
    overflow: hidden;
}

.pj__logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.pj__logo[hidden] { display: none; }
.pj__logo-fb {
    font-size: clamp(22px, 2.2vw, 34px);
}

.pj__titles { min-width: 0; }
.pj__auction-name {
    font-size: clamp(20px, 2.3vw, 40px);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.05;
    color: var(--pj-navy);
    text-transform: uppercase;
    /* render the full tournament name — wrap to a second line instead of cutting it
       off with an ellipsis; JS also shrinks the font a touch so a very long name
       still fits cleanly on at most two lines. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.pj__auction-sub {
    display: block;
    margin-top: 3px;
    font-size: clamp(10px, 1vw, 17px);
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pj-blue);
}

.pj__divider {
    width: 2px;
    height: clamp(34px, 3vw, 54px);
    background: linear-gradient(rgba(14, 42, 94, .25), rgba(14, 42, 94, .05));
    flex: 0 0 auto;
}

.pj__tagline {
    font-family: 'Caveat', cursive;
    font-size: clamp(16px, 1.7vw, 30px);
    font-weight: 700;
    line-height: 1.05;
    color: var(--pj-navy-soft);
}

.pj__topright {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 20px);
    flex: 0 0 auto;
}

/* Single compact live badge */
.pj__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 700;
    letter-spacing: .03em;
    color: #10b981;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    padding: clamp(4px, 0.38vw, 6px) clamp(11px, 0.9vw, 16px);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pj__live-badge[data-on="false"] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}
.pj__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
    animation: pj-pulse 1.8s ease-out infinite;
}
.pj__live-badge[data-on="false"] .pj__live-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}

.pj__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}
.pj__brand-nm {
    font-size: clamp(16px, 1.6vw, 28px);
    font-weight: 800;
    color: var(--pj-navy);
}
.pj__brand-nm b { color: var(--pj-blue); }
/* old horizontal SmartScorer logo in the projector header (right) */
.pj__brand-img { height: clamp(22px, 2.1vw, 42px); width: auto; max-width: clamp(130px, 15vw, 270px); object-fit: contain; display: block; }
.pj__brand-sub {
    margin-top: 3px;
    font-size: clamp(7px, .62vw, 11px);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pj-muted);
}

/* ===========================================================================
   STATE SWITCHING
   =========================================================================== */
.pj-welcome, .pj-main, .pj-table { display: none; }
.pj[data-state="welcome"] .pj-welcome { display: flex; }
.pj[data-state="main"] .pj-main { display: flex; }
.pj[data-state="table"] .pj-table { display: flex; }

/* ===========================================================================
   LIVE PLAYER SECTION: 3 BALANCED CARDS (LEFT INFO, CENTER PHOTO, RIGHT BID)
   =========================================================================== */
.pj-main {
    /* display is controlled by the state rules above (.pj[data-state="main"]),
       so DON'T force display:flex here or the table/welcome states leak the
       player cards behind them. flex-direction applies once the state shows it. */
    flex: 1 1 auto;
    flex-direction: column;
    gap: clamp(10px, 1.1vw, 18px);
    position: relative;
    width: 93%;
    margin: 0 auto;
    min-height: 0;
    height: 100%;
    animation: pj-fade .4s var(--pj-ease);
}
.pj-main__row {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.5vw, 24px);
    min-height: 0;
    width: 100%;
}

/* Shared Broadcast Card Styling */
.pj-card {
    background: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.98);
    border-radius: clamp(20px, 1.8vw, 28px);
    box-shadow: 0 16px 42px -12px rgba(15, 47, 102, 0.12), 0 3px 12px rgba(15, 47, 102, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

/* 1. Left Card: Player Details (Compact & Aligned with Center Hero) */
.pj-card--detail {
    /* wider left column so long player names wrap to 2 lines, not 3 */
    flex: 1.5 1 44%;
    min-width: 0;
    /* fill the row height so the content can distribute (tall screens) or compress
       (short / non-fullscreen screens) — never clip the Base Price row */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: min(clamp(8px, 1vw, 15px), 1.5vh);
    padding: min(clamp(12px, 1.6vw, 26px), 2.4vh) clamp(16px, 1.6vw, 24px);
    max-height: 100%;
    min-height: 0;
}

/* 2. Center Card: Hero Player Photo (True Visual Center - Unchanged & Stretched Full Height) */
.pj-card--photo {
    flex: 0 0 clamp(375px, 33vw, 545px);
    min-width: 0;
    /* center it so the JS height-sync (match to the left detail card) is not
       overridden by stretch; 94% is just a close fallback before JS runs */
    align-self: center;
    height: 94%;
    display: flex;
    align-items: stretch;
    padding: 0;
    box-shadow: 0 18px 46px -8px rgba(15, 47, 102, 0.18), 0 4px 16px rgba(15, 47, 102, 0.05);
}

.pj-card--photo .pj-photo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eef4fb;
    border: none;
    border-radius: inherit;
    box-shadow: none;
}
.pj-photo__img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: #eef4fb;
    display: block;
    /* smooth cross-fade on player change */
    opacity: 0;
    transition: opacity .4s ease;
}
.pj-photo__img.is-on { opacity: 1; }
.pj-photo__ph {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: grid;
    place-items: center;
    color: #94a3b8;
    background: #eef4fb;
}
.pj-photo__img[hidden] { display: none; }
.pj-photo__ph svg {
    width: clamp(64px, 8vw, 130px);
    height: clamp(64px, 8vw, 130px);
}
.pj-photo__loading {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11px, .9vw, 14px);
    font-weight: 600;
    color: var(--pj-navy);
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--pj-sky-brd);
    border-radius: 999px;
    padding: 5px 13px;
}
.pj-photo__loading[hidden] { display: none; }
/* dark theme: keep the loading pill readable (var(--pj-navy) turns light in dark) */
[data-theme="dark"] .pj-photo__loading { background: rgba(14, 28, 52, .95); color: #e8f0fc; border-color: rgba(255, 255, 255, .16); }

/* Token badge on photo removed as requested */
.pj-photo__token { display: none !important; }

.pj-photo__stamp {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.pj-photo__stamp[hidden] { display: none; }
/* SOLD / UNSOLD — diagonal corner ribbon across the top-left of the player photo.
   The overflow:hidden on .pj-photo clips the ribbon ends into a clean corner band. */
.pj-photo__stamp span {
    position: absolute;
    top: 9%;
    left: -29%;
    width: 107%;
    text-align: center;
    padding: clamp(7px, .9vw, 15px) 0;
    font-size: clamp(18px, 2.3vw, 40px);
    font-weight: 900;
    letter-spacing: .14em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
    transform: rotate(-45deg);
    transform-origin: center;
    /* GPU-only pop (transform + opacity only) — runs locally on the projector, so a
       slow network or heavy site traffic can never make it lag. Plays once. */
    animation: pj-ribbon-in .45s cubic-bezier(.2, .8, .2, 1) both;
    will-change: transform, opacity;
}
.pj-photo__stamp.is-sold span {
    background: linear-gradient(90deg, #15934a, #1fbf63, #15934a);
}
.pj-photo__stamp.is-unsold span {
    background: linear-gradient(90deg, #b81d1d, #ef4444, #b81d1d);
}
@keyframes pj-ribbon-in {
    0%   { opacity: 0; transform: rotate(-45deg) scale(1.35); }
    60%  { opacity: 1; transform: rotate(-45deg) scale(.97); }
    100% { opacity: 1; transform: rotate(-45deg) scale(1); }
}

/* 3. Right Card: Current Bid & Auction Stats (Compact & Aligned with Center Hero) */
.pj-card--bid {
    flex: 1 1 35%;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, .9vw, 14px);
    padding: clamp(14px, 1.4vw, 22px) clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 20px);
    text-align: center;
    max-height: 100%;
}

.pj-detail__head {
    position: relative;
    z-index: 1;
    margin-bottom: min(clamp(6px, 1vw, 16px), 1.4vh);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: min(clamp(3px, 0.45vw, 8px), 0.8vh);
    flex: 0 0 auto;
}

.pj-detail__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(16px, 1.3vw, 23px);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pj-blue);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    padding: 5px 14px;
    border-radius: 999px;
}

.pj-detail__eyedot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pj-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
    animation: pj-pulse 1.8s infinite ease-in-out;
}

.pj-detail__name {
    margin: 0;
    /* reserve 2 lines so a short or long name never shifts the fields below */
    min-height: 2.3em;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* big enough to read across a hall, still fits long names in 2 lines */
    font-size: min(clamp(20px, 2vw, 34px), 3.6vh);
    font-weight: 700;
    line-height: 1.16;
    color: var(--pj-navy);
    text-transform: uppercase;
    letter-spacing: -.02em;
    word-break: normal;
    overflow-wrap: break-word;
}

.pj-detail__loc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 23px;
    font-weight: 800;
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.32);
    padding: 5px 15px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pj-detail__loc::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    background: var(--pj-amber-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===========================================================================
   LEFT CARD: 2x2 ATHLETIC STAT GRID & BASE PRICE PODIUM (BROADCAST SPEC)
   =========================================================================== */
.pj-stat-grid {
    display: flex;
    flex-direction: column;
    gap: min(clamp(5px, 0.6vw, 10px), 1vh);
    /* take the free space between the name and the Base Price and let the tiles
       inside share it — they grow on a tall screen, shrink on a short one */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin-top: 2px;
}

/* Clean, uniform spec row: colored icon chip + (label over value) */
.pj-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.95vw, 15px);
    padding: min(clamp(6px, 0.78vw, 13px), 1.3vh) clamp(12px, 1.1vw, 16px);
    background: #ffffff;
    border: 1px solid #e7eff9;
    border-radius: clamp(13px, 1.1vw, 17px);
    box-shadow: 0 8px 20px -14px rgba(15, 47, 102, 0.3);
    transition: transform 0.25s var(--pj-ease), box-shadow 0.25s ease, border-color 0.25s ease;
    /* the four tiles share the stat-grid's height and shrink to fit a short screen */
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.pj-tile:hover {
    transform: translateY(-2px);
    border-color: #d5e6fb;
    box-shadow: 0 12px 26px -14px rgba(37, 99, 235, 0.3);
}

.pj-tile__ico {
    width: min(clamp(34px, 3.1vw, 52px), 6.6vh);
    height: min(clamp(34px, 3.1vw, 52px), 6.6vh);
    border-radius: clamp(11px, .9vw, 16px);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
}
.pj-tile__ico svg {
    width: 52%;
    height: 52%;
    display: block;
}

/* label sits top-left, value bottom-right — so both can be big without colliding */
.pj-tile__tx {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(3px, .35vw, 7px);
    flex: 1 1 auto;
    min-width: 0;
}
.pj-tile__label {
    align-self: flex-start;
    font-size: clamp(14px, 1.3vw, 23px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #42516d;
}
.pj-tile__val {
    align-self: flex-end;
    font-size: clamp(18px, 1.6vw, 30px);
    font-weight: 600;
    color: var(--pj-navy);
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.12;
    text-align: right;
    overflow-wrap: break-word;
}
.pj-tile__hash { color: var(--pj-blue); opacity: .7; margin-right: 1px; }
.pj-tile--token .pj-tile__val { font-size: clamp(24px, 2.1vw, 38px); color: var(--pj-navy); line-height: 1.05; }

/* Icon chip colors (subtle, consistent) */
.pj-tile--token .pj-tile__ico { background: linear-gradient(145deg, #3b82f6, #1d4ed8); box-shadow: 0 8px 16px -8px rgba(37, 99, 235, .5); }
.pj-tile--role .pj-tile__ico { background: linear-gradient(145deg, #8b5cf6, #6d28d9); box-shadow: 0 8px 16px -8px rgba(124, 58, 237, .5); }
.pj-tile--batting .pj-tile__ico { background: linear-gradient(145deg, #06b6d4, #0e7490); box-shadow: 0 8px 16px -8px rgba(8, 145, 178, .5); }
.pj-tile--bowling .pj-tile__ico { background: linear-gradient(145deg, #10b981, #047857); box-shadow: 0 8px 16px -8px rgba(5, 150, 105, .5); }

/* Championship Base Price Podium Anchor */
.pj-podium--base {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: min(clamp(8px, 0.95vw, 15px), 1.5vh) clamp(14px, 1.2vw, 20px);
    flex: 0 0 auto;
    background: linear-gradient(135deg, #fffcf0 0%, #fef3c7 45%, #fde68a 100%);
    border: 1.5px solid #f59e0b;
    border-radius: clamp(14px, 1.2vw, 18px);
    box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.25), 0 2px 6px rgba(245, 158, 11, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    flex: 0 0 auto;
    margin-top: 2px;
}
.pj-podium--base::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    background-size: 200% 100%;
    animation: pj-gold-shimmer 4s infinite ease-in-out;
    pointer-events: none;
}
@keyframes pj-gold-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pj-podium__left {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 14px);
    position: relative;
    z-index: 1;
}
.pj-podium__ico {
    width: clamp(38px, 3vw, 48px);
    height: clamp(38px, 3vw, 48px);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: #fff;
    flex: 0 0 auto;
}
.pj-podium__ico svg {
    width: 58%;
    height: 58%;
    display: block;
}
.pj-podium__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.pj-podium__tag {
    font-size: clamp(15px, 1.2vw, 21px);
    font-weight: 700;
    color: #713f12;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pj-podium__sub {
    font-size: clamp(11px, .9vw, 15px);
    font-weight: 700;
    color: #a1591a;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
}
.pj-podium__right {
    position: relative;
    z-index: 1;
    text-align: right;
}
.pj-podium__val {
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight: 700;
    color: #78350f;
    letter-spacing: -.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ===========================================================================
   RIGHT CARD: CURRENT BID
   =========================================================================== */
.pj-bid-card {
    position: relative;
    z-index: 1;
}

.pj-bid-card.is-sold {
    border-color: rgba(39, 176, 106, .45);
    box-shadow: 0 16px 42px -12px rgba(39, 176, 106, .25);
}

.pj-bid__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: clamp(11px, .85vw, 14px);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pj-navy-soft);
}
.pj-bid__crown {
    width: clamp(15px, 1.2vw, 20px);
    height: clamp(15px, 1.2vw, 20px);
    color: var(--pj-amber);
}

/* Gavel + glass-podium stage image; the team avatar rests on the podium */
/* Glass podium stage fills the full width of the card, flush to the top edge */
.pj-bid__stage {
    position: relative;
    width: calc(100% + 2 * clamp(16px, 1.6vw, 22px));
    margin: calc(-1 * clamp(14px, 1.4vw, 22px)) calc(-1 * clamp(16px, 1.6vw, 22px)) 0;
    aspect-ratio: 960 / 660;
    /* the stage is the flexible hero: it grows to fill spare height and shrinks on a
       short viewport, so the name + amount + counts sit snug at the bottom of the
       left-matched card height and never move up/down between short and long team
       names — no clip, no shift, card never taller than the left / centre cards. */
    flex: 1 1 auto;
    min-height: 0;
    background: url(../../../../assets/images/auction/bid-stage.jpg) center / cover no-repeat;
    /* soft morph: fade the bottom of the stage into the card (no hard line) */
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}
/* dark theme uses the dark stadium stage image */
[data-theme="dark"] .pj-bid__stage { background-image: url(../../../../assets/images/auction/bid-stage-dark.jpg); }
.pj-bid__avatar-ring {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: clamp(136px, 12.5vw, 216px);
    height: clamp(136px, 12.5vw, 216px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: clamp(3px, .45vw, 7px) solid #fff;
    box-shadow: 0 18px 38px -8px rgba(14, 42, 94, .5), 0 0 0 clamp(2px, .3vw, 5px) rgba(37, 99, 235, .3);
    overflow: hidden;
}
.pj-bid-card.is-sold .pj-bid__avatar-ring {
    box-shadow: 0 14px 30px -8px rgba(16, 185, 129, .5), 0 0 0 clamp(2px, .25vw, 3px) rgba(16, 185, 129, .4);
}
.pj-bid__avatar, .pj-bid__avatar-fb {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.pj-bid__avatar[hidden] { display: none; }
.pj-bid__avatar-fb {
    display: grid;
    place-items: center;
    font-size: clamp(26px, 2.5vw, 44px);
    font-weight: 900;
    color: var(--pj-blue);
    background: var(--pj-sky);
    text-transform: uppercase;
}

.pj-bid__team {
    font-size: clamp(20px, 2vw, 35px);
    font-weight: 700;
    color: var(--pj-navy);
    line-height: 1.14;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: clamp(4px, .5vw, 8px) 0 2px;
    /* Fixed 3-line reserve: a short, medium or long/wrapping team name always occupies
       the same block height. Because this block is fixed, a name change never alters
       the layout — the stage (background), bid amount and counts all stay put. The
       stage flexes only with the viewport, never with the name. */
    min-height: calc(3 * 1.14em);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    flex: 0 0 auto;
}

/* Golden Bid Amount Display Box (Reference UI exact styling) */
.pj-bid__box-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* The stage above grows/shrinks to take up the spare height, so the amount +
       counts stay pinned near the bottom of the (left-matched) card. A wrapping team
       name shrinks the stage, not this block, so the amount never shifts up/down. */
    margin-top: 2px;
}
.pj-bid__chip {
    font-size: clamp(9px, .7vw, 11px);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1e40af;
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
    border: 1.5px solid #bfdbfe;
    padding: clamp(3px, .3vw, 5px) clamp(12px, 1.1vw, 20px);
    border-radius: 999px;
    margin-bottom: -10px;
    position: relative;
    z-index: 2;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .14);
}
.pj-bid__amount {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: clamp(15px, 1.3vw, 20px);
    padding: clamp(10px, 1vw, 15px) clamp(12px, 1.1vw, 18px);
    background: linear-gradient(180deg, #5ea0fb 0%, #2f6ae0 55%, #1d53c9 100%);
    box-shadow: 0 14px 30px -12px rgba(37, 99, 235, .5), inset 0 1px 2px rgba(255, 255, 255, .5), inset 0 -2px 4px rgba(13, 52, 140, .35);
}
.pj-bid__amount-val {
    font-size: clamp(24px, 2.5vw, 40px);
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 2px 6px rgba(10, 40, 110, .35);
}
.pj-bid-card.is-sold .pj-bid__amount {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 55%, #16a34a 100%);
    box-shadow: 0 14px 30px -12px rgba(16, 185, 129, .5), inset 0 1px 2px rgba(255, 255, 255, .5);
}
.pj-bid-card.is-sold .pj-bid__chip {
    background: #e6f9f0;
    border-color: #86efac;
    color: #15803d;
}

/* Subtle Divider between Bid Amount and Stats */
.pj-bid__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0 15%, #e2e8f0 85%, transparent);
    margin: clamp(2px, 0.3vw, 6px) 0;
    flex: 0 0 auto;
}

/* ===========================================================================
   RIGHT COLUMN STATS: SINGLE UNIFIED PANEL (Instead of 4 separate containers)
   =========================================================================== */
/* 2x2 count tiles inside the right (current-bid) card, below the amount */
.pj-stats {
    width: 100%;
    margin-top: clamp(2px, .4vw, 6px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(7px, .7vw, 12px);
    flex: 0 0 auto;
}

.pj-stat {
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(7px, .65vw, 11px);
    background: #f4f8fd;
    border: 1px solid #e4eefb;
    border-radius: clamp(11px, 1vw, 15px);
    padding: clamp(7px, .7vw, 12px) clamp(8px, .75vw, 12px);
    box-shadow: 0 6px 16px -12px rgba(15, 47, 102, 0.2);
    text-align: left;
}

.pj-stat__sep { display: none; }

.pj-stat__ico {
    width: clamp(30px, 2.4vw, 38px);
    height: clamp(30px, 2.4vw, 38px);
    flex: 0 0 auto;
    border-radius: clamp(9px, .8vw, 13px);
    display: grid;
    place-items: center;
    color: #fff;
}
.pj-stat__ico svg { width: 52%; height: 52%; }

.pj-stat__tx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.05;
    min-width: 0;
}
.pj-stat__tx b {
    font-size: clamp(16px, 1.5vw, 26px);
    font-weight: 600;
    color: var(--pj-navy);
    font-variant-numeric: tabular-nums;
}
.pj-stat__tx span {
    font-size: clamp(14px, 1.3vw, 22px);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #3d4d68;
    line-height: 1.05;
    white-space: normal;
}

/* all four count numbers share one colour (white in dark, navy in light) so
   each reads clearly — the coloured icon chip is what tells them apart */
.pj-stat--all .pj-stat__ico { background: linear-gradient(145deg, #3b82f6, #1d4ed8); box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .55); }
.pj-stat--avail .pj-stat__ico { background: linear-gradient(145deg, #10b981, #047857); box-shadow: 0 8px 18px -8px rgba(5, 150, 105, .5); }
.pj-stat--sold .pj-stat__ico { background: linear-gradient(145deg, #ef4444, #b91c1c); box-shadow: 0 8px 18px -8px rgba(185, 28, 28, .5); }
.pj-stat--unsold .pj-stat__ico { background: linear-gradient(145deg, #f59e0b, #b45309); box-shadow: 0 8px 18px -8px rgba(180, 83, 9, .5); }
/* dark theme: brighten count labels for far readability */
[data-theme="dark"] .pj-stat__tx span { color: #c3d4ef; }

/* ===========================================================================
   WELCOME SCREEN
   =========================================================================== */
.pj-welcome {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, .9vw, 16px);
    text-align: center;
    animation: pj-fade .5s var(--pj-ease);
}
.pj-welcome__rings {
    position: relative;
    width: clamp(180px, 23vw, 360px);
    height: clamp(180px, 23vw, 360px);
    display: grid;
    place-items: center;
    margin-bottom: clamp(6px, 1vw, 16px);
}
.pj-welcome__ring { position: absolute; border-radius: 50%; }
.pj-welcome__ring--a {
    inset: 0;
    border: 4px dashed var(--pj-blue);
    box-shadow: 0 0 40px rgba(43, 127, 255, .3);
    animation: pj-spin 14s linear infinite;
}
.pj-welcome__ring--b {
    inset: 9%;
    border: 3px dashed var(--pj-amber);
    animation: pj-spin 10s linear infinite reverse;
}
.pj-welcome__logo, .pj-welcome__logo-fb {
    width: 68%;
    height: 68%;
    border-radius: 50%;
    object-fit: cover;
}
.pj-welcome__logo[hidden] { display: none; }
.pj-welcome__logo-fb {
    display: grid;
    place-items: center;
    font-size: clamp(48px, 7vw, 110px);
    background: #fff;
    border: 1px solid var(--pj-sky-brd);
}
.pj-welcome__hi {
    font-size: clamp(50px, 9vw, 150px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: .01em;
    color: var(--pj-navy);
    text-shadow: 0 6px 24px rgba(255, 255, 255, .6);
}
.pj-welcome__to {
    font-size: clamp(16px, 1.6vw, 26px);
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--pj-blue);
}
.pj-welcome__name {
    font-size: clamp(26px, 4vw, 64px);
    font-weight: 900;
    color: var(--pj-amber-dark);
    text-transform: uppercase;
}
.pj-welcome__tag {
    font-size: clamp(12px, 1.1vw, 20px);
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--pj-navy-soft);
}

/* ===========================================================================
   POINTS TABLE
   =========================================================================== */
.pj-table {
    flex: 1 1 auto;
    flex-direction: column;
    gap: clamp(10px, 1.1vw, 20px);
    min-height: 0;
    background: var(--pj-card-bg);
    border: 1.5px solid var(--pj-card-border);
    border-radius: clamp(20px, 1.8vw, 32px);
    box-shadow: var(--pj-card-shadow);
    padding: clamp(16px, 1.6vw, 30px);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: pj-fade .5s var(--pj-ease);
}
.pj-table__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.pj-table__title {
    font-size: clamp(20px, 2.2vw, 40px);
    font-weight: 900;
    color: var(--pj-navy);
}
.pj-table__sub {
    font-size: clamp(11px, 1vw, 17px);
    font-weight: 800;
    color: var(--pj-blue);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pj-table__wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.pj-table__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 1vw, 20px);
    height: 100%;
}
.pj-table__cols.is-two { grid-template-columns: 1fr 1fr; }
.pj-tcol {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, .5vw, 9px);
    min-height: 0;
}
.pj-trow {
    display: grid;
    grid-template-columns: minmax(0, 3fr) .55fr 1fr 1fr 1fr;
    align-items: center;
    gap: clamp(6px, .8vw, 14px);
    padding: clamp(5px, .6vw, 13px) clamp(14px, 1.4vw, 26px);
    border-radius: clamp(10px, .9vw, 16px);
    background: #f4f8ff;
    border: 1px solid #e4eeff;
    /* rows share the column height equally: they fill it (no empty gap below the
       table) and shrink when there are many teams, so every team stays on the
       projector at once without scrolling, whatever the count. */
    flex: 1 1 0;
    min-height: 0;
}
.pj-trow--head {
    background: none;
    border: none;
    padding-top: 0;
    padding-bottom: 2px;
    flex: 0 0 auto;
}
.pj-trow--head span {
    font-size: clamp(11px, .95vw, 17px);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pj-muted);
}
.pj-trow.is-bidding {
    background: linear-gradient(135deg, rgba(37, 99, 235, .14), rgba(37, 99, 235, .03));
    border-color: var(--pj-blue);
    box-shadow: 0 0 0 1px var(--pj-blue) inset;
}
.pj-trow__team {
    display: flex;
    align-items: center;
    gap: clamp(8px, .8vw, 14px);
    min-width: 0;
}
.pj-trow__logo, .pj-trow__logo-fb {
    width: clamp(26px, 2.1vw, 44px);
    height: clamp(26px, 2.1vw, 44px);
    border-radius: clamp(7px, .6vw, 11px);
    flex: 0 0 auto;
    object-fit: cover;
}
.pj-trow__logo-fb {
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: clamp(12px, 1.1vw, 20px);
    color: var(--pj-blue);
    background: var(--pj-sky);
    text-transform: uppercase;
}
.pj-trow__nm {
    font-size: clamp(15px, 1.3vw, 26px);
    font-weight: 800;
    color: var(--pj-navy);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pj-trow__v {
    font-size: clamp(14px, 1.2vw, 24px);
    font-weight: 800;
    text-align: right;
    color: var(--pj-navy);
    font-variant-numeric: tabular-nums;
}
.pj-trow__v--spend { color: var(--pj-amber-dark); }
.pj-trow__v--bal { color: var(--pj-green); }
[data-theme="dark"] .pj-trow__v--spend { color: #fcd34d; }
[data-theme="dark"] .pj-trow__v--bal { color: #4ade80; }
[data-theme="dark"] .pj-trow__logo-fb { background: #1b2c4c; color: #8fc0ff; }

/* ===========================================================================
   ANIMATIONS & RESPONSIVE
   =========================================================================== */
.pj-spinner {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, .3);
    border-top-color: var(--pj-blue);
    animation: pj-spin .7s linear infinite;
}
@keyframes pj-spin { to { transform: rotate(360deg); } }
@keyframes pj-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes pj-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pj-stamp { from { opacity: 0; transform: rotate(-45deg) scale(2.2); } to { opacity: 1; transform: rotate(-11deg) scale(1); } }

/* ===========================================================================
   ADVERTISEMENT TICKER (bottom bar on every view, toggled from the panel)
   Seamless infinite marquee: the track holds three identical copies and slides
   by exactly one copy (-33.333%) so the loop never shows a seam.
   =========================================================================== */
.pj-adbar {
    flex: 0 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: clamp(6px, .8vw, 12px) calc(-1 * clamp(16px, 1.8vw, 32px)) calc(-1 * clamp(10px, 1.2vw, 20px));
    width: calc(100% + 2 * clamp(16px, 1.8vw, 32px));
    padding: clamp(8px, .9vw, 15px) 0;
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    border-top: 2px solid rgba(255, 255, 255, .35);
    box-shadow: 0 -12px 40px rgba(13, 40, 110, .3);
}
.pj-adbar[hidden] { display: none; }
.pj-adbar__track {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    will-change: transform;
    animation: pj-adscroll 60s linear infinite;
}
.pj-adbar__item {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, .8vw, 14px);
    padding: 0 clamp(26px, 3vw, 60px);
    font-size: clamp(16px, 1.5vw, 26px);
    font-weight: 800;
    letter-spacing: .01em;
    color: #ffffff;
}
.pj-adbar__ic { font-size: 1.15em; line-height: 1; }
.pj-adbar__brand { font-weight: 900; color: #ffffff; }
.pj-adbar__brand span { color: #bfdbfe; }
.pj-adbar__sep { opacity: .6; padding: 0 clamp(4px, .4vw, 8px); }
@keyframes pj-adscroll {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-33.3333%, 0, 0); }
}
[data-theme="dark"] .pj-adbar {
    background: linear-gradient(90deg, #1b3a74, #12294f);
    border-top-color: rgba(150, 186, 246, .4);
}
@media (prefers-reduced-motion: reduce) { .pj-adbar__track, .pj-photo__stamp span { animation: none; } }

@media (max-aspect-ratio: 1/1), (max-width: 980px) {
    /* let the whole page scroll on phones / short screens (body is overflow:hidden by default) */
    html, body { overflow: auto; height: auto; }
    .pj { overflow: visible; height: auto; min-height: 100vh; justify-content: flex-start; }
    .pj-main { width: 94%; height: auto; }
    .pj-main__row { flex-direction: column; gap: 16px; height: auto; }
    .pj-card--detail, .pj-card--bid { flex: 0 0 auto; width: 100%; max-height: none; align-self: stretch; }
    .pj-card--photo { order: -1; flex: 0 0 clamp(280px, 70vw, 420px); height: auto; align-self: stretch; }
    .pj-table__cols.is-two { grid-template-columns: 1fr; }
    .pj__tagline, .pj__divider, .pj__brand-sub { display: none; }
    .pj-stat-grid { gap: 10px; }
    /* header: let it wrap and keep the auction name fully visible */
    .pj__top { flex-wrap: wrap; row-gap: 8px; }
    .pj__brandline { flex: 1 1 100%; min-width: 0; }
    .pj__auction-name { font-size: clamp(18px, 5.5vw, 30px); white-space: normal; overflow: visible; text-overflow: clip; }
    .pj__topright { flex: 1 1 100%; justify-content: flex-end; }
}

@media (max-width: 560px) {
    .pj-stats { flex-wrap: wrap; gap: 10px 4px; }
    .pj-stat { flex: 1 1 42%; justify-content: flex-start; }
    .pj-stat__sep { display: none; }
}

@media (max-width: 480px) {
    .pj-stat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pj-welcome__ring, .pj__live-dot { animation: none; }
}

/* ===========================================================================
   THEME TOGGLE BUTTON + LIGHT / DARK THEME
   =========================================================================== */
.pj__theme {
    display: inline-grid;
    place-items: center;
    width: clamp(34px, 2.8vw, 44px);
    height: clamp(34px, 2.8vw, 44px);
    border-radius: 50%;
    cursor: pointer;
    color: var(--pj-navy);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--pj-sky-brd);
    box-shadow: 0 4px 14px rgba(15, 47, 102, 0.12);
    transition: transform .2s ease, background-color .35s ease, color .35s ease, border-color .35s ease;
}
.pj__theme:hover { transform: translateY(-1px); }
.pj__theme-ic { width: 54%; height: 54%; display: block; }
.pj__theme-ic--sun { display: none; }
[data-theme="dark"] .pj__theme-ic--moon { display: none; }
[data-theme="dark"] .pj__theme-ic--sun { display: block; color: #fbbf24; }

/* smooth morph when switching themes */
body, .pj__bg, .pj-card, .pj-tile, .pj-stat, .pj-base, .pj-info__eyebrow,
.pj-detail__eyebrow, .pj__logo-ring, .pj__theme, .pj__live-badge, .pj-table, .pj-trow {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* ---------------------------- DARK THEME ---------------------------------- */
[data-theme="dark"] {
    --pj-navy: #e8f0fc;
    --pj-navy-soft: #aec2e6;
    --pj-muted: #93a6c9;
    --pj-sky: #1b2c4c;
    --pj-sky-brd: #2b4068;
    --pj-card-border: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] body { background: #060f20; color: var(--pj-navy); }
[data-theme="dark"] .pj__bg {
    background:
        radial-gradient(ellipse 70% 42% at 50% 112%, rgba(37, 99, 235, 0.16), transparent 60%),
        radial-gradient(ellipse 90% 60% at 50% -15%, rgba(28, 50, 96, 0.32), transparent 72%),
        radial-gradient(circle at 12% 22%, rgba(22, 46, 92, 0.28), transparent 46%),
        radial-gradient(circle at 88% 22%, rgba(22, 46, 92, 0.28), transparent 46%),
        linear-gradient(180deg, #0a1a34 0%, #071226 52%, #050d1c 100%);
}
/* make the cards sit clearly ABOVE the (darker) page, like white cards do in light */
[data-theme="dark"] .pj-card {
    background: #1b3360;
    border-color: rgba(150, 186, 246, 0.26);
    box-shadow: 0 20px 48px -14px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .pj-card--photo .pj-photo,
[data-theme="dark"] .pj-photo__img,
[data-theme="dark"] .pj-photo__ph { background: #0f1f39; }
[data-theme="dark"] .pj-info__eyebrow,
[data-theme="dark"] .pj-detail__eyebrow {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(150, 190, 250, 0.55);
    color: #bcd8ff;
}
[data-theme="dark"] .pj-detail__eyedot { background: #9fc8ff; box-shadow: 0 0 0 3px rgba(159, 200, 255, 0.3); }
[data-theme="dark"] .pj-tile {
    background: #27497c;
    border-color: rgba(130, 168, 228, 0.3);
    box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .pj-tile:hover { border-color: rgba(96, 165, 250, 0.35); }
[data-theme="dark"] .pj-tile__label { color: #c3d4ef; }
/* dark theme: brighten the blue/amber accents so every label reads from far */
[data-theme="dark"] .pj__auction-sub { color: #aecdff; }
[data-theme="dark"] .pj-welcome__to { color: #aecdff; }
[data-theme="dark"] .pj-welcome__name { color: #fcd34d; }
[data-theme="dark"] .pj-tile__hash { color: #8fc0ff; opacity: .9; }
[data-theme="dark"] .pj-detail__loc {
    color: #ffdd77;
    background: rgba(245, 158, 11, 0.24);
    border-color: rgba(252, 211, 77, 0.55);
}
[data-theme="dark"] .pj-detail__loc::before { background: #ffdd77; }
[data-theme="dark"] .pj-base {
    background: linear-gradient(100deg, rgba(120, 83, 20, 0.4) 0%, rgba(80, 55, 12, 0.28) 100%);
    border-color: rgba(246, 216, 158, 0.32);
}
[data-theme="dark"] .pj-base__tag { color: #fcd9a0; }
[data-theme="dark"] .pj-base__sub { color: #c79a5c; }
[data-theme="dark"] .pj-base__val { color: #fcd34d; }
[data-theme="dark"] .pj-stat {
    background: #27497c;
    border-color: rgba(130, 168, 228, 0.3);
}
[data-theme="dark"] .pj__live-badge { background: rgba(16, 185, 129, 0.16); }
[data-theme="dark"] .pj__logo-ring { background: #0f1f39; }
[data-theme="dark"] .pj-bid__chip {
    background: linear-gradient(180deg, #1e3a6a, #17305c);
    border-color: #2e4d82;
    color: #bcd6ff;
}
[data-theme="dark"] .pj-bid__avatar-ring { background: #0f1f39; border-color: #223a63; }
[data-theme="dark"] .pj-bid__avatar-fb { background: #1b2c4c; color: #93c5fd; }
[data-theme="dark"] .pj-table { background: #1b3360; }
[data-theme="dark"] .pj-trow { background: #27497c; border-color: rgba(130, 168, 228, 0.28); }
[data-theme="dark"] .pj-trow--head span { color: #aec2e6; }
[data-theme="dark"] .pj-table__sub { color: #aecdff; }
[data-theme="dark"] .pj-trow--head { background: none; }
[data-theme="dark"] .pj-welcome__logo-fb { background: #0f1f39; border-color: #223a63; }