@font-face{font-family:Pixel;src:url('./fonts/pixel.ttf') format('truetype');font-display:swap;font-weight:400}
@font-face{font-family:DM;src:url('./fonts/body.ttf') format('truetype');font-display:swap;font-weight:400}
:root{color-scheme:dark;--bg:#101214;--panel:#191c20;--line:#2c3138;--blue:#9bd4ff;--muted:#8c949f;--white:#f3f4f6;--gold:#f4cd82;--green:#a4d9b2;--pixel:Pixel,'Courier New',monospace;--body:DM,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#090b0d;color:var(--white);font-family:var(--body);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;gap:22px;background-image:radial-gradient(ellipse at 50% 45%,#1b2026 0,transparent 65%)}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}button{color:inherit}button svg{width:20px;height:20px}button:hover:not(:disabled){filter:brightness(1.09)}button:active:not(:disabled){transform:translateY(2px)}.desktop-note{color:#69717b;font:10px var(--body);letter-spacing:2.6px;display:flex;gap:12px;align-items:center}.tiny-spark{color:var(--blue);font-size:18px}.desktop-footer{color:#656e79;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.3px}.desktop-footer>span{font:11px var(--pixel);letter-spacing:2px;color:#a1aab4}.desktop-footer i{height:3px;width:3px;border-radius:50%;background:#5c6672}.phone{width:430px;height:882px;max-height:calc(100svh - 130px);min-height:700px;background:var(--bg);border:1px solid #383c43;border-radius:44px;box-shadow:0 32px 100px #0008,0 0 0 7px #16191d,0 0 0 8px #25292d;overflow:hidden;position:relative;display:flex;flex-direction:column}.device-bar{height:48px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 27px;font-size:12px;font-weight:700;position:relative;z-index:5;background:var(--bg)}.device-island{position:absolute;width:110px;height:24px;border-radius:20px;background:#050607;top:10px;left:50%;transform:translateX(-50%)}.device-indicators{display:flex;align-items:center;gap:5px;font-size:10px}.device-indicators svg{width:22px;height:15px}.home-indicator{width:112px;height:4px;border-radius:3px;background:#727780;position:absolute;bottom:9px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none}#app{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}.screen{height:100%;display:flex;flex-direction:column;animation:appear .3s ease-out}.scroll{overflow-y:auto;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none}h1,h2,h3,p{margin:0}.pixel{font-family:var(--pixel)}.eyebrow{font-size:10px;letter-spacing:2.3px;color:var(--blue);text-transform:uppercase;font-weight:600}.muted{color:var(--muted)}.logo{display:flex;align-items:center;gap:9px;font-family:var(--pixel);font-size:22px;letter-spacing:-.5px}.logo-mark{color:var(--blue);width:26px;height:23px;display:inline-block;position:relative}.logo-mark:before{content:'';position:absolute;inset:2px 0 4px;background:var(--blue);clip-path:polygon(12% 0,88% 0,88% 12%,100% 12%,100% 83%,55% 83%,30% 100%,30% 83%,0 83%,0 12%,12% 12%)}.logo-mark:after{content:'···';font:25px var(--pixel);color:#101214;position:absolute;left:4px;top:-9px}.topline{display:flex;align-items:center;justify-content:space-between;padding:16px 25px}.sound-button,.icon-button{height:36px;width:36px;display:grid;place-items:center;border:1px solid var(--line);background:#191c20;border-radius:12px;color:#b8c2ce}.primary{min-height:54px;border:0;background:var(--blue);color:#111a23;border-radius:12px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 4px 0 #507b99;flex-shrink:0;transition:filter .15s,transform .15s}.primary:disabled{opacity:.4}.primary .arrow{font-size:20px}.secondary{min-height:45px;border:1px solid #38404a;background:#1a1f25;border-radius:10px;font-weight:600;font-size:13px;padding:10px 18px;display:flex;gap:8px;align-items:center;justify-content:center}.text-button{border:0;background:none;color:var(--muted);font-size:12px;padding:12px;text-decoration:none}.welcome{padding-bottom:30px}.hero-copy{text-align:center;padding:23px 20px 0}.hero-copy .eyebrow{margin-bottom:12px}.hero-copy h1{font:43px/1.06 var(--pixel);font-weight:500;letter-spacing:-1.5px}.hero-copy h1 em{font-style:normal;color:var(--blue)}.hero-copy p{font-size:13px;line-height:1.6;color:#9da6b2;margin:14px auto 0;max-width:275px}.hero-world{margin:21px 23px 0;border:1px solid #343a42;border-radius:20px;overflow:hidden;position:relative;background:#182422;flex:1;min-height:185px;max-height:282px}.hero-world canvas{width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated}.hero-world:after{content:'';pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 55px #0004;border-radius:20px}.world-caption{position:absolute;left:12px;bottom:12px;font:11px var(--pixel);color:#e3f1e7;background:#101b1be6;border:1px solid #64816a66;padding:7px 9px;border-radius:5px;z-index:1}.live-dot{display:inline-block;width:5px;height:5px;background:#a5d4af;margin-right:6px;box-shadow:0 0 8px #86b994}.hero-characters{display:flex;justify-content:center;gap:17px;margin-top:-25px;position:relative;z-index:2;height:83px}.hero-characters .sprite{height:80px;width:53px;filter:drop-shadow(0 6px 3px #0008)}.sprite{image-rendering:pixelated;display:block}.welcome-bottom{padding:5px 25px 0}.feature-line{display:flex;justify-content:center;align-items:center;gap:10px;font-size:10px;color:#9aa4b1;margin:8px 0 21px}.feature-line i{height:3px;width:3px;background:#505967;border-radius:50%}.welcome .primary{width:100%}.welcome-note{text-align:center;color:#697482;font-size:10px;margin-top:16px;letter-spacing:.2px}.step-header{display:flex;align-items:center;gap:18px;padding:15px 24px}.step-dots{display:flex;gap:6px;margin:auto}.step-dots span{height:4px;width:28px;border-radius:8px;background:#30363d}.step-dots span.active{background:var(--blue)}.step-header>.spacer{width:36px}.onboarding{padding-bottom:32px}.onboard-content{padding:30px 26px 0;flex:1;display:flex;flex-direction:column}.onboard-content h1{font:32px/1.15 var(--pixel);margin:10px 0 13px}.onboard-content>.muted{font-size:14px;line-height:1.6}.name-vignette{height:180px;display:grid;place-items:center;margin:14px 0;position:relative}.name-vignette:before{content:'';position:absolute;width:140px;height:80px;border-radius:100%;background:#95d3ff0a;filter:blur(12px);bottom:18px}.name-vignette canvas{width:104px;height:144px}.name-label{font-size:12px;font-weight:600;margin-bottom:10px}.name-input{background:#191d22;border:1px solid #3a424d;border-radius:12px;min-height:59px;padding:16px;color:var(--white);font-size:17px;outline:none;width:100%}.name-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #9bd4ff0a}.name-input::placeholder{color:#687383}.privacy-note{font-size:11px;line-height:1.6;color:#77828f;margin:13px 2px}.onboard-footer{padding:0 26px}.onboard-footer .primary{width:100%}.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0 15px}.character-card{border:1px solid #323840;border-radius:15px;background:#191c20;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;position:relative;min-height:163px}.character-card.selected{border-color:var(--blue);background:#9bd4ff0b;box-shadow:inset 0 0 0 1px #9bd4ff66}.character-card canvas{width:63px;height:91px;margin:0 0 8px}.character-card strong{font:17px var(--pixel)}.character-card>span{font-size:10px;color:var(--muted);margin-top:5px}.select-tick{position:absolute;right:10px;top:9px;color:var(--blue);font-size:14px}.character-help{font-size:11px;color:#828c98;text-align:center;line-height:1.5;margin-bottom:18px}.map-header{padding:12px 23px 14px;flex-shrink:0}.map-heading{display:flex;align-items:center;justify-content:space-between}.map-heading h1{font:26px var(--pixel)}.avatar-button{display:flex;align-items:center;gap:8px;background:#1b2026;border:1px solid #303842;border-radius:20px;padding:3px 11px 3px 5px;max-width:148px}.avatar-button canvas{width:23px;height:30px}.avatar-button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;max-width:85px}.greeting{color:var(--muted);font-size:12px;margin-top:5px}.map-progress{display:flex;align-items:center;gap:10px;margin-top:17px;font-size:10px;color:#8995a3}.progress-track{height:4px;background:#2a3139;border-radius:8px;flex:1;overflow:hidden}.progress-track>div{height:100%;background:var(--blue);border-radius:8px}.star-count{color:var(--gold);display:flex;gap:5px;font-size:11px}.world-tabs{display:flex;justify-content:center;gap:7px;padding:7px 22px 13px}.world-tab{flex:1;height:38px;border-radius:9px;border:1px solid #2e353f;background:#191d23;font:12px var(--pixel);color:#818c99;position:relative}.world-tab.active{color:var(--blue);border-color:#5d8cab;background:#9bd4ff12}.world-tab:disabled{opacity:.5}.world-banner{padding:2px 24px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.world-banner h2{font:20px var(--pixel)}.world-banner p{font-size:10px;color:#86919e;margin-top:4px}.world-count{font:12px var(--pixel);color:#a3afbc;background:#20262d;border:1px solid #343e48;border-radius:6px;padding:7px;white-space:nowrap}.journey-scroll{overflow-y:auto;flex:1;min-height:0;position:relative;scrollbar-width:thin;scrollbar-color:#485766 transparent;margin:0 11px;border-radius:16px;background:#151c1c}.journey-map{height:1200px;position:relative;overflow:hidden}.journey-map>canvas{position:absolute;width:100%;height:100%;image-rendering:pixelated;inset:0}.journey-map .map-overlay{position:absolute;inset:0;background:linear-gradient(#10201b08,#0a15172b)}.level-node{position:absolute;width:49px;height:49px;border-radius:50%;border:3px solid #3c5250;background:#243b35;color:#90a49a;font:19px var(--pixel);transform:translate(-50%,-50%);box-shadow:0 4px 0 #0a1618;z-index:2;display:grid;place-items:center}.level-node:active:not(:disabled){transform:translate(-50%,calc(-50% + 2px))}.level-node:hover:not(:disabled){transform:translate(-50%,-52%)}.level-node.current{border-color:#bbdfff;background:var(--blue);color:#182634;box-shadow:0 0 0 6px #9bd4ff22,0 5px 0 #3e687f}.level-node.complete{background:#e7c887;border-color:#f8dea6;color:#4a3b23}.level-node:disabled{color:#60776c;background:#1e332e;border-color:#314d40}.node-stars{position:absolute;bottom:-18px;left:0;right:0;color:var(--gold);font-size:10px;letter-spacing:0;white-space:nowrap;text-shadow:0 1px #000}.node-label{position:absolute;top:-27px;left:50%;transform:translateX(-50%);color:var(--blue);font:9px var(--body);font-weight:700;background:#15232e;border:1px solid #56788f;border-radius:5px;padding:5px 7px;white-space:nowrap}.journey-sign{position:absolute;top:20px;left:50%;transform:translateX(-50%);font:12px var(--pixel);color:#e9e0bf;padding:8px 12px;background:#3e382b;border:2px solid #7c6d4a;z-index:1;white-space:nowrap}.bottom-nav{display:flex;justify-content:space-around;background:#14171b;border-top:1px solid #2b3138;padding:12px 14px 26px;flex-shrink:0}.nav-item{border:0;background:none;display:flex;align-items:center;gap:7px;font-size:10px;color:#74808f;padding:3px 9px}.nav-item.active{color:var(--blue)}.nav-item svg{height:18px;width:18px}.level-sheet{position:absolute;inset:auto 0 0;background:#191d23;border:1px solid #3b4653;border-radius:25px 25px 0 0;padding:24px 25px 34px;z-index:20;box-shadow:0 -20px 80px #000a;animation:slideUp .25s}.sheet-handle{width:35px;height:4px;background:#424c58;border-radius:6px;margin:-12px auto 19px}.level-sheet .eyebrow{margin-bottom:8px}.level-sheet h2{font:28px var(--pixel);margin-bottom:8px}.level-sheet p{font-size:13px;color:#9aa6b4;line-height:1.6;margin-bottom:20px}.sheet-buttons{display:flex;gap:10px}.sheet-buttons .primary{flex:1}.sheet-buttons .icon-button{width:54px;height:54px;border-radius:12px}.sheet-backdrop{position:absolute;inset:0;z-index:19;background:#0007;backdrop-filter:blur(2px)}.play-top{padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px}.play-title{text-align:center;min-width:0}.play-title span{font-size:9px;letter-spacing:1.6px;color:var(--blue);text-transform:uppercase}.play-title h1{font:19px var(--pixel);margin-top:3px}.question-progress{display:flex;gap:5px}.question-progress span{height:5px;width:20px;border-radius:3px;background:#343b43}.question-progress .done{background:var(--blue)}.game-scene{position:relative;height:275px;min-height:205px;flex:1;max-height:310px;margin:0 15px;border:1px solid #384442;border-radius:16px;overflow:hidden;background:#20382c}.game-scene canvas{width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated}.scene-time{position:absolute;top:10px;right:10px;font:10px var(--pixel);background:#13261bdd;color:#c8dfb4;padding:5px 8px;border-radius:5px}.scene-place{position:absolute;left:12px;bottom:12px;color:#e6efdc;font:10px var(--pixel);background:#10211cc9;padding:7px 9px;border:1px solid #47654d;border-radius:5px}.walking-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#101b24e8;border:1px solid #8eb9d675;padding:10px 14px;border-radius:7px;white-space:nowrap;font:13px var(--pixel);color:var(--blue)}.dialogue-area{padding:18px 23px 10px;min-height:115px;flex-shrink:0}.speaker-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.speaker{font:14px var(--pixel);color:var(--blue)}.listen-button{border:0;background:none;color:#8d9dab;display:flex;align-items:center;gap:5px;font-size:10px;padding:4px}.listen-button svg{width:13px;height:13px}.dialogue{font:19px/1.35 var(--pixel);min-height:52px;color:#e6ebf1;white-space:pre-line}.dialogue-area.player .speaker{color:var(--gold)}.dialogue-area.response .speaker{color:var(--green)}.choice-area{padding:0 21px 14px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}.choice-hint{font-size:9px;text-transform:uppercase;letter-spacing:1.7px;color:#778696;margin-bottom:3px;display:flex;justify-content:space-between}.choice{min-height:51px;border:1px solid #343e49;border-radius:10px;background:#1b2026;color:#d9e1eb;text-align:left;display:flex;align-items:center;gap:12px;padding:11px 13px;transition:background .15s,border .15s;font-size:13px;line-height:1.4}.choice-letter{font:12px var(--pixel);color:var(--blue);width:23px;height:25px;flex-shrink:0;display:grid;place-items:center;background:#283847;border-radius:5px}.choice:hover:not(:disabled){border-color:#86b6d4;background:#23303d}.choice.correct{border-color:#82bc92;background:#a4d9b215}.choice.correct .choice-letter{background:#365542;color:#bdedc7}.choice.incorrect{border-color:#c59f70;background:#f4cd820c}.choice.incorrect .choice-letter{background:#50412f;color:var(--gold)}.feedback-note{font-size:11px;color:#a7b2bf;line-height:1.5;margin:0 2px 3px}.feedback-note strong{color:var(--green);font-weight:600}.continue-button{margin-top:2px;width:100%;min-height:49px}.play-footer{display:flex;align-items:center;justify-content:center;gap:6px;color:#6f7c8c;font-size:9px;padding:0 15px 27px;min-height:39px}.play-footer svg{width:12px;height:12px}.continue-placeholder{height:160px;display:flex;align-items:center;justify-content:center;color:#71808d;font-size:12px}.result-screen{padding:0 25px 30px;text-align:center;overflow-y:auto}.result-top{display:flex;justify-content:center;padding:19px 0 5px}.result-top .eyebrow{color:var(--green)}.result-stars{display:flex;justify-content:center;gap:12px;margin:20px 0 10px}.result-star{color:#343a40;font-size:53px;line-height:1;filter:drop-shadow(0 4px 0 #20262e)}.result-star.earned{color:var(--gold);animation:starIn .6s both;filter:drop-shadow(0 4px 0 #71552c)}.result-star:nth-child(2){font-size:65px;transform:translateY(-8px);animation-delay:.12s}.result-star:nth-child(3){animation-delay:.24s}.result-screen h1{font:34px var(--pixel);margin-top:16px}.result-screen>.muted{font-size:12px;line-height:1.6;max-width:285px;margin:10px auto 0}.result-sprite{width:86px;height:121px;margin:13px auto 8px;image-rendering:pixelated}.result-score{font-size:11px;color:var(--blue);letter-spacing:.4px;margin-bottom:20px}.review-card{border:1px solid #333e49;background:#191f25;text-align:left;border-radius:12px;padding:14px 15px;margin:10px 0 20px}.review-card .eyebrow{font-size:8px;letter-spacing:1.4px;color:#8fa2b4;margin-bottom:10px}.review-row{display:flex;gap:9px;font-size:12px;line-height:1.6;margin:7px 0;color:#d2dce7}.review-row>span:first-child{color:var(--green);flex-shrink:0}.result-screen .primary{width:100%}.result-screen .secondary{width:100%;margin-top:12px}.result-screen .text-button{display:block;width:100%;margin-top:4px}.profile-content{padding:20px 25px 30px}.profile-content h1{font:29px var(--pixel);margin-bottom:18px}.profile-hero{border:1px solid #35424e;background:#192029;border-radius:17px;padding:20px;text-align:center}.profile-hero canvas{width:76px;height:108px;margin:0 auto 12px}.profile-hero h2{font:24px var(--pixel)}.profile-hero p{font-size:11px;color:var(--muted);margin-top:7px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.stat{background:#1a1f25;border:1px solid #303b47;border-radius:12px;padding:19px 13px;text-align:center}.stat strong{font:28px var(--pixel);color:var(--blue)}.stat p{font-size:10px;color:#9ba6b3;margin-top:5px}.setting-row{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid #2b333d;background:none;padding:17px 0;font-size:13px;text-align:left}.setting-row>span:last-child{color:var(--blue)}.learning-details{border:1px solid #313e4b;border-radius:10px;padding:13px;margin:15px 0;color:#9ba9b7;font-size:12px;line-height:1.7}.learning-details summary{cursor:pointer;color:#c8d5e2}.learning-details p{margin-top:10px}.profile-content .privacy-note{margin-top:22px}.empty-message{font-size:12px;line-height:1.7;color:#94a3b2}.journal-card{background:#1a2028;border:1px solid #34414d;padding:16px;border-radius:12px;margin:13px 0}.journal-card h2{font:18px var(--pixel);color:var(--blue);margin-bottom:8px}.journal-card p{font-size:12px;color:#b8c5d2;line-height:1.7}.journal-card small{font-size:10px;color:#8292a3}.toast{position:absolute;bottom:85px;left:25px;right:25px;background:#2b3c4c;border:1px solid #5e809e;color:#d6eaff;border-radius:9px;padding:12px;text-align:center;font-size:12px;z-index:30;animation:appear .2s}.error{color:#f4cd82;font-size:12px;margin-top:10px}.coming-scene{opacity:.9}.game-screen.long-text .dialogue{font-size:16px}.game-screen.long-text .choice{font-size:12px}.game-screen.long-text .game-scene{max-height:230px;min-height:170px}.game-screen.long-text .dialogue-area{padding-top:13px}.game-screen.long-text .choice-area{gap:6px}
.game-screen{overflow-y:auto;scrollbar-width:none}.game-screen::-webkit-scrollbar{display:none}.game-scene{flex-shrink:0}.dialogue-area{cursor:pointer}
@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes starIn{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@media(max-width:520px){body{padding:0;background:#101214;gap:0;display:block}.desktop-note,.desktop-footer,.device-bar{display:none}.phone{height:100svh;max-height:none;min-height:600px;width:100%;max-width:500px;border:0;border-radius:0;box-shadow:none;margin:auto;padding-top:env(safe-area-inset-top)}.home-indicator{display:none}.welcome{padding-top:12px;padding-bottom:max(26px,env(safe-area-inset-bottom))}.topline{padding-top:17px}.hero-copy{padding-top:25px}.hero-world{max-height:310px}.bottom-nav{padding-bottom:max(20px,env(safe-area-inset-bottom))}.play-footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}.onboarding{padding-bottom:max(26px,env(safe-area-inset-bottom))}.hero-copy h1{font-size:46px}.game-scene{max-height:330px}}
@media(max-height:760px){.hero-copy{padding-top:8px}.hero-copy h1{font-size:36px}.hero-copy p{margin-top:10px}.hero-world{margin-top:14px}.feature-line{margin:4px 0 15px}.hero-characters{height:63px}.hero-characters .sprite{height:67px;width:45px}.hero-copy .eyebrow{margin-bottom:8px}.onboard-content{padding-top:16px}.character-card{min-height:145px;padding-top:8px}.character-card canvas{height:78px;width:54px}.character-grid{margin-top:15px}.game-scene{min-height:155px;max-height:240px}.dialogue-area{padding-top:12px}.dialogue{font-size:18px}.choice{min-height:46px;padding:9px 12px}.game-screen.long-text .game-scene{min-height:120px;max-height:180px}.result-sprite{height:90px;width:65px}.result-stars{margin-top:10px}.result-screen h1{font-size:29px}.result-screen>.muted{margin-top:7px}.result-score{margin-bottom:10px}.review-card{margin-bottom:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}