@import url('fonts.css');

:root{
  --bg:#151027;
  --bg2:#1e1738;
  --card:#271e47;
  --card2:#312555;
  --line:rgba(255,255,255,.14);
  --ink:#f4f1ff;
  --dim:#b3a9d6;
  --brand:#ffcf4d;
  --brand2:#ff7a59;
  --ok:#3ddc97;
  --no:#ff5d73;
  --blue:#5ac8fa;
  --purple:#b07cff;
  --shadow:0 18px 44px rgba(0,0,0,.42);
  --r:22px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Mitr',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  background:
    radial-gradient(1100px 620px at 12% -8%, #3b2a6b 0%, transparent 62%),
    radial-gradient(900px 560px at 92% 6%, #63305e 0%, transparent 58%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  line-height:1.5;
  overflow-x:hidden;
}

.wrap{max-width:1080px;margin:0 auto;padding:20px 18px 40px}
.wrap.narrow{max-width:520px}

/* ---------- ส่วนหัว ---------- */
.top{display:flex;align-items:center;gap:12px;padding:6px 2px 18px}
.logo{
  font-weight:600;font-size:20px;letter-spacing:.3px;
  background:linear-gradient(96deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.top .spacer{flex:1}
.badge{
  font-size:12px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--dim);
  white-space:nowrap;
}
.badge.warn{border-color:rgba(255,207,77,.45);background:rgba(255,207,77,.12);color:#ffe08a}
.badge.bad{border-color:rgba(255,93,115,.5);background:rgba(255,93,115,.14);color:#ffb3bf}

/* ---------- กล่อง ---------- */
.card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px;
}
.card + .card{margin-top:16px}
h1{font-size:clamp(24px,4.6vw,38px);font-weight:600;margin:0 0 6px;letter-spacing:.2px}
h2{font-size:clamp(19px,3vw,24px);font-weight:500;margin:0 0 14px}
p.sub{color:var(--dim);margin:0 0 20px;font-size:15px}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:500;font-size:17px;
  padding:15px 26px;border-radius:16px;border:0;cursor:pointer;
  background:linear-gradient(96deg,var(--brand),var(--brand2));color:#2a1608;
  box-shadow:0 10px 26px rgba(255,122,89,.3);
  transition:transform .12s ease, filter .12s ease, opacity .12s;
  width:100%;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(2px)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn.ghost{
  background:rgba(255,255,255,.07);color:var(--ink);
  border:1px solid var(--line);box-shadow:none;
}
.btn.small{font-size:15px;padding:11px 18px;width:auto}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.btn-row .btn{width:auto;flex:1;min-width:150px}

/* ---------- ฟอร์ม ---------- */
label{display:block;font-size:14px;color:var(--dim);margin:0 0 7px}
input[type=text],input[type=number],input[type=password],textarea,select{
  width:100%;font-family:inherit;font-size:17px;color:var(--ink);
  background:rgba(0,0,0,.26);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--brand);background:rgba(0,0,0,.34)}
.field{margin-bottom:16px}
input.pin{
  text-align:center;font-size:34px;font-weight:600;letter-spacing:10px;padding:16px 10px;
}

/* ---------- จอครู: โค้ดห้อง ---------- */
.pinbox{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
.pincode{
  font-size:clamp(48px,11vw,96px);font-weight:600;letter-spacing:12px;line-height:1.08;
  background:linear-gradient(96deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:2px 0 0;
}
.pinlabel{font-size:14px;color:var(--dim);letter-spacing:2px}
.joinurl{
  margin-top:10px;font-size:16px;color:var(--blue);word-break:break-all;
  background:rgba(0,0,0,.24);border:1px dashed var(--line);border-radius:12px;padding:10px 14px;
}
#qrbox{background:#fff;padding:10px;border-radius:16px;line-height:0}
#qrbox canvas{display:block;border-radius:6px}

/* ---------- รายชื่อผู้เล่น ---------- */
.players{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px;min-height:44px}
.chip{
  padding:9px 15px;border-radius:999px;font-size:15px;
  background:rgba(255,255,255,.09);border:1px solid var(--line);
  animation:pop .32s cubic-bezier(.2,1.5,.4,1);
}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.count{font-size:15px;color:var(--dim);margin-bottom:6px}

/* ---------- ภาพคำถาม ---------- */
.qhead{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.qnum{
  font-size:14px;font-weight:500;padding:7px 15px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid var(--line);white-space:nowrap;
}
.qtext{font-size:clamp(19px,3.2vw,27px);font-weight:500;flex:1;min-width:200px}
.stage{
  position:relative;border-radius:18px;overflow:hidden;
  background:#0d0a18;border:1px solid var(--line);line-height:0;
  touch-action:manipulation;
}
.stage img{width:100%;display:block;user-select:none;-webkit-user-drag:none}
.stage.pickable{cursor:crosshair}
.mark{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  border-radius:50%;border:4px solid var(--ok);
  box-shadow:0 0 0 4px rgba(0,0,0,.4), 0 0 26px rgba(61,220,151,.75);
  animation:ring .5s cubic-bezier(.2,1.5,.4,1);
}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.dot{
  position:absolute;width:15px;height:15px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  border:2px solid rgba(0,0,0,.55);
}
.dot.ok{background:var(--ok)}
.dot.no{background:var(--no)}
.mydot{
  position:absolute;width:26px;height:26px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  border:3px solid #fff;background:rgba(255,255,255,.25);
  box-shadow:0 0 0 3px rgba(0,0,0,.45);
  animation:ring .3s cubic-bezier(.2,1.5,.4,1);
}

/* ---------- แถบเวลา ---------- */
.timer{height:14px;border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden;margin:16px 0 6px}
.timer > i{
  display:block;height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ok),var(--brand));
  transition:width .25s linear;
}
.timer.low > i{background:linear-gradient(90deg,var(--brand2),var(--no))}
.timerrow{display:flex;justify-content:space-between;font-size:15px;color:var(--dim)}
.bigsec{font-size:26px;font-weight:600;color:var(--ink)}

/* ---------- ตารางอันดับ ---------- */
.rank{list-style:none;margin:0;padding:0}
.rank li{
  display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:10px;
  border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line);
  animation:slide .4s cubic-bezier(.2,1,.4,1) backwards;
}
@keyframes slide{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
.rank li .pos{
  width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-weight:600;font-size:18px;background:rgba(255,255,255,.1)
}
.rank li:nth-child(1) .pos{background:linear-gradient(140deg,#ffd76e,#ff9f43);color:#3a2000}
.rank li:nth-child(2) .pos{background:linear-gradient(140deg,#e3e8f0,#a9b4c6);color:#26303d}
.rank li:nth-child(3) .pos{background:linear-gradient(140deg,#e0a06a,#b9713c);color:#2d1606}
.rank li .nm{flex:1;font-size:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank li .sc{font-weight:600;font-size:19px;color:var(--brand)}
.rank li .gain{font-size:14px;color:var(--ok);margin-left:6px}
.rank li.me{border-color:var(--brand);background:rgba(255,207,77,.14)}

/* ---------- ผลลัพธ์ฝั่งนักเรียน ---------- */
.verdict{text-align:center;padding:34px 20px}
.verdict .icon{font-size:76px;line-height:1;margin-bottom:10px}
.verdict h2{font-size:clamp(26px,6vw,38px);margin-bottom:6px}
.verdict.good h2{color:var(--ok)}
.verdict.bad h2{color:var(--no)}
.verdict .pts{font-size:44px;font-weight:600;color:var(--brand);margin:8px 0}
.verdict .meta{color:var(--dim);font-size:16px}

/* ---------- โพเดียม ---------- */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:26px 0 8px}
.pod{flex:1;max-width:200px;text-align:center}
.pod .who{font-size:17px;font-weight:500;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .bar{
  border-radius:16px 16px 0 0;display:grid;place-items:center;
  font-size:34px;font-weight:600;color:#2a1608;
  animation:grow .7s cubic-bezier(.2,1,.35,1) backwards;
}
@keyframes grow{from{height:0 !important;opacity:0}}
.pod.p1 .bar{height:170px;background:linear-gradient(180deg,#ffd76e,#ff9f43)}
.pod.p2 .bar{height:125px;background:linear-gradient(180deg,#e3e8f0,#a9b4c6);color:#26303d;animation-delay:.1s}
.pod.p3 .bar{height:95px;background:linear-gradient(180deg,#e0a06a,#b9713c);color:#2d1606;animation-delay:.2s}
.pod .scr{font-size:15px;color:var(--dim);margin-top:8px}

.center{text-align:center}
.mt{margin-top:18px}
.hint{font-size:14px;color:var(--dim);margin-top:10px;line-height:1.65}
.hidden{display:none !important}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

.waiting{text-align:center;padding:40px 16px}
.waiting .big{font-size:clamp(22px,5vw,30px);font-weight:500;margin-bottom:8px}
.pulse{display:inline-block;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}

@media(max-width:640px){
  .wrap{padding:14px 13px 32px}
  .card{padding:18px;border-radius:18px}
  .btn-row .btn{min-width:0}
  .top{padding:2px 2px 12px;gap:8px}
  .logo{font-size:16px;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .badge{font-size:11px;padding:4px 10px;max-width:52%;overflow:hidden;text-overflow:ellipsis}
  .qhead{gap:10px;margin-bottom:11px}
  .qnum{font-size:12px;padding:5px 11px}
  .podium{gap:9px}
  .pod .who{font-size:14px}
  .pod.p1 .bar{height:132px}
  .pod.p2 .bar{height:98px}
  .pod.p3 .bar{height:74px}
}

/* ---------- โหมดหาให้ครบ ---------- */
.mark.miss{border-color:var(--no);box-shadow:0 0 0 4px rgba(0,0,0,.4),0 0 26px rgba(255,93,115,.7)}
.marknum{
  position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  min-width:30px;height:30px;padding:0 7px;border-radius:999px;display:grid;place-items:center;
  font-size:15px;font-weight:600;color:#fff;background:var(--ok);
  border:2px solid rgba(0,0,0,.4);box-shadow:0 3px 10px rgba(0,0,0,.45);
  animation:ring .4s cubic-bezier(.2,1.5,.4,1);
}
.marknum.miss{background:var(--no)}
.progress{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 0}
.pill{
  font-size:15px;padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);white-space:nowrap;
}
.pill b{color:var(--brand);font-size:18px}
.pill.warn{border-color:rgba(255,93,115,.5);background:rgba(255,93,115,.13)}
.pill.warn b{color:var(--no)}
.foundlist{list-style:none;margin:14px 0 0;padding:0}
.foundlist li{
  display:flex;gap:10px;align-items:flex-start;padding:11px 14px;margin-bottom:8px;
  border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:15px;line-height:1.55;animation:slide .35s cubic-bezier(.2,1,.4,1) backwards;
}
.foundlist li .n{
  flex:none;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  font-size:14px;font-weight:600;background:var(--ok);color:#0c2a1e;
}
.foundlist li.miss{background:rgba(255,93,115,.09);border-color:rgba(255,93,115,.35)}
.foundlist li.miss .n{background:var(--no);color:#3a0a12}
.foundlist li .lb{flex:1;min-width:0}
.foundlist li .cnt{font-size:13px;color:var(--dim);white-space:nowrap}
.bigcount{font-size:clamp(36px,9vw,56px);font-weight:600;color:var(--brand);line-height:1.1;margin:6px 0}
.zoomwrap{overflow:auto;border-radius:18px;-webkit-overflow-scrolling:touch;max-width:100%}
.zoomwrap .stage{transition:width .18s ease}

/* ---------- ทางเข้าโหมดผู้จัดกิจกรรม ---------- */
.teachrow{text-align:center;margin-top:22px}
.teachrow a{
  color:var(--dim);font-size:13px;text-decoration:none;opacity:.5;
  padding:8px 14px;border-radius:999px;
}
.teachrow a:hover{opacity:1;background:rgba(255,255,255,.06)}