/** * ห้องสรุปหลักฐาน — layout 11-1-2-evidence-summary-3 (es3-*) * Design canvas: 1920 × 1080 */ #testimony-overlay { --es3-w: 1920; --es3-h: 1080; --sc: '/Main-Lobby/IMAGE/Showcard/'; position: fixed; inset: 0; z-index: 9000; overflow: hidden; font-family: 'Kanit', 'Noto Sans Thai', 'Noto Sans Thai', system-ui, sans-serif; color: #e7ecff; background: #04050d; } #testimony-overlay.is-hidden { display: none !important; } #testimony-overlay .stage-wrap { position: absolute; inset: 0; overflow: hidden; } #testimony-overlay .es3-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; will-change: transform; background: #04050d; } #testimony-overlay .layer { position: absolute; box-sizing: border-box; } #testimony-overlay .layer.btn, #testimony-overlay .es3-card, #testimony-overlay .ev-tab-click { pointer-events: auto; } /* พื้นหลังเต็มจอ */ #testimony-overlay .es3-bg { left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } #testimony-overlay .es3-bg img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ส่วนบน: popup CSS — พิกัด px ตรง evidence-summary-3.css */ #testimony-overlay .es3-top-popup { left: 50px; top: 25px; width: 1820px; height: 295px; background: linear-gradient(180deg, rgba(28, 50, 90, 0.55) 0%, rgba(15, 30, 60, 0.55) 100%); border: 2px solid #5bd8ff; border-radius: 26px; box-shadow: inset 0 0 36px rgba(80, 180, 240, 0.18), 0 0 24px rgba(80, 180, 240, 0.35); z-index: 2; pointer-events: none; } #testimony-overlay .es3-top-popup .corner { position: absolute; width: 86px; height: 86px; pointer-events: none; } #testimony-overlay .es3-top-popup .c-tl { top: -5px; left: -5px; border-top-left-radius: 26px; } #testimony-overlay .es3-top-popup .c-tr { top: -5px; right: -5px; border-top-right-radius: 26px; } #testimony-overlay .es3-top-popup .c-bl { bottom: -5px; left: -5px; border-bottom-left-radius: 26px; } #testimony-overlay .es3-top-popup .c-br { bottom: -5px; right: -5px; border-bottom-right-radius: 26px; } #testimony-overlay .es3-popup-tab { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); padding: 8px 70px; background: linear-gradient(180deg, #2a5588 0%, #1a3a6a 100%); border: 2px solid #5bd8ff; border-radius: 14px; font-weight: 700; font-size: 22px; color: #d6e7ff; text-shadow: 0 0 8px rgba(120, 200, 255, 0.5); box-shadow: 0 0 14px rgba(80, 180, 240, 0.4), inset 0 0 8px rgba(80, 180, 240, 0.25); white-space: nowrap; z-index: 5; letter-spacing: 0.5px; } /* suspect */ #testimony-overlay .es3-suspect { left: 90px; top: 38px; width: 215px; height: 213px; z-index: 5; } #testimony-overlay .es3-suspect-frame { position: absolute; inset: 0; pointer-events: none; } #testimony-overlay .es3-suspect-frame > img { width: 100%; height: 100%; object-fit: fill; } #testimony-overlay .es3-suspect-portrait { position: absolute; left: 26px; top: 36px; width: 163px; height: 138px; border-radius: 4px; overflow: hidden; z-index: 1; background: radial-gradient(circle at 50% 30%, #b89cbf 0%, #6a4d7a 60%, #2b1a36 100%); } #testimony-overlay .es3-suspect-portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; } #testimony-overlay .es3-suspect-name { position: absolute; left: 20px; right: 20px; bottom: 12px; text-align: center; color: #cfeeff; font-weight: 800; font-size: 22px; letter-spacing: 1px; line-height: 1; z-index: 2; text-shadow: 0 0 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(120, 220, 255, 0.55); } /* title */ #testimony-overlay .es3-title-wrap { left: 320px; top: 72px; width: 1500px; height: 50px; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; } #testimony-overlay .es3-title { margin: 0; font-weight: 800; font-size: 46px; color: #ffffff; text-shadow: 0 0 14px rgba(120, 200, 255, 0.55), 0 2px 4px rgba(0, 0, 0, 0.7); letter-spacing: 0.5px; line-height: 1; white-space: nowrap; } /* player status row */ #testimony-overlay .es3-ps-row { left: 320px; top: 148px; width: 1500px; height: 170px; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 24px; padding: 0 30px; box-sizing: border-box; z-index: 5; } #testimony-overlay .es3-ps { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } #testimony-overlay .es3-ps-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 22px; color: #e6f4ff; letter-spacing: 1.2px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); height: 28px; } #testimony-overlay .es3-ps-name .host-icon { width: 28px; height: 24px; background: url('/Main-Lobby/IMAGE/Showcard/host-icon-2.png') center / contain no-repeat; flex-shrink: 0; } #testimony-overlay .es3-ps-card { position: relative; width: 110px; height: 138px; display: grid; place-items: center; } #testimony-overlay .es3-ps-card .card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 1; } /* card-back.png — ชั้นกลางทับ card-bg ทันเฟรม (โผล่เฉพาะตอน is-ready) */ #testimony-overlay .es3-ps-card .card-back { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 6px rgba(83, 224, 255, 0.35)); } #testimony-overlay .es3-ps-card .status-icon { position: absolute; width: 78px; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } #testimony-overlay .es3-ps-card .loading-icon { position: absolute; width: 42px; height: 42px; top: 28px; left: 50%; transform: translateX(-50%); z-index: 2; animation: es3-spin 1.4s linear infinite; opacity: 0.55; } @keyframes es3-spin { to { transform: translateX(-50%) rotate(360deg); } } #testimony-overlay .es3-ps-card .loading-text { position: absolute; width: 86px; height: auto; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 0.7; } #testimony-overlay .es3-ps.is-me .es3-ps-card { outline: 2px solid #6df0ff; outline-offset: 2px; border-radius: 6px; } /* ส่วนล่าง */ #testimony-overlay .es3-bottom-box { left: calc(160 / var(--es3-w) * 100%); bottom: 0; width: calc(1600 / var(--es3-w) * 100%); height: calc(580 / var(--es3-h) * 100%); z-index: 1; pointer-events: none; } #testimony-overlay .es3-bottom-box img { width: 100%; height: 100%; object-fit: fill; } #testimony-overlay .es3-evidence-text { left: calc(200 / var(--es3-w) * 100%); top: calc(583 / var(--es3-h) * 100%); width: calc(720 / var(--es3-w) * 100%); height: calc(36 / var(--es3-h) * 100%); display: flex; align-items: center; pointer-events: none; z-index: 3; } #testimony-overlay .es3-evidence-text img { height: 100%; width: auto; } #testimony-overlay .es3-counter { left: calc(1409 / var(--es3-w) * 100%); top: calc(626 / var(--es3-h) * 100%); width: calc(320 / var(--es3-w) * 100%); height: calc(36 / var(--es3-h) * 100%); display: flex; align-items: center; justify-content: flex-end; padding-right: calc(30 / var(--es3-w) * 100%); font-weight: 700; font-size: 24px; color: #b7e6ff; z-index: 3; } #testimony-overlay .es3-cards { left: calc(200 / var(--es3-w) * 100%); top: calc(635 / var(--es3-h) * 100%); /* ขยายให้พอ 3 ใบเรียงพอดี = 252*3 + 22*2 = 800px stage */ width: 800px; height: 380px; display: flex; justify-content: flex-start; align-items: stretch; gap: 22px; z-index: 3; } /* การ์ดแบบรูปเต็มใบ (PNG design) — ห้องสรุปหลักฐาน + เปิดเผยผล */ #testimony-overlay .es3-card.es3-card--img, #testimony-overlay .es-reveal-wrap .es-card.es-card--img { background: transparent; border: none; box-shadow: none; padding: 0; overflow: visible; } #testimony-overlay .es3-card.es3-card--img .es3-card-full-img, #testimony-overlay .es-reveal-wrap .es-card.es-card--img .es-card-full-img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; } #testimony-overlay .es3-card.es3-card--img.is-selected { outline: 4px solid #9ece6a; outline-offset: -3px; border-radius: 12px; } #testimony-overlay .es3-card { position: relative; /* คงสัดส่วน portrait — ไม่ยืดเต็มจอเมื่อเก็บได้แค่ใบเดียว; 252×380 stage px ตรงตามดีไซน์ */ flex: 0 0 252px; width: 252px; min-width: 252px; max-width: 252px; height: 380px; border-radius: 12px; background: linear-gradient(180deg, #cfd5dd 0%, #9ea7b4 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; overflow: hidden; color: #1b2030; border: 3px solid rgba(150, 165, 185, 0.55); transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease; cursor: pointer; } #testimony-overlay .es3-card:hover { transform: translateY(-2px); } #testimony-overlay .es3-card.is-selected { border-color: #6df0ff; border-width: 4px; box-shadow: 0 0 0 2px rgba(109, 240, 255, 0.55), 0 0 28px rgba(91, 216, 255, 0.85), 0 0 60px rgba(91, 216, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, #d8e6f0 0%, #a8b8c8 100%); } #testimony-overlay .es3-card-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255, 255, 255, 0.55); border-bottom: 1px solid rgba(0, 0, 0, 0.12); flex-shrink: 0; } #testimony-overlay .es3-card-head .ico { width: 28px; height: 28px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 6px; display: grid; place-items: center; font-size: 15px; font-weight: 700; flex-shrink: 0; } #testimony-overlay .es3-card-head .nm { line-height: 1.05; min-width: 0; } #testimony-overlay .es3-card-head .nm .th { font-size: 14px; font-weight: 700; } #testimony-overlay .es3-card-head .nm .en { font-size: 10px; font-weight: 500; color: #444; } #testimony-overlay .es3-card-art { flex: 1 1 auto; min-height: 80px; margin: 8px; border-radius: 6px; background: #707a8a; display: grid; place-items: center; color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 600; text-align: center; } #testimony-overlay .es3-card-desc { padding: 8px 12px; font-size: 12px; line-height: 1.3; color: #2a2f3c; font-weight: 500; text-align: center; flex-shrink: 0; margin: 0; } #testimony-overlay .es3-card-link { margin: 4px 8px 8px; padding: 5px 8px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 6px; display: flex; align-items: center; gap: 8px; font-size: 11px; flex-shrink: 0; } #testimony-overlay .es3-card-link .avatar { width: 20px; height: 20px; border-radius: 50%; background: #4a5566; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; } #testimony-overlay .es3-card-link .sname { font-weight: 700; color: #1b2030; } #testimony-overlay .es3-card-link .stars { margin-left: auto; color: #444; font-weight: 700; } #testimony-overlay .es3-status-text { left: calc(1243 / var(--es3-w) * 100%); top: calc(915 / var(--es3-h) * 100%); width: calc(460 / var(--es3-w) * 100%); text-align: right; font-weight: 600; font-size: 18px; color: #ff5f8a; letter-spacing: 0.3px; text-shadow: 0 0 8px rgba(255, 80, 130, 0.4); z-index: 3; pointer-events: none; } #testimony-overlay .btn { border: none; cursor: pointer; padding: 0; background: transparent; font-size: 0; color: transparent; } #testimony-overlay .btn:disabled { filter: grayscale(0.7) opacity(0.45); cursor: not-allowed; } /* ปุ่มหลัก bottom-right — สลับรูประหว่าง btn-send.png ↔ btn-open-card.png */ #testimony-overlay .es3-btn-action { position: absolute; left: calc(1329 / var(--es3-w) * 100%); top: calc(944 / var(--es3-h) * 100%); width: calc(400 / var(--es3-w) * 100%); height: calc(120 / var(--es3-h) * 100%); max-width: 400px; max-height: 120px; z-index: 5; cursor: pointer; user-select: none; display: block; transition: filter 0.15s ease, transform 0.1s ease; } #testimony-overlay .es3-btn-action img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; } #testimony-overlay .es3-btn-action:hover { filter: brightness(1.1) drop-shadow(0 0 8px rgba(109, 240, 255, 0.6)); } #testimony-overlay .es3-btn-action:active { transform: scale(0.97); filter: brightness(0.9); } #testimony-overlay .es3-btn-action.is-disabled { cursor: not-allowed; filter: grayscale(0.7) opacity(0.45); pointer-events: none; } #testimony-overlay .es3-btn-action.is-hidden { display: none !important; } /* legacy hidden — ไม่ใช้แล้วแต่กันโค้ดเก่าอ้างอิง */ #testimony-overlay .es3-btn-submit-legacy, #testimony-overlay .es3-btn-open-legacy { display: none !important; } #testimony-overlay .es3-mic { left: calc(1830 / var(--es3-w) * 100%); bottom: calc(10 / var(--es3-h) * 100%); width: calc(70 / var(--es3-w) * 100%); height: calc(90 / var(--es3-h) * 100%); max-width: 70px; max-height: 90px; border-radius: 50%; border: 2px solid #22d3ee; background: rgba(8, 20, 38, 0.75); z-index: 6; font-size: 26px; color: #e7ecff; display: flex; align-items: center; justify-content: center; } /* โหมดเปิดเผย — 11-1-2-evidence-summary (es-*) */ #testimony-overlay .es3-stage--reveal .es3-mode-select { display: none !important; } #testimony-overlay .es-reveal-wrap { position: absolute; inset: 0; z-index: 8; } #testimony-overlay .es-reveal-wrap[hidden] { display: none !important; } #testimony-overlay .es-reveal-wrap .es-bg { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } #testimony-overlay .es-reveal-wrap .es-bg img { width: 100%; height: 100%; object-fit: cover; } #testimony-overlay .es-reveal-wrap .es-popup { left: 120px; top: 22px; width: 1680px; height: 1036px; pointer-events: none; z-index: 1; } #testimony-overlay .es-reveal-wrap .es-popup img { width: 100%; height: 100%; object-fit: fill; } #testimony-overlay .es-reveal-wrap .es-suspect { left: 150px; top: 35px; width: 230px; height: 228px; z-index: 5; } #testimony-overlay .es-reveal-wrap .es-suspect-frame { position: absolute; inset: 0; pointer-events: none; } #testimony-overlay .es-reveal-wrap .es-suspect-frame img { width: 100%; height: 100%; object-fit: fill; } #testimony-overlay .es-reveal-wrap .es-suspect-portrait { position: absolute; left: 30px; top: 40px; width: 170px; height: 150px; border-radius: 4px; overflow: hidden; z-index: 1; background: radial-gradient(circle at 50% 35%, #cdb89b 0%, #8f7a63 70%, #2f2620 100%); } #testimony-overlay .es-reveal-wrap .es-suspect-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; } #testimony-overlay .es-reveal-wrap .es-suspect-name { position: absolute; left: 20px; right: 20px; bottom: 12px; text-align: center; color: #fff3a8; font-weight: 800; font-size: 22px; letter-spacing: 1px; line-height: 1; z-index: 2; text-shadow: 0 0 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(255, 200, 0, 0.45); } #testimony-overlay .es-reveal-wrap .es-title-wrap { left: 285px; top: 102px; width: 1340px; height: 175px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 4; pointer-events: none; } #testimony-overlay .es-reveal-wrap .es-title { margin: 0; font-weight: 800; font-size: 44px; color: #ffffff; text-shadow: 0 0 12px rgba(120, 200, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.7); letter-spacing: 0.5px; line-height: 1; text-align: center; white-space: nowrap; padding: 14px 60px; } #testimony-overlay .es-reveal-wrap .es-subtitle { margin: 0; font-weight: 600; font-size: 22px; color: #d6e7ff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); line-height: 1; text-align: center; padding: 8px 40px; } #testimony-overlay .es-reveal-wrap .es-players { left: 200px; top: 290px; width: 1520px; height: 720px; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; column-gap: 32px; row-gap: 18px; padding: 0; box-sizing: border-box; z-index: 6; } #testimony-overlay .es-reveal-wrap .es-player { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; align-self: start; } #testimony-overlay .es-reveal-wrap .es-player-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 30px; color: #e6f4ff; letter-spacing: 1.5px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); height: 40px; flex-shrink: 0; } #testimony-overlay .es-reveal-wrap .es-player-name .host-icon { width: 36px; height: 32px; background: url('/Main-Lobby/IMAGE/Showcard/host-icon-2.png') center / contain no-repeat; flex-shrink: 0; } #testimony-overlay .es-reveal-wrap .es-watch-badge { font-size: 14px; font-weight: 600; color: #94a3b8; text-align: center; flex-shrink: 0; } #testimony-overlay .es-reveal-wrap .es-card { position: relative; width: 252px; min-width: 252px; max-width: 252px; height: 320px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(180deg, #cfd5dd 0%, #9ea7b4 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; overflow: hidden; color: #1b2030; border: 3px solid rgba(150, 200, 255, 0.7); } #testimony-overlay .es-reveal-wrap .es-card.rarity-common { border-color: #9aa3b2; } #testimony-overlay .es-reveal-wrap .es-card.rarity-rare { border-color: #6cc7ff; box-shadow: 0 0 16px rgba(80, 175, 240, 0.4); } #testimony-overlay .es-reveal-wrap .es-card.rarity-legendary { border-color: #f1b94a; background: linear-gradient(180deg, #e4d3a8 0%, #c7a667 100%); box-shadow: 0 0 18px rgba(241, 185, 74, 0.55); } #testimony-overlay .es-reveal-wrap .es-card-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(255, 255, 255, 0.45); border-bottom: 1px solid rgba(0, 0, 0, 0.15); flex-shrink: 0; } #testimony-overlay .es-reveal-wrap .es-card-head .ico { width: 24px; height: 24px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 5px; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } #testimony-overlay .es-reveal-wrap .es-card-head .nm { line-height: 1; min-width: 0; } #testimony-overlay .es-reveal-wrap .es-card-head .nm .th { font-size: 13px; font-weight: 700; color: #1b2030; } #testimony-overlay .es-reveal-wrap .es-card-head .nm .en { font-size: 9px; font-weight: 500; color: #444; } #testimony-overlay .es-reveal-wrap .es-card-art { flex: 1; min-height: 60px; margin: 6px; border-radius: 6px; background: #707a8a; display: grid; place-items: center; color: rgba(255, 255, 255, 0.5); font-size: 11px; font-weight: 600; text-align: center; } #testimony-overlay .es-reveal-wrap .es-card-desc { padding: 4px 8px; font-size: 10px; line-height: 1.25; color: #2a2f3c; font-weight: 500; text-align: center; min-height: 32px; flex-shrink: 0; margin: 0; } #testimony-overlay .es-reveal-wrap .es-card-link { margin: 4px 6px 6px; padding: 4px 6px; background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 5px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } #testimony-overlay .es-reveal-wrap .es-card-link .avatar { width: 18px; height: 18px; border-radius: 50%; background: #4a5566; color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; } #testimony-overlay .es-reveal-wrap .es-card-link .sname { font-size: 11px; font-weight: 700; color: #1b2030; } #testimony-overlay .es-reveal-wrap .es-card-link .label { margin-left: auto; font-size: 9px; color: #444; font-weight: 700; } #testimony-overlay .es-reveal-wrap .es-rev-none { font-weight: 600; font-size: 14px; color: #ffd54a; text-align: center; padding: 24px 8px; } #testimony-overlay .es-reveal-wrap .es-ready { left: 818px; top: 951px; width: 280px; height: 96px; max-width: 280px; max-height: 96px; z-index: 10; position: absolute; } #testimony-overlay .es-reveal-wrap .es-ready img { width: 100%; height: 100%; object-fit: contain; } #testimony-overlay .es-reveal-wrap .es-ready .ready-default { opacity: 1; transition: opacity 0.2s; } #testimony-overlay .es-reveal-wrap .es-ready .ready-active, #testimony-overlay .es-reveal-wrap .es-ready .ready-start-vote { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; } /* state: ready (กดแล้ว / disabled) → แสดง btn-ready-active.png */ #testimony-overlay .es-reveal-wrap .es-ready.is-active:not(.is-start-vote) .ready-default, #testimony-overlay .es-reveal-wrap .es-ready:disabled:not(.is-start-vote) .ready-default { opacity: 0; } #testimony-overlay .es-reveal-wrap .es-ready.is-active:not(.is-start-vote) .ready-active, #testimony-overlay .es-reveal-wrap .es-ready:disabled:not(.is-start-vote) .ready-active { opacity: 1; } /* state: start-vote (host เมื่อทุกคน READY แล้ว) → แสดง btn-start-vote.png */ #testimony-overlay .es-reveal-wrap .es-ready.is-start-vote .ready-default, #testimony-overlay .es-reveal-wrap .es-ready.is-start-vote .ready-active { opacity: 0; } #testimony-overlay .es-reveal-wrap .es-ready.is-start-vote .ready-start-vote { opacity: 1; } #testimony-overlay .es-reveal-wrap .es-ready.is-start-vote { filter: drop-shadow(0 0 12px rgba(83, 224, 255, 0.5)); } #testimony-overlay .es-reveal-wrap .es-ready.is-start-vote:hover { filter: drop-shadow(0 0 18px rgba(83, 224, 255, 0.85)) brightness(1.1); transform: scale(1.02); transition: filter 0.15s ease, transform 0.1s ease; }