body,
html {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    overflow: hidden;
    color: #000000;
}

/* คลุมถึงพวก input, button, select และ textarea ด้วย */
*,
*::before,
*::after,
input,
button,
select,
textarea {
    font-family: 'Bai Jamjuree', sans-serif !important;
}

#game-heatready-thermal {
    --blue-correct: #5D9CEC;
    --red-wrong: #ED5565;
    --black: #333;
    --orange: #F37021;
    --green: #2ECC71;
    --light-pink: #F8D7DA;
    --correct-color: #00ff00;
    --wrong-color: #ff0000;
    --bonus-color: #ffeb3b;
    font-family: 'Bai Jamjuree', sans-serif !important;
    /* ล็อคแค่ในขอบเขตเกม */
}

#game-heatready * {
    box-sizing: border-box;
}

.game-wrapper {
    width: 100vw;
    height: 100vh;
    background: url('../images/thermal-intro-bg.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(14px, 2.5vw, 24px);
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    /* padding-bottom: 50px; */
}

.game-wrapper h2 {
    font-size: 1.5 em;
    /* จะใหญ่เป็น 1.5 เท่าของ wrapper เสมอ */
}

.game-entry-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ใช้สีพื้นหลังที่เข้ากับธีมเกม หรือใส่รูป BG สวยๆ */
    background: linear-gradient(135deg, var(--blue-correct), #003366);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /* ให้มั่นใจว่าทับทุกอย่าง */
    color: white;
    text-align: center;
    backdrop-filter: blur(5px);
    /* แถม: ทำพื้นหลังเบลอๆ ให้ดูหรูขึ้น */
}

/* สร้างลูกไฟ */
.fireball {
    width: 150px;
    /* ปรับขนาดตามต้องการ */
    position: absolute;
    /* ลอยตัวอิสระ */
    top: 80%;
    /* วางไว้ช่วงกลางๆ จอ */
    z-index: 1;
    /* ให้อยู่ใต้ปุ่ม Play และโลโก้ (ถ้าไม่อยากให้บัง) */

    /* ใช้ 'steps' หรือการเขียน keyframes แบบกระตุกเพื่อให้ดูเหมือนกระโดด */
    animation: fireballCuteMove 12s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fireballCuteMove {

    /* --- อยู่ฝั่งขวา: หันซ้าย (หน้าปกติ) --- */
    0%,
    100% {
        left: 95%;
        /* ขยับไปทางขวาให้สุดขึ้น */
        transform: translateX(-50%) scaleX(1) translateY(0);
    }

    /* ระหว่างวิ่งมาซ้าย (กระโดดดึ๋งๆ) */
    10%,
    30% {
        transform: translateX(-50%) scaleX(1) translateY(-20px);
    }

    20%,
    40% {
        transform: translateX(-50%) scaleX(1) translateY(0);
    }

    /* --- ถึงฝั่งซ้าย: ก่อนจะกลับตัว --- */
    45% {
        left: 5%;
        /* ขยับมาชิดซ้ายให้เท่ากับฝั่งขวา */
        transform: translateX(-50%) scaleX(1) translateY(0);
    }

    /* --- กลับตัวที่ฝั่งซ้าย: พลิกหน้าไปทางขวา --- */
    50% {
        left: 5%;
        transform: translateX(-50%) scaleX(-1) translateY(0);
    }

    /* ระหว่างวิ่งกลับไปขวา (กระโดดดึ๋งๆ) */
    60%,
    80% {
        transform: translateX(-50%) scaleX(-1) translateY(-20px);
    }

    70%,
    90% {
        transform: translateX(-50%) scaleX(-1) translateY(0);
    }

    /* --- กลับมาถึงฝั่งขวา: ก่อนจะพลิกหน้ากลับ --- */
    95% {
        left: 95%;
        transform: translateX(-50%) scaleX(-1) translateY(0);
    }
}


@media (max-width: 600px) {
    .screen-intro {
        width: 100%;
        padding: 50px 10px;
    }

    .screen-intro .img-btn-action {
        max-width: 150px;
    }

    #screen-game-intro .heat-ready-th-logo {
        width: 50%;
    }
}


/* -------------------------------------------------------------------------- */
/* ปุ่มกดแบบต่างๆ */
/* -------------------------------------------------------------------------- */

.img-btn-action {
    cursor: pointer;
    width: calc(50% + 50px);
    max-width: 100px;
    /* ปรับขนาดความกว้างตามความเหมาะสมของหน้าจอ */
    height: auto;
    display: block;
    margin: 0px auto;
    transition: transform 0.1s;
}

.img-btn-action:active {
    transform: scale(0.95);
    /* กดแล้วให้ยุบตัวนิดนึงเหมือนปุ่มจริง */
}

.btn-start,
.btn-main {
    padding: 18px 60px;
    font-size: 28px;
    font-weight: bold;
    font-family: "Bai Jamjuree", sans-serif;
    color: #000;
    background-color: #ffeb3b;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 235, 59, 0.3);
    transition: all 0.2s ease;
}

.btn-start:hover,
.btn-main:hover {
    background-color: #fff176;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(255, 235, 59, 0.5);
}

.box-bt {
    width: 15%;
    right: 1%;
    bottom: 5%;
    position: absolute;
    box-sizing: border-box;
}

.box-bt .bt-intro {
    position: relative;
}

.box-bubble {
    position: relative;
}

.box-bt span {
    font-size: 1.8em;
    font-weight: 700;
    position: absolute;
    z-index: 2;
    top: 20%;
    left: 15%;
}

.text-bubble {
    width: 80%;
    min-width: 200px;
    position: relative;
}

.box-bt .img-btn-action {
    position: relative;
}

.refresh-bt{
  width:auto;
  height:50px;
  font-size: 1em;
  border-width:1px;
  color:#c92200;
  border-color:#e65f44;
  font-weight:bold;
  padding: 5px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:inset 0px 1px 0px 0px #f9eca0;
  text-shadow:inset 0px -15px 0px #f5e8a6;
  background:#f0c911;

}
.refresh-bt:hover {
    color: #FFFFFF;
}
.refresh-bt:active{
    transform: scale(0.95);
}
       

/* =============================================================== */
/*======================= Start IntroSection ====================*/
/* =============================================================== */

#screen-game-intro {
    height: 100vh;
    position: relative;
    /* เต็มความสูงหน้าจอ */
    display: flex;
    flex-direction: column;
    /* เรียงของจากบนลงล่าง */
    justify-content: space-between;
    /* กระจายของให้ห่างกันที่สุด (บน-ล่าง) */
    align-items: center;
    /* จัดกึ่งกลางแนวนอนทุกอย่าง */
    padding: 50px 0px;
    /* เว้นระยะขอบบนและล่างกันหลุดจอ */
    box-sizing: border-box;
    /* ให้ padding ไม่เพิ่มความสูง div */
    max-width: 800px;
}


