/* =====================================================
   PUZZLE-SEITE
   Vom Nutzer als eigenständige App gebaut, hier auf
   .puzzle-app gescoped eingebunden, damit nichts davon
   in die Sidebar oder den Rest der Seite ausbricht
   (die Original-Version stylte body, alle Elemente und h1 bis h3 global).
   ===================================================== */

.puzzle-app {
    --bg: #e8f4ef;
    --panel: #ffffff;
    --panel-2: #f4faf7;
    --paper: #fbfffd;
    --paper-2: #dcefe7;
    --wood: #16866a;
    --wood-dark: #0d5b49;
    --wood-light: #55b99a;
    --accent: #149a78;
    --accent-2: #0d6f59;
    --ink: #173b35;
    --ink-soft: #55746c;
    --paper-text: #173b35;
    --line: rgba(13, 91, 73, 0.16);
    --input-bg: #ffffff;
    --track: #c9ded7;
    --tray-bg: #e6f2ed;
    --preview-bg: #e0ece7;
    --overlay: rgba(232, 244, 239, 0.85);
    --shadow: 0 10px 30px rgba(13, 91, 73, 0.14);
    --radius: 14px;
    --board-frame-bg: linear-gradient(160deg, #8dd8bf, #16866a 70%);
    --board-surface-bg: #e9f8f1;

    box-sizing: border-box;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;

    background:
        radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--paper-2) 70%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--paper-2) 55%, transparent) 0%, transparent 45%),
        var(--bg);
    color: var(--paper-text);
    font-family: 'Work Sans', sans-serif;

    border-radius: 20px;
    padding: 28px 18px 60px;

    text-align: left;
}

.puzzle-app *,
.puzzle-app *::before,
.puzzle-app *::after {
    box-sizing: border-box;
}

