#pairs_page {
    --pairs-teal: #00aaa6;
    --pairs-teal-dark: #007f7c;
    --pairs-pale: #eaf8f7;
    --pairs-ink: #203548;
    --pairs-muted: #647886;
    --pairs-line: #d8e5e8;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: clamp(10px, 1.25vw, 18px);
    overflow: hidden;
    border-radius: var(--ct-radius-panel);
    background: rgba(0, 116, 119, 0.55);
    box-shadow: 0 12px 30px rgba(0, 61, 69, 0.18);
    color: var(--pairs-ink);
    font-family: "Albert Sans", Arial, Helvetica, sans-serif;
}

/* A previously cached version of the page contained its own app header. The
   application shell now provides all navigation, so never display that header. */
#pairs_page > .pairs-app-bar {
    display: none !important;
}

#allaround.pairs-modern-mode .centre-column {
    height: 95%;
}

#allaround.pairs-modern-mode .centre-column > .page_title {
    display: flex !important;
    box-sizing: border-box;
    height: 10%;
    padding-inline-start: 0;
}

#allaround.pairs-modern-mode .shared_body {
    height: 90%;
    padding-bottom: 0;
}

#pairs_page button {
    font: inherit;
}

#pairs_page .pairs-main {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    flex-direction: column;
    gap: 1.2vh;
}

#pairs_page .pairs-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    border: 1px solid rgba(0, 128, 125, 0.16);
    border-radius: var(--ct-radius-card);
    background: linear-gradient(145deg, var(--ct-surface) 0%, var(--ct-surface-soft) 100%);
    box-shadow: var(--ct-shadow-card);
}

#pairs_page .pairs-heading-copy {
    min-width: 0;
    flex: 1;
}

#pairs_page .pairs-eyebrow {
    margin: 0 0 3px;
    color: var(--pairs-teal-dark);
    font-size: 0.64em;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#pairs_page .pairs-heading h1 {
    margin: 0;
    color: var(--pairs-ink);
    font-size: 1.65em;
    line-height: 1.05;
}

#pairs_page .pairs-heading-message {
    margin: 0.35vh 0 0;
    color: var(--pairs-muted);
    font-size: 0.74em;
}

#pairs_page .pairs-progress {
    min-width: 205px;
    padding: 0.75vh 0.85vw;
    border-radius: 12px;
    border: 1px solid rgba(0, 128, 125, 0.14);
    background: rgba(232, 242, 239, 0.78);
}

#pairs_page .pairs-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
    color: #45616e;
    font-size: 0.68em;
}

#pairs_page .pairs-progress-copy strong {
    color: var(--pairs-teal-dark);
    font-size: 1.08em;
}

#pairs_page .pairs-progress-dots {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6vh;
    gap: 7px;
}

#pairs_page .pairs-progress-dots span {
    width: 10px;
    min-width: 10px;
    height: 10px;
    flex: 0 0 10px;
    box-sizing: border-box;
    border: 1px solid #9bc9c7;
    border-radius: 50%;
    background: var(--ct-surface);
}

#pairs_page .pairs-progress-dots span.is-complete {
    border-color: var(--pairs-teal);
    background: var(--pairs-teal);
}

#pairs_page .pairs-board {
    display: flex;
    min-height: 0;
    flex: 1;
    margin-top: 0;
    flex-direction: column;
    padding: 1.2vh 1.4vw 1.5vh;
    border: 1px solid rgba(0, 128, 125, 0.16);
    border-radius: var(--ct-radius-card);
    background: linear-gradient(145deg, var(--ct-surface) 0%, var(--ct-surface-soft) 100%);
    box-shadow: 0 12px 28px rgba(0, 64, 75, 0.18),
                0 3px 7px rgba(0, 64, 75, 0.1);
}

#pairs_page .pairs-instruction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 1vh;
    color: #405a6a;
    font-size: 0.78em;
    font-weight: 750;
}

#pairs_page .pairs-instruction-mark {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 50%;
    background: var(--pairs-pale);
    color: var(--pairs-teal-dark);
}