.intro-game-text {
    width: 100%;
    max-width: 600px;
    margin-top: 100px;
    z-index: 10;
    animation: heatEffect 2.5s ease-in-out infinite;
}

@keyframes heatEffect {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

#screen-game-intro .heat-ready-th-logo {
    width: 50%;
    z-index: 10;
}

#screen-game-intro .img-btn-action {
    max-width: 160px;
    z-index: 10;
}

/* -------------------------------------------------------------------------- */
/* intro screen2 */
/* -------------------------------------------------------------------------- */
#screen-game-intro2 {
    width: 100vw;
    height: 100vh;
    background: url('../images/thermal-intro-bg2.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

#intro-envelope {
    width: 50%;
    max-width: 200px;
    top: 50%;
    z-index: 10;
    animation: pulse-envelope 1s ease-in-out infinite;
    cursor: pointer;
}

@keyframes pulse-envelope {
    0% {
        transform: scale(1);
        /* ขนาดปกติ */
    }

    50% {
        transform: scale(2);
        /* ขยายใหญ่ขึ้น 8% (ปรับตัวเลขได้ตามใจชอบ) */
    }

    100% {
        transform: scale(1);
        /* กลับมาขนาดปกติ */
    }
}

/* -------------------------------------------------------------------------- */
/* intro screen3 */
/* -------------------------------------------------------------------------- */

#screen-game-intro3 {
    width: 100vw;
    height: 100vh;
    background: url('../images/thermal-intro-bg3.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

#typewriter-text {
    width: 50%;
    max-width: 800px;
    height: 50%;
    max-height: 500px;
    margin: 0 auto;
    z-index: 10;
    color: #FFFFFF;
    font-size: 1.4em;
    line-height: 1.6em;
    text-align: center;
    word-wrap: break-word;
    /* สั่งให้ตัดบรรทัดแบบคำไม่ขาด */
}

