@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900;1000&display=swap');
[hidden]{display:none!important}:root{font-family:Nunito,'Segoe UI',sans-serif;color:#17344b;background:#083d58}*{box-sizing:border-box}html body{padding-top:0!important;min-height:100dvh;max-height:100dvh;overflow:hidden!important}body{margin:0;background:radial-gradient(circle at 15% 10%,#ffdc6a 0 3%,transparent 3.2%),linear-gradient(135deg,#075b78,#0e8c9d 55%,#2457a4)}button,a{font:inherit}.app{height:100dvh;padding:8px clamp(8px,2.4vw,34px) 12px}.topbar{height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:6px 12px;border:2px solid #ffffff55;border-radius:18px;background:#073d59e8;color:#fff;box-shadow:0 7px 20px #062d4266}.eyebrow{font-size:.64rem;letter-spacing:1.4px;font-weight:1000;color:#78eff1}.topbar>strong{font-size:1.08rem}.top-actions{justify-self:end;display:flex;align-items:center;gap:7px}.safety-meter{position:relative;width:78px;height:28px;overflow:hidden;border:2px solid #ffffff85;border-radius:99px;background:#052c43}.safety-meter i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#42d6a4,#ffe05d);transition:width .35s}.safety-meter span{position:absolute;inset:0;display:grid;place-items:center}.sound{width:35px;height:35px;border:1px solid #ffffff66;border-radius:50%;background:#ffffff1f;color:#fff;cursor:pointer}.score{padding:7px 11px;border-radius:99px;background:#ffffff1f;font-size:.83rem;font-weight:1000}
.start-screen{width:min(1280px,100%);height:calc(100dvh - 70px);margin:auto;display:grid;grid-template-columns:.84fr 1.4fr .86fr;align-items:center;gap:16px}.intro>span,.level-heading span{color:#87f5f0;font-size:.64rem;letter-spacing:1.5px;font-weight:1000}.intro h1{margin:6px 0 10px;color:#fff;font-size:clamp(2.45rem,4.7vw,4.8rem);line-height:.92;letter-spacing:-2.5px}.intro h1 em{display:block;color:#ffe35f;font-style:normal}.intro p{max-width:340px;margin:0;color:#e5fbff;font-size:.93rem;font-weight:900;line-height:1.42}.skill-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.skill-pills b{padding:6px 9px;border:1px solid #ffffff55;border-radius:99px;background:#ffffff18;color:#fff;font-size:.66rem}.hero{position:relative;align-self:stretch;min-height:0;margin:14px 0;border:4px solid #fff;border-radius:29px;background:#fff;box-shadow:0 15px 35px #032e4677;overflow:hidden}.hero>img{width:100%;height:100%;display:block;object-fit:cover}.hero:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#032b4c99)}.hero-card{position:absolute;z-index:2;left:7%;right:7%;bottom:14px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ffffff99;border-radius:13px;background:#063b59d9;color:#fff;box-shadow:0 5px 18px #001e35aa}.hero-card i{flex:1;height:3px;border-radius:3px;background:#ffe05d}.hero-card b{font-size:.63rem;letter-spacing:1px}.hero-person{position:absolute;z-index:3;left:15px;top:15px;display:flex;align-items:center;gap:7px;padding:5px 9px 5px 5px;border-radius:99px;background:#fffffff0;box-shadow:0 5px 15px #032b4c55}.hero-person>img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%}.hero-person div{display:flex;flex-direction:column}.hero-person small{color:#16838b;font-size:.45rem;font-weight:1000}.hero-person strong{font-size:.79rem}.levels{display:grid;gap:9px;padding:15px;border:3px solid #ffffff80;border-radius:27px;background:#fffffff2;box-shadow:0 13px 30px #032c465c}.level-heading{display:flex;flex-direction:column}.level-heading span{color:#147b89}.level-heading strong{font-size:1.27rem}.level{min-height:86px;display:grid;grid-template-columns:54px 1fr 25px;align-items:center;gap:7px;padding:8px 10px;border:3px solid #fff;border-radius:18px;color:#17344b;text-align:left;box-shadow:0 6px #143f5524;cursor:pointer;transition:.18s}.level:hover{transform:translateY(-4px)}.level>span{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#ffffffbd;font-size:2rem}.level div{display:flex;flex-direction:column}.level b{font-size:1.03rem}.level small{font-size:.63rem;font-weight:900}.level em{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#17344b;color:#fff;font-style:normal}.easy{background:#a9f1d3}.medium{background:#8de2f0}.hard{background:#ffd36e}.best{text-align:center;color:#6c7d86;font-size:.67rem;font-weight:900}.best b{color:#0d8390}
.game-screen{width:min(1280px,100%);margin:3px auto}.mission-bar{height:39px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff}.mission-bar>button{justify-self:start;padding:6px 10px;border:1px solid #ffffff66;border-radius:99px;background:#ffffff1c;color:#fff;font-size:.69rem;font-weight:1000;cursor:pointer}.progress{display:flex;align-items:center;gap:7px}.progress>span{padding:4px 8px;border-radius:99px;background:#ffe05d;color:#4b3a00;font-size:.66rem;font-weight:1000}.progress strong{font-size:.82rem}.route-dots{display:flex;gap:4px}.route-dots i{width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#0d7085}.route-dots i.done{background:#ffe05d;box-shadow:0 0 8px #ffe05d}.hearts{justify-self:end;font-size:1rem;letter-spacing:2px}.workspace{height:calc(100dvh - 108px);display:grid;grid-template-columns:1.46fr .74fr;gap:12px}.map-panel,.decision-panel{min-height:0;border:4px solid #fff;border-radius:25px;box-shadow:0 10px 28px #03283f77;overflow:hidden}.map-panel{position:relative;background:#c9f7f0}.map-panel>img{width:100%;height:100%;display:block;object-fit:cover}.map-shade{position:absolute;inset:0;background:linear-gradient(90deg,#042a4522,transparent 55%,#042a4520);pointer-events:none}.student{--x:9%;--y:62%;position:absolute;z-index:5;left:var(--x);top:var(--y);width:64px;height:64px;transform:translate(-50%,-72%);border:4px solid #fff;border-radius:50%;background:#073e59;box-shadow:0 6px 16px #00223888;transition:left .55s ease,top .55s ease}.student img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%}.student span{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);padding:2px 7px;border-radius:99px;background:#fff;color:#17344b;font-size:.52rem;font-weight:1000;white-space:nowrap}.student.walk{animation:walk .55s}.danger-zone{--x:50%;--y:50%;position:absolute;z-index:4;left:var(--x);top:var(--y);display:grid;place-items:center;width:100px;height:100px;transform:translate(-50%,-50%);border:7px solid #ff385d;border-radius:50%;background:#ff385d2b;box-shadow:0 0 0 10px #ff385d26,0 0 35px #ff183c;opacity:0;pointer-events:none}.danger-zone span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ff385d;color:#fff;font-size:1.45rem;font-weight:1000}.danger-zone.show{opacity:1;animation:danger 1s infinite}.map-panel.paused>img{filter:saturate(.65) brightness(.78)}.map-label{position:absolute;z-index:3;padding:5px 9px;border:2px solid #fff;border-radius:99px;background:#073e59df;color:#fff;font-size:.58rem;font-weight:1000}.map-label.home{left:2%;top:7%}.map-label.school{right:2%;top:7%}.map-tip{position:absolute;z-index:4;left:50%;bottom:10px;transform:translateX(-50%);max-width:88%;padding:7px 12px;border:2px solid #fff;border-radius:99px;background:#073e59e8;color:#fff;text-align:center;font-size:.66rem;font-weight:1000;white-space:nowrap}.decision-panel{display:flex;flex-direction:column;padding:13px;background:#f9fcff}.situation-head{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:9px;padding:7px;border-radius:17px;background:linear-gradient(120deg,#d9fbf5,#e6f0ff)}.situation-head>span{display:grid;place-items:center;width:56px;height:56px;border:3px solid #fff;border-radius:16px;background:#0d7186;font-size:2.5rem}.situation-head div{display:flex;flex-direction:column}.situation-head small,.question-card>span{color:#0b8790;font-size:.51rem;letter-spacing:1.4px;font-weight:1000}.situation-head strong{font-size:.96rem}.question-card{margin:9px 0 7px;padding:9px;border:2px dashed #6bc5c7;border-radius:14px;background:#effdfb}.question-card p{margin:3px 0 0;font-size:.77rem;font-weight:1000;line-height:1.3}.choices{display:grid;gap:6px}.choices button{min-height:43px;padding:7px 9px;border:2px solid #d7e6e8;border-radius:12px;background:#fff;color:#17344b;text-align:left;font-size:.67rem;font-weight:900;box-shadow:0 3px #cbdcdf;cursor:pointer;transition:.15s}.choices button:hover{transform:translateY(-2px);border-color:#29a9ad}.choices button.correct{border-color:#23bd83;background:#c9f5df;color:#075d3d}.choices button.wrong{border-color:#f34e6f;background:#ffd7df;color:#8a1530}.choices button:disabled{cursor:default}.feedback{min-height:55px;margin-top:auto;padding:8px;border-radius:12px;background:#fff1b8;color:#604900;text-align:center;font-size:.66rem;font-weight:900;line-height:1.25}.feedback.good{background:#c9f4df;color:#0b6343}.feedback.bad{background:#ffd6de;color:#841630}.next{margin-top:7px;padding:10px;border:0;border-radius:13px;background:linear-gradient(100deg,#087f8c,#2ebd8f);color:#fff;font-size:.76rem;font-weight:1000;box-shadow:0 5px #07576a;cursor:pointer}
.result{position:relative;width:min(650px,92%);margin:8vh auto 0;padding:38px 20px;text-align:center;border:4px solid #fff;border-radius:31px;background:#fbffff;box-shadow:0 20px 55px #03263f99;overflow:hidden}.result-icon{display:block;font-size:5rem;animation:float 1.4s infinite alternate}.result>small{color:#0b8790;letter-spacing:2px;font-weight:1000}.result h1{margin:4px;color:#11516b;font-size:2.8rem}.result p{margin:0 auto 18px;max-width:470px;color:#5b7180;font-weight:900}.result p b{color:#ec3f80;font-size:1.3rem}.result-actions{display:flex;justify-content:center;gap:8px}.result-actions button,.result-actions a{padding:11px 16px;border:0;border-radius:12px;background:#0d8090;color:#fff;text-decoration:none;font-weight:1000;cursor:pointer}.result-actions a{background:#315bb2}.confetti i{position:absolute;color:#ffd53f;font-style:normal;font-size:1.4rem;animation:fall 2.2s infinite}.confetti i:nth-child(1){left:8%}.confetti i:nth-child(2){left:28%;color:#ff5f91;animation-delay:.7s}.confetti i:nth-child(3){left:52%;color:#42d6a4}.confetti i:nth-child(4){left:74%;color:#3e73d0;animation-delay:.4s}.confetti i:nth-child(5){left:92%;animation-delay:1s}@keyframes walk{50%{transform:translate(-50%,-82%) scale(1.08)}}@keyframes danger{50%{transform:translate(-50%,-50%) scale(1.12)}}@keyframes float{to{transform:translateY(-10px) rotate(4deg)}}@keyframes fall{from{top:-25px;transform:rotate(0)}to{top:105%;transform:rotate(260deg)}}
@media(max-width:900px){.start-screen{grid-template-columns:.8fr 1.25fr .95fr;gap:9px}.intro h1{font-size:2.5rem}.intro p{font-size:.75rem}.level{min-height:78px}.workspace{grid-template-columns:1.3fr .8fr}.choices button{font-size:.61rem}.question-card p{font-size:.69rem}}
@media(max-width:760px){.app{padding:5px}.topbar{height:46px;padding:4px 7px}.eyebrow{font-size:.42rem}.topbar>strong{font-size:.75rem}.safety-meter{width:44px;height:23px}.sound{width:29px;height:29px}.score{padding:5px 7px;font-size:.61rem}.start-screen{height:calc(100dvh - 55px);grid-template-columns:1fr;grid-template-rows:auto minmax(140px,1fr) auto;gap:4px;padding:3px}.intro{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:2px 7px}.intro>span{grid-column:1/-1;font-size:.43rem}.intro h1{margin:0;font-size:1.6rem;letter-spacing:-1px}.intro h1 em{display:inline}.intro p{font-size:.55rem;line-height:1.18}.skill-pills{display:none}.hero{height:100%;margin:0;border-width:3px;border-radius:17px}.hero-person{left:7px;top:7px;padding:3px 6px 3px 3px}.hero-person>img{width:34px;height:34px}.hero-person small{font-size:.31rem}.hero-person strong{font-size:.5rem}.hero-card{bottom:5px;padding:4px 7px}.hero-card b{font-size:.39rem}.levels{grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-radius:16px}.level-heading,.best{grid-column:1/-1;align-items:center}.level-heading span{font-size:.42rem}.level-heading strong{font-size:.72rem}.level{min-height:67px;display:flex;flex-direction:column;justify-content:center;gap:0;padding:2px;text-align:center}.level>span{width:32px;height:32px;border-radius:10px;font-size:1.35rem}.level b{font-size:.64rem}.level small{font-size:.39rem}.level em{display:none}.best{font-size:.46rem}.mission-bar{height:29px}.mission-bar>button{padding:3px 6px;font-size:.5rem}.progress{gap:4px}.progress>span,.progress strong{font-size:.49rem}.route-dots{display:none}.hearts{font-size:.68rem}.workspace{height:calc(100dvh - 84px);grid-template-columns:1fr;grid-template-rows:minmax(0,1.08fr) minmax(0,.92fr);gap:4px}.map-panel,.decision-panel{border-width:3px;border-radius:15px}.student{width:43px;height:43px;border-width:3px}.student span{bottom:-13px;font-size:.36rem}.danger-zone{width:65px;height:65px;border-width:5px}.danger-zone span{width:23px;height:23px;font-size:.9rem}.map-label{padding:3px 6px;font-size:.4rem}.map-tip{bottom:4px;padding:3px 7px;font-size:.43rem}.decision-panel{padding:5px}.situation-head{grid-template-columns:39px 1fr;padding:3px}.situation-head>span{width:36px;height:36px;border-radius:10px;font-size:1.55rem}.situation-head small{font-size:.35rem}.situation-head strong{font-size:.59rem}.question-card{margin:3px 0;padding:4px}.question-card>span{font-size:.34rem}.question-card p{margin-top:1px;font-size:.5rem;line-height:1.12}.choices{grid-template-columns:repeat(3,1fr);gap:3px}.choices button{min-height:34px;padding:3px 4px;border-radius:8px;font-size:.44rem;line-height:1.08;text-align:center}.feedback{min-height:28px;padding:4px;font-size:.43rem}.next{margin-top:3px;padding:6px;font-size:.55rem}.result{margin-top:4vh;padding:25px 11px}.result-icon{font-size:4rem}.result h1{font-size:2rem}}
@media(max-width:380px){.topbar>strong{font-size:.66rem}.intro h1{font-size:1.4rem}.level{min-height:60px}.workspace{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.choices button{font-size:.4rem}.map-tip{max-width:96%;font-size:.38rem}}