@charset "UTF-8";

:root {
    /* New Light Theme Palette */
    --bg-color: #F0FCFC; /* Very light aqua/cyan */
    --card-bg: #FFFFFF;
    --text-primary: #37474F; /* Dark Blue Grey */
    --text-secondary: #546E7A;
    --text-muted: #90A4AE;
    
    --primary-color: #009688; /* Teal 500 */
    --primary-gradient-start: #26A69A;
    --primary-gradient-end: #00897B;
    
    --success-color: #4DB6AC; /* Mint */
    --success-gradient-start: #80CBC4;
    --success-gradient-end: #4DB6AC;
    
    --accent-color: #00BCD4; /* Cyan */
    --accent-gradient-start: #4DD0E1;
    --accent-gradient-end: #00BCD4;

    --danger-color: #EF5350;
    --warning-color: #FFA726;
    
    --card-border: 1px solid #B2DFDB; /* Teal 100 */
    --card-radius: 40px;
    --card-shadow: 0 10px 30px rgba(0, 150, 136, 0.08);
    
    --bg-secondary: #E0F7FA;
    --border-color: #B2DFDB;

    --selection-highlight: #E0F2F1; /* Mint Green Highlight */
    --input-bg: #FAFAFA;
    --input-border: #CFD8DC;
}

/* Student Exit Button */
.btn-exit {
    position: fixed;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    color: var(--text-secondary);
    border: 1px solid var(--input-border);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.btn-exit:hover {
    background-color: #FFEBEE;
    color: var(--danger-color);
    border-color: #FFCDD2;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.btn-exit:active {
    transform: translateY(0);
}

.btn-exit::before {
    content: "✕";
    font-size: 1.1em;
    font-weight: bold;
}

#toast-container {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background-color: rgba(245, 245, 245, 0.85);
    backdrop-filter: blur(4px);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    min-width: auto;
    max-width: 250px;
    border: 1px solid rgba(224, 242, 241, 0.5);
    animation: toastEnter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), toastExit 0.4s ease-in 2.6s forwards;
}

.toast-avatar {
    width: 24px;
    height: 24px;
    background-color: #E3F2FD;
    color: #1976D2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-right: 0;
}

.toast-avatar-red {
    background-color: #FFEBEE;
    color: #D32F2F;
}

.toast-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    margin-right: 10px;
}

.toast-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.toast-action {
    font-size: 0.85rem;
    margin-top: 0;
}

.toast-close {
    background: none;
    border: none;
    color: #90A4AE;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    line-height: 1;
}

.toast-close:hover {
    color: #f44336;
}

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

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

body {
    background: linear-gradient(-45deg, #F0FCFC, #E0F7FA, #B2DFDB, #E0F2F1);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Centered Layout for Student View */
.centered-layout {
    justify-content: center;
    background-color: #F0FCFC;
    background-image: radial-gradient(#009688 0.8px, transparent 0.8px), radial-gradient(#009688 0.8px, #F0FCFC 0.8px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    animation: none; /* Override global gradient animation */
}

/* Layout for Teacher View */
.teacher-layout {
    background-color: #F8F9FA;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(55, 71, 79, 0.03) 0px,
        rgba(55, 71, 79, 0.03) 1px,
        transparent 1px,
        transparent 10px
    );
    background-attachment: fixed; /* Keeps pattern stable during scroll */
    animation: none; /* Override global gradient animation */
}

h1, h2, h3 {
    color: var(--text-primary);
    font-weight: 500;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* Modern Button System */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    margin: 5px;
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::after {
    left: 100%;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.2);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.5);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
    box-shadow: 0 4px 10px rgba(0, 150, 136, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4DB6AC, #009688);
    box-shadow: 0 6px 16px rgba(0, 150, 136, 0.4);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-gradient-start), var(--success-gradient-end));
    color: white;
    box-shadow: 0 4px 10px rgba(77, 182, 172, 0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #80CBC4, #4DB6AC);
    box-shadow: 0 8px 20px rgba(77, 182, 172, 0.5);
    transform: translateY(-3px);
}

.btn-danger {
    background: linear-gradient(135deg, #EF5350, #E53935);
    color: white;
    box-shadow: 0 4px 10px rgba(239, 83, 80, 0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #E57373, #EF5350);
    box-shadow: 0 8px 20px rgba(239, 83, 80, 0.5);
    transform: translateY(-3px);
}

.btn-secondary {
    background-color: #ECEFF1;
    color: var(--text-secondary);
    border: 1px solid #CFD8DC;
}

.btn-secondary:hover {
    background-color: #CFD8DC;
    color: var(--text-primary);
}

.btn-warning {
    background: linear-gradient(135deg, #FFCA28, #FFA000);
    color: white;
    box-shadow: 0 2px 6px rgba(255, 160, 0, 0.3);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #FFD54F, #FFB300);
    box-shadow: 0 6px 16px rgba(255, 160, 0, 0.4);
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end));
    color: white;
    box-shadow: 0 2px 6px rgba(0, 188, 212, 0.3);
}

.btn-accent:hover {
    background: linear-gradient(135deg, #80DEEA, #26C6DA);
    box-shadow: 0 6px 16px rgba(0, 188, 212, 0.4);
}

.btn-lg {
    padding: 15px 32px;
    font-size: 1em;
    border-radius: 16px;
}

.btn-md {
    padding: 10px 24px;
    font-size: 0.85em;
    border-radius: 12px;
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid #EF5350;
    color: #EF5350;
}

.btn-outline-danger:hover {
    background: rgba(239, 83, 80, 0.1);
    color: #D32F2F;
    border-color: #D32F2F;
}

/* Modern Select Input */
.modern-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    padding: 8px 32px 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23546E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.modern-select:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.modern-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.1);
}

/* Custom Tooltip */
.tooltip-btn {
    position: relative;
    overflow: visible !important;
}

.tooltip-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    background-color: var(--text-primary);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 2100;
}

