/* ==========================================================================
   Suankularb Homework Hub — arcade skin
   ปาเลตต์อิงสีประจำโรงเรียน ชมพู–ฟ้า บนพื้นจอตู้เกมกลางคืน
   ========================================================================== */
:root{
  --night:#12101c;
  --night-2:#0b0a13;
  --panel:#1c1930;
  --panel-2:#262242;
  --line:#3a3358;
  --pink:#ff5fa2;
  --pink-dk:#c22e6e;
  --blue:#4fc3f7;
  --blue-dk:#1e7bb0;
  --gold:#ffd166;
  --green:#7be495;
  --red:#ff6b6b;
  --text:#ede9ff;
  --muted:#a79fc7;
  --hud-h:54px;
  color-scheme:dark;
}

html,body{height:100%;}
body{
  margin:0;background:var(--night);color:var(--text);
  font-family:'Mitr',system-ui,-apple-system,'Noto Sans Thai',sans-serif;
  font-weight:300;overflow:hidden;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
*{box-sizing:border-box;}
button{font-family:inherit;color:inherit;cursor:pointer;}
.px{font-family:'Press Start 2P',monospace;font-weight:400;letter-spacing:0;}
.tnum{font-variant-numeric:tabular-nums;}

/* ---- กรอบ 8-bit: ไม่มีมุมมน ใช้เงาซ้อนแทนเส้นขอบ ---- */
.frame{
  background:var(--panel);
  box-shadow:0 0 0 2px var(--night-2),0 0 0 5px var(--line),0 10px 0 5px rgba(0,0,0,.45);
}
.frame-pink{box-shadow:0 0 0 2px var(--night-2),0 0 0 5px var(--pink-dk),0 10px 0 5px rgba(0,0,0,.45);}

/* ==========================  เวที  ========================== */
#stage{position:fixed;inset:0;background:var(--night-2);}
#game{position:absolute;left:0;top:0;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

/* ป้ายชื่ออาคารลอยบนแมพ */
.bl{position:absolute;left:0;top:0;transform:translate3d(-999px,-999px,0);
  will-change:transform;white-space:nowrap;text-align:center;}
.bl b{display:inline-block;font-size:10.5px;font-weight:500;line-height:1.1;
  padding:3px 7px;background:rgba(12,10,20,.86);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);}
