/* =============================================
   CS2 Case Battle — Arena & Lobby Styles
   ============================================= */

:root {
    --pb-bg: #0a0c14;
    --pb-surface: #141824;
    --pb-surface2: #1c2030;
    --pb-border: #2a3040;
    --pb-gold: #f0c040;
    --pb-gold-dim: #8a7030;
    --pb-blue: #4a90d9;
    --pb-green: #4ade80;
    --pb-red: #f87171;
    --pb-purple: #a78bfa;
    --pb-text: #e2e8f0;
    --pb-text-dim: #8892a6;
    --pb-player-bg: #1e293b;
    --pb-common: #c0c0c0;
    --pb-industrial: #b0fff2;
    --pb-rare: #4169e1;
    --pb-milspec: #4169e1;
    --pb-restricted: #9400d3;
    --pb-epic: #9400d3;
    --pb-classified: rgb(255, 0, 221);
    --pb-covert: #eb4b4b;
    --pb-legendary: #ffd700;
    --pb-gamemode-crazy: #4ade80;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.cb-body {
    background: var(--pb-bg);
    color: var(--pb-text);
    font-family: "Montserrat", sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ======== BACK TO MAIN ======== */
.cb-back-link {
    position: fixed; top: 12px; left: 16px;
    z-index: 200;
    color: var(--pb-text-dim); text-decoration: none;
    font-size: 0.85rem; padding: 6px 12px;
    border-radius: 0; border: 1px solid var(--pb-border);
    background: var(--pb-surface2); transition: all 0.2s;
}
.cb-back-link:hover { color: var(--pb-gold); border-color: var(--pb-gold); }

/* ======== LOBBY ======== */
.cb-lobby { max-width: 1500px; margin: 0 auto; padding: 20px; }
.cb-lobby.hidden { display: none; }

.cb-lobby-header {
    text-align: center; margin: 30px 0 24px;
}
.cb-lobby-header h1 {
    font-size: 2.2rem; font-weight: 800;
    font-family: "Orbitron", sans-serif;
    background: linear-gradient(135deg, #bfff00, var(--pb-gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cb-lobby-header p { color: var(--pb-text-dim); margin-top: 6px; font-size: 0.9rem; }

/* Lobby Panels — 75% left (cases) + 25% right (create + preview) */
.cb-lobby-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; align-items: stretch; min-height: 60vh}

/* Right column: Create Room (top) + Preview (bottom) */
.cb-lobby-right-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.cb-lobby-right-col > .cb-panel:first-child {
    flex: 0 0 auto;  /* Create Room: natural height */
}
.cb-lobby-right-col > .cb-cases-preview-panel--right {
    flex: 1 1 0;     /* Preview: fills remaining space (75%ish) */
    min-height: 120px;
    overflow-y: auto;
}

.cb-panel {
    background: var(--pb-surface); border: 1px solid var(--pb-border);
    border-radius: 0; padding: 20px;
    min-width: 0;
    overflow: hidden;
}
.cb-panel-title {
    font-size: 1rem; font-weight: 600; margin-bottom: 16px;
    color: var(--pb-text-dim); text-transform: uppercase; letter-spacing: 0.05em;
}
.cb-panel-title span { color: var(--pb-gold); }

.cb-clear-btn {
    float: right; padding: 3px 10px; border-radius: 0; border: 1px solid var(--pb-red);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    background: rgba(248,113,113,0.1); color: var(--pb-red);
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    text-transform: none; letter-spacing: 0;
}
.cb-clear-btn:hover { background: rgba(248,113,113,0.25); }

/* Case Selection Grid */
.cb-case-search {
    width: 100%; padding: 8px 10px; margin-bottom: 10px;
    border-radius: 0; border: 1px solid var(--pb-border);
    background: var(--pb-surface2); color: var(--pb-text);
    font-size: 0.75rem; font-family: inherit;
}
.cb-case-search::placeholder { color: var(--pb-text-dim); }
.cb-case-search:focus { outline: none; border-color: var(--pb-gold); }

.cb-case-tabs {
    display: flex; gap: 0; margin-bottom: 10px;
    border-bottom: 1px solid var(--pb-border);
}
.cb-case-tab-btn {
    padding: 6px 14px; border: none; background: transparent;
    color: var(--pb-text-dim); font-size: 0.7rem; font-weight: 500;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: all 0.2s; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.cb-case-tab-btn:hover { color: var(--pb-text); }
.cb-case-tab-btn.active {
    color: var(--pb-gold); border-bottom-color: var(--pb-gold);
}

/* ======== CASE SEQUENCE PREVIEW EDITOR (drag-drop) ======== */
.cb-case-sequence-preview {
    background: var(--pb-surface); border: 1px solid var(--pb-border);
    border-radius: 0; padding: 16px 20px; margin-bottom: 20px;
    transition: border-color 0.3s;
}
.cb-case-sequence-preview.has-drag-over {
    border-color: var(--pb-gold);
    box-shadow: 0 0 20px rgba(240,192,64,0.15);
}

.cb-case-seq-preview-track {
    display: flex; flex-wrap: wrap;
    min-height: 72px; padding: 5px;
    background: var(--pb-surface2); border: 1px dashed var(--pb-border);
    border-radius: 0;
    align-items: center;
    transition: border-color 0.2s, background 0.2s;
}
.cb-case-seq-preview-track.drag-over {
    border-color: var(--pb-gold);
    background: rgba(240,192,64,0.06);
}

.cb-seq-preview-item {
    flex-shrink: 0; width: 90px; height: 90px;
    border-radius: 0; border: 2px solid var(--pb-border);
    background: var(--pb-surface); position: relative;
    display: flex; align-items: center; justify-content: center;
    cursor: grab; user-select: none;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.cb-seq-preview-item:active { cursor: grabbing; }
.cb-seq-preview-item:hover {
    border-color: var(--pb-gold-dim);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Drag states */
.cb-seq-preview-item.dragging {
    opacity: 0.35;
    transform: scale(0.9);
    border-style: dashed;
}
.cb-seq-preview-item.drag-over {
    border-color: var(--pb-gold) !important;
    box-shadow: 0 0 20px rgba(240,192,64,0.5), 4px 0 0 var(--pb-gold);
    transform: scale(1.08);
    z-index: 2;
}

/* Drag reorder preview: shift items to show insertion point */
.cb-seq-preview-item.shift-left {
    transform: translateX(-16px);
}
.cb-seq-preview-item.shift-right {
    transform: translateX(16px);
}
/* Combined states: drag-over + shift takes priority */
.cb-seq-preview-item.drag-over.shift-left,
.cb-seq-preview-item.drag-over.shift-right {
    transform: scale(1.08);
}

.cb-seq-preview-item-img {
    max-width: 80%; max-height: 80%; object-fit: contain;
    pointer-events: none; border-radius: 3px;
}
.cb-seq-preview-item-img-base {
    max-width: 80%; max-height: 80%; object-fit: contain;
    pointer-events: none; border-radius: 3px;
}
.cb-seq-preview-overlay-emoji {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.85rem; pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.cb-seq-preview-overlay-img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 65%; height: 65%; object-fit: contain; pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

/* Sequence index badge */
.cb-seq-preview-item-index {
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px;
    font-size: 0.6rem; font-weight: 700; color: var(--pb-text-dim);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    line-height: 1;
}

/* Remove button */
.cb-seq-preview-item-remove {
    position: absolute; top: 3px; right: 3px;
    width: 12px; height: 12px;
    background: var(--pb-red); border: none;
    color: #fff; font-size: 0.6rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s;
    line-height: 1; padding: 0;
}
.cb-seq-preview-item:hover .cb-seq-preview-item-remove {
    opacity: 1;
}
.cb-seq-preview-item-remove:hover {
    background: #ef4444;
}

.cb-seq-preview-hint {
    margin-top: 8px; font-size: 0.65rem; color: var(--pb-text-dim);
    text-align: center;
}

/* Sort button (matches skin-sort-btn style) */
.cb-seq-sort-btn {
    padding: 3px 10px;
    font-size: 0.65rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--pb-text-dim);
    background: rgba(240,192,64,0.08);
    border: 1px solid rgba(240,192,64,0.2);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-transform: none;
}
.cb-seq-sort-btn:hover {
    background: rgba(240,192,64,0.18);
    border-color: rgba(240,192,64,0.45);
    color: var(--pb-gold);
    box-shadow: 0 0 8px rgba(240,192,64,0.15);
}
.cb-seq-sort-btn.sorted-asc,
.cb-seq-sort-btn.sorted-desc {
    color: var(--pb-gold);
    border-color: rgba(240,192,64,0.4);
    background: rgba(240,192,64,0.14);
}

/* Name + cost label at bottom of preview items */
.cb-seq-preview-item-label {
    position: absolute;
    bottom: 4px; left: 4px; right: 4px;
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none;
    line-height: 1.15;
}
.cb-seq-preview-item-name {
    font-size: 0.52rem; color: var(--pb-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.cb-seq-preview-item-cost {
    font-size: 0.55rem; color: var(--pb-gold); font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.cb-prize-select-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    max-height: 640px; overflow-y: auto; padding-right: 4px;
}
.cb-prize-select-grid::-webkit-scrollbar { width: 4px; }
.cb-prize-select-grid::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }

/* ═══ CASE GRID LOADING SPINNER ═══ */
.cb-grid-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 50px 20px;
}
.cb-grid-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--pb-border);
    border-top-color: var(--pb-gold);
    border-radius: 50%;
    animation: cb-grid-spin 0.7s linear infinite;
}
.cb-grid-spinner-text {
    font-size: 0.82rem;
    color: var(--pb-text-dim);
    font-weight: 500;
    letter-spacing: 0.03em;
}
@keyframes cb-grid-spin {
    to { transform: rotate(360deg); }
}

.cb-case-option {
    border: 2px solid transparent; border-radius: 0;
    padding: 16px 12px 12px; text-align: center;
    background: var(--pb-surface2); transition: all 0.2s;
    font-size: 0.85rem; position: relative; cursor: default;
}
.cb-case-option:hover { transform: translateY(-2px); }
.cb-case-option.selected { border-color: var(--pb-gold); background: rgba(191,255,0,0.08); }

.cb-case-opt-img {
    width: 144px; height: 144px; object-fit: contain; margin: 0 auto 4px;
    display: block; border-radius: 4px;
    position: relative; overflow: hidden;
}
/* Base image fills the wrapper, hue-rotate applied via inline style */
.cb-case-opt-img-base {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Emoji overlay — centered on top of base image */
.cb-case-opt-overlay-emoji {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 2.4rem; pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Skin overlay image — centered on top of base image */
.cb-case-opt-overlay-img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 65%; height: 65%; object-fit: contain; pointer-events: none;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.cb-case-opt-name {
    font-size: 0.72rem; color: var(--pb-text); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; display: block;
}
.cb-case-opt-cost {
    font-size: 0.7rem; color: var(--pb-gold); margin-top: 2px; display: block;
}

/* Quantity controls */
.cb-qty-row {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 6px;
}
.cb-qty-btn {
    width: 22px; height: 22px; border-radius: 0; border: 1px solid var(--pb-border);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    background: var(--pb-bg); color: var(--pb-text); cursor: pointer;
    font-weight: 700; font-size: 0.8rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.cb-qty-btn:hover { border-color: var(--pb-gold); color: var(--pb-gold); }
.cb-qty-val {
    min-width: 22px; text-align: center; font-weight: 700; font-size: 0.85rem;
    color: var(--pb-gold);
}

/* Room Settings */
.cb-room-settings { display: flex; flex-direction: column; gap: 12px; }

.cb-setting-row {
    display: flex; justify-content: space-between; align-items: center;
}
.cb-setting-label { font-size: 0.85rem; color: var(--pb-text-dim); }
.cb-setting-value { font-size: 0.9rem; font-weight: 600; color: var(--pb-text); }

.cb-player-count-options { display: flex; gap: 6px; }
.cb-pc-btn {
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    width: 40px; height: 24px; border-radius: 0; border: 1px solid var(--pb-border);
    max-width:40px;
    background: var(--pb-surface2); color: var(--pb-text); cursor: pointer;
    font-weight: 600; font-size: 0.8rem; transition: all 0.2s;
    font-family: inherit; text-transform: none;
}
.cb-pc-btn:hover { border-color: var(--pb-gold); }
.cb-pc-btn.active { background: var(--pb-gold); color: #000; border-color: var(--pb-gold); }

/* ═══ Mode Toggle Sliders (Crazy & Exclusive) ═══ */
.cb-mode-options {
    display: flex; gap: 16px; align-items: center;
}

/* The toggle wrapper — looks like a label but wraps the checkbox + slider + text */
.cb-mode-toggle {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    transition: all 0.2s;
}
.cb-mode-toggle input[type="checkbox"] {
    opacity: 0; width: 0; height: 0; position: absolute;
}

/* The slider track */
.cb-mode-toggle-slider {
    position: relative; display: inline-block;
    width: 48px; height: 26px; flex-shrink: 0;
    background: #1e293b;
    border-radius: 26px;
    border: 2px solid #334155;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
/* The slider knob */
.cb-mode-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px; width: 18px;
    left: 2px; bottom: 2px;
    background: #64748b;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* The label text */
.cb-mode-toggle-label {
    font-size: 0.8rem; font-weight: 600; color: #64748b;
    transition: color 0.3s;
    white-space: nowrap;
}

/* ── Crazy Mode (Green) ── */
.cb-mode-toggle--crazy input:checked + .cb-mode-toggle-slider {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
    box-shadow: 0 0 16px rgba(34,197,94,0.45), 0 0 4px rgba(34,197,94,0.6);
}
.cb-mode-toggle--crazy input:checked + .cb-mode-toggle-slider::before {
    transform: translateX(22px);
    background: #fff;
    box-shadow: 0 0 8px rgba(34,197,94,0.8);
}
.cb-mode-toggle--crazy input:checked ~ .cb-mode-toggle-label {
    color: #22c55e;
    text-shadow: 0 0 8px rgba(34,197,94,0.4);
}

/* ── Exclusive Mode (Gold) ── */
.cb-mode-toggle--exclusive input:checked + .cb-mode-toggle-slider {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border-color: #fbbf24;
    box-shadow: 0 0 16px rgba(251,191,36,0.45), 0 0 4px rgba(251,191,36,0.6);
}
.cb-mode-toggle--exclusive input:checked + .cb-mode-toggle-slider::before {
    transform: translateX(22px);
    background: #fff;
    box-shadow: 0 0 8px rgba(251,191,36,0.8);
}
.cb-mode-toggle--exclusive input:checked ~ .cb-mode-toggle-label {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251,191,36,0.4);
}

/* ── OFF state labels ── */
.cb-mode-toggle--crazy input:not(:checked) ~ .cb-mode-toggle-label {
    color: #475569;
}
.cb-mode-toggle--exclusive input:not(:checked) ~ .cb-mode-toggle-label {
    color: #475569;
}

/* Hover glow on the slider track */
.cb-mode-toggle:hover .cb-mode-toggle-slider {
    border-color: #475569;
}
.cb-mode-toggle--crazy:hover input:not(:checked) + .cb-mode-toggle-slider {
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.2);
}
.cb-mode-toggle--exclusive:hover input:not(:checked) + .cb-mode-toggle-slider {
    border-color: #fbbf24;
    box-shadow: 0 0 8px rgba(251,191,36,0.2);
}

/* ── Team Mode Player Count Buttons ── */
.cb-pc-btn.cb-pc-team.active {
    background: linear-gradient(135deg, #4a90d9, #2856a3);
    color: #fff;
    border-color: #4a90d9;
}

/* ── Team Selection Buttons ── */
#cb-team-select-row {
    margin-top: 6px;
}
.cb-team-options { display: flex; gap: 8px; }
.cb-team-btn {
    padding: 8px 18px; border-radius: 6px;
    border: 2px solid var(--pb-border); background: var(--pb-surface2);
    color: var(--pb-text); cursor: pointer; font-size: 0.85rem;
    font-weight: 600; transition: all 0.2s;
}
.cb-team-btn:hover { opacity: 0.85; }
.cb-team-btn.active[data-team="CT"] {
    background: linear-gradient(135deg, #1a4a8a, #2a6ac5);
    border-color: #4a90d9; color: #fff;
    box-shadow: 0 0 12px rgba(74, 144, 217, 0.4);
}
.cb-team-btn.active[data-team="T"] {
    background: linear-gradient(135deg, #8a2a1a, #c54a2a);
    border-color: #c54a2a; color: #fff;
    box-shadow: 0 0 12px rgba(197, 74, 42, 0.4);
}

/* ── Team Join Buttons in Room List ── */
.cb-room-join-ct {
    background: linear-gradient(135deg, #1a4a8a, #2a6ac5);
    border-color: #4a90d9;
    color: #fff;
}
.cb-room-join-t {
    background: linear-gradient(135deg, #8a2a1a, #c54a2a);
    border-color: #c54a2a;
    color: #fff;
}
.cb-room-join-team {
    background: linear-gradient(135deg, #4a90d9, #c54a2a);
    border-color: #8a6ad9;
    color: #fff;
}

/* ── Team Badges in Arena ── */
.cb-badge-team-ct {
    background: linear-gradient(135deg, #1a4a8a, #2a6ac5);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
}
.cb-badge-team-t {
    background: linear-gradient(135deg, #8a2a1a, #c54a2a);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ── Team Room Card ── */
.cb-room-card-team {
    border-left: 2px solid #4a90d9;
}

/* ── Team Selection Popup ── */
.cb-team-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
}
.cb-team-popup-box {
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: 16px;
    padding: 32px 40px;
    text-align: center;
    max-width: 500px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cb-team-popup-title {
    font-family: "Montserrat", sans-serif;
    font-size: 1.4rem; font-weight: 800;
    color: var(--pb-text);
    margin-bottom: 4px;
}
.cb-team-popup-subtitle {
    font-size: 0.8rem; color: var(--pb-text-dim);
    margin-bottom: 24px;
}
.cb-team-popup-options {
    display: flex; align-items: center; gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}
.cb-team-popup-btn {
    flex: 1; max-width: 180px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 18px 14px;
    border-radius: 12px;
    border: 2px solid var(--pb-border);
    background: var(--pb-surface2);
    color: var(--pb-text);
    cursor: pointer;
    transition: all 0.2s;
}
.cb-team-popup-btn:hover {
    transform: translateY(-2px);
}
.cb-team-popup-ct:hover,
.cb-team-popup-ct.selected {
    border-color: #4a90d9;
    background: linear-gradient(135deg, rgba(26,74,138,0.4), rgba(42,106,197,0.3));
    box-shadow: 0 0 20px rgba(74,144,217,0.35);
}
.cb-team-popup-t:hover,
.cb-team-popup-t.selected {
    border-color: #c54a2a;
    background: linear-gradient(135deg, rgba(138,42,26,0.4), rgba(197,74,42,0.3));
    box-shadow: 0 0 20px rgba(197,74,42,0.35);
}
.cb-team-popup-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
}
/* Team header icon (arena CT/T labels) */
.cb-team-header-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 2px;
}
.cb-team-popup-label {
    font-family: "Montserrat", sans-serif;
    font-size: 0.85rem; font-weight: 700;
}
.cb-team-popup-hint {
    font-size: 0.65rem; color: var(--pb-text-dim);
    min-height: 1em;
}
.cb-team-popup-vs {
    font-family: "Orbitron", sans-serif;
    font-size: 1rem; font-weight: 900;
    color: var(--pb-text-dim);
    flex-shrink: 0;
}
.cb-team-popup-cancel {
    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem; font-weight: 600;
    padding: 8px 24px; border-radius: 6px;
    border: 1px solid var(--pb-border);
    background: transparent; color: var(--pb-text-dim);
    cursor: pointer; transition: all 0.2s;
}
.cb-team-popup-cancel:hover {
    color: var(--pb-text);
    border-color: var(--pb-text-dim);
}

/* ── Arena Team Divider ── */
.cb-team-section {
    display: flex; flex-direction: column;
    width: calc(50% - 8px); min-width: 0; flex-shrink: 0;
}
.cb-team-section-header {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(4px, 1vw, 10px);
    flex-wrap: nowrap;
    padding: 8px 0; margin: 8px 0 4px;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(0.6rem, 1.5vw, 0.75rem); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    white-space: nowrap;
}
/* Responsive team label: full text on wide screens, short on narrow */
.cb-team-text-short { display: none; }
@media (max-width: 600px) {
    .cb-team-text-full { display: none; }
    .cb-team-text-short { display: inline; }
}
.cb-team-section-header.ct {
    flex-wrap: nowrap;
    color: #4a90d9;
}
.cb-team-section-header.t {
    flex-wrap: nowrap;
    color: #e06040;
}
.cb-team-section-header .cb-team-divider-line {
    flex: 1; height: 1px;
    background: currentColor; opacity: 0.3;
}
.cb-team-divider-vs {
    display: flex; gap: clamp(10px, 2vw, 20px);
    padding: 6px 0; margin: 2px 0 8px;
    justify-content: center;
    flex-shrink: 0;
    width: calc(3% - 8px); min-width: 5px;
}
.cb-team-divider-vs .cb-team-divider-line {
    flex: 1; height: 2px;
    background: linear-gradient(90deg, #4a90d9, #c54a2a);
    border-radius: 1px;
}
.cb-team-divider-vs .cb-team-divider-vs-text {
    font-family: "Orbitron", sans-serif;
    font-size: 0.75rem; font-weight: 900;
    color: var(--pb-text-dim);
    flex-shrink: 0;
    padding: 4px 14px;
}
.cb-team-section .cb-player-slot {
    margin-bottom: 6px;
}

/* Case Sequence Bar */
.cb-case-sequence-bar {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    background: var(--pb-surface); border: 1px solid var(--pb-border);
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0% 100%);
    padding: 8px 14px; margin-bottom: 16px;
    overflow: hidden;
}

/* Crazy Mode sequence bar */
.cb-case-sequence-bar.crazy-mode {
    background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(74,222,128,0.06));
    border-color: rgba(74,222,128,0.35);
}
.cb-case-sequence-bar.crazy-mode::after {
    content: 'CRAZY MODE';
    position: absolute; top: -1px; right: -1px;
    background: var(--pb-green);
    color: #0a0c14;
    font-size: 0.55rem; font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
    pointer-events: none;
    z-index: 2;
}

/* Standard Mode sequence bar */
.cb-case-sequence-bar.standard-mode {
    background: linear-gradient(135deg, rgba(74,144,217,0.12), rgba(74,144,217,0.04));
    border-color: rgba(74,144,217,0.25);
}
.cb-case-sequence-bar.standard-mode::after {
    content: 'STANDARD MODE';
    position: absolute; top: -1px; right: -1px;
    background: var(--pb-blue);
    color: #fff;
    font-size: 0.55rem; font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
    pointer-events: none;
    z-index: 2;
}
.cb-round-badge {
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    flex-shrink: 0; padding: 6px 14px; border-radius: 0;
    background: var(--pb-gold); color: #000; font-weight: 700;
    font-size: 0.8rem; white-space: nowrap;
}
.cb-case-sequence-track {
    display: flex; gap: 6px; overflow-x: auto; flex: 1;
    padding: 4px 0;
}
.cb-case-sequence-track::-webkit-scrollbar { height: 3px; }
.cb-case-sequence-track::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }

.cb-case-seq-item {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 0;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    border: 2px solid var(--pb-border); background: var(--pb-surface2);
    display: flex; align-items: center; justify-content: center;
    padding: 4px; transition: all 0.3s; position: relative;
    opacity: 0.45;
}
.cb-case-seq-item img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 4px;
}
/* Base image for custom case seq items */
.cb-seq-img-base {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 4px;
}
.cb-seq-overlay-emoji {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.9rem; pointer-events: none; z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.cb-seq-overlay-img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70%; height: 70%; object-fit: contain; pointer-events: none; z-index: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.cb-case-seq-item.current {
    opacity: 1; border-color: var(--pb-gold);
    box-shadow: 0 0 14px rgba(191,255,0,0.4);
    transform: scale(1.12);
    z-index: 2;
}
.cb-case-seq-item.done {
    opacity: 0.75; border-color: var(--pb-green);
}
.cb-case-seq-item .cb-seq-index {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--pb-surface); border: 1px solid var(--pb-border);
    font-size: 0.55rem; font-weight: 700; color: var(--pb-text-dim);
    display: flex; align-items: center; justify-content: center;
}

.cb-create-room-btn {
    width: 100%; padding: 14px; border-radius: 0; border: none;
    background: linear-gradient(135deg, #86c4ff, #0084ff);
    color: #000; font-family: inherit; font-size: 0.85rem; font-weight: 600;
    cursor: pointer; margin-top: 10px; transition: all 0.2s;
}
.cb-create-room-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(191,255,0,0.3); }
.cb-create-room-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ═══ Lobby Tabs ═══ */
.cb-lobby-tabs {
    display: flex; gap: 0; margin-bottom: 20px;
    border-bottom: 1px solid var(--pb-border);
}
.cb-lobby-tab {
    padding: 10px 28px; border: none; background: transparent;
    color: var(--pb-text-dim); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: all 0.2s; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.05em;
    position: relative; top: 1px;
}
.cb-lobby-tab:hover { color: var(--pb-text); }
.cb-lobby-tab.active {
    color: var(--pb-gold); border-bottom-color: var(--pb-gold);
}

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

/* Room count badge on tab */
.cb-room-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px;
    background: #ef4444; color: #fff;
    font-size: 0.7rem; font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
}

/* Room List tab: full-height rooms list */
#cb-tab-rooms .cb-rooms-list { max-height: 520px; }

/* Existing Room List */
.cb-rooms-list { max-width: 1500px; max-height: 300px; overflow-y: auto; }
.cb-rooms-list::-webkit-scrollbar { width: 4px; }
.cb-rooms-list::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }

.cb-room-card {
    position: relative;
    border: 1px solid var(--pb-border); border-radius: 0;
    padding: 14px; margin-bottom: 10px; background: var(--pb-surface2);
    display: flex; justify-content: space-between; align-items: center;
    transition: all 0.2s;
}
.cb-room-card:hover { border-color: var(--pb-gold-dim); }

.cb-room-info {
    flex: 1; display: flex; gap: 20px; align-items: center;
    padding-left: 10px; min-width: 0;
}
.cb-room-info-col { flex-shrink: 0; }
.cb-room-host { font-weight: 600; margin-bottom: 4px; }
.cb-room-meta { font-size: 0.8rem; color: var(--pb-text-dim); line-height: 1.5; }

/* Case Sequence Preview Strip (horizontal in room cards) */
.cb-room-case-previews {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: nowrap; overflow: hidden; flex: 1;
}
.cb-room-case-preview {
    flex-shrink: 0; width: 64px; height: 64px;
    border-radius: 4px; border: 1px solid var(--pb-border);
    background: var(--pb-bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
}
.cb-room-case-preview img {
    width: 100%; height: 100%; object-fit: contain;
}
/* Custom case design layers inside room case preview */
.cb-room-case-preview .cb-case-preview-base {
    width: 100%; height: 100%; object-fit: cover;
}
.cb-room-case-preview .cb-case-preview-emoji {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.1rem; pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.cb-room-case-preview .cb-case-preview-overlay-img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60%; height: 60%; object-fit: contain; pointer-events: none;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.cb-room-case-more {
    flex-shrink: 0; font-size: 0.65rem; font-weight: 600;
    color: var(--pb-text-dim); padding: 0 4px;
    white-space: nowrap;
}

/* Crazy Mode room card */
.pb-room-card-crazy {
    background: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(74,222,128,0.06));
    border-color: rgba(74,222,128,0.35);
}
.pb-room-card-crazy:hover {
    border-color: var(--pb-green);
    box-shadow: 0 0 14px rgba(74,222,128,0.12);
}

/* CRAZY MODE floating badge (top-right) */
.pb-room-card-crazy::after {
    content: 'CRAZY MODE';
    position: absolute; top: -1px; right: -1px;
    background: var(--pb-green);
    color: #0a0c14;
    font-size: 0.55rem; font-weight: 800;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
    pointer-events: none;
    z-index: 2;
}

.cb-room-join-btn {
    padding: 8px 20px; border-radius: 0; border: 1px solid var(--pb-green);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    background: rgba(74,222,128,0.1); color: var(--pb-green);
    font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
    flex-shrink: 0; white-space: nowrap;
}
.cb-room-join-btn:hover { background: rgba(74,222,128,0.2); }
.cb-room-join-btn:disabled { opacity: 0.4; cursor: not-allowed; background: rgba(74,222,128,0.05); }
.cb-room-join-btn .cb-join-cost {
    color: var(--pb-gold);
}

.cb-room-actions {
    display: flex; gap: 6px; flex-shrink: 0; align-items: center;
}
.cb-room-spectate-btn {
    padding: 8px 20px; border-radius: 0; border: 1px solid var(--pb-purple);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
    background: rgba(167,139,250,0.1); color: var(--pb-purple);
    font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
    white-space: nowrap; flex-shrink: 0;
}
.cb-room-spectate-btn:hover { background: rgba(167,139,250,0.2); }

.cb-no-rooms { text-align: center; color: var(--pb-text-dim); padding: 30px; font-size: 0.9rem; }

/* ======== RECONNECT BANNER ======== */
.cb-reconnect-banner {
    background: linear-gradient(135deg, rgba(240,192,64,0.12), rgba(240,192,64,0.04));
    border: 1px solid rgba(240,192,64,0.35);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    animation: pb-reconnect-pulse 2s ease-in-out infinite;
}
@keyframes pb-reconnect-pulse {
    0%, 100% { border-color: rgba(240,192,64,0.35); }
    50% { border-color: rgba(240,192,64,0.7); }
}
.cb-reconnect-banner-content {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cb-reconnect-icon { font-size: 1.2rem; }
.cb-reconnect-text {
    color: #f0c040; font-weight: 600; font-size: 0.85rem;
}
.cb-reconnect-room {
    color: var(--pb-text-dim); font-size: 0.75rem;
}
.cb-reconnect-status {
    color: #4ade80; font-size: 0.7rem; margin-left: auto;
}
.cb-reconnect-btn {
    background: linear-gradient(135deg, #f0c040, #d4a020);
    color: #0a0a0a;
    border: none; border-radius: 6px;
    padding: 6px 16px;
    font-size: 0.8rem; font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.cb-reconnect-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(240,192,64,0.4);
}

/* ======== ARENA ======== */
/* max-width supports 4×260px slots + 3×12px gaps + 2×16px padding ≈ 1108px */
.cb-arena { max-width: 1200px; margin: 0 auto; padding: 80px clamp(8px, 2vw, 16px) 16px; }
.cb-arena.hidden { display: none; }

.cb-arena-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.cb-arena-title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cb-arena-round {
    color: var(--pb-text-dim); font-size: 0.85rem;
}

/* Spectator count — floating trapezoid at bottom center of case sequence bar */
.cb-spectator-count {
    position: absolute; bottom: 0px;left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px;
    font-size: 0.7rem; color: var(--pb-text-dim);
    background: var(--pb-surface2); border: 1px solid var(--pb-border);
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0% 100%);
    padding: 3px 12px;
    cursor: default; user-select: none;
    transition: all 0.25s;
    z-index: 3;
    white-space: nowrap;
}
.cb-spectator-count.has-spectators {
    color: var(--pb-purple);
    border-color: rgba(167,139,250,0.3);
    background: rgba(167,139,250,0.08);
}
.cb-spectator-count.has-spectators:hover {
    border-color: rgba(167,139,250,0.55);
    box-shadow: 0 0 8px rgba(167,139,250,0.15);
}
#cb-spec-count-num {
    font-weight: 700;
    font-size: 0.9rem;
}

/* Arena Gamemode Label */
.cb-arena-gamemode {
    display: none;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cb-arena-gamemode.crazy {
    display: inline;
    color: var(--pb-gamemode-crazy);
}

/* Player slots grid — 4-up on any screen: flex 1-1-0 + fluid gap + min-width */
.cb-players-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(4px, 1.2vw, 12px); margin-bottom: 20px;
    width: 100%;
}
.cb-player-slot {
    /* flex 1-1-0: grow/shrink equally — 4 slots fit on phones (≥72px each) */
    flex: 1 1 0;
    max-width: 320px;
    min-width: 72px;
    /* background: var(--pb-player-bg); border: 2px solid var(--pb-border); */
    padding: 12px 8px; text-align: center;
    position: relative; overflow: hidden; min-height: 220px;
    display: flex; flex-direction: column; align-items: center;
}
.cb-player-slot.winner {
    border-color: var(--pb-gold);
    box-shadow: 0 0 30px rgba(191,255,0,0.25);
    animation: pb-glow-pulse 1.5s ease-in-out infinite;
}
@keyframes pb-glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(191,255,0,0.2); }
    50% { box-shadow: 0 0 40px rgba(191,255,0,0.45); }
}

.cb-player-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    z-index: 2;
}
.cb-player-avatar {
    width: 54px; height: 54px; border-radius: 50%; background: var(--pb-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; border: 2px solid var(--pb-border);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.cb-player-avatar img {
    width: 100%; height: 100%; object-fit: contain; border-radius: 50%;
}
.cb-player-banner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 108px;  /* 200% of 54px avatar */
    object-fit: cover;
    opacity: 0.55;
    background: rgba(30, 41, 59, 0.6);
    z-index: 1;
    pointer-events: none;
}
/* ── Banner Effect Video Overlay (premium/membership only) ── */
.cb-player-banner-effect {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 108px;
    object-fit: cover;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}
.cb-player-name {
    font-weight: 600; font-size: 0.9rem; margin-bottom: 2px;
    min-height: 1.3em; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
}
.cb-player-label {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--pb-text-dim); margin-bottom: 4px;
}
.cb-player-badge {
    font-size: 0.7rem; padding: 0px 8px; border-radius: 0;
    background: rgba(191,255,0,0.15); color: var(--pb-gold);
    margin-bottom: 10px;
}
/* ── Membership Badge in Player Slot ── */
.cb-player-membership-badge {
    position: absolute;
    top: 4px; left: 4px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 3px;
    pointer-events: none;
}
.cb-player-membership-badge.silver {
    background: rgba(192, 192, 192, 0.50);
    color: #c0c0c0;
    border: 1px solid rgba(192, 192, 192, 0.4);
}
.cb-player-membership-badge.gold {
    background: rgba(255, 215, 0, 0.50);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    animation: cb-membership-pulse 2s ease-in-out infinite;
}
.cb-player-membership-badge.diamond {
    background: rgba(185, 242, 255, 0.50);
    color: #b9f2ff;
    border: 1px solid rgba(185, 242, 255, 0.5);
    animation: cb-membership-pulse 2s ease-in-out infinite;
}
@keyframes cb-membership-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.35); }
}
/* ── Join button on empty player slots (spectator clicks to fill) ── */
.cb-slot-join-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 12px rgba(74,222,128,0.4);
    position: relative; z-index: 6;
}
.cb-slot-join-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(74,222,128,0.6);
    background: linear-gradient(135deg, #5ef78e, #2dd46a);
}
.cb-badge-you {
    background: rgba(74,222,128,0.15); color: var(--pb-green);
}
.cb-badge-player {
    background: rgba(74,144,217,0.15); color: var(--pb-blue);
}
.cb-badge-disconnected {
    background: rgba(248,113,113,0.2); color: #f87171;
}

/* Badge row: badge + vote indicator side by side */
.cb-badge-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
    justify-content: center;
    min-height: 24px; /* reserve space so roulette containers align across slots */
}