.tooltip-btn:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.container {
    width: 90%;
    max-width: 800px;
    padding: 20px;
    text-align: center;
}

/* Redesigned Control Panel */
.panel-header {
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    margin-bottom: 15px;
    border-bottom: 1px solid #E0F2F1;
    padding-bottom: 10px;
}

.panel-header > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.panel-header > div:last-child {
    padding-left: 5px;
    text-align: left;
}


/* Modern Question Display in Teacher Dashboard */
.question-text {
    /* font-size: 0.9em; */
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--text-primary);
    line-height: 1.4;
    text-align: left;
    border-left: 3px solid var(--primary-color);
    padding-left: 12px;
}

.options-preview-grid {
    position:relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 15px;
    text-align: left;
}

.option-pill {
    position: relative;
    background-color: #FFFFFF;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #E0F2F1;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1em;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    color: var(--text-secondary);
}

.option-pill:hover {
    background-color: #FAFAFA;
    transform: translateX(3px);
    border-color: #B2DFDB;
}

/* Correct Answer Highlight in Teacher Dashboard */
.option-pill.correct-answer {
    border: 1px solid var(--success-color);
    background: #E0F2F1;
    color: var(--primary-color);
}

.option-pill.correct-answer .opt-badge {
    background-color: var(--success-color);
    color: #fff;
    box-shadow: 0 2px 4px rgba(77, 182, 172, 0.3);
    border: none;
}

.option-pill > .options-glass-overlay{
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    left:60px;
}
.option-pill > .options-glass-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}
.option-pill > .options-glass-overlay.is-hidden {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transform: scale(1.1);
}

.opt-badge {
    background-color: #FAFAFA;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 1em;
    flex-shrink: 0;
    border: 1px solid #E0F2F1;
}