.bl.has b{background:var(--pink-dk);box-shadow:0 0 0 1px var(--pink);}
/* สีป้ายบอกความด่วนของงานที่ค้างอยู่ในตึกนั้น */
.bl.u-normal   b{background:#1e7bb0;box-shadow:0 0 0 1px #4fc3f7;}
.bl.u-medium   b{background:#a8801f;box-shadow:0 0 0 1px #ffd166;}
.bl.u-high     b{background:#b4531a;box-shadow:0 0 0 1px #ff9142;}
.bl.u-critical b{background:#a3182a;box-shadow:0 0 0 1px #ff4757;animation:alarm 1s steps(2) infinite;}
@keyframes alarm{50%{background:#ff4757;}}
/* โหมดเห็นทั้งโรงเรียน ตึกชิดกัน ป้ายต้องเล็กลงไม่งั้นชนกันเอง */
#labels.fit .bl b{font-size:9.5px;padding:2px 5px;}
#labels.fit .bl i{font-size:8px;padding:1px 5px;}
.bl i{display:block;width:fit-content;margin:2px auto 0;font-style:normal;font-size:9px;line-height:1.1;
  padding:2px 6px;background:rgba(12,10,20,.72);color:#cfc7ea;}
.bl em{display:inline-block;font-style:normal;margin-left:5px;color:var(--gold);font-weight:500;}

/* ==========================  HUD  ========================== */
#hud{position:fixed;inset:0;pointer-events:none;}
[hidden]{display:none!important;}
#hud > *{pointer-events:auto;}

#topbar{position:absolute;top:0;left:0;right:0;height:var(--hud-h);
  display:flex;align-items:center;gap:8px;padding:0 10px;
  padding-top:env(safe-area-inset-top,0px);
  padding-left:max(10px,env(safe-area-inset-left,0px));
  padding-right:max(10px,env(safe-area-inset-right,0px));
  background:none;}
#who{display:flex;align-items:center;gap:9px;min-width:0;
  padding:5px 12px 5px 6px;background:rgba(11,10,19,.9);
  box-shadow:inset 3px 0 0 var(--pink),0 0 0 2px var(--night-2);}
#avatar{width:32px;height:32px;flex:none;background:var(--blue-dk);
  box-shadow:0 0 0 2px var(--night-2),0 0 0 4px var(--blue);}
#who .nm{font-size:15px;font-weight:500;line-height:1.15;color:#fff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:28vw;}
#who .rm{font-size:10.5px;color:var(--blue);line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:32vw;}
.spacer{flex:1;}
#tools{display:flex;align-items:center;gap:8px;}

/* จอกว้างกว่าแมพ: ย้ายชื่อกับปุ่มไปอยู่ในพื้นที่ว่างสองข้าง แมพจะได้ใช้ความสูงเต็มจอ */
#hud.rails #topbar{position:absolute;inset:0;height:auto;padding:12px;
  padding-top:max(12px,env(safe-area-inset-top,0px));
  background:none;align-items:flex-start;pointer-events:none;}
#hud.rails #who,#hud.rails #tools{pointer-events:auto;}
#hud.rails #who{flex-direction:column;gap:7px;padding:10px 8px 11px;
  max-width:124px;text-align:center;box-shadow:inset 0 3px 0 var(--pink),0 0 0 2px var(--night-2);}
#hud.rails #avatar{width:40px;height:40px;}
#hud.rails #who .nm,#hud.rails #who .rm{max-width:104px;}
#hud.rails #who .nm{font-size:14px;}
#hud.rails #tools{flex-direction:column;align-items:center;gap:8px;width:116px;}
#hud.rails .stat{width:100%;justify-content:center;}

.stat{display:flex;align-items:center;gap:6px;font-size:11px;
  padding:7px 11px;background:rgba(11,10,19,.9);box-shadow:0 0 0 2px var(--night-2);}
.stat s{text-decoration:none;font-size:16px;line-height:1;}
.stat b{font-family:'Press Start 2P',monospace;font-size:13px;font-weight:400;}
.stat.pts{background:#33260f;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--gold);}
.stat.cns{background:#0d3048;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--blue);}
.stat.pts b{color:var(--gold);} .stat.cns b{color:var(--blue);}
.stat.stk{background:#3a1410;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px #ff9142;}
.stat.stk b{color:#ff9142;}

.iconbtn{width:44px;height:44px;flex:none;border:0;background:rgba(28,25,48,.95);
  box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line),0 3px 0 3px rgba(0,0,0,.45);
  font-size:20px;display:grid;place-items:center;position:relative;padding:0;}
.iconbtn:active{transform:translateY(3px);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line);}
/* แต่ละปุ่มมีสีของตัวเอง จะได้กดถูกโดยไม่ต้องอ่านไอคอน */
#btnBook{background:var(--pink-dk);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--pink),0 3px 0 3px rgba(0,0,0,.45);}
#btnBoard{background:#8a6412;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--gold),0 3px 0 3px rgba(0,0,0,.45);}
#btnView{background:#2f6b4a;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--green),0 3px 0 3px rgba(0,0,0,.45);}
#btnView:active{transform:translateY(3px);}
#btnMenu{background:var(--blue-dk);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--blue),0 3px 0 3px rgba(0,0,0,.45);}
#btnBook:active,#btnBoard:active,#btnMenu:active{transform:translateY(3px);}
/* ปุ่มปิดในแผงต่าง ๆ ไม่ต้องใหญ่เท่าปุ่มบนแมพ */
.card > header .iconbtn{width:36px;height:36px;font-size:16px;}
.iconbtn .dot{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;
  background:var(--gold);color:#2a2340;font-size:10px;line-height:20px;
  font-family:'Press Start 2P',monospace;box-shadow:0 0 0 2px var(--night-2);}

/* มินิแมพ */
#minimap{position:absolute;right:10px;bottom:10px;
  right:max(10px,env(safe-area-inset-right,0px));
  bottom:max(10px,env(safe-area-inset-bottom,0px));
  width:128px;height:88px;background:rgba(11,10,19,.85);
  box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line);image-rendering:pixelated;}

/* จอยสติ๊ก + ปุ่มแอ็กชัน (โผล่เฉพาะสัมผัส) */
#pad{position:absolute;left:0;bottom:0;width:170px;height:170px;display:none;pointer-events:none;}
#pad.on{display:block;}
#padbase,#padknob{position:absolute;border-radius:50%;pointer-events:none;}
#padbase{width:104px;height:104px;background:rgba(58,51,88,.35);
  box-shadow:inset 0 0 0 3px rgba(167,159,199,.35);}
#padknob{width:46px;height:46px;background:var(--blue);
  box-shadow:0 0 0 3px var(--night-2),0 0 14px rgba(79,195,247,.55);}