/* ── Slot Overlay: floats indicators + join button over roulette ── */
.cb-slot-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; pointer-events: none;
}
/* Allow buttons inside overlay to be clickable */
.cb-slot-overlay > button,
.cb-slot-overlay > .cb-slot-join-btn {
    pointer-events: auto;
}

/* ── Pulsing text animation ── */
@keyframes cb-pulse-label {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.8; }
}

/* Vote indicator — floating center of roulette, hidden until voting active */
.cb-vote-indicator {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    user-select: none; pointer-events: none;
    background: rgba(0,0,0,0.55); padding: 8px 14px;
    border-radius: 8px; transition: all 0.2s ease;
}
.cb-vote-check {
    font-size: 1.4rem; color: var(--pb-text-dim);
    transition: all 0.2s ease;
}
.cb-vote-indicator.voted .cb-vote-check {
    color: var(--pb-green);
    text-shadow: 0 0 10px rgba(74,222,128,0.5);
}
.cb-vote-label {
    font-size: 0.6rem; color: var(--pb-text-dim);
    font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: cb-pulse-label 2s ease-in-out infinite;
}

/* Start-vote indicator — floating center of roulette */
.cb-start-vote-indicator {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    user-select: none; pointer-events: none;
    background: rgba(0,0,0,0.55); padding: 8px 14px;
    border-radius: 8px; transition: all 0.2s ease;
}
.cb-start-vote-check {
    font-size: 1.4rem; color: var(--pb-text-dim);
    transition: all 0.2s ease;
}
.cb-start-vote-indicator.voted .cb-start-vote-check {
    color: #818cf8;
    text-shadow: 0 0 10px rgba(129,140,248,0.5);
}
.cb-start-vote-label {
    font-size: 0.6rem; color: var(--pb-text-dim);
    font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em;
    animation: cb-pulse-label 2s ease-in-out infinite;
}

