/* ==========================================================================
   UNIDEA — landing.css
   ชั้นปรับหน้าแรกอย่างเดียว ทับ style.css เฉพาะใน #login-screen
   ห้องคุยกับเกมไม่โดนกระทบ เพราะทุกกฎมี #login-screen นำหน้า

   ทิศทางเดิม: โปสเตอร์ริโซกราฟติดบอร์ดมหาลัย — ตอนนี้พื้นเป็นภาพลายที่เจ้าของวาด โทนเดียวกับโลโก้
   งานรอบนี้ไม่เปลี่ยนทิศทาง แต่ดันให้ "พิมพ์" มากขึ้น: หมึกซ้อนเหลื่อม เงาแข็ง
   ขอบคม แทนเงาฟุ้งแบบการ์ดเว็บทั่วไป
   ========================================================================== */

/* ---------- พื้นหลัง ----------
   ภาพที่เจ้าของวาดเอง (public/login-bg.jpg) — แถบแนวตั้งส้มอิฐ/ม่วงหม่น/มัสตาร์ด
   สลับกับจอวิดีโอคอลจากโลโก้ บนพื้นครีม ใช้แทนลายที่เขียนด้วย CSS ทั้งหมด

   ไฟล์ที่ได้มา 1212x1350 ถูกตัดเหลือ 1208x1212 ให้เป็นกระเบื้องที่ต่อกันไม่เห็นรอย
   (วัดจากพิกเซลจริง: แนวตั้งซ้ำทุก 1212px เป๊ะ · แนวนอนวาดมือ ซ้ำราว 403px สามชุด
    ตัดที่ 1208 แถบส้มขอบขวาจะต่อกับขอบซ้ายได้กว้าง 33px เท่าแถบอื่นพอดี)
   ⚠️ ได้ไฟล์วาดใหม่มาเมื่อไหร่ ต้องวัดแล้วตัดกระเบื้องใหม่ ไม่งั้นเห็นรอยต่อซ้ำทั้งจอ

   แสดงที่ครึ่งหนึ่งของขนาดไฟล์ = คมบนจอ 2x และแถบกว้างราว 16px
   ใหญ่กว่านี้ลายจะหนาจนแย่งสายตาจากแผ่นโปสเตอร์ จอแคบย่อลงอีกให้ยังเห็นลายครบชุด
   สีสำรองคือ --ground ซึ่งดูดมาจากครีมในภาพเดียวกัน ระหว่างรอโหลดจึงไม่กระพริบ */
#login-screen::before {
  background: var(--ground) url('login-bg.jpg') repeat center top / 604px auto;
}
@media (max-width: 939px) {
  #login-screen::before { background-size: 420px auto; }
}

/* ---------- ตะแกรงฮาล์ฟโทน: ถอดออกแล้ว ----------
   style.css ตั้งลายจุดไว้ที่ #login-screen::after หน้าแรกปิดทิ้งด้วย content: none
   (ปิดที่ content ไม่ใช่ background — ไม่งั้นเหลือกล่อง fixed เปล่า ๆ ค้างอยู่ทั้งจอ)

   เหตุผล: พื้นมีลายโลโก้เป็นตัวหลักแล้ว ซึ่งเป็นลายจุด/ลายเส้นเหมือนกัน
   ซ้อนสองชั้นทำให้พื้นรกโดยไม่ได้อะไรเพิ่ม เลือกเก็บลายที่เป็นของแบรนด์ไว้
   ห้องคุย (#chat-screen) เป็นครีมเรียบ ไม่มีทั้งลายและฮาล์ฟโทน (ดูเหตุผลใน style.css) */
#login-screen::after { content: none; }

