/**
 * Quiz Arena - Complete UI Redesign
 * Version 2.5.0
 * Modern, Mobile-First Design
 */

/* ==========================================
   CSS Variables & Reset
   ========================================== */

:root {
    /* Primary Colors */
    --qa-primary: #6c5ce7;
    --qa-primary-dark: #5b4cdb;
    --qa-primary-light: #a29bfe;
    
    /* Answer Colors (Kahoot-style) */
    --qa-red: #e21b3c;
    --qa-blue: #1368ce;
    --qa-yellow: #d89e00;
    --qa-green: #26890c;
    
    /* Feedback */
    --qa-success: #00b894;
    --qa-error: #d63031;
    --qa-warning: #fdcb6e;
    
    /* Neutrals */
    --qa-dark: #2d3436;
    --qa-gray: #636e72;
    --qa-light-gray: #b2bec3;
    --qa-bg: #f8f9fa;
    --qa-white: #ffffff;
    
    /* Typography */
    --qa-font: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Spacing */
    --qa-radius: 16px;
    --qa-radius-sm: 8px;
    --qa-radius-lg: 24px;
    
    /* Shadows */
    --qa-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --qa-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --qa-shadow-hover: 0 8px 30px rgba(108, 92, 231, 0.25);
}

.quiz-arena-embed {
    font-family: var(--qa-font);
    color: var(--qa-dark);
    line-height: 1.5;
    box-sizing: border-box;
}

.quiz-arena-embed *,
.quiz-arena-embed *::before,
.quiz-arena-embed *::after {
    box-sizing: border-box;
}

/* ==========================================
   Cards & Containers
   ========================================== */

.qa-card {
    background: var(--qa-white);
    border-radius: var(--qa-radius);
    box-shadow: var(--qa-shadow);
    padding: 24px;
    margin-bottom: 20px;
}

/* ==========================================
   Buttons
   ========================================== */

.qa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--qa-radius-sm);
    font-family: var(--qa-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.qa-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.qa-btn-primary {
    background: var(--qa-primary);
    color: white;
}

.qa-btn-primary:hover:not(:disabled) {
    background: var(--qa-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--qa-shadow-hover);
}

.qa-btn-secondary {
    background: transparent;
    color: var(--qa-primary);
    border: 2px solid var(--qa-primary);
}

.qa-btn-secondary:hover:not(:disabled) {
    background: var(--qa-primary);
    color: white;
}

.qa-btn-success {
    background: var(--qa-success);
    color: white;
}

.qa-btn-success:hover:not(:disabled) {
    background: #00a383;
    transform: translateY(-2px);
}

.qa-btn-danger {
    background: transparent;
    color: var(--qa-error);
    border: 2px solid var(--qa-error);
}

.qa-btn-danger:hover:not(:disabled) {
    background: var(--qa-error);
    color: white;
}

.qa-btn-large {
    padding: 16px 32px;
    font-size: 18px;
    border-radius: var(--qa-radius);
    width: 100%;
}

/* ==========================================
   Loading & States
   ========================================== */

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--qa-light-gray);
    border-top-color: var(--qa-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto;
}

.spinner-inline {
    width: 20px;
    height: 20px;
    border-width: 3px;
    display: inline-block;
    vertical-align: middle;
}

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

.loading-state,
.empty-state,
.error-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--qa-dark);
}

.empty-state p {
    color: var(--qa-gray);
    margin-bottom: 24px;
}

/* ==========================================
   Form Elements
   ========================================== */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--qa-dark);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: var(--qa-radius-sm);
    font-family: var(--qa-font);
    font-size: 16px;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--qa-primary);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.qa-message {
    padding: 12px 16px;
    border-radius: var(--qa-radius-sm);
    margin-top: 16px;
    font-weight: 600;
}

.qa-error {
    background: #ffe0e0;
    color: var(--qa-error);
    border: 1px solid var(--qa-error);
}

/* ==========================================
   DASHBOARD - Quiz List
   ========================================== */

.qa-dashboard .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.qa-dashboard .dashboard-header h2 {
    font-size: 24px;
    margin: 0;
    color: var(--qa-primary);
}

.quiz-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--qa-bg);
    border-radius: var(--qa-radius-sm);
    border-left: 4px solid var(--qa-primary);
    transition: transform 0.2s, box-shadow 0.2s;
}

.quiz-item:hover {
    transform: translateX(4px);
    box-shadow: var(--qa-shadow);
}

.quiz-item .quiz-info h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
}

.quiz-item .quiz-meta {
    margin: 0;
    color: var(--qa-gray);
    font-size: 14px;
}

.quiz-item .start-btn {
    padding: 10px 20px;
}

/* ==========================================
   HOST - Complete Redesign for Projection
   ========================================== */

.qa-host {
    max-width: 100%;
    margin: 0 auto;
}

.host-fullscreen {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* ===== WAITING ROOM ===== */
.waiting-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    padding: 20px;
    min-height: 80vh;
}