#pairs_page #pairs_div {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
}

#pairs_page #pairs_div #two_grid,
#pairs_page #pairs_div #four_grid,
#pairs_page #pairs_div #six_grid,
#pairs_page #pairs_div #eight_grid,
#pairs_page #pairs_div #twelve_grid {
    display: none;
    height: auto;
    width: min(880px, 100%);
    max-width: 100%;
    margin: 0 auto;
    align-items: stretch;
    justify-content: stretch;
    flex-direction: initial;
    grid-auto-flow: row;
    gap: clamp(8px, 1.2vw, 18px);
}

#pairs_page #pairs_div #six_grid {
    width: min(680px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#pairs_page #pairs_div #two_grid,
#pairs_page #pairs_div #four_grid {
    place-content: center;
}

#pairs_page .pairs-grid--8,
#pairs_page .pairs-grid--12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#pairs_page #pairs_div #twelve_grid {
    width: min(1000px, 100%);
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

#pairs_page #pairs_div .cardback {
    display: grid;
    position: relative;
    width: var(--pairs-card-width, 100%) !important;
    margin: 0;
    min-width: 0;
    aspect-ratio: 1079 / 1458;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 17px;
    background: var(--ct-surface);
    cursor: pointer;
    box-shadow: 0 5px 13px rgba(36, 64, 79, 0.15);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

#pairs_page .cardback:hover,
#pairs_page .cardback:focus-visible {
    outline: 3px solid var(--ct-focus);
    outline-offset: 3px;
    box-shadow: 0 9px 18px rgba(36, 64, 79, 0.19);
    transform: translateY(-3px);
}

#pairs_page #pairs_div .pairsIcon,
#pairs_page #pairs_div .cardrevealed {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 11px;
    background: var(--ct-surface);
    object-fit: contain;
}

#pairs_page #pairs_div .cardrevealed[hidden] {
    display: none !important;
}

#pairs_page .cardrevealed {
    padding: 6px;
}

#pairs_page .cardback.sound_source::after {
    z-index: 5;
    width: var(--ct-audio-inline-size);
    height: var(--ct-audio-inline-size);
    aspect-ratio: auto;
    top: 7px;
    right: 7px;
}

#pairs_page .cardback.is-target-word.sound_source,
#pairs_page .cardback.is-target-word.is-matched {
    background: #fffdf8;
    box-shadow:
        inset 0 0 0 2px rgba(226, 165, 42, 0.72),
        0 7px 17px rgba(126, 91, 20, 0.16);
}

#pairs_page .pairs-practice-word-badge {
    position: absolute;
    z-index: 5;
    top: clamp(6px, 0.8vw, 11px);
    right: auto;
    left: clamp(6px, 0.8vw, 11px);
    width: clamp(23px, calc(var(--pairs-card-width, 130px) * 0.2), 34px);
    height: clamp(23px, calc(var(--pairs-card-width, 130px) * 0.2), 34px);
    font-size: clamp(14px, calc(var(--pairs-card-width, 130px) * 0.12), 20px);
    pointer-events: none;
}

#pairs_page .pairs-practice-word-badge[hidden] {
    display: none;
}

#pairs_page .pairs-target-stardust {
    position: absolute;
    z-index: 6;
    inset: -14px;
    overflow: visible;
    pointer-events: none;
}

#pairs_page .pairs-target-stardust i {
    position: absolute;
    color: #f6b83f;
    font-size: clamp(15px, calc(var(--pairs-card-width, 130px) * 0.18), 25px);
    font-style: normal;
    opacity: 0;
    text-shadow: 0 1px 3px rgba(85, 55, 10, 0.2);
    animation: pairs-target-sparkle 900ms ease-out both;
}

