/* ======================================== CSS Custom Properties ======================================== */
:root {
    /* Primary Colors - Halloween Theme */
    --color-primary: #ff6b35;
    --color-primary-dark: #8b4513;
    --color-success: #6b8e23;
    --color-success-light: #9acd32;
    --color-success-dark: #556b2f;
    --color-error: #dc143c;
    --color-error-light: #ff6b6b;
    --color-warning: #ff8c00;
    --color-warning-alt: #ffc107;
    --color-info: #9370db;
    --color-info-light: #b19cd9;

    /* Neutral Colors - Darker for Halloween */
    --color-white: #fff5e6;
    --color-white-pure: #ffffff;
    --color-black: #1a1a1a;
    --color-black-dark: #1f1f1f;
    --color-gray-50: #2a2a2a;
    --color-gray-100: #3a3a3a;
    --color-gray-150: #333333;
    --color-gray-200: #4a4a4a;
    --color-gray-250: #555555;
    --color-gray-275: #2e2e2e;
    --color-gray-300: #5a5a5a;
    --color-gray-350: #666666;
    --color-gray-400: #888888;
    --color-gray-500: #999999;
    --color-gray-550: #b0b0b0;
    --color-gray-600: #aaaaaa;
    --color-gray-700: #cccccc;
    --color-gray-800: #e6e6e6;
    --color-gray-850: #f0f0f0;

    /* Background Colors - Halloween Theme */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-gradient-start: #1a0a00;
    --bg-gradient-mid: #2d1b00;
    --bg-gradient-end: #4a2600;
    --bg-success: #2d3a1f;
    --bg-success-dark: #6b8e23;
    --bg-error: #3d1f1f;
    --bg-warning: #3d2e1f;
    --bg-info: #2d2440;
    --bg-light: #3a3a3a;
    --bg-card: #2e2e2e;
    --bg-question: #2a1a0f;
    --bg-question-alt: #1a0a00;

    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;

    /* Border Radius */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 15px;
    --radius-2xl: 20px;
    --radius-3xl: 30px;
    --radius-round: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 3px 6px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 6px 12px rgba(255, 107, 53, 0.4);
    --shadow-primary: 0 20px 60px rgba(255, 107, 53, 0.3);
    --shadow-primary-strong: 0 0 30px rgba(139, 69, 19, 0.5);

    /* RGBA Colors for transparency effects */
    --rgba-black-10: rgba(0, 0, 0, 0.1);
    --rgba-black-50: rgba(0, 0, 0, 0.5);
    --rgba-black-60: rgba(0, 0, 0, 0.6);
    --rgba-black-80: rgba(0, 0, 0, 0.8);
    --rgba-primary-15: rgba(255, 107, 53, 0.15);
    --rgba-primary-30: rgba(255, 107, 53, 0.3);
    --rgba-primary-40: rgba(255, 107, 53, 0.4);
    --rgba-primary-50: rgba(255, 107, 53, 0.5);
    --rgba-primary-60: rgba(255, 107, 53, 0.6);
    --rgba-primary-dark-40: rgba(139, 69, 19, 0.4);
    --rgba-primary-dark-50: rgba(139, 69, 19, 0.5);
    --rgba-warning-30: rgba(255, 140, 0, 0.3);
    --rgba-warning-40: rgba(255, 140, 0, 0.4);
    --rgba-warning-alt-15: rgba(255, 193, 7, 0.15);
    --rgba-warning-alt-30: rgba(255, 193, 7, 0.3);
    --rgba-warning-alt-50: rgba(255, 193, 7, 0.5);
    --rgba-warning-alt-60: rgba(255, 193, 7, 0.6);
    --rgba-success-40: rgba(107, 142, 35, 0.4);
    --rgba-success-50: rgba(107, 142, 35, 0.5);
    --rgba-success-60: rgba(107, 142, 35, 0.6);
    --rgba-success-light-40: rgba(154, 205, 50, 0.4);
    --rgba-success-light-50: rgba(154, 205, 50, 0.5);
    --rgba-error-40: rgba(220, 20, 60, 0.4);
    --rgba-error-light-50: rgba(255, 107, 107, 0.5);
    --rgba-info-60: rgba(147, 112, 219, 0.6);

    /* Transitions */
    --transition-fast: 0.3s;
    --transition-normal: 0.5s;

    /* Font Sizes */
    --font-sm: 13px;
    --font-md: 14px;
    --font-base: 16px;
    --font-lg: 1.1rem;
    --font-xl: 1.3rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --font-4xl: 2.5rem;
    --font-5xl: 3rem;
}

