/* Mission 04 only: Farm Life content inside the Mission 01 visual system. */
body[data-mission="4"] .intro-scene{background-image:url(../mission-04-hero.png)!important}
body[data-mission="4"] .level-scene{background:radial-gradient(circle at 50% 40%,#253427 0,#080d0a 47%,#020403 80%),url(../mission-04-hero.png) 50%/cover fixed!important}
body[data-mission="4"] .briefing-scene{background:linear-gradient(#07100de8,#030504f5),url(../mission-04-hero.png) 50%/cover fixed!important}
body[data-mission="4"] .complete-scene{background-image:url(../mission-04-hero.png)!important}

/* Vocabulary: exact Mission 01 page rhythm and information order. */
body[data-mission="4"] .learn-scene{padding-left:12px!important;padding-right:12px!important;overflow-x:hidden!important}
body[data-mission="4"] .learn-layout{width:100%!important;max-width:100%!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
body[data-mission="4"] .hotbar{order:1!important;width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:repeat(6,minmax(42px,54px))!important;justify-content:center!important;gap:7px!important;overflow:visible!important}
body[data-mission="4"] .hotbar button{width:100%!important;min-width:0!important;height:52px!important}
body[data-mission="4"] .hotbar button img{display:block!important;width:34px!important;height:34px!important;margin:auto!important;object-fit:contain!important}
body[data-mission="4"] .item-stage{order:2!important;width:100%!important;max-width:100%!important;height:230px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
body[data-mission="4"] .item-art{position:static!important;display:block!important;width:170px!important;height:170px!important;max-width:65vw!important;max-height:65vw!important;margin:0 auto!important;transform:none!important;object-fit:contain!important;object-position:center!important}
body[data-mission="4"] .language-panel{order:3!important;width:100%!important;max-width:100%!important;border-left:0!important;border-top:1px solid #41573d!important;padding:18px 10px!important;text-align:center!important}
body[data-mission="4"] :is(.mission-use,.speech){text-align:left!important}
body[data-mission="4"] .speech{grid-template-columns:64px minmax(0,1fr)!important;align-items:center!important}
body[data-mission="4"] .speech>.safety-officer{display:block!important;width:60px!important;height:60px!important;object-fit:contain!important;object-position:center bottom!important;align-self:end!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))!important}
body[data-mission="4"] .speech>div>small:before{content:"XM安全员 · ";color:#d7e5d8}

/* Briefing: Farm Life content in the Mission 01 information architecture. */
body[data-mission="4"] .task-columns li button{display:flex!important;align-items:flex-start!important;gap:7px!important;white-space:normal!important;text-align:left!important}
body[data-mission="4"] .mission04-en{display:block;min-width:0}
body[data-mission="4"] .mission04-zh{display:block;width:100%;font-size:1em;line-height:1.45;word-break:normal;overflow-wrap:break-word;color:#d7e5d8}
body[data-mission="4"] .prompt-list button{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;text-align:left!important}
body[data-mission="4"] .prompt-list button .mission04-zh{grid-column:1/2;color:#9ba79d;font-size:9px}
body[data-mission="4"] .prompt-list button .mission04-play{grid-column:2;grid-row:1/3;align-self:center;color:var(--accent)}
body[data-mission="4"] .improve-challenge{grid-template-columns:minmax(0,1fr) 84px!important;align-items:center!important}

/* Quiz uses the Mission 01 geometry; only protect Farm Life image proportions. */
body[data-mission="4"] .quiz-item-art,body[data-mission="4"] .build-part img{object-fit:contain!important;object-position:center!important}

@media (width<=760px){
  body[data-mission="4"] .intro-scene{background-position:58% center!important}
  body[data-mission="4"] .hotbar{grid-template-columns:repeat(3,40px)!important;gap:5px!important}
  body[data-mission="4"] .hotbar button{height:46px!important}
  body[data-mission="4"] .hotbar button img{width:30px!important;height:30px!important}
  body[data-mission="4"] .item-stage{height:200px!important}
  body[data-mission="4"] .item-art{width:min(145px,72vw)!important;height:min(145px,72vw)!important}
  body[data-mission="4"] .speech{grid-template-columns:54px minmax(0,1fr)!important}
  body[data-mission="4"] .speech>.safety-officer{width:50px!important;height:50px!important}
}
