#oddoneout_page {
    --odd-teal: #00aaa6;
    --odd-teal-dark: #007f7c;
    --odd-pale: #cceeed;
    --odd-ink: #203548;
    --odd-muted: #647886;
    --odd-line: #c8dde1;
    --odd-red: #e73352;
    width: 100%;
    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(--odd-ink);
    font-family: "Albert Sans", Arial, Helvetica, sans-serif;
}

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

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

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

#oddoneout_page *,
#oddoneout_page *::before,
#oddoneout_page *::after {
    box-sizing: border-box;
}

#oddoneout_page button {
    font: inherit;
}

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

#oddoneout_page .odd-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: clamp(10px, 1.5vh, 15px) 20px;
    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);
}

#oddoneout_page .odd-summary-copy {
    min-width: 0;
    flex: 1;
}

#oddoneout_page .odd-eyebrow {
    margin: 0 0 3px;
    color: var(--odd-teal-dark);
    font-size: clamp(.62em, 1.7vh, .75em);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

#oddoneout_page h1 {
    margin: 0;
    color: var(--odd-ink);
    font-size: clamp(1.4em, 4.4vh, 1.8em);
    line-height: 1;
}

#oddoneout_page .odd-summary-message {
    margin: .55vh 0 0;
    color: var(--odd-muted);
    font-size: clamp(.7em, 2.1vh, .86em);
}

#oddoneout_page .odd-board {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 1.2vh 1.4vw 1vh;
    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);
}

#oddoneout_page .odd-instruction-row {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: .7vh;
}

#oddoneout_page .odd-instruction {
    display: flex;
    grid-column: 2;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #405a6a;
    font-size: clamp(.76em, 2.45vh, 1em);
    font-weight: 750;
}

#oddoneout_page .odd-instruction-mark {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    background: var(--ct-surface);
    color: var(--odd-teal-dark);
    font-size: 18px;
}

#oddoneout_page .odd-hear-all {
    display: inline-flex;
    grid-column: 3;
    justify-self: end;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    border: 1px solid rgba(231, 51, 82, .38);
    border-radius: 999px;
    background: #fff3f4;
    color: var(--odd-ink);
    font-size: clamp(.62em, 1.8vh, .74em);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(16, 69, 79, .08);
}

#oddoneout_page .odd-hear-all img {
    width: var(--ct-audio-inline-size);
    height: var(--ct-audio-inline-size);
}

#oddoneout_page .odd-hear-all:hover,
#oddoneout_page .odd-hear-all:focus-visible {
    border-color: var(--ct-brand-red);
    outline: 3px solid var(--ct-focus);
    outline-offset: 2px;
}

#oddoneout_page .odd-hear-all:disabled {
    cursor: default;
    opacity: .48;
}

#oddoneout_page .odd-play-area {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
}

#oddoneout_page .odd-choices {
    display: grid;
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    align-items: stretch;
    justify-content: stretch;
    grid-template-columns: repeat(var(--odd-picture-count, 4), minmax(0, 1fr));
    gap: clamp(10px, 1.25vw, 20px);
}

#oddoneout_page .odd-choice {
    display: block;
    position: relative;
    z-index: 2;
    width: var(--odd-card-width, min(17.3vw, 275px));
    min-width: 0;
    aspect-ratio: .89;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(0, 128, 125, 0.16);
    border-radius: clamp(15px, 1.5vw, 20px);
    background: var(--odd-image-background, var(--ct-surface));
    box-shadow: var(--ct-shadow-card);
    cursor: pointer;
    transition: transform 250ms ease, box-shadow 250ms ease;
}

#oddoneout_page .odd-choice-select {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: clamp(10px, 1.25vw, 18px) clamp(10px, 1.25vw, 18px) clamp(8px, 1vh, 12px);
    flex-direction: column;
    align-items: center;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--odd-ink);
    cursor: pointer;
}

#oddoneout_page .odd-choice-image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    max-height: none;
    flex: 1 1 auto;
    padding: 0;
    object-fit: contain;
    pointer-events: none;
}

#oddoneout_page .odd-choice-label {
    flex: 0 0 auto;
    margin-top: clamp(5px, .7vh, 8px);
    color: var(--ct-ink-strong);
    font-size: clamp(17px, 2.25vh, 24px);
    font-weight: 800;
    line-height: 1.08;
    text-align: center;
}

#oddoneout_page .odd-choice-audio {
    display: grid;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 7;
    width: var(--ct-audio-inline-size);
    height: var(--ct-audio-inline-size);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(32, 53, 72, .16));
}

#oddoneout_page .odd-choice-audio img {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#oddoneout_page .odd-choice-audio:hover,
#oddoneout_page .odd-choice-audio:focus-visible {
    outline: 3px solid var(--ct-focus);
    outline-offset: 2px;
}

#oddoneout_page .odd-choice.is-target-word {
    border-color: rgba(226,165,42,.72);
    background: #fffdf8;
    box-shadow:
        inset 0 0 0 1px rgba(226,165,42,.34),
        0 7px 17px rgba(126,91,20,.16);
}