.status-badge {
    padding: 6px 16px;
    border-radius: 50px;
    text-align: center;
    font-weight: 500;
    font-size: 0.8rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.status-ready {
    /* background-color: #E0F2F1; */
    /* color: var(--primary-color); */
    /* border: 1px solid #B2DFDB; */
    box-shadow: 0 2px 5px rgba(0,0,0,0);
}

.status-live {
    color: #E53935;
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.2); }
    70% { box-shadow: 0 0 0 6px rgba(229, 57, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

.status-ended {
    background-color: #F5F5F5;
    color: var(--text-muted);
    border: 1px solid #EEEEEE;
}

.live-dot {
    font-size: 1.2em;
    animation: blinkDot 1.5s infinite;
}

@keyframes blinkDot {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.question-content {
    /* font-size: 1em; */
    font-weight: 500;
    padding: 10px 0;
    min-height: 80px;
    position: relative;
}

/* Input text transformation helpers */
.uppercase-input {
    text-transform: uppercase;
}

.uppercase-input::placeholder {
    text-transform: none;
}

/* Common Components */
.card {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--card-radius);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 150, 136, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.question-card {
    position: relative;
    margin-top: 60px;
}

.hidden {
    display: none !important;
}

/* Teacher Layout */
.full-width-container {
    max-width: 1200px;
}

.content-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.main-column {
    flex: 3;
}

.sidebar-column {
    flex: 1.5;
    min-width: 350px;
    display: flex;
    flex-direction: column;
}

.student-sidebar-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    max-height: 60vh;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 20px;
    z-index: 900;
    box-shadow: 0 20px 50px rgba(0, 150, 136, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    animation: slideInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}


@media (max-width: 768px) {
    .content-layout {
        flex-direction: column;
    }
    .main-column, .sidebar-column {
        width: 100%;
    }
    .student-sidebar-card {
        width: 100%;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 20px 20px 0 0;
    }
}

.timer-display {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-primary);
}

.timer-critical {
    color: #E53935;
    animation: pulse 1s infinite;
}

.timer-warning {
    color: #FFA726;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Enhanced Sidebar Card Style */
#answers-sidebar-card {
    padding: 20px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px rgba(0, 150, 136, 0.1);
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    margin-top: 60px; /* Align with question-card which has margin-top: 60px */
}

#answers-sidebar-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--text-primary);
    
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#answers-list {
    flex: 1;
    overflow-y: auto;
    text-align: left;
    padding: 0;
    margin-top: 5px;
    /* Custom scrollbar for sidebar */
    scrollbar-width: thin;
    scrollbar-color: #B2DFDB transparent;
}

#answers-list::-webkit-scrollbar {
    width: 6px;
}

#answers-list::-webkit-scrollbar-track {
    background: transparent;
}

#answers-list::-webkit-scrollbar-thumb {
    background-color: #B2DFDB;
    border-radius: 10px;
}

#sidebar-student-list {
    list-style: none;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

#sidebar-student-list li {
    padding: 10px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    color: var(--text-primary);
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(224, 247, 250, 0.8); /* Light cyan overlay */
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    animation: fadeIn 0.3s;
    box-shadow: 0 20px 60px rgba(0, 150, 136, 0.15);
    border: 1px solid #B2DFDB;
    color: var(--text-primary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.close {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    z-index: 10;
    font-size: 20px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.close:hover {
    background-color: #FFEBEE;
    color: var(--danger-color);
}

.loader {
    font-size: 1.2em;
    color: var(--text-muted);
    margin: 20px 0;
}

/* Celebration Overlay - Modern Redesign */
.celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.4s ease;
}

.celebration-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    padding: 50px 40px;
    border-radius: 40px;
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.5) inset;
    min-width: 320px;
    max-width: 90%;
    animation: elasticPop 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    transform-origin: center center;
}

.celebration-text {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(45deg, #00C853, #64DD17);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 30px 0 10px;
    text-align: center;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    letter-spacing: -1px;
    text-transform: uppercase;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,200,83,0.3));
}

