/* RPG Actor — Sprite Painter
 * Pixel editor for hand-editing sprite sheets
 * Layout: tools left | canvas center | sidebar (preview + frames) right
 */

.painter-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.painter-page h1 {
    font-size: 1.6rem;
    margin-bottom: 0.25rem;
}

.painter-page .subtitle {
    color: var(--ink-light);
    font-style: italic;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

/* Disabled file menu item (e.g. Load my Character when no sprite) */
.painter-file-menu-item:disabled,
.painter-file-menu-item.disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   PASSWORD GATE
   ============================================ */

.painter-password-gate {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--ink-light);
}

.painter-password-gate p {
    margin-bottom: 1rem;
    font-style: italic;
}

.painter-password-row {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.painter-password-row input {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    width: 14em;
}

.painter-password-row input:focus {
    outline: 1px solid var(--gold);
    border-color: var(--gold);
}

/* Login gate (shown after password when not logged in) */
.painter-login-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
}

.painter-login-box {
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    padding: 2rem 2.5rem;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}

.painter-login-box h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.5rem;
}

.painter-login-box p {
    font-size: 0.83rem;
    color: var(--ink-light);
    margin: 0 0 1.4rem;
    line-height: 1.5;
}

.painter-login-box .painter-action-btn {
    display: inline-block;
    text-decoration: none;
    padding: 0.5rem 1.4rem;
    font-size: 0.88rem;
}

/* Locked / creator-required state for mode buttons.
   pointer-events intentionally left on so the upgrade popup can fire on click. */
.painter-mode-btn.locked {
    cursor: pointer;
    opacity: 0.5;
}

/* Locked intent option (greyed out, pointer-events none) */
.painter-intent-option.locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Locked-but-clickable intent option (shows upgrade modal on click) */
.painter-intent-option.locked-clickable {
    opacity: 0.55;
    cursor: pointer;
}

/* Creator upgrade modal — redesigned */
.painter-upgrade-modal {
    max-width: 460px;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.painter-upgrade-header {
    background: linear-gradient(135deg, #3d6b4f 0%, #2a4a35 100%);
    padding: 1.1rem 1.5rem;
    color: #fff;
}
.painter-upgrade-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.painter-upgrade-body {
    padding: 1rem 1.5rem 0.5rem;
}
.painter-upgrade-reason {
    font-size: 0.85rem;
    color: var(--ink-light);
    margin: 0 0 0.85rem;
    font-style: italic;
}
.painter-upgrade-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.painter-upgrade-features li {
    font-size: 0.82rem;
    color: var(--ink);
    padding-left: 1.4em;
    position: relative;
    line-height: 1.4;
}
.painter-upgrade-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #4a7c59;
    font-weight: 700;
}

.painter-upgrade-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 0.85rem 1.5rem 1.25rem;
}

