/* ============================================================================
 *  โครงหน้าเว็บ : มือถือ / จอคอมปกติ / จอกว้าง (Ultrawide, จอโค้ง)
 * ----------------------------------------------------------------------------
 *  ไฟล์นี้ต้องโหลด "หลัง" ไฟล์ css อื่นทุกตัวเสมอ
 *
 *  วิธีทำงาน
 *  ---------
 *  หน้าแรกถูกออกแบบด้วยตำแหน่ง px ตายตัวบนพื้นที่กว้าง 1920px
 *  (เช่น .slide-frame กว้าง 1375px, .news-section กว้าง 1220px)
 *  ถ้าจอไม่ใช่ 1920px ทุกอย่างจะเลื่อนไม่ตรงกับภาพพื้นหลัง
 *
 *  จึงใช้วิธี "ย่อ/ขยายทั้งหน้าเป็นก้อนเดียว" ด้วย zoom
 *  โดย js/layout.js คำนวณค่า --site-zoom = ความกว้างจอ / 1920
 *  ผลคือหน้าเว็บถูกจัดวางบนพื้นที่ 1920px เสมอ แล้วค่อยย่อ/ขยายให้พอดีจอ
 *  ตำแหน่งทุกอย่างจึงตรงกับพื้นหลังเป๊ะทุกขนาดจอ ไม่ต้องแก้ค่า px เดิมเลย
 *
 *  จอแคบกว่า 1025px จะไม่ย่อ แต่สลับไปใช้เลย์เอาต์มือถือ (เรียงลงมาเป็นแถว)
 *
 *  ค่าที่ปรับได้
 *  ------------
 *  --stage-width  ความกว้างที่ใช้ออกแบบ (อย่าแก้ถ้าไม่ได้ย้ายตำแหน่งใหม่ทั้งหน้า)
 *  --stage-max    ขยายได้มากสุดกี่เท่า บนจอกว้างมาก ๆ (ค่าเริ่มต้น 1.6)
 * ==========================================================================*/

:root {
    --stage-width: 1920;
    --stage-max: 1.6;
}

/* สีที่อยู่นอกพื้นที่หน้าเว็บ */
html {
    background-color: #05070d;
}

/* ============================================================================
 *  1. แก้โครงพื้นฐาน (มีผลทุกขนาดจอ)
 * ==========================================================================*/

body.custom {

    /* ขอบ 8px ที่เบราว์เซอร์ใส่มาให้ ทำให้ left:50% ไม่ตรงกลางจริง */
    margin: 0;

    /* ------------------------------------------------------------------
     *  สำคัญมาก : .job-gallery ใช้ margin-top: 2450px
     *  โดยปกติ margin ก้อนนี้จะ "ทะลุ" ออกมาดัน body ทั้งก้อนลงไป 2450px
     *  ทำให้เมนู โลโก้ และทุกอย่างที่เป็น absolute เลื่อนตามลงไปด้วย
     *  display: flow-root ปิดการทะลุนี้ margin จึงอยู่ข้างในตามที่ตั้งใจ
     * ---------------------------------------------------------------- */
    display: flow-root;

    /* ค่า min-height เดิม 2914px และค่าที่ JS เขียนทับ ไม่จำเป็นแล้ว */
    min-height: 100vh !important;
}

/* ------------------------------------------------------------------------
 *  .snow-effect ตั้ง left: 1015px คู่กับ width: 100%
 *  ทำให้ขอบขวายื่นเลยจอไปราว 1000px เกิดแถบเลื่อนแนวนอน
 * ---------------------------------------------------------------------- */
.snow-effect {
    right: 0;
    width: auto;
    max-width: none;
}

/* กันภาพล้นจอในทุกหน้า */
img,
video {
    max-width: 100%;
}

/* ภาพที่ตั้งใจให้ใหญ่กว่ากรอบ ไม่ต้องถูกบีบ */
.main-logo,
.job-section img,
.slide-image,
.news-card img {
    max-width: none;
}

/* ============================================================================
 *  2. จอคอม : ย่อ/ขยายทั้งหน้าให้พอดีจอ (รวมจอกว้างและจอโค้ง)
 * ==========================================================================*/

