.dialog:has(.fittingBay){width:min(840px,100%);padding:0;overflow:auto}
.fittingBay{background:#162937;color:#f9eedc}
.fittingHeader{padding:clamp(13px,2.2vw,21px) clamp(16px,3vw,27px) 12px;background:linear-gradient(110deg,#21384a,#1a2c3b)}
.dialog .fittingHeader h2{margin:4px 0 0;font-size:clamp(23px,3.2vw,35px)}
.fittingRoom{width:100%;background:#21313f;overflow:hidden;isolation:isolate}
.fittingRoom video,.fittingStill{display:block;width:100%;aspect-ratio:16/9;max-height:57dvh;object-fit:contain;pointer-events:none}
.fittingRoom [hidden]{display:none}.fittingRoom video::-webkit-media-controls{display:none!important}
.fittingControls{display:flex;align-items:center;justify-content:flex-end;gap:15px;padding:clamp(12px,2.2vw,20px) clamp(16px,3vw,27px);flex-wrap:wrap}
.kitScore{display:flex;gap:12px;align-items:center;margin-right:auto;font-weight:700;font-size:14px;color:#d0e3e2}.kitScore span:first-child{color:#ffcf80}
.fittingControls .btn{min-width:118px}.fittingControls .linkBtn{min-height:40px}
.dialog:has(.labCheck){width:min(650px,100%)}.labCheck h2{font-size:clamp(22px,3.1vw,32px);margin:8px 0 14px}
.recipeBench{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:clamp(3px,1.8vw,12px);align-items:center;text-align:center;padding:14px 13px;border:1px solid #436775;border-radius:14px;background:linear-gradient(180deg,#142c3b 0%,#214553 81%,#314c51 82%,#233940 100%);box-shadow:inset 0 -4px 0 #172e36}
.recipeBench i{font-weight:800;font-style:normal;color:#eacb89;font-size:clamp(15px,3vw,25px)}
.mixWell,.mixTarget{display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;min-height:84px;text-align:center;border-radius:10px}
.mixWell{border:1px dashed #77959f;background:#15303e99}.mixWell[data-item]:not([data-item=""]){border:1px solid #95d5bc;background:#274b49}
.mixWell>.pi,.mixTarget>.pi{height:46px;width:49px;filter:drop-shadow(0 4px 2px #12283580)}
.mixWell[data-item]:not([data-item=""]) .pi{animation:seatIngredient .29s cubic-bezier(.18,.7,.3,1.1) both}
.mixWell span,.mixTarget span{font-weight:700;font-size:clamp(11px,2vw,14px);color:#e8f3ed}.mixWell .emptySlot{font-size:26px;color:#728e9a}
.mixTarget{background:#1d333a;border:1px solid #a99362}
.labCheck .mixPrompt{margin:16px 0 8px;font-weight:700;color:#e1ece9}
.labCheck .recipePicks button{display:flex;align-items:center;gap:10px;min-height:54px;transition:background-color .15s,border-color .15s,transform .14s;cursor:pointer}
.labCheck .recipePicks button:active{transform:translateY(2px)}.labCheck .recipePicks .pi{flex:none}
.labCheck #recipeNote{margin:10px 0 0;color:#ffe0a8}.labCheck #recipeNote:empty{display:none}.labCheck #checkPair{margin-top:12px}
.labCheck.wrongPair .recipeBench{animation:rejectMixture .32s ease both;border-color:#dfad82}
.recipeReaction{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#23434efc,#0e2030f6);pointer-events:auto;color:#fff0ce;text-align:center}
.recipeReaction strong{font-size:clamp(20px,3.5vw,35px);padding:0 20px;animation:reactionLabel 1.46s both}
.reactionHere{position:relative;width:min(360px,85vw);height:135px}.reactionHere .pi{height:88px;width:95px;filter:drop-shadow(0 6px 5px #1028396b)}
.reactInputs,.reactA,.reactB,.reactResult,.reactRing{position:absolute;inset:0;display:grid;place-items:center}
.reactA{animation:feedLeft 1.46s both}.reactB{animation:feedRight 1.46s both}.reactResult{animation:outputRecipe 1.46s both}.reactResult .pi{width:110px;height:103px}
.reactRing{inset:50% auto auto 50%;width:100px;height:100px;border-radius:50%;border:3px solid #a9e3c6;animation:ringRecipe 1.46s both}
.dinnerLog{padding:12px clamp(16px,3vw,27px) 0;display:flex;gap:12px;justify-content:center}.dinnerLog>div{display:grid;grid-template-columns:34px auto;grid-template-rows:1fr 1fr;align-items:center;gap:0 6px;flex:1;max-width:165px}
.dinnerLog .pi{width:33px;height:34px;grid-row:span 2}.dinnerLog small{color:#b7d2d4;font-size:12px}.dinnerLog strong{color:#ffdfa3}
.dinnerReset{margin:-5px clamp(16px,3vw,27px) 13px}.journeyAward.fittingBay{padding:0}
@keyframes seatIngredient{from{opacity:.25;transform:translateY(-12px) scale(.88)}to{opacity:1;transform:none}}
@keyframes rejectMixture{20%,70%{transform:translateX(3px)}45%{transform:translateX(-4px)}100%{transform:none}}
@keyframes feedLeft{0%,15%{opacity:1;transform:translateX(-77px) translateY(-5px) rotate(-9deg)}47%{opacity:1;transform:translateX(-9px) scale(.75)}58%,100%{opacity:0;transform:scale(.3)}}
@keyframes feedRight{0%,15%{opacity:1;transform:translateX(77px) translateY(-5px) rotate(9deg)}47%{opacity:1;transform:translateX(9px) scale(.75)}58%,100%{opacity:0;transform:scale(.3)}}
@keyframes outputRecipe{0%,44%{opacity:0;transform:scale(.15)}66%{opacity:1;transform:scale(1.11)}82%,100%{opacity:1;transform:scale(1)}}
@keyframes ringRecipe{0%,40%{opacity:0;transform:translate(-50%,-50%) scale(.25)}50%{opacity:.9}90%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@keyframes reactionLabel{0%,46%{opacity:0;transform:translateY(7px)}66%,100%{opacity:1;transform:none}}
@media(max-width:480px){.fittingControls{gap:8px}.fittingControls .btn{min-width:0}.fittingControls .kitScore{flex:1 0 100%;}.recipeBench{padding:9px 6px}.mixWell,.mixTarget{min-height:69px}.mixWell>.pi,.mixTarget>.pi{height:38px;width:40px}.labCheck .recipePicks button{padding:6px 8px}.dinnerLog{gap:5px}.dinnerLog small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.reactA,.reactB,.reactRing{display:none}.reactResult,.recipeReaction strong,.mixWell[data-item] .pi,.labCheck.wrongPair .recipeBench{animation:none}}

.missionBadge{display:flex;align-items:center;gap:14px;padding:12px clamp(12px,3vw,28px);background:#21394a;border-block:1px solid #6f8277}
.engineerPatch{width:76px;height:80px;object-fit:contain;flex:none}
[data-planet="mars"] .welcomeArt{background-image:url(assets/mars-landing.webp);background-position:center;background-size:cover}
[data-planet="mars"] .welcome .callSign,[data-planet="mars"] .journeyAtlas>.callSign{color:#ffc18a}
.boardFooter .flightLink{color:#ffd29a}.fittingControls #nextPlanet{margin-left:auto}
.missionBadge small,.missionBadge strong,.missionBadge span{display:block}.missionBadge small{font:700 10px/1.4 system-ui;letter-spacing:.12em;color:#ffda8e}.missionBadge strong{font:750 clamp(18px,3vw,26px)/1.2 system-ui;color:#fff2d9}.missionBadge span{font-size:13px;color:#ccdee5;margin-top:4px}.missionBadge .engineerPatch{animation:sewPatch .65s ease-out both}@keyframes sewPatch{from{transform:translateY(-7px) rotate(-11deg) scale(.85);opacity:.3}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.missionBadge .engineerPatch{animation:none}}

/* Keep the mission name readable on phones even if display fonts are unavailable. */
.welcomeCopy h2{font-family:"Segoe UI",system-ui,sans-serif;font-weight:750;letter-spacing:-.035em;font-size:clamp(40px,7vw,82px);line-height:1.06}
[data-planet="mars"] #scene{background:#975e43 url(assets/mars-ridge.webp) center top / cover no-repeat}