.puzzle-app[data-theme='smaragdwald'] {
    --bg: #e8f4ef;
    --panel-2: #f4faf7;
    --paper-2: #dcefe7;
    --wood: #16866a;
    --wood-dark: #0d5b49;
    --wood-light: #55b99a;
    --accent: #149a78;
    --accent-2: #0d6f59;
    --ink: #173b35;
    --ink-soft: #55746c;
    --paper-text: #173b35;
    --line: rgba(13, 91, 73, 0.16);
    --track: #c9ded7;
    --tray-bg: #e6f2ed;
    --preview-bg: #e0ece7;
    --overlay: rgba(232, 244, 239, 0.85);
    --shadow: 0 10px 30px rgba(13, 91, 73, 0.14);
    --board-frame-bg: linear-gradient(160deg, #8dd8bf, #16866a 70%);
    --board-surface-bg: #e9f8f1;
}

.puzzle-app[data-theme='baumrinde'] {
    --bg: #f3ece1;
    --panel-2: #faf5ec;
    --paper-2: #ecdcc4;
    --wood: #8a5a2e;
    --wood-dark: #5c3a1e;
    --wood-light: #c08a4e;
    --accent: #a3671f;
    --accent-2: #7a4a17;
    --ink: #3d2a16;
    --ink-soft: #7a6650;
    --paper-text: #3d2a16;
    --line: rgba(92, 58, 30, 0.18);
    --track: #e3d2b8;
    --tray-bg: #f0e4d1;
    --preview-bg: #e8dcc8;
    --overlay: rgba(243, 236, 225, 0.85);
    --shadow: 0 10px 30px rgba(92, 58, 30, 0.14);
    --board-frame-bg: linear-gradient(160deg, #d3a465, #8a5a2e 70%);
    --board-surface-bg: #fbf3e6;
}

.puzzle-app[data-theme='zuckerwatte'] {
    --bg: #fbeaf5;
    --panel-2: #fff5fb;
    --paper-2: #f6d9ec;
    --wood: #b0499b;
    --wood-dark: #6f3a73;
    --wood-light: #e08fd0;
    --accent: #c25aa3;
    --accent-2: #8a3d7c;
    --ink: #4a1f42;
    --ink-soft: #85647e;
    --paper-text: #4a1f42;
    --line: rgba(111, 58, 115, 0.18);
    --track: #edc7e0;
    --tray-bg: #f9e2f1;
    --preview-bg: #f2d7e9;
    --overlay: rgba(251, 234, 245, 0.85);
    --shadow: 0 10px 30px rgba(111, 58, 115, 0.14);
    --board-frame-bg: linear-gradient(160deg, #e79bd6, #b0499b 70%);
    --board-surface-bg: #fdf0f9;
}

.puzzle-app[data-theme='azurblau'] {
    --bg: #e8f1f8;
    --panel-2: #f3f8fc;
    --paper-2: #dcecf7;
    --wood: #247ba0;
    --wood-dark: #15526f;
    --wood-light: #5aa9c9;
    --accent: #168aad;
    --accent-2: #126782;
    --ink: #17324d;
    --ink-soft: #557086;
    --paper-text: #17324d;
    --line: rgba(21, 82, 111, 0.16);
    --track: #c7dce8;
    --tray-bg: #e4f1f7;
    --preview-bg: #e0ecf2;
    --overlay: rgba(232, 241, 248, 0.85);
    --shadow: 0 10px 30px rgba(21, 82, 111, 0.14);
    --board-frame-bg: linear-gradient(160deg, #8ed1e8, #247ba0 70%);
    --board-surface-bg: #e9f5fb;
}

.puzzle-app[data-theme='rot'] {
    --bg: #f9e9eb;
    --panel-2: #fff5f6;
    --paper-2: #f2d5d9;
    --wood: #bd4052;
    --wood-dark: #7f2435;
    --wood-light: #e27a86;
    --accent: #c94254;
    --accent-2: #982e40;
    --ink: #451f2a;
    --ink-soft: #7b5a62;
    --paper-text: #451f2a;
    --line: rgba(127, 36, 53, 0.18);
    --track: #e8cbd0;
    --tray-bg: #f5e0e3;
    --preview-bg: #edd9dc;
    --overlay: rgba(249, 233, 235, 0.85);
    --shadow: 0 10px 30px rgba(127, 36, 53, 0.14);
    --board-frame-bg: linear-gradient(160deg, #e997a0, #bd4052 70%);
    --board-surface-bg: #fff0f1;
}

.puzzle-app[data-theme='orange'] {
    --bg: #fff1e5;
    --panel-2: #fff8f1;
    --paper-2: #f8dfc8;
    --wood: #d66a2c;
    --wood-dark: #98431e;
    --wood-light: #ee9a5c;
    --accent: #e8752f;
    --accent-2: #b94f20;
    --ink: #48271c;
    --ink-soft: #806052;
    --paper-text: #48271c;
    --line: rgba(152, 67, 30, 0.18);
    --track: #ecd3c0;
    --tray-bg: #f9e9da;
    --preview-bg: #f1dfd1;
    --overlay: rgba(255, 241, 229, 0.85);
    --shadow: 0 10px 30px rgba(152, 67, 30, 0.14);
    --board-frame-bg: linear-gradient(160deg, #f3b276, #d66a2c 70%);
    --board-surface-bg: #fff3e8;
}

.puzzle-app h1,
.puzzle-app h2,
.puzzle-app h3 {
    font-family: 'Fraunces', serif;
    margin: 0;
    /* Diese App bringt ihr eigenes helles Farbschema mit - den globalen
       Gold-Verlaufs-Text (transparenter -webkit-text-fill) hier zuruecknehmen,
       sonst ist die Ueberschrift auf hellem Grund unsichtbar. */
    background: none;
    -webkit-text-fill-color: currentColor;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

.puzzle-app .wrap {
    max-width: 1300px;
    margin: 0 auto;
}

.puzzle-app header.top {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}
.puzzle-app .luis-mascot {
    position: absolute;
    left: 0;
    top: -8px;
    width: 130px;
    height: auto;
    transition: opacity 0.25s ease;
}
.puzzle-app .luis-mascot.is-fading {
    opacity: 0;
}
@media (max-width: 760px) {
    .puzzle-app .luis-mascot {
        display: none;
    }
}
.puzzle-app header.top .brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 14px;
}
.puzzle-app header.top h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 650;
    letter-spacing: 0.2px;
    color: var(--ink);
}
.puzzle-app header.top .sub {
    color: var(--ink-soft);
    font-size: 14.5px;
    margin-top: 4px;
    max-width: 520px;
    line-height: 1.5;
}

.puzzle-app .layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 880px) {
    .puzzle-app .layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .puzzle-app {
        padding: 18px 12px 40px;
    }
    .puzzle-app header.top {
        justify-content: center;
        margin-bottom: 18px;
    }
    .puzzle-app header.top .brand-mark {
        gap: 10px;
    }
    .puzzle-app header.top .brand-mark svg {
        width: 36px;
        height: 36px;
    }
    .puzzle-app header.top h1 {
        font-size: clamp(25px, 7vw, 34px);
    }
    .puzzle-app header.top .sub {
        font-size: 13px;
    }
    .puzzle-app .panel {
        padding: 16px;
    }
    .puzzle-app .board-frame {
        width: min(716px, calc(100vw - 116px));
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .puzzle-app .board-frame .board {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .puzzle-app .tray-top,
    .puzzle-app .tray-bottom {
        min-height: 180px;
    }
}

.puzzle-app .panel {
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
.puzzle-app .panel h2 {
    font-size: 15px;
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 650;
    margin-bottom: 14px;
}

.puzzle-app .field {
    margin-bottom: 18px;
}
.puzzle-app .field label {
    display: block;
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 7px;
    font-weight: 600;
}
.puzzle-app .field label.upload-btn {
    display: flex;
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 600;
}

.puzzle-app select,
.puzzle-app input[type='text'] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--line);
    color: var(--paper-text);
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
}
.puzzle-app select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.puzzle-app .image-source-buttons {
    display: flex;
    gap: 8px;
}
.puzzle-app .upload-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px var(--shadow-color, rgba(0, 0, 0, 0.18));
    transition: filter 0.15s ease, transform 0.1s ease;
    font-family: inherit;
}
.puzzle-app .upload-btn:hover {
    filter: brightness(1.08);
}
.puzzle-app .upload-btn:active {
    transform: scale(0.98);
}
.puzzle-app .upload-btn.secondary {
    background: var(--panel-2);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
}
.puzzle-app .upload-btn.secondary:hover {
    filter: none;
    border-color: var(--accent);
}
.puzzle-app input[type='file'] {
    display: none;
}
.puzzle-app .upload-status {
    margin-top: 8px;
    color: var(--ink-soft);
    font-size: 12px;
    line-height: 1.35;
}
.puzzle-app .upload-status.ready {
    color: var(--accent-2);
    font-weight: 600;
}
.puzzle-app .advanced-settings {
    margin: 4px 0 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.puzzle-app .advanced-settings summary {
    padding: 13px 0;
    color: var(--accent-2);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 650;
    list-style: none;
}
.puzzle-app .advanced-settings summary::-webkit-details-marker {
    display: none;
}
.puzzle-app .advanced-settings summary::after {
    content: '+';
    float: right;
    font-size: 18px;
    line-height: 12px;
    font-weight: 400;
}
.puzzle-app .advanced-settings[open] summary::after {
    content: '−';
}
.puzzle-app .advanced-settings .field:last-child {
    margin-bottom: 14px;
}
.puzzle-app .view-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 14px;
}
.puzzle-app .view-controls .f-btn {
    flex: 1 1 140px;
    justify-content: center;
}

.puzzle-app .thumb-preview {
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--preview-bg);
    display: none;
    aspect-ratio: 4/3;
    align-items: center;
    justify-content: center;
}
.puzzle-app .thumb-preview.show {
    display: flex;
}
.puzzle-app .thumb-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.puzzle-app input[type='range'] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--track) var(--fill, 50%));
    outline: none;
}
.puzzle-app input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--input-bg);
    border: 3px solid var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 8px var(--shadow-color, rgba(0, 0, 0, 0.16));
}
.puzzle-app input[type='range']::-webkit-slider-thumb:hover {
    transform: scale(1.08);
}
.puzzle-app input[type='range']:focus-visible {
    outline: 3px solid rgba(22, 138, 173, 0.25);
    outline-offset: 5px;
}
.puzzle-app .grid-readout {
    margin-top: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--accent-2);
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}
.puzzle-app .stage-markers {
    display: flex;
    justify-content: space-between;
    height: 16px;
    margin: 9px 2px 0;
    color: var(--ink-soft);
    font: 500 10px 'JetBrains Mono', monospace;
}

