/* assets/css/auth/responsive.css
   ทุกขนาดจอ · มือถือแนวนอน  (ต้องโหลดท้ายสุด — เป็นตัวเขียนทับ)

   ⚠ แยกออกมาจาก assets/css/auth.css ที่ยาว 593 บรรทัด (17 ส.ค. 2569)
      เพิ่มสไตล์ใหม่ให้ใส่ไฟล์ที่ตรงเรื่องที่สุด ห้ามกองท้ายไฟล์เดียว
      ⚠ เพิ่มไฟล์ใหม่ในโฟลเดอร์นี้ต้องเพิ่ม <link> ใน index.php ด้วย
*/
/* ═══════════════════════════════════════════════════════════════════════════
   มือถือแนวนอน — จอเตี้ยมาก (~320-430px)

   ⚠️ ปัญหาเดิม: ขนาดตัวหนังสือหน้าแรกคิดจาก "ความกว้าง" (8vw)
      มือถือแนวนอนกว้างถึง 874px แปดเปอร์เซ็นต์จึงได้ตัวใหญ่ 70px
      ทั้งที่จอสูงแค่ 338px เนื้อหารวมกันเลยสูงเกินจอ
      พอกล่องถูกจัดกึ่งกลางด้วย flex ส่วนที่ล้นจะถูกตัดทั้งบนและล่าง
      มองแล้วเหมือน "ไม่อยู่ตรงกลาง" ทั้งที่จริงมันกลางแล้ว แค่ใหญ่เกินจอ

   ⚠️ **บนจอแนวนอนต้องคิดขนาดจากความสูง ไม่ใช่ความกว้าง**
      ความสูงคือแกนที่จำกัดจริง ความกว้างมีเหลือเฟือ
      (หลักการเดียวกับที่ใช้ในเกม — ดู assets/js/ui/layout/engine.js)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
    .container {
        padding: 0.75rem 1rem;
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    .landing { padding: 0.5rem 0; }

    /* คิดจาก vh แทน vw — 12vh ของจอ 338px ได้ราว 40px ซึ่งพอดี */
    .landing-title { font-size: clamp(1.5rem, 12vh, 2.6rem); }

    .landing-badge {
        font-size: 0.66rem;
        padding: 0.24rem 0.8rem;
        margin-bottom: 0.55rem;
    }
    .landing-tag { font-size: 0.82rem; margin-top: 0.35rem; }

    .landing-play {
        margin: 0.9rem auto 0.5rem;
        padding: 0.7rem 1rem;
        font-size: 0.98rem;
        max-width: 280px;
    }
    .landing-who { font-size: 0.8rem; }

    /* ⚠️ เนื้อหาสูงเกินจอเมื่อไหร่ให้เลื่อนได้ แต่ยังกึ่งกลางอยู่ถ้ามันสั้นกว่าจอ
       margin: auto ทำทั้งสองอย่างพร้อมกัน ต่างจาก align-items: center
       ที่พอเนื้อหาสูงเกินจะดันส่วนบนหลุดออกไปแล้วเลื่อนกลับไปดูไม่ได้ */
    .auth-body { overflow-y: auto; }
    .container { margin: auto 0; }
}