:root {
    color-scheme: dark;
    --wth-blue: #14212b;
    --wth-blue-deep: #0a1218;
    --wth-gold: #1ce783;
    --wth-cream: #ecfff7;
    --wth-slate: #1a2a35;
    --wth-silver: #97b3c6;
    --wth-card: rgba(17, 30, 39, 0.86);
    --wth-shadow: rgba(0, 0, 0, 0.3);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Space Grotesk", "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #1b2f3b 0%, #0a1016 68%);
    color: #e6f4ff;
    min-height: 100%;
}

a {
    color: inherit;
}

.app-shell {
    padding: 0rem 2rem 4rem;
}

.wth-app {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wth-buzz-highlight {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
    pointer-events: none;
    animation: buzz-pop 240ms ease-out;
}

.wth-buzz-highlight-card {
    min-width: 360px;
    max-width: min(92vw, 620px);
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(140deg, rgba(28, 231, 131, 0.95), rgba(110, 255, 179, 0.94));
    border: 2px solid rgba(10, 22, 15, 0.45);
    color: #082014;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
    display: grid;
    gap: 0.35rem;
}

.wth-buzz-highlight .buzz-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.92rem;
    font-weight: 800;
    opacity: 0.78;
}

.wth-buzz-highlight .buzz-name {
    font-size: clamp(1.35rem, 4.5vw, 2.3rem);
    line-height: 1.2;
}