#typewriter-text::after {
    content: "|";
    display: inline-block;
    animation: blink 0.7s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@media (max-width: 1500px) {
    #typewriter-text {
        width: 80%;
        font-size: 1.2em;
        line-height: 1.4em;
    }
}

#screen-game-intro4 .img-btn-action{
    width: calc(50% + 10px);
}

.bt-intro {
    position: absolute;
    z-index: 10;
    bottom: 10%;
    right: 10%;
    max-width: 150px !important;
    border-radius: 50%;
    /* ตัดขอบเป็นวงกลม */
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
    /* ใส่เงา */
}

.bt-intro:hover {
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
    /* ใส่เงา */
}


/* -------------------------------------------------------------------------- */
/* intro screen4 */
/* -------------------------------------------------------------------------- */

#screen-game-intro4 {
    width: 100vw;
    height: 100vh;
    background: url('../images/thermal-intro-bg4.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

#screen-game-intro4 p {
    width: 80%;
    max-width: 800px;
    min-width: 800px;
    height: 50%;
    max-height: 500px;
    min-height: 500px;
    margin: 0 auto;
    z-index: 10;
    color: #FFFFFF;
    font-size: 1.1em;
    line-height: 1.8em;
    text-align: center;
    word-wrap: break-word;
}

@media (max-width: 1800px) {
    #screen-game-intro4 p {
        font-size: 1em;
    }
}

/* -------------------------------------------------------------------------- */
/* screen-rule1 + 2  */
/* -------------------------------------------------------------------------- */

#screen-rule1,
#screen-rule2 {
    width: 100vw;
    height: 100vh;
    background: url('../images/thermal-intro-bg5.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

.rule-img-text {
    width: 50%;
    max-width: 800px;
    margin: 0 auto;
    position: absolute;
    z-index: 5;
    right: -25%;
    top: -15%;
}

.rule-bubble {
    width: 40%;
    max-width: 600px;
    min-width: 300px;
    height: max-content;
    background: #ffed00;
    border-radius: 30px;
    padding: 40px;
    position: absolute;
    left: 15%;
    top: 15%;
    box-sizing: border-box;
}

.rule-bubble p {
    line-height: 1.5;
    font-size: 1.2em;
    text-align: center;
}

#screen-rule1 .box-bt span,
#screen-rule2 .box-bt span {
    font-size: 2em;
}

@media (max-width: 1000) {

    #screen-rule1 .box-bt span,
    #screen-rule2 .box-bt span {
        font-size: 1.2em;
    }
}

/* -------------------------------------------------------------------------- */
/* ส่วนประกอบของฉากเล่นเกมหลัก (PLAYING HUD) */
/* -------------------------------------------------------------------------- */
/* ซ่อนเคอร์เซอร์เมาส์ทั้งหมดในพื้นที่ฉากเกมและตัวสแกน */
#screen-stage.game-scene *,
.game-container *,
#viewfinder * {
    cursor: none !important;
}

#screen-stage.game-scene {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* กระจายพื้นที่ บน กลาง ล่าง */
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding: 10px 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #003366;
    /* พื้นหลังมืดสไตล์ห้องแฮกเกอร์ */
    position: relative;
}

/* [บล็อกบน] แถบสถานะคะแนนและเวลา */
.status-bar {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    margin-top: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    /* ล็อกขนาด ไม่ให้ย่อตามสเกลเกม */
}

/* ข้อความตัวเลขภายในแผง */
#timer-box,
#progress-box,
#score-box {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

#timer {
    color: #ff3333;
    font-size: 28px;
}

#score-display {
    font-size: 28px;
}

#progress-display {
    font-size: 28px;
}

/* [บล็อกกลาง] กล่องล็อกสัดส่วนภาพเกม 16:9 ห้ามใครมาทับ */
.game-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    transform-origin: top center !important;
    flex-shrink: 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
    overflow: hidden;


}

#stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.scene-stage {
    width: 1920px;
    height: 880px;
    position: relative;
    background-color: #000;
    overflow: hidden;
    cursor: none;
    z-index: 5;
}

.base-image,
.reveal-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: fill;
    pointer-events: none;
}

.reveal-image {
    z-index: 2;
    display: block !important;
}

.answer-zone {
    position: absolute;
    cursor: pointer;
    /* background-color: rgba(255, 255, 0, 0.2); #เอาไว้เช็ค
    border: 2px solid #ffeb3b; */
    pointer-events: auto;
    z-index: 5;
    transform: translate(-50%, -50%);
}