/* Roulette Scroller — VERTICAL (dynamic height based on viewport) */
.cb-roulette-v-container {
    width: 100%; height: min(400px, 42vh); overflow: hidden; position: relative;
    border-radius: 0; background: var(--pb-bg); margin: 0 auto 8px;
    border: 1px solid var(--pb-border);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    contain: layout style;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── Exclusive Card Overlay (inside pb-roulette-v-container) ── */
.cb-exclusive-card-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    animation: pb-exclusive-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: opacity 0.4s ease;
    /* background: radial-gradient(ellipse at center, rgba(255,215,0,0.15) 0%, transparent 70%); */
    background-color: transparent;
}
@keyframes pb-exclusive-card-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.cb-exclusive-card-img {
    max-width: 80%; max-height: 65%;
    object-fit: contain;
    animation: pb-exclusive-card-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes pb-exclusive-card-pulse {
    from { filter: brightness(1) drop-shadow(0 0 8px rgba(255,215,0,0.5)); }
    to   { filter: brightness(1.2) drop-shadow(0 0 16px rgba(255,215,0,0.8)); }
}
.cb-exclusive-card-fallback {
    display: flex; align-items: center; justify-content: center;
    width: 80%; height: 65%;
}
.cb-exclusive-card-fallback-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.4rem; font-weight: 900;
    color: var(--pb-gold);
    text-shadow: 0 0 20px rgba(255,215,0,0.7), 0 0 40px rgba(255,215,0,0.4);
    animation: pb-exclusive-card-pulse 0.8s ease-in-out infinite alternate;
}
.cb-exclusive-card-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem; font-weight: 700;
    color: var(--pb-gold);
    letter-spacing: 0.15em;
    margin-top: 8px;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