/* ======================================== Base & Layout ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

body::before {
    content: '🎃 👻 🦇 💀 🕷️';
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 3rem;
    opacity: 0.3;
    pointer-events: none;
    letter-spacing: 3rem;
}

.container {
    background: var(--bg-primary);
    border: 3px solid var(--color-primary);
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    width: 100%;
    box-shadow: var(--shadow-primary), var(--shadow-primary-strong);
    position: relative;
}

.container::before {
    content: '🕸️';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    opacity: 0.3;
}

/* ======================================== Typography ======================================== */
h1 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-3xl);
    text-shadow: 2px 2px 4px var(--rgba-black-50);
}

h2 {
    color: var(--color-warning);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-2xl);
    text-shadow: 1px 1px 2px var(--rgba-black-50);
}

.subtitle {
    color: var(--color-info);
    margin-bottom: var(--spacing-xl);
}

/* ======================================== Forms ======================================== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--color-warning);
    font-weight: 600;
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-gray-50);
    color: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: var(--font-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 10px var(--rgba-primary-40);
}

/* ======================================== Buttons ======================================== */
.btn {
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-black);
    font-weight: 700;
    border: 2px solid var(--color-warning);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--rgba-primary-60), 0 0 20px var(--rgba-warning-40);
}

.btn-success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
    color: var(--color-black);
    font-weight: 700;
    border: 2px solid var(--color-success-light);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--rgba-success-60), 0 0 20px var(--rgba-success-light-40);
}

.btn-secondary {
    background: var(--color-gray-100);
    color: var(--color-warning);
    border: 2px solid var(--color-gray-200);
    margin-top: var(--spacing-xs);
}

.btn-secondary:hover {
    background: var(--color-gray-200);
    box-shadow: 0 5px 15px var(--rgba-warning-30);
}

.btn-full {
    width: 100%;
}

/* ======================================== Alerts ======================================== */
.error,
.success,
.info {
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid;
    border-right: 2px solid;
    border-top: 2px solid;
    border-bottom: 2px solid;
}

.error {
    background: var(--bg-error);
    color: var(--color-error-light);
    border-color: var(--color-error);
}

.success {
    background: var(--bg-success);
    color: var(--color-success-light);
    border-color: var(--color-success);
}

.info {
    background: var(--bg-info);
    color: var(--color-info-light);
    border-color: var(--color-info);
}

/* ========================================
   Cards & Quiz
   ======================================== */
.card,
.submitted-answer-card {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
}

.quiz-list {
    list-style: none;
}

.quiz-item,
.answer-option {
    background: var(--bg-card);
    color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    border: 2px solid var(--color-primary-dark);
    transition: all var(--transition-fast);
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.answer-option.selected {
    background: var(--color-gray-250);
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--rgba-primary-50);
}

.quiz-item:hover {
    border-color: var(--color-warning);
    transform: translateX(5px);
    box-shadow: var(--shadow-card-hover);
}

.answer-option:hover {
    border-color: var(--color-primary);
    background: var(--color-gray-150);
    transform: scale(1.02);
    box-shadow: 0 8px 16px var(--rgba-primary-40);
}

.quiz-item input[type="radio"],
.answer-option input[type="radio"] {
    margin-right: var(--spacing-md);
}

/* ========================================
   Teams
   ======================================== */