/* -------------------------------------------------------------------------- */
/* โครงสร้างกล่องสแกนเนอร์เนื้อเดียวกัน (NEW VIEWFINDER SYSTEM) */
/* -------------------------------------------------------------------------- */
/* 🛠 กล่องหลักที่วิ่งตามเมาส์ ล็อคขนาดจัตุรัส 120x120px */
.viewfinder-lens-box {
    position: absolute;
    width: 120px;
    height: 120px;
    z-index: 10;
    display: none;
    pointer-events: none;
    /* ยอมให้คลิกทะลุไปโดนปุ่มเป้าหมายด้านหลังได้ */
}

/* 🛠 ภายในเลนส์: ดึงภาพเลเยอร์ความร้อนมาเป็น Background ขนาดเท่าจอเกมหลัก */
.reveal-lens {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
    /* บังคับสเกลให้เท่าขนาดภาพใหญ่ */
    border-radius: 12px;
}

.viewfinder-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border: 10px solid #4d4d4d;
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.7),
        /* ชั้นที่ 1: เงาดำด้านในกล่อง */
        0 0px 7px rgb(94, 42, 0),
        /*  แทรกเงาตรงนี้ */
        0 0 0 10px #ffeb3b,
        /* ส้นสีเหลืองล้อมรอบหนา 10px (เท่ากันทุกด้าน) */
        -2px -2px 0 10px #ff9800;

    border-radius: 12px;
    box-sizing: border-box;
    z-index: 5;

}