#pairs_page .pairs-target-stardust i:nth-child(1) { top: 4%; left: 8%; animation-delay: 20ms; }
#pairs_page .pairs-target-stardust i:nth-child(2) { top: -2%; right: 12%; color: var(--pairs-teal); animation-delay: 110ms; }
#pairs_page .pairs-target-stardust i:nth-child(3) { top: 42%; right: -2%; font-size: 0.85em; animation-delay: 210ms; }
#pairs_page .pairs-target-stardust i:nth-child(4) { right: 13%; bottom: 2%; color: #e65b68; animation-delay: 310ms; }
#pairs_page .pairs-target-stardust i:nth-child(5) { bottom: 5%; left: 7%; font-size: 0.8em; animation-delay: 190ms; }
#pairs_page .pairs-target-stardust i:nth-child(6) { top: 40%; left: -2%; color: var(--pairs-teal); animation-delay: 70ms; }
#pairs_page .pairs-target-stardust i:nth-child(7) { top: 20%; left: 42%; font-size: 0.7em; animation-delay: 260ms; }
#pairs_page .pairs-target-stardust i:nth-child(8) { right: 34%; bottom: -2%; color: #e65b68; font-size: 0.68em; animation-delay: 350ms; }

#pairs_page .cardback.is-matched {
    border-color: #8bd0cc;
    background: #eaf8f7;
    outline: 3px solid #8bd0cc;
    outline-offset: 0;
    box-shadow: 0 4px 12px rgba(0, 127, 124, 0.16);
}

#pairs_page .cardback.is-celebrating {
    outline: 4px solid rgba(253, 198, 82, 0.78);
    outline-offset: 3px;
}

#pairs_page .cardback.is-celebrating .cardrevealed {
    animation: pairs-match-picture 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
}

#pairs_page .cardback.is-celebrating::before,
#pairs_page .cardback.is-celebrating::after {
    position: absolute;
    z-index: 3;
    color: #fdc652;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(85, 55, 10, 0.24);
}

#pairs_page .cardback.is-celebrating::before {
    top: 9%;
    right: 9%;
    content: "✦";
    font-size: 1.25em;
    animation: pairs-sparkle-one 0.9s ease-out both;
}

#pairs_page .cardback.is-celebrating::after {
    bottom: 10%;
    left: 8%;
    content: "✦  ✧";
    color: #00aaa6;
    font-size: 0.88em;
    animation: pairs-sparkle-two 1s 0.08s ease-out both;
}

@keyframes pairs-match-picture {
    0% { transform: scale(1) rotate(0); }
    35% { transform: scale(1.08) rotate(-1.5deg); }
    65% { transform: scale(1.04) rotate(1deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes pairs-sparkle-one {
    0% { opacity: 0; transform: scale(0.25) rotate(-30deg); }
    35% { opacity: 1; transform: scale(1.35) rotate(8deg); }
    100% { opacity: 0; transform: scale(0.75) rotate(28deg); }
}

@keyframes pairs-sparkle-two {
    0% { opacity: 0; transform: translate(-5px, 5px) scale(0.25); }
    40% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(7px, -8px) scale(0.8); }
}

@keyframes pairs-target-sparkle {
    0% { opacity: 0; transform: translateY(5px) scale(0.2) rotate(-25deg); }
    35% { opacity: 1; transform: translateY(0) scale(1.25) rotate(6deg); }
    100% { opacity: 0; transform: translateY(-9px) scale(0.72) rotate(28deg); }
}

#pairs_page .smileyicon {
    width: 72%;
    height: auto;
    object-fit: contain;
}

#pairs_page .pairs-board-tip {
    margin: 0.9vh 0 0;
    color: var(--pairs-muted);
    font-size: 0.64em;
    text-align: center;
}

#pairs_page {
    position: relative;
}

#pairs_page .pairs-completion[hidden] {
    display: none !important;
}

#pairs_page .pairs-completion {
    display: grid;
    position: absolute;
    z-index: 20;
    inset: 0;
    box-sizing: border-box;
    padding: 18px;
    place-items: center;
    background: rgba(22, 66, 72, 0.46);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.24s ease;
}

#pairs_page .pairs-completion.is-visible {
    opacity: 1;
}