.celebration-text.wrong {
    background: linear-gradient(45deg, #FF5252, #FF1744);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(255,82,82,0.3));
}

/* Checkmark Animation */
.checkmark-circle {
    width: 120px;
    height: 120px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #00E676, #00C853);
    box-shadow: 0 10px 30px rgba(0, 200, 83, 0.4);
    animation: scaleCircle 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.checkmark-circle.wrong {
    background: linear-gradient(135deg, #FF5252, #D32F2F);
    box-shadow: 0 10px 30px rgba(211, 47, 47, 0.4);
}

/* Ripple Rings */
.checkmark-circle::before {
    content: '';
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border-radius: 50%;
    border: 3px solid rgba(0, 230, 118, 0.3);
    animation: ripple 2s infinite;
    z-index: -1;
}

.checkmark-circle.wrong::before {
    border-color: rgba(255, 82, 82, 0.3);
}

.checkmark-circle::after {
    content: '';
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-radius: 50%;
    border: 3px solid rgba(0, 230, 118, 0.15);
    animation: ripple 2s infinite 0.4s;
    z-index: -2;
}

.checkmark-circle.wrong::after {
    border-color: rgba(255, 82, 82, 0.15);
}

.checkmark.draw {
    width: 60px;
    height: 30px;
    border-left: 8px solid #ffffff;
    border-bottom: 8px solid #ffffff;
    transform: rotate(-45deg) translate(5px, -5px);
    animation: checkmark 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    opacity: 0;
    box-shadow: -2px 2px 4px rgba(0,0,0,0.1);
}

.cross.draw {
    width: 60px;
    height: 60px;
    position: relative;
    animation: crossRotate 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
    opacity: 0;
}

.cross.draw::before, .cross.draw::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 4px;
    top: 50%;
    left: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cross.draw::before {
    transform: rotate(45deg);
}

.cross.draw::after {
    transform: rotate(-45deg);
}

@keyframes elasticPop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes scaleCircle {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes checkmark {
    0% { width: 0; height: 0; opacity: 0; }
    50% { width: 60px; height: 0; opacity: 1; }
    100% { width: 60px; height: 30px; opacity: 1; }
}

@keyframes crossRotate {
    0% { transform: scale(0) rotate(-90deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes ripple {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes smoothScaleIn {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 14px;
    background: #FFD700;
    top: -10%;
    z-index: 1;
    animation: confettiFall 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
    opacity: 0;
}

/* Premium Confetti Colors */
.confetti-piece:nth-child(odd) { border-radius: 4px; }
.confetti-piece:nth-child(even) { border-radius: 50%; }

.confetti-piece:nth-child(1) { left: 5%; background: #009688; animation-delay: 0s; }
.confetti-piece:nth-child(2) { left: 15%; background: #FFD700; animation-delay: 0.5s; }
.confetti-piece:nth-child(3) { left: 25%; background: #00BCD4; animation-delay: 0.2s; }
.confetti-piece:nth-child(4) { left: 35%; background: #E0F2F1; animation-delay: 0.7s; }
.confetti-piece:nth-child(5) { left: 45%; background: #4DB6AC; animation-delay: 0.3s; }
.confetti-piece:nth-child(6) { left: 55%; background: #FFCA28; animation-delay: 0.8s; }
.confetti-piece:nth-child(7) { left: 65%; background: #26C6DA; animation-delay: 0.4s; }
.confetti-piece:nth-child(8) { left: 75%; background: #009688; animation-delay: 0.9s; }
.confetti-piece:nth-child(9) { left: 85%; background: #FFD700; animation-delay: 0.1s; }
.confetti-piece:nth-child(10) { left: 95%; background: #00BCD4; animation-delay: 0.6s; }
.confetti-piece:nth-child(11) { left: 10%; background: #E0F2F1; animation-delay: 1.2s; }
.confetti-piece:nth-child(12) { left: 60%; background: #4DB6AC; animation-delay: 1.5s; }
.confetti-piece:nth-child(13) { left: 40%; background: #26C6DA; animation-delay: 1.8s; }

@keyframes confettiFall {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* Time's Up Overlay */
.times-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 235, 238, 0.9); /* Light red overlay */
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.times-up-content {
    text-align: center;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.times-up-content h1 {
    font-size: 2.2em;
    color: #E53935;
    margin: 10px 0;
    text-shadow: 0 0 20px rgba(229, 57, 53, 0.2);
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Striped Header Pattern */
.striped-header-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: repeating-linear-gradient(
        45deg,
        #009688,
        #009688 10px,
        #E0F2F1 10px,
        #E0F2F1 20px
    );
}

/* Result Screen Styling */
.result-card-design {
    padding: 40px 30px !important;
}

.result-header {
    margin-bottom: 30px;
}

.result-header h1 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.result-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

.trophy-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trophy-icon {
    font-size: 5rem;
    z-index: 2;
    animation: trophyBounce 2s infinite ease-in-out;
    filter: drop-shadow(0 10px 20px rgba(255, 193, 7, 0.4));
    cursor: default;
}

.trophy-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 213, 79, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: glowPulse 2s infinite ease-in-out;
}

.star-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.star-burst span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.5rem;
    color: #FFD54F;
    opacity: 0;
}

.star-burst span:nth-child(1) { animation: starBurst1 2s infinite ease-out; animation-delay: 0.2s; }
.star-burst span:nth-child(2) { animation: starBurst2 2s infinite ease-out; animation-delay: 0.5s; }
.star-burst span:nth-child(3) { animation: starBurst3 2s infinite ease-out; animation-delay: 0.8s; }
.star-burst span:nth-child(4) { animation: starBurst4 2s infinite ease-out; animation-delay: 1.1s; }
.star-burst span:nth-child(5) { animation: starBurst5 2s infinite ease-out; animation-delay: 1.4s; }

.score-card {
    background: rgb(250, 250, 250);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    margin-bottom: 30px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
}

.score-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #90A4AE;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.score-value {
    font-size: 4rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 10px 0;
    line-height: 1;
    font-family: 'Segoe UI', sans-serif;
}

.score-points-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Animations */
@keyframes trophyBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.05); }
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0.2; }
}

@keyframes starBurst1 {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-120%, -120%) scale(1) rotate(-45deg); opacity: 0; }
}
@keyframes starBurst2 {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(20%, -140%) scale(1) rotate(0deg); opacity: 0; }
}
@keyframes starBurst3 {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(120%, -80%) scale(1) rotate(45deg); opacity: 0; }
}
@keyframes starBurst4 {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-100%, 50%) scale(1) rotate(-90deg); opacity: 0; }
}
@keyframes starBurst5 {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(100%, 50%) scale(1) rotate(90deg); opacity: 0; }
}


.waiting-player-name {
    font-size: 2.2rem !important;
    color: #009688 !important;
    font-weight: 600 !important;
    margin: 0 0 40px 0;
    letter-spacing: 1px;
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
}

.waiting-status-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #90A4AE;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 30px;
}

.waiting-sub-status {
    font-size: 0.95rem;
    color: #546E7A;
    font-style: italic;
    margin-top: 5px;
    font-weight: 500;
}

/* Pulse Circle Animation */
.waiting-pulse-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pulse-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #E0F2F1;
    border: 2px solid #009688;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 0 0 rgba(0, 150, 136, 0.7);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 150, 136, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(0, 150, 136, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 150, 136, 0);
    }
}
/* Student View Enhancements */
.student-card {
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--card-radius);
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 150, 136, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    color: var(--text-primary);
}

/* Join Screen Design - Exact Match */
.join-card-design {
    position: relative;
    max-width: 360px !important;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 150, 136, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    text-align: center;
    overflow: hidden; /* Ensure top bar stays inside */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.join-card-design:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 150, 136, 0.2);
}

/* The teal top border bar */
.join-card-header-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #009688;
}

.join-icon-wrapper {
    width: 72px;
    height: 72px;
    background: linear-gradient(180deg, #F0FCFC 0%, #E0F2F1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 25px auto;
    box-shadow: 0 5px 15px rgba(0, 150, 136, 0.05);
}

.join-card-design h1 {
    font-size: 1.5rem;
    color: #263238;
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: -0.3px;
    font-family: 'Segoe UI', sans-serif;
}

.modern-input {
    background-color: #F8F9FA !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important; /* Less rounded as per typical modern inputs */
    padding: 15px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #546E7A !important;
    /* text-align: center; */
    transition: all 0.2s ease;
    box-shadow: none !important;
    margin-bottom: 5px;
}

/* Placeholder Styling */
.modern-input::placeholder {
    color: #B0BEC5 !important;
    font-weight: 400;
    opacity: 1;
    letter-spacing: 1px;
    font-style: italic;
    font-size: 0.9em;
}

.modern-input:focus::placeholder {
    color: #CFD8DC !important;
    transition: color 0.3s ease;
}

.modern-input:focus {
    background-color: #FFFFFF !important;
    border-color: #B2DFDB !important;
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.1) !important;
}



.btn-join {
    background: #009688;
    border-radius: 8px; /* Matching input radius */
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 150, 136, 0.25);
    margin-top: 15px;
    text-transform: uppercase;
    width: 100%;
    border: none;
    color: white;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-join:hover {
    background: #00897B;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 150, 136, 0.35);
}

.btn-join:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 150, 136, 0.2);
}