@keyframes painter-cta-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Green CTA button for upgrade — shimmer, thick border, self-contained (no painter-action-btn) */
.painter-upgrade-cta {
    background: linear-gradient(90deg, #3d6b4f 0%, #5fa375 42%, #3d6b4f 100%);
    background-size: 250% auto;
    animation: painter-cta-shimmer 2.2s linear infinite;
    color: #fff;
    border: 2px solid #2a4a35;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.82rem;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s;
}
.painter-upgrade-cta:hover {
    background: linear-gradient(90deg, #2a4a35 0%, #4a8a63 42%, #2a4a35 100%);
    background-size: 250% auto;
    border-color: #1a3226;
    color: #fff;
}

/* Welcome new sprite modal — mode choice layout */
.painter-welcome-modal {
    max-width: 460px;
    text-align: left;
}

.painter-welcome-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 0.65rem 0 0.25rem;
}

.painter-welcome-mode {
    position: relative;
    border: 1px solid var(--ink-light);
    background: var(--parchment-dark, #e8e4d8);
    padding: 0.85rem 0.85rem 0.8rem;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.painter-welcome-mode:hover {
    border-color: var(--accent, #8b4513);
}
.painter-welcome-mode-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.3rem;
}
.painter-welcome-mode-desc {
    font-size: 0.77rem;
    color: var(--ink-light);
    line-height: 1.45;
}

.painter-welcome-mode-locked {
    opacity: 0.55;
}
.painter-welcome-mode-locked:hover {
    border-color: var(--ink-light); /* subdued hover */
    background: var(--parchment-dark, #e8e4d8);
}

.painter-welcome-mode-lock-tag {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7a5c1a;
    background: var(--parchment);
    border: 1px solid #c9a227;
    padding: 1px 5px;
    line-height: 1.5;
}

/* Clear All confirm modal */
.painter-clear-all-modal {
    max-width: 340px;
    text-align: center;
}

/* Save sprite confirm modal */
.painter-save-modal {
    max-width: 320px;
    text-align: center;
}

.painter-save-preview-wrap {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

/* Override showcase-sprite size inside the save modal */
.painter-save-modal .showcase-sprite {
    width: 128px;
    height: 128px;
    background-size: 384px 512px;
}

@keyframes walk-cycle-save-preview {
    0%, 100% { background-position-x: 0; }
    25%       { background-position-x: -128px; }
    50%       { background-position-x: -256px; }
    75%       { background-position-x: -128px; }
}

.painter-save-modal .showcase-sprite.walking {
    animation: walk-cycle-save-preview 0.6s steps(1) infinite;
}

/* Save sprite toolbar button — double-class for specificity over painter-edit-btn */
.painter-edit-btn.painter-save-sprite-btn {
    background: #4a7c59;
    color: #fff;
    border-color: #4a7c59;
    font-weight: 700;
    white-space: nowrap;
}
.painter-edit-btn.painter-save-sprite-btn:hover {
    background: #3a6447;
    border-color: #3a6447;
    color: #fff;
}

/* ============================================
   EDIT TOOLBAR (above canvas)
   ============================================ */

.painter-edit-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    flex-wrap: wrap;
}

.painter-edit-btn {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--ink);
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.painter-edit-btn:hover {
    border-color: var(--accent);
    background: var(--parchment-dark, #e8e4d8);
}

.painter-edit-sep {
    width: 1px;
    height: 20px;
    background: var(--ink-light);
    opacity: 0.4;
    margin: 0 4px;
}

/* Mode toggle buttons — live inside the edit toolbar */
.painter-mode-btn {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--ink);
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}

.painter-mode-btn:hover {
    border-color: var(--accent);
    background: var(--parchment-dark, #e8e4d8);
}

.painter-mode-btn.active {
    background: var(--ink);
    color: var(--parchment);
    border-color: var(--ink);
    font-weight: 600;
}

/* Wardrobe layer select — inline in the toolbar */
.painter-wardrobe-select {
    padding: 0.18rem 0.35rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--ink);
    cursor: pointer;
    max-width: 160px;
}

.painter-wardrobe-select:focus {
    outline: 1px solid var(--gold);
    border-color: var(--gold);
}

/* ============================================
   3-COLUMN LAYOUT
   ============================================ */

.painter-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

/* ── Left column: tools + colours ── */
.painter-tools-col {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Center column: canvas ── */
.painter-canvas-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Right column: preview + frames ── */
.painter-sidebar-col {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ============================================
   CANVAS
   ============================================ */

.painter-canvas-wrap {
    position: relative;
    border: 2px solid var(--ink-light);
    box-sizing: content-box;
    background: repeating-conic-gradient(#e0ddd4 0% 25%, #d4d0c6 0% 50%) 50% / 16px 16px;
    cursor: crosshair;
    display: inline-block;
    image-rendering: pixelated;
    touch-action: none;
}

.painter-canvas-wrap canvas {
    display: block;
    image-rendering: pixelated;
}

#paint-canvas {
    position: relative;
    z-index: 1;
}

.painter-grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    image-rendering: pixelated;
}

.painter-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    image-rendering: pixelated;
    z-index: 2;
}

/* Status bar under canvas */
.painter-status {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--ink-light);
    font-family: monospace;
    display: flex;
    gap: 1rem;
}

.painter-canvas-help {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: var(--ink-light);
    opacity: 0.9;
    font-family: monospace;
}

/* File actions below canvas */
.painter-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.75rem;
    justify-content: center;
}

/* ============================================
   TOOL BUTTONS
   ============================================ */

.painter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.painter-tool-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: border-color 0.15s, background 0.15s;
    padding: 0;
}

.painter-tool-btn:hover {
    border-color: var(--accent);
    background: var(--parchment-dark, #e8e4d8);
}

.painter-tool-btn.active {
    border-color: var(--gold);
    background: #f0eacc;
    box-shadow: inset 0 0 0 1px var(--gold);
}

.painter-tool-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--ink);
}

