/* 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);
}