#abtn{position:absolute;right:16px;bottom:108px;width:74px;height:74px;border:0;
  right:max(16px,env(safe-area-inset-right,0px));
  border-radius:50%;background:var(--pink);color:#fff;font-size:13px;font-weight:500;
  box-shadow:0 0 0 4px var(--night-2),0 6px 0 4px var(--pink-dk);display:none;}
#abtn.on{display:block;}
#abtn:active{transform:translateY(4px);box-shadow:0 0 0 4px var(--night-2),0 2px 0 4px var(--pink-dk);}

/* คำใบ้ปฏิสัมพันธ์ */
#prompt{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  bottom:max(14px,env(safe-area-inset-bottom,0px));
  padding:8px 14px;background:rgba(11,10,19,.94);box-shadow:0 0 0 2px var(--pink);
  font-size:12px;display:none;align-items:center;gap:8px;max-width:70vw;}
#prompt.on{display:flex;}
#prompt kbd{font-family:'Press Start 2P',monospace;font-size:9px;background:var(--pink);
  color:#fff;padding:4px 5px;}

/* ข้อความลอย (+คะแนน) */
#toasts{position:absolute;left:50%;top:calc(var(--hud-h) + 12px);transform:translateX(-50%);
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;}
.toast{padding:7px 14px;background:rgba(11,10,19,.95);box-shadow:0 0 0 2px var(--green);
  font-size:12px;animation:pop .35s ease-out, fade .4s ease-in 1.9s forwards;}
.toast.warn{box-shadow:0 0 0 2px var(--gold);}
@keyframes pop{from{transform:scale(.8) translateY(-8px);opacity:0}}
@keyframes fade{to{opacity:0;transform:translateY(-10px)}}

/* ==========================  ผู้เล่นคนอื่น + แชต  ========================== */
.tag{position:absolute;left:0;top:0;transform:translate3d(-999px,-999px,0);
  pointer-events:none;white-space:nowrap;text-align:center;will-change:transform;}
.tag b{display:inline-block;font-size:9.5px;font-weight:500;line-height:1;padding:2px 6px;
  background:rgba(12,10,20,.85);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2);}
.tag .bub{display:block;max-width:170px;margin:0 auto 3px;padding:4px 7px;
  font-size:10.5px;line-height:1.35;white-space:normal;word-break:break-word;
  background:#fff;color:#241f38;box-shadow:0 2px 0 rgba(0,0,0,.35);}
.tag .bub:empty{display:none;}

#chat{position:absolute;right:10px;bottom:10px;width:min(300px,calc(100vw - 20px));
  right:max(10px,env(safe-area-inset-right,0px));
  bottom:max(10px,env(safe-area-inset-bottom,0px));
  background:rgba(17,15,30,.95);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line);
  display:flex;flex-direction:column;z-index:30;}
#chat .chead{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;
  background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--line);font-size:11.5px;}
#chat .chead span{margin-left:auto;font-size:10px;color:var(--green);}
#chatlog{max-height:34vh;overflow-y:auto;padding:8px 10px;display:flex;
  flex-direction:column;gap:5px;font-size:11.5px;line-height:1.5;}
#chatlog .cm b{color:var(--blue);font-weight:500;}
#chatlog .cm.me b{color:var(--pink);}
#chatlog .cm.old{opacity:.6;}
#chatform{display:flex;gap:6px;padding:8px;box-shadow:inset 0 2px 0 var(--line);}
#chatinput{flex:1;min-width:0;padding:8px;font-size:12px;}
#btnChat{background:#2f4a6b;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--blue),0 3px 0 3px rgba(0,0,0,.45);}
#btnChat:active{transform:translateY(3px);}

/* ==========================  แผงเนื้อหา  ========================== */
#sheet{position:fixed;inset:0;background:rgba(6,5,12,.72);display:none;
  align-items:center;justify-content:center;padding:14px;z-index:90;}
#sheet.on{display:flex;}
.card{width:min(680px,100%);max-height:88%;display:flex;flex-direction:column;
  background:var(--panel);box-shadow:0 0 0 2px var(--night-2),0 0 0 5px var(--line);}
