/* ============================================================
   DETECTIVE ตัวจิ๋ว — NAVY #283979 + CREAM #fcf9ba EDITION
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700;800;900&family=Bebas+Neue&display=swap');

:root {
    --navy:         #283979;
    --navy-dark:    #1a2654;
    --navy-light:   #3a4f9a;
    --navy-glow:    rgba(40,57,121,0.35);
    --cream:        #fcf9ba;
    --cream-dark:   #e8e49a;
    --cream-deeper: #d4cf7a;
    --white:        #FFFFFF;
    --black:        #0A0A0A;
    --paper:        #fdfbf0;
    --paper-line:   rgba(40,57,121,0.07);
    --grey-2:       #3C3C3E;
    --grey-3:       #8E8E93;
    --ok:           #1a7a3a;
    --bad:          #c0392b;
    --font:         'Sarabun', sans-serif;
    --font-d:       'Bebas Neue', sans-serif;
    --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:32px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body,input,button,textarea,select{font-family:var(--font);}

body {
    background:var(--navy-dark);
    background-image:
        repeating-linear-gradient(0deg,transparent,transparent 36px,rgba(252,249,186,0.04) 36px,rgba(252,249,186,0.04) 37px),
        repeating-linear-gradient(90deg,transparent,transparent 36px,rgba(252,249,186,0.04) 36px,rgba(252,249,186,0.04) 37px);
    display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;
}

.phone-frame {
    width:100vw;max-width:414px;aspect-ratio:9/16;max-height:100vh;
    background:var(--cream);position:relative;overflow:hidden;
    display:flex;flex-direction:column;margin:0 auto;
    border:4px solid var(--black);
    box-shadow:0 0 0 8px var(--navy),0 0 0 12px var(--black),0 40px 80px rgba(0,0,0,0.8);
}

/* ============================================================ HEADER */
.header {
    padding:8px 12px;background:var(--navy);border-bottom:4px solid var(--cream);
    display:flex;justify-content:space-between;align-items:center;
    z-index:10;min-height:52px;flex-shrink:0;gap:8px;
}
.header-center{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;}
.lang-btn-header{background:var(--cream);border:2.5px solid var(--black);padding:5px 12px;border-radius:50px;font-weight:900;cursor:pointer;font-size:11px;font-family:var(--font);color:var(--black);box-shadow:2px 2px 0 var(--cream-dark);transition:transform 0.1s;}
.lang-btn-header:active{transform:translate(2px,2px);box-shadow:none;}
.ui-badge{background:var(--cream)!important;color:var(--navy)!important;border:2.5px solid var(--black)!important;border-radius:50px!important;padding:4px 12px!important;display:inline-block!important;font-family:var(--font)!important;font-size:12px!important;font-weight:900!important;box-shadow:3px 3px 0 var(--black)!important;min-width:64px;text-align:center!important;}
.timer-badge{background:var(--cream);color:var(--black);padding:4px 10px;border-radius:50px;font-weight:800;border:2.5px solid var(--black);display:none;align-items:center;gap:6px;box-shadow:2px 2px 0 var(--black);}
.timer-icon{background:var(--navy);color:var(--cream);width:22px;height:22px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:11px;}
#timer-val{font-size:17px;font-weight:900;display:flex;align-items:baseline;gap:2px;color:var(--navy);}
#timer-val small{font-size:10px;font-weight:700;color:var(--grey-3);}

/* Progress dots */
.progress-dots{display:flex;gap:5px;align-items:center;}
.pdot{width:8px;height:8px;border-radius:50%;background:rgba(252,249,186,0.3);border:1.5px solid rgba(252,249,186,0.5);transition:all 0.3s;}
.pdot.done{background:var(--cream);border-color:var(--cream);box-shadow:0 0 6px rgba(252,249,186,0.7);}
.pdot.current{background:var(--cream-dark);border-color:var(--cream);width:12px;height:8px;border-radius:4px;animation:dotPulse 0.8s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:0.5;}}

/* ============================================================ SPLASH */
#splash {
    position:absolute;inset:0;z-index:2000;background:var(--cream);
    display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
    padding:0 0 12px;transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);overflow:hidden;
}
.splash-bg-deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.deco-dot{position:absolute;border-radius:50%;border:4px solid rgba(40,57,121,0.1);}
.d1{width:200px;height:200px;top:-60px;right:-70px;border-width:8px;}
.d2{width:100px;height:100px;bottom:90px;left:-35px;}
.d3{width:55px;height:55px;bottom:210px;right:22px;}
.deco-stripe{position:absolute;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,rgba(40,57,121,0.12) 0px,rgba(40,57,121,0.12) 14px,transparent 14px,transparent 26px);}
.s1{top:0;}.s2{bottom:50px;}
.deco-mag{position:absolute;font-size:38px;opacity:0.07;animation:floatDeco 4s ease-in-out infinite;}
.mag1{top:12%;left:8%;animation-delay:0s;}.mag2{top:60%;right:6%;animation-delay:1.5s;}.mag3{bottom:14%;left:42%;animation-delay:0.8s;}
@keyframes floatDeco{0%,100%{transform:translateY(0) rotate(-5deg);}50%{transform:translateY(-12px) rotate(5deg);}}