.puzzle-app .toggle-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 12px;
    cursor: pointer;
    font-weight: 500;
}
.puzzle-app .toggle-opt input {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.puzzle-app .audio-toggle,
.puzzle-app .edge-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.puzzle-app .audio-toggle:hover,
.puzzle-app .edge-toggle:hover {
    transform: scale(1.08);
}
.puzzle-app .audio-toggle.muted,
.puzzle-app .edge-toggle.muted {
    opacity: 0.65;
}
.puzzle-app .audio-toggle.muted::after,
.puzzle-app .edge-toggle.muted::after {
    content: '';
    position: absolute;
    width: 27px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent-2);
    transform: rotate(-45deg);
}

.puzzle-app .btn {
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 650;
    font-size: 14.5px;
    letter-spacing: 0.2px;
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--shadow-color, rgba(0, 0, 0, 0.18));
    transition: filter 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.puzzle-app .btn:hover:not(:disabled) {
    filter: brightness(1.08);
}
.puzzle-app .btn:active:not(:disabled) {
    transform: scale(0.98);
}
.puzzle-app .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}
.puzzle-app .btn.secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    margin-top: 10px;
    box-shadow: none;
}
.puzzle-app .btn.secondary:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.puzzle-app .progress-wrap {
    margin-top: 20px;
}
.puzzle-app .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.puzzle-app .progress-label b {
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
}
.puzzle-app .progress-track {
    height: 9px;
    border-radius: 999px;
    background: var(--track);
    overflow: hidden;
}
.puzzle-app .progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
    transition: width 0.25s ease;
}

