/** * ห้องสรุปหลักฐาน — 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; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; font-family: 'Kanit', 'Noto Sans Thai', system-ui, sans-serif; color: #e7ecff; background: #04050d; } #testimony-overlay.is-hidden { display: none !important; } #testimony-overlay .stage-wrap { position: relative; width: 100%; height: 100%; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; } #testimony-overlay .es3-stage { position: relative; width: calc(var(--es3-w) * 1px); height: calc(var(--es3-h) * 1px); flex-shrink: 0; transform-origin: top center; 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 */ #testimony-overlay .es3-top-popup { left: calc(50 / var(--es3-w) * 100%); top: calc(25 / var(--es3-h) * 100%); width: calc(1820 / var(--es3-w) * 100%); height: calc(295 / var(--es3-h) * 100%); 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: calc(86 / var(--es3-w) * 100%); height: calc(86 / var(--es3-h) * 100%); pointer-events: none; } #testimony-overlay .es3-top-popup .c-tl { top: calc(-5 / var(--es3-h) * 100%); left: calc(-5 / var(--es3-w) * 100%); border-top-left-radius: 26px; } #testimony-overlay .es3-top-popup .c-tr { top: calc(-5 / var(--es3-h) * 100%); right: calc(-5 / var(--es3-w) * 100%); border-top-right-radius: 26px; } #testimony-overlay .es3-top-popup .c-bl { bottom: calc(-5 / var(--es3-h) * 100%); left: calc(-5 / var(--es3-w) * 100%); border-bottom-left-radius: 26px; } #testimony-overlay .es3-top-popup .c-br { bottom: calc(-5 / var(--es3-h) * 100%); right: calc(-5 / var(--es3-w) * 100%); border-bottom-right-radius: 26px; } #testimony-overlay .es3-popup-tab { position: absolute; left: 50%; top: calc(-22 / var(--es3-h) * 100%); 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: calc(90 / var(--es3-w) * 100%); top: calc(38 / var(--es3-h) * 100%); width: calc(215 / var(--es3-w) * 100%); height: calc(213 / var(--es3-h) * 100%); 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: calc(26 / 215 * 100%); top: calc(36 / 213 * 100%); width: calc(163 / 215 * 100%); height: calc(138 / 213 * 100%); 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: calc(20 / 215 * 100%); right: calc(20 / 215 * 100%); bottom: calc(12 / 213 * 100%); 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: calc(320 / var(--es3-w) * 100%); top: calc(72 / var(--es3-h) * 100%); width: calc(1500 / var(--es3-w) * 100%); height: calc(50 / var(--es3-h) * 100%); display: flex; align-items: center; justify-content: center; z-index: 4; 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: calc(320 / var(--es3-w) * 100%); top: calc(148 / var(--es3-h) * 100%); width: calc(1500 / var(--es3-w) * 100%); height: calc(170 / var(--es3-h) * 100%); display: grid; grid-template-columns: repeat(5, 1fr); column-gap: calc(24 / var(--es3-w) * 100%); padding: 0 calc(30 / var(--es3-w) * 100%); z-index: 4; } #testimony-overlay .es3-ps { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; } #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; } #testimony-overlay .es3-ps-card .status-icon { position: absolute; width: 78px; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } #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%); width: calc(800 / var(--es3-w) * 100%); height: calc(380 / var(--es3-h) * 100%); display: flex; gap: calc(22 / var(--es3-w) * 100%); z-index: 3; } #testimony-overlay .es3-card { position: relative; flex: 1 1 0; min-width: 0; height: 100%; 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; } #testimony-overlay .es3-btn-submit { left: calc(920 / var(--es3-w) * 100%); top: calc(944 / var(--es3-h) * 100%); width: calc(234 / var(--es3-w) * 100%); height: calc(100 / var(--es3-h) * 100%); max-width: 234px; max-height: 100px; min-width: 120px; min-height: 48px; background: url('/Main-Lobby/IMAGE/Showcard/btn-send.png') center / contain no-repeat; z-index: 5; } #testimony-overlay .es3-btn-open { 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; } #testimony-overlay .es3-btn-open img { width: 100%; height: 100%; object-fit: contain; } #testimony-overlay .es3-btn-open.is-hidden { 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: calc(120 / var(--es3-w) * 100%); top: calc(22 / var(--es3-h) * 100%); width: calc(1680 / var(--es3-w) * 100%); height: calc(1036 / var(--es3-h) * 100%); 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: calc(150 / var(--es3-w) * 100%); top: calc(35 / var(--es3-h) * 100%); width: calc(230 / var(--es3-w) * 100%); height: calc(228 / var(--es3-h) * 100%); 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: calc(30 / 230 * 100%); top: calc(40 / 228 * 100%); width: calc(170 / 230 * 100%); height: calc(150 / 228 * 100%); 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: calc(20 / 230 * 100%); right: calc(20 / 230 * 100%); bottom: calc(12 / 228 * 100%); 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: calc(285 / var(--es3-w) * 100%); top: calc(102 / var(--es3-h) * 100%); width: calc(1340 / var(--es3-w) * 100%); height: calc(175 / var(--es3-h) * 100%); 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: calc(120 / var(--es3-w) * 100%); top: calc(300 / var(--es3-h) * 100%); width: calc(1680 / var(--es3-w) * 100%); height: calc(650 / var(--es3-h) * 100%); display: grid; grid-template-columns: repeat(5, 1fr); column-gap: calc(24 / var(--es3-w) * 100%); padding: 0 calc(70 / var(--es3-w) * 100%); z-index: 3; } #testimony-overlay .es-reveal-wrap .es-player { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; } #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: 100%; max-width: 220px; height: 275px; border-radius: 10px; background: linear-gradient(180deg, #cfd5dd 0%, #b2bac4 100%); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; overflow: hidden; color: #1b2030; border: 3px solid rgba(150, 200, 255, 0.7); flex-shrink: 0; } #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: calc(818 / var(--es3-w) * 100%); top: calc(951 / var(--es3-h) * 100%); width: calc(280 / var(--es3-w) * 100%); height: calc(96 / var(--es3-h) * 100%); 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 { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; } #testimony-overlay .es-reveal-wrap .es-ready.is-active .ready-default, #testimony-overlay .es-reveal-wrap .es-ready:disabled .ready-default { opacity: 0; } #testimony-overlay .es-reveal-wrap .es-ready.is-active .ready-active, #testimony-overlay .es-reveal-wrap .es-ready:disabled .ready-active { opacity: 1; }