/* ============ AR Magic World — theme ============ */
:root{
  --sky1:#a7d8ff; --sky2:#c9b3ff; --sky3:#ffd6f0;
  --ink:#3b2a5a; --card:#ffffff;
  --pink:#ec4899; --purple:#8b5cf6; --amber:#f59e0b; --green:#22c55e;
  --shadow:0 10px 30px rgba(80,40,140,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Mali','Itim',system-ui,sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,var(--sky3) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
h1,h2,h3,.brand-text{font-family:'Itim',cursive}
a{color:inherit;text-decoration:none}

/* ============ ฉากตกแต่งเคลื่อนไหว ============ */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene .sun{position:absolute;top:3%;right:6%;font-size:70px;animation:spin 30s linear infinite;filter:drop-shadow(0 0 20px #ffe08a)}
.cloud{position:absolute;font-size:64px;opacity:.9}
.cloud.c1{top:8%;left:-10%;animation:drift 34s linear infinite}
.cloud.c2{top:20%;left:-20%;font-size:48px;animation:drift 48s linear infinite}
.cloud.c3{top:5%;left:-30%;font-size:56px;animation:drift 60s linear infinite}
.balloon{position:absolute;font-size:46px}
.balloon.b1{bottom:-60px;left:12%;animation:rise 22s linear infinite}
.balloon.b2{bottom:-60px;left:78%;font-size:38px;animation:rise 28s linear infinite 6s}
.bird{position:absolute;font-size:30px}
.bird.bird1{top:26%;left:-10%;animation:drift 26s linear infinite 3s}
.bird.bird2{top:34%;left:-10%;font-size:26px;animation:drift 30s linear infinite 10s}
.ground{position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(140,214,120,.0),#8fd66f 45%,#77c85a);border-top-left-radius:50% 30px;border-top-right-radius:50% 30px}
.deco{position:absolute;bottom:8px}
.tree{font-size:80px}
.tree.t1{left:2%} .tree.t2{left:16%;font-size:64px} .tree.t3{right:3%;font-size:74px}
.flower{font-size:34px;animation:sway 4s ease-in-out infinite}
.flower.f1{left:30%;bottom:14px} .flower.f2{left:44%;bottom:6px;animation-delay:.6s}
.flower.f3{left:60%;bottom:16px;animation-delay:1.1s} .flower.f4{left:72%;bottom:8px;animation-delay:1.6s}
.animal{font-size:40px}
.animal.a1{left:24%;bottom:10px;animation:hop 3s ease-in-out infinite}
.animal.a2{left:52%;bottom:8px;animation:hop 5s ease-in-out infinite 1s}
.animal.a3{right:16%;bottom:10px;animation:hop 4s ease-in-out infinite .5s}
.mushroom.m1{left:38%;bottom:10px;font-size:28px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(130vw)}}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-120vh)}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){.scene *{animation:none!important}}

/* ============ Navbar ============ */
.navbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:10px 18px;margin:12px auto;max-width:1200px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
  border-radius:24px;box-shadow:var(--shadow);width:calc(100% - 24px)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:22px}
.brand-emoji{font-size:30px;animation:floaty 3s ease-in-out infinite}
.brand-text{color:var(--purple)}
/* ---- แถบเมนู (ดีไซน์เรียบ สไตล์เดียวกัน + ปุ่มหลักปุ่มเดียว) ---- */
.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:13px;font-weight:600;
  color:#4c1d95;transition:.15s;white-space:nowrap}
