@import url('/brand.css');
:root{color-scheme:light;--ink:#173f3e;--cream:#fff8ea;--paper:#fffdf7;--teal:#16635e;--gold:#f1cc79;--coral:#ba513e;--sky:#dceef4;--sage:#e4efdf}
*{box-sizing:border-box}
body.mission-world{margin:0;padding-top:98px;background:#f5f0e3;color:var(--ink);font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background-image:radial-gradient(ellipse at 90% 20%,#dbebdc88,transparent 55%),radial-gradient(ellipse at 0 65%,#f2cfb066,transparent 45%)}
.mission-world a{color:#71324d;text-underline-offset:4px;font-weight:650}
.mission-world button{font:inherit;cursor:pointer;border:1px solid #aabfb4;color:var(--ink);border-radius:16px;background:var(--paper);padding:12px 18px;min-height:48px;font-weight:650}
.mission-world button:hover{border-color:var(--teal);box-shadow:0 4px 14px #163e3d14}
.mission-world :is(a,button,input):focus-visible{outline:3px solid #bd5a37;outline-offset:4px}
.mission-world [hidden]{display:none!important}
.mission-skip{position:fixed;top:-70px;left:10px;background:white;padding:12px;z-index:1200}.mission-skip:focus{top:8px}
.mission-header{position:fixed;inset:0 0 auto;background:#153e3d;z-index:1000;min-height:84px;display:flex;align-items:center;gap:18px;padding:16px max(20px,calc((100vw - 1220px)/2));border-bottom:2px solid #d0af6b;box-shadow:0 8px 25px #153e3d15}
.mission-header .brand{display:block;width:220px;max-width:40%;flex-shrink:0}.mission-header .brand img{display:block;width:100%;height:auto}
.mission-header a{color:#fff6df}.mission-header .mission-back{margin-left:auto;font-size:.9rem}
.mission-header button{color:#fff6df;background:transparent;border-color:#98afa5;border-radius:12px}
#mission-menu{position:absolute;right:20px;top:calc(100% + 8px);width:min(320px,calc(100vw - 40px));padding:16px;background:#153e3d;border:1px solid #b8a278;border-radius:18px;box-shadow:0 10px 35px #153e3d33}
#mission-menu a{display:block;padding:12px;text-decoration:none}
#main{max-width:1220px;margin:0 auto;padding:24px 28px 64px}
.mission-kicker{font-size:.78rem;font-weight:800;letter-spacing:.16em;color:#765531;margin:0 0 16px}
.mission-world h1,.mission-world h2{font-family:Georgia,serif;line-height:1.06;font-weight:500;letter-spacing:-.035em;margin:0 0 20px}
.mission-world h1{font-size:clamp(2.5rem,6vw,5.6rem)}.mission-world h2{font-size:clamp(1.9rem,3.4vw,3.2rem)}.mission-world h3{line-height:1.25;font-size:1.3rem}
.mission-hero{display:grid;grid-template-columns:.9fr 1.2fr;align-items:center;gap:48px;margin:8px 0 40px}.mission-hero p:not(.mission-kicker){font-size:1.15rem;max-width:480px}
.mission-visual{position:relative;margin:0;overflow:hidden;border-radius:32px;box-shadow:0 18px 45px #173f3e20;border:1px solid #c7ad7e}.mission-visual>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.mission-logo{position:absolute;right:16px;bottom:16px;background:#391d35ed;padding:12px 18px;border-radius:16px}.mission-logo img{width:140px;height:auto;display:block}
.mission-badges{display:flex;gap:12px;flex-wrap:wrap}.mission-badges span{font-size:.85rem;padding:7px 14px;background:#e2ece1;border:1px solid #b6cbbb;border-radius:30px;font-weight:650}
.mission-collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.mission-card{border:1px solid #b8c8b9;background:var(--paper);padding:24px;border-radius:26px;box-shadow:0 8px 30px #173f3e0b}.mission-card h2{font-size:2rem}.mission-card p{margin:12px 0}.mission-card .mission-icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#e4efe4;color:#18564f;font-size:2rem;margin-bottom:20px}
.mission-age-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.mission-world a.mission-primary,.mission-world button.mission-primary{display:inline-flex;align-items:center;justify-content:center;background:#17635d;color:#fffdf2;font-weight:750;border:1px solid #17635d;padding:14px 20px;border-radius:14px;min-height:50px;text-decoration:none;box-shadow:0 4px 0 #0d4540}.mission-world .mission-primary:hover{background:#114e49}
.mission-world .mission-secondary{display:inline-flex;align-items:center;padding:12px 16px;border:1px solid #acbfb1;border-radius:14px;background:#edf2e8;color:#173f3e;text-decoration:none;min-height:48px}
.mission-route-head{display:flex;gap:20px;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap}.mission-route-head p{margin:0}
.mission-route-head a{font-size:.9rem}
.mission-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.mission-steps li{padding:8px 14px;background:#e7ece2;border-radius:24px;font-size:.85rem;font-weight:650;color:#38554c}
.mission-steps li[aria-current]{background:#173f3e;color:#fff8e9}.mission-steps li.done{background:#d5e9d9;color:#164a40}
.mission-play-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:start}
.mission-stage{background:var(--paper);padding:clamp(20px,4vw,40px);border:1px solid #b6c7b6;border-radius:28px;box-shadow:0 12px 34px #173f3e0c}
.mission-stage h1{font-size:clamp(2.3rem,4vw,3.5rem)}
.mission-stage p{margin:14px 0}.mission-stage .mission-task{font-size:1.1rem}
.mission-aside{background:#e6efe2;border:1px solid #b6c7b6;border-radius:24px;padding:24px}
.mission-aside .mission-visual{border-radius:18px;margin-bottom:22px}
.mission-aside .mission-visual .mission-logo{padding:8px 12px;right:10px;bottom:10px}.mission-aside .mission-logo img{width:95px}
.mission-aside h2{font-size:1.65rem}.mission-aside p{font-size:.95rem}
.mission-aside details{border-top:1px solid #acbfae;padding-top:16px;margin-top:18px}.mission-aside summary{font-weight:750;cursor:pointer}
.mission-aside blockquote{background:#fff8e9;margin:16px 0;padding:16px;border-left:3px solid #947341;border-radius:0 12px 12px 0}.mission-aside cite{font-style:normal;font-size:.8rem;font-weight:650}
.mission-settings{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:.85rem;margin:18px 0}
.mission-settings label{display:flex;align-items:center;gap:8px}.mission-settings input{width:18px;height:18px;accent-color:#17635d}
.mission-board{position:relative;isolation:isolate;overflow:hidden;margin:24px 0;padding:24px;border-radius:24px;background:linear-gradient(160deg,#d8edf5 0 32%,#dfeacb 32%);border:1px solid #97b3a0}
.mission-board:before{content:"";display:block;height:90px;margin:0 16px 20px;background:repeating-linear-gradient(0deg,transparent 0 23px,#52715830 24px 27px),repeating-linear-gradient(90deg,#d7c599 0 57px,#a5956833 59px 63px);border-radius:16px 16px 5px 5px;box-shadow:0 5px 0 #9b9b6933}
.mission-hotspots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mission-hotspots button{padding:16px 12px;background:#fffdf4}.mission-hotspots button[aria-pressed="true"]{background:#16645b;color:#fff9e7;border-color:#16645b}
.mission-hotspots span{display:block;font-size:1.7rem;margin-bottom:6px}
.mission-discoveries{display:grid;gap:12px;margin:18px 0}.mission-discovery{border-left:4px solid #4c9273;padding:12px 18px;background:#ecf4e8;border-radius:0 14px 14px 0}.mission-discovery h3{margin:0 0 6px;font-size:1rem}.mission-discovery p{margin:0}
.mission-kit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.mission-kit button{text-align:left;display:flex;flex-direction:column;gap:8px;padding:20px;border:2px solid #c1cfbd;min-height:135px;background:#fffaf0}.mission-kit button[aria-pressed="true"]{border-color:#16645b;background:#e2f0e6}.mission-kit strong{line-height:1.3}.mission-kit small{font-weight:500;color:#3d5f50}
.mission-resources{padding:12px 18px;border-radius:14px;background:#f4deaa;color:#413716;font-weight:750}
.mission-choices{display:grid;gap:14px;margin:22px 0}.mission-choices button{text-align:left;padding:18px 22px;border:2px solid #c1cfbd;background:#edf4e7}.mission-choices button[aria-pressed="true"]{background:#d3e9dc;border-color:#16645b}
.mission-feedback{background:#edf2e6;border-left:4px solid #57946f;border-radius:0 14px 14px 0;padding:16px 20px;margin:20px 0;min-height:64px}.mission-feedback[data-tone="try"]{background:#fff0da;border-color:#bd7643}
.mission-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:26px}
.mission-finish{max-width:840px;margin:auto;text-align:center}.mission-finish .mission-visual{max-width:580px;margin:0 auto 30px}.mission-finish .mission-stage{text-align:left}.mission-celebration{color:#735211;letter-spacing:.25em;font-size:2.8rem;margin-bottom:20px}
.mission-footer{max-width:1220px;margin:auto;padding:20px 28px 36px;border-top:1px solid #b9cbb9;font-size:.9rem}.mission-footer p{color:#3a5c51}
.mission-sharing{margin-top:26px;border-top:1px solid #bdcbbc;padding-top:18px}.mission-sharing button{font-size:.9rem}.mission-sharing input{width:100%;font:inherit;padding:12px}
@media(max-width:850px){.mission-hero{grid-template-columns:1fr;gap:24px}.mission-hero .mission-visual{grid-row:1}.mission-hero h1{font-size:3.5rem}.mission-play-layout{grid-template-columns:1fr}.mission-aside{order:2}.mission-aside .mission-visual{max-width:400px}.mission-header{padding:12px 18px;gap:12px}.mission-header .brand{width:190px}.mission-header .mission-back{font-size:.8rem}}
@media(max-width:560px){body.mission-world{padding-top:90px;font-size:16px}#main{padding:20px 16px 40px}.mission-header .brand{width:145px;max-width:44%}.mission-header .mission-back{font-size:0;width:32px;flex-shrink:0}.mission-header .mission-back:before{content:"←";font-size:24px}.mission-header button{margin-left:auto;padding:10px 14px}.mission-hero{margin-top:0}.mission-hero h1{font-size:3rem}.mission-logo img{width:100px}.mission-logo{padding:10px 12px;right:12px;bottom:12px}.mission-card{padding:22px}.mission-hotspots{grid-template-columns:1fr}.mission-hotspots button{display:flex;align-items:center;gap:12px;text-align:left;min-height:60px}.mission-hotspots span{margin:0;font-size:1.3rem}.mission-kit{gap:10px}.mission-kit button{padding:14px;min-height:145px;font-size:.95rem}.mission-steps{gap:6px}.mission-steps li{font-size:.76rem;padding:7px 10px}.mission-stage{border-radius:22px}.mission-visual{border-radius:24px}.mission-age-actions>a{flex:1;white-space:normal}.mission-actions .mission-primary{width:100%}}
@media(prefers-reduced-motion:no-preference){.mission-world button,.mission-world .mission-primary{transition:background .16s,border-color .16s,box-shadow .16s}.mission-card{animation:mission-arrive .35s ease both}@keyframes mission-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}


.mission-review{margin:24px 0;padding:20px;border:1px solid #bba768;border-radius:18px;background:#fff3cf}.mission-review details{margin:18px 0}.mission-review summary{cursor:pointer;font-weight:700;min-height:48px;display:flex;align-items:center}.mission-review p{overflow-wrap:anywhere}.mission-review button{max-width:100%;white-space:normal}.mission-attempts{font-size:.9rem;font-weight:650}