@media (max-width: 1024px) {
    .waiting-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.waiting-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.join-instructions {
    text-align: center;
}

.join-instructions h1 {
    font-size: 36px;
    margin: 0 0 12px 0;
    color: var(--qa-dark);
}

.join-instructions .instruction-text {
    font-size: 20px;
    color: var(--qa-gray);
}

.join-instructions strong {
    color: var(--qa-primary);
}

.qr-and-pin {
    display: flex;
    align-items: center;
    gap: 48px;
    background: white;
    padding: 40px;
    border-radius: var(--qa-radius-lg);
    box-shadow: var(--qa-shadow-lg);
}

@media (max-width: 768px) {
    .qr-and-pin {
        flex-direction: column;
        gap: 24px;
        padding: 24px;
    }
}

.qr-wrapper {
    background: white;
    padding: 16px;
    border-radius: var(--qa-radius);
    border: 3px solid var(--qa-primary);
}

.qr-code-large {
    width: 200px;
    height: 200px;
}

.qr-code-large img,
.qr-code-large canvas {
    width: 100% !important;
    height: 100% !important;
}

.pin-section {
    text-align: center;
}

.pin-section .pin-label {
    display: block;
    font-size: 16px;
    color: var(--qa-gray);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.pin-giant {
    font-size: 72px;
    font-weight: 800;
    color: var(--qa-primary);
    letter-spacing: 12px;
    line-height: 1;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .pin-giant {
        font-size: 48px;
        letter-spacing: 8px;
    }
}

.quiz-name-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
}

.quiz-name-badge .badge-icon {
    font-size: 28px;
}

/* Waiting Sidebar */
.waiting-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.participants-panel {
    background: white;
    border-radius: var(--qa-radius-lg);
    box-shadow: var(--qa-shadow);
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.participants-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--qa-bg);
}

.participants-panel .panel-header h2 {
    margin: 0;
    font-size: 24px;
}

.count-badge {
    background: var(--qa-primary);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 700;
}

.participants-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
    min-height: 200px;
    max-height: 400px;
}

.participant-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--qa-primary-light), var(--qa-primary));
    color: white;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    animation: slideIn 0.3s ease;
}

.participant-chip .animal {
    font-size: 24px;
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.no-participants {
    color: var(--qa-gray);
    font-style: italic;
    width: 100%;
    text-align: center;
    padding: 40px 20px;
}

.start-btn-giant {
    padding: 24px 48px !important;
    font-size: 24px !important;
    border-radius: var(--qa-radius) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.start-btn-giant .btn-icon {
    font-size: 32px;
}

.projector-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px !important;
    font-size: 16px !important;
    text-decoration: none;
}

.projector-btn .btn-icon {
    font-size: 20px;
}

/* ===== ACTIVE QUIZ ===== */
.active-header {
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
    color: white;
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--qa-radius);
    margin-bottom: 24px;
}

.active-header .header-left .quiz-title {
    margin: 0;
    font-size: 28px;
}

.header-stats {
    display: flex;
    gap: 24px;
}

.stat-box {
    text-align: center;
    padding: 12px 24px;
    background: rgba(255,255,255,0.15);
    border-radius: var(--qa-radius-sm);
}

.stat-box.highlight {
    background: rgba(255,255,255,0.3);
}

.stat-box .stat-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
}

.stat-box .stat-label {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.9;
}

.active-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

@media (max-width: 1024px) {
    .active-content {
        grid-template-columns: 1fr;
    }
}

/* Question Panel */
.question-panel {
    background: white;
    border-radius: var(--qa-radius-lg);
    box-shadow: var(--qa-shadow);
    padding: 32px;
}

.question-number-badge {
    display: inline-block;
    background: var(--qa-primary);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.question-display {
    font-size: 26px;
    line-height: 1.4;
    margin: 0 0 32px 0;
    color: var(--qa-dark);
}

/* Answer Cards - Kahoot Style */
.answers-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .answers-display {
        grid-template-columns: 1fr;
    }
}

.answer-card {
    position: relative;
    background: var(--card-color);
    border-radius: var(--qa-radius);
    padding: 20px;
    color: white;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s;
}

.answer-card.correct {
    box-shadow: 0 0 0 4px var(--qa-success), 0 4px 20px rgba(0,184,148,0.4);
    transform: scale(1.02);
}

.answer-card .answer-shape {
    font-size: 28px;
    opacity: 0.8;
}

.answer-card .answer-text {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
}

.answer-card .answer-stats {
    text-align: right;
    min-width: 60px;
}

.answer-card .answer-count {
    display: block;
    font-size: 32px;
    font-weight: 800;
}

.answer-card .answer-bar-mini {
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin-top: 4px;
}