.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-field {
    width: 100%;
    padding: 15px;
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1.1em;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.input-field:focus {
    border-color: var(--primary-color);
    background-color: #fff;
}

.btn-primary-lg {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 150, 136, 0.3);
}

.waiting-pulse {
    width: 80px;
    height: 80px;
    background-color: #E0F2F1;
    border-radius: 50%;
    margin: 30px auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
}

.waiting-pulse::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: pulseRing 2s infinite;
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Enhanced Modal Styles */
.modal-content.modal-display {
    background: #FFFFFF;
    border: none;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 150, 136, 0.2);
    padding: 0;
    width: auto;
    min-width: 800px;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.modal-header {
    background-color: transparent;
    padding: 40px 30px 10px 30px;
    border-bottom: none;
    text-align: center;
    position: relative;
    z-index: 2;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
}

.modal-body {
    padding: 10px 40px 60px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}

/* Abstract Background Blobs */
.modal-body::before, .modal-body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    opacity: 0.4;
    animation: floatBlob 8s infinite ease-in-out;
}

.modal-body::before {
    width: 300px;
    height: 300px;
    background: #B2DFDB;
    top: -50px;
    left: -50px;
    animation-delay: 0s;
}

.modal-body::after {
    width: 250px;
    height: 250px;
    background: #E0F2F1;
    bottom: -50px;
    right: -50px;
    animation-delay: -4s;
}

