/* =========================================================
   T2MEP Coding — เลย์เอาต์หน้าจอนักเรียน
   ซ้าย: ฉากจำลอง (canvas) | กลาง: Toolbox | ขวา: Workspace
   ========================================================= */

.app{
  display:grid;
  grid-template-rows:auto 1fr;
  height:100dvh;
  gap:10px;
  padding:10px 12px 12px;
}

/* ---------------- Top bar ---------------- */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:8px 14px;
  background:linear-gradient(135deg,var(--royal-700),var(--royal-500));
  color:#fff; border-radius:18px; box-shadow:var(--sh-2);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:900; font-size:19px; letter-spacing:.4px; flex:0 0 auto; }
.brand__crown{ font-size:25px; animation:floaty 3.2s ease-in-out infinite; }
.brand small{ display:block; font-size:10.5px; font-weight:700; opacity:.75; letter-spacing:1.6px; }
/* ป้ายเวอร์ชัน (small ตัวแรก) — ตัวเล็กติดชื่อ ไม่แย่งบรรทัดรอง */
.brand > span > small:first-of-type{
  display:inline; font-size:10px; font-weight:700; opacity:.5;
  letter-spacing:.06em; margin-left:6px; vertical-align:middle;
}

.topbar .chip{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); color:#fff; }
.topbar .spacer{ margin-left:auto; }

/* แถบวงกลมด่านแบบ Code.org (v1.27.0) — แทนชิปข้อความ "ด่าน N / M"
   กดวงกลมที่ผ่านแล้วได้ (เขียวอ่อน/เข้ม) เพื่อย้อนไปแก้ · เทาและครูคุมจังหวะกดไม่ได้ */