/* ── Shimmer light sweep across exclusive card image ── */
.cb-exclusive-card-shimmer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 25%;
    z-index: 12;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255,255,255,0.15) 20%,
        rgba(255,255,255,0.7) 45%,
        rgba(255,255,255,0.95) 50%,
        rgba(255,255,255,0.7) 55%,
        rgba(255,255,255,0.15) 80%,
        transparent 100%
    );
    border-radius: 3px;
    transform: translate(-50%, -50%) skewX(-4deg);
    animation: pb-shimmer-sweep 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.2s;
}
@keyframes pb-shimmer-sweep {
    0%   { left: 0%; opacity: 0.3; }
    15%  { opacity: 1; }
    70%  { opacity: 0.9; }
    100% { left: 100%; opacity: 0; }
}

.cb-roulette-v-container::after {
    content: '';
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0% 100%);
    border: 2px solid var(--pb-gold-dim);
}
.cb-roulette-v-item {
    width: 100%; height: 192px; min-height: 192px; display: flex;
    align-items: center; justify-content: center; gap: 10px;
    box-sizing: border-box; position: relative;
    flex-shrink: 0;
}
.cb-roulette-v-track {
    position: absolute; top: 0; left: 0; width: 100%;
    box-sizing: border-box;
    transition: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── Tier background shape (hexagonal item container behind image) ── */
.item-container {
    position: absolute;
    width: 131px;
    height: 150px;
    z-index: 0;
    box-sizing: border-box;

    /* Dark near-black background */
    background: #0d1117;

    /* Hexagon clip-path */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    /* Inner shadow / glow */
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);

    /* Default border (overridden by tier classes) */
    border: 2px solid #444;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* ── 4-Layer tier-coloured background (modern, minimal, compliments preview image) ── */

/* Container: matches image size, centered behind it */
.cb-roulette-v-bg-wrap {
    position: absolute;
    width: 151px;
    height: 151px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

/* L1 — Ambient glow: soft radial halo in tier colour, deepest layer */
.cb-roulette-v-l1 {
    position: absolute;
    inset: 4px;
    z-index: 0;
    pointer-events: none;
    background: var(--pb-tier-l1);
    border-radius: 6px;
}

/* L2 — Geometric frame: parallelogram with tier gradient fill */
.cb-roulette-v-l2 {
    position: absolute;
    inset: 22px;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
    background: var(--pb-tier-l2);
}

/* L3 — Accent stroke: thin parallelogram border with shimmer gradient */
.cb-roulette-v-l3 {
    position: absolute;
    inset: 32px;
    z-index: 2;
    pointer-events: none;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
    background: var(--pb-tier-l3);
    /* rendered as a 1px stroke via two nested clip-paths */
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    padding: 1px;
}

/* L4 — Core vignette: dark backdrop behind image, inner shadow for depth */
.cb-roulette-v-l4 {
    position: absolute;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0% 100%);
    inset: 25px;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%);
    border-radius: 4px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.45);
}
/* Left-side border fade overlay */
.item-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(to right, rgba(13, 17, 23, 0.75) 0%, rgba(13, 17, 23, 0.35) 30%, transparent 60%);
}
/* Top-left subtle light artifact */
.item-container::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 22%;
    width: 30%;
    height: 18%;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.10) 0%, transparent 70%);
    border-radius: 50%;
    transform: rotate(-15deg);
}

