.mission-base { min-height:100dvh; max-width:720px; margin:auto; padding:12px 20px 100px; display:flex; flex-direction:column; align-items:stretch; gap:12px; background:linear-gradient(#dff8ffcc,#b8ec87bb), url('/assets/p4/base-academy@2x.webp') center/cover fixed; color:#103a59; }
.mission-base__header {display:flex; align-items:center; justify-content:flex-end; gap:16px; font-size:20px; font-weight:900;}
.mission-base__lock {width:48px; height:48px; border:0; border-radius:50%; background:#fff9; font-size:22px;}
.mission-base__hero {display:flex; flex:1; min-height:230px; align-items:center; justify-content:center; flex-direction:column;}
.mission-base__robot {position:relative; width:min(42vh,250px); height:min(42vh,250px); appearance:none; border:0; padding:0; background:transparent; color:inherit; cursor:pointer;}
.mission-base__robot:focus-visible {outline:4px solid #ffad21; outline-offset:4px; border-radius:28px;}
.mission-base__robot img,.mission-base__robot svg {position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
.mission-base__robot svg {fill:none;stroke:#20d4f2;stroke-width:3;opacity:.55;pointer-events:none;}
.mission-base__robot .armor-part {fill:#9ab4c2;stroke:#fff;stroke-width:1;opacity:.35}.mission-base__robot .armor-part.is-lit {fill:#ffdc45;opacity:1;filter:drop-shadow(0 0 6px #ffe269);}
.mission-base__speech {margin:0; padding:12px 18px; max-width:100%; background:#fff; border:3px solid #d7f2ff; border-radius:22px; font-size:20px; font-weight:800; text-align:center; box-shadow:0 5px #b4d7e9;}
.mission-base__energy {width:58%;height:12px;margin:12px auto 0;background:#d6e9f2;border-radius:20px;overflow:hidden;}
.mission-base__energy span {display:block;height:100%;background:linear-gradient(90deg,#31bdf0,#ffe168);border-radius:20px;}
.mission-base__next {width:100%;min-height:80px;border:4px solid #fff;border-radius:24px;background:linear-gradient(#35c8ff,#1479d2);box-shadow:0 6px #075999;color:white;font-size:26px;font-weight:900;}
.mission-base__week {display:flex;justify-content:center;gap:10px;}
.mission-base__week span {width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#ffffffae;font-size:22px;filter:grayscale(.65);}
.mission-base__week .is-today {outline:4px solid #ffdd54;filter:none}.mission-base__week .is-done {filter:none;background:#fff6b7;}
.mission-base__nav {position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,720px);display:grid;grid-template-columns:repeat(3,1fr);background:#fff;box-shadow:0 -3px 18px #0076a52c;z-index:3;}
.mission-base__nav button {min-height:64px;border:0;background:transparent;color:#12618a;font-size:22px;font-weight:800;}.mission-base__nav button span {display:block;font-size:15px;}
.mission-base--loading {align-items:center;justify-content:center;font-size:20px;font-weight:800;}
.mission-base--loading button {min-height:64px;border-radius:20px;background:#168fdb;color:white;padding:0 24px;border:0;font-size:20px;}
.free-page,.box-page {align-items:center;justify-content:center;text-align:center;font-size:20px;font-weight:800;}.free-page h1,.box-page h1{font-size:30px;margin:0}.free-page p,.box-page p{margin:4px 0}.free-robot{width:min(240px,45vw);height:auto}.box-item{width:140px;height:140px;object-fit:contain}.free-back{position:absolute;top:12px;left:12px;width:48px;height:48px;border:0;border-radius:50%;background:white;font-size:28px}.free-optional{min-height:56px;width:100%;border:3px solid white;border-radius:20px;background:#fff3bf;color:#70450c;font-size:20px;font-weight:800}
.onboarding-page {align-items:center;justify-content:center;gap:24px}.onboarding-page .free-robot{width:min(70vw,320px)}