/* Arena Player (participant join + play) */
html, body { margin:0; padding:0; height:100%; background:#0F172A; color:#fff; font-family:system-ui, sans-serif; }
.arena-page { min-height:100vh; padding:8px; display:flex; flex-direction:column; }
.arena-card { background:#1E293B; border-radius:14px; padding:12px; max-width:480px; margin:8px auto; width:100%; }

/* Question text card: white-bg dark-text so colored HTML from Word import + images render correctly */
.arena-question-card { background:#fff; color:#1f2937; border-radius:12px; padding:12px 14px; max-width:480px; width:100%; max-height:30vh; overflow-y:auto; }
.arena-question-card img { max-width:100%; height:auto; }
.arena-question-card table { max-width:100%; }

.pin-input { font-size:32px; text-align:center; letter-spacing:6px; font-weight:700; }

/* Timer preview state — dim while waiting for host to start answering */
#p-q-timer.preview { opacity:0.45; }

/* Countdown circle (right of progress bar) — visual countdown for reading + answer phases */
.arena-timer-circle {
    position:relative;
    width:48px; height:48px;
    flex-shrink:0;
}
.arena-timer-circle svg {
    width:100%; height:100%;
    transform:rotate(-90deg);
    display:block;
}
.arena-timer-circle .ring-bg {
    fill:none;
    stroke:rgba(255,255,255,0.15);
    stroke-width:3;
}
.arena-timer-circle .ring-fg {
    fill:none;
    stroke:#facc15;
    stroke-width:3.5;
    stroke-linecap:round;
    stroke-dasharray:100 100;
    stroke-dashoffset:0;
    transition:stroke-dashoffset .25s linear, stroke .25s linear;
}
.arena-timer-circle[data-phase="reading"] .ring-fg { stroke:#3b82f6; }
.arena-timer-circle[data-phase="answer"] .ring-fg  { stroke:#facc15; }
.arena-timer-circle[data-phase="answer"].low .ring-fg { stroke:#ef4444; }
.arena-timer-circle[data-phase="preview"] .ring-fg { stroke:rgba(255,255,255,0.25); }
.arena-timer-circle .num {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:18px; line-height:1; color:#fff;
}

/* === Answer-feedback page (per-question result on phone) === */
.arena-feedback-card { max-width:420px; padding:22px 18px; text-align:center; }
.fb-symbol-wrap {
    width:92px; height:92px; border-radius:50%;
    margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800;
    animation:fb-pop .45s cubic-bezier(.2,.9,.3,1.4) both;
}
.fb-symbol-wrap.correct { background:#16a34a; }
.fb-symbol-wrap.wrong   { background:#dc2626; }
.fb-symbol { font-size:54px; line-height:1; }
@keyframes fb-pop { 0% { transform:scale(0); } 60% { transform:scale(1.18); } 100% { transform:scale(1); } }

.fb-title { font-size:22px; font-weight:800; line-height:1.25; margin-bottom:6px; }
.fb-score-gain {
    display:inline-block;
    background:rgba(34,197,94,0.18);
    color:#4ade80;
    padding:6px 14px; border-radius:999px;
    font-weight:800; font-size:16px;
    margin-bottom:6px;
}
.fb-streak {
    display:inline-block;
    background:rgba(250,204,21,0.14);
    color:#facc15;
    padding:6px 12px; border-radius:999px;
    font-weight:700; font-size:14px;
    margin:4px 4px 6px;
}

.fb-correct-wrap { margin-top:14px; }
.fb-correct-label {
    font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
    color:rgba(255,255,255,0.7); font-weight:600;
    margin-bottom:8px;
}
.fb-correct-block { max-width:100%; min-height:54px; margin:0 !important; }
.fb-correct-block .choice-symbol { width:44px; font-size:22px; }
.fb-correct-block .choice-content { padding:8px 12px; font-size:14px; line-height:1.3; text-align:left; }

.fb-total-wrap {
    margin-top:18px;
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.fb-total-box { background:#2563eb; border-radius:14px; padding:12px 14px; }
.fb-rank-box { background:#F2B705; color:#3A2C00; border-radius:14px; padding:12px 14px; }
.fb-rank-box .fb-total-label { color:rgba(58,44,0,0.8); }
.fb-rank-box .fb-total { color:#3A2C00; }
.fb-total-wrap.no-rank { grid-template-columns:1fr; }
.fb-time { margin-top:10px; font-size:14px; color:#cbd5e1; }
.fb-time b { color:#fff; }
.fb-total-label {
    font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
    color:rgba(255,255,255,0.85); font-weight:600;
    margin-bottom:2px;
}
.fb-total { font-size:34px; font-weight:900; color:#fff; line-height:1.1; }

/* Feedback page Result-phase countdown (informational; host drives advance) */
.fb-next-countdown {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(37,99,235,0.18);
    color:#bfdbfe;
    border:1px solid rgba(59,130,246,0.4);
    border-radius:8px;
    padding:6px 14px;
    font-weight:600;
    font-size:14px;
    margin-top:12px;
}
.fb-next-countdown b { color:#facc15; font-size:18px; min-width:24px; text-align:center; }

@media (max-width:480px) {
    .arena-feedback-card { padding:18px 14px; margin:6px auto; }
    .fb-symbol-wrap { width:76px; height:76px; margin-bottom:12px; }
    .fb-symbol { font-size:44px; }
    .fb-title { font-size:19px; }
    .fb-total { font-size:30px; }
}

/* Question state: viewport-aware layout — fits screen without scrolling */
#page-question { flex:1; display:flex; flex-direction:column; }
#page-question .arena-card { margin:6px auto; padding:10px 12px; }
#page-question #p-q-choices { display:flex; flex-direction:column; gap:6px; }

/* HYBRID button: colored symbol/stripe on left, white body for HTML content */
.arena-choice-btn { font-size:16px; font-weight:600; min-height:60px; border:3px solid var(--c-color, #ccc); background:#fff; color:#1f2937; border-radius:12px; padding:0; display:flex; align-items:stretch; width:100%; cursor:pointer; transition:transform .08s; overflow:hidden; margin:0 !important; }
.arena-choice-btn:active { transform:scale(0.97); }
.arena-choice-btn:disabled { opacity:0.6; cursor:not-allowed; }
.arena-choice-btn .choice-symbol { background:var(--c-color, #ccc); color:#fff; width:50px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; }
.arena-choice-btn .choice-content { flex-grow:1; padding:8px 12px; text-align:left; align-self:center; min-width:0; overflow:hidden; font-size:15px; line-height:1.3; }
.arena-choice-btn .choice-content img { max-width:100%; height:auto; }
.arena-choice-btn .choice-content table { max-width:100%; }
.arena-choice-btn .choice-content p:last-child { margin-bottom:0; }

/* Classroom mode: full color, only symbol (no text content) — bigger since no text takes the space */
.arena-choice-btn.classroom { background:var(--c-color); color:#fff; border:none; padding:0; min-height:90px; }
.arena-choice-btn.classroom .choice-symbol { background:transparent; width:auto; flex-grow:1; font-size:48px; }

/* SELECTED state — visible mark of which choice the player picked */
.arena-choice-btn { position:relative; }
.arena-choice-btn.selected {
    box-shadow:0 0 0 4px #16a34a, 0 8px 24px rgba(22,163,74,0.45);
    transform:scale(1.02);
    z-index:1;
}
.arena-choice-btn.selected::after {
    content:"✓";
    position:absolute;
    top:8px; right:8px;
    width:32px; height:32px;
    background:#16a34a; color:#fff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    animation:select-pop .35s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes select-pop {
    0% { transform:scale(0); }
    60% { transform:scale(1.3); }
    100% { transform:scale(1); }
}
/* Other choices fade when one is selected (only in disabled state) */
.arena-choice-btn:disabled:not(.selected) { opacity:0.35; }
.arena-choice-btn.selected:disabled { opacity:1 !important; }

.c-0 { --c-color:#e21b3c; }
.c-1 { --c-color:#1368ce; }
.c-2 { --c-color:#d89e00; }
.c-3 { --c-color:#26890c; }

.arena-status { text-align:center; padding:30px 16px; font-size:18px; }
.arena-big { font-size:80px; font-weight:800; }
.arena-correct { color:#22c55e; }
.arena-wrong { color:#ef4444; }
.timer-bar { height:10px; background:#2563eb; border-radius:5px; transition:width .25s linear; }
.my-rank { background:#2563eb; color:#fff; padding:16px 12px; border-radius:14px; text-align:center; }
.my-rank.top-3 { background:#F2B705; color:#3A2C00; }
.my-rank .my-rank-time { font-size:14px; opacity:.85; margin-top:4px; }

/* Câu bỏ trống: biểu tượng trung tính thay vì giữ đúng/sai của câu trước */
.fb-symbol-wrap:not(.correct):not(.wrong) { background:#334155; }

/* Điện thoại: nút âm thanh xuống góc dưới, chỉ còn nút tắt/bật để không đè tiêu đề và đồng hồ */
@media (max-width:480px) {
    .arena-fx-widget { top:auto; bottom:12px; right:12px; padding:6px; }
    .arena-fx-widget .arena-fx-vol { display:none; }
}