/* ---------- แผ่นโปสเตอร์ ----------
   เนื้อหาทั้งหมดอยู่บนกระดาษ ไม่ได้วางบนภาพลายพื้นหลังตรง ๆ

   ก่อนหน้านี้ชมพูสดเต็มจอ 100% แล้วตัวหนังสือหมึกม่วงวางทับลงไปเลย
   สองสีนี้เข้มใกล้เคียงกันแต่คนละ hue ขอบตัวอักษรเลย "สั่น" (simultaneous contrast)
   อ่านนาน ๆ ตาล้าเร็วมาก และชมพูสดเต็มจอเองก็เป็นภาระของตาอยู่แล้ว

   โปสเตอร์จริงไม่ได้ราดหมึกเต็มแผ่น — มันคือกระดาษเป็นหลัก หมึกเป็นจุดเน้น
   ย้ายเนื้อหาขึ้นกระดาษขาว แล้วปล่อยให้ลายพื้นหลังทำหน้าที่เป็น "ขอบรอบนอก"
   ได้ทั้งความสบายตาและยังเห็นลายของแบรนด์เต็ม ๆ รอบแผ่น */
#login-screen .login-grid {
  position: relative;
  width: min(1140px, calc(100% - clamp(1rem, 4vw, 3.5rem)));
  gap: clamp(2.25rem, 4.5vw, 4.5rem);
  margin-block: clamp(1rem, 3vw, 2.25rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
  background: var(--paper);
  border: var(--ink-w) solid var(--ink);
  border-radius: clamp(18px, 2.5vw, 30px);
  /* เงาแข็งชั้นเดียว ไม่มีเพลทส้มเหลื่อม
     เคยลองซ้อนเพลทส้มแล้ว พอแผ่นใหญ่ขนาดนี้ แถบส้มหนา 12px ที่วิ่งยาวตลอด
     ขอบขวากับขอบล่าง อ่านเป็น "กรอบสองชั้น" ไม่ได้อ่านเป็นหมึกพิมพ์เหลื่อม
     — ลูกเล่นเหลื่อมเพลทใช้ได้ดีกับของชิ้นเล็ก (ป้าย/การ์ด) ไม่ใช่แผ่นเต็มหน้า */
  box-shadow: 14px 14px 0 var(--ink);
}
@media (min-width: 940px) {
  #login-screen .login-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
}

/* ---------- สติกเกอร์ประดับ ----------
   เคยมีดาวกระจายอำพัน (มุมบนซ้าย) กับม่วงแดง (มุมล่างขวา) แปะคร่อมขอบแผ่นโปสเตอร์ หมุนช้า ๆ บนจอกว้าง
   เอาออกแล้ว (เจ้าของสั่ง 16 ก.ย. 2569) — ::before/::after ของ .login-grid ว่าง ใช้ต่อได้
   ดาวบนการ์ดหน้าพักในห้องคุย (style.css .empty-pane) เป็นคนละชุด ยังอยู่ */

/* ---------- โลโก้ ----------
   ป้ายเชอร์รี่เดิมเล็กกว่าหัวเรื่องมากจนไม่มีน้ำหนัก ขยายขึ้นและใส่เงาแข็ง
   ให้เหมือนสติกเกอร์ที่ถูกกดติดกระดาษจริง */
/* หน้าแรกเป็นที่ที่โลโก้ต้องมีน้ำหนักที่สุด — ใหญ่กว่าที่อื่นในเว็บราว 1.4 เท่า
   ขนาดวิ่งตามความกว้างจอ (clamp) เพราะจอ 320px กับ 1920px ต้องการคนละขนาด
   แต่สัดส่วนระหว่างจอมือถือกับตัวอักษรถูกล็อกด้วย aspect-ratio ใน style.css
   จึงขยายได้โดยไม่เสียสัดส่วนของโลโก้ */
#login-screen .wordmark {
  gap: 0.8rem;
  margin-bottom: clamp(1.75rem, 3.4vw, 2.5rem);
  padding: clamp(0.5rem, 0.9vw, 0.68rem) clamp(0.95rem, 1.6vw, 1.2rem)
           clamp(0.5rem, 0.9vw, 0.68rem) clamp(0.68rem, 1.1vw, 0.85rem);
  border-radius: clamp(20px, 2vw, 26px);
}
#login-screen .wordmark__mark { width: clamp(2.5rem, 2.9vw, 3.1rem); }

/* หน้าแรกเป็นที่ที่โลโก้ต้องมีน้ำหนักที่สุด ขยายกว่าที่อื่น
   (การเลียนทรงตัวอักษรด้วยฟอนต์ + text-stroke ถูกถอดออกแล้ว
    ตอนนี้ใช้ตัวอักษรจริงจากไฟล์โลโก้ ดู .wordmark__text ใน style.css) */
