*{box-sizing:border-box}
:root{
 --navy:#082b55;--navy2:#0d3c74;--blue:#1477c9;--sky:#eaf4fc;
 --green:#3c9d25;--orange:#ec8610;--yellow:#f4bc18;--text:#13233a;
 --muted:#647184;--line:#d9e1ea;--card:#fff;--bg:#edf3f8
}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,"Noto Sans Thai",sans-serif;color:var(--text);background:var(--bg)}
button,input{font:inherit}
a{text-decoration:none;color:inherit}
.hero-header{height:164px;position:relative;overflow:hidden;background:linear-gradient(102deg,#fff9ec 0 30%,#cbd6df 30% 100%);border-bottom:1px solid #71869a;display:flex;align-items:flex-start;padding:19px 31px}
.brand{z-index:3;display:flex;gap:16px;align-items:center}
.brand-mark{width:74px;height:74px;border:5px solid var(--navy);border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:25px;color:var(--navy);background:#f5bd1b;box-shadow:inset 0 0 0 5px #fff}
.brand h1{margin:0;color:#102f59;font-size:33px;line-height:1.04;letter-spacing:.7px}
.brand h1 span{display:block;color:#e65e15}
.brand p{margin:8px 0;color:#324e6d;font-size:17px}
.warehouse-illustration{position:absolute;left:29%;right:17%;top:0;height:100%;background:linear-gradient(#9eadb9 0 72%,#7f8a91 72%);border-left:5px solid #596d7c;overflow:hidden}
.rack{position:absolute;left:7%;top:8px;width:53%;height:124px;border:7px solid #263d4e;background:repeating-linear-gradient(to bottom,transparent 0 34px,#263d4e 34px 40px),repeating-linear-gradient(to right,#c28238 0 55px,#8b572e 55px 59px)}
.rack:before,.rack:after{content:"";position:absolute;top:4px;width:42px;height:28px;background:#bd8041;box-shadow:80px 0 #c99552,160px 0 #b77837,240px 0 #d0a061,20px 40px #c28a4d,120px 40px #a87037,220px 40px #c99451}
.rack:before{left:10px}.rack:after{left:35px;top:78px}
.forklift,.worker,.boxes,.truck{position:absolute;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.forklift{font-size:64px;left:4%;bottom:5px}.worker{font-size:39px;left:55%;bottom:12px}.boxes{font-size:35px;left:41%;bottom:11px}.truck{font-size:78px;right:2%;bottom:-3px}
.lang-toggle{z-index:4;margin-left:auto;display:flex;background:#fff;border-radius:8px;box-shadow:0 4px 12px #0003;overflow:hidden;margin-top:4px}
.lang-toggle a{padding:16px 18px;font-weight:800;font-size:18px}
.lang-toggle a.active{background:var(--navy);color:#fff}
.main-nav{height:70px;background:linear-gradient(90deg,#09284f,#08396d);display:flex;padding-left:28px;color:#fff;border-bottom:2px solid #78a1c5;box-shadow:0 3px 7px #0002}
.main-nav a{min-width:178px;padding:10px 24px;display:flex;gap:10px;align-items:center;justify-content:center;font-weight:700;border-right:1px solid #31577e}
.main-nav a span{font-size:27px}.main-nav a.active{background:#1373bd;box-shadow:inset 0 -4px #5eb5e8}
.dashboard-shell{max-width:1540px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:23px;padding:14px 26px 8px}
.section-ribbon{width:540px;max-width:100%;background:linear-gradient(105deg,#18375e 0 89%,transparent 89%);border-left:13px solid #47a91a;color:#fff;padding:10px 47px;margin-bottom:13px;display:flex;flex-direction:column}
.section-ribbon strong{font-size:25px}.section-ribbon span{font-size:18px;font-weight:800}
.featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.featured-card{position:relative;background:#fff;border:4px solid;border-radius:13px;overflow:hidden;box-shadow:0 4px 11px #0002;display:flex;flex-direction:column}
.featured-card.green{border-color:#398b24}.featured-card.orange{border-color:#df8412}.featured-card.blue{border-color:#1976b5}
.new-badge{position:absolute;z-index:3;left:-1px;top:-1px;padding:9px 12px;color:#fff;background:#2fa816;border-radius:0 0 12px 0;font-weight:900;font-size:18px}
.clock-badge{position:absolute;z-index:3;right:7px;top:6px;background:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:22px;box-shadow:0 2px 5px #0004}
.game-scene{height:174px;position:relative;overflow:hidden;background:linear-gradient(#728494 0 20%,#b7a98e 20%);border-bottom:1px solid #aaa}
.scene-rack{position:absolute;left:6%;right:7%;top:10px;height:103px;border:5px solid #334453;background:repeating-linear-gradient(to right,#a96d30 0 40px,#395164 40px 45px),repeating-linear-gradient(to bottom,transparent 0 28px,#304859 28px 33px)}
.scene-floor{position:absolute;inset:auto 0 0;height:58px;background:linear-gradient(20deg,#9b9182,#d1c5b0)}
.scene-icon{position:absolute;right:20%;bottom:18px;font-size:58px;filter:drop-shadow(2px 4px 2px #0005)}
.scene-near .scene-floor:after{content:"";position:absolute;left:38%;top:15px;width:73px;height:16px;background:#ed9615;border-radius:50%}
.scene-manpower{background:linear-gradient(#95b8ca,#e3e7df)}.scene-manpower .scene-rack{background:repeating-linear-gradient(to right,#d6e1d8 0 40px,#738d7d 40px 45px);opacity:.7}
.game-copy{text-align:center;padding:8px 14px 5px;min-height:134px}.game-copy h2{font-size:20px;margin:0 0 2px}.game-copy h3{font-size:17px;margin:0}.game-copy p{font-size:13px;color:var(--muted);margin:7px 0;line-height:1.35}
.card-score{display:flex;border-top:1px solid var(--line);padding:8px 13px;justify-content:space-around;font-weight:800;color:#243652}
.card-action{margin:0 11px 10px;padding:9px;border:0;border-radius:8px;text-align:center;color:#fff;background:#1474bf;font-weight:900;cursor:pointer}.card-action.muted{background:#a7adb4;color:#fff}
.locked-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-top:19px}
.locked-card{position:relative;background:#eee;border:3px solid #999;border-radius:12px;overflow:hidden;text-align:center;filter:grayscale(.55);box-shadow:0 3px 8px #0002}
.locked-scene{height:112px;background:linear-gradient(#58636b,#aa9c84);display:grid;place-items:center;font-size:47px}.lock{position:absolute;right:8px;top:7px;background:#fffB;border-radius:50%;padding:8px;z-index:2}
.locked-card h3{font-size:15px;margin:8px 4px 2px}.locked-card p{font-size:13px;margin:0 4px}.locked-card strong{display:block;margin:8px 0 10px;font-size:13px}
.tip-bar{margin-top:22px;background:#fff8df;border:2px solid #ebc762;border-radius:12px;display:flex;align-items:center;gap:14px;padding:9px 18px;min-height:68px}.tip-bar span{font-size:35px}.tip-bar p{margin:0;font-weight:700;color:#203a5f}.tip-bar .coach{margin-left:auto}
.side-column{display:flex;flex-direction:column;gap:12px}.side-card{background:#fff;border-radius:12px;box-shadow:0 3px 9px #0003;overflow:hidden}.side-card h2{background:var(--navy);color:#fff;margin:0;padding:10px 17px;font-size:16px}
.player-profile{display:flex;gap:15px;padding:14px}.avatar{width:86px;height:86px;border-radius:50%;background:#bce1f7;display:grid;place-items:center;font-size:51px}.player-profile strong{font-size:23px}.player-profile p{margin:7px 0;font-size:16px}.player-profile span{font-size:15px}
.score-pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:0 13px}.score-pair div{text-align:center;padding:12px}.score-pair div+div{border-left:1px solid var(--line)}.score-pair span{font-size:25px}.score-pair small{display:block;font-size:11px;font-weight:800}.score-pair strong{font-size:22px;display:block;margin-top:5px}
.profile-start,.logout-link{display:block;margin:0 14px 14px;padding:10px;border:0;border-radius:7px;background:#1374bf;color:#fff;text-align:center;font-weight:800;cursor:pointer;width:calc(100% - 28px)}
.logout-link{width:auto}
.quick-list{list-style:none;padding:4px 15px 10px;margin:0}.quick-list li{display:flex;justify-content:space-between;padding:10px 1px;border-bottom:1px solid var(--line);font-size:13px}.quick-list strong{font-size:16px}
.leaderboard-card ol{list-style:none;padding:4px 15px;margin:0}.leaderboard-card li{display:grid;grid-template-columns:24px 30px 1fr auto;align-items:center;gap:4px;padding:9px 0;border-bottom:1px solid var(--line)}.rank{font-weight:900}.medal{font-size:20px}.view-all{display:block;margin:4px 15px 13px;padding:10px;text-align:center;background:#1474bf;color:#fff;border-radius:6px;font-weight:800}
.site-footer{background:var(--navy);color:#fff;min-height:54px;display:flex;align-items:center;justify-content:space-around;padding:8px 25px;margin-top:4px}
.modal-backdrop{position:fixed;inset:0;z-index:20;background:#07192dbd;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.player-modal{position:relative;width:min(440px,100%);background:#fff;border-radius:18px;padding:28px;box-shadow:0 25px 80px #0008}.modal-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:31px;cursor:pointer}.modal-icon{font-size:45px;text-align:center}.player-modal h2{text-align:center;margin:5px 0 20px}.player-modal label{display:block;font-weight:800;margin:13px 0 6px}.player-modal input{width:100%;padding:12px 14px;border:1px solid #bbc9d6;border-radius:9px}.player-modal form>button{width:100%;padding:12px;margin-top:16px;border:0;border-radius:9px;background:#1474bf;color:#fff;font-weight:900;cursor:pointer}.player-modal .secondary-button{margin-top:8px;background:#e6ebf0;color:#243652}.form-message{min-height:20px;color:#c33;margin-top:9px;text-align:center}
@media(max-width:1100px){.dashboard-shell{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:repeat(3,1fr)}.hero-header{height:140px}.main-nav a{min-width:auto;flex:1}.warehouse-illustration{left:39%;right:0}.lang-toggle{position:absolute;right:15px}}
@media(max-width:780px){.hero-header{height:auto;min-height:145px;padding:16px}.brand h1{font-size:24px}.brand-mark{width:56px;height:56px}.warehouse-illustration{opacity:.28;left:0}.lang-toggle a{padding:10px}.main-nav{height:auto;padding:0;overflow-x:auto}.main-nav a{min-width:110px;flex-direction:column;font-size:12px;padding:8px}.dashboard-shell{padding:12px}.featured-grid{grid-template-columns:1fr}.locked-grid{grid-template-columns:repeat(2,1fr)}.side-column{grid-template-columns:1fr}.site-footer{flex-wrap:wrap;gap:10px}.section-ribbon strong{font-size:20px}}


.leaderboard-card {
    padding: 28px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(18,53,91,.09);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e6ebf1;
    text-align: left;
}

.leaderboard-table th {
    background: #eef5fc;
    color: #12355b;
}


/* ==========================================================
   LEGACY PAGE COMPATIBILITY
   Supports index.php, game-hub.php and shared topbar markup.
   ========================================================== */

.landing-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        linear-gradient(rgba(8,43,85,.86),rgba(8,43,85,.92)),
        repeating-linear-gradient(
            45deg,
            #fff 0,
            #fff 18px,
            #eef4fb 18px,
            #eef4fb 36px
        )
}

.language-switch{
    position:fixed;
    top:22px;
    right:28px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-weight:800
}

.language-switch a{
    opacity:.68
}

.language-switch a.active{
    opacity:1;
    color:#ffcc33
}

.login-card{
    width:min(470px,100%);
    padding:36px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 24px 70px rgba(0,0,0,.26)
}

.login-card h1{
    margin:18px 0 8px;
    color:#10345d
}

.login-card p{
    margin:0 0 26px;
    color:#667085;
    line-height:1.55
}

.game-badge,
.game-icon{
    width:66px;
    height:66px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:#10345d;
    background:#ffcc33;
    font-size:24px;
    font-weight:900
}

.login-card label{
    display:block;
    margin:16px 0 8px;
    color:#1f2937;
    font-weight:800
}

.login-card input{
    width:100%;
    padding:14px 16px;
    border:1px solid #cfd8e3;
    border-radius:12px;
    background:#fff;
    font-size:16px
}

.login-card button{
    width:100%;
    margin-top:22px;
    padding:14px 18px;
    border:0;
    border-radius:12px;
    color:#fff;
    background:#1477c9;
    font-size:16px;
    font-weight:900;
    cursor:pointer
}

.login-card button:disabled{
    opacity:.55;
    cursor:wait
}

.form-message{
    min-height:22px;
    margin-top:12px;
    color:#d94b4b
}

.topbar{
    min-height:72px;
    padding:14px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    color:#fff;
    background:linear-gradient(90deg,#082b55,#0d3c74);
    border-bottom:2px solid #7897b6;
    box-shadow:0 3px 8px rgba(0,0,0,.15)
}

.topbar>div{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px
}

.topbar strong{
    color:#fff;
    font-size:17px
}

.topbar span{
    color:#dbe8f5
}

.topbar nav{
    display:flex;
    align-items:center;
    gap:10px
}

.topbar nav a,
.topbar>a{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:9px 14px;
    border-radius:10px;
    color:#fff;
    background:rgba(255,255,255,.10);
    font-weight:800
}

.topbar nav a:hover,
.topbar>a:hover{
    background:rgba(255,255,255,.18)
}

.hub-page{
    min-height:100vh;
    background:#edf3f8
}

.hub-container{
    width:min(1180px,calc(100% - 32px));
    margin:38px auto 54px
}

.hub-container>h1{
    margin:0 0 24px;
    color:#10345d;
    font-size:clamp(30px,4vw,46px)
}

.game-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
}

.game-card{
    position:relative;
    min-height:330px;
    padding:26px;
    display:flex;
    flex-direction:column;
    border:2px solid transparent;
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 30px rgba(18,53,91,.10);
    overflow:hidden
}

.game-card.active-game{
    border-color:#ffcc33
}

.game-card h2{
    margin:18px 0 8px;
    color:#10345d;
    font-size:24px;
    line-height:1.25
}

.game-card p{
    margin:0 0 20px;
    color:#667085;
    line-height:1.65
}

.play-button{
    width:100%;
    margin-top:auto;
    padding:14px 18px;
    border-radius:12px;
    color:#fff;
    background:#1477c9;
    text-align:center;
    font-weight:900
}

.play-button:hover{
    background:#0f66ad
}

.coming-soon{
    margin-top:auto;
    padding:12px 14px;
    border-radius:11px;
    color:#667085;
    background:#eef2f6;
    text-align:center;
    font-weight:900
}

.empty-state{
    width:min(760px,100%);
    margin:50px auto;
    padding:42px;
    border-radius:20px;
    background:#fff;
    text-align:center;
    box-shadow:0 10px 30px rgba(18,53,91,.09)
}

@media(max-width:900px){
    .game-grid{
        grid-template-columns:1fr
    }

    .topbar{
        align-items:flex-start;
        flex-direction:column
    }

    .topbar nav{
        width:100%;
        flex-wrap:wrap
    }
}

@media(max-width:560px){
    .login-card{
        padding:26px 20px
    }

    .language-switch{
        top:12px;
        right:14px
    }

    .hub-container{
        width:calc(100% - 18px);
        margin-top:24px
    }

    .game-card{
        min-height:300px;
        padding:22px
    }
}