.card.wide{width:min(940px,100%);}
.card > header{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--line);}
.card > header .ttl{flex:1;min-width:0;}
.card > header h2{margin:0;font-size:15px;font-weight:500;line-height:1.25;
  text-wrap:balance;overflow:hidden;text-overflow:ellipsis;}
.card > header .sub{font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card > .body{padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.card > footer{padding:12px 14px;background:var(--panel-2);
  box-shadow:inset 0 2px 0 var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}

.btn{border:0;padding:10px 16px;font-size:12px;font-weight:500;background:var(--panel-2);
  box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line),0 4px 0 3px rgba(0,0,0,.4);}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line);}
.btn.go{background:var(--pink);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--pink-dk),0 4px 0 3px rgba(0,0,0,.4);}
.btn.go:active{box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--pink-dk);}
.btn.alt{background:var(--blue-dk);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--blue),0 4px 0 3px rgba(0,0,0,.4);}
.btn.sm{padding:7px 11px;font-size:11px;}
.btn.danger{background:#5a2436;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--red);}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* รายการงาน */
.qlist{display:flex;flex-direction:column;gap:8px;}
.q{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:10px 12px;background:var(--panel-2);box-shadow:inset 3px 0 0 var(--line);
  text-align:left;border:0;width:100%;}
.q:active{transform:translateX(2px);}
.q.pending{box-shadow:inset 3px 0 0 var(--pink);}
.q.done{box-shadow:inset 3px 0 0 var(--green);opacity:.62;}
.q.late{box-shadow:inset 3px 0 0 var(--red);}
.q .ic{font-size:17px;}
.q .m{min-width:0;}
.q .m h3{margin:0;font-size:12.5px;font-weight:500;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.q .m p{margin:2px 0 0;font-size:10px;color:var(--muted);line-height:1.3;}
.q .r{text-align:right;font-size:10px;color:var(--muted);white-space:nowrap;}
.q .r b{display:block;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--gold);}
.q.done .r b{color:var(--green);}

.chip{display:inline-block;padding:2px 6px;font-size:9px;background:var(--line);
  vertical-align:middle;letter-spacing:.03em;}
.chip.pink{background:var(--pink-dk);} .chip.green{background:#2d6b45;color:var(--green);}
.chip.red{background:#5a2436;color:var(--red);} .chip.blue{background:var(--blue-dk);} .chip.gold{background:#7a5a14;color:var(--gold);}
.chip.orange{background:#7a3d14;color:#ff9142;}
.q .sw{width:26px;height:26px;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px rgba(255,255,255,.25);}

.empty{text-align:center;color:var(--muted);font-size:12px;padding:30px 10px;line-height:1.7;}
.empty .big{font-size:34px;display:block;margin-bottom:8px;}

/* รายละเอียดงาน */
.detail p.desc{margin:0 0 14px;font-size:12.5px;line-height:1.8;color:#d8d2f0;}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.meta div{background:var(--panel-2);padding:7px 10px;font-size:10px;color:var(--muted);}
.meta div b{display:block;color:var(--text);font-size:12px;font-weight:500;margin-top:2px;}
label.fl{display:block;font-size:11px;color:var(--muted);margin:0 0 5px;}
textarea,input[type=text],input[type=date],input[type=number],select{
  width:100%;background:var(--night-2);color:var(--text);border:0;padding:10px;
  font-family:inherit;font-size:12.5px;font-weight:300;
  box-shadow:inset 0 0 0 2px var(--line);}
textarea{min-height:88px;resize:vertical;line-height:1.7;}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.row > *{flex:1;min-width:130px;}
.fgroup{margin-bottom:12px;}

/* ตารางอันดับ */
.lb{display:flex;flex-direction:column;gap:5px;}
.lbrow{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;
  padding:8px 10px;background:var(--panel-2);font-size:12px;}
.lbrow .rk{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--muted);text-align:center;}
.lbrow.me{box-shadow:inset 0 0 0 2px var(--pink);}
.lbrow.top1 .rk{color:var(--gold);} .lbrow.top2 .rk{color:#cfd8e3;} .lbrow.top3 .rk{color:#d59a6a;}
.lbrow .sc{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--gold);}
.lbrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lbrow .nm small{color:var(--muted);font-size:10px;margin-left:6px;font-weight:300;}

/* ==========================  หน้าเข้าสู่ระบบ  ========================== */
/* overflow-y:auto สำคัญมาก บนมือถือแนวนอนจอเตี้ย ๆ กล่องล็อกอินจะสูงเกินจอ
   ถ้าไม่ให้เลื่อน ปุ่ม "ลืมรหัส?" จะโดนตัดหายและกดไม่ได้เลย */
#login{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;
  overflow-y:auto;padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  background:radial-gradient(120% 90% at 50% -10%,#2a1c3f 0%,var(--night-2) 65%);}
#login.on{display:flex;}
#login .top{padding:18px 20px 12px;text-align:center;
  padding-top:max(18px,env(safe-area-inset-top,0px));}
#login .crest{font-size:26px;line-height:1;}
#login h1{margin:8px 0 4px;font-family:'Press Start 2P',monospace;font-size:15px;
  font-weight:400;line-height:1.5;color:#fff;
  text-shadow:0 2px 0 var(--pink-dk),0 4px 0 rgba(0,0,0,.5);}
#login .thai{font-size:12px;color:var(--blue);font-weight:400;letter-spacing:.08em;}
#login .hint{font-size:11px;color:var(--muted);margin-top:8px;}
.loginbox{width:min(340px,calc(100% - 32px));margin:6px auto 0;padding:16px;
  background:var(--panel);box-shadow:0 0 0 2px var(--night-2),0 0 0 5px var(--line);}
.loginbox .fl{margin-top:10px;}
.loginbox .fl:first-child{margin-top:0;}
.loginbox input[type=email],.loginbox input[type=password]{margin-bottom:2px;}
.loginbox .remember{display:flex;align-items:center;gap:8px;margin:12px 0 2px;
  font-size:11.5px;color:var(--muted);cursor:pointer;}
.loginbox .remember input{width:16px;height:16px;accent-color:var(--pink);}
.loginbox .lierr{min-height:16px;font-size:11px;color:var(--red);margin:6px 0 2px;}
.loginbox .btn{width:100%;}
.linklike{display:block;width:100%;margin-top:10px;background:none;border:0;padding:6px;
  font-family:inherit;font-size:11px;color:var(--blue);text-decoration:underline;cursor:pointer;}
.linklike:hover{color:var(--pink);}
#login .grid{flex:1;overflow-y:auto;padding:4px 16px 16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:7px;align-content:start;}
.sbtn{display:flex;align-items:center;gap:8px;padding:8px 9px;border:0;text-align:left;
  background:var(--panel);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line);}
.sbtn:active{transform:translateY(2px);}
.sbtn .av{width:22px;height:22px;flex:none;box-shadow:0 0 0 2px var(--night-2);}
.sbtn .t{min-width:0;}
.sbtn .t b{display:block;font-size:11.5px;font-weight:400;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sbtn .t i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
#login .bot{padding:10px 16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  background:rgba(11,10,19,.8);box-shadow:inset 0 2px 0 var(--line);
  padding-bottom:max(10px,env(safe-area-inset-bottom,0px));}

/* ==========================  เช็กชื่อรายวัน  ========================== */
.checkin{padding:14px;background:var(--panel-2);margin-bottom:16px;
  box-shadow:inset 4px 0 0 #ff9142;}
.checkin .row1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.checkin .streak{font-size:13px;}
.checkin .streak b{font-family:'Press Start 2P',monospace;font-size:19px;color:#ff9142;
  margin:0 4px;vertical-align:-1px;}
.checkin .best{font-size:10.5px;color:var(--muted);margin-left:auto;}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:12px 0;}
.wday{text-align:center;padding:7px 0 6px;background:var(--night-2);
  box-shadow:inset 0 0 0 2px var(--line);}
.wday i{display:block;font-style:normal;font-size:9.5px;color:var(--muted);}
.wday s{display:block;text-decoration:none;font-size:14px;line-height:1.3;color:var(--line);}
.wday.on{box-shadow:inset 0 0 0 2px var(--green);background:#16321f;}
.wday.on s{color:var(--green);}
.wday.today{box-shadow:inset 0 0 0 2px var(--pink);}
.wday.today i{color:var(--pink);}
.checkin .hint{font-size:10.5px;color:var(--muted);line-height:1.7;margin:10px 0 0;}
.checkin .btn{width:100%;}

.quest{padding:13px 14px;background:var(--panel-2);margin-bottom:16px;
  box-shadow:inset 4px 0 0 var(--pink);}
.quest.done{box-shadow:inset 4px 0 0 var(--green);}
.quest .qtitle{display:flex;align-items:baseline;gap:8px;font-size:12.5px;font-weight:500;
  margin-bottom:9px;}
.quest .qtitle b{margin-left:auto;font-family:'Press Start 2P',monospace;font-size:13px;
  color:var(--pink);}
.quest.done .qtitle b{color:var(--green);}
.quest .qhint{font-size:10.5px;color:var(--muted);line-height:1.7;margin:9px 0 0;}
.quest .btn{width:100%;margin-top:10px;}

/* ==========================  มินิเกม  ========================== */
.quiz .qtext{font-size:14px;line-height:1.6;margin:0 0 14px;text-wrap:balance;}
.opts{display:grid;gap:8px;}
.opt{text-align:left;padding:11px 13px;border:0;background:var(--panel-2);font-size:12.5px;
  box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line);}
.opt:active{transform:translateY(2px);}
.opt.ok{background:#2d6b45;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--green);}
.opt.no{background:#5a2436;box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--red);}
.timer{height:8px;background:var(--night-2);margin-bottom:12px;}
.timer i{display:block;height:100%;background:var(--pink);transition:width .1s linear;}
.qmeta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);
  margin-bottom:6px;font-family:'Press Start 2P',monospace;gap:10px;}
.qmeta .thai{font-family:'Mitr',system-ui,sans-serif;font-size:11px;font-weight:400;}

.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:0 auto;}
.mcard{aspect-ratio:1;border:0;background:var(--blue-dk);font-size:22px;
  box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--blue);display:grid;place-items:center;}