#login-screen .wordmark__text { height: clamp(2.8rem, 3.25vw, 3.45rem); }

/* ---------- หัวเรื่อง ----------
   line-height ต่ำกว่า 1.3 ไม่ได้: วรรณยุกต์บน "เจอเพื่อนใหม่" จะชนสระล่างของ
   บรรทัดถัดไป — ภาษาไทยกินความสูงสองชั้น ไม่เหมือนหัวเรื่องอังกฤษ
   letter-spacing ก็ห้ามแน่นกว่า -0.03em ด้วยเหตุผลเดียวกัน */
/* ฟอนต์หัวเรื่องหน้าแรก = Mitr ตัวหนา ไม่มีหัว (เจ้าของเลือกจาก 6 แบบ 15 ก.ย. 2569 — ภาพเทียบ shots/font-compare.png)
   เปลี่ยนเฉพาะหัวเรื่องนี้ หัวข้ออื่นทั้งเว็บยังเป็น Mali ตามเดิม (เจ้าของเลือก)
   Mali ต่อท้ายไว้เผื่อโหลด Mitr ไม่ขึ้น หน้าตาจะกลับเป็นแบบเดิม ไม่ใช่ฟอนต์ระบบ */
#login-screen .pitch__headline {
  font-family: 'Mitr', 'Mali', 'Anuphan', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 1.1rem + 6.4vw, 4.9rem);
  line-height: 1.3;
  letter-spacing: -0.03em;
  margin-bottom: 1.4rem;
}

/* ขีดเน้นปากกาเมจิก: ไล่ให้หัวท้ายจางลง จะได้ดูเหมือนปลายปากกาที่ยกขึ้น
   ไม่ใช่แถบสี่เหลี่ยมตัดตรง */
#login-screen .pitch__accent {
  background-image: linear-gradient(100deg,
    transparent 0%,
    color-mix(in oklch, var(--sun) 86%, transparent) 2.5%,
    color-mix(in oklch, var(--sun) 86%, transparent) 97.5%,
    transparent 100%);
  background-size: 104% 0.52em;
  background-position: -2% 80%;
  padding-inline: 0.1em;
}

#login-screen .pitch__lede {
  font-size: clamp(1.02rem, 0.96rem + 0.38vw, 1.2rem);
  line-height: 1.85;
  max-width: 35ch;
  margin-bottom: 2.25rem;
}

/* ---------- ข้อดีสามข้อ ----------
   ให้จุดสีมี "หมึกเลอะ" รอบตัว (box-shadow วงนอกสีเดียวกันแบบจาง)
   เป็นรายละเอียดเดียวที่ทำให้จุดกลม ๆ ดูเป็นงานพิมพ์แทนที่จะเป็น bullet ปกติ */
#login-screen .pitch__points { gap: 0.7rem; }
#login-screen .pitch__points li {
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 42ch;
  gap: 0.8rem;
  align-items: center;
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
  /* ชมพูหม่นจาง ๆ (--magenta) — บนกระดาษ พื้นกระดาษเปล่าจะกลืนหายไปเลย */
  background: color-mix(in srgb, var(--magenta) 13%, var(--paper));
  border: var(--ink-w) solid var(--ink);
  box-shadow: var(--drop-1);
  width: fit-content;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
#login-screen .pitch__points li:nth-child(odd)  { transform: rotate(-0.7deg); }
#login-screen .pitch__points li:nth-child(even) { transform: rotate(0.6deg); margin-left: 1.1rem; }
#login-screen .pitch__points li:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: var(--drop-2);
}
/* จุดสีเป็นหมึกหยดเล็ก ๆ ที่มีขอบของตัวเอง — จุดกลมเปล่า ๆ อ่านว่า bullet ของ list
   ส่วนจุดที่มีขอบหมึกอ่านว่าสติกเกอร์กลม ซึ่งเป็นภาษาเดียวกับที่เหลือทั้งหน้า */