.team-list {
    list-style: none;
}

.team-item,
.team-answer-card {
    background: var(--color-gray-50);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-item {
    border-left: 4px solid var(--color-primary);
    border-right: 2px solid var(--color-primary-dark);
    border-top: 2px solid var(--color-primary-dark);
    border-bottom: 2px solid var(--color-primary-dark);
    box-shadow: 0 4px 8px var(--rgba-black-50);
}

/* Cash Question Input Styling */
.free-text-answer-section {
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-100);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    box-shadow: 0 4px 12px var(--rgba-black-50);
}

.answer-label {
    display: block;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.answer-textarea {
    width: 100%;
    padding: var(--spacing-md);
    font-size: 1rem;
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    background: var(--bg-primary);
    color: var(--color-white-pure);
    transition: all 0.3s ease;
    line-height: 1.6;
}

.answer-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-gray-50);
    box-shadow: 0 0 0 3px var(--rgba-warning-alt-15);
}

.answer-textarea::placeholder {
    color: var(--color-gray-350);
    font-style: italic;
}

.free-text-answer-section small {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--color-gray-400);
    font-style: italic;
}

.free-text-answer-section .text-muted {
    color: var(--color-gray-500);
}


.team-name {
    font-weight: 600;
    color: var(--color-warning);
}

.team-join-time,
.host-control-question-text {
    color: var(--color-gray-550);
    font-size: var(--font-sm);
}

.team-score {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-black);
    padding: 6px 12px;
    border-radius: var(--radius-2xl);
    font-weight: 600;
    border: 1px solid var(--color-warning);
}

.team-count,
.team-badge,
.score-indicator {
    padding: 6px 12px;
    border-radius: var(--radius-2xl);
    font-size: var(--font-sm);
    font-weight: 600;
}

.team-count {
    background: var(--bg-primary);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.team-badge {
    color: var(--color-black);
    font-weight: 500;
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-primary) 100%);
    border: 1px solid var(--color-primary-dark);
}

.teams-who-answered {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--rgba-black-10);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}
.team-score-card {
    background: var(--color-gray-50);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-primary);
    text-align: center;
    box-shadow: 0 4px 12px var(--rgba-black-60);
}

.team-score-card .team-name {
    font-weight: 600;
    color: var(--color-warning);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-base);
}

.team-score-card .team-score {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    text-shadow: 0 0 10px var(--rgba-primary-50);
}

.team-answers-header {
    margin-bottom: var(--spacing-lg);
    color: var(--color-warning);
}

.team-answers-list {
    display: grid;
    gap: var(--spacing-md);
}

.team-answer-card h4 {
    margin-bottom: var(--spacing-xs);
    color: var(--color-warning);
}

.team-answer-card p {
    font-size: var(--font-lg);
    color: var(--color-white);
    margin: 0;
}

.team-answer-card em {
    color: var(--color-info);
}

.team-answer-icon {
    font-size: var(--font-5xl);
}

.team-answer-cell {
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.team-answer-cell small {
    display: block;
}

.team-answer-correct,
.answer-status-correct {
    background: var(--bg-success);
    border: 2px solid var(--color-success);
    color: var(--color-success-light);
    box-shadow: 0 0 15px var(--rgba-success-40);
}

.team-answer-incorrect,
.answer-status-incorrect {
    background: var(--bg-error);
    border: 2px solid var(--color-error);
    color: var(--color-error-light);
    box-shadow: 0 0 15px var(--rgba-error-40);
}
.team-display {
    color: var(--color-primary);
    font-weight: 600;
    text-shadow: 0 0 8px var(--rgba-primary-40);
}

.team-status-card {
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    font-size: var(--font-xl);
    font-weight: 600;
    text-align: center;
    transition: all var(--transition-fast);
}

.team-answered {
    background: var(--bg-success);
    border: 2px solid var(--color-success);
    color: var(--color-success-light);
    box-shadow: 0 0 15px var(--rgba-success-40);
}

.team-waiting {
    background: var(--bg-warning);
    border: 2px solid var(--color-warning);
    color: var(--color-warning);
    box-shadow: 0 0 15px var(--rgba-warning-40);
}

.team-card-tv {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-warning);
    color: var(--color-black);
    font-size: var(--font-2xl);
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 30px var(--rgba-primary-50);
}