#pairs_page .pairs-completion-card {
    width: min(440px, calc(100% - 24px));
    box-sizing: border-box;
    padding: 14px 28px 24px;
    overflow: hidden;
    border: 1px solid rgba(0, 128, 125, 0.18);
    border-radius: var(--ct-radius-panel);
    background: linear-gradient(145deg, var(--ct-surface) 0%, var(--ct-surface-soft) 100%);
    text-align: center;
    box-shadow: 0 22px 55px rgba(22, 55, 67, 0.27);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1);
}

#pairs_page .pairs-completion.is-visible .pairs-completion-card {
    transform: translateY(0) scale(1);
}

#pairs_page .pairs-laurel-animation {
    height: min(220px, 29vh);
    margin: -4px auto -8px;
}

#pairs_page .pairs-completion-emblem {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

#pairs_page .pairs-completion-card h2 {
    margin: 0;
    color: var(--pairs-ink);
    font-size: 1.38em;
    line-height: 1.12;
}

#pairs_page .pairs-completion-card > p {
    margin: 7px 0 17px;
    color: var(--pairs-muted);
    font-size: 0.72em;
}

#pairs_page .pairs-completion-actions {
    display: grid;
    gap: 9px;
}

#pairs_page .pairs-completion-actions button {
    min-height: 46px;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.72em;
    font-weight: 780;
}

#pairs_page .pairs-completion-primary {
    border: 1px solid #009a96;
    background: linear-gradient(135deg, #08aaa6, #008d89);
    color: #fff;
    box-shadow: 0 5px 12px rgba(0, 143, 139, 0.2);
}

#pairs_page .pairs-completion-secondary {
    border: 2px solid #00aaa6;
    background: var(--ct-surface);
    color: #007f7c;
}

#pairs_page .pairs-completion-actions button:hover,
#pairs_page .pairs-completion-actions button:focus-visible {
    outline: 3px solid rgba(253, 198, 82, 0.56);
    outline-offset: 2px;
    transform: translateY(-1px);
}

#pairs_page .pairs-completion-emblem {
    transform-origin: center;
}

#pairs_page .pairs-completion.is-visible .pairs-completion-emblem {
    animation: pairs-completion-emblem-reveal 0.95s 0.12s cubic-bezier(0.2, 0.85, 0.3, 1.12) both;
}

@keyframes pairs-completion-emblem-reveal {
    0% { opacity: 0; transform: translateY(10px) scale(0.76) rotate(-2deg); }
    68% { opacity: 1; transform: translateY(-2px) scale(1.04) rotate(0.6deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@media (max-width: 900px) {
    #pairs_page .pairs-main {
        width: 100%;
        margin-top: 0;
    }

    #pairs_page .pairs-heading {
        align-items: stretch;
        flex-direction: column;
    }

    #pairs_page .pairs-progress {
        width: 100%;
    }

    #pairs_page .pairs-grid {
        gap: 10px;
    }

}

@media (max-height: 650px) {
    #allaround.pairs-modern-mode .centre-column > .page_title {
        height: 9%;
    }

    #allaround.pairs-modern-mode .shared_body {
        height: 91%;
    }

    #pairs_page {
        padding: 8px;
    }

    #pairs_page .pairs-heading {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media (max-width: 620px) {
    #pairs_page .pairs-board {
        padding: 10px;
    }

    #pairs_page .pairs-grid--6,
    #pairs_page .pairs-grid--8,
    #pairs_page #pairs_div #twelve_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #pairs_page .cardback {
        border-width: 3px;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pairs_page .cardback,
    #pairs_page .cardback.is-celebrating .cardrevealed,
    #pairs_page .cardback.is-celebrating::before,
    #pairs_page .cardback.is-celebrating::after,
    #pairs_page .pairs-target-stardust i,
    #pairs_page .pairs-completion,
    #pairs_page .pairs-completion-card,
    #pairs_page .pairs-completion-emblem {
        transition: none;
        animation: none;
    }
}