/* =========================================================
   T2MEP Coding — Grade 2  |  Design System
   ธีมแฟนตาซี ปราสาท เจ้าชาย/เจ้าหญิง
   ========================================================= */

:root{
  /* --- Brand / Fantasy palette --- */
  --royal-900:#231246;
  --royal-800:#2e1a5c;
  --royal-700:#3b2277;
  --royal-600:#4c2d95;
  --royal-500:#6a41c4;
  --royal-300:#a98ae8;

  --gold-600:#c98a12;
  --gold-500:#f0ab1d;
  --gold-400:#ffc94d;
  --gold-200:#ffe9b0;

  --rose-500:#e6467e;
  --rose-400:#ff6fa1;
  --mint-500:#20b8a0;
  --sky-500:#2f9de3;

  /* --- Block colors (ตามหมวดคำสั่ง) --- */
  --cat-motion:#1e9ec9;
  --cat-motion-d:#157ba1;
  --cat-action:#8a4fd8;
  --cat-action-d:#6c37b3;
  /* หมวด Control ใช้โทนส้มแบบ Scratch (บล็อกตัว C: repeat / repeat until) */
  --cat-control:#eb8a1e;
  --cat-control-d:#bf6a09;
  /* ย้าย Sensing ไปโทนเขียวน้ำทะเล เพราะเดิมเป็นส้มจะชนกับ Control */
  --cat-sense:#2aa38a;
  --cat-sense-d:#1c8570;
  --cat-event:#f5a623;
  --cat-event-d:#cf8410;

  /* --- Surfaces --- */
  --bg:#f3eefb;
  --panel:#ffffff;
  --panel-2:#faf7ff;
  --ws-bg:#eae3f7;
  --ink:#2a2140;
  --ink-soft:#6b6288;
  --line:#ded4f0;

  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --sh-1:0 2px 6px rgba(45,20,90,.12);
  --sh-2:0 8px 24px rgba(45,20,90,.18);
  --sh-3:0 18px 48px rgba(45,20,90,.28);

  --font: "Baloo 2","Sarabun","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-code:"Fredoka","Baloo 2","Segoe UI",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, #ffe9f4 0%, transparent 55%),
    radial-gradient(1000px 600px at 100% 0%, #e2f0ff 0%, transparent 50%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

button{ font-family:inherit; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; user-select:none;
  padding:11px 20px; border-radius:999px;
  font-size:16px; font-weight:800; letter-spacing:.2px;
  color:#fff; background:var(--royal-500);
  box-shadow:0 4px 0 var(--royal-700), var(--sh-1);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--royal-700); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn:focus-visible{ outline:3px solid var(--gold-400); outline-offset:3px; }

.btn--run   { background:#28b34a; box-shadow:0 4px 0 #17842f, var(--sh-1); font-size:19px; padding:13px 30px; }
.btn--run:active{ box-shadow:0 1px 0 #17842f; }
.btn--stop  { background:#e0413f; box-shadow:0 4px 0 #a92725, var(--sh-1); }
.btn--ghost { background:#fff; color:var(--royal-700); box-shadow:0 3px 0 var(--line), var(--sh-1); }
/* Step/Reset แยกจาก ghost — ห้ามย้อม .btn--ghost ทั้งระบบ (ปุ่มขาวหน้าอื่นจะเพี้ยน)
   Reset ใช้เทาอมฟ้า ไม่ใช้แดง เพราะ Stop เป็นแดงอยู่แล้ว กันเด็กสับสน «หยุด» กับ «เริ่มใหม่»
   Hover เข้มลง (0.92) ทับ .btn:hover ที่สว่างขึ้น (1.06) เพราะเด็กต้องเห็นว่ากดได้ชัด ๆ */
.btn--step  { background:#FF9800; color:#fff; box-shadow:0 4px 0 #E65100, var(--sh-1); }
.btn--step:hover{ filter:brightness(0.92); box-shadow:0 4px 0 #E65100, 0 0 0 3px rgba(255,152,0,.38), var(--sh-1); }
.btn--step:active{ box-shadow:0 1px 0 #E65100; }
.btn--reset { background:#607D8B; color:#fff; box-shadow:0 4px 0 #455A64, var(--sh-1); }
.btn--reset:hover{ filter:brightness(0.92); box-shadow:0 4px 0 #455A64, 0 0 0 3px rgba(96,125,139,.38), var(--sh-1); }
.btn--reset:active{ box-shadow:0 1px 0 #455A64; }
.btn--gold  { background:var(--gold-500); box-shadow:0 4px 0 var(--gold-600), var(--sh-1); color:#4a2f00; }
.btn--sm    { padding:8px 14px; font-size:14px; }
.btn--icon  { padding:9px; width:40px; height:40px; border-radius:12px; }
a.btn{ text-decoration:none; }

/* ---------------- Panels ---------------- */
.panel{
  background:var(--panel);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  border:2px solid #fff;
  overflow:hidden;
}
.panel__head{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:linear-gradient(180deg,var(--royal-700),var(--royal-800));
  color:#fff; font-weight:800; font-size:15px; letter-spacing:.4px;
}
.panel__head .spacer{ margin-left:auto; }

/* หัวการ์ดที่มีป้ายกำกับหลายอัน — ยอมให้ตกบรรทัดแทนที่จะโดน overflow:hidden ของ .panel ตัดหาย
   (ป้ายบางอันยาวไม่เท่ากันตามโหมดที่ครูเลือก จึงกะความกว้างล่วงหน้าไม่ได้) */
.panel__head--wrap{ flex-wrap:wrap; row-gap:7px; }
.panel__head-title{ white-space:nowrap; }   /* กันคำว่า "แผงควบคุม" หักกลางคำ */
.head-chips{
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center;
  gap:7px; margin-left:auto; min-width:0;
}

/* ---------------- Chips / meta ---------------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:var(--panel-2); border:1.5px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink-soft);
  white-space:nowrap;
}
.chip--gold{ background:var(--gold-200); border-color:var(--gold-400); color:#7a5200; }
.chip--warn{ background:#ffe0e0; border-color:#ff9c9c; color:#a32020; }
.chip--ok  { background:#dcf7e3; border-color:#8fd9a4; color:#1c6b33; }

/* ---------------- Modal ---------------- */
.overlay{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(35,18,70,.62);
  backdrop-filter:blur(4px);
  padding:20px;
  /* ⚠️ ห้าม animation ที่เริ่มจาก opacity:0 — แท็บซ่อนแล้วค้างเฟรมแรก
     กล่องโปร่งใสแต่ยังบังจอ เด็กกดอะไรไม่ได้ (เจอจริงบนแท็บเล็ตโรงเรียน) */
}
.overlay[hidden]{ display:none; }
.modal{
  width:min(560px,100%);
  background:var(--panel);
  border-radius:26px;
  box-shadow:var(--sh-3);
  border:3px solid var(--gold-400);
  padding:28px;
  text-align:center;
  animation:pop .28s cubic-bezier(.18,.9,.32,1.3);
}
.modal h2{ margin:6px 0 6px; font-size:28px; color:var(--royal-700); }
.modal p{ margin:0 0 18px; color:var(--ink-soft); font-size:16px; line-height:1.6; }
.modal__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------------- กล่องยืนยัน T2.confirm (js/core/modal.js) ----------------
   สร้างจาก JS ล้วน ไม่มีแท็บใน HTML — จึงต้องมี z-index สูงกว่า .overlay ปกติ
   เพราะบางครั้งต้องเด้งทับ overlay ที่เปิดค้างอยู่ (เช่นยืนยันลบจากในหน้าต่างอื่น) */
.cfm{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:rgba(35,18,70,.62);
  backdrop-filter:blur(4px);
  padding:20px;
}
.cfm--out{ animation:popOut .16s ease forwards; }
.cfm__card{
  width:min(440px,100%);
  background:var(--panel);
  border-radius:26px;
  box-shadow:var(--sh-3);
  border:3px solid var(--gold-400);
  padding:26px 26px 22px;
  text-align:center;
  animation:pop .26s cubic-bezier(.18,.9,.32,1.3);
}
.cfm__card--danger{ border-color:#ff9c9c; }
.cfm__ic{ font-size:46px; line-height:1; margin-bottom:6px; }
.cfm__title{ margin:0 0 8px; font-size:23px; color:var(--royal-700); }
.cfm__text{ margin:0 0 12px; color:var(--ink-soft); font-size:15px; line-height:1.65; }
.cfm__note{
  margin:0 0 16px; padding:9px 13px; border-radius:12px;
  background:#dcf7e3; color:#1c6b33; font-size:13.5px; font-weight:800; line-height:1.55;
}
.cfm__acts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn--danger{ background:#e0413f; box-shadow:0 4px 0 #a92725, var(--sh-1); color:#fff; }
.btn--danger:active{ box-shadow:0 1px 0 #a92725; }

.field{ text-align:left; margin:0 0 14px; }
.field label{ display:block; font-size:14px; font-weight:800; color:var(--royal-700); margin:0 0 6px; }
.field input{
  width:100%; padding:13px 16px; font-size:18px; font-family:inherit; font-weight:700;
  border:2.5px solid var(--line); border-radius:14px; background:var(--panel-2); color:var(--ink);
}
.field input:focus{ outline:none; border-color:var(--royal-500); background:#fff; }
.field input.pin{ letter-spacing:.5em; text-align:center; font-size:30px; }

/* ---------------- Stars ---------------- */
.stars{ display:flex; gap:8px; justify-content:center; margin:6px 0 14px; }
.star{ font-size:46px; filter:grayscale(1) opacity(.3); transform:scale(.7); }
.star.on{
  filter:none; transform:scale(1);
  animation:starPop .45s cubic-bezier(.2,.9,.3,1.5) backwards;
}
.star.on:nth-child(2){ animation-delay:.14s; }
.star.on:nth-child(3){ animation-delay:.28s; }

/* ---------------- Toast ---------------- */
#toast-layer{
  position:fixed; left:50%; top:18px; transform:translateX(-50%);
  z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.toast{
  padding:11px 22px; border-radius:999px;
  background:var(--royal-800); color:#fff; font-weight:800; font-size:15px;
  box-shadow:var(--sh-2);
  animation:toastIn .25s ease, toastOut .3s ease 2.4s forwards;
}
.toast--warn{ background:#c2331f; }
.toast--ok  { background:#1f8f45; }

/* ---------------- Animations ---------------- */
/* overlay-safe-v1.39 — ขยับได้แค่ transform / box-shadow ห้ามเริ่มจาก opacity:0
   แท็บถูกซ่อนแล้วแอนิเมชันหยุดที่เฟรมแรก ถ้าเฟรมนั้นโปร่งใส กล่องจะบังจอแต่กดไม่ได้ */
@keyframes fadeIn{ from{transform:none} to{transform:none} }
@keyframes pop{ from{transform:scale(.86) translateY(14px)} to{transform:none} }
@keyframes popOut{ from{transform:none} to{transform:scale(.94)} }
@keyframes starPop{ from{transform:scale(.2) rotate(-40deg)} to{transform:scale(1)} }
@keyframes toastIn{ from{transform:translateY(-14px)} to{transform:none} }
@keyframes toastOut{ to{transform:translateY(-14px)} }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.shake{ animation:shake .38s ease; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------------- อวตารนักเรียน (ร่าง + ของตกแต่ง ซ้อนกัน) ----------------
   ใช้ร่วมกันทั้งหน้านักเรียนและหน้าครู สร้างจาก T2.avatarEl() ที่ core/util.js
   ทุกอย่างอิง --ava-size ตัวเดียว เปลี่ยนขนาดแล้วของตกแต่งขยับตามเองทั้งหมด */
.ava{
  --ava-size:34px;
  position:relative; display:inline-block; flex:0 0 auto;
  width:var(--ava-size); height:var(--ava-size); line-height:1; vertical-align:middle;
}
.ava--sm{ --ava-size:26px; }
.ava--md{ --ava-size:34px; }
.ava--lg{ --ava-size:64px; }
.ava--xl{ --ava-size:128px; }

/* ร่างต้นแบบ — emoji กับ <img> ต้องกินพื้นที่เท่ากันเป๊ะ ของตกแต่งจะได้ตรงตำแหน่งทั้งสองแบบ */
.ava__base, .ava__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--ava-size) * .92);
  object-fit:contain;
}
.ava__acc{
  position:absolute; z-index:2; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  object-fit:contain;
}
/* บนหัว — เยื้องขึ้นไปคร่อมขอบบนของหน้าเล็กน้อย ให้ดูเป็นการ "สวม" ไม่ใช่ลอย */
.ava__acc--hat{
  left:50%; top:calc(var(--ava-size) * -.20);
  width:calc(var(--ava-size) * .62); height:calc(var(--ava-size) * .62);
  font-size:calc(var(--ava-size) * .55);
  transform:translateX(-50%) rotate(-12deg);
}
/* คาดหน้า — จุดกึ่งกลางของกล่องต้องตกที่ ~42% ของความสูงหน้า (ระดับดวงตา)
   คำนวณ: top .05 + ครึ่งความสูง .37 = .42 — ถ้าตั้ง top ไว้ .30 จะไปตกที่ปากแทน */
.ava__acc--face{
  left:50%; top:calc(var(--ava-size) * .05);
  width:calc(var(--ava-size) * .74); height:calc(var(--ava-size) * .74);
  font-size:calc(var(--ava-size) * .50);
  transform:translateX(-50%);
}

/* ---------------- Utility ---------------- */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none !important; }

/* ---------------- เอฟเฟกต์เฉลิมฉลอง (js/core/fx.js) ----------------
   วางไว้เหนือ .overlay (z-index 60) เพื่อให้กระดาษยังตกให้เห็น
   ตอนหน้าต่างสรุปคะแนนเปิดขึ้นมาแล้ว · pointer-events:none กันไปบังปุ่ม */
.fx-confetti{
  position:fixed; inset:0; z-index:70;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}
/* ตอนโผล่ต้องติดทันที ไม่พึ่ง transition (แท็บที่ถูกซ่อนอยู่ transition ไม่เดิน)
   ส่วนตอนหาย ปล่อยให้ transition ของ .fx-confetti ค่อย ๆ จางแทน */
.fx-confetti--on{ opacity:1; transition:none; }