.puzzle-app .hint {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-top: 14px;
}

/* Stage & Board
   Der Vorrat an losen Teilen liegt auf drei Seiten des Spielfelds
   (oben/rechts/unten), damit Spielfeld und Vorrat gleichzeitig sichtbar
   sind und man zum Teileholen nicht mehr die Seite scrollen muss. Wird
   der Bildschirm schmaler, blendet die Media Query weiter unten die
   rechte Spalte aus - die Teile verteilen sich dann nur noch oben/unten
   (siehe distributeTrayPieces() in JS/puzzle.js). */
.puzzle-app .stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
}
.puzzle-app .stage-middle {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: stretch;
}

.puzzle-app .board-frame {
    position: relative;
    display: block;
    width: 100%;
    max-width: 716px;
    height: auto;
    aspect-ratio: 4 / 3;
    padding: 8px;
    margin: 0;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--board-frame-bg);
    box-shadow: var(--shadow);
    transition: background 0.3s ease;
}
.puzzle-app .board-frame .board {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 4 / 3;
    background: var(--board-surface-bg);
    border-radius: 6px;
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(0, 0, 0, 0.05);
    overflow: visible;
    transition: background 0.3s ease;
}

.puzzle-app .board .ghost-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--board-surface-bg);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    filter: grayscale(20%) contrast(90%);
}
.puzzle-app .board .ghost-bg.show {
    opacity: 0.25;
}

.puzzle-app .board .empty-msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.6;
    pointer-events: none;
    font-weight: 500;
}

.puzzle-app .tray-zone {
    /* Kein sichtbarer Kasten mehr - die losen Teile liegen direkt auf
       der Seite, nur ihre Position (oben/rechts/unten ums Brett) kommt
       von diesem Container. */
    position: relative;
    padding: 20px 16px;
    min-height: 90px;
    /* visible statt hidden: ein Teil darf hier nie unerreichbar
       verschwinden, auch wenn das Packing bei sehr vielen Teilen und
       wenig Höhe leicht über den Rahmen hinausragt. */
    overflow: visible;
}
.puzzle-app .tray-top,
.puzzle-app .tray-bottom {
    width: 100%;
}
.puzzle-app .tray-right {
    width: 200px;
    flex: 0 0 200px;
}
@media (max-width: 1050px) {
    .puzzle-app .tray-right {
        display: none;
    }
}