.teams-in-room-header {
    margin-bottom: var(--spacing-lg);
    color: var(--color-warning);
}

.no-teams-message {
    color: var(--color-info);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-md);
}

.no-teams-yet {
    color: var(--color-gray-400);
}

.team-joined-success {
    margin: var(--spacing-lg) 0;
}

.team-joined-success p {
    font-size: var(--font-lg);
}

/* ========================================
   QR & Join
   ======================================== */
.qr-code {
    text-align: center;
    margin: var(--spacing-xl) 0;
}

.qr-code img {
    max-width: 300px;
    border-radius: var(--radius-lg);
    border: 3px solid var(--color-primary);
    box-shadow: 0 10px 30px var(--rgba-black-60), 0 0 20px var(--rgba-primary-50);
}

.join-code {
    font-size: var(--font-5xl);
    font-weight: bold;
    color: var(--color-primary);
    text-align: center;
    margin: var(--spacing-lg) 0;
    letter-spacing: 8px;
    text-shadow: 0 0 15px var(--rgba-primary-60);
}

/* ========================================
   Status Badges
   ======================================== */
.status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius-2xl);
    font-size: var(--font-md);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    border: 2px solid;
}

.status-waiting {
    background: var(--bg-warning);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.status-in-progress {
    background: var(--bg-success);
    color: var(--color-success-light);
    border-color: var(--color-success);
}

.status-finished {
    background: var(--bg-info);
    color: var(--color-info-light);
    border-color: var(--color-info);
}

/* ========================================
   Answers
   ======================================== */
.answer-options {
    list-style: none;
    margin: var(--spacing-lg) 0;
}

.all-answers {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.answer-box {
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px var(--rgba-black-50);
}

.answer-box.correct-answer {
    background: var(--bg-success);
    border-color: var(--color-success);
    box-shadow: 0 0 20px var(--rgba-success-50);
}

.answer-text {
    font-size: 1.5rem;
    font-weight: 600;
    /*margin-bottom: 1rem;*/
    color: var(--color-white);
}

.answer-box.correct-answer .answer-text {
    color: var(--color-success-light);
}

.teams-for-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: var(--spacing-lg);
    /*min-height: 2rem;*/
}

.team-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 2px 4px var(--rgba-black-50);
}

.answer-box.correct-answer .team-badge {
    background: var(--color-success);
    color: var(--color-black);
    border: 1px solid var(--color-success-light);
}

.answer-correct {
    border-color: var(--color-success);
    background: var(--bg-success);
    box-shadow: 0 0 15px var(--rgba-success-40);
}

.answer-incorrect {
    border-color: var(--color-error);
    background: var(--bg-error);
    box-shadow: 0 0 15px var(--rgba-error-40);
}

/* ========================================
   Leaderboard
   ======================================== */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-lg);
    color: var(--color-warning);
}

.leaderboard-table th,
.leaderboard-table td {
    padding: var(--spacing-md);
    text-align: left;
    color: var(--color-white);
}

.leaderboard-table th {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-black);
    font-weight: 600;
    border: 2px solid var(--color-warning);
}

.leaderboard-table tr:nth-child(even) {
    background: var(--color-gray-50);
}

.leaderboard-table tr:nth-child(odd) {
    background: var(--color-black-dark);
}

.leaderboard-rank {
    font-size: var(--font-2xl);
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--rgba-primary-60);
}

.medal {
    font-size: var(--font-3xl);
}

/* ========================================
   TV Display
   ======================================== */
.tv-container {
    max-width: 1400px;
    margin: 0 auto;
}