.answer-card .bar-fill-mini {
    height: 100%;
    background: white;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.answer-card .correct-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    background: var(--qa-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.question-controls {
    display: flex;
    justify-content: center;
}

.next-btn {
    padding: 18px 48px !important;
    font-size: 20px !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

.next-btn .btn-icon {
    font-size: 24px;
}

/* Leaderboard Panel */
.leaderboard-panel {
    background: white;
    border-radius: var(--qa-radius-lg);
    box-shadow: var(--qa-shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.leaderboard-panel .panel-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.leaderboard-live {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--qa-bg);
    border-radius: var(--qa-radius-sm);
    transition: all 0.3s ease;
}

.lb-row.top-1 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
}

.lb-row.top-2 {
    background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
}

.lb-row.top-3 {
    background: linear-gradient(135deg, #dda15e, #cd7f32);
}

.lb-row .lb-position {
    font-size: 20px;
    width: 28px;
    text-align: center;
}

.lb-row .lb-avatar {
    font-size: 24px;
}

.lb-row .lb-player {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
}

.lb-row .lb-points {
    font-weight: 800;
    font-size: 18px;
    color: var(--qa-primary);
}

.lb-row.top-1 .lb-points,
.lb-row.top-2 .lb-points,
.lb-row.top-3 .lb-points {
    color: var(--qa-dark);
}

.end-btn {
    margin-top: auto;
}

.no-data {
    text-align: center;
    color: var(--qa-gray);
    padding: 20px;
}

/* ===== FINISHED SCREEN ===== */
.finished-container {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.finished-content {
    background: white;
    border-radius: var(--qa-radius-lg);
    box-shadow: var(--qa-shadow-lg);
    padding: 48px;
    text-align: center;
    max-width: 700px;
    width: 100%;
}

.trophy-animation {
    font-size: 100px;
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.finished-content h1 {
    font-size: 36px;
    margin: 16px 0 32px 0;
    color: var(--qa-dark);
}

/* Podium */
.podium-section {
    margin-bottom: 32px;
}

.podium-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
}

.podium-place {
    text-align: center;
    padding: 20px;
    border-radius: var(--qa-radius);
    min-width: 140px;
}

.podium-place.first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    transform: scale(1.1);
    z-index: 2;
}

.podium-place.second {
    background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
}

.podium-place.third {
    background: linear-gradient(135deg, #dda15e, #cd7f32);
}

.podium-avatar {
    font-size: 48px;
    margin-bottom: 8px;
}

.podium-name {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 4px;
}

.podium-score {
    font-size: 14px;
    opacity: 0.8;
}

.podium-stand {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid rgba(0,0,0,0.1);
    font-size: 24px;
    font-weight: 800;
}

/* Final Stats */
.final-stats-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.final-stat {
    text-align: center;
}

.final-stat .stat-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.final-stat .stat-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--qa-primary);
    display: block;
}

.final-stat .stat-name {
    font-size: 14px;
    color: var(--qa-gray);
}

/* Final Leaderboard List */
.final-leaderboard-list {
    margin-bottom: 32px;
}

.final-lb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--qa-bg);
    border-radius: var(--qa-radius-sm);
    margin-bottom: 8px;
}

.final-lb-item .lb-rank {
    font-size: 16px;
    font-weight: 700;
    width: 28px;
}

.final-lb-item .lb-animal {
    font-size: 24px;
}

.final-lb-item .lb-name {
    flex: 1;
    font-weight: 600;
}

.final-lb-item .lb-score {
    font-weight: 700;
    color: var(--qa-primary);
}

.back-btn {
    margin-top: 16px;
}

/* ==========================================
   JOIN - Mobile First
   ========================================== */

.qa-join {
    max-width: 420px;
    margin: 0 auto;
    padding: 20px;
}

.join-card {
    text-align: center;
    padding: 40px 24px;
}

.join-logo {
    margin-bottom: 32px;
}

.join-logo .logo-emoji {
    font-size: 64px;
    display: block;
    margin-bottom: 12px;
}

.join-logo h1 {
    margin: 0;
    font-size: 28px;
    color: var(--qa-primary);
}

.join-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.join-form label {
    font-size: 14px;
    font-weight: 600;
    color: var(--qa-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pin-input {
    font-size: 32px !important;
    text-align: center;
    letter-spacing: 12px;
    font-weight: 700;
    padding: 20px !important;
}

.nickname-input {
    font-size: 20px !important;
    text-align: center;
    font-weight: 600;
}

.reset-link {
    background: none;
    border: none;
    color: var(--qa-gray);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 20px;
}

.reset-link:hover {
    color: var(--qa-primary);
}

.quiz-info-header {
    margin-bottom: 24px;
}

.quiz-info-header .quiz-emoji {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.quiz-info-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
}

/* ==========================================
   PLAY - Game Interface
   ========================================== */

.qa-play {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.qa-screen {
    animation: fadeIn 0.3s ease;
}

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

/* Waiting Screen */
.waiting-card {
    text-align: center;
    padding: 48px 24px;
}

.player-avatar {
    margin-bottom: 20px;
}

.animal-large {
    font-size: 80px;
    display: block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.waiting-card h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
}

.waiting-card .player-name {
    font-size: 18px;
    color: var(--qa-gray);
    margin-bottom: 16px;
}

.waiting-card .player-name strong {
    color: var(--qa-primary);
}

.waiting-msg {
    color: var(--qa-gray);
    font-style: italic;
    margin-bottom: 24px;
}

.score-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--qa-bg);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 16px;
}

.score-pill strong {
    font-size: 24px;
    color: var(--qa-primary);
}

.score-pill.large {
    padding: 16px 32px;
}

.score-pill.large strong {
    font-size: 32px;
}

/* Question Screen */
/* ==========================================
   PLAY - Question Screen (Kahoot Style)
   ========================================== */

.question-container-play {
    min-height: 100vh;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
}

.question-header-play {
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.q-progress {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.q-progress .q-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.q-progress .q-numbers {
    font-size: 24px;
    font-weight: 800;
}

.timer-circle-play {
    position: relative;
    width: 60px;
    height: 60px;
}

.timer-svg-play {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-bg-play {
    fill: none;
    stroke: rgba(255,255,255,0.2);
    stroke-width: 6;
}

.timer-progress-play {
    fill: none;
    stroke: #26890c;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear, stroke 0.3s;
}

.timer-text-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 800;
    color: white;
}

.question-body-play {
    padding: 40px 20px;
    text-align: center;
}

.question-text-play {
    font-size: 22px;
    line-height: 1.4;
    margin: 0;
    font-weight: 700;
    color: #ffffff !important;
}

.options-grid-play {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 16px 24px;
}

@media (max-width: 500px) {
    .options-grid-play {
        grid-template-columns: 1fr;
    }
    
    .question-body-play {
        padding: 24px 16px;
    }
    
    .question-text-play {
        font-size: 18px;
    }
}

.option-btn-play {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    min-height: 100px;
    border: none;
    border-radius: 12px;
    font-family: var(--qa-font);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.option-btn-play .opt-shape {
    font-size: 28px;
    opacity: 0.9;
}

.option-btn-play .opt-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.option-btn-play:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.option-btn-play:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.option-btn-play.selected {
    transform: scale(0.98);
    box-shadow: inset 0 0 0 4px white;
}

/* Old styles - keep for backwards compat */
.question-container {
    background: var(--qa-white);
    border-radius: var(--qa-radius-lg);
    box-shadow: var(--qa-shadow-lg);
    overflow: hidden;
}

.question-header {
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
    color: white;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question-header .q-number {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.timer-circle {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--qa-primary);
}

.question-body {
    padding: 32px 24px;
    text-align: center;
}

.question-body .question-text {
    font-size: 22px;
    line-height: 1.4;
    margin: 0;
}

/* Options Grid */
.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 24px 24px;
}

@media (max-width: 600px) {
    .options-grid {
        grid-template-columns: 1fr;
    }
}

.option-btn {
    padding: 20px 24px;
    border: none;
    border-radius: var(--qa-radius);
    font-family: var(--qa-font);
    font-size: 18px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 16px;
}

.option-btn .option-shape {
    font-size: 28px;
    opacity: 0.8;
    flex-shrink: 0;
}

.option-btn .option-text {
    flex: 1;
    line-height: 1.3;
}

.option-btn:nth-child(1) { background: var(--qa-red); }
.option-btn:nth-child(2) { background: var(--qa-blue); }
.option-btn:nth-child(3) { background: var(--qa-yellow); color: var(--qa-dark); }
.option-btn:nth-child(4) { background: var(--qa-green); }

.option-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.option-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.option-btn.selected {
    transform: scale(0.98);
    box-shadow: inset 0 0 0 4px white;
}

/* Timer Bar */
.timer-bar {
    height: 8px;
    background: var(--qa-bg);
}

.timer-progress {
    height: 100%;
    background: var(--qa-success);
    transition: width 0.1s linear, background 0.3s;
}

/* Answered Screen */
.answered-card {
    text-align: center;
    padding: 48px 24px;
}

.submitted-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

/* Question Results Screen (Play) */
.qresults-container {
    min-height: 100vh;
    background: #1a1a2e;
    color: white;
    padding: 20px;
}

.qresults-header {
    text-align: center;
    margin-bottom: 20px;
}

.qr-badge {
    display: inline-block;
    background: var(--qa-success);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

.qresults-question {
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
    border-radius: var(--qa-radius);
    margin-bottom: 20px;
}

.qresults-question h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
}

.qresults-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.qr-option {
    border-radius: var(--qa-radius);
    overflow: hidden;
    background: rgba(255,255,255,0.1);
}

.qr-option.correct {
    box-shadow: 0 0 0 3px var(--qa-success);
}

.qr-opt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--opt-color);
    color: white;
    font-weight: 600;
}

.qr-shape {
    font-size: 20px;
    opacity: 0.8;
}

.qr-opt-text {
    flex: 1;
    font-size: 14px;
}

.qr-check {
    background: var(--qa-success);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.qr-opt-bar {
    position: relative;
    height: 32px;
    background: rgba(0,0,0,0.3);
}

.qr-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transition: width 0.5s ease;
    opacity: 0.7;
}

.qr-bar-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: 16px;
}

.qresults-winners {
    background: rgba(255,255,255,0.1);
    border-radius: var(--qa-radius);
    padding: 16px;
    margin-bottom: 16px;
}

.qresults-winners h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    text-align: center;
}

.winners-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.winner-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--qa-radius-sm);
}

