:root{color-scheme:dark;--dark:#141934;--dark2:#141d3e;--blue:#55caff;--gold:#ffcc57;--cream:#fff7da;--shadow:0 15px 60px rgba(9,9,31,.40);--ui:'Trebuchet MS',system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{padding:0;margin:0;width:100%;height:100%;overflow:hidden;background:#151d39;color:var(--cream);font-family:var(--ui)}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}#game{position:absolute;inset:0;touch-action:none}#game canvas{width:100%;height:100%;display:block;touch-action:none}.world-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(9,12,34,.32),transparent 60%),linear-gradient(0deg,rgba(11,13,34,.50),transparent 30%);z-index:1}.site-header{z-index:12;position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,3vw,54px);gap:16px;background:linear-gradient(to bottom,rgba(10,12,37,.92),rgba(10,12,37,.32) 80%,transparent)}.brand{display:flex;align-items:center;gap:17px;min-width:0}.brand-logo{width:170px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}.brand-divider{height:38px;width:1px;background:rgba(255,255,255,.28)}.brand-game{display:flex;flex-direction:column;gap:1px;white-space:nowrap}.brand-game span{font-size:10px;font-weight:900;letter-spacing:.24em;color:#a7e8ff}.brand-game strong{font-size:17px;letter-spacing:.025em;font-weight:1000;color:#fff6cd}.header-right{display:flex;align-items:center;gap:10px}.xp-pill{display:flex;align-items:center;gap:5px;background:rgba(16,24,55,.76);border:1px solid rgba(255,219,139,.3);border-radius:30px;padding:9px 15px;font-size:15px;font-weight:900;box-shadow:0 4px 18px rgba(5,9,19,.22)}.xp-pill small{font-size:10px;color:#e0d4b8}.xp-star{font-size:20px;color:var(--gold)}.round-nav{background:rgba(14,22,50,.70);border:1px solid rgba(255,255,255,.18);border-radius:99px;color:white;padding:10px 13px;font-size:18px;display:flex;gap:8px;align-items:center}.nav-text{font-size:12px;font-weight:800}.round-nav:hover,.secondary-btn:hover{background:rgba(63,87,130,.7)}.welcome-page{z-index:5;position:absolute;inset:0;display:flex;align-items:center;padding:80px 3.8vw 44px;background:linear-gradient(90deg,rgba(12,14,41,.83) 0%,rgba(11,16,41,.72) 25%,rgba(13,20,44,.13) 67%,transparent 100%)}.welcome-page.hidden{display:none}.welcome-card{max-width:min(610px,48vw);padding:20px 0 8px}.eyebrow,.tiny-caption{font-size:11px;font-weight:1000;letter-spacing:.18em;color:#ffdc88}.spark-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffe378;box-shadow:0 0 17px #ffcb5b;margin-right:5px}.welcome-card h1{font-size:clamp(39px,5.3vw,80px);font-weight:1000;line-height:1.055;letter-spacing:-.065em;margin:14px 0 17px;text-shadow:0 5px 12px rgba(0,0,0,.28)}.welcome-card h1 em{font-style:normal;color:#ffcf68}.welcome-card h1 span{color:#8fdaff}.welcome-card>p{color:#e0e7f7;font-size:clamp(14px,1.4vw,19px);line-height:1.52;max-width:510px;text-wrap:pretty}.chapter-intro{margin:27px 0 22px;display:flex;align-items:center;gap:13px;max-width:540px;background:rgba(22,29,63,.83);border:1px solid rgba(255,212,115,.39);border-radius:17px;padding:13px 14px;box-shadow:0 10px 30px rgba(5,8,27,.2)}.chapter-icon{display:grid;place-items:center;background:linear-gradient(135deg,#ffbd4b,#f37d55);color:#5e3252;border-radius:12px;width:45px;height:45px;font-size:30px;flex-shrink:0}.chapter-intro div{display:flex;flex-direction:column;gap:5px;min-width:0}.chapter-intro strong{font-size:12px;letter-spacing:.055em}.chapter-intro small{font-size:11px;color:#cdd2e5}.intro-tag{font-size:10px;color:#092e3d;background:#8ff1dd;border-radius:20px;padding:5px 8px;font-weight:1000;margin-left:auto}.welcome-buttons{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.primary-btn{border:0;border-radius:13px;padding:16px 23px;font-size:13px;font-weight:1000;letter-spacing:.02em;color:#261a35;background:linear-gradient(155deg,#fff18f,#ffb94a);box-shadow:0 7px 0 #b06b32,0 17px 25px rgba(20,12,32,.35);transition:transform .15s,filter .15s}.primary-btn span{margin-left:12px;font-size:17px}.primary-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}.primary-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #b06b32,0 7px 15px rgba(20,12,32,.35)}.secondary-btn{border:1px solid #c9c8d27c;color:#f7f7f0;background:#111931b3;border-radius:12px;padding:16px 20px;font-size:13px;font-weight:900}.welcome-footer{margin-top:19px;color:#ffeaacbd;font-size:11px;letter-spacing:.05em}.world-chips{position:absolute;right:25px;bottom:26px;display:flex;gap:7px}.world-chips span{border:1px solid rgba(255,255,255,.27);padding:9px 12px;border-radius:30px;background:rgba(11,18,41,.61);color:#f1e6d5;font-size:10px;font-weight:900;letter-spacing:.06em}.hidden{display:none!important}.hud{position:absolute;inset:0;z-index:6;pointer-events:none}.hud button{pointer-events:auto}.mission-panel{position:absolute;left:clamp(16px,3vw,44px);top:85px;width:min(370px,38vw);background:linear-gradient(145deg,rgba(20,26,58,.92),rgba(23,28,60,.83));border:1px solid rgba(255,232,156,.37);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.mission-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.mission-head button{border:1px solid #f7d8904f;background:#222a4eb5;border-radius:8px;color:#fff4d5;font-size:11px;font-weight:900;padding:7px 10px}.mission-title{font-size:24px;line-height:1.15;font-weight:1000;margin:13px 0 5px}.mission-details{font-size:13px;line-height:1.45;color:#cdd8f1}.progress-row{display:flex;justify-content:space-between;gap:6px;margin:15px 0 7px;font-size:10px;color:#cce0ff}.progress-row span:first-child{color:#ffda83;font-weight:1000}.progress-bar{height:6px;border-radius:20px;background:#505575b0;overflow:hidden}.progress-bar span{display:block;height:100%;width:0%;border-radius:10px;background:linear-gradient(90deg,#3dccdd,#ffe66c);transition:width .4s}.mini-map{position:absolute;right:34px;top:91px;width:178px;height:205px;border:1px solid rgba(255,218,155,.36);background:rgba(10,18,42,.76);border-radius:18px;box-shadow:var(--shadow);padding:8px;backdrop-filter:blur(8px)}.mini-map canvas{width:160px;height:160px}.mini-map-label{text-align:center;font-size:9px;font-weight:900;color:#d6d6e4;letter-spacing:.18em;margin-top:4px}.bottom-help{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:9px 17px;border-radius:99px;background:rgba(15,20,43,.76);color:#fff5dbd1;font-size:11px;font-weight:900;letter-spacing:.04em;white-space:nowrap;border:1px solid #faf1cb32}.bottom-help span{color:#ffc867;padding:0 6px}.interaction{position:absolute;bottom:73px;left:50%;transform:translateX(-50%);padding:11px 12px 11px 18px;border-radius:16px;background:rgba(14,23,53,.94);border:1px solid #fbe7aa75;display:flex;align-items:center;gap:17px;box-shadow:var(--shadow)}.interaction div{display:flex;flex-direction:column;gap:5px;white-space:nowrap}.interaction small{font-size:9px;color:#ffdc87;font-weight:900;letter-spacing:.18em}.interaction strong{font-size:14px}.interaction .primary-btn{font-size:12px;padding:12px 18px}.interaction .primary-btn span{margin-left:7px}.toast-container{position:absolute;top:310px;right:40px;display:flex;flex-direction:column;gap:9px}.toast{padding:13px 16px;border:1px solid #ffde8f7a;border-radius:12px;background:#1e2a57dd;box-shadow:var(--shadow);max-width:330px;color:white;font-weight:900;font-size:13px;animation:toast .35s ease}.toast strong{color:var(--gold)}@keyframes toast{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}.joy-zone,.touch-act{display:none}.dialog-mask,.panel-mask{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(7,11,29,.76);backdrop-filter:blur(9px)}.dialog-card{background:linear-gradient(158deg,#303866,#191e42 67%);border:2px solid #e7bb6b;border-radius:27px;padding:31px clamp(20px,3.6vw,46px);width:min(570px,100%);max-height:min(87vh,830px);overflow-y:auto;position:relative;box-shadow:0 20px 90px #090c24db,0 0 40px #e7b66925}.close-x{position:absolute;top:14px;right:15px;width:35px;height:35px;border-radius:9px;background:#1019359e;border:1px solid #ffffff42;color:white;font-weight:bold;font-size:18px}.dialog-kicker{color:#fbd68b;letter-spacing:.16em;font-size:11px;font-weight:900}.dialog-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#ffbd55;color:#35244d;font-size:34px;margin:17px 0 15px;box-shadow:0 8px 0 #cb713f}.dialog-card h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.04em;line-height:1.13;margin:15px 0 11px}.dialog-card p{font-size:16px;line-height:1.55;color:#e6ebfb;margin:0 0 19px}.dialog-options{display:flex;flex-direction:column;gap:9px}.choice{width:100%;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#172447;border:1px solid rgba(185,213,255,.44);border-radius:13px;color:white;text-align:left;font-weight:850;font-size:15px;line-height:1.3}.choice span{opacity:.65}.choice:hover{border-color:#ffdb80;background:#263463}.choice.correct{border-color:#a3f7a5;background:#185843}.choice.wrong{border-color:#fe9b9b;background:#6b384c}.dialog-feedback{margin-top:10px;min-height:22px;color:#ffdc85;font-size:13px;font-weight:900}.speech-btn{font-size:12px;margin-top:14px;color:#c3ecff;border:0;background:transparent;font-weight:800;padding:8px 0}.panel-mask{justify-content:flex-end;padding:0}.side-panel{width:min(490px,100%);height:100%;overflow:auto;background:linear-gradient(#282f59,#101d37);padding:35px 29px;border-left:2px solid #ffc763;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff36;padding-bottom:18px}.panel-head h2{font-size:25px;line-height:1.1;margin:0}.panel-head button{border:1px solid #fff4;border-radius:10px;background:#17264c;color:white;padding:10px 14px}.journal-card{border:1px solid rgba(243,207,141,.39);border-radius:15px;padding:16px 17px;background:rgba(20,35,72,.77);margin-top:15px}.journal-card b{color:#ffe08b;display:block;font-size:14px;margin-bottom:7px}.journal-card p{font-size:14px;line-height:1.45;color:#e2e7f9;margin:0}.panel-lede{line-height:1.5;color:#b5ccef}.gear-card{display:flex;align-items:center;gap:13px;border:1px solid #ffffff48;border-radius:15px;background:#16264c;padding:13px;margin:14px 0}.gear-swatch{width:42px;height:42px;flex:none;border:3px solid white;border-radius:12px}.gear-card div{flex:1}.gear-card strong{font-size:14px}.gear-card small{display:block;font-size:11px;color:#c6d4ed;padding-top:4px}.gear-card button{border:0;border-radius:10px;padding:11px 13px;background:#ffe089;color:#222442;font-size:12px;font-weight:1000}.gear-card button:disabled{opacity:.5;cursor:not-allowed}.setting-row{margin:20px 0;border-bottom:1px solid #ffffff30;padding:0 0 20px}.setting-row label{display:block;font-weight:900;margin-bottom:9px}.setting-row select{background:#162349;color:#fff3d6;padding:12px;border-radius:10px;border:1px solid #fff4;width:100%;font:inherit}.panel-cta{background:#ffe18b;color:#202447;font-size:13px;font-weight:900;border:0;border-radius:10px;padding:13px 15px}.danger-action{background:transparent;border:1px solid #d5a4b0;color:#fee1e2;border-radius:10px;padding:12px 15px;font-weight:800;font-size:12px}#loadNotice{position:absolute;z-index:50;bottom:50px;left:50%;transform:translateX(-50%);background:#141e42d8;border:1px solid #ffdd8196;border-radius:50px;padding:10px 22px;font-size:13px;font-weight:900;pointer-events:none}#loadNotice.hidden{display:none}canvas{user-select:none}
@media(max-width:970px){.brand-logo{width:140px}.brand-divider{height:30px}.brand-game strong{font-size:14px}.welcome-card{max-width:59vw}.welcome-card h1{font-size:clamp(43px,6vw,70px)}.round-nav{padding:8px 10px}.round-nav .nav-text{display:none}.mini-map{right:15px;width:136px;height:159px}.mini-map canvas{width:118px;height:118px}.mission-panel{width: min(340px,53vw)}}
@media(max-width:680px){.site-header{padding:9px 13px;gap:5px}.brand{gap:8px}.brand-logo{width:101px}.brand-divider{height:27px}.brand-game span{font-size:7px;letter-spacing:.13em}.brand-game strong{font-size:10px;letter-spacing:0}.header-right{gap:4px}.xp-pill{padding:6px 8px;font-size:12px}.xp-pill small{font-size:8px}.xp-star{font-size:13px}.round-nav{padding:5px 7px;font-size:15px}.welcome-page{align-items:flex-end;padding:82px 18px max(6vh,38px);background:linear-gradient(0deg,rgba(11,15,39,.96) 0%,rgba(11,15,39,.78) 35%,rgba(14,16,40,.18) 80%)}.welcome-card{max-width:100%;width:100%}.welcome-card h1{font-size:clamp(39px,10vw,53px);margin:8px 0 10px}.welcome-card>p{font-size:13px;line-height:1.43;max-width:420px}.eyebrow{font-size:9px}.chapter-intro{margin:15px 0 16px;padding:10px}.chapter-icon{height:41px;width:41px}.chapter-intro strong{font-size:11px}.chapter-intro small{font-size:10px}.welcome-buttons .primary-btn{padding:14px 17px;font-size:12px}.welcome-buttons .secondary-btn{padding:14px 12px;font-size:12px}.welcome-footer{font-size:10px;margin-top:15px}.world-chips{display:none}.mission-panel{top:62px;left:10px;width:min(285px,73vw);border-radius:13px;padding:12px}.mission-title{font-size:18px;margin:8px 0 5px}.tiny-caption{font-size:8px;letter-spacing:.08em}.mission-details{font-size:11px;line-height:1.35}.progress-row{font-size:9px;margin:10px 0 5px}.mission-head button{font-size:9px;padding:5px 6px}.mini-map{top:66px;right:10px;width:81px;height:99px;border-radius:12px;padding:4px}.mini-map canvas{width:71px;height:71px}.mini-map-label{font-size:7px;letter-spacing:.05em;margin-top:2px}.bottom-help{display:none}.joy-zone{display:block;position:absolute;bottom:calc(25px + env(safe-area-inset-bottom));left:18px;width:130px;height:130px;pointer-events:auto;touch-action:none}.joy-base{width:120px;height:120px;border-radius:50%;background:#172c56a6;border:2px solid rgba(255,255,255,.36);box-shadow:inset 0 0 22px rgba(51,140,192,.38);display:grid;place-items:center}.joy-knob{width:53px;height:53px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#bddff6,#4677bc);border:2px solid #e2f0ff;box-shadow:0 4px 10px #13142c75;transform:translate(0,0)}.touch-act{position:absolute;bottom:calc(42px + env(safe-area-inset-bottom));right:22px;width:89px;height:89px;border-radius:50%;background:radial-gradient(circle at 32% 17%,#ffeab4,#ffa93e);border:5px solid #ffffff96;box-shadow:0 7px 0 #99552e,0 15px 20px #10162d99;color:#283159;font-size:26px;font-weight:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;pointer-events:auto}.touch-act span{font-size:11px}.interaction{bottom:calc(152px + env(safe-area-inset-bottom));left:50%;width:min(280px,94vw);padding:10px;gap:9px}.interaction strong{font-size:12px}.interaction .primary-btn{font-size:10px;padding:9px}.interaction .primary-btn span{display:none}.toast-container{top:222px;left:10px;right:10px;align-items:center;pointer-events:none}.toast{font-size:11px;padding:10px}.dialog-mask{align-items:center;padding:12px}.dialog-card{border-radius:18px;padding:24px 18px;max-height:89vh}.dialog-card p{font-size:14px}.choice{font-size:13px;padding:12px 14px}.dialog-card h2{font-size:26px}.side-panel{padding:25px 18px}}
@media(max-height:650px) and (min-width:681px){.welcome-card h1{font-size:clamp(33px,4.8vw,61px)}.welcome-card p{font-size:13px}.welcome-card{padding-top:3px}.chapter-intro{margin:12px 0}.welcome-footer{margin-top:11px}.welcome-page{padding-top:60px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}