.tv-header {
    text-align: center;
}

.tv-header h1 {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    text-shadow: 2px 2px 4px var(--rgba-black-80), 0 0 20px var(--rgba-primary-60);
    color: var(--color-primary);
}

.status-badge-tv {
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--radius-3xl);
    font-size: var(--font-2xl);
    font-weight: 600;
    background: var(--rgba-primary-30);
    backdrop-filter: blur(10px);
    border: 2px solid var(--color-primary);
    color: var(--color-warning);
}

.tv-content {
    background: var(--bg-primary);
    border: 3px solid var(--color-primary);
    border-radius: var(--radius-3xl);
    padding: var(--spacing-3xl);
    box-shadow: 0 20px 60px var(--rgba-primary-40), 0 0 40px var(--rgba-primary-dark-50);
    color: var(--color-white);
}
.qr-section {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--spacing-3xl);
    margin-bottom: 50px;
}

.qr-code-tv {
    flex-shrink: 0;
}

.qr-code-tv img {
    width: 400px;
    height: 400px;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.join-info {
    flex: 1;
}

.join-code-tv {
    font-size: var(--font-5xl);
    font-weight: bold;
    color: var(--color-primary);
    letter-spacing: 20px;
    margin: var(--spacing-lg) 0;
    text-shadow: 0 0 20px var(--rgba-primary-60);
}

.join-instruction {
    font-size: var(--font-3xl);
    color: var(--color-warning);
    margin-bottom: var(--spacing-lg);
}

.teams-grid,
.teams-status,
.team-answers-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.teams-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-top: var(--spacing-2xl);
}

.teams-status {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.team-answers-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}
.question-display {
    border: 3px var(--color-primary) solid;
    padding: var(--spacing-xs);
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--bg-question) 0%, var(--bg-question-alt) 100%);
    color: var(--color-warning);
    margin-bottom: var(--spacing-2xl);
    text-align: center;
    box-shadow: 0 0 30px var(--rgba-primary-50), inset 0 0 20px var(--rgba-black-50);
}

.question-display h2 {
    font-size: var(--font-2xl);
    line-height: 1.4;
    color: var(--color-primary);
    text-shadow: 0 0 15px var(--rgba-primary-60);
}

.waiting-message,
.finished-message {
    text-align: center;
    margin: var(--spacing-3xl) 0;
}

.waiting-message {
    font-size: var(--font-4xl);
    color: var(--color-info);
    animation: pulse 2s infinite;
    text-shadow: 0 0 10px var(--rgba-info-60);
}

.finished-message {
    font-size: var(--font-5xl);
    color: var(--color-primary);
    text-shadow: 0 0 20px var(--rgba-primary-60);
}

/* ======================================== Animations ======================================== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* ========================================
   Specific Page Components
   ======================================== */
#topic-container { background-color: var(--color-white-pure); padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px var(--rgba-black-10); margin: auto; width: 50%; }
#topic-list { justify-content: center; display: flex; flex-direction: column; align-items: center; padding: 20px; }
#question-form { padding: 20px; }
.option { border-radius: 10px; }
.option input[type='radio'] { display: none; }
.option label { display: block; padding: 10px 20px; background-color: var(--bg-card); color: var(--color-white); border: 2px solid var(--color-primary-dark); border-radius: var(--radius-lg); margin: 5px 0; cursor: pointer; transition: all 0.3s; }
.option label:hover { background-color: var(--color-gray-150); border-color: var(--color-primary); }
.option input[type='radio']:checked + label { background: var(--color-gray-100); border-color: var(--color-primary); box-shadow: 0 0 15px var(--rgba-primary-50); }
#heading-text { text-align: center; }