@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, 20px) scale(1.1); }
}

.giant-id {
    font-size: 10rem;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
    letter-spacing: 15px;
    line-height: 1;
    position: relative;
    z-index: 1;
    
    /* Gradient Text */
    background: linear-gradient(135deg, #00897B 0%, #4DB6AC 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    /* Subtle drop shadow that doesn't conflict with gradient text */
    filter: drop-shadow(0 4px 6px rgba(0, 150, 136, 0.2));
    
    cursor: default;
    transition: transform 0.3s ease;
}

.giant-id:hover {
    transform: scale(1.02);
}

/* Global Icon Exit Button */
.icon-exit-btn {
    /* position: fixed;
    top: 20px;
    right: 20px; */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: white;
    border: 1px solid #e0e0e0;
    color: #546e7a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    z-index: 1000;
}

.icon-exit-btn:hover {
    background-color: #ffebee;
    color: #ef5350;
    border-color: #ffcdd2;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(239, 83, 80, 0.15);
}

.icon-exit-btn svg {
    width: 20px;
    height: 20px;
}

/* Tooltip for Exit Button */
.icon-exit-btn .tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: #37474f;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.icon-exit-btn:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Close Button Enhancement */
.close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #CFD8DC;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
}

.close:hover {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.1);
    transform: rotate(90deg);
}

.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-footer {
    padding: 15px;
    background-color: rgba(0, 150, 136, 0.03);
    border-top: 1px solid #E0F2F1;
}

.modal-footer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Notification Modal Styles */
.notification-card {
    background: #ffffff;
    border: 1px solid #B2DFDB;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 150, 136, 0.1);
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalSlideUp 0.3s ease-out;
}

.modal-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(0, 188, 212, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.notification-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: var(--text-primary);
    font-weight: 700;
}

.notification-card p {
    margin: 0 0 25px 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    background: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.2);
    color: white;
}

.btn-block:hover {
    background: #00897B;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 150, 136, 0.3);
}

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

#question-screen {
    /* Layout handled by inline styles and container */
    padding-bottom: 40px;
}

/* --- New Quiz Header & Card Design --- */

.quiz-header-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    border: 1px solid #ECEFF1;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu-btn {
    background-color: #F5F7F9;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: #546E7A;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.menu-btn:hover {
    background-color: #ECEFF1;
    color: #37474F;
}

.quiz-topic {
    font-weight: 600;
    color: #37474F;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

@media (min-width: 600px) {
    .quiz-topic {
        max-width: none;
    }
}

.header-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #FAFAFA;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    color: #37474F;
    border: 1px solid #ECEFF1;
    min-width: 80px;
    justify-content: center;
}

.header-timer.timer-warning {
    color: #FFA726;
    border-color: #FFE0B2;
    background-color: #FFF3E0;
}

.header-timer.timer-danger {
    color: #EF5350;
    border-color: #FFCDD2;
    background-color: #FFEBEE;
    animation: pulseRed 1s infinite;
}

.question-content-card {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    min-height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    margin-top: 60px;
    text-align: left;
}

.question-label {
    width:fit-content;
    color: #90A4AE;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
    background: #F5F7F9;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    /* Ensure left alignment */
    margin-left: 0;
}

.question-text {
    /* font-size: 1.25rem; */
    color: #263238;
    margin-bottom: 40px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
}

.options-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.question-content-card .option-btn {
    padding: 18px 25px;
    /* font-size: 1.1rem; */
    font-weight: 500;
    background-color: #FFFFFF !important;
    color: var(--text-secondary);
    border: 1px solid #E0F2F1;
    border-radius: 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%;
    animation: fadeInUp 0.5s ease-out backwards;
}

.question-content-card .option-btn:hover {
    background-color: #FAFAFA !important;
    transform: translateX(3px);
    border-color: #B2DFDB;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.question-content-card .option-btn:active {
    transform: translateX(3px) scale(0.98);
    background-color: #F5F5F5 !important;
}