.mcard span{opacity:0;transition:opacity .12s;}
.mcard.up,.mcard.got{background:var(--panel-2);box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--line);}
.mcard.up span,.mcard.got span{opacity:1;}
.mcard.got{box-shadow:0 0 0 2px var(--night-2),0 0 0 3px var(--green);}

.result{text-align:center;padding:18px 10px;}
.result .big{font-family:'Press Start 2P',monospace;font-size:26px;color:var(--gold);
  display:block;margin:10px 0;}
.result p{font-size:12.5px;color:var(--muted);line-height:1.7;margin:0;}

/* ตารางเลือกนักเรียนรายคน ใช้ร่วมกับฟอร์มในเว็บพอร์ทัล */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;}
.spick{display:flex;align-items:center;gap:7px;padding:7px 8px;background:var(--panel-2);
  font-size:11px;cursor:pointer;box-shadow:inset 0 0 0 2px transparent;}
.spick.on{box-shadow:inset 0 0 0 2px var(--pink);}
.spick input{accent-color:var(--pink);}

/* ==========================  หมุนจอ  ========================== */
#rotate{position:fixed;inset:0;z-index:99;background:var(--night-2);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;}
#rotate .ph{width:54px;height:88px;box-shadow:0 0 0 4px var(--pink);
  animation:tip 2s ease-in-out infinite;}
