.upper-journey{--uj-bg:#fff8ec;--uj-purple:#7351bc;--uj-ink:#33304f;position:fixed;inset:0;margin:0;padding:0;border:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--uj-bg);color:var(--uj-ink);font-family:Fredoka,sans-serif}.upper-journey *{box-sizing:border-box}.upper-journey::backdrop{background:var(--uj-bg)}body:has(.upper-journey[open]){overflow:hidden}.upper-shell{max-width:440px;min-height:100svh;margin:auto;padding:16px 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.upper-journey button{min-height:72px;border:0;border-radius:24px;font:500 18px Fredoka,sans-serif;cursor:pointer;touch-action:manipulation}.upper-journey button:active{transform:scale(.96)}.upper-journey button:focus-visible{outline:3px solid var(--uj-purple);outline-offset:4px}.upper-journey svg{width:28px;height:28px}.upper-shell header{display:flex;align-items:center;justify-content:space-between;gap:12px}.upper-shell header button{width:72px;background:#ede3fa;color:var(--uj-purple);display:grid;place-items:center}.upper-shell header strong{font-size:22px}.upper-count{font:14px Andika,sans-serif;width:72px;text-align:center}.upper-steps{display:flex;gap:8px;margin-top:18px}.upper-steps span{flex:1;padding:8px 2px;text-align:center;border-bottom:5px solid #e5dced;font:11px Andika,sans-serif;color:#665971}.upper-steps .active{border-color:var(--uj-purple)}.upper-shell main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:28px 0}.upper-kicker{font:11px Andika,sans-serif;letter-spacing:1px;color:#655d70;margin:0}.upper-shell h1{font:500 30px/1.2 Fredoka,sans-serif;text-align:center;margin:0}.upper-shell h1:focus{outline:none}.upper-friends{display:flex;align-items:center;gap:14px;width:100%;justify-content:center}.upper-alive{position:relative;width:164px;height:198px;background:var(--uj-purple);border-radius:36px;display:grid;place-items:center;animation:upper-wake .65s ease-out 1}.upper-alive>img{width:148px;height:172px}.upper-eyes{position:absolute;display:flex;gap:6px;top:16px;right:14px}.upper-eyes i{width:15px;height:20px;background:white;border-radius:50%;border:1.5px solid #443255;position:relative}.upper-eyes i:after{content:'';position:absolute;width:6px;height:9px;background:#443255;left:5px;top:6px;border-radius:50%}.upper-picture{position:relative;background:#e3f2e6;width:164px;height:176px;display:grid;place-items:center}.upper-picture>img{width:142px;height:148px;object-fit:contain}.upper-picture>span{position:absolute;bottom:-8px;right:0;width:44px;height:44px;border-radius:50%;background:#7351bc;color:white;display:grid;place-items:center}.upper-picture svg{width:24px;height:24px}.upper-word{font:28px Andika,sans-serif;margin:0}.upper-word>span{font-weight:bold;color:#7351bc}.upper-coach{display:flex;align-items:center;gap:12px;width:100%;min-height:68px}.upper-coach img{width:52px;height:60px;object-fit:contain}.upper-status{font:14px/1.5 Andika,sans-serif;margin:0}.upper-next,.upper-help{width:100%;display:flex;align-items:center;justify-content:center;gap:12px}.upper-next{background:#7351bc;color:white;box-shadow:0 5px 0 #52358e}.upper-help{background:#efe5fa;color:#594285}.upper-reference{background:#7351bc;border-radius:32px;width:148px;height:160px;display:grid;place-items:center}.upper-reference img{width:125px;height:145px}.upper-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.upper-choice{height:118px;display:grid;place-items:center;box-shadow:0 5px 0 #b7a58d}.upper-choice img{width:90px;max-width:100%;height:108px;pointer-events:none}.choice-0{background:#3ea98a}.choice-1{background:#df9d43}.choice-2{background:#709bcf}.upper-choice.correct{outline:4px solid #306847;outline-offset:3px}.upper-choice.hint{outline:4px solid #7351bc;outline-offset:3px}.upper-stars{display:flex;gap:16px;color:#d69a15}.upper-stars svg{width:44px;height:44px}.upper-recap{display:flex;gap:16px}.upper-recap img{width:80px;height:100px;background:#7351bc;border-radius:24px}.upper-shell footer{display:flex;flex-direction:column;gap:12px}.upper-journey [hidden]{display:none!important}@keyframes upper-wake{0%{transform:translateY(0) scale(.93)}50%{transform:translateY(-12px) scale(1.03)}100%{transform:translateY(0) scale(1)}}@media(max-width:350px){.upper-shell{padding-left:16px;padding-right:16px}.upper-friends{gap:12px}.upper-alive{width:132px;height:170px}.upper-alive>img{width:126px;height:152px}.upper-picture{width:132px;height:150px}.upper-picture>img{width:120px;height:132px}.upper-shell h1{font-size:27px}}@media(max-height:760px){.upper-shell main{gap:20px;padding:18px 0}.upper-reference{height:136px}.upper-reference img{height:126px}.upper-choice{height:106px}.upper-choice img{height:96px}}@media(prefers-reduced-motion:reduce){.upper-journey *{animation:none!important;transition:none!important}}