.nav-link:hover{background:rgba(139,92,246,.11)}
.nav-link.active{background:rgba(139,92,246,.16);color:#6d28d9}
/* ปุ่มหลัก (เน้นปุ่มเดียว) */
.nav-cta{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;box-shadow:0 5px 14px rgba(139,92,246,.28)}
.nav-cta:hover{filter:brightness(1.06);background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
/* แอดมิน — โทนอำพันจางๆ พอให้แยกออก ไม่แสบตา */
.nav-admin{color:#b45309}
.nav-admin:hover{background:rgba(245,158,11,.14)}
.nav-admin.active{background:rgba(245,158,11,.18);color:#b45309}
/* กลุ่มผู้ใช้ทางขวา คั่นด้วยเส้นบางๆ */
.nav-user{display:flex;align-items:center;gap:4px;margin-left:8px;padding-left:10px;border-left:1.5px solid rgba(139,92,246,.16)}
.user-chip{display:inline-flex;align-items:center;gap:7px;background:#f3e8ff;padding:5px 12px 5px 6px;border-radius:999px;font-weight:600;color:#6d28d9;transition:.15s}
.user-chip:hover{background:#e9d8ff}
.user-chip .uc-av{width:28px;height:28px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.user-chip .uc-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bell{position:relative;font-size:19px;padding:8px 9px;border-radius:12px;line-height:1}
.bell:hover{background:rgba(139,92,246,.12)}
.nav-out{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;font-size:17px;color:#dc2626;transition:.15s}
.nav-out:hover{background:#fee2e2}
.bell-badge{position:absolute;top:1px;right:1px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;min-width:17px;height:17px;
  border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
/* รายการแจ้งเตือน */
.notif{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);margin:10px 0;transition:.12s}
.notif:hover{transform:translateX(2px)}
.notif.unread{background:#f6f0ff;border-left:5px solid var(--purple)}
.notif .nic{font-size:26px}
.notif .ntime{font-size:12px;color:#999;margin-top:3px}
.nav-toggle{display:none;margin-left:auto;font-size:26px;background:none;border:none;cursor:pointer}

/* ============ Layout ============ */
.page{position:relative;z-index:10;max-width:1200px;margin:0 auto;padding:10px 16px 60px}

/* flash */
.flash{padding:12px 16px;border-radius:16px;margin:10px 0;font-weight:600;box-shadow:var(--shadow)}
.flash-info{background:#e0f2fe;color:#0369a1}
.flash-success{background:#dcfce7;color:#15803d}
.flash-warn{background:#fef9c3;color:#a16207}
.flash-error{background:#fee2e2;color:#b91c1c}
/* แถบเตือน "ยังต้องชำระเงิน" — ตัวหนังสือแดงเข้มตัวหนา ให้เด่นกว่าแถบข้อมูลทั่วไป
   เพราะเป็นขั้นตอนเดียวที่ถ้าลูกค้าข้ามไป จะยังไม่ได้สิทธิ์สมาชิกที่ตั้งใจสมัคร */
.flash-pay{background:#fff1f2;color:#dc2626;border:2px solid #fecdd3;font-weight:800;font-size:17px}

/* ============ Hero ============ */
.hero{text-align:center;padding:26px 16px 10px}
.hero .mascots{font-size:64px;animation:floaty 3s ease-in-out infinite}
.hero h1{font-size:clamp(30px,6vw,58px);margin:6px 0;color:#fff;text-shadow:0 4px 0 rgba(139,92,246,.35)}
.hero p{font-size:clamp(15px,2.4vw,20px);color:#4a2f78}
.hero .cta{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:20px;font-weight:700;
  font-family:'Itim',cursive;font-size:18px;border:none;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,#ffb347,#ff7eb3);color:#fff}
.btn-purple{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.btn-white{background:#fff;color:var(--purple)}
.btn-green{background:linear-gradient(135deg,#34d399,#10b981);color:#fff}
.btn-create{background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink)}
.btn-block{width:100%;justify-content:center}
.btn-sm{padding:8px 14px;font-size:15px;border-radius:14px}

/* ============ Filters ============ */
.filters{background:rgba(255,255,255,.8);border-radius:24px;padding:16px;box-shadow:var(--shadow);margin:18px 0}
.filter-group{margin:8px 0}
.filter-title{font-weight:700;color:var(--purple);margin-bottom:6px;font-size:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:16px;background:#f1eafe;font-weight:600;font-size:14px;cursor:pointer;border:2px solid transparent;transition:.12s}
.chip:hover{background:#e7dbff}
.chip.active{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border-color:#fff}

/* ตัวกรองแบบกะทัดรัด (ค้นหา + ดรอปดาวน์) */
.filters{background:rgba(255,255,255,.82);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow);margin:16px 0}
.filter-search{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.filter-search .fs-icon{position:absolute;left:15px;font-size:17px;pointer-events:none;opacity:.8}
.filter-search input{flex:1;min-width:0;padding:12px 14px 12px 44px;border-radius:15px;border:2px solid #eadcff;font-size:16px;background:#fff}
.filter-search input:focus{outline:none;border-color:var(--purple)}
.filter-search .fs-btn{flex:none;padding:11px 18px;border:none;border-radius:15px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.filter-search .fs-btn:hover{filter:brightness(1.05)}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fsel{position:relative}
.fsel::after{content:"▾";position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:#a78bfa;font-weight:800}
.fsel select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:10px 34px 10px 15px;border-radius:14px;border:2px solid #eadcff;background:#fff;font-size:15px;font-weight:600;color:#5b21b6;cursor:pointer;max-width:240px;transition:.12s}
.fsel select:hover{border-color:#d6c3ff}
.fsel select:focus{outline:none;border-color:var(--purple)}
.fsel.on select{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border-color:#fff}
.fsel.on::after{color:#fff}
.filter-clear{margin-left:auto;padding:9px 15px;border-radius:14px;background:#ffe1ec;color:#be185d;font-weight:700;text-decoration:none;font-size:14px;white-space:nowrap}
.filter-clear:hover{background:#ffd0e2}
@media(max-width:640px){
  .filter-search .fs-btn{padding:11px 14px}
  .fsel{flex:1 1 100%}
  .fsel select{width:100%;max-width:none}
  .filter-clear{margin-left:0;flex:1 1 100%;text-align:center}
}

/* ============ Game grid / cards ============ */
.section-title{display:flex;align-items:center;gap:10px;font-size:26px;color:#fff;text-shadow:0 3px 0 rgba(139,92,246,.3);margin:22px 6px 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
/* กริด 4 คอลัมน์ (แถวละ 4 การ์ด) */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid-4{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:420px){.grid-4{grid-template-columns:repeat(1,1fr)}}

/* แบ่งหน้า (pagination) */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:26px 0 6px}
.pagination a,.pagination span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border-radius:14px;background:rgba(255,255,255,.85);font-weight:700;box-shadow:var(--shadow);transition:.12s}
.pagination a:hover{background:#f1eafe}
.pagination .cur{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.pagination .gap{background:transparent;box-shadow:none;min-width:20px}
.pagination .nav-btn{font-size:18px}
.pagination .disabled{opacity:.4;pointer-events:none}
.page-info{text-align:center;color:#5a3f8a;font-weight:600;margin-top:6px}
.card{background:var(--card);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px) rotate(-.5deg)}
.card .cover{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:70px;position:relative;overflow:hidden}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .cover .sparkle{position:absolute;font-size:22px;opacity:.85}
.card .cover .s1{top:8px;left:12px} .card .cover .s2{bottom:10px;right:14px}
.card .body{padding:12px 14px 14px}
.card .title{font-weight:700;font-size:18px;line-height:1.2;font-family:'Itim',cursive}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.badge{font-size:12px;padding:3px 9px;border-radius:12px;background:#f1eafe;color:#6d28d9;font-weight:600}
.card .desc{font-size:13px;color:#6b6b6b;min-height:34px}
.card .play-count{font-size:12px;color:#8b7bb0;font-weight:700;margin:4px 0 2px}
.card .actions{display:flex;gap:8px;margin-top:10px}
.card .actions .btn{flex:1}
.owner-tag{font-size:11px;color:#999;margin-top:6px}
.empty{background:rgba(255,255,255,.85);border-radius:24px;padding:40px;text-align:center;box-shadow:var(--shadow)}
.empty .big{font-size:60px}

/* ============ Auth / forms ============ */
.auth-wrap{max-width:460px;margin:20px auto}
.panel{background:rgba(255,255,255,.92);border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.panel h2{text-align:center;margin:4px 0 2px}
.panel .sub{text-align:center;color:#7a6ca0;margin-bottom:16px}
.field{margin:12px 0}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:16px;border:2px solid #eadcff;
  font-family:inherit;font-size:16px;background:#fff;transition:.12s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(139,92,246,.15)}
.hint{font-size:13px;color:#8a7fb0;margin-top:4px}
/* กล่องอธิบายกฎการทำงานในฟอร์ม (เช่น "ช่องขวาคือคำตอบที่ถูก") — เด่นกว่า .hint แต่ไม่แย่งสายตาช่องกรอก */
.panel-soft{background:#faf6ff;border:2px solid #eadcff;border-radius:16px;padding:12px 14px;margin:0 0 12px;
  font-size:14px;line-height:1.55;color:#5b4b7d}
.panel-soft b{color:#6d28d9}
.center{text-align:center}
.link{color:var(--purple);font-weight:700}
.steps{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.step{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:#eadcff;color:#7c3aed}
.step.on{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.code-inputs{display:flex;gap:8px;justify-content:center}
.code-inputs input{width:52px;height:64px;text-align:center;font-size:30px;font-weight:800;border-radius:16px;border:2px solid #eadcff}

/* ============ ปุ่มเปิดตาดูรหัสผ่าน ============ */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:48px}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:22px;cursor:pointer;line-height:1;padding:4px}

/* ปุ่มที่ยังกดไม่ได้ในหน้าสมัคร/เข้าสู่ระบบ ต้อง "ดูออกว่ากดไม่ได้" ไม่ใช่กดแล้วเงียบ
   จำกัดขอบเขตไว้ที่ .auth-wrap เพื่อไม่ให้กระทบปุ่มส่วนอื่นของเว็บ */
.auth-wrap .btn:disabled{opacity:.5;filter:grayscale(.4);cursor:not-allowed;box-shadow:none}
.auth-wrap .btn:disabled:hover{filter:grayscale(.4)}
.reg-gate{margin:2px 0 10px;padding:9px 13px;border-radius:13px;background:#fff4e5;color:#9a5b00;
  font-size:14px;font-weight:700;border:1.5px solid #ffd9a8}
.reg-gate::before{content:'✏️ '}

/* ม่าน "กำลังประมวลผล" ตอนกดสมัคร — ทับทั้งหน้าเพื่อกันการกดซ้ำทุกทาง */
.wait-veil{position:fixed;inset:0;z-index:9999;background:rgba(40,20,70,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.wait-veil[hidden]{display:none}
.wv-box{background:#fff;border-radius:22px;padding:26px 28px;text-align:center;max-width:340px;
  box-shadow:0 18px 46px rgba(30,10,60,.3);font-size:17px;color:#4a3f66}
.wv-sub{margin-top:7px;font-size:14px;color:#8577a5;font-weight:600;line-height:1.6}
.wv-spin{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;
  border:5px solid #ede9fe;border-top-color:#8b5cf6;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.wv-spin{animation-duration:2.4s}}

/* ============ กล่องสถานะยืนยันอีเมล (หน้าโปรไฟล์) ============ */
.vf-box{margin-top:18px;border-radius:18px;padding:14px 16px;border:2px solid}
.vf-box.ok{background:#f0fdf4;border-color:#bbf7d0;display:flex;align-items:center;gap:12px}
.vf-box.warn{background:#fffbeb;border-color:#fde68a}
.vf-head{display:flex;align-items:flex-start;gap:12px}
.vf-ic{font-size:28px;line-height:1;flex:none}
.vf-sub{color:#7a6a4e;font-size:13px;line-height:1.55;margin-top:3px}
.vf-box.ok .vf-sub{color:#3f7a56}
.vf-ways{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.vf-way{display:flex;gap:11px;background:#fff;border-radius:14px;padding:12px 13px;border:1px solid #fde68a}
.vf-num{flex:none;width:26px;height:26px;border-radius:50%;background:#f59e0b;color:#fff;
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.vf-code{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.vf-code input{flex:1;min-width:120px;max-width:190px;padding:10px 14px;border-radius:13px;border:2px solid #eadcff;
  font-size:20px;font-weight:800;letter-spacing:5px;text-align:center;font-family:inherit}
.vf-code input:focus{outline:none;border-color:var(--purple)}
.vf-mail{font-weight:700;color:#8a6d2f;word-break:break-all}
.vf-note{margin-top:6px;font-size:12.5px;color:#9a8560;font-weight:700}
.vf-note.wait{color:#b45309;line-height:1.55}
.vf-way .btn:disabled{opacity:.45;filter:grayscale(.4);cursor:not-allowed}
/* จุดแดงบนปุ่ม "โปรไฟล์ของฉัน" — สัญญาณว่ามีเรื่องค้างให้ทำ */
.dot-warn{color:#ef4444;font-size:11px;vertical-align:middle}
/* ป้ายเตือน "ยังไม่ยืนยันอีเมล" ในหน้าแอดมิน */
.badge-unverified{background:#fef3c7;color:#a16207;border-radius:999px;padding:2px 9px;
  font-size:11.5px;font-weight:800;white-space:nowrap;display:inline-block}

/* ============ Picker (อิโมจิ / สี) ============ */
.picker{position:relative}
.picker-trigger{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:16px;
  border:2px solid #eadcff;background:#fff;font-family:inherit;font-size:16px;cursor:pointer;transition:.12s}
.picker-trigger:hover{border-color:var(--purple)}
.picker-current{font-size:26px}
.picker-current.swatch{width:34px;height:34px;border-radius:10px;display:inline-block;box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.picker-arrow{margin-left:auto;color:#a78bfa}
.picker-panel{display:none;position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;max-height:230px;overflow:auto;
  background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(80,40,140,.25);padding:10px}
.picker-panel.open{display:block}
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.picker-opt{font-size:26px;border:none;background:#faf7ff;border-radius:12px;padding:6px 0;cursor:pointer;transition:.1s}
.picker-opt:hover{background:#efe7ff;transform:scale(1.15)}
.picker-opt.sel{background:#e7dbff;box-shadow:0 0 0 2px var(--purple)}
.color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.color-opt{padding:0;border-radius:12px;overflow:hidden;height:44px}
.color-opt .swatch{width:100%;height:100%;display:block;border-radius:12px}
.color-opt.sel{box-shadow:0 0 0 3px var(--purple)}

/* ============ ตัวเลือกแบบการ์ด (แหล่งเกม / สิทธิ์) ============ */
.choice-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{display:block;cursor:pointer;position:relative}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .box{position:relative;border:2px solid #eadcff;border-radius:20px;padding:16px 44px 14px 16px;background:#fff;transition:.16s;height:100%}
.choice:hover .box{border-color:#c4b5fd;transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,92,246,.12)}
.choice .box .ic{font-size:32px;line-height:1}
.choice .box .t{font-weight:700;margin-top:6px;font-family:'Itim',cursive;font-size:17px}
.choice .box .d{font-size:12px;color:#8a7fb0;margin-top:2px}
.choice input:checked + .box{border-color:var(--purple);background:linear-gradient(180deg,#faf5ff,#fff);box-shadow:0 10px 24px rgba(139,92,246,.22)}
/* badge ติ๊กถูกมุมขวาบน (วงกลมไล่เฉด + อนิเมชัน) */
.choice .box::after{content:"";position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  border:2px solid #e0d4ff;background:#fff;transition:.18s}
.choice input:checked + .box::after{content:"✓";border:none;color:#fff;font-size:16px;font-weight:900;line-height:26px;text-align:center;
  background:linear-gradient(135deg,#8b5cf6,#ec4899);box-shadow:0 4px 10px rgba(139,92,246,.5);animation:checkPop .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes checkPop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.form-section{margin:16px 0 6px;font-weight:700;color:var(--purple);font-size:15px}
/* ปุ่มสลับ (segmented) อิโมจิ/รูป */
.seg{display:inline-flex;background:#f1eafe;border-radius:14px;padding:3px;gap:2px}
.seg-opt{position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:block;padding:7px 14px;border-radius:12px;font-weight:700;font-size:14px;color:#7c3aed;transition:.14s}
.seg-opt input:checked + span{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;box-shadow:0 3px 8px rgba(139,92,246,.3)}
/* ปุ่มลบรูปหน้าปก (กากบาท) */
.cover-del{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;
  background:#ef4444;color:#fff;font-size:13px;font-weight:800;cursor:pointer;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.cover-del:hover{background:#dc2626;transform:scale(1.1)}
/* ══ ตัวสร้างเนื้อหาเกม: ด่าน → ข้อ → ตัวเลือก ══
   ของเดิมเป็นตารางแถวยาวๆ ช่องซ้าย-ขวา ครูอ่านไม่ออกว่าอะไรคือคำตอบที่ถูก
   ใหม่: ด่านเป็นกล่องใหญ่ ข้อเป็นการ์ดในกล่อง ตัวเลือกมีวงกลมให้ติ๊กเฉลยตรงๆ */
.lv-card{background:#fbf8ff;border:2px solid #e6d8ff;border-radius:20px;padding:14px;margin-bottom:14px}
.lv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lv-badge{font-weight:800;color:#6d28d9;background:#fff;border:2px solid #e6d8ff;border-radius:999px;padding:4px 14px;font-size:16px}
.lv-count{font-size:13px;color:#8a7fb0;background:#fff;border-radius:999px;padding:3px 10px;border:1px solid #eee}
.lv-count.full{color:#b45309;background:#fff7e6;border-color:#fde68a}
.lv-del{margin-left:auto;background:none;border:none;color:#c0392b;font-size:13px;font-weight:700;cursor:pointer;
  border-radius:10px;padding:5px 9px}
.lv-del:hover{background:#ffe1e1}
.lv-extra{display:flex;gap:12px;flex-wrap:wrap;background:#fff;border:2px dashed #e6d8ff;border-radius:14px;padding:10px 12px;margin-bottom:10px}
.lv-extra label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:#5b4b7d}
.lv-extra label.wide{flex:1 1 100%}
.lv-extra label>span{display:flex;align-items:center;gap:8px}
.lv-extra input,.lv-extra select,.lv-extra textarea{padding:8px 10px;border-radius:11px;border:2px solid #eadcff;font-size:15px;font-weight:400}
.lv-extra textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5;resize:vertical;width:100%;max-width:none}
.lv-extra input[type=color]{width:46px;height:38px;padding:2px}
.lv-items{display:flex;flex-direction:column;gap:10px}
.it-card{background:#fff;border:2px solid #eee6fb;border-radius:16px;padding:12px}
.it-head{display:flex;align-items:center;margin-bottom:8px}
.it-no{font-weight:800;color:#a78bfa;font-size:14px}
.it-tools{margin-left:auto;display:flex;gap:4px}
.it-mini{border:none;background:#f6f0ff;color:#6d28d9;border-radius:9px;width:30px;height:30px;font-size:13px;cursor:pointer}
.it-mini:hover:not(:disabled){background:#e7dbff}
.it-mini:disabled{opacity:.3;cursor:default}
.it-mini.opt-del{background:#ffeaea;color:#c0392b}
.it-add{margin-top:10px}
.fld{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fld-lab{flex:0 0 auto;min-width:104px;font-size:13px;font-weight:700;color:#5b4b7d}
.fld-lab em{font-style:normal;font-weight:400;color:#8a7fb0}
.val-in{flex:1;min-width:120px;max-width:230px;padding:9px 11px;border-radius:12px;border:2px solid #eadcff;font-size:17px}
.opts{border-top:2px dotted #f0e8ff;padding-top:9px}
.opts .fld-lab{display:block;margin-bottom:7px}
.opt-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;padding:5px 8px 5px 5px;border-radius:14px;border:2px solid transparent}
.opt-row.on{background:#eafff3;border-color:#8fe3b8}
.opt-row input[type=radio]{width:26px;height:26px;flex:none;accent-color:#16a34a;cursor:pointer}
.opt-let{flex:none;width:30px;height:30px;border-radius:50%;background:#f6f0ff;color:#6d28d9;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;user-select:none}
.opt-let:hover{background:#e7dbff}
.opt-row.on .opt-let{background:#16a34a;color:#fff}
.opt-add{margin-top:2px}
.lv-addbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
/* ตั้งค่าที่ใช้ร่วมทั้งเกม */
.gset{background:#f5f0ff;border:2px solid #e6d8ff;border-radius:16px;padding:12px 14px;margin-bottom:12px}
.gset-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.gset-row label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:#5b4b7d}
.gset-row input,.gset-row select{padding:8px 10px;border-radius:11px;border:2px solid #eadcff;font-size:15px;font-weight:400}
@media (max-width:560px){
  .fld-lab{min-width:100%}
  .lv-card{padding:10px;border-radius:16px}
  .it-card{padding:10px}
}
/* ช่องโจทย์/คำตอบ (cell): พิมพ์ / อิโมจิ / รูป */
.cell{flex:1;min-width:120px;display:flex;align-items:center;gap:4px;background:#fff;border:2px solid #eadcff;border-radius:14px;padding:3px 4px}
.cell .cell-text{flex:1;min-width:40px;border:none;outline:none;font-size:18px;padding:6px 4px;background:transparent}
.cell .cell-thumb{position:relative;display:flex;align-items:center}
/* ต้องมี: ไม่งั้น display:flex ด้านบนจะทับ attribute hidden ทำให้กรอบรูปเปล่า+ปุ่ม ✕ โผล่ตลอด */
.cell .cell-thumb[hidden]{display:none}
.cell .cell-thumb img{height:38px;width:38px;object-fit:cover;border-radius:8px}
.cell .cell-imgx{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:11px;cursor:pointer;line-height:1}
.cell .cell-emoji,.cell .cell-pic{border:none;background:#f6f0ff;border-radius:9px;width:30px;height:30px;font-size:15px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;line-height:1}
.cell .cell-emoji:hover,.cell .cell-picwrap:hover .cell-pic{background:#e7dbff}
/* ปุ่มใส่รูป = ไอคอนที่เห็น + ช่องเลือกไฟล์โปร่งใสวางทับพอดี
   ต้องให้นิ้วกดโดน "ช่องไฟล์" จริงๆ ไม่ใช่ปุ่มแล้วให้สคริปต์สั่งต่อ
   เพราะ Safari เปิดหน้าต่างเลือกรูปให้เฉพาะตอนผู้ใช้กดโดนช่องไฟล์เองเท่านั้น */
.cell .cell-picwrap{position:relative;display:inline-flex;flex:none}
.cell .cell-picwrap .cell-file{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;font-size:0;padding:0;border:0}
.cell .cell-picwrap:focus-within .cell-pic{outline:3px solid #a78bfa;outline-offset:2px}
/* คลังอิโมจิ popup */
#emojiLib{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px}
#emojiLib.hidden{display:none}
.emojilib-panel{background:#fff;border-radius:24px;box-shadow:var(--shadow);width:100%;max-width:460px;max-height:78vh;display:flex;flex-direction:column;overflow:hidden}
.emojilib-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f0eaff;font-size:18px}
.emojilib-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid #f0eaff}
.elib-tab{padding:6px 12px;border:none;border-radius:14px;background:#f1eafe;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.elib-tab.on{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.emojilib-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:14px;overflow:auto}
.elib-em{font-size:26px;border:none;background:#faf7ff;border-radius:10px;padding:6px 0;cursor:pointer;transition:.1s}
.elib-em:hover{background:#efe7ff;transform:scale(1.2)}
@media (max-width:480px){.emojilib-grid{grid-template-columns:repeat(6,1fr)}}

/* ============ แพ็กเกจ / ราคา ============ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0;align-items:stretch}
.plan{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);position:relative;border:3px solid transparent;display:flex;flex-direction:column}
.plan.go{border-color:#8b5cf6;background:linear-gradient(180deg,#faf7ff,#fff)}
.plan.pro{border-color:#f59e0b;background:linear-gradient(180deg,#fffdf5,#fff)}
.plan .badge-plan{display:inline-block;font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;margin-left:6px;vertical-align:middle}
.plan.go .badge-plan{background:#ede9fe;color:#6d28d9}
.plan.pro .badge-plan{background:#fef3c7;color:#b45309}
.plan .ptitle{font-size:22px;font-weight:800;font-family:'Itim',cursive}
.plan .price{font-size:40px;font-weight:900;color:var(--purple);margin:6px 0}
.plan .price small{font-size:16px;color:#888;font-weight:600}
.plan ul{list-style:none;padding:0;margin:12px 0;flex:1 0 auto}
.plan li{padding:6px 0;border-bottom:1px dashed #eee;font-size:15px}
.plan li .no{opacity:.5}
.plan .ribbon{position:absolute;top:14px;right:-6px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-weight:700;padding:4px 14px;border-radius:12px;box-shadow:var(--shadow);font-size:13px}

/* ---------- กล่อง "แพ็กเกจที่เลือก" ในหน้าสมัครสมาชิก ---------- */
.plan-picked{position:relative;text-align:center;border-radius:20px;padding:16px 18px 18px;margin:0 0 16px;
  background:linear-gradient(180deg,#faf5ff,#f5edff);border:2px solid #e9d5ff}
.plan-picked.go{background:linear-gradient(180deg,#faf5ff,#f0e9ff);border-color:#c4b5fd}
.plan-picked.pro{background:linear-gradient(180deg,#fffdf5,#fff6e6);border-color:#fcd34d}
.plan-picked .pp-label{font-size:12px;font-weight:800;letter-spacing:.6px;color:#9a8ac0;text-transform:uppercase}
.plan-picked .pp-name{font-family:'Itim',cursive;font-size:21px;font-weight:800;color:#6b21a8;margin:5px 0 0;line-height:1.35}
.plan-picked.pro .pp-name{color:#b45309}
.plan-picked .pp-price{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 13px;border-radius:999px;
  background:#fff;border:2px solid #e9d5ff;color:#7c3aed;font-family:'Mali',system-ui,sans-serif;font-size:15px;font-weight:800}
.plan-picked.pro .pp-price{border-color:#fcd34d;color:#b45309}
.plan-picked .pp-note{font-size:13px;color:#8b7bb0;margin-top:7px}
.plan-picked .pp-change{display:inline-flex;align-items:center;gap:6px;margin-top:13px;padding:8px 18px;border-radius:999px;
  background:#fff;border:2px solid #d8b4fe;color:#7c3aed;font-size:14px;font-weight:800;text-decoration:none;
  box-shadow:0 3px 8px rgba(124,58,237,.13);transition:transform .12s,background .15s,color .15s,border-color .15s}
.plan-picked .pp-change:hover{background:#7c3aed;border-color:#7c3aed;color:#fff;transform:translateY(-2px)}
.plan-picked .pp-change:active{transform:scale(.96)}
.plan-picked.pro .pp-change{border-color:#fcd34d;color:#b45309}
.plan-picked.pro .pp-change:hover{background:#f59e0b;border-color:#f59e0b;color:#fff}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
@media (max-width:640px){.choice-cards{grid-template-columns:1fr}}

/* ============ หน้าชำระเงิน ============ */
.pay-box{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);text-align:center;max-width:420px;margin:0 auto}
.pay-amount{font-size:44px;font-weight:900;color:#16a34a}
.pay-qr{background:#fff;display:inline-block;padding:14px;border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,.12);margin:10px auto}
.pay-acc{background:#f6f0ff;border-radius:16px;padding:14px;margin:12px 0;text-align:left}
.pay-acc div{margin:3px 0}
.promptpay-logo{display:inline-block;background:#003d6a;color:#fff;font-weight:800;padding:6px 14px;border-radius:10px;letter-spacing:1px;margin-bottom:6px}
/* ── แท็บสลับโหมดเกม ──────────────────────────────────────────
   แต่ละโหมดมีสีประจำตัว (กล้อง = ม่วง-ชมพู · ไม่ใช้กล้อง = เขียว-ฟ้า)
   ทำให้แยกออกจากกันได้ทันที ไม่ใช่แค่ "อันที่เลือก" กับ "อันที่ไม่ได้เลือก" */
/* 3 แท็บสำหรับผู้เล่นทั่วไป · ครู PRO ได้แท็บที่ 4 (ชุดคำถามแข่งสด) เพิ่มมา
   ใช้ auto-fit เพื่อให้จัดเองได้ทั้งกรณี 3 และ 4 ใบ โดยไม่ต้องเขียนกฎแยก */
.mode-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:0 0 18px}
.mode-tabs .mt{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:24px;text-decoration:none;
  background:#fff;border:2.5px solid #ece6fb;
  box-shadow:0 3px 0 rgba(76,29,149,.07),0 8px 22px rgba(76,29,149,.07);
  transition:transform .16s cubic-bezier(.2,1.4,.4,1),box-shadow .16s,border-color .16s}
.mode-tabs .mt:hover{transform:translateY(-3px)}

/* วงกลมไอคอน — คงสีไว้เสมอ การ์ดที่ไม่ได้เลือกจะได้ไม่ดูตายๆ */
.mode-tabs .mt-ic{flex:0 0 auto;width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;font-size:29px;line-height:1;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.10),0 3px 8px rgba(0,0,0,.10)}
.mode-tabs .mt-ar .mt-ic{background:linear-gradient(140deg,#ede9fe,#fbcfe8)}
.mode-tabs .mt-cl .mt-ic{background:linear-gradient(140deg,#d1fae5,#cffafe)}
.mode-tabs .mt-qz .mt-ic{background:linear-gradient(140deg,#fde68a,#fbcfe8)}
.mode-tabs .mt-qz .mt-body b{color:#b45309}
.mode-tabs .mt-qz.on{background:linear-gradient(135deg,#f59e0b,#ec4899);border-color:transparent}
.mode-tabs .mt-qz.on .mt-body b,.mode-tabs .mt-qz.on .mt-body small{color:#fff}
.mode-tabs .mt-qz.on .mt-ic{background:rgba(255,255,255,.85)}

.mode-tabs .mt-body{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.2}
.mode-tabs .mt-body b{font-size:18.5px;letter-spacing:.2px}
.mode-tabs .mt-body small{font-size:12.5px;opacity:.7;font-weight:700}
.mode-tabs .mt-ar .mt-body b{color:#6d28d9}
.mode-tabs .mt-cl .mt-body b{color:#0f766e}
.mode-tabs .mt-body small{color:#7c6ba3}

/* ตัวเลขจำนวนเกม */
.mode-tabs .mt-n{margin-left:auto;flex:0 0 auto;text-align:center;border-radius:16px;
  padding:7px 13px 6px;font-weight:900;font-size:19px;line-height:1}
.mode-tabs .mt-n i{display:block;font-style:normal;font-size:10.5px;font-weight:800;opacity:.72;margin-top:2px}
.mode-tabs .mt-ar .mt-n{background:#f3eaff;color:#6d28d9}
.mode-tabs .mt-cl .mt-n{background:#dcfce7;color:#0f766e}

/* เครื่องหมายถูก — ขึ้นเฉพาะโหมดที่กำลังดูอยู่ */
.mode-tabs .mt-check{position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:900;
  background:rgba(255,255,255,.9);color:#16a34a;opacity:0;transform:scale(.5);
  transition:opacity .2s,transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.18)}

/* ── สถานะกำลังเลือก ── */
.mode-tabs .mt.on{border-color:transparent;color:#fff;transform:translateY(-2px)}
.mode-tabs .mt.on .mt-body b,.mode-tabs .mt.on .mt-body small{color:#fff}
.mode-tabs .mt.on .mt-body small{opacity:.85}
.mode-tabs .mt.on .mt-body b{text-shadow:0 2px 6px rgba(0,0,0,.22)}
.mode-tabs .mt.on .mt-ic{background:rgba(255,255,255,.26);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 3px 10px rgba(0,0,0,.15)}
.mode-tabs .mt.on .mt-n{background:#fff}
.mode-tabs .mt.on .mt-check{opacity:1;transform:scale(1)}
.mode-tabs .mt-ar.on{background:linear-gradient(135deg,#7c3aed,#c026d3);
  box-shadow:0 5px 0 rgba(91,33,182,.35),0 14px 30px rgba(124,58,237,.35)}
.mode-tabs .mt-cl.on{background:linear-gradient(135deg,#059669,#0891b2);
  box-shadow:0 5px 0 rgba(6,95,70,.35),0 14px 30px rgba(5,150,105,.35)}
.mode-tabs .mt-ls.on{background:linear-gradient(135deg,#ea580c,#db2777);
  box-shadow:0 5px 0 rgba(154,52,18,.35),0 14px 30px rgba(234,88,12,.35)}
.mode-tabs .mt-ar.on .mt-n{color:#6d28d9}
.mode-tabs .mt-cl.on .mt-n{color:#0f766e}
.mode-tabs .mt-ls.on .mt-n{color:#c2410c}
.mode-tabs .mt-ls .mt-ic{background:linear-gradient(140deg,#ffedd5,#fce7f3)}
.mode-tabs .mt-ls .mt-body b{color:#c2410c}
.mode-tabs .mt-ls .mt-n{background:#ffedd5;color:#c2410c}
.mode-tabs .mt-qz .mt-n{background:#fef3c7;color:#b45309}
.mode-tabs .mt-qz.on{box-shadow:0 5px 0 rgba(146,64,14,.35),0 14px 30px rgba(245,158,11,.35)}
.mode-tabs .mt-qz.on .mt-n{color:#b45309}

/* ── แถบเข้าร่วมห้องแข่งสด (ใต้แท็บโหมดเกม) ── */
.join-room{position:relative;overflow:hidden;display:flex;align-items:center;gap:15px;
  margin:0 0 18px;padding:15px 20px;border-radius:24px;text-decoration:none;
  background:linear-gradient(135deg,#f97316,#db2777);
  box-shadow:0 5px 0 rgba(154,52,18,.32),0 14px 30px rgba(234,88,12,.30);
  transition:transform .16s cubic-bezier(.2,1.4,.4,1),box-shadow .16s}
.join-room:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(154,52,18,.32),0 18px 36px rgba(234,88,12,.36)}
.join-room::after{content:'';position:absolute;top:-50px;right:-34px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.join-room .jr-ic{flex:0 0 auto;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  font-size:30px;line-height:1;background:rgba(255,255,255,.26);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 3px 10px rgba(0,0,0,.15)}
.join-room .jr-body{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.25}
.join-room .jr-body b{font-size:18.5px;color:#fff;letter-spacing:.2px;text-shadow:0 2px 6px rgba(0,0,0,.22)}
.join-room .jr-body small{font-size:12.5px;color:#fff;opacity:.9;font-weight:700}
.join-room .jr-go{margin-left:auto;flex:0 0 auto;background:#fff;color:#c2410c;
  border-radius:16px;padding:11px 18px;font-weight:900;font-size:16px;white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.10)}
@media(max-width:640px){
  .join-room{padding:12px 14px;gap:11px;border-radius:20px}
  .join-room .jr-ic{width:46px;height:46px;border-radius:15px;font-size:25px}
  .join-room .jr-body b{font-size:16px}
  .join-room .jr-body small{font-size:11.5px}
  .join-room .jr-go{padding:9px 13px;font-size:14px}
}

/* ประกายมุมขวาบนของการ์ดที่เลือกอยู่ ให้ดูมีมิติ */
.mode-tabs .mt.on::after{content:'';position:absolute;top:-46px;right:-30px;
  width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}

@media(max-width:640px){
  .mode-tabs{grid-template-columns:1fr;gap:10px;margin-bottom:14px}
  .mode-tabs .mt{padding:12px 14px;gap:11px;border-radius:20px}
  .mode-tabs .mt-ic{width:46px;height:46px;border-radius:15px;font-size:24px}
  .mode-tabs .mt-body b{font-size:16px}
  .mode-tabs .mt-body small{font-size:11.5px}
  .mode-tabs .mt-n{font-size:17px;padding:6px 11px 5px}
  .mode-tabs .mt-n i{font-size:9.5px}
}
/* วันที่สมัครสมาชิก ใต้อีเมล (หน้าจัดการผู้ใช้) */
.u-joined{font-size:12px;color:#9a8fb5;margin-top:2px;white-space:nowrap}
/* แท็บกรองแหล่งที่มาของเกม (แอดมิน) */
.src-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.src-tabs a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:14px;background:#fff;
  border:2px solid #eadcff;color:#6d28d9;font-weight:800;font-size:14px;text-decoration:none}
.src-tabs a:hover{background:#faf5ff}
.src-tabs a.on{background:linear-gradient(135deg,#a78bfa,#f0abfc);color:#fff;border-color:transparent}
.src-tabs a span{background:rgba(109,40,217,.12);border-radius:10px;padding:1px 8px;font-size:12px}
.src-tabs a.on span{background:rgba(255,255,255,.28)}
/* แถบแจ้งว่าเป็นโหมดตรวจสอบ (เกมยังไม่เผยแพร่) */
.preview-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:10px 14px;
  background:#fff7ed;border:2px solid #fdba74;border-radius:14px;color:#9a3412;font-size:14px}
.preview-bar .pv-tag{background:#f97316;color:#fff;font-weight:800;padding:3px 10px;border-radius:10px;white-space:nowrap}
/* ปุ่มลบรายการ (แอดมิน) */
.btn-del{background:#fff1f1;color:#c0392b;border:1.5px solid #ffd0d0}
.btn-del:hover{background:#ffdede;color:#a02a1a}
/* แนบสลิป (บังคับ) */
.req{color:#dc2626;font-size:13px;font-weight:800;margin-left:4px}
.slip-hint{display:block;color:#9a8fb5;font-size:12px;margin-top:5px}
input[type=file]#slipInput{width:100%;padding:10px;border:2px dashed #c4b5fd;border-radius:14px;background:#faf7ff;font-size:14px;cursor:pointer}
input[type=file]#slipInput:invalid{border-color:#fca5a5;background:#fff5f5}
.slip-preview{display:flex;gap:10px;align-items:center;margin-top:10px;padding:10px;background:#f0fdf4;border:2px solid #86efac;border-radius:14px}
.slip-preview[hidden]{display:none}
.slip-preview img{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.slip-preview b{font-size:14px;color:#15803d;word-break:break-all}
.slip-preview small{color:#6b9c7d}

/* ============ Play page ============ */
.play-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(255,255,255,.85);border-radius:20px;padding:12px 16px;box-shadow:var(--shadow);margin-bottom:12px}
.play-top .t{font-size:22px;font-weight:700;font-family:'Itim',cursive}

/* ---------- แถบหัวเกม (หน้าเล่นเกม) ----------
   แบ่ง 2 ฝั่งชัดเจน: ซ้าย = เกมอะไร · ขวา = ปุ่มทำอะไรได้
   เดิมทุกอย่างเรียงปนกันแถวเดียว พอปุ่มเยอะจะตกบรรทัดมั่ว */
.play-top:not(.compact){justify-content:space-between;gap:14px;padding:14px 18px;border-radius:26px;
  background:linear-gradient(135deg,#fff 0%,#fdfbff 55%,#f6f1ff 100%);
  border:2px solid rgba(167,139,250,.22);box-shadow:0 8px 22px rgba(109,70,190,.13)}
.pt-id{display:flex;align-items:center;gap:13px;flex:1 1 300px;min-width:0}
.pt-thumb{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(135deg,#ede9fe,#fce7f3);border:2px solid #fff;
  box-shadow:0 5px 14px rgba(139,92,246,.22)}
.pt-thumb .e3d{width:34px;height:34px;vertical-align:0}
.pt-txt{min-width:0}
.play-top .pt-txt .t{margin:0;font-size:clamp(19px,2.1vw,25px);line-height:1.25;color:#3b2a5a;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pt-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.pt-by{font-size:12px;color:#8b7bb0;font-weight:700;white-space:nowrap}
.pt-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex:none}

/* ปุ่มทรงนูน มีขอบล่างหนาแบบปุ่มของเล่น กดแล้วยุบลง เด็กเห็นแล้วรู้ว่ากดได้ */
/* ขอบโปร่งใสไว้ทุกปุ่ม ปุ่มที่มีขอบจริง (รายงานปัญหา) จะได้สูงเท่ากันไม่เหลื่อม */
.btn-act{padding:11px 18px;font-size:16px;border-radius:18px;border:2px solid transparent;white-space:nowrap;
  box-shadow:0 4px 0 var(--btn-edge,rgba(0,0,0,.16)),0 6px 14px rgba(60,30,110,.15);
  transform:translateY(0);transition:transform .12s,box-shadow .12s,filter .12s}
.btn-act:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 6px 0 var(--btn-edge,rgba(0,0,0,.16)),0 10px 20px rgba(60,30,110,.2)}
.btn-act:active{transform:translateY(3px);
  box-shadow:0 1px 0 var(--btn-edge,rgba(0,0,0,.16)),0 2px 6px rgba(60,30,110,.18)}
.btn-fs{--btn-edge:#059669;background:linear-gradient(135deg,#34d399,#10b981);color:#fff}
.btn-live{--btn-edge:#c2760a;background:linear-gradient(135deg,#fde68a,#fbbf24);color:#7c4a03}
.btn-act.btn-purple{--btn-edge:#7e22ce}
.btn-act.btn-green{--btn-edge:#059669}
.btn-quiet{--btn-edge:#e3d8f7;background:#fff;color:#7a6ca0;border:2px solid #efe7fd}
.btn-quiet:hover{color:#c0392b;border-color:#ffd7d7}
@media (max-width:900px){
  .play-top:not(.compact){padding:12px 14px;gap:11px}
  .pt-thumb{width:48px;height:48px;border-radius:15px}
  .pt-thumb .e3d{width:28px;height:28px}
  /* ไม่ยืดปุ่มให้เต็มแถว ไม่งั้นปุ่มสุดท้ายที่ตกไปอยู่แถวใหม่ตัวเดียวจะยาวเต็มจอ ดูแปลก */
  .pt-acts{gap:7px;width:100%}
  .btn-act{padding:10px 14px;font-size:14.5px;border-radius:15px;justify-content:center}
}
@media (max-width:420px){
  .pt-hide-sm{display:none}
  .btn-act{padding:9px 11px;font-size:13.5px;gap:5px}
  .pt-by{display:none}
}
/* แถบหัวแบบกะทัดรัด (หน้าเกมของฉัน) — อยู่แถวเดียว ถ้าแคบให้เลื่อนแนวนอนแทนการตกบรรทัด */
.play-top.compact{gap:7px;padding:8px 12px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none}
.play-top.compact::-webkit-scrollbar{display:none}
.play-top.compact > *{flex:none}
.play-top.compact .spacer{flex:1 0 8px}
.play-top.compact .av{font-size:22px;line-height:1}
.play-top.compact .t{font-size:16px;white-space:nowrap}
.play-top.compact .badge{font-size:11px;padding:2px 8px}
.play-top.compact .btn{white-space:nowrap;padding:6px 12px;font-size:13px;border-radius:12px}
@media (max-width:600px){
  .play-top.compact .t{max-width:34vw;overflow:hidden;text-overflow:ellipsis}
}
.play-frame{width:100%;height:78vh;min-height:480px;border:none;border-radius:24px;background:#0b1026;box-shadow:var(--shadow)}
#playWrap{position:relative}
/* ---------- ระบบรายงานปัญหา ---------- */
/* ข้อความที่ต้องการให้อยู่บรรทัดเดียว (จอแคบยอมให้ตกบรรทัดเพื่อไม่ให้ล้น) */
.nowrap-line{white-space:nowrap}
@media (max-width:640px){.nowrap-line{white-space:normal}}

/* ---------- ตารางแอดมินแบบกระชับ (ไม่ตกบรรทัด ปุ่มเล็ก) ---------- */
.table-compact th,.table-compact td{white-space:nowrap;vertical-align:middle;padding:8px 10px}
.table-compact .g-title{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* ปุ่มขนาดจิ๋ว ใช้ในตาราง */
.btn-mini{padding:4px 10px;font-size:12.5px;border-radius:10px;line-height:1.5;white-space:nowrap}
/* dropdown สิทธิ์การเล่น */
.acc-sel{padding:5px 8px;font-size:13px;font-weight:700;border-radius:10px;border:2px solid #eadcff;
  background:#fff;cursor:pointer;font-family:inherit}
.acc-sel.free{border-color:#c7e9d4;color:#15803d;background:#f2fbf6}
.acc-sel.members{border-color:#fcd34d;color:#b45309;background:#fffbeb}

/* ---------- เครื่องมือตั้งค่าเกมฟรี (หน้าจัดการเกม) ---------- */
.free-tool{margin-bottom:16px;background:linear-gradient(180deg,#faf7ff,#fff);border:2px solid #eadcff}
.free-now{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.free-now .chip{font-size:13px;font-weight:800;padding:5px 13px;border-radius:999px;border:2px solid}
.free-now .chip.free{background:#f0fdf4;border-color:#86efac;color:#15803d}
.free-now .chip.paid{background:#fffbeb;border-color:#fcd34d;color:#b45309}
/* ทุกช่องสูงเท่ากันพอดี (46px) แล้วจัดชิดล่าง → ไม่มีอันไหนตกระดับ */
.free-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.free-form .ff-field{display:flex;flex-direction:column;gap:6px;margin:0}
.free-form .ff-grow{flex:1 1 250px;min-width:230px}
.free-form .ff-label{font-size:13px;font-weight:800;color:#6b5f8a;line-height:1.2}
.free-form .ff-label small{font-weight:600;color:#9a8ac0;font-size:12px}
.free-form input[type=number],
.free-form select,
.free-form .ff-btn{height:46px;box-sizing:border-box;border-radius:14px;font-family:inherit}
.free-form input[type=number],
.free-form select{padding:0 14px;border:2px solid #eadcff;background:#fff;color:#4a3f66}
.free-form input[type=number]{width:132px;font-size:17px;font-weight:800}
.free-form input[type=number]:focus,
.free-form select:focus{outline:none;border-color:#a78bfa}
.free-form select{width:100%;font-size:14.5px;font-weight:700;cursor:pointer}
.free-form .ff-btn{padding:0 22px;font-size:15px;white-space:nowrap}

/* ---------- การ์ดสรุปรายได้ (หน้าการชำระเงิน) ---------- */
.rev-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.rev-card{border-radius:20px;padding:16px 18px;text-align:center;box-shadow:var(--shadow);border:2px solid transparent}
.rev-card.go{background:linear-gradient(180deg,#faf5ff,#fff);border-color:#c4b5fd}
.rev-card.pro{background:linear-gradient(180deg,#fffdf5,#fff);border-color:#fcd34d}
.rev-card.total{background:linear-gradient(180deg,#f0fdf4,#fff);border-color:#86efac}
.rev-label{font-size:14px;font-weight:800;color:#6b5f8a}
.rev-amount{font-family:'Itim',cursive;font-size:32px;font-weight:900;line-height:1.25;margin:2px 0;color:#6d28d9}
.rev-card.pro .rev-amount{color:#b45309}
.rev-card.total .rev-amount{color:#15803d}
.rev-amount span{font-size:18px;font-family:'Mali',system-ui,sans-serif}
.rev-sub{font-size:12.5px;color:#9a8ac0;font-weight:700}
/* ตัวเลือกช่วงวันของสรุปรายได้ */
.rev-filter{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:10px 0 8px}
.rev-quick{display:flex;gap:6px;flex-wrap:wrap}
.rev-chip{display:inline-block;padding:6px 14px;border-radius:999px;background:#fff;border:2px solid #eadcff;
  color:#6b5f8a;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.rev-chip:hover{border-color:var(--purple);color:var(--purple)}
.rev-chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.rev-range{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rev-range label{font-size:13px;font-weight:700;color:#6b5f8a;display:flex;gap:5px;align-items:center}
.rev-range input[type=date]{padding:7px 10px;border-radius:11px;border:2px solid #eadcff;font-size:14px;font-family:inherit}
.rev-daily{margin:0 0 18px}
.rev-daily>summary{cursor:pointer;font-weight:800;color:#6d28d9;padding:8px 2px;font-size:15px}
@media (max-width:640px){
  .rev-row{grid-template-columns:1fr}
  .rev-filter{flex-direction:column;align-items:stretch}
  .rev-range{justify-content:space-between}
}
@media (max-width:700px){.rev-row{grid-template-columns:1fr}}
.rp-overlay{display:none;position:fixed;inset:0;z-index:9998;background:rgba(40,20,70,.45);align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.rp-overlay.on{display:flex}
.rp-box{background:#fff;border-radius:22px;padding:22px;max-width:460px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.25);margin:auto}
.rp-head{text-align:center}
.rp-head h3{margin:4px 0 4px}
.rp-head p{color:#6b5f8a;font-size:14px;margin:0 0 12px}
.rp-reasons{display:flex;flex-direction:column;gap:7px}
.rp-opt{display:flex;align-items:center;gap:9px;padding:10px 13px;border:2px solid #eadcff;border-radius:14px;cursor:pointer;font-size:15px;transition:.13s}
.rp-opt:hover{background:#faf5ff;border-color:#d8b4fe}
.rp-opt input{accent-color:#7c3aed;width:17px;height:17px;flex:none}
.rp-opt:has(input:checked){background:#f3e8ff;border-color:#a78bfa;font-weight:700}
/* ── กล่อง Prompt ของเกม (หน้าเล่นเกม) ─────────────────────────── */
.btn-prompt{--btn-edge:#4338ca;background:linear-gradient(135deg,#818cf8,#6366f1);color:#fff}
/* ยังไม่ใช่ PRO — ปุ่มล็อกสีทอง กดแล้วไปหน้าแพ็กเกจ */
.btn-prompt.locked{--btn-edge:#b45309;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff}
.pm-tag{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:999px;
  background:rgba(0,0,0,.28);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.5px;vertical-align:1px}
.pm-overlay{display:none;position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at 25% 15%,rgba(167,139,250,.62),rgba(28,12,58,.78) 70%);
  align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.pm-overlay.on{display:flex}
.pm-box{background:#fff;border-radius:30px;width:100%;max-width:840px;max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;border:3px solid #fff;
  box-shadow:0 28px 70px rgba(58,20,120,.45);animation:pmIn .28s cubic-bezier(.2,1.3,.5,1)}
@keyframes pmIn{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}

/* หัว/แถบปุ่ม/ท้ายกล่อง ห้ามหด — ไม่งั้นเนื้อ prompt ที่ยาวมากจะไปบีบให้หัวเตี้ยจนป้ายชื่อเกมหาย
   (ต้องคู่กับ min-height:0 ที่ .pm-body ด้วย ถึงจะเลื่อนอ่านได้จริง) */
.pm-head,.pm-bar,.pm-foot{flex:none}
/* หัวกล่อง — ไล่สีม่วง→ชมพู→ส้ม มีวงกลมโปร่งแสงลอยเป็นฉากหลังให้ดูสดใส */
.pm-head{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:12px;padding:20px 22px 18px;
  background:linear-gradient(115deg,#7c3aed 0%,#a855f7 32%,#ec4899 68%,#fb923c 100%)}
.pm-head::before,.pm-head::after{content:'';position:absolute;border-radius:50%;
  background:rgba(255,255,255,.16);pointer-events:none}
.pm-head::before{width:210px;height:210px;top:-120px;right:-40px}
.pm-head::after{width:120px;height:120px;bottom:-70px;right:120px;background:rgba(255,255,255,.11)}
.pm-head > div{position:relative;z-index:1;min-width:0}
.pm-head h3{margin:0;font-size:25px;color:#fff;text-shadow:0 2px 0 rgba(90,20,120,.25)}
.pm-head p{display:inline-block;margin:8px 0 0;padding:4px 13px;border-radius:999px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);
  font-size:13.5px;font-weight:700;color:#fff;word-break:break-word}
.pm-x{position:relative;z-index:1;margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.2);color:#fff;
  font-size:22px;line-height:1;cursor:pointer;transition:.18s}
.pm-x:hover{background:#fff;color:#a855f7;transform:rotate(90deg) scale(1.08)}

/* แถบคัดลอก — พื้นครีมอ่อน คั่นด้วยเส้นประให้ดูน่ารัก */
.pm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;
  background:linear-gradient(180deg,#fdf7ff,#f4ecff);border-bottom:2px dashed #e2d2fb}
.pm-bar-t{display:flex;flex-direction:column;flex:1;min-width:180px}
.pm-bar-t b{font-size:16px;color:#5b21b6}
.pm-bar-t span{font-size:12.5px;color:#8b7bb0}
.pm-copy{padding:11px 20px;font-size:16px;border-radius:18px;border:none;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#22d3ee,#0ea5e9 55%,#6366f1);
  box-shadow:0 4px 0 #4338ca,0 7px 16px rgba(59,74,220,.3);
  transition:transform .12s,box-shadow .12s,filter .12s}
.pm-copy:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 6px 0 #4338ca,0 11px 22px rgba(59,74,220,.34)}
.pm-copy:active{transform:translateY(3px);box-shadow:0 1px 0 #4338ca,0 2px 6px rgba(59,74,220,.3)}
.pm-copy.done{background:linear-gradient(135deg,#4ade80,#16a34a);box-shadow:0 4px 0 #15803d,0 7px 16px rgba(22,163,74,.3)}

/* ต้องเป็น pre — ตัวแปลงอิโมจิ 3D ข้ามแท็กนี้ ข้อความที่คัดลอกจึงตรงกับไฟล์ต้นฉบับ
   ไม่ใช้ฟอนต์ monospace เพราะภาษาไทยจะฉีกห่างอ่านยาก */
.pm-body{flex:1;min-height:0;overflow:auto;margin:0;padding:18px 22px;
  background:linear-gradient(180deg,#fffdff,#faf6ff);
  font-family:'Sarabun','Mali',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.85;color:#3a3350;white-space:pre-wrap;word-break:break-word;
  -webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
.pm-body::-webkit-scrollbar{width:11px}
.pm-body::-webkit-scrollbar-track{background:transparent}
.pm-body::-webkit-scrollbar-thumb{border-radius:999px;border:3px solid transparent;background-clip:content-box;
  background-color:#c9b6f5}
.pm-body::-webkit-scrollbar-thumb:hover{background-color:#a78bfa}
.pm-foot{padding:13px 20px;text-align:center;background:#f7f1ff;border-top:2px dashed #e2d2fb}
.pm-foot .btn{background:#fff;color:#7c3aed;border:2px solid #e2d2fb;border-radius:16px;font-size:16px}
.pm-foot .btn:hover{background:#f3e8ff;border-color:#c4b5fd}
@media(max-width:600px){
  .pm-overlay{padding:0}
  .pm-box{max-width:none;max-height:100vh;height:100%;border-radius:0;border:none;animation:none}
  .pm-head{padding:15px 16px 13px}
  .pm-head h3{font-size:20px}
  .pm-head p{font-size:12.5px;padding:3px 11px}
  .pm-head::before{width:150px;height:150px;top:-95px;right:-30px}
  /* จอแคบ วางปุ่มไว้ใต้หัวข้อเต็มความกว้าง จะกดง่ายกว่าเบียดอยู่ข้างๆ */
  .pm-bar{padding:11px 16px;flex-direction:column;align-items:stretch;gap:8px}
  .pm-bar-t span{display:none}   /* จอเล็กพื้นที่มีค่า ตัดคำอธิบายออก ปุ่มบอกอยู่แล้วว่าทำอะไร */
  .pm-copy{width:100%}
  .pm-body{padding:15px 16px;font-size:14px}
}
/* การ์ดรายงานในหน้า reports.php */
.rp-card{background:#fff;border-radius:18px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow);border-left:6px solid #d1d5db}
.rp-card.open{border-left-color:#ef4444}
.rp-card.done{border-left-color:#22c55e;opacity:.92}
.rp-card-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.rp-status{font-size:12px;font-weight:800;padding:3px 11px;border-radius:999px}
.rp-status.open{background:#fee2e2;color:#b91c1c}
.rp-status.done{background:#dcfce7;color:#15803d}
.rp-card-game{font-size:14px;color:#5a3f8a;margin-bottom:6px}
/* แถบ "ผู้แจ้ง" — แอดมินต้องรู้ทันทีว่าใครแจ้ง โดยไม่ต้องเปิดเข้าไปดูรายละเอียด */
.rp-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;
  background:#f4f0ff;border:1px solid #e6dcff;border-radius:12px;padding:6px 11px;font-size:13.5px}
.rp-who .rw-ic{font-size:16px;line-height:1}
.rp-who .rw-name{font-weight:800;color:#5b21b6}
.rp-who .rw-mail{color:#7c6a9c;font-size:12.5px;word-break:break-all}
.rp-who .rw-tag{background:#ede9fe;color:#6d4aad;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700;white-space:nowrap}
.rp-who .rw-tag.tier1{background:#dbeafe;color:#1d4ed8}
.rp-who .rw-tag.tier2{background:#fce7f3;color:#a21caf}
.rp-who .rw-tag.tier3{background:#fef3c7;color:#a16207}
.rp-who .rw-link{margin-left:auto;color:#7c3aed;font-weight:700;text-decoration:none;font-size:12.5px;white-space:nowrap}
.rp-who .rw-link:hover{text-decoration:underline}
.rp-detail{background:#faf7ff;border:1px dashed #e2d6f7;border-radius:12px;padding:9px 12px;font-size:14px;color:#4a3f66;white-space:pre-wrap}
.rp-resolved{background:#f0fdf4;border:1px dashed #bbf7d0;border-radius:12px;padding:8px 12px;font-size:14px;color:#166534;margin-top:7px}
.rp-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
/* ปุ่มออกจากเต็มจอ (ลอยมุมขวาบน แสดงเฉพาะตอนเต็มจอ) */
#exitFsBtn{display:none;position:absolute;top:12px;right:12px;z-index:2147483647;
  background:rgba(20,10,40,.72);color:#fff;border:2px solid rgba(255,255,255,.55);
  border-radius:999px;padding:9px 16px;font-size:15px;font-weight:800;cursor:pointer;
  font-family:'Mali','Comic Sans MS',system-ui,sans-serif;backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent}
#exitFsBtn:hover{background:rgba(20,10,40,.9)}
#exitFsBtn:active{transform:scale(.95)}
/* เต็มจอแบบ CSS (ใช้เมื่อเบราว์เซอร์ไม่รองรับ native fullscreen เช่น iPhone) */
body.fake-fs{overflow:hidden}
/* ซ่อนส่วนประกอบเว็บ และปลด stacking context ของ main (z-index:10) ไม่ให้ navbar (z-index:50) ทับเกม */
body.fake-fs .navbar,
body.fake-fs .site-footer,
body.fake-fs .scene{display:none!important}
body.fake-fs main.page{position:static;z-index:auto;padding:0;max-width:none}
body.fake-fs #playWrap{position:fixed;inset:0;z-index:2147483000;background:#0b1026}
body.fake-fs #playWrap .play-frame{width:100%;height:100%;min-height:0;border-radius:0}
body.fake-fs #exitFsBtn{position:fixed}

/* ══ กรอบเกมบนมือถือต้องเต็มความกว้างจอ ══
   หน้าเว็บมีขอบซ้าย-ขวาข้างละ 16px (.page) กรอบเกมจึงแคบกว่าจอ 32px
   บนคอมไม่มีปัญหา แต่บนมือถือ (โดยเฉพาะ Safari ของ iPhone) หน้าเกมข้างในกรอบ
   ใช้ meta viewport = width=device-width ซึ่ง Safari ตีความว่า "ความกว้างของเครื่อง"
   ไม่ใช่ "ความกว้างของกรอบ" ตัวเกมจึงวาดด้วยความกว้างเต็มจอ (เช่น 393)
   แล้วถูกยัดลงกรอบที่กว้างแค่ 361 — ขอบขวาราว 8% จึงโดนตัดหายไป
   นี่คือเหตุที่การ์ดคอลัมน์ขวาของเกมผังงาน/เรียงลำดับหายไปครึ่งใบเฉพาะบนมือถือ
   แก้ด้วยการดึงกรอบให้ชนขอบจอพอดี ความกว้างกรอบ = ความกว้างเครื่อง ปัญหาจึงหมดไป
   (และได้พื้นที่เล่นเพิ่มอีก 8% ด้วย) */
@media(max-width:720px){
  #playWrap{margin-left:-16px;margin-right:-16px}
  #playWrap .play-frame{border-radius:0}
}
/* ตอน native fullscreen ให้ iframe เต็มพื้นที่ */
#playWrap:fullscreen .play-frame{width:100%;height:100%;min-height:0;border-radius:0}
#playWrap:-webkit-full-screen .play-frame{width:100%;height:100%;min-height:0;border-radius:0}
.share-box{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:rgba(255,255,255,.9);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin-top:14px}
.qr-holder{background:#fff;padding:12px;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.share-url{flex:1;min-width:220px;padding:12px 14px;border-radius:14px;border:2px solid #eadcff;font-size:14px;background:#faf7ff}
/* วันหมดอายุของลิงก์แชร์ — ต้องเห็นคู่กับช่องลิงก์ ไม่ใช่ซ่อนไว้ท้ายกล่อง */
.share-exp{margin-top:8px;background:#fff7ed;border:1.5px solid #fed7aa;border-radius:13px;
  padding:8px 12px;font-size:13px;color:#9a5b00;font-weight:700;line-height:1.6}

/* ============ Admin ============ */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid #f0eaff;font-size:14px}
.table th{background:#f6f0ff;color:#6d28d9}
.table tr:hover td{background:#faf7ff}
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tabbar a{padding:8px 16px;border-radius:16px;background:rgba(255,255,255,.8);font-weight:700}
.tabbar a.on{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.stat{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--shadow);text-align:center}
.stat .n{font-size:34px;font-weight:800;color:var(--purple)}
.stat .l{color:#7a6ca0}

/* ============ Footer ============ */
.site-footer{position:relative;z-index:10;text-align:center;padding:26px 16px 40px;color:#5a3f8a}
.footer-emojis{font-size:26px;margin:8px 0}
.footer-small{font-size:13px;color:#7a6ca0}

/* ============ Responsive ============ */
@media (max-width:760px){
  .nav-toggle{display:block}
  .nav-links{display:none;flex-direction:column;align-items:stretch;width:100%;margin-top:10px;gap:6px}
  .nav-links.open{display:flex}
  .nav-link{width:100%}
  .nav-user{width:100%;margin-left:0;padding-left:0;border-left:none;border-top:1.5px solid rgba(139,92,246,.16);padding-top:8px;margin-top:4px;justify-content:flex-start;gap:8px}
  .user-chip{flex:1}
  .navbar{flex-wrap:wrap}
  .tree{font-size:56px}
  .play-frame{height:70vh}
}
/* แนวนอนบนมือถือ */
@media (max-height:500px) and (orientation:landscape){
  .hero{padding:10px}
  .hero .mascots{font-size:40px}
  .play-frame{height:88vh}
  .scene .ground,.scene .tree,.scene .flower,.scene .animal{display:none}
}

/* ══════════════════════════════════════════════════════════════
   กล่องแจ้งเตือน/ยืนยัน กลางของทั้งเว็บ (แทน confirm/alert ของเบราว์เซอร์)
   ใช้ผ่าน ui.confirm() / ui.alert() ใน assets/js/app.js
   ══════════════════════════════════════════════════════════════ */
.ui-mask{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:18px;
  background:rgba(38,20,70,.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s ease}
.ui-mask.on{opacity:1}
.ui-box{width:100%;max-width:430px;background:#fff;border-radius:30px;padding:30px 26px 24px;
  text-align:center;box-shadow:0 26px 70px rgba(50,20,90,.34);
  transform:scale(.82) translateY(14px);opacity:0;
  transition:transform .3s cubic-bezier(.2,1.5,.4,1),opacity .22s ease;
  font-family:'Comic Sans MS','Baloo 2',system-ui,sans-serif}
.ui-mask.on .ui-box{transform:scale(1) translateY(0);opacity:1}

/* วงกลมไอคอนด้านบน */
.ui-ic{width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  font-size:46px;line-height:1;animation:uiPop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes uiPop{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}
.ui-ic.warn  {background:linear-gradient(140deg,#fef3c7,#fde68a);box-shadow:0 8px 22px rgba(245,158,11,.32)}
.ui-ic.danger{background:linear-gradient(140deg,#fee2e2,#fecaca);box-shadow:0 8px 22px rgba(239,68,68,.30)}
.ui-ic.ok    {background:linear-gradient(140deg,#d1fae5,#a7f3d0);box-shadow:0 8px 22px rgba(16,185,129,.30)}
.ui-ic.info  {background:linear-gradient(140deg,#ede9fe,#ddd6fe);box-shadow:0 8px 22px rgba(139,92,246,.30)}

.ui-title{font-size:24px;font-weight:900;color:#3b2a55;margin:0 0 8px;line-height:1.3}
.ui-text{font-size:15.5px;font-weight:700;color:#6b5f8a;line-height:1.6;margin:0 0 22px;white-space:pre-line}
.ui-btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.ui-btn{flex:1 1 130px;max-width:200px;border:none;cursor:pointer;border-radius:18px;
  padding:14px 20px;font-size:17px;font-weight:900;font-family:inherit;
  transition:transform .12s cubic-bezier(.2,1.4,.4,1),box-shadow .12s}
.ui-btn:active{transform:translateY(3px)}
.ui-btn.no {background:#f1ecfb;color:#6b5f8a;box-shadow:0 4px 0 #ded4f3}
.ui-btn.no:hover{background:#e9e2f8}
.ui-btn.yes{background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;box-shadow:0 5px 0 rgba(109,40,217,.45)}
.ui-btn.yes.danger{background:linear-gradient(135deg,#f43f5e,#be123c);box-shadow:0 5px 0 rgba(159,18,57,.45)}
.ui-btn.yes.safe  {background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 5px 0 rgba(4,120,87,.45)}
.ui-btn:active{box-shadow:none}
@media(max-width:420px){
  .ui-box{padding:26px 18px 20px;border-radius:26px}
  .ui-ic{width:76px;height:76px;font-size:40px}
  .ui-title{font-size:21px}
  .ui-btns{flex-direction:column-reverse}
  .ui-btn{max-width:none}
}

/* ══════════════════════════════════════════════════════════════
   แถบคาดบนการ์ดเกม — พื้นขาว ขอบเรืองแสง ตัวหนังสือแดงเด่น
   (สไตล์เดียวกับปุ่มลอย "กลับห้องแข่ง")
   ปกการ์ดมีทุกสีในสายรุ้ง จึงใช้พื้นขาวเหมือนกันหมด แล้วแยกความหมาย
   ด้วยสีขอบเรืองแสง + สีตัวอักษร — เขียว=ฟรี · ทอง/น้ำเงิน=สมาชิก · แดง=แข่งสดได้
   ══════════════════════════════════════════════════════════════ */
.card .cover{position:relative}
.gflag,.glive{position:absolute;top:10px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;font-size:13px;font-weight:900;line-height:1;
  border-radius:999px;white-space:nowrap;letter-spacing:.2px;
  background:#fff;color:#dc2626;border:2.5px solid #22c55e}
.gflag{left:10px}
.glive{right:10px}
.gflag .ic,.glive .ic{font-size:15px;line-height:1}

/* ขอบเรืองแสงแยกตามความหมาย */
.gflag.free{color:#15803d;border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.20),0 0 14px rgba(34,197,94,.65),0 5px 14px rgba(0,0,0,.22)}
.gflag.paid{color:#1d4ed8;border-color:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.20),0 0 14px rgba(245,158,11,.70),0 5px 14px rgba(0,0,0,.22)}
.glive{border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.18),0 0 14px rgba(239,68,68,.65),0 5px 14px rgba(0,0,0,.22);
  animation:gliveGlow 2s ease-in-out infinite}
@keyframes gliveGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.18),0 0 14px rgba(239,68,68,.65),0 5px 14px rgba(0,0,0,.22)}
  50%    {box-shadow:0 0 0 5px rgba(239,68,68,.10),0 0 24px rgba(239,68,68,.95),0 5px 14px rgba(0,0,0,.22)}
}
/* จุดแดงกะพริบ สื่อว่าเปิดห้องแข่งสดได้ */
.glive .dot{width:8px;height:8px;border-radius:50%;background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.22);animation:gliveBlink 1.5s ease-in-out infinite}
@keyframes gliveBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ── จอเล็ก: การ์ดเรียง 2 คอลัมน์ กว้างเหลือ ~195px ──
   แถบขนาดจอคอมจะชนกันเองและทับรูปตรงกลาง จึงต้องย่อลงมาก
   (ที่ ≤420px กลับเป็น 1 คอลัมน์ การ์ดกว้างขึ้น ขยายกลับได้บ้าง) */
@media(max-width:720px){
  .gflag,.glive{font-size:9.5px;padding:4px 8px;gap:4px;top:6px;border-width:2px;letter-spacing:0}
  .gflag{left:6px} .glive{right:6px}
  .gflag .ic,.glive .ic{font-size:11px}
  .glive .dot{width:6px;height:6px;box-shadow:0 0 0 2px rgba(239,68,68,.22)}
  /* เงาเรืองแสงบางลง ไม่ให้ดูเทอะทะบนจอเล็ก */
  .gflag.free{box-shadow:0 0 0 2px rgba(34,197,94,.18),0 2px 7px rgba(0,0,0,.2)}
  .gflag.paid{box-shadow:0 0 0 2px rgba(245,158,11,.18),0 2px 7px rgba(0,0,0,.2)}
  .glive,.glive:where(*){box-shadow:0 0 0 2px rgba(239,68,68,.18),0 2px 7px rgba(0,0,0,.2);animation:none}

  /* หมายเหตุ: กฎย่อ "ฉากในหน้าปก" ต้องอยู่ท้ายไฟล์ (หลังกฎหลักของฉาก)
     ไม่งั้นกฎหลักที่มาทีหลังจะชนะ แล้วค่าของมือถือจะไม่ถูกใช้เลย */
}
@media(max-width:420px){
  .gflag,.glive{font-size:11px;padding:6px 11px;gap:5px;top:8px}
  .gflag{left:8px} .glive{right:8px}
  .gflag .ic,.glive .ic{font-size:13px}
  .glive .dot{width:7px;height:7px}



}
@media (prefers-reduced-motion: reduce){ .glive,.glive .dot{animation:none} }

/* ══════════════════════════════════════════════════════════════
   ปุ่มลอย "กลับห้องแข่ง" — พื้นขาว ขอบเขียวเรืองแสง ตัวหนังสือแดง
   โผล่เฉพาะตอนที่ห้องมีการใช้งานจริง (ดูเงื่อนไขใน includes/footer.php)
   ══════════════════════════════════════════════════════════════ */
.quiz-back{position:fixed;left:16px;bottom:16px;z-index:70;display:flex;align-items:stretch;
  background:#fff;border:3px solid #22c55e;border-radius:999px;overflow:hidden;
  font-family:'Comic Sans MS','Baloo 2',system-ui,sans-serif;
  box-shadow:0 0 0 5px rgba(34,197,94,.20),0 0 22px rgba(34,197,94,.60),0 10px 26px rgba(0,0,0,.20);
  animation:qbGlow 2s ease-in-out infinite}
@keyframes qbGlow{
  0%,100%{box-shadow:0 0 0 5px rgba(34,197,94,.20),0 0 22px rgba(34,197,94,.60),0 10px 26px rgba(0,0,0,.20)}
  50%    {box-shadow:0 0 0 8px rgba(34,197,94,.10),0 0 34px rgba(34,197,94,.90),0 10px 26px rgba(0,0,0,.20)}
}
.quiz-back a{display:flex;align-items:center;gap:11px;padding:11px 17px;text-decoration:none}
.quiz-back .qb-ic{font-size:27px;line-height:1;flex:0 0 auto}
.quiz-back .qb-tx{display:flex;flex-direction:column;line-height:1.2}
.quiz-back .qb-tx{font-size:16.5px;font-weight:900;color:#dc2626}
.quiz-back .qb-tx small{font-size:11.5px;font-weight:800;color:#16a34a;margin-top:2px}
.quiz-back a:hover{background:#f0fdf4}
.quiz-back .qb-x{border:none;border-left:3px solid #22c55e;cursor:pointer;background:#fff;
  color:#94a3b8;font-weight:900;font-size:16px;padding:0 15px;font-family:inherit;transition:.15s}
.quiz-back .qb-x:hover{background:#fee2e2;color:#dc2626}
@media(max-width:520px){
  .quiz-back{left:10px;bottom:10px}
  .quiz-back a{padding:9px 13px;gap:9px}
  .quiz-back .qb-ic{font-size:23px}
  .quiz-back .qb-tx{font-size:14.5px}
  .quiz-back .qb-tx small{font-size:10.5px}
  .quiz-back .qb-x{padding:0 12px}
}
@media (prefers-reduced-motion: reduce){ .quiz-back{animation:none} }

/* ── แบ่งหน้าตารางแอดมิน ───────────────────────────────── */
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;margin:18px 0 6px}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  border-radius:14px;border:2px solid #eadcff;background:#fff;color:#6d28d9;font-weight:800;font-size:15px;
  text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s}
.pager .pg:hover{background:#f5f0ff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(139,92,246,.22)}
.pager .pg.on{background:linear-gradient(135deg,#8b5cf6,#ec4899);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(139,92,246,.42)}
.pager .pg.off{opacity:.42;pointer-events:none}
.pager .pg.gap{border:none;background:none;min-width:22px;padding:0;color:#a78bfa;box-shadow:none}
.pager .pg-jump{display:flex;gap:6px;align-items:center;margin-left:10px;font-size:14px;color:#7c6f93}
.pager .pg-jump input{width:78px;padding:8px 10px;border-radius:12px;border:2px solid #eadcff;font-size:15px;text-align:center}
@media(max-width:640px){
  .pager .pg{min-width:36px;height:36px;padding:0 9px;font-size:14px}
  .pager .pg-jump{width:100%;justify-content:center;margin:6px 0 0}
}

/* ── ภาพการ์ตูน 3D แทนอิโมจิ ─────────────────────────────
   ใช้หน่วย em เพื่อให้รูปโตตามขนาดตัวอักษรของที่ที่มันอยู่
   จะได้ไม่ต้องไล่กำหนดขนาดทีละจุดใน 34 ไฟล์ */
.e3d{
  width:1.15em; height:1.15em;
  display:inline-block; vertical-align:-0.22em;
  object-fit:contain; user-select:none;
  /* กันรูปโดนยืดผิดสัดส่วนตอนอยู่ใน flex */
  flex:0 0 auto;
}
/* หน้าปกการ์ดเกม — อิโมจิเดิมตัวใหญ่มาก ให้รูปเต็มพื้นที่แทน */
.cover .e3d{ width:1em; height:1em; vertical-align:-0.12em;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.22)); }
/* ปุ่มและป้าย — ขยับให้อยู่กึ่งกลางบรรทัดพอดี */
.btn .e3d, .badge .e3d, .tabbar .e3d, .nav-links .e3d{ vertical-align:-0.2em }

/* ── หน้าปกการ์ดแบบฉากน่ารัก ────────────────────────────────
   เว้นพื้นที่ด้านบน ~52px ไว้ให้แถบ GO/PRO และ แข่งสดได้
   ของประกอบทั้งหมดจึงอยู่ครึ่งล่างของหน้าปกเท่านั้น */
.card .cover{position:relative;overflow:hidden;display:block}
.card .cover > *{position:absolute}
.sc-sky{inset:0}
.sc-cloud{background:rgba(255,255,255,.72);border-radius:999px}
.sc-c1{width:56px;height:22px;left:-8px;top:38%}
.sc-c2{width:40px;height:16px;right:-6px;top:52%}
.sc-hill {left:-8%;right:-8%;bottom:-19%;height:50%;border-radius:50% 50% 0 0}
.sc-hill2{left:-14%;right:-14%;bottom:-27%;height:50%;border-radius:50% 50% 0 0;opacity:.45}
.sc-glow{left:50%;top:56%;width:75%;height:75%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}

/* ตัวเอก เด้งดึ๋งเบาๆ พร้อมเงาที่ยืด-หดตาม */
.sc-hero{left:50%;bottom:19%;width:54%;max-width:88px;aspect-ratio:1;transform:translateX(-50%);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:scBob 2.6s ease-in-out infinite}
.sc-hero-txt{display:flex;align-items:center;justify-content:center;font-size:52px;line-height:1}
@keyframes scBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
.sc-floor{left:50%;bottom:15%;width:40%;max-width:66px;height:11px;transform:translateX(-50%);
  background:rgba(0,0,0,.18);border-radius:50%;filter:blur(4px);animation:scSq 2.6s ease-in-out infinite}
@keyframes scSq{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(.82);opacity:.32}}

/* ของประกอบ 2 ชิ้น แกว่งเบาๆ คนละจังหวะ */
.sc-prop{filter:drop-shadow(0 3px 5px rgba(0,0,0,.2));animation:scSway 3.4s ease-in-out infinite}
.sc-pL{width:23%;max-width:38px;left:7%;bottom:14%;rotate:-12deg}
.sc-pR{width:20%;max-width:34px;right:8%;bottom:20%;rotate:11deg;animation-delay:.8s}
@keyframes scSway{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* แสงวิ้งๆ ระยิบด้านหลัง — ดาว 4 แฉก สว่างแค่ช่วงสั้นๆ จะได้ไม่รก */
.sc-tw{background:#fff;opacity:0;z-index:0;pointer-events:none;
  clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95));animation:scTwk 3.6s ease-in-out infinite}
@keyframes scTwk{
  0%,72%,100%{opacity:0;transform:scale(.35) rotate(0deg)}
  82%{opacity:.95;transform:scale(1) rotate(45deg)}
  88%{opacity:.55;transform:scale(.8) rotate(60deg)}
}
.sc-t1{width:21px;height:21px;left:9%;top:40%}
.sc-t2{width:14px;height:14px;right:11%;top:35%;animation-delay:1.1s}
.sc-t3{width:18px;height:18px;left:50%;top:30%;animation-delay:2.2s}
.sc-t4{width:12px;height:12px;left:37%;top:54%;animation-delay:.6s}
.sc-t5{width:16px;height:16px;right:19%;top:59%;animation-delay:2.9s}

/* ครูอัปโหลดรูปปกเอง → ให้รูปเต็มพื้นที่เหมือนเดิม */
.card .cover .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* เครื่องที่ตั้งค่า "ลดการเคลื่อนไหว" ให้หยุดแอนิเมชันทั้งหมด */
@media (prefers-reduced-motion:reduce){
  .sc-hero,.sc-floor,.sc-prop,.sc-tw{animation:none}
  .sc-tw{opacity:.5}
}

/* ── ย่อฉากในหน้าปกสำหรับจอเล็ก ────────────────────────────
   ต้องอยู่ "ท้ายไฟล์" หลังกฎหลักของฉาก ไม่งั้นกฎหลักจะชนะและค่านี้ไม่ถูกใช้
   ที่ ≤720px การ์ดเรียง 2 คอลัมน์ กว้างราว 193px หน้าปกสูงราว 121px
   แถบมุมบนกินพื้นที่ถึง y≈29px จึงต้องกดตัวเอกลงมาให้พ้น (เผื่อจังหวะเด้งขึ้น 7px ด้วย) */
@media(max-width:720px){
  .card .cover .sc-hero{width:42%;max-width:56px;bottom:12%}
  .card .cover .sc-floor{width:30%;max-width:42px;bottom:9%;height:8px}
  .card .cover .sc-pL{width:19%;max-width:26px;bottom:11%}
  .card .cover .sc-pR{width:17%;max-width:23px;bottom:16%}
  .card .cover .sc-glow{width:64%;height:64%;top:60%}
  .card .cover .sc-t1{width:12px;height:12px} .card .cover .sc-t2{width:8px;height:8px}
  .card .cover .sc-t3{width:10px;height:10px} .card .cover .sc-t4{width:7px;height:7px}
  .card .cover .sc-t5{width:9px;height:9px}
}
@media(max-width:420px){        /* กลับเป็น 1 คอลัมน์ การ์ดกว้างขึ้น ขยายกลับได้ */
  .card .cover .sc-hero{width:48%;max-width:82px;bottom:17%}
  .card .cover .sc-floor{width:34%;max-width:58px;bottom:14%;height:10px}
  .card .cover .sc-pL{width:21%;max-width:34px;bottom:13%}
  .card .cover .sc-pR{width:19%;max-width:30px;bottom:19%}
}

/* แท็บเล็ต 3 คอลัมน์ (721–1000px) — การ์ดแคบกว่าจอคอมแต่แถบยังขนาดเดิม จึงชนรูป */
@media(min-width:721px) and (max-width:1000px){
  .gflag,.glive{font-size:11px;padding:6px 11px;top:8px}
  .gflag{left:8px} .glive{right:8px}
  .gflag .ic,.glive .ic{font-size:13px}
  .glive .dot{width:7px;height:7px}
  .card .cover .sc-hero{width:50%;max-width:76px;bottom:15%}
  .card .cover .sc-floor{width:36%;max-width:56px;bottom:12%}
}

/* ── วางตัวเอกโดยอิง "ขอบบน" แทนขอบล่าง ────────────────────────
   ปัญหาเดิม: วางจากขอบล่างเป็น % แต่หน้าปกสูงไม่เท่ากันในแต่ละความกว้างการ์ด
   ระยะห่างจากแถบมุมบนจึงเปลี่ยนไปเรื่อยๆ และทับกันที่บางความกว้าง (1100px, 721px)
   วิธีใหม่: กันพื้นที่ด้านบนไว้เป็น px ตายตัว (--sc-top) แล้วให้รูปสูงเท่าที่เหลือ
   → ไม่ว่าการ์ดกว้างเท่าไร รูปจะไม่มีวันขึ้นไปชนแถบ (เผื่อจังหวะเด้ง 7px ไว้แล้ว) */
.card .cover .sc-hero{
  --sc-top:54px;
  top:var(--sc-top); bottom:auto;
  height:calc(100% - var(--sc-top) - 15%);
  max-height:88px; width:auto; max-width:none; aspect-ratio:1;
}
.card .cover .sc-floor{bottom:11%}
@media(min-width:721px) and (max-width:1000px){
  .card .cover .sc-hero{--sc-top:46px;max-height:78px}
}
@media(max-width:720px){
  .card .cover .sc-hero{--sc-top:38px;max-height:58px}
  .card .cover .sc-floor{bottom:9%}
}
@media(max-width:420px){
  .card .cover .sc-hero{--sc-top:46px;max-height:84px}
  .card .cover .sc-floor{bottom:12%}
}

/* ── ช่วงที่การ์ด "แคบสุด" ของแต่ละจำนวนคอลัมน์ ─────────────────
   4 คอลัมน์เริ่มที่ 1001px และ 3 คอลัมน์เริ่มที่ 721px
   ตรงจุดเริ่มของแต่ละช่วง การ์ดจะแคบที่สุด แถบ 2 อันจึงชนกันเอง
   ต้องย่อแถบลงเฉพาะช่วงต้นของแต่ละแบนด์ */
@media(min-width:1001px) and (max-width:1200px){
  .gflag,.glive{font-size:11px;padding:6px 11px;top:8px;gap:5px}
  .gflag{left:8px} .glive{right:8px}
  .gflag .ic,.glive .ic{font-size:13px}
  .glive .dot{width:7px;height:7px}
  .card .cover .sc-hero{--sc-top:46px}
}
@media(min-width:721px) and (max-width:830px){
  .gflag,.glive{font-size:9.5px;padding:4px 8px;top:6px;gap:4px;letter-spacing:0}
  .gflag{left:6px} .glive{right:6px}
  .gflag .ic,.glive .ic{font-size:11px}
  .glive .dot{width:6px;height:6px}
  .card .cover .sc-hero{--sc-top:38px}
}
/* เผื่อระยะห่างเพิ่มอีกนิด ไม่ให้ชิดแถบเกินไป */
.card .cover .sc-hero{--sc-top:58px}
@media(min-width:1001px) and (max-width:1200px){ .card .cover .sc-hero{--sc-top:50px} }
@media(min-width:721px)  and (max-width:1000px){ .card .cover .sc-hero{--sc-top:50px} }
@media(min-width:721px)  and (max-width:830px){  .card .cover .sc-hero{--sc-top:42px} }
@media(max-width:720px){ .card .cover .sc-hero{--sc-top:42px} }
@media(max-width:420px){ .card .cover .sc-hero{--sc-top:50px} }

/* ══════════════════════════════════════════════════════════════════
   บทเรียนคอมพิวเตอร์ช่วยสอน — lessons.php (หน้ารวม) / lesson.php (เวทีบทเรียน)

   ทำเป็น "เวที 16:9" แบบสื่อ CAI ที่ครูคุ้นเคย: มีฉากวาดเต็มจอ ตัวการ์ตูนสองข้าง
   ชื่อเรื่องตัวใหญ่มีขอบขาว เมนูกลางจอ และปุ่มกลมเรียงด้านล่าง
   ฉากทั้งหมดวาดด้วย CSS + ภาพอิโมจิ 3 มิติที่มีอยู่แล้ว ไม่ต้องหาไฟล์ภาพเพิ่ม
   ══════════════════════════════════════════════════════════════════ */

/* ---------- หน้ารวมบทเรียน ---------- */
.lesson-hero{position:relative;display:flex;gap:18px;align-items:center;border-radius:28px;
  padding:22px 26px;margin-bottom:18px;overflow:hidden;color:#fff;
  background:linear-gradient(115deg,#7c3aed,#c026d3 45%,#f0abfc);box-shadow:0 14px 34px rgba(120,40,160,.28)}
.lesson-hero::after{content:'';position:absolute;inset:-40% -10% auto auto;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%);animation:lsDrift 14s ease-in-out infinite}
.lh-ic{font-size:56px;flex:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));animation:lsFloat 4.5s ease-in-out infinite}
.lh-body{flex:1;min-width:230px;position:relative;z-index:1}
.lh-body h2{margin:0 0 5px;font-size:26px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.lh-body p{margin:0 0 10px;color:rgba(255,255,255,.94);font-size:15px;line-height:1.6}
.lh-badge{display:inline-block;background:rgba(255,255,255,.95);color:#a21caf;border-radius:999px;
  padding:6px 16px;font-size:13.5px;font-weight:800}

.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;margin-bottom:22px}
.lesson-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.2,1.3,.4,1),box-shadow .22s}
.lesson-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 20px 38px rgba(120,60,120,.22)}
.lesson-card:hover .lc-emoji{transform:scale(1.14) rotate(-6deg)}
.lesson-grid.locked .lesson-card{opacity:.7;filter:saturate(.6)}
.lc-top{position:relative;height:108px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lc-top::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 60%)}
.lc-emoji{font-size:50px;position:relative;transition:transform .25s cubic-bezier(.2,1.5,.4,1);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.18))}
.lc-lock{position:absolute;right:10px;top:10px;font-size:19px;background:rgba(255,255,255,.92);
  border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.lc-body{padding:13px 15px 15px;flex:1;display:flex;flex-direction:column;gap:6px}
.lc-body h4{margin:0;font-size:17.5px;line-height:1.35}
.lc-sum{margin:0;font-size:13.5px;color:#7a6ca0;line-height:1.55;flex:1}
.lc-meta{font-size:12.5px;color:#9a8ac0;font-weight:700}
.lc-tags{display:flex;gap:5px;flex-wrap:wrap}
.lc-tag{font-size:11.5px;font-weight:800;background:#f5f0ff;color:#6d28d9;border-radius:999px;padding:3px 10px}
.lc-tag.go{background:#dcfce7;color:#15803d}

/* ══════════════ เวทีบทเรียน ══════════════ */
.ls-wrap{position:relative;max-width:1180px;margin:0 auto;aspect-ratio:16/9;min-height:520px;
  border-radius:26px;overflow:hidden;isolation:isolate;color:#20344a;
  box-shadow:0 20px 50px rgba(30,60,90,.28);border:5px solid #fff}
.ls-wrap *{box-sizing:border-box}

/* ---------- ฉาก: ท้องฟ้า ตะวัน เมฆ เนินเขา สนามหญ้า ---------- */
.ls-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--sky1,#5eb8f0) 0%,var(--sky2,#a8dcfa) 46%,var(--sky3,#dff1ff) 62%)}
.ls-wrap.sc-0{--sky1:#4facf7;--sky2:#a3d9fb;--sky3:#e3f3ff;--hill:#7fd18b;--hill2:#5cbf72}
.ls-wrap.sc-1{--sky1:#f9a03f;--sky2:#ffcf87;--sky3:#ffeccb;--hill:#8fd493;--hill2:#63c07a}
.ls-wrap.sc-2{--sky1:#3ec5c1;--sky2:#9fe7de;--sky3:#e0fbf6;--hill:#86d98f;--hill2:#57c273}
.ls-wrap.sc-3{--sky1:#8f7bf0;--sky2:#c3b6fb;--sky3:#ece7ff;--hill:#8ad79a;--hill2:#5cc07c}
.ls-wrap.sc-4{--sky1:#f2789b;--sky2:#ffb6cd;--sky3:#ffe6ee;--hill:#8bd694;--hill2:#5ec176}
.ls-scene{transition:background 1s ease}

.sc-sun{position:absolute;right:16%;top:9%;width:clamp(60px,9vw,120px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff6c2,#ffd54a 55%,#ffb300);
  box-shadow:0 0 42px rgba(255,196,60,.75);animation:scSun 9s ease-in-out infinite}
.sc-sun::after{content:'';position:absolute;inset:-32%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,214,80,.55) 0 6deg,transparent 6deg 30deg);
  animation:scSpin 26s linear infinite}
@keyframes scSun{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
/* ดวงอาทิตย์แบบไฟล์ภาพ — แยกเป็น 2 ชั้น เพราะทั้งหมุนและเต้นใช้ transform ตัวเดียวกัน
   ชั้นนอกหมุนช้าๆ · ชั้นในเต้นเบาๆ ทำพร้อมกันได้โดยไม่ตีกัน */
.sc-sun-wrap{position:absolute;right:7%;top:15%;width:clamp(84px,13vw,200px);aspect-ratio:1;
  animation:scSpin 72s linear infinite}
.sc-sun-img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 30px rgba(255,190,50,.55));animation:scSun 8s ease-in-out infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}

.sc-cloud{position:absolute;background:#fff;border-radius:999px;opacity:.94;
  box-shadow:0 8px 20px rgba(60,110,150,.14);animation:scFloat linear infinite}
.sc-cloud::before,.sc-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.sc-cloud::before{width:62%;height:150%;left:12%;top:-72%}
.sc-cloud::after{width:44%;height:118%;right:10%;top:-52%}
.sc-cloud.c1{width:130px;height:38px;left:-18%;top:36%;animation-duration:46s}
.sc-cloud.c2{width:96px;height:30px;left:-18%;top:47%;animation-duration:62s;animation-delay:-14s;opacity:.8}
.sc-cloud.c3{width:158px;height:44px;left:-22%;top:28%;animation-duration:78s;animation-delay:-38s;opacity:.72}
@keyframes scFloat{to{transform:translateX(160vw)}}

/* เนินเขาซ้อนกัน 2 ชั้น ให้รู้สึกมีระยะ */
.sc-hill{position:absolute;left:-12%;right:-12%;border-radius:50% 50% 0 0/100% 100% 0 0}
.sc-hill.h1{bottom:16%;height:26%;background:var(--hill2,#5cbf72);opacity:.5}
.sc-hill.h2{bottom:12%;height:22%;left:-30%;right:26%;background:var(--hill,#7fd18b);opacity:.75}
.sc-ground{position:absolute;left:0;right:0;bottom:0;height:17%;
  background:linear-gradient(180deg,var(--hill,#7fd18b),var(--hill2,#5cbf72))}
.sc-ground::before{content:'';position:absolute;left:0;right:0;top:-11px;height:22px;
  background:repeating-linear-gradient(90deg,var(--hill,#7fd18b) 0 13px,transparent 13px 26px);
  -webkit-mask:radial-gradient(circle at 50% 100%,#000 62%,transparent 63%) 0 0/26px 22px repeat-x;
          mask:radial-gradient(circle at 50% 100%,#000 62%,transparent 63%) 0 0/26px 22px repeat-x}
.sc-prop{position:absolute;bottom:9%;font-size:clamp(26px,4vw,54px);filter:drop-shadow(0 5px 8px rgba(0,0,0,.18))}
.sc-prop.p1{left:3%}
.sc-prop.p2{left:12%;bottom:13%;font-size:clamp(20px,2.8vw,38px)}
.sc-prop.p3{right:4%}
.sc-prop.p4{right:14%;bottom:13.5%;font-size:clamp(18px,2.5vw,34px)}
.sc-fly{position:absolute;font-size:clamp(18px,2.4vw,32px);animation:scFly 15s ease-in-out infinite}
.sc-fly.f1{left:22%;top:22%}
.sc-fly.f2{right:26%;top:34%;animation-duration:19s;animation-delay:-6s}
@keyframes scFly{0%,100%{transform:translate(0,0) rotate(-4deg)}
  33%{transform:translate(30px,-22px) rotate(6deg)}66%{transform:translate(-22px,14px) rotate(-8deg)}}

/* ---------- ปุ่มมุมจอ (เสียง / ออก) ---------- */
.ls-hud{position:absolute;inset:0;z-index:6;pointer-events:none}
.hud-btn{position:absolute;pointer-events:auto;width:clamp(38px,4.6vw,56px);aspect-ratio:1;border-radius:50%;
  border:3px solid #fff;cursor:pointer;font-size:clamp(16px,2.1vw,25px);display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.16),0 8px 16px rgba(0,0,0,.2);
  transition:box-shadow .16s,filter .16s;font-family:inherit;line-height:1}
/* ไอคอนข้างในต้องเป็น block ไม่งั้นระยะ baseline ของตัวอักษรจะดันให้เยื้องจากกึ่งกลางวงกลม */
.hud-btn img,.hud-btn .e3d{display:block;margin:0;transition:transform .16s}
/* ไม่มีพื้นที่กดล่องหนรอบปุ่มอีกแล้ว — เห็นวงกลมแค่ไหน กดได้แค่นั้น
   เคยลองเผื่อขอบไว้ให้กดง่าย แต่ผลคือเอาเมาส์ไปวางข้างๆ ปุ่ม (ยังไม่ทับวงกลม) ก็กดติด
   ซึ่งผิดความรู้สึกผู้ใช้ · ความ "กดง่าย" ย้ายไปได้จากการทำคำบรรยายใต้ปุ่มให้กดได้จริงแทน */
/* สำคัญ: ห้ามใส่ transform ที่ตัวปุ่มเอง
   เดิมใช้ :hover{scale(1.09)} + :active{scale(.95) translateY(2px)} ผลคือ
   พอเอาเมาส์เข้ามาปุ่มจะพองออก แล้วพอ "กด" ปุ่มหดลง 8px และเลื่อนลงอีก 2px ทันที
   ถ้าจุดที่กดอยู่ค่อนไปทางขอบ (โดยเฉพาะขอบล่าง/ซ้าย) เคอร์เซอร์จะหลุดออกนอกปุ่มระหว่าง
   mousedown→mouseup เบราว์เซอร์เลยไม่ยิง event click — ต้องเล็งเยื้องขึ้นบน/ขวาถึงจะติด
   แก้โดยให้ "กล่องที่รับการคลิก" นิ่งสนิท แล้วย้ายเอฟเฟกต์ไปไว้ที่ไอคอนกับเงาแทน */
.hud-btn:hover{filter:brightness(1.07)}
.hud-btn:hover img,.hud-btn:hover .e3d{transform:scale(1.12)}
.hud-btn:active{box-shadow:0 1px 0 rgba(0,0,0,.16)}
.hud-btn:active img,.hud-btn:active .e3d{transform:scale(.88)}
.hud-btn.snd{left:2.2%;top:4%;background:linear-gradient(180deg,#ffd75e,#f5a524)}
.hud-btn.esc{right:2.2%;top:4%;background:linear-gradient(180deg,#ff8f8f,#e63946)}
/* คำบรรยายใต้ปุ่ม = ปุ่มจริง กดได้ · width:max-content ทำให้กล่องที่กดได้พอดีกับตัวอักษรเป๊ะ
   (ถ้าใช้ max-width ตัวอักษรจะล้นออกนอกกล่อง เกิดส่วนที่ "เห็นแต่กดไม่ได้") */
.hud-lab{position:absolute;top:calc(4% + clamp(38px,4.6vw,56px) + 3px);width:max-content;
  pointer-events:auto;background:none;border:0;padding:2px 4px;margin:0;cursor:pointer;font-family:inherit;
  text-align:center;line-height:1.2;font-size:clamp(9px,.9vw,11.5px);
  font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.45);white-space:nowrap}
.hud-lab:hover{filter:brightness(1.15)}
/* จัดคำบรรยายให้อยู่กึ่งกลางวงกลมเป๊ะๆ (เดิมชิดขอบ 1% ทำให้กลุ่มปุ่มดูเยื้อง) */
.hud-lab.l{left:calc(2.2% + clamp(38px,4.6vw,56px) / 2);transform:translateX(-50%)}
.hud-lab.r{right:calc(2.2% + clamp(38px,4.6vw,56px) / 2);transform:translateX(50%)}

/* ---------- หน้าปก / เมนูหลัก ---------- */
.ls-cover{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  padding:clamp(10px,2vh,22px) 3% clamp(6px,1.4vh,14px);text-align:center}
.ls-wrap.playing .ls-cover{display:none}
.cv-head{width:100%;padding:0 clamp(64px,9vw,130px)}
.cv-kicker{font-size:clamp(12px,1.55vw,20px);font-weight:800;color:#fff;letter-spacing:.5px;
  text-shadow:0 2px 6px rgba(20,60,100,.55);margin-top:clamp(2px,1vh,10px)}
/* ชื่อเรื่องแบบสื่อ CAI: ตัวอักษรไล่สีทับบนขอบขาวหนา
   ต้องวาดเป็น 2 ชั้น เพราะถ้าใช้ background-clip:text คู่กับลูกที่ z-index ติดลบ
   ตัวขอบจะไปทับพื้นหลังไล่สี (พื้นหลังถูกวาดก่อนลูกที่ z-index ติดลบเสมอ)
   ชั้นล่าง = ตัวอักษรขอบขาว · ชั้นบน (::after) = ตัวอักษรไล่สี */
.cv-title{position:relative;margin:2px auto 0;max-width:100%;font-family:'Itim',cursive;line-height:1.16;
  font-size:clamp(24px,4.6vw,56px);color:#fff;
  -webkit-text-stroke:clamp(4px,.7vw,10px) #fff;
  filter:drop-shadow(0 5px 0 rgba(150,60,0,.32)) drop-shadow(0 9px 14px rgba(0,0,0,.3))}
.cv-title::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;
  -webkit-text-stroke:0;color:transparent;
  background:linear-gradient(180deg,#fff8b0 6%,#ffc93c 46%,#f97316 96%);
  -webkit-background-clip:text;background-clip:text}
.cv-sub{font-size:clamp(13px,1.75vw,23px);font-weight:800;color:#fff;
  text-shadow:0 2px 6px rgba(20,60,100,.6);margin-top:2px}

.cv-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.5vw,44px);width:100%;min-height:0}
.cv-kid{font-size:clamp(48px,9vw,124px);flex:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.24));
  animation:lsFloat 4.4s ease-in-out infinite}
.cv-kid.r{animation-delay:-2.2s}
.cv-menu{display:flex;flex-direction:column;gap:clamp(6px,1.5vh,14px);width:min(440px,44%);flex:none;
  align-self:center}
.cv-btn{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;font-family:inherit;
  border:4px solid #fff;border-radius:999px;padding:clamp(7px,1.5vh,14px) clamp(12px,1.6vw,22px);
  font-size:clamp(14px,1.9vw,25px);font-weight:800;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#ffa93d,#f47216);
  box-shadow:0 6px 0 rgba(160,70,0,.45),0 12px 22px rgba(0,0,0,.22);
  transition:transform .16s,box-shadow .16s;text-shadow:0 2px 4px rgba(120,50,0,.5)}
.cv-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(160,70,0,.45),0 16px 26px rgba(0,0,0,.25)}
.cv-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(160,70,0,.45)}
/* สีปุ่มแยกกันชัดเจน จำง่าย และดูสดใสแบบสื่อเด็ก
   เงาทึบใต้ปุ่มใช้สีเดียวกันแต่เข้มกว่า ปุ่มจะได้ดูนูนขึ้นมาจริงๆ */
.cv-btn.c1{background:linear-gradient(180deg,#6ff29a,#12a150);box-shadow:0 6px 0 #0b7a3b,0 12px 22px rgba(0,0,0,.22)}
.cv-btn.c1:hover{box-shadow:0 9px 0 #0b7a3b,0 16px 26px rgba(0,0,0,.25)}
.cv-btn.c1:active{box-shadow:0 2px 0 #0b7a3b}
.cv-btn.c2{background:linear-gradient(180deg,#ff92c9,#e0218a);box-shadow:0 6px 0 #a3125f,0 12px 22px rgba(0,0,0,.22)}
.cv-btn.c2:hover{box-shadow:0 9px 0 #a3125f,0 16px 26px rgba(0,0,0,.25)}
.cv-btn.c2:active{box-shadow:0 2px 0 #a3125f}
.cv-btn.c3{background:linear-gradient(180deg,#6fc3ff,#1554d1);box-shadow:0 6px 0 #0d3a94,0 12px 22px rgba(0,0,0,.22)}
.cv-btn.c3:hover{box-shadow:0 9px 0 #0d3a94,0 16px 26px rgba(0,0,0,.25)}
.cv-btn.c3:active{box-shadow:0 2px 0 #0d3a94}
.cv-ic{flex:none;width:clamp(26px,3.2vw,44px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-size:clamp(14px,1.9vw,25px)}
.cv-btn span:last-child{flex:1;text-align:center}

/* แถวปุ่มกลมด้านล่าง */
.cv-dock{display:flex;justify-content:center;gap:clamp(6px,2vw,30px);flex-wrap:wrap;
  padding-bottom:clamp(2px,1vh,8px)}
.dk{background:none;border:none;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;
  align-items:center;gap:3px;width:clamp(56px,8.4vw,104px);transition:transform .16s}
.dk:hover{transform:translateY(-4px)}
.dk-ic{width:clamp(40px,5.6vw,72px);aspect-ratio:1;border-radius:50%;border:4px solid #fff;
  background:linear-gradient(180deg,#ffd75e,#f5a524);display:flex;align-items:center;justify-content:center;
  font-size:clamp(17px,2.5vw,32px);box-shadow:0 5px 0 rgba(150,90,0,.35),0 10px 18px rgba(0,0,0,.22)}
.dk:active .dk-ic{transform:translateY(3px);box-shadow:0 2px 0 rgba(150,90,0,.35)}
.dk-lab{font-size:clamp(9px,1.05vw,14px);font-weight:800;color:#fff;line-height:1.25;
  text-shadow:0 2px 4px rgba(20,60,100,.7)}

/* ---------- หน้าเนื้อหา ---------- */
.ls-stage{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;
  padding:clamp(54px,8vh,92px) clamp(10px,2%,22px) clamp(8px,1.4vh,14px)}
.ls-wrap.playing .ls-stage{display:flex}
.ls-top{display:flex;align-items:center;gap:10px;flex:none;
  padding:0 clamp(46px,6.2vw,80px)}        /* เว้นที่ให้ปุ่มมุมจอ */
.ls-chip{background:rgba(255,255,255,.9);border-radius:999px;padding:5px 14px;font-size:clamp(11px,1.3vw,16px);
  font-weight:800;color:#3f5a75;box-shadow:0 3px 10px rgba(30,60,90,.16);white-space:nowrap}
/* ปุ่มเล็กบนแถบบนเวที (เต็มจอ) — เล็กพอไม่แย่งสายตาจากเนื้อหา แต่นิ้วยังกดโดน */
.ls-mini{position:relative;z-index:7;margin-right:clamp(8px,1.2vw,18px);
  flex:none;width:clamp(30px,3.6vh,42px);aspect-ratio:1;border-radius:50%;border:3px solid #fff;
  background:linear-gradient(180deg,#ffd75e,#f5a524);color:#7a4a00;cursor:pointer;font-family:inherit;
  font-size:clamp(13px,1.7vh,19px);line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(150,90,0,.4),0 6px 12px rgba(0,0,0,.18);transition:box-shadow .15s,filter .15s}
/* ไม่เผื่อพื้นที่กดรอบนอกเช่นกัน — เห็นเท่าไหร่กดได้เท่านั้น */
.ls-mini img,.ls-mini .e3d{display:block;margin:0;transition:transform .15s}
/* ตัวปุ่มไม่ขยับ ด้วยเหตุผลเดียวกับ .hud-btn ด้านบน (ปุ่มยิ่งเล็กยิ่งพลาดง่าย) */
.ls-mini:hover{filter:brightness(1.07)}
.ls-mini:hover img,.ls-mini:hover .e3d{transform:scale(1.12)}
.ls-mini:active{box-shadow:0 1px 0 rgba(150,90,0,.4)}
.ls-mini:active img,.ls-mini:active .e3d{transform:scale(.88)}
.ls-bar{flex:1;height:clamp(10px,1.4vh,16px);background:rgba(255,255,255,.75);border-radius:999px;overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(30,60,90,.2)}
.ls-bar>span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#facc15,#f97316);background-size:200% 100%;
  transition:width .5s cubic-bezier(.3,1.2,.4,1);animation:lsShine 3s linear infinite}
@keyframes lsShine{to{background-position:200% 0}}

.ls-board{flex:1;min-height:0;position:relative;margin-top:clamp(6px,1.2vh,12px)}
.ls-page{position:absolute;inset:0;display:none;overflow-y:auto;border-radius:24px;padding:clamp(14px,2.6vh,30px) clamp(14px,2.4vw,34px);
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.96));
  border:5px solid #fff;box-shadow:0 14px 30px rgba(30,60,90,.24);text-align:center}
.ls-page.on{display:flex;flex-direction:column;justify-content:center;
  animation:lsEnterR .5s cubic-bezier(.2,1.1,.35,1) both}
.ls-page.on.back{animation-name:lsEnterL}
@keyframes lsEnterR{from{opacity:0;transform:translateX(52px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lsEnterL{from{opacity:0;transform:translateX(-52px) scale(.96)}to{opacity:1;transform:none}}
.ls-page::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(90deg,#22c55e,#3b82f6,#a855f7,#f97316);background-size:300% 100%;
  animation:lsShine 6s linear infinite}

.ls-page.on .ls-art,.ls-page.on .ls-h,.ls-page.on .ls-b,
.ls-page.on .ls-opts,.ls-page.on .ls-games{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) both}
.ls-page.on .ls-h{animation-delay:.12s}
.ls-page.on .ls-b{animation-delay:.22s}
.ls-page.on .ls-opts,.ls-page.on .ls-games{animation-delay:.32s}
@keyframes lsPop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes lsDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-24px) scale(1.08)}66%{transform:translate(-22px,18px) scale(.95)}}

.ls-art{font-size:clamp(44px,8.5vh,110px);line-height:1.1;margin-bottom:4px}
.ls-art .e3d{width:1em;height:1em}
.ls-page.on .ls-art{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) both,lsFloat 4.2s ease-in-out 1s infinite}
.ls-h{margin:0 0 8px;font-family:'Itim',cursive;font-size:clamp(20px,3.6vh,40px);color:#1d4ed8;line-height:1.28}
.ls-b{font-size:clamp(15px,2.5vh,27px);line-height:1.8;color:#26364b}
.ls-page.ls-tip{background:linear-gradient(180deg,rgba(255,251,232,.98),rgba(255,255,255,.92))}
.ls-page.ls-tip .ls-h{color:#b45309}

.ls-opts{display:flex;flex-direction:column;gap:clamp(5px,1vh,11px);margin:clamp(8px,1.6vh,18px) auto 0;
  width:100%;max-width:640px}
.ls-opt{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:4px solid #dbeafe;
  border-radius:18px;padding:clamp(8px,1.3vh,15px) clamp(12px,1.4vw,20px);font-size:clamp(15px,2.2vh,24px);
  font-family:inherit;cursor:pointer;color:#26364b;
  transition:transform .16s cubic-bezier(.2,1.4,.4,1),border-color .16s,background .16s}
.ls-opt:hover{border-color:#3b82f6;transform:translateX(6px)}
.ls-let{flex:none;width:clamp(28px,3.6vh,42px);aspect-ratio:1;border-radius:50%;background:#dbeafe;color:#1d4ed8;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2vh,21px);transition:transform .2s}
.ls-opt.ok{border-color:#16a34a;background:#f0fdf4;animation:lsRight .55s cubic-bezier(.2,1.5,.4,1)}
.ls-opt.ok .ls-let{background:#16a34a;color:#fff;transform:scale(1.15)}
.ls-opt.no{border-color:#ef4444;background:#fef2f2;animation:lsWrong .45s}
.ls-opt.no .ls-let{background:#ef4444;color:#fff}
@keyframes lsRight{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes lsWrong{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.ls-why{margin:clamp(8px,1.4vh,16px) auto 0;width:100%;max-width:660px;background:#ecfdf5;border:3px solid #6ee7b7;border-radius:18px;
  padding:clamp(8px,1.2vh,14px) 16px;font-size:clamp(14px,1.9vh,20px);line-height:1.7;color:#065f46;text-align:left;
  animation:lsPop .45s cubic-bezier(.2,1.4,.35,1) both}
.ls-teachnote{margin:clamp(8px,1.4vh,16px) auto 0;width:100%;max-width:680px;background:#fffbeb;border:3px dashed #fbbf24;border-radius:18px;
  padding:clamp(8px,1.2vh,14px) 16px;font-size:clamp(13px,1.7vh,18px);line-height:1.7;color:#92400e;text-align:left;
  animation:lsPop .4s cubic-bezier(.2,1.4,.35,1) both}

/* ปุ่มควบคุมล่างเวที */
.ls-nav{flex:none;display:flex;gap:clamp(6px,1vw,14px);justify-content:center;align-items:center;
  margin-top:clamp(6px,1.2vh,12px);flex-wrap:wrap}
.nv{border:4px solid #fff;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:800;color:#fff;
  padding:clamp(7px,1.3vh,13px) clamp(14px,1.8vw,28px);font-size:clamp(13px,1.9vh,21px);
  background:linear-gradient(180deg,#7dd3fc,#0284c7);box-shadow:0 5px 0 rgba(2,90,140,.5),0 10px 18px rgba(0,0,0,.2);
  transition:transform .15s,box-shadow .15s;text-shadow:0 2px 4px rgba(0,60,100,.45)}
.nv:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(2,90,140,.5),0 14px 22px rgba(0,0,0,.24)}
.nv:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(2,90,140,.5)}
.nv:disabled{opacity:.35;cursor:default;transform:none;box-shadow:0 5px 0 rgba(2,90,140,.5)}
.nv.go{background:linear-gradient(180deg,#86efac,#16a34a);box-shadow:0 5px 0 rgba(10,110,50,.5),0 10px 18px rgba(0,0,0,.2)}
.nv.go:hover{box-shadow:0 8px 0 rgba(10,110,50,.5),0 14px 22px rgba(0,0,0,.24)}
.nv.gh{background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 5px 0 rgba(150,90,0,.5),0 10px 18px rgba(0,0,0,.2)}

/* หน้าจบบท */
.ls-games{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(8px,1.4vh,16px);text-align:left}
.ls-game{flex:0 1 clamp(190px,24vw,268px)}
.ls-game{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid #dbeafe;border-radius:16px;
  padding:8px 11px;text-decoration:none;color:inherit;transition:transform .18s,border-color .18s}
.ls-game:hover{border-color:#3b82f6;transform:translateY(-3px) scale(1.02)}
.lg-ic{flex:none;width:clamp(32px,4vh,46px);aspect-ratio:1;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:clamp(16px,2.2vh,24px)}
.lg-t{flex:1;min-width:0;font-size:clamp(12px,1.6vh,16px);font-weight:700;line-height:1.35}
.lg-go{flex:none;font-size:clamp(11px,1.4vh,14px);font-weight:800;color:#2563eb}

.ls-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:8}
.ls-confetti i{position:absolute;top:-24px;width:12px;height:17px;border-radius:3px;opacity:.95;
  animation:lsFall linear forwards}
@keyframes lsFall{to{transform:translateY(115vh) rotate(760deg);opacity:.1}}

/* กล่องข้อมูล (จุดประสงค์ / วิธีใช้) */
.ls-sheet{position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;
  background:rgba(15,40,70,.55);backdrop-filter:blur(3px);padding:4%}
.ls-sheet.on{display:flex;animation:lsPop .3s ease both}
.sh-box{background:#fff;border-radius:24px;border:5px solid #fff;max-width:640px;width:100%;
  max-height:88%;overflow-y:auto;padding:22px 24px;box-shadow:0 24px 60px rgba(0,0,0,.4);text-align:left}
.sh-box h4{margin:0 0 10px;font-family:'Itim',cursive;font-size:clamp(19px,2.6vh,28px);color:#1d4ed8;text-align:center}
.sh-box ul{margin:0 0 8px;padding-left:22px;line-height:1.85;font-size:clamp(14px,1.9vh,18px);color:#26364b}
.sh-box p{margin:0 0 8px;line-height:1.8;font-size:clamp(14px,1.9vh,18px);color:#26364b}
.sh-close{display:block;margin:14px auto 0}

/* ---------- เต็มจอ ---------- */
/* ตอนเต็มจออยู่แล้ว ไม่ต้องมีปุ่มเต็มจออีก — ปุ่มกากบาทสีแดงย่อหน้าต่างกลับได้อยู่แล้ว */
.ls-wrap:fullscreen .ls-mini{display:none}
.ls-wrap:-webkit-full-screen .ls-mini{display:none}
.ls-wrap:fullscreen{max-width:none;width:100vw;height:100vh;aspect-ratio:auto;min-height:0;
  border-radius:0;border:none;box-shadow:none}
.ls-wrap:-webkit-full-screen{max-width:none;width:100vw;height:100vh;border-radius:0;border:none}

@media (max-width:760px){
  .ls-wrap{aspect-ratio:auto;height:auto;min-height:0}
  .ls-cover{position:relative;inset:auto;min-height:74vh}
  .ls-stage{position:relative;inset:auto;min-height:74vh}
  /* จอแคบ ปุ่มมุมจอกินพื้นที่ด้านบนเกือบหมด — ดันหัวเรื่องลงมาให้พ้น ไม่งั้นตัวหนังสือทับปุ่ม */
  .cv-head{padding:clamp(46px,13vw,72px) 6px 0}
  /* จอแคบ: ให้นักเรียนสองคนยืนคู่กันกึ่งกลางแถวบน แล้วเมนูลงมาเต็มความกว้างข้างล่าง
     (ของเดิมเรียงเป็นคอลัมน์ เด็กชายเลยไปโผล่ใต้เมนูจนต้องซ่อนทิ้ง) */
  /* align-content ต้องเป็น flex-start ไม่งั้นสองบรรทัด (นักเรียน / เมนู) จะถูกยืดแยกออกจากกัน
     เกิดช่องว่างใหญ่ตรงกลางจอ ทั้งที่ด้านบนยังเหลือที่อยู่ */
  .cv-mid{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-end;
    align-content:flex-start;gap:clamp(10px,5vw,30px);row-gap:clamp(4px,1vh,10px)}
  .cv-kid.l{order:1}
  .cv-kid.r{order:2;display:block}
  .cv-menu{order:3;flex-basis:100%;width:min(420px,94%);margin:0 auto;align-self:auto}
  .ls-top{padding:0 clamp(40px,13vw,56px)}
  .ls-board{min-height:52vh}
  .ls-page{position:relative;inset:auto;min-height:52vh}
}
@media (prefers-reduced-motion:reduce){
  .sc-sun,.sc-sun::after,.sc-cloud,.sc-fly,.cv-kid,.lh-ic,.ls-bar>span,
  .ls-page.on,.ls-page.on *{animation:none!important}
  .ls-confetti{display:none}
}
@media print{
  .site-header,.site-footer,.ls-scene,.ls-hud,.ls-cover,.ls-nav,.ls-top,.ls-games,.ls-confetti,.ls-sheet{display:none!important}
  .ls-wrap{position:static;height:auto;aspect-ratio:auto;border:none;box-shadow:none;max-width:none;overflow:visible}
  .ls-stage{display:block!important;position:static;padding:0}
  .ls-board{position:static}
  .ls-page{position:static;display:block!important;border:none;border-bottom:2px dashed #ccc;border-radius:0;
    box-shadow:none;background:#fff;page-break-inside:avoid;padding:12px 0;animation:none!important;overflow:visible}
  .ls-page::before{display:none}
  .ls-teachnote{display:block!important}
  body{background:#fff}
}

/* ---------- ตัวการ์ตูนของบทเรียน (ไฟล์ภาพจริง · ถ้าไม่มีไฟล์จะกลายเป็นอิโมจิแทน) ---------- */
.cv-mid{align-items:flex-end}                      /* ให้ตัวการ์ตูน "ยืนบนพื้น" ไม่ลอยกลางอากาศ */
.cv-kid{position:relative;flex:none;width:clamp(84px,15.5vw,250px);font-size:clamp(48px,9vw,124px);
  line-height:1;animation:lsFloat 4.4s ease-in-out infinite}
.cv-kid.r{animation-delay:-2.2s}
.cv-kid img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 12px 14px rgba(20,60,40,.28))}
/* เงาใต้เท้า ช่วยให้ดูยืนอยู่บนสนามหญ้าจริงๆ */
.cv-kid::after{content:'';position:absolute;left:12%;right:12%;bottom:-6px;height:12px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(30,80,50,.30),transparent 70%);z-index:-1}

/* หน้าจบบท — นักเรียนสองคนขนาบข้อความ */
.end-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,30px)}
.end-mid{flex:1;min-width:0}
.end-kid{flex:none;width:clamp(56px,10vw,150px);font-size:clamp(40px,7vw,96px);line-height:1;
  animation:lsFloat 4s ease-in-out infinite}
.end-kid.r{animation-delay:-2s}
.end-kid img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(20,60,40,.25))}

/* กล่องข้อมูล — ครูยืนข้างกล่อง */
/* กล่องข้อมูลอยู่กลาง · ครูหญิงยืนซ้าย ครูชายยืนขวา ขนาบกล่องไว้ */
.sh-wrap{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1vw,16px);
  max-width:1240px;width:100%}
.sh-teacher{flex:none;width:clamp(0px,17vw,235px)}
.sh-teacher img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 16px rgba(0,0,0,.4))}
.sh-wrap .sh-box{flex:1 1 auto;min-width:0;max-width:680px}
@media (max-width:980px){ .sh-teacher{display:none} }
@media (max-width:760px){
  .cv-kid{width:clamp(72px,26vw,150px);font-size:clamp(44px,15vw,80px)}
  /* จอแคบ ดวงอาทิตย์ต้องเล็กลงและขยับขึ้น ไม่งั้นไปทับชื่อชั้น/วิชา กับตัวนักเรียน */
  .sc-sun-wrap{top:9%;right:2%;width:clamp(58px,17vw,92px)}
  .end-kid{width:clamp(44px,14vw,80px)}
}

/* ============ ชุดคำถามห้องแข่งสด (quiz-sets / quiz-set-edit) ============ */
.qs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.qs-card{background:#fff;border-radius:20px;padding:15px 17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}
.qs-top{display:flex;gap:12px;align-items:flex-start}
.qs-emo{font-size:34px;line-height:1;flex:none}
.qs-card h4{margin:0;font-size:17px;color:#4c1d95;overflow-wrap:anywhere}
.qs-meta{color:#8d7ab0;font-size:12.5px;margin-top:3px;line-height:1.6}
.qs-tag{align-self:flex-start;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:800}
.qs-tag.ok{background:#dcfce7;color:#15803d}
.qs-tag.no{background:#fef3c7;color:#a16207}
.qs-act{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

.qse-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.qse-head h2{font-size:22px;color:#4c1d95;overflow-wrap:anywhere}
.qse-meta summary{cursor:pointer;font-weight:800;color:#5b21b6}
.qse-metaform{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.qse-metaform label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:#6d5a95}
.qse-metaform input,.qse-metaform select{padding:9px 12px;border-radius:12px;border:2px solid #eadcff;font-size:15px;font-family:inherit}

.qse-item{background:#fff;border-radius:20px;padding:15px 17px;box-shadow:var(--shadow);margin-bottom:14px;border-left:6px solid #a78bfa}
.qse-item.bad{border-left-color:#f59e0b;background:#fffdf5}
.qse-item.new{border-left-color:#22c55e;background:#f7fff9}
.qse-num{font-weight:900;color:#5b21b6;margin-bottom:10px;font-size:16px}
.qse-warn{background:#fef3c7;color:#a16207;border-radius:999px;padding:2px 10px;font-size:11.5px;margin-left:6px}
.qse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.qse-col{display:flex;flex-direction:column;gap:7px;min-width:0}
.qse-lb{font-size:13.5px;font-weight:800;color:#5b21b6}
.qse-hint{font-weight:500;color:#9a8ac0;font-size:12px}
.qse-col textarea,.qse-col input[type=file]{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:13px;
  border:2px solid #eadcff;font-size:14.5px;font-family:inherit;background:#fff;resize:vertical}
.qse-thumb{position:relative;display:inline-block}
.qse-thumb img{max-width:100%;max-height:130px;border-radius:12px;display:block;border:2px solid #eadcff}
.qse-del{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#b91c1c;font-weight:700;margin-top:4px;cursor:pointer}
.qse-opt{display:flex;align-items:center;gap:8px}
.qse-opt input[type=radio]{position:absolute;opacity:0;pointer-events:none}
/* ช่องติ๊ก "ข้อนี้ถูก" — วงกลมโล่งๆ พอเลือกแล้วเป็นเครื่องหมายถูกสีเขียว เห็นชัดกว่าเรดิโอมาตรฐาน */
.qse-tick{flex:none;width:28px;height:28px;border-radius:50%;border:2.5px solid #d6c3ff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:transparent;transition:.15s}
.qse-tick::after{content:'✓';font-weight:900}
.qse-opt input[type=radio]:checked + .qse-tick{background:#22c55e;border-color:#16a34a;color:#fff}
.qse-opt input[type=radio]:focus-visible + .qse-tick{outline:3px solid #a78bfa;outline-offset:2px}
.qse-opt input[name="opt[]"]{flex:1;min-width:0;padding:9px 12px;border-radius:12px;border:2px solid #eadcff;font-size:14.5px;font-family:inherit}
.qse-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;
  border-top:2px dashed #eadcff;padding-top:12px}
.qse-row .spacer{flex:1}
/* ปุ่มบันทึกของแต่ละข้อ — ต้องเด่นและอยู่ที่เดียวกันทุกข้อ ครูจะได้ไม่ต้องมองหา
   ปุ่มอื่นในแถวเดียวกัน (เลื่อนขึ้น/ลง/ลบ) จงใจให้เล็กและเบากว่า จะได้ไม่แย่งสายตา */
.qse-save{font-size:16px;padding:12px 26px;min-width:190px;justify-content:center}
.qse-row.save{justify-content:stretch}
.qse-row.save .qse-save{flex:1}
@media(max-width:640px){ .qse-save{width:100%;min-width:0} }

/* ป๊อปอัปดูรูปเต็มจอ (ใช้ทั้งจอครูและจอนักเรียนในห้องแข่งสด) */
.img-zoom{position:fixed;inset:0;z-index:10000;background:rgba(20,8,40,.92);display:flex;
  align-items:center;justify-content:center;padding:18px;cursor:zoom-out;animation:izIn .18s ease-out}
.img-zoom img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.img-zoom .iz-x{position:absolute;top:14px;right:16px;width:46px;height:46px;border-radius:50%;
  border:3px solid #fff;background:rgba(0,0,0,.35);color:#fff;font-size:22px;font-weight:900;cursor:pointer}
@keyframes izIn{from{opacity:0}to{opacity:1}}
/* คลังชุดสาธารณะ — การ์ดของครูท่านอื่น แยกสีให้รู้ว่าไม่ใช่ของเรา */
.qs-card.pub{border-left:6px solid #22c55e}
.qs-tags{display:flex;gap:6px;flex-wrap:wrap}
.qs-tag.pub{background:#dcfce7;color:#15803d}

/* ทางเข้าชุดคำถามห้องแข่งสด ใต้แถบ "เข้าร่วมห้องแข่งสด" ที่หน้าแรก (เห็นเฉพาะครู PRO) */
.teach-row{display:flex;gap:10px;flex-wrap:wrap;margin:-4px 0 16px}
.teach-link{flex:1;min-width:230px;background:#fff;border:2px solid #eadcff;border-radius:16px;
  padding:11px 16px;font-weight:800;font-size:14px;color:#5b21b6;text-decoration:none;
  box-shadow:0 3px 10px rgba(76,29,149,.08);transition:.14s}
.teach-link:hover{border-color:#c4b5fd;transform:translateY(-2px)}
.teach-link.pub{flex:2;background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.teach-link.pub:hover{border-color:#86efac}

/* การ์ดชุดคำถามห้องแข่งสด — ใช้โครงและปกฉาก 3D เดียวกับการ์ดเกมทุกอย่าง
   ต่างกันแค่ป้ายมุมบนซ้าย ที่บอกว่าเป็นชุดของเราเองหรือของครูท่านอื่น */
.gflag.own{color:#5b21b6;border-color:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139,92,246,.20),0 0 14px rgba(139,92,246,.60),0 5px 14px rgba(0,0,0,.22)}
.gflag.shared{color:#b45309;border-color:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.20),0 0 14px rgba(245,158,11,.60),0 5px 14px rgba(0,0,0,.22)}
.gflag.own,.gflag.shared{max-width:60%;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.gflag.own .ic,.gflag.shared .ic{margin-right:5px;display:inline-block;vertical-align:-1px}


/* ══════════════════════════════════════════════════════════════
   หน้าบทเรียนแบบใหม่ — warm / vocab / example / compare / practice / act / summary
   และแบบทดสอบก่อนเรียน–หลังเรียน
   ทุกอย่างใช้หน่วยยืดหยุ่น (clamp) เหมือนหน้าเดิม จะได้ฉายเต็มจอหน้าห้องได้
   ══════════════════════════════════════════════════════════════ */

/* ป้ายบอกชนิดหน้า — มุมบนซ้ายของแผ่นสไลด์ */
.ls-tag{position:absolute;top:14px;left:16px;border-radius:999px;padding:5px 15px;
  font-size:clamp(12px,1.7vh,17px);font-weight:800;letter-spacing:.3px;color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.16)}
.ls-tag.warm{background:linear-gradient(90deg,#fbbf24,#f97316)}
.ls-tag.ex{background:linear-gradient(90deg,#38bdf8,#2563eb)}
.ls-tag.pr{background:linear-gradient(90deg,#a78bfa,#7c3aed)}
.ls-tag.act{background:linear-gradient(90deg,#34d399,#059669)}

.ls-page.ls-warm{background:linear-gradient(180deg,rgba(255,247,237,.98),rgba(255,255,255,.94))}
.ls-page.ls-warm .ls-h{color:#c2410c}
.ls-page.ls-act{background:linear-gradient(180deg,rgba(236,253,245,.98),rgba(255,255,255,.94))}
.ls-page.ls-act .ls-h{color:#047857}
.ls-page.ls-summary{background:linear-gradient(180deg,rgba(238,242,255,.98),rgba(255,255,255,.94))}
.ls-page.ls-summary .ls-h{color:#4338ca}
.ls-page.ls-example{background:linear-gradient(180deg,rgba(240,249,255,.98),rgba(255,255,255,.94))}
.act-b{text-align:left;max-width:760px;margin:0 auto}

/* คำศัพท์ — การ์ดสี่สีสลับกัน */
.vc-grid{display:grid;gap:clamp(7px,1.3vh,14px);margin:clamp(6px,1.4vh,16px) auto 0;
  width:100%;max-width:820px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ls-page.on .vc-grid{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) .28s both}
.vc-card{border-radius:20px;padding:clamp(9px,1.4vh,16px) clamp(12px,1.4vw,18px);text-align:left;
  border:4px solid #fff;box-shadow:0 6px 14px rgba(30,60,90,.14)}
.vc-card.c0{background:linear-gradient(180deg,#e0f2fe,#f0f9ff)}
.vc-card.c1{background:linear-gradient(180deg,#fce7f3,#fdf2f8)}
.vc-card.c2{background:linear-gradient(180deg,#dcfce7,#f0fdf4)}
.vc-card.c3{background:linear-gradient(180deg,#fef3c7,#fffbeb)}
.vc-w{font-family:'Itim',cursive;font-size:clamp(17px,2.6vh,28px);color:#1d4ed8;margin-bottom:2px}
.vc-card.c1 .vc-w{color:#be185d}.vc-card.c2 .vc-w{color:#15803d}.vc-card.c3 .vc-w{color:#b45309}
.vc-d{font-size:clamp(13px,1.9vh,20px);line-height:1.65;color:#334155}

/* ตัวอย่าง — โจทย์ + ขั้นตอน + คำตอบ */
.ex-prob{margin:clamp(4px,1vh,10px) auto;max-width:760px;background:#fff;border:4px dashed #93c5fd;
  border-radius:20px;padding:clamp(8px,1.3vh,16px) 18px;
  font-family:'Itim',cursive;font-size:clamp(16px,2.7vh,30px);color:#1e3a8a;line-height:1.5}
.ex-steps{margin:clamp(4px,1vh,12px) auto 0;max-width:760px;text-align:left;padding-left:0;
  list-style:none;counter-reset:exs;display:flex;flex-direction:column;gap:clamp(4px,.9vh,10px)}
.ls-page.on .ex-steps{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) .3s both}
.ex-steps li{counter-increment:exs;position:relative;background:#fff;border:3px solid #dbeafe;
  border-radius:16px;padding:clamp(6px,1vh,12px) 14px clamp(6px,1vh,12px) clamp(42px,5vh,56px);
  font-size:clamp(14px,2vh,22px);line-height:1.6;color:#26364b}
.ex-steps li::before{content:counter(exs);position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:clamp(24px,3.2vh,34px);aspect-ratio:1;border-radius:50%;background:#3b82f6;color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:clamp(13px,1.8vh,18px)}
.ex-ans{margin:clamp(6px,1.2vh,14px) auto 0;max-width:760px;background:#f0fdf4;border:4px solid #6ee7b7;
  border-radius:18px;padding:clamp(7px,1.2vh,14px) 18px;font-weight:800;color:#065f46;
  font-size:clamp(15px,2.3vh,26px);line-height:1.5}

/* ตารางเปรียบเทียบ */
.cp-wrap{margin:clamp(6px,1.4vh,16px) auto 0;width:100%;max-width:820px;overflow-x:auto}
.ls-page.on .cp-wrap{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) .28s both}
.cp-tab{width:100%;border-collapse:separate;border-spacing:0 7px;text-align:left}
.cp-tab th{background:linear-gradient(180deg,#6366f1,#4338ca);color:#fff;font-size:clamp(13px,1.9vh,20px);
  padding:clamp(6px,1vh,12px) 16px}
.cp-tab th:first-child{border-radius:14px 0 0 14px}
.cp-tab th:last-child{border-radius:0 14px 14px 0}
.cp-tab td{background:#fff;border-top:3px solid #e0e7ff;border-bottom:3px solid #e0e7ff;
  padding:clamp(6px,1vh,12px) 16px;font-size:clamp(13px,1.9vh,21px);line-height:1.6;color:#26364b}
.cp-tab td:first-child{border-left:3px solid #e0e7ff;border-radius:14px 0 0 14px;font-weight:700;color:#4338ca}
.cp-tab td:last-child{border-right:3px solid #e0e7ff;border-radius:0 14px 14px 0}

/* ฝึกทำ — แตะการ์ดเพื่อเปิดเฉลย */
.pr-grid{display:grid;gap:clamp(7px,1.3vh,14px);margin:clamp(6px,1.4vh,16px) auto 0;
  width:100%;max-width:820px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ls-page.on .pr-grid{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) .28s both}
.pr-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  background:#fff;border:4px solid #ddd6fe;border-radius:20px;cursor:pointer;font-family:inherit;
  padding:clamp(9px,1.4vh,16px) clamp(12px,1.4vw,18px) clamp(24px,3vh,32px);text-align:left;
  transition:border-color .16s,transform .16s,box-shadow .16s}
.pr-card:hover{border-color:#8b5cf6;transform:translateY(-3px);box-shadow:0 8px 18px rgba(109,40,217,.16)}
.pr-card.open{border-color:#8b5cf6;background:#faf5ff}
.pr-n{position:absolute;top:-11px;left:14px;width:clamp(24px,3.2vh,32px);aspect-ratio:1;border-radius:50%;
  background:#7c3aed;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
  font-size:clamp(12px,1.7vh,17px);border:3px solid #fff}
.pr-q{font-family:'Itim',cursive;font-size:clamp(16px,2.4vh,26px);color:#5b21b6;line-height:1.45}
.pr-a{font-size:clamp(13px,1.9vh,20px);line-height:1.6;color:#166534;background:#f0fdf4;
  border-radius:12px;padding:6px 11px;width:100%;animation:lsPop .35s cubic-bezier(.2,1.4,.35,1) both}
.pr-go{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:clamp(11px,1.5vh,14px);color:#8b5cf6;font-weight:700}

/* สรุปบทเรียน */
.sm-list{list-style:none;padding:0;margin:clamp(6px,1.4vh,16px) auto 0;width:100%;max-width:800px;
  display:flex;flex-direction:column;gap:clamp(5px,1vh,11px);text-align:left}
.ls-page.on .sm-list{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) .28s both}
.sm-list li{display:flex;align-items:flex-start;gap:11px;background:#fff;border:3px solid #e0e7ff;
  border-radius:16px;padding:clamp(6px,1vh,12px) 15px;font-size:clamp(14px,2vh,22px);line-height:1.6;color:#26364b}
.sm-list li.c1{border-color:#fbcfe8}.sm-list li.c2{border-color:#bbf7d0}.sm-list li.c3{border-color:#fde68a}
.sm-n{flex:none;width:clamp(24px,3.2vh,34px);aspect-ratio:1;border-radius:50%;background:#4338ca;color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,1.8vh,18px)}
.sm-list li.c1 .sm-n{background:#be185d}.sm-list li.c2 .sm-n{background:#15803d}.sm-list li.c3 .sm-n{background:#b45309}

/* ปุ่มหน้าปกเพิ่มเติม + ป้ายคะแนนที่เคยทำไว้ */
.cv-btn.c4{background:linear-gradient(180deg,#c4b5fd,#7c3aed);box-shadow:0 6px 0 #5b21b6,0 12px 22px rgba(0,0,0,.22)}
.cv-btn.c4:hover{box-shadow:0 9px 0 #5b21b6,0 16px 26px rgba(0,0,0,.25)}
.cv-btn.c4:active{box-shadow:0 2px 0 #5b21b6}
.cv-btn.c5{background:linear-gradient(180deg,#fcd34d,#d97706);box-shadow:0 6px 0 #92400e,0 12px 22px rgba(0,0,0,.22)}
.cv-btn.c5:hover{box-shadow:0 9px 0 #92400e,0 16px 26px rgba(0,0,0,.25)}
.cv-btn.c5:active{box-shadow:0 2px 0 #92400e}
.cv-badge{flex:none!important;background:rgba(255,255,255,.94);color:#334155;border-radius:999px;
  padding:2px 11px;font-size:clamp(11px,1.3vw,15px);font-weight:800;text-shadow:none}
.end-quiz{margin:clamp(8px,1.6vh,18px) auto 0;display:block;border:4px solid #fff;border-radius:999px;
  cursor:pointer;font-family:inherit;font-weight:800;color:#fff;font-size:clamp(15px,2.2vh,24px);
  padding:clamp(8px,1.4vh,15px) clamp(18px,2.4vw,34px);
  background:linear-gradient(180deg,#fcd34d,#d97706);box-shadow:0 6px 0 #92400e,0 12px 22px rgba(0,0,0,.2);
  text-shadow:0 2px 4px rgba(120,60,0,.4);transition:transform .16s,box-shadow .16s}
.end-quiz:hover{transform:translateY(-3px);box-shadow:0 9px 0 #92400e,0 16px 26px rgba(0,0,0,.24)}
.end-quiz:active{transform:translateY(3px);box-shadow:0 2px 0 #92400e}

/* ตัวชี้วัดในกล่องข้อมูล */
.sh-ref{font-size:.82em;color:#64748b;font-weight:400}
.sh-std{list-style:none;padding:0;margin:6px 0 12px;display:flex;flex-direction:column;gap:6px}
.sh-std li{background:#eff6ff;border-left:5px solid #3b82f6;border-radius:0 12px 12px 0;padding:7px 12px;line-height:1.65}
.std-code{display:inline-block;background:#1d4ed8;color:#fff;border-radius:8px;padding:1px 9px;
  font-weight:800;font-size:.9em;margin-right:6px;white-space:nowrap}
.sh-obj{list-style:none;padding:0;margin:6px 0 12px;display:flex;flex-direction:column;gap:5px}
.sh-obj li{line-height:1.65}
.ob-k{display:inline-block;border-radius:999px;padding:1px 10px;font-size:.82em;font-weight:800;
  margin-right:6px;background:#e0e7ff;color:#3730a3;white-space:nowrap}
.ob-k.k-ทักษะ{background:#dcfce7;color:#166534}
.ob-k.k-เจตคติ{background:#fef3c7;color:#92400e}

/* ══════════ แบบทดสอบ ══════════ */
.ls-quiz{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:clamp(8px,2vh,26px);background:rgba(15,32,60,.62);backdrop-filter:blur(4px);
  animation:lsPop .3s cubic-bezier(.2,1.3,.4,1) both}
.ls-quiz[hidden]{display:none}
.qz-card{width:min(880px,100%);max-height:100%;overflow-y:auto;background:#fff;border:6px solid #fff;
  border-radius:26px;box-shadow:0 22px 50px rgba(10,25,50,.4);padding:clamp(14px,2.6vh,30px) clamp(14px,2.6vw,34px);
  text-align:center;position:relative}
.qz-card::before{content:'';position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(90deg,#a855f7,#3b82f6,#22c55e,#f97316);background-size:300% 100%;
  animation:lsShine 6s linear infinite}

.qz-ic{font-size:clamp(46px,9vh,96px);line-height:1;animation:lsFloat 4s ease-in-out infinite}
.qz-intro h3{margin:4px 0 6px;font-family:'Itim',cursive;font-size:clamp(20px,3.4vh,38px);color:#1d4ed8}
.qz-lead{margin:0 auto;max-width:560px;font-size:clamp(14px,2vh,21px);line-height:1.75;color:#475569}
.qz-rules{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:clamp(8px,1.6vh,18px) 0}
.qz-rules span{background:#eff6ff;border:3px solid #dbeafe;border-radius:999px;padding:5px 15px;
  font-size:clamp(12px,1.7vh,18px);color:#1e40af;font-weight:700}
.qz-prev{background:#fffbeb;border:3px dashed #fbbf24;border-radius:16px;padding:8px 16px;color:#92400e;
  font-size:clamp(13px,1.8vh,19px);margin:0 auto clamp(8px,1.4vh,14px);max-width:460px}
.qz-act{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:clamp(8px,1.6vh,18px)}
.qz-go,.qz-x{border:4px solid #fff;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:800;
  font-size:clamp(14px,2vh,22px);padding:clamp(7px,1.3vh,14px) clamp(16px,2.2vw,30px);
  transition:transform .16s,box-shadow .16s}
.qz-go{color:#fff;background:linear-gradient(180deg,#6ff29a,#12a150);box-shadow:0 6px 0 #0b7a3b,0 12px 20px rgba(0,0,0,.18);
  text-shadow:0 2px 4px rgba(0,80,40,.4)}
.qz-go:hover{transform:translateY(-3px);box-shadow:0 9px 0 #0b7a3b,0 16px 24px rgba(0,0,0,.22)}
.qz-go:active{transform:translateY(3px);box-shadow:0 2px 0 #0b7a3b}
.qz-x{color:#475569;background:#f1f5f9;border-color:#e2e8f0}
.qz-x:hover{background:#e2e8f0}

.qz-top{display:flex;align-items:center;gap:10px;margin-bottom:clamp(8px,1.6vh,18px)}
.qz-chip{background:#eef2ff;border-radius:999px;padding:4px 14px;font-size:clamp(11px,1.6vh,16px);
  color:#3730a3;font-weight:800;white-space:nowrap}
.qz-bar{flex:1;height:12px;border-radius:999px;background:#e2e8f0;overflow:hidden}
.qz-bar>span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#facc15,#f97316);transition:width .4s cubic-bezier(.3,1.2,.4,1)}
.qz-quit{flex:none;border:none;background:#fee2e2;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:15px}
.qz-quit:hover{background:#fecaca}
.qz-q{font-family:'Itim',cursive;font-size:clamp(18px,3.2vh,34px);color:#1e3a8a;line-height:1.5;
  margin:clamp(6px,1.4vh,16px) auto;max-width:720px;animation:lsPop .35s cubic-bezier(.2,1.4,.35,1) both}
.qz-opts{display:flex;flex-direction:column;gap:clamp(6px,1.1vh,12px);margin:0 auto;width:100%;max-width:640px}
.qz-opt{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:4px solid #dbeafe;
  border-radius:18px;padding:clamp(8px,1.3vh,15px) clamp(12px,1.4vw,20px);font-size:clamp(15px,2.2vh,24px);
  font-family:inherit;cursor:pointer;color:#26364b;transition:transform .16s,border-color .16s,background .16s}
.qz-opt:hover{border-color:#3b82f6;transform:translateX(6px)}
.qz-opt.sel{border-color:#7c3aed;background:#faf5ff}
.qz-opt.sel .qz-let{background:#7c3aed;color:#fff;transform:scale(1.12)}
.qz-let{flex:none;width:clamp(28px,3.6vh,42px);aspect-ratio:1;border-radius:50%;background:#dbeafe;color:#1d4ed8;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2vh,21px);transition:transform .2s}
.qz-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:clamp(8px,1.6vh,18px)}
.qz-back{border:3px solid #e2e8f0;background:#f8fafc;border-radius:999px;cursor:pointer;font-family:inherit;
  font-weight:800;color:#475569;padding:7px 18px;font-size:clamp(12px,1.7vh,18px)}
.qz-back:disabled{opacity:.4;cursor:default}
.qz-hint{font-size:clamp(11px,1.6vh,16px);color:#64748b}
.qz-send{border:4px solid #fff;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:800;color:#fff;
  font-size:clamp(14px,2vh,22px);padding:clamp(7px,1.2vh,13px) clamp(16px,2.2vw,30px);
  background:linear-gradient(180deg,#fcd34d,#d97706);box-shadow:0 5px 0 #92400e;text-shadow:0 2px 4px rgba(120,60,0,.4);
  animation:lsPop .4s cubic-bezier(.2,1.4,.35,1) both}
.qz-send:active{transform:translateY(3px);box-shadow:0 2px 0 #92400e}

/* หน้าผลคะแนน */
.qz-score{animation:lsPop .5s cubic-bezier(.2,1.4,.35,1) both}
.sc-face{font-size:clamp(46px,9vh,96px);line-height:1;animation:lsFloat 3.6s ease-in-out infinite}
.sc-num{font-family:'Itim',cursive;line-height:1;margin-top:4px}
.sc-num b{font-size:clamp(44px,8vh,88px);color:#16a34a}
.sc-num span{font-size:clamp(20px,3.4vh,36px);color:#94a3b8}
.sc-pct{font-size:clamp(16px,2.4vh,26px);font-weight:800;color:#1d4ed8;margin-top:2px}
.sc-word{font-size:clamp(14px,2vh,21px);color:#475569;margin-top:4px;line-height:1.6}
.sc-cmp{margin:clamp(8px,1.6vh,18px) auto 0;max-width:600px;border-radius:18px;padding:10px 18px;
  font-size:clamp(13px,1.9vh,20px);line-height:1.7;border:4px solid;animation:lsPop .5s cubic-bezier(.2,1.4,.35,1) .15s both}
.sc-cmp.up{background:#f0fdf4;border-color:#6ee7b7;color:#065f46}
.sc-cmp.down{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.sc-cmp.same{background:#f8fafc;border-color:#e2e8f0;color:#475569}
.cmp-t{font-weight:800;white-space:nowrap}
.sc-review{margin-top:clamp(10px,1.8vh,20px);text-align:left}
.sc-review h4{margin:0 0 8px;font-family:'Itim',cursive;font-size:clamp(16px,2.4vh,25px);color:#334155;text-align:center}
.rv{border-radius:16px;border:3px solid;margin-bottom:7px;overflow:hidden}
.rv.ok{border-color:#bbf7d0;background:#f0fdf4}
.rv.no{border-color:#fecaca;background:#fef2f2}
.rv-h{display:flex;align-items:flex-start;gap:9px;padding:8px 13px;font-size:clamp(13px,1.8vh,19px);line-height:1.55}
.rv-n{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;font-weight:800;color:#475569;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.rv-q{flex:1;color:#1e293b;font-weight:700}
.rv-m{flex:none}
.rv-b{padding:0 13px 9px 48px;font-size:clamp(12px,1.7vh,17px);line-height:1.65}
.rv-mine{color:#b91c1c}
.rv-right{color:#166534}
.rv-w{margin-top:4px;color:#475569;background:rgba(255,255,255,.75);border-radius:10px;padding:5px 10px}
.rv.ok .rv-b{display:none}
.rv.ok:hover .rv-b,.rv.ok:focus-within .rv-b{display:block}

@media (max-width:760px){
  .ls-tag{position:static;display:inline-block;margin:0 auto 6px}
  .qz-nav{justify-content:center}
  .rv-b{padding-left:13px}
}
@media (prefers-reduced-motion:reduce){
  .qz-ic,.sc-face,.ls-quiz,.qz-score,.sc-cmp,.qz-q,.qz-send{animation:none!important}
}
@media print{
  .ls-quiz,.ls-tag,.pr-go{display:none!important}
  .pr-a{display:block!important}
}

/* ป้ายตัวชี้วัดและแบบทดสอบบนการ์ดรายการบทเรียน */
.lc-std{display:inline-block;background:#eef2ff;color:#3730a3;border-radius:999px;padding:2px 11px;
  font-size:12px;font-weight:800;margin:0 0 5px}
.lc-tag.test{background:#f5f3ff;color:#6d28d9}

/* เมนูหน้าปกที่มีปุ่มแบบทดสอบด้วย — บีบให้พอดีความสูงจอ ไม่ให้ล้นไปทับหัวเรื่องและแถบปุ่มล่าง */
.cv-menu{max-height:100%;overflow-y:auto;overflow-x:hidden;padding:2px 2px}
.cv-menu.n4{gap:clamp(5px,1.2vh,12px)}
.cv-menu.n5{gap:clamp(4px,.9vh,10px)}
.cv-menu.n4 .cv-btn{padding:clamp(6px,1.2vh,11px) clamp(12px,1.6vw,22px)}
.cv-menu.n5 .cv-btn{padding:clamp(5px,1vh,9px) clamp(11px,1.5vw,20px);font-size:clamp(13px,1.75vw,22px)}
.cv-menu.n5 .cv-ic{width:clamp(24px,2.9vw,38px);font-size:clamp(13px,1.7vw,21px)}

/* หน้าที่มีเนื้อหาเยอะ (คำศัพท์ ตาราง สรุป) ย่อภาพประกอบลง เนื้อหาจะได้อยู่ในจอเดียวไม่ต้องเลื่อน */
.ls-page.ls-vocab .ls-art,.ls-page.ls-compare .ls-art,.ls-page.ls-summary .ls-art{
  font-size:clamp(30px,5.2vh,64px);margin-bottom:0}
.ls-page.ls-vocab .ls-h,.ls-page.ls-compare .ls-h,.ls-page.ls-summary .ls-h,
.ls-page.ls-practice .ls-h,.ls-page.ls-example .ls-h{margin-bottom:2px;font-size:clamp(18px,3vh,34px)}

/* ── เต็มจอ: มีพื้นที่เหลือ จึงเว้นระยะระหว่างปุ่มหน้าปกให้โปร่งขึ้น ──
   ตอนไม่เต็มจอพื้นที่จำกัด ให้คงระยะเดิมไว้ (กฎด้านบน)
   ต้องเขียนแยกกฎกับ -webkit-full-screen เพราะถ้ารวมไว้ด้วยกัน
   เบราว์เซอร์ที่ไม่รู้จักตัวใดตัวหนึ่งจะทิ้งทั้งกฎ */
.ls-wrap:fullscreen .cv-menu{gap:clamp(10px,2.4vh,34px);padding:6px 4px}
.ls-wrap:fullscreen .cv-menu.n4{gap:clamp(10px,2.6vh,36px)}
.ls-wrap:fullscreen .cv-menu.n5{gap:clamp(9px,2.2vh,30px)}
.ls-wrap:fullscreen .cv-menu.n5 .cv-btn{padding:clamp(7px,1.5vh,15px) clamp(12px,1.6vw,24px);
  font-size:clamp(15px,1.9vw,26px)}
.ls-wrap:fullscreen .cv-menu.n5 .cv-ic{width:clamp(26px,3.2vw,46px);font-size:clamp(15px,1.9vw,26px)}
.ls-wrap:fullscreen .cv-menu.n4 .cv-btn{padding:clamp(8px,1.6vh,16px) clamp(12px,1.6vw,24px)}

.ls-wrap:-webkit-full-screen .cv-menu{gap:clamp(10px,2.4vh,34px);padding:6px 4px}
.ls-wrap:-webkit-full-screen .cv-menu.n4{gap:clamp(10px,2.6vh,36px)}
.ls-wrap:-webkit-full-screen .cv-menu.n5{gap:clamp(9px,2.2vh,30px)}
.ls-wrap:-webkit-full-screen .cv-menu.n5 .cv-btn{padding:clamp(7px,1.5vh,15px) clamp(12px,1.6vw,24px);
  font-size:clamp(15px,1.9vw,26px)}
.ls-wrap:-webkit-full-screen .cv-menu.n5 .cv-ic{width:clamp(26px,3.2vw,46px);font-size:clamp(15px,1.9vw,26px)}
.ls-wrap:-webkit-full-screen .cv-menu.n4 .cv-btn{padding:clamp(8px,1.6vh,16px) clamp(12px,1.6vw,24px)}

/* ป้ายคะแนนบนปุ่มหน้าปก — ลอยชิดขวาของปุ่ม ไม่ไปเบียดให้ข้อความขึ้นบรรทัดใหม่
   ปุ่มทุกใบจึงสูงเท่ากันเสมอ ไม่ว่าจะเคยทำแบบทดสอบมาแล้วหรือยัง */
.cv-btn{position:relative}
.cv-btn:has(.cv-badge){padding-right:clamp(74px,9vw,150px)}
.cv-badge{position:absolute;right:clamp(8px,1vw,16px);top:50%;transform:translateY(-50%);
  max-width:clamp(62px,8vw,132px);text-align:center;line-height:1.25}

/* ทางสำรอง: ติดคลาส .fs ด้วย JS ตอนเข้าเต็มจอ เผื่อเบราว์เซอร์ที่ :fullscreen ทำงานไม่เหมือนกัน */
.ls-wrap.fs .cv-menu{gap:clamp(10px,2.4vh,34px);padding:6px 4px}
.ls-wrap.fs .cv-menu.n4{gap:clamp(10px,2.6vh,36px)}
.ls-wrap.fs .cv-menu.n5{gap:clamp(9px,2.2vh,30px)}
.ls-wrap.fs .cv-menu.n5 .cv-btn{padding:clamp(7px,1.5vh,15px) clamp(12px,1.6vw,24px);
  font-size:clamp(15px,1.9vw,26px)}
.ls-wrap.fs .cv-menu.n5 .cv-ic{width:clamp(26px,3.2vw,46px);font-size:clamp(15px,1.9vw,26px)}
.ls-wrap.fs .cv-menu.n4 .cv-btn{padding:clamp(8px,1.6vh,16px) clamp(12px,1.6vw,24px)}


/* ── การ์ดคำศัพท์และการ์ดฝึกทำ: แถวละ 2 ช่อง ช่องใหญ่ ตัวหนังสือใหญ่ ──
   เดิมใช้ auto-fit ทำให้บางหน้าได้ 3 ช่องบน 1 ช่องล่าง ดูไม่สมดุล
   ถ้าจำนวนช่องเป็นเลขคี่ ช่องสุดท้ายจะกินเต็มความกว้าง แถวล่างจะได้ไม่โหว่ครึ่งหนึ่ง */
.vc-grid,.pr-grid{grid-template-columns:repeat(2,1fr);max-width:min(1060px,96%);
  gap:clamp(9px,1.8vh,20px)}
.vc-card:last-child:nth-child(odd),.pr-card:last-child:nth-child(odd){grid-column:1 / -1}

.vc-card{padding:clamp(11px,1.9vh,22px) clamp(14px,1.8vw,26px);border-radius:24px}
.vc-w{font-size:clamp(18px,3vh,34px);margin-bottom:4px}
.vc-d{font-size:clamp(15px,2.2vh,25px);line-height:1.6}

.pr-card{padding:clamp(12px,2vh,22px) clamp(14px,1.8vw,26px) clamp(26px,3.4vh,38px);border-radius:24px;gap:7px}
.pr-n{width:clamp(26px,3.6vh,38px);font-size:clamp(13px,1.9vh,20px)}
.pr-q{font-size:clamp(18px,2.9vh,32px)}
.pr-a{font-size:clamp(15px,2.2vh,24px);padding:7px 13px}
.pr-go{font-size:clamp(12px,1.6vh,16px);bottom:9px}

/* จอแคบ (มือถือ/แท็บเล็ตแนวตั้ง) เรียงช่องเดียวต่อแถว จะได้ไม่บีบจนอ่านไม่ออก */
@media (max-width:700px){
  .vc-grid,.pr-grid{grid-template-columns:1fr}
  .vc-card:last-child:nth-child(odd),.pr-card:last-child:nth-child(odd){grid-column:auto}
}

/* ข้อความในการ์ดจัดกึ่งกลางแนวตั้ง การ์ดในแถวเดียวกันจึงดูสูงเท่ากันเสมอ */
.vc-card{display:flex;flex-direction:column;justify-content:center}
.pr-card{justify-content:center}

/* เฉพาะตอนเต็มจอเท่านั้นที่ดันการ์ดให้สูงขึ้นเต็มพื้นที่ที่เหลือ
   ตอนอยู่ในกรอบปกติพื้นที่จำกัด ปล่อยให้สูงตามเนื้อหา ไม่งั้นจะล้นจนต้องเลื่อน */
.ls-wrap:fullscreen .vc-card{min-height:clamp(78px,15vh,200px)}
.ls-wrap:fullscreen .pr-card{min-height:clamp(84px,15.5vh,210px)}
.ls-wrap:-webkit-full-screen .vc-card{min-height:clamp(78px,15vh,200px)}
.ls-wrap:-webkit-full-screen .pr-card{min-height:clamp(84px,15.5vh,210px)}
.ls-wrap.fs .vc-card{min-height:clamp(78px,15vh,200px)}
.ls-wrap.fs .pr-card{min-height:clamp(84px,15.5vh,210px)}

/* หน้าที่มีการ์ดหลายใบ ตอนอยู่ในกรอบปกติ (ไม่เต็มจอ) พื้นที่จำกัดมาก
   จึงบีบขอบและภาพประกอบลงเล็กน้อย เพื่อให้เห็นการ์ดครบทุกใบโดยไม่ต้องเลื่อน
   ตอนเต็มจอมีที่เหลือ กฎ .fs ด้านล่างจะคืนขนาดกลับให้ใหญ่ตามเดิม */
.ls-page.ls-vocab,.ls-page.ls-practice{padding-top:clamp(10px,1.6vh,26px);padding-bottom:clamp(10px,1.6vh,26px)}
.ls-page.ls-vocab .ls-art{font-size:clamp(24px,3.7vh,58px)}
.ls-page.ls-vocab .vc-grid,.ls-page.ls-practice .pr-grid{margin-top:clamp(4px,1vh,16px)}
.vc-card{padding-top:clamp(9px,1.5vh,22px);padding-bottom:clamp(9px,1.5vh,22px)}

.ls-wrap:fullscreen .ls-page.ls-vocab,.ls-wrap:fullscreen .ls-page.ls-practice{
  padding-top:clamp(14px,2.6vh,30px);padding-bottom:clamp(14px,2.6vh,30px)}
.ls-wrap:-webkit-full-screen .ls-page.ls-vocab,.ls-wrap:-webkit-full-screen .ls-page.ls-practice{
  padding-top:clamp(14px,2.6vh,30px);padding-bottom:clamp(14px,2.6vh,30px)}
.ls-wrap.fs .ls-page.ls-vocab,.ls-wrap.fs .ls-page.ls-practice{
  padding-top:clamp(14px,2.6vh,30px);padding-bottom:clamp(14px,2.6vh,30px)}

/* บีบอีกนิดสำหรับหน้าที่มีการ์ด 5 ใบ (3 แถว) ตอนอยู่ในกรอบปกติ ให้พอดีจอไม่ต้องเลื่อน */
.ls-page.ls-vocab .vc-grid,.ls-page.ls-practice .pr-grid{gap:clamp(8px,1.4vh,20px)}
.ls-page.ls-vocab .ls-h,.ls-page.ls-practice .ls-h{margin-bottom:0}
.ls-wrap:fullscreen .ls-page.ls-vocab .vc-grid,.ls-wrap:fullscreen .ls-page.ls-practice .pr-grid{gap:clamp(9px,1.8vh,22px)}
.ls-wrap:-webkit-full-screen .ls-page.ls-vocab .vc-grid,.ls-wrap:-webkit-full-screen .ls-page.ls-practice .pr-grid{gap:clamp(9px,1.8vh,22px)}
.ls-wrap.fs .ls-page.ls-vocab .vc-grid,.ls-wrap.fs .ls-page.ls-practice .pr-grid{gap:clamp(9px,1.8vh,22px)}

/* ══════════════════════════════════════════════════════════════
   ภาพประกอบบทเรียน (SVG จาก includes/lesson_art.php)
   ══════════════════════════════════════════════════════════════ */
.ls-pic{margin:0;display:flex;align-items:center;justify-content:center;min-width:0;flex-shrink:0}
.ls-pic svg.la{width:100%;height:auto;max-height:38vh;display:block;
  filter:drop-shadow(0 6px 12px rgba(30,60,90,.14))}
.ls-pic svg.la-wide{max-height:30vh}
.ls-page.on .ls-pic{animation:lsPop .55s cubic-bezier(.2,1.4,.35,1) .18s both}

/* หน้าอธิบายที่มีภาพ: ภาพซ้าย ข้อความขวา ใช้ความกว้างจอ 16:9 ให้เต็ม */
.ls-figrow{display:flex;align-items:center;gap:clamp(12px,2.6vw,44px);width:100%;
  max-width:1120px;margin:0 auto;text-align:left}
.ls-figrow .ls-pic{flex:0 0 38%;max-width:38%}
.ls-figrow .ls-pic svg.la{max-height:40vh}
.ls-figrow .ls-figtxt{flex:1;min-width:0}
.ls-figrow .ls-h{text-align:left}
.ls-figrow .ls-b{text-align:left}

/* หน้าตัวอย่าง: ขั้นตอนซ้าย ภาพขวา */
.ex-row{display:flex;gap:clamp(10px,2vw,32px);align-items:center;width:100%;max-width:1060px;margin:0 auto}
.ex-row .ex-steps{flex:1;min-width:0;margin-left:0;margin-right:0;max-width:none}
.ex-row.has-pic .ls-pic{flex:0 0 34%;max-width:34%}
.ex-row.has-pic .ls-pic svg.la{max-height:34vh}

/* หน้าชวนคิด: ภาพอยู่กลาง เหนือคำถาม */
/* margin auto บนลูกของ flex จะทำให้กล่องหดเท่าเนื้อหา และ flex ปกติจะบีบความสูงลงด้วย
   จึงต้องกำหนดความกว้างเต็มและห้ามหดอย่างชัดเจน ภาพถึงจะได้ขนาดที่ตั้งใจไว้จริง */
.ls-pic.quiz{margin:0 0 clamp(4px,1vh,10px);width:100%;flex:none}
/* ต้องกำหนดความกว้างเป็นค่าจริง ถ้าใช้ auto แล้ว SVG จะยุบเหลือศูนย์ในกล่องแบบ flex */
.ls-pic.quiz svg.la{width:min(430px,72%);height:auto;max-height:18vh}
.ls-pic.quiz svg.la-wide{width:min(760px,94%);max-height:13vh}

@media (max-width:860px){
  .ls-figrow{flex-direction:column;gap:8px;text-align:center}
  .ls-figrow .ls-pic{flex:none;max-width:min(320px,88%)}
  .ls-figrow .ls-pic svg.la{max-height:26vh}
  .ls-figrow .ls-h,.ls-figrow .ls-b{text-align:center}
  .ex-row{flex-direction:column}
  .ex-row.has-pic .ls-pic{flex:none;max-width:min(300px,86%)}
}

/* หน้าที่มีภาพประกอบ ข้อความมักยาว จึงลดขอบและระยะบรรทัดลงนิดหน่อย
   ให้เนื้อหาอยู่ในจอเดียวโดยไม่ต้องเลื่อน (ตอนฉายหน้าห้อง การเลื่อนหน้าทำให้เสียจังหวะสอน) */
.ls-figrow .ls-b{line-height:1.66;font-size:clamp(14px,2.3vh,25px)}
.ls-figrow .ls-h{font-size:clamp(19px,3.2vh,36px);margin-bottom:6px}

/* บีบระยะในหน้าตัวอย่างและหน้าสรุปลงเล็กน้อย
   หน้าพวกนี้มีหลายบรรทัด พอใส่ภาพประกอบเข้าไปแล้วเคยล้นออกนอกจอไม่กี่พิกเซล */
.ex-steps{gap:clamp(3px,.7vh,9px)}
.ex-steps li{padding-top:clamp(5px,.85vh,11px);padding-bottom:clamp(5px,.85vh,11px)}
.ex-ans{margin-top:clamp(4px,.9vh,12px);padding-top:clamp(6px,1vh,12px);padding-bottom:clamp(6px,1vh,12px)}
.ex-prob{margin-top:clamp(2px,.6vh,8px);margin-bottom:clamp(2px,.6vh,8px)}
.sm-list{gap:clamp(4px,.8vh,9px)}
.sm-list li{padding-top:clamp(5px,.85vh,10px);padding-bottom:clamp(5px,.85vh,10px)}

/* จอเตี้ย (โปรเจกเตอร์ 720p หรือโน้ตบุ๊กจอเล็ก) — ลดขนาดตัวอักษรลงหนึ่งขั้น
   หน้าที่เนื้อหายาวจะได้อยู่ในจอเดียว ไม่ต้องเลื่อนระหว่างสอน
   จอ 1080p ขึ้นไปไม่โดนกฎนี้ ตัวหนังสือยังใหญ่เต็มที่เหมือนเดิม */
@media (max-height:820px){
  .ls-b{font-size:clamp(14px,2.2vh,22px);line-height:1.64}
  .ls-figrow .ls-b{font-size:clamp(13px,2.05vh,21px);line-height:1.58}
  .ls-figrow .ls-h{font-size:clamp(18px,2.9vh,30px)}
  .ex-steps li{font-size:clamp(13px,1.85vh,20px);line-height:1.5}
  .ex-prob{font-size:clamp(15px,2.4vh,26px)}
  .sm-list li{font-size:clamp(13px,1.85vh,20px);line-height:1.5}
  .vc-d{font-size:clamp(14px,2vh,22px);line-height:1.5}
  .cp-tab td,.cp-tab th{font-size:clamp(13px,1.75vh,19px);line-height:1.5}
}

/* ระยะบรรทัดเนื้อหา 1.8 เผื่อไว้เยอะไปนิด หน้าที่ยาวที่สุดเลยเกินจอมา 9 พิกเซล
   ลดเหลือ 1.74 ยังอ่านสบายเหมือนเดิม แต่ทุกหน้าอยู่ในจอเดียวครบ */
.ls-b{line-height:1.74}

/* ภาพแนวกว้าง (เส้นจำนวน ปฏิทิน เงิน การแบ่งกลุ่ม) ถ้าบีบให้อยู่ข้าง ๆ จะเล็กจนมองไม่เห็น
   จึงจัดใหม่ให้วางเต็มความกว้างใต้ข้อความแทน */
.ls-figrow.wide .ls-pic{flex:0 0 47%;max-width:47%}
.ls-figrow.wide .ls-pic svg.la{max-height:34vh}
.ex-row.wide .ls-pic{flex:0 0 45%;max-width:45%}
.ex-row.wide .ls-pic svg.la{max-height:30vh}

/* ══ ตัวหนังสือในบทเรียนใหญ่ขึ้นอีกขั้น ══
   หลังจัดหน้าใหม่แล้วพื้นที่ยังเหลือ จึงขยายให้อ่านง่ายตอนฉายหน้าห้อง
   ทุกค่ายังผูกกับความสูงจอ (vh) จอเล็กจึงไม่ล้น */
.ls-b{font-size:clamp(16px,2.8vh,31px)}
.ls-h{font-size:clamp(21px,3.9vh,44px)}
.ls-figrow .ls-b{font-size:clamp(15px,2.65vh,29px);line-height:1.7}
.ls-figrow .ls-h{font-size:clamp(21px,3.6vh,40px)}
.ls-opt{font-size:clamp(16px,2.5vh,28px)}
.ex-prob{font-size:clamp(17px,3vh,34px)}
.ex-steps li{font-size:clamp(15px,2.3vh,26px)}
.ex-ans{font-size:clamp(16px,2.6vh,30px)}
.sm-list li{font-size:clamp(15px,2.3vh,26px)}
.vc-w{font-size:clamp(19px,3.3vh,38px)}
.vc-d{font-size:clamp(16px,2.45vh,28px)}
.pr-q{font-size:clamp(19px,3.1vh,35px)}
.pr-a{font-size:clamp(16px,2.4vh,27px)}
.cp-tab td{font-size:clamp(14px,2.15vh,24px)}
.cp-tab th{font-size:clamp(14px,2.1vh,23px)}
.ls-why{font-size:clamp(15px,2.1vh,23px)}

@media (max-height:820px){
  .ls-b{font-size:clamp(15px,2.34vh,25px);line-height:1.56}
  .ls-h{font-size:clamp(19px,3.3vh,34px)}
  .ls-figrow .ls-b{font-size:clamp(14px,2.3vh,24px);line-height:1.58}
  .ls-figrow .ls-h{font-size:clamp(19px,3.1vh,33px)}
  .ls-opt{font-size:clamp(15px,2.25vh,24px)}
  .ex-steps li{font-size:clamp(14px,2.05vh,22px);line-height:1.5}
  .ex-prob{font-size:clamp(16px,2.6vh,29px)}
  .sm-list li{font-size:clamp(14px,2.05vh,22px);line-height:1.5}
  .vc-w{font-size:clamp(17px,2.9vh,32px)}
  .vc-d{font-size:clamp(15px,2.2vh,24px);line-height:1.5}
  .pr-q{font-size:clamp(17px,2.7vh,30px)}
  .cp-tab td,.cp-tab th{font-size:clamp(13px,1.9vh,21px);line-height:1.5}
}

/* ปรับลงเล็กน้อยจากรอบก่อน — ขยายไปแล้วมี 8 หน้าที่เนื้อหายาวเริ่มล้นจอ
   ค่าชุดนี้คือค่าใหญ่ที่สุดที่ยังทำให้ทุกหน้าอยู่ในจอเดียวครบ */
.ls-b{font-size:clamp(16px,2.55vh,28px);line-height:1.68}
.sm-list li{font-size:clamp(15px,2.15vh,24px)}
.ex-steps li{font-size:clamp(15px,2.15vh,24px)}
.ls-figrow .ls-b{font-size:clamp(15px,2.5vh,27px);line-height:1.66}

/* จอเตี้ย: ย่อภาพอิโมจิประกอบลง เพื่อคืนพื้นที่ให้ตัวหนังสือที่เพิ่งขยาย
   หน้าที่เนื้อหายาวที่สุดจะได้อยู่ในจอเดียวครบ */
@media (max-height:820px){
  .ls-art{font-size:clamp(34px,6.4vh,84px);margin-bottom:2px}
}

/* ภาพประกอบใหญ่ขึ้นด้วย เพราะหน้าที่มีภาพยังเหลือพื้นที่ด้านล่างอยู่มาก */
.ls-figrow .ls-pic svg.la{max-height:46vh}
.ls-figrow.wide .ls-pic svg.la{max-height:40vh}
.ex-row.has-pic .ls-pic svg.la{max-height:38vh}
.ex-row.wide .ls-pic svg.la{max-height:34vh}
.ls-pic.quiz svg.la{max-height:21vh}
.ls-pic.quiz svg.la-wide{max-height:15vh}

/* ภาพแนวกว้างถูกจำกัดด้วยความกว้างช่อง ไม่ใช่ความสูง จึงเพิ่มสัดส่วนช่องภาพให้อีก
   หน้าที่มีภาพจะได้ใช้พื้นที่จอเต็มขึ้น ไม่เหลือที่ว่างด้านล่างเยอะแบบเดิม */
.ls-figrow.wide .ls-pic{flex:0 0 54%;max-width:54%}
.ls-figrow .ls-pic{flex:0 0 42%;max-width:42%}
.ex-row.wide .ls-pic{flex:0 0 50%;max-width:50%}

/* หัวข้อบนหน้าที่กันสิทธิ์การเล่น (ลิงก์หมดอายุ · เกมของครู · เกมเฉพาะสมาชิก)
   ทั้งเว็บมี reset ที่ตั้ง h1–h6 เป็น font-size:inherit หัวข้อจึงเท่าตัวอักษรปกติ
   หน้ากลุ่มนี้ต้องอ่านปราดเดียวรู้เรื่อง จึงกำหนดขนาดให้ชัดเจน */
.panel h2.gate-title{font-size:clamp(21px,3.4vw,28px);line-height:1.3;color:#4c1d95;margin:6px 0 6px}

/* ปุ่มห้องแข่งสดแบบล็อก — คนที่ยังไม่ใช่ PRO เห็นปุ่มพร้อมเหตุผล ไม่ใช่ปุ่มหายไปเฉย ๆ */
.btn-live.locked{--btn-edge:#b45309;background:linear-gradient(135deg,#fcd34d,#f59e0b);color:#fff}

/* การ์ดแพ็กเกจ — สูงเท่ากันทั้งสามใบ (ค่าเริ่มต้นของ .plans คือ align-items:stretch)
   แพ็กเกจ PRO มีสิทธิ์เยอะกว่าอีกสองใบมาก ถ้าปล่อยไว้เฉย ๆ การ์ดฟรีจะมีพื้นที่ขาวโล่ง
   จึงใส่กล่องชวนอัปเกรดคั่นไว้ แล้วดันกล่องกับปุ่มไปชิดล่างด้วย margin-top:auto
   ช่องว่างที่เหลือจะไปอยู่เหนือกล่อง ทำให้ดูเป็นการจัดวางที่ตั้งใจ ไม่ใช่หน้าเว็บพัง */
.plan ul{flex:0 1 auto}
.plan .upsell{margin-top:auto;margin-bottom:12px;border-radius:16px;padding:12px 14px;
  font-size:14px;line-height:1.6;text-align:center;color:#5b21b6;
  background:linear-gradient(180deg,#f5f0ff,#faf7ff);border:2px dashed #c4b5fd}
.plan .upsell b{color:#4c1d95}
.plan.go .upsell{color:#92400e;background:linear-gradient(180deg,#fffbeb,#fffdf5);border-color:#fcd34d}
.plan.go .upsell b{color:#b45309}

/* ══ หัวการ์ดแพ็กเกจ ══
   ป้าย "บทเรียน + สร้างเกม + แข่งสด!" เดิมลอยอยู่มุมขวาบน "ในการ์ด"
   พอข้อความยาวขึ้นมันเลยกินพื้นที่มาทับป้ายชื่อแพ็กเกจ PRO
   แก้โดยย้ายป้ายขึ้นไปคร่อมขอบบนของการ์ด แล้วเว้นที่ด้านบนให้พอ
   ป้ายกับชื่อแพ็กเกจจึงอยู่คนละชั้น ไม่มีทางทับกันไม่ว่าข้อความจะยาวแค่ไหน */
.plan.pro{padding-top:40px}
.plan .ribbon{top:-15px;right:auto;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:13px;padding:7px 18px;border-radius:999px;
  border:3px solid #fff;box-shadow:0 6px 16px rgba(239,68,68,.35)}

/* ชื่อแพ็กเกจให้เด่นขึ้น — ตัวใหญ่ขึ้น และป้าย GO/PRO เป็นเม็ดสีทึบอ่านง่าย */
.plan .ptitle{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:25px;line-height:1.25}
.plan .badge-plan{margin-left:0;font-size:14px;padding:4px 14px;letter-spacing:.6px;
  border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.14)}
.plan.go .badge-plan{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff}
.plan.pro .badge-plan{background:linear-gradient(135deg,#fbbf24,#f97316);color:#fff}

/* ── ช่อง "รูปประกอบโจทย์" ในหน้าสร้างเกม ────────────────────────────────
   แยกจากช่องพิมพ์ข้อความ จึงใส่รูปพร้อมข้อความในข้อเดียวกันได้
   (ของเดิมช่องเดียวเลือกได้อย่างใดอย่างหนึ่ง พอแนบรูปช่องพิมพ์จะหายไป) */
.qimg{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.qimg-add{position:relative;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:#fff;border:2px dashed #d9c8ff;border-radius:14px;padding:6px 12px;
  color:#7c6ba3;font-weight:800;font-size:12.5px;line-height:1.25;white-space:nowrap}
.qimg-add:hover{border-color:#a78bfa;background:#faf7ff}
.qimg-add .qimg-ic{font-size:20px;line-height:1}
.qimg-add em{font-style:normal;font-size:11px;opacity:.75}
/* ช่องเลือกไฟล์วางทับปุ่มแบบโปร่งใส — Safari เปิดหน้าต่างเลือกรูปให้เฉพาะตอนกดโดนช่องไฟล์เอง
   (เหตุผลเดียวกับปุ่มใส่รูปของช่องอื่น อย่าเปลี่ยนไปสั่ง .click() ด้วยสคริปต์) */
.qimg-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.qimg-th{height:52px;max-width:96px;object-fit:contain;border-radius:10px;
  border:2px solid #eadcff;background:#fff;display:block}
.qimg-x{border:0;background:#fee2e2;color:#b91c1c;font-weight:800;font-size:12px;
  border-radius:10px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.qimg-x:hover{background:#fecaca}
@media (max-width:560px){
  .qimg{width:100%}
  .qimg-add{width:100%;justify-content:center}
}