.neck-warp {
    filter: drop-shadow(5px 5px 0px #ff9800);
}

/* 1. กล่องแม่: จัดตำแหน่งพิกัดบนเครื่องสแกน และใส่เงาสีส้มทึบ */
.viewfinder-neck-wrapper {
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: 115%;
    height: 80px;
    z-index: 1;

    /* พระเอก: สั่งให้วาดเงาทึบสีส้มเยื้องเฉียงขึ้นไปด้านบนซ้ายล้อกับกรอบจอ */
    /* พารามิเตอร์: X=-3px, Y=-3px, Blur=0px (ทึบ), Color=#ff9800 */
    filter: drop-shadow(-3px 1px 0px #ff9800);
}

/* ส่วนคอ ลอยต่อใต้กล่อง */
.viewfinder-neck {
    width: 100%;
    height: 100%;
    background: #ffeb3b;
    /* clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%); */
    /* clip-path: url('data:image/svg+xml;utf8,<svg xmlns="http://w3.org" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 Q0,0 0,0 L100,0 Q100,0 100,0 L82,90 Q80,100 77,100 L23,100 Q20,100 18,90 Z" fill="black" /></svg>#svgPath'); */
    -webkit-clip-path: polygon(
            /* มุมบนซ้าย (มนนิดๆ) */
            0% 12%, 3% 4%, 8% 0%,
            /* มุมบนขวา (มนนิดๆ) */
            92% 0%, 97% 4%, 100% 12%,
            /* มุมล่างขวา (สโลป+มน) */
            82% 85%, 80.5% 94%, 77% 100%,
            /* มุมล่างซ้าย (สโลป+มน) */
            23% 100%, 19.5% 94%, 18% 85%);
    z-index: 1;
    clip-path: polygon(0% 12%, 3% 4%, 8% 0%,
            92% 0%, 97% 4%, 100% 12%,
            82% 85%, 80.5% 94%, 77% 100%,
            23% 100%, 19.5% 94%, 18% 85%);
}

/* 1. กล่องแม่: ควบคุมพิกัดบนเครื่องสแกน และใส่เงาฟุ้งสีน้ำตาล */
.viewfinder-neck-gray-wrapper {
    position: absolute;
    top: 104px;
    left: 50%;
    transform: translateX(-50%);
    width: 102%;
    height: 60%;
    z-index: 6;
    /* อยู่เหนือหน้าจอเพื่อพาดทับรอยต่อ */

    /* พระเอก: ใส่เงาน้ำตาลฟุ้งๆ ออกมารอบทิศทางตามรูปทรงคางหมูด้านใน */
    filter: drop-shadow(0px 5px 5px rgb(94, 42, 0, 0.5));
}

/* >>> ส่วนคอชิ้นส่วนสีเทาที่ซ้อนด้านบน <<< */
.viewfinder-neck-gray {
    width: 100%;
    height: 100%;
    background: #4d4d4d;

    /* วาดเส้นตัดคางหมู: บนกว้างเต็ม 100% ส่วนครึ่งล่างบีบสโลปเฉลียงและเข้ามุมมนตามบอดี้สีเหลือง */
    -webkit-clip-path: polygon(
            /* ขอบด้านบนซ้าย-ขวา ปล่อยกว้างเต็ม 120px ชนขอบหน้าจอพอดี */
            0% 0%,
            100% 0%,
            /* ด้านล่างบีบเฉลียงแคบลง และใช้จุดพิกัดดัดโค้งทำมุมมน */
            84% 80%, 82% 92%, 78% 100%,
            22% 100%, 18% 92%, 16% 80%);
    clip-path: polygon(0% 0%,
            100% 0%,
            84% 80%, 82% 92%, 78% 100%,
            22% 100%, 18% 92%, 16% 80%);
    box-shadow: 0 0px 7px rgb(94, 42, 0),
}

/* จัดตำแหน่งแผงปุ่มกดให้อยู่บนแถบสีเทา */
.viewfinder-buttons {
    position: absolute;
    top: 120px;
    /* ดันตำแหน่งให้อยู่ตรงกลางแผงสีเทาพอดี */
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    /* บีบความกว้างไม่ให้ปุ่มหลุดขอบสโลปคางหมู */
    display: flex;
    justify-content: space-between;
    /* กระจายปุ่มให้เว้นระยะห่างเท่าๆ กัน */
    z-index: 7;
    /* ดันให้อยู่เหนือแผงสีเทา .viewfinder-neck-gray */
}

/* หน้าตาของแต่ละปุ่ม */
.viewfinder-buttons .btn-item {
    width: 14px;
    height: 8px;
    background: #757575;
    /* ใช้สีเทาอ่อนกว่าแผงพื้นหลังเพื่อให้เห็นปุ่มชัดเจน */
    border-radius: 2px;
    /* ทำมุมมนจิ๋วๆ ให้ปุ่มดูมีมิติ */
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.4);
    /* เพิ่มมิติความลึกให้ปุ่ม */
}

/* จัดตำแหน่งแผงปุ่มกดแถวล่าง (ให้อยู่ถัดลงมาจากแผงแรก) */
.viewfinder-nav-buttons {
    position: absolute;
    top: 135px;
    /* ดันระยะลงมาจากแถวแรก (แถวแรกอยู่ประมาณ 112px) */
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    /* บีบความกว้างให้แคบลงตามลักษณะคางหมูที่เรียวลง */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 7;
}

/* กลุ่มปุ่มแนวตั้ง (ขึ้น/ลง) ที่อยู่ตรงกลาง */
.btn-nav-vertical {
    display: flex;
    flex-direction: column;
    /* จัดให้ปุ่มเรียงสลับบนล่าง */
    gap: 4px;
    /* ระยะห่างระหว่างปุ่มขึ้นกับลง */
}

/* ลักษณะหน้าตาพื้นฐานของปุ่มกดแถวล่างทั้งหมด */
.btn-nav-arrow {
    width: 14px;
    height: 10px;
    background: #5965d1;
    /* สีเทาอ่อนเฉดเดียวกับปุ่มแถวบน */
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ปรับสไตล์เฉพาะปุ่มแนวตั้ง (ขึ้น/ลง) ให้มีลักษณะผอมเพรียวและสมส่วนขึ้น */
.btn-nav-vertical .btn-nav-arrow {
    width: 16px;
    height: 7px;
}


/* ส่วนด้ามจับ */
.viewfinder-handle {
    position: absolute;
    top: 50px;
    /* ขยับขึ้นเล็กน้อยเพื่อให้เชื่อมกับคอสีเหลืองสนิท */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 120px;
    background: #4d4d4d;
    /* ปรับเป็นสีเทาเข้มตามแบบดีไซน์กล้องจริง */
    border-radius: 0 0 20px 20px;
    z-index: 0;
    /* อยู่เลเยอร์ล่างสุด */
    position: relative;
    /* <<< สำคัญ: ต้องใส่เพื่อให้ตัวลูก ::after เกาะตำแหน่งได้ถูกต้อง */
    overflow: hidden;
    /* <<< เพิ่มบรรทัดนี้เพื่อตัดขอบสีเหลืองไม่ให้ทะลุมุมมนของด้ามจับ */
    background: linear-gradient(to left, #333333 0%, #666666 30%, #4d4d4d 70%, #222222 100%);
}

/* >>> ส่วนเสริม: ปลายด้ามจับสีเหลืองซ้อนด้านล่างสุด <<< */
.viewfinder-handle::after {
    content: "";
    position: absolute;
    bottom: 0;
    /* ล็อคให้อยู่ติดขอบล่างสุด */
    left: 0;
    width: 100%;
    height: 25px;
    /* ความหนาของแถบสีเหลืองที่ปลายด้าม (ปรับเพิ่ม/ลดได้ตามชอบ) */
    background: #ffeb3b;
    /* สีเหลืองเฉดเดียวกับตัวเครื่อง */
    border-radius: 0 0 20px 20px;
    /* ทำขอบล่างให้โค้งมนรับกับตัวด้ามจับ */
    background: linear-gradient(to left, #fbc02d 0%, #fff59d 30%, #ffeb3b 70%, #f57f17 100%);
}

/* -------------------------------------------------------------------------- */
/* แกลเลอรีผลลัพธ์ด้านล่าง (RESULT GALLERY) */
/* -------------------------------------------------------------------------- */

.result-container {
    width: 1920px;
    height: 120px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.result-list {
    display: flex;
    gap: 15px;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    /* หากไอเทมเยอะเกินให้สไลด์ซ้ายขวาได้ */
}

.stage-gallery-inside {
    position: absolute;
    bottom: 0px;
    width: 90%;
    max-width: 1200px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.capture-card {
    width: 70px;
    /* 🎯 ปรับรูปมาซะเล็กให้สมดุลกับกล่อง */
    height: 70px;
    /* border: 3px solid #00ff00; */
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
    /* flex-shrink: 0; */
}

.capture-card.correct {
    border: 4px solid var(--correct-color);
}

.capture-card.bonus {
    border: 4px solid var(--bonus-color);
}

.capture-card.wrong {
    border: 4px solid var(--wrong-color);
}

/* จัดให้แบคกราวด์แสดงพรีวิวจัตุรัส */
.preview-img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
    /* 🛠 แก้ไขจาก 880 -> 1080px เพื่อแมปพิกัดเลเยอร์สัดส่วนแท้จริง */
}

/* -------------------------------------------------------------------------- */
/* การจัดการตารางรีวิวหน้าสรุปด่าน (REVIEW TABLE) */
/* -------------------------------------------------------------------------- */
#screen-result {
    width: 100vw;
    height: 100vh;
    background: url('../images/thermal-result-bg.jpg') no-repeat center center;
    background-size: cover;
    justify-content: center;
    display: flex;
    font-size: clamp(14px, 2.5vw, 24px);
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

#screen-result .card {
    width: 80%;
    max-width: 1300px;
    min-width: 800px;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.result-text-img {
    width: 50%;
    height: auto;
    position: relative;
    margin-top: 5%;
    z-index: 2;
}

.result-text {
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.4em;
    position: relative;
    z-index: 1;
    margin-top: 0;
    margin-bottom: 10px;
}

#img-des {
    width: 90%;
    font-size: 1.5em;
    word-wrap: break-word;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 124px));
    /* บังคับแบ่ง 5 คอลัมน์ คอลัมน์ละไม่เกิน 124px *; */
    gap: 20px;
    width: 100%;
    overflow-y: auto;
    justify-content: center;
    box-sizing: border-box;
}

.review-item-card {
    width: 100%;
    align-items: center;
    background: #FFFFFF;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 12px 24px 12px;
    /* บน ขวา ล่าง ซ้าย (เน้นหนาด้านล่างสำหรับเขียนข้อความ) */
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* เพิ่มมิติเงาเหมือนกระดาษซ้อนกัน */
    box-sizing: border-box;
    cursor: pointer;
}

.review-item-card:active {
    transform: scale(0.95);
    /* กดแล้วให้ยุบตัวนิดนึงเหมือนปุ่มจริง */
}

.review-thumb {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background-repeat: no-repeat;
    background-size: 1920px 1080px;
    flex-shrink: 0;
}

/* =============================================================== */
/*======================= Start Summary Section ====================*/
/* =============================================================== */

#screen-summary {
    text-align: center;
}

#screen-summary .card {
    height: auto;
    background-color: var(--light-pink);
    border-radius: 40px;
    padding: 40px 40px 60px 40px;
    width: 100%;
    max-width: 800px;
    box-shadow: 10px 10px 5px rgba(92, 92, 92, 0.5);
    position: relative;
    box-sizing: border-box;
}

