/* ============================================================
   CARD BUILDER MODAL
   ============================================================ */

/* Toggle tab — hidden (replaced by buttons in header) */
.cb-toggle-tab {
    display: none;
}

/* Dark overlay behind the modal */
.cb-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 140;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cb-modal-overlay.open {
    opacity: 1;
}

/* Panel — centered modal */
.card-builder-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90vw;
    max-width: 960px;
    height: 94vh;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
    z-index: 200;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.card-builder-panel.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Inner wrapper — must participate in flex layout */
.cb-panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Side-by-side layout container */
.cb-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left column: form fields (scrollable) */
.cb-modal-form {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    padding-bottom: 1.5rem;
}

/* Right column: live preview — card centered, buttons pinned to bottom */
.cb-modal-preview {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    overflow-y: auto;
}

/* Panel header */
.cb-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cb-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cb-panel-title-icon {
    font-size: 1.2rem;
}

.btn-close-cb {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-close-cb:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* Card type tabs (future: Troublemaker, Artifact, Chaos) */
.cb-type-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
}

.cb-type-tab {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.cb-type-tab:hover:not(:disabled) {
    color: var(--color-text);
}

.cb-type-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.cb-type-tab:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Panel body / form */
.cb-panel-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Form section */
.cb-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cb-form-row {
    display: flex;
    gap: 0.75rem;
}

.cb-form-row > .cb-form-group {
    flex: 1;
}

.cb-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cb-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.cb-input,
.cb-select,
.cb-textarea {
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    transition: border-color 0.2s;
}

.cb-input:focus,
.cb-select:focus,
.cb-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.cb-textarea {
    resize: vertical;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}

.cb-serial-display {
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* Effect color picker row */
.cb-effect-color-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.cb-label-inline {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    margin-right: 0.2rem;
}

.cb-color-input {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: none;
    cursor: pointer;
    padding: 1px;
}

.cb-color-input::-webkit-color-swatch-wrapper {
    padding: 1px;
}

.cb-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.cb-color-preset {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    padding: 0;
    transition: border-color 0.15s, transform 0.1s;
    -webkit-appearance: none;
    appearance: none;
}
/* Color preset backgrounds via data-color attribute */
.cb-color-preset[data-color="#c9a33e"] { background: #c9a33e !important; }
.cb-color-preset[data-color="#8b2222"] { background: #8b2222 !important; }
.cb-color-preset[data-color="#d4d4d4"] { background: #d4d4d4 !important; }
.cb-color-preset[data-color="#2a5a8a"] { background: #2a5a8a !important; }
.cb-color-preset[data-color="#2a6b4a"] { background: #2a6b4a !important; }
.cb-color-preset[data-color="#8b6914"] { background: #8b6914 !important; }
.cb-color-preset[data-color="#333333"] { background: #333333 !important; }
.cb-color-preset[data-color="#C79C6A"] { background: #C79C6A !important; }

/* Hero and Encounter border color presets */
.cb-hero-color-preset, .cb-enc-color-preset {
    width: 24px; height: 24px; border: 2px solid rgba(255,255,255,0.15);
    border-radius: 4px; cursor: pointer; font-size: 0; line-height: 0; padding: 0;
    -webkit-appearance: none; appearance: none;
    transition: border-color 0.15s, transform 0.1s;
}
.cb-hero-color-preset:hover, .cb-enc-color-preset:hover { border-color: rgba(255,255,255,0.5); transform: scale(1.15); }
.cb-hero-color-preset[data-color="#F44E3B"], .cb-enc-color-preset[data-color="#F44E3B"] { background: #F44E3B !important; }
.cb-hero-color-preset[data-color="#A4DD00"], .cb-enc-color-preset[data-color="#A4DD00"] { background: #A4DD00 !important; }
.cb-hero-color-preset[data-color="#73D8FF"], .cb-enc-color-preset[data-color="#73D8FF"] { background: #73D8FF !important; }

.cb-color-preset:hover {
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.15);
}

/* ============================================================
   FREE ACTION ICON PICKER
   ============================================================ */

.cb-icon-picker-wrap {
    position: relative;
}

.cb-icon-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.2s;
    text-align: left;
    min-height: 38px;
}

.cb-icon-picker-trigger:hover {
    border-color: var(--color-primary);
}

.cb-trigger-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 3px;
}

.cb-trigger-none-text {
    color: var(--color-text-muted);
}

/* Popup grid */
.cb-icon-picker-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius, 6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 8px;
    margin-top: 4px;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.cb-icon-picker-popup.open {
    display: grid;
}

.cb-picker-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: var(--radius, 6px);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.cb-picker-option:hover {
    border-color: var(--color-primary);
    background: rgba(201, 162, 39, 0.1);
}

.cb-picker-icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
}

.cb-picker-icon-none {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-text-muted);
}

.cb-picker-option-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* Card type icon image in preview */
.cb-preview-type-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Free action image in card preview */
.cb-preview-fa-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
}

/* ============================================================
   LIVE CARD PREVIEW
   ============================================================ */

.cb-preview-section {
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cb-preview-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

#cb-card-preview {
    display: flex;
    justify-content: center;
}

/* The actual card preview — poker card ratio (2.5" x 3.5" = 5:7) */
.cb-preview-card {
    width: 225px;
    height: 340px;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a2e;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Georgia', 'Times New Roman', serif;
    border: 2px solid #3a3a50;
}

/* Title bar — fixed height, overlays on top of artwork */
.cb-preview-title-bar {
    background: rgba(0,0,0,0.65);
    padding: 3px 10px;
    flex: 0 0 21px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    line-height: 1.1;
}

.cb-preview-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Faction visual picker (form) */
.cb-faction-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.cb-faction-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--color-bg, rgba(255,255,255,0.05));
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    transition: border-color 0.15s, background 0.15s;
    min-width: 50px;
}

.cb-faction-btn:hover {
    background: var(--color-surface-hover, rgba(255,255,255,0.05));
    border-color: var(--color-border, rgba(255,255,255,0.2));
}

.cb-faction-btn.active {
    border-color: var(--color-primary, #c9a227);
    background: rgba(201, 163, 62, 0.1);
    color: var(--color-text, #fff);
}

.cb-faction-btn-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}

.cb-faction-btn-icon {
    font-size: 1.4rem;
    line-height: 28px;
}

.cb-faction-btn-label {
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

.cb-faction-btn.active .cb-faction-btn-label {
    color: #c9a227;
    font-weight: 600;
}

/* Faction icon in card preview (image version) */
.cb-preview-faction-img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}

/* Faction icon in saved card list (image version) */
.cb-saved-faction-img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: cover;
}

/* Faction + type icons — positioned below title bar */
.cb-preview-icons {
    position: absolute;
    top: 25px;
    left: 6px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cb-preview-faction-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
}

.cb-preview-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #c0c0d0;
    background: #2a2a40;
    border: 1px solid #4a4a5a;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Free action icon in the left sidebar stack */
.cb-preview-free-action-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    overflow: hidden;
}

.cb-preview-free-action-icon .cb-preview-fa-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Artwork area — full-bleed behind entire card */
.cb-preview-artwork {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2a2a3e, #1a1a2e);
    overflow: hidden;
}

/* Push the first element after artwork (flavor or effect) to bottom of card */
.cb-preview-artwork + .cb-preview-flavor-band,
.cb-preview-artwork + .cb-preview-effect-area,
.cb-preview-artwork + .cb-preview-effect-columns {
    margin-top: auto;
}

.cb-preview-artwork-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.cb-preview-artwork-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #4a4a6a;
}

.cb-preview-artwork-placeholder span {
    font-size: 2rem;
}

.cb-preview-artwork-placeholder small {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Card number — small text at bottom-right of effect area */
.cb-preview-card-number {
    font-size: 0.4rem;
    color: rgba(30, 20, 0, 0.45);
    text-align: right;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
    padding-top: 1px;
    width: 100%;
}

/* Flavor text band — semi-transparent overlay, consistent across cards */
.cb-preview-flavor-band {
    background: linear-gradient(180deg, rgba(212,175,55,0.88) 0%, rgba(201,163,62,0.9) 50%, rgba(184,148,42,0.92) 100%);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 22px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.cb-preview-flavor-text {
    font-size: 0.55rem;
    font-style: italic;
    color: #2a1a00;
    line-height: 1.3;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

/* Effect text area — overlays on artwork at bottom of card */
.cb-preview-effect-area {
    padding: 8px 10px 8px;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border-radius: 8px;
    margin: 0 6px 18px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.cb-preview-effect-text {
    font-size: 0.65rem;
    color: #1a1000;
    text-align: center;
    line-height: 1.25;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

/* Flavor text — italic line at very bottom of card */
.cb-preview-flavor-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 4px 8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
}

.cb-preview-flavor-line-text {
    font-size: 0.48rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Artifact: two-column effect layout — overlays on artwork at bottom */
.cb-preview-effect-columns {
    flex: 0 0 84px;
    display: flex;
    flex-direction: row;
    padding: 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.cb-preview-effect-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px;
    overflow: hidden;
}

.cb-preview-effect-col .cb-preview-effect-text {
    font-size: 0.58rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quest value pentagon badge — sits in the icons stack */
.cb-preview-quest-badge {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e0d0;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.cb-quest-number {
    font-size: 0.75rem;
    font-weight: 800;
    color: #1a1a2e;
    font-family: 'Arial', sans-serif;
    line-height: 1;
    margin-top: 2px;
}

/* Quest toggle row */
.cb-quest-row {
    align-items: center;
}

/* Toggle switch */
.cb-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    user-select: none;
}

.cb-toggle-checkbox {
    display: none;
}

.cb-toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cb-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #888;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.cb-toggle-checkbox:checked + .cb-toggle-switch {
    background: rgba(201, 162, 39, 0.3);
    border-color: #c9a227;
}

.cb-toggle-checkbox:checked + .cb-toggle-switch::after {
    left: 18px;
    background: #c9a227;
}

.cb-preview-effect-col-divider {
    width: 1px;
    background: rgba(30, 20, 0, 0.25);
    align-self: stretch;
    flex-shrink: 0;
}

/* ============================================================
   ACTION BUTTONS
   ============================================================ */

/* Hero artwork inline row (URL + Upload + Generate) */
.cb-hero-artwork-inline {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.cb-hero-artwork-inline .cb-input {
    flex: 1;
    min-width: 0;
}
.cb-hero-artwork-inline .btn-sm {
    font-size: 0.65rem;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Codex entries list in Card Builder */
.cb-codex-list {
    margin-bottom: 0.5rem;
}
.cb-codex-entry-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 10px;
    background: var(--color-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.1));
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 0.8rem;
}
/* ============================================================
   ICON BAR EDITOR (6-slot form control)
   ============================================================ */
.cb-icon-bar-editor {
    display: flex;
    gap: 6px;
    padding: 4px 0;
}
.cb-icon-slot {
    width: 36px;
    height: 36px;
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
}
.cb-icon-slot:hover {
    border-color: var(--color-primary, #c9a227);
    background: rgba(201,162,39,0.1);
}
.cb-icon-slot.filled {
    border-style: solid;
    border-color: rgba(255,255,255,0.3);
}
.cb-icon-slot-plus {
    font-size: 1rem;
    color: rgba(255,255,255,0.3);
    line-height: 1;
}
.cb-icon-slot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.cb-icon-slot-health {
    font-size: 0.55rem;
    color: #ff6b6b;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
}
.cb-icon-slot-text {
    font-size: 0.5rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* Icon Picker Grid */
.cb-icon-picker-cat-header {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary, #c9a227);
    font-weight: 600;
    padding: 8px 0 4px 0;
    border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.1));
    margin-bottom: 6px;
}
.cb-icon-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.cb-icon-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 60px;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cb-icon-picker-item:hover {
    border-color: var(--color-primary, #c9a227);
    background: rgba(201,162,39,0.1);
}
.cb-icon-picker-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}
.cb-icon-picker-label {
    font-size: 0.5rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   UNIFIED ICON BAR (rendered on card preview)
   ============================================================ */
.cb-icon-bar {
    z-index: 5;
    display: flex;
    gap: 4px;
}
.cb-icon-bar-item {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
    background: rgba(0,0,0,0.4);
}
.cb-icon-bar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cb-icon-health {
    font-size: 0.5rem;
    color: #ff6b6b;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
.cb-icon-health-heart {
    font-size: 0.45rem;
}

/* Layout: left-vertical (most card types) */
.cb-icon-bar-left-vertical {
    position: absolute;
    top: 25px;
    left: 6px;
    flex-direction: column;
}

/* Layout: bottom-horizontal (chaos cards) */
.cb-icon-bar-bottom-horizontal {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 6px;
}
.cb-icon-bar-bottom-horizontal .cb-icon-bar-item {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: none;
    border: none;
    background: transparent;
}

/* Layout: inline-horizontal (artifact cards) */
.cb-icon-bar-inline-horizontal {
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    align-items: center;
}
.cb-icon-bar-inline-horizontal .cb-icon-bar-item {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    box-shadow: none;
    border: none;
    background: transparent;
}

/* Clue card — image-dominant layout */
.cb-card-clue {
    border-color: #2a6b4a;
}
.cb-card-clue .cb-clue-artwork {
    flex: 1;
    min-height: 0;
}
.cb-card-clue .cb-clue-artwork .cb-preview-artwork-img {
    height: 100%;
    object-fit: cover;
}
.cb-clue-number {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.5rem;
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.cb-codex-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid var(--color-primary, #c9a227);
    border-radius: 5px;
    font-family: var(--font-display, Georgia, serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary, #c9a227);
    flex-shrink: 0;
}
.cb-codex-entry-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text, #fff);
    font-weight: 500;
}
.cb-codex-entry-meta {
    font-size: 0.65rem;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    flex-shrink: 0;
}
.cb-codex-edit-btn {
    font-size: 0.65rem;
    padding: 3px 10px;
    background: var(--color-primary, #c9a227);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.cb-codex-edit-btn:hover {
    background: #b8922e;
}

.cb-artwork-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    flex-shrink: 0;
    width: 100%;
}

.cb-artwork-controls .cb-label {
    margin: 0;
    font-size: 0.7rem;
    white-space: nowrap;
    color: rgba(255,255,255,0.6);
}

.cb-artwork-controls .cb-artwork-row {
    display: flex;
    gap: 0.4rem;
    flex: 1;
}

.cb-artwork-controls .btn {
    flex: 1;
    font-size: 0.7rem;
    padding: 0.35rem 0.5rem;
}

.cb-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    flex-shrink: 0;
    width: 100%;
}

.cb-actions .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 0.5rem;
}

.btn-cb-save {
    background: var(--color-primary) !important;
    color: #1a1a2e !important;
    font-weight: 600;
    border: none;
}

.btn-cb-save:hover {
    filter: brightness(1.1);
}

.btn-cb-clear {
    background: var(--color-border) !important;
    color: var(--color-text) !important;
    border: none;
}

.btn-cb-export {
    background: #2a6b4a !important;
    color: #fff !important;
    border: none;
}

.btn-cb-export-img {
    background: #2a5a8a !important;
    color: #fff !important;
    border: none;
}

.btn-cb-export-img:hover {
    filter: brightness(1.15);
}

.btn-cb-export-img:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Saved cards action row (Export All + CSV) */
.cb-saved-actions-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cb-saved-actions-row .btn {
    flex: 1;
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
}

.btn-cb-batch-export {
    background: #2a5a8a !important;
    color: #fff !important;
    border: none;
}

.btn-cb-batch-export:disabled {
    opacity: 0.6;
    cursor: wait;
}

.btn-cb-import-csv {
    background: #5a8a2a !important;
    color: #fff !important;
    border: none;
}

.btn-cb-import-csv:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Batch export progress */
.cb-export-progress {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-align: center;
    padding: 0.5rem;
    background: rgba(201, 162, 39, 0.08);
    border-radius: var(--radius, 6px);
    margin-bottom: 0.75rem;
    animation: cb-pulse 1.5s ease-in-out infinite;
}

@keyframes cb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================================
   SAVED CARDS LIST
   ============================================================ */

.cb-saved-section {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.cb-saved-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cb-saved-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}

.cb-card-count-badge {
    background: var(--color-primary);
    color: #1a1a2e;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
}

#cb-saved-cards-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.cb-empty-state {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 1rem;
}

.cb-saved-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
    padding: 0.6rem 0.75rem;
    transition: border-color 0.2s;
}

.cb-saved-card:hover {
    border-color: var(--color-primary);
}

.cb-saved-card.editing {
    border-color: var(--color-primary);
    background: rgba(212, 175, 55, 0.06);
}

.cb-saved-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.cb-saved-card-faction {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
    flex-shrink: 0;
}

.cb-saved-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-saved-card-num {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.cb-saved-card-preview {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.cb-saved-card-actions {
    display: flex;
    gap: 0.4rem;
}

.cb-saved-card-actions .btn {
    font-size: 0.68rem;
    padding: 2px 10px;
}

.cb-btn-edit {
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    background: transparent !important;
}

.cb-btn-delete {
    color: #c0392b !important;
    border: 1px solid #c0392b !important;
    background: transparent !important;
}

/* ============================================================
   ARTWORK GENERATION
   ============================================================ */

/* Artwork URL row — input + generate button side by side */
.cb-artwork-row {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

.cb-artwork-input {
    flex: 1;
    min-width: 0;
}

/* Upload Artwork button */
.btn-cb-upload-art {
    background: linear-gradient(135deg, #2a7b4a, #3a9d5e) !important;
    color: #fff !important;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius, 6px);
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s, transform 0.1s;
}

.btn-cb-upload-art:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.btn-cb-upload-art:active {
    transform: translateY(0);
}

.btn-cb-upload-art:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* Generate Artwork button */
.btn-cb-generate-art {
    background: linear-gradient(135deg, #6b3fa0, #8b5cf6) !important;
    color: #fff !important;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius, 6px);
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.2s, transform 0.1s;
}

.btn-cb-generate-art:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.btn-cb-generate-art:active {
    transform: translateY(0);
}

.btn-cb-generate-art:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* ============================================================
   ARTWORK MODAL OVERLAY
   ============================================================ */

.cb-artwork-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.cb-artwork-modal-overlay.open {
    display: flex;
}

.cb-artwork-modal {
    background: var(--color-surface, #1a1a2e);
    border: 1px solid var(--color-border, #3a3a50);
    border-radius: 12px;
    width: 380px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: cb-modal-slide-in 0.2s ease-out;
}

@keyframes cb-modal-slide-in {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cb-art-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-border, #3a3a50);
}

.cb-art-modal-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text, #e0e0e0);
}

.cb-art-modal-close-btn {
    background: none;
    border: none;
    color: var(--color-text-muted, #888);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.cb-art-modal-close-btn:hover {
    color: var(--color-text, #e0e0e0);
}

.cb-art-modal-body {
    padding: 1rem;
}

.cb-art-prompt-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.4rem;
    resize: vertical;
    min-height: 80px;
}

.cb-art-modal-hint {
    font-size: 0.7rem;
    color: var(--color-text-muted, #888);
    margin-top: 0.5rem;
    font-style: italic;
}

.cb-art-modal-error {
    font-size: 0.78rem;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: var(--radius, 6px);
    padding: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.cb-art-modal-spinner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 0.75rem;
    padding: 0.5rem;
    color: var(--color-primary, #c9a227);
    font-size: 0.8rem;
}

.cb-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(201, 162, 39, 0.2);
    border-top-color: var(--color-primary, #c9a227);
    border-radius: 50%;
    animation: cb-spin 0.8s linear infinite;
}

@keyframes cb-spin {
    to { transform: rotate(360deg); }
}

.cb-art-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border, #3a3a50);
}

.cb-art-modal-footer .btn {
    font-size: 0.8rem;
    padding: 0.5rem 1.25rem;
}

/* ============================================================
   CHAOS CARD — FULL PARCHMENT LAYOUT
   Parchment covers entire card. Artwork is line art with
   transparent BG so it looks drawn on the parchment.
   ============================================================ */

/* Full-bleed parchment background on entire card */
.cb-preview-card.cb-card-chaos {
    background: url('../images/parchment-scroll-bg.png') center center / cover no-repeat;
    border-color: #8b7355;
}

/* Title bar — transparent bg, centered, with wide margins to stay within scroll */
.cb-card-chaos .cb-preview-title-bar {
    background: transparent;
    justify-content: center;
    padding: 28px 40px 2px;
    flex: 0 0 auto;
}

.cb-card-chaos .cb-preview-title {
    color: #1a0e00;
    font-size: 0.85rem;
    font-weight: 800;
    text-shadow: none;
    text-align: center;
    font-family: 'Georgia', 'Times New Roman', serif;
    white-space: normal;
    overflow: visible;
    line-height: 1.15;
    max-width: 100%;
    word-wrap: break-word;
}

/* Artwork floats on parchment — transparent bg shows through */
.cb-card-chaos .cb-preview-artwork {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 130px;
    z-index: 1;
    background: transparent;
    overflow: hidden;
}

.cb-card-chaos .cb-preview-artwork-img {
    object-fit: contain;
    background: transparent;
}

.cb-card-chaos .cb-preview-artwork-placeholder {
    color: rgba(60, 40, 20, 0.3);
}

/* Effect area — no overlay, text directly on parchment */
.cb-card-chaos .cb-preview-effect-area {
    flex: 1 1 auto;
    background: transparent !important;
    padding: 4px 30px 4px;
    overflow: hidden;
}

.cb-card-chaos .cb-preview-effect-text {
    color: #2a1a08;
    font-size: 0.55rem;
    line-height: 1.3;
    text-align: center;
    font-weight: 500;
    -webkit-line-clamp: unset;
    white-space: pre-line;
}

.cb-card-chaos .cb-preview-card-number {
    color: rgba(60, 40, 20, 0.5);
    text-align: right;
    margin-top: auto;
    padding-right: 4px;
    font-size: 0.4rem;
}

/* Icons — moved to bottom of card on the scroll roll */
.cb-card-chaos .cb-preview-icons {
    top: auto;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 6px;
    z-index: 5;
}

.cb-card-chaos .cb-preview-faction-icon {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 50%;
    width: 22px;
    height: 22px;
}

.cb-card-chaos .cb-preview-type-icon {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.cb-card-chaos .cb-preview-type-icon-img {
    width: 20px;
    height: 20px;
}

.cb-card-chaos .cb-preview-faction-icon .cb-preview-faction-icon-img {
    width: 22px;
    height: 22px;
}

.cb-card-chaos .cb-preview-free-action-icon {
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Chaos cards with no artwork — text fills entire parchment */
.cb-card-chaos-noart .cb-preview-artwork {
    display: none;
}

.cb-card-chaos-noart .cb-preview-effect-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 40px 45px 40px;
    overflow: hidden;
    min-height: 0;
}

.cb-card-chaos-noart .cb-preview-effect-text {
    -webkit-line-clamp: unset;
    display: block;
    overflow: hidden;
}

/* ============================================================
   ARTIFACT CARDS — landscape orientation (315 x 225)
   Artwork (left, full height) → Content panel (right: title, icons, instructions, effects)
   ============================================================ */

.cb-preview-card.cb-card-artifact {
    width: 315px;
    height: 225px;
    flex-direction: row;
    border-color: #5a4a30;
}

/* Hide the default absolute-positioned icons */
.cb-card-artifact .cb-preview-icons {
    display: none;
}

/* Hide the default title bar — title is in the content panel */
.cb-card-artifact > .cb-preview-title-bar {
    display: none;
}

/* Artwork — full height, left side of card, extends to left edge */
.cb-card-artifact .cb-preview-artwork {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    flex: 1 1 55%;
    max-width: 55%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.cb-card-artifact .cb-preview-artwork-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cb-card-artifact .cb-preview-artwork-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Content panel — right side: title → icons → instructions → effects */
.cb-card-artifact .cb-artifact-content {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

/* Title inside content panel */
.cb-card-artifact .cb-artifact-content .cb-preview-title-bar {
    display: flex;
    flex: 0 0 auto;
    padding: 6px 8px 3px;
    background: rgba(0, 0, 0, 0.4);
}

.cb-card-artifact .cb-artifact-content .cb-preview-title {
    font-size: 0.65rem;
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Icon row — horizontal row of icons under the title */
.cb-card-artifact .cb-artifact-icon-row {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 8px;
}

.cb-card-artifact .cb-artifact-icon-row .cb-preview-faction-icon {
    width: 18px;
    height: 18px;
}

.cb-card-artifact .cb-artifact-icon-row .cb-preview-faction-icon .cb-preview-faction-img,
.cb-card-artifact .cb-artifact-icon-row .cb-preview-faction-icon .cb-preview-faction-icon-img {
    width: 18px;
    height: 18px;
}

.cb-card-artifact .cb-artifact-icon-row .cb-preview-type-icon-img {
    width: 16px;
    height: 16px;
}

.cb-card-artifact .cb-artifact-icon-row .cb-preview-quest-badge {
    width: 16px;
    height: 16px;
    font-size: 0.45rem;
}

.cb-card-artifact .cb-artifact-icon-row .cb-preview-free-action-icon {
    width: 16px;
    height: 16px;
}

.cb-card-artifact .cb-artifact-icon-row .cb-preview-fa-img {
    width: 16px;
    height: 16px;
}

/* Item instructions (flavor band) */
.cb-card-artifact .cb-artifact-content .cb-preview-flavor-band {
    flex: 0 0 auto;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.65);
    border-top: 1px solid rgba(255, 215, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.cb-card-artifact .cb-artifact-content .cb-preview-flavor-text {
    font-size: 0.55rem;
    line-height: 1.35;
    font-style: italic;
    color: #f0e6c0;
    -webkit-line-clamp: 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Effect columns — fill remaining space */
.cb-card-artifact .cb-artifact-content .cb-preview-effect-columns {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    padding: 0;
    min-height: 0;
}

.cb-card-artifact .cb-artifact-content .cb-preview-effect-col {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 5px;
    overflow: hidden;
}

.cb-card-artifact .cb-artifact-content .cb-preview-effect-col .cb-preview-effect-text {
    font-size: 0.55rem;
    line-height: 1.25;
    -webkit-line-clamp: 10;
}

/* Card number — bottom right of content panel */
.cb-card-artifact .cb-artifact-content .cb-preview-card-number {
    position: absolute;
    bottom: 2px;
    right: 6px;
    font-size: 0.4rem;
}

/* Artifact card fits in the modal preview area (340px wide, card is 315px) */

/* ============================================================
   ENCOUNTER CARDS — portrait (225 x 315) with colored border
   Title (top-left) + Location # (top-right) + Target icon (right)
   Artwork (center) + Failure text overlay + Reward bar (bottom)
   ============================================================ */

.cb-preview-card.cb-card-encounter {
    border-width: 4px;
    border-style: solid;
    /* border-color set inline per card */
}

/* Hide default title bar — encounter uses its own header layout */
.cb-card-encounter > .cb-preview-title-bar {
    display: flex;
    flex: 0 0 auto;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}

/* Location name (left) */
.cb-card-encounter .cb-enc-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Location number badge (top-right, over artwork) */
.cb-card-encounter .cb-enc-location-num {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Show tale icon on encounter cards — positioned left side over artwork */
.cb-card-encounter .cb-preview-icons {
    position: absolute;
    top: 32px;
    left: 6px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Target icon — positioned over artwork, right side */
.cb-card-encounter .cb-enc-target-icon {
    position: absolute;
    top: 38px;
    right: 6px;
    width: 42px;
    height: 42px;
    z-index: 4;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.cb-card-encounter .cb-enc-target-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Artwork — fills middle area */
.cb-card-encounter .cb-preview-artwork {
    position: relative;
    flex: 1 1 auto;
    z-index: 1;
    overflow: hidden;
}

/* Failure effect text overlay — on bottom of artwork */
/* Failure effect overlay (absolute positioned, used in some layouts) */
.cb-card-encounter .cb-enc-effect-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.65);
    padding: 6px 10px;
    z-index: 2;
}

/* Failure effect bar (flex item layout — main encounter card) */
.cb-card-encounter .cb-enc-effect-bar {
    flex: 0 0 auto;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 10px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-card-encounter .cb-enc-effect-text {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    white-space: pre-line;
}

/* Reward bar — bottom of card */
.cb-card-encounter .cb-enc-reward-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 6px 10px;
    /* Background color set dynamically via inline style to match card border */
    gap: 8px;
    min-height: 28px;
}
.cb-card-encounter .cb-enc-reward-text {
    flex: 1;
    font-size: 0.65rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    line-height: 1.3;
}
.cb-card-encounter .cb-enc-reward-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.cb-card-encounter .cb-enc-reward-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- Text/Card mode toggle for failure & reward ---- */
.cb-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.cb-mode-toggle {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}
.cb-mode-btn {
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.cb-mode-btn.active {
    background: rgba(201, 162, 39, 0.3);
    color: #d4af37;
}
.cb-mode-btn:hover:not(.active) {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

.cb-linked-card-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.cb-select-sm {
    flex: 1;
    padding: 4px 8px;
    font-size: 0.75rem;
}

/* + Add Card button */
.cb-add-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #d4af37;
    background: rgba(201, 162, 39, 0.12);
    border: 1px dashed rgba(201, 162, 39, 0.4);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 8px;
}
.cb-add-card-btn:hover {
    background: rgba(201, 162, 39, 0.25);
    border-color: rgba(201, 162, 39, 0.6);
}

/* Outcome group containers (Failure / Reward) */
.cb-outcome-group {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin-bottom: 12px;
    position: relative;
}
.cb-outcome-failure {
    border-left: 3px solid rgba(192, 57, 43, 0.5);
}
.cb-outcome-reward {
    border-left: 3px solid rgba(39, 174, 96, 0.5);
}
.cb-outcome-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.55);
}
.cb-outcome-failure .cb-outcome-label {
    color: rgba(231, 76, 60, 0.7);
}
.cb-outcome-reward .cb-outcome-label {
    color: rgba(46, 204, 113, 0.7);
}
.cb-outcome-group .cb-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
}
.cb-outcome-group .cb-linked-cards-list {
    margin-top: 6px;
}

/* Card type picker popup */
.cb-card-type-picker {
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #1e2333;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 100;
    min-width: 180px;
}
.cb-card-type-picker .cb-type-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cb-card-type-picker-btn {
    padding: 5px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.cb-card-type-picker-btn:hover {
    background: rgba(201, 162, 39, 0.25);
    color: #d4af37;
    border-color: rgba(201, 162, 39, 0.4);
}
.cb-card-type-picker-btn.cb-link-existing-btn {
    padding: 7px 10px;
    font-size: 0.72rem;
    color: #d4af37;
    font-weight: 700;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.3);
    text-align: center;
}

.cb-linked-cards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

/* Linked card compact table */
.cb-linked-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    margin-top: 6px;
}
.cb-linked-table thead th {
    text-align: left;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cb-linked-row {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}
.cb-linked-row:hover {
    background: rgba(255,255,255,0.05);
}
.cb-linked-row td {
    padding: 5px 6px;
    vertical-align: middle;
    color: rgba(255,255,255,0.8);
}
.cb-linked-cell-title {
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-linked-type-tag {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    margin-right: 4px;
    vertical-align: middle;
}
.cb-linked-cell-effect {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.55);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cb-linked-cell-num {
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    white-space: nowrap;
}
.cb-linked-cell-actions {
    white-space: nowrap;
    text-align: right;
}
.cb-linked-btn-edit {
    background: rgba(52,152,219,0.25);
    color: #5dade2;
    border: 1px solid rgba(52,152,219,0.3);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 0.62rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-right: 4px;
}
.cb-linked-btn-edit:hover {
    background: rgba(52,152,219,0.4);
    border-color: rgba(52,152,219,0.5);
}
.cb-linked-btn-unlink {
    background: rgba(243,156,18,0.15);
    color: #f39c12;
    border: 1px solid rgba(243,156,18,0.3);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 0.62rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-right: 4px;
}
.cb-linked-btn-unlink:hover {
    background: rgba(243,156,18,0.35);
    border-color: rgba(243,156,18,0.5);
}
.cb-linked-btn-delete {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 0.62rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.cb-linked-btn-delete:hover {
    background: rgba(231,76,60,0.35);
    border-color: rgba(231,76,60,0.5);
}

/* Tale icon auto-applied indicator in encounter form */
.cb-tale-icon-auto-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: 6px;
}
.cb-tale-icon-auto-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.15);
}
.cb-tale-icon-auto-text {
    font-size: 0.7rem;
    color: rgba(201, 162, 39, 0.7);
    font-style: italic;
}

/* Encounter border color preset buttons */
.cb-enc-color-preset {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
}
.cb-enc-color-preset[data-color="#F44E3B"] { background: #F44E3B; color: #F44E3B; }
.cb-enc-color-preset[data-color="#A4DD00"] { background: #A4DD00; color: #A4DD00; }
.cb-enc-color-preset[data-color="#73D8FF"] { background: #73D8FF; color: #73D8FF; }

/* Card Manager — encounter type badge */
.cm-type-badge.cm-type-encounter {
    background: #2a8a5a;
    color: #fff;
}

/* ============================================================
   HERO CARDS — portrait (225 x 315) with thick colored border
   FRONT: Name bar, Artwork with health/aspect overlay, Ability area
   BACK:  Wounded artwork, "DEFEATED" overlay, Wounded text
   ============================================================ */

.cb-card-hero {
    width: 225px;
    height: 315px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 4px solid #F44E3B;
    background: #1a1a1a;
}

/* Hero full-art mode — artwork images are pre-rendered card faces, just show the image */
.cb-card-hero-fullart {
    display: block;
    padding: 0;
}
.cb-hero-fullart-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Front/Back toggle container */
.cb-hero-side {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
}

/* ---- FRONT SIDE ---- */

/* Hero name bar — black, centered bold text */
.cb-hero-name-bar {
    flex: 0 0 auto;
    padding: 5px 10px;
    background: #000;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Aspect badge — top-right corner of the card */
.cb-hero-aspect-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

.cb-hero-aspect-badge img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.5);
    padding: 2px;
}

.cb-hero-aspect-badge-label {
    font-size: 0.32rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    margin-top: 1px;
    font-weight: 700;
}

/* Artwork area with overlays */
.cb-hero-artwork-area {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    background: #222;
    min-height: 0;
}

.cb-hero-artwork-area > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Health badge — red circle, bottom-left of artwork */
.cb-hero-health-badge {
    position: absolute;
    bottom: 6px;
    left: 8px;
    width: 28px;
    height: 28px;
    background: #e22;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Faction ability area — dark area below artwork */
.cb-hero-ability-area {
    flex: 0 0 auto;
    padding: 8px 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 75px;
    background: rgba(0, 0, 0, 0.82);
}

.cb-hero-ability-text {
    font-size: 0.52rem;
    line-height: 1.4;
    color: #e0d8c8;
    font-weight: 500;
    text-align: center;
    white-space: pre-line;
}

.cb-hero-test-dice {
    font-size: 0.48rem;
    color: #aaa;
    text-align: center;
    margin-top: auto;
    font-style: italic;
}

/* ---- BACK (DEFEATED) SIDE ---- */

.cb-hero-back {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f0e0;
}

.cb-hero-back-artwork {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.cb-hero-back-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%) brightness(0.7);
}

.cb-hero-defeated-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 2.2rem;
    font-weight: 900;
    color: rgba(200, 0, 0, 0.85);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 4px;
    white-space: nowrap;
    z-index: 2;
}

.cb-hero-defeated-text-area {
    flex: 0 0 auto;
    padding: 10px 14px;
    background: #f5f0e0;
    border-top: 2px solid #ddd;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb-hero-defeated-text {
    font-size: 0.6rem;
    line-height: 1.4;
    color: #333;
    text-align: center;
    font-weight: 600;
}

/* Side toggle buttons in preview */
.cb-hero-side-toggle {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.cb-hero-side-btn {
    padding: 3px 12px;
    font-size: 0.65rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-radius: 4px;
    cursor: pointer;
}

.cb-hero-side-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Card Manager — hero type badge */
.cm-type-badge.cm-type-hero {
    background: #c62828;
    color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
    .card-builder-panel {
        width: 98vw;
        height: 95vh;
        max-height: none;
    }

    .cb-modal-body {
        flex-direction: column;
    }

    .cb-modal-preview {
        width: 100%;
        height: 280px;
        border-right: none;
        border-top: 1px solid var(--color-border);
    }

    .cb-modal-form {
        border-right: none;
    }

    .cb-artwork-modal {
        width: 95vw;
    }
}