#login-screen .dot {
  width: 0.82rem;
  height: 0.82rem;
  translate: 0 0.18rem;
  border: 1.5px solid var(--ink);
}

/* ---------- แผงฟอร์ม ----------
   จุดที่ต่างจากของเดิมมากที่สุด: เงาเดิมเป็นเงาฟุ้งใต้การ์ด ซึ่งเป็นภาษาของ
   เว็บแอปทั่วไป ไม่ใช่ของโปสเตอร์ เปลี่ยนเป็นเงาแข็งเยื้องขวาล่าง + ขอบหมึกคม
   = แผ่นกระดาษที่ถูกวางซ้อนบนโปสเตอร์ เข้ากับป้ายเทปที่มีอยู่แล้ว
   เงาฟุ้งยังเก็บไว้ชั้นสอง แต่หรี่มาก ใช้แค่ยึดการ์ดไม่ให้ลอย */
/* การ์ดฟอร์มอยู่บนกระดาษขาวแล้ว ถ้าเป็นขาวบนขาวมันจะหายไปกับพื้น
   ใส่พื้นเหลืองจาง ๆ ให้แยกตัวออกมาเป็น "ใบสมัครที่แปะทับโปสเตอร์"
   เงาแข็งเหลือชั้นเดียว (หมึกม่วง) เพราะเพลทส้มย้ายไปอยู่ที่ขอบแผ่นโปสเตอร์แล้ว
   มีเพลทเหลื่อมสองที่ในภาพเดียวจะอ่านว่ารก ไม่ได้อ่านว่าตั้งใจ */
#login-screen .panel {
  background: color-mix(in srgb, var(--sun) 15%, var(--paper));
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 3.4vw, 2.6rem);
  box-shadow: var(--drop-3);
}

/* เทปกาว — ทึบ ขอบหมึกเต็ม ไม่มีเงาฟุ้ง เพราะเทปแปะแนบกระดาษ ไม่ได้ลอย */
#login-screen .panel__tape {
  top: -1.05rem;
  right: 1.9rem;
  padding: 0.42rem 1.05rem;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  transform: rotate(4deg);
  border: var(--ink-w) solid var(--ink);
  box-shadow: var(--drop-1);
}

#login-screen .panel__title {
  font-size: clamp(1.55rem, 1.35rem + 0.5vw, 1.8rem);
  letter-spacing: -0.02em;
}
#login-screen .panel__sub {
  font-size: 0.93rem;
  line-height: 1.75;
  margin: 0.5rem 0 1.6rem;
}
#login-screen .step { gap: 1.15rem; }

/* ---------- ช่องกรอก ---------- */
#login-screen .field { gap: 0.55rem; }
#login-screen .field label {
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  color: var(--ink-3);
}
#login-screen .field input {
  min-height: 58px;
  padding-inline: 1.1rem;
  background: white;
}
#login-screen .uni-detect { font-size: 0.87rem; padding-top: 0.1rem; }

/* ---------- ช่องรหัส 6 หลัก ----------
   ห้ามใส่ min-height ที่นี่เด็ดขาด กล่องพวกนี้เป็น flex: 1 1 0 + aspect-ratio
   พอบังคับความสูงขั้นต่ำ aspect-ratio จะย้อนไปกำหนดความกว้างขั้นต่ำให้ด้วย
   (58px x 3/3.6 = 48.3px ต่อช่อง) แถว 6 ช่องเลยล้นจอ 320px ออกไป 70px
   ช่องแรกหลุดไปอยู่ที่ x = -32 มองไม่เห็นและกดไม่ได้
   อยากได้ช่องสูงขึ้นบนมือถือ ให้ไปลดสัดส่วน aspect-ratio แทน ความสูงจะวิ่ง
   ตามความกว้างที่ flex คำนวณให้ ไม่ไปฝืนมัน */
#login-screen .otp { gap: 0.55rem; }
/* ช่องที่กรอกแล้วเปลี่ยนเป็นเหลืองทึบ + เงาแข็ง = ตัวเลขถูก "ประทับ" ลงไปแล้ว
   ไล่ความคืบหน้าได้จากหางตาโดยไม่ต้องอ่านตัวเลข */