.winner-medal {
    font-size: 20px;
}

.winner-avatar {
    font-size: 24px;
}

.winner-name {
    flex: 1;
    font-weight: 600;
}

.winner-points {
    color: #ffd700;
    font-weight: 700;
}

.no-winners {
    text-align: center;
    opacity: 0.7;
    padding: 16px;
    margin: 0;
}

.qresults-your-result {
    text-align: center;
    padding: 16px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--qa-radius);
}

.your-correct {
    color: var(--qa-success);
    font-weight: 700;
    font-size: 18px;
}

.your-wrong {
    color: var(--qa-error);
    font-weight: 700;
    font-size: 18px;
}

.your-timeout {
    color: var(--qa-gray);
    font-weight: 600;
    font-size: 16px;
}

/* Feedback Screen */
.feedback-card {
    text-align: center;
    padding: 48px 24px;
    border-width: 4px;
    border-style: solid;
}

.feedback-card.correct {
    border-color: var(--qa-success);
    background: linear-gradient(to bottom, rgba(0,184,148,0.1), white);
}

.feedback-card.wrong {
    border-color: var(--qa-error);
    background: linear-gradient(to bottom, rgba(214,48,49,0.1), white);
}

.feedback-icon {
    font-size: 72px;
    margin-bottom: 16px;
}