#total-score {
    font-size: 1.5em;
    font-weight: 900;
    color: var(--orange);
    margin: 5px 0;
}

#total-time-display {
    font-weight: 700;
    color: #666;
    margin-bottom: 10px;
}

#player-name {
    width: 80%;
    padding: 12px;
    border-radius: 15px;
    border: 3px solid var(--black);
    margin: 30px 0;
    text-align: center;
    font-size: 1em;
}

#btn-save {
    /* 1. ขนาดและการจัดวาง */
    width: 100%;
    max-width: 280px;
    padding: 15px 30px;
    margin: 0 auto;

    /* 2. สไตล์ปุ่ม */
    background-color: var(--orange);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    border: 3px solid #000000;
    /* ขอบดำหนาๆ ให้ดูเป็นสไตล์เกม */
    border-radius: 50px;
    /* ทรงมนยาว (Pill Shape) */

    /* 3. มิติและเงา */
    box-shadow: 0 4px 0 #333;
    /* เงาด้านล่างแบบ Flat Design เหมือนปุ่มกดจริง */
    transition: all 0.2s ease;
    /* ให้ตอนกดดูนุ่มนวล */

    /* 4. จัดการ Text */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* เอฟเฟกต์ตอนเอาเมาส์ไปวาง (Hover) */
