1553 lines
75 KiB
HTML
1553 lines
75 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="th">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>โถงรอ — Game</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/room-lobby.css?v=0.0172">
|
||
<link rel="stylesheet" href="css/profile-popup.css?v=6">
|
||
<link rel="stylesheet" href="css/customize-popup.css?v=40">
|
||
<style>
|
||
html, body.room-lobby-page { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; min-height: 100%; }
|
||
#mic-permission-overlay {
|
||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||
z-index: 9999;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: rgba(10, 10, 20, 0.88);
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
#mic-permission-overlay.hidden { display: none !important; }
|
||
/* How to — อยู่เหนือไมค์ */
|
||
#room-howto-overlay {
|
||
position: fixed; inset: 0; z-index: 10000;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
background: rgba(4, 6, 18, 0.88);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
#room-howto-overlay.hidden { display: none !important; }
|
||
.room-howto-inner {
|
||
position: relative;
|
||
width: min(1201px, calc(100vw - 24px), calc((100dvh - 24px) * (1201 / 905)));
|
||
aspect-ratio: 1201 / 905;
|
||
max-height: min(905px, calc(100dvh - 24px));
|
||
text-align: center;
|
||
}
|
||
.room-howto-inner > img.room-howto-art {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
.room-howto-close {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: clamp(-20px, -1.3%, 52px);
|
||
transform: translateX(-50%);
|
||
z-index: 2;
|
||
}
|
||
#room-howto-btn-got-it {
|
||
padding: 0; border: none; background: transparent; cursor: pointer;
|
||
width: auto;
|
||
height: min(146px, calc((100dvh - 24px) * (146 / 905)));
|
||
aspect-ratio: 373 / 146;
|
||
}
|
||
#room-howto-btn-got-it img { display: block; width: 100%; height: auto; }
|
||
#room-players-hud {
|
||
position: fixed;
|
||
top: max(10px, env(safe-area-inset-top));
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 50;
|
||
margin: 0;
|
||
padding: 0.2rem 0.45rem;
|
||
font-family: 'NotoSansThai', 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(1.2rem, 2.4vw, 1.55rem);
|
||
font-weight: 500;
|
||
letter-spacing: 0.04em;
|
||
color: #e2e8f0;
|
||
text-shadow:
|
||
0 2px 0 rgba(0, 0, 0, 0.78),
|
||
0 0 10px rgba(0, 0, 0, 0.52);
|
||
pointer-events: none;
|
||
}
|
||
/* ข้อเสนอตัวป่วน (LobbyB) — เหนือ howto/mic */
|
||
#troublesome-overlay {
|
||
position: fixed; inset: 0; z-index: 10050;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
background: rgba(4, 4, 12, 0.78);
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
#troublesome-overlay.is-hidden { display: none !important; }
|
||
.troublesome-modal {
|
||
--tb-scale: min(1, calc((100dvh - 24px) / 964px), calc((100vw - 24px) / 864px));
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: calc(864px * var(--tb-scale));
|
||
max-width: calc(864px * var(--tb-scale));
|
||
gap: calc(12px * var(--tb-scale));
|
||
}
|
||
.troublesome-art {
|
||
display: block;
|
||
width: calc(864px * var(--tb-scale));
|
||
height: calc(709px * var(--tb-scale));
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 24px rgba(255, 40, 60, 0.35));
|
||
}
|
||
.troublesome-actions {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: nowrap;
|
||
gap: calc(8px * var(--tb-scale));
|
||
margin-top: calc(-4px * var(--tb-scale));
|
||
}
|
||
.troublesome-decline-btn, .troublesome-accept-btn {
|
||
width: calc(351px * var(--tb-scale));
|
||
height: calc(150px * var(--tb-scale));
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
flex: 0 0 auto;
|
||
transition: transform 0.15s ease, filter 0.15s ease;
|
||
}
|
||
.troublesome-decline-btn:hover, .troublesome-accept-btn:hover {
|
||
transform: scale(1.04); filter: brightness(1.08);
|
||
}
|
||
.troublesome-decline-btn img, .troublesome-accept-btn img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
.troublesome-timer-wrap {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: calc(-54px * var(--tb-scale));
|
||
transform: translateX(-50%);
|
||
width: calc(105px * var(--tb-scale));
|
||
height: calc(105px * var(--tb-scale));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url(/Main-Lobby/IMAGE/Troublesome/time-frame.png) center/contain no-repeat;
|
||
flex: 0 0 auto;
|
||
margin-bottom: 0;
|
||
z-index: 2;
|
||
}
|
||
.troublesome-timer-wrap span {
|
||
font-family: 'NotoSansThai', 'Kanit', system-ui, sans-serif !important;
|
||
font-weight: 700;
|
||
font-size: calc(35px * var(--tb-scale));
|
||
line-height: 1;
|
||
color: #ffffff;
|
||
text-shadow: 0 0 8px rgba(255, 80, 100, 0.8);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
/* เลือกผู้ต้องสงสัย (LobbyB) — หลังข้อเสนอตัวป่วน */
|
||
#suspect-pick-overlay {
|
||
position: fixed; inset: 0; z-index: 10045;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
background: rgba(5, 10, 24, 0.86);
|
||
backdrop-filter: blur(10px);
|
||
overflow: auto;
|
||
}
|
||
#suspect-pick-overlay.is-hidden { display: none !important; }
|
||
.suspect-pick-scale-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.suspect-pick-inner {
|
||
width: 1500px;
|
||
max-width: none;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
display: flex; flex-direction: column; align-items: center;
|
||
gap: 14px;
|
||
transform-origin: top center;
|
||
will-change: transform;
|
||
}
|
||
.suspect-pick-title-img {
|
||
display: block;
|
||
width: 1149px;
|
||
max-width: 100%;
|
||
height: 198px;
|
||
margin: 0 auto;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.35));
|
||
}
|
||
.suspect-cards-row {
|
||
display: flex; flex-direction: row; flex-wrap: nowrap;
|
||
align-items: flex-end; justify-content: center;
|
||
gap: 16px;
|
||
width: 100%;
|
||
margin-top: 2px;
|
||
}
|
||
.suspect-card {
|
||
position: relative;
|
||
padding: 0; border: none; background: transparent; cursor: default;
|
||
border-radius: 12px;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
|
||
flex: 0 0 405px;
|
||
width: 405px;
|
||
min-width: 405px;
|
||
max-width: 405px;
|
||
transform: scale(0.87);
|
||
transform-origin: center center;
|
||
opacity: 0.86;
|
||
filter: saturate(0.9);
|
||
}
|
||
.suspect-card > img {
|
||
display: block;
|
||
width: 405px;
|
||
height: 625px;
|
||
border-radius: 10px;
|
||
}
|
||
.suspect-card--host {
|
||
cursor: pointer;
|
||
}
|
||
.suspect-card--host:hover {
|
||
filter: brightness(1.06) saturate(1);
|
||
}
|
||
.suspect-card--selected {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
filter: none;
|
||
box-shadow: none;
|
||
}
|
||
.suspect-card-ui {
|
||
position: absolute;
|
||
left: 61%;
|
||
bottom: 11%;
|
||
transform: translateX(-50%);
|
||
width: 368px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 9px;
|
||
pointer-events: none;
|
||
}
|
||
.suspect-card-ui-row {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
.suspect-card-ui-row--top {
|
||
padding-left: 4px;
|
||
padding-right: 2px;
|
||
}
|
||
.suspect-card-ui-row--bottom {
|
||
padding-left: 4px;
|
||
padding-right: 2px;
|
||
margin-bottom: -1%;
|
||
}
|
||
.suspect-txt-2 {
|
||
width: 117px;
|
||
height: 31px;
|
||
object-fit: contain;
|
||
}
|
||
.suspect-txt-3 {
|
||
width: 77px;
|
||
height: 31px;
|
||
object-fit: contain;
|
||
}
|
||
.suspect-stamp-list {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 11px;
|
||
margin-left: 25px;
|
||
}
|
||
.suspect-stamp-list img {
|
||
width: 31px;
|
||
height: 31px;
|
||
object-fit: contain;
|
||
}
|
||
.suspect-symbol-list {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 9px;
|
||
margin-left: 20px;
|
||
}
|
||
.suspect-symbol-list img {
|
||
width: 47px;
|
||
height: 61px;
|
||
object-fit: contain;
|
||
}
|
||
.suspect-pick-hint {
|
||
margin: 8px 0 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
font: 600 15px/1.35 system-ui, "Segoe UI", "Kanit", sans-serif;
|
||
color: rgba(224, 230, 255, 0.92);
|
||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
|
||
}
|
||
.suspect-pick-hint.is-hidden { display: none !important; }
|
||
.suspect-pick-actions {
|
||
display: none;
|
||
width: 100%;
|
||
margin-top: -2px;
|
||
align-items: center;
|
||
min-height: 116px;
|
||
}
|
||
.suspect-pick-actions.suspect-pick-actions--visible {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
.suspect-btn-start {
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
width: 253px;
|
||
max-width: 253px;
|
||
height: 116px;
|
||
margin: 0 auto;
|
||
transition: filter 0.2s, transform 0.15s;
|
||
}
|
||
.suspect-btn-start img { display: block; width: 100%; height: 100%; object-fit: contain; }
|
||
.suspect-btn-start:hover { transform: scale(1.03); filter: brightness(1.08); }
|
||
.suspect-btn-accuse {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin-bottom: 0;
|
||
width: min(321px, calc((100dvh - 24px) * (321 / 900)));
|
||
max-width: min(321px, calc((100dvh - 24px) * (321 / 900)));
|
||
height: min(126px, calc((100dvh - 24px) * (126 / 900)));
|
||
padding: 0;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
z-index: 2;
|
||
transition: transform 0.15s ease, filter 0.15s ease;
|
||
}
|
||
.suspect-btn-accuse.is-hidden {
|
||
display: none !important;
|
||
}
|
||
.suspect-btn-accuse img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
.suspect-btn-accuse:hover {
|
||
transform: scale(1.03);
|
||
filter: brightness(1.08);
|
||
}
|
||
#suspect-pick-close {
|
||
position: fixed;
|
||
top: max(10px, env(safe-area-inset-top));
|
||
right: max(10px, env(safe-area-inset-right));
|
||
z-index: 10046;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
line-height: 0;
|
||
transition: transform 0.15s ease, filter 0.15s ease;
|
||
}
|
||
#suspect-pick-close:hover { transform: scale(1.07); filter: brightness(1.12); }
|
||
#suspect-pick-close img { display: block; width: min(52px, 11vw); height: auto; }
|
||
/* ปุ่มบนโถง — เปิด overlay ใหม่เมื่อเฟสยัง active */
|
||
#btn-suspect-reopen {
|
||
position: fixed;
|
||
z-index: 10044;
|
||
left: max(12px, env(safe-area-inset-left));
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 22px;
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-weight: 600;
|
||
font-size: clamp(0.82rem, 2.1vw, 1rem);
|
||
color: #e0f2fe;
|
||
cursor: pointer;
|
||
border: 1px solid rgba(34, 211, 238, 0.55);
|
||
border-radius: 999px;
|
||
background: rgba(15, 23, 42, 0.94);
|
||
box-shadow: 0 0 22px rgba(34, 211, 238, 0.28);
|
||
max-width: calc(100vw - 24px);
|
||
}
|
||
#btn-suspect-reopen:hover {
|
||
filter: brightness(1.08);
|
||
box-shadow: 0 0 28px rgba(34, 211, 238, 0.4);
|
||
}
|
||
#btn-suspect-reopen.is-hidden { display: none !important; }
|
||
#btn-suspect-reopen img { flex-shrink: 0; width: 28px; height: auto; display: block; }
|
||
#mic-permission-modal {
|
||
position: relative;
|
||
width: min(916px, calc((100vw - 24px)), calc((100dvh - 24px) * (916 / 499)));
|
||
aspect-ratio: 916 / 499;
|
||
max-height: min(499px, calc(100dvh - 24px));
|
||
background: url(img/mic-permission-bg.png) center/100% 100% no-repeat;
|
||
background-size: contain;
|
||
background-color: rgba(26, 27, 38, 0.95);
|
||
border-radius: 16px;
|
||
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.4), 0 0 24px rgba(147, 51, 234, 0.3);
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
#mic-permission-modal .mic-permission-close {
|
||
position: absolute;
|
||
top: clamp(10px, 6%, 35px);
|
||
right: clamp(10px, 3%, 35px);
|
||
width: clamp(48px, 15.83%, 79px);
|
||
height: clamp(48px, 15.83%, 79px);
|
||
padding: 0; border: none; border-radius: 8px;
|
||
background: url(img/mic-permission-btn-close.png) center/contain no-repeat;
|
||
background-color: transparent; cursor: pointer; opacity: 0.95;
|
||
z-index: 3;
|
||
}
|
||
#mic-permission-modal .mic-permission-close:hover { opacity: 1; }
|
||
#mic-permission-modal .mic-permission-txt {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 38%;
|
||
transform: translate(-50%, -50%);
|
||
display: block;
|
||
width: auto;
|
||
height: clamp(120px, 38.68%, 193px);
|
||
aspect-ratio: 665 / 193;
|
||
margin: 0;
|
||
object-fit: contain;
|
||
z-index: 2;
|
||
}
|
||
#mic-permission-modal .mic-permission-btn-allow {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: clamp(18px, 10.5%, 52px);
|
||
transform: translateX(-50%);
|
||
display: block;
|
||
width: auto;
|
||
height: clamp(78px, 28.06%, 140px);
|
||
aspect-ratio: 402 / 140;
|
||
padding: 0; border: none; border-radius: 12px;
|
||
background: url(img/mic-permission-btn-allow.png) center/contain no-repeat;
|
||
background-color: transparent; cursor: pointer; opacity: 0.95;
|
||
z-index: 2;
|
||
}
|
||
#mic-permission-modal .mic-permission-btn-allow:hover { opacity: 1; }
|
||
#mic-permission-modal .mic-permission-btn-allow:disabled { opacity: 0.6; cursor: not-allowed; }
|
||
#mic-permission-modal .mic-permission-btn-allow { font-size: 0; color: transparent; }
|
||
|
||
/* LobbyA — เลือกระดับแล้วคดี (เต็มจอ) */
|
||
#lobby-preplay-overlay {
|
||
position: fixed; inset: 0; z-index: 10042;
|
||
width: 100vw;
|
||
height: 100dvh;
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: stretch;
|
||
background: rgba(3, 5, 14, 0.8);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
#lobby-preplay-overlay.is-hidden { display: none !important; }
|
||
body.room-lobby--preplay-open .room-lobby-ready-fixed,
|
||
#lobby-preplay-overlay:not(.is-hidden) ~ .room-lobby-ready-fixed {
|
||
display: none !important;
|
||
}
|
||
.lobby-preplay-inner {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
max-width: none;
|
||
height: 100%;
|
||
max-height: none;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
|
||
}
|
||
.lobby-preplay-close-top,
|
||
.lobby-preplay-close-case {
|
||
position: absolute;
|
||
top: max(16px, env(safe-area-inset-top));
|
||
right: max(6px, env(safe-area-inset-right));
|
||
z-index: 5;
|
||
padding: 0; border: none; background: transparent; cursor: pointer;
|
||
line-height: 0;
|
||
}
|
||
.lobby-preplay-close-top img,
|
||
.lobby-preplay-close-case img { display: block; width: min(72px, 11vw); height: auto; }
|
||
.lobby-preplay-title-img {
|
||
display: block;
|
||
max-width: min(49vw, 935px);
|
||
width: auto;
|
||
max-height: min(30vh, 232px);
|
||
height: auto;
|
||
margin: clamp(6px, 1.2vh, 16px) auto 30px;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.42));
|
||
}
|
||
.lobby-preplay-subtitle {
|
||
display: none;
|
||
position: relative;
|
||
text-align: center;
|
||
margin: clamp(2px, 0.6vh, 8px) auto clamp(8px, 1.2vh, 16px);
|
||
padding: 0 clamp(16px, 3.2vw, 44px);
|
||
max-width: min(92vw, 860px);
|
||
font-family: system-ui, 'Kanit', sans-serif;
|
||
font-size: clamp(0.88rem, 1.75vw, 1.28rem);
|
||
font-weight: 600;
|
||
line-height: 1.35;
|
||
letter-spacing: 0.01em;
|
||
color: #dbeafe;
|
||
text-shadow: 0 0 14px rgba(34, 211, 238, 0.28);
|
||
}
|
||
.lobby-preplay-subtitle::before,
|
||
.lobby-preplay-subtitle::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: min(92%, 820px);
|
||
pointer-events: none;
|
||
}
|
||
.lobby-preplay-subtitle::before {
|
||
top: -0.35em;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(103, 232, 249, 0.85), rgba(34, 211, 238, 0));
|
||
}
|
||
.lobby-preplay-subtitle::after {
|
||
bottom: -0.45em;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(125, 211, 252, 0.7), rgba(56, 189, 248, 0));
|
||
}
|
||
.lobby-preplay-step {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
#lobby-preplay-step-level {
|
||
justify-content: start;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding-top: 5.5%;
|
||
}
|
||
.lobby-preplay-step.is-hidden { display: none !important; }
|
||
.lobby-preplay-level-row {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: clamp(8px, 1.3vw, 18px);
|
||
min-height: auto;
|
||
height: auto;
|
||
padding: 0;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: thin;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.lobby-preplay-level-row {
|
||
flex-wrap: wrap;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
align-content: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.lobby-level-card {
|
||
flex: 0 0 clamp(148px, 16.7vw, 326px);
|
||
width: clamp(148px, 16.7vw, 270px);
|
||
min-width: clamp(148px, 16.7vw, 270px);
|
||
max-width: clamp(148px, 16.7vw, 326px);
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 12px;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
transition: filter 0.15s ease, transform 0.15s ease;
|
||
line-height: 0;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.lobby-level-card {
|
||
flex: 1 1 40%;
|
||
max-width: 46%;
|
||
}
|
||
}
|
||
.lobby-level-card img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: min(67vh, calc(100dvh - 188px));
|
||
object-fit: contain;
|
||
object-position: bottom center;
|
||
border-radius: 10px;
|
||
}
|
||
.lobby-level-card:hover {
|
||
transform: translateY(-3px);
|
||
filter: brightness(1.08);
|
||
}
|
||
.lobby-level-card.is-selected {
|
||
box-shadow: 0 0 0 2px rgba(52, 211, 235, 0.9), 0 0 32px rgba(52, 211, 235, 0.55);
|
||
}
|
||
.lobby-preplay-back-wrap {
|
||
position: absolute;
|
||
top: max(4px, env(safe-area-inset-top));
|
||
left: max(6px, env(safe-area-inset-left));
|
||
z-index: 5;
|
||
margin: 0;
|
||
}
|
||
.lobby-preplay-back-wrap button {
|
||
padding: 0; border: none; background: transparent; cursor: pointer; line-height: 0;
|
||
}
|
||
.lobby-preplay-back-wrap img { display: block; width: min(367px, 20vw); height: auto; }
|
||
#lobby-preplay-step-case {
|
||
--lobby-preplay-case-scale: 1;
|
||
--lobby-preplay-case-gap: calc(20px * var(--lobby-preplay-case-scale));
|
||
--lobby-preplay-case-head-width: calc(1120px * var(--lobby-preplay-case-scale));
|
||
--lobby-preplay-case-row-width: calc(1400px * var(--lobby-preplay-case-scale));
|
||
--lobby-preplay-case-wrap-width: calc(1260px * var(--lobby-preplay-case-scale));
|
||
--lobby-preplay-case-row-gap: calc(24px * var(--lobby-preplay-case-scale));
|
||
--lobby-preplay-case-wrap-gap: calc(16px * var(--lobby-preplay-case-scale));
|
||
--lobby-preplay-case-arrow-size: calc(130px * var(--lobby-preplay-case-scale));
|
||
--lobby-preplay-case-card-size: calc(439px * var(--lobby-preplay-case-scale));
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: max(calc(10px * var(--lobby-preplay-case-scale)), min(1.6vh, var(--lobby-preplay-case-gap)));
|
||
}
|
||
.lobby-preplay-case-head {
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
width: min(96vw, var(--lobby-preplay-case-head-width));
|
||
padding-top: 0;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
.lobby-preplay-case-row {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
gap: max(calc(10px * var(--lobby-preplay-case-scale, 1)), min(1.5vw, var(--lobby-preplay-case-row-gap, 24px)));
|
||
width: min(96vw, var(--lobby-preplay-case-row-width));
|
||
min-height: auto;
|
||
padding: 0;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: thin;
|
||
}
|
||
.lobby-preplay-case-row-wrap {
|
||
flex: 0 0 auto;
|
||
width: min(98vw, var(--lobby-preplay-case-wrap-width));
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: max(calc(6px * var(--lobby-preplay-case-scale, 1)), min(1vw, var(--lobby-preplay-case-wrap-gap, 16px)));
|
||
}
|
||
.lobby-preplay-case-arrow {
|
||
flex: 0 0 auto;
|
||
width: max(calc(44px * var(--lobby-preplay-case-scale, 1)), min(8vw, var(--lobby-preplay-case-arrow-size, 130px)));
|
||
height: max(calc(44px * var(--lobby-preplay-case-scale, 1)), min(8vw, var(--lobby-preplay-case-arrow-size, 130px)));
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
line-height: 0;
|
||
transition: transform 0.15s ease, filter 0.15s ease;
|
||
}
|
||
.lobby-preplay-case-arrow:hover {
|
||
transform: scale(1.06);
|
||
filter: brightness(1.08);
|
||
}
|
||
.lobby-preplay-case-arrow img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
.lobby-preplay-case-row::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.lobby-preplay-case-row {
|
||
flex-wrap: nowrap;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
width: min(80vw, 520px);
|
||
}
|
||
.lobby-preplay-case-row-wrap {
|
||
width: min(100vw, 980px);
|
||
}
|
||
.lobby-preplay-case-arrow {
|
||
width: clamp(38px, 9vw, 58px);
|
||
height: clamp(38px, 9vw, 58px);
|
||
}
|
||
}
|
||
.lobby-case-card-wrap {
|
||
flex: 0 0 max(calc(220px * var(--lobby-preplay-case-scale, 1)), min(26vw, var(--lobby-preplay-case-card-size, 439px)));
|
||
width: max(calc(220px * var(--lobby-preplay-case-scale, 1)), min(26vw, var(--lobby-preplay-case-card-size, 439px)));
|
||
min-width: max(calc(220px * var(--lobby-preplay-case-scale, 1)), min(26vw, var(--lobby-preplay-case-card-size, 439px)));
|
||
max-width: max(calc(220px * var(--lobby-preplay-case-scale, 1)), min(26vw, var(--lobby-preplay-case-card-size, 439px)));
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: max(calc(6px * var(--lobby-preplay-case-scale, 1)), min(1vh, calc(12px * var(--lobby-preplay-case-scale, 1))));
|
||
border: none;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
background: transparent;
|
||
max-height: none;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.lobby-case-card-wrap {
|
||
flex: 1 1 100%;
|
||
max-width: min(420px, 100%);
|
||
max-height: none;
|
||
}
|
||
}
|
||
.lobby-case-art {
|
||
display: block;
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
min-height: auto;
|
||
max-height: none;
|
||
height: auto;
|
||
object-fit: contain;
|
||
object-position: center top;
|
||
border-radius: 0;
|
||
}
|
||
.lobby-case-actions {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: 11.5%;
|
||
transform: translateX(-50%);
|
||
z-index: 2;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 0;
|
||
justify-content: center;
|
||
width: min(80%, 310px);
|
||
}
|
||
.lobby-case-actions .lobby-case-start {
|
||
margin-left: -8px;
|
||
}
|
||
.lobby-case-actions button {
|
||
flex: 1 1 0;
|
||
padding: 0; border: none; background: transparent; cursor: pointer; line-height: 0;
|
||
}
|
||
.lobby-case-actions button img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
|
||
#lobby-preplay-case-detail-overlay {
|
||
position: fixed; inset: 0; z-index: 10048;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
|
||
background: rgba(0, 0, 0, 0.8);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
}
|
||
#lobby-preplay-case-detail-overlay.is-hidden { display: none !important; }
|
||
.lobby-preplay-case-detail-inner {
|
||
position: relative;
|
||
width: min(1697px, calc(100vw - 24px), calc((100dvh - 24px) * (1697 / 986)));
|
||
aspect-ratio: 1697 / 986;
|
||
max-height: min(986px, calc(100dvh - 24px));
|
||
--case-detail-close-size: min(90px, calc((100dvh - 24px) * (90 / 986)));
|
||
--case-detail-close-top: 10%;
|
||
--case-detail-close-right: 5%;
|
||
}
|
||
.lobby-preplay-case-detail-inner > img {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
object-position: center;
|
||
border-radius: 8px;
|
||
}
|
||
#lobby-preplay-case-detail-close {
|
||
position: absolute;
|
||
top: var(--case-detail-close-top);
|
||
right: var(--case-detail-close-right);
|
||
width: var(--case-detail-close-size) !important;
|
||
height: var(--case-detail-close-size) !important;
|
||
min-width: var(--case-detail-close-size);
|
||
min-height: var(--case-detail-close-size);
|
||
max-width: var(--case-detail-close-size);
|
||
max-height: var(--case-detail-close-size);
|
||
inline-size: var(--case-detail-close-size);
|
||
block-size: var(--case-detail-close-size);
|
||
aspect-ratio: 1 / 1 !important;
|
||
display: block !important;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
box-sizing: border-box;
|
||
margin: 0 !important;
|
||
flex: 0 0 auto;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
color: transparent;
|
||
font-size: 0;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
text-shadow: none;
|
||
z-index: 3;
|
||
opacity: 0;
|
||
}
|
||
/* เกมตอบคำถาม — HUD แนวอ้างอิง (TIME บนกลาง, SCORE ซ้าย, คำถามใหญ่) */
|
||
#quiz-game-overlay {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
|
||
z-index: 10085;
|
||
pointer-events: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
#quiz-game-overlay.is-hidden { display: none !important; }
|
||
.quiz-hud-root {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
gap: clamp(10px, 2vw, 20px);
|
||
width: 100%;
|
||
max-width: min(1200px, 100%);
|
||
}
|
||
.quiz-hud-score-col {
|
||
flex: 0 0 auto;
|
||
min-width: 140px;
|
||
max-width: min(34vw, 220px);
|
||
background: rgba(6, 10, 22, 0.88);
|
||
border: 2px solid rgba(34, 211, 238, 0.55);
|
||
border-radius: 12px;
|
||
padding: 0.45rem 0.5rem 0.55rem;
|
||
box-shadow: 0 0 24px rgba(34, 211, 238, 0.12), inset 0 0 40px rgba(0, 0, 0, 0.35);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.quiz-hud-score-title {
|
||
font-size: 0.7rem;
|
||
font-weight: 900;
|
||
letter-spacing: 0.14em;
|
||
color: #22d3ee;
|
||
margin: 0 0 0.35rem;
|
||
padding-bottom: 0.25rem;
|
||
border-bottom: 1px solid rgba(34, 211, 238, 0.3);
|
||
}
|
||
.quiz-scoreboard-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
max-height: min(42vh, 320px);
|
||
overflow: auto;
|
||
}
|
||
.quiz-scoreboard-list li {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.28rem 0;
|
||
border-bottom: 1px solid rgba(100, 120, 180, 0.15);
|
||
}
|
||
.quiz-scoreboard-list li:last-child { border-bottom: none; }
|
||
.quiz-sb-avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 6px;
|
||
object-fit: cover;
|
||
border: 1px solid rgba(122, 162, 247, 0.45);
|
||
flex-shrink: 0;
|
||
background: rgba(20, 24, 40, 0.9);
|
||
}
|
||
.quiz-sb-meta {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 0.35rem;
|
||
}
|
||
.quiz-scoreboard-name {
|
||
font-size: 0.72rem;
|
||
color: #c0caf5;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.quiz-scoreboard-val {
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 900;
|
||
font-size: 0.8rem;
|
||
color: #e2e8f0;
|
||
flex-shrink: 0;
|
||
}
|
||
.quiz-scoreboard-list li.quiz-scoreboard-me .quiz-scoreboard-name { color: #9ece6a; font-weight: 700; }
|
||
.quiz-scoreboard-list li.quiz-scoreboard-me .quiz-scoreboard-val { color: #9ece6a; }
|
||
.quiz-hud-main {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
text-align: center;
|
||
padding-top: 0.15rem;
|
||
}
|
||
.quiz-hud-time-row {
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(1rem, 2.8vw, 1.35rem);
|
||
font-weight: 800;
|
||
color: #94e8ff;
|
||
letter-spacing: 0.06em;
|
||
text-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
|
||
margin-bottom: 0.15rem;
|
||
}
|
||
.quiz-hud-time-val {
|
||
font-variant-numeric: tabular-nums;
|
||
color: #fbbf24;
|
||
margin-left: 0.25rem;
|
||
}
|
||
.quiz-hud-quiz-num {
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(0.78rem, 2vw, 0.95rem);
|
||
font-weight: 700;
|
||
color: #a5b4fc;
|
||
letter-spacing: 0.12em;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.quiz-hud-question-text {
|
||
margin: 0 auto 0.4rem;
|
||
max-width: min(92vw, 720px);
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(0.95rem, 2.8vw, 1.25rem);
|
||
line-height: 1.4;
|
||
font-weight: 700;
|
||
color: #fde047;
|
||
text-shadow: 0 0 20px rgba(250, 204, 21, 0.35), 0 2px 12px rgba(0, 0, 0, 0.75);
|
||
}
|
||
.quiz-hud-phase {
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #7aa2f7;
|
||
opacity: 0.95;
|
||
}
|
||
#quiz-map-question-panel {
|
||
position: absolute;
|
||
z-index: 4;
|
||
pointer-events: none;
|
||
box-sizing: border-box;
|
||
padding: clamp(6px, 1.5vw, 14px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
overflow: auto;
|
||
background: rgba(12, 14, 28, 0.88);
|
||
border: 2px solid rgba(255, 214, 102, 0.7);
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
|
||
}
|
||
#quiz-map-question-panel.is-hidden {
|
||
display: none !important;
|
||
}
|
||
/* ตอนเล่น quiz ซ่อนปุ่ม READY กลางล่าง — ไม่ให้ทับ/แย่งโฟกัสกับแถบคำถาม */
|
||
body.room-lobby--quiz-active .room-lobby-ready-fixed {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
}
|
||
#quiz-map-question-text {
|
||
margin: 0;
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(0.78rem, 2.4vmin, 1.12rem);
|
||
font-weight: 600;
|
||
line-height: 1.45;
|
||
color: #f1f5f9;
|
||
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
|
||
max-height: 100%;
|
||
overflow: auto;
|
||
}
|
||
#quiz-feedback-banner {
|
||
position: fixed;
|
||
top: max(132px, env(safe-area-inset-top));
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10086;
|
||
max-width: min(92vw, 480px);
|
||
padding: 0.65rem 1.1rem;
|
||
border-radius: 14px;
|
||
font-size: clamp(0.95rem, 3.2vw, 1.15rem);
|
||
font-weight: 800;
|
||
text-align: center;
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
|
||
pointer-events: none;
|
||
line-height: 1.35;
|
||
}
|
||
#quiz-feedback-banner.is-hidden { display: none !important; }
|
||
.quiz-feedback-banner.quiz-feedback-ok {
|
||
background: rgba(22, 40, 28, 0.95);
|
||
border: 2px solid rgba(158, 206, 106, 0.85);
|
||
color: #c3e6a8;
|
||
}
|
||
.quiz-feedback-banner.quiz-feedback-bad {
|
||
background: rgba(40, 22, 30, 0.95);
|
||
border: 2px solid rgba(247, 118, 140, 0.85);
|
||
color: #fecdd3;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="room-lobby-page">
|
||
<div id="room-howto-overlay" class="hidden" role="dialog" aria-modal="true" aria-labelledby="room-howto-title">
|
||
<div class="room-howto-inner">
|
||
<h2 id="room-howto-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">วิธีเล่นเบื้องต้น</h2>
|
||
<img class="room-howto-art" src="/Main-Lobby/IMAGE/Howto/howtoplay.png" alt="วิธีเล่นเบื้องต้น" decoding="async">
|
||
<div class="room-howto-close">
|
||
<button type="button" id="room-howto-btn-got-it" title="เข้าใจแล้ว" aria-label="เข้าใจแล้ว ปิดวิธีเล่น">
|
||
<img src="/Main-Lobby/IMAGE/Howto/btn-got-it.png" alt="" decoding="async" onerror="this.style.display='none';this.parentElement.textContent='เข้าใจแล้ว';">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="troublesome-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="troublesome-title">
|
||
<div class="troublesome-modal">
|
||
<h2 id="troublesome-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">ข้อเสนอลับ ตัวป่วน</h2>
|
||
<img src="/Main-Lobby/IMAGE/Troublesome/secret%20offer.png" alt="ข้อเสนอลับ: บทตัวป่วน" class="troublesome-art" width="864" height="709" decoding="async">
|
||
<div class="troublesome-actions">
|
||
<button type="button" class="troublesome-decline-btn" id="troublesome-decline" title="ปฏิเสธ" aria-label="ปฏิเสธข้อเสนอ">
|
||
<img src="/Main-Lobby/IMAGE/Troublesome/btn-cancel.png" alt="ปฏิเสธ" width="351" height="150" decoding="async">
|
||
</button>
|
||
<div class="troublesome-timer-wrap" aria-live="polite"><span id="troublesome-sec">15</span></div>
|
||
<button type="button" class="troublesome-accept-btn" id="troublesome-accept" title="รับข้อเสนอ" aria-label="รับข้อเสนอ">
|
||
<img src="/Main-Lobby/IMAGE/Troublesome/btn-accept.png" alt="รับข้อเสนอ" width="351" height="150" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="suspect-pick-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="suspect-pick-sr-title" aria-hidden="true">
|
||
<h2 id="suspect-pick-sr-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">เลือกผู้ต้องสงสัย</h2>
|
||
<button type="button" id="suspect-pick-close" class="suspect-pick-close" title="ปิดหน้าต่าง (กดปุ่มด้านล่างเพื่อเปิดอีกครั้ง)" aria-label="ปิดหน้าเลือกผู้ต้องสงสัย">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/btn-close_1.png" alt="" width="56" height="56" decoding="async">
|
||
</button>
|
||
<div id="suspect-pick-scale-wrap" class="suspect-pick-scale-wrap">
|
||
<div class="suspect-pick-inner">
|
||
<img class="suspect-pick-title-img" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/txt-suspect.png" alt="เลือกผู้ต้องสงสัย" width="1149" height="198" decoding="async">
|
||
<div class="suspect-cards-row" id="suspect-cards-row">
|
||
<button type="button" class="suspect-card" data-index="0" aria-label="ผู้ต้องสงสัย 1">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-1.png" alt="" width="405" height="625" decoding="async">
|
||
<div class="suspect-card-ui" aria-hidden="true">
|
||
<div class="suspect-card-ui-row suspect-card-ui-row--top">
|
||
<img class="suspect-txt-2" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-txt-2.png" alt="" width="117" height="31" decoding="async">
|
||
<div class="suspect-stamp-list">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
</div>
|
||
</div>
|
||
<div class="suspect-card-ui-row suspect-card-ui-row--bottom">
|
||
<img class="suspect-txt-3" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-txt-3.png" alt="" width="77" height="31" decoding="async">
|
||
<div class="suspect-symbol-list">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button type="button" class="suspect-card" data-index="1" aria-label="ผู้ต้องสงสัย 2">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-2.png" alt="" width="405" height="625" decoding="async">
|
||
<div class="suspect-card-ui" aria-hidden="true">
|
||
<div class="suspect-card-ui-row suspect-card-ui-row--top">
|
||
<img class="suspect-txt-2" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-txt-2.png" alt="" width="117" height="31" decoding="async">
|
||
<div class="suspect-stamp-list">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
</div>
|
||
</div>
|
||
<div class="suspect-card-ui-row suspect-card-ui-row--bottom">
|
||
<img class="suspect-txt-3" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-txt-3.png" alt="" width="77" height="31" decoding="async">
|
||
<div class="suspect-symbol-list">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button type="button" class="suspect-card" data-index="2" aria-label="ผู้ต้องสงสัย 3">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-3.png" alt="" width="405" height="625" decoding="async">
|
||
<div class="suspect-card-ui" aria-hidden="true">
|
||
<div class="suspect-card-ui-row suspect-card-ui-row--top">
|
||
<img class="suspect-txt-2" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-txt-2.png" alt="" width="117" height="31" decoding="async">
|
||
<div class="suspect-stamp-list">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/stamp-bg.png" alt="" width="31" height="31" decoding="async">
|
||
</div>
|
||
</div>
|
||
<div class="suspect-card-ui-row suspect-card-ui-row--bottom">
|
||
<img class="suspect-txt-3" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-txt-3.png" alt="" width="77" height="31" decoding="async">
|
||
<div class="suspect-symbol-list">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card-bg.png" alt="" width="47" height="61" decoding="async">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<p id="suspect-pick-hint" class="suspect-pick-hint is-hidden" aria-live="polite">เลือกการ์ดผู้ต้องสงสัยก่อน แล้วกดเริ่มสืบสวน</p>
|
||
<div class="suspect-pick-actions" id="suspect-pick-actions" aria-hidden="true">
|
||
<button type="button" class="suspect-btn-start" id="suspect-btn-start" title="เริ่มสืบสวน (หลังเลือกการ์ดแล้ว)" aria-label="เริ่มสืบสวน">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-start.png" alt="เริ่มสืบสวน" width="253" height="116" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="suspect-btn-accuse is-hidden" id="suspect-btn-accuse" title="ชี้ตัวคนร้าย" aria-label="ชี้ตัวคนร้าย" aria-hidden="true">
|
||
<img src="/Main-Lobby/IMAGE/LobbyB/btn-vote.png" alt="ชี้ตัวคนร้าย" width="321" height="126" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div id="lobby-preplay-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="lobby-preplay-sr-title" aria-hidden="true">
|
||
<h2 id="lobby-preplay-sr-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">เลือกระดับและคดี</h2>
|
||
<div class="lobby-preplay-inner">
|
||
<div id="lobby-preplay-step-level" class="lobby-preplay-step">
|
||
<button type="button" class="lobby-preplay-close-top" id="lobby-preplay-close-level" title="ปิด" aria-label="ปิด">
|
||
<img src="/Main-Lobby/IMAGE/LEVEL/btn-close.png" alt="" decoding="async">
|
||
</button>
|
||
<img class="lobby-preplay-title-img" src="/Main-Lobby/IMAGE/LEVEL/level-txt.png" alt="เส้นทางนักสืบ — เลือกระดับความท้าทาย" decoding="async">
|
||
<p class="lobby-preplay-subtitle">เลือกระดับความท้าทายตามความเชี่ยวชาญของคุณ</p>
|
||
<div class="lobby-preplay-level-row">
|
||
<button type="button" class="lobby-level-card" data-level="1" title="ROOKIE"><img src="/Main-Lobby/IMAGE/LEVEL/level-1.png" alt="ROOKIE" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="2" title="JUNIOR"><img src="/Main-Lobby/IMAGE/LEVEL/level-2.png" alt="JUNIOR" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="3" title="SENIOR"><img src="/Main-Lobby/IMAGE/LEVEL/level-3.png" alt="SENIOR" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="4" title="SPECIALIST"><img src="/Main-Lobby/IMAGE/LEVEL/level-4.png" alt="SPECIALIST" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="5" title="MASTERMIND"><img src="/Main-Lobby/IMAGE/LEVEL/level-5.png" alt="MASTERMIND" decoding="async"></button>
|
||
</div>
|
||
</div>
|
||
<div id="lobby-preplay-step-case" class="lobby-preplay-step is-hidden">
|
||
<div class="lobby-preplay-back-wrap">
|
||
<button type="button" id="lobby-preplay-back-case" title="กลับ — เส้นทางนักสืบ" aria-label="กลับไปเลือกระดับ">
|
||
<img src="/Main-Lobby/IMAGE/case/btn-back-step.png" alt="" decoding="async">
|
||
</button>
|
||
</div>
|
||
<button type="button" class="lobby-preplay-close-case" id="lobby-preplay-close-case" title="ปิด" aria-label="ปิด">
|
||
<img src="/Main-Lobby/IMAGE/LEVEL/btn-close.png" alt="" decoding="async">
|
||
</button>
|
||
<div class="lobby-preplay-case-head">
|
||
<img class="lobby-preplay-title-img" src="/Main-Lobby/IMAGE/case/case-txt.png" alt="เลือกคดี" decoding="async">
|
||
</div>
|
||
<div class="lobby-preplay-case-row-wrap">
|
||
<button type="button" class="lobby-preplay-case-arrow lobby-preplay-case-arrow--prev" id="lobby-preplay-case-prev" title="คดีก่อนหน้า" aria-label="เลื่อนไปคดีก่อนหน้า">
|
||
<img src="/Main-Lobby/IMAGE/case/btn-case-b.png" alt="" decoding="async">
|
||
</button>
|
||
<div class="lobby-preplay-case-row">
|
||
<div class="lobby-case-card-wrap">
|
||
<img class="lobby-case-art" src="/Main-Lobby/IMAGE/case/case-1.png" alt="คดีโจรกรรมไซเบอร์" decoding="async">
|
||
<div class="lobby-case-actions">
|
||
<button type="button" class="lobby-case-detail" title="รายละเอียด"><img src="/Main-Lobby/IMAGE/case/btn-detail.png" alt="รายละเอียด" decoding="async"></button>
|
||
<button type="button" class="lobby-case-start" data-case="1" title="เริ่มคดี"><img src="/Main-Lobby/IMAGE/case/btn-startcase.png" alt="เริ่มคดี" decoding="async"></button>
|
||
</div>
|
||
</div>
|
||
<div class="lobby-case-card-wrap">
|
||
<img class="lobby-case-art" src="/Main-Lobby/IMAGE/case/case-2.png" alt="คดีปล้นร้านอัญมณี" decoding="async">
|
||
<div class="lobby-case-actions">
|
||
<button type="button" class="lobby-case-detail" title="รายละเอียด"><img src="/Main-Lobby/IMAGE/case/btn-detail.png" alt="รายละเอียด" decoding="async"></button>
|
||
<button type="button" class="lobby-case-start" data-case="2" title="เริ่มคดี"><img src="/Main-Lobby/IMAGE/case/btn-startcase.png" alt="เริ่มคดี" decoding="async"></button>
|
||
</div>
|
||
</div>
|
||
<div class="lobby-case-card-wrap">
|
||
<img class="lobby-case-art" src="/Main-Lobby/IMAGE/case/case-3.png" alt="คดีฆาตกรรมปริศนา" decoding="async">
|
||
<div class="lobby-case-actions">
|
||
<button type="button" class="lobby-case-detail" title="รายละเอียด"><img src="/Main-Lobby/IMAGE/case/btn-detail.png" alt="รายละเอียด" decoding="async"></button>
|
||
<button type="button" class="lobby-case-start" data-case="3" title="เริ่มคดี"><img src="/Main-Lobby/IMAGE/case/btn-startcase.png" alt="เริ่มคดี" decoding="async"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="lobby-preplay-case-arrow lobby-preplay-case-arrow--next" id="lobby-preplay-case-next" title="คดีถัดไป" aria-label="เลื่อนไปคดีถัดไป">
|
||
<img src="/Main-Lobby/IMAGE/case/btn-case-n.png" alt="" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="lobby-preplay-case-detail-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-hidden="true">
|
||
<div class="lobby-preplay-case-detail-inner">
|
||
<button type="button" id="lobby-preplay-case-detail-close" title="ปิด" aria-label="ปิดรายละเอียด">×</button>
|
||
<img src="/Main-Lobby/IMAGE/case/case-detail.png" alt="รายละเอียดคดี" decoding="async">
|
||
</div>
|
||
</div>
|
||
<div id="mic-permission-overlay" aria-label="ขอสิทธิ์ไมโครโฟน">
|
||
<div id="mic-permission-modal">
|
||
<button type="button" class="mic-permission-close" id="mic-permission-close" title="ปิด" aria-label="ปิด"></button>
|
||
<img src="img/mic-permission-txt.png" alt="อนุญาตให้เข้าถึงไมโครโฟน เพื่อให้คุณสามารถสื่อสารและบันทึกเสียงได้อย่างคมชัด โปรดอนุญาตให้แอปเข้าถึงไมโครโฟนของอุปกรณ์" class="mic-permission-txt">
|
||
<button type="button" class="mic-permission-btn-allow" id="mic-permission-allow" title="อนุญาต">อนุญาต</button>
|
||
</div>
|
||
</div>
|
||
<div id="quiz-game-overlay" class="is-hidden" role="status" aria-live="polite" aria-atomic="true">
|
||
<div class="quiz-hud-root">
|
||
<aside class="quiz-hud-score-col" aria-label="คะแนน">
|
||
<div class="quiz-hud-score-title">SCORE</div>
|
||
<ul id="quiz-scoreboard-list" class="quiz-scoreboard-list"></ul>
|
||
</aside>
|
||
<div class="quiz-hud-main">
|
||
<div class="quiz-hud-time-row" aria-live="polite">TIME : <span id="quiz-game-timer" class="quiz-hud-time-val">—</span></div>
|
||
<div id="quiz-hud-quiz-num" class="quiz-hud-quiz-num">- Quiz — -</div>
|
||
<p id="quiz-game-question" class="quiz-hud-question-text"></p>
|
||
<div id="quiz-game-phase-label" class="quiz-hud-phase"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="quiz-feedback-banner" class="is-hidden quiz-feedback-banner" role="status" aria-atomic="true"></div>
|
||
<div id="lobby-map-wrap">
|
||
<canvas id="lobby-map-canvas" tabindex="0" role="application" aria-label="แผนที่ห้อง — กด F โต้ตอบช่องสีเขียว"></canvas>
|
||
<div id="quiz-map-question-panel" class="is-hidden" aria-hidden="true">
|
||
<p id="quiz-map-question-text"></p>
|
||
</div>
|
||
<div id="lobby-zoom-pct" class="lobby-zoom-pct" aria-live="polite"></div>
|
||
<p class="lobby-interact-hint" title="ยืนหรือหันหน้าไปช่องสีเขียว — กดปุ่ม F (หรือ ด บนแป้นไทย)">ช่องเขียว · กด <kbd>F</kbd> / แป้นไทย <kbd>ด</kbd> โต้ตอบ</p>
|
||
</div>
|
||
<p id="room-players-hud" aria-live="polite">PLAYERS : 0/10</p>
|
||
<button type="button" id="btn-suspect-reopen" class="is-hidden" title="เปิดหน้าเลือกผู้ต้องสงสัย" aria-label="เปิดหน้าเลือกผู้ต้องสงสัย">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card.png" alt="" width="32" height="32" decoding="async">
|
||
<span>เลือกผู้ต้องสงสัย</span>
|
||
</button>
|
||
<div class="room-lobby-top-right-cluster" role="group" aria-label="โปรไฟล์ตัวละคร">
|
||
<div class="room-lobby-top-right-actions is-hidden" hidden role="group" aria-label="ปุ่มตั้งค่าโฮสต์และปรับแต่ง" aria-hidden="true">
|
||
<button type="button" id="btn-setting-host" class="room-lobby-top-right-action-btn" title="ตั้งค่าโฮสต์" aria-label="ตั้งค่าโฮสต์">
|
||
<img src="img/btn-setting-host.png" alt="" width="161" height="176" decoding="async">
|
||
</button>
|
||
<button type="button" id="btn-customize" class="room-lobby-top-right-action-btn" title="ปรับแต่ง" aria-label="ปรับแต่ง">
|
||
<img src="img/btn-customize.png" alt="" width="161" height="176" decoding="async">
|
||
</button>
|
||
</div>
|
||
<div class="room-lobby-profile-wrap">
|
||
<div class="room-lobby-profile-frame">
|
||
<div class="room-lobby-profile-avatar-viewport">
|
||
<img id="room-lobby-profile-avatar" src="" alt="ตัวละครของคุณ" width="64" height="64" decoding="async">
|
||
</div>
|
||
<button type="button" class="room-lobby-profile-set-btn" id="btn-profile-set" title="ตั้งค่าโปรไฟล์" aria-label="ตั้งค่าโปรไฟล์" onclick="window.roomLobbyProfileOverlay && window.roomLobbyProfileOverlay.open && window.roomLobbyProfileOverlay.open();">
|
||
<img src="img/btn-profile-set.png" alt="" width="71" height="71" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="room-lobby-profile-overlay" class="room-lobby-profile-overlay is-hidden" aria-hidden="true">
|
||
<div class="room-lobby-profile-backdrop" id="room-lobby-profile-backdrop" aria-hidden="true"></div>
|
||
<div class="room-lobby-profile-dialog" role="dialog" aria-modal="true" aria-label="โปรไฟล์ผู้เล่น">
|
||
<button type="button" class="room-lobby-profile-close" id="room-lobby-profile-close" aria-label="ปิดโปรไฟล์">×</button>
|
||
<div class="room-lobby-profile-content">
|
||
<section class="room-lobby-profile-left-pane">
|
||
<div class="room-lobby-profile-inner-frame">
|
||
<p class="room-lobby-profile-coins">
|
||
<img src="/Main-Lobby/IMAGE/coin-JD.png" alt="" class="room-lobby-profile-coins-icon" width="18" height="18" decoding="async">
|
||
<img src="img/03-6-Profile/profile-pop-coin.png" alt="My Coins" class="room-lobby-profile-coins-label" decoding="async">
|
||
<strong id="room-lobby-profile-coins-val">150</strong>
|
||
</p>
|
||
<div class="room-lobby-profile-char-card">
|
||
<img id="room-lobby-profile-overlay-avatar" src="" alt="ตัวละครผู้เล่น" decoding="async">
|
||
<div class="room-lobby-profile-overlay-name-row">
|
||
<div class="room-lobby-profile-overlay-name" id="room-lobby-profile-overlay-name">PLAYER</div>
|
||
<button type="button" class="room-lobby-profile-edit-btn" id="room-lobby-profile-edit-btn" title="แก้ไขชื่อผู้เล่น" aria-label="แก้ไขชื่อผู้เล่น">
|
||
<img src="img/03-6-Profile/btn-edit.png" alt="" decoding="async">
|
||
</button>
|
||
</div>
|
||
<img src="img/03-6-Profile/profile-char-frame-2.png" alt="" class="room-lobby-profile-name-sep" decoding="async">
|
||
<div class="room-lobby-profile-overlay-agent" id="room-lobby-profile-overlay-agent">AGENT ID : 001998</div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="room-lobby-profile-logout" id="room-lobby-profile-logout" aria-label="ออกจากระบบ">
|
||
<img src="img/03-6-Profile/btn-ex.png" alt="ออกจากระบบ" decoding="async">
|
||
</button>
|
||
</section>
|
||
<section class="room-lobby-profile-right-pane">
|
||
<div class="room-lobby-profile-archiv-groups" id="room-lobby-profile-archiv-groups">
|
||
<button type="button" class="room-lobby-profile-archiv-group-btn is-active" data-group="1" aria-label="กลุ่มสถิติที่ 1">
|
||
<img src="img/03-6-Profile/archiv-group-01-a.png" alt="" width="190" height="60" decoding="async">
|
||
</button>
|
||
<button type="button" class="room-lobby-profile-archiv-group-btn" data-group="2" aria-label="กลุ่มสถิติที่ 2">
|
||
<img src="img/03-6-Profile/archiv-group-02.png" alt="" width="190" height="60" decoding="async">
|
||
</button>
|
||
<button type="button" class="room-lobby-profile-archiv-group-btn" data-group="3" aria-label="กลุ่มสถิติที่ 3">
|
||
<img src="img/03-6-Profile/archiv-group-03.png" alt="" width="190" height="60" decoding="async">
|
||
</button>
|
||
<button type="button" class="room-lobby-profile-archiv-group-btn" data-group="4" aria-label="กลุ่มสถิติที่ 4">
|
||
<img src="img/03-6-Profile/archiv-group-04.png" alt="" width="190" height="60" decoding="async">
|
||
</button>
|
||
<button type="button" class="room-lobby-profile-archiv-group-btn" data-group="5" aria-label="กลุ่มสถิติที่ 5">
|
||
<img src="img/03-6-Profile/archiv-group-05.png" alt="" width="190" height="60" decoding="async">
|
||
</button>
|
||
</div>
|
||
<div class="room-lobby-profile-archiv-frame">
|
||
<ul class="room-lobby-profile-achievements-list" id="room-lobby-profile-achievements-list">
|
||
<li class="room-lobby-profile-archiv-item">
|
||
<img class="room-lobby-profile-archiv-icon-bg" src="img/03-6-Profile/archiv-icon-bg.png" alt="" width="131" height="123" decoding="async">
|
||
<div class="room-lobby-profile-archiv-main">
|
||
<div class="room-lobby-profile-archiv-title-row">
|
||
<img class="room-lobby-profile-archiv-name" src="img/03-6-Profile/archiv-name-1.png" alt="Early Accusation" width="421" height="72" decoding="async">
|
||
<strong class="room-lobby-profile-archiv-count">1/1</strong>
|
||
</div>
|
||
<div class="room-lobby-profile-archiv-progress-wrap">
|
||
<img class="room-lobby-profile-archiv-progress-bg" src="img/03-6-Profile/archiv-progress-bg.png" alt="" width="571" height="56" decoding="async">
|
||
<img class="room-lobby-profile-archiv-progress" src="img/03-6-Profile/archiv-progress.png" alt="" width="571" height="56" decoding="async" style="--archiv-progress: 100%;">
|
||
</div>
|
||
<img class="room-lobby-profile-archiv-line" src="img/03-6-Profile/archiv-line.png" alt="" decoding="async">
|
||
</div>
|
||
</li>
|
||
<li class="room-lobby-profile-archiv-item">
|
||
<img class="room-lobby-profile-archiv-icon-bg" src="img/03-6-Profile/archiv-icon-bg.png" alt="" width="131" height="123" decoding="async">
|
||
<div class="room-lobby-profile-archiv-main">
|
||
<div class="room-lobby-profile-archiv-title-row">
|
||
<img class="room-lobby-profile-archiv-name" src="img/03-6-Profile/archiv-name-2.png" alt="High Stakes" width="421" height="72" decoding="async">
|
||
<strong class="room-lobby-profile-archiv-count">0/1</strong>
|
||
</div>
|
||
<div class="room-lobby-profile-archiv-progress-wrap">
|
||
<img class="room-lobby-profile-archiv-progress-bg" src="img/03-6-Profile/archiv-progress-bg.png" alt="" width="571" height="56" decoding="async">
|
||
<img class="room-lobby-profile-archiv-progress" src="img/03-6-Profile/archiv-progress.png" alt="" width="571" height="56" decoding="async" style="--archiv-progress: 0%;">
|
||
</div>
|
||
<img class="room-lobby-profile-archiv-line" src="img/03-6-Profile/archiv-line.png" alt="" decoding="async">
|
||
</div>
|
||
</li>
|
||
<li class="room-lobby-profile-archiv-item">
|
||
<img class="room-lobby-profile-archiv-icon-bg" src="img/03-6-Profile/archiv-icon-bg.png" alt="" width="131" height="123" decoding="async">
|
||
<div class="room-lobby-profile-archiv-main">
|
||
<div class="room-lobby-profile-archiv-title-row">
|
||
<img class="room-lobby-profile-archiv-name" src="img/03-6-Profile/archiv-name-3.png" alt="Gambler" width="421" height="72" decoding="async">
|
||
<strong class="room-lobby-profile-archiv-count">2/10</strong>
|
||
</div>
|
||
<div class="room-lobby-profile-archiv-progress-wrap">
|
||
<img class="room-lobby-profile-archiv-progress-bg" src="img/03-6-Profile/archiv-progress-bg.png" alt="" width="571" height="56" decoding="async">
|
||
<img class="room-lobby-profile-archiv-progress" src="img/03-6-Profile/archiv-progress.png" alt="" width="571" height="56" decoding="async" style="--archiv-progress: 20%;">
|
||
</div>
|
||
<img class="room-lobby-profile-archiv-line" src="img/03-6-Profile/archiv-line.png" alt="" decoding="async">
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="room-lobby-profile-archiv-scroll is-hidden" aria-hidden="true">
|
||
<div class="room-lobby-profile-archiv-scroll-bg"></div>
|
||
<div class="room-lobby-profile-archiv-scroll-bar"></div>
|
||
</div>
|
||
</div>
|
||
<div class="room-lobby-profile-settings">
|
||
<img class="room-lobby-profile-settings-frame" src="img/03-6-Profile/setting-frame.png" alt="" width="824" height="169" decoding="async">
|
||
<div class="room-lobby-profile-settings-row">
|
||
<div class="room-lobby-profile-setting-item">
|
||
<img class="room-lobby-profile-setting-label" src="img/03-6-Profile/setting-txt-1.png" alt="Music" width="99" height="39" decoding="async">
|
||
<button type="button" class="room-lobby-profile-toggle" id="room-lobby-profile-music" data-on="true" aria-label="สลับ Music">
|
||
<img src="img/03-6-Profile/btn-on.png" alt="Music On" width="152" height="94" decoding="async">
|
||
</button>
|
||
</div>
|
||
<div class="room-lobby-profile-setting-item">
|
||
<img class="room-lobby-profile-setting-label" src="img/03-6-Profile/setting-txt-2.png" alt="SFX" width="99" height="39" decoding="async">
|
||
<button type="button" class="room-lobby-profile-toggle" id="room-lobby-profile-sfx" data-on="false" aria-label="สลับ SFX">
|
||
<img src="img/03-6-Profile/btn-off.png" alt="SFX Off" width="152" height="94" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="host-console-overlay" class="room-lobby-host-console-overlay is-hidden" aria-hidden="true">
|
||
<div class="room-lobby-host-console-backdrop" id="host-console-backdrop" aria-hidden="true"></div>
|
||
<div class="room-lobby-host-console-dialog" role="dialog" aria-modal="true" aria-label="Host Console">
|
||
<button type="button" class="room-lobby-host-console-close" id="host-console-close" aria-label="ปิดหน้าตั้งค่าโฮสต์">×</button>
|
||
<div class="room-lobby-host-console-body">
|
||
<img src="img/03-4-Host-Console/host-console-txt-1.png" alt="จำนวนผู้เล่นสูงสุด" class="room-lobby-host-console-txt-img room-lobby-host-console-txt-max" decoding="async">
|
||
|
||
<div class="room-lobby-host-console-max-wrap">
|
||
<img src="img/03-4-Host-Console/host-console-textfield.png" alt="" class="room-lobby-host-console-textfield-bg" decoding="async">
|
||
<button type="button" id="host-console-max-dec" class="room-lobby-host-console-arrow-btn room-lobby-host-console-arrow-left" aria-label="ลดจำนวนผู้เล่นสูงสุด">
|
||
<img src="img/03-4-Host-Console/arrow-b.png" alt="" decoding="async">
|
||
</button>
|
||
<div class="room-lobby-host-console-max-value" id="host-console-max-value">10</div>
|
||
<button type="button" id="host-console-max-inc" class="room-lobby-host-console-arrow-btn room-lobby-host-console-arrow-right" aria-label="เพิ่มจำนวนผู้เล่นสูงสุด">
|
||
<img src="img/03-4-Host-Console/arrow-n.png" alt="" decoding="async">
|
||
</button>
|
||
</div>
|
||
|
||
<p class="room-lobby-host-console-summary" id="host-console-summary">สรุปจำนวน : 0 ผู้เล่น + 0 Bot</p>
|
||
<img src="img/03-4-Host-Console/host-console-line.png" alt="" class="room-lobby-host-console-line" decoding="async">
|
||
|
||
<img src="img/03-4-Host-Console/host-console-txt-2.png" alt="รายชื่อสมาชิก" class="room-lobby-host-console-txt-img room-lobby-host-console-txt-members" decoding="async">
|
||
|
||
<div class="room-lobby-host-console-members" id="host-console-members-scroll">
|
||
<ul class="room-lobby-host-console-members-list" id="host-console-members-list"></ul>
|
||
</div>
|
||
|
||
<button type="button" id="host-console-confirm" class="room-lobby-host-console-confirm" aria-label="ยืนยันการตั้งค่าโฮสต์">
|
||
<img src="img/03-4-Host-Console/host-console-cf.png" alt="ยืนยัน" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="room-lobby-top-left-cluster">
|
||
<div class="room-lobby-room-id-pill" aria-label="Room ID">
|
||
<span class="room-lobby-room-id-label">Room ID :</span>
|
||
<strong id="room-id-value">—</strong>
|
||
<span class="room-lobby-room-id-lock" aria-hidden="true">🔒</span>
|
||
</div>
|
||
<div class="room-lobby-exit-fixed">
|
||
<button type="button" id="btn-leave-lobby" class="btn-exit-icon" title="ออกจากห้อง" aria-label="ออกจากห้อง กลับไปสร้างห้อง">
|
||
<img src="img/btn-exit-room.png?v=2" alt="ออกจากห้อง" width="80" height="80" decoding="async">
|
||
</button>
|
||
<button type="button" id="btn-room-howto" class="btn-exit-icon" title="วิธีเล่นเบื้องต้น" aria-label="วิธีเล่นเบื้องต้น">
|
||
<img src="img/btn-howto-room.png" alt="" width="80" height="80" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="container room-lobby-overlay">
|
||
<div class="room-lobby-peers" id="peers-list"></div>
|
||
<div class="room-lobby-actions">
|
||
<button type="button" id="btn-voice-permission" class="room-lobby-btn-hidden" title="กดเพื่อให้เบราว์เซอร์ถามสิทธิ์ไมค์">🎤 ขอสิทธิ์ไมค์</button>
|
||
<button type="button" id="btn-hear" class="room-lobby-btn-hidden" title="ถ้าไม่ได้ยินเสียงเพื่อน ให้กดปุ่มนี้หนึ่งครั้ง">👂 เปิดรับเสียง</button>
|
||
<div id="host-only" style="display:none;">
|
||
<label>เลือกฉาก (สำหรับเล่น) <select id="play-map-select"><option value="">โหลด...</option></select></label>
|
||
<button type="button" id="btn-start" title="เริ่มเกม">เริ่มเกม</button>
|
||
<p id="host-start-area-hint" class="host-start-area-hint" hidden></p>
|
||
</div>
|
||
<span id="non-host-msg" style="display:none;">รอ host เลือกฉากและเริ่มเกม</span>
|
||
</div>
|
||
</div>
|
||
<!-- แชทเพื่อน — อยู่นอก overlay ที่ถูกซ่อน -->
|
||
<div class="room-lobby-chat room-lobby-chat-peers chat-panel chat-panel-collapsed" id="peer-chat-panel" aria-expanded="false">
|
||
<div class="chat-header-bar">
|
||
<span class="chat-header-title chat-header-title-img"><img src="img/chat-header-title.png" alt="Chat"></span>
|
||
<button type="button" class="chat-close-btn" id="chat-close-btn" title="เปิดแชท" aria-label="เปิดแชท"><img src="img/btn-chat.png" alt="" id="chat-toggle-img"></button>
|
||
</div>
|
||
<div id="chat-messages" class="chat-messages-bg"></div>
|
||
<form id="chat-form" class="chat-form-bar">
|
||
<input id="chat-input" placeholder="Type a here..." autocomplete="off">
|
||
<button type="submit" class="chat-send-btn" title="ส่ง"><img src="img/chat-btn-send.png" alt="ส่ง"></button>
|
||
</form>
|
||
</div>
|
||
<!-- AI Chat อยู่นอก overlay ที่ถูกซ่อน — โค้ดเดิม room-lobby.js ใช้ id เดิม -->
|
||
<div class="room-lobby-chat room-lobby-chat-ai chat-panel chat-panel-collapsed" id="ai-chat-panel" aria-expanded="false">
|
||
<div class="chat-header-bar">
|
||
<span class="chat-header-title chat-header-title-img"><img src="img/ai-chat-header.png" alt="คุยกับ AI"><img src="img/ai-chat-title-label.png" alt="เทพความรู้" class="ai-chat-title-label"></span>
|
||
<button type="button" class="chat-close-btn" id="ai-chat-close-btn" title="เปิดแชท AI" aria-label="เปิดแชท AI"><img src="/Main-Lobby/IMAGE/BTN-AI-ChatBOT.png" alt="เทพความรู้" id="ai-chat-toggle-img"></button>
|
||
</div>
|
||
<div id="ai-chat-messages" class="chat-messages-bg"></div>
|
||
<form id="ai-chat-form" class="chat-form-bar">
|
||
<input id="ai-chat-input" placeholder="Type a here..." autocomplete="off">
|
||
<button type="submit" class="chat-send-btn" title="ส่ง"><img src="img/chat-btn-send.png" alt="ส่ง"></button>
|
||
</form>
|
||
<p class="ai-chat-admin-link"><a href="ai-admin.html">ตั้งค่า AI (Admin)</a></p>
|
||
</div>
|
||
<!-- READY / ไมค์ อยู่นอก overlay — กดได้ทุกจำนวนคนในห้อง ไม่โดนบังจากแผงรายชื่อยาว -->
|
||
<div class="room-lobby-ready-fixed">
|
||
<label for="ready-check" class="ready-label" id="ready-label">
|
||
<input type="checkbox" id="ready-check" class="ready-check-input" aria-label="สลับสถานะพร้อม">
|
||
<img class="ready-label-img" id="ready-label-img" src="img/btn-ready-idle.png?v=1" width="200" height="64" alt="ยังไม่พร้อม — กดเพื่อพร้อม" decoding="async">
|
||
</label>
|
||
</div>
|
||
<div class="room-lobby-br-fixed" id="room-lobby-br-fixed">
|
||
<div id="lobby-b-extra-row" class="lobby-b-extra-row is-hidden" aria-hidden="true">
|
||
<button type="button" class="lobby-b-sq-btn" id="lobby-b-btn-rank" title="อันดับ / รางวัล" aria-label="อันดับ รางวัล">
|
||
<img src="img/lobby-b/icon-rank.png?v=1" alt="" width="56" height="56" decoding="async">
|
||
</button>
|
||
<button type="button" class="lobby-b-sq-btn" id="lobby-b-btn-evidence" title="สืบสวน / หลักฐาน" aria-label="สืบสวน หลักฐาน">
|
||
<img src="img/lobby-b/icon-evidence.png?v=1" alt="" width="56" height="56" decoding="async">
|
||
</button>
|
||
</div>
|
||
<button type="button" id="btn-voice" class="btn-voice-icon" title="เปิด/ปิดเสียงพูด" aria-label="เปิด/ปิดเสียงพูด">
|
||
<img src="img/btn-mic-mute.png" alt="เปิดเสียง" id="btn-voice-icon-img">
|
||
</button>
|
||
</div>
|
||
<!-- แฟ้มหลักฐาน LobbyB — รูปกรอบ/แท็บจาก /Main-Lobby/IMAGE/See evidence -->
|
||
<div id="lobby-evidence-overlay" class="lobby-evidence-overlay is-hidden" aria-hidden="true">
|
||
<div class="lobby-evidence-backdrop" id="lobby-evidence-backdrop" aria-hidden="true"></div>
|
||
<div class="lobby-evidence-dialog" role="dialog" aria-modal="true" aria-labelledby="lobby-evidence-sr-title">
|
||
<h2 id="lobby-evidence-sr-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">แฟ้มหลักฐาน</h2>
|
||
<div class="lobby-evidence-frame">
|
||
<img class="lobby-evidence-bg" src="/Main-Lobby/IMAGE/See%20evidence/evidence-bg.png" alt="" width="1684" height="963" decoding="async">
|
||
<button type="button" class="lobby-evidence-close" id="lobby-evidence-close" title="ปิด" aria-label="ปิดแฟ้มหลักฐาน">×</button>
|
||
<div class="lobby-evidence-tabs-layer">
|
||
<img id="lobby-evidence-tabs-img" class="lobby-evidence-tabs-img" src="/Main-Lobby/IMAGE/See%20evidence/evidence-tab-1.png" alt="" width="1481" height="129" decoding="async">
|
||
<div class="lobby-evidence-tab-hits" role="tablist" aria-label="เลือกผู้ต้องสงสัย">
|
||
<button type="button" class="lobby-evidence-tab-hit" role="tab" data-evidence-tab="0" aria-selected="true" aria-label="ผู้ต้องสงสัย 1"></button>
|
||
<button type="button" class="lobby-evidence-tab-hit" role="tab" data-evidence-tab="1" aria-selected="false" aria-label="ผู้ต้องสงสัย 2"></button>
|
||
<button type="button" class="lobby-evidence-tab-hit" role="tab" data-evidence-tab="2" aria-selected="false" aria-label="ผู้ต้องสงสัย 3"></button>
|
||
<span class="lobby-evidence-tab-hit-spacer" aria-hidden="true"></span>
|
||
</div>
|
||
</div>
|
||
<div class="lobby-evidence-cards-root" id="lobby-evidence-cards-root"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- กระดานอันดับ LobbyB — เหรียญจาก /Main-Lobby/IMAGE -->
|
||
<div id="lobby-rank-overlay" class="lobby-rank-overlay is-hidden" aria-hidden="true">
|
||
<div class="lobby-rank-backdrop" id="lobby-rank-backdrop" aria-hidden="true"></div>
|
||
<div class="lobby-rank-dialog" role="dialog" aria-modal="true" aria-labelledby="lobby-rank-case-title">
|
||
<div class="lobby-rank-panel">
|
||
<header class="lobby-rank-head">
|
||
<h2 id="lobby-rank-case-title" class="lobby-rank-case-title"></h2>
|
||
<button type="button" class="lobby-rank-close" id="lobby-rank-close" title="ปิด" aria-label="ปิดกระดานอันดับ">×</button>
|
||
</header>
|
||
<div class="lobby-rank-podium" id="lobby-rank-podium" aria-label="อันดับสามอันดับแรก"></div>
|
||
<div class="lobby-rank-table-wrap">
|
||
<table class="lobby-rank-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">RANK</th>
|
||
<th scope="col">PLAYER NAME</th>
|
||
<th scope="col">SCORE</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="lobby-rank-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
<footer class="lobby-rank-self" id="lobby-rank-self" aria-label="อันดับของคุณ"></footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="../app-base.js"></script>
|
||
<script src="/Game/socket.io/socket.io.js"></script>
|
||
<script src="js/display-name.js?v=2"></script>
|
||
<script src="js/version.js?v=0.0122"></script>
|
||
<script src="js/customize-popup.js?v=29" data-customize-triggers="" data-customize-asset-base="img/03-5-Customize"></script>
|
||
<script src="js/room-lobby.js?v=0.0218"></script>
|
||
<div class="version-tag">v —</div>
|
||
</body>
|
||
</html>
|