:root {
    color-scheme: light;
    --font-display: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --font-rounded: "Nunito", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
    --color-brand: #0d9488;
    --color-coral: #fb7185;
    --color-sun: #fbbf24;
    --color-violet: #7c3aed;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 8% 12%, rgb(253 230 138 / 35%), transparent 20rem),
        radial-gradient(circle at 92% 18%, rgb(204 251 241 / 65%), transparent 24rem),
        #f8fafc;
    font-family: var(--font-rounded);
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.font-display {
    font-family: var(--font-display);
    letter-spacing: -0.035em;
}

.brand-link {
    text-decoration: none;
}

.brand-logo {
    filter: drop-shadow(0 6px 8px rgb(15 118 110 / 20%));
    transition: transform 180ms ease;
}

.brand-link:hover .brand-logo {
    transform: rotate(-3deg) scale(1.06);
}

.brand-wordmark {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 1;
}

.brand-wordmark span {
    color: var(--color-coral);
}

select {
    color-scheme: light;
    background-color: #fff;
    color: #0f172a;
}

select option,
select optgroup {
    background-color: #fff;
    color: #0f172a;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100000;
    transform: translateY(-160%);
    border-radius: 0.75rem;
    background: var(--color-brand);
    color: #fff;
    padding: 0.75rem 1rem;
    font-weight: 700;
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid #2dd4bf;
    outline-offset: 3px;
}

.activity-choice-card {
    position: relative;
    transform: translateY(0);
}

.activity-choice-card:has(input:checked) {
    border-color: #06b6d4;
    box-shadow: 0 12px 28px -16px rgb(8 145 178 / 70%);
    transform: translateY(-2px);
}

.activity-choice-card:has(input:focus-visible) {
    outline: 3px solid #22d3ee;
    outline-offset: 3px;
}

.activity-choice-indicator {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #0891b2;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.65);
    transition: opacity 160ms ease, transform 160ms ease;
}

.activity-choice-card:has(input:checked) .activity-choice-indicator {
    opacity: 1;
    transform: scale(1);
}

/* LIVE layout: derived from the approved LiveModel composition. */
.live-show-page {
    --game-background: #0f172a;
    --game-frame: #312e81;
    --game-screen: #111827;
    --game-accent: #22c55e;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--game-background);
    background-position: center;
    background-size: cover;
    color: #fff;
}

.live-show-shell {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.live-show-stage {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game-frame), transparent 55%);
}

.live-show-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--game-frame), white 24%);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--game-screen), transparent 28%);
    padding: 1rem;
    box-shadow: 0 18px 45px rgb(2 6 23 / 35%);
    backdrop-filter: blur(14px);
}

.live-show-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ef4444;
    padding: 0.35rem 1rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
    box-shadow: 0 0 18px rgb(239 68 68 / 65%);
    animation: live-show-pulse 2s infinite;
}

.live-show-badge i {
    width: 0.5rem;
    aspect-ratio: 1;
    margin-right: 0.5rem;
    border-radius: 999px;
    background: #fff;
}

.live-show-tool,
.live-show-action {
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 9%);
    padding: 0.7rem 0.9rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    transition: transform 160ms ease, background 160ms ease;
}

.live-show-tool:hover,
.live-show-action:hover {
    background: rgb(255 255 255 / 18%);
    transform: translateY(-2px);
}

.live-show-tool-danger { background: #dc2626; }

.live-show-timer {
    height: 0.5rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 999px;
    background: #1e293b;
}

.live-show-timer i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--game-accent);
    box-shadow: 0 0 12px currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 100ms linear, background 250ms ease;
}