.question-content-card .option-btn .opt-label {
    background-color: #FAFAFA;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 1px solid #E0F2F1;
    transition: all 0.2s ease;
}

.question-content-card .option-btn:hover .opt-label {
    background-color: #E0F2F1;
    color: var(--primary-color);
    border-color: #B2DFDB;
}

/* Selected state styling */
.question-content-card .option-btn.selected {
    border: 1px solid var(--success-color);
    background: #E0F2F1 !important;
    color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--success-color);
}

.question-content-card .option-btn.selected .opt-label {
    background-color: var(--success-color);
    color: #fff;
    box-shadow: 0 2px 4px rgba(77, 182, 172, 0.3);
    border: none;
}

.question-content-card .option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.question-content-card .option-btn.correct-highlight {
    border: 1px solid var(--success-color) !important;
    background: #E0F2F1 !important;
    color: var(--primary-color) !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px rgba(77, 182, 172, 0.2);
}

.question-content-card .option-btn.correct-highlight .opt-label {
    background-color: var(--success-color);
    color: #fff;
    border: none;
}

.question-content-card .option-btn.wrong-highlight {
    border: 1px solid var(--danger-color) !important;
    background: #FFEBEE !important;
    color: var(--danger-color) !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px rgba(239, 83, 80, 0.2);
}

.question-content-card .option-btn.wrong-highlight .opt-label {
    background-color: var(--danger-color);
    color: #fff;
    border: none;
}

/* Modern App Header */
.app-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    padding: 15px 30px;
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 150, 136, 0.05);
    border: 1px solid #E0F2F1;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-title h1 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
}

.badge-role {
    background-color: #E0F2F1;
    color: var(--primary-color);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid #B2DFDB;
}

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

.stat-pill {
    background-color: #F9F9F9;
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #EEEEEE;
    transition: transform 0.2s, border-color 0.2s;
    cursor: default;
}

.stat-pill:hover {
    transform: translateY(-2px);
    border-color: #B2DFDB;
    background-color: #FFFFFF;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Consolas', monospace;
}

#room-id-display {
    color: var(--primary-color);
}

/* Styled Student List for Answers Sidebar */
.student-list-styled {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #B2DFDB transparent;
}

/* Custom Scrollbar for Student Lists */
.student-list-styled::-webkit-scrollbar,
.widget-body::-webkit-scrollbar {
    width: 6px;
}

.student-list-styled::-webkit-scrollbar-track,
.widget-body::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
}

.student-list-styled::-webkit-scrollbar-thumb,
.widget-body::-webkit-scrollbar-thumb {
    background: #B2DFDB;
    border-radius: 3px;
}

.student-list-styled::-webkit-scrollbar-thumb:hover,
.widget-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

.student-list-styled li {
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
    color: var(--text-primary);
}

.student-list-styled li:hover {
    background-color: #F9F9F9;
}

.student-list-styled li:last-child {
    border-bottom: none;
}

.student-status {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 24px;
    border-radius: 50%;
}

/* Student Widget (Dropdown from Stat Pill) */
.student-widget {
    position: absolute;
    top: 70px; /* Below header */
    left: 50%; /* Default center */
    transform: translateX(-50%) translateY(-10px);
    width: 280px;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E0E0E0;
}

.student-widget.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.widget-header {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F8F9FA;
    border-bottom: 1px solid #E0E0E0;
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.widget-icon {
    font-size: 1.1em;
    color: var(--primary-color);
}

.widget-label {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-primary);
}

.badge-count {
    background-color: var(--primary-color);
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    margin-left: auto;
}

.btn-icon-small {
    display: none; /* Hide minimize button as it's now a dropdown */
}

.widget-body {
    max-height: 400px;
    overflow-y: auto;
}

/* --- Setup Mode Overrides (Waiting Room Style) --- */
/* In setup mode, we might want it always visible or larger? 
   User request implies click-to-show even "who is joining".
   Let's keep the dropdown behavior consistent for simplicity unless instructed otherwise.
   But maybe in setup mode it's centered? 
   Let's align it relative to the pill. 
   
   The pill is in the header. We need to position the widget relative to the pill using JS or fixed positioning.
   Using fixed positioning is safer to avoid overflow issues.
*/

.student-widget {
    /* Position fixed removed to allow scrolling with page */
    /* Top/Left will be set by JS */
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
}

