@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&display=swap');

/* ============================================================
   LED SCREEN STYLESHEET  (thiết kế lại: sáng hơn + tự co giãn)
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Montserrat', Arial, sans-serif;
    /* Nền sáng hơn: xanh nước biển sáng -> xanh đậm */
    background:
        radial-gradient(circle at 50% 0%, #1E6FE0 0%, #0B3A91 55%, #08265F 100%);
    color: #ffffff;
}

/* ---------- Lớp nền trang trí nhẹ ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 40px);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   KHUNG MÀN HÌNH CHUNG - tự co giãn vừa viewport
   ============================================================ */
.screen {
    display: none;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: clamp(10px, 1.6vh, 26px) clamp(16px, 3vw, 56px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.4vh, 22px);
}

.screen.active {
    display: flex;
    animation: fadeIn .35s ease;
}

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

/* Tiêu đề lớn dùng chung */
.reveal-title,
.score-title,
.part-title,
.explain-title {
    font-size: clamp(22px, 3.4vmin, 56px);
    font-weight: 900;
    color: #FFE14D;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
    text-align: center;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* ============================================================
   MÀN HÌNH CHÀO MỪNG
   ============================================================ */
.welcome-bg { text-align: center; }
.welcome-bg .title {
    font-size: clamp(28px, 5.2vmin, 92px);
    font-weight: 900;
    color: #FFE14D;
    text-shadow: 0 0 30px rgba(255,225,77,.45);
    letter-spacing: 3px;
}
.welcome-bg .org {
    font-size: clamp(16px, 2.6vmin, 44px);
    color: #B3D4FF;
    margin-top: 1vmin;
}
.welcome-bg h1 {
    font-size: clamp(20px, 3.8vmin, 64px);
    margin-top: 4vmin;
    font-weight: 600;
    color: #ffffff;
}

/* ============================================================
   MÀN HÌNH CÂU HỎI (Bước 1-2 và quay lại ở Bước 4-5)
   ============================================================ */
#screen-mc {
    justify-content: flex-start;
    padding-top: clamp(12px, 2vh, 32px);
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: clamp(6px, 1.2vh, 18px);
}
.question-number {
    font-size: clamp(18px, 2.6vmin, 44px);
    font-weight: 900;
    color: #FFE14D;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Đồng hồ đếm ngược */
.timer {
    font-size: clamp(26px, 5vmin, 80px);
    font-weight: 900;
    background: #E53935;
    padding: clamp(4px, .8vmin, 14px) clamp(16px, 3vmin, 52px);
    border-radius: clamp(8px, 1.4vmin, 22px);
    box-shadow: 0 8px 24px rgba(229,57,53,.45);
    min-width: clamp(80px, 14vmin, 200px);
    text-align: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.timer.timer-grey { background: #607D8B; box-shadow: 0 8px 24px rgba(96,125,139,.45); }

/* Hộp câu hỏi + đáp án chiếm phần còn lại, KHÔNG bị tràn */
.question-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;            /* cho phép con co lại */
    gap: clamp(8px, 1.6vh, 24px);
}
.question-text {
    flex: 0 1 auto;
    font-size: clamp(18px, 3vmin, 52px);
    font-weight: 800;
    text-align: center;
    line-height: 1.35;
    background: rgba(255,255,255,.95);
    color: #0D2A5C;
    border-radius: clamp(10px, 1.6vmin, 26px);
    padding: clamp(10px, 2vmin, 30px) clamp(14px, 2.6vmin, 42px);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    max-height: 42vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
}

/* Lưới 4 đáp án */
.options-region {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.options-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(8px, 1.6vmin, 26px);
    min-height: 0;
}
.option {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.6vmin, 26px);
    background: linear-gradient(135deg, #F4F8FF, #DCE9FF);
    color: #0D2A5C;
    border: 3px solid #6FA8FF;
    border-radius: clamp(10px, 1.6vmin, 26px);
    padding: clamp(8px, 1.4vmin, 24px) clamp(12px, 2vmin, 36px);
    font-size: clamp(16px, 2.4vmin, 42px);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
    min-height: 0;
    overflow: hidden;
}
.option .label {
    background: #1E6FE0;
    color: #fff;
    width: clamp(30px, 4.4vmin, 70px);
    height: clamp(30px, 4.4vmin, 70px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: clamp(18px, 2.8vmin, 46px);
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(30,111,224,.5);
}
.option .text {
    word-break: break-word;
    line-height: 1.25;
}

/* ---- Tô sáng đáp án ĐÚNG (vàng/xanh nhấp nháy - Bước 4) ---- */
.option.is-correct {
    background: linear-gradient(135deg, #FFEC8B, #FFD000);
    border-color: #FFFFFF;
    color: #5A3D00;
    animation: blinkCorrect 0.9s ease-in-out infinite alternate;
}
.option.is-correct .label {
    background: #2E7D32;
    box-shadow: 0 0 18px rgba(46,125,50,.8);
}
@keyframes blinkCorrect {
    from { box-shadow: 0 8px 20px rgba(255,208,0,.5), 0 0 0 rgba(76,175,80,0); border-color:#FFFFFF; }
    to   { box-shadow: 0 8px 20px rgba(76,175,80,.7), 0 0 26px rgba(76,175,80,.85); border-color:#69F0AE; }
}
/* Làm mờ các đáp án sai */
.option.is-dimmed {
    opacity: .38;
    filter: grayscale(.4);
}

/* ============================================================
   MÀN HÌNH ĐÁP ÁN CÁC ĐỘI (Bước 3) - xếp nhanh -> chậm
   ============================================================ */
#screen-reveal-teams { justify-content: center; }
.team-answers-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(10px, 1.8vmin, 30px);
    width: 100%;
    flex-wrap: nowrap;
}
.team-ans-card {
    flex: 1 1 0;
    background: rgba(255,255,255,.97);
    color: #0D2A5C;
    border: 3px solid #6FA8FF;
    border-radius: clamp(12px, 2vmin, 32px);
    padding: clamp(12px, 2vmin, 32px) clamp(10px, 1.6vmin, 28px);
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(4px, 1vmin, 16px);
    min-width: 0;
}
/* Huy hiệu thứ tự nhanh/chậm (1,2,3,4) */
.team-ans-rank {
    align-self: center;
    background: #1E6FE0;
    color: #fff;
    border-radius: 50%;
    width: clamp(26px, 3.4vmin, 56px);
    height: clamp(26px, 3.4vmin, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: clamp(14px, 2vmin, 34px);
}
.team-ans-rank.gold { background: #F9A825; }
.team-ans-name {
    font-size: clamp(14px, 1.9vmin, 34px);
    font-weight: 800;
    color: #1565C0;
    text-transform: uppercase;
    line-height: 1.15;
    word-break: break-word;
}
.team-ans-val {
    font-size: clamp(36px, 8vmin, 130px);
    font-weight: 900;
    color: #0D2A5C;
    line-height: 1;
}
.team-ans-time {
    font-size: clamp(13px, 1.7vmin, 30px);
    color: #455A64;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   MÀN HÌNH GIẢI THÍCH (Bước 5) - overlay che 4 đáp án
   ============================================================
   Dùng chung cấu trúc màn câu hỏi; lớp .explain-overlay phủ lên
   phía dưới (chỉa che 4 đáp án A B C D), để lộ câu hỏi bên trên.
*/
#screen-explain {
    justify-content: flex-start;
    padding-top: clamp(12px, 2vh, 32px);
}
.explain-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.6vh, 24px);
}
/* Lớp phủ giải thích chiếm đúng vùng 4 đáp án phía dưới */
.explain-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(13,42,92,.97), rgba(8,38,95,.98));
    border: 3px solid #FFE14D;
    border-radius: clamp(12px, 2vmin, 32px);
    padding: clamp(14px, 2.6vmin, 44px) clamp(18px, 3vmin, 56px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0,0,0,.5);
    animation: riseUp .4s ease;
    overflow: hidden;
}
@keyframes riseUp {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.explain-overlay .explain-title {
    font-size: clamp(18px, 2.6vmin, 46px);
    color: #FFE14D;
    margin-bottom: clamp(8px, 1.4vmin, 22px);
    flex-shrink: 0;
    text-align: center;
}
.explain-content {
    flex: 1 1 auto;
    font-size: clamp(20px, 3vmin, 52px);
    line-height: 1.5;
    color: #FFFFFF;
    text-align: justify;
    overflow: auto;
    font-weight: 600;
    padding-right: .4em;
}
.explain-content::-webkit-scrollbar { width: 8px; }
.explain-content::-webkit-scrollbar-thumb { background: rgba(255,225,77,.5); border-radius: 4px; }

.explain-correct-row {
    flex-shrink: 0;
    margin-top: clamp(8px, 1.4vmin, 22px);
    font-size: clamp(16px, 2.4vmin, 42px);
    font-weight: 900;
    text-align: center;
    color: #FFFFFF;
}
.explain-correct-row .ans {
    color: #69F0AE;
    background: rgba(46,125,50,.25);
    padding: 0 .4em;
    border-radius: .2em;
}

/* ============================================================
   MÀN HÌNH CỘNG ĐIỂM (Bước 6)
   - Trên cùng: tổng điểm kiến thức 4 đội
   - Chính giữa: 4 ô điểm câu hỏi to đẹp
   ============================================================ */
#screen-score { justify-content: flex-start; }

.score-top {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1vmin, 16px);
    margin-bottom: clamp(10px, 2vh, 30px);
}
.score-top h2 {
    font-size: clamp(16px, 2.2vmin, 38px);
    font-weight: 800;
    color: #B3D4FF;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.knowledge-totals {
    display: flex;
    gap: clamp(8px, 1.6vmin, 26px);
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}
.kt-card {
    background: rgba(255,255,255,.10);
    border: 2px solid rgba(255,255,255,.35);
    border-radius: clamp(10px, 1.6vmin, 24px);
    padding: clamp(6px, 1vmin, 18px) clamp(14px, 2.4vmin, 40px);
    text-align: center;
    min-width: clamp(120px, 18vmin, 280px);
}
.kt-card .kt-name {
    font-size: clamp(13px, 1.8vmin, 30px);
    font-weight: 800;
    color: #B3D4FF;
    text-transform: uppercase;
}
.kt-card .kt-val {
    font-size: clamp(20px, 3.4vmin, 60px);
    font-weight: 900;
    color: #FFE14D;
    line-height: 1.1;
}

/* 4 ô điểm câu hỏi ở chính giữa */
.bonus-grid {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    gap: clamp(12px, 2.4vmin, 40px);
    justify-content: center;
    align-items: stretch;
    min-height: 0;
}
.bonus-card {
    flex: 1 1 0;
    border-radius: clamp(14px, 2.4vmin, 40px);
    padding: clamp(14px, 2.4vmin, 44px) clamp(10px, 1.6vmin, 30px);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(6px, 1.2vmin, 22px);
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
    border: 4px solid rgba(255,255,255,.6);
    min-width: 0;
}
.bonus-card.correct {
    background: linear-gradient(160deg, #2E7D32, #1B5E20);
    border-color: #B9F6CA;
}
.bonus-card.wrong {
    background: linear-gradient(160deg, #C62828, #8E1B1B);
    border-color: #FFCDD2;
}
.bonus-card.noanswer {
    background: linear-gradient(160deg, #546E7A, #37474F);
    border-color: #CFD8DC;
}
.bonus-team {
    font-size: clamp(16px, 2.4vmin, 44px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    word-break: break-word;
}
.bonus-ans {
    font-size: clamp(14px, 2vmin, 36px);
    font-weight: 800;
    color: #E3F2FD;
}
.bonus-points {
    font-size: clamp(40px, 10vmin, 160px);
    font-weight: 900;
    color: #FFE14D;
    line-height: 1;
    text-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.bonus-card.wrong .bonus-points,
.bonus-card.noanswer .bonus-points { color: #FFFFFF; opacity: .9; }
.bonus-time {
    font-size: clamp(12px, 1.7vmin, 30px);
    color: rgba(255,255,255,.85);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   MÀN HÌNH TỰ LUẬN (essay_answer)
   ============================================================ */
#screen-essay { justify-content: flex-start; padding-top: clamp(8px,1.4vh,20px); }
.essay-score-bar{flex-shrink:0;display:flex;gap:clamp(8px,1.6vmin,24px);width:90%;justify-content:center;}
.es-team-chip{flex:1 1 0;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.35);border-radius:clamp(8px,1.4vmin,20px);padding:clamp(6px,1.2vmin,18px);text-align:center;min-width:0;}
.es-name{font-size:clamp(12px,1.6vmin,26px);font-weight:800;color:#B3D4FF;text-transform:uppercase;}
.es-score{font-size:clamp(20px,3.4vmin,56px);font-weight:900;color:#FFE14D;line-height:1.1;}
.essay-question-frame{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:88%;min-height:0;background:rgba(255,255,255,.95);border:4px solid #1E6FE0;border-radius:clamp(14px,2.4vmin,38px);padding:clamp(16px,2.8vmin,48px) clamp(20px,3.2vmin,56px);box-shadow:0 16px 48px rgba(0,0,0,.4);}
.essay-question-label{font-size:clamp(20px,3vmin,50px);font-weight:900;color:#E53935;text-align:center;margin-bottom:clamp(8px,1.4vmin,22px);text-transform:uppercase;letter-spacing:2px;}
.essay-question-text{font-size:clamp(22px,3.6vmin,60px);font-weight:800;color:#0D2A5C;text-align:center;line-height:1.4;max-height:100%;overflow:auto;word-break:break-word;}

/* ===== MÀN CHỌN GÓI ===== */
#screen-essay-pick{justify-content:center;gap:clamp(16px,3vmin,48px);}
.ep-title{font-size:clamp(24px,4vmin,68px);font-weight:900;color:#FFE14D;text-shadow:0 0 30px rgba(255,225,77,.4);}
.ep-grid{display:flex;gap:clamp(14px,2.4vmin,40px);justify-content:center;flex-wrap:wrap;}
.ep-card{width:clamp(140px,20vmin,300px);background:linear-gradient(160deg,#1E6FE0,#0D47A1);border:4px solid #90CAF9;border-radius:clamp(16px,2.6vmin,40px);padding:clamp(20px,4vmin,64px) clamp(14px,2vmin,36px);text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.4);}
.ep-card.used{opacity:.3;filter:grayscale(.8);}
.ep-card .ep-name{font-size:clamp(20px,3.2vmin,52px);font-weight:900;color:#fff;}

/* ============================================================
   MÀN HÌNH ĐIỂM PHẦN THI
   ============================================================ */
#screen-part-score { justify-content: center; }
#part-score-table {
    width: 90%;
    max-width: 1300px;
    font-size: clamp(16px, 2.2vmin, 40px);
    background: rgba(255,255,255,.12);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: clamp(12px, 2vmin, 32px);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
#part-score-table th {
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    color: #FFE14D;
    padding: clamp(8px, 1.6vmin, 26px) clamp(6px, 1vmin, 18px);
    font-weight: 800;
    text-transform: uppercase;
}
#part-score-table td {
    padding: clamp(8px, 1.4vmin, 24px) clamp(6px, 1vmin, 18px);
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
    background: rgba(255,255,255,.05);
}
#part-score-table td:last-child {
    font-weight: 900;
    color: #69F0AE;
    font-size: clamp(20px, 3vmin, 56px);
}

/* ============================================================
   MÀN HÌNH KẾT QUẢ CHUNG CUỘC (REVEAL)
   ============================================================ */
#screen-final { justify-content: center; }
.final-title {
    font-size: clamp(24px, 4.2vmin, 76px);
    font-weight: 900;
    color: #FFE14D;
    text-shadow: 0 0 30px rgba(255,225,77,.4);
    margin-bottom: clamp(14px, 2.4vh, 36px);
    flex-shrink: 0;
    text-align: center;
}
.final-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vmin, 28px);
    width: 92%;
    align-items: center;
}
.final-grid .final-row {
    display: flex;
    gap: clamp(10px, 1.8vmin, 28px);
    width: 100%;
    justify-content: center;
}
.final-card {
    flex: 1 1 0;
    max-width: clamp(200px, 28vmin, 400px);
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #0D2A5C, #1a4a8f);
    border-radius: clamp(14px, 2.4vmin, 36px);
    padding: clamp(16px, 3vmin, 48px) clamp(12px, 2vmin, 32px);
    text-align: center;
    border: 4px solid rgba(255,255,255,.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.4vmin, 20px);
    transition: all .4s;
}
.final-card .f-rank {
    font-size: clamp(16px, 2.4vmin, 38px);
    font-weight: 900;
    color: #FFE14D;
}
.final-card .f-name {
    font-size: clamp(18px, 2.8vmin, 46px);
    font-weight: 900;
    text-transform: uppercase;
    filter: blur(12px);
    transition: filter .6s;
    color: #fff;
}
.final-card .f-score {
    font-size: clamp(22px, 3.4vmin, 56px);
    font-weight: 900;
    color: #69F0AE;
    filter: blur(8px);
    transition: filter .6s;
}
/* Đã tiết lộ */
.final-card.revealed { border-color: #FFE14D; animation: shakeCard .7s ease; }
.final-card.revealed .f-name,
.final-card.revealed .f-score { filter: blur(0); }
.final-card.revealed.gold { background: linear-gradient(160deg, #F9A825, #FFB300); border-color: #FFFFFF; box-shadow: 0 0 50px rgba(255,179,0,.7); }
.final-card.revealed.gold .f-rank,
.final-card.revealed.gold .f-name,
.final-card.revealed.gold .f-score { color: #0D2A5C; }

/* Pháo hoa cho hạng 1 */
.final-card.gold.revealed::before,
.final-card.gold.revealed::after {
    content: '';
    position: absolute;
    width: 100px; height: 100px;
    border-radius: 50%;
    animation: firework 1.5s ease-out infinite;
    pointer-events: none;
}
.final-card.gold.revealed::before {
    background: radial-gradient(circle, #FFD700, transparent 70%);
    top: -30px; left: 10%;
    animation-delay: 0s;
}
.final-card.gold.revealed::after {
    background: radial-gradient(circle, #FF6B6B, transparent 70%);
    top: -20px; right: 10%;
    animation-delay: .5s;
}

@keyframes shakeCard {
    0%,100% { transform: translateX(0); }
    15% { transform: translateX(-8px) rotate(-1deg); }
    30% { transform: translateX(8px) rotate(1deg); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(6px); }
    75% { transform: translateX(-3px); }
    90% { transform: translateX(3px); }
}
@keyframes firework {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(2.5); opacity: .8; }
    100% { transform: scale(4); opacity: 0; }
}