/* Puzzleteile: Grundzustand (aus animations.css) + Positionierung */
.puzzle-app canvas.piece {
    cursor: grab;
    user-select: none;
    touch-action: none;
    position: absolute;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s ease;
    will-change: transform, filter;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
.puzzle-app canvas.piece:hover {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}
.puzzle-app canvas.piece.dragging {
    cursor: grabbing !important;
    z-index: 9999 !important;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.28)) !important;
    transition: transform 0.08s ease-out, filter 0.15s ease;
}

@keyframes puzzleSnapElastic {
    0% {
        transform: scale(1.08);
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 50%, transparent));
    }
    50% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
}

.puzzle-app canvas.piece.snapped {
    cursor: default !important;
    animation: puzzleSnapElastic 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.puzzle-app canvas.piece.in-tray {
    position: absolute;
    margin: 0 !important;
}

/* Schwebende Steuerung - bewusst links unten statt rechts unten,
   damit sie nicht mit dem Bug-Melder (#bug-reporter, rechts unten)
   zusammenstößt. */
.puzzle-app .floating-controls {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 50;
    display: flex;
    gap: 10px;
}
.puzzle-app .f-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--wood);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 650;
    font-size: 13.5px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background 0.2s, transform 0.1s;
}
.puzzle-app .f-btn:hover {
    filter: brightness(1.1);
}
.puzzle-app .f-btn:active {
    transform: scale(0.95);
}

/* z-index über der Sidebar (1000), damit der Gewonnen-Dialog
   die ganze Seite abdeckt statt darunter zu liegen. */
.puzzle-app .win-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.puzzle-app .win-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.puzzle-app .win-card {
    background: linear-gradient(180deg, var(--paper), var(--paper-2));
    color: var(--ink);
    border-radius: 18px;
    padding: 36px 40px;
    text-align: center;
    max-width: 380px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--line);
    transform: translateY(10px) scale(0.96);
    transition: transform 0.3s ease;
}
.puzzle-app .win-overlay.show .win-card {
    transform: translateY(0) scale(1);
}
.puzzle-app .win-card h2 {
    font-size: 26px;
    color: var(--ink);
    margin-bottom: 8px;
}
.puzzle-app .win-card p {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 22px;
}

/* =====================================================
   BILDAUSWAHL-MODAL (Upload / Galerie)
   ===================================================== */

.puzzle-app .image-picker-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1550;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}
.puzzle-app .image-picker-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.puzzle-app .image-picker-card {
    position: relative;
    background: linear-gradient(180deg, var(--paper), var(--paper-2));
    color: var(--ink);
    border-radius: 18px;
    padding: 32px 34px;
    max-width: 640px;
    width: 100%;
    max-height: min(720px, 86vh);
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--line);
    transform: translateY(10px) scale(0.96);
    transition: transform 0.3s ease;
    text-align: left;
}
.puzzle-app .image-picker-overlay.show .image-picker-card {
    transform: translateY(0) scale(1);
}
.puzzle-app .image-picker-card h2 {
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 18px;
    padding-right: 30px;
}
.puzzle-app .image-picker-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--panel-2);
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.puzzle-app .image-picker-close:hover {
    background: var(--accent);
    color: #ffffff;
}
.puzzle-app .image-picker-section {
    margin-bottom: 22px;
}
.puzzle-app .image-picker-section:last-child {
    margin-bottom: 0;
}
.puzzle-app .image-picker-section h3 {
    font-family: 'Fraunces', serif;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--ink);
}
.puzzle-app .image-picker-hint {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
}
.puzzle-app .image-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px;
}
.puzzle-app .image-picker-thumb {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    border: 2px solid transparent;
    background: var(--panel-2);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.1s ease;
    font-family: inherit;
}
.puzzle-app .image-picker-thumb:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.puzzle-app .image-picker-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.puzzle-app .image-picker-thumb span {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.3;
}
@media (max-width: 480px) {
    .puzzle-app .image-source-buttons {
        flex-direction: column;
    }
}