@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap");

.games-page {
    padding: 20px 0 30px;
    font-family: "Comic Neue", "Lato", sans-serif;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><rect width='120' height='120' fill='none'/><g opacity='0.25' fill='%2382b68f'><circle cx='25' cy='25' r='6'/><rect x='22' y='30' width='6' height='14' rx='3'/><circle cx='18' cy='18' r='4'/><circle cx='32' cy='18' r='4'/><circle cx='18' cy='32' r='4'/><circle cx='32' cy='32' r='4'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><rect width='160' height='160' fill='none'/><g opacity='0.25' fill='%23b48b6a'><rect x='72' y='84' width='16' height='32' rx='6'/><circle cx='80' cy='70' r='22'/><circle cx='62' cy='82' r='14'/><circle cx='98' cy='82' r='14'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><rect width='140' height='140' fill='none'/><g opacity='0.2' fill='%237aa4c9'><circle cx='70' cy='70' r='18'/><circle cx='62' cy='64' r='5'/><circle cx='78' cy='64' r='5'/><circle cx='70' cy='78' r='6'/></g></svg>"),
        radial-gradient(circle at 10% 15%, rgba(215, 236, 211, 0.9), transparent 45%),
        radial-gradient(circle at 90% 15%, rgba(198, 229, 243, 0.8), transparent 45%),
        radial-gradient(circle at 15% 85%, rgba(238, 225, 245, 0.7), transparent 45%),
        linear-gradient(120deg, #f3f7ee, #f7f0e6);
    background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 140px 140px, 200px 200px, 160px 160px, auto, auto, auto, auto;
}

.games-back-row {
    margin-bottom: 12px;
}

.games-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #e6e1d9;
    color: #2d210f;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 8px 16px rgba(32, 32, 32, 0.12);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.games-back::before {
    content: "\2190";
    font-size: 16px;
}

.games-back:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(32, 32, 32, 0.16);
}

.games-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 24px;
    align-items: center;
    margin-bottom: 16px;
}

.games-library {
    margin-bottom: 18px;
}

.games-library-title {
    font-size: 20px;
    margin: 0 0 10px;
}

.games-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

.game-tile {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px;
    display: grid;
    gap: 8px;
    justify-items: center;
    text-decoration: none;
    color: #2f2f2f;
    box-shadow: 0 12px 24px rgba(32, 32, 32, 0.1);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    min-height: 220px;
}

.game-tile img {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.game-tile span {
    font-weight: 700;
    font-size: 16px;
}

.game-tile small {
    font-size: 11px;
    color: #777;
}

.game-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(32, 32, 32, 0.15);
}

.game-tile.is-disabled {
    opacity: 0.75;
    cursor: default;
}

.game-tile.is-disabled:hover {
    transform: none;
    box-shadow: 0 12px 24px rgba(32, 32, 32, 0.1);
}

.games-hero h1 {
    font-size: 28px;
    line-height: 1.1;
    margin: 0 0 10px;
}

.games-hero p {
    margin: 0;
    max-width: 640px;
}

.download-pdf-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
}

.download-pdf-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4);
}

.download-pdf-btn:active {
    transform: translateY(0);
}

.games-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border-radius: 18px;
    background: #f4f1ea;
    box-shadow: 0 12px 30px rgba(32, 32, 32, 0.12);
}

.games-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 18px;
}

.games-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 14px 30px rgba(32, 32, 32, 0.08);
    margin: 20px 0px 20px 0px;
}

.wordsearch-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    gap: clamp(2px, 0.6vw, 6px);
    user-select: none;
    touch-action: none;
    padding: 6px;
    border-radius: 16px;
    background: var(--puzzle-bg, rgba(165, 122, 86, 0.35));
    border: 2px solid var(--puzzle-border, rgba(140, 98, 62, 0.35));
    width: min(70vh, 520px, 100%);
    margin: 0 auto;
}

.wordsearch-cell {
    border: none;
    background: #f6f5f2;
    border-radius: 10px;
    font-weight: 700;
    font-size: clamp(11px, 1.6vw, 16px);
    color: #2f2f2f;
    padding: 0;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: transform 0.08s ease, background 0.2s ease;
}