.feedback-card h2 {
    font-size: 32px;
    margin: 0 0 8px 0;
}

.feedback-card.correct h2 { color: var(--qa-success); }
.feedback-card.wrong h2 { color: var(--qa-error); }

.feedback-text {
    color: var(--qa-gray);
    margin-bottom: 24px;
}

.points-display {
    margin-bottom: 16px;
}

.points-label {
    display: block;
    font-size: 14px;
    color: var(--qa-gray);
    margin-bottom: 4px;
}

.points-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--qa-success);
}

/* Leaderboard Card */
.leaderboard-card {
    text-align: center;
    padding: 32px 24px;
}

.leaderboard-card h2 {
    margin: 0 0 24px 0;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.lb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--qa-bg);
    border-radius: var(--qa-radius-sm);
    text-align: left;
}

.lb-item.current-player {
    background: linear-gradient(135deg, var(--qa-primary-light), var(--qa-primary));
    color: white;
}

.lb-item .lb-rank {
    font-size: 20px;
    width: 32px;
    text-align: center;
}

.lb-item .lb-animal {
    font-size: 24px;
}

.lb-item .lb-name {
    flex: 1;
    font-weight: 600;
}

.lb-item .lb-score {
    font-weight: 700;
}

.lb-item.current-player .lb-score {
    color: white;
}

.next-hint {
    color: var(--qa-gray);
    font-style: italic;
}

/* Results Screen */
.results-card {
    text-align: center;
    padding: 32px 24px;
}

.results-header {
    margin-bottom: 32px;
}

.results-header .trophy {
    font-size: 80px;
    animation: bounce 1s ease infinite;
}

.results-header h1 {
    margin: 16px 0 0 0;
    font-size: 28px;
}

.your-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-item {
    text-align: center;
    padding: 16px;
    background: var(--qa-bg);
    border-radius: var(--qa-radius-sm);
}

.stat-item .stat-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.stat-item .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--qa-primary);
}

.stat-item .stat-label {
    font-size: 12px;
    color: var(--qa-gray);
    text-transform: uppercase;
}

.final-score-display {
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
    color: white;
    padding: 32px;
    border-radius: var(--qa-radius);
    margin-bottom: 32px;
}

.final-score-display .score-label {
    display: block;
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.final-score-display .final-score {
    display: block;
    font-size: 64px;
    font-weight: 800;
}

.final-score-display .final-rank {
    display: block;
    font-size: 20px;
    margin-top: 8px;
}

.final-leaderboard {
    margin-bottom: 32px;
}

.final-leaderboard h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    color: var(--qa-gray);
}

/* ==========================================
   CREATE - Quiz Wizard
   ========================================== */