#login-screen .otp__box--filled {
  background: var(--sun);
  box-shadow: var(--drop-1);
}

/* ---------- ช่องยินยอม ----------
   ยกขึ้นมาเป็นกล่องของตัวเอง เพราะนี่คือ "ประตู" ที่ปลดล็อกปุ่มส่งรหัส
   ผู้ใช้ต้องมองออกทันทีว่าทำไมปุ่มยังกดไม่ได้ ของเดิมมันกลืนไปกับ fineprint
   ติ๊กแล้วเปลี่ยนเป็นโทนม่วง แต่ตัวบอกสถานะจริงคือเครื่องหมายถูกในช่อง
   ไม่ได้สื่อด้วยสีอย่างเดียวตามหลักที่ตั้งไว้ */
/* กล่องยินยอม = ทุกอย่างที่ต้องอ่านก่อนกดปุ่ม อยู่ในกรอบเดียว
   เดิมบรรทัดแจ้งข้อมูลออกนอกประเทศลอยอยู่นอกกรอบ อ่านเป็นย่อหน้าหลงทาง
   ทั้งที่มันเป็นเงื่อนไขชุดเดียวกับติ๊ก 18+ */
#login-screen .consent-box {
  margin: 0.15rem 0 1.1rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--sun) 24%, var(--paper));
  border: var(--ink-w) dashed color-mix(in oklch, var(--ink) 45%, transparent);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
#login-screen .consent-box:hover { background: color-mix(in srgb, var(--sun) 36%, var(--paper)); }
#login-screen .consent {
  margin: 0;
  padding: 0;
  gap: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.72;
  background: none;
  border: none;
}
/* ติ๊กแล้วขอบเปลี่ยนจากเส้นประเป็นเส้นทึบ + ได้เงาแข็ง = "ประตูนี้เปิดแล้ว"
   ภาษาเดียวกับปุ่มที่ยังกดไม่ได้ (เส้นประ = ยังไม่พร้อม) ทั้งหน้าจึงสอดคล้องกัน */
#login-screen .consent-box:has(input:checked) {
  background: color-mix(in srgb, var(--grape) 12%, var(--paper));
  border-style: solid;
  border-color: var(--ink);
  box-shadow: var(--drop-1);
}
#login-screen .consent input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: none;
  cursor: pointer;
}
/* เดิมเยื้อง 1.75rem เพื่อไปตรงกับข้อความในช่องติ๊ก พอช่องติ๊กกลายเป็นกล่อง
   ที่มี padding ของตัวเอง การเยื้องเดิมจะเหลื่อม จัดชิดขอบแผงแทน */
/* ---------- ปุ่มหลัก ----------
   ตอน disabled ของเดิมเป็นแท่งเทา (paper-3 + grayscale) ซึ่งอ่านว่า "พัง"
   มากกว่า "ยังไม่ถึงเวลา" เปลี่ยนเป็นพื้นเหลืองจางกับขอบ inset — บอกว่าปุ่มนี้
   มีอยู่จริงแค่ยังไม่เปิด ใช้ inset ไม่ใช้ border เพราะ border จะดันความสูงเปลี่ยน */
#login-screen .btn--primary {
  min-height: 58px;
  border-radius: var(--radius);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}
/* ตอนกำลังส่ง ปุ่มไม่ควรกลายเป็นปุ่มเส้นประเหมือนตอน "ยังติ๊กไม่ครบ"
   สองสถานะนี้ใช้ :disabled เหมือนกันแต่คนละความหมายคนละตัวอักษร */
#login-screen .btn--primary.is-busy:disabled {
  cursor: progress;
  background: var(--grape);
  color: white;
  border-style: solid;
  border-color: var(--ink);
  box-shadow: 0 5px 0 var(--ink);
}
#login-screen .fineprint { font-size: 0.78rem; line-height: 1.7; }

/* เส้นประคั่นก่อนปุ่มรอง — แยกทางเลือกออกจากทางหลักโดยไม่ต้องเพิ่มน้ำหนักสี */
#login-screen .panel__foot {
  margin-top: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px dashed color-mix(in oklch, var(--ink) 15%, transparent);
}

