82 lines
2.5 KiB
CSS
82 lines
2.5 KiB
CSS
/* 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));
|
||
}
|