/* ── Tier-specific styles ── */
.tier-common {
    border-color: #555;
    background:
        radial-gradient(circle at 50% 45%, rgba(85,85,85,0.45) 0%, rgba(51,51,51,0.20) 60%, #0d1117 100%),
        #0d1117;
}
.tier-industrial {
    border-color: #b0fff2;
    background:
        radial-gradient(circle at 50% 45%, rgba(176,255,242,0.35) 0%, rgba(88,166,155,0.18) 60%, #0d1117 100%),
        #0d1117;
}
.tier-milspec {
    border-color: #4169e1;
    background:
        radial-gradient(circle at 50% 45%, rgba(65,105,225,0.40) 0%, rgba(26,54,142,0.20) 60%, #0d1117 100%),
        #0d1117;
}
.tier-rare {
    border-color: #4169e1;
    background:
        radial-gradient(circle at 50% 45%, rgba(65,105,225,0.42) 0%, rgba(26,54,142,0.22) 60%, #0d1117 100%),
        #0d1117;
}
.tier-restricted {
    border-color: #9400d3;
    background:
        radial-gradient(circle at 50% 45%, rgba(148,0,211,0.42) 0%, rgba(74,0,106,0.22) 60%, #0d1117 100%),
        #0d1117;
}
.tier-epic {
    border-color: #9400d3;
    background:
        radial-gradient(circle at 50% 45%, rgba(148,0,211,0.45) 0%, rgba(74,0,106,0.25) 60%, #0d1117 100%),
        #0d1117;
}
.tier-classified {
    border-color: rgb(255, 0, 221);
    background:
        radial-gradient(circle at 50% 45%, rgba(255,0,221,0.40) 0%, rgba(128,0,110,0.22) 60%, #0d1117 100%),
        #0d1117;
}
.tier-covert {
    border-color: #eb4b4b;
    background:
        radial-gradient(circle at 50% 45%, rgba(235,75,75,0.42) 0%, rgba(118,38,38,0.22) 60%, #0d1117 100%),
        #0d1117;
}
.tier-legendary {
    border-color: #ffd700;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,215,0,0.45) 0%, rgba(230,190,0,0.24) 60%, #0d1117 100%),
        #0d1117;
}
.cb-roulette-v-item img {
    position: relative; z-index: 4;
    max-width: 150px; max-height: 150px; width: auto; height: auto;
    object-fit: contain;
    flex-shrink: 0; transition: transform 0.3s ease;
}

/* ── Exclusive item in roulette track ── */
.cb-exclusive-item {
    position: relative;
}
.cb-exclusive-glow {
    position: absolute; inset: 0; z-index: 0;
    /* background: radial-gradient(ellipse at center, rgba(255,215,0,0.15) 0%, transparent 70%);
     */
    animation: pb-exclusive-glow-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pb-exclusive-glow-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.cb-exclusive-preview-img {
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.5)) brightness(1.1);
    animation: pb-exclusive-preview-shine 2s ease-in-out infinite;
}
@keyframes pb-exclusive-preview-shine {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255,215,0,0.5)) brightness(1.1); }
    50% { filter: drop-shadow(0 0 14px rgba(255,215,0,0.8)) brightness(1.2); }
}
/* ── Item info overlay: container-level, pinned to center-bottom of roulette ── */
.cb-roulette-v-container > .cb-roulette-v-item-info {
    position: absolute; bottom: 10px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    text-align: center; min-width: 0;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    background: rgba(0,0,0,0.75);
    /* Fluid padding: scales from phone → 4K */
    padding: clamp(3px, 0.5vh, 6px) clamp(8px, 1.5vw, 14px);
    border-radius: 4px; width: 90%;
    max-width: 90%; z-index: 6;
}
/* Per-item info inside the track — invisible, used only as a data source for the overlay */
.cb-roulette-v-item .cb-roulette-v-item-info {
    display: none;
}
.cb-roulette-v-item-name {
    /* Fluid: 0.6rem (phone) → 0.85rem (4K) */
    font-size: clamp(0.6rem, 1.4vw, 0.85rem);
    color: var(--pb-text); white-space: normal;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    font-weight: 500; line-height: 1.2;
    display: block;
}
.cb-roulette-v-item-type {
    /* Fluid: 0.48rem (phone) → 0.65rem (4K) */
    font-size: clamp(0.48rem, 1vw, 0.65rem);
    font-weight: 375;
}
.cb-roulette-v-item-value {
    /* Fluid: 0.58rem (phone) → 0.8rem (4K) */
    font-size: clamp(0.58rem, 1.2vw, 0.8rem);
    color: var(--pb-gold); font-weight: 600;
}
.cb-roulette-v-item-wear {
    /* Fluid: 0.52rem (phone) → 0.7rem (4K) */
    font-size: clamp(0.52rem, 1.05vw, 0.7rem);
    color: var(--pb-text-dim, #aaa);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.cb-roulette-v-indicator {
    display: none;
}

/* Fade mask overlay on top of roulette (rectangle with faded top/bottom) */
.cb-roulette-v-mask {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(
        to bottom,
        var(--pb-bg) 0%,
        transparent 15%,
        transparent 85%,
        var(--pb-bg) 100%
    );
    opacity: 0.9;
}

/* Sparkle explosion for high-value prizes (>200 pts) */
.cb-roulette-v-item.cb-explosion {
    animation: pb-explode 1s ease-out forwards;
    position: relative;
    z-index: 3;
}

/* ── Yellow side highlight lights (persist until next roll) ── */
/* Rendered on the container via ::before so the spheres aren't cropped by item overflow */
.cb-roulette-v-container.cb-highlight::before,
.cb-roulette-v-container.cb-highlight-out::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(ellipse 30% 45% at 0% 50%, rgba(255,215,0,0.7) 0%, rgba(255,200,0,0.3) 15%, transparent 35%),
        radial-gradient(ellipse 30% 45% at 100% 50%, rgba(255,215,0,0.7) 0%, rgba(255,200,0,0.3) 15%, transparent 35%);
}
.cb-roulette-v-container.cb-highlight::before {
    animation: cb-highlight-in 0.25s ease-out;
}
.cb-roulette-v-container.cb-highlight-out::before {
    animation: cb-highlight-out 0.3s ease-out forwards;
}

@keyframes cb-highlight-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cb-highlight-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.cb-roulette-v-item.cb-explosion::before,
.cb-roulette-v-item.cb-explosion::after {
    content: '';
    position: absolute;
    inset: -20px;
    pointer-events: none;
    z-index: -1;
}
.cb-roulette-v-item.cb-explosion::before {
    background: radial-gradient(circle, rgba(255,215,0,0.9) 0%, rgba(255,140,0,0.6) 30%, rgba(255,69,0,0.2) 60%, transparent 100%);
    animation: pb-sparkle-burst 1s ease-out forwards;
}
.cb-roulette-v-item.cb-explosion::after {
    background:
        radial-gradient(2px 2px at 20% 30%, #fff 100%, transparent),
        radial-gradient(2px 2px at 70% 20%, #ffd700 100%, transparent),
        radial-gradient(3px 3px at 50% 80%, #ff8c00 100%, transparent),
        radial-gradient(2px 2px at 80% 60%, #fff 100%, transparent),
        radial-gradient(2px 2px at 10% 70%, #ffd700 100%, transparent),
        radial-gradient(3px 3px at 90% 40%, #ff4500 100%, transparent),
        radial-gradient(2px 2px at 30% 10%, #fff 100%, transparent),
        radial-gradient(2px 2px at 60% 90%, #ffd700 100%, transparent);
    animation: pb-sparkle-particles 1s ease-out forwards;
}
@keyframes pb-explode {
    0% { filter: brightness(1) saturate(1); }
    20% { filter: brightness(2.5) saturate(2); }
    60% { filter: brightness(1.8) saturate(1.5); }
    100% { filter: brightness(1) saturate(1); }
}
@keyframes pb-sparkle-burst {
    0% { opacity: 0; transform: scale(0.3); }
    30% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(2.5); }
}
@keyframes pb-sparkle-particles {
    0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    25% { opacity: 1; transform: scale(1.2) rotate(90deg); }
    50% { opacity: 0.8; transform: scale(1) rotate(180deg); }
    100% { opacity: 0; transform: scale(1.8) rotate(360deg); }
}

/* Rolled items list (persistent grid below each player) */
.cb-items-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 3px;
    margin-top: 8px;
    padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
/* clamp to max 3 columns on wider screens */
@media (min-width: 600px) {
    .cb-items-list { grid-template-columns: repeat(3, 1fr); }
}
.cb-items-list::-webkit-scrollbar { width: 3px; }
.cb-items-list::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }

/* ── Rolled Item Card (ref cb-loot-item-card) ── */
.cb-rolled-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 3px;
    box-sizing: border-box;
    background: #1a1d2e;
    border: 1px solid var(--pb-border);
    gap: 2px;
    min-width: 0;
    animation: pb-item-fade-in 0.3s ease-out;
    /* default fallback tier bg (overridden by data-tier) */
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.04) 100%);
}
/* Tier-based linear-gradient card backgrounds */
.cb-rolled-item[data-tier="common"],
.cb-rolled-item[data-tier="base"],
.cb-rolled-item[data-tier="consumer"] {
    background: linear-gradient(135deg, rgba(192,192,192,0.18) 0%, rgba(192,192,192,0.04) 50%, rgba(192,192,192,0.12) 100%),
                #1a1d2e;
}
.cb-rolled-item[data-tier="industrial"] {
    background: linear-gradient(135deg, rgba(176,255,242,0.18) 0%, rgba(176,255,242,0.04) 50%, rgba(176,255,242,0.12) 100%),
                #1a1d2e;
}
.cb-rolled-item[data-tier="rare"],
.cb-rolled-item[data-tier="milspec"] {
    background: linear-gradient(135deg, rgba(65,105,225,0.20) 0%, rgba(65,105,225,0.05) 50%, rgba(65,105,225,0.14) 100%),
                #1a1d2e;
}
.cb-rolled-item[data-tier="restricted"],
.cb-rolled-item[data-tier="epic"] {
    background: linear-gradient(135deg, rgba(148,0,211,0.20) 0%, rgba(148,0,211,0.05) 50%, rgba(148,0,211,0.14) 100%),
                #1a1d2e;
}
.cb-rolled-item[data-tier="classified"] {
    background: linear-gradient(135deg, rgba(255,0,221,0.20) 0%, rgba(255,0,221,0.05) 50%, rgba(255,0,221,0.14) 100%),
                #1a1d2e;
}
.cb-rolled-item[data-tier="covert"] {
    background: linear-gradient(135deg, rgba(235,75,75,0.20) 0%, rgba(235,75,75,0.05) 50%, rgba(235,75,75,0.14) 100%),
                #1a1d2e;
}
.cb-rolled-item[data-tier="legendary"] {
    background: linear-gradient(135deg, rgba(255,215,0,0.22) 0%, rgba(255,215,0,0.05) 50%, rgba(255,215,0,0.16) 100%),
                #1a1d2e;
}

@keyframes pb-item-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Image wrapper with tier radial-gradient bg ── */
.cb-rolled-item-img-bg {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px; padding: 3px;
    /* background set via inline style (tier_color) */
}
.cb-rolled-item-img-bg img {
    width: 42px; height: 42px;
    object-fit: contain; border-radius: 3px;
    position: relative; z-index: 1;
}

/* ── Item info ── */
.cb-rolled-item-name {
    font-family: "Montserrat", sans-serif;
    font-size: 0.50rem; font-weight: 600;
    color: var(--pb-text); text-align: center;
    line-height: 1.15; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
    white-space: normal;
    display: block;
    padding: 0 2px;
}
.cb-rolled-item-type {
    font-size: 0.38rem; font-weight: 450;
    color: var(--pb-text-dim);
}
.cb-rolled-item-name-main {
    font-weight: 600;
}
.cb-rolled-item-wear {
    font-family: "Montserrat", sans-serif;
    font-size: 0.43rem; color: var(--pb-text-dim);
    text-align: center;
}
.cb-rolled-item-val {
    font-family: "Montserrat", sans-serif;
    font-size: 0.58rem; font-weight: 700;
    color: var(--pb-gold);
    text-align: center;
}

/* ═══ PREVIEW POPUP (shared co-preview-popup styles with pb vars) ═══ */
.co-preview-popup {
    position: fixed;
    z-index: 900;
    background: var(--pb-surface);
    border: 1px solid var(--pb-gold-dim);
    clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0% 100%);
    min-width: 240px;
    max-width: 320px;
    max-height: 340px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.18s, transform 0.18s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 12px rgba(191,255,0,0.08);
}
.co-preview-popup.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.co-preview-popup-title {
    font-size: 0.75rem; font-weight: 700;
    color: var(--pb-gold);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pb-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.co-preview-popup-list {
    display: flex; flex-direction: column; gap: 5px;
}
.co-preview-popup-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px;
    border: 1px solid transparent;
    clip-path: polygon(1% 0, 100% 0, 99% 100%, 0% 100%);
    font-size: 0.7rem;
}
.co-preview-popup-item img {
    width: 28px; height: 28px; object-fit: contain;
    flex-shrink: 0;
}
.co-preview-popup-item-info {
    flex: 1;
    display: flex; flex-direction: column;
    min-width: 0;
}
.co-preview-popup-item-name {
    overflow: hidden; text-overflow: ellipsis; white-space: normal;
    color: var(--pb-text);
    font-weight: 500;
    font-size: 0.65rem;
}
.co-preview-popup-item-type {
    font-size: 0.48rem; font-weight: 450;
    color: var(--pb-text-dim);
}
.co-preview-popup-item-name-main {
    font-weight: 600;
}
.co-preview-popup-item-odds {
    font-weight: 700;
    flex-shrink: 0;
    min-width: 44px; text-align: right;
}
.co-preview-popup-item-value {
    font-size: 0.6rem;
    font-weight: 600;
    flex-shrink: 0;
    min-width: 45px; text-align: right;
}
.co-preview-popup-item-wear {
    font-size: 0.6rem; color: var(--pb-text-dim);
    flex-shrink: 0;
}

/* ═══ STATIC LOBBY PREVIEW (right panel in pb-lobby-grid) ═══ */
.co-preview-popup--static {
    position: static !important;
    z-index: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow-y: visible !important;
    border-color: var(--pb-border) !important;
    background: var(--pb-surface) !important;
    padding: 2px !important;
}
.co-preview-popup--static .co-preview-popup-list {
    min-height: 200px;
    max-height: 420px;
    overflow-y: auto;
}
.co-preview-popup--static .co-preview-popup-list::-webkit-scrollbar { width: 4px; }
.co-preview-popup--static .co-preview-popup-list::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }


/* Score display */
.cb-player-score {
    font-size: 0.85rem; color: var(--pb-text-dim); margin-top: 4px;
}
.cb-player-score .score-val {
    font-weight: 700; font-size: 1.1rem; color: var(--pb-gold);
    transition: all 0.3s;
}

/* Total value count-up (hidden until match completes) */
.cb-player-total {
    font-size: 1.4rem; font-weight: 800; margin-top: 6px;
    color: var(--pb-text); transition: all 0.3s;
    display: none;
}
.cb-player-total.revealed {
    display: block;
}
.cb-player-total.winning { color: var(--pb-gold); font-size: 1.6rem; }

/* Arena Buttons */
.cb-arena-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* Action buttons group — pushed to the right */
.cb-arena-actions {
    display: flex;
    margin-left: auto;
    align-items: center;
}

.cb-arena-buttons .cb-btn {
    align-items: right;
    flex: 0 0 auto;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cb-btn {
    padding: 12px 32px; border-radius: 0; border: none;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s;
}

/* ── Emoji Reaction Bar ── */
.cb-emoji-bar {
    display: flex; justify-content: center; gap: 4px;
    margin-left: 5px;
    margin: 0;
    flex-wrap: wrap;
}
.cb-emoji-btn {
    width: 44px; height: 44px; border: none; border-radius: 50%;
    background: transparent;
    font-size: 1.3rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
    user-select: none;
    padding: 0;
}
.cb-emoji-btn:hover {
    transform: scale(1.15);
}
.cb-emoji-btn:active {
    transform: scale(0.92);
    transition: transform 0.05s;
}
.cb-emoji-btn-img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    border-radius: 50%;
}

/* ── Flying Emoji Animation ── */
.cb-flying-emoji {
    position: fixed;
    z-index: 500;
    font-size: 1.6rem;
    pointer-events: none;
    animation: pb-emoji-fly 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    will-change: transform, opacity;
}
@keyframes pb-emoji-fly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.4);
    }
    15% {
        opacity: 1;
        transform: translate(var(--emoji-drift-x1, -20px), var(--emoji-drift-y1, -30px)) scale(1);
    }
    40% {
        opacity: 0.9;
        transform: translate(var(--emoji-drift-x2, 15px), var(--emoji-drift-y2, -70px)) scale(1.1);
    }
    70% {
        opacity: 0.5;
        transform: translate(var(--emoji-drift-x3, -10px), var(--emoji-drift-y3, -110px)) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(var(--emoji-drift-x4, 25px), var(--emoji-drift-y4, -150px)) scale(0.5);
    }
}

/* ── Spectator emoji burst (from spectator count) ── */
.cb-flying-emoji.from-spectator {
    animation-duration: 1.4s;
    font-size: 1.3rem;
}

/* ── Roulette Loading Mask (spectator/reconnect sync) ── */
.cb-roulette-loading-mask {
    position: absolute; inset: 0; z-index: 20;
    background: rgba(10, 12, 20, 0.85);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 12px;
    pointer-events: all;
    transition: opacity 0.5s ease;
    opacity: 1;
}
.cb-roulette-loading-mask.fade-out {
    opacity: 0;
    pointer-events: none;
}
.cb-roulette-loading-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--pb-border);
    border-top-color: var(--pb-gold);
    border-radius: 50%;
    animation: pb-spin 0.8s linear infinite;
}
.cb-roulette-loading-text {
    font-size: 0.72rem; color: var(--pb-text-dim);
    font-weight: 500; letter-spacing: 0.03em;
}
@keyframes pb-spin {
    to { transform: rotate(360deg); }
}
.cb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cb-btn-start {
    background: linear-gradient(135deg, var(--pb-green), #22b455);
    color: #000;
}
.cb-btn-start:hover:not(:disabled) { border-color: var(--pb-green); }
.cb-btn-bots {
    background: var(--pb-surface2); color: var(--pb-text);
    border: 1px solid var(--pb-border);
}
.cb-btn-bots:hover:not(:disabled) { border-color: var(--pb-gold); }
.cb-btn-leave {
    background: rgba(248,113,113,0.1); color: var(--pb-red);
    border: 1px solid var(--pb-red);
}
.cb-btn-spectate {
    background: rgba(99,102,241,0.15); color: #818cf8;
    border: 1px solid rgba(99,102,241,0.4);
}
.cb-btn-spectate:hover:not(:disabled) {
    background: rgba(99,102,241,0.25);
    border-color: #a5b4fc;
}
.cb-btn-exit {
    background: var(--pb-surface2); color: var(--pb-text-dim);
    border: 1px solid var(--pb-border);
}
.cb-btn-recreate {
    background: linear-gradient(135deg, var(--pb-gold), #8ab000);
    color: #000;
}

/* Tie-Breaker Overlay */
.cb-tiebreaker-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.85); display: none;
    align-items: center; justify-content: center; flex-direction: column;
}
.cb-tiebreaker-overlay.active { display: flex; }

