/* ============================================================
   File: assets/css/team.css
   Máy đội thi — phong cách tối + vàng đồng, đồng bộ với màn LED.
   Thiết kế cho chế độ TOÀN MÀN HÌNH (không thanh cuộn, chữ tự co).
   ============================================================ */

@import url('../vendor/fonts.css');

:root {
    --bg-0: #170306;
    --bg-1: #2A0509;
    --gold: #D9AE4E;
    --gold-bright: #F4D98C;
    --ink: #FBF3E4;
    --ink-soft: #E8D9BF;
    --ink-dim: #B9A488;
    --ok: #56D98A;
    --bad: #FF7A7A;
    --glass-bg: rgba(255, 246, 228, .065);
    --glass-line: rgba(233, 196, 106, .30);
    --glass-line-soft: rgba(255, 246, 228, .13);
    --shadow-deep: 0 18px 50px rgba(0, 0, 0, .58);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden;                 /* toàn màn hình: không có thanh cuộn */
    background: var(--bg-1); color: var(--ink);
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    user-select: none;                /* hạn chế bôi đen/sao chép */
}

body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        url('../img/bg/pattern-star.svg') repeat,
        radial-gradient(120% 80% at 15% -10%, #6B1220 0%, transparent 55%),
        radial-gradient(110% 70% at 90% 5%, #4A0B14 0%, transparent 58%),
        linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 45%, #0D0204 100%);
    opacity: .98;
}

.theme-team { display: flex; flex-direction: column; position: relative; z-index: 1; }

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    border-radius: clamp(12px, 1.6vmin, 24px);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, .07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: rgba(18, 24, 38, .94); }
}

/* ============================================================
   MÀN CHỌN ĐỘI
   ============================================================ */