@media (min-width: 1025px) {

    body.custom {
        zoom: var(--site-zoom, 1);

        /* body ถูกย่อด้วย zoom แล้ว ความสูงจึงต้องหารกลับ
           ไม่งั้นพื้นหลังจะสั้นกว่าจอ เหลือแถบดำด้านล่าง */
        min-height: calc(100vh / var(--site-zoom, 1)) !important;
    }

    /* ไม่ต้องมีแถบเลื่อนแนวนอน */
    html {
        overflow-x: hidden;
    }

    /* Lightbox เป็น fixed ถ้าโดน zoom ด้วยจะใหญ่เกินจอ จึงคุมด้วย % แทน vw */
    #lightbox img {
        max-width: 88%;
        max-height: 88%;
    }
}

/* ============================================================================
 *  3. มือถือและแท็บเล็ต : เปลี่ยนจากวาง px ตายตัว เป็นเรียงลงมาทีละก้อน
 * ==========================================================================*/

@media (max-width: 1024px) {

    /* พื้นหลังของทุกหน้าบนจอแคบ */
    body.custom {
        /* พื้นหลังไล่ลงมาเรื่อย ๆ เหมือนจอคอม
           ไม่ใช้ background-attachment: fixed เพราะ iOS Safari แสดงผลเพี้ยน */
        background-size: 180% auto;
        background-position: top center;
        background-repeat: repeat-y;
        background-attachment: scroll;
    }

    /* เลย์เอาต์มือถือของหน้าแรก (body class="custom home") */
    body.custom.home {
        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 24px 14px 60px;
        box-sizing: border-box;
    }

    /* ทุกก้อนเลิกเป็น absolute แล้วเรียงต่อกันลงมา */
    body.custom.home > .main-buttons,
    body.custom.home > .logo-box,
    body.custom.home > .main-buttons2,
    body.custom.home > .main-buttons3,
    body.custom.home > .member-login-section,
    body.custom.home > .slide-frame,
    body.custom.home > .news-line,
    body.custom.home > .news-section,
    body.custom.home > .job-section,
    body.custom.home > .job-gallery {
        position: static;
        left: auto;
        top: auto;
        right: auto;

        width: 100%;
        max-width: 640px;
        height: auto;

        transform: none;
        margin: 0 0 22px;
    }

    /* ลำดับการแสดงบนมือถือ */
    body.custom.home > .logo-box            { order: 1; }
    body.custom.home > .main-buttons        { order: 2; }
    body.custom.home > .slide-frame         { order: 3; }
    body.custom.home > .member-login-section{ order: 4; }
    body.custom.home > .main-buttons2       { order: 5; }
    body.custom.home > .main-buttons3       { order: 6; }
    body.custom.home > .news-line           { order: 7; }
    body.custom.home > .news-section        { order: 8; }
    body.custom.home > .job-section         { order: 9; }
    body.custom.home > .job-gallery         { order: 10; }

    /* วิดีโอเอฟเฟกต์และ footer ไม่ต้องแสดงบนมือถือ */
    body.custom.home > .snow-effect,
    .site-footer,
    .effect-video-box {
        display: none !important;
    }

    /* ---------------------------------------------------------------- โลโก้ */

    .logo-box {
        text-align: center;
    }

    .main-logo {
        width: 100%;
        max-width: 320px;
        animation: none;
    }

    /* ------------------------------------------------------------ ปุ่มเมนู */

    .main-buttons {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px !important;
        justify-items: center;
    }

    .main-buttons2,
    .main-buttons3 {
        display: flex !important;
        justify-content: center;
        gap: 12px !important;
    }

    .main-buttons a img,
    .btn-home img,
    .btn-register img,
    .btn-download img,
    .btn-guide img,
    .btn-group img,
    .btn-topup img,
    .btn-database img,
    .btn-worldmap img,
    .btn-mystery img {
        width: 100% !important;
        max-width: 72px;
    }

    .btn-download2 img,
    .btn-register2 img {
        width: 130px !important;
    }

    .main-buttons3 img {
        max-width: 260px;
    }

    /* --------------------------------------------------------------- สไลด์ */

    .slide-frame {
        position: relative !important;
    }

    .slide-bg {
        display: none;
    }

    .slide-area {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: auto !important;
        aspect-ratio: 717 / 394;

        border-radius: 10px;
    }

    .slide-track {
        width: 100%;
        height: 100%;
    }

    .slide-image {
        width: 100% !important;
        height: 100% !important;
        flex: 0 0 100% !important;
    }

    /* ------------------------------------------------- กล่องล็อกอินหน้าแรก */

    .member-login-section {
        height: auto !important;
    }

    /* รูปพื้นหลังกล่องล็อกอินเป็นภาพขนาดตายตัว บนมือถือใช้กล่องธรรมดาแทน */
    .member-login-box {
        position: relative !important;
        width: 100% !important;
        height: auto !important;

        display: flex;
        flex-direction: column;
        gap: 12px;

        padding: 20px !important;
        box-sizing: border-box;
        border: 1px solid rgba(120, 200, 255, .35);
        border-radius: 14px;

        background-image: none !important;
        background-color: rgba(8, 18, 38, .82);
    }

    .member-input {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: 46px !important;

        padding: 0 14px !important;
        box-sizing: border-box;

        border: 1px solid rgba(120, 200, 255, .35) !important;
        border-radius: 10px;
        background: rgba(255, 255, 255, .06) !important;

        font-size: 15px;
    }

    .member-login-submit {
        position: relative !important;
        left: auto !important;
        top: auto !important;

        width: 100% !important;
        height: 48px !important;

        border-radius: 10px;
        background: linear-gradient(180deg, #3aa0ff, #1668c4) !important;
        color: #ffffff !important;
        font-size: 16px;
        font-family: inherit;
    }

    .member-register-link {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        text-align: center;
    }

    /* ---------------------------------------------------------------- ข่าว */

    .news-line img {
        width: 100%;
    }

    .news-tabs {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .news-tab img {
        width: 140px !important;
    }

    .news-content {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    .news-card {
        width: 100% !important;
        height: auto !important;
    }

    .news-card img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 380 / 228;
        object-fit: cover;
    }

    /* --------------------------------------------------------------- อาชีพ */

    .job-section img {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    /* สไลด์อาชีพ : ปุ่มลูกศรย้ายมาทับบนรูป เพราะจอแคบไม่มีที่ว่างด้านข้าง */
    .job-arrow {
        width: 42px !important;
        height: 42px !important;
        font-size: 19px !important;
    }

    .job-arrow.job-prev { left: 8px !important; }
    .job-arrow.job-next { right: 8px !important; }

    .job-viewport {
        border-radius: 12px !important;
    }

    .job-names {
        gap: 6px !important;
        margin-top: 14px !important;
    }

    .job-name {
        padding: 5px 12px !important;
        font-size: 13px !important;
    }
}

/* จอเล็กมาก */
@media (max-width: 420px) {

    .main-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .news-tab img {
        width: 116px !important;
    }
}

/* ============================================================================
 *  4. หน้ารอง : Monster Database / หน้ารายละเอียด / หน้าสมาชิก
 * ==========================================================================*/

/* กล่องเนื้อหาเดิมกว้าง 1200px ตายตัว และเว้นหัวไว้ 820px สำหรับโลโก้ */
@media (max-width: 1024px) {

    .page-detail-wrap {
        padding-top: 40px !important;
        padding-bottom: 60px !important;
    }

    .page-detail-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* ฟอร์มค้นหาในหน้า Monster Database */
    .monster-search.compact {
        flex-wrap: wrap;
    }

    .monster-search.compact input,
    .monster-search.compact select {
        flex: 1 1 140px;
        min-width: 0;
    }

    /* ช่องเลือกแผนที่ชื่อยาว ให้กินเต็มบรรทัดไปเลย */
    .monster-search.compact select.map-select {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* การ์ดมอนสเตอร์ให้เลื่อนในกล่องตัวเองแทนที่จะดันหน้าเว็บ */
    .monster-card-main {
        overflow-x: auto;
    }

    /* แถบหัวเรื่องแผนที่ และกล่องรายชื่อแผนที่ : เรียงลงมาแทนเรียงข้าง */
    .map-banner {
        flex-wrap: wrap;
        gap: 12px !important;
    }

    .map-banner-actions {
        width: 100%;
    }

    .map-banner-actions a {
        flex: 1;
        text-align: center;
    }

    .monster-map-box {
        flex-direction: column;
        gap: 8px !important;
    }
}

/* หน้าเนื้อหา (content.css) เว้นหัวไว้ 820px เท่ากัน */
@media (max-width: 1024px) {

    .content-detail-wrap {
        padding-top: 40px !important;
    }
}