.qa-create {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

.step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.step-header h2 {
    margin: 0;
    font-size: 24px;
}

.create-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* Questions Editor */
.questions-editor {
    margin-bottom: 24px;
    max-height: 500px;
    overflow-y: auto;
}

.question-item {
    background: var(--qa-bg);
    border-radius: var(--qa-radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.question-header-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.question-header-row .q-num {
    background: var(--qa-primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.question-header-row .question-text-input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #ddd;
    border-radius: var(--qa-radius-sm);
    font-size: 16px;
    font-weight: 600;
}

.question-header-row .delete-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.question-header-row .delete-btn:hover {
    opacity: 1;
}

.question-item .options-grid {
    padding: 0;
    gap: 8px;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border-radius: var(--qa-radius-sm);
    border: 2px solid transparent;
}

.option-item.correct {
    border-color: var(--qa-success);
    background: rgba(0,184,148,0.1);
}

.option-item input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.option-item .option-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* Success State */
.success-state {
    text-align: center;
    padding: 48px 24px;
}

.success-state .success-icon {
    font-size: 80px;
    margin-bottom: 16px;
}

.success-state h2 {
    margin: 0 0 8px 0;
    font-size: 28px;
}

.success-state p {
    color: var(--qa-gray);
    margin-bottom: 32px;
    font-size: 18px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}

/* ==========================================
   Mobile Responsive
   ========================================== */

@media (max-width: 480px) {
    .qa-card {
        padding: 20px 16px;
        border-radius: var(--qa-radius-sm);
    }
    
    .qa-btn-large {
        padding: 14px 24px;
        font-size: 16px;
    }
    
    .pin-value {
        font-size: 36px;
        letter-spacing: 6px;
    }
    
    .qr-card {
        padding: 24px 16px;
    }
    
    .question-body .question-text {
        font-size: 20px;
        line-height: 1.4;
    }
    
    .option-btn {
        padding: 16px 16px;
        font-size: 16px;
        gap: 12px;
    }
    
    .option-btn .option-shape {
        font-size: 24px;
    }
    
    .option-btn .option-text {
        font-size: 15px;
    }
    
    .your-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .session-summary {
        grid-template-columns: 1fr;
    }
    
    .host-waiting-content {
        gap: 20px;
    }
    
    .question-header-play {
        padding: 16px;
    }
    
    .question-header-play .q-number {
        font-size: 14px;
    }
    
    .question-header-play .timer-circle {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* ==========================================
   JOIN - In-Game State
   ========================================== */

.ingame-state {
    text-align: center;
    padding: 32px 24px;
}

.player-avatar-large {
    margin-bottom: 20px;
}

.player-avatar-large span {
    font-size: 80px;
    display: block;
}

.ingame-state h2 {
    margin: 0 0 12px 0;
    font-size: 24px;
    color: var(--qa-dark);
}

.ingame-name {
    color: var(--qa-gray);
    font-size: 16px;
    margin-bottom: 8px;
}

.ingame-status {
    color: var(--qa-primary);
    font-weight: 600;
    margin-bottom: 24px;
}

.ingame-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================
   PROJECTOR - Full Screen Display
   ========================================== */

.qa-projector {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a2e;
    z-index: 99999;
    overflow: hidden;
}

.proj-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    color: white;
}

.proj-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 40px;
}

.proj-icon {
    font-size: 120px;
    margin-bottom: 24px;
}

.proj-center h1 {
    font-size: 48px;
    margin: 0 0 16px 0;
}

.proj-center p {
    font-size: 24px;
    opacity: 0.8;
    margin-bottom: 32px;
}

.spinner-large {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 24px;
}

/* Projector Waiting Screen */
.proj-waiting-bg {
    background: #1a1a2e;
}

.proj-waiting-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
}

.proj-qr-section {
    text-align: center;
    margin-bottom: 40px;
}

.proj-qr-section h1 {
    font-size: 56px;
    margin: 0 0 16px 0;
    color: white;
}

.proj-url {
    font-size: 32px;
    color: #ffd700;
    font-weight: 700;
    margin-bottom: 32px;
    text-shadow: 0 2px 10px rgba(255,215,0,0.3);
}

.proj-qr-box {
    background: white;
    padding: 24px;
    border-radius: 24px;
    display: inline-block;
    margin-bottom: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.proj-qr {
    width: 300px;
    height: 300px;
}

.proj-qr img,
.proj-qr canvas {
    width: 100% !important;
    height: 100% !important;
}

.proj-pin-display {
    text-align: center;
}

.proj-pin-label {
    display: block;
    font-size: 24px;
    opacity: 0.8;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.proj-pin-value {
    font-size: 120px;
    font-weight: 800;
    letter-spacing: 20px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.proj-info-bar {
    display: flex;
    gap: 48px;
    font-size: 24px;
}

.proj-info-bar .icon {
    font-size: 32px;
    margin-right: 12px;
}

/* Projector Question Screen */
.proj-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 48px;
    background: rgba(0,0,0,0.3);
}

.proj-progress {
    font-size: 24px;
    font-weight: 600;
}

.proj-timer-container {
    position: relative;
}

.proj-timer {
    position: relative;
    width: 100px;
    height: 100px;
}

.timer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-bg {
    fill: none;
    stroke: rgba(255,255,255,0.2);
    stroke-width: 6;
}

.timer-progress {
    fill: none;
    stroke: #26890c;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s;
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 800;
}

.proj-stats {
    font-size: 24px;
}

.proj-stats .icon {
    margin-right: 8px;
}

.proj-question-text {
    flex: 0 0 auto;
    padding: 40px 80px;
    text-align: center;
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
}

.proj-question-text h1 {
    font-size: 48px;
    margin: 0;
    line-height: 1.3;
}

.proj-question-text.results-mode {
    padding: 24px 80px;
}

.proj-question-text.results-mode h2 {
    font-size: 32px;
    margin: 0;
}

.proj-options-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 32px;
}

.proj-option {
    display: flex;
    align-items: center;
    padding: 32px 40px;
    border-radius: 16px;
    font-size: 32px;
    font-weight: 700;
    color: white;
    gap: 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.proj-option .option-shape {
    font-size: 48px;
    opacity: 0.8;
}

.proj-option .option-text {
    flex: 1;
}

/* Projector Results Screen */
.proj-results-badge {
    background: var(--qa-success);
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 700;
}

/* Projector Results Layout */
.proj-results-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    padding: 24px;
    overflow: hidden;
}

.proj-results-left {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.proj-results-left .proj-question-text {
    margin-bottom: 16px;
    padding: 20px 32px;
    border-radius: var(--qa-radius);
}

.proj-results-right {
    display: flex;
    flex-direction: column;
}

.proj-winners-section {
    background: rgba(255,255,255,0.1);
    border-radius: var(--qa-radius);
    padding: 24px;
    flex: 1;
}

.proj-winners-section h3 {
    margin: 0 0 20px 0;
    font-size: 24px;
    text-align: center;
    color: white;
}

.proj-winners-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.proj-winner-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--qa-radius-sm);
}

.proj-winner-item:first-child {
    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,215,0,0.1));
}

.proj-winner-item .winner-medal {
    font-size: 32px;
}

.proj-winner-item .winner-avatar {
    font-size: 36px;
}

.proj-winner-item .winner-name {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
}

.proj-winner-item .winner-points {
    font-size: 24px;
    font-weight: 800;
    color: #ffd700;
}

.proj-winners-section .no-winners {
    text-align: center;
    opacity: 0.7;
    padding: 32px;
    font-size: 18px;
}

@media (max-width: 1024px) {
    .proj-results-body {
        grid-template-columns: 1fr;
    }
}

.proj-results-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.proj-result-item {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
}

.proj-result-item.correct {
    box-shadow: 0 0 0 4px var(--qa-success), 0 8px 30px rgba(0,184,148,0.3);
}

.result-header {
    display: flex;
    align-items: center;
    padding: 20px 32px;
    gap: 20px;
    font-size: 24px;
    font-weight: 700;
}

.result-shape {
    font-size: 36px;
    opacity: 0.8;
}

.result-text {
    flex: 1;
}

.result-check {
    background: var(--qa-success);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.result-bar-container {
    position: relative;
    height: 50px;
    background: rgba(0,0,0,0.2);
}

.result-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transition: width 0.5s ease;
}

.result-count {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 700;
}

/* Projector Leaderboard */
.proj-lb-header {
    padding: 40px;
    text-align: center;
    background: #1a1a2e;
}

.proj-lb-header h1 {
    font-size: 56px;
    margin: 0;
    color: white;
}

.proj-lb-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 80px 40px;
    overflow-y: auto;
}