.pick-body { display: flex; align-items: center; justify-content: center; padding: clamp(12px, 2.4vmin, 40px); }
.pick-wrap { width: min(900px, 94vw); position: relative; z-index: 2; }
.pick-card { padding: clamp(18px, 3.4vmin, 52px) clamp(18px, 3vmin, 46px); text-align: center; }
.pick-icon { font-size: clamp(30px, 6vmin, 84px); color: var(--gold-bright); margin-bottom: clamp(4px, 1vmin, 12px); }
.pick-card h2 {
    margin: 0 0 .3em; font-size: clamp(19px, 3.4vmin, 50px); font-weight: 900; letter-spacing: .06em;
    background: linear-gradient(100deg, #FFF6D8, var(--gold-bright) 45%, var(--gold));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.pick-card p { margin: 0 0 clamp(12px, 2.2vmin, 32px); font-size: clamp(12px, 1.7vmin, 24px); color: var(--ink-soft); line-height: 1.5; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.5vmin, 22px); }
@media (max-width: 620px) { .pick-grid { grid-template-columns: minmax(0, 1fr); } }

.pick-btn {
    position: relative;
    display: flex; align-items: center; gap: clamp(8px, 1.2vmin, 18px);
    padding: clamp(13px, 2.4vmin, 34px) clamp(12px, 1.6vmin, 26px);
    border-radius: clamp(10px, 1.4vmin, 20px);
    border: 2px solid var(--glass-line-soft);
    background: rgba(255, 255, 255, .05);
    color: var(--ink); font-family: inherit; font-weight: 900;
    font-size: clamp(14px, 2.1vmin, 30px); text-align: left;
    cursor: pointer; transition: all .18s; min-height: clamp(56px, 9vmin, 120px);
    min-width: 0;
}
.pick-btn:hover { border-color: var(--gold); background: rgba(212, 175, 55, .12); transform: translateY(-2px); }
.pick-btn.sel {
    border-color: var(--gold); background: linear-gradient(135deg, rgba(212,175,55,.32), rgba(255,255,255,.06));
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .3), 0 14px 40px rgba(212, 175, 55, .25);
    color: #FFF6D8;
}
.pick-btn .pick-idx {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: clamp(30px, 4.4vmin, 62px); height: clamp(30px, 4.4vmin, 62px);
    border-radius: 50%; font-size: clamp(13px, 1.9vmin, 28px); font-weight: 900;
    color: #0A0E17; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}
.pick-btn .pick-nm { flex: 1; min-width: 0; word-break: break-word; line-height: 1.2; }
.pick-btn .pick-tick {
    flex: 0 0 auto; font-size: clamp(16px, 2.4vmin, 34px); color: var(--gold-bright);
    opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s;
}
.pick-btn.sel .pick-tick { opacity: 1; transform: none; }

/* Nút VÀO THI */
.btn-vao-thi {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    width: 100%; margin-top: clamp(12px, 2vmin, 30px);
    padding: clamp(13px, 2.2vmin, 30px) clamp(14px, 2vmin, 32px);
    border-radius: clamp(10px, 1.4vmin, 20px); border: none;
    font-family: inherit; font-weight: 900; letter-spacing: .04em;
    font-size: clamp(15px, 2.2vmin, 32px); color: #0A0E17; cursor: pointer;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    box-shadow: 0 12px 34px rgba(212, 175, 55, .4);
    transition: transform .16s, box-shadow .16s, opacity .16s;
}
.btn-vao-thi:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(212, 175, 55, .55); }
.btn-vao-thi:disabled {
    opacity: .42; cursor: not-allowed; box-shadow: none;
    background: rgba(255, 255, 255, .1); color: var(--ink-dim);
}
.pick-hint {
    margin-top: clamp(6px, 1.1vmin, 16px); text-align: center;
    font-size: clamp(11px, 1.5vmin, 20px); font-weight: 800; color: var(--ink-dim);
}
.pick-hint b { color: var(--gold-bright); }
.pick-note {
    margin-top: clamp(12px, 2.2vmin, 30px);
    font-size: clamp(10px, 1.4vmin, 19px); font-weight: 700; color: var(--ink-dim);
    line-height: 1.5; border-top: 1px solid var(--glass-line-soft); padding-top: clamp(8px, 1.6vmin, 22px);
}
.pick-note i { color: var(--gold); }

/* ============================================================
   THANH TRÊN
   ============================================================ */
.topbar {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(8px, 1.6vmin, 24px);
    padding: clamp(8px, 1.4vmin, 20px) clamp(12px, 2.2vmin, 34px);
    background: linear-gradient(100deg, rgba(212, 175, 55, .16), rgba(255, 255, 255, .05));
    border-bottom: 1px solid var(--glass-line);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.tb-team {
    font-size: clamp(13px, 2.2vmin, 32px); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
    color: #FFF6D8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tb-team i { color: var(--gold-bright); }
.tb-right { display: flex; gap: clamp(6px, 1.2vmin, 16px); flex-shrink: 0; flex-wrap: wrap; }
.tb-chip {
    display: inline-flex; align-items: center; gap: .45em;
    font-size: clamp(10px, 1.4vmin, 19px); font-weight: 800;
    padding: .45em 1em; border-radius: 999px; white-space: nowrap;
    background: rgba(0, 0, 0, .3); border: 1px solid var(--glass-line-soft);
    color: var(--ink-soft);
}
.tb-chip.ok  { color: #A7F3C8; border-color: rgba(34, 197, 94, .5); }
.tb-chip.bad { color: #FFB3B3; border-color: rgba(239, 68, 68, .55); }
.tb-chip.warn{ color: #FFE0A3; border-color: rgba(245, 158, 11, .55); }

/* ============================================================
   MÀN HÌNH
   ============================================================ */
.main { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; padding: clamp(10px, 1.8vmin, 26px); position: relative; z-index: 2; }
.screen { display: none; width: 100%; max-width: 1600px; flex-direction: column; min-height: 0; }
.screen.active { display: flex; animation: fadeIn .28s ease-in-out; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Màn chờ */
.idle-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(6px, 1.4vmin, 20px); }
.idle-big { font-size: clamp(24px, 5vmin, 78px); font-weight: 900; color: var(--gold-bright); display: flex; align-items: center; gap: .4em; }
.idle-sub { margin: 0; font-size: clamp(12px, 1.8vmin, 26px); font-weight: 700; color: var(--ink-dim); }

/* Thanh trạng thái + đồng hồ */
.status-row { display: flex; align-items: center; gap: clamp(8px, 1.6vmin, 24px); margin-bottom: clamp(8px, 1.4vmin, 20px); flex-shrink: 0; }
.status-text {
    flex: 1; min-width: 0;
    font-size: clamp(13px, 2vmin, 30px); font-weight: 900;
    padding: clamp(8px, 1.4vmin, 20px) clamp(12px, 2vmin, 28px);
    border-radius: clamp(10px, 1.2vmin, 18px);
    background: var(--glass-bg); border: 1px solid var(--glass-line-soft);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-text.locked { color: #FFB3B3; }
.status-text.open   { color: #A7F3C8; border-color: rgba(34, 197, 94, .45); }

.big-timer {
    flex-shrink: 0; text-align: center;
    font-size: clamp(30px, 7vmin, 110px); font-weight: 900; line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: clamp(110px, 15vmin, 250px);
    padding: .06em .35em; border-radius: clamp(10px, 1.4vmin, 22px);
    color: var(--gold-bright); background: rgba(212, 175, 55, .12);
    border: 2px solid var(--glass-line);
}
.big-timer.ok   { color: #A7F3C8; background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .5); }
.big-timer.idle { color: var(--ink-dim); background: rgba(255, 255, 255, .05); border-color: var(--glass-line-soft); }
.big-timer.danger { color: #FFE3E3; background: rgba(239, 68, 68, .22); border-color: rgba(239, 68, 68, .8);
    animation: timerPulse .9s ease-in-out infinite alternate; }
@keyframes timerPulse {
    from { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
    to   { box-shadow: 0 0 30px 6px rgba(239, 68, 68, .45); }
}

/* Khung câu hỏi */
.q-frame {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding: clamp(12px, 2vmin, 34px) clamp(14px, 2.2vmin, 38px);
}
.q-label {
    flex-shrink: 0; font-size: clamp(11px, 1.5vmin, 22px); font-weight: 900; letter-spacing: .08em;
    color: var(--gold-bright); margin-bottom: clamp(6px, 1vmin, 16px);
}
.q-text {
    flex-shrink: 0; max-height: 40%; overflow-y: auto;
    font-size: clamp(15px, 2.5vmin, 42px); font-weight: 700; line-height: 1.38;
    color: var(--ink); margin-bottom: clamp(10px, 1.6vmin, 24px);
}
.q-opts { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(8px, 1.3vmin, 20px); overflow-y: auto; }
@media (max-width: 760px), (max-aspect-ratio: 5/4) { .q-opts { grid-template-columns: minmax(0, 1fr); } }

/* Nút đáp án */
.ans-btn {
    display: flex; align-items: center; gap: clamp(8px, 1.4vmin, 22px);
    width: 100%; min-height: clamp(54px, 9vmin, 130px);
    padding: clamp(8px, 1.3vmin, 22px) clamp(10px, 1.8vmin, 28px);
    border-radius: clamp(10px, 1.4vmin, 20px);
    border: 2px solid var(--glass-line-soft);
    background: rgba(255, 255, 255, .05);
    color: var(--ink); font-family: inherit; font-weight: 800;
    font-size: clamp(13px, 2vmin, 32px); text-align: left; cursor: pointer;
    transition: transform .14s, box-shadow .14s, border-color .14s, background .14s;
}
.ans-btn .lb {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: clamp(34px, 5vmin, 76px); height: clamp(34px, 5vmin, 76px); border-radius: 50%;
    font-size: clamp(14px, 2.1vmin, 34px); font-weight: 900; color: #0A0E17;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
}
.ans-btn .tx { flex: 1; min-width: 0; word-break: break-word; line-height: 1.28; }
.ans-btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(212, 175, 55, .2); }
.ans-btn:active:not(:disabled) { transform: translateY(1px); }
.ans-btn:disabled { opacity: .45; cursor: not-allowed; }
.ans-btn.selected {
    border-color: var(--gold); background: linear-gradient(135deg, rgba(212,175,55,.26), rgba(255,255,255,.06));
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .3), 0 0 30px rgba(212, 175, 55, .35);
}
.ans-btn.correct { border-color: var(--ok); background: rgba(34, 197, 94, .2); color: #D6FFE4; }
.ans-btn.wrong   { border-color: var(--bad); background: rgba(239, 68, 68, .18); color: #FFD6D6; }

/* Màn câu hỏi bắt buộc */
.bb-head { flex-shrink: 0; display: flex; align-items: center; gap: clamp(8px, 1.6vmin, 24px); margin-bottom: clamp(8px, 1.4vmin, 20px); flex-wrap: wrap; }
.bb-badge {
    font-size: clamp(12px, 1.9vmin, 30px); font-weight: 900; letter-spacing: .06em;
    color: #0A0E17; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    border-radius: 999px; padding: .4em 1.2em; white-space: nowrap;
}
.bb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(14px, 2.4vmin, 44px); overflow-y: auto; }
.bb-q { font-size: clamp(16px, 2.8vmin, 48px); font-weight: 700; line-height: 1.42; color: var(--ink); }
.bb-note { margin-top: clamp(10px, 1.6vmin, 26px); font-size: clamp(11px, 1.5vmin, 22px); font-weight: 700; color: var(--ink-dim); }

/* Điểm của đội */
.aidle { flex-shrink: 0; display: flex; gap: clamp(6px, 1.2vmin, 18px); flex-wrap: wrap; justify-content: center; padding-top: clamp(8px, 1.2vmin, 20px); }
.aidle .ms {
    background: var(--glass-bg); border: 1px solid var(--glass-line-soft);
    border-radius: 999px; padding: .45em 1.1em;
    font-size: clamp(10px, 1.4vmin, 20px); font-weight: 800; color: var(--ink-soft); white-space: nowrap;
}
.aidle .ms b { color: var(--gold-bright); font-size: 1.12em; }

/* ============================================================
   LỚP CẢNH BÁO GIAN LẬN
   ============================================================ */
.cheat-alert {
    position: fixed; inset: 0; z-index: 999;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(120% 100% at 50% 50%, rgba(120, 10, 10, .96), rgba(40, 0, 0, .99));
    padding: clamp(14px, 3vmin, 50px);
    animation: caIn .18s ease-out both;
}
.cheat-alert[hidden] { display: none; }
@keyframes caIn { from { opacity: 0 } to { opacity: 1 } }

.ca-box {
    width: min(900px, 94vw); text-align: center;
    background: rgba(0, 0, 0, .45);
    border: 2px solid rgba(255, 120, 120, .7);
    border-radius: clamp(14px, 2vmin, 30px);
    padding: clamp(18px, 3.4vmin, 56px) clamp(16px, 3vmin, 48px);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ca-icon { font-size: clamp(40px, 9vmin, 150px); color: #FFD3D3; animation: caShake .6s ease-in-out infinite; }
@keyframes caShake {
    0%, 100% { transform: translateX(0) }
    25% { transform: translateX(-8px) }
    75% { transform: translateX(8px) }
}
.ca-title {
    font-size: clamp(20px, 4.4vmin, 78px); font-weight: 900; letter-spacing: .06em;
    color: #FFE3E3; margin: .1em 0 .2em; text-shadow: 0 0 30px rgba(255, 80, 80, .7);
}
.ca-text { font-size: clamp(13px, 2.1vmin, 36px); font-weight: 800; color: #FFF; line-height: 1.4; }
.ca-note { margin-top: clamp(8px, 1.6vmin, 26px); font-size: clamp(11px, 1.6vmin, 26px); font-weight: 700; color: #FFCFCF; line-height: 1.5; }
.ca-stat { margin-top: clamp(8px, 1.4vmin, 22px); font-size: clamp(11px, 1.5vmin, 24px); font-weight: 800; color: #FFD3D3; }
.ca-btn {
    margin-top: clamp(12px, 2.2vmin, 34px);
    font-family: inherit; font-weight: 900; cursor: pointer;
    font-size: clamp(13px, 1.9vmin, 30px);
    padding: .7em 1.8em; border-radius: 999px; border: 2px solid #FFE3E3;
    background: #FFE3E3; color: #7A0C0C;
    transition: transform .15s, box-shadow .15s;
}
.ca-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 227, 227, .35); }