.answer-review-list { list-style: none; padding: 0; margin: 0; }
.answer-review-option { padding: var(--spacing-lg); margin-bottom: var(--spacing-md); border-radius: var(--radius-md); border: 2px solid; }
.answer-review-option.correct-answer { background: var(--bg-success); border-color: var(--color-success); }
.answer-review-option.incorrect-answer { background: var(--bg-error); border-color: var(--color-gray-200); }
.answer-indicator { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-round); font-weight: bold; font-size: 18px; margin-right: var(--spacing-md); }
.correct-answer .answer-indicator { background: var(--color-success); color: var(--color-white); }
.incorrect-answer .answer-indicator { background: var(--color-error); color: var(--color-white); }
.answer-text { font-size: var(--font-base); font-weight: 500; }

.answer-stats { display: flex; align-items: center; gap: var(--spacing-sm); }
.score-indicator { display: inline-block; }
.score-indicator.correct { background: var(--bg-success); color: var(--color-success); }
.score-indicator.incorrect { background: var(--bg-error); color: var(--color-error); }
.status-badge.status-warning { background: var(--color-warning); color: var(--color-white); }
.page-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); }
.question-card {
    border: 3px var(--color-primary) solid;
    padding-left: 1em;
    background: linear-gradient(135deg, var(--color-black-dark) 0%, var(--color-gray-50) 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 16px var(--rgba-primary-30), 0 0 20px var(--rgba-primary-15);
}
.question-card h2 { 
    margin-bottom: 0;
    color: var(--color-warning);
}
.answer-option label { cursor: pointer; display: block; }

.leaderboard-link-container,.quiz-complete-message,.no-teams-message { margin-top: var(--spacing-lg); }
.leaderboard-table-container,.leaderboard-footer { margin-top: var(--spacing-xl); }
.leaderboard-table th.rank-column,.leaderboard-table td.rank-cell,.leaderboard-table th.score-column,.leaderboard-table td.score-cell { text-align: center; }
.leaderboard-table th.rank-column { width: 80px; }
.quiz-complete-message h3 { margin-bottom: var(--spacing-sm); }

.button-group-column { display: flex; gap: var(--spacing-sm); flex-direction: column; }
.form-help-text { display: block; margin-top: var(--spacing-xs); }
.room-code-display,.back-link-container { margin-top: var(--spacing-lg); }
.quiz-item-count,.no-teams-placeholder { color: var(--color-gray-400); }
.no-teams-placeholder { padding: var(--spacing-lg); }
.disabled-info { margin-top: var(--spacing-sm); }
.card-header { margin-bottom: var(--spacing-md); color: var(--color-warning); }

.quick-links { 
    background: var(--color-gray-50); 
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-top: var(--spacing-lg);
    box-shadow: 0 4px 12px var(--rgba-black-50);
}
.quick-links h3 { 
    margin: 0 0 var(--spacing-md) 0; 
    font-size: 1.1rem; 
    color: var(--color-warning);
    text-shadow: 0 0 8px var(--rgba-warning-40);
}
.link-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: var(--spacing-sm) 0; 
    border-bottom: 1px solid var(--color-gray-200); 
}
.link-item:last-child { border-bottom: none; }
.link-item strong { 
    color: var(--color-white);
}
.link-item a {
    color: var(--color-primary); 
    text-decoration: none; 
    font-weight: 600;
    transition: all 0.3s;
}
.link-item a:hover {
    text-decoration: underline;
    color: var(--color-warning);
    text-shadow: 0 0 8px var(--rgba-warning-50);
}
.link-item p {
    color: var(--color-primary);
    font-weight: 600;
    background: var(--bg-primary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary);
    margin: 0;
    font-family: monospace;
    letter-spacing: 2px;
}