.splash-top-banner{position:relative;z-index:1;width:100%;background:var(--navy);padding:18px 20px 32px;text-align:center;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);margin-bottom:-2px;}
.sp-eyebrow{font-family:var(--font);font-size:9px;font-weight:900;color:var(--cream);letter-spacing:4px;text-transform:uppercase;margin-bottom:4px;opacity:0.85;}
.sp-title-big{font-family:var(--font-d);font-size:56px;color:var(--cream);letter-spacing:10px;line-height:1;text-shadow:5px 5px 0px var(--navy-dark),0 0 30px rgba(252,249,186,0.3);animation:titlePulse 2.4s ease-in-out infinite;}
@keyframes titlePulse{0%,100%{text-shadow:5px 5px 0px var(--navy-dark),0 0 20px rgba(252,249,186,0.2);}50%{text-shadow:5px 5px 0px var(--navy-dark),0 0 40px rgba(252,249,186,0.6);}}
.sp-title-sub-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:7px;}
.sp-bar{height:3px;width:32px;border-radius:2px;background:var(--cream);opacity:0.6;}
.sp-sub{font-family:var(--font);font-size:13px;font-weight:800;color:var(--cream);letter-spacing:3px;text-transform:uppercase;}

/* ID Card */
.id-card-outer{position:relative;z-index:1;width:90%;max-width:330px;background:var(--white);border:3.5px solid var(--black);border-radius:14px;box-shadow:5px 5px 0 var(--navy);overflow:hidden;margin-top:12px;flex-shrink:0;}
.id-card-header{background:var(--navy);padding:5px 14px;display:flex;justify-content:space-between;align-items:center;}
.id-card-dept{font-family:var(--font);font-size:7px;font-weight:900;color:var(--cream);letter-spacing:2px;text-transform:uppercase;}
.id-card-serial{font-family:var(--font);font-size:7px;font-weight:700;color:rgba(252,249,186,0.6);letter-spacing:1px;}
.id-card-body{display:flex;gap:14px;padding:12px 15px 10px;background:var(--paper);background-image:repeating-linear-gradient(transparent,transparent 23px,var(--paper-line) 23px,var(--paper-line) 24px);}
.photo-box{width:84px;height:110px;border:3px solid var(--black);background:#e8e8e0;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;flex-shrink:0;cursor:pointer;overflow:hidden;box-shadow:4px 4px 0 var(--navy);border-radius:4px;}
.upload-hint-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.upload-emoji{font-size:22px;}
.upload-hint-text{font-size:7.5px;font-weight:800;text-align:center;color:#888;letter-spacing:0.5px;line-height:1.4;}
.id-photo-preview{width:100%;height:100%;object-fit:cover;display:none;}
.id-tag{position:absolute;bottom:0;left:0;right:0;font-size:7px;font-weight:900;text-align:center;background:var(--navy);color:var(--cream);padding:2px 0;letter-spacing:1.5px;}
.ai-generating-overlay{position:absolute;inset:0;background:rgba(10,10,10,0.85);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;z-index:10;}
.ai-spinner{width:28px;height:28px;border:3px solid rgba(252,249,186,0.25);border-top-color:var(--cream);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-gen-text{font-family:var(--font);font-size:8px;font-weight:900;color:var(--cream);letter-spacing:2px;}
.bio-data{flex-grow:1;display:flex;flex-direction:column;gap:7px;justify-content:center;}
.bio-field{display:flex;flex-direction:column;gap:1px;}
.label-sp{font-size:10px!important;font-weight:900!important;color:var(--navy)!important;font-family:var(--font)!important;text-transform:uppercase!important;letter-spacing:1.5px;display:block;}
.val-with-reroll{display:flex;align-items:center;gap:5px;}
.val-sp{font-size:10px!important;font-weight:700!important;color:var(--black)!important;display:block;line-height:1.2;flex:1;}
.reroll-btn{background:var(--cream);border:1.5px solid var(--navy);border-radius:50%;width:20px;height:20px;font-size:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;box-shadow:1px 1px 0 var(--navy);transition:transform 0.15s;padding:0;line-height:1;}
.reroll-btn:active{transform:rotate(180deg) scale(0.9);box-shadow:none;}
.name-input{border:none;border-bottom:2.5px solid var(--navy);border-radius:0;background:transparent;font-size:13px;font-weight:800;padding:2px 0;outline:none;width:100%;color:var(--black);font-family:var(--font);}
.name-input::placeholder{color:#bbb;font-weight:500;}
.name-input:focus{border-bottom-color:var(--navy-light);}
.status-light-row{display:flex;align-items:center;gap:5px;margin-top:3px;}
.status-dot{width:7px;height:7px;border-radius:50%;animation:statusBlink 1.5s ease-in-out infinite;}
.dot-yellow{background:var(--cream-dark);border:1px solid var(--navy);}
@keyframes statusBlink{0%,100%{opacity:1;}50%{opacity:0.3;}}
.status-text{font-family:var(--font);font-size:7px;font-weight:700;color:var(--grey-2);letter-spacing:0.8px;text-transform:uppercase;}
.id-card-footer{background:#f5f3e0;border-top:2px solid rgba(40,57,121,0.1);padding:7px 16px;display:flex;justify-content:center;}
.barcode-lines{height:18px;background:repeating-linear-gradient(90deg,var(--navy) 0px,var(--navy) 2px,transparent 2px,transparent 4px,var(--navy) 4px,var(--navy) 5px,transparent 5px,transparent 8px,var(--navy) 8px,var(--navy) 11px,transparent 11px,transparent 13px);width:90px;margin:0 auto;opacity:0.5;}
.barcode-num{font-family:var(--font);font-size:7px;color:#888;letter-spacing:2px;display:block;margin-top:3px;}

/* Mission Brief */
.mission-brief-box{position:relative;z-index:1;width:90%;max-width:330px;background:var(--navy);border:3px solid var(--black);border-radius:12px;padding:10px 14px 12px;margin-top:10px;box-shadow:4px 4px 0 var(--navy-glow);flex-shrink:0;}
.brief-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.brief-label{font-family:var(--font);font-size:9px;font-weight:900;color:var(--cream);letter-spacing:3px;text-transform:uppercase;}
.brief-reroll-btn{background:rgba(252,249,186,0.15);border:1.5px solid rgba(252,249,186,0.4);border-radius:50%;width:22px;height:22px;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cream);transition:transform 0.2s;}
.brief-reroll-btn:active{transform:rotate(360deg);}
.mission-tips{display:flex;flex-direction:column;gap:5px;}
.tip-item{display:flex;align-items:flex-start;gap:6px;}
.tip-num{font-family:var(--font-d);font-size:13px;color:var(--cream-dark);min-width:16px;line-height:1.4;}
.tip-text{font-family:var(--font);font-size:10.5px;font-weight:600;line-height:1.55;color:rgba(252,249,186,0.9);}

/* Buttons */
.bottom-action{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:1;margin-top:11px;}
.open-case-btn{background-color:#cc0000;color:#fff;border:3px solid var(--black);padding:13px 40px;font-size:18px;font-weight:900;cursor:pointer;box-shadow:5px 5px 0 var(--black);font-family:var(--font-d);letter-spacing:4px;text-transform:uppercase;border-radius:50px;transition:transform 0.1s,box-shadow 0.1s;width:82%;max-width:260px;display:flex;align-items:center;justify-content:center;gap:8px;animation:btnGlow 2s ease-in-out infinite;}
@keyframes btnGlow{0%,100%{box-shadow:5px 5px 0 var(--black);}50%{box-shadow:5px 5px 0 var(--black),0 0 18px rgba(204,0,0,0.5);}}
.btn-icon{font-size:16px;animation:sparkle 1s ease-in-out infinite alternate;}
@keyframes sparkle{from{opacity:0.6;}to{opacity:1;transform:scale(1.2);}}
.open-case-btn:active{transform:translate(5px,5px);box-shadow:none;animation:none;}
.lang-toggle-pill{background:transparent!important;border:2px solid rgba(40,57,121,0.3)!important;padding:7px 20px!important;border-radius:50px!important;cursor:pointer;font-weight:700!important;font-size:11px!important;font-family:var(--font)!important;color:rgba(40,57,121,0.65)!important;letter-spacing:1px;transition:all 0.2s;}

/* ============================================================ GAME AREA */
.game-area{flex-grow:1;position:relative;display:flex;justify-content:center;align-items:center;padding:20px;background:var(--cream);overflow:hidden;}
.game-area::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(40,57,121,0.06) 1px,transparent 1px);background-size:18px 18px;pointer-events:none;}
.swipe-zone-hint{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;}
.swipe-zone-hint.top{top:10px;}.swipe-zone-hint.bottom{bottom:10px;}
.zone-badge{padding:6px 20px;border-radius:50px;font-family:var(--font);font-size:14px;font-weight:900;letter-spacing:1px;border:2.5px solid var(--black);box-shadow:3px 3px 0 var(--black);}
/* Same navy colour both — intentional confusion 😈 */
.zone-badge.fact{background:var(--navy);color:var(--cream);}
.zone-badge.fake{background:var(--navy);color:var(--cream);}
.zone-arrow{font-size:18px;line-height:1;color:var(--navy);}
.swipe-icon{position:absolute;left:50%;transform:translateX(-50%);opacity:0;z-index:100;padding:8px 26px;text-transform:uppercase;border:6px solid;font-family:var(--font);font-weight:900;font-size:26px!important;letter-spacing:2px;border-radius:6px;white-space:nowrap;}
.icon-true{top:20px;color:var(--white);border-color:var(--ok);background:var(--ok);transform:translateX(-50%) rotate(-8deg);}
.icon-fake{bottom:20px;color:var(--white);border-color:var(--bad);background:var(--bad);transform:translateX(-50%) rotate(8deg);}
.card-folder{position:absolute;width:88%;max-width:300px;background:var(--white);border:3px solid var(--navy);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--navy),0 12px 32px rgba(0,0,0,0.1);padding:24px 22px 20px;display:flex;flex-direction:column;cursor:grab;touch-action:none;z-index:5;min-height:300px;}
#game-secret{border:2px solid var(--navy)!important;color:var(--navy)!important;padding:2px 10px!important;font-weight:900!important;font-size:9px!important;font-family:var(--font)!important;letter-spacing:2px!important;margin-bottom:12px!important;width:fit-content!important;text-transform:uppercase;border-radius:3px;opacity:0.7;}
.headline{font-family:var(--font);font-size:clamp(15px,4.5vw,19px)!important;font-weight:700!important;color:var(--black);line-height:1.6!important;flex-grow:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px!important;}

/* ============================================================ FINDER */
#finder-screen{display:none;flex-direction:column;padding:14px 14px;flex-grow:1;background:var(--cream);overflow-y:auto;justify-content:center;}
.finder-card{background:var(--white);border:3px solid var(--navy);border-radius:var(--r-md);padding:18px 16px;margin-bottom:14px;box-shadow:5px 5px 0 var(--navy);}
.finder-card .headline{font-size:clamp(14px,4vw,17px)!important;color:var(--black);line-height:1.6!important;text-align:left!important;font-weight:700!important;flex-grow:0;display:block;padding:0!important;}
.choices-grid{display:flex;flex-direction:column;gap:8px;}
.choice-btn{background:var(--white);border:2.5px solid var(--navy);padding:12px 14px;border-radius:50px;text-align:left;font-size:13px;font-weight:700;font-family:var(--font);cursor:pointer;display:flex;align-items:center;box-shadow:3px 3px 0 rgba(40,57,121,0.25);transition:border-color 0.15s,background 0.15s,transform 0.1s;color:var(--black);line-height:1.4;}
.choice-btn:hover{background:var(--cream);border-color:#cc0000;border-width:3px;box-shadow:3px 3px 0 #cc0000;transform:scale(1.02);}
.choice-btn:active{background:var(--cream);border-color:var(--navy);box-shadow:3px 3px 0 var(--navy);}
.choice-btn b{background:var(--cream);border:2.5px solid var(--black);min-width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;margin-right:11px;font-family:var(--font);font-weight:900;font-size:13px;flex-shrink:0;color:var(--black);box-shadow:2px 2px 0 var(--black);}

/* ============================================================ CHAT — LINE STYLE */
#mission-3-screen{display:none;flex-direction:column;flex-grow:1;overflow:hidden;background:#DDEEFF;}

/* Status bar */
.line-status-bar{background:var(--navy);padding:4px 14px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.line-time{color:var(--cream);font-family:var(--font-d);font-size:13px;letter-spacing:1px;}
.line-icons-right{display:flex;gap:5px;align-items:center;}
.line-signal-bars,.line-wifi,.line-battery{color:var(--cream);font-size:8px;font-family:var(--font);font-weight:700;opacity:0.85;}

/* Chat header */
.line-chat-header{background:var(--navy);border-bottom:3px solid var(--cream);padding:8px 12px;display:flex;align-items:center;gap:9px;flex-shrink:0;box-shadow:0 2px 12px rgba(0,0,0,0.2);}
.line-back-btn{background:var(--cream);border:2px solid var(--black);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;flex-shrink:0;font-weight:900;box-shadow:2px 2px 0 var(--black);color:var(--navy);}
.line-avatar-wrap{position:relative;flex-shrink:0;}
.line-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:3px solid var(--cream);box-shadow:0 2px 6px rgba(0,0,0,0.3);}
.line-online-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;background:#4CAF50;border:2px solid var(--navy);border-radius:50%;}
.line-header-info{flex-grow:1;}
.line-sender-name{font-family:var(--font);font-size:14px;font-weight:900;color:var(--cream);line-height:1.2;}
.line-sender-sub{font-family:var(--font);font-size:10px;font-weight:600;color:rgba(252,249,186,0.7);}
.line-header-actions{display:flex;gap:6px;}
.line-action-btn{background:rgba(252,249,186,0.15);border:1.5px solid rgba(252,249,186,0.3);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;color:var(--cream);}

/* Chat body */
.line-chat-body{flex-grow:1;padding:14px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#DDEEFF 0%,#EEF5FF 100%);}

/* Chat message rows */
.line-msg-row{display:flex;gap:8px;max-width:88%;align-self:flex-start;animation:fadeIn 0.35s ease;}
.line-profile-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2.5px solid var(--navy);box-shadow:2px 2px 0 rgba(40,57,121,0.3);}
.line-msg-col{display:flex;flex-direction:column;gap:3px;}
.line-sender-label{font-family:var(--font);font-size:10px;font-weight:900;color:var(--navy);letter-spacing:0.5px;}
.line-bubble{background:var(--white);border:2px solid var(--navy);border-radius:4px 18px 18px 18px;padding:10px 14px;font-size:13px;font-weight:600;font-family:var(--font);line-height:1.5;color:var(--black);box-shadow:3px 3px 0 rgba(40,57,121,0.18);}
.line-sticker{font-size:44px;display:block;margin:4px 0;text-align:center;animation:stickerPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;}
@keyframes stickerPop{from{opacity:0;transform:scale(0.5);}to{opacity:1;transform:scale(1);}}
.line-timestamp{font-size:9px;color:var(--grey-3);font-family:var(--font);align-self:flex-end;margin-left:4px;}

/* Reaction badges (like/heart) */
.line-reactions{display:flex;gap:3px;margin-top:2px;}
.line-react{background:var(--white);border:1.5px solid #ddd;border-radius:50px;padding:1px 6px;font-size:9px;box-shadow:1px 1px 0 rgba(0,0,0,0.1);}

/* Right bubble (player's answer) */
.line-bubble-right{background:var(--navy);color:var(--cream);border:2px solid var(--navy-dark);border-radius:18px 4px 18px 18px;padding:10px 14px;font-size:13px;font-weight:800;font-family:var(--font);line-height:1.5;box-shadow:3px 3px 0 rgba(40,57,121,0.3);align-self:flex-end;max-width:80%;animation:fadeIn 0.3s ease;}

/* Input area */
.line-input-area{background:var(--white);border-top:2.5px solid rgba(40,57,121,0.15);padding:8px 10px;flex-shrink:0;}
.line-input-bar{display:flex;align-items:center;gap:8px;background:#f0f4ff;border:2px solid rgba(40,57,121,0.2);border-radius:50px;padding:6px 8px 6px 16px;}
.line-input-fake{flex:1;font-family:var(--font);font-size:12px;color:var(--grey-3);font-weight:500;}
.line-send-btn{background:var(--navy);color:var(--cream);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;flex-shrink:0;}

/* Replies */
.line-replies-wrap{background:var(--navy);padding:8px 10px;display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.line-reply-btn{background:var(--cream);border:2.5px solid var(--black);padding:10px 14px;border-radius:50px;font-weight:900;font-size:13px;font-family:var(--font);text-align:center;color:var(--navy);cursor:pointer;transition:background 0.15s;box-shadow:3px 3px 0 rgba(40,57,121,0.4);}
.line-reply-btn:active{background:var(--navy);color:var(--cream);border-color:var(--navy);box-shadow:none;transform:translate(2px,2px);}

/* Bottom nav dots */
.line-bottom-keyboard{background:var(--cream-dark);border-top:3px solid var(--navy);padding:8px 14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.line-kb-dots{display:flex;gap:8px;align-items:center;}
.lkd{width:10px;height:10px;border-radius:50%;background:rgba(40,57,121,0.25);border:2px solid rgba(40,57,121,0.4);}
.lkd.active{background:var(--navy);border-color:var(--navy);width:26px;border-radius:5px;}

/* ============================================================ SUMMARY */
.summary-container{display:none;position:absolute;inset:0;z-index:4000;background:var(--navy);background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(252,249,186,0.04) 28px,rgba(252,249,186,0.04) 29px),repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(252,249,186,0.04) 28px,rgba(252,249,186,0.04) 29px);flex-direction:column;justify-content:center;align-items:center;padding:20px;overflow-y:auto;}
.case-label-style{background-color:var(--cream)!important;color:var(--navy)!important;border:2.5px solid var(--black)!important;border-radius:50px!important;padding:6px 24px!important;display:inline-block!important;font-family:var(--font)!important;font-size:18px!important;font-weight:900!important;letter-spacing:1px;box-shadow:4px 4px 0 var(--black)!important;margin-bottom:8px;}
.summary-card{background:var(--white);border:4px solid var(--black);border-radius:var(--r-xl);padding:22px 16px;width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;box-shadow:8px 8px 0 var(--cream),0 20px 40px rgba(0,0,0,0.4);gap:10px;position:relative;z-index:1;overflow:hidden;}
.summary-card::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,var(--navy) 33%,var(--cream-dark) 33% 66%,var(--navy) 66%);}
.summary-status{font-family:var(--font-d);font-size:28px;font-weight:900;color:var(--navy);line-height:1;letter-spacing:3px;text-transform:uppercase;margin-top:4px;}
.photo-frame-v2{width:110px;height:140px;border:4px solid var(--black);background:#EEE;box-shadow:6px 6px 0 var(--navy);overflow:hidden;position:relative;}
.photo-frame-v2::before{content:'AGENT';position:absolute;top:0;left:0;right:0;background:var(--navy);color:var(--cream);padding:3px 0;font-size:7px;font-weight:900;font-family:var(--font);text-align:center;z-index:2;letter-spacing:2px;}
.rank-mascot-badge{font-size:42px;animation:mascotBounce 1s ease-in-out infinite;filter:drop-shadow(2px 4px 0 rgba(0,0,0,0.15));}
.rank-mascot-badge .rank-cartoon-img{width:110px;height:110px;object-fit:contain;display:block;margin:0 auto;filter:drop-shadow(2px 6px 8px rgba(0,0,0,0.35));}
@keyframes mascotBounce{0%,100%{transform:translateY(0) rotate(-3deg) scale(1);}50%{transform:translateY(-8px) rotate(3deg) scale(1.08);}}
.info-box-v2{background:#f4f6ff;border:2.5px solid var(--navy);border-radius:var(--r-md);width:95%;padding:9px 14px;text-align:left;display:flex;flex-direction:column;gap:2px;box-shadow:3px 3px 0 rgba(40,57,121,0.2);}
.info-label-v2{color:var(--navy);font-size:9px;font-weight:900;font-family:var(--font);letter-spacing:2px;text-transform:uppercase;}
.info-value-v2{font-family:var(--font);font-weight:900;font-size:20px;color:var(--black);line-height:1.2;}
.summary-action-btn{background-color:#cc0000;color:#fff;border:3px solid var(--black);padding:11px 36px;border-radius:50px;font-weight:900;font-size:15px;font-family:var(--font-d);cursor:pointer;min-width:160px;box-shadow:4px 4px 0 var(--black);letter-spacing:2px;text-transform:uppercase;transition:transform 0.1s,box-shadow 0.1s;}
.summary-action-btn:active{transform:translate(4px,4px);box-shadow:none;}
#final-report-screen .summary-card{gap:8px!important;padding:18px 14px!important;}
#final-report-screen .photo-frame-v2{width:100px!important;height:126px!important;}
#final-report-screen .info-box-v2{padding:8px 13px!important;}
#final-report-screen .info-value-v2{font-size:17px!important;}
#ultimate-quote{font-style:italic;color:#555;font-size:11px!important;font-weight:600;font-family:var(--font);margin:2px 0!important;padding:0 10px;line-height:1.4;text-align:center;}
#final-date-label{font-size:9px!important;color:var(--grey-3);font-family:var(--font);font-weight:700;margin:0!important;letter-spacing:0.5px;}
.save-btn{background-color:var(--bad)!important;color:var(--white)!important;box-shadow:4px 4px 0 var(--black)!important;font-size:13px!important;padding:10px 28px!important;}
.restart-btn{background-color:var(--grey-2)!important;color:var(--white)!important;box-shadow:4px 4px 0 #000!important;font-size:13px!important;padding:10px 28px!important;}

/* ============================================================ MODAL */
#fact-modal{display:none;position:absolute;inset:0;z-index:5000;background:rgba(0,0,0,0.78);justify-content:center;align-items:center;padding:24px;backdrop-filter:blur(5px);}
.modal-folder{background:var(--white);border:4px solid var(--navy);border-radius:var(--r-xl);padding:26px 22px;text-align:center;width:100%;max-width:300px;box-shadow:8px 8px 0 var(--cream);position:relative;overflow:hidden;animation:modalPop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;}
@keyframes modalPop{from{opacity:0;transform:scale(0.75);}to{opacity:1;transform:scale(1);}}
.modal-folder::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--navy) 33%,var(--cream-dark) 33% 66%,var(--navy) 66%);}
.modal-question-recap{background:var(--cream);border:2px solid var(--navy);border-radius:10px;padding:9px 12px;margin-bottom:12px;font-family:var(--font);font-size:12px;font-weight:600;color:#1a1a1a;line-height:1.5;text-align:left;display:none;}
.modal-question-recap.show{display:block;}
.modal-recap-label{font-size:13px;font-weight:900;color:var(--navy);letter-spacing:2px;text-transform:uppercase;display:block;margin-bottom:6px;}
#ex-status{font-family:var(--font-d);font-size:34px!important;font-weight:900;letter-spacing:4px;text-transform:uppercase;margin-bottom:10px;margin-top:6px;display:block;}
#ex-body{font-size:13px!important;font-weight:600;font-family:var(--font);color:#333;line-height:1.6;margin-bottom:18px!important;}
#btn-modal-next{background:var(--navy);color:var(--cream);border:3px solid var(--black);padding:14px;border-radius:50px;width:100%;font-weight:900;font-size:14px;font-family:var(--font-d);letter-spacing:3px;text-transform:uppercase;cursor:pointer;box-shadow:4px 4px 0 var(--black);transition:transform 0.1s,box-shadow 0.1s;}
#btn-modal-next:active{transform:translate(4px,4px);box-shadow:none;}

/* ============================================================ FINAL REPORT ID CARD */
.final-cartoon-row{display:flex;align-items:flex-end;justify-content:center;width:100%;gap:4px;margin-bottom:4px;position:relative;}
.final-cartoon-side{display:flex;align-items:flex-end;flex-shrink:0;}
.final-deco-cartoon{width:48px;height:auto;object-fit:contain;opacity:0.85;filter:drop-shadow(1px 2px 4px rgba(0,0,0,0.18));}
.final-id-card-wrap{position:relative;width:100%;max-width:340px;min-width:0;margin:0 auto;}
.final-id-card{margin-top:0!important;width:100%!important;max-width:100%!important;box-shadow:4px 4px 0 var(--navy)!important;}
.final-id-card .id-card-body{padding:10px 14px 8px!important;gap:12px!important;}
.final-id-card .photo-box{width:80px!important;height:100px!important;}
.final-id-card .bio-data{gap:5px!important;}
.final-id-card .label-sp{font-size:8px!important;}
.final-id-card .val-sp{font-size:11px!important;}
.final-id-card .name-input{font-size:12px!important;}
.final-id-card .status-text{font-size:7px!important;}
.final-big-cartoon-wrap{display:none;}
.final-photo-box{pointer-events:none!important;cursor:default!important;}
#music-fab{position:absolute;bottom:12px;right:12px;z-index:6000;width:44px;height:44px;background:var(--cream);border:2.5px solid var(--black);border-radius:50%;box-shadow:3px 3px 0 var(--black);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform 0.1s,box-shadow 0.1s;font-size:18px;}
#music-fab:active{transform:translate(3px,3px);box-shadow:none;}
#music-fab .music-note-icon{display:inline-block;animation:noteBounce 1.2s ease-in-out infinite;}
@keyframes noteBounce{0%,100%{transform:rotate(-12deg) scale(1);}50%{transform:rotate(12deg) scale(1.15);}}

/* ============================================================ CONFETTI */
.confetti-container{position:absolute;inset:0;pointer-events:none;z-index:4100;overflow:hidden;}
.confetti{position:absolute;width:9px;height:9px;background:var(--cream);top:-10px;animation:fall 3s infinite linear;border-radius:2px;}
.confetti:nth-child(3n){background:var(--navy);}
.confetti:nth-child(3n+1){background:var(--cream-dark);}
@keyframes fall{to{transform:translateY(100vh) rotate(360deg);}}

.sticker{font-size:48px;margin:5px 0;animation:bounce 1s infinite;display:block;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--navy);border-radius:4px;}
/* --- ส่วนเปลี่ยนอีโมจิในตาราง Leaderboard เป็นรูปภาพ --- */

/* 1. จัดการช่องแรกของตาราง (ที่มีเลข 1🥇, 2🥈, 3🥉) */
#high-scores-list td:first-child {
    position: relative;
    color: transparent !important; /* ซ่อนตัวเลขและอีโมจิเดิม */
    min-width: 45px;
    height: 40px;
    vertical-align: middle;
}

/* 2. สร้างเลเยอร์รูปภาพทับลงไป */
#high-scores-list td:first-child::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;  /* ปรับขนาดความกว้างรูป */
    height: 32px; /* ปรับขนาดความสูงรูป */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    visibility: visible;
}

/* 3. ใช้เทคนิค CSS Attribute Selector จับจากข้อความที่ JS พ่นออกมา */

/* อันดับ 1 */
#high-scores-list td:first-child:nth-child(1):::after, /* เผื่อไว้ */
#high-scores-list tr:nth-child(1) td:first-child::before {
    background-image: url('19.png') !important;
}

/* อันดับ 2 */
#high-scores-list tr:nth-child(2) td:first-child::before {
    background-image: url('20.png') !important;
}

/* อันดับ 3 */
#high-scores-list tr:nth-child(3) td:first-child::before {
    background-image: url('21.png') !important;
}