.proj-lb-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 32px;
    background: rgba(255,255,255,0.1);
    border-radius: 16px;
    font-size: 28px;
}

.proj-lb-item.top-1 {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a2e;
    transform: scale(1.05);
}

.proj-lb-item.top-2 {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
    color: #1a1a2e;
}

.proj-lb-item.top-3 {
    background: linear-gradient(135deg, #cd7f32, #dda15e);
    color: #1a1a2e;
}

.proj-lb-item.top-1 .lb-score,
.proj-lb-item.top-2 .lb-score,
.proj-lb-item.top-3 .lb-score {
    color: #1a1a2e;
}

.proj-lb-item .lb-rank {
    width: 48px;
    font-weight: 800;
}

.proj-lb-item .lb-animal {
    font-size: 40px;
}

.proj-lb-item .lb-name {
    flex: 1;
    font-weight: 600;
}

.proj-lb-item .lb-score {
    font-weight: 800;
    color: #ffd700;
}

/* Projector Finished Screen */
.proj-finished-bg {
    background: #1a1a2e;
}

.proj-final-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    overflow-y: auto;
}

.proj-trophy {
    font-size: 120px;
    animation: bounce 1s ease infinite;
    margin-bottom: 24px;
}

.proj-final-content h1 {
    font-size: 56px;
    margin: 0 0 48px 0;
    color: white;
}

.proj-podium {
    margin-bottom: 48px;
}

.proj-podium .podium-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

.proj-podium .podium-place {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    min-width: 180px;
}

.proj-podium .podium-place.first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a2e;
    transform: scale(1.15);
    z-index: 2;
}

.proj-podium .podium-place.second {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
    color: #1a1a2e;
}

.proj-podium .podium-place.third {
    background: linear-gradient(135deg, #cd7f32, #dda15e);
    color: #1a1a2e;
}

.proj-podium .podium-avatar {
    font-size: 64px;
    margin-bottom: 12px;
}

.proj-podium .podium-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.proj-podium .podium-score {
    font-size: 20px;
    opacity: 0.8;
    margin-bottom: 16px;
}

.proj-podium .podium-stand {
    font-size: 36px;
    font-weight: 800;
    padding-top: 16px;
    border-top: 3px solid rgba(0,0,0,0.1);
}

.proj-podium .podium-stand span {
    display: block;
    margin-bottom: 8px;
}

.proj-final-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 600px;
}

/* ==========================================
   Modal Styles
   ========================================== */

.qa-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.qa-modal {
    background: var(--qa-white);
    border-radius: var(--qa-radius-lg);
    padding: 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: var(--qa-shadow-lg);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.qa-modal-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.qa-modal-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--qa-dark);
    margin: 0 0 12px;
}

.qa-modal-text {
    font-size: 16px;
    color: var(--qa-gray);
    margin: 0 0 24px;
    line-height: 1.5;
}