@keyframes buzz-pop {
    from {
        transform: translate(-50%, calc(-50% - 10px)) scale(0.96);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.wth-header {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ── Illustrated landscape header (teal sky, peach moon, green hills, flowers) ── */
.wth-header-cosmic {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.cosmic-bg {
    position: absolute;
    inset: 0;
    /* teal sky gradient matching the illustration */
    background: linear-gradient(180deg, #1a8a7d 0%, #3cb8a0 30%, #5ccdb5 55%, #78d9bf 75%, #2d8a6e 100%);
    overflow: hidden;
}

/* large peach/salmon moon */
.cosmic-stars {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 42%,
        #f5d5a0 0%,
        #f0c48a 35%,
        #e8b07a 60%,
        rgba(220,170,120,0.4) 85%,
        transparent 100%);
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    animation: moon-glow 8s ease-in-out infinite alternate;
}

@keyframes moon-glow {
    0%   { filter: brightness(1) drop-shadow(0 0 30px rgba(240,200,140,0.3)); }
    100% { filter: brightness(1.08) drop-shadow(0 0 50px rgba(240,200,140,0.45)); }
}

/* geometric clouds */
.cosmic-nebula {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cosmic-nebula::before {
    content: '';
    position: absolute;
    /* left cloud cluster */
    width: 100px; height: 40px;
    background: rgba(200, 230, 220, 0.6);
    border-radius: 8px;
    top: 22%;
    left: 8%;
    transform: rotate(-3deg);
    box-shadow:
        30px -10px 0 10px rgba(210, 240, 230, 0.5),
        -15px 5px 0 5px rgba(190, 225, 215, 0.4);
}

.cosmic-nebula::after {
    content: '';
    position: absolute;
    /* right cloud cluster */
    width: 80px; height: 35px;
    background: rgba(210, 240, 230, 0.5);
    border-radius: 8px;
    top: 18%;
    right: 12%;
    transform: rotate(2deg);
    box-shadow:
        -20px 8px 0 8px rgba(200, 230, 222, 0.4),
        25px -5px 0 6px rgba(220, 245, 235, 0.45);
}

/* rolling green hills */
.cosmic-flowers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* dark mountain silhouettes */
.cosmic-flowers::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 45%;
    height: 65%;
    background: linear-gradient(160deg, #1a4a3a 0%, #153d30 100%);
    clip-path: polygon(0% 100%, 15% 30%, 35% 50%, 55% 20%, 80% 45%, 100% 35%, 100% 100%);
}

.cosmic-flowers::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -5%;
    width: 50%;
    height: 55%;
    background: linear-gradient(200deg, #1d5040 0%, #174435 100%);
    clip-path: polygon(0% 50%, 20% 25%, 45% 40%, 70% 15%, 100% 30%, 100% 100%, 0% 100%);
}

/* foreground green hill */
.cosmic-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(180deg, #2d8a5e 0%, #256e4a 40%, #1e5c3c 100%);
    clip-path: ellipse(75% 100% at 50% 100%);
    z-index: 1;
}

/* individual geometric flowers on the hillside */
.flower {
    position: absolute;
    z-index: 2;
    animation: sway 5s ease-in-out infinite alternate;
}

/* flower shapes using clip-path for geometric/low-poly look */
.flower::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

/* stems */
.flower::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: #1a5a3a;
    border-radius: 1px;
}

/* coral/red flowers */
.f1  { width: 14px; height: 14px; background: #e05540; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); bottom: 18%; left: 6%;  animation-delay: 0s; }
.f2  { width: 10px; height: 10px; background: #d94830; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); bottom: 22%; left: 14%; animation-delay: 0.5s; }
.f3  { width: 16px; height: 16px; background: #e8624e; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); bottom: 14%; left: 24%; animation-delay: 1.2s; }
.f4  { width: 12px; height: 12px; background: #cc4466; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); bottom: 20%; left: 35%; animation-delay: 0.3s; }
.f5  { width: 18px; height: 18px; background: #e05050; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); bottom: 12%; left: 46%; animation-delay: 1.8s; }
/* pink/magenta flowers */
.f6  { width: 12px; height: 12px; background: #d060a0; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); bottom: 16%; left: 56%; animation-delay: 0.8s; }
.f7  { width: 10px; height: 10px; background: #e87090; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); bottom: 20%; left: 65%; animation-delay: 1.5s; }
/* teal/blue flowers */
.f8  { width: 14px; height: 14px; background: #40b0a0; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); bottom: 15%; left: 74%; animation-delay: 0.6s; }
.f9  { width: 10px; height: 10px; background: #50c0b0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); bottom: 22%; left: 82%; animation-delay: 2s; }
/* orange accent flowers */
.f10 { width: 12px; height: 12px; background: #e07838; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); bottom: 24%; left: 20%; animation-delay: 1s; }
.f11 { width: 8px;  height: 8px;  background: #d06048; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); bottom: 18%; left: 88%; animation-delay: 1.4s; }
.f12 { width: 14px; height: 14px; background: #cc5060; clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); bottom: 10%; left: 40%; animation-delay: 0.2s; }

.flower::before, .flower::after { display: none; } /* clean up pseudo-elements */

@keyframes sway {
    0%   { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-4px) rotate(4deg); }
}

/* content overlay */
.cosmic-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1.5rem;
    padding: 0 2rem;
}

.cosmic-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    font-weight: 800;
    margin: 0;
    color: #fff;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.35),
        0 0 60px rgba(240, 200, 140, 0.25);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.wth-header-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.wth-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-size: 0.8rem;
    color: var(--wth-gold);
    margin: 0 0 0.5rem;
}

.wth-title {
    font-size: 3rem;
    margin: 0;
}

.wth-logo {
    width: min(52vw, 560px);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}

.wth-subtitle {
    margin: 0.6rem 0 0;
    color: var(--wth-silver);
    text-align: center;
}

.wth-controls {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0;
    flex-wrap: wrap;
}

.wth-scoreboard {
    background: var(--wth-card);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 20px 40px var(--wth-shadow);
}

.wth-scoreboard h2 {
    margin-top: 0;
}

.wth-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.wth-team-card {
    background: linear-gradient(160deg, #213847 0%, #10202a 90%);
    border-radius: 16px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.team-name {
    font-weight: 600;
}

.team-score {
    font-size: 1.6rem;
    color: var(--wth-gold);
}

.wth-panel {
    background: var(--wth-card);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px var(--wth-shadow);
}

.wth-panel h2 {
    margin-top: 0;
}

.muted {
    color: var(--wth-silver);
}

.wth-team-editor {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.wth-team-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.wth-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    color: #fff;
    font-size: 1rem;
}

.wth-input:focus {
    outline: 2px solid rgba(28, 231, 131, 0.8);
}

.wth-input.small {
    flex: 0 0 auto;
    width: 110px;
}

.wth-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.wth-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
}

.wth-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.wth-button {
    background: var(--wth-gold);
    color: #0b1811;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wth-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(28, 231, 131, 0.35);
}

.wth-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wth-button.ghost {
    background: transparent;
    color: var(--wth-gold);
    border: 1px solid rgba(28, 231, 131, 0.5);
}

.wth-button.small {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

.wth-board {
    background: var(--wth-card);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 20px 40px var(--wth-shadow);
    overflow-x: auto;
}

.wth-board-grid {
    display: grid;
    gap: 0.75rem;
}

.wth-category {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wth-category-title {
    background: var(--wth-blue);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    font-weight: 700;
    color: var(--wth-cream);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wth-tile {
    background: linear-gradient(180deg, #223947 0%, #121f28 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.2rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wth-gold);
    cursor: pointer;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wth-tile:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}

.wth-tile-used {
    font-size: 1.1rem;
}

.wth-question h2 {
    margin: 1rem 0 0;
    font-size: 2rem;
    background: rgba(28, 231, 131, 0.12);
    border: 1px solid rgba(28, 231, 131, 0.35);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

.wth-question-text {
    white-space: pre-wrap;
    tab-size: 4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wth-answer-text {
    white-space: pre-wrap;
    tab-size: 4;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

.wth-question-header {
    display: flex;
    gap: 0.6rem;
}

.wth-badge {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 600;
}

.wth-badge.daily-double {
    background: rgba(28, 231, 131, 0.22);
    color: var(--wth-gold);
}

.wth-badge.timer {
    background: rgba(255, 255, 255, 0.2);
}

.wth-daily-double {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.wth-buzzer {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.wth-buzzer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.wth-answer {
    background: rgba(28, 231, 131, 0.12);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    margin-top: 1.5rem;
    font-size: 2rem;
}

.wth-answer h3 {
    margin-top: 0;
    color: var(--wth-gold);
}

.wth-score-actions {
    .wth-answer p {
        white-space: pre-wrap;
    }

    margin-top: 1.5rem;
}

.wth-quick-score {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.wth-team-score-grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.wth-team-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.wth-team-score-buttons {
    display: flex;
    gap: 0.5rem;
}

.wth-winner {
    text-align: center;
}

.wth-winner-top {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.wth-podium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 0;
}

.wth-winner-video-panel {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28);
}

.wth-winner-video {
    width: 100%;
    height: 100%;
    min-height: 220px;
    display: block;
    object-fit: cover;
}

.wth-podium-card {
    border-radius: 16px;
    padding: 1rem;
    display: grid;
    gap: 0.3rem;
    justify-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.wth-podium-card .podium-medal {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wth-podium-card .podium-rank {
    font-size: 1.4rem;
    font-weight: 700;
}

.wth-podium-card .podium-name {
    font-size: 1.1rem;
    font-weight: 600;
}

.wth-podium-card .podium-score {
    font-size: 1rem;
    color: var(--wth-silver);
}

.wth-podium-card.podium-gold {
    background: linear-gradient(160deg, rgba(28, 231, 131, 0.24) 0%, rgba(16, 32, 42, 0.92) 100%);
    border-color: rgba(28, 231, 131, 0.58);
}

.wth-podium-card.podium-gold .podium-medal {
    color: #7dffc3;
}

.wth-podium-card.podium-silver {
    background: linear-gradient(160deg, rgba(199, 205, 224, 0.22) 0%, rgba(12, 29, 102, 0.9) 100%);
    border-color: rgba(199, 205, 224, 0.5);
}

.wth-podium-card.podium-silver .podium-medal {
    color: #e9edf7;
}

.wth-podium-card.podium-bronze {
    background: linear-gradient(160deg, rgba(184, 115, 51, 0.25) 0%, rgba(12, 29, 102, 0.9) 100%);
    border-color: rgba(184, 115, 51, 0.48);
}

.wth-podium-card.podium-bronze .podium-medal {
    color: #e7b490;
}

.wth-lower-ranks {
    margin-top: 1.5rem;
    text-align: left;
}

.wth-lower-ranks h3 {
    margin: 0 0 0.75rem;
    color: var(--wth-silver);
}

.wth-rank-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.wth-rank-table th,
.wth-rank-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wth-rank-table th {
    text-align: left;
    color: var(--wth-gold);
    font-weight: 700;
}

.wth-rank-table tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 900px) {
    .wth-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .wth-logo {
        width: min(100%, 480px);
    }

    .wth-controls {
        justify-content: flex-start;
    }

    .wth-winner-top {
        grid-template-columns: 1fr;
    }

    .wth-winner-video {
        min-height: 200px;
    }

    .wth-buzz-highlight {
        width: min(92vw, 620px);
    }

    .wth-buzz-highlight-card {
        min-width: 0;
        width: 100%;
        padding: 1.05rem 1.2rem;
    }

    .wth-board-grid {
        grid-template-columns: repeat(5, minmax(140px, 1fr));
    }
}