#login-screen .notice {
  margin-top: 1.1rem;
  border-left-width: 4px;
  border-radius: 12px;
}

/* ---------- ลิงก์ ---------- */
#login-screen a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
  transition: text-decoration-color 0.16s var(--ease), color 0.16s var(--ease);
}
#login-screen a:hover { text-decoration-color: currentColor; }

/* ---------- ท้ายหน้า ---------- */
#login-screen .foot {
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 1.75rem 1.25rem clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.79rem;
}
#login-screen .foot > span:first-child {
  font-family: 'Mali', 'Anuphan', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
#login-screen .foot__sep { opacity: 0.4; }
/* ท้ายหน้าอยู่ "นอก" แผ่นโปสเตอร์ คือวางบนภาพลายพื้นหลัง
   --ink-3 ที่ใช้กับตัวหนังสือจาง ๆ บนกระดาษ ได้แค่ 4.36:1 บนครีม และแถบสีในภาพเข้มกว่าครีมอีก ไม่ผ่าน
   ต้องขึ้นเป็นหมึกเต็มทุกตัวในแถวนี้ */
#login-screen .foot { color: var(--ink); }
#login-screen .foot a,
#login-screen .foot__link { color: var(--ink); }
#login-screen .foot a:hover,
#login-screen .foot__link:hover { color: var(--vermilion); }

/* ---------- ช่องผู้สนับสนุน ----------
   อยู่ใต้แผ่นโปสเตอร์ วางบนภาพลายพื้นหลัง จึงต้องเป็นการ์ดกระดาษของตัวเอง
   (ตัวหนังสือบนลายตรง ๆ คอนทราสต์ไม่ผ่าน ดูเหตุผลเดียวกันที่ .foot)
   เล็กกว่าแผ่นโปสเตอร์มากโดยตั้งใจ — สปอนเซอร์ต้องเห็นได้ แต่ห้ามแย่งสายตาจากฟอร์มล็อกอิน
   รูปถูกบีบให้อยู่ในกรอบสูง 3rem กว้างไม่เกิน 11rem รูปสัดส่วนไหนมาก็ไม่ดันเลย์เอาต์ */
#login-screen .sponsor {
  align-self: center;
  width: min(26rem, calc(100% - 2rem));
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
}
#login-screen .sponsor__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  padding: 0.7rem 1rem;
  background: var(--paper);
  border: var(--ink-w) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--drop-1);
  color: var(--ink);
  text-decoration: none;
}
#login-screen .sponsor__card[href] {
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
#login-screen .sponsor__card[href]:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--drop-2);
}
#login-screen .sponsor__label {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
#login-screen .sponsor__img {
  display: block;
  max-width: 11rem;
  max-height: 3rem;
  width: auto;
  height: auto;
  object-fit: contain;
}
#login-screen .sponsor__text {
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

/* ---------- แผ่น PDPA ---------- */
#login-screen .sheet {
  border-radius: 22px;
  box-shadow:
    7px 8px 0 color-mix(in oklch, var(--ink) 9%, transparent),
    0 40px 70px -40px color-mix(in oklch, var(--ink) 60%, transparent);
}

/* ==========================================================================
   จอแคบ
   ========================================================================== */
@media (max-width: 939px) {
  #login-screen .login-grid {
    width: min(600px, 100%);
    gap: 2.4rem;
    padding-block: 2.5rem 2rem;
  }
  #login-screen .pitch__lede { max-width: 100%; margin-bottom: 1.9rem; }
  #login-screen .pitch__points li { max-width: 100%; }
  #login-screen .panel {
    padding: 1.8rem 1.6rem;
    box-shadow: var(--drop-2);
  }
  /* เงาต้องสั้นลงตามขนาดแผ่น — 14px บนจอ 390px กินความกว้างไปเกือบ 4% */
  #login-screen .login-grid { box-shadow: 7px 7px 0 var(--ink); }
}

