/* A separate original-drawing workshop; shared game cards remain the preview source. */
.bestiarium-artwork-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: clamp(10px, 3vh, 32px) 12px;
    box-sizing: border-box;
    background: rgba(13, 21, 27, .85);
    overscroll-behavior: contain;
    color: #332819;
    font-family: 'EB Garamond', Georgia, serif;
}
.bestiarium-artwork-dialog {
    width: min(100%, 1000px);
    min-width: 0;
    padding: clamp(16px, 3vw, 32px);
    border: 1px solid #ae8b43;
    border-radius: 12px;
    background: #f5e9cc;
    box-shadow: 0 22px 80px #0008, inset 0 0 0 5px #c7a55e26;
    box-sizing: border-box;
}
.bestiarium-artwork-dialog *, .bestiarium-artwork-dialog *::before, .bestiarium-artwork-dialog *::after { box-sizing: border-box; }
.bestiarium-artwork-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bestiarium-artwork-heading h3 { margin: 0; color: #49301e; font-family: 'Cinzel', Georgia, serif; font-size: clamp(20px, 3vw, 29px); line-height: 1.3; }
.bestiarium-artwork-heading p { margin: 0 0 5px; color: #71532f; font-size: 16px; }
.bestiarium-artwork-close { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid #b3965f; border-radius: 50%; background: #e9d8ac; color: #593b22; cursor: pointer; font: 28px/1 Georgia, serif; }
.bestiarium-artwork-intro { max-width: 780px; margin: 14px 0 22px; font-size: 18px; line-height: 1.45; }
.bestiarium-artwork-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bestiarium-artwork-dialog label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #513b23; font-size: 17px; font-weight: 600; }
.bestiarium-artwork-dialog input, .bestiarium-artwork-dialog select, .bestiarium-artwork-dialog textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #b69b62; border-radius: 5px; background: #fffaf0; color: #2d261b; font: 16px/1.4 Georgia, serif; }
.bestiarium-artwork-dialog input[type="file"] { font: 14px/1.5 system-ui, sans-serif; padding: 9px; }
.bestiarium-artwork-dialog input[type="file"]::file-selector-button { margin-right: 8px; padding: 6px 10px; border: 0; border-radius: 4px; color: #f9edcc; background: #4a563d; cursor: pointer; }
.bestiarium-artwork-dialog textarea { min-height: 88px; resize: vertical; }
.bestiarium-artwork-dialog :focus-visible { outline: 3px solid #317a92; outline-offset: 3px; }
.bestiarium-artwork-dialog :disabled { opacity: .65; cursor: wait; }
.bestiarium-artwork-help { margin: 8px 0 14px; color: #715d3d; font-size: 15px; line-height: 1.4; font-weight: normal; }
.bestiarium-artwork-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, 1fr); gap: 28px; margin: 20px 0 24px; padding: 20px 0; border-top: 1px solid #c7af77; border-bottom: 1px solid #c7af77; }
.bestiarium-artwork-workspace[hidden] { display: none; }
.bestiarium-artwork-editor, .bestiarium-artwork-preview { min-width: 0; }
.bestiarium-artwork-workspace h4 { margin: 0 0 8px; color: #49301e; font: 600 18px/1.3 'Cinzel', Georgia, serif; }
.bestiarium-artwork-stage-wrap { display: flex; justify-content: center; overflow: hidden; padding: 12px; border: 1px solid #bda674; border-radius: 6px; background: #d8caaa; }
.bestiarium-artwork-stage { position: relative; max-width: 100%; flex: none; user-select: none; }
.bestiarium-artwork-stage > img { display: block; width: 100%; height: auto; max-width: none; pointer-events: none; }
.bestiarium-artwork-selection { position: absolute; border: 2px solid #fffbe6; outline: 1px solid #4e5c26; box-shadow: 0 0 0 1500px #171c1e7d; cursor: move; touch-action: none; }
.bestiarium-artwork-selection::before, .bestiarium-artwork-selection::after { position: absolute; content: ''; pointer-events: none; border: 0 solid #fff7; }
.bestiarium-artwork-selection::before { inset: 0 33.333%; border-left-width: 1px; border-right-width: 1px; }
.bestiarium-artwork-selection::after { inset: 33.333% 0; border-top-width: 1px; border-bottom-width: 1px; }
.bestiarium-artwork-handle { position: absolute; z-index: 1; width: 24px; height: 24px; margin: 0; padding: 0; border: 2px solid #405128; border-radius: 50%; background: #fff4cd; touch-action: none; }
.bestiarium-artwork-handle.is-nw { top: -13px; left: -13px; cursor: nwse-resize; }
.bestiarium-artwork-handle.is-ne { top: -13px; right: -13px; cursor: nesw-resize; }
.bestiarium-artwork-handle.is-sw { bottom: -13px; left: -13px; cursor: nesw-resize; }
.bestiarium-artwork-handle.is-se { bottom: -13px; right: -13px; cursor: nwse-resize; }
.bestiarium-artwork-margins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; padding: 0; border: 0; }
.bestiarium-artwork-margins legend { margin-bottom: 8px; color: #715d3d; font-size: 15px; }
.bestiarium-artwork-margins label { font-size: 15px; }
.bestiarium-artwork-margins input { padding: 7px; }
.bestiarium-artwork-crop-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bestiarium-artwork-crop-actions output { color: #715d3d; font: 12px/1.4 system-ui, sans-serif; white-space: nowrap; }
.bestiarium-artwork-card-preview { max-width: 315px; margin: 0 auto; }
.bestiarium-artwork-card-preview .bestiarium-beast-card { width: 100%; }
.bestiarium-artwork-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.bestiarium-artwork-presets .bestiarium-btn { flex: 1 1 auto; min-height: 38px; padding: 8px; font-size: 13px; }
.bestiarium-artwork-presets [aria-pressed="true"] { color: #fff6dc; border-color: #4a563d; background: #4a563d; box-shadow: inset 0 0 0 1px #e0cf9440; }
.bestiarium-artwork-layout-controls { display: grid; gap: 14px; margin: 12px 0 0; padding: 14px; border: 1px solid #c0aa76; border-radius: 6px; background: #fff9eb80; }
.bestiarium-artwork-layout-controls legend { padding: 0 5px; color: #624927; font-size: 17px; }
.bestiarium-artwork-layout-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 4px 12px; }
.bestiarium-artwork-layout-row > label { grid-column: 1 / -1; font-size: 16px; }
.bestiarium-artwork-layout-row input[type="range"] { min-height: 28px; margin: 0; padding: 0; border: 0; accent-color: #536243; background: transparent; cursor: ew-resize; }
.bestiarium-artwork-percent { display: flex; align-items: center; gap: 4px; color: #6f5735; font-size: 15px; }
.bestiarium-artwork-percent input { padding: 6px 3px 6px 6px; font-size: 15px; text-align: right; }
.bestiarium-artwork-custom-color[hidden] { display: none; }
.bestiarium-artwork-custom-color > span { display: flex; align-items: center; gap: 12px; }
.bestiarium-artwork-custom-color input[type="color"] { width: 66px; height: 38px; padding: 3px; cursor: pointer; }
.bestiarium-artwork-custom-color output { color: #6f5735; font: 13px/1.4 system-ui, sans-serif; }
.bestiarium-artwork-pan-area { position: absolute; inset: 0; z-index: 6; cursor: grab; touch-action: none; user-select: none; }
.bestiarium-artwork-pan-area:active { cursor: grabbing; }
.bestiarium-artwork-pan-area:focus-visible { outline-offset: -4px; }
.bestiarium-artwork-status { margin: 16px 0; color: #345124; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.bestiarium-artwork-status:empty { display: none; }
.bestiarium-artwork-status.is-error { padding: 12px; border: 1px solid #b78565; border-radius: 5px; background: #f8dfd1; color: #742c21; }
.bestiarium-artwork-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.bestiarium-artwork-dialog .bestiarium-btn { min-height: 42px; }
@media (max-width: 700px) {
    .bestiarium-artwork-fields, .bestiarium-artwork-workspace { grid-template-columns: minmax(0, 1fr); }
    .bestiarium-artwork-workspace { gap: 24px; }
    .bestiarium-artwork-stage-wrap { max-height: none; }
    .bestiarium-artwork-card-preview { max-width: 290px; }
    .bestiarium-artwork-actions > button { flex: 1 1 auto; }
}