.prog{
  display:flex; align-items:center; gap:6px;
  flex:0 1 auto; min-width:0; max-width:min(420px, 36vw);
  padding:5px 10px;
  background:#fff; border-radius:999px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
}
.prog::-webkit-scrollbar{ display:none; }
.prog__empty{ color:var(--ink-soft); font-size:13px; font-weight:800; padding:0 6px; }
.prog__dot{
  flex:0 0 auto;
  width:12px; height:12px; border-radius:50%;
  border:2px solid #c8c2d6; background:transparent;
  cursor:default; user-select:none;
}
.prog__dot--ok{ background:#8fd9a4; border-color:#5cbf78; }
.prog__dot--perfect{ background:#1e8e3e; border-color:#166f30; }
.prog__dot--now{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ink); border-color:#5a5470;
  font-size:12px; font-weight:800; line-height:1;
}
.prog__dot--now.prog__dot--ok{ background:#8fd9a4; color:#1c6b33; border-color:#1c6b33; }
.prog__dot--now.prog__dot--perfect{ background:#1e8e3e; color:#fff; border-color:#145c2a; }
.prog__dot--go{ cursor:pointer; }
.prog__dot--go:hover{ transform:scale(1.12); }

.hud{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hud__score{ font-variant-numeric:tabular-nums; font-size:15px; }
#score-pop{ display:inline-block; }
#score-pop.bump{ animation:starPop .45s ease; }

/* ---------------- Main grid ---------------- */
.stage-grid{
  display:grid;
  grid-template-columns:minmax(360px,1.05fr) 254px minmax(300px,1fr);
  gap:12px;
  min-height:0;
}

/* ---------------- Scene (ซ้าย) ---------------- */
.scene{ display:flex; flex-direction:column; min-height:0; }
.scene__body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  gap:10px; padding:12px;
  background:linear-gradient(180deg,#dff3ff,#f2e9ff);
  overflow:hidden;                     /* กันแผนที่ล้นออกนอกกรอบไม่ว่ากรณีใด */
}

/* เวทีของแผนที่: กินพื้นที่ "ที่เหลือ" หลังหักกล่องภารกิจแล้วเท่านั้น
   min-height:0 สำคัญมาก — ถ้าไม่ใส่ flex item จะไม่ยอมหดต่ำกว่าเนื้อหาข้างใน */
.scene__stage{
  flex:1 1 auto;
  min-height:0;
  position:relative;
}

/* กล่องนี้คือหัวใจของการแก้บั๊ก
   max-height:100% ของ canvas ใช้ไม่ได้ถ้าพ่อแม่มีความสูงแบบ "ไม่ชัดเจน" (มาจาก flex)
   เบราว์เซอร์จะมองข้ามไปเลย → แผนที่เลยล้นทับกล่องภารกิจ
   การใช้ position:absolute + inset:0 ทำให้กล่องนี้มีความสูง "ชัดเจน"
   เปอร์เซ็นต์ของลูกจึงคำนวณได้จริง และกล่องนี้อยู่นอก flow จึงดันใครไม่ได้ */
.scene__fit{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}

/* canvas เป็น grid item ที่ถูกจำกัดทั้งกว้างและสูง จึงย่อลงพอดีช่องเสมอ
   (เดิมใช้ width:100% + aspect-ratio ทำให้ความสูงถูกบังคับตามความกว้าง แล้วล้นลงมาทับกล่องภารกิจ) */
#scene-canvas{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(40,18,80,.22), inset 0 0 0 4px rgba(255,255,255,.6);
  background:#8fd06a;
  touch-action:none;
}

/* กล่องคำสั่งภารกิจ (ตัวละครพูด)
   flex:0 0 auto = ขอพื้นที่ตามเนื้อหาจริงและห้ามถูกบีบ ข้อความจึงแสดงครบเสมอ */
.briefing{
  flex:0 0 auto;
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 14px; background:#fff; border-radius:16px;
  border:2px solid var(--line); box-shadow:var(--sh-1);
  width:100%;
}
.briefing__avatar{ font-size:32px; flex:0 0 auto; animation:floaty 3.6s ease-in-out infinite; }
.briefing__text{ font-size:14.5px; line-height:1.55; font-weight:700; color:var(--ink); }
.briefing__text b{ color:var(--royal-600); }

.controls{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:11px 14px; background:var(--panel-2); border-top:2px solid var(--line);
}
.controls .spacer{ margin-left:auto; }

.speed{ display:flex; align-items:center; gap:4px; background:#fff; border:2px solid var(--line); border-radius:999px; padding:3px; }
.speed button{
  border:0; background:transparent; cursor:pointer; border-radius:999px;
  padding:5px 11px; font-size:13px; font-weight:900; color:var(--ink-soft);
}
.speed button.on{ background:var(--royal-500); color:#fff; }

/* ---------------- Toolbox (กลาง) ---------------- */
.tools{ display:flex; flex-direction:column; min-height:0; }
.tools .toolbox{ flex:1; min-height:0; }

.limit-bar{
  padding:9px 14px; background:var(--panel-2); border-top:2px solid var(--line);
  font-size:12.5px; font-weight:800; color:var(--ink-soft);
}
.limit-bar__track{
  height:9px; border-radius:999px; background:var(--line); overflow:hidden; margin-top:6px;
}
.limit-bar__fill{
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--mint-500),var(--sky-500));
  transition:width .2s ease, background .2s ease;
}
.limit-bar.over .limit-bar__fill{ background:linear-gradient(90deg,#ff8a5b,#e0413f); }
.limit-bar.over{ color:#c22e1f; }

/* ---------------- Workspace (ขวา) ---------------- */
.code{ display:flex; flex-direction:column; min-height:0; }
.code .workspace{ flex:1; min-height:0; }

.ws-tools{ display:flex; gap:6px; }
.ws-tools .btn{ box-shadow:none; background:rgba(255,255,255,.16); }
.ws-tools .btn:active{ transform:none; background:rgba(255,255,255,.3); }
#btn-undo:disabled{ opacity:.4; cursor:not-allowed; }
body.dragging #btn-undo{ pointer-events:none; }

/* ---------------- Hint ---------------- */
.hint-box{
  margin:0 18px 14px; padding:12px 15px;
  background:linear-gradient(135deg,#fff6dd,#ffeec2);
  border:2px solid var(--gold-400); border-radius:14px;
  font-size:14px; font-weight:700; color:#7a5200; line-height:1.55;
  animation:pop .25s ease;
}

/* =========================================================
   สถานะ "ผ่านด่านแล้ว" — ล็อกจนกว่าคุณครูจะปล่อยด่านต่อไป
   ปุ่มที่กดไม่ได้ต้อง "ดูเหมือนกดไม่ได้" ด้วย ไม่ใช่แค่ disabled เงียบ ๆ
   ไม่งั้นเด็กจะกดรัว ๆ แล้วคิดว่าเครื่องค้าง
   ========================================================= */
body.level-locked .controls .btn:disabled,
body.level-locked .ws-tools .btn:disabled{
  opacity:.45; cursor:not-allowed; filter:grayscale(.6);
}
body.level-locked .workspace{
  position:relative;
  background-image:linear-gradient(135deg,rgba(46,182,125,.07),rgba(46,182,125,0));
}
body.level-locked .toolbox{ opacity:.5; pointer-events:none; }

/* แถบ "รอคุณครู" บนหน้าจอหลัก */
.wait-strip{
  flex:0 0 auto;
  padding:9px 14px; border-radius:14px;
  background:linear-gradient(135deg,#e9fbee,#dcf7e3);
  border:2px solid #8fd9a4; color:#1c6b33;
  font-size:13.5px; font-weight:800; line-height:1.5;
  animation:pop .3s ease;
}
.wait-strip__n{
  display:inline-block; margin-left:4px; padding:1px 9px; border-radius:999px;
  background:#fff; border:1.5px solid #8fd9a4; font-variant-numeric:tabular-nums;
}

/* การ์ดรอเพื่อนในหน้าต่างผล */
.wait-card{
  margin:14px 0 4px; padding:14px 16px; border-radius:18px;
  background:linear-gradient(135deg,#f3f7ff,#eef9f1);
  border:2px solid var(--line);
}
.wait__anim{ display:flex; justify-content:center; gap:14px; font-size:26px; }
.wait__anim span{ animation:floaty 2.4s ease-in-out infinite; }
.wait__anim span:nth-child(2){ animation-delay:.35s; }
.wait__anim span:nth-child(3){ animation-delay:.7s; }
.wait__cheer{
  margin:8px 0 0; font-size:14.5px; font-weight:800; line-height:1.6; color:var(--royal-700);
}
.wait__bar{
  height:12px; border-radius:999px; background:var(--line); overflow:hidden; margin:12px 0 6px;
}
.wait__bar i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--mint-500),#4ad07a);
  transition:width .5s ease;
}
.wait__meta{ margin:0; font-size:13px; font-weight:800; color:var(--ink-soft); }
.wait__meta b{ color:#1c8f45; }

/* ---------------- Lobby overlay ---------------- */
.lobby-card{ width:min(520px,100%); }
.lobby__pin{
  font-size:44px; font-weight:900; letter-spacing:.22em;
  color:var(--royal-700); margin:4px 0 2px;
}
/* ---------- ปุ่มเปิดห้องแต่งตัว (หน้ากรอก PIN) ---------- */
.ava-open{
  display:flex; align-items:center; gap:12px; width:100%; cursor:pointer;
  margin:4px 0 18px; padding:10px 14px; border-radius:20px; font-family:inherit; text-align:left;
  background:var(--panel-2); border:3px solid var(--line); color:var(--ink);
  transition:transform .12s ease, border-color .12s ease;
}
.ava-open:hover{ transform:translateY(-2px); border-color:var(--royal-300); }
.ava-open__pic{ flex:0 0 auto; }
.ava-open__txt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.ava-open__txt b{ font-size:16px; font-weight:900; }
.ava-open__txt small{ font-size:12px; font-weight:700; color:var(--ink-soft); }
.ava-open__go{
  flex:0 0 auto; font-size:13px; font-weight:900; color:#7a5200;
  background:var(--gold-200); border-radius:999px; padding:6px 14px;
}

/* ---------- ห้องแต่งตัวละคร ---------- */
.ava-dress{
  width:min(560px,100%);
  /* เว้นที่ด้านบนให้พรีวิวลอยพ้นกล่องออกมาได้ */
  margin-top:64px; position:relative;
}
.ava-dress__stage{
  position:absolute; top:0; left:50%; transform:translate(-50%,-58%);
  z-index:3; pointer-events:none;
}
.ava-dress__preview{
  display:grid; place-items:center;
  width:132px; height:132px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fff, #f0e7ff);
  box-shadow:0 10px 26px rgba(40,18,80,.32), inset 0 0 0 5px rgba(255,255,255,.85);
  animation:floaty 3.4s ease-in-out infinite;
}
.ava-dress__box{
  background:var(--panel); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:78px 18px 16px;   /* ที่ว่างด้านบนไว้ให้พรีวิวคร่อม */
}

.ava-tabs{
  display:flex; gap:6px; padding:5px;
  background:var(--panel-2); border-radius:999px; border:2px solid var(--line);
}
.ava-tabs button{
  flex:1; cursor:pointer; font-family:inherit; font-size:15px; font-weight:900;
  padding:10px 8px; border-radius:999px; border:0;
  background:transparent; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.ava-tabs button.on{ background:var(--royal-500); color:#fff; box-shadow:var(--sh-1); }

.ava-dress__name{
  margin:12px 0 8px; text-align:center;
  font-size:17px; font-weight:900; color:var(--royal-700);
}

.ava-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px;
  /* เลื่อนในตัวเอง กล่องจึงไม่ยืดจนปุ่ม "เรียบร้อย" หลุดจอมือถือ */
  max-height:min(42vh,300px); overflow-y:auto; padding:4px;
}
.ava-cell{
  display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  padding:9px 4px; border-radius:16px; font-family:inherit;
  background:var(--panel-2); border:3px solid var(--line); color:var(--ink-soft);
  transition:transform .12s ease, border-color .12s ease;
}
.ava-cell:hover{ transform:translateY(-3px); }
.ava-cell.on{ border-color:var(--gold-500); background:var(--gold-200); color:#7a5200; }
.ava-cell__th{ font-size:11px; font-weight:800; text-align:center; line-height:1.2; }
/* ช่อง "ไม่ใส่" ไม่มีรูป — ใส่กากบาทจาง ๆ ให้เห็นว่าเป็นการถอดของออก */
.ava-cell--none .ava{ display:grid; place-items:center; font-size:26px; color:var(--ink-soft); }

.ava-dress__foot{
  display:flex; gap:8px; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:2px dashed var(--line);
}
.ava-dress__foot .btn--gold{ flex:1; }

@media (max-width:420px){
  .ava-dress__preview{ width:108px; height:108px; }
  .ava-dress__box{ padding-top:64px; }
  .ava-grid{ grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
}

/* ---------- สรุปคะแนน + อันดับ ----------
   เด็ก ป.2 ต้องอ่านผลของตัวเองได้ใน 2 วินาที อันดับจึงตัวใหญ่ที่สุดบนการ์ด */
.summary-card{ width:min(560px,100%); }
.sum__icon{ font-size:56px; line-height:1; }

/* ---------- รูปอวตารเป็นพระเอกของหน้าสรุป ----------
   inline-block + position:relative เพื่อให้ badge เกาะขอบวงกลมได้พอดี
   ไม่ว่าอวตารจะเป็น emoji หรือไฟล์รูป (สองแบบนี้กินพื้นที่เท่ากันอยู่แล้วจาก .ava) */
.sum-hero{ position:relative; display:inline-block; margin:8px 0 12px; }
.sum-hero__ring{
  display:grid; place-items:center;
  width:148px; height:148px; border-radius:50%;
  background:radial-gradient(circle at 50% 32%, #fff, #f4ecff);
  border:6px solid var(--gold-400);
  box-shadow:var(--sh-2), inset 0 0 0 4px rgba(255,255,255,.9);
  animation:pop .45s cubic-bezier(.18,.9,.32,1.4);
}
/* ของตกแต่งบนหัวล้นออกนอกกรอบ .ava ได้ (top = -20% ของขนาด) จึงห้าม overflow:hidden ที่วงแหวน
   และต้องดัน .ava ลงมาให้หมวก/มงกุฎมีระยะห่างจากขอบทองด้านบน
   วัดจริงแล้ว: ava 96px + margin-top 26px → มงกุฎเว้นจากขอบวงแหวน ~10px กำลังดี */
.sum-hero__ring .ava{ --ava-size:96px; margin-top:26px; }

.sum-hero__badge{
  position:absolute; right:-6px; bottom:2px; z-index:2;
  display:grid; place-items:center;
  min-width:56px; height:56px; padding:0 10px;
  border-radius:999px;
  background:linear-gradient(160deg,var(--gold-400),var(--gold-500));
  border:4px solid #fff; box-shadow:var(--sh-2);
  font-size:24px; font-weight:900; color:#4a2f00;
  font-variant-numeric:tabular-nums;
  animation:pop .5s .12s cubic-bezier(.18,.9,.32,1.4) backwards;
}
.sum-hero__badge span::before{ content:'#'; font-size:.62em; opacity:.7; margin-right:1px; }

/* แถบสรุปอันดับใต้รูป — อ่านเป็นประโยคเต็ม เด็กที่ยังอ่านตัวเลขลอย ๆ ไม่เข้าใจจะเข้าใจตรงนี้ */
.sum-rankbar{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 auto 16px; padding:9px 20px; border-radius:999px;
  background:var(--gold-200); border:2.5px solid var(--gold-400);
  font-size:17px; font-weight:800; color:#6b4700;
}
.sum-rankbar__medal{ font-size:22px; line-height:1; }
.sum-rankbar__txt b{ font-size:21px; font-weight:900; color:#4a2f00; font-variant-numeric:tabular-nums; }

.sum-stats{ display:flex; gap:10px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; }
.sum-stat{
  flex:1; min-width:96px; padding:11px 8px;
  background:var(--panel-2); border:2px solid var(--line); border-radius:16px;
}
.sum-stat b{ display:block; font-size:26px; font-weight:900; color:var(--royal-700); font-variant-numeric:tabular-nums; }
.sum-stat span{ display:block; font-size:12.5px; font-weight:800; color:var(--ink-soft); margin-top:2px; }

.sum-podium__head{ margin:0 0 8px; font-size:14px; font-weight:900; color:var(--royal-700); }
.sum-podium{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.sum-pod{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:14px;
  background:var(--panel-2); border:2px solid var(--line);
  font-weight:800; font-size:15px; text-align:left;
}
.sum-pod--me{ border-color:var(--gold-500); background:var(--gold-200); }
.sum-pod__medal{ font-size:20px; flex:none; }
.sum-pod__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sum-pod__score{ font-variant-numeric:tabular-nums; color:var(--royal-700); }
.sum-note{ margin:0 0 16px !important; font-size:14.5px; font-weight:700; }

/* ---------- นาฬิกาจับเวลาต่อด่าน ----------
   ต้องอ่านออกจากมุมตาโดยไม่ต้องละสายตาจากบล็อก จึงใช้ตัวเลขความกว้างคงที่
   และเปลี่ยนเป็นสีแดงเต้นเมื่อเหลือ 10 วิสุดท้าย */
.chip--time{
  font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:900;
  background:var(--royal-700); border-color:var(--royal-700); color:#fff;
}
.chip--time.chip--low{
  background:#e0413f; border-color:#a92725; color:#fff;
  animation:timePulse .9s ease-in-out infinite;
}
@keyframes timePulse{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.12); }
}

/* ---------- เลือกชุดบทเรียน (โหมดเล่นคนเดียว) ----------
   ปุ่มใหญ่เต็มความกว้าง เพราะเด็ก ป.2 จิ้มด้วยนิ้วบนแท็บเล็ตเป็นหลัก */
.setpick__head{
  margin:2px 0 12px; font-size:17px; font-weight:900; color:var(--royal-700);
}
.setpick{
  display:flex; flex-direction:column; gap:10px;
  max-height:46vh; overflow:auto; padding:2px;
}
.setpick__item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 16px; border-radius:18px; cursor:pointer; text-align:left;
  background:var(--panel-2); border:3px solid var(--line); color:var(--ink);
  font-family:inherit;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.setpick__item:hover{ transform:translateY(-2px); border-color:var(--royal-500); background:#fff; }
.setpick__item:focus-visible{ outline:3px solid var(--gold-400); outline-offset:3px; }
.setpick__icon{ font-size:30px; flex:none; }
.setpick__body{ flex:1; min-width:0; }
.setpick__title{ font-size:16px; font-weight:900; line-height:1.3; }
.setpick__meta{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.setpick__go{ font-size:22px; color:var(--royal-500); flex:none; }
.setpick__empty{ font-size:14px; font-weight:700; color:var(--ink-soft); padding:18px 0; margin:0; }

/* ทางออกกลับหน้าแรก — ตั้งใจให้เบากว่าปุ่มหลัก 2 ปุ่มด้านบน
   เด็กที่ตั้งใจจะเรียนต้องเห็น "เข้าห้องเรียน" ก่อนเสมอ */
.lobby-exits{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:8px; }
.lobby-exits .lobby-home{ margin-top:6px; }
.lobby-home{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:14px; padding:9px 20px;
  border-radius:999px; text-decoration:none;
  background:var(--panel-2); border:2px solid var(--line);
  color:var(--ink-soft); font-size:14px; font-weight:800;
  transition:transform .12s ease, border-color .12s ease, color .12s ease;
}
.lobby-home:hover{
  transform:translateY(-2px);
  border-color:var(--royal-300); color:var(--royal-700);
}
.lobby-home:focus-visible{ outline:3px solid var(--gold-400); outline-offset:3px; }

.roster{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0; }
.roster__item{
  padding:7px 14px; border-radius:999px; background:var(--panel-2);
  border:2px solid var(--line); font-weight:800; font-size:14px;
  animation:pop .3s ease;
}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){
  .stage-grid{ grid-template-columns:1fr 236px 1fr; }
}
@media (max-width:960px){
  .app{ height:auto; min-height:100dvh; }
  .stage-grid{ grid-template-columns:1fr; }
  /* จอแคบ .app เป็น height:auto → เวทีที่เป็น flex:1 จะสูง 0 แล้วแผนที่หายไปทั้งอัน
     จึงต้องกำหนดความสูงตายตัวให้เวทีบนจอเล็ก */
  .scene__stage{ flex:0 0 auto; height:min(80vw, 430px); }
  .code .workspace{ min-height:340px; }
  .tools .toolbox{ max-height:260px; }
}

/* ---------------- Fullscreen ---------------- */
html:fullscreen .app{ padding:8px; }
html:fullscreen .topbar{ padding:6px 12px; }

/* ---------------- ป้ายลำดับ "คนที่ 1-3 ของห้อง" (v1.15.0) ----------------
   ขึ้นคู่กับพลุ เพื่อให้เด็กรู้ว่าพลุมาจากอะไร (ลำดับตัดสินที่เซิร์ฟเวอร์) */
.res-rank{
  display:inline-flex; align-items:center; gap:8px;
  margin:2px auto 10px; padding:7px 18px;
  border-radius:999px; border:2.5px solid var(--gold-400);
  background:linear-gradient(180deg, #fff6d8, var(--gold-200));
  color:#7a5200; font-size:16px; font-weight:900;
  box-shadow:0 4px 0 rgba(122,82,0,.16);
  animation:rankPop .5s cubic-bezier(.18,.9,.32,1.5) both;
}
/* ที่ 2/3 ใช้โทนเงิน-ทองแดง จะได้แยกออกจากกันทันทีโดยไม่ต้องอ่านตัวหนังสือ */
.res-rank--2{ border-color:#c9cfda; background:linear-gradient(180deg,#fbfcfe,#dfe4ec); color:#4b5566; box-shadow:0 4px 0 rgba(75,85,102,.16); }
.res-rank--3{ border-color:#e0a97a; background:linear-gradient(180deg,#fff0e2,#f3d3b6); color:#8a5326; box-shadow:0 4px 0 rgba(138,83,38,.16); }

@keyframes rankPop{
  from{ transform:scale(.5) rotate(-6deg); opacity:0; }
  to  { transform:scale(1) rotate(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .res-rank{ animation:none; }
}