.qa-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.qa-modal-buttons .qa-btn {
    flex: 1;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--qa-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.qa-btn-danger {
    background: var(--qa-error);
    color: white;
    border: none;
}

.qa-btn-danger:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

.qa-modal-buttons .qa-btn-secondary {
    background: var(--qa-bg);
    color: var(--qa-dark);
    border: 2px solid var(--qa-light-gray);
}

.qa-modal-buttons .qa-btn-secondary:hover {
    background: var(--qa-light-gray);
}

/* ==========================================
   Waiting Room - Clean Design v3
   ========================================== */

/* Header */
.waiting-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: white;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 100;
}

.waiting-header-v2 .header-left {
    display: flex;
    align-items: center;
}

.quiz-title-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--qa-dark);
}

.quiz-title-badge .badge-icon {
    font-size: 20px;
}

.waiting-header-v2 .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.session-status {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.expiry-timer {
    font-size: 14px;
    color: var(--qa-gray);
    font-weight: 600;
}

.expiry-timer.warning {
    color: var(--qa-error);
    font-weight: 700;
}

.close-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--qa-gray);
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(214, 48, 49, 0.1);
    color: var(--qa-error);
}

/* Main Flow Container */
.waiting-flow {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

/* Flow Cards */
.flow-card {
    background: white;
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}

/* Join Card v3 */
.join-card-v3 {
    text-align: center;
}

.join-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.section-label {
    font-size: 14px;
    color: var(--qa-gray);
    margin: 0 0 12px;
    font-weight: 500;
}

.url-display {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 6px 6px 6px 20px;
    gap: 8px;
}

.url-display .url-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--qa-primary);
    letter-spacing: 0.3px;
}

.copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--qa-primary);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: var(--qa-primary-dark);
}

.copy-btn.copied {
    background: var(--qa-success);
}

.pin-section .section-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

.pin-hero {
    background: linear-gradient(135deg, var(--qa-primary), var(--qa-primary-dark));
    border-radius: 16px;
    padding: 24px 40px;
    display: inline-block;
}

.pin-digits {
    font-size: 48px;
    font-weight: 800;
    color: white;
    letter-spacing: 10px;
    font-family: 'Nunito', monospace;
}

/* Participants Card v3 */
.participants-card-v3 {
    flex: 1;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.participants-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.header-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--qa-dark);
}

.participant-badge {
    background: var(--qa-primary);
    color: white;
    min-width: 28px;
    height: 28px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    padding: 0 10px;
}

.participants-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    align-content: flex-start;
}

.participants-grid .empty-state {
    color: var(--qa-light-gray);
    font-style: italic;
    margin: 0;
    font-size: 14px;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

.participant-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    color: var(--qa-dark);
}

.participant-chip .chip-avatar {
    font-size: 16px;
}

/* Actions */
.flow-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
}

.action-btn.secondary {
    background: white;
    color: var(--qa-dark);
    border: 2px solid #e0e0e0;
    flex: 0 0 auto;
}

.action-btn.secondary:hover {
    border-color: var(--qa-primary);
    color: var(--qa-primary);
}

.action-btn.primary {
    background: linear-gradient(135deg, var(--qa-success), #00a085);
    color: white;
    flex: 1;
    font-size: 16px;
}

.action-btn.primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.35);
}

.action-btn.primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.action-btn .btn-icon {
    font-size: 18px;
}

/* Mobile */
@media (max-width: 600px) {
    .waiting-flow {
        padding: 16px;
    }
    
    .flow-card {
        padding: 20px;
    }
    
    .url-display {
        flex-direction: column;
        padding: 16px;
        gap: 12px;
    }
    
    .copy-btn {
        width: 100%;
        justify-content: center;
    }
    
    .pin-digits {
        font-size: 36px;
        letter-spacing: 6px;
    }
    
    .pin-hero {
        padding: 20px 30px;
    }
    
    .flow-actions {
        flex-direction: column;
    }
    
    .waiting-header-v2 {
        padding: 10px 16px;
    }
    
    .quiz-title-badge {
        font-size: 15px;
    }
    
    .session-status {
        display: none;
    }
}

/* Not owner screen */
.not-owner-state {
    text-align: center;
    padding: 60px 40px;
}

.not-owner-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.not-owner-state h3 {
    font-size: 28px;
    font-weight: 800;
    color: var(--qa-dark);
    margin: 0 0 12px;
}

.not-owner-state p {
    font-size: 18px;
    color: var(--qa-gray);
    margin: 0 0 32px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.not-owner-state .qa-btn {
    display: inline-flex;
    margin: 8px;
}

/* Finished screen actions */
.finished-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    width: 100%;
    max-width: 400px;
}

.finished-actions .qa-btn {
    width: 100%;
    justify-content: center;
}

.finished-actions .qa-btn-success {
    background: linear-gradient(135deg, #00b894, #00a085);
    color: white;
    border: none;
    font-size: 18px;
    padding: 18px 32px;
}

.finished-actions .qa-btn-success:hover {
    background: linear-gradient(135deg, #00a085, #009975);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 184, 148, 0.4);
}

.finished-actions .qa-btn-secondary {
    background: var(--qa-bg);
    color: var(--qa-dark);
    border: 2px solid var(--qa-light-gray);
}