.cb-tiebreaker-title {
    font-size: 1.5rem; font-weight: 800; margin-bottom: 24px;
    font-family: inherit;
    color: var(--pb-gold);
}

/* Tiebreaker Banner Grid */
.cb-tiebreaker-banner-grid {
    display: flex; gap: 16px; flex-wrap: wrap;
    justify-content: center; align-items: center;
    padding: 16px;
}

.cb-tiebreaker-banner {
    min-width: 140px; max-width: 200px; padding: 16px 24px;
    border-radius: 8px; border: 2px solid var(--pb-border);
    background: var(--pb-surface);
    font-weight: 500; font-size: 0.5rem; color: #ffffff;
    text-align: center; transition: all 0.15s ease;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}
.cb-tiebreaker-banner.highlight {
    color: #fff;
    border-color: var(--pb-gold);
    background: rgba(191,255,0,0.12);
    box-shadow: 0 0 20px rgba(191,255,0,0.3), inset 0 0 20px rgba(191,255,0,0.08);
    transform: scale(1.05);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}
.cb-tiebreaker-banner.winner {
    color: #fff;
    border-color: var(--pb-gold);
    background: rgba(191,255,0,0.18);
    box-shadow: 0 0 32px rgba(191,255,0,0.5), 0 0 64px rgba(191,255,0,0.2), inset 0 0 24px rgba(191,255,0,0.12);
    transform: scale(1.1);
    animation: pb-banner-pulse 0.8s ease-in-out 3;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}
