/* ============================================================================
   live.css — หน้าตาของ "โหมดแข่งสด" ทั้งจอครู (quiz-host.php) และจอนักเรียน (quiz-join.php)
   ----------------------------------------------------------------------------
   ทำไมต้องแยกไฟล์และแยกโทนสีจากเว็บส่วนอื่น:
     · จอครูฉายขึ้นโปรเจกเตอร์ ต้องอ่านออกจากท้ายห้อง พื้นเข้ม-ตัวอักษรสว่างจึงคมชัดที่สุด
     · โหมดแข่งสดคนละบรรยากาศกับหน้าเว็บทั่วไป แยกโทนแล้วผู้ใช้รู้ทันทีว่า "กำลังแข่งอยู่"
     · ไม่ปนกับ style.css ทำให้แก้หน้าตาโหมดแข่งได้โดยไม่กระทบหน้าอื่นเลย

   หลักการจัดวางที่ยึดตลอดไฟล์:
     1. ตัวเลือกต้องอยู่กึ่งกลางเสมอ ไม่ว่าจะ 2 3 หรือ 4 ข้อ (ดูบล็อก .live-opts)
     2. หนึ่งหน้าจอ = หนึ่งเรื่อง — เฉลยก็คือเฉลย คะแนนก็แยกไปอีกหน้า ไม่เบียดกัน
     3. ขนาดตัวอักษรใช้ clamp() ทั้งหมด จอมือถือถึงโปรเจกเตอร์ใช้ไฟล์เดียวกันได้
   ========================================================================== */

.live-stage{
  --ink:#f4f0ff;            /* ตัวอักษรหลักบนพื้นเข้ม */
  --ink-dim:#c3b5e8;        /* ตัวอักษรรอง */
  --card:rgba(255,255,255,.10);
  --card-2:rgba(255,255,255,.16);
  --line:rgba(255,255,255,.18);
  --gold:#fbbf24;
  max-width:1180px;margin:0 auto;padding:clamp(14px,2.4vw,26px);
  border-radius:clamp(20px,2.6vw,32px);
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(168,85,247,.42), transparent 62%),
    radial-gradient(900px 460px at 92% 4%, rgba(56,189,248,.30), transparent 60%),
    linear-gradient(158deg,#241a52 0%,#3b1f78 46%,#4c1d95 100%);
  color:var(--ink);
  box-shadow:0 26px 70px rgba(37,15,84,.42);
  overflow:hidden;position:relative;
}
/* แสงนวลบนสุด ทำให้พื้นเข้มไม่ทึบจนดูหนัก */
.live-stage::before{content:'';position:absolute;inset:0 0 auto;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent)}
.live-stage>*{position:relative}
.live-loading{text-align:center;padding:70px 0;font-weight:800;color:var(--ink-dim)}

/* ── ตัวหนังสือร่วม ─────────────────────────────────────────────────────── */
.live-h1{font-size:clamp(24px,3.6vw,44px);font-weight:900;margin:2px 0 6px;line-height:1.2;
  color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.32)}
.live-kicker{font-size:clamp(13px,1.5vw,17px);font-weight:900;letter-spacing:.5px;
  color:var(--ink-dim);margin:0 0 2px;text-transform:none}
.live-kicker.mt{margin-top:22px}
.live-sub{font-size:clamp(14px,1.7vw,19px);font-weight:700;color:var(--ink-dim);margin:0 0 14px;line-height:1.6}
.live-sub b{color:#fff}
.live-empty{color:var(--ink-dim);font-weight:800;padding:18px 0;text-align:center}
.live-more{color:var(--ink-dim);font-weight:800;text-align:center;margin:10px 0 0;font-size:14px}

/* ── แถบบนสุดตอนเล่น: ข้อที่เท่าไร · เวลา · ตอบแล้วกี่คน ───────────────── */
.live-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(10px,1.6vw,18px)}
.live-chip{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:clamp(7px,1vw,11px) clamp(14px,1.8vw,22px);font-weight:800;
  font-size:clamp(13px,1.6vw,19px);color:var(--ink);white-space:nowrap}