#oddoneout_page .odd-choice:not(.is-disabled):hover {
    box-shadow: var(--ct-shadow-card-raised);
    transform: translateY(-3px);
}

#oddoneout_page .odd-choice:not(.is-disabled):active {
    transform: translateY(-1px);
}

#oddoneout_page .odd-practice-word-badge {
    position: absolute;
    z-index: 5;
    top: clamp(7px, .85vw, 12px);
    left: clamp(7px, .85vw, 12px);
    width: clamp(25px, calc(var(--odd-card-width, 220px) * .14), 36px);
    height: clamp(25px, calc(var(--odd-card-width, 220px) * .14), 36px);
    font-size: clamp(15px, calc(var(--odd-card-width, 220px) * .08), 21px);
    pointer-events: none;
}

#oddoneout_page .odd-choice:focus-within {
    outline: 3px solid var(--ct-focus);
    outline-offset: 3px;
}

#oddoneout_page .odd-choice.is-disabled,
#oddoneout_page .odd-choice.is-disabled button {
    cursor: default;
}

#oddoneout_page .odd-choices.is-listening .odd-choice-label {
    color: var(--ct-brand-purple);
    animation: odd-word-label-listening 900ms ease-in-out infinite alternate;
}

#oddoneout_page .odd-group-highlight {
    position: absolute;
    z-index: 1;
    border: 3px solid rgba(0,127,124,.24);
    border-radius: 34px;
    background: rgba(0,170,166,.14);
    box-shadow: 0 0 26px rgba(0,127,124,.18);
    filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transform: scale(.08);
    transform-origin: center;
    transition: opacity 250ms ease, transform 250ms ease;
}

#oddoneout_page .odd-group-highlight.is-visible {
    opacity: 1;
    transform: scale(1);
}

#oddoneout_page .odd-choice.is-related {
    transform: translateX(var(--odd-group-shift, 0)) scale(1.015);
    box-shadow: 0 8px 19px rgba(0,127,124,.23);
}

#oddoneout_page .odd-choice.is-odd {
    transform: translate(var(--odd-separation-shift, 0), -10px) scale(1.05);
    box-shadow: 0 13px 25px rgba(36,64,79,.24);
}

#oddoneout_page .odd-choice.is-retrying {
    animation: odd-calm-retry 680ms ease;
}

#oddoneout_page .odd-choice.is-reel-spinning {
    overflow: hidden;
    box-shadow: inset 0 12px 18px rgba(32,53,72,.06), inset 0 -12px 18px rgba(32,53,72,.06);
}

#oddoneout_page .odd-choice.is-reel-spinning .odd-choice-image {
    animation: odd-slot-roll 130ms linear infinite;
}

#oddoneout_page .odd-choice.is-reel-spinning .odd-choice-label,
#oddoneout_page .odd-choice.is-reel-spinning .odd-choice-audio {
    opacity: 0;
}

#oddoneout_page .odd-teaching-sparkles {
    position: absolute;
    inset: -18px;
    z-index: 4;
    overflow: visible;
    pointer-events: none;
}

#oddoneout_page .odd-teaching-sparkles i {
    position: absolute;
    color: #f6b83f;
    font-size: 25px;
    font-style: normal;
    opacity: 0;
    animation: odd-teaching-sparkle 900ms ease-out both;
}

#oddoneout_page .odd-teaching-sparkles i:nth-child(1) { top: 4%; left: 8%; animation-delay: 40ms; }
#oddoneout_page .odd-teaching-sparkles i:nth-child(2) { top: -2%; right: 12%; color: var(--odd-teal); animation-delay: 160ms; }
#oddoneout_page .odd-teaching-sparkles i:nth-child(3) { top: 45%; right: -1%; font-size: 19px; animation-delay: 280ms; }
#oddoneout_page .odd-teaching-sparkles i:nth-child(4) { bottom: 2%; right: 13%; color: var(--odd-red); animation-delay: 360ms; }
#oddoneout_page .odd-teaching-sparkles i:nth-child(5) { bottom: 6%; left: 7%; font-size: 18px; animation-delay: 220ms; }
#oddoneout_page .odd-teaching-sparkles i:nth-child(6) { top: 40%; left: -1%; color: var(--odd-teal); animation-delay: 100ms; }

#oddoneout_page .odd-target-stardust {
    position: absolute;
    inset: -18px;
    z-index: 6;
    overflow: visible;
    pointer-events: none;
}

#oddoneout_page .odd-target-stardust i {
    position: absolute;
    color: #f6b83f;
    font-size: clamp(17px, calc(var(--odd-card-width, 220px) * .1), 27px);
    font-style: normal;
    opacity: 0;
    text-shadow: 0 1px 3px rgba(85,55,10,.2);
    animation: odd-target-sparkle 900ms ease-out both;
}

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

#oddoneout_page .odd-board-footer {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateY(-1.5vh);
}