@keyframes tip{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#rotate p{margin:0;font-size:13px;line-height:1.8;}
#rotate small{color:var(--muted);font-size:11px;}
@media (orientation:portrait) and (max-width:860px){
  #rotate{display:flex;}
}
:root.norot #rotate{display:none!important;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

/* ==========================  แนบรูปงาน  ========================== */
.uploader{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px;background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--line);}
.upstat{font-size:10.5px;color:var(--muted);flex:1;min-width:130px;}
.upstat.busy{color:var(--blue);} .upstat.ok{color:var(--green);} .upstat.bad{color:var(--red);}
.shot{margin-top:10px;background:var(--night-2);padding:6px;
  box-shadow:inset 0 0 0 2px var(--line);}
.shot img{display:block;width:100%;max-height:44vh;object-fit:contain;
  image-rendering:auto;background:#000;}

/* ==========================  หน้าจอกำลังโหลด  ========================== */
#boot{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% -10%,#2a1c3f 0%,var(--night-2) 65%);padding:20px;}
.bootcard{text-align:center;max-width:340px;}
.bootcard .rose{font-size:30px;animation:beat 1.4s ease-in-out infinite;}
@keyframes beat{50%{transform:scale(1.14)}}
.bootcard h2{margin:12px 0 6px;font-size:14px;font-weight:500;}
.bootcard p{margin:0 0 14px;font-size:11.5px;color:var(--muted);line-height:1.7;}

/* ====================  โทนสว่างเฉพาะหน้าเข้าสู่ระบบ  ====================
   ใช้กับ #login (นักเรียน) และ #gate (ครู) เท่านั้น
   ตัวเกมกับพอร์ทัลด้านในยังเป็นโทนมืดเหมือนเดิม
   เลือกขาวนวลอมม่วง ไม่ใช่ขาวจ้า จะได้ไม่แสบตาตอนกลางคืน
   ประกาศตัวแปรทับที่ตัวกล่อง ลูกหลานที่ใช้ var() จึงเปลี่ยนตามทั้งหมด
   บล็อกนี้ต้องอยู่ท้ายไฟล์ เพราะบางกฎ (เช่น #login .bot) มี specificity เท่ากับ
   ของเดิม ถ้าวางไว้ก่อนจะโดนกฎเดิมทับ */
#login,#gate{
  color-scheme:light;
  --night-2:#dbe9f4;
  --panel:#ffffff;
  --panel-2:#eef5fb;
  --line:#b9d5e8;
  --text:#17324a;
  --muted:#5a7890;
  --blue:#0b6fa4;
  --pink:#e0468c;
  --red:#c2384a;
  color:var(--text);
  /* ชมพู-ฟ้า สีประจำโรงเรียน ไล่จากชมพูมุมบนไปฟ้าที่ขอบล่าง
     คุมให้อ่อนทั้งคู่ จะได้เป็นพื้นหลังไม่ใช่ตัวเด่น */
  background:linear-gradient(165deg,#ffe6f1 0%,#fdf6fa 42%,#eaf4fc 78%,#dcecf8 100%);
  scrollbar-color:#a9cbe2 #eaf4fc;
}
/* ชื่อหัวเรื่องเดิมเป็นตัวขาวขอบชมพู พอพื้นสว่างจะจมหาย เลยกลับเป็นตัวชมพูขอบขาว */
#login h1,#gate .gatebox h1{
  color:var(--pink-dk);
  text-shadow:0 2px 0 #fff,0 3px 0 rgba(23,50,74,.18);
}
/* ช่องอีเมลกับรหัสไม่เคยมี CSS กำหนดพื้นหลัง มันอาศัย color-scheme ของเบราว์เซอร์
   พอสลับเป็นโทนสว่างจึงต้องกำหนดเองให้ชัด ไม่งั้นแต่ละเบราว์เซอร์จะไม่เหมือนกัน */
