:root {
    --bg-dark: #0f111a;
    --primary: #6366f1;
    --accent: #ec4899;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --success: #10b981;
    --danger: #ef4444;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    /* Not `center`. A centred flex item taller than the viewport overflows off the top as well as
       the bottom, and there is no way to scroll up to reach it — at 380px both the landing card and
       the setup form are taller than the screen, so their headings were being cut off. Aligning to
       the start costs the vertical centring on short pages and keeps the whole page reachable. */
    align-items: flex-start;
}

/* Background Effects */
.background-globes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.globe {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.globe-1 {
    width: 400px;
    height: 400px;
    background: var(--primary);
    top: -100px;
    left: -100px;
    animation: float 10s infinite ease-in-out;
}

.globe-2 {
    width: 500px;
    height: 500px;
    background: var(--accent);
    bottom: -100px;
    right: -100px;
    animation: float 12s infinite ease-in-out reverse;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 50px);
    }
}

/* Container */
.container {
    width: 90%;
    max-width: 1000px;
    margin: 2rem auto;
    position: relative;
    z-index: 10;
}

/* Header */
header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    position: relative;
    z-index: 10;
}

/* Link back to the hub. Every other application on the site has one; this one was a dead end. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--text-main);
    border-color: var(--primary);
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.highlight {
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.game-stats {
    display: flex;
    gap: 2rem;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
}

.timer-display {
    color: var(--primary);
    font-family: 'Courier New', Courier, monospace;
    /* Digital look */
    font-size: 2.2rem;
    font-weight: 700;
    border: 2px solid var(--primary);
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
}

.timer-display.low-time {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    animation: urgentPulse 0.8s infinite;
}

@keyframes urgentPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.round-display {
    color: #e5e7eb;
}

.score-display {
    color: var(--accent);
}

.highlight {
    color: var(--primary);
}

.score-display {
    font-size: 1.2rem;
    font-weight: 600;
    background: var(--glass-bg);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
}

/* Sections */
section {
    display: none;
    animation: fadeIn 0.5s ease-out;
}

section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cards & Glassmorphism */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    font-weight: 300;
}

.rules-box {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 3rem;
    text-align: left;
}

.rules-box h3 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.rules-box ul {
    list-style: none;
}

.rules-box li {
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

/* Buttons */
.btn-primary,
.btn-secondary {
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Inputs */
.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-muted);
}

textarea,
input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1rem;
    color: white;
    font-size: 1rem;
    transition: border-color 0.3s;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

textarea:focus,
input:focus {
    border-color: var(--primary);
    outline: none;
}

/* Gameplay View */
.game-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

.analysis-card {
    padding: 2rem;
}

.content-area {
    margin-top: 1.5rem;
    text-align: left;
    line-height: 1.8;
    font-size: 1.1rem;
    color: #e5e7eb;
}

/* Interactive Text Segments */
.sentence {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.sentence:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sentence.selected {
    background: rgba(236, 72, 153, 0.4);
    /* Accent color transparent */
    border-bottom: 2px solid var(--accent);
}

.sentence.correct-reveal {
    background: rgba(16, 185, 129, 0.4);
    border-bottom: 2px solid var(--success);
}

.sentence.correct-reveal {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #10b981;
    font-weight: bold;
    border-radius: 4px;
    padding: 2px 4px;
}

.sentence.wrong-reveal {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    text-decoration: line-through;
    color: #ef4444;
    border-radius: 4px;
    padding: 2px 4px;
}

.sentence.missed-reveal {
    border: 2px dashed #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    color: #fca5a5;
    border-radius: 4px;
    padding: 2px 4px;
}

/* Controls Card */
.controls-card {
    text-align: center;
    padding: 2rem;
}

.stat-box {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-box .value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
}

/* Results View */
.score-circle {
    width: 150px;
    height: 150px;
    background: conic-gradient(var(--success) 85%, transparent 0);
    border-radius: 50%;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    background: var(--bg-dark);
    border-radius: 50%;
}

.score-circle span {
    position: relative;
    z-index: 2;
}

.score-circle #final-score {
    font-size: 3rem;
    font-weight: 700;
}

.review-box {
    text-align: left;
    margin: 2rem 0;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 1rem;
}

.review-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 4px solid var(--accent);
}

.review-item h4 {
    margin-bottom: 0.5rem;
    color: var(--accent);
}

.review-item p {
    font-size: 0.9rem;
    color: #d1d5db;
}

/* Utilities */
.hidden {
    display: none !important;
}

.loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Setup Grid */
.setup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.round-input-box {
    display: flex;
    flex-direction: column;
}

/* Responsive */
@media (max-width: 768px) {
    .setup-grid {
        grid-template-columns: 1fr;
    }

    .game-container {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2.5rem;
    }
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    max-width: 600px;
    width: 90%;
    text-align: center;
    max-height: 80vh;
    overflow-y: auto;
}

/* Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: left;
    margin-top: 2rem;
    align-items: start;
}

.annotated-text {
    padding: 1.5rem;
    max-height: 500px;
    overflow-y: auto;
    font-size: 0.95rem;
}

.review-panel {
    display: flex;
    flex-direction: column;
}

/* Responsive Grid */
@media (max-width: 900px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

/* Any table too wide for the viewport scrolls inside this box instead of widening the page. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Leaderboard Table */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    color: #e5e7eb;
}

/* A long team name wraps rather than stretching the table off the screen. */
.leaderboard-table td:nth-child(2) {
    overflow-wrap: anywhere;
    min-width: 8rem;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
}

.leaderboard-table th {
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.leaderboard-table tr:last-child td {
    border-bottom: none;
}

.leaderboard-table tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}
/* ── Phone widths ──────────────────────────────────────────────────────────
   Checked at 380px. The existing 768px breakpoint unstacks the grids but leaves the 3.5rem
   headline, the 3rem card padding and the 2.2rem timer, and at that width the headline alone
   ran off the side of the card. These are the pieces that actually broke. */
@media (max-width: 480px) {
    .container {
        width: 100%;
        padding: 0 1rem;
        margin: 1rem auto;
    }

    header {
        padding: 1rem 0;
    }

    .glass-panel {
        padding: 1.5rem;
        border-radius: 16px;
    }

    h1 {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1.05rem;
        margin-bottom: 2rem;
    }

    .rules-box {
        padding: 1rem;
        margin-bottom: 2rem;
    }

    /* Round, timer and score share one row of their own instead of squeezing beside the logo. */
    .game-stats {
        width: 100%;
        gap: 0.75rem;
        justify-content: space-between;
        font-size: 1rem;
    }

    .timer-display {
        font-size: 1.5rem;
        padding: 0.35rem 0.75rem;
    }

    .score-display {
        font-size: 1rem;
        padding: 0.4rem 0.75rem;
    }

    /* A button whose label is longer than the space beside it reads better full width. */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 0.9rem 1.25rem;
    }

    .content-area {
        font-size: 1rem;
    }

    .stat-box .value {
        font-size: 2.25rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.9rem;
    }
}

/* The three-item legend above the annotated analysis wraps rather than overflowing its card. */
.legend {
    flex-wrap: wrap;
}

/* The round-by-round summary table keeps its own minimum width, so let it scroll in place. */
#summary-stats-container {
    overflow-x: auto;
}