.painter-tool-btn.active svg {
    fill: var(--accent-dark, #5a3e28);
}

/* ── Tool tooltips ──────────────────────────────────────────── */
.painter-tool-btn[data-tooltip] {
    position: relative;
}
.painter-tool-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
    background: var(--ink, #2a1f0e);
    color: var(--parchment, #f5f0e0);
    font-size: 0.7rem;
    font-family: inherit;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    z-index: 100;
}
.painter-tool-btn[data-tooltip]:hover::after {
    opacity: 1;
}

/* ============================================
   COLOUR SECTION
   ============================================ */

.painter-section-title {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.painter-colours {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.painter-active-colours {
    display: flex;
    gap: 0;
    align-items: center;
    margin-bottom: 2px;
    justify-content: center;
}

.painter-colour-swatch {
    width: 28px;
    height: 28px;
    border: 2px solid var(--ink-light);
    cursor: pointer;
}

.painter-swap-btn {
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 8px;
    margin: 0 4px;
    line-height: 1;
}

.painter-swap-btn:hover {
    background: var(--parchment-dark, #e8e4d8);
}

/* Colour picker (reuses generator cp- styles) */
.painter-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    user-select: none;
    -webkit-user-select: none;
}

.painter-picker-wrap .cp-sv-canvas {
    width: 100%;
    aspect-ratio: 1;
    cursor: crosshair;
    border: 1px solid var(--ink-light);
    display: block;
}

.painter-picker-wrap .cp-hue-canvas {
    width: 100%;
    height: 18px;
    cursor: crosshair;
    border: 1px solid var(--ink-light);
    display: block;
}

.painter-picker-wrap .cp-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.painter-picker-wrap .cp-preview {
    width: 24px;
    height: 24px;
    border: 1px solid var(--ink-light);
    flex-shrink: 0;
}

.painter-picker-wrap .cp-hex {
    width: 6em;
    padding: 0.25rem 0.35rem;
    font-family: monospace;
    font-size: 0.82rem;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink);
}

.painter-picker-wrap .cp-hex:focus {
    outline: 1px solid var(--gold);
    border-color: var(--gold);
}

/* Palette swatches */
.painter-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.painter-palette-swatch {
    width: 18px;
    height: 18px;
    border: 1px solid var(--ink-light);
    cursor: pointer;
    transition: transform 0.1s;
    padding: 0;
}

.painter-palette-swatch:hover {
    transform: scale(1.2);
    z-index: 1;
}

/* ============================================
   ACTION BUTTONS (shared)
   ============================================ */

.painter-action-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.painter-action-btn:hover {
    border-color: var(--accent);
    background: var(--parchment-dark, #e8e4d8);
}

.painter-action-btn.primary {
    background: var(--ink);
    color: var(--parchment);
    border-color: var(--ink);
    font-weight: bold;
}

.painter-action-btn.primary:hover {
    background: var(--accent-dark, #5a3e28);
}

.painter-action-btn.danger {
    color: #8b2020;
    border-color: #8b2020;
}

.painter-action-btn.danger:hover {
    background: #f5e0e0;
}

.painter-action-btn.success {
    background: var(--accent, #4a7c59);
    color: #fff;
    border-color: var(--accent, #4a7c59);
    font-weight: bold;
}
.painter-action-btn.success:hover {
    background: #3a6447;
    border-color: #3a6447;
}

/* ============================================
   PREVIEW CARD (generator-style)
   ============================================ */

.painter-sidebar-col .preview-card {
    border: 2px solid var(--ink);
    background: var(--parchment);
    padding: 1rem;
    text-align: center;
    outline: none;
}

.painter-sidebar-col .preview-card:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold);
}

.painter-sidebar-col .preview-label {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    margin-bottom: 0.25rem;
}

.preview-char-handle {
    font-size: 0.72rem;
    color: var(--ink-light);
    font-style: italic;
    margin-bottom: 0.5rem;
    text-align: center;
}

.painter-sidebar-col .preview-sprite-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    margin-bottom: 0.5rem;
    background: repeating-conic-gradient(rgba(44, 36, 22, 0.06) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
    border: 1px solid rgba(92, 74, 46, 0.25);
}

.painter-sidebar-col .preview-sprite-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 96px;
}

.painter-sidebar-col .preview-hint {
    font-size: 0.65rem;
    color: var(--ink-light);
    opacity: 0.6;
    padding-top: 0.3rem;
}

/* Compass controls */
.painter-sidebar-col .compass-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}

.painter-sidebar-col .compass-step-btn {
    margin-top: 5px;
    width: 80px;
    height: 24px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    background: var(--parchment);
    border: 1px solid var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    color: var(--ink);
}

.painter-sidebar-col .compass-step-btn:hover:not(:disabled) {
    background: rgba(44, 36, 22, 0.08);
}

.painter-sidebar-col .compass-step-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.painter-sidebar-col .compass-row {
    display: flex;
    gap: 1px;
    align-items: center;
}

.painter-sidebar-col .compass-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    background: var(--parchment);
    border: 1px solid var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    font-family: inherit;
    color: var(--ink);
}

.painter-sidebar-col .compass-btn:hover {
    opacity: 1;
    background: rgba(44, 36, 22, 0.08);
}

.painter-sidebar-col .compass-btn.active {
    background: var(--ink);
    color: var(--parchment);
    opacity: 1;
}

.painter-sidebar-col .compass-center {
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    background: var(--parchment);
    border: 1px solid var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    font-family: inherit;
    color: var(--ink);
}

.painter-sidebar-col .compass-center:hover {
    opacity: 1;
    background: rgba(44, 36, 22, 0.08);
}

.painter-sidebar-col .compass-center.walking {
    background: var(--gold);
    color: var(--ink);
    opacity: 1;
}

/* ============================================
   FRAME GRID
   ============================================ */

.painter-frame-grid {
    margin-top: 0;
}

/* Frames section header with optional Show Character toggle */
.painter-frames-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    position: relative;
}

/* Centered wrapper for show-character button — sits over middle frame column */
.painter-show-char-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.painter-show-char-wrap > button {
    pointer-events: all;
}

/* Show character icon button inside frames header */
.painter-show-char-btn {
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--ink-light);
    line-height: 1;
    transition: border-color 0.15s, background 0.15s;
}