#login input[type=email],#login input[type=password],
#gate input[type=email],#gate input[type=password]{
  width:100%;background:#fff;color:var(--text);border:0;padding:10px;
  font-family:inherit;font-size:12.5px;font-weight:300;
  box-shadow:inset 0 0 0 2px var(--line);
}
#login input::placeholder,#gate input::placeholder{color:#8fa8bb;}
/* ปุ่มเดิมมีเงาดำหนา ๆ ใต้ปุ่ม บนพื้นสว่างจะดูหนักไป ลดให้เบาลง */
#login .btn,#gate .btn{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line),0 4px 0 3px rgba(23,50,74,.22);}
#login .btn:active,#gate .btn:active{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line);}
/* ปุ่มหลักพื้นชมพู ถ้าใช้ตัวอักษรสีเข้มตามธีมสว่างจะได้คอนทราสต์แค่ 3.3 ไม่ผ่าน AA
   เลยบังคับเป็นตัวขาวเฉพาะปุ่มนี้ */
#login .btn.go,#gate .btn.go{color:#fff;background:var(--pink-dk);
  box-shadow:0 0 0 2px #fff,0 0 0 3px #93214f,0 4px 0 3px rgba(23,50,74,.22);}
#login .btn.go:active,#gate .btn.go:active{box-shadow:0 0 0 2px #fff,0 0 0 3px #93214f;}
#login .loginbox,#gate .gatebox{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--line),0 6px 18px rgba(23,50,74,.12);}
/* แถบล่างใส่สีมืดไว้ตรง ๆ ไม่ได้ผ่านตัวแปร ต้องเขียนทับเอง */
#login .bot{background:rgba(255,255,255,.75);}
/* ปุ่มรองพื้นน้ำเงินเข้ม ตัวอักษรต้องเป็นสีขาว ไม่งั้นอ่านไม่ออกบนธีมสว่าง */
#login .btn.alt,#gate .btn.alt{color:#fff;
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--blue-dk),0 4px 0 3px rgba(23,50,74,.22);}
#login .btn.alt:active,#gate .btn.alt:active{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--blue-dk);}