:root{--blue:#126fe8;--navy:#0a2a57;--light:#f5f8fc;--line:#dfe7f0;--text:#12233d;--muted:#71839a;--green:#22b573;--orange:#ff9f43;--red:#ff5e63;--purple:#7568ff;--shadow:0 10px 30px rgba(17,65,112,.10)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:#f6f8fb}button,input{font:inherit}button{cursor:pointer}a{color:var(--blue);text-decoration:none}.hidden{display:none!important}.muted{color:var(--muted)}.center{text-align:center}.small{font-size:12px}
.opening-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#0c4780 0,#062744 55%,#031522 100%);transition:opacity .32s ease,visibility .32s ease}.opening-intro.is-leaving{opacity:0;visibility:hidden}.opening-intro-video{display:block;width:100vw;height:100vh;height:100dvh;object-fit:contain;background:transparent}.intro-brand{position:absolute;z-index:2;left:clamp(16px,3vw,42px);top:clamp(14px,3vh,30px);display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(2,24,44,.65);color:white;backdrop-filter:blur(10px)}.intro-brand b,.intro-brand small{display:block}.intro-brand b{font-size:19px}.intro-brand small{margin-top:2px;font-size:10px;opacity:.8}.intro-actions{position:absolute;z-index:2;right:clamp(16px,3vw,42px);bottom:clamp(58px,8vh,84px);display:flex;align-items:center;gap:18px;max-width:calc(100vw - 32px);padding:13px 14px 13px 20px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(2,24,44,.76);color:white;box-shadow:0 16px 50px rgba(0,0,0,.28);backdrop-filter:blur(12px);transition:.25s ease}.intro-actions.is-ready{border-color:#70d4ff;background:rgba(5,56,97,.94);box-shadow:0 0 0 4px rgba(53,181,255,.18),0 18px 55px rgba(0,0,0,.36);transform:translateY(-4px)}.intro-actions p{display:grid;gap:3px;margin:0}.intro-actions p b{font-size:14px}.intro-actions p span{font-size:11px;opacity:.78}.intro-actions button{flex:none;border:0;border-radius:12px;padding:12px 17px;background:#fff;color:#075fae;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.18)}.intro-actions.is-ready button{background:#20a8ef;color:#fff}.intro-actions button:hover{background:#dff1ff}.intro-actions.is-ready button:hover{background:#078ed4}.intro-actions button:focus-visible{outline:3px solid #72c9ff;outline-offset:3px}body.intro-active{overflow:hidden}
.student-opening .intro-actions{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px)}.student-opening .intro-actions.is-ready{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-4px)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1.45fr;background:white}.login-hero{position:relative;overflow:hidden;padding:36px;background:linear-gradient(160deg,#126fe8,#0d55bb 70%,#07428f);color:white}.brand-white{display:flex;gap:14px;align-items:center}.brand-white h1{margin:0;font-size:28px}.brand-white p{margin:2px 0 0;font-size:12px}.shield-logo{width:50px;height:54px;display:grid;place-items:center;background:white;color:var(--blue);font-weight:900;font-size:24px;clip-path:polygon(50% 0,92% 14%,84% 70%,50% 100%,16% 70%,8% 14%)}.shield-logo.mini{width:32px;height:35px;font-size:15px}.hero-character{height:calc(100% - 80px);display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;justify-items:center;gap:16px;position:relative;padding:20px 0 30px}.login-video-card{width:min(570px,94%);overflow:hidden;border:1px solid rgba(255,255,255,.3);border-radius:22px;background:#062a50;box-shadow:0 22px 55px rgba(0,24,71,.35)}.login-opening-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#031d38}.login-video-caption{display:grid;gap:3px;padding:13px 18px;background:linear-gradient(135deg,rgba(5,42,80,.98),rgba(7,75,139,.98));color:#eaf7ff}.login-video-caption b{font-size:15px}.login-video-caption span{font-size:12px;opacity:.9}.login-video-mobile{display:none}.ari-speech{position:relative;z-index:4;width:min(460px,90%);background:#fff;color:#234869;border-radius:18px;padding:15px 20px;text-align:center;font-size:13px;line-height:1.5;box-shadow:0 14px 35px rgba(0,28,76,.22);animation:speech-pop .55s ease-out both}.ari-speech:before{content:"";position:absolute;left:50%;top:-12px;transform:translateX(-50%);border-width:0 11px 13px;border-style:solid;border-color:transparent transparent #fff}.ari-speech span{display:block;color:#0871d7;font-size:16px;font-weight:900;margin-bottom:3px}.ari-speech button{display:inline-block;margin-top:9px;border:0;border-radius:16px;padding:7px 12px;background:#e7f3ff;color:#075fae;font-size:11px;font-weight:800}.ari-speech button:hover{background:#cfe8ff}.login-panel{padding:70px clamp(36px,10vw,150px);display:flex;flex-direction:column;justify-content:center}.login-panel h2{text-align:center;font-size:30px;margin:0}.login-panel h2 span{color:var(--blue)}.mobile-brand{display:none}.login-panel label{display:block;font-size:12px;font-weight:700;margin:15px 0 7px}.login-panel input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:9px;outline:none}.password-field{position:relative}.password-field button{position:absolute;right:8px;top:6px;border:0;background:transparent}.login-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:14px 0}.check{display:flex!important;align-items:center;gap:6px;margin:0!important}.check input{width:auto}.btn{border:0;border-radius:9px;padding:11px 15px;font-weight:800}.primary{background:var(--blue);color:white}.outline{background:white;border:1px solid var(--line);color:var(--text)}.wide{width:100%}.or{text-align:center;color:var(--muted);font-size:11px;margin:18px 0}.socials{display:grid;grid-template-columns:1fr 1fr;gap:10px}@keyframes float{50%{transform:translateY(-10px)}}@keyframes pulse{50%{transform:scale(1.08)}}@keyframes shield-breathe{50%{transform:translate(-50%,-50%) scale(1.05);opacity:.28}}@keyframes ari-float{50%{transform:translateY(-10px) rotate(-.6deg)}}@keyframes bit-hover{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes ari-speaking{to{transform:translateY(-7px) rotate(1deg) scale(1.015)}}@keyframes speech-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.sidebar{position:fixed;inset:0 auto 0 0;width:220px;background:linear-gradient(180deg,#0d4d9e,#082e63);color:white;padding:22px 15px;z-index:20;display:flex;flex-direction:column}.brand-side{display:flex;align-items:center;gap:10px;padding:0 5px 22px;border-bottom:1px solid rgba(255,255,255,.12)}.brand-side b{font-size:17px}.brand-side small{display:block;font-size:9px;opacity:.8;margin-top:3px}.sidebar nav{display:grid;gap:5px;margin-top:18px}.sidebar nav button,.logout{border:0;background:transparent;color:rgba(255,255,255,.82);text-align:left;border-radius:8px;padding:11px 12px;font-size:13px}.sidebar nav button:hover,.sidebar nav button.active{background:linear-gradient(90deg,#1680f7,#0f66d5);color:white}.sidebar nav button span{margin-left:9px}.logout{margin-top:auto}.content{margin-left:220px;min-height:100vh}.topbar{height:68px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:10}.top-actions{display:flex;align-items:center;gap:14px}.bell{position:relative;border:0;background:white;font-size:18px}.notif-dot{position:absolute;width:6px;height:6px;background:var(--red);border-radius:50%;right:2px;top:2px}.user-chip{display:flex;align-items:center;gap:8px;cursor:pointer}.user-chip small{display:block;color:var(--muted);font-size:9px}.avatar-sm{width:34px;height:34px;border-radius:50%;background:#e9f2ff;display:grid;place-items:center;font-size:20px}.menu-btn{display:none;border:0;background:white;font-size:21px}.page{padding:28px 30px 50px;max-width:1280px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.page-head h2{margin:0;font-size:24px}.page-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.hero-banner{background:linear-gradient(135deg,#116ee5,#0e55b7);border-radius:16px;padding:28px;color:white;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.hero-banner h1{font-size:27px;margin:0 0 8px}.hero-mini-char{font-size:75px}.quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}.quick-card{background:white;border:1px solid var(--line);border-radius:12px;padding:17px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:.2s}.quick-card:hover{transform:translateY(-3px)}.quick-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin:auto auto 9px;font-size:22px}.quick-card b{font-size:12px;display:block}.quick-card small{font-size:10px;color:var(--muted)}.blue{background:#e8f2ff;color:#1672e8}.green{background:#e9fbf2;color:#22a96f}.orange{background:#fff3e8;color:#f28b2b}.purple{background:#f0edff;color:#6657f5}.cyan{background:#e9fbfd;color:#21a6b8}.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}.panel{background:white;border:1px solid var(--line);border-radius:13px;padding:18px}.panel h3{margin:0 0 12px;font-size:14px}.progress-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px}.progress{height:8px;border-radius:20px;background:#e8eef5;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#42a5ff)}.achievement{display:flex;align-items:center;gap:10px}.badge-icon{width:46px;height:46px;border-radius:50%;background:#fff4d9;display:grid;place-items:center;font-size:24px}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.module-card{background:white;border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:.2s}.module-card:hover{transform:translateY(-3px)}.module-art{height:95px;border-radius:10px;background:linear-gradient(135deg,#edf6ff,#dbeeff);display:grid;place-items:center;font-size:48px}.module-card small{color:var(--muted);font-size:9px}.module-card h3{font-size:14px;margin:8px 0 12px}.status{font-size:9px;font-weight:800}.done{color:var(--green)}.study{color:var(--blue)}.lock{color:var(--muted)}.material-layout{display:grid;grid-template-columns:230px 1fr;gap:15px}.lesson-nav{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.lesson-nav h4{padding:15px;margin:0;background:#f6f9fd}.lesson-nav button{display:block;width:100%;text-align:left;border:0;background:white;padding:12px 15px;font-size:11px;border-top:1px solid #eef2f6}.lesson-nav button.active{background:#eaf4ff;color:var(--blue);font-weight:800}.lesson{background:white;border:1px solid var(--line);border-radius:12px;padding:24px}.lesson h2{font-size:20px;margin-top:0}.lesson p{font-size:13px;line-height:1.8;color:#42556c}.lesson-visual{height:210px;border-radius:15px;background:linear-gradient(135deg,#e5f3ff,#f5fbff);display:flex;align-items:center;justify-content:center;gap:28px;font-size:72px;margin:20px 0}.quote{background:#edf6ff;border-left:4px solid var(--blue);padding:14px;border-radius:8px;color:#2f6096;font-size:12px;font-weight:700}.lesson-actions{display:flex;justify-content:space-between;margin-top:22px}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.game-card{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}.game-banner{height:130px;display:grid;place-items:center;font-size:65px}.blue-bg{background:linear-gradient(135deg,#dff1ff,#c8e6ff)}.red-bg{background:linear-gradient(135deg,#ffe9ea,#ffd2d5)}.yellow-bg{background:linear-gradient(135deg,#fff4cf,#ffe8a3)}.green-bg{background:linear-gradient(135deg,#e6faee,#c8f1d8)}.game-body{padding:16px}.game-body h3{font-size:14px;margin:0 0 6px}.game-body p{font-size:11px;color:var(--muted);line-height:1.5;min-height:48px}.game-screen{background:linear-gradient(#66c8ff 0 63%,#3d9b4e 63%);border-radius:16px;overflow:hidden;position:relative;height:390px;border:5px solid #0a3f75}.cloud{position:absolute;font-size:48px;animation:cloud 8s linear infinite}.c1{top:20px;left:-40px}.c2{top:70px;left:55%;animation-duration:11s}.platform{position:absolute;height:32px;background:#9c673b;border-top:9px solid #62b64e;border-radius:7px}.p1{left:0;bottom:54px;width:25%}.p2{left:34%;bottom:110px;width:18%}.p3{left:60%;bottom:165px;width:18%}.p4{right:0;bottom:90px;width:17%}.runner{position:absolute;font-size:48px;left:8%;bottom:83px;transition:.35s}.coin{position:absolute;font-size:27px;animation:bob 1.3s infinite}.coin.a{left:39%;bottom:160px}.coin.b{left:67%;bottom:215px}.coin.c{right:8%;bottom:140px}.hazard{position:absolute;right:23%;bottom:60px;font-size:42px}.game-hud{position:absolute;top:12px;right:12px;display:flex;gap:10px}.hud-pill{background:#0b477f;color:white;border-radius:20px;padding:7px 10px;font-size:12px;font-weight:800}.game-controls{display:flex;justify-content:space-between;background:#073767;padding:14px}.game-controls button{width:48px;height:48px;border-radius:50%;border:2px solid white;background:#0d63b6;color:white;font-size:22px}.mission-box{background:white;border-radius:8px;padding:8px 12px;font-size:10px;width:310px}@keyframes cloud{to{transform:translateX(780px)}}@keyframes bob{50%{transform:translateY(-7px)}}
.quiz-card{max-width:800px;margin:auto;background:white;border:1px solid var(--line);border-radius:14px;padding:25px}.quiz-top{display:flex;justify-content:space-between;font-size:12px}.question{font-size:18px;font-weight:800;margin:20px 0}.options{display:grid;gap:10px}.option{border:1px solid var(--line);background:white;padding:13px;border-radius:9px;text-align:left}.option:hover{border-color:#8ac1ff;background:#f5faff}.option.correct{background:#e9fbf2;border-color:#60d39e}.option.wrong{background:#fff0f0;border-color:#ff8f92}.quiz-footer{display:flex;justify-content:flex-end;margin-top:20px}.result-card{max-width:620px;margin:auto;background:white;border:1px solid var(--line);border-radius:15px;padding:35px;text-align:center}.trophy{font-size:72px}.score-big{font-size:42px;font-weight:900;color:var(--green);margin:10px}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}.profile-head{background:white;border:1px solid var(--line);border-radius:15px;padding:22px;display:flex;gap:18px;align-items:center}.avatar-lg{font-size:60px;width:90px;height:90px;border-radius:50%;background:#e9f2ff;display:grid;place-items:center}.profile-head h2{margin:0}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.stat-card{background:white;border:1px solid var(--line);border-radius:11px;padding:15px;text-align:center}.stat-card b{font-size:21px;color:var(--blue)}.stat-card small{display:block;color:var(--muted);font-size:9px}.badge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.badge-card{text-align:center;background:white;border:1px solid var(--line);border-radius:12px;padding:14px}.badge-emoji{font-size:38px}.badge-card b{font-size:10px;display:block}.ranking-table{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.rank-row{display:grid;grid-template-columns:70px 1fr 120px 120px;align-items:center;padding:13px 16px;border-bottom:1px solid #edf1f5}.rank-row.header{background:#f5f8fc;font-size:11px;font-weight:800}.rank-user{display:flex;align-items:center;gap:9px}.certificate{background:white;max-width:880px;margin:auto;border:10px solid var(--navy);outline:3px solid var(--orange);outline-offset:-18px;padding:48px;text-align:center}.certificate h1{font-family:Georgia,serif;font-size:40px;color:var(--navy)}.certificate h2{font-size:29px}.certificate p{color:#52677f}.cert-badge{font-size:48px}.cert-footer{display:flex;justify-content:space-between;margin-top:40px;font-size:11px}.modal{position:fixed;inset:0;background:rgba(3,19,39,.65);display:grid;place-items:center;z-index:99;padding:20px}.modal-card{width:min(680px,100%);background:white;border-radius:16px;padding:26px;position:relative}.modal-close{position:absolute;right:13px;top:13px;border:0;background:#f0f4f8;border-radius:50%;width:34px;height:34px}.toast{position:fixed;right:20px;bottom:20px;background:var(--navy);color:white;padding:12px 16px;border-radius:9px;z-index:120;opacity:0;transform:translateY(10px);transition:.3s;font-size:12px}.toast.show{opacity:1;transform:none}
@media(min-width:951px) and (max-width:1200px){.login-hero{padding:28px}.character-stage{height:min(48vh,400px)}.ari-welcome{width:min(230px,58%)}.ari-speech{width:min(380px,92%);font-size:12px}.hero-shield{font-size:clamp(250px,32vw,350px)}}
@media(min-width:951px){.login-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}.login-hero{min-height:100vh;display:flex;flex-direction:column;padding:clamp(24px,3vw,44px)}.hero-character{flex:1;width:100%;height:auto;grid-template-rows:minmax(0,1fr) auto;padding:clamp(18px,3vh,32px) 0 clamp(12px,2vh,24px)}.login-video-card{width:min(620px,96%)}.ari-speech{width:min(520px,90%)}.login-panel{min-width:0;min-height:100vh;padding:50px clamp(42px,7vw,110px)}}
@media(max-width:950px){.login-shell{grid-template-columns:1fr}.login-hero{display:none}.login-panel{padding:32px 25px;justify-content:flex-start;max-width:680px;width:100%;margin:auto}.mobile-brand{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:16px}.login-video-mobile{display:block;width:100%;margin:0 auto 24px;overflow:hidden;border-radius:18px;background:#062a50;box-shadow:0 16px 38px rgba(0,42,91,.18)}.login-video-mobile p{display:grid;gap:2px;margin:0;padding:10px 14px;color:white;background:linear-gradient(135deg,#075fae,#087fd6);font-size:12px}.login-video-mobile p span{opacity:.9}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.content{margin-left:0}.menu-btn{display:block}.quick-grid{grid-template-columns:repeat(2,1fr)}.two-col,.material-layout{grid-template-columns:1fr}.module-grid,.game-grid{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.badge-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.login-panel{padding:20px 15px}.login-panel h2{font-size:26px}.login-video-mobile{border-radius:14px;margin-bottom:20px}.module-grid,.game-grid{grid-template-columns:1fr}.page{padding:20px 15px}.rank-row{grid-template-columns:50px 1fr 80px}.rank-row>*:last-child{display:none}}@media(max-height:720px) and (min-width:951px){.login-hero{padding:24px}.hero-character{padding:12px 0 18px;gap:10px}.login-video-card{width:min(490px,90%)}.login-video-caption{padding:9px 14px}.ari-speech{padding:10px 16px}.ari-speech button{margin-top:5px}}
@media(max-width:620px){.intro-brand{left:12px;top:12px;padding:7px 10px}.intro-brand b{font-size:15px}.intro-brand small{display:none}.intro-actions{left:12px;right:12px;bottom:58px;display:grid;gap:10px;padding:12px}.intro-actions p{text-align:center}.intro-actions p span{display:none}.intro-actions button{width:100%;min-height:46px}}

/* V1.1 — Ari + Bit character integration */
.character-hero{gap:18px}
.ari-login-character{height:min(68vh,520px);max-width:58%;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(0,0,0,.18));animation:float 3s ease-in-out infinite}
.bit-float{position:absolute;right:7%;top:22%;width:145px;height:145px;border-radius:50%;background:rgba(255,255,255,.13);display:grid;place-items:center;animation:float 2.6s ease-in-out infinite}
.bit-float img{width:135px;height:135px;object-fit:contain}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;object-position:20% 25%}
.hero-banner .character-pair{height:145px;width:280px;object-fit:cover;object-position:center;border-radius:16px;z-index:2;filter:drop-shadow(0 8px 10px rgba(0,0,0,.14))}
.bit-tip{display:flex;align-items:center;gap:12px;background:#edf6ff;border:1px solid #cce3fb;border-radius:12px;padding:12px 14px;margin-top:15px}
.bit-tip img{width:72px;height:72px;object-fit:contain}
.bit-tip b{color:var(--blue);display:block;margin-bottom:3px}.bit-tip p{margin:0;font-size:11px;color:#4c6f93;line-height:1.45}
.character-art{height:125px;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;background:linear-gradient(135deg,#e9f5ff,#f9fcff);border-radius:10px}
.character-art img{height:120px;max-width:95%;object-fit:contain}
.game-character-img{position:absolute;left:5%;bottom:58px;width:90px;height:110px;object-fit:cover;object-position:53% 70%;border-radius:12px;transition:.35s;filter:drop-shadow(0 5px 4px rgba(0,0,0,.18))}
.profile-character{width:100px;height:100px;border-radius:50%;overflow:hidden;background:#e9f2ff}
.profile-character img{width:100%;height:100%;object-fit:cover;object-position:20% 20%}
.result-characters{height:145px;display:flex;justify-content:center;margin-bottom:5px}
.result-characters img{height:145px;max-width:320px;object-fit:cover;object-position:center;border-radius:14px}
.cert-character{display:flex;justify-content:center;align-items:center;gap:12px;margin:10px}
.cert-character img{height:90px;max-width:190px;object-fit:contain}
@media(max-width:950px){.ari-login-character{height:430px}.bit-float{right:2%}}

.real-game-wrap{max-width:1050px;margin:auto;border:5px solid #073b75;border-radius:18px;overflow:hidden;box-shadow:0 18px 45px #163f6b33;background:#073b75}.real-game{height:500px;position:relative;overflow:hidden;background:linear-gradient(#52bdf4 0 57%,#77c968 57%,#55a84b 100%)}.sun{position:absolute;right:7%;top:9%;font-size:52px}.rc1{top:50px;left:7%;animation:cloud 18s linear infinite}.rc2{top:105px;left:48%;animation:cloud 23s linear infinite}.city{position:absolute;bottom:43%;height:120px;color:#1c67a44d;font-size:88px;letter-spacing:12px;white-space:nowrap}.game-top-left,.game-top-right{position:absolute;z-index:8;top:13px;display:flex;gap:7px}.game-top-left{left:14px}.game-top-right{right:14px}.game-top-left b,.game-top-left span,.game-top-right b{background:#083e79;color:white;border:2px solid white;border-radius:20px;padding:7px 10px;font-size:10px}.game-top-right i{font-style:normal}.bit-guide{position:absolute;right:15px;top:58px;z-index:8;width:285px;min-height:76px;background:#fffffff2;border:2px solid #8ac8fa;border-radius:14px;padding:10px 12px 10px 76px;color:#174e80;font-size:10px;font-weight:800}.bit-guide img{position:absolute;left:-2px;bottom:-3px;width:76px;height:76px;object-fit:contain}.ground{position:absolute;bottom:0;width:100%;height:52px;background:repeating-linear-gradient(90deg,#805331 0 35px,#895b35 35px 70px);border-top:14px solid #55ad42}.gp{position:absolute;height:36px;background:#805331;border-top:10px solid #64bc4a;border-radius:6px}.gp1{left:20%;bottom:110px;width:13%}.gp2{left:42%;bottom:165px;width:14%}.gp3{left:64%;bottom:112px;width:12%}.gp4{left:80%;bottom:185px;width:13%}.ari-player{position:absolute;left:5%;bottom:52px;width:72px;height:95px;z-index:7;transition:left .12s linear,bottom .24s ease;overflow:hidden;filter:drop-shadow(0 5px 3px #0004)}.ari-player div{width:100%;height:100%;background:url("assets/ari_poses.png") center/auto 100% no-repeat}.ari-player.left{transform:scaleX(-1)}.ari-player.run{animation:runbob .2s alternate infinite}.ari-player.hurt{animation:hurt .15s 3}@keyframes runbob{to{margin-bottom:5px}}@keyframes hurt{50%{opacity:.25}}.item,.enemy{position:absolute;z-index:6;font-size:29px;text-align:center;animation:bob 1.25s ease-in-out infinite;transition:.25s;filter:drop-shadow(0 3px 2px #0003)}.item small,.enemy small{display:block;background:white;color:#174e80;font-size:7px;padding:2px 4px;border-radius:5px;font-weight:900}.enemy small{color:#a21f2a}.item.taken{opacity:0;transform:scale(1.8)}.enemy.hit{opacity:.3}.i1{left:22%;bottom:158px}.i2{left:44%;bottom:213px}.i3{left:66%;bottom:160px}.i4{left:82%;bottom:233px}.i5{left:88%;bottom:80px}.e1{left:34%;bottom:55px}.e2{left:56%;bottom:55px}.e3{left:75%;bottom:55px}.flag{position:absolute;right:2%;bottom:48px;font-size:62px}.game-msg{position:absolute;z-index:10;left:50%;top:43%;transform:translate(-50%,-50%);background:#18a969;color:white;border:3px solid white;border-radius:25px;padding:11px 19px;font-weight:900}.game-msg.bad{background:#e74d56}.game-console{display:grid;grid-template-columns:160px 1fr 70px;gap:15px;align-items:center;background:linear-gradient(#0b4c8d,#07366b);padding:13px 18px;color:white}.game-console button{width:52px;height:52px;border-radius:50%;border:3px solid white;background:#126cc2;color:white;font-size:20px;font-weight:900;margin-right:5px}.mission{text-align:center;font-size:9px}.mission .progress{margin:5px auto;width:90%;background:#052b54}.mission .progress i{background:linear-gradient(90deg,#ffd33d,#ff9f22);width:0}.game-help{display:flex;justify-content:space-between;align-items:center;background:#f4f8fc;padding:8px 14px;font-size:10px;color:#57708b}.game-result{text-align:center}.game-result img{width:300px;max-width:100%;border-radius:14px}.game-result .stars{font-size:38px}.game-result h1{color:#126fe8}.game-result .edu{text-align:left;background:#edf6ff;border-left:4px solid #126fe8;padding:12px;border-radius:8px;margin:15px 0;font-size:11px}

/* V1.3 — Phaser integration */
.phaser-shell{max-width:1020px;margin:auto;background:#073b75;border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(12,54,96,.22);border:4px solid #073b75}
.phaser-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(90deg,#0b4b8a,#0a6dc0);color:#fff}
.phaser-toolbar>div:first-child{display:flex;flex-direction:column;gap:2px}.phaser-toolbar b{font-size:13px}.phaser-toolbar span{font-size:10px;opacity:.92}
.phaser-status{display:flex;gap:8px}.phaser-status span{background:#073b75;border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:6px 10px;font-size:11px;opacity:1}
.phaser-game{background:#59b9ed;display:flex;justify-content:center;align-items:center;min-height:480px}.phaser-game canvas{max-width:100%;height:auto!important;display:block}
.phaser-stage{position:relative;background:#59b9ed}.phaser-overlay{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(3,28,58,.78);backdrop-filter:blur(3px)}.phaser-overlay.hidden{display:none}.phaser-end-card{width:min(420px,86%);padding:28px;text-align:center;background:#fff;border:4px solid #fff;border-radius:22px;box-shadow:0 20px 60px #001c3c99}.phaser-end-card.lose{border-color:#ef5362}.phaser-end-card.win{border-color:#27b779}.phaser-end-card h2{font-size:30px;margin:5px 0 8px;color:#0a477e}.phaser-end-card.lose h2{color:#c72e42}.phaser-end-card p{margin:0 0 18px;color:#526a80}.phaser-end-card strong{display:block;font-size:28px;color:#1570c9;margin:12px}.phaser-end-card .end-icon{font-size:54px}.phaser-end-card .btn{margin:5px}
.phaser-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 14px;background:#f5f9fd}
.phaser-touch-controls{display:grid;grid-template-columns:repeat(3,minmax(72px,120px));justify-content:center;gap:14px;padding:14px;background:linear-gradient(180deg,#0a4c88,#073766);touch-action:none;user-select:none;-webkit-user-select:none}.phaser-touch-controls button{height:64px;border:2px solid #ffffffc7;border-radius:17px;background:linear-gradient(180deg,#2089e8,#0b64bb);color:#fff;font-size:25px;font-weight:900;box-shadow:0 6px 0 #05305d,0 8px 18px #001f4270;touch-action:none;-webkit-tap-highlight-color:transparent}.phaser-touch-controls button span{display:block;margin-top:2px;font-size:9px;letter-spacing:.5px}.phaser-touch-controls button.jump{background:linear-gradient(180deg,#24b889,#11855f)}.phaser-touch-controls button.pressed{transform:translateY(5px);box-shadow:0 1px 0 #05305d;background:#064e94}.phaser-touch-controls button.jump.pressed{background:#096747}
.bit-panel{display:flex;align-items:center;gap:10px}.bit-panel img{width:64px;height:64px;object-fit:contain}.bit-panel div{display:flex;flex-direction:column;gap:3px}.bit-panel b{font-size:11px;color:#0a5aa8}.bit-panel span{font-size:10px;color:#5d7187;line-height:1.35}
@media(max-width:950px),(pointer:coarse){.phaser-touch-controls{display:grid}.phaser-stage,.phaser-game,.phaser-game canvas{touch-action:none}.phaser-game{min-height:0}.phaser-bottom{align-items:flex-start;flex-direction:column}.phaser-bottom>.btn{width:100%;min-height:48px}}
@media(max-width:720px){.phaser-toolbar{align-items:flex-start;gap:10px;flex-direction:column}.phaser-status{width:100%;justify-content:space-between;gap:5px}.phaser-status span{padding:6px 8px}.phaser-touch-controls{grid-template-columns:repeat(3,minmax(68px,1fr));gap:9px;padding:11px}.phaser-touch-controls button{height:60px}.phaser-bottom{align-items:flex-start;flex-direction:column}.phaser-game{min-height:0}}

/* Tombol keluar yang mudah ditemukan dari halaman Beranda */
.dashboard-heading{position:relative}.dashboard-heading>.page-head{padding-right:165px}.home-logout{position:absolute;right:0;top:0;display:flex;align-items:center;gap:10px;border:1px solid #ffd0d2;background:#fff5f5;color:#bd2530;border-radius:11px;padding:9px 13px;cursor:pointer;transition:.2s;text-align:left}.home-logout>span:first-child{font-size:22px}.home-logout b,.home-logout small{display:block}.home-logout b{font-size:12px}.home-logout small{font-size:9px;margin-top:2px;color:#9c5c61}.home-logout:hover{background:#ffe9ea;border-color:#ff9ba0;transform:translateY(-1px)}.home-logout:focus-visible{outline:3px solid rgba(255,94,99,.25);outline-offset:2px}@media(max-width:620px){.dashboard-heading>.page-head{padding-right:0}.home-logout{position:static;width:100%;justify-content:center;margin:-8px 0 16px}}

/* V2 — kuis bertingkat */
.quiz-v2-summary{background:linear-gradient(120deg,#0b4c8d,#1681d8);color:#fff;border-radius:16px;padding:18px 22px;margin-bottom:20px}.quiz-v2-summary>div:first-child{display:flex;justify-content:space-between;gap:15px;margin-bottom:10px}.quiz-v2-summary b{font-size:17px}.quiz-v2-summary span{font-size:11px}.quiz-v2-summary .progress{background:#ffffff35}.quiz-v2-summary .progress i{background:#ffd33d}.quiz-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.quiz-level-card{position:relative;background:#fff;border-radius:16px;padding:20px;border-top:6px solid var(--level-color);box-shadow:0 8px 25px #163f6b18}.quiz-level-card.locked{filter:grayscale(.85);opacity:.67}.quiz-level-card .level-number{font-size:36px;margin-bottom:8px}.quiz-level-card small{font-weight:900;color:var(--level-color)}.quiz-level-card h3{margin:5px 0 7px;color:#173e67}.quiz-level-card p{min-height:45px;font-size:11px;color:#61758a;line-height:1.45}.level-meta{display:flex;justify-content:space-between;gap:8px;margin:13px 0;font-size:10px;color:#668099}.level-meta b{color:var(--level-color)}.quiz-master{margin-top:20px;display:flex;align-items:center;gap:16px;background:#e8fff7;border:2px solid #5bd0a8;border-radius:16px;padding:18px}.quiz-master>span{font-size:42px}.quiz-master h3,.quiz-master p{margin:2px}.quiz-v2-play{max-width:790px;margin:auto}.quiz-level-head{display:flex;align-items:center;justify-content:space-between;background:var(--level-color);color:#fff;padding:12px 16px;border-radius:14px 14px 0 0}.quiz-level-head>div{display:flex;flex-direction:column}.quiz-level-head small{font-size:9px}.quiz-level-head b{font-size:14px}.quiz-level-head>span{font-weight:900;background:#ffffff24;border:1px solid #ffffff99;border-radius:18px;padding:7px 10px}.quiz-back{border:0;background:#ffffff20;color:#fff;border-radius:8px;padding:8px;cursor:pointer}.quiz-v2-play>.progress{margin:0;border-radius:0;height:7px}.quiz-card.v2{border-radius:0 0 16px 16px;margin:0;max-width:none}.question-count{color:#6b8096;font-size:10px;font-weight:800;margin-bottom:8px}.quiz-card.v2 .option{display:flex;gap:12px;align-items:center;text-align:left}.quiz-card.v2 .option>span{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#e8f2fc;color:#1465ad;font-weight:900}.quiz-card.v2 .option.correct>span{background:#21a66f;color:#fff}.quiz-card.v2 .option.wrong>span{background:#e84d60;color:#fff}.quiz-explanation{display:flex;flex-direction:column;gap:4px;background:#edf7ff;border-left:4px solid #1975c8;border-radius:7px;padding:11px 13px;margin:12px 0;font-size:11px;color:#46637f}.quiz-explanation.hidden{display:none}.quiz-v2-result{max-width:650px;margin:auto;text-align:center;background:#fff;border-radius:20px;padding:28px;box-shadow:0 15px 40px #16466f20;border-top:7px solid #20a873}.quiz-v2-result.retry{border-color:#e58a30}.result-symbol{font-size:55px}.score-ring{width:132px;height:132px;border:10px solid #d8f3e8;border-top-color:#20a873;border-radius:50%;display:flex;flex-direction:column;justify-content:center;margin:18px auto}.score-ring b{font-size:36px;color:#116a4c}.score-ring span{font-size:11px}.result-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.result-stats span{background:#f1f6fa;border-radius:18px;padding:8px 12px;font-size:10px}.result-message{color:#60758a}.final-complete{margin-top:18px;padding:12px;background:#fff4c5;border-radius:10px;font-weight:900;color:#805900}.quiz-v2-result .btn{margin:5px}@media(max-width:900px){.quiz-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.quiz-level-grid{grid-template-columns:1fr}.quiz-level-head{gap:7px}.quiz-back{font-size:9px}.result-stats{flex-direction:column}}