*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font-family:"Sarabun",sans-serif;font-size:16px;color:#eef8ff;background:linear-gradient(135deg,#071b34,#08284d 58%,#151b49);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input{font-family:inherit}
.page{position:relative;min-height:100vh;overflow:hidden}
.glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.3}
.glow-a{width:520px;height:520px;background:#197ed8;left:-180px;top:-160px}
.glow-b{width:520px;height:520px;background:#774fd4;right:-160px;bottom:-220px}
.topbar{position:relative;z-index:20;min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px,4vw,56px);border-bottom:1px solid rgba(134,203,244,.12);background:rgba(4,20,39,.52);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,218,98,.42);border-radius:12px;background:#133d68;color:#ffe078;font-size:19px}
.brand strong{display:block;font-size:16px}
.brand small{display:block;color:#6fa8ca;font-size:10px;letter-spacing:1.3px}
.top-actions{display:flex;gap:8px}
.icon-btn,.home-btn{min-height:42px;border:1px solid rgba(126,191,232,.2);border-radius:11px;background:rgba(19,56,91,.65);color:#d6effd}
.icon-btn{width:44px;cursor:pointer;font-size:17px}
.home-btn{display:flex;align-items:center;padding:0 13px;font-size:13px;font-weight:700}
.main{position:relative;z-index:5;width:min(1220px,calc(100% - 44px));min-height:calc(100vh - 76px);margin:auto;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(400px,.74fr);align-items:center;gap:clamp(40px,6vw,88px);padding:44px 0}
.hero{
    position:relative;
    min-height:600px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:center;
    gap:12px;
}

.hero-copy{
    position:relative;
    z-index:5;
    align-self:center;
}

.portal-label{
    width:max-content;
    padding:6px 10px;
    border:1px solid rgba(82,180,238,.35);
    border-radius:999px;
    color:#72c7f1;
    background:rgba(18,68,108,.38);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}

.hero h1{
    margin:14px 0 0;
    max-width:590px;
    color:#f7fbff;
    font-size:clamp(43px,4.4vw,66px);
    line-height:1.08;
    letter-spacing:-1.3px;
}

.hero h1 span{
    color:#88d7ff;
}

.hero-copy>p{
    max-width:555px;
    margin:18px 0 0;
    color:#9bb9cd;
    font-size:16px;
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:20px;
}

.chips span{
    padding:7px 10px;
    border:1px solid rgba(121,190,231,.2);
    border-radius:9px;
    background:rgba(10,43,75,.56);
    color:#bddbec;
    font-size:12px;
    font-weight:700;
}

.detective-stage{
    position:relative;
    align-self:end;
    width:300px;
    height:520px;
    pointer-events:none;
}

.detective-img{
    position:absolute;
    z-index:4;
    left:50%;
    bottom:-8px;
    width:290px;
    max-height:500px;
    object-fit:contain;
    transform:translateX(-50%);
    filter:
        drop-shadow(0 28px 36px rgba(0,0,0,.40))
        drop-shadow(0 0 28px rgba(65,171,237,.13));
}

.radar{
    position:absolute;
    border:1px solid rgba(72,176,239,.2);
    border-radius:50%;
}

.r1{
    width:300px;
    height:300px;
    left:0;
    bottom:65px;
}

.r2{
    width:220px;
    height:220px;
    left:40px;
    bottom:105px;
    border-color:rgba(149,105,238,.18);
}

.float-card{
    position:absolute;
    z-index:8;
    padding:9px 11px;
    border:1px solid rgba(143,203,238,.22);
    border-radius:10px;
    background:rgba(10,40,72,.88);
    box-shadow:0 12px 28px rgba(0,0,0,.25);
    backdrop-filter:blur(10px);
}

.float-card small{
    display:block;
    color:#78a6c2;
    font-size:9px;
    font-weight:800;
}

.float-card b{
    display:block;
    margin-top:2px;
    color:#f0f9ff;
    font-size:13px;
}

.float-card.xp{
    right:-7px;
    top:42%;
}

.float-card.mission{
    left:-5px;
    bottom:42px;
}
.login-wrap{position:relative;z-index:10}
.login-card{padding:28px;border:1px solid rgba(139,198,232,.2);border-radius:23px;background:linear-gradient(160deg,rgba(17,54,89,.96),rgba(8,35,62,.97));box-shadow:0 30px 80px rgba(0,0,0,.28)}
.card-head{display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid rgba(126,188,225,.14)}
.bag{width:52px;height:52px;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(99,186,239,.25);border-radius:14px;background:#174a7a;font-size:22px}
.card-head small{display:block;color:#72caef;font-size:10px;font-weight:800;letter-spacing:1.4px}.card-head h2{margin:2px 0 0;font-size:24px}.card-head p{margin:3px 0 0;color:#8ba8bb;font-size:12px}
.alert{display:flex;gap:10px;margin-top:16px;padding:11px 12px;border:1px solid rgba(244,104,118,.3);border-radius:11px;background:rgba(124,38,50,.28)}
.alert>b{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#c34c5a}.alert strong,.alert span{display:block}.alert strong{font-size:13px}.alert span{margin-top:1px;color:#c1d2dc;font-size:12px}
form{margin-top:20px}.field{display:block;margin-bottom:16px}.field>span{display:block;margin-bottom:7px;color:#cde7f5;font-size:14px;font-weight:700}.field>small{display:block;margin-top:5px;color:#718ea2;font-size:11px}
.input-box{height:52px;display:flex;align-items:center;border:1px solid rgba(132,195,232,.22);border-radius:12px;background:rgba(5,25,47,.67);overflow:hidden}
.input-box:focus-within{border-color:#39a4e4;box-shadow:0 0 0 3px rgba(48,151,218,.09)}
.input-box i{width:48px;display:grid;place-items:center;flex:0 0 auto;color:#72bee8;font-style:normal;font-size:11px;font-weight:800}
.input-box input{width:100%;height:100%;min-width:0;border:0;outline:0;background:transparent;color:#eff9ff;font-size:15px}.input-box input::placeholder{color:#6c8799;opacity:1}
.eye{width:48px;height:100%;border:0;background:transparent;color:#a5cde2;cursor:pointer;font-size:16px}
.login-btn{width:100%;min-height:54px;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;margin-top:8px;border:1px solid rgba(255,219,103,.45);border-radius:13px;background:linear-gradient(135deg,#ffe37a,#efb94c);color:#12263b;cursor:pointer;font-size:15px;font-weight:800}.login-btn b{font-size:23px}
.help{display:flex;align-items:center;gap:10px;margin-top:17px;padding:12px;border:1px solid rgba(121,182,219,.13);border-radius:11px;background:rgba(7,27,50,.48)}.help>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#173f67;color:#80bee0;font-weight:800}.help strong,.help small{display:block}.help strong{font-size:12px}.help small{margin-top:1px;color:#7f9caf;font-size:11px}
.privacy{margin:12px 0 0;color:#728da0;font-size:11px;text-align:center}
@media(max-width:980px){
    .main{
        width:min(820px,calc(100% - 32px));
        grid-template-columns:1fr;
        padding-top:34px;
    }

    .hero{
        min-height:470px;
        grid-template-columns:minmax(0,1fr) 250px;
    }

    .hero h1{
        font-size:46px;
    }

    .detective-stage{
        width:250px;
        height:430px;
    }

    .detective-img{
        width:235px;
        max-height:415px;
    }

    .r1{
        width:245px;
        height:245px;
        bottom:55px;
    }

    .r2{
        width:180px;
        height:180px;
        left:33px;
        bottom:88px;
    }
}
@media(max-width:620px){
    .topbar{
        min-height:66px;
        padding:11px 15px;
    }

    .brand small,
    .home-btn{
        display:none;
    }

    .brand strong{
        font-size:14px;
    }

    .main{
        width:min(100% - 24px,520px);
        padding:24px 0;
    }

    .hero{
        min-height:auto;
        grid-template-columns:1fr;
        gap:12px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero-copy>p{
        font-size:14px;
    }

    .detective-stage{
        width:100%;
        height:360px;
    }

    .detective-img{
        width:215px;
        max-height:350px;
    }

    .r1{
        width:235px;
        height:235px;
        left:50%;
        bottom:45px;
        transform:translateX(-50%);
    }

    .r2{
        width:175px;
        height:175px;
        left:50%;
        bottom:75px;
        transform:translateX(-50%);
    }

    .float-card.xp{
        right:10%;
        top:38%;
    }

    .float-card.mission{
        left:10%;
        bottom:34px;
    }

    .login-card{
        padding:20px 18px;
        border-radius:18px;
    }

    .card-head h2{
        font-size:21px;
    }
}


/* =========================================================
   CHARACTER ANIMATION V4
   Lightweight CSS only — no impact on login logic
   ========================================================= */

.detective-stage{
    isolation:isolate;
}

/* Full character idle: gentle breathing / floating */
.detective-img{
    transform-origin:50% 86%;
    animation:
        detectiveEntrance .72s cubic-bezier(.18,.88,.28,1.12) both,
        detectiveIdle 4.2s ease-in-out .75s infinite;
    will-change:transform,filter;
}

/* Ground shadow follows the idle movement */
.detective-shadow{
    position:absolute;
    z-index:2;
    left:50%;
    bottom:7px;
    width:178px;
    height:30px;
    border-radius:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.30);
    filter:blur(10px);
    animation:detectiveShadow 4.2s ease-in-out .75s infinite;
}

/* Radar rings pulse independently */
.detective-stage .r1{
    animation:radarPulseOuter 4.6s ease-in-out infinite;
}

.detective-stage .r2{
    animation:radarPulseInner 3.8s ease-in-out .55s infinite;
}

/* XP / Mission HUD gently hover at different rhythms */
.float-card.xp{
    animation:hudFloatA 3.6s ease-in-out .8s infinite;
}

.float-card.mission{
    animation:hudFloatB 4s ease-in-out 1.1s infinite;
}

/* Small ambient sparkles */
.detective-spark{
    position:absolute;
    z-index:9;
    display:block;
    pointer-events:none;
    color:#a9e7ff;
    text-shadow:
        0 0 8px rgba(117,213,255,.9),
        0 0 18px rgba(97,175,255,.6);
    opacity:0;
    user-select:none;
}

.spark-1{
    right:28px;
    top:21%;
    font-size:20px;
    animation:sparkTwinkle 2.8s ease-in-out 1.1s infinite;
}

.spark-2{
    left:20px;
    top:34%;
    color:#ffe187;
    font-size:17px;
    animation:sparkTwinkle 3.3s ease-in-out 1.8s infinite;
}

.spark-3{
    right:54px;
    bottom:21%;
    color:#d0b8ff;
    font-size:13px;
    animation:sparkTwinkle 3.8s ease-in-out 2.35s infinite;
}

/* Give the login card a soft entrance, without changing layout */
.login-card{
    animation:loginCardEntrance .58s ease-out both;
}

/* The main CTA gets a subtle game-like glow */
.login-btn{
    position:relative;
    overflow:hidden;
}

.login-btn:after{
    content:"";
    position:absolute;
    top:-55%;
    left:-38%;
    width:28%;
    height:210%;
    transform:rotate(24deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.48),
        transparent
    );
    animation:buttonShine 4.8s ease-in-out 2.1s infinite;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes detectiveEntrance{
    0%{
        opacity:0;
        transform:translateX(-50%) translateY(34px) scale(.92);
        filter:
            drop-shadow(0 28px 36px rgba(0,0,0,.22))
            blur(2px);
    }
    65%{
        opacity:1;
        transform:translateX(-50%) translateY(-5px) scale(1.018);
    }
    100%{
        opacity:1;
        transform:translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes detectiveIdle{
    0%,100%{
        transform:translateX(-50%) translateY(0) rotate(-.35deg) scale(1);
        filter:
            drop-shadow(0 28px 36px rgba(0,0,0,.40))
            drop-shadow(0 0 28px rgba(65,171,237,.13));
    }
    50%{
        transform:translateX(-50%) translateY(-10px) rotate(.45deg) scale(1.012);
        filter:
            drop-shadow(0 36px 40px rgba(0,0,0,.34))
            drop-shadow(0 0 34px rgba(65,171,237,.20));
    }
}

@keyframes detectiveShadow{
    0%,100%{
        width:178px;
        opacity:.30;
        transform:translateX(-50%) scaleX(1);
    }
    50%{
        width:154px;
        opacity:.20;
        transform:translateX(-50%) scaleX(.92);
    }
}

@keyframes radarPulseOuter{
    0%,100%{
        opacity:.42;
        transform:scale(.98);
    }
    50%{
        opacity:.85;
        transform:scale(1.045);
    }
}

@keyframes radarPulseInner{
    0%,100%{
        opacity:.35;
        transform:scale(1.02);
    }
    50%{
        opacity:.72;
        transform:scale(.965);
    }
}

@keyframes hudFloatA{
    0%,100%{
        transform:translateY(0) rotate(0);
    }
    50%{
        transform:translateY(-8px) rotate(.8deg);
    }
}

@keyframes hudFloatB{
    0%,100%{
        transform:translateY(0) rotate(0);
    }
    50%{
        transform:translateY(7px) rotate(-.7deg);
    }
}

@keyframes sparkTwinkle{
    0%,100%{
        opacity:0;
        transform:translateY(5px) scale(.55) rotate(0deg);
    }
    24%{
        opacity:.92;
    }
    52%{
        opacity:.38;
        transform:translateY(-7px) scale(1.1) rotate(18deg);
    }
    72%{
        opacity:.95;
    }
}

@keyframes loginCardEntrance{
    0%{
        opacity:0;
        transform:translateY(16px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes buttonShine{
    0%,72%,100%{
        left:-38%;
        opacity:0;
    }
    77%{
        opacity:.72;
    }
    88%{
        left:112%;
        opacity:.35;
    }
    90%{
        opacity:0;
    }
}


/* =========================================================
   MOBILE TUNING
   ========================================================= */

@media(max-width:620px){

    .detective-img{
        animation:
            detectiveEntranceMobile .65s cubic-bezier(.18,.88,.28,1.12) both,
            detectiveIdleMobile 4.2s ease-in-out .7s infinite;
    }

    .detective-shadow{
        bottom:3px;
        width:142px;
    }

    .spark-1{
        right:18%;
        top:22%;
    }

    .spark-2{
        left:18%;
        top:38%;
    }

    .spark-3{
        right:22%;
        bottom:20%;
    }

    @keyframes detectiveEntranceMobile{
        0%{
            opacity:0;
            transform:translateX(-50%) translateY(24px) scale(.94);
        }
        100%{
            opacity:1;
            transform:translateX(-50%) translateY(0) scale(1);
        }
    }

    @keyframes detectiveIdleMobile{
        0%,100%{
            transform:translateX(-50%) translateY(0) rotate(-.25deg);
        }
        50%{
            transform:translateX(-50%) translateY(-7px) rotate(.35deg);
        }
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .detective-img,
    .detective-shadow,
    .detective-stage .r1,
    .detective-stage .r2,
    .float-card,
    .detective-spark,
    .login-card,
    .login-btn:after{
        animation:none !important;
    }
}