/* 4. คืนค่าสีให้ตัวเลขอันดับอื่นๆ (4 เป็นต้นไป) ที่ไม่ใช่ 1-3 */
#high-scores-list tr:nth-child(n+4) td:first-child {
    color: var(--navy) !important; /* กลับมาใช้สีน้ำเงินตามเดิม */
}


/* ============================================================ FINAL REPORT — REDESIGN */

/* Outer container */
#final-report-screen.summary-container {
    background: var(--navy-dark);
    padding: 0;
    justify-content: flex-start;
    overflow-y: auto;
}

/* Capture card */
.fr-capture {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* ---- HERO BANNER ---- */
.fr-hero {
    width: 100%;
    background: var(--navy);
    padding: 22px 20px 28px;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}
.fr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(252,249,186,0.04) 20px, rgba(252,249,186,0.04) 21px),
        repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(252,249,186,0.04) 20px, rgba(252,249,186,0.04) 21px);
    pointer-events: none;
}
.fr-hero-eyebrow {
    font-family: var(--font);
    font-size: 8px;
    font-weight: 900;
    color: var(--cream);
    letter-spacing: 5px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 4px;
}
.fr-hero-title {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 900;
    color: var(--cream-dark);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.fr-hero-sub {
    font-family: var(--font-d);
    font-size: 38px;
    color: var(--cream);
    letter-spacing: 6px;
    line-height: 1;
    text-shadow: 4px 4px 0 var(--navy-dark);
    animation: titlePulse 2.4s ease-in-out infinite;
}
.fr-hero-stars {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.fr-star {
    font-size: 18px;
    color: var(--cream-dark);
    animation: starSpin 1.8s ease-in-out infinite;
    display: inline-block;
}
.fr-star.delay1 { animation-delay: 0.2s; }
.fr-star.delay2 { animation-delay: 0.4s; }
@keyframes starSpin {
    0%,100% { transform: rotate(0deg) scale(1); color: var(--cream-dark); }
    50% { transform: rotate(20deg) scale(1.3); color: #ffe066; }
}

/* ---- ID CARD WRAP ---- */
.fr-idcard-wrap {
    width: 92%;
    max-width: 340px;
    margin: 14px auto 10px;
    position: relative;
}
.fr-id-card {
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 6px 6px 0 var(--navy), 0 12px 28px rgba(40,57,121,0.18) !important;
    border: 3px solid var(--black) !important;
}
.fr-id-card .id-card-body { padding: 12px 14px 10px !important; gap: 12px !important; }
.fr-id-card .photo-box { width: 82px !important; height: 104px !important; box-shadow: 3px 3px 0 var(--navy) !important; }
.fr-id-card .bio-data { gap: 6px !important; }
.fr-id-card .label-sp { font-size: 8px !important; }
.fr-id-card .val-sp { font-size: 11px !important; font-weight: 800 !important; }
.fr-id-card .status-text { font-size: 7px !important; }
.final-photo-box { pointer-events: none !important; cursor: default !important; }

/* ---- STATS ROW ---- */
.fr-stats-row {
    width: 92%;
    max-width: 340px;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border: 3px solid var(--black);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 5px 5px 0 var(--black);
    margin: 6px auto;
}
.fr-stat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    gap: 2px;
}
.fr-stat-icon { font-size: 20px; line-height: 1; }
.fr-stat-label {
    font-family: var(--font);
    font-size: 8px;
    font-weight: 900;
    color: rgba(252,249,186,0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 2px;
}
.fr-stat-val {
    font-family: var(--font-d);
    font-size: 28px;
    color: var(--cream);
    letter-spacing: 2px;
    line-height: 1;
    text-shadow: 3px 3px 0 var(--navy-dark);
}
.fr-rank-val {
    font-family: var(--font);
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
}
.fr-stat-divider {
    width: 3px;
    background: rgba(252,249,186,0.15);
    margin: 10px 0;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ---- QUOTE ---- */
.fr-quote-wrap {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 16px 4px;
    width: 92%;
    max-width: 340px;
}
.fr-qmark {
    font-family: Georgia, serif;
    font-size: 28px;
    color: var(--navy);
    opacity: 0.25;
    line-height: 1;
    flex-shrink: 0;
}
.fr-quote-text {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    color: #444;
    line-height: 1.6;
    font-style: italic;
    text-align: center;
    flex: 1;
    padding-top: 6px;
}
.fr-date {
    font-family: var(--font);
    font-size: 9px;
    color: var(--grey-3);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}

/* ---- STAMP ---- */
.fr-stamp {
    margin: 4px 0 16px;
    width: 76px;
    height: 76px;
    border: 4px solid rgba(200,0,0,0.55);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-18deg);
    position: relative;
}
.fr-stamp::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 2px dashed rgba(200,0,0,0.3);
    border-radius: 50%;
}
.fr-stamp-inner {
    font-family: var(--font-d);
    font-size: 12px;
    color: rgba(200,0,0,0.65);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
}

/* ---- ACTION BUTTONS (outside capture) ---- */
.fr-actions {
    display: flex;
    gap: 10px;
    padding: 14px 16px 20px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    justify-content: center;
    flex-shrink: 0;
}
.fr-btn {
    flex: 1;
    max-width: 160px;
    padding: 13px 10px;
    border-radius: 50px;
    border: 3px solid var(--black);
    font-family: var(--font-d);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--black);
    transition: transform 0.1s, box-shadow 0.1s;
}
.fr-btn:active { transform: translate(4px,4px); box-shadow: none; }
.fr-btn-save { background: #cc0000; color: #fff; }
.fr-btn-restart { background: var(--cream); color: var(--navy); }

/* ============================================================ FINAL REPORT — CARTOON SIDE */
.fr-content-row {
    position: relative;
    width: 92%;
    max-width: 340px;
    margin: 14px auto 24px;
    padding-bottom: 16px;
    overflow: visible;
}
.fr-cartoon-col {
    position: absolute;
    bottom: -10px;
    right: -18px;
    z-index: 10;
    pointer-events: none;
    width: 120px;
}
.fr-cartoon-img {
    width: 120px;
    height: auto;
    object-fit: contain;
    display: none;
    filter: drop-shadow(3px 6px 10px rgba(0,0,0,0.28));
    animation: mascotBounce 1.2s ease-in-out infinite;
}
.fr-content-row .fr-idcard-wrap {
    width: 100%;
    margin: 0;
}