.how-to-play{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 13px;border:1px solid #d7c8eb;background:#f0e9fb;color:#684695;border-radius:12px;font:800 12px Nunito;white-space:nowrap;flex-shrink:0}.how-to-play .icon{width:19px;height:19px}.mini-top{flex-wrap:wrap}.mini-top>span{margin-left:auto}.cargo-toolbar>.how-to-play{margin-left:auto;border-color:#a6e6d444;background:#234352;color:#c4f4df;font-size:10px;padding:7px 10px;gap:5px}.cargo-toolbar>.how-to-play .icon{width:17px;height:17px}
.game-tutorial{width:min(740px,calc(100% - 28px));max-width:740px;padding:25px;background:#fffdf8;border:1px solid #ded4eb;border-radius:25px;max-height:94svh;color:#4f3c62;overflow:auto}.game-tutorial::backdrop{background:#18223d99;backdrop-filter:blur(5px)}.tutorial-heading{display:flex;justify-content:space-between;align-items:start;gap:15px}.tutorial-heading .eyebrow{font-size:9px;letter-spacing:1.5px;color:#9477aa}.tutorial-heading h2{font-size:25px;line-height:1.3;color:#62437d;margin:5px 0 0}.tutorial-heading>.icon-button{flex-shrink:0;width:44px;height:44px}.tutorial-coach{display:flex;align-items:center;gap:19px;margin:15px 0 18px;background:#f1ebf8;border-radius:18px;padding:12px 18px}.tutorial-finn{width:84px;height:100px;flex-shrink:0}.tutorial-finn>.fox{width:100%;height:100%}.tutorial-coach>div:nth-child(2){flex:1;min-width:0}.tutorial-coach span{font-size:9px;letter-spacing:1px;color:#a088b1;font-weight:800}.tutorial-coach p{font:800 17px/1.65 Nunito;color:#775687;margin-top:6px;min-height:54px}.tutorial-talking [data-character=finn] .talk-mouth{opacity:1;animation:talkMouth .23s ease-in-out infinite alternate}.tutorial-demo{position:relative;min-height:210px;background:#f5f8ec;border:1px dashed #d9dfc7;border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;overflow:hidden;isolation:isolate}.tutorial-demo[data-scene=asteroid],.tutorial-demo[data-scene=blast]{padding:0;background:#111d3c;border:0}.tutorial-space{position:relative;width:100%;height:220px}.tutorial-space canvas{display:block;height:100%;width:100%}.tutorial-cargo{position:absolute;bottom:10px;left:12px;display:flex;align-items:center;gap:7px;color:#ffe0a6;font:800 12px Nunito}.tutorial-cargo svg{width:26px;height:26px}.tutorial-fact{display:flex;align-items:center;justify-content:center;gap:13px;font:900 34px Nunito;color:#6c7959;line-height:1.2;white-space:nowrap}.tutorial-fact>span{font-weight:600;color:#b2bda4}.tutorial-fact>b{color:#9d7c47}.tutorial-groups{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.tutorial-group{padding:10px 14px;background:#fffdf7;border:1px solid #e3ddc8;border-radius:13px;animation:tutorialGroupIn .5s both;animation-delay:calc(var(--group)*.65s);display:flex;align-items:center;flex-direction:column;gap:4px}.tutorial-group>span{font-size:9px;color:#a38e67}.tutorial-group>div{display:flex;gap:5px}.tutorial-group .acorn{width:31px;height:34px;max-height:none}.tutorial-group>b{font:900 17px Nunito;color:#a5834b}.tutorial-addition{font:800 17px Nunito;color:#9b8355;text-align:center}.tutorial-pointer{position:absolute;top:-29px;left:50%;translate:-50% 0;display:flex;gap:3px;align-items:center;background:#7855b9;color:#fff;padding:4px 7px;border-radius:8px;box-shadow:0 2px 6px #7651ac22;z-index:2;animation:tutorialTap .85s ease-in-out infinite;pointer-events:none}.tutorial-pointer>.icon{rotate:90deg;width:13px;height:13px}.tutorial-pointer>b{font:800 9px Nunito}.demo-tap{position:relative;outline:3px solid #c0a4e0;outline-offset:3px;animation:tutorialGlow 2s ease-in-out infinite}
.tutorial-planets{display:flex;gap:17px;margin-top:14px}.tutorial-planets>span{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid #a9cdb5;background:#d5ecdc;color:#578267;font:900 23px Nunito}.tutorial-planets>span:nth-child(2){background:#f6dcbc;color:#ac7d43;border-color:#d7b483}.tutorial-mode{font:800 15px Nunito;color:#78876c;text-align:center}.tutorial-mode>small{display:block;font:11px 'DM Sans';margin-top:5px;color:#9ca189}.tutorial-action{position:relative;padding:10px 17px;border-radius:10px;background:#6d986a;color:#fffdf5;font:900 14px Nunito;display:inline-flex;align-items:center;gap:9px;min-height:43px}.tutorial-action .icon{width:17px;height:17px}.tutorial-demo-equation{display:flex;align-items:center;gap:15px}.tutorial-product{display:grid;place-items:center;width:42px;height:40px;background:#fffdf6;border:1px solid #ded8c4;border-radius:10px;font:900 26px Nunito;color:#a3844e}.tutorial-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(250px,100%);margin:9px 0 0}.tutorial-keypad>span{position:relative;padding:4px;background:#fffdf8;border:1px solid #d8ddcb;border-bottom-width:3px;border-radius:9px;text-align:center;font:900 19px Nunito;color:#84916d;min-height:33px}.tutorial-keypad .tutorial-pointer{top:-20px;left:95%}.tutorial-keypad .demo-tap{color:#69438a;background:#ebe0f7;outline-width:2px}.tutorial-acorns{display:flex;gap:30px;margin:10px 0}.tutorial-acorn{position:relative;width:72px;height:82px;animation:tutorialAcornFloat 4s ease-in-out infinite}.tutorial-acorn .acorn{width:100%;height:100%;max-width:none;max-height:none}.tutorial-acorn>b{position:absolute;bottom:0;left:50%;translate:-50% 0;border:1px solid #caaa76;background:#fff6e4;border-radius:10px;padding:2px 10px;color:#a7834d;font:900 24px Nunito}.tutorial-acorn.demo-pop{animation:tutorialAcornPop 3s ease-in-out infinite}.tutorial-pairs{display:grid;grid-template-columns:1fr 36px 1fr;gap:14px;width:min(340px,100%);margin:12px 0}.tutorial-pairs>div{display:grid;gap:14px}.tutorial-pairs span,.tutorial-answers>span{position:relative;display:grid;place-items:center;padding:10px 12px;background:#f0e7fa;border:1px solid #d5c1e8;border-bottom-width:4px;border-radius:12px;font:900 26px Nunito;color:#9470ae;min-height:54px}.tutorial-pair-arrow{align-content:center;color:#c4add9}.tutorial-pair-arrow .icon{width:30px;height:30px}.tutorial-pairs .demo-match,.tutorial-answers .demo-match{background:#deedda;border-color:#a2c398;color:#739267}.tutorial-building{min-height:48px;display:flex;align-items:center}.tutorial-answers{display:flex;gap:15px;margin-top:8px}.tutorial-answers>span{min-width:65px}.tutorial-race{width:100%;height:100px;position:relative;background:#e6effc;border:1px dashed #c3d3ea;border-radius:13px;overflow:hidden}.tutorial-rocket{position:absolute;height:82px;width:80px;top:5px;left:5%}.tutorial-rocket svg{height:100%;width:100%;rotate:90deg}.tutorial-rocket.demo-boost{animation:tutorialBoost 4s ease-in-out infinite}.tutorial-finish{position:absolute;right:15px;top:15px;color:#99aec8;font:800 9px Nunito;writing-mode:vertical-rl;letter-spacing:2px}.tutorial-ready{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:10px}.tutorial-ready>.icon{width:55px;height:55px;color:#d4b064;fill:#f0e2b4;animation:tutorialStar 4s ease-in-out infinite}.tutorial-ready>b{font:900 25px Nunito;color:#7d815c}.tutorial-ready>p{font-size:12px;color:#9a9b7b}.tutorial-help-example{font:800 13px Nunito;color:#84679e;display:flex;align-items:center;gap:6px;padding:9px 14px;background:#efe6f7;border-radius:11px}.tutorial-help-example>.icon{width:18px;height:18px}.tutorial-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 14px}.tutorial-dots button{height:32px;width:32px;background:#f3eef9;border:1px solid #e0d4ed;color:#a892ba;border-radius:50%;font:800 11px Nunito}.tutorial-dots button[aria-pressed=true]{background:#9671c0;border-color:#9671c0;color:#fff}.tutorial-transport{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.tutorial-transport .button{min-height:46px;font-size:12px;padding:10px 16px}.tutorial-transport .icon-button{width:44px;height:44px;font-size:23px}.tutorial-status{font-size:10px!important;text-align:center;margin:12px 0!important;min-height:18px;color:#9e89ad!important;line-height:1.6!important}.tutorial-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #ece3f1;padding-top:12px}.tutorial-bottom>small{font-size:9px;color:#ac9cb5}.tutorial-bottom a{text-decoration:underline}.tutorial-bottom .text-button{color:#9475a8;font-size:11px}.tutorial-bottom .button{font-size:12px;min-height:46px}.tutorial-paused .tutorial-demo *{animation-play-state:paused!important}
@keyframes tutorialTap{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}@keyframes tutorialGlow{0%,100%{outline-color:#c0a4e0}50%{outline-color:#8254b9}}@keyframes tutorialGroupIn{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes tutorialAcornFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes tutorialAcornPop{0%,20%,100%{scale:1}35%{scale:1.16}50%{scale:.92}70%{scale:1}}@keyframes tutorialBoost{0%,10%{left:5%}65%,100%{left:calc(100% - 90px)}}@keyframes tutorialStar{0%,100%{rotate:-8deg;scale:1}50%{rotate:8deg;scale:1.07}}
@media(max-width:700px){.cargo-toolbar>.how-to-play{font-size:9px;min-height:38px;padding:7px;gap:4px}.cargo-toolbar>.how-to-play .icon{width:15px;height:15px}.cargo-tabs{gap:8px}.cargo-tabs button{padding-left:4px!important;padding-right:4px!important}.mini-top>.how-to-play{font-size:11px;min-height:44px;padding:8px 11px}.mini-top>span{max-width:115px;font-size:9px}.game-tutorial{padding:18px 15px;border-radius:20px;width:calc(100% - 20px);max-height:94svh}.tutorial-heading h2{font-size:22px}.tutorial-heading .eyebrow{font-size:8px;letter-spacing:1px}.tutorial-coach{gap:12px;padding:10px 12px;margin:13px 0}.tutorial-finn{width:65px;height:84px}.tutorial-coach p{font-size:15px;line-height:1.6;min-height:58px}.tutorial-demo{min-height:190px;padding:14px 12px;gap:10px}.tutorial-space{height:195px}.tutorial-fact{font-size:29px;gap:10px}.tutorial-group{padding:8px;gap:3px}.tutorial-group .acorn{width:27px;height:30px}.tutorial-groups{gap:10px}.tutorial-addition{font-size:15px}.tutorial-planets{gap:12px}.tutorial-planets>span{width:49px;height:49px;font-size:21px}.tutorial-action{font-size:13px;min-height:40px;padding:9px 14px}.tutorial-acorns{gap:21px}.tutorial-acorn{width:60px;height:70px}.tutorial-acorn>b{font-size:21px;padding:2px 8px}.tutorial-pairs{gap:10px;grid-template-columns:1fr 27px 1fr}.tutorial-pairs span{font-size:23px;min-height:49px;padding:8px}.tutorial-pair-arrow .icon{width:24px;height:24px}.tutorial-dots{margin:13px 0 11px;gap:7px}.tutorial-dots button{width:30px;height:30px}.tutorial-transport{gap:7px}.tutorial-transport .button{font-size:11px;padding:9px 11px}.tutorial-transport .icon-button{width:40px;height:44px}.tutorial-status{font-size:9px!important;margin:9px 0!important}.tutorial-bottom{padding-top:8px;gap:8px}.tutorial-bottom>small{font-size:8px}.tutorial-ready>b{font-size:23px}.tutorial-ready>p{font-size:11px}.tutorial-ready>.icon{width:45px;height:45px}}
@media(max-height:700px){.game-tutorial{padding:14px;max-height:96svh}.tutorial-coach{margin:9px 0;padding:8px 10px}.tutorial-finn{height:64px;width:55px}.tutorial-coach p{font-size:14px;min-height:40px}.tutorial-demo{min-height:160px}.tutorial-space{height:170px}.tutorial-heading h2{font-size:21px}.tutorial-dots{margin:10px 0}.tutorial-transport .button{min-height:44px}.tutorial-status{margin:7px 0!important}}
@media(prefers-reduced-motion:reduce){.game-tutorial *{animation:none!important;transition:none!important}}
/* Keep both sound and instructions reachable on small screens. */
.cargo-toolbar{flex-wrap:wrap;gap:8px}.cargo-toolbar>.cargo-tabs{margin-right:auto}.cargo-toolbar>.game-sound{margin-left:0}.cargo-toolbar>.how-to-play:last-child{margin-left:0}.game-sound[aria-pressed=false]{background:#f6e9db;border-color:#e6cfb1;color:#986c43}.cosmic .game-sound[aria-pressed=false]{background:#483e41;color:#ffdcb4;border-color:#d9aa7744}.mini-top>.game-sound{margin-left:auto}.mini-top>span{margin-left:0}@media(max-width:700px){.cargo-toolbar>.cargo-tabs{flex:1 0 100%}.cargo-toolbar>.game-sound,.cargo-toolbar>.how-to-play{min-height:44px;font-size:11px;padding:8px 12px}.mini-top>span{max-width:none;flex:1}.mini-top>.game-sound{margin-left:0}}

@media(max-width:700px){.cosmic.in-flight .cargo-toolbar>.game-sound{display:none}.cosmic.in-flight .cargo-toolbar>.cargo-tabs{flex:initial}.cosmic.in-flight .cargo-toolbar{flex-wrap:nowrap}}