.painter-show-char-btn:hover {
    border-color: var(--accent);
    color: var(--ink);
    background: var(--parchment-dark, #e8e4d8);
}

.painter-show-char-btn.active {
    border-color: var(--gold);
    background: #f0eacc;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--gold);
}

.painter-frames {
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(4, 48px);
    gap: 2px;
    image-rendering: pixelated;
}

.painter-frame-btn {
    width: 48px;
    height: 48px;
    border: 2px solid var(--ink-light);
    background: repeating-conic-gradient(#e8e4d8 0% 25%, #ddd8cc 0% 50%) 50% / 8px 8px;
    cursor: pointer;
    padding: 0;
    image-rendering: pixelated;
    position: relative;
    transition: border-color 0.15s;
}

.painter-frame-btn:hover {
    border-color: var(--accent);
}

.painter-frame-btn.active {
    border-color: var(--gold);
}

.painter-frame-btn canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.painter-frame-label {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8px;
    color: var(--ink-light);
    pointer-events: none;
    font-family: monospace;
    text-shadow: 0 0 2px var(--parchment);
}

.painter-dir-labels {
    display: grid;
    grid-template-rows: repeat(4, 48px);
    gap: 2px;
    align-items: center;
    font-size: 0.7rem;
    color: var(--ink-light);
    padding-right: 4px;
    font-family: monospace;
}

.painter-frame-row {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

/* Ghost canvas — character underlay shown in wardrobe mode */
.painter-ghost-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    image-rendering: pixelated;
    opacity: 0.35;
    display: none;
    z-index: 0;
}

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

@media (max-width: 900px) {
    .painter-layout {
        flex-direction: column;
    }
    .painter-tools-col {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .painter-sidebar-col {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .painter-canvas-col {
        align-items: flex-start;
    }
}

/* ============================================
   FILE DROPDOWN
   ============================================ */

.painter-file-dropdown {
    position: relative;
    display: inline-block;
}

.painter-file-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    min-width: 160px;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.15);
    padding: 4px 0;
}

.painter-file-menu-item {
    display: block;
    width: 100%;
    padding: 6px 14px;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.painter-file-menu-item:hover {
    background: var(--parchment-dark, #e8e4d8);
    color: var(--ink);
}

.painter-file-menu-item.danger {
    color: #8b2020;
}

.painter-file-menu-item.danger:hover {
    background: #f8e8e8;
}

.painter-file-menu-sep {
    height: 1px;
    background: var(--ink-light);
    opacity: 0.25;
    margin: 4px 0;
}

/* "Mode:" label in toolbar */
.painter-mode-label {
    font-size: 0.75rem;
    color: var(--ink-light);
    margin-right: 2px;
    white-space: nowrap;
}

/* ============================================
   LOAD CHARACTER MODAL
   ============================================ */

.painter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.painter-modal {
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.75rem;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.painter-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.painter-modal-hint {
    font-size: 0.82rem;
    color: var(--ink-light);
    margin: 0 0 0.85rem;
}

.painter-modal-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--ink);
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.painter-modal-input:focus {
    outline: none;
    border-color: var(--gold);
}

.painter-modal-handle-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s;
}

.painter-modal-handle-row:focus-within {
    border-color: var(--gold);
}

.painter-modal-handle-at {
    padding: 0 0.35rem 0 0.6rem;
    font-size: 0.9rem;
    color: var(--ink-light);
    user-select: none;
    line-height: 1;
}

.painter-modal-handle-row .painter-modal-input {
    border: none;
    margin-bottom: 0;
    padding-left: 0;
    flex: 1;
    min-width: 0;
}

.painter-modal-handle-row .painter-modal-input:focus {
    outline: none;
    border-color: transparent;
}

.painter-modal-error {
    font-size: 0.8rem;
    color: #8b2020;
    margin-bottom: 0.5rem;
    min-height: 1em;
}

.painter-load-preview-plate {
    border: 1px solid var(--ink-light);
    background: rgba(255, 255, 255, 0.55);
    padding: 0.45rem;
    margin-bottom: 0.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.painter-load-preview-label {
    font-size: 0.7rem;
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.painter-load-preview-canvas {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
    border: 1px solid var(--ink-light);
    background: repeating-conic-gradient(#d8d4ca 0% 25%, #c8c4ba 0% 50%) 50% / 8px 8px;
    display: block;
}

.painter-load-preview-handle {
    font-size: 0.74rem;
    color: var(--ink-light);
    min-height: 1em;
}

.painter-load-template-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.4rem;
}

.painter-load-template-label {
    font-size: 0.78rem;
    color: var(--ink-light);
    white-space: nowrap;
}

.painter-load-template-row .painter-action-btn {
    padding: 2px 10px;
    font-size: 0.8rem;
}

.painter-load-template-row .painter-action-btn.active {
    background: var(--accent, #6a5acd);
    color: #fff;
    border-color: var(--accent, #6a5acd);
}

.painter-modal-handle-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.painter-modal-handle-at {
    flex-shrink: 0;
}

.painter-modal-handle-row .painter-modal-input {
    flex: 1;
    min-width: 0;
    width: 100%;
}

.painter-load-mine-btn {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.painter-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 0.2rem;
}

/* Import confirm — wider modal to hold side-by-side sheet previews */
.painter-import-modal {
    max-width: 480px;
}

/* PDS intent modal */
.painter-intent-modal {
    max-width: 500px;
}

.painter-intent-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.painter-intent-preview {
    flex-shrink: 0;
}

.painter-intent-options {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.painter-intent-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.painter-intent-option input[type="radio"] {
    margin-top: 14px;
    flex-shrink: 0;
    accent-color: var(--gold, #b8933a);
}

.painter-intent-card {
    flex: 1;
    border: 1px solid var(--ink-light);
    padding: 10px 12px;
    transition: border-color 0.15s, background 0.15s;
}

.painter-intent-option:has(input:checked) .painter-intent-card {
    border-color: var(--gold, #b8933a);
    background: rgba(184,147,58,0.07);
}

.painter-intent-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.painter-intent-card-desc {
    font-size: 0.75rem;
    color: var(--ink-light);
    line-height: 1.45;
}

/* Wide modal variant */
.painter-modal--wide {
    max-width: 500px;
}

/* Mode transition canvas previews */
.painter-transition-preview-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.painter-transition-preview-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    text-align: center;
    margin-bottom: 3px;
}

.painter-transition-preview {
    display: block;
    width: 72px;
    height: 96px;
    image-rendering: pixelated;
    background: repeating-conic-gradient(#d8d4ca 0% 25%, #c8c4ba 0% 50%) 50% / 8px 8px;
    border: 1px solid var(--ink-light);
}

/* Mode transition guard modal */
.painter-transition-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
}

.painter-transition-opt {
    display: block;
    width: 100%;
    background: var(--paper-mid, #f4f0e8);
    border: 1.5px solid var(--border-color, #ccc);
    border-radius: 6px;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.painter-transition-opt:hover {
    border-color: var(--accent, #7a6a52);
    background: var(--paper-light, #faf7f2);
}

.painter-transition-opt-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ink, #2a2a2a);
    margin-bottom: 3px;
}

.painter-transition-opt-desc {
    font-size: 0.75rem;
    color: var(--ink-light);
    line-height: 1.45;
}

/* Side-by-side incoming / existing preview */
.painter-import-preview-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 1rem;
}

.painter-import-sheet-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    text-align: center;
    margin-bottom: 4px;
}

/* Sprite sheet preview — 1:1 pixel size (144\u00d7192) */
.painter-import-preview {
    display: block;
    width: 144px;
    height: 192px;
    image-rendering: pixelated;
    background: repeating-conic-gradient(#d8d4ca 0% 25%, #c8c4ba 0% 50%) 50% / 8px 8px;
    border: 1px solid var(--ink-light);
}

/* Import action radio group */
.painter-import-options {
    border: 1px solid rgba(92,74,46,0.2);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.25rem;
    background: rgba(44,36,22,0.03);
}

.painter-import-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.82rem;
    color: var(--ink);
    cursor: pointer;
}

.painter-import-option + .painter-import-option {
    border-top: 1px solid rgba(92,74,46,0.12);
}

.painter-import-option input[type="radio"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--gold, #b8933a);
}

.painter-import-option strong {
    display: inline;
}

/* ============================================
   CREATE ITEM BUTTON & MODAL
   ============================================ */

.painter-edit-toolbar {
    flex-wrap: wrap;
}

.painter-create-item-btn {
    background: #4a7c59;
    color: #fff;
    border-color: #4a7c59;
    font-weight: 700;
    white-space: nowrap;
}
.painter-create-item-btn:hover {
    background: #3a6447;
    border-color: #3a6447;
    color: #fff;
}

/* Create Item wrap: flex row so button + select sit inline */
#create-item-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.painter-ci-modal {
    max-width: 560px;
    width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}
.painter-ci-modal-title {
    background: var(--ink, #2a1f0e);
    color: var(--parchment, #f5f0e0);
    margin: -0.75rem -0.75rem 0.75rem;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    border-radius: 0;
}
/* Inline label + hint on same row */
.painter-ci-label-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}
.painter-ci-label-row .painter-ci-label {
    margin-bottom: 0;
}

/* Mode toggle */
.painter-ci-mode-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 0.85rem;
}
.painter-ci-mode-btn {
    flex: 1;
    padding: 5px 10px;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    color: var(--ink-light);
}
.painter-ci-mode-btn.active {
    background: var(--ink, #2a1f0e);
    color: var(--parchment, #f5f0e0);
    border-color: var(--ink, #2a1f0e);
}

/* Rows */
.painter-ci-row {
    margin-bottom: 0.6rem;
}
.painter-ci-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.painter-ci-hint {
    font-size: 0.72rem;
    color: var(--ink-light);
    margin-top: 2px;
    opacity: 0.7;
}
.painter-ci-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.painter-ci-triple {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0.6rem;
}

/* Channel editor */
.painter-ci-channels-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.painter-ci-channel-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--parchment-dark, #e8e4d8);
    border: 1px solid var(--ink-light);
    padding: 2px 6px;
    font-size: 0.78rem;
}
.painter-ci-channel-name {
    font-weight: 600;
    color: var(--ink);
}
.painter-ci-channel-color {
    width: 24px;
    height: 20px;
    cursor: pointer;
    border: 1px solid var(--ink-light);
    padding: 0;
}
.painter-ci-channel-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-light);
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}
.painter-ci-channels-add select {
    font-size: 0.78rem;
}

/* Upload zones */
.painter-ci-uploads {
    display: flex;
    gap: 10px;
    margin-bottom: 0.7rem;
}
.painter-ci-upload-slot {
    flex: 1;
    text-align: center;
}
.painter-ci-upload-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-light);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.painter-ci-upload-zone {
    border: 2px dashed var(--ink-light);
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    background: var(--parchment-dark, #e8e4d8);
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.painter-ci-upload-zone:hover {
    border-color: var(--gold, #b8933a);
    background: rgba(184,147,58,0.05);
}
.painter-ci-upload-zone.has-image {
    border-style: solid;
    border-color: var(--gold, #b8933a);
}
.painter-ci-upload-preview {
    image-rendering: pixelated;
    width: 48px;
    height: 48px;
}
.painter-ci-upload-prompt {
    text-align: center;
    font-size: 0.75rem;
    color: var(--ink-light);
    line-height: 1.4;
}

/* Icon zone (single, fixed 64×64) */
.painter-ci-icon-zone {
    width: 72px;
    height: 72px;
    border: 2px dashed var(--ink-light);
    background: var(--parchment-dark, #e8e4d8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.painter-ci-icon-zone:hover { border-color: var(--gold, #b8933a); }
.painter-ci-icon-zone.has-image { border-style: solid; border-color: var(--gold, #b8933a); }
.painter-ci-icon-zone canvas {
    image-rendering: pixelated;
    width: 64px;
    height: 64px;
    display: block;
}

/* Bottom row: icon left, qty/expiry right */
.painter-ci-bottom-row {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 0.6rem;
}
.painter-ci-icon-section {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.painter-ci-qty-section {
    flex: 1;
}