.wordsearch-cell.is-active {
    background: var(--active-color, #ffe9b3);
    transform: scale(1.05);
}

.wordsearch-cell.is-found {
    background: var(--found-color, #b9f3c6);
    color: #1f2b1f;
}

.wordsearch-cell.is-hint {
    outline: 2px dashed rgba(60, 60, 60, 0.55);
    outline-offset: -2px;
    animation: hintPulse 0.9s ease;
}

.games-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
    justify-content: center;
}

.games-controls button {
    border: none;
    background: #ffb44c;
    color: #2d210f;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.games-controls button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(32, 32, 32, 0.15);
}

.games-controls .secondary {
    background: #e6e1d9;
}

.word-list {
    column-count: 2;
    column-gap: 12px;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.word-list li {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), var(--puzzle-list-bg, #f9f7f2));
    padding: 5px 8px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0 0 8px;
    break-inside: avoid;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 12px rgba(32, 32, 32, 0.08);
}

.word-list li.is-found {
    text-decoration: line-through;
    text-decoration-color: var(--found-color, #b9f3c6);
    color: #1f2b1f;
    background: var(--found-color, #b9f3c6);
}

.games-toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(35, 35, 35, 0.9);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
}

.games-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.games-celebrate {
    position: fixed;
    inset: 0;
    background: rgba(22, 22, 22, 0.35);
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 30;
}

.games-celebrate.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.celebrate-card {
    background: #fff;
    padding: 20px 24px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    max-width: 280px;
}

.celebrate-card h3 {
    margin: 0 0 6px;
    font-size: 20px;
}

.celebrate-card p {
    margin: 0 0 14px;
    font-size: 14px;
}

.celebrate-card button {
    border: none;
    background: #ffb44c;
    color: #2d210f;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.celebrate-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

@keyframes hintPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.games-note {
    margin-top: 14px;
    font-size: 14px;
    color: #555;
}

.pdf-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
}

.pdf-links a {
    color: #2d210f;
    font-weight: 700;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1e4cf;
}

.pdf-links a:hover {
    background: #ffdeb1;
}

.games-spotdifference .game-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 24px;
    align-items: flex-start;
}

.whichdiff-page {
    font-family: "Trebuchet MS", "Comic Neue", sans-serif;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 240, 214, 0.9), transparent 50%),
        radial-gradient(circle at 80% 15%, rgba(219, 245, 233, 0.9), transparent 55%),
        linear-gradient(120deg, #fffaf1, #f4fbf7);
}

.whichdiff-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.whichdiff-hero-badge {
    background: #1f2937;
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 12px 22px rgba(31, 41, 55, 0.2);
}

.whichdiff-stage {
    display: grid;
    gap: 16px;
}

.whichdiff-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
    display: grid;
    gap: 14px;
}

.whichdiff-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.whichdiff-header h2 {
    margin: 0;
    font-size: 20px;
}

.whichdiff-progress {
    font-weight: 700;
    color: #475569;
}

.whichdiff-board {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8fafc;
    border: 2px solid rgba(15, 23, 42, 0.08);
    width: min(100%, 700px);
    max-height: min(68vh, 620px);
    margin: 0 auto;
}

.whichdiff-board img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(68vh, 620px);
    margin: 0 auto;
}

.whichdiff-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    grid-template-rows: repeat(var(--rows, 2), 1fr);
    gap: 0;
}

.whichdiff-cell {
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}

.whichdiff-cell::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 16px;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.whichdiff-cell:hover::after {
    opacity: 1;
    transform: scale(1.02);
}

.whichdiff-cell.is-correct::after {
    opacity: 1;
    border: 3px solid #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.2);
}

.whichdiff-cell.is-wrong::after {
    opacity: 1;
    border: 3px solid #ef4444;
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.2);
}

.whichdiff-grid.is-found .whichdiff-cell {
    pointer-events: none;
}

.whichdiff-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.whichdiff-actions .cbn-secondary,
.whichdiff-actions .cbn-primary {
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.15);
}

.whichdiff-actions .cbn-primary {
    background: linear-gradient(135deg, #ff8c42, #ffb562);
    color: #2d1a05;
}

.whichdiff-actions .cbn-secondary {
    background: #ffffff;
    border: 2px solid #e2e8f0;
}

.whichdiff-actions .cbn-secondary:hover,
.whichdiff-actions .cbn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 22px rgba(15, 23, 42, 0.18);
}