@media (max-width: 420px) {
  #login-screen .login-grid { padding-inline: 1.15rem; }
  #login-screen .pitch__headline { font-size: clamp(2.05rem, 9.4vw, 2.6rem); }
  #login-screen .wordmark__mark { width: 2.3rem; }
  #login-screen .wordmark__text { height: 2.55rem; }
  #login-screen .panel { padding: 1.5rem 1.15rem; border-radius: 20px; }
  #login-screen .panel__tape { right: 1.1rem; }
  #login-screen .otp { gap: 0.38rem; }
  /* สูงขึ้นเพื่อให้กดง่าย โดยไม่แตะความกว้าง — ดูเหตุผลที่บล็อก .otp__box ด้านบน */
  #login-screen .otp__box { aspect-ratio: 3 / 4.2; border-radius: 11px; }
  #login-screen .foot { gap: 0.5rem 0.9rem; }
}

/* ---------- สลับภาษา ไทย / EN (27 ก.ย. 2569) ----------
   แปะคร่อมขอบบนของแผ่นโปสเตอร์ มุมขวา — แบบเดียวกับเทป "เฉพาะนักศึกษา" ไม่กินที่ในแผ่นเลย
   เคยวางไว้ในแผ่นมุมขวาบน แต่วัดจริงแล้วชนของสองอย่าง:
     จอ 320–360px (Android ใช้เยอะ) ทับโลโก้ 18–58px · จอคอมเกือบทับเทป "เฉพาะนักศึกษา" ของการ์ดฟอร์ม
   -14px ไม่ใช่ครึ่งความสูงพอดี เพราะขอบนอกโปสเตอร์บนจอ 320 มีแค่ 16px ครึ่งเต็มจะหลุดจอ
   หน้าตาเป็นสติกเกอร์ปุ่มแบบเดียวกับทั้งเว็บ: ขอบหมึก + เงาแข็ง ไม่ใช่ลิงก์ตัวเล็ก ๆ
   ภาษาที่เลือกอยู่ = พื้นหมึกตัวครีม บอกด้วยน้ำหนักสีทั้งก้อน ไม่พึ่งสีเฉดใดเฉดหนึ่ง */
#login-screen .lang-switch {
  position: absolute;
  top: -14px;
  right: clamp(1.1rem, 3vw, 2.5rem);
  z-index: 2;
  display: inline-flex;
  border: var(--ink-w) solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--drop-1);
  overflow: hidden;
}
#login-screen .lang-switch button {
  /* สูง 40px + ขอบบนล่าง 4px = 44px ขนาดนิ้วกดขั้นต่ำ ปุ่มเล็กแต่ต้องกดโดนบนมือถือ */
  min-width: 3rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.8rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 600 0.82rem/1 'Mali', 'Anuphan', sans-serif;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
#login-screen .lang-switch button + button { border-left: var(--ink-w) solid var(--ink); }
#login-screen .lang-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  cursor: default;
}
#login-screen .lang-switch button[aria-pressed="false"]:hover { background: var(--sun); }
#login-screen .lang-switch button:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: -5px;
}

/* หัวเรื่องภาษาอังกฤษ — ขนาดของหัวเรื่องไทยใหญ่เกินไปสำหรับตัวอังกฤษ
   ตัวอังกฤษกว้างกว่าไทยต่อพยางค์ ที่ขนาดเดิมจอคอมตกบรรทัดเป็น 4 แถว แถบเน้นสีเลยขาดเป็นท่อน ๆ
   line-height 1.3 มีไว้ให้วรรณยุกต์ไทยไม่ชนกัน อังกฤษไม่มีชั้นบนล่าง ใช้ 1.08 ได้ */
html[lang="en"] #login-screen .pitch__headline {
  font-size: clamp(2.2rem, 0.9rem + 5.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
/* จอกว้าง (สองคอลัมน์) หัวเรื่องมีแค่ครึ่งแผ่น ขนาดต้องวิ่งตามความกว้างคอลัมน์ ไม่ใช่ตามจอเต็ม
   วัดแล้ว: ที่ 1024px ถ้าไม่ลด "Meet new friends" ตกบรรทัดเป็น 3 แถว */
@media (min-width: 940px) {
  html[lang="en"] #login-screen .pitch__headline { font-size: clamp(2.2rem, 3.9vw, 3.6rem); }
}