.cb-tiebreaker-banner.dimmed {
    opacity: 0.35;
    filter: grayscale(0.5);
    transition: all 0.5s ease;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}

@keyframes pb-banner-pulse {
    0%, 100% { box-shadow: 0 0 32px rgba(191,255,0,0.5), 0 0 64px rgba(191,255,0,0.2), inset 0 0 24px rgba(191,255,0,0.12); }
    50% { box-shadow: 0 0 48px rgba(191,255,0,0.8), 0 0 96px rgba(191,255,0,0.35), inset 0 0 36px rgba(191,255,0,0.2); }
}

.cb-tiebreaker-winner {
    margin-top: 24px; font-size: 1.4rem; font-weight: 800; font-family: inherit;
    color: var(--pb-green); opacity: 0; transform: scale(0.8);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cb-tiebreaker-winner.reveal {
    opacity: 1; transform: scale(1);
}

/* Post-Match Overlay */
.cb-postmatch {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.9); display: none;
    align-items: center; justify-content: center; flex-direction: column;
    text-align: center; padding: 20px;
}
.cb-postmatch.active { display: flex; }

.cb-postmatch-title {
    font-size: 2rem; font-weight: 800; margin-bottom: 8px;
}
.cb-postmatch-winner { font-size: 1.2rem; color: #e2e8f0; margin-bottom: 16px; }
.cb-postmatch-winner-total { color: var(--pb-gold); font-weight: 700; }
.cb-postmatch-loot {
    background: var(--pb-surface2); border-radius: 0;
    padding-top: 10px; margin-bottom: 20px; text-align: left;
    border: 1px solid var(--pb-border);
    width: min(480px, 92vw);
    max-width: 480px;
    display: flex; flex-direction: column;
}

/* ── Loot Grid Header ──────────────── */
.cb-loot-grid-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px 6px;
}
.cb-loot-grid-count {
    font-size: 0.8rem; font-weight: 600;
    color: var(--pb-text-dim); text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Sell All Button ───────────────── */
.cb-sell-all-btn {
    display: none;
    padding: 6px 16px; border-radius: 0;
    border: 1px solid var(--pb-green);
    background: rgba(74,222,128,0.12); color: var(--pb-green);
    font-family: "Montserrat", sans-serif; font-size: 0.72rem;
    font-weight: 700; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.04em;
    transition: all 0.2s;
}
.cb-sell-all-btn:hover {
    background: rgba(74,222,128,0.22);
    box-shadow: 0 0 12px rgba(74,222,128,0.25);
}
.cb-sell-all-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
}

/* ── Loot Grid Container (fixed size, scrollable) ── */
.cb-loot-grid-container {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    contain: layout style;
}
.cb-loot-grid-container::-webkit-scrollbar { width: 4px; }
.cb-loot-grid-container::-webkit-scrollbar-thumb {
    background: var(--pb-border); border-radius: 2px;
}

/* ── Loot Item Card (non-interactable, 50% smaller vs inv-item-card) ── */
.cb-loot-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px;
    box-sizing: border-box;
    background: #1a1d2e;
    border: 1px solid var(--pb-border);
    gap: 2px;
    min-width: 0;
    content-visibility: auto;
    contain-intrinsic-size: auto 130px;
}

/* ── Loot Item Image Tier Background ── */
.cb-loot-item-img-bg {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; padding: 4px;
    /* background set via inline style (tier_color), same pattern as cc-item-img-wrap */
}

/* ── Loot Item Image (50% smaller = ~60px) ── */
.cb-loot-item-img {
    width: 60px; height: 60px;
    object-fit: contain; border-radius: 4px;
    flex-shrink: 0; max-width: 100%;
    position: relative; z-index: 1;
}