.whichdiff-empty {
    background: rgba(255, 255, 255, 0.9);
    padding: 24px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.cth-page {
    font-family: "Comic Neue", "Lato", sans-serif;
}

.cth-stage {
    display: grid;
    gap: 16px;
}

.cth-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    width: min(100%, 1220px);
    margin: 0 auto;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
    display: grid;
    gap: 14px;
}

.cth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(120deg, #fff8ea, #f5f9ff);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.cth-header h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    color: #1e293b;
    letter-spacing: 0.01em;
}

#cthProgress {
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffdca8, #ffb562);
    color: #3a2003;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.14);
}

.cth-prompt {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    padding: 10px 12px 2px;
}

.cth-play {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.cth-board {
    border-radius: 16px;
    overflow: hidden;
    background: #f7fbff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.cth-image,
.cth-frame {
    display: block;
    width: 100%;
    max-width: 100%;
}

.cth-image {
    max-height: 82vh;
    object-fit: contain;
}

.cth-frame {
    height: min(60vh, 700px);
    border: 0;
}

.cth-answer {
    display: grid;
    gap: 12px;
    align-content: center;
    justify-items: center;
    background: linear-gradient(160deg, #f6f8fc, #eef3fb);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    padding: 18px 16px;
    min-height: 0;
    width: min(100%, 420px);
    justify-self: center;
}

.cth-fields {
    width: 100%;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.cth-field {
    display: grid;
    grid-template-columns: auto 108px;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 14px;
    padding: 10px 12px;
    width: fit-content;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.cth-field-lead {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.cth-field-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.cth-field-label {
    font-size: 15px;
    font-weight: 800;
    color: #1f2937;
}

.cth-field input {
    width: 108px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid #cbd5e1;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    background: #ffffff;
}

.cth-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: min(100%, 360px);
}

.cth-actions .cbn-primary,
.cth-actions .cbn-secondary {
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 0.02em;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.15);
}

.cth-actions .cbn-primary {
    background: linear-gradient(135deg, #ff8c42, #ffb562);
    color: #2d1a05;
}

.cth-actions .cbn-secondary {
    background: #ffffff;
    border: 2px solid #e2e8f0;
}

.cth-actions .cbn-secondary:hover,
.cth-actions .cbn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 22px rgba(15, 23, 42, 0.18);
}

.cth-feedback {
    width: min(100%, 420px);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #f8fafc;
    color: #1f2937;
    font-weight: 700;
    font-size: 14px;
}

.cth-feedback.is-info {
    background: #eef6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

.cth-feedback.is-success {
    background: #ecfdf3;
    border-color: #86efac;
    color: #166534;
}

.cth-feedback.is-error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.cth-feedback.is-warn {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

#cthToast {
    bottom: 28px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, rgba(255, 140, 66, 0.96), rgba(255, 189, 89, 0.96));
    color: #2d1a05;
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.28);
}

@media (max-width: 900px) {
    .games-hero {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .games-layout {
        grid-template-columns: 1fr;
    }

    .word-list {
        column-count: 3;
        max-width: 100%;
    }

    .whichdiff-hero {
        flex-direction: column;
        text-align: center;
    }

    .whichdiff-actions {
        justify-content: center;
    }

    .cth-header {
        flex-direction: column;
        align-items: stretch;
    }

    .cth-header h2 {
        font-size: 24px;
    }

    #cthProgress {
        align-self: flex-start;
    }

    .cth-field {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cth-field input {
        width: 100%;
    }

    .cth-play {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cth-answer {
        min-height: 0;
    }

    #cthToast {
        font-size: 17px;
        padding: 12px 18px;
        max-width: calc(100vw - 24px);
        text-align: center;
    }
}

.games-spotdifference .image-wrapper {
    position: relative;
    flex: 0 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
    min-width: 400px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.games-spotdifference .game-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    border: 2px solid #333;
    box-sizing: border-box;
}

.games-spotdifference .hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.games-spotdifference .hotspot {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 0, 0, 0.0);
    background: rgba(255, 0, 0, 0.0);
    transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
    opacity: 0.02;
    pointer-events: auto;
}

.games-spotdifference .hotspot.found {
    opacity: 1;
    background: rgba(255, 0, 0, 0.28);
    border-color: rgba(255, 0, 0, 0.8);
}

/* Spot the Difference controls */
.spot-controls button {
    display: inline-block;
    margin-right: 8px;
    padding: 8px 14px;
    background: #fff;
    color: #222;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.spot-controls button:hover { background: #f6f6f6; transform: translateY(-1px); }
.spot-controls .spot-hint-btn { border-color: rgba(220,20,60,0.9); color: rgba(220,20,60,0.95); }
.spot-controls .spot-hint-btn:hover { background: rgba(255,240,240,0.9); }
.spot-controls .spot-next-btn { border-color: #007bff; color: #007bff; }
.spot-controls .spot-next-btn:hover { background: rgba(0,123,255,0.06); }

/* small hint hotspot that matches found style */
.games-spotdifference .hotspot.hint {
    width: 36px !important;
    height: 36px !important;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
    background: rgba(255, 0, 0, 0.22);
    border-color: rgba(255, 0, 0, 0.85);
    box-shadow: 0 0 12px rgba(255,0,0,0.35);
    animation: hintPulse 1s ease;
    pointer-events: none;
}

.games-spotdifference #status {
    margin-top: 12px;
}

/* Colour By Number (cbn) styles - ensure palette and controls are visible */
.cbn-page {
    font-family: "Comic Neue", "Lato", sans-serif;
}

.cbn-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.36fr) minmax(280px, 0.56fr);
    gap: 28px;
    align-items: start;
}

.cbn-board {
    background: linear-gradient(150deg, #f8fbff, #eef6ff);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 16px;
    padding: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cbn-canvas-wrap {
    position: relative;
    width: min(100%, 760px);
    margin: 0 auto;
}

.cbn-base-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.cbn-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.cbn-overlay-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cbn-overlay-svg .region {
    pointer-events: all;
    cursor: pointer;
    transition: fill 0.14s ease;
    fill: transparent;
    stroke: transparent;
}

.cbn-labels text {
    fill: #0f172a;
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1px;
    pointer-events: none;
}

.cbn-legend-wrap {
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.85), transparent 35%),
        linear-gradient(165deg, #f8faff, #edf4ff 55%, #eef9ff);
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 10px;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
    margin-top: 0;
    align-self: center;
    max-width: 430px;
    width: 100%;
    justify-self: start;
}

.cbn-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cbn-legend-title {
    margin: 0;
    font-size: 24px;
    color: #0f172a;
    letter-spacing: 0.02em;
}

.cbn-next-btn {
    border: 2px solid #c9d7ee;
    background: #ffffff;
    color: #0f172a;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    cursor: pointer;
}

.cbn-next-btn:hover {
    background: #f8fbff;
}

.cbn-palette {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.cbn-swatch {
    position: relative;
    border: 0;
    background: transparent;
    border-radius: 10px;
    width: 100%;
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    min-height: 74px;
    padding: 4px 2px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: visible;
}

.cbn-swatch::before {
    content: "";
    display: block;
    width: 88px;
    height: 40px;
    border: 0;
    background-image: url("../../images/color-by-number/paint-tube.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.35)) drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25));
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: center;
}

.cbn-swatch::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 30px;
    width: 34px;
    height: 10px;
    background: var(--swatch-color, #ddd);
    border-radius: 2px;
    opacity: 0.78;
}

.cbn-swatch:hover {
    transform: translateY(-1px);
}

.cbn-swatch.is-active {
    background: rgba(59, 130, 246, 0.1);
}

.cbn-swatch-num {
    font-weight: 800;
    color: #0f172a;
    margin-right: 5px;
    font-size: 16px;
}

.cbn-swatch-name {
    font-weight: 700;
    color: #334155;
    font-size: 14px;
}

.cbn-swatch-count {
    grid-column: 2;
    justify-self: start;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 3px 8px;
}

.cbn-swatch.is-done {
    background: rgba(148, 163, 184, 0.1);
    transform: none;
    opacity: 0.72;
}

.cbn-swatch.is-done::before {
    filter: grayscale(1);
}

.cbn-swatch.is-done::after {
    filter: grayscale(1);
}

.cbn-swatch.is-done .cbn-swatch-num,
.cbn-swatch.is-done .cbn-swatch-name,
.cbn-swatch.is-done .cbn-swatch-count {
    color: #64748b;
}

.cbn-swatch.is-done .cbn-swatch-count {
    background: #e2e8f0;
}

@media (max-width: 900px) {
    .cbn-stage {
        grid-template-columns: 1fr;
    }

    .cbn-legend-wrap {
        align-self: stretch;
    }

    .cbn-palette {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .cbn-palette {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .games-spotdifference .game-container {
        flex-wrap: wrap;
    }
    .games-spotdifference .image-wrapper {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }
    .games-spotdifference .game-image {
        max-width: 100%;
        width: 100%;
    }
}

.spot-carousel-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 12px;
}

.spot-carousel {
    display: flex;
    transition: transform 420ms cubic-bezier(.22,.9,.35,1);
    will-change: transform;
}

.spot-carousel .image-hero {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 18px 10px;
}

.spot-carousel .image-hero .game-container {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: center;
}

.spot-carousel .image-hero .image-wrapper {
    position: relative;
    flex: 1 1 50%;
    max-width: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
}

.spot-carousel .image-hero img.game-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.spot-carousel .image-hero .hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.spot-carousel .image-hero .hotspot {
    pointer-events: auto;
}

@media (max-width: 900px) {
    .spot-carousel .image-hero .game-container {
        flex-direction: column;
        gap: 16px;
        max-width: 720px;
    }
    .spot-carousel .image-hero .image-wrapper {
        max-width: 100%;
        flex: 1 1 100%;
    }
}


/* silhouette match layout with adjustable size */
.silhouette-game {
    padding: 24px 0;
    --silhouette-size: 180px;
}

.silhouette-instructions {
    margin-bottom: 12px;
}

.silhouette-wrap {
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Thumbnails (top) */
.silhouette-thumbs {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    min-width: calc(var(--silhouette-size) + 28px);
}

.silhouette-thumb {
    width: var(--silhouette-size);
    height: var(--silhouette-size);
    padding: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.silhouette-thumb img {
    width: 100%;
    height: 100%;
    max-height: var(--silhouette-size);
    object-fit: contain;
    display: block;
}

/* Selected thumbnail */
.silhouette-thumb.is-selected {
    border-color: #007acc;
    box-shadow: 0 12px 28px rgba(0, 122, 204, 0.18);
    transform: translateY(-4px);
}

.silhouette-thumb.is-selected img {
    transform: scale(1.03);
    transition: transform 0.12s ease;
}

/* Disabled thumbnail when matched */
.silhouette-thumb.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(40%);
    box-shadow: none;
    transform: none;
}

.silhouette-controls {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

/* Targets (bottom) */
.silhouette-targets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    flex: 1;
}

.silhouette-card {
    position: relative;
    background: #fff;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15,23,42,0.04);
}

.silhouette-card img {
    width: 100%;
    height: 100%;
    max-height: var(--silhouette-size);
    object-fit: contain;
    display: block;
    margin: 0 auto;
    user-select: none;
    pointer-events: none;
}

.silhouette-card .label {
    margin-top: 8px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-size: 14px;
    color: #444;
    opacity: .9;
}

.silhouette-card.matched {
    border: 2px solid #2ecc71;
    background: #f7fff7;
}

.silhouette-reset,
.silhouette-next {
  background-color: #8B5E3C;
  color: #fff8f0;
  border: none;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  font-family: 'Segoe UI', sans-serif;
}

.silhouette-reset:hover,
.silhouette-next:hover {
  background-color: #A47149;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.silhouette-reset:active,
.silhouette-next:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* smaller screens: scale everything down */
@media (max-width: 900px) {
    .silhouette-game { --silhouette-size: 140px; }
    .silhouette-thumbs { flex-direction: row; min-width: auto; }
    .silhouette-thumbs { gap: 10px; }
    .silhouette-wrap { gap: 18px; }
    .silhouette-card { min-height: calc(var(--silhouette-size) + 28px); }
}

@media (max-width: 480px) {
    .silhouette-game { --silhouette-size: 110px; }
    .silhouette-targets { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* carousel for silhouette puzzles */
.silhouette-carousel-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 12px;
}

.silhouette-carousel {
    display: flex;
    transition: transform 420ms cubic-bezier(.22,.9,.35,1);
    will-change: transform;
}

.silhouette-carousel .silhouette-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding: 18px 10px;
    display: flex;
    justify-content: center;
}

.silhouette-carousel .silhouette-instance {
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}

.silhouette-carousel .silhouette-instance .silhouette-wrap {
    /* display: flex; */
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 900px) {
    .silhouette-carousel .silhouette-instance .silhouette-wrap {
        flex-direction: column;
        gap: 16px;
    }
}

/* ...existing code... */