.live-show-timer i[data-urgent="true"] { background: #ef4444; }

.live-show-content {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 64rem);
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.live-show-question-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.live-show-progress {
    color: color-mix(in srgb, var(--game-accent), white 30%);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.live-show-clock {
    border-radius: 1rem;
    background: rgb(2 6 23 / 72%);
    padding: 0.7rem 1.25rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}

.live-show-question {
    position: relative;
    margin: 2rem 0 3rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--game-screen), transparent 24%);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    color: #fff;
    font-size: clamp(1.8rem, 4.5vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    box-shadow: 0 24px 55px rgb(2 6 23 / 38%);
    backdrop-filter: blur(8px);
}

.live-show-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

.live-show-option {
    display: flex;
    min-height: 6.8rem;
    cursor: pointer;
    align-items: center;
    border: 4px solid;
    border-radius: 1rem;
    padding: 1.25rem;
    color: #fff;
    box-shadow: 0 12px 25px -8px rgb(0 0 0 / 55%);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.live-show-option:hover,
.live-show-option:has(input:focus-visible),
.live-show-option:has(input:checked) {
    filter: brightness(1.12);
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 14px 28px -8px rgb(0 0 0 / 60%), 0 0 18px currentColor;
}

.live-show-option-static {
    cursor: default;
    pointer-events: none;
}

.live-show-option-static:hover {
    filter: none;
    transform: none;
    box-shadow: 0 12px 25px -8px rgb(0 0 0 / 55%);
}

.live-show-option:has(input:checked) { outline: 4px solid #fff; }
.live-show-option-rose { border-color: #fb7185; background: #e11d48; }
.live-show-option-blue { border-color: #60a5fa; background: #2563eb; }
.live-show-option-amber { border-color: #facc15; background: #eab308; }
.live-show-option-emerald { border-color: #34d399; background: #059669; }

.live-show-option-letter {
    display: grid;
    width: 2.7rem;
    aspect-ratio: 1;
    flex: none;
    place-items: center;
    margin-right: 1rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 20%);
    font-size: 1.35rem;
    font-weight: 900;
}

.live-show-option-text { font-size: clamp(1.1rem, 2.3vw, 1.75rem); font-weight: 900; }

.live-show-submit,
.live-show-action {
    display: block;
    margin: 1.5rem auto 0;
    background: var(--game-accent);
    padding: 0.9rem 2rem;
    color: #fff;
    font-weight: 900;
}

.live-show-submit {
    width: min(100%, 22rem);
    border-radius: 1rem;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--game-accent), black 42%);
}

.live-show-sidebar {
    position: relative;
    z-index: 2;
    display: flex;
    width: 20rem;
    min-height: 100vh;
    flex: none;
    flex-direction: column;
    border-left: 1px solid color-mix(in srgb, var(--game-frame), white 15%);
    background: color-mix(in srgb, var(--game-screen), black 42%);
    backdrop-filter: blur(16px);
}

.live-show-sidebar > header {
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 5%);
    padding: 1rem;
}

.live-show-sidebar > header p { color: #34d399; font-size: 1.1rem; }
.live-show-sidebar > header span { display: block; margin-top: 0.3rem; color: #94a3b8; font-size: 0.75rem; }
.live-show-feed { display: grid; align-content: start; flex: 1; gap: 0.75rem; overflow-y: auto; padding: 1rem; }

.live-feed-answered,
.live-feed-waiting {
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 900;
    white-space: nowrap;
}

.live-feed-answered { background: rgb(16 185 129 / 22%); color: #6ee7b7; }
.live-feed-waiting { background: rgb(148 163 184 / 15%); color: #cbd5e1; }

.live-show-reaction-stream {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.live-show-reaction-controls {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 5%);
    padding: 1rem;
}

.live-show-reaction-controls button { font-size: 1.6rem; transition: transform 150ms ease; }
.live-show-reaction-controls button:hover { transform: scale(1.3); }
.live-show-reaction-stream .live-reaction-float { right: auto; bottom: -3rem; animation: live-show-float 3s ease-out forwards; }

.live-show-theme-cosmic .live-show-header,
.live-show-theme-cosmic .live-show-question { box-shadow: 0 0 30px rgb(168 85 247 / 28%); }
.live-show-theme-arcade .live-show-header,
.live-show-theme-arcade .live-show-question,
.live-show-theme-arcade .live-show-option,
.live-show-theme-arcade .live-show-tool { border-radius: 0.25rem; }

@keyframes live-show-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .72; transform: scale(1.04); }
}

@keyframes live-show-float {
    0% { opacity: 0; transform: translateY(0) scale(.5); }
    20% { opacity: 1; transform: translateY(-20vh) scale(1.2); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-90vh) rotate(20deg); }
}

@media (max-width: 900px) {
    .live-show-page { overflow: auto; }
    .live-show-shell { min-height: 100vh; flex-direction: column; overflow: visible; }
    .live-show-sidebar { width: 100%; min-height: 9rem; border-top: 1px solid rgb(255 255 255 / 10%); border-left: 0; }
    .live-show-feed { max-height: 14rem; }
    .live-show-header { grid-template-columns: 1fr auto; }
    .live-show-header > :nth-child(2) { display: none; }
}

@media (max-width: 640px) {
    .live-show-header { display: flex; flex-wrap: wrap; }
    .live-show-header > * { min-width: 0; }
    .live-show-options { grid-template-columns: 1fr; }
    .live-show-question { margin: 1.2rem 0 1.5rem; }
    .live-show-option { min-height: 5rem; }
    .live-show-tool { padding: 0.55rem 0.65rem; font-size: 0.68rem; }
    .live-show-stage { padding: 0.65rem; }
}

.gameshow-page {
    --game-background: #082f49;
    --game-frame: #22c55e;
    --game-screen: #1e3a8a;
    --game-accent: #db2777;
    min-height: 100vh;
    padding: clamp(0.5rem, 2vw, 1.5rem);
    background-color: var(--game-background);
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
}

.gameshow-machine {
    position: relative;
    isolation: isolate;
    width: min(100%, 90rem);
    min-height: calc(100vh - clamp(1rem, 4vw, 3rem));
    margin-inline: auto;
    padding: clamp(1.15rem, 3vw, 2.25rem);
    overflow: hidden;
    border: clamp(0.45rem, 1vw, 0.8rem) solid color-mix(in srgb, var(--game-frame), #020617 35%);
    border-radius: clamp(1.6rem, 4vw, 3.5rem);
    background: var(--game-frame);
    box-shadow: 0 28px 65px rgb(2 6 23 / 55%), inset 0 0 35px rgb(255 255 255 / 20%);
}

.gameshow-screen {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: calc(100vh - clamp(4rem, 10vw, 8rem));
    flex-direction: column;
    padding: clamp(1rem, 3vw, 2.5rem);
    border: clamp(0.35rem, 0.8vw, 0.6rem) solid var(--game-accent);
    border-radius: clamp(1rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--game-screen), white 12%) 0%, var(--game-screen) 62%, color-mix(in srgb, var(--game-screen), black 35%) 100%),
        repeating-conic-gradient(from 0deg, rgb(255 255 255 / 8%) 0deg 6deg, transparent 6deg 12deg);
    background-blend-mode: overlay;
    color: #fff;
    box-shadow: inset 0 0 45px rgb(2 6 23 / 55%);
}

.gameshow-lights {
    position: absolute;
    inset: 0.4rem;
    z-index: 2;
    pointer-events: none;
}

.gameshow-light {
    position: absolute;
    width: clamp(0.55rem, 1.2vw, 1rem);
    aspect-ratio: 1;
    border-radius: 999px;
    background: #fef08a;
    box-shadow: 0 0 10px #fff, 0 0 22px #fde047;
    animation: gameshow-light-pulse 900ms infinite alternate;
}

.gameshow-header,
.gameshow-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gameshow-header {
    color: #fff;
}

.gameshow-header > span {
    background: rgb(15 23 42 / 70%);
    color: #fff;
}

.gameshow-content {
    display: grid;
    flex: 1;
    align-content: center;
    padding-block: clamp(2rem, 5vw, 5rem);
}

.gameshow-progress {
    border-radius: 999px;
    background: rgb(15 23 42 / 72%);
    padding: 0.55rem 1rem;
    color: #fef08a;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gameshow-scoreboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    font-weight: 900;
}

.gameshow-question {
    margin-block: clamp(1.5rem, 4vw, 3.5rem);
    color: #fff;
    font-size: clamp(1.8rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    text-shadow: 3px 3px 0 #111827, 5px 5px 12px rgb(0 0 0 / 50%);
}

.gameshow-form {
    width: 100%;
}

.gameshow-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.6rem, 2vw, 1.25rem);
}

.gameshow-answer {
    display: flex;
    min-height: clamp(7rem, 17vw, 11rem);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: clamp(0.25rem, 0.6vw, 0.45rem) solid;
    border-radius: 1rem;
    background: #1e3a8a;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    box-shadow: 0 10px 0 rgb(15 23 42 / 55%);
    transition: transform 180ms ease, filter 180ms ease;
}

.gameshow-answer:hover,
.gameshow-answer:has(input:focus-visible) {
    filter: brightness(1.15);
    transform: translateY(-5px) scale(1.025);
}

.gameshow-answer:has(input:checked) {
    background: #0f766e;
    box-shadow: 0 0 0 5px rgb(255 255 255 / 75%), 0 10px 0 rgb(15 23 42 / 55%);
}

.gameshow-answer-0 { color: #fde047; }
.gameshow-answer-1 { color: #60a5fa; }
.gameshow-answer-2 { color: #34d399; }
.gameshow-answer-3 { color: #f87171; }

.gameshow-answer-letter {
    font-size: 1.2rem;
    font-weight: 900;
}

.gameshow-answer-text {
    color: #fff;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-shadow: 2px 2px 0 #111827;
}

.gameshow-submit {
    display: block;
    min-width: min(100%, 18rem);
    margin: 1.5rem auto 0;
    border-radius: 0.85rem;
    background: #e11d48;
    padding: 0.9rem 1.5rem;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 5px 0 #881337;
}

.gameshow-submit:hover {
    background: #f43f5e;
}

@keyframes gameshow-light-pulse {
    from { opacity: 0.55; transform: scale(0.75); }
    to { opacity: 1; transform: scale(1.2); }
}

@media (min-width: 768px) {
    .gameshow-options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .gameshow-light,
    .gameshow-answer {
        animation: none;
        transition: none;
    }
}

.word-search-page {
    background-color: var(--game-background, #0f766e);
    background-image: linear-gradient(rgb(15 23 42 / .18), rgb(15 23 42 / .18)), var(--word-search-image);
    background-position: center;
    background-size: cover;
}

.word-search-page > [data-word-search] {
    border-color: color-mix(in srgb, var(--game-frame, #10b981) 75%, white);
    background: color-mix(in srgb, var(--game-frame, #10b981) 16%, white 84%);
}

.word-search-scoreboard {
    position: sticky;
    top: .5rem;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(5rem, 1fr) auto minmax(5rem, 1fr);
    align-items: center;
    gap: .65rem;
    width: min(100%, 42rem);
    margin-inline: auto;
    border: 1px solid color-mix(in srgb, var(--game-frame, #10b981) 55%, transparent);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--game-screen, #fff) 92%, transparent);
    padding: .55rem .75rem;
    box-shadow: 0 14px 35px rgb(15 23 42 / 18%);
    backdrop-filter: blur(14px);
}

.word-search-stat,
.word-search-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-radius: 1rem;
    padding: .6rem .75rem;
    font-weight: 900;
    white-space: nowrap;
}

.word-search-stat-lives { justify-self: start; background: #ffe4e6; color: #9f1239; }
.word-search-stat-timer { justify-self: end; background: #cffafe; color: #155e75; }
.word-search-score {
    min-width: 8.5rem;
    background: var(--game-accent, #10b981);
    color: white;
    font-size: clamp(1.35rem, 4vw, 2rem);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--game-accent, #10b981) 38%, transparent);
}

.word-search-score small {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.word-search-score-bump { animation: word-search-score-bump 600ms cubic-bezier(.2, 1.4, .4, 1); }

.word-search-alert {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    pointer-events: none;
    background: rgb(15 23 42 / 20%);
    backdrop-filter: blur(2px);
    animation: word-search-alert-enter 220ms ease-out both;
}

.word-search-alert-card {
    display: flex;
    min-width: min(90vw, 20rem);
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    border: 3px solid rgb(255 255 255 / 65%);
    border-radius: 2rem;
    padding: 1.5rem 2rem;
    color: white;
    text-align: center;
    font-size: 1.25rem;
    box-shadow: 0 24px 70px rgb(15 23 42 / 38%);
}

.word-search-alert-correct { background: linear-gradient(135deg, #059669, #10b981); }
.word-search-alert-incorrect { background: linear-gradient(135deg, #be123c, #f43f5e); }
.word-search-alert-leave { animation: word-search-alert-leave 220ms ease-in both; }

.word-search-result-screen {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 1.5rem;
    background:
        linear-gradient(rgb(15 23 42 / 65%), rgb(15 23 42 / 78%)),
        var(--word-search-image) center / cover;
    text-align: center;
    animation: word-search-result-enter 420ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes word-search-score-bump {
    50% { transform: translateY(-.35rem) scale(1.12) rotate(-1deg); }
}

@keyframes word-search-alert-enter {
    from { opacity: 0; transform: scale(.86); }
}

@keyframes word-search-alert-leave {
    to { opacity: 0; transform: scale(1.08); }
}

@keyframes word-search-result-enter {
    from { opacity: 0; transform: translateY(1.5rem); }
}

@media (max-width: 480px) {
    .word-search-scoreboard { grid-template-columns: 1fr 1.35fr 1fr; gap: .3rem; padding: .4rem; }
    .word-search-stat, .word-search-score { min-width: 0; padding: .5rem .35rem; }
    .word-search-score small { display: none; }
}

.word-search-grid {
    display: grid;
    grid-template-columns: repeat(var(--word-search-size), minmax(0, 1fr));
    gap: clamp(.12rem, .55vw, .42rem);
    touch-action: none;
    user-select: none;
}

.word-search-cell {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--game-frame, #10b981) 45%, transparent);
    border-radius: clamp(.25rem, .65vw, .7rem);
    background: var(--game-screen, #fff);
    color: var(--game-background, #064e3b);
    font-size: clamp(.62rem, 2.4vw, 1.35rem);
    font-weight: 900;
    transition: transform 120ms ease, background-color 120ms ease, color 120ms ease;
}

.word-search-palette-midnight .word-search-cell { color: #f8fafc; }
.word-search-cell-preview {
    border-color: var(--game-accent, #10b981);
    background: color-mix(in srgb, var(--game-accent, #10b981) 28%, var(--game-screen, white));
    color: var(--game-background, #064e3b);
    transform: scale(.94);
}
.word-search-palette-midnight .word-search-cell-preview { color: #f8fafc; }
.word-search-cell-found { border-color: transparent; background: var(--game-accent, #10b981); color: white; }
.word-search-page.gameshow-font-serif { font-family: Georgia, Cambria, "Times New Roman", serif; }
.word-search-page.gameshow-font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.word-search-page.gameshow-theme-cosmic > [data-word-search] {
    border-radius: 4.5rem 1.5rem;
    box-shadow: inset 0 0 90px rgb(168 85 247 / 18%), 0 25px 70px rgb(2 6 23 / 45%);
}
.word-search-page.gameshow-theme-arcade > [data-word-search],
.word-search-page.gameshow-theme-arcade .word-search-cell,
.word-search-page.gameshow-theme-arcade aside,
.word-search-page.gameshow-theme-arcade [data-ws-grid] { border-radius: .35rem; }
.word-search-page.gameshow-theme-arcade > [data-word-search] {
    background-image: linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
}

[data-preview-sound][aria-pressed="true"] {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: grid;
    place-items: center;
    background: rgb(15 23 42 / 72%);
    backdrop-filter: blur(4px);
}

.app-loader[hidden] {
    display: none;
}

.app-loader__spinner {
    width: 3rem;
    height: 3rem;
    border: 4px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    border-radius: 999px;
    animation: app-spin 700ms linear infinite;
}

.app-dialog {
    width: min(92vw, 32rem);
    max-width: none;
    overflow: visible;
    border: 0;
    border-radius: 1.75rem;
    background: transparent;
    padding: 0;
    color: #0f172a;
}

.app-dialog::backdrop {
    background: rgb(15 23 42 / 65%);
    backdrop-filter: blur(5px);
}

.app-dialog__panel {
    border: 1px solid #e2e8f0;
    border-radius: 1.75rem;
    background: #fff;
    padding: clamp(1.25rem, 4vw, 2rem);
    box-shadow: 0 30px 80px -30px rgb(15 23 42 / 75%);
}

.app-dialog__heading {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-dialog__icon {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 1rem;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 1.5rem;
    font-weight: 950;
}

.app-dialog--success .app-dialog__icon { background: #dcfce7; color: #15803d; }
.app-dialog--error .app-dialog__icon { background: #fee2e2; color: #b91c1c; }
.app-dialog--warning .app-dialog__icon { background: #fef3c7; color: #b45309; }

.app-dialog__eyebrow {
    color: #64748b;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.app-dialog__title {
    margin-top: .2rem;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    font-weight: 950;
    line-height: 1.15;
}

.app-dialog__message {
    margin-top: 1.25rem;
    color: #475569;
    line-height: 1.65;
    white-space: pre-line;
}

.app-dialog__field {
    margin-top: 1.25rem;
    color: #334155;
    font-size: .85rem;
    font-weight: 850;
}

.app-dialog__input {
    width: 100%;
    margin-top: .5rem;
    border: 1px solid #cbd5e1;
    border-radius: .9rem;
    background: #fff;
    padding: .8rem 1rem;
    color: #0f172a;
    outline: none;
}

.app-dialog__input:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgb(20 184 166 / 18%); }
.app-dialog__field-error { display: block; margin-top: .45rem; color: #b91c1c; }
.app-dialog__field-error[hidden] { display: none; }

.app-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.75rem;
}

.app-dialog__button {
    border: 0;
    border-radius: .9rem;
    padding: .75rem 1.1rem;
    font-weight: 900;
}

.app-dialog__button--secondary { background: #f1f5f9; color: #334155; }
.app-dialog__button--primary { background: #0d9488; color: #fff; }
.app-dialog--error .app-dialog__button--primary { background: #dc2626; }
.app-dialog--warning .app-dialog__button--primary { background: #d97706; }

@media (max-width: 480px) {
    .app-dialog__actions { align-items: stretch; flex-direction: column-reverse; }
    .app-dialog__button { width: 100%; }
}

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

.live-question-enter {
    animation: live-rise 420ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes gameshow-card-shuffle {
    0% { opacity: 0; transform: translateX(-2rem) rotate(-8deg); }
    65% { opacity: 1; transform: translateX(.4rem) rotate(3deg); }
    100% { transform: translateX(0) rotate(0); }
}

@keyframes gameshow-card-reveal {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(90deg) scale(1.08); }
    100% { transform: rotateY(0) scale(1.04); }
}

@keyframes gameshow-transition-out {
    to { opacity: 0; transform: translateY(-1rem) scale(.98); }
}

.gameshow-card {
    animation: gameshow-card-shuffle .65s both cubic-bezier(.2,.8,.2,1);
    transform-style: preserve-3d;
}

.gameshow-card-reveal {
    animation: gameshow-card-reveal .8s both;
}

.gameshow-transition-out {
    animation: gameshow-transition-out .32s both ease-in;
}

.gameshow-font-rounded {
    font-family: ui-rounded, "Nunito", system-ui, sans-serif;
}

.gameshow-theme-cosmic .gameshow-machine {
    border-radius: 5rem 2rem;
    background-image: radial-gradient(circle at 20% 15%, rgb(255 255 255 / 35%) 0 2px, transparent 3px);
    background-size: 2rem 2rem;
}

.gameshow-theme-cosmic .gameshow-screen {
    border-radius: 4rem 1.25rem;
    box-shadow: inset 0 0 70px rgb(168 85 247 / 35%);
}

.gameshow-theme-arcade .gameshow-machine,
.gameshow-theme-arcade .gameshow-screen,
.gameshow-theme-arcade [data-player-content],
.gameshow-theme-arcade button {
    border-radius: 0.35rem;
}

.gameshow-theme-arcade .gameshow-machine {
    box-shadow: 12px 12px 0 rgb(2 6 23 / 72%);
}

.gameshow-theme-arcade .gameshow-screen {
    background-image:
        linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
    background-color: var(--game-screen);
    background-size: 1.5rem 1.5rem;
}

.live-reaction-controls {
    position: sticky;
    z-index: 10;
    bottom: 1rem;
    display: flex;
    width: fit-content;
    margin: 1rem auto 0;
    gap: 0.5rem;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 999px;
    background: rgb(2 6 23 / 78%);
    padding: 0.45rem;
    backdrop-filter: blur(12px);
}

.live-reaction-controls button {
    display: grid;
    width: 2.8rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 999px;
    font-size: 1.35rem;
    transition: transform 150ms ease, background 150ms ease;
}

.live-reaction-controls button:hover,
.live-reaction-controls button:focus-visible {
    background: rgb(255 255 255 / 16%);
    transform: translateY(-0.25rem) scale(1.12);
}

.live-reaction-stream {
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: 1rem;
    z-index: 20;
    pointer-events: none;
}

.live-reaction-float {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    border-radius: 999px;
    background: rgb(2 6 23 / 78%);
    padding: 0.45rem 0.75rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    animation: live-reaction-rise 2.8s ease-out forwards;
}

.live-reaction-float strong {
    font-size: 1.65rem;
}

@keyframes live-reaction-rise {
    0% { opacity: 0; transform: translateY(0) scale(.7); }
    15% { opacity: 1; transform: translateY(-1rem) scale(1); }
    100% { opacity: 0; transform: translateY(-12rem) translateX(-2rem) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .gameshow-card,
    .gameshow-card-reveal {
        animation: none;
    }

    .gameshow-transition-out {
        animation: none;
    }
}

.live-option-enter {
    animation: live-rise 360ms cubic-bezier(.2, .8, .2, 1) both;
}

.live-countdown-pop,
.live-points-pop {
    animation: live-pop 650ms cubic-bezier(.2, 1.5, .4, 1) both;
}

.live-winner-bounce {
    animation: live-bounce 900ms ease-in-out infinite alternate;
}

.live-podium-entry {
    animation: live-rise 700ms cubic-bezier(.2, .8, .2, 1) both;
}

.live-confetti {
    position: fixed;
    top: -1.5rem;
    z-index: 100001;
    width: 0.7rem;
    height: 1.1rem;
    border-radius: 0.2rem;
    pointer-events: none;
    animation: live-confetti-fall 3s linear forwards;
}

@keyframes live-rise {
    from { transform: translateY(1.5rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes live-pop {
    from { transform: scale(0.35); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes live-bounce {
    from { transform: translateY(0) rotate(-4deg); }
    to { transform: translateY(-0.8rem) rotate(4deg); }
}

@keyframes live-confetti-fall {
    to { transform: translate3d(2rem, 110vh, 0) rotate(720deg); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.team-relay-option.is-correct{outline:6px solid #22c55e;outline-offset:4px;filter:brightness(1.08)}
.team-relay-player-clock{position:fixed;top:12rem;z-index:3;display:grid;width:4.5rem;height:4.5rem;place-items:center;border:5px solid var(--game-accent,#7c3aed);border-radius:999px;background:#fff;font-size:1.7rem;font-weight:950;box-shadow:0 8px 22px rgba(15,23,42,.14)}
.team-relay-team-card.is-selectable{cursor:pointer}.team-relay-team-card.is-selectable:hover,.team-relay-team-card.is-selectable:focus-visible{transform:translateY(-3px);outline:5px solid color-mix(in srgb,var(--team-color),transparent 70%);outline-offset:3px}.team-relay-award{display:flex;width:100%;gap:.35rem}.team-relay-award-input{min-width:0;width:4rem;border:1px solid #cbd5e1;border-radius:.65rem;background:#fff;padding:.4rem;text-align:center;font-weight:900}.team-relay-award-button{flex:1;border:0;border-radius:.65rem;background:var(--team-color);padding:.4rem;color:#fff;font-size:.7rem;font-weight:900}

/* Team Relay -------------------------------------------------------------- */
.team-relay-page{min-height:100vh;background:linear-gradient(135deg,#eef2ff,#fff7ed 48%,#fdf2f8);color:#172033;font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif}.team-relay-shell{min-height:100vh;display:flex;flex-direction:column}.team-relay-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid #dbe4f0;background:rgba(255,255,255,.92);box-shadow:0 8px 30px rgba(30,41,59,.08)}.team-relay-live-dot{display:inline-block;width:.7rem;height:.7rem;margin-right:.55rem;border-radius:999px;background:#ef4444;box-shadow:0 0 0 5px #fee2e2;animation:team-relay-pulse 1.5s infinite}.team-relay-professor{display:flex;align-items:center;gap:.8rem;border:2px solid #c4b5fd;border-radius:1rem;background:#f5f3ff;padding:.55rem 1rem}.team-relay-professor span{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#6d28d9}.team-relay-professor strong{font-size:1.6rem;color:#5b21b6}.team-relay-tools{display:flex;justify-content:flex-end;align-items:center;gap:.55rem;flex-wrap:wrap}.team-relay-tools button,.team-relay-player-header button{border:1px solid #cbd5e1;border-radius:.75rem;background:#fff;padding:.55rem .8rem;font-weight:800}.team-relay-board{display:grid;grid-template-columns:minmax(11rem,1fr) minmax(20rem,2.2fr) minmax(11rem,1fr);gap:1rem;flex:1;padding:1rem}.team-relay-team-column{display:grid;align-content:center;gap:1rem}.team-relay-team-card{position:relative;display:grid;place-items:center;min-height:11rem;border:3px solid var(--team-color);border-radius:1.5rem;background:#fff;padding:1rem;box-shadow:0 10px 0 color-mix(in srgb,var(--team-color),transparent 75%);transition:.25s}.team-relay-team-card.is-active{transform:scale(1.04);box-shadow:0 0 0 7px color-mix(in srgb,var(--team-color),transparent 78%),0 16px 28px rgba(15,23,42,.14);animation:team-relay-active 1.1s infinite alternate}.team-relay-team-blue{--team-color:#2563eb}.team-relay-team-green{--team-color:#16a34a}.team-relay-team-amber{--team-color:#d97706}.team-relay-team-rose{--team-color:#e11d48}.team-relay-team-name{width:100%;border:0;background:transparent;text-align:center;font-size:clamp(1rem,2vw,1.35rem);font-weight:900;color:#172033}.team-relay-team-name:not([readonly]){border-bottom:2px dashed var(--team-color);outline:none}.team-relay-team-score{font-size:clamp(2.4rem,6vw,4.5rem);line-height:1;color:var(--team-color)}.team-relay-team-status{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.team-relay-stage{display:flex;min-height:0;flex-direction:column;border:1px solid #dbe4f0;border-radius:2rem;background:rgba(255,255,255,.88);box-shadow:0 20px 50px rgba(30,41,59,.12);overflow:hidden}.team-relay-round-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem;border-bottom:1px solid #e2e8f0;font-weight:900}.team-relay-round-meta strong{border-radius:999px;background:#ede9fe;padding:.4rem .8rem;color:#6d28d9}.team-relay-round-meta time{display:grid;place-items:center;width:3.5rem;height:3.5rem;border:4px solid #8b5cf6;border-radius:50%;font-size:1.35rem}.team-relay-main{display:grid;place-items:center;flex:1;min-height:25rem;padding:clamp(1rem,4vw,3rem)}.team-relay-message,.team-relay-result{text-align:center}.team-relay-message h1,.team-relay-result h1{font-size:clamp(2rem,5vw,4rem);font-weight:950}.team-relay-big-countdown{display:block;margin-top:1rem;font-size:clamp(5rem,16vw,11rem);line-height:1;color:#7c3aed}.team-relay-question{width:100%;text-align:center}.team-relay-question h1{font-size:clamp(1.5rem,4vw,3.5rem);font-weight:950;line-height:1.12}.team-relay-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem}.team-relay-option{min-height:5.2rem;border:0;border-radius:1.2rem;padding:1rem;color:#fff;font-size:clamp(1rem,2.4vw,1.45rem);font-weight:900;box-shadow:0 6px 0 rgba(15,23,42,.18);transition:.15s}.team-relay-option:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.06)}.team-relay-option:disabled{opacity:.72;cursor:not-allowed}.team-relay-option.option-0{background:#2563eb}.team-relay-option.option-1{background:#dc2626}.team-relay-option.option-2{background:#d97706}.team-relay-option.option-3{background:#16a34a}.team-relay-primary,.team-relay-pass{margin-top:1.5rem;border:0;border-radius:1rem;padding:.9rem 1.4rem;font-weight:900;color:#fff;background:#7c3aed;box-shadow:0 5px 0 #5b21b6}.team-relay-pass{margin-left:.7rem;background:#475569;box-shadow:0 5px 0 #1e293b}.team-relay-resolving,.team-relay-reveal{margin-top:1.2rem;border-radius:1rem;background:#fef3c7;padding:1rem;font-weight:900;color:#92400e}.team-relay-result p{margin-top:.65rem;border-radius:1rem;background:#fff;padding:1rem;font-size:1.2rem;font-weight:900;box-shadow:0 5px 18px rgba(15,23,42,.08)}.team-relay-player-shell{min-height:100vh;display:flex;flex-direction:column}.team-relay-player-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem;background:#fff;border-bottom:1px solid #e2e8f0}.team-relay-player-main{display:grid;place-items:center;flex:1;padding:1rem}.team-relay-player-main>.team-relay-question,.team-relay-player-main>.team-relay-result{max-width:60rem}.team-relay-player-score{position:fixed;top:5rem;left:50%;z-index:2;transform:translateX(-50%);border:2px solid var(--team-color);border-radius:999px;background:#fff;padding:.6rem 1.1rem;font-weight:900;color:var(--team-color);box-shadow:0 8px 20px rgba(15,23,42,.12)}.team-relay-player-message{font-size:clamp(2rem,8vw,5rem);text-align:center;font-weight:950}.team-relay-player-turn{position:fixed;top:9rem;border-radius:999px;background:#fff;padding:.6rem 1rem;font-weight:900;box-shadow:0 7px 18px rgba(15,23,42,.1)}@keyframes team-relay-pulse{50%{box-shadow:0 0 0 10px transparent}}@keyframes team-relay-active{to{transform:scale(1.07) rotate(-.4deg)}}@media(max-width:900px){.team-relay-topbar{grid-template-columns:1fr auto}.team-relay-professor{order:3;grid-column:1/-1;justify-self:center}.team-relay-board{grid-template-columns:1fr}.team-relay-team-column{grid-template-columns:repeat(2,minmax(0,1fr));order:2}.team-relay-stage{order:1}.team-relay-team-card{min-height:7.5rem}.team-relay-team-score{font-size:2.6rem}}@media(max-width:560px){.team-relay-topbar{grid-template-columns:1fr}.team-relay-tools{justify-content:flex-start}.team-relay-professor{grid-column:auto;justify-self:stretch;justify-content:center}.team-relay-board{padding:.5rem}.team-relay-team-column{gap:.5rem}.team-relay-team-card{min-height:6.5rem;border-radius:1rem;padding:.6rem}.team-relay-team-status{display:none}.team-relay-options{grid-template-columns:1fr;gap:.7rem}.team-relay-option{min-height:4rem}.team-relay-main{min-height:22rem;padding:1rem}.team-relay-player-turn{top:8.5rem;max-width:90%;text-align:center}}