939 lines
18 KiB
CSS
939 lines
18 KiB
CSS
/* game HUD + summary — built from design (variant A + mg2 of B + summary) */
|
||
/* =========================================================
|
||
|
||
game-hud.css – Shared HUD สำหรับทุกหน้า in-game
|
||
|
||
• Top-left : SCORE panel (score-bar.png + 5 players)
|
||
|
||
• Top-center: TIME counter
|
||
|
||
• Top-right : Host avatar frame + mic button
|
||
|
||
• Background: BG.png (1920x1080)
|
||
|
||
========================================================= */
|
||
|
||
|
||
|
||
.mg-stage {
|
||
|
||
background: #04050d;
|
||
|
||
}
|
||
|
||
|
||
|
||
/* ---------------- พื้นหลัง BG เต็มจอ ---------------- */
|
||
|
||
.mg-bg {
|
||
|
||
left: 0;
|
||
|
||
top: 0;
|
||
|
||
width: 1920px;
|
||
|
||
height: 1080px;
|
||
|
||
z-index: 1;
|
||
|
||
}
|
||
|
||
.mg-bg img {
|
||
|
||
width: 100%;
|
||
|
||
height: 100%;
|
||
|
||
object-fit: cover;
|
||
|
||
}
|
||
|
||
|
||
|
||
/* =========================================================
|
||
|
||
มุมซ้ายบน : SCORE Panel (score-bar.png + 5 players)
|
||
|
||
========================================================= */
|
||
|
||
.mg-score-panel {
|
||
|
||
left: 2px;
|
||
|
||
top: 16px;
|
||
|
||
width: 156px;
|
||
|
||
height: 433px;
|
||
|
||
padding: 0;
|
||
|
||
overflow: hidden;
|
||
|
||
background: url("/Game/img/mg-hud/score-bar.png") no-repeat left top / 156px 433px;
|
||
|
||
border: none;
|
||
|
||
border-radius: 0;
|
||
|
||
box-shadow: none;
|
||
|
||
z-index: 8;
|
||
|
||
}
|
||
|
||
.mg-score-title {
|
||
|
||
/* ข้อความ SCORE อยู่ใน score-bar.png แล้ว */
|
||
|
||
position: absolute;
|
||
|
||
width: 1px;
|
||
|
||
height: 1px;
|
||
|
||
padding: 0;
|
||
|
||
margin: -1px;
|
||
|
||
overflow: hidden;
|
||
|
||
clip: rect(0, 0, 0, 0);
|
||
|
||
white-space: nowrap;
|
||
|
||
border: 0;
|
||
|
||
}
|
||
|
||
|
||
|
||
.mg-score-list {
|
||
|
||
position: absolute;
|
||
|
||
left: 16px;
|
||
|
||
top: 60px;
|
||
|
||
width: 136px;
|
||
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
|
||
gap: 5px;
|
||
|
||
}
|
||
|
||
.mg-score-row {
|
||
|
||
display: flex;
|
||
|
||
align-items: center;
|
||
|
||
gap: 10px;
|
||
|
||
height: 70px;
|
||
|
||
}
|
||
|
||
.mg-score-row .av {
|
||
|
||
position: relative;
|
||
|
||
width: 70px;
|
||
|
||
height: 70px;
|
||
|
||
flex: 0 0 70px;
|
||
|
||
border-radius: 0;
|
||
|
||
overflow: visible;
|
||
|
||
background: transparent;
|
||
|
||
}
|
||
|
||
.mg-score-row .av::after {
|
||
|
||
content: "";
|
||
|
||
position: absolute;
|
||
|
||
inset: 0;
|
||
|
||
background: url("/Game/img/mg-hud/score-avartar.png") no-repeat center / contain;
|
||
|
||
pointer-events: none;
|
||
|
||
z-index: 2;
|
||
|
||
}
|
||
|
||
.mg-score-row .av img {
|
||
|
||
position: absolute;
|
||
|
||
inset: 4px;
|
||
|
||
width: calc(100% - 8px);
|
||
|
||
height: calc(100% - 8px);
|
||
|
||
object-fit: cover;
|
||
|
||
border-radius: 6px;
|
||
|
||
z-index: 1;
|
||
|
||
}
|
||
|
||
/* ไม่ใช้ placeholder สี — แสดงเฉพาะกรอบ score-avartar.png (หรือรูปใน <img>) */
|
||
.mg-score-row .av .ph {
|
||
|
||
display: none;
|
||
|
||
}
|
||
|
||
.mg-score-row .meta {
|
||
|
||
display: flex;
|
||
|
||
flex-direction: column;
|
||
|
||
gap: 1px;
|
||
|
||
line-height: 1.05;
|
||
|
||
flex: 1;
|
||
|
||
min-width: 0;
|
||
|
||
}
|
||
|
||
.mg-score-row .nm {
|
||
|
||
font-family: "NotoSansThai", sans-serif;
|
||
|
||
font-weight: 700;
|
||
|
||
font-size: 11px;
|
||
|
||
color: #e8f4ff;
|
||
|
||
letter-spacing: 0.2px;
|
||
|
||
text-transform: uppercase;
|
||
|
||
white-space: nowrap;
|
||
|
||
}
|
||
|
||
.mg-score-row .sc {
|
||
|
||
font-family: "NotoSansThai", sans-serif;
|
||
|
||
font-weight: 900;
|
||
|
||
font-size: 22px;
|
||
|
||
color: #ffffff;
|
||
|
||
line-height: 1;
|
||
|
||
text-shadow: 0 0 8px rgba(120, 220, 255, 0.6);
|
||
|
||
}
|
||
|
||
|
||
|
||
/* =========================================================
|
||
|
||
ตรงกลางบน : TIME : XX
|
||
|
||
========================================================= */
|
||
|
||
.mg-time {
|
||
|
||
left: 50%;
|
||
|
||
top: 23px;
|
||
|
||
transform: translateX(-50%);
|
||
|
||
display: flex;
|
||
|
||
align-items: center;
|
||
|
||
gap: 10px;
|
||
|
||
z-index: 8;
|
||
|
||
}
|
||
|
||
.mg-time-label {
|
||
|
||
width: 131px;
|
||
|
||
height: 71px;
|
||
|
||
flex: 0 0 131px;
|
||
|
||
}
|
||
|
||
.mg-time .num {
|
||
|
||
font-family: "NotoSansThai", sans-serif;
|
||
|
||
font-weight: 900;
|
||
|
||
font-size: 42px;
|
||
|
||
height: 71px;
|
||
|
||
line-height: 71px;
|
||
|
||
color: #e6f6ff;
|
||
|
||
letter-spacing: 1px;
|
||
|
||
font-variant-numeric: tabular-nums;
|
||
|
||
text-shadow:
|
||
|
||
0 0 10px rgba(120, 220, 255, 0.85),
|
||
|
||
0 0 22px rgba(80, 180, 240, 0.55);
|
||
|
||
}
|
||
|
||
.mg-time.is-warning .num {
|
||
|
||
color: #ff7a7a;
|
||
|
||
text-shadow:
|
||
|
||
0 0 12px rgba(255, 90, 90, 0.85),
|
||
|
||
0 0 24px rgba(255, 60, 60, 0.5);
|
||
|
||
}
|
||
|
||
.mg-time.is-warning {
|
||
|
||
animation: mg-pulse 0.9s ease-in-out infinite;
|
||
|
||
}
|
||
|
||
@keyframes mg-pulse {
|
||
|
||
0%, 100% { transform: translateX(-50%) scale(1); }
|
||
|
||
50% { transform: translateX(-50%) scale(1.08); }
|
||
|
||
}
|
||
|
||
|
||
|
||
/* =========================================================
|
||
|
||
มุมขวาบน : Host avatar (Avartar.png) + mic
|
||
|
||
========================================================= */
|
||
|
||
.mg-host {
|
||
|
||
left: 1729px;
|
||
|
||
top: 21px;
|
||
|
||
width: 201px;
|
||
|
||
height: 201px;
|
||
|
||
z-index: 8;
|
||
|
||
}
|
||
|
||
.mg-host-frame {
|
||
|
||
position: absolute;
|
||
|
||
inset: 0;
|
||
|
||
width: 100%;
|
||
|
||
height: 100%;
|
||
|
||
z-index: 2;
|
||
|
||
pointer-events: none;
|
||
|
||
}
|
||
|
||
.mg-host-face {
|
||
|
||
position: absolute;
|
||
|
||
left: 49px;
|
||
|
||
top: 49px;
|
||
|
||
width: 104px;
|
||
|
||
height: 104px;
|
||
|
||
border-radius: 8px;
|
||
|
||
object-fit: cover;
|
||
|
||
z-index: 1;
|
||
|
||
}
|
||
|
||
.mg-host-face:not([src]),
|
||
|
||
.mg-host-face[src=""] {
|
||
|
||
display: none;
|
||
|
||
}
|
||
|
||
.mg-host .host-ph {
|
||
|
||
display: none;
|
||
|
||
}
|
||
|
||
|
||
|
||
.mg-mic {
|
||
|
||
left: 1796px;
|
||
|
||
top: 205px;
|
||
|
||
width: 121px;
|
||
|
||
height: 121px;
|
||
|
||
z-index: 8;
|
||
|
||
}
|
||
|
||
.mg-mic img {
|
||
|
||
width: 100%;
|
||
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
|
||
|
||
/* ===== variant B (M2/4/7) mg2-* additions ===== */
|
||
/* ---------- SCORE bar แนวนอน (Mockup/02–07) ---------- */
|
||
/* อ้างอิง Mockup/02: SCORE เริ่ม x≈50 · ผู้เล่น 5 คนห่าง center-to-center ≈155px */
|
||
.mg2-score-bar{left: 50px;
|
||
top: 30px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0;
|
||
z-index: 8;}
|
||
.mg2-score-label{width: 144px;
|
||
height: 71px;
|
||
flex: 0 0 144px;
|
||
margin: 0 1px 0 0;
|
||
transform: translateY(11px);}
|
||
.mg2-players{display: flex;
|
||
align-items: flex-start;
|
||
gap: 85px;}
|
||
.mg2-player{width: 70px;
|
||
text-align: center;
|
||
flex: 0 0 70px;}
|
||
.mg2-player .nm{font-family: "NotoSansThai", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 11px;
|
||
color: #e8f4ff;
|
||
letter-spacing: 0.2px;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
margin-bottom: 4px;
|
||
line-height: 1;}
|
||
.mg2-player .av{position: relative;
|
||
width: 70px;
|
||
height: 70px;
|
||
margin: 0 auto 4px;}
|
||
.mg2-player .av::after{content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: url("/Game/img/mg-hud/score-avartar.png") no-repeat center / contain;
|
||
pointer-events: none;
|
||
z-index: 2;}
|
||
.mg2-player .av img{position: absolute;
|
||
inset: 4px;
|
||
width: calc(100% - 8px);
|
||
height: calc(100% - 8px);
|
||
object-fit: cover;
|
||
border-radius: 6px;
|
||
z-index: 1;}
|
||
.mg2-player .sc{font-family: "NotoSansThai", sans-serif;
|
||
font-weight: 900;
|
||
font-size: 22px;
|
||
color: #ffffff;
|
||
line-height: 1;
|
||
text-shadow: 0 0 8px rgba(120, 220, 255, 0.6);}
|
||
.mg2-player.is-zero .sc{color: #ff8a8a;
|
||
text-shadow: 0 0 8px rgba(255, 90, 90, 0.55);}
|
||
/* ---------- JUMP button (มุมขวาล่าง) ---------- */
|
||
.mg2-jump{left: 1648px;
|
||
top: 818px;
|
||
width: 231px;
|
||
height: 231px;
|
||
z-index: 8;}
|
||
.mg2-jump img{width: 100%;
|
||
height: 100%;
|
||
filter: drop-shadow(0 0 18px rgba(255, 110, 220, 0.45));}
|
||
.mg2-jump.btn:hover{transform: translateY(-3px);}
|
||
.mg2-jump.btn:hover img{filter: drop-shadow(0 0 28px rgba(255, 110, 220, 0.75));}
|
||
.mg2-jump.btn:active{transform: translateY(1px);}
|
||
|
||
/* ===== summary (ผลสรุป) ===== */
|
||
/* =========================================================
|
||
summary.css – หน้า 06 สรุปผลภารกิจ
|
||
อ้างอิง Mockup/06.png + ขนาด asset จริง (1920×1080)
|
||
popup-result.png 1451×851 @ 234,114
|
||
popup-result-Line1 938×3
|
||
popup-result-Line2 4×270
|
||
player-frame.png 137×137
|
||
mission-complete-select 271×90
|
||
btn-done.png 351×141
|
||
card-5 (Bail Coin) 287×383
|
||
========================================================= */
|
||
|
||
.sm-overlay {
|
||
left: 0;
|
||
top: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
background: rgba(4, 6, 18, 0.45);
|
||
z-index: 9;
|
||
}
|
||
|
||
/* ---------- popup-result.png ---------- */
|
||
.sm-popup {
|
||
left: 234px;
|
||
top: 114px;
|
||
width: 1451px;
|
||
height: 851px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.sm-popup img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* ---------- content layer (พิกัดเดียวกับ popup) ---------- */
|
||
.sm-content {
|
||
left: 234px;
|
||
top: 114px;
|
||
width: 1451px;
|
||
height: 851px;
|
||
z-index: 11;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* =========================================================
|
||
แถวอันดับ 5 คน
|
||
mockup: 5 ช่อง × 137px + gap 30px กึ่งกลาง (ไม่ space-between)
|
||
รวมความกว้าง = 5×137 + 4×30 = 805px
|
||
========================================================= */
|
||
.sm-ranks {
|
||
position: absolute;
|
||
left: 323px;
|
||
top: 168px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 30px;
|
||
width: 805px;
|
||
}
|
||
|
||
.sm-rank {
|
||
flex: 0 0 137px;
|
||
width: 137px;
|
||
min-width: 137px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.sm-rank .pos {
|
||
display: block;
|
||
width: 41px;
|
||
height: 21px;
|
||
margin: 0 auto 6px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* กรอบ avatar = player-frame.png เท่านั้น (สีตัวละครอยู่ใน portrait) */
|
||
.sm-rank .av {
|
||
position: relative;
|
||
width: 137px;
|
||
height: 137px;
|
||
margin: 0 auto 8px;
|
||
background: transparent;
|
||
overflow: visible;
|
||
}
|
||
|
||
.sm-rank .portrait {
|
||
position: absolute;
|
||
inset: 10px;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background: transparent;
|
||
}
|
||
|
||
/* ตัวละคร placeholder — จัดกึ่งกลางในกรอบ 117×117 */
|
||
.sm-rank .chibi {
|
||
position: relative;
|
||
width: 86px;
|
||
height: 92px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sm-rank .ch-body {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 0;
|
||
width: 86px;
|
||
height: 52px;
|
||
transform: translateX(-50%);
|
||
border-radius: 50%;
|
||
background: var(--body, #6a6f96);
|
||
box-shadow: inset 0 6px 8px rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.sm-rank .ch-head {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 34px;
|
||
width: 54px;
|
||
height: 54px;
|
||
transform: translateX(-50%);
|
||
border-radius: 50%;
|
||
background: var(--skin, #f5d6b3);
|
||
z-index: 2;
|
||
}
|
||
|
||
.sm-rank .ch-hair {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 52px;
|
||
width: 62px;
|
||
height: 36px;
|
||
transform: translateX(-50%);
|
||
border-radius: 50% 50% 16px 16px / 80% 80% 28% 28%;
|
||
background: var(--hair, #2a2a2a);
|
||
z-index: 3;
|
||
}
|
||
|
||
/* ทุกอันดับใช้ player-frame.png ตรง asset — ไม่ hue-rotate */
|
||
.sm-rank .av .frame {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 3;
|
||
pointer-events: none;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* ผู้เสียสละ — จางลง + stamp */
|
||
.sm-rank.is-out .av,
|
||
.sm-rank.is-out .portrait,
|
||
.sm-rank.is-out .chibi,
|
||
.sm-rank.is-out .ch-body,
|
||
.sm-rank.is-out .ch-head,
|
||
.sm-rank.is-out .ch-hair,
|
||
.sm-rank.is-out .av .frame {
|
||
filter: opacity(0.5);
|
||
}
|
||
|
||
.sm-rank .nm {
|
||
font-family: "NotoSansThai", sans-serif;
|
||
font-weight: 900;
|
||
font-size: 17px;
|
||
color: #ffffff;
|
||
letter-spacing: 0.6px;
|
||
line-height: 1.1;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.sm-rank .sc {
|
||
font-family: "NotoSansThai", sans-serif;
|
||
font-weight: 900;
|
||
font-size: 30px;
|
||
color: #ffffff;
|
||
text-shadow: 0 0 10px rgba(120, 220, 255, 0.4);
|
||
line-height: 1;
|
||
}
|
||
|
||
.sm-rank .sc .bonus {
|
||
font-size: 18px;
|
||
color: #ffd047;
|
||
margin-left: 2px;
|
||
text-shadow: 0 0 8px rgba(255, 200, 80, 0.45);
|
||
}
|
||
|
||
.sm-rank .av .stamp {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%) rotate(-8deg);
|
||
width: 114px;
|
||
height: auto;
|
||
z-index: 5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* =========================================================
|
||
คะแนนรวม
|
||
========================================================= */
|
||
.sm-total {
|
||
position: absolute;
|
||
left: 5px;
|
||
right: 0;
|
||
top: 398px;
|
||
z-index: 4;
|
||
text-align: center;
|
||
font-family: "NotoSansThai", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 24px;
|
||
color: #ffd047;
|
||
text-shadow:
|
||
0 0 10px rgba(255, 200, 80, 0.45),
|
||
0 2px 4px rgba(0, 0, 0, 0.6);
|
||
letter-spacing: 0.3px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.sm-total .num {
|
||
font-weight: 900;
|
||
font-size: 40px;
|
||
color: #ffffff;
|
||
text-shadow: 0 0 14px rgba(120, 220, 255, 0.55);
|
||
margin-left: 6px;
|
||
}
|
||
|
||
/* เส้นแนวนอน บน + ล่าง "คะแนนรวม" (popup-result-Line1.png 938×3) */
|
||
.sm-line-1 {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 938px;
|
||
height: 3px;
|
||
display: block;
|
||
object-fit: fill;
|
||
z-index: 4;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.sm-line-above {
|
||
top: 394px;
|
||
}
|
||
|
||
.sm-line-below {
|
||
top: 452px;
|
||
}
|
||
|
||
/* =========================================================
|
||
โซนล่าง — ระดับความสำเร็จ | โบนัสพิเศษ (Mockup/06)
|
||
grid 3 คอลัมน์: 1fr | เส้น 4px | 1fr ภายใน padding 72px
|
||
========================================================= */
|
||
.sm-bottom {
|
||
position: absolute;
|
||
left: 72px;
|
||
right: 72px;
|
||
top: 460px;
|
||
height: 270px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 4px 1fr;
|
||
align-items: start;
|
||
column-gap: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.sm-bottom > * {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.sm-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
text-align: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sm-col-grade {
|
||
margin-left: 173px;
|
||
margin-right: 14px;
|
||
margin-top: 41px;
|
||
height: 174px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.sm-col .head {
|
||
font-family: "NotoSansThai", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 24px;
|
||
line-height: 1.2;
|
||
color: #ffffff;
|
||
margin: 0 0 12px;
|
||
padding: 0;
|
||
letter-spacing: 0.3px;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.sm-col-grade .head {
|
||
height: 40px;
|
||
font-size: 40px;
|
||
}
|
||
|
||
.sm-grade {
|
||
margin: 0;
|
||
padding: 7px 6px;
|
||
font-family: "NotoSansThai", sans-serif;
|
||
font-weight: 900;
|
||
font-size: 96px;
|
||
color: #ffffff;
|
||
text-shadow:
|
||
0 0 16px rgba(120, 220, 255, 0.65),
|
||
0 0 32px rgba(80, 180, 240, 0.4);
|
||
line-height: 0.95;
|
||
}
|
||
|
||
/* เส้นแบ่งแนวตั้ง (popup-result-Line2.png 4×270) */
|
||
.sm-vrule {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-self: stretch;
|
||
height: 270px;
|
||
}
|
||
|
||
.sm-line-2 {
|
||
width: 4px;
|
||
height: 270px;
|
||
display: block;
|
||
object-fit: fill;
|
||
}
|
||
|
||
/* โบนัส: ซ้าย = หัวข้อ + ภารกิจสำเร็จ | ขวา = Bail Coin สูงเท่ากลุ่มซ้าย */
|
||
.sm-col-bonus {
|
||
align-items: center;
|
||
width: 486px;
|
||
}
|
||
|
||
.sm-bonus {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: stretch;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
width: auto;
|
||
max-width: 100%;
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.sm-bonus-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
width: 271px;
|
||
height: 272px;
|
||
flex-shrink: 0;
|
||
font-size: 15px;
|
||
padding-top: 42px;
|
||
padding-bottom: 42px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.sm-bonus-left .head {
|
||
width: 100%;
|
||
height: 53px;
|
||
margin: 0;
|
||
text-align: left;
|
||
font-size: 40px;
|
||
line-height: 1.2;
|
||
padding-left: 23px;
|
||
padding-right: 23px;
|
||
}
|
||
|
||
.sm-bonus .complete {
|
||
display: block;
|
||
width: 271px;
|
||
height: 90px;
|
||
flex-shrink: 0;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 10px rgba(91, 255, 141, 0.45));
|
||
}
|
||
|
||
.sm-bonus-right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
height: 258px;
|
||
}
|
||
|
||
.sm-bonus .bail-card {
|
||
display: block;
|
||
width: auto;
|
||
height: 258px;
|
||
max-width: 152px;
|
||
flex-shrink: 0;
|
||
object-fit: contain;
|
||
object-position: center center;
|
||
filter: drop-shadow(0 0 14px rgba(120, 220, 255, 0.55));
|
||
}
|
||
|
||
/* =========================================================
|
||
ปุ่ม "รับหลักฐาน" – กึ่งกลางจอ ทับขอบล่าง popup
|
||
========================================================= */
|
||
.sm-btn-done {
|
||
left: 784px;
|
||
top: 818px;
|
||
width: 351px;
|
||
height: 141px;
|
||
z-index: 12;
|
||
}
|
||
|
||
.sm-btn-done img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 14px rgba(120, 220, 255, 0.45));
|
||
}
|
||
|
||
.sm-btn-done.btn:hover {
|
||
transform: none;
|
||
filter: brightness(1.12) drop-shadow(0 0 18px rgba(120, 220, 255, 0.6));
|
||
}
|
||
|
||
.sm-btn-done.btn:active {
|
||
transform: none;
|
||
filter: brightness(0.95);
|
||
}
|