.live-chip b{color:#fff;font-size:1.16em}
.live-chip.ok{background:linear-gradient(135deg,#22c55e,#15803d);border-color:transparent;color:#fff}

/* นาฬิกาวงแหวน — เห็นเวลาที่เหลือเป็น "รูป" ไม่ต้องอ่านตัวเลขก็รู้ว่าใกล้หมด */
.live-ring{--p:1;position:relative;flex:0 0 auto;
  width:clamp(58px,7vw,86px);height:clamp(58px,7vw,86px);border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(#fbbf24 calc(var(--p)*360deg), rgba(255,255,255,.14) 0);
  transition:background .9s linear}
.live-ring::after{content:'';position:absolute;inset:7px;border-radius:50%;background:#2c1c62}
/* ตัวเลขต้องอยู่เหนือวงกลมทึบตรงกลาง (::after ถูกวาดทีหลังจึงบังตัวเลขถ้าไม่ยกชั้นขึ้นมา) */
.live-ring i{position:relative;z-index:1;font-style:normal;font-weight:900;
  font-size:clamp(22px,2.9vw,36px);color:#fbbf24;line-height:1}

/* ── โจทย์ ──────────────────────────────────────────────────────────────── */
.live-q{background:rgba(255,255,255,.96);color:#2c1a52;border-radius:clamp(16px,2vw,24px);
  padding:clamp(16px,2.4vw,30px) clamp(18px,2.6vw,34px);
  font-size:clamp(20px,3.3vw,40px);font-weight:900;line-height:1.32;text-align:center;
  overflow-wrap:anywhere;box-shadow:0 14px 34px rgba(0,0,0,.24);margin-bottom:clamp(12px,1.8vw,20px)}
.live-qimg{padding:clamp(10px,1.4vw,16px);display:flex;justify-content:center;align-items:center}
.live-qimg img{max-height:min(40vh,340px);max-width:100%;border-radius:14px;display:block}
.live-qimg.big img{max-height:min(52vh,500px)}

/* ── ตัวเลือก ───────────────────────────────────────────────────────────────
   จุดที่แก้ไขสำคัญที่สุดของหน้านี้:
   ของเดิมตรึงไว้ 2 คอลัมน์เสมอ พอมี 3 ตัวเลือกจะกลายเป็น 2 บน + 1 ล่างซ้าย เบี้ยวไปข้างเดียว
   ตอนนี้เลือกจำนวนคอลัมน์ตามจำนวนตัวเลือกจริง (อ่านจาก data-n) และจัดกึ่งกลางทุกกรณี */
.live-opts{display:grid;gap:clamp(10px,1.4vw,16px);justify-content:center;align-items:stretch}
.live-opts[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-opts[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.live-opts[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-opts[data-n="5"],.live-opts[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
/* จอแคบ: เรียงลงมาเป็นแถวเดียว อ่านง่ายกว่าและยังกึ่งกลางอยู่ */
@media (max-width:760px){
  .live-opts[data-n="3"],.live-opts[data-n="5"],.live-opts[data-n="6"]{grid-template-columns:minmax(0,1fr)}
}
/* ตัวสุดท้ายที่เหลือค้างแถวเดียว (เช่น 5 ตัวเลือกใน 3 คอลัมน์) ให้อยู่กลางแถว ไม่ชิดซ้าย */
.live-opts[data-n="5"]>:nth-child(4){grid-column:1/2;justify-self:end;width:min(100%,420px)}
.live-opts[data-n="5"]>:nth-child(5){grid-column:2/4;justify-self:start;width:min(100%,420px)}

.live-opt{position:relative;overflow:hidden;border-radius:clamp(16px,2vw,22px);
  padding:clamp(14px,2vw,22px) clamp(16px,2.2vw,26px);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  color:#fff;font-weight:900;text-align:left;min-height:clamp(74px,9vw,116px);
  box-shadow:0 8px 0 rgba(0,0,0,.22),0 14px 30px rgba(0,0,0,.22);
  animation:lvqIn .34s cubic-bezier(.2,1.3,.4,1)}
@keyframes lvqIn{from{transform:translateY(14px) scale(.96)}to{transform:none}}
.live-opt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 46%)}
/* สี 4 แบบ ตรงกับปุ่มบนมือถือนักเรียน เด็กจะได้จับคู่รูปทรง-สีได้ทันที */
.live-opt.c0{background:linear-gradient(150deg,#f43f5e,#c81e42)}
.live-opt.c1{background:linear-gradient(150deg,#3b82f6,#1554b8)}
.live-opt.c2{background:linear-gradient(150deg,#f4b400,#c07f00)}
.live-opt.c3{background:linear-gradient(150deg,#34c759,#1f8f3f)}
.live-opt .sh{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(44px,5vw,68px);height:clamp(44px,5vw,68px);border-radius:18px;
  background:rgba(255,255,255,.22);font-size:clamp(22px,2.8vw,36px);line-height:1}
.live-opt .tx{font-size:clamp(17px,2.4vw,30px);line-height:1.24;word-break:break-word;flex:1}
/* ตอนเฉลย: ข้อถูกเด่นขึ้น ข้อผิดจางลง แต่ยังอ่านออกว่าใครตอบอะไรไปกี่คน */
.live-opt.miss{opacity:.42;filter:saturate(.55)}
.live-opt.hit{box-shadow:0 0 0 4px #fff,0 10px 0 rgba(0,0,0,.22),0 18px 40px rgba(52,199,89,.4);
  animation:lvqHit .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes lvqHit{0%{transform:scale(.94)}60%{transform:scale(1.035)}100%{transform:scale(1)}}
.live-opt .cnt{position:absolute;top:9px;right:12px;background:rgba(0,0,0,.34);
  border-radius:999px;padding:3px 12px;font-size:clamp(12px,1.4vw,16px);font-weight:900}
.live-opt .mark{position:absolute;bottom:10px;right:14px;font-size:clamp(18px,2.2vw,28px)}
/* แถบสัดส่วนคนที่เลือกข้อนี้ — เห็นภาพรวมห้องได้ในแวบเดียว */
.live-opt .meter{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(0,0,0,.28)}
.live-opt .meter i{display:block;height:100%;background:rgba(255,255,255,.85);
  transition:width .8s cubic-bezier(.2,1,.3,1)}

/* ── แถบเฉลยตัวใหญ่ ─────────────────────────────────────────────────────── */
.live-answer{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:clamp(14px,2vw,22px) auto 0;max-width:900px;
  background:linear-gradient(135deg,rgba(52,199,89,.22),rgba(52,199,89,.08));
  border:2px solid rgba(52,199,89,.55);border-radius:clamp(16px,2vw,22px);
  padding:clamp(12px,1.8vw,20px) clamp(18px,2.4vw,30px);
  animation:lvqIn .4s cubic-bezier(.2,1.3,.4,1)}
.live-answer .ic{font-size:clamp(24px,3vw,38px)}
.live-answer .tx{font-size:clamp(20px,3vw,38px);font-weight:900;color:#bbf7d0;
  text-shadow:0 2px 12px rgba(0,0,0,.3);overflow-wrap:anywhere;text-align:center}

/* ── กล่องคำอธิบายเฉลย ──────────────────────────────────────────────────── */
.live-ex{background:var(--card);border:1px solid var(--line);border-radius:clamp(14px,1.8vw,20px);
  padding:clamp(12px,1.8vw,18px);margin:clamp(12px,1.6vw,18px) auto 0;max-width:900px;
  display:flex;flex-direction:column;gap:12px;align-items:center}
.live-ex-t{font-size:clamp(15px,1.9vw,23px);font-weight:800;line-height:1.55;
  color:var(--ink);text-align:center;overflow-wrap:anywhere}
.live-ex-img{background:none;border:0;padding:0;cursor:zoom-in;position:relative;display:block;max-width:100%}
.live-ex-img img{max-height:min(32vh,290px);max-width:100%;border-radius:14px;display:block;
  border:3px solid rgba(255,255,255,.35)}
.live-zoom{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(20,10,45,.86);color:#fff;border-radius:999px;padding:5px 14px;
  font-size:13px;font-weight:800;white-space:nowrap}

/* ── ปุ่มสั่งงาน ────────────────────────────────────────────────────────── */
.live-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  margin-top:clamp(16px,2.2vw,26px)}
.live-btn{border:0;cursor:pointer;font-family:inherit;font-weight:900;
  border-radius:999px;padding:clamp(10px,1.4vw,15px) clamp(20px,2.6vw,32px);
  font-size:clamp(15px,1.8vw,20px);color:#fff;text-decoration:none;display:inline-block;
  background:var(--card-2);border:1px solid var(--line);transition:transform .12s,filter .12s}
.live-btn:hover{filter:brightness(1.12)}
.live-btn:active{transform:translateY(2px)}
.live-btn.big{padding:clamp(13px,1.8vw,19px) clamp(28px,3.4vw,46px);font-size:clamp(17px,2.1vw,24px)}
.live-btn.primary{background:linear-gradient(135deg,#a855f7,#ec4899);border-color:transparent;
  box-shadow:0 6px 0 rgba(120,20,120,.45),0 12px 26px rgba(236,72,153,.34)}
.live-btn.primary:active{box-shadow:0 2px 0 rgba(120,20,120,.45)}
.live-btn.board{background:linear-gradient(135deg,#38bdf8,#0ea5e9);border-color:transparent;
  box-shadow:0 6px 0 rgba(3,90,130,.45),0 12px 26px rgba(14,165,233,.3)}
.live-btn.board:active{box-shadow:0 2px 0 rgba(3,90,130,.45)}
.live-btn.danger{background:linear-gradient(135deg,#fb7185,#e11d48);border-color:transparent;
  box-shadow:0 6px 0 rgba(140,15,50,.45)}
.live-btn.danger:active{box-shadow:0 2px 0 rgba(140,15,50,.45)}
.live-btn.ghost{background:rgba(255,255,255,.08)}
.live-btn[disabled]{opacity:.42;cursor:not-allowed;filter:grayscale(.5)}
.live-btn[disabled]:active{transform:none}

/* ── หน้ารอเริ่มเกม ─────────────────────────────────────────────────────── */
.live-wait{text-align:center}
.live-wait-head{padding:clamp(6px,1.4vw,14px) 0 clamp(12px,2vw,20px)}
/* รหัสห้องแยกเป็นช่องทีละตัว — เด็กท้ายห้องอ่านตามได้ทีละตัวไม่สับสน */
.live-code{display:flex;gap:clamp(6px,1vw,12px);justify-content:center;flex-wrap:wrap;margin:clamp(10px,1.6vw,18px) 0}
.live-code span{background:#fff;color:#5b21b6;border-radius:clamp(12px,1.6vw,18px);
  min-width:clamp(46px,7vw,96px);padding:clamp(8px,1.4vw,16px) clamp(6px,1vw,12px);
  font-size:clamp(34px,6.6vw,80px);font-weight:900;line-height:1;
  box-shadow:0 10px 26px rgba(0,0,0,.28);animation:lvqIn .4s}
.live-code span:nth-child(2){animation-delay:.05s}.live-code span:nth-child(3){animation-delay:.1s}
.live-code span:nth-child(4){animation-delay:.15s}.live-code span:nth-child(5){animation-delay:.2s}
.live-code span:nth-child(6){animation-delay:.25s}
.live-ttl{font-weight:800;color:var(--ink-dim);margin:6px 0 0;font-size:clamp(13px,1.6vw,17px)}
.live-ttl.warn{color:#fca5a5}
.live-wait-body{border-top:1px solid var(--line);padding-top:clamp(12px,1.8vw,18px)}
.live-count{font-weight:900;font-size:clamp(15px,1.9vw,21px);color:var(--ink);margin:0 0 12px}
.live-count b{color:var(--gold);font-size:1.3em}
.live-players{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  max-height:34vh;overflow:auto;padding:2px}
.live-p{background:var(--card-2);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-weight:800;font-size:clamp(13px,1.6vw,18px);color:#fff;
  animation:lvqIn .3s}

/* ── หน้ากลางจอ (คะแนน / สรุปผล / รหัสหมดอายุ) ──────────────────────────── */
.live-mid{text-align:center;padding:clamp(6px,1.4vw,16px) 0}
.live-hero-ic{font-size:clamp(52px,8vw,86px);line-height:1;margin-bottom:6px}

/* ── ตารางอันดับแบบกราฟแท่ง ─────────────────────────────────────────────── */
.live-board{max-width:820px;margin:clamp(12px,1.8vw,20px) auto 0;text-align:left}
.live-bar{display:flex;align-items:center;gap:clamp(8px,1.2vw,14px);margin:clamp(7px,1vw,11px) 0;
  animation:lvqSlide .45s cubic-bezier(.2,1.2,.35,1)}
@keyframes lvqSlide{from{transform:translateX(-22px)}to{transform:none}}
.live-bar .rk{flex:0 0 auto;width:clamp(32px,3.4vw,46px);text-align:center;
  font-weight:900;font-size:clamp(17px,2.1vw,26px);color:var(--ink-dim)}
.live-bar .track{flex:1;position:relative;height:clamp(44px,5.2vw,64px);border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid var(--line);overflow:hidden}
.live-bar .fill{position:absolute;top:0;bottom:0;left:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(167,139,250,.85),rgba(139,92,246,.95));
  transition:width .85s cubic-bezier(.2,1,.3,1)}
.live-bar .lbl{position:absolute;inset:0;display:flex;align-items:center;gap:10px;
  padding:0 clamp(12px,1.6vw,20px);font-weight:900;
  font-size:clamp(15px,1.9vw,23px);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.live-bar .lbl .av{flex:0 0 auto;font-size:1.2em}
.live-bar .lbl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-bar .lbl .sc{margin-left:auto;flex:0 0 auto;font-size:1.08em;color:var(--gold)}
.live-bar.top1 .fill{background:linear-gradient(90deg,#fde68a,#f59e0b)}
.live-bar.top2 .fill{background:linear-gradient(90deg,#e2e8f0,#94a3b8)}
.live-bar.top3 .fill{background:linear-gradient(90deg,#fed7aa,#f97316)}
.live-bar.top1 .lbl .sc,.live-bar.top2 .lbl .sc,.live-bar.top3 .lbl .sc{color:#2c1a52;text-shadow:none}
.live-bar.top1 .lbl,.live-bar.top2 .lbl,.live-bar.top3 .lbl{color:#2c1a52;text-shadow:none}
/* แถวของตัวเอง (ใช้บนจอนักเรียน) */
.live-bar.me .track{outline:3px solid var(--gold);outline-offset:-3px}
.live-bar.me .fill{background:linear-gradient(90deg,#fdba74,#fb923c)}
.live-bar.me .lbl{color:#2c1a52;text-shadow:none}
.live-bar.me .lbl .sc{color:#7c2d12}

/* ── โพเดียม 1-2-3 ตอนจบเกม ─────────────────────────────────────────────── */
.live-podium{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(8px,1.4vw,18px);margin:clamp(16px,2.4vw,28px) 0 clamp(6px,1vw,12px);flex-wrap:nowrap}
.live-pod{flex:1 1 0;max-width:clamp(120px,20vw,260px);border-radius:clamp(16px,2vw,24px) clamp(16px,2vw,24px) 0 0;
  padding:clamp(10px,1.6vw,18px) clamp(8px,1.2vw,14px) clamp(12px,1.6vw,18px);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;
  color:#2c1a52;font-weight:900;box-shadow:0 -6px 30px rgba(0,0,0,.28);
  animation:lvqRise .62s cubic-bezier(.2,1.35,.4,1)}
@keyframes lvqRise{from{transform:translateY(54px)}to{transform:none}}
.live-pod .who{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;width:100%}
.live-pod .av{font-size:clamp(26px,3.4vw,44px);line-height:1}
.live-pod .nm{font-size:clamp(13px,1.6vw,20px);line-height:1.2;word-break:break-word;text-align:center}
.live-pod .col{display:flex;flex-direction:column;align-items:center}
.live-pod .medal{font-size:clamp(26px,3.6vw,46px);line-height:1}
.live-pod .sc{font-size:clamp(16px,2.1vw,28px)}
.live-pod.p1{height:clamp(190px,24vw,290px);background:linear-gradient(165deg,#fde68a,#f59e0b)}
.live-pod.p2{height:clamp(150px,19vw,230px);background:linear-gradient(165deg,#e2e8f0,#94a3b8);animation-delay:.12s}
.live-pod.p3{height:clamp(126px,16vw,196px);background:linear-gradient(165deg,#fed7aa,#f97316);animation-delay:.24s}

/* ══════════════════════════════════════════════════════════════════════════
   จอนักเรียน (quiz-join.php) — ใช้โทนและชิ้นส่วนเดียวกัน แต่ปรับให้นิ้วเด็กกดง่าย
   ══════════════════════════════════════════════════════════════════════════ */
/* เดิมล็อกความกว้างไว้ 680px เพราะคิดว่านักเรียนใช้มือถืออย่างเดียว
   แต่หลายห้องเรียนนักเรียนใช้คอมหรือ iPad จอใหญ่ ทำให้เหลือพื้นที่ว่างมหาศาล
   ตัวหนังสือกับปุ่มเลยจิ๋วเกินจำเป็น มองจากที่นั่งไม่ถนัด
   ตอนนี้ปล่อยให้กว้างตามจอ แล้วให้ทุกอย่างโตตามไปด้วย */
.live-stage.join{max-width:min(1180px,100%)}
/* มือถือ: เต็มความกว้าง ไม่เสียขอบซ้ายขวาไปกับระยะห่าง */
@media (max-width:600px){
  .live-stage.join{padding:clamp(10px,3vw,16px);border-radius:22px}
}

/* ปุ่มตอบ — เป้ากดต้องใหญ่ ไม่ต้องเล็ง และต้องกึ่งกลางทุกจำนวนตัวเลือกเช่นกัน */
.live-answers{display:grid;gap:clamp(10px,1.6vw,18px);margin:clamp(10px,2vw,18px) 0}
/* มือถือแนวตั้ง: เรียงลงมาทีละแถว เป้ากดกว้างเต็มจอ นิ้วเด็กไม่ต้องเล็ง */
.live-answers[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-answers[data-n="3"]{grid-template-columns:minmax(0,1fr)}
.live-answers[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.live-answers[data-n="5"],.live-answers[data-n="6"]{grid-template-columns:minmax(0,1fr)}
/* แท็บเล็ต/คอม: กระจายเป็นหลายคอลัมน์ ใช้พื้นที่ให้เต็ม */
@media (min-width:640px){
  .live-answers[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .live-answers[data-n="5"],.live-answers[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.live-ans{position:relative;overflow:hidden;border:0;cursor:pointer;font-family:inherit;
  border-radius:clamp(18px,2vw,26px);padding:clamp(16px,2.6vw,26px) clamp(14px,2vw,24px);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);text-align:left;color:#fff;font-weight:900;
  /* สูงตามจอ: มือถือ ~90px · iPad ~150px · คอม ~180px — เต็มตา กดง่าย เห็นชัด */
  min-height:clamp(86px,14vh,190px);
  box-shadow:0 7px 0 rgba(0,0,0,.24),0 12px 24px rgba(0,0,0,.2);
  /* เข้าเร็วกว่าฝั่งจอครู เพราะเด็กต้องรีบกดแข่งกับเวลา ปุ่มต้องพร้อมกดทันที */
  transition:transform .1s,box-shadow .1s;animation:lvqIn .22s}
.live-ans:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.24)}
.live-ans::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 46%)}
.live-ans.c0{background:linear-gradient(150deg,#f43f5e,#c81e42)}
.live-ans.c1{background:linear-gradient(150deg,#3b82f6,#1554b8)}
.live-ans.c2{background:linear-gradient(150deg,#f4b400,#c07f00)}
.live-ans.c3{background:linear-gradient(150deg,#34c759,#1f8f3f)}
.live-ans .sh{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(50px,5.4vw,84px);height:clamp(50px,5.4vw,84px);
  border-radius:clamp(14px,1.6vw,22px);background:rgba(255,255,255,.22);
  font-size:clamp(25px,3vw,44px);line-height:1}
.live-ans .tx{flex:1;font-size:clamp(19px,3.4vw,42px);line-height:1.24;word-break:break-word}
/* จอกว้างที่วางหลายคอลัมน์ — จัดกึ่งกลางแนวตั้ง สมดุลและอ่านง่ายกว่าชิดซ้าย */
@media (min-width:640px){
  .live-answers[data-n="3"] .live-ans,
  .live-answers[data-n="5"] .live-ans,
  .live-answers[data-n="6"] .live-ans{flex-direction:column;justify-content:center;
    text-align:center;gap:clamp(8px,1.2vw,16px)}
  .live-answers[data-n="3"] .live-ans .tx,
  .live-answers[data-n="5"] .live-ans .tx,
  .live-answers[data-n="6"] .live-ans .tx{flex:0 1 auto}
}

/* แถบเวลาบนมือถือ */
.live-jtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.live-timebar{height:clamp(12px,1.4vw,22px);border-radius:999px;background:rgba(255,255,255,.14);
  overflow:hidden;margin-bottom:clamp(10px,1.6vw,18px)}
.live-timebar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#34c759,#fbbf24,#f43f5e);transition:width 1s linear}

/* การ์ดผลของนักเรียน ถูก/ผิด/หมดเวลา */
.live-result{border-radius:26px;padding:clamp(20px,5vw,30px) 18px;color:#fff;text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.3);animation:lvqPop .44s cubic-bezier(.2,1.5,.4,1)}
@keyframes lvqPop{from{transform:scale(.62)}to{transform:scale(1)}}
.live-result.ok{background:linear-gradient(150deg,#34d399,#15803d)}
.live-result.no{background:linear-gradient(150deg,#fb7185,#be123c)}
.live-result.late{background:linear-gradient(150deg,#a5b4c4,#475569)}
.live-result.rank{background:linear-gradient(150deg,#c084fc,#7c3aed)}
.live-result .ic{font-size:clamp(58px,10vw,132px);line-height:1;animation:lvqBob 1.5s ease-in-out infinite}
@keyframes lvqBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.live-result .ttl{font-size:clamp(28px,5.4vw,66px);font-weight:900;margin:8px 0 2px;
  text-shadow:0 3px 12px rgba(0,0,0,.3)}
.live-result .pts{display:inline-block;background:rgba(255,255,255,.26);border-radius:999px;
  padding:clamp(9px,1.2vw,16px) clamp(26px,3vw,44px);
  font-size:clamp(22px,3.6vw,46px);font-weight:900;margin-top:12px}
.live-result .sub2{font-size:clamp(14px,2vw,24px);font-weight:800;opacity:.95;margin-top:14px;line-height:1.55}

/* แถบสรุปอันดับของตัวเอง */
.live-myrank{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--card-2);border:1px solid var(--line);border-radius:20px;
  padding:clamp(12px,1.6vw,20px) clamp(16px,2vw,26px);margin-top:14px;font-weight:900;color:var(--ink);
  font-size:clamp(15px,2vw,26px)}
.live-myrank b{color:var(--gold);font-size:1.25em}

/* หน้ากรอกรหัสเข้าห้อง */
.live-join-form{text-align:center}
.live-join-form .live-field{margin:10px 0}
.live-join-form input{width:100%;box-sizing:border-box;padding:16px;border-radius:18px;
  border:2px solid var(--line);background:rgba(255,255,255,.94);color:#2c1a52;
  font-family:inherit;font-size:24px;font-weight:900;text-align:center}
.live-join-form input:focus{outline:3px solid var(--gold);outline-offset:1px}
/* เว้นระยะตัวอักษรเฉพาะตอนพิมพ์รหัสแล้ว — ถ้าใส่ตลอด ข้อความบอกใบ้ภาษาไทยจะฉีกออกจากกันอ่านไม่ออก */
.live-join-form #code:not(:placeholder-shown){letter-spacing:10px;font-size:28px}
.live-join-form input::placeholder{color:#a99cc4;font-weight:800}
.live-err{color:#fecaca;font-weight:800;margin:8px 0 0;min-height:22px}
.live-note{color:var(--ink-dim);font-size:14px;font-weight:700;line-height:1.6;margin-top:16px}
.live-note b{color:#fff}
.live-note a{color:#c4b5fd}

/* ── เครื่องที่ตั้งค่า "ลดการเคลื่อนไหว" ไว้ ──
   ปิดลูกเล่นทั้งหมด แต่ทุกอย่างยังแสดงครบเหมือนเดิม
   (ทำได้เพราะอนิเมชันในไฟล์นี้ขยับตำแหน่งอย่างเดียว ไม่ได้คุมความทึบ) */
@media (prefers-reduced-motion:reduce){
  .live-stage *,.live-stage *::before,.live-stage *::after{
    animation:none !important;transition:none !important}
}

/* ── ปุ่มเปิด/ปิดเสียงดนตรี ──────────────────────────────────────────────
   ลอยมุมล่างซ้าย ห่างจากปุ่มสั่งงานของครูที่อยู่กลางจอ กดพลาดยาก
   ห้องเรียนที่ต้องการความเงียบกดปิดได้ และระบบจำค่าไว้ให้ครั้งต่อไป */
.live-mute{position:fixed;left:14px;bottom:14px;z-index:65;
  width:clamp(46px,4vw,58px);height:clamp(46px,4vw,58px);border-radius:50%;
  border:2px solid rgba(255,255,255,.55);background:rgba(38,24,84,.82);
  color:#fff;font-size:clamp(20px,2vw,26px);line-height:1;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.32);transition:transform .12s}
.live-mute:hover{transform:scale(1.06)}
.live-mute:active{transform:scale(.94)}

/* ── จอนักเรียนบนคอม/แท็บเล็ต: ให้ทุกอย่างเต็มตา ─────────────────────── */
@media (min-width:900px){
  /* แถบบอกข้อ/เวลา ใหญ่ขึ้นให้สมกับพื้นที่ */
  .live-stage.join .live-chip{font-size:clamp(18px,1.8vw,26px);padding:12px 26px}
  .live-stage.join .live-h1{font-size:clamp(34px,3.4vw,52px)}
  .live-stage.join .live-sub{font-size:clamp(17px,1.5vw,22px)}
  .live-stage.join .live-hero-ic{font-size:clamp(70px,6vw,110px)}
  /* ตารางอันดับบนจอใหญ่ อ่านง่ายขึ้น */
  .live-stage.join .live-board{max-width:900px}
  /* หน้ากรอกรหัส ไม่ต้องกว้างเท่าจอ อ่านง่ายกว่าถ้าอยู่กลางเป็นคอลัมน์เดียว */
  .live-join-form{max-width:560px;margin:0 auto}
}

/* ── จอนักเรียน: ให้เต็มพื้นที่จริงๆ ทั้ง iPad และคอม ────────────────────
   ปัญหาเดิมคือปุ่มตอบสูงตายตัว พอเปิดบนจอใหญ่จะเหลือที่ว่างข้างล่างเป็นครึ่งจอ
   แก้โดยให้เวทีสูงตามจอ แล้วปล่อยให้แถวปุ่มตอบ "ยืด" กินพื้นที่ที่เหลือทั้งหมด
   เด็กที่นั่งหลังห้องจึงเห็นปุ่มเต็มตา และนิ้วกดง่ายขึ้นด้วย */
@media (min-width:600px){
  .live-stage.join{display:flex;flex-direction:column;min-height:min(70vh,820px)}
  /* ยืดเต็มพื้นที่ที่เหลือ แต่ "จัดกึ่งกลาง" ไม่ใช่ดึงปุ่มให้สูงจนกลายเป็นเสา
     ปุ่มโตพอให้เห็นชัด แต่ยังเป็นทรงการ์ดที่อ่านง่าย */
  .live-stage.join>.live-answers{flex:1 1 auto;align-content:center}
  .live-stage.join>.live-answers .live-ans{min-height:clamp(140px,32vh,300px)}
  /* หน้าอื่น (รอเริ่ม/เฉลย/คะแนน) จัดกลางแนวตั้งในเวทีที่สูงขึ้น จะได้ไม่ลอยอยู่ด้านบน */
  .live-stage.join>.live-mid,
  .live-stage.join>.live-result,
  .live-stage.join>.live-join-form{margin-top:auto;margin-bottom:auto}
}
/* iPad แนวตั้ง — ตัวอักษรบนปุ่มต้องใหญ่สมกับปุ่มที่สูงขึ้น */
@media (min-width:600px) and (max-width:1024px){
  .live-stage.join .live-ans .tx{font-size:clamp(24px,3.6vw,36px)}
  .live-stage.join .live-chip{font-size:clamp(16px,2.2vw,22px);padding:10px 22px}
}

/* ── ปุ่มเสียงบนจอครู ────────────────────────────────────────────────────
   วางมุมขวาบนของเวที เห็นชัดตลอดเวลาไม่ว่าจะอยู่หน้าไหน
   (อยู่นอก #app จึงไม่ถูกวาดใหม่ทิ้งตอนเปลี่ยนสถานะ)
   ครูมองหาปุ่มนี้ได้ทันทีเวลาต้องการความเงียบกลางคาบ */
.live-wrap{position:relative}
/* กันที่ว่างแถบล่างของเวทีไว้ให้ปุ่มเสียงโดยเฉพาะ
   ไม่งั้นบนจอแคบที่ปุ่มสั่งงานตกลงมาสองแถว ปุ่มเสียงจะไปทับปุ่ม "หน้าแรก" */
.live-wrap .live-stage{padding-bottom:clamp(62px,6vw,84px)}
/* วางมุมขวา"ล่าง" — มุมขวาบนไปทับป้าย "ตอบแล้ว x/y" ตอนกำลังเล่น
   มุมล่างขวาว่างทุกหน้า เพราะปุ่มสั่งงานของครูจัดกึ่งกลางเสมอ */
.live-snd{position:absolute;bottom:clamp(10px,1.4vw,18px);right:clamp(10px,1.4vw,18px);z-index:6;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.16);color:#f4f0ff;font-weight:900;
  padding:clamp(8px,1vw,12px) clamp(14px,1.6vw,22px);font-size:clamp(13px,1.4vw,17px);
  backdrop-filter:blur(6px);transition:transform .12s,background .12s}
.live-snd:hover{background:rgba(255,255,255,.26)}
.live-snd:active{transform:translateY(2px)}
.live-snd.off{background:rgba(244,63,94,.30);border-color:rgba(255,255,255,.4)}
.live-snd{display:inline-flex;align-items:center;gap:7px}
.live-snd .ic{font-size:1.15em;line-height:1}
/* จอแคบ: เหลือเฉพาะไอคอน ไม่ให้ไปเบียดหัวข้อ */
@media (max-width:560px){
  .live-snd{padding:9px 11px}
  .live-snd .tx{display:none}
}

/* ── การ์ด "ชื่อของหนู" บนจอนักเรียนตอนรอครูกดเริ่มเกม ────────────────────
   เด็กบางคนตั้งชื่อแล้วลืมว่าตั้งว่าอะไร พอขึ้นตารางคะแนนเลยหาตัวเองไม่เจอ
   จึงโชว์ชื่อไว้ตัวใหญ่ตั้งแต่ตอนรอ ให้มีเวลาอ่านและจำก่อนเกมเริ่ม */
.live-me{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1vw,10px);
  background:linear-gradient(135deg,rgba(251,191,36,.24),rgba(255,255,255,.12));
  border:2px solid rgba(251,191,36,.55);border-radius:clamp(18px,2.2vw,26px);
  padding:clamp(14px,2vw,24px) clamp(16px,2.4vw,32px);
  margin:clamp(12px,2vw,20px) auto;max-width:min(560px,100%)}
.live-me .lb{font-size:clamp(13px,1.6vw,19px);font-weight:900;color:var(--ink-dim)}
.live-me .who{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,16px);
  flex-wrap:wrap;max-width:100%}
.live-me .av{font-size:clamp(34px,5vw,58px);line-height:1}
.live-me .nm{font-size:clamp(26px,4.6vw,54px);font-weight:900;color:#fff;line-height:1.15;
  overflow-wrap:anywhere;text-shadow:0 3px 14px rgba(0,0,0,.35)}
.live-me .hint{font-size:clamp(12px,1.4vw,16px);font-weight:800;color:var(--ink-dim)}
/* ป้ายชื่อตัวเองในรายชื่อคนในห้อง — ให้หาตาเจอง่ายว่าตัวเองอยู่ตรงไหน */
.live-p.me{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#3b2a05;
  border-color:transparent;box-shadow:0 4px 14px rgba(251,191,36,.4)}

/* ── แถวใต้รหัสห้อง: ปุ่ม QR + นาฬิกานับถอยหลัง ─────────────────────────── */
.live-joinrow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,16px);
  flex-wrap:wrap;margin-top:clamp(8px,1.2vw,14px)}
.live-btn.qr{background:linear-gradient(135deg,#22d3ee,#0891b2);border-color:transparent;
  box-shadow:0 5px 0 rgba(6,80,100,.45),0 10px 22px rgba(8,145,178,.3)}
.live-btn.qr:active{box-shadow:0 1px 0 rgba(6,80,100,.45)}
.live-ttl em{font-style:normal;opacity:.72;font-weight:700}
/* ตัวเลขนาฬิกาใช้ความกว้างเท่ากันทุกหลัก ไม่งั้นข้อความจะขยับไปมาทุกวินาที */
.live-ttl b{font-variant-numeric:tabular-nums;color:#fff}
.live-ttl.warn b{color:#fca5a5}

/* ── สวิตช์ "ให้ระบบกดข้อต่อไปเอง" ──────────────────────────────────────── */
.live-auto{display:flex;align-items:flex-start;gap:12px;cursor:pointer;text-align:left;
  max-width:min(560px,100%);margin:clamp(12px,1.8vw,18px) auto 0;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(11px,1.4vw,16px) clamp(14px,1.8vw,20px);transition:background .15s,border-color .15s}
.live-auto:hover{background:var(--card-2)}
.live-auto.on{background:linear-gradient(135deg,rgba(56,189,248,.24),rgba(255,255,255,.10));
  border-color:rgba(56,189,248,.6)}
.live-auto input{flex:0 0 auto;width:22px;height:22px;margin-top:2px;accent-color:#38bdf8;cursor:pointer}
.live-auto .tx{display:block;font-size:clamp(13px,1.5vw,17px);line-height:1.45;color:var(--ink)}
.live-auto .tx b{color:#fff;display:block}
.live-auto .tx em{font-style:normal;color:var(--ink-dim);font-size:.92em}

/* ── เลือกเวลาตอบต่อข้อ (อยู่หน้ารอ ก่อนกดเริ่มเกม) ────────────────────── */
.live-qt{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);flex-wrap:wrap;text-align:left;
  max-width:min(560px,100%);margin:clamp(12px,1.8vw,18px) auto 0;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(11px,1.4vw,16px) clamp(14px,1.8vw,20px)}
.live-qt .lb{flex:1 1 200px;min-width:0;font-size:clamp(13px,1.5vw,17px);line-height:1.45;color:var(--ink)}
.live-qt .lb b{display:block;color:#fff}
.live-qt .lb em{display:block;font-style:normal;color:var(--ink-dim);font-size:.92em}
.live-qt .lb em b{display:inline;color:#fde68a}
.live-qt .chips{flex:0 0 auto;display:flex;gap:clamp(5px,.7vw,8px);flex-wrap:wrap}
/* ปุ่มตัวเลขต้องใหญ่พอกดด้วยนิ้วบนแท็บเล็ต และอ่านออกจากท้ายห้องตอนฉายโปรเจกเตอร์ */
.live-qt .qt{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--ink);
  border-radius:13px;cursor:pointer;font-family:inherit;font-weight:900;line-height:1;
  padding:clamp(8px,1.05vw,12px) clamp(9px,1.2vw,14px);font-size:clamp(15px,1.8vw,21px);
  display:inline-flex;align-items:baseline;gap:2px;
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
.live-qt .qt i{font-style:normal;font-size:.6em;font-weight:800;opacity:.75}
.live-qt .qt:hover{background:rgba(255,255,255,.15)}
.live-qt .qt:active{transform:translateY(2px)}
.live-qt .qt.on{background:linear-gradient(135deg,#38bdf8,#6366f1);border-color:transparent;color:#fff;
  box-shadow:0 5px 16px rgba(56,189,248,.45)}
@media (max-width:520px){
  .live-qt{flex-direction:column;align-items:stretch}
  .live-qt .chips{justify-content:center}
}

/* ── ป๊อปอัป QR ให้นักเรียนสแกน ─────────────────────────────────────────── */
.live-qrwrap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(16,8,40,.78);backdrop-filter:blur(6px)}
.live-qrbox{background:#fff;color:#2c1a52;border-radius:clamp(20px,2.4vw,30px);text-align:center;
  padding:clamp(18px,2.6vw,32px);max-width:min(94vw,520px);max-height:94vh;overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.45);animation:lvqPop .35s cubic-bezier(.2,1.4,.4,1)}
.live-qr-kicker{margin:0 0 12px;font-weight:900;font-size:clamp(16px,2vw,22px);color:#5b21b6}
/* ตัว QR เองต้องขาวล้วนและใหญ่พอ ให้กล้องมือถือจับได้จากกลางห้อง */
.live-qr-code{display:flex;justify-content:center;align-items:center;background:#fff;
  border-radius:16px;padding:10px;min-height:200px}
.live-qr-code img,.live-qr-code canvas{display:block;width:min(64vw,300px);height:auto}
.live-qr-num{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}
.live-qr-num span{background:#f3ecff;color:#5b21b6;border-radius:12px;
  min-width:clamp(34px,6vw,48px);padding:6px 4px;font-size:clamp(22px,4.4vw,34px);font-weight:900;line-height:1}
.live-qr-url{margin:8px 0 2px;font-weight:800;color:#6d5b93;font-size:clamp(12px,1.5vw,15px);word-break:break-all}
.live-qr-tip{margin:4px 0 16px;color:#8a7fb0;font-weight:700;font-size:clamp(12px,1.4vw,14px)}
.live-qrbox .live-btn{background:linear-gradient(135deg,#a855f7,#ec4899);border-color:transparent}