.tbdd-app,
.tbdd-app * {
    box-sizing: border-box;
}

.tbdd-app {
    --tbdd-ink: #26334a;
    --tbdd-green: #4d9f45;
    --tbdd-gold: #f3bd3f;
    --tbdd-cream: #fff8e8;
    --tbdd-paper: #fffdf8;
    color: var(--tbdd-ink);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    max-width: 1500px;
    width: 100%;
}

.tbdd-shell {
    background: linear-gradient(180deg, #fffaf0 0%, #f7edd6 100%);
    border: 3px solid #8c6239;
    border-radius: 24px;
    box-shadow: 0 14px 32px rgba(60, 40, 20, 0.18);
    min-height: 720px;
    overflow: hidden;
}

.tbdd-header {
    align-items: center;
    background: #fff;
    border-bottom: 3px solid #e6d3ad;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 22px 28px;
}

.tbdd-header h1 {
    color: var(--tbdd-ink);
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    margin: 0;
}

.tbdd-eyebrow {
    color: #8a5b23;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.tbdd-help-button,
.tbdd-modal-close {
    align-items: center;
    background: var(--tbdd-gold);
    border: 2px solid #9a6c16;
    border-radius: 50%;
    color: #35240b;
    cursor: pointer;
    display: inline-flex;
    font-size: 24px;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.tbdd-home {
    padding: 34px;
}

.tbdd-intro {
    font-size: 19px;
    font-weight: 700;
    margin: 0 auto 28px;
    max-width: 760px;
    text-align: center;
}

.tbdd-choice-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1050px;
}

.tbdd-choice-card {
    align-items: center;
    background: #fff;
    border: 4px solid #d6c39d;
    border-radius: 22px;
    box-shadow: 0 8px 0 rgba(123, 91, 45, 0.16);
    color: var(--tbdd-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 26px;
    text-align: center;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.tbdd-choice-card:hover,
.tbdd-choice-card:focus-visible {
    box-shadow: 0 12px 0 rgba(123, 91, 45, 0.13);
    transform: translateY(-4px);
}

.tbdd-choice-card strong {
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.1;
    margin: 8px 0;
}

.tbdd-choice-card span:last-child {
    font-size: 16px;
    line-height: 1.4;
    max-width: 330px;
}

.tbdd-choice-icon {
    font-size: 50px;
    line-height: 1;
}

.tbdd-choice-color { border-color: #e7a53a; }
.tbdd-choice-blank { border-color: #56a9dc; }
.tbdd-choice-challenge { border-color: #7ebd64; }
.tbdd-choice-saved { border-color: #ad78c6; }

.tbdd-device-note {
    color: #695d4c;
    font-size: 13px;
    margin: 26px auto 0;
    max-width: 720px;
    text-align: center;
}

.tbdd-studio {
    min-height: 650px;
}

.tbdd-studio-topbar {
    align-items: center;
    background: #f7ecd7;
    border-bottom: 2px solid #d9c39a;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
}

.tbdd-small-button,
.tbdd-action-bar button,
.tbdd-modal-actions button,
.tbdd-saved-actions button {
    background: #fff;
    border: 2px solid #b2915f;
    border-radius: 10px;
    color: var(--tbdd-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    min-height: 42px;
    padding: 8px 13px;
}

.tbdd-small-button:hover,
.tbdd-action-bar button:hover,
.tbdd-modal-actions button:hover,
.tbdd-saved-actions button:hover {
    background: #fff5ce;
}

.tbdd-small-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.tbdd-title-field {
    align-items: center;
    display: flex;
    flex: 1 1 320px;
    gap: 8px;
}

.tbdd-title-field span {
    font-size: 13px;
    font-weight: 800;
}

.tbdd-title-field input {
    background: #fff;
    border: 2px solid #cbb58f;
    border-radius: 9px;
    flex: 1;
    font: inherit;
    min-height: 42px;
    padding: 8px 10px;
}

.tbdd-history-buttons {
    display: flex;
    gap: 7px;
}

.tbdd-save-status {
    color: #48733f;
    font-size: 13px;
    font-weight: 800;
    min-width: 130px;
}

.tbdd-studio-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    min-height: 560px;
}

.tbdd-tools {
    background: #fffaf0;
    border-right: 2px solid #d9c39a;
    overflow-y: auto;
    padding: 16px;
}

.tbdd-tool-group + .tbdd-tool-group {
    border-top: 1px solid #ddcaa6;
    margin-top: 16px;
    padding-top: 16px;
}

.tbdd-tool-label {
    display: block;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.tbdd-tool-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbdd-tool {
    background: #fff;
    border: 2px solid #c8b28a;
    border-radius: 9px;
    color: var(--tbdd-ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    min-height: 44px;
    padding: 6px;
}

.tbdd-tool.is-active {
    background: #ffe49b;
    border-color: #a96d11;
    box-shadow: inset 0 0 0 2px #fff4cf;
}

.tbdd-color-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.tbdd-color-row input[type="color"] {
    height: 44px;
    width: 72px;
}

.tbdd-current-color {
    border: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    height: 34px;
    width: 34px;
}

.tbdd-palette {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 10px;
}

.tbdd-swatch {
    border: 2px solid rgba(0, 0, 0, 0.22);
    border-radius: 50%;
    cursor: pointer;
    height: 27px;
    padding: 0;
    width: 27px;
}

.tbdd-tools input[type="range"] {
    width: 100%;
}

.tbdd-size-tool-group {
    align-items: stretch;
}

.tbdd-size-preview {
    align-items: center;
    background-color: #fff;
    background-image: linear-gradient(45deg, #ececec 25%, transparent 25%), linear-gradient(-45deg, #ececec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ececec 75%), linear-gradient(-45deg, transparent 75%, #ececec 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border: 2px solid #c5b18c;
    border-radius: 14px;
    display: flex;
    height: 82px;
    justify-content: center;
    margin: 8px 0 10px;
    overflow: hidden;
}

.tbdd-size-preview.is-fill-tool::after {
    color: #6b5435;
    content: attr(data-no-size-label);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .1em;
}

.tbdd-size-preview.is-fill-tool .tbdd-size-dot {
    display: none;
}

.tbdd-size-dot {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    flex: 0 0 auto;
    min-height: 2px;
    min-width: 2px;
    transition: width 80ms linear, height 80ms linear, background 80ms linear, opacity 80ms linear;
}

.tbdd-size-adjuster {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
}

.tbdd-size-step {
    align-items: center;
    background: #fff8e8;
    border: 2px solid #9b7b45;
    border-radius: 50%;
    color: #402f18;
    cursor: pointer;
    display: inline-flex;
    font-size: 23px;
    font-weight: 900;
    height: 36px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 36px;
}

.tbdd-size-step:disabled {
    cursor: not-allowed;
    opacity: .38;
}

.tbdd-size-value {
    color: #5b452b;
    display: block;
    font-size: 13px;
    font-weight: 900;
    margin-top: 7px;
    min-height: 20px;
    text-align: center;
}

.tbdd-zoom-controls {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-zoom-controls .tbdd-tool-label {
    grid-column: 1 / -1;
}

.tbdd-canvas-stage {
    align-items: flex-start;
    background-color: #c9c2b5;
    background-image: linear-gradient(45deg, rgba(255,255,255,.24) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.24) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.24) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.24) 75%);
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    background-size: 24px 24px;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: auto;
    padding: 20px;
}

.tbdd-canvas-wrap {
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    flex: 0 0 auto;
    position: relative;
}

.tbdd-canvas-wrap canvas {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.tbdd-paint-canvas {
    cursor: crosshair;
    touch-action: none;
    z-index: 1;
}

.tbdd-line-canvas {
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
}

.tbdd-action-bar {
    align-items: center;
    background: #fff;
    border-top: 2px solid #d9c39a;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 14px;
}

.tbdd-action-bar button {
    min-width: 108px;
}

.tbdd-action-bar .tbdd-finished-button {
    background: var(--tbdd-green);
    border-color: #2f6e2b;
    color: #fff;
}

.tbdd-modal[hidden] {
    display: none;
}

.tbdd-modal {
    align-items: center;
    background: rgba(24, 24, 28, 0.72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 100000;
}

body.tbdd-modal-open {
    overflow: hidden;
}

.tbdd-modal-card {
    background: var(--tbdd-paper);
    border: 4px solid #8c6239;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    max-height: 90vh;
    max-width: 660px;
    overflow: auto;
    padding: 34px;
    position: relative;
    text-align: center;
    width: 100%;
}

.tbdd-large-modal {
    max-width: 1040px;
}

.tbdd-modal-card h2 {
    color: var(--tbdd-ink);
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15;
    margin: 8px 0 14px;
}

.tbdd-modal-close {
    height: 42px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 42px;
}

.tbdd-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}

.tbdd-modal-actions button:first-child {
    background: var(--tbdd-green);
    border-color: #2f6e2b;
    color: #fff;
}

.tbdd-challenge-category {
    color: #805c2d;
    font-weight: 800;
}

.tbdd-sheet-gallery,
.tbdd-saved-gallery {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
}

.tbdd-sheet-card {
    background: #fff;
    border: 3px solid #d7c29c;
    border-radius: 15px;
    color: var(--tbdd-ink);
    cursor: pointer;
    overflow: hidden;
    padding: 10px;
}

.tbdd-sheet-card img {
    aspect-ratio: 17 / 22;
    background: #fff;
    border-radius: 9px;
    display: block;
    object-fit: contain;
    width: 100%;
}

.tbdd-sheet-card strong {
    display: block;
    font-size: 16px;
    padding: 10px 4px 4px;
}

.tbdd-saved-card {
    background: #fff;
    border: 2px solid #d7c29c;
    border-radius: 15px;
    overflow: hidden;
    text-align: left;
}

.tbdd-saved-card > img {
    aspect-ratio: 17 / 22;
    background: #eee;
    display: block;
    object-fit: contain;
    width: 100%;
}

.tbdd-saved-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.tbdd-saved-card strong {
    font-size: 17px;
}

.tbdd-saved-card span {
    color: #6b6254;
    font-size: 13px;
    margin-top: 4px;
}

.tbdd-saved-actions {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    padding: 0 12px 12px;
}

.tbdd-saved-actions button {
    font-size: 12px;
    min-height: 36px;
    padding: 5px 7px;
}

.tbdd-saved-actions .tbdd-delete-button {
    color: #a52121;
    grid-column: 1 / -1;
}

.tbdd-empty-state {
    align-items: center;
    background: #fff;
    border: 2px dashed #c1a97f;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1;
    padding: 36px;
}

.tbdd-completion-actions button {
    min-width: 150px;
}

.tbdd-toast {
    background: #26334a;
    border: 2px solid #fff;
    border-radius: 12px;
    bottom: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-weight: 800;
    left: 50%;
    max-width: min(90vw, 520px);
    padding: 13px 18px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 100001;
}

@media (max-width: 960px) {
    .tbdd-studio-layout {
        grid-template-columns: 1fr;
    }

    .tbdd-tools {
        border-bottom: 2px solid #d9c39a;
        border-right: 0;
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: none;
    }

    .tbdd-tool-group + .tbdd-tool-group {
        border-left: 1px solid #ddcaa6;
        border-top: 0;
        margin: 0;
        padding: 0 0 0 14px;
    }

    .tbdd-zoom-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tbdd-shell {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
    }

    .tbdd-header,
    .tbdd-home {
        padding: 18px;
    }

    .tbdd-choice-grid,
    .tbdd-sheet-gallery,
    .tbdd-saved-gallery {
        grid-template-columns: 1fr;
    }

    .tbdd-choice-card {
        min-height: 170px;
    }

    .tbdd-tools {
        display: block;
        padding: 12px;
    }

    .tbdd-tool-group + .tbdd-tool-group {
        border-left: 0;
        border-top: 1px solid #ddcaa6;
        margin-top: 12px;
        padding: 12px 0 0;
    }

    .tbdd-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tbdd-palette {
        grid-template-columns: repeat(8, 1fr);
    }

    .tbdd-canvas-stage {
        min-height: 500px;
        padding: 12px;
    }

    .tbdd-action-bar {
        bottom: 0;
        position: sticky;
        z-index: 20;
    }

    .tbdd-action-bar button {
        flex: 1 1 42%;
    }

    .tbdd-modal {
        padding: 10px;
    }

    .tbdd-modal-card {
        max-height: 95vh;
        padding: 26px 18px;
    }
}


/* v0.1.3 text, shapes, and color editor */
.tbdd-tool-options[hidden] {
    display: none;
}

.tbdd-shape-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbdd-shape-button,
.tbdd-shape-mode-button {
    background: #fff;
    border: 2px solid #c8b28a;
    border-radius: 9px;
    color: var(--tbdd-ink);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 38px;
    padding: 5px;
}

.tbdd-shape-button.is-active,
.tbdd-shape-mode-button.is-active {
    background: #dff3d6;
    border-color: #4d8d40;
    box-shadow: inset 0 0 0 2px #f5fff1;
}

.tbdd-shape-mode {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
    margin-top: 8px;
}

.tbdd-tool-hint {
    color: #6b5b46;
    font-size: 12px;
    line-height: 1.35;
    margin: 8px 0 0;
}

.tbdd-color-row {
    align-items: stretch;
}

.tbdd-color-editor-launch {
    align-items: center;
    background: #fff;
    border: 2px solid #b2915f;
    border-radius: 10px;
    color: var(--tbdd-ink);
    cursor: pointer;
    display: flex;
    flex: 1;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    gap: 8px;
    justify-content: center;
    min-height: 46px;
    padding: 5px 9px;
}

.tbdd-color-editor-launch .tbdd-current-color {
    flex: 0 0 auto;
    height: 30px;
    width: 30px;
}

.tbdd-color-row input[type="color"] {
    border: 2px solid #b2915f;
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 54px;
    height: 46px;
    padding: 3px;
    width: 54px;
}

.tbdd-color-actions {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    margin-top: 9px;
}

.tbdd-color-actions .tbdd-small-button {
    font-size: 11px;
    min-height: 38px;
    padding: 5px;
}

.tbdd-paint-canvas.is-color-matcher {
    cursor: copy;
}

.tbdd-paint-canvas.is-text-placement {
    cursor: text;
}

.tbdd-field-label,
.tbdd-text-settings label,
.tbdd-color-values label {
    color: var(--tbdd-ink);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 900;
    gap: 6px;
    text-align: left;
}

.tbdd-text-modal-card textarea,
.tbdd-text-modal-card select,
.tbdd-color-values input {
    background: #fff;
    border: 2px solid #c7ad82;
    border-radius: 10px;
    color: var(--tbdd-ink);
    font: inherit;
    min-height: 44px;
    padding: 9px 11px;
    width: 100%;
}

.tbdd-text-modal-card textarea {
    margin: 8px 0 16px;
    resize: vertical;
}

.tbdd-text-settings {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}

.tbdd-text-settings output {
    color: #6b5435;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.tbdd-text-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    justify-content: center;
    margin: 18px 0;
}

.tbdd-text-toggles label {
    align-items: center;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 5px;
}

.tbdd-text-preview {
    align-items: center;
    background: #fff;
    border: 2px dashed #c7ad82;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    min-height: 110px;
    overflow-wrap: anywhere;
    padding: 18px;
    white-space: pre-wrap;
}

.tbdd-color-modal-card {
    text-align: left;
}

.tbdd-color-modal-card > h2,
.tbdd-color-modal-card > .tbdd-eyebrow {
    text-align: center;
}

.tbdd-color-editor-layout {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .85fr);
    margin-top: 22px;
}

.tbdd-spectrum-column {
    min-width: 0;
}

.tbdd-color-spectrum {
    border: 2px solid #aaa;
    border-radius: 12px;
    cursor: crosshair;
    display: block;
    height: auto;
    max-height: 330px;
    touch-action: none;
    width: 100%;
}

.tbdd-hue-label {
    align-items: center;
    display: grid;
    font-size: 13px;
    font-weight: 900;
    gap: 10px;
    grid-template-columns: 42px 1fr;
    margin-top: 12px;
}

.tbdd-hue-label input[type="range"] {
    appearance: none;
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    border: 1px solid #888;
    border-radius: 999px;
    height: 18px;
    width: 100%;
}

.tbdd-hue-label input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    background: #fff;
    border: 2px solid #222;
    border-radius: 50%;
    height: 28px;
    width: 28px;
}

.tbdd-color-values {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.tbdd-color-comparison {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-color-comparison > div {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 900;
    gap: 6px;
}

.tbdd-color-large-swatch {
    border: 2px solid #666;
    border-radius: 10px;
    display: block;
    height: 70px;
    width: 100%;
}

.tbdd-rgb-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
}

.tbdd-color-match-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-editor-color-section {
    border-top: 1px solid #d7c29c;
    margin-top: 22px;
    padding-top: 18px;
}

.tbdd-editor-palette {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(12, minmax(24px, 1fr));
}

.tbdd-editor-swatch,
.tbdd-custom-color {
    aspect-ratio: 1;
    border: 2px solid rgba(0,0,0,.28);
    border-radius: 50%;
    cursor: pointer;
    min-height: 28px;
    padding: 0;
}

.tbdd-custom-color-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tbdd-custom-colors {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(12, minmax(28px, 1fr));
}

.tbdd-custom-color:not(.has-color) {
    background: transparent;
    border-style: dashed;
    cursor: default;
}

@media (max-width: 960px) {
    .tbdd-color-editor-layout {
        grid-template-columns: 1fr;
    }

    .tbdd-editor-palette {
        grid-template-columns: repeat(8, minmax(24px, 1fr));
    }
}

@media (max-width: 720px) {
    .tbdd-text-settings,
    .tbdd-rgb-grid,
    .tbdd-color-match-actions {
        grid-template-columns: 1fr;
    }

    .tbdd-editor-palette,
    .tbdd-custom-colors {
        grid-template-columns: repeat(6, minmax(28px, 1fr));
    }

    .tbdd-color-editor-layout {
        gap: 16px;
    }
}

/* -------------------------------------------------------------------------
 * Remy Le-Cluck' Doodle Den visual system, v0.2.0
 * ---------------------------------------------------------------------- */
.tbdd-app {
    --tbdd-ink: #3e2a1f;
    --tbdd-deep-brown: #3b2418;
    --tbdd-brown: #6d4125;
    --tbdd-wood: #754725;
    --tbdd-green: #3f7837;
    --tbdd-green-dark: #285a29;
    --tbdd-gold: #d9a93d;
    --tbdd-orange: #c75d28;
    --tbdd-purple: #765095;
    --tbdd-cream: #f8eed2;
    --tbdd-paper: #fffaf0;
    --tbdd-paper-dark: #ead9af;
    color: var(--tbdd-ink);
    font-family: "Trebuchet MS", Arial, sans-serif;
    max-width: 1560px;
}

.tbdd-shell {
    background:
        radial-gradient(circle at 8% 12%, rgba(91, 135, 70, .22), transparent 21%),
        radial-gradient(circle at 92% 30%, rgba(210, 160, 61, .18), transparent 18%),
        repeating-linear-gradient(90deg, rgba(74, 43, 24, .07) 0 2px, transparent 2px 18px),
        linear-gradient(180deg, #5b351e 0%, #7a4b2a 45%, #4a2a19 100%);
    border: 5px solid #3a2318;
    border-radius: 20px;
    box-shadow: inset 0 0 0 3px rgba(221, 177, 91, .35), 0 18px 42px rgba(39, 24, 12, .28);
    overflow: hidden;
}

.tbdd-site-header {
    align-items: center;
    background:
        linear-gradient(rgba(255, 250, 237, .96), rgba(239, 222, 181, .97)),
        repeating-linear-gradient(8deg, transparent 0 20px, rgba(95, 66, 36, .06) 20px 21px);
    border-bottom: 4px solid #5d3922;
    display: grid;
    gap: 18px;
    grid-template-columns: 108px minmax(240px, 1fr) auto;
    min-height: 96px;
    padding: 8px 22px;
    position: relative;
    z-index: 5;
}

.tbdd-club-logo-link {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tbdd-club-logo {
    display: block;
    height: 88px;
    object-fit: contain;
    width: 88px;
}

.tbdd-breadcrumb {
    align-items: center;
    color: #4d3a2c;
    display: flex;
    flex-wrap: wrap;
    font-family: Georgia, serif;
    font-size: 17px;
    gap: 10px;
}

.tbdd-breadcrumb strong {
    color: var(--tbdd-green-dark);
}

.tbdd-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
}

.tbdd-header-actions button,
.tbdd-header-actions a,
.tbdd-painted-button,
.tbdd-home-feature-card button,
.tbdd-finish-top {
    background: linear-gradient(#fffdf6, #ead7ad);
    border: 2px solid #795333;
    border-radius: 9px;
    color: #38271c;
    cursor: pointer;
    display: inline-flex;
    font: 800 14px/1.15 "Trebuchet MS", Arial, sans-serif;
    justify-content: center;
    min-height: 42px;
    padding: 10px 15px;
    text-decoration: none;
}

.tbdd-header-actions a:last-child,
.tbdd-painted-button,
.tbdd-finish-top {
    background: linear-gradient(#598e49, #326b34);
    border-color: #234d27;
    color: #fffbea;
}

.tbdd-home {
    padding: 0 22px 30px;
}

.tbdd-home > section,
.tbdd-home-lower-grid,
.tbdd-home-motto,
.tbdd-home > .tbdd-device-note {
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
}

.tbdd-hero {
    background:
        linear-gradient(90deg, rgba(26, 18, 12, .18), transparent 25%, transparent 75%, rgba(26, 18, 12, .2)),
        radial-gradient(circle at 17% 20%, rgba(255, 246, 188, .32), transparent 24%),
        repeating-linear-gradient(90deg, rgba(50, 27, 14, .15) 0 1px, transparent 1px 52px),
        linear-gradient(180deg, #816044 0%, #4f3424 100%);
    border: 3px solid #342116;
    border-top: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    min-height: 480px;
    overflow: hidden;
    padding: 30px 32px 0;
    position: relative;
}

.tbdd-hero::before,
.tbdd-hero::after {
    content: "";
    pointer-events: none;
    position: absolute;
}

.tbdd-hero::before {
    background:
        radial-gradient(circle, #f5dc7a 0 2px, transparent 3px) 0 0 / 28px 28px,
        radial-gradient(circle, rgba(91, 161, 73, .65) 0 3px, transparent 4px) 12px 10px / 42px 42px;
    height: 120px;
    left: -20px;
    opacity: .35;
    top: 42px;
    width: 190px;
}

.tbdd-hero::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    height: 3px;
    left: 0;
    right: 0;
    top: 12px;
}

.tbdd-hero-copy {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 28px;
    position: relative;
    z-index: 2;
}

.tbdd-title-sign {
    background:
        radial-gradient(circle at 10% 15%, rgba(56, 116, 55, .16) 0 4px, transparent 5px),
        radial-gradient(circle at 85% 18%, rgba(126, 65, 136, .16) 0 5px, transparent 6px),
        repeating-linear-gradient(2deg, rgba(93, 61, 33, .08) 0 1px, transparent 1px 14px),
        linear-gradient(#f8efd3, #e8d19f);
    border: 7px solid #4e2d1b;
    border-radius: 38% 18% 31% 16% / 12% 18% 11% 15%;
    box-shadow: inset 0 0 0 3px #b8894e, 0 11px 0 rgba(43, 26, 16, .28);
    max-width: 735px;
    padding: 28px 44px 23px;
    position: relative;
    text-align: center;
    transform: rotate(-1deg);
    width: 100%;
}

.tbdd-title-sign::before,
.tbdd-title-sign::after {
    background: #4d7838;
    border-radius: 50%;
    content: "";
    height: 14px;
    position: absolute;
    top: 16px;
    width: 14px;
}

.tbdd-title-sign::before { left: 22px; }
.tbdd-title-sign::after { right: 22px; }

.tbdd-title-sign h1 {
    color: #3f6c32;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 68px);
    letter-spacing: .025em;
    line-height: .98;
    margin: 0;
    overflow-wrap: anywhere;
    text-shadow: 2px 2px 0 #f5dd9b, 4px 4px 0 rgba(81, 47, 24, .17);
}

.tbdd-title-sign p {
    border-top: 2px solid rgba(82, 50, 29, .35);
    color: #4d2c20;
    font: italic 700 22px/1.2 Georgia, serif;
    margin: 16px 0 4px;
    padding-top: 12px;
}

.tbdd-title-sign span {
    color: #59422e;
    font: 700 15px/1.2 Georgia, serif;
}

.tbdd-remy-greeting {
    background: #fff8e6;
    border: 3px solid #98724a;
    box-shadow: 7px 8px 0 rgba(45, 27, 15, .2);
    margin-top: 24px;
    max-width: 570px;
    padding: 17px 24px 15px;
    position: relative;
    text-align: center;
    transform: rotate(.5deg);
}

.tbdd-remy-greeting::before,
.tbdd-remy-greeting::after {
    background: #9b773e;
    border: 2px solid #5c3d23;
    border-radius: 50%;
    content: "";
    height: 14px;
    position: absolute;
    top: 8px;
    width: 14px;
}
.tbdd-remy-greeting::before { left: 10px; }
.tbdd-remy-greeting::after { right: 10px; }

.tbdd-remy-greeting strong {
    color: #8b3d2e;
    display: block;
    font: italic 700 25px/1.2 Georgia, serif;
}

.tbdd-remy-greeting p {
    font: 17px/1.45 Georgia, serif;
    margin: 8px auto 11px;
    max-width: 480px;
}

.tbdd-read-greeting {
    background: transparent;
    border: 0;
    color: var(--tbdd-green-dark);
    cursor: pointer;
    font: 800 13px/1 "Trebuchet MS", Arial, sans-serif;
    text-decoration: underline;
}

.tbdd-hero-remy {
    align-items: end;
    display: flex;
    justify-content: center;
    min-height: 450px;
    position: relative;
}

.tbdd-hero-remy > img {
    filter: drop-shadow(0 14px 8px rgba(22, 13, 8, .3));
    height: min(455px, 38vw);
    max-height: 455px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.tbdd-hero-masterpiece {
    background: #b16a33;
    border: 8px solid #4a2a18;
    box-shadow: 7px 8px 0 rgba(28, 17, 10, .25);
    height: 265px;
    overflow: hidden;
    position: absolute;
    right: 4px;
    top: 26px;
    transform: rotate(3deg);
    width: 185px;
    z-index: 1;
}

.tbdd-hero-masterpiece img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section,
.tbdd-featured-challenge,
.tbdd-home-lower-grid {
    background:
        repeating-linear-gradient(7deg, transparent 0 13px, rgba(108, 77, 45, .035) 13px 14px),
        linear-gradient(#fff9e9, #edddb7);
    border: 3px solid #5d3a23;
    box-shadow: 0 9px 0 rgba(46, 27, 15, .18);
    margin-top: 22px;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section {
    padding: 27px 28px 30px;
}

.tbdd-create-section > h2,
.tbdd-masterpiece-section h2,
.tbdd-gallery-section h2,
.tbdd-home-feature-card h2,
.tbdd-featured-challenge h2 {
    color: var(--tbdd-green-dark);
    font-family: Georgia, serif;
    letter-spacing: .02em;
    margin-top: 0;
}

.tbdd-create-section > h2 {
    font-size: clamp(30px, 3vw, 44px);
    margin-bottom: 5px;
    text-align: center;
}

.tbdd-section-lead {
    font: 16px/1.45 Georgia, serif;
    margin: 0 auto 22px;
    max-width: 760px;
    text-align: center;
}

.tbdd-choice-grid {
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
}

.tbdd-choice-card {
    background: linear-gradient(#fffdf5, #f0dfb9);
    border: 3px solid #8a6943;
    border-radius: 11px;
    box-shadow: 0 6px 0 rgba(87, 55, 30, .18);
    min-height: 300px;
    padding: 20px 18px 16px;
    position: relative;
}

.tbdd-choice-card::before {
    background: rgba(141, 100, 53, .12);
    border-radius: 50%;
    content: "";
    height: 11px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 11px;
}

.tbdd-choice-card strong {
    color: var(--tbdd-green-dark);
    font-family: Georgia, serif;
    font-size: clamp(22px, 2.1vw, 30px);
}

.tbdd-choice-card > span:not(.tbdd-card-object) {
    font: 15px/1.4 Georgia, serif;
}

.tbdd-choice-card em {
    color: #6a5034;
    font: italic 14px/1.35 Georgia, serif;
    margin-top: 13px;
}

.tbdd-card-object {
    align-items: center;
    background: #fffdf8;
    border: 5px solid #775032;
    box-shadow: 4px 5px 0 rgba(69, 41, 20, .15);
    color: #9c5229;
    display: flex;
    font: 800 54px/1 Georgia, serif;
    height: 120px;
    justify-content: center;
    margin-bottom: 5px;
    width: 100px;
}

.tbdd-clipboard-art { transform: rotate(-3deg); }
.tbdd-blank-canvas { border-color: #99714a; position: relative; }
.tbdd-blank-canvas::after { background: #7c512e; bottom: -22px; content: ""; height: 24px; left: 42px; position: absolute; width: 10px; }
.tbdd-challenge-card { background: #e8d3a2; border-color: #7a5d35; transform: rotate(2deg); }

.tbdd-section-heading-row {
    align-items: end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.tbdd-section-heading-row h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: 4px;
}

.tbdd-section-heading-row p {
    font-family: Georgia, serif;
    margin: 0;
}

.tbdd-remy-quote {
    background: #f7edcf;
    border: 2px dashed #9a7448;
    color: #6d3f2c;
    font: italic 15px/1.3 Georgia, serif;
    max-width: 290px;
    padding: 10px 13px;
    transform: rotate(1deg);
}

.tbdd-masterpiece-grid {
    align-items: stretch;
    display: grid;
    gap: 23px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tbdd-masterpiece {
    background: #fff8e7;
    margin: 0;
    padding: 11px;
}

.tbdd-masterpiece img {
    background: #f5e7c4;
    display: block;
    height: 310px;
    object-fit: cover;
    width: 100%;
}

.tbdd-frame-red { border: 13px ridge #9c4b32; }
.tbdd-frame-gold { border: 13px ridge #bd8c34; }
.tbdd-frame-blue { border: 13px ridge #477b82; }

.tbdd-masterpiece figcaption {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 5px 2px;
    text-align: center;
}

.tbdd-masterpiece figcaption strong {
    color: #4a2c1e;
    font: 700 18px/1.2 Georgia, serif;
}

.tbdd-masterpiece figcaption span {
    color: #68503c;
    font: italic 14px/1.3 Georgia, serif;
}

.tbdd-home-sheet-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tbdd-home-sheet-card {
    background: #fffaf0;
    border: 3px solid #a18155;
    box-shadow: 0 5px 0 rgba(70, 43, 23, .15);
    padding: 8px;
}

.tbdd-home-sheet-card button {
    background: transparent;
    border: 0;
    color: var(--tbdd-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 8px;
    padding: 0;
    text-align: center;
    width: 100%;
}

.tbdd-sheet-thumb {
    align-items: center;
    background: #fff;
    border: 1px solid #d2c2a0;
    display: flex;
    height: 230px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.tbdd-sheet-thumb img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.tbdd-home-sheet-card strong {
    font: 700 16px/1.25 Georgia, serif;
    min-height: 40px;
}

.tbdd-home-sheet-card button > span:last-child {
    background: var(--tbdd-green);
    border: 2px solid var(--tbdd-green-dark);
    border-radius: 7px;
    color: #fff;
    font-weight: 800;
    padding: 8px;
}

.tbdd-empty-message {
    grid-column: 1 / -1;
    text-align: center;
}

.tbdd-featured-challenge {
    align-items: center;
    display: grid;
    gap: 22px;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    padding: 22px 28px;
}

.tbdd-featured-challenge h2 {
    color: var(--tbdd-purple);
    font-size: clamp(22px, 2.5vw, 34px);
    margin-bottom: 6px;
}

.tbdd-featured-challenge p {
    font-family: Georgia, serif;
    margin: 0;
}

.tbdd-challenge-doodle {
    background: #f7e9be;
    border: 3px solid #87633b;
    color: #8f4c37;
    font: 800 45px/1.08 "Comic Sans MS", cursive;
    min-height: 130px;
    padding: 12px;
    text-align: center;
    transform: rotate(-2deg);
}

.tbdd-purple-button {
    background: linear-gradient(#916bb0, #674382);
    border-color: #4f3566;
}

.tbdd-home-lower-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 17px;
}

.tbdd-home-feature-card {
    background: rgba(255, 250, 237, .86);
    border: 2px solid #a48255;
    min-height: 205px;
    padding: 20px;
    text-align: center;
}

.tbdd-home-feature-card h2 {
    font-size: 25px;
    margin-bottom: 8px;
}

.tbdd-home-feature-card p {
    font-family: Georgia, serif;
    line-height: 1.45;
}

.tbdd-feature-icon {
    color: var(--tbdd-orange);
    font-size: 45px;
}

.tbdd-home-feature-card button {
    background: var(--tbdd-green);
    border-color: var(--tbdd-green-dark);
    color: #fff;
}

.tbdd-ask-remy-card {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 38% 1fr;
    text-align: left;
}

.tbdd-ask-remy-card img {
    height: 175px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.tbdd-home > .tbdd-device-note {
    background: rgba(255, 248, 225, .92);
    border: 2px solid #8d6941;
    color: #5f4936;
    margin-top: 23px;
    padding: 11px 15px;
}

.tbdd-home-motto,
.tbdd-studio-motto {
    background: #efe0b7;
    border: 3px solid #6d4528;
    color: #5d3c28;
    font: italic 700 17px/1.35 Georgia, serif;
    margin-top: 20px;
    padding: 11px 15px;
    text-align: center;
}

/* Branded studio workspace */
.tbdd-studio {
    background:
        radial-gradient(circle at 15% 15%, rgba(103, 145, 77, .16), transparent 18%),
        linear-gradient(180deg, #4d301f, #6e4328 45%, #402619);
    padding-bottom: 15px;
}

.tbdd-studio-topbar {
    background: linear-gradient(#fff9e9, #ead7ac);
    border-bottom: 4px solid #56351f;
    flex-wrap: nowrap;
    gap: 9px;
    padding: 9px 13px;
}

.tbdd-studio-logo {
    height: 72px;
    object-fit: contain;
    width: 72px;
}

.tbdd-finish-top {
    white-space: nowrap;
}

.tbdd-studio-layout {
    display: grid;
    grid-template-columns: 190px minmax(380px, 1fr) 320px;
    min-height: 650px;
}

.tbdd-tools,
.tbdd-options {
    background:
        repeating-linear-gradient(8deg, transparent 0 11px, rgba(92, 64, 35, .035) 11px 12px),
        linear-gradient(#fff8e8, #e8d4a7);
    border: 0;
    overflow-y: auto;
    padding: 14px 12px;
}

.tbdd-tools { border-right: 4px solid #5d3b24; }
.tbdd-options { border-left: 4px solid #5d3b24; }

.tbdd-panel-title {
    background: linear-gradient(#80502d, #56321d);
    border: 3px solid #3a2418;
    color: #fff0c5;
    font: 700 20px/1 Georgia, serif;
    margin: 0 0 13px;
    padding: 9px;
    text-align: center;
    text-transform: uppercase;
}

.tbdd-tools .tbdd-tool-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr;
}

.tbdd-tool {
    align-items: center;
    background: linear-gradient(#fffdf7, #ead6ab);
    border: 2px solid #8c6a42;
    border-radius: 6px;
    display: flex;
    font-size: 14px;
    gap: 9px;
    justify-content: flex-start;
    min-height: 45px;
    padding: 7px 9px;
}

.tbdd-tool span {
    align-items: center;
    color: #8d4728;
    display: inline-flex;
    font: 800 22px/1 Georgia, serif;
    justify-content: center;
    min-width: 26px;
}

.tbdd-tool.is-active {
    background: #d9edbd;
    border-color: var(--tbdd-green-dark);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}

.tbdd-match-tool {
    width: 100%;
}

.tbdd-remy-tip {
    align-items: end;
    border-top: 2px solid #b59a6d;
    display: grid;
    gap: 3px;
    grid-template-columns: 72px 1fr;
    margin-top: 15px;
    padding-top: 13px;
}

.tbdd-remy-tip img {
    height: 98px;
    object-fit: contain;
    object-position: center bottom;
    width: 72px;
}

.tbdd-remy-tip p {
    background: #fff5d8;
    border: 2px solid #957044;
    font: italic 12px/1.35 Georgia, serif;
    margin: 0;
    padding: 8px;
}

.tbdd-remy-tip strong {
    color: var(--tbdd-purple);
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.tbdd-canvas-stage {
    background:
        radial-gradient(circle at 10% 85%, rgba(46, 90, 45, .25), transparent 18%),
        repeating-linear-gradient(90deg, rgba(45, 25, 13, .11) 0 2px, transparent 2px 38px),
        linear-gradient(180deg, #5e3b27, #3d281d);
    padding: 48px 20px 28px;
    position: relative;
}

.tbdd-canvas-label {
    background: #6f4428;
    border: 3px solid #2f1e15;
    color: #fff0c5;
    font: 700 17px/1 Georgia, serif;
    left: 50%;
    padding: 8px 26px;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
}

.tbdd-canvas-wrap {
    border: 9px solid #7a4d2a;
    box-shadow: 0 0 0 4px #362218, 0 16px 22px rgba(24, 15, 9, .35);
}

.tbdd-options .tbdd-tool-group {
    background: rgba(255, 252, 242, .65);
    border: 2px solid #b69a6c;
    margin: 0 0 12px;
    padding: 12px;
}

.tbdd-options .tbdd-tool-group + .tbdd-tool-group {
    border-top: 2px solid #b69a6c;
    margin-top: 0;
}

.tbdd-options .tbdd-palette {
    grid-template-columns: repeat(6, 1fr);
}

.tbdd-size-preview {
    background: #f7eed6;
    border: 2px dashed #a08155;
    min-height: 92px;
}

.tbdd-size-dot {
    max-height: 64px;
    max-width: 64px;
}

.tbdd-shape-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbdd-zoom-controls {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-zoom-controls .tbdd-tool-label {
    grid-column: 1 / -1;
}

.tbdd-action-bar {
    background: linear-gradient(#f6ead0, #dfc58d);
    border-top: 4px solid #52321d;
    gap: 9px;
    padding: 13px;
}

.tbdd-action-bar button {
    border-color: #795331;
    font-size: 15px;
    min-height: 52px;
}

.tbdd-action-bar .tbdd-finished-button {
    background: linear-gradient(#5d914e, #356a34);
    color: #fff;
}

.tbdd-studio-motto {
    margin: 13px auto 0;
    max-width: 760px;
}

/* Modal refinements */
.tbdd-modal {
    background: rgba(36, 23, 14, .82);
}

.tbdd-modal-card {
    background:
        repeating-linear-gradient(8deg, transparent 0 14px, rgba(99, 68, 36, .035) 14px 15px),
        linear-gradient(#fffaf0, #ead8ad);
    border: 4px solid #5b3822;
    box-shadow: 0 16px 0 rgba(28, 17, 10, .25);
}

.tbdd-modal-card h2 {
    color: var(--tbdd-green-dark);
    font-family: Georgia, serif;
}

.tbdd-sheet-card {
    background: #fffaf0;
    border-color: #9b7b50;
}

@media (max-width: 1180px) {
    .tbdd-site-header {
        grid-template-columns: 88px 1fr;
    }
    .tbdd-club-logo { height: 76px; width: 76px; }
    .tbdd-header-actions { grid-column: 1 / -1; justify-content: center; padding-bottom: 5px; }
    .tbdd-hero { grid-template-columns: 1fr minmax(300px, .65fr); }
    .tbdd-hero-masterpiece { height: 210px; width: 145px; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-studio-layout { grid-template-columns: 175px minmax(340px, 1fr) 275px; }
    .tbdd-studio-topbar { flex-wrap: wrap; }
}

@media (max-width: 960px) {
    .tbdd-home { padding-left: 12px; padding-right: 12px; }
    .tbdd-hero { grid-template-columns: 1fr; padding-bottom: 0; }
    .tbdd-hero-remy { min-height: 370px; }
    .tbdd-hero-remy > img { height: 390px; max-height: 390px; }
    .tbdd-hero-masterpiece { right: 8%; top: 15px; }
    .tbdd-choice-grid,
    .tbdd-masterpiece-grid,
    .tbdd-home-lower-grid { grid-template-columns: 1fr 1fr; }
    .tbdd-choice-card:last-child,
    .tbdd-masterpiece:last-child,
    .tbdd-home-feature-card:last-child { grid-column: 1 / -1; }
    .tbdd-featured-challenge { grid-template-columns: 135px 1fr; }
    .tbdd-featured-challenge .tbdd-painted-button { grid-column: 1 / -1; }
    .tbdd-studio-layout { grid-template-columns: 170px minmax(0, 1fr); }
    .tbdd-options {
        border-left: 0;
        border-top: 4px solid #5d3b24;
        grid-column: 1 / -1;
        max-height: none;
    }
    .tbdd-options .tbdd-tool-group { display: inline-block; margin: 6px; vertical-align: top; width: calc(50% - 15px); }
}

@media (max-width: 720px) {
    .tbdd-shell { border-radius: 0; border-left-width: 2px; border-right-width: 2px; }
    .tbdd-site-header {
        gap: 8px;
        grid-template-columns: 62px 1fr auto;
        min-height: 74px;
        padding: 6px 9px;
    }
    .tbdd-club-logo { height: 58px; width: 58px; }
    .tbdd-breadcrumb { font-size: 13px; gap: 5px; }
    .tbdd-header-actions { grid-column: auto; padding: 0; }
    .tbdd-header-actions button,
    .tbdd-header-actions a:not(:last-child) { display: none; }
    .tbdd-header-actions a:last-child { font-size: 0; min-height: 44px; padding: 9px 11px; }
    .tbdd-header-actions a:last-child::after { content: "Back"; font-size: 14px; }
    .tbdd-home { padding: 0 7px 18px; }
    .tbdd-hero { min-height: 0; padding: 18px 10px 0; }
    .tbdd-title-sign { padding: 20px 16px 17px; }
    .tbdd-title-sign h1 { font-size: 38px; }
    .tbdd-title-sign p { font-size: 18px; }
    .tbdd-remy-greeting { margin-top: 16px; padding: 15px; }
    .tbdd-remy-greeting strong { font-size: 21px; }
    .tbdd-remy-greeting p { font-size: 15px; }
    .tbdd-hero-remy { min-height: 300px; }
    .tbdd-hero-remy > img { height: 315px; max-height: 315px; }
    .tbdd-hero-masterpiece { height: 155px; right: 0; top: 20px; width: 105px; }
    .tbdd-create-section,
    .tbdd-masterpiece-section,
    .tbdd-gallery-section { padding: 20px 12px; }
    .tbdd-choice-grid,
    .tbdd-masterpiece-grid,
    .tbdd-home-lower-grid { grid-template-columns: 1fr; }
    .tbdd-choice-card:last-child,
    .tbdd-masterpiece:last-child,
    .tbdd-home-feature-card:last-child { grid-column: auto; }
    .tbdd-choice-card { min-height: 260px; }
    .tbdd-masterpiece img { height: 300px; }
    .tbdd-section-heading-row { align-items: stretch; flex-direction: column; }
    .tbdd-remy-quote { max-width: none; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .tbdd-sheet-thumb { height: 185px; }
    .tbdd-featured-challenge { grid-template-columns: 1fr; padding: 18px 13px; text-align: center; }
    .tbdd-challenge-doodle { min-height: 90px; }
    .tbdd-ask-remy-card { grid-template-columns: 105px 1fr; }
    .tbdd-ask-remy-card img { height: 145px; }
    .tbdd-studio-topbar { gap: 6px; padding: 7px; }
    .tbdd-studio-logo { height: 54px; width: 54px; }
    .tbdd-title-field { flex-basis: calc(100% - 64px); order: 2; }
    .tbdd-history-buttons { order: 3; }
    .tbdd-save-status { order: 4; }
    .tbdd-finish-top { margin-left: auto; }
    .tbdd-studio-layout { display: flex; flex-direction: column; }
    .tbdd-tools {
        border-bottom: 4px solid #5d3b24;
        border-right: 0;
        max-height: none;
        order: 2;
    }
    .tbdd-tools .tbdd-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-tool { flex-direction: column; font-size: 11px; gap: 2px; justify-content: center; min-height: 60px; padding: 5px; }
    .tbdd-remy-tip { display: none; }
    .tbdd-canvas-stage { min-height: 490px; order: 1; padding: 48px 8px 18px; }
    .tbdd-options { order: 3; padding: 10px 6px; }
    .tbdd-options .tbdd-tool-group { display: block; margin: 8px 0; width: 100%; }
    .tbdd-options .tbdd-palette { grid-template-columns: repeat(8, 1fr); }
    .tbdd-action-bar { display: grid; grid-template-columns: 1fr 1fr; }
    .tbdd-action-bar .tbdd-finished-button { grid-column: 1 / -1; }
    .tbdd-studio-motto { margin-left: 8px; margin-right: 8px; }
}

@media (max-width: 430px) {
    .tbdd-home-sheet-grid { grid-template-columns: 1fr 1fr; }
    .tbdd-sheet-thumb { height: 150px; }
    .tbdd-home-sheet-card strong { font-size: 13px; min-height: 34px; }
    .tbdd-tools .tbdd-tool-grid { grid-template-columns: repeat(3, 1fr); }
    .tbdd-options .tbdd-palette { grid-template-columns: repeat(6, 1fr); }
}

/* -------------------------------------------------------------------------
 * Doodle Den visual refinement, v0.2.1
 * ---------------------------------------------------------------------- */
body.tbdd-page-active {
    overflow-x: hidden;
}

.tbdd-app {
    background:
        radial-gradient(circle at 8% 6%, rgba(119, 164, 78, .22), transparent 20%),
        radial-gradient(circle at 91% 16%, rgba(210, 168, 67, .18), transparent 18%),
        repeating-linear-gradient(90deg, rgba(69, 40, 22, .07) 0 2px, transparent 2px 34px),
        linear-gradient(180deg, #5a371f 0%, #77502f 45%, #44291a 100%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    min-height: 100vh;
    padding: clamp(18px, 2vw, 34px) clamp(8px, 2vw, 30px) 52px;
    width: 100vw;
}

.tbdd-shell {
    margin: 0 auto;
    max-width: 1560px;
    width: 100%;
}

.tbdd-site-header {
    box-shadow: inset 0 -2px 0 rgba(84, 53, 28, .18);
}

.tbdd-hero {
    background:
        linear-gradient(90deg, rgba(26, 18, 12, .24), transparent 28%, transparent 73%, rgba(26, 18, 12, .27)),
        radial-gradient(circle at 16% 16%, rgba(255, 242, 172, .34), transparent 25%),
        radial-gradient(circle at 79% 64%, rgba(78, 125, 58, .12), transparent 20%),
        repeating-linear-gradient(90deg, rgba(50, 27, 14, .16) 0 1px, transparent 1px 48px),
        linear-gradient(180deg, #86664b 0%, #513724 100%);
    gap: clamp(12px, 2vw, 30px);
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
    min-height: 520px;
    padding: 34px 36px 0;
}

.tbdd-hero-copy {
    padding-bottom: 32px;
}

.tbdd-title-sign {
    border-radius: 34% 18% 29% 15% / 11% 17% 12% 15%;
    max-width: 790px;
    overflow: visible;
    padding: 34px clamp(34px, 4vw, 62px) 25px;
    transform: rotate(-.7deg);
}

.tbdd-title-sign h1 {
    display: block;
    letter-spacing: .012em;
    line-height: 1;
    overflow-wrap: normal;
    text-wrap: nowrap;
    word-break: normal;
}

.tbdd-title-line {
    display: block;
    white-space: nowrap;
}

.tbdd-title-realm {
    font-size: clamp(42px, 5vw, 74px);
}

.tbdd-title-den {
    font-size: clamp(37px, 4.4vw, 66px);
    margin-top: 3px;
}

.tbdd-title-sign p {
    margin-top: 18px;
}

.tbdd-host-subtitle {
    display: block;
}

.tbdd-title-sign::before,
.tbdd-title-sign::after {
    content: none;
}

.tbdd-sign-nail {
    background:
        radial-gradient(circle at 34% 30%, #f8e6a8 0 11%, transparent 12%),
        radial-gradient(circle at 45% 40%, #b6924d 0 38%, #67451f 67%, #2f1d0e 100%);
    border: 1px solid #37210f;
    border-radius: 50%;
    box-shadow: 1px 2px 2px rgba(41, 23, 10, .35);
    height: 15px;
    position: absolute;
    width: 15px;
    z-index: 4;
}

.tbdd-sign-nail-tl { left: 22px; top: 18px; }
.tbdd-sign-nail-tr { right: 22px; top: 18px; }
.tbdd-sign-nail-bl { bottom: 18px; left: 25px; }
.tbdd-sign-nail-br { bottom: 18px; right: 25px; }

.tbdd-sign-clover {
    filter: drop-shadow(1px 2px 1px rgba(34, 63, 29, .25));
    height: 40px;
    pointer-events: none;
    position: absolute;
    width: 40px;
    z-index: 3;
}

.tbdd-sign-clover::before {
    background:
        radial-gradient(ellipse at 50% 18%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%),
        radial-gradient(ellipse at 82% 50%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%),
        radial-gradient(ellipse at 50% 82%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%),
        radial-gradient(ellipse at 18% 50%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%);
    content: "";
    inset: 0;
    position: absolute;
}

.tbdd-sign-clover::after {
    background: #3f7435;
    border-radius: 999px;
    bottom: -12px;
    content: "";
    height: 19px;
    left: 20px;
    position: absolute;
    transform: rotate(24deg);
    transform-origin: top center;
    width: 4px;
}

.tbdd-sign-clover-one { left: -11px; top: 24px; transform: rotate(-21deg) scale(.95); }
.tbdd-sign-clover-two { right: -8px; top: 53px; transform: rotate(18deg) scale(.82); }
.tbdd-sign-clover-three { bottom: -15px; left: 12%; transform: rotate(15deg) scale(.7); }
.tbdd-sign-clover-four { bottom: -13px; right: 15%; transform: rotate(-16deg) scale(.76); }
.tbdd-sign-clover-five { left: 48%; top: -23px; transform: rotate(4deg) scale(.62); }

.tbdd-remy-greeting {
    margin-top: 27px;
    max-width: 610px;
    padding: 20px 30px 18px;
}

.tbdd-read-greeting {
    align-items: center;
    background: linear-gradient(#fffdf5, #ead7ad);
    border: 2px solid #795333;
    border-radius: 8px;
    display: inline-flex;
    min-height: 42px;
    padding: 9px 18px;
    text-decoration: none;
}

.tbdd-read-greeting::before {
    content: "🔊";
    margin-right: 7px;
}

.tbdd-hero-remy {
    align-items: end;
    justify-content: flex-start;
    min-height: 490px;
    padding-left: 2%;
}

.tbdd-hero-remy::after {
    background: radial-gradient(ellipse, rgba(28, 16, 8, .45), transparent 68%);
    bottom: -2px;
    content: "";
    height: 35px;
    left: 4%;
    position: absolute;
    width: 58%;
    z-index: 1;
}

.tbdd-remy-host,
.tbdd-hero-remy > img {
    filter: drop-shadow(0 13px 8px rgba(22, 13, 8, .28));
    height: min(475px, 36vw);
    max-height: 475px;
    object-fit: contain;
    position: relative;
    z-index: 4;
}

.tbdd-easel-station {
    bottom: 1px;
    height: 438px;
    position: absolute;
    right: 0;
    width: 245px;
    z-index: 2;
}

.tbdd-hero-masterpiece {
    background: #f5ead0;
    border: 9px ridge #6d3c20;
    box-shadow: 7px 8px 0 rgba(28, 17, 10, .24);
    height: 275px;
    left: 29px;
    position: absolute;
    right: auto;
    top: 14px;
    transform: rotate(2deg);
    width: 194px;
    z-index: 3;
}

.tbdd-hero-masterpiece img {
    object-fit: cover;
}

.tbdd-easel-crossbar {
    background: linear-gradient(90deg, #5b321b, #9a6334 45%, #5b321b);
    border: 2px solid #3d2414;
    bottom: 123px;
    height: 23px;
    left: 8px;
    position: absolute;
    transform: rotate(1deg);
    width: 230px;
    z-index: 2;
}

.tbdd-easel-leg {
    background: linear-gradient(90deg, #492816, #91603a 52%, #4d2a16);
    border: 2px solid #352013;
    bottom: 0;
    height: 180px;
    position: absolute;
    transform-origin: top center;
    width: 23px;
    z-index: 1;
}

.tbdd-easel-leg-left { left: 56px; transform: rotate(8deg); }
.tbdd-easel-leg-right { right: 48px; transform: rotate(-8deg); }

.tbdd-paint-stool {
    background:
        radial-gradient(circle at 23% 31%, #e7b42d 0 5px, transparent 6px),
        radial-gradient(circle at 58% 62%, #4b92ca 0 6px, transparent 7px),
        radial-gradient(circle at 78% 27%, #c34a37 0 5px, transparent 6px),
        linear-gradient(#8f613e, #654126);
    border: 3px solid #392316;
    border-radius: 50%;
    bottom: 37px;
    height: 55px;
    position: absolute;
    right: 13px;
    width: 82px;
    z-index: 5;
}

.tbdd-paint-stool::before,
.tbdd-paint-stool::after {
    background: #5b361f;
    border: 2px solid #342015;
    bottom: -51px;
    content: "";
    height: 54px;
    position: absolute;
    width: 10px;
}

.tbdd-paint-stool::before { left: 18px; transform: rotate(8deg); }
.tbdd-paint-stool::after { right: 18px; transform: rotate(-8deg); }

.tbdd-brush-pot {
    background: linear-gradient(90deg, #8b5730, #c0884a, #704122);
    border: 3px solid #3c2415;
    bottom: 9px;
    height: 55px;
    position: absolute;
    left: 2px;
    transform: rotate(-5deg);
    width: 43px;
    z-index: 5;
}

.tbdd-brush-pot::before {
    background:
        linear-gradient(82deg, transparent 0 17%, #4f2d18 18% 23%, transparent 24%),
        linear-gradient(98deg, transparent 0 40%, #5a351d 41% 46%, transparent 47%),
        linear-gradient(76deg, transparent 0 64%, #3f2617 65% 70%, transparent 71%);
    content: "";
    height: 83px;
    left: -5px;
    position: absolute;
    top: -65px;
    width: 52px;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section,
.tbdd-featured-challenge,
.tbdd-home-lower-grid {
    border-radius: 8px;
}

.tbdd-choice-card {
    overflow: hidden;
}

.tbdd-choice-card::after {
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.42), transparent);
    content: "";
    height: 160%;
    left: -65%;
    pointer-events: none;
    position: absolute;
    top: -25%;
    transform: rotate(8deg);
    transition: left 220ms ease;
    width: 38%;
}

.tbdd-choice-card:hover::after,
.tbdd-choice-card:focus-visible::after {
    left: 128%;
}

.tbdd-masterpiece-section {
    background:
        radial-gradient(circle at 8% 17%, rgba(116, 151, 80, .12), transparent 16%),
        repeating-linear-gradient(7deg, transparent 0 13px, rgba(108, 77, 45, .035) 13px 14px),
        linear-gradient(#fff9e9, #e7d1a4);
}

.tbdd-masterpiece-grid {
    background: linear-gradient(180deg, transparent 0 84%, #6e4328 84% 91%, #3e2517 91% 100%);
    padding: 0 10px 24px;
}

.tbdd-home-sheet-card {
    display: flex;
    flex-direction: column;
}

.tbdd-home-sheet-card .tbdd-sheet-open {
    flex: 1;
}

.tbdd-print-blank {
    background: #f3e3bd;
    border: 2px solid #8b6a43;
    border-radius: 7px;
    color: #4e3424;
    cursor: pointer;
    font: 800 13px/1.2 "Trebuchet MS", Arial, sans-serif;
    margin-top: 8px;
    min-height: 42px;
    padding: 8px;
    width: 100%;
}

.tbdd-print-blank:hover,
.tbdd-print-blank:focus-visible {
    background: #fff0c9;
}

.tbdd-featured-challenge {
    background:
        radial-gradient(circle at 5% 18%, rgba(156, 74, 47, .1), transparent 15%),
        repeating-linear-gradient(45deg, rgba(105, 69, 35, .045) 0 1px, transparent 1px 9px),
        linear-gradient(#d2a76e, #ad7e49);
    border-width: 5px;
}

.tbdd-featured-challenge > div:nth-child(2) {
    background: #fff5d9;
    border: 2px solid #8b683f;
    box-shadow: 5px 6px 0 rgba(67, 39, 20, .16);
    padding: 16px 20px;
    transform: rotate(.35deg);
}

.tbdd-home-feature-card {
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}

.tbdd-ask-remy-card img {
    filter: drop-shadow(0 8px 5px rgba(50, 30, 16, .2));
}

.tbdd-home-motto,
.tbdd-studio-motto {
    box-shadow: 0 7px 0 rgba(43, 26, 15, .16);
}

@media (max-width: 1180px) {
    .tbdd-hero {
        grid-template-columns: minmax(0, 1fr) minmax(355px, .78fr);
    }

    .tbdd-easel-station {
        transform: scale(.88);
        transform-origin: right bottom;
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 420px;
        max-height: 420px;
    }
}

@media (max-width: 960px) {
    .tbdd-app {
        padding-left: 0;
        padding-right: 0;
    }

    .tbdd-shell {
        border-left-width: 0;
        border-radius: 0;
        border-right-width: 0;
    }

    .tbdd-hero {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .tbdd-hero-remy {
        justify-content: center;
        min-height: 420px;
        padding-left: 0;
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 410px;
        max-height: 410px;
        transform: translateX(-55px);
    }

    .tbdd-easel-station {
        right: 8%;
        transform: scale(.84);
        transform-origin: right bottom;
    }

    .tbdd-hero-remy::after {
        left: 20%;
        width: 50%;
    }
}

@media (max-width: 720px) {
    .tbdd-app {
        padding-bottom: 28px;
    }

    .tbdd-title-sign {
        padding: 27px 29px 22px;
    }

    .tbdd-title-realm {
        font-size: clamp(30px, 10.2vw, 45px);
    }

    .tbdd-title-den {
        font-size: clamp(29px, 9.4vw, 42px);
    }

    .tbdd-sign-nail {
        height: 12px;
        width: 12px;
    }

    .tbdd-sign-nail-tl { left: 14px; top: 14px; }
    .tbdd-sign-nail-tr { right: 14px; top: 14px; }
    .tbdd-sign-nail-bl { bottom: 14px; left: 16px; }
    .tbdd-sign-nail-br { bottom: 14px; right: 16px; }

    .tbdd-sign-clover-one { left: -7px; top: 25px; transform: rotate(-21deg) scale(.7); }
    .tbdd-sign-clover-two { right: -5px; top: 49px; transform: rotate(18deg) scale(.62); }
    .tbdd-sign-clover-three { bottom: -14px; left: 11%; transform: rotate(15deg) scale(.55); }
    .tbdd-sign-clover-four { bottom: -12px; right: 13%; transform: rotate(-16deg) scale(.58); }
    .tbdd-sign-clover-five { top: -20px; transform: rotate(4deg) scale(.48); }

    .tbdd-hero-remy {
        min-height: 335px;
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 320px;
        max-height: 320px;
        transform: translateX(-39px);
    }

    .tbdd-easel-station {
        bottom: -7px;
        right: -15px;
        transform: scale(.61);
    }

    .tbdd-hero-remy::after {
        left: 13%;
        width: 53%;
    }

    .tbdd-masterpiece-grid {
        background: none;
        padding: 0;
    }
}

@media (max-width: 430px) {
    .tbdd-title-sign {
        padding-left: 23px;
        padding-right: 23px;
    }

    .tbdd-title-realm {
        font-size: clamp(28px, 9.8vw, 39px);
        letter-spacing: 0;
    }

    .tbdd-title-den {
        font-size: clamp(27px, 9vw, 37px);
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 290px;
        max-height: 290px;
        transform: translateX(-32px);
    }

    .tbdd-easel-station {
        right: -28px;
        transform: scale(.54);
    }
}

/* Clean Remy creator-supplied assets, v0.2.2 */
.tbdd-hero-remy {
    align-items: flex-end;
    justify-content: center;
    min-height: 500px;
    overflow: visible;
    padding: 0 0 0 1%;
}

.tbdd-hero-remy::after {
    background: radial-gradient(ellipse, rgba(28, 16, 8, .36), transparent 70%);
    bottom: 0;
    height: 38px;
    left: 10%;
    width: 80%;
}

.tbdd-remy-studio {
    display: block;
    filter: drop-shadow(0 13px 9px rgba(22, 13, 8, .28));
    height: auto;
    max-height: 500px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    position: relative;
    width: auto;
    z-index: 4;
}

.tbdd-ask-remy-card img,
.tbdd-remy-tip img {
    background: transparent;
    object-fit: contain;
    object-position: center bottom;
}

@media (max-width: 1180px) {
    .tbdd-hero-remy { min-height: 455px; }
    .tbdd-remy-studio { max-height: 455px; }
}

@media (max-width: 960px) {
    .tbdd-hero-remy {
        min-height: 470px;
        padding: 0;
    }
    .tbdd-remy-studio {
        max-height: 465px;
        transform: none;
    }
    .tbdd-hero-remy::after {
        left: 12%;
        width: 76%;
    }
}

@media (max-width: 720px) {
    .tbdd-hero-remy { min-height: 365px; }
    .tbdd-remy-studio {
        max-height: 360px;
        transform: none;
    }
    .tbdd-hero-remy::after {
        left: 8%;
        width: 84%;
    }
}

@media (max-width: 430px) {
    .tbdd-hero-remy { min-height: 315px; }
    .tbdd-remy-studio {
        max-height: 310px;
        transform: none;
    }
}

/* Specificity-safe sizing for the creator-supplied studio composite. */
.tbdd-hero-remy > img.tbdd-remy-studio {
    height: auto;
    max-height: none;
    max-width: 650px;
    transform: none;
    width: 100%;
}

@media (max-width: 1180px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 600px;
        transform: none;
    }
}

@media (max-width: 960px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 620px;
        transform: none;
    }
}

@media (max-width: 720px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 500px;
        transform: none;
    }
}

@media (max-width: 430px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 390px;
        transform: none;
    }
}

/* -------------------------------------------------------------------------
 * Standalone Doodle Den page template, v0.2.3
 * Removes theme chrome only on singular pages containing the Doodle Den
 * shortcode. The WordPress admin toolbar remains available to logged-in users.
 * ---------------------------------------------------------------------- */
html:has(body.tbdd-standalone-page),
body.tbdd-standalone-page {
    background: #4b2d1c;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;
}

body.tbdd-standalone-page .tbdd-standalone-main,
body.tbdd-standalone-page #tbdd-standalone-main {
    display: block;
    margin: 0;
    max-width: none;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

body.tbdd-standalone-page #tbdd-standalone-main > :first-child,
body.tbdd-standalone-page #tbdd-standalone-main > .wp-block-shortcode,
body.tbdd-standalone-page #tbdd-standalone-main .wp-block-shortcode,
body.tbdd-standalone-page #tbdd-standalone-main .wp-block-group,
body.tbdd-standalone-page #tbdd-standalone-main .wp-block-group__inner-container {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
}

body.tbdd-standalone-page .tbdd-app {
    margin-bottom: 0;
    margin-top: 0;
    min-height: 100vh;
}

/* Fallback protection if another plugin or theme overrides template_include. */
body.tbdd-standalone-page #masthead,
body.tbdd-standalone-page header#masthead,
body.tbdd-standalone-page .site-header:not(.tbdd-site-header),
body.tbdd-standalone-page .site-header-wrap,
body.tbdd-standalone-page .site-top-header-wrap,
body.tbdd-standalone-page .site-main-header-wrap,
body.tbdd-standalone-page .site-bottom-header-wrap,
body.tbdd-standalone-page .entry-hero,
body.tbdd-standalone-page .entry-header:not(.tbdd-site-header),
body.tbdd-standalone-page .page-header,
body.tbdd-standalone-page .page-title,
body.tbdd-standalone-page #colophon,
body.tbdd-standalone-page footer#colophon,
body.tbdd-standalone-page .site-footer,
body.tbdd-standalone-page .site-footer-wrap {
    display: none !important;
}

body.tbdd-standalone-page #page,
body.tbdd-standalone-page #inner-wrap,
body.tbdd-standalone-page #wrapper,
body.tbdd-standalone-page .site,
body.tbdd-standalone-page .site-container,
body.tbdd-standalone-page .content-container,
body.tbdd-standalone-page #primary,
body.tbdd-standalone-page .content-area,
body.tbdd-standalone-page .site-main,
body.tbdd-standalone-page article.page,
body.tbdd-standalone-page .entry-content-wrap,
body.tbdd-standalone-page .entry-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
}

@media (max-width: 782px) {
    body.admin-bar.tbdd-standalone-page {
        min-height: calc(100vh - 46px);
    }
}

/* -------------------------------------------------------------------------
 * Full-gallery choice tile, v0.2.9
 * Desktop: four sheets on row one, three sheets plus this same-size tile on row two.
 * ---------------------------------------------------------------------- */
.tbdd-see-all-card {
    background:
        radial-gradient(circle at 16% 20%, rgba(87, 126, 57, .17), transparent 28%),
        radial-gradient(circle at 84% 78%, rgba(201, 149, 49, .16), transparent 30%),
        linear-gradient(135deg, #fffaf0, #ead9ad);
    border-color: #56713c;
    grid-column: auto;
    min-height: 100%;
    padding: 8px;
}

.tbdd-see-all-card .tbdd-see-all-tile {
    align-items: center;
    border: 3px dashed #71854f;
    border-radius: 8px;
    color: var(--tbdd-ink);
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 100%;
    padding: 13px 10px;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.tbdd-see-all-card .tbdd-see-all-tile:hover,
.tbdd-see-all-card .tbdd-see-all-tile:focus-visible {
    background: rgba(247, 238, 200, .78);
    border-color: var(--tbdd-green-dark);
    transform: translateY(-2px);
}

.tbdd-see-all-stack {
    height: 132px;
    margin: 2px auto 2px;
    position: relative;
    width: 150px;
}

.tbdd-see-all-stack > span {
    background: #fff;
    border: 3px solid #765236;
    box-shadow: 4px 5px 0 rgba(71, 43, 23, .13);
    height: 108px;
    left: 50%;
    position: absolute;
    top: 7px;
    transform-origin: bottom center;
    width: 78px;
}

.tbdd-see-all-stack > span:nth-child(1) {
    transform: translateX(-84%) rotate(-10deg);
}

.tbdd-see-all-stack > span:nth-child(2) {
    transform: translateX(-50%) rotate(0deg);
    z-index: 2;
}

.tbdd-see-all-stack > span:nth-child(3) {
    transform: translateX(-16%) rotate(10deg);
}

.tbdd-see-all-stack::after {
    align-items: center;
    background: var(--tbdd-green);
    border: 3px solid var(--tbdd-green-dark);
    border-radius: 50%;
    bottom: 0;
    color: #fff;
    content: "+";
    display: flex;
    font: 900 32px/1 Arial, sans-serif;
    height: 50px;
    justify-content: center;
    position: absolute;
    right: 3px;
    width: 50px;
    z-index: 4;
}

.tbdd-see-all-card strong {
    color: var(--tbdd-green-dark);
    font: 800 18px/1.18 Georgia, serif;
    min-height: 44px;
}

.tbdd-see-all-count {
    color: #66482f;
    font: 700 13px/1.3 "Trebuchet MS", Arial, sans-serif;
    min-height: 34px;
}

.tbdd-see-all-card .tbdd-see-all-cta {
    background: var(--tbdd-green);
    border: 2px solid var(--tbdd-green-dark);
    border-radius: 7px;
    color: #fff;
    font-weight: 800;
    margin-top: 2px;
    padding: 8px;
    width: 100%;
}

@media (max-width: 1180px) {
    .tbdd-see-all-card {
        grid-column: auto;
    }

    .tbdd-see-all-card .tbdd-see-all-tile {
        min-height: 100%;
    }
}

@media (max-width: 720px) {
    .tbdd-see-all-card {
        grid-column: auto;
    }

    .tbdd-see-all-card .tbdd-see-all-tile {
        min-height: 100%;
        padding: 12px 8px;
    }

    .tbdd-see-all-stack {
        height: 102px;
        width: 126px;
    }

    .tbdd-see-all-stack > span {
        height: 84px;
        width: 62px;
    }

    .tbdd-see-all-stack::after {
        font-size: 27px;
        height: 42px;
        width: 42px;
    }

    .tbdd-see-all-card strong {
        font-size: 15px;
        min-height: 38px;
    }

    .tbdd-see-all-count {
        font-size: 12px;
    }
}


/* Adventure Club membership/content access integration. */
.tbdd-access-gate {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 980px;
    padding: 48px 22px;
}

.tbdd-access-gate-card {
    background: #fffaf0;
    border: 4px solid #8b6a43;
    border-radius: 18px;
    box-shadow: 0 7px 0 rgba(70, 43, 23, .16);
    color: #4e3424;
    margin: 0 auto;
    max-width: 680px;
    padding: 34px;
    text-align: center;
}

.tbdd-access-gate-card h2 {
    margin: 8px 0 12px;
}

.tbdd-access-eyebrow {
    color: #6d4f2c;
    font-weight: 900;
    letter-spacing: .06em;
    margin: 0;
    text-transform: uppercase;
}

.tbdd-access-level {
    background: #f3e3bd;
    border-radius: 9px;
    display: inline-block;
    padding: 9px 12px;
}

.tbdd-access-home {
    background: var(--tbdd-green);
    border: 2px solid #2f6e2b;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-weight: 900;
    margin-top: 12px;
    padding: 11px 16px;
    text-decoration: none;
}

.tbdd-home-sheet-card.is-locked,
.tbdd-sheet-card.is-locked {
    opacity: .82;
}

.tbdd-home-sheet-card.is-locked button,
.tbdd-sheet-card.is-locked {
    cursor: not-allowed;
}

.tbdd-sheet-thumb,
.tbdd-sheet-card-image {
    position: relative;
}

.tbdd-sheet-card-image {
    display: block;
}

.tbdd-sheet-lock {
    align-items: center;
    background: rgba(255, 250, 240, .92);
    border: 2px solid #8b6a43;
    border-radius: 999px;
    display: flex;
    font-size: 22px;
    height: 44px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
}

.tbdd-sheet-access-label,
.tbdd-locked-label {
    color: #654728;
    display: block;
    font-size: 13px;
    font-weight: 900;
    padding: 7px 4px;
    text-align: center;
}

.tbdd-home-sheet-card.is-locked .tbdd-sheet-open > span:last-child {
    background: #806e58;
    border-color: #655443;
}


.tbdd-vip-jump {
    color: var(--tbdd-green-dark);
    display: block;
    font: 800 12px/1.25 "Trebuchet MS", Arial, sans-serif;
    margin: 4px 7px 9px;
    text-align: center;
    text-decoration: underline;
}

.tbdd-home-sheet-card.is-locked .tbdd-vip-jump {
    cursor: pointer;
    opacity: 1;
}

.tbdd-vip-section {
    align-items: start;
    background: #fff8e6;
    border: 3px solid #9a7447;
    box-shadow: 7px 8px 0 rgba(45, 27, 15, .18);
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    margin: 24px 0;
    padding: 22px;
}

.tbdd-vip-copy h2 {
    color: var(--tbdd-green-dark);
    font-family: Georgia, "Times New Roman", serif;
    margin: 5px 0 8px;
}

.tbdd-vip-copy p {
    margin: 0;
}

.tbdd-vip-eyebrow {
    color: #6d4b24;
    font: 900 12px/1.2 "Trebuchet MS", Arial, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tbdd-vip-form-wrap .tbac-vip-access {
    box-sizing: border-box;
    max-width: none !important;
    width: 100%;
}

@media (max-width: 760px) {
    .tbdd-vip-section {
        grid-template-columns: 1fr;
    }
}


.tbdd-completion-reward {
    background: #eef7e7;
    border: 2px solid #4d7f3d;
    border-radius: 12px;
    color: #27552d;
    font-weight: 800;
    margin: 12px 0 4px;
    min-height: 0;
    padding: 10px 12px;
}

.tbdd-completion-reward:empty {
    display: none;
}

/* -------------------------------------------------------------------------
 * Doodle Depot homepage visual refresh, v0.3.4
 * Mirrors the approved storybook UI while retaining the existing mechanics.
 * Remy art in this build is creator-supplied artwork only.
 * ---------------------------------------------------------------------- */

.tbdd-home {
    padding: 0 18px 24px;
}

.tbdd-home > section,
.tbdd-home-lower-grid,
.tbdd-home-motto,
.tbdd-home > .tbdd-device-note {
    max-width: 1240px;
}

.tbdd-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    min-height: 520px;
    padding: 28px 28px 0;
}

.tbdd-hero-copy {
    padding-bottom: 26px;
}

.tbdd-title-sign {
    max-width: 650px;
    padding: 24px 38px 20px;
}

.tbdd-title-sign h1 {
    font-size: clamp(30px, 4vw, 54px);
}

.tbdd-remy-greeting {
    margin-top: 20px;
    max-width: 520px;
}

/* Ground the exact creator-supplied hero composite with a soft floor shadow. */
.tbdd-hero-remy {
    isolation: isolate;
    min-height: 500px;
    overflow: visible;
    padding: 0;
}

.tbdd-hero-remy::after {
    background: radial-gradient(ellipse at center, rgba(25, 14, 7, .42) 0%, rgba(25, 14, 7, .2) 43%, transparent 73%);
    bottom: 8px;
    content: "";
    filter: blur(2px);
    height: 46px;
    left: 7%;
    position: absolute;
    width: 88%;
    z-index: 1;
}

.tbdd-hero-remy > img.tbdd-remy-studio {
    filter: drop-shadow(0 9px 8px rgba(24, 13, 7, .22));
    max-width: 620px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section,
.tbdd-featured-challenge,
.tbdd-home-lower-grid {
    margin-top: 14px;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section {
    padding: 22px 22px 24px;
}

.tbdd-choice-card {
    min-height: 225px;
    padding: 15px 14px 14px;
}

.tbdd-card-object {
    border-width: 3px;
    font-size: 40px;
    height: 84px;
    width: 74px;
}

.tbdd-blank-canvas::after {
    bottom: -16px;
    height: 18px;
    left: 31px;
    width: 7px;
}

/* Premium gallery treatment: these are Remy's displayed paintings, not choices. */
.tbdd-masterpiece-section {
    background:
        radial-gradient(circle at 8% 17%, rgba(116, 151, 80, .08), transparent 16%),
        repeating-linear-gradient(7deg, transparent 0 13px, rgba(108, 77, 45, .025) 13px 14px),
        linear-gradient(#fffdf4, #f4e6c4);
}

.tbdd-masterpiece-grid {
    align-items: end;
    background: linear-gradient(180deg, transparent 0 88%, #6f452b 88% 93%, #3f2719 93% 100%);
    gap: 24px;
    padding: 0 8px 24px;
}

.tbdd-masterpiece {
    background:
        linear-gradient(135deg, #6d4314 0%, #d5a63f 10%, #f6da77 20%, #9f6b1d 31%, #e4b94d 44%, #fff0a0 54%, #9a641a 70%, #deb149 82%, #6a3f12 100%);
    border: 3px solid #5e3b16;
    box-shadow:
        inset 0 0 0 3px #f3d56f,
        inset 0 0 0 7px #80511b,
        inset 0 0 0 10px #e0b84e,
        0 10px 8px rgba(47, 27, 13, .28);
    margin: 0;
    padding: 18px 18px 0;
    position: relative;
}

.tbdd-masterpiece::before,
.tbdd-masterpiece::after {
    background: radial-gradient(circle, #f4d26f 0 23%, #8b591b 28% 48%, #d6a13b 52% 68%, transparent 70%);
    content: "";
    height: 32px;
    position: absolute;
    top: -13px;
    width: 32px;
    z-index: 2;
}

.tbdd-masterpiece::before { left: 14px; }
.tbdd-masterpiece::after { right: 14px; }

.tbdd-masterpiece img {
    background: #f8eccf;
    border: 8px solid #f4e7c2;
    box-shadow:
        0 0 0 2px #6d4518,
        inset 0 0 14px rgba(75, 46, 18, .16);
    height: 300px;
    object-fit: contain;
    width: 100%;
}

.tbdd-frame-red,
.tbdd-frame-gold,
.tbdd-frame-blue,
.tbdd-frame-ornate {
    border-color: #5e3b16;
}

.tbdd-masterpiece figcaption {
    background: linear-gradient(#e0bd70, #c49a4c);
    border: 2px solid #79511d;
    box-shadow: inset 0 0 0 2px rgba(255, 240, 175, .65);
    margin: 14px -8px -14px;
    min-height: 78px;
    padding: 10px 8px;
    position: relative;
    transform: translateY(12px);
}

.tbdd-masterpiece figcaption strong {
    font-size: 16px;
}

.tbdd-masterpiece figcaption span {
    color: #4f3929;
    font-size: 12px;
}

/* Match the approved compact 4-sheet + Full Gallery homepage row. */
.tbdd-home-sheet-grid {
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tbdd-home-sheet-card {
    box-shadow: 0 4px 0 rgba(70, 43, 23, .13);
    padding: 7px;
}

.tbdd-sheet-thumb {
    height: 185px;
}

.tbdd-home-sheet-card strong {
    font-size: 13px;
    min-height: 34px;
}

.tbdd-home-sheet-card button > span:last-child,
.tbdd-print-blank {
    font-size: 12px;
    min-height: 34px;
    padding: 7px 5px;
}

.tbdd-featured-challenge {
    gap: 16px;
    grid-template-columns: 120px minmax(0, 1fr) 110px auto;
    padding: 14px 20px;
}

.tbdd-challenge-doodle {
    font-size: 32px;
    min-height: 96px;
    padding: 8px;
}

.tbdd-featured-challenge h2 {
    font-size: clamp(22px, 2.1vw, 30px);
}

.tbdd-featured-challenge-remy-wrap {
    align-self: end;
    height: 108px;
    isolation: isolate;
    justify-self: center;
    position: relative;
    width: 100px;
}

.tbdd-featured-challenge-remy-wrap::after {
    background: radial-gradient(ellipse, rgba(49, 28, 13, .34), transparent 72%);
    bottom: 0;
    content: "";
    height: 18px;
    left: 9%;
    position: absolute;
    width: 82%;
    z-index: 0;
}

.tbdd-featured-challenge-remy {
    bottom: 3px;
    filter: drop-shadow(0 5px 4px rgba(46, 25, 12, .18));
    height: 110px;
    left: 50%;
    object-fit: contain;
    position: absolute;
    transform: translateX(-50%);
    width: auto;
    z-index: 1;
}

.tbdd-home-lower-grid {
    gap: 10px;
    padding: 12px;
}

.tbdd-home-feature-card {
    min-height: 155px;
    padding: 14px;
}

.tbdd-home-feature-card h2 {
    font-size: 20px;
}

.tbdd-home-feature-card p {
    font-size: 13px;
}

.tbdd-ask-remy-card {
    grid-template-columns: 34% 1fr;
    isolation: isolate;
    position: relative;
}

.tbdd-ask-remy-card::before {
    background: radial-gradient(ellipse, rgba(49, 28, 13, .3), transparent 73%);
    bottom: 16px;
    content: "";
    height: 18px;
    left: 4%;
    position: absolute;
    width: 31%;
    z-index: 0;
}

.tbdd-ask-remy-card img {
    filter: drop-shadow(0 5px 4px rgba(46, 25, 12, .16));
    height: 125px;
    position: relative;
    z-index: 1;
}

.tbdd-remy-tip {
    position: relative;
}

.tbdd-remy-tip img {
    filter: drop-shadow(0 5px 4px rgba(46, 25, 12, .18));
}

/* Younger-reader shape menu: visual outline symbol + label. */
.tbdd-shape-button {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: flex-start;
    text-align: left;
}

.tbdd-shape-choice-icon {
    color: #6b4427;
    display: inline-flex;
    flex: 0 0 27px;
    font: 700 24px/1 Georgia, serif;
    justify-content: center;
}

.tbdd-shape-button.is-active .tbdd-shape-choice-icon {
    color: #234f2b;
}

@media (max-width: 1180px) {
    .tbdd-home-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-hero { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-width: 560px; }
    .tbdd-featured-challenge { grid-template-columns: 105px minmax(0, 1fr) 90px auto; }
}

@media (max-width: 960px) {
    .tbdd-hero { grid-template-columns: 1fr; }
    .tbdd-hero-remy { min-height: 470px; }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-width: 600px; }
    .tbdd-masterpiece-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-masterpiece img { height: 245px; }
    .tbdd-featured-challenge { grid-template-columns: 95px minmax(0, 1fr) 85px; }
    .tbdd-featured-challenge .tbdd-purple-button { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 720px) {
    .tbdd-home { padding-left: 7px; padding-right: 7px; }
    .tbdd-masterpiece-grid { background: none; grid-template-columns: 1fr; padding: 0; }
    .tbdd-masterpiece { margin: 0 auto 20px; max-width: 390px; width: 100%; }
    .tbdd-masterpiece img { height: auto; max-height: 420px; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tbdd-featured-challenge { grid-template-columns: 82px minmax(0, 1fr); }
    .tbdd-featured-challenge-remy-wrap { display: none; }
    .tbdd-featured-challenge .tbdd-purple-button { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
    .tbdd-home-sheet-grid { grid-template-columns: 1fr 1fr; }
    .tbdd-sheet-thumb { height: 150px; }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-width: 390px; }
}


/* -------------------------------------------------------------------------
 * Doodle Depot polished homepage, v0.3.6
 * Uses creator-approved art assets and the locked Masterpiece Wall treatment.
 * ---------------------------------------------------------------------- */

/* Remove the disconnected decorative dot field from the hero permanently. */
.tbdd-hero::before {
    content: none !important;
    display: none !important;
}

/* Ground the creator-supplied Remy/easel composite directly beneath its alpha. */
.tbdd-hero-remy::after {
    content: none !important;
    display: none !important;
}

.tbdd-hero-remy > img.tbdd-remy-studio {
    filter: drop-shadow(0 7px 4px rgba(29, 16, 8, .30)) !important;
}

/* Three primary creation choices: exact creator-supplied transparent PNGs. */
.tbdd-choice-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 430px;
    padding: 16px 18px 18px;
}

.tbdd-choice-art-wrap,
.tbdd-choice-card > span.tbdd-choice-art-wrap {
    align-items: flex-end;
    display: flex;
    flex: 0 0 270px;
    height: 270px;
    justify-content: center;
    margin: 0 auto 8px;
    max-width: 100%;
    position: relative;
    width: 100%;
}

.tbdd-choice-art {
    display: block;
    filter: drop-shadow(0 7px 4px rgba(52, 31, 16, .25));
    height: 255px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    width: auto;
}

.tbdd-choice-card strong {
    line-height: 1.08;
    margin: 1px 0 7px;
    min-height: 2.16em;
    text-align: center;
}

.tbdd-choice-card > span:not(.tbdd-choice-art-wrap) {
    display: block;
    line-height: 1.35;
    margin: 0 auto;
    max-width: 95%;
    text-align: center;
}

.tbdd-choice-card em {
    display: block;
    margin-top: 10px;
    text-align: center;
}

/* The old paper/clipart symbols are no longer used on the homepage. */
.tbdd-choice-card .tbdd-card-object {
    display: none !important;
}

/* Locked approved Masterpiece Wall presentation. */
.tbdd-masterpiece-section {
    background: linear-gradient(180deg, #fffdf5 0%, #f6ead0 100%);
    overflow: hidden;
    padding-bottom: 26px;
}

.tbdd-masterpiece-grid {
    align-items: end;
    background:
        linear-gradient(180deg,
            transparent 0 calc(100% - 94px),
            #6f4529 calc(100% - 94px) calc(100% - 82px),
            #4a2c1a calc(100% - 82px) calc(100% - 10px),
            #2f1b11 calc(100% - 10px) 100%);
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 4px 12px;
}

.tbdd-masterpiece.tbdd-masterpiece-approved {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    padding: 0 0 15px;
    position: relative;
}

.tbdd-masterpiece.tbdd-masterpiece-approved::before,
.tbdd-masterpiece.tbdd-masterpiece-approved::after {
    content: none;
    display: none;
}

.tbdd-masterpiece.tbdd-masterpiece-approved > img {
    background: transparent;
    border: 0;
    box-shadow: 0 10px 9px rgba(42, 24, 11, .26);
    display: block;
    height: 350px;
    margin: 0 auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption {
    align-items: center;
    background: linear-gradient(180deg, #efd48f 0%, #c99e4e 100%);
    border: 2px solid #704817;
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 244, 192, .56),
        0 4px 3px rgba(52, 29, 13, .20);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: -3px 12px 0;
    min-height: 76px;
    padding: 8px 10px;
    position: relative;
    transform: none;
    z-index: 2;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::before,
.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::after {
    background: radial-gradient(circle at 40% 35%, #f7dc86 0 18%, #7a4d17 22% 100%);
    border: 1px solid #5f3c15;
    border-radius: 50%;
    content: "";
    height: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::before { left: 6px; }
.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::after { right: 6px; }

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption strong {
    color: #3d291b;
    font: 700 15px/1.12 Georgia, serif;
    padding: 0 8px;
    text-align: center;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption span {
    color: #4a3525;
    font: italic 11px/1.25 Georgia, serif;
    margin-top: 4px;
    padding: 0 8px;
    text-align: center;
}

.tbdd-remy-quote {
    white-space: normal;
}

/* Keep approved small Remy art grounded without detached ellipse shadows. */
.tbdd-ask-remy-card::before {
    content: none !important;
    display: none !important;
}

.tbdd-ask-remy-card img,
.tbdd-remy-tip img {
    filter: drop-shadow(0 5px 3px rgba(46, 25, 12, .24)) !important;
}

@media (max-width: 1180px) {
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 235px; height: 235px; }
    .tbdd-choice-art { height: 220px; }
    .tbdd-choice-card { min-height: 395px; }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img { height: 300px; }
}

@media (max-width: 960px) {
    .tbdd-choice-grid { gap: 12px; }
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 210px; height: 210px; }
    .tbdd-choice-art { height: 198px; }
    .tbdd-choice-card { min-height: 370px; padding-left: 12px; padding-right: 12px; }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img { height: 245px; }
    .tbdd-masterpiece.tbdd-masterpiece-approved figcaption { margin-left: 5px; margin-right: 5px; }
}

@media (max-width: 720px) {
    .tbdd-choice-grid { grid-template-columns: 1fr; }
    .tbdd-choice-card { min-height: 0; }
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 300px; height: 300px; }
    .tbdd-choice-art { height: 285px; }
    .tbdd-masterpiece-grid {
        background: none;
        grid-template-columns: 1fr;
        padding: 0;
    }
    .tbdd-masterpiece.tbdd-masterpiece-approved {
        background: linear-gradient(180deg, transparent 0 calc(100% - 92px), #4a2c1a calc(100% - 92px) 100%);
        margin: 0 auto 18px;
        max-width: 520px;
        padding-bottom: 16px;
        width: 100%;
    }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img {
        height: auto;
        max-height: 520px;
    }
    .tbdd-masterpiece.tbdd-masterpiece-approved figcaption {
        margin-left: 18px;
        margin-right: 18px;
    }
}

@media (max-width: 430px) {
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 245px; height: 245px; }
    .tbdd-choice-art { height: 232px; }
}

/* ----------------------------------------------------------------------
 * v0.3.7 interaction contrast hardening
 * Keep homepage creation cards and Print Blank Page controls readable on
 * mouse hover and keyboard focus even when the active WordPress theme has
 * broad button:hover rules.
 * ---------------------------------------------------------------------- */

.tbdd-app button.tbdd-choice-card,
.tbdd-app button.tbdd-choice-card:visited {
    background: linear-gradient(180deg, #fffdf5 0%, #f0dfb9 100%) !important;
    color: #342518 !important;
}

.tbdd-app button.tbdd-choice-card:hover,
.tbdd-app button.tbdd-choice-card:focus-visible {
    background: linear-gradient(180deg, #fff9e7 0%, #ead3a2 100%) !important;
    border-color: #6d4b2d !important;
    color: #342518 !important;
    box-shadow: 0 10px 0 rgba(87, 55, 30, .16), 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app button.tbdd-choice-card:hover strong,
.tbdd-app button.tbdd-choice-card:focus-visible strong {
    color: #1f633f !important;
}

.tbdd-app button.tbdd-choice-card:hover > span:not(.tbdd-choice-art-wrap),
.tbdd-app button.tbdd-choice-card:focus-visible > span:not(.tbdd-choice-art-wrap) {
    color: #342518 !important;
}

.tbdd-app button.tbdd-choice-card:hover em,
.tbdd-app button.tbdd-choice-card:focus-visible em {
    color: #5b3d26 !important;
}

.tbdd-app button.tbdd-print-blank {
    background: #f3e3bd !important;
    border-color: #7b5937 !important;
    color: #3b291d !important;
}

.tbdd-app button.tbdd-print-blank:hover,
.tbdd-app button.tbdd-print-blank:focus-visible {
    background: #684529 !important;
    border-color: #4c301c !important;
    color: #fffdf5 !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app button.tbdd-choice-card:focus-visible,
.tbdd-app button.tbdd-print-blank:focus-visible {
    outline: 3px solid #2b7048 !important;
    outline-offset: 3px;
}


/* ----------------------------------------------------------------------
 * v0.3.8 studio interaction and mobile title polish
 * Hardens all studio-area hover/focus colors against broad theme rules,
 * fixes low-contrast action buttons, and keeps the Current Masterpiece
 * plaque on one visible line on phones.
 * ---------------------------------------------------------------------- */

.tbdd-app .tbdd-studio .tbdd-small-button,
.tbdd-app .tbdd-studio .tbdd-color-editor-launch,
.tbdd-app .tbdd-studio .tbdd-tool,
.tbdd-app .tbdd-studio .tbdd-shape-button,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button,
.tbdd-app .tbdd-studio .tbdd-size-step,
.tbdd-app .tbdd-studio .tbdd-action-bar button,
.tbdd-app .tbdd-studio .tbdd-modal-actions button,
.tbdd-app .tbdd-studio .tbdd-saved-actions button,
.tbdd-app .tbdd-studio .tbdd-home-feature-card button,
.tbdd-app .tbdd-studio .tbdd-sheet-card,
.tbdd-app .tbdd-studio .tbdd-saved-card button,
.tbdd-app .tbdd-studio .tbdd-modal-close,
.tbdd-app .tbdd-studio .tbdd-finish-top,
.tbdd-app .tbdd-home-feature-card button,
.tbdd-app .tbdd-modal-close,
.tbdd-app .tbdd-modal-actions button,
.tbdd-app .tbdd-saved-actions button {
    color: #38271c !important;
}

.tbdd-app .tbdd-studio .tbdd-small-button:not(:disabled):hover,
.tbdd-app .tbdd-studio .tbdd-small-button:not(:disabled):focus-visible,
.tbdd-app .tbdd-studio .tbdd-color-editor-launch:hover,
.tbdd-app .tbdd-studio .tbdd-color-editor-launch:focus-visible,
.tbdd-app .tbdd-studio .tbdd-tool:hover,
.tbdd-app .tbdd-studio .tbdd-tool:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-button:hover,
.tbdd-app .tbdd-studio .tbdd-shape-button:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button:hover,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button:focus-visible,
.tbdd-app .tbdd-studio .tbdd-size-step:not(:disabled):hover,
.tbdd-app .tbdd-studio .tbdd-size-step:not(:disabled):focus-visible,
.tbdd-app .tbdd-studio .tbdd-action-bar button:not(:disabled):hover,
.tbdd-app .tbdd-studio .tbdd-action-bar button:not(:disabled):focus-visible,
.tbdd-app .tbdd-modal-actions button:not(:disabled):hover,
.tbdd-app .tbdd-modal-actions button:not(:disabled):focus-visible,
.tbdd-app .tbdd-saved-actions button:not(:disabled):hover,
.tbdd-app .tbdd-saved-actions button:not(:disabled):focus-visible,
.tbdd-app .tbdd-home-feature-card button:not(:disabled):hover,
.tbdd-app .tbdd-home-feature-card button:not(:disabled):focus-visible {
    background: #fff0cc !important;
    border-color: #6b4728 !important;
    color: #38271c !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app .tbdd-studio .tbdd-tool.is-active,
.tbdd-app .tbdd-studio .tbdd-shape-button.is-active,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active {
    color: #234224 !important;
}

.tbdd-app .tbdd-studio .tbdd-tool.is-active:hover,
.tbdd-app .tbdd-studio .tbdd-tool.is-active:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-button.is-active:hover,
.tbdd-app .tbdd-studio .tbdd-shape-button.is-active:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active:hover,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active:focus-visible {
    background: #d3ebc8 !important;
    border-color: #3f7838 !important;
    color: #234224 !important;
}

.tbdd-app .tbdd-finish-top,
.tbdd-app .tbdd-studio .tbdd-action-bar .tbdd-finished-button,
.tbdd-app .tbdd-modal-actions button:first-child {
    background: linear-gradient(#598e49, #326b34) !important;
    border-color: #234d27 !important;
    color: #fffbea !important;
}

.tbdd-app .tbdd-finish-top:hover,
.tbdd-app .tbdd-finish-top:focus-visible,
.tbdd-app .tbdd-studio .tbdd-action-bar .tbdd-finished-button:hover,
.tbdd-app .tbdd-studio .tbdd-action-bar .tbdd-finished-button:focus-visible,
.tbdd-app .tbdd-modal-actions button:first-child:hover,
.tbdd-app .tbdd-modal-actions button:first-child:focus-visible {
    background: linear-gradient(#6aa555, #2c5d2c) !important;
    border-color: #1f4121 !important;
    color: #fffbea !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .22) !important;
}

.tbdd-app .tbdd-modal-close {
    color: #35240b !important;
}

.tbdd-app .tbdd-modal-close:hover,
.tbdd-app .tbdd-modal-close:focus-visible {
    background: #f1c865 !important;
    border-color: #8d6215 !important;
    color: #35240b !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app .tbdd-studio button:focus-visible,
.tbdd-app .tbdd-modal button:focus-visible,
.tbdd-app .tbdd-home-feature-card button:focus-visible {
    outline: 3px solid #2b7048 !important;
    outline-offset: 2px;
}

.tbdd-canvas-label {
    box-sizing: border-box;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbdd-action-bar button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

@media (max-width: 720px) {
    .tbdd-canvas-stage {
        padding-top: 54px;
    }

    .tbdd-canvas-label {
        font-size: 14px;
        max-width: calc(100% - 16px);
        padding: 7px 14px;
        top: 8px;
    }

    .tbdd-action-bar {
        align-items: stretch;
    }

    .tbdd-action-bar button {
        min-height: 50px;
        padding: 10px 12px;
    }
}


/* v0.3.9: show whether account-based Clover Coin rewards can save. */
.tbdd-adventure-save-state {
    box-sizing: border-box;
    margin: 10px 16px 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 2px solid rgba(91, 63, 34, .35);
    border-radius: 12px;
    background: #fff4d9;
    color: #442d1d;
    font-weight: 800;
    text-align: center;
}
.tbdd-adventure-save-state.is-signed-in { background: #eef8e8; }
.tbdd-adventure-save-state a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 2px solid #2c5c33;
    border-radius: 9px;
    background: #397540;
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
}
.tbdd-adventure-save-state a:hover,
.tbdd-adventure-save-state a:focus-visible { background: #2d6035; outline: 3px solid #e7bd58; outline-offset: 2px; }
@media (max-width: 620px) {
    .tbdd-adventure-save-state { margin-inline: 10px; flex-direction: column; align-items: stretch; font-size: 13px; }
    .tbdd-adventure-save-state a { width: 100%; box-sizing: border-box; }
}