#oddoneout_page .odd-spin-button {
    display: inline-flex;
    position: relative;
    width: clamp(108px, 14vh, 142px);
    height: clamp(108px, 14vh, 142px);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: clamp(6px, .8vh, 8px) solid white;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffdc72 0%, #ffc44f 56%, #f5ad36 100%);
    color: #344656;
    box-shadow: 0 8px 18px rgba(52,70,86,.22), inset 0 0 0 2px rgba(190,126,16,.16);
    cursor: pointer;
    font-size: clamp(.72em, 2.6vh, 1em);
    font-weight: 850;
    transition: box-shadow 180ms ease, transform 180ms ease;
    animation: odd-spin-ready 2.8s ease-in-out infinite;
}

#oddoneout_page .odd-spin-button::after {
    content: '';
    position: absolute;
    top: -35%;
    left: -65%;
    width: 42%;
    height: 170%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    pointer-events: none;
    transform: rotate(24deg);
    animation: odd-spin-sheen 3.4s ease-in-out infinite;
}

#oddoneout_page .odd-spin-arrow {
    position: relative;
    z-index: 1;
    height: clamp(32px, 4.2vh, 43px);
    font-size: clamp(38px, 5vh, 52px);
    line-height: .75;
    transform-origin: center;
}

#oddoneout_page .odd-spin-button > span:last-child {
    position: relative;
    z-index: 1;
}

#oddoneout_page .odd-spin-button.is-spinning {
    animation: odd-spin-active 520ms ease-in-out infinite alternate;
    transform: scale(.97);
}

#oddoneout_page .odd-spin-button.is-spinning .odd-spin-arrow {
    animation: odd-reel-spin .52s linear infinite;
}

#oddoneout_page .odd-spin-button:disabled {
    cursor: default;
}

#oddoneout_page .odd-spin-caption {
    margin: 0;
    color: #5e7885;
    font-size: clamp(.58em, 1.75vh, .68em);
}

@keyframes odd-reel-spin { to { transform: rotate(360deg); } }

@keyframes odd-word-label-listening {
    from { opacity: .7; transform: scale(.98); }
    to { opacity: 1; transform: scale(1.03); }
}

@keyframes odd-spin-ready {
    0%, 78%, 100% { transform: translateY(0) scale(1); }
    86% { transform: translateY(-3px) scale(1.025); }
    93% { transform: translateY(0) scale(1); }
}

@keyframes odd-spin-sheen {
    0%, 58% { left: -65%; opacity: 0; }
    65% { opacity: .8; }
    88%, 100% { left: 125%; opacity: 0; }
}

@keyframes odd-spin-active {
    from { box-shadow: 0 0 0 5px rgba(255,196,79,.17), 0 8px 18px rgba(52,70,86,.21); }
    to { box-shadow: 0 0 0 11px rgba(255,196,79,.25), 0 11px 22px rgba(52,70,86,.25); }
}

@keyframes odd-calm-retry {
    0%, 100% {
        border-color: white;
        box-shadow: 0 6px 16px rgba(36,64,79,.15);
        transform: translateY(0);
    }
    35% {
        border-color: rgba(231,51,82,.7);
        box-shadow: 0 0 0 7px rgba(231,51,82,.17), 0 8px 19px rgba(36,64,79,.17);
        transform: translateY(-4px);
    }
    65% {
        border-color: rgba(231,51,82,.45);
        box-shadow: 0 0 0 4px rgba(231,51,82,.1), 0 7px 17px rgba(36,64,79,.16);
        transform: translateY(-2px);
    }
}

@keyframes odd-slot-roll {
    0% { transform: translateY(-30%); filter: blur(3px); opacity: .25; }
    45% { transform: translateY(0); filter: blur(1px); opacity: .9; }
    100% { transform: translateY(30%); filter: blur(3px); opacity: .25; }
}

@keyframes odd-teaching-sparkle {
    0% { opacity: 0; transform: scale(.2) rotate(-15deg); }
    38% { opacity: 1; transform: scale(1) rotate(4deg); }
    72% { opacity: .9; transform: scale(.82) rotate(12deg); }
    100% { opacity: 0; transform: scale(.35) rotate(18deg); }
}

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

@media (max-width: 900px) {
    #oddoneout_page .odd-summary {
        gap: 12px;
    }

    #oddoneout_page .odd-instruction-row {
        grid-template-columns: 1fr auto;
    }

    #oddoneout_page .odd-instruction {
        grid-column: 1;
        justify-self: start;
    }

    #oddoneout_page .odd-hear-all {
        grid-column: 2;
    }
}

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

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

    #oddoneout_page {
        padding: 8px;
    }

    #oddoneout_page .odd-summary {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    #oddoneout_page .odd-board-footer {
        gap: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #oddoneout_page .odd-choice,
    #oddoneout_page .odd-group-highlight,
    #oddoneout_page .odd-choice.is-reel-spinning img,
    #oddoneout_page .odd-choices.is-listening .odd-choice-label,
    #oddoneout_page .odd-teaching-sparkles i,
    #oddoneout_page .odd-target-stardust i,
    #oddoneout_page .odd-spin-button,
    #oddoneout_page .odd-spin-button::after,
    #oddoneout_page .odd-spin-arrow {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}