#btn-save:hover {
    background-color: #ff8533;
    /* ส้มสว่างขึ้นนิดนึง */
    transform: translateY(-2px);
    /* ลอยขึ้นนิดหน่อย */
    box-shadow: 0 6px 0 #333;
}

/* เอฟเฟกต์ตอนกด (Active) */
#btn-save:active {
    transform: translateY(4px);
    /* ปุ่มยุบลงไปเหมือนโดนกดจริง */
    box-shadow: 0 0 0 #333;
    /* เงาหายไปตอนกด */
}

@media (max-width: 600px) {
    #screen-summary {
        width: 100%;
    }

    #screen-summary h1 {
        font-size: 3em;
    }

    #total-score {
        font-size: 2em;
    }

    #total-time-display {
        font-size: 1.8em;
    }

    #player-name {
        font-size: 1.2em;
    }

}


/*----------------- End Summary Section -------------------*/

/* =============================================================== */
/*======================= Start Leaderboard Section ====================*/
/* =============================================================== */

#screen-leaderboard {
    height: 100vh;
    width: 100%;
    max-width: 800px;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#screen-leaderboard .card {
    height: auto;
    background-color: var(--light-pink);
    border-radius: 40px;
    padding: 40px 40px 60px 40px;
    width: 100%;
    max-width: 800px;
    box-shadow: 10px 10px 5px rgba(92, 92, 92, 0.5);
    position: relative;
    box-sizing: border-box;
    z-index: 2;
}

.rank-table {
    width: 100%;
    margin: 15px 0;

    border-collapse: collapse;
    font-size: 0.8em;
    background: white;
    border-radius: 15px;
    overflow: hidden;

}

.rank-table th {
    background: var(--orange);
    color: white;
    padding: 8px;
}

.rank-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

@media screen and (min-width: 601px) and (max-width: 869px) {
    #screen-leaderboard {
        padding-left: 50px;
        padding-right: 50px;
    }
}

/*----------------- End Leaderboard Section -------------------*/

/* -------------------------------------------------------------------------- */
/* ปุ่มเสียง */
/* -------------------------------------------------------------------------- */

.audio-control-group {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    /* เรียงต่อกันแนวนอน */
    gap: 15px;
    /* ห่างกันนิดนึงจะได้ไม่จิ้มพลาด */
    z-index: 10001;
}

.mute-icon {
    width: 45px;
    height: auto;
    /* ใส่พื้นหลังจางๆ วงกลมให้ดูเป็นระเบียบ (ถ้าชอบ) */
    background: rgba(255, 255, 255, 0.2);
    padding: 5px;
    border-radius: 50%;
}

.mute-button-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}


/* ปรับขนาดให้เล็กลงหน่อยเมื่ออยู่ในมือถือ */
@media (max-width: 600px) {
    .mute-icon {
        width: 40px;
        top: 15px;
        right: 15px;
    }

}