/* ── Loot Item Info ────────────────── */
.cb-loot-item-name {
    font-family: "Montserrat", sans-serif;
    font-size: 0.55rem; font-weight: 600;
    color: var(--pb-text); text-align: center;
    line-height: 1.2; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
    white-space: normal;
    display: block;
}
.cb-loot-item-type {
    font-size: 0.41rem; font-weight: 450;
}
.cb-loot-item-wear {
    font-family: "Montserrat", sans-serif;
    font-size: 0.5rem; color: var(--pb-text-dim);
    text-align: center;
}
.cb-loot-item-value {
    font-family: "Montserrat", sans-serif;
    font-size: 0.65rem; font-weight: 700;
    color: var(--pb-gold);
}
/* ── Partial loot items (team mode) ── */
.cb-loot-item-card.cb-loot-item-partial {
    border-color: #4a90d9;
    box-shadow: 0 0 10px rgba(74, 144, 217, 0.25);
}
.cb-loot-item-partial-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #4a90d9, #2856a3);
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    z-index: 3;
    pointer-events: none;
}
.cb-loot-item-divisor {
    font-family: "Montserrat", sans-serif;
    font-size: 0.55rem;
    color: #4a90d9;
    margin-top: 1px;
    font-weight: 600;
    text-align: center;
}
.cb-loot-item-tier {
    font-family: "Montserrat", sans-serif;
    font-size: 0.5rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 1px 6px; border-radius: 8px; color: #fff;
}
.cb-loot-item-tier.common { background: rgba(163,230,255,0.2); color: #a3e6ff; }
.cb-loot-item-tier.consumer { background: rgba(163,230,255,0.2); color: #a3e6ff; }
.cb-loot-item-tier.industrial { background: rgba(176,255,242,0.2); color: var(--pb-industrial); }
.cb-loot-item-tier.milspec { background: rgba(0,185,255,0.2); color: #4a90d9; }
.cb-loot-item-tier.rare { background: rgba(0,185,255,0.2); color: #4a90d9; }
.cb-loot-item-tier.restricted { background: rgba(148,0,211,0.2); color: var(--pb-restricted); }
.cb-loot-item-tier.classified { background: rgba(255,0,221,0.2); color: var(--pb-classified); }
.cb-loot-item-tier.epic { background: rgba(242,115,255,0.2); color: #a78bfa; }
.cb-loot-item-tier.covert { background: rgba(235,75,75,0.2); color: var(--pb-covert); }
.cb-loot-item-tier.legendary { background: rgba(255,220,0,0.2); color: var(--pb-legendary); }

/* ── Loot Grid Footer ──────────────── */
.cb-loot-grid-footer {
    grid-column: 1 / -1;
    text-align: center; padding: 8px 4px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.72rem; font-weight: 700;
    color: var(--pb-gold);
    border-top: 1px solid var(--pb-border);
}
.cb-loot-hidden-msg {
    display: none;
    grid-column: 1 / -1;
    text-align: center; padding: 30px 16px;
    color: var(--pb-text-dim); font-size: 0.8rem;
}

.cb-postmatch-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.cb-btn-hide-result {
    background: rgba(248,113,113,0.12); color: var(--pb-red);
    border: 1px solid var(--pb-red);
}
.cb-btn-hide-result:hover { background: rgba(248,113,113,0.25); }

.cb-btn-show-result {
    background: var(--pb-surface2); color: var(--pb-gold);
    border: 1px solid var(--pb-gold-dim);
}
.cb-btn-show-result:hover { border-color: var(--pb-gold); }

.cb-return-timer {
    margin-top: 16px; font-size: 0.85rem; color: var(--pb-text-dim);
    animation: pb-fade-in 0.4s ease-out;
}
@keyframes pb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Toast */
.cb-toast {
    position: fixed; top: 20px; right: 20px; z-index: 2000;
    background: var(--pb-surface2); border: 1px solid var(--pb-border);
    border-radius: 0; padding: 12px 20px; color: var(--pb-text);
    font-size: 0.9rem; transform: translateX(120%); transition: transform 0.3s ease;
    max-width: 320px;
}
.cb-toast.show { transform: translateX(0); }

/* ═══ RIGHT-SIDE PREVIEW PANEL (inside cb-lobby-right-col) ═══ */
.cb-cases-preview-panel--right {
    overflow-y: auto;
    transition: opacity 0.3s ease;
}
.cb-cases-preview-panel--right.cb-preview-hidden {
    opacity: 0;
    pointer-events: none;
}
.cb-cases-preview-panel--right::-webkit-scrollbar { width: 4px; }
.cb-cases-preview-panel--right::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }

@media (max-width: 900px) {
    .cb-lobby-grid { grid-template-columns: 2fr 1fr; }
}
@media (max-width: 700px) {
    .cb-lobby-grid { grid-template-columns: 1fr; }
    .cb-lobby-right-col { flex-direction: column; }
    .cb-cases-preview-panel--right {
        max-height: 400px;
    }
    .cb-cases-preview-panel--right.cb-preview-hidden {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .cb-player-slot { min-height: 180px; padding: 8px 4px; }
    .cb-player-name { font-size: 0.8rem; min-height: 1.2em; }
    .cb-player-avatar { width: 44px; height: 44px; font-size: 1.2rem; }
    .cb-player-banner { height: 88px; }
    .cb-roulette-v-container { height: min(300px, 35vh); }
    .cb-roulette-v-item img { max-width: 110px; max-height: 110px; }
    .cb-emoji-btn { width: 36px; height: 36px; font-size: 1.1rem; }
}
@media (max-width: 480px) {
    .cb-player-slot { min-height: 150px; padding: 6px 2px; }
    .cb-player-name { font-size: 0.7rem; min-height: 1.1em; }
    .cb-player-avatar { width: 36px; height: 36px; font-size: 1rem; }
    .cb-player-banner { height: 72px; }
    .cb-badge-row { min-height: 20px; }
    .cb-roulette-v-container { height: min(240px, 30vh); }
    .cb-roulette-v-item img { max-width: 80px; max-height: 80px; }
    .cb-emoji-btn { width: 32px; height: 32px; font-size: 0.95rem; }
    .cb-emoji-bar { gap: 6px; }
}

/* ── Action buttons → icon-only on narrow screens ── */
@media (max-width: 600px) {
    .cb-arena-actions .cb-btn {
        width: 38px; height: 38px;
        padding: 0;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .cb-arena-actions .cb-btn::before {
        content: attr(data-icon);
        font-size: 1.15rem;
        line-height: 1;
    }
}

/* ═══ History Tab ═══ */
#cb-tab-history .cb-history-list { max-height: 520px; }

.cb-history-list {
    max-width: 1500px; max-height: 520px; overflow-y: auto;
}
.cb-history-list::-webkit-scrollbar { width: 4px; }
.cb-history-list::-webkit-scrollbar-thumb { background: var(--pb-border); border-radius: 2px; }

.cb-history-card {
    position: relative;
    border: 1px solid var(--pb-border); border-radius: 0;
    padding: 14px; margin-bottom: 10px; background: var(--pb-surface2);
    display: flex; justify-content: space-between; align-items: center;
    max-height: 100px;
    transition: all 0.2s;
}
.cb-history-card:hover { border-color: var(--pb-gold-dim); }

.cb-history-card.cb-history-win {
    border-left: 3px solid var(--pb-green);
    background: linear-gradient(135deg, rgba(74,222,128,0.08), var(--pb-surface2));
}
.cb-history-card.cb-history-lose {
    border-left: 3px solid #ef4444;
    background: linear-gradient(135deg, rgba(239,68,68,0.06), var(--pb-surface2));
}
.cb-history-card.cb-history-tie {
    border-left: 3px solid var(--pb-gold);
    background: linear-gradient(135deg, rgba(240,192,64,0.06), var(--pb-surface2));
}

.cb-history-info {
    flex: 1; display: flex; gap: 20px; align-items: center;
    padding-left: 10px; min-width: 0; flex-wrap: wrap;
}
.cb-history-info-col { flex-shrink: 0; }

.cb-history-result {
    font-weight: 700; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 4px 14px; border-radius: 4px;
    flex-shrink: 0;
}
.cb-history-result.win {
    color: var(--pb-green); background: rgba(74,222,128,0.15);
}
.cb-history-result.lose {
    color: #ef4444; background: rgba(239,68,68,0.12);
}
.cb-history-result.tie {
    color: var(--pb-gold); background: rgba(240,192,64,0.12);
}

.cb-history-meta {
    font-size: 0.8rem; color: var(--pb-text-dim); line-height: 1.5;
}
.cb-history-meta span { margin-right: 14px; }
.cb-history-meta .cb-history-label {
    color: var(--pb-text); font-weight: 600;
}

@media (max-width: 600px) {
    .cb-history-meta { display: none; }
}

.cb-history-sequence {
    display: flex; align-items: center; gap: 5px;
    flex-wrap: nowrap; overflow: hidden; flex: 1;
    min-width: 150px; max-height: 70px;
    padding: 4px 0;
}

/* ── History Sequence Item (matches cb-case-seq-item) ── */
.cb-history-seq-item {
    flex-shrink: 0; width: 48px; height: 48px; position: relative;
    border: 2px solid var(--pb-border); background: var(--pb-surface2);
    display: flex; align-items: center; justify-content: center;
    padding: 4px; transition: all 0.2s; cursor: pointer;
}
.cb-history-seq-item:hover {
    border-color: var(--pb-gold-dim);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ── History Seq Images ── */
.cb-history-seq-img {
    width: 100%; height: 100%;
    border-radius: 4px; object-fit: contain;
}
.cb-history-seq-img-base {
    width: 100%; height: 100%;
    border-radius: 4px; object-fit: contain;
}

/* ── History Seq Overlays (custom case layers) ── */
.cb-history-seq-overlay-emoji {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.85rem; pointer-events: none; z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.cb-history-seq-overlay-img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 65%; height: 65%; object-fit: contain; pointer-events: none; z-index: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.cb-history-seq-name {
    font-size: 0.7rem; color: var(--pb-text-dim);
    background: var(--pb-surface); border: 1px solid var(--pb-border);
    padding: 2px 8px; border-radius: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.cb-history-seq-more {
    font-size: 0.65rem; color: var(--pb-gold-dim); font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
}

.cb-history-btns {
    display: flex; gap: 8px; flex-shrink: 0; align-items: center;
}

.cb-history-result-btn {
    padding: 8px 20px; border-radius: 0; border: 1px solid var(--pb-purple);
    background: rgba(167,139,250,0.1); color: var(--pb-purple);
    font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
    flex-shrink: 0; white-space: nowrap;
}
.cb-history-result-btn:hover { background: rgba(167,139,250,0.2); }

.cb-history-recreate-btn {
    padding: 8px 20px; border-radius: 0; border: 1px solid var(--pb-gold);
    background: rgba(240,192,64,0.1); color: var(--pb-gold);
    font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: all 0.2s;
    flex-shrink: 0; white-space: nowrap;
}
.cb-history-recreate-btn:hover { background: rgba(240,192,64,0.2); }

.cb-no-history { text-align: center; color: var(--pb-text-dim); padding: 30px; font-size: 0.9rem; }