/* game howto — built from design (shared M1, ครอบคลุม M1/3/4/5/6/7) */
/* =========================================================
   howto.css – หน้า 01 + 01-2 (HOW TO PLAY popup)
   ใช้ popup-Howto.png เป็น content หลัก
   + ปุ่ม READY/START และ status text ใต้ popup
   ========================================================= */

/* ---------- dark overlay ทับ BG ---------- */
.mg-overlay {
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: rgba(4, 6, 18, 0.45);
    z-index: 9;
}

/* ---------- popup HOW TO PLAY ---------- */
.howto-popup {
    /* popup-Howto.png native 1451x851 (aspect 1.706)
       ใน mockup กินพื้นที่เกือบทั้งจอ → ขยายให้ใหญ่ขึ้น แต่ยังคง aspect ratio */
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    width: 1500px;
    height: 880px;
    z-index: 10;
}
.howto-popup img {
    width: 100%;
    height: 100%;
}

/* ---------- ปุ่ม READY/START + status text ---------- */
.howto-status {
    /* "Ready Status : 4/5" อยู่เหนือปุ่ม READY (ตาม mockup 01.png) */
    left: 50%;
    top: 808px;
    transform: translateX(-50%);
    font-family: "NotoSansThai", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #f067e8;
    text-shadow: 0 0 10px rgba(240, 103, 232, 0.6),
                 0 0 22px rgba(237, 86, 224, 0.35);
    letter-spacing: 0.5px;
    text-align: center;
    z-index: 13;
    white-space: nowrap;
    pointer-events: none;
}
.howto-status #hwRatio {
    color: #f067e8;
}

.howto-btn {
    /* btn-ready.png / btn-start.png native 351x141 (aspect 2.49)
       ใน mockup ปุ่มอยู่ตรงเส้นกรอบล่าง popup (กึ่งกลาง) */
    left: 957px;
    top: 885px;
    transform: translate(-50%, -50%);
    height: 120px;
    width: auto;
    z-index: 12;
}
.howto-btn img {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 0 18px rgba(120, 220, 255, 0.65));
}

/* ---------- hover effect บนปุ่ม ---------- */
.howto-btn.btn:hover {
    transform: translate(-50%, calc(-50% - 3px));
}
.howto-btn.btn:hover img {
    filter: drop-shadow(0 0 28px rgba(120, 220, 255, 0.95));
}
.howto-btn.btn:active {
    transform: translate(-50%, calc(-50% + 2px));
}