.host-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: var(--spacing-lg); 
}
.host-header h1 { margin: 0; }
.section-divider { margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 2px solid var(--color-primary); }
.section-header { margin-bottom: var(--spacing-md); color: var(--color-warning); }
.section-description,.section-description-small { color: var(--color-gray-550); }
.section-description { margin-bottom: var(--spacing-sm); }
.code-display { background: var(--color-gray-50); padding: var(--spacing-md); margin-bottom: var(--spacing-lg); border: 2px solid var(--color-primary); border-radius: var(--radius-md); }
.code-display code,.join-code-large { font-size: var(--font-base); color: var(--color-primary); word-break: break-all; }
.join-code-large { font-size: var(--font-2xl); }
.url-display { word-break: break-all; }
.overview-info { margin-bottom: var(--spacing-xl); }
.question-card-container { margin-bottom: var(--spacing-lg); }
.overview-info p { margin-top: var(--spacing-sm); font-size: var(--font-sm); color: var(--color-gray-550); }
.question-card-container h3 { color: var(--color-warning); margin-bottom: var(--spacing-md); }

.correct-answer-box { background: var(--bg-success); padding: 15px; border-radius: 8px; margin-bottom: 15px; border: 2px solid var(--color-success); }
.correct-answer-box strong { color: var(--color-success-light); }
.btn-with-margin { margin-bottom: var(--spacing-md); }
.tv-sync-info { margin-bottom: var(--spacing-sm); }
.tv-sync-badge { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); font-size: var(--font-sm); }

