/* ============================================================
   TEAM QUIZ BATTLE — classroom game styling
   ============================================================ */
.up-team-quiz-page { max-width: 900px; margin: 0 auto; padding: 20px; direction: rtl; }

.tq-screen { display: none; }
.tq-screen.tq-active { display: block; animation: tq-fade-in 400ms ease; }
@keyframes tq-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Setup Screen --- */
.tq-hero { text-align: center; padding: 40px 20px; background: linear-gradient(120deg, #005BAC, #00A651); color: #fff; border-radius: 20px; margin-bottom: 30px; }
.tq-hero h1 { color: #fff; margin: 0 0 8px; }
.tq-setup-card { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.tq-setup-card h3 { color: #005BAC; margin: 0 0 16px; }
.tq-status-text { font-size: 13px; color: #64748B; margin-top: 10px; }
.tq-team-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tq-team-inputs input { padding: 12px; border-radius: 10px; border: 2px solid #E2E8F0; font-family: inherit; font-size: 15px; }
.tq-team-inputs input:nth-child(1) { border-color: #005BAC; }
.tq-team-inputs input:nth-child(2) { border-color: #00A651; }
.tq-team-inputs input:nth-child(3) { border-color: #F9A825; }
.tq-team-inputs input:nth-child(4) { border-color: #DC2626; }
.tq-start-btn { display: block; width: 100%; padding: 16px; font-size: 18px; border-radius: 40px; margin-top: 10px; }
.tq-start-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Live scoreboard (during game) --- */
.tq-scoreboard { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 24px; }
.tq-score-card {
    background: #fff; border: 2px solid #E2E8F0; border-radius: 14px; padding: 14px 18px;
    text-align: center; min-width: 100px; transition: transform 250ms ease, box-shadow 250ms ease;
}
.tq-score-card:hover { transform: scale(1.08) translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.15); }
.tq-score-rank { font-size: 18px; }
.tq-score-team-name { font-size: 13px; color: #334155; font-weight: 600; margin: 4px 0; }
.tq-score-points { font-size: 24px; font-weight: 800; }

/* Big scoreboard (round summary + winner screen) */
.tq-scoreboard-big .tq-score-card {
    min-width: 150px; padding: 24px; animation: tq-score-zoom-in 500ms cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.tq-scoreboard-big .tq-score-card:nth-child(1) { animation-delay: 0ms; }
.tq-scoreboard-big .tq-score-card:nth-child(2) { animation-delay: 120ms; }
.tq-scoreboard-big .tq-score-card:nth-child(3) { animation-delay: 240ms; }
.tq-scoreboard-big .tq-score-card:nth-child(4) { animation-delay: 360ms; }
@keyframes tq-score-zoom-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
.tq-scoreboard-big .tq-score-points { font-size: 34px; }

/* --- Game screen --- */
.tq-round-info { text-align: center; font-size: 15px; color: #64748B; margin-bottom: 14px; font-weight: 600; }
.tq-current-team {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    text-align: center; color: #fff; padding: 20px; border-radius: 16px; font-size: 22px;
    font-weight: 700; margin-bottom: 20px; transition: background 300ms ease; animation: tq-pulse 1.6s infinite;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25); letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
@keyframes tq-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,91,172,0.4); } 50% { box-shadow: 0 0 0 14px rgba(0,91,172,0); } }

/* Team-turn badge (A/B/C/D circle) + bold team name inside the banner,
   so it's unmistakably clear — at a glance from across the classroom —
   which team is up. */
.tq-team-turn-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
    background: rgba(255,255,255,0.22); color: #fff; font-weight: 900; font-size: 17px;
    border: 2px solid rgba(255,255,255,0.65);
}
.tq-team-turn-name { font-weight: 900; font-size: 1.15em; }

/* --- Team turn announcement overlay ---
   TWO MODES:
   1) "fresh" (a brand-new question, that team's own turn) — zooms in
      and then WAITS on screen with a "سوال دکھائیں" button. Nothing
      times out and no timer runs until someone actually taps it — this
      is the breathing room the classroom needs between questions.
   2) "steal" (question passed to the next team after a wrong/pass) —
      zooms in, holds for exactly 3 seconds automatically, then reveals
      the question and starts the timer on its own — no button, since
      everyone's already watching and waiting for their name to come up. */
.tq-turn-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #005BAC; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 300ms ease;
}
.tq-turn-overlay.tq-turn-overlay-show { opacity: 1; visibility: visible; pointer-events: auto; }
.tq-turn-overlay-inner {
    opacity: 0; transform: scale(0.4);
    transition: transform 480ms cubic-bezier(.34,1.56,.64,1), opacity 350ms ease;
}
.tq-turn-overlay.tq-turn-overlay-show .tq-turn-overlay-inner { opacity: 1; transform: scale(1); }
.tq-turn-overlay-badge {
    width: 90px; height: 90px; margin: 0 auto 14px; border-radius: 50%;
    background: rgba(255,255,255,0.22); border: 4px solid rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; font-weight: 900; color: #fff;
    animation: tq-badge-pulse 1.4s ease infinite;
}
.tq-turn-overlay-label { font-size: 1.2rem; font-weight: 600; color: #fff; opacity: 0.85; margin-bottom: 6px; }
.tq-turn-overlay-name { font-size: 2.4rem; font-weight: 900; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,0.35); max-width: 90vw; }
@keyframes tq-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
    50% { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
}
.tq-turn-overlay-actions { margin-top: 26px; }
.tq-reveal-question-btn {
    padding: 16px 40px !important; border-radius: 50px !important; font-size: 18px !important;
    background: #fff !important; color: #005BAC !important; border: none !important;
    font-weight: 800 !important; animation: tq-reveal-btn-pulse 1.4s ease infinite;
}
@keyframes tq-reveal-btn-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
    50% { transform: scale(1.06); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
}
@media (max-width: 600px) {
    .tq-turn-overlay-name { font-size: 1.8rem; }
    .tq-turn-overlay-badge { width: 70px; height: 70px; font-size: 1.9rem; }
}

.tq-question-card { background: #fff; border-radius: 18px; padding: 30px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); margin-bottom: 20px; }
.tq-question-text { font-size: 19px; font-weight: 600; text-align: center; margin: 0 0 24px; color: #0F172A; }
.tq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tq-option {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(160deg, #FFFFFF 0%, #F1F5F9 100%);
    border: 2px solid #E2E8F0; border-radius: 16px; padding: 18px;
    font-size: 15px; transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 4px 0 #CBD5E1, 0 6px 14px rgba(0,0,0,0.08);
    cursor: default; position: relative;
}
.tq-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #CBD5E1, 0 12px 22px rgba(0,0,0,0.12);
}
.tq-option strong {
    background: linear-gradient(160deg, #005BAC, #003D75); color: #fff; width: 30px; height: 30px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.3);
}
.tq-option {
    cursor: pointer;
}
.tq-option-selected {
    background: linear-gradient(160deg, #EAF1FB, #C7DCF5); border-color: #005BAC;
    box-shadow: 0 4px 0 #005BAC, 0 8px 18px rgba(0,91,172,0.25);
}
.tq-option-selected strong { background: linear-gradient(160deg, #005BAC, #003D75); }

.tq-option-correct {
    background: linear-gradient(160deg, #E8F8EE, #C5EFD5); border-color: #00A651;
    box-shadow: 0 4px 0 #00A651, 0 8px 18px rgba(0,166,81,0.25);
    animation: tq-score-zoom-in 400ms ease;
}
.tq-option-correct strong { background: linear-gradient(160deg, #00A651, #007A3D); }

.tq-option-wrong {
    background: linear-gradient(160deg, #FDEDEE, #F8C9CC); border-color: #DC2626;
    box-shadow: 0 4px 0 #DC2626, 0 8px 18px rgba(220,38,38,0.25);
    animation: tq-shake 400ms ease;
}
.tq-option-wrong strong { background: linear-gradient(160deg, #DC2626, #991B1B); }
@keyframes tq-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

#tq-check-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tq-controls { text-align: center; }
.tq-controls .up-btn { padding: 14px 30px; border-radius: 40px; font-size: 16px; margin: 6px; }
.tq-judge-controls { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.tq-btn-correct { background: #00A651; color: #fff; }
.tq-btn-wrong { background: #DC2626; color: #fff; }

/* --- Round Summary + Winner Screens --- */
#tq-round-summary-screen, #tq-winner-screen { text-align: center; }
#tq-round-summary-screen h2 { color: #005BAC; }
.tq-confetti { font-size: 50px; margin-bottom: 10px; animation: tq-bounce 1s infinite alternate; }
@keyframes tq-bounce { from { transform: translateY(0); } to { transform: translateY(-12px); } }
.tq-winner-title { color: #64748B; font-size: 16px; margin-bottom: 4px; }
.tq-winner-name { font-size: 38px; font-weight: 800; margin-bottom: 24px; animation: tq-score-zoom-in 600ms ease; }
.tq-final-actions { margin-top: 24px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.tq-final-actions .up-btn { padding: 14px 26px; border-radius: 40px; }

/* --- Hidden off-screen area used only to render the colorful PDF report
   before it's photographed by html2canvas and turned into a real,
   directly-downloadable .pdf file (not the old browser print-dialog,
   which could come out blank if the theme's header/footer/sidebar
   weren't fully hidden by print CSS). Kept in normal flow (not
   display:none) so html2canvas can actually capture it, just pushed
   far off the visible page. --- */
.tq-pdf-render-area {
    position: fixed; top: 0; left: -99999px; width: 800px;
    background: #fff; direction: rtl; z-index: -1;
}
.tq-pdf-page { width: 800px; background: #fff; padding: 36px 40px; box-sizing: border-box; font-family: 'Noto Nastaliq Urdu', serif; }
.tq-pdf-header {
    border-radius: 16px; padding: 26px 28px; color: #fff; margin-bottom: 22px;
    display: flex; flex-direction: column; gap: 6px;
}
.tq-pdf-header h1 { color: #fff; margin: 0; font-size: 26px; }
.tq-pdf-header .tq-pdf-meta { font-size: 15px; opacity: 0.95; line-height: 1.9; }
.tq-pdf-section-title { font-size: 19px; font-weight: 800; color: #005BAC; margin: 26px 0 12px; border-inline-start: 6px solid #005BAC; padding-inline-start: 10px; }
.tq-pdf-winner-card {
    text-align: center; border-radius: 16px; padding: 22px; margin-bottom: 22px;
    background: linear-gradient(135deg, #FFF7E6, #FFE9B3); border: 2px solid #F9A825;
}
.tq-pdf-winner-card .tq-pdf-winner-label { font-size: 14px; color: #92400E; font-weight: 700; }
.tq-pdf-winner-card .tq-pdf-winner-name { font-size: 30px; font-weight: 900; margin-top: 4px; }
.tq-pdf-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.tq-pdf-bar-row { display: flex; align-items: center; gap: 12px; }
.tq-pdf-bar-name { width: 130px; flex-shrink: 0; font-weight: 800; font-size: 14px; text-align: end; }
.tq-pdf-bar-track { flex: 1; background: #F1F5F9; border-radius: 10px; height: 26px; overflow: hidden; }
.tq-pdf-bar-fill { height: 100%; border-radius: 10px; display: flex; align-items: center; justify-content: flex-end; padding-inline-end: 10px; color: #fff; font-weight: 800; font-size: 13px; min-width: 40px; box-sizing: border-box; }
.tq-pdf-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 12px; }
.tq-pdf-table th { background: #005BAC; color: #fff; padding: 8px 6px; font-size: 12px; }
.tq-pdf-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid #E2E8F0; }
.tq-pdf-table tr:nth-child(even) td { background: #F8FAFC; }
.tq-pdf-pts-pos { color: #00A651; font-weight: 800; }
.tq-pdf-pts-neg { color: #DC2626; font-weight: 800; }
.tq-pdf-rank-table td.tq-pdf-rank-name { font-weight: 800; }
.tq-pdf-rank-table tr:nth-child(1) td { background: #FFF7E0; }
.tq-pdf-rank-table tr:nth-child(2) td { background: #F1F5F9; }
.tq-pdf-rank-table tr:nth-child(3) td { background: #FDF0E6; }
.tq-pdf-footer { text-align: center; font-size: 11px; color: #94A3B8; margin-top: 20px; }

@media (max-width: 600px) {
    .tq-team-inputs { grid-template-columns: 1fr; }
    .tq-options { grid-template-columns: 1fr; }
    .tq-question-text { font-size: 16px; }
}

/* Timer display */
.tq-timer {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: #005BAC;
    margin-bottom: 16px;
    transition: color 300ms ease, transform 300ms ease;
}
.tq-timer-urgent {
    color: #DC2626;
    animation: tq-timer-shake 500ms infinite;
}
@keyframes tq-timer-shake {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Editable team name icon */
.tq-edit-icon {
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
    transition: opacity 200ms;
}
.tq-edit-icon:hover { opacity: 1; }

/* --- Multi-chapter + checkboxes --- */
.tq-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 10px; cursor: pointer; }
.tq-multi-chapter-list { max-height: 200px; overflow-y: auto; background: #F8FAFC; border-radius: 10px; padding: 14px; margin: 10px 0; }

/* --- Timer row with pause + sound --- */
.tq-timer-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.tq-pause-btn { padding: 8px 18px !important; border-radius: 30px !important; font-size: 13px !important; }
.tq-sound-toggle { background: none; border: 2px solid #E2E8F0; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.tq-paused-overlay {
    text-align: center; background: #FEF3C7; color: #92400E; padding: 14px; border-radius: 12px;
    font-weight: 700; margin-bottom: 16px; animation: tq-bounce 1s infinite alternate;
}

/* --- MVP badge --- */
.tq-mvp-badge {
    text-align: center; background: linear-gradient(135deg, #FFF7E6, #FFE9B3); border: 2px solid #F9A825;
    border-radius: 14px; padding: 14px 20px; margin: 16px auto; max-width: 420px; font-size: 15px;
}

/* --- Tie-breaker screen --- */
#tq-tiebreaker-screen { text-align: center; }
#tq-tiebreaker-screen h2 { color: #DC2626; }

.tq-school-input {
    width: 100%; padding: 14px; border-radius: 10px; border: 2px solid #005BAC;
    font-family: inherit; font-size: 16px; box-sizing: border-box;
}

#tq-pass-question-btn { border-color: #F9A825 !important; color: #F9A825 !important; }
#tq-pass-question-btn:hover { background: #FFF7E6 !important; }