.student-widget.active {
    transform: translateX(-50%) translateY(0);
}

.roster-list-styled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.roster-list-styled li {
    padding: 8px 24px;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: var(--text-primary);
}

.roster-list-styled li:last-child {
    border-bottom: none;
}

.roster-list-styled li:hover {
    background-color: #F9F9F9;
}

/* --- Setup Mode Overrides (Waiting Room Style) --- */

/* Ensure hidden sidebar doesn't take space in flex layout */
.sidebar-column.hidden {
    display: none !important;
}

/* Animations for Question Screen */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#question-text {
    animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

.option-btn {
    animation: fadeInUp 0.5s ease-out backwards;
}

.option-btn:nth-child(1) { animation-delay: 0.1s; }
.option-btn:nth-child(2) { animation-delay: 0.2s; }
.option-btn:nth-child(3) { animation-delay: 0.3s; }
.option-btn:nth-child(4) { animation-delay: 0.4s; }


/* --- Responsive Enhancements --- */

/* Controls Row Layout */
.controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.controls-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Setup Room ID */
.setup-room-id {
    font-size: 3em;
    font-weight: 600;
    color: #4caf50; /* Fallback */
    color: var(--primary-color);
    letter-spacing: 5px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.setup-room-id:hover {
    transform: scale(1.05);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    /* Font Size Adjustments */
    .setup-room-id {
        font-size: 2em;
        letter-spacing: 2px;
    }

    .giant-id {
        font-size: 3.5rem; /* Reduced from 6rem */
        letter-spacing: 8px;
    }

    /* Card Padding Adjustments */
    .question-content-card,
    .result-card-design,
    .student-card {
        padding: 20px !important;
    }

    .question-text {
        /* font-size: 1.2rem; */
    }

    /* Header Adjustments */
    .app-header {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        border-radius: 15px;
    }

    .header-title {
        width: 100%;
        justify-content: center;
    }

    .header-stats {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Student View Adjustments */
    .quiz-topic {
        max-width: 120px; /* Smaller max-width for mobile */
    }

    .quiz-header-card {
        padding: 10px;
    }

    /* Controls Adjustments */
    .controls-row {
        flex-direction: column;
        align-items: stretch;
    }

    .controls-group {
        flex-direction: column;
        width: 100%;
    }

    .controls-group .btn, 
    .controls-row > .btn {
        width: 100%;
        margin: 5px 0;
        justify-content: center;
    }

    /* Student Widget Mobile */
    .student-widget {
        width: 90%;
        max-width: none;
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
    }
    
    .student-widget.active {
        transform: translateX(-50%) translateY(0);
    }
    
    /* Ensure summary dashboard grid works well */
    .summary-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .performers-grid {
        flex-direction: column;
        align-items: center;
    }
    
    .performer-card { /* Assuming this class exists or will be used */
        width: 100%;
    }
}

/* Broadcast Icon Animation */
button:not(:disabled) .broadcast-icon path {
    animation: broadcastPulse 1.5s infinite ease-in-out;
}

@keyframes broadcastPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Inner waves */
.broadcast-icon path:nth-of-type(1),
.broadcast-icon path:nth-of-type(2) {
    animation-delay: 0s;
}

/* Outer waves */
.broadcast-icon path:nth-of-type(3),
.broadcast-icon path:nth-of-type(4) {
    animation-delay: 0.4s;
}

/* Live Responses List Styling */
#answers-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.student-response-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.student-response-row:last-child {
    border-bottom: none;
}

.s-name {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1; /* Takes available space */
}

.s-response-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    /* min-width: 40px; */
}

.resp-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.resp-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.resp-val.correct { color: #4caf50; }
.resp-val.incorrect { color: #f44336; }

.s-status-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* min-width: 100px; */
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.status-pill.status-correct {
    background-color: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.status-pill.status-incorrect {
    background-color: #ffebee;
    color: #c62828;
    border-color: #ffcdd2;
}

.status-pill.status-no-answer {
    background-color: #fff8e1;
    color: #f57f17;
    border-color: #ffecb3;
}

.status-icon {
    font-size: 1.1em;
}

/* View Modes */
#answers-list.view-status .s-response-col {
    display: none;
}

#answers-list.view-names .s-response-col,
#answers-list.view-names .s-status-col {
    display: none;
}

.live-dot {
    color: #4caf50;
    margin-right: 5px;
    animation: blink 2s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}