.review-navigation,.host-actions { margin-top: var(--spacing-2xl); display: flex; gap: var(--spacing-md); }
.review-navigation { justify-content: space-between; }
.qr-code-description,.join-code-container p { color: #b0b0b0; margin-bottom: var(--spacing-md); }
.join-code-container p { margin-bottom: var(--spacing-sm); }

.room-details-card h3 { margin-bottom: var(--spacing-md); color: #ff8c00; }
.room-details-card p { margin-top: var(--spacing-md); color: #b0b0b0; font-size: var(--font-sm); }
.host-actions-secondary,.host-actions-tertiary { margin-top: var(--spacing-md); }

.room-status-heading,
.host-control-heading {
    color: var(--color-gray-850);
}

.host-control-info {
    margin-top: var(--spacing-lg);
}

@media (max-width: 768px) {
    .container { padding: 20px; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.2rem; }
    .join-code { font-size: 2rem; letter-spacing: 4px; }
}

/* ========================================
   Additional Utility & Helper Classes
   ======================================== */
.wait-container,
.join-code-container,
.no-teams-message,
.leaderboard-link-container,
.quiz-complete-message,
.leaderboard-footer,
.back-link-container,
.host-actions-tertiary,
.review-header-center {
    text-align: center;
}

.team-joined-success { margin: var(--spacing-lg) 0; }
.team-joined-success p,
.ready-info p { font-size: var(--font-lg); }
.teams-in-room-header { margin-bottom: var(--spacing-lg); color: var(--color-gray-800); }
.no-teams-yet { color: var(--color-gray-400); }

.waiting-animation-container { margin-top: var(--spacing-xl); }
.waiting-clock { font-size: var(--font-5xl); animation: pulse 2s infinite; }
.large-icon,
.tv-finished-icon { font-size: var(--font-5xl); margin-bottom: var(--spacing-lg); }
.hidden-poll { display: none; }
.submitted-answer-card { 
    background: var(--bg-success); 
    margin: var(--spacing-xl) 0; 
    border: 2px solid var(--color-success);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 20px var(--rgba-success-40);
}
.submitted-answer-card p {
    color: var(--color-white);
    font-size: var(--font-lg);
}
.submitted-answer-card strong {
    color: var(--color-success-light);
}

.reveal-message,
.tv-sync-info,
.url-display,
.join-url,
.team-joined-time,
.waiting-text,
.leaderboard-footer p,
.form-help-text,
.room-code-display p,
.disabled-info {
    color: var(--color-gray-550);
    font-size: var(--font-sm);
}

/* ========================================
   Team Answers Summary Styles
   ======================================== */
.correct-answer-display,
.correct-answer-box,
.correct-answer-card {
    background: var(--bg-success);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border: 2px solid var(--color-success);
    box-shadow: 0 0 20px var(--rgba-success-40);
}

.correct-answer-card {
    border-left: 4px solid var(--color-success-light);
    margin-bottom: var(--spacing-xl);
}

.correct-answer-card h3,
.correct-answer-label,
.correct-answer-box strong {
    color: var(--color-success-light);
    margin-bottom: var(--spacing-sm);
}

.correct-answer-card p {
    font-size: var(--font-xl);
    color: var(--color-white);
    margin: 0;
}

/* ========================================
   Question Form Styles
   ======================================== */
.question-options {
    list-style-type: none;
}

/* ========================================
   TV Extended
   ======================================== */
.tv-join-instruction-text { font-size: var(--font-2xl); }
.tv-section-heading { font-size: var(--font-4xl); margin-bottom: var(--spacing-xl); color: var(--color-warning); }
.tv-correct-answer-box { background: var(--bg-success); padding: var(--spacing-2xl); border-radius: var(--radius-2xl); margin-bottom: var(--spacing-2xl); border: 4px solid var(--color-success); }
.tv-correct-answer-heading { color: var(--color-success-light); font-size: var(--font-3xl); margin-bottom: var(--spacing-lg); text-align: center; }
.tv-correct-answer-text { font-size: var(--font-4xl); color: var(--color-success-light); margin: 0; text-align: center; font-weight: 600; }
.tv-team-answers-container { display: grid; gap: var(--spacing-xl); }
.tv-team-answer-item { padding: var(--spacing-xl); border-radius: var(--radius-2xl); display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; }
.tv-team-answer-item.pending { background: var(--rgba-warning-alt-15); border: 4px solid var(--rgba-warning-alt-60); box-shadow: 0 0 20px var(--rgba-warning-alt-30); }
.tv-team-answer-item.correct { background: var(--bg-success); border: 4px solid var(--color-success); box-shadow: 0 0 20px var(--rgba-success-40); }
.tv-team-answer-item.incorrect { background: var(--bg-error); border: 4px solid var(--color-error); box-shadow: 0 0 20px var(--rgba-error-40); }
.tv-team-answer-item.pending .tv-team-answer-name { color: var(--color-warning-alt); text-shadow: 0 0 10px var(--rgba-warning-alt-50); }
.tv-team-answer-item.correct .tv-team-answer-name { color: var(--color-success-light); text-shadow: 0 0 10px var(--rgba-success-light-50); }
.tv-team-answer-item.incorrect .tv-team-answer-name { color: var(--color-error-light); text-shadow: 0 0 10px var(--rgba-error-light-50); }
.tv-team-answer-content { flex: 1; }
.tv-team-answer-name { font-size: var(--font-3xl); margin-bottom: var(--spacing-sm); color: var(--color-white); }
.tv-team-answer-text { font-size: 1.8rem; color: var(--color-gray-700); margin: 0; }
.tv-no-answer { color: var(--color-info); }
.tv-team-answer-icon { font-size: var(--font-5xl); margin-left: var(--spacing-xl); }
.tv-finished-subtitle { font-size: var(--font-3xl); margin-top: var(--spacing-lg); }

/* Team Submission Review Compact Layout */
.submission-compact-layout {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.submission-content-inline {
    flex: 1;
    margin: 0;
}

.submission-content-inline p {
    margin: 0;
    color: var(--color-white-pure);
}

.submission-content-inline strong {
    color: var(--color-warning);
}

.submission-actions-inline {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}

.submission-actions-inline .status-badge {
    margin: 0;
    font-size: var(--font-md);
    padding: 8px 16px;
    white-space: nowrap;
}

.submission-actions-inline .status-badge.status-correct {
    background: var(--bg-success-dark);
    color: var(--color-black);
    border-color: var(--color-success);
    font-weight: 700;
}

.submission-actions-inline .status-badge.status-incorrect {
    background: var(--color-error);
    color: var(--color-black);
    border-color: var(--color-error-light);
    font-weight: 700;
}

.submission-header h3 {
    color: var(--color-warning);
}