:root{--ink:#3d4e36;--paper:#f2e5bb;--wood:#aa7d45;--edge:#6f5634;--green:#718b42}*{box-sizing:border-box}html,body{margin:0;background:#d7dfbf;color:var(--ink);font-family:'Microsoft YaHei','PingFang SC',sans-serif;overscroll-behavior:none}button,select{font:inherit;color:inherit}button{cursor:pointer;min-height:44px;padding:8px 12px;border:2px solid #8d774b;border-radius:12px;background:linear-gradient(#f8efcf,#e6d3a0);box-shadow:0 3px 0 #745d36;touch-action:manipulation;font-weight:700;text-shadow:0 1px #fff6d2}button:active{transform:translateY(2px);box-shadow:0 1px 0 #745d36}button:hover{filter:brightness(1.06)}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #fff8c3;outline-offset:2px}.primary{background:linear-gradient(#94af56,#67883b);color:#fff9d9;border-color:#4f6b31;text-shadow:0 2px #45602d;box-shadow:0 4px 0 #465b2b}.topbar{height:62px;display:flex;justify-content:space-between;align-items:center;padding:6px max(16px,env(safe-area-inset-left));background:#e6dfbd;border-bottom:3px solid #a6b18b;gap:12px}.brand{display:flex;flex-direction:column;gap:2px}.brand strong{font-size:21px;letter-spacing:2px}.brand small{font-size:9px;color:#83916d}.levelControls{display:flex;gap:8px;align-items:center;font-size:12px}.levelControls select{background:#f2e8c6;border:2px solid #b4b18b;border-radius:10px;padding:10px;max-width:260px;min-height:44px}.stage{position:relative;margin:auto;width:100vw;height:calc(100dvh - 90px);overflow:hidden;min-height:280px}.stage canvas#gameCanvas{display:block;position:absolute;inset:0;width:100%;height:100%}.buildPanel{position:absolute;inset:0;pointer-events:none}.buildPanel>*{pointer-events:auto}.panelHeader{position:absolute;top:16px;left:22px;color:#4b6441;font-size:17px;text-shadow:0 2px #eaf0c8}.eyebrow,.caption{display:none}.levelHint{position:absolute;top:44px;left:22px;margin:0;max-width:540px;font-size:12px;line-height:1.6;color:#5c7257;text-shadow:0 1px #eaf0cf;pointer-events:none}.workbench,.gridColumn{display:contents}.buildGrid{position:absolute;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);gap:0;pointer-events:auto;border:2px dashed #f9f4d2aa;border-radius:5px;background:#f9f7d50a;box-shadow:0 0 0 1px #60856455}.cell{min-width:0;min-height:0;padding:0;border:1px dashed #eef5d37a;border-radius:0;background:transparent!important;box-shadow:none;touch-action:none;color:transparent}.cell:hover{background:#fff8c738!important;border:2px solid #fff9c5}.cell:active{transform:none}.selection{position:absolute;left:22px;bottom:105px;font-size:12px;color:#f8f2d2;text-shadow:0 2px #4c6443;font-weight:700;pointer-events:none}.partList{position:absolute;bottom:12px;left:16px;right:148px;display:flex;gap:7px;align-items:stretch;pointer-events:auto;overflow-x:auto;padding:2px 1px 5px}.partList button{position:relative;flex:1;min-width:62px;max-width:115px;min-height:80px;padding:44px 5px 5px;font-size:11px;white-space:nowrap;border-radius:12px;background:linear-gradient(#eee5bb,#c9b481)}.partList button canvas{position:absolute;top:0;left:50%;transform:translateX(-50%);width:60px;height:50px;pointer-events:none}.partList button[data-part=erase],.partList button[data-part=cockpit]{padding:10px 5px;min-width:84px;max-width:110px;white-space:normal}.partList button.active{border-color:#fcf4af;background:linear-gradient(#f9e29c,#d2af65);box-shadow:0 3px 0 #8f713c,0 0 0 2px #6a8b4d}.buildActions{position:absolute;right:18px;top:16px;display:flex;gap:5px}.buildActions button{font-size:11px;padding:8px;min-width:46px}.warning{position:absolute;right:20px;bottom:111px;max-width:52%;font-size:11px;line-height:1.5;color:#fff8d9;text-shadow:0 2px #495a39;margin:0;text-align:right}.start{position:absolute;bottom:16px;right:16px;width:118px;height:78px;font-size:17px;display:flex;justify-content:center;align-items:center;gap:10px}.mapButton{position:absolute;right:18px;top:71px;z-index:3;font-size:12px}.overview .buildGrid{display:none}.overview .panelHeader{opacity:.8}.overview .selection{display:none}.hidden{display:none!important}.hud{position:absolute;inset:0;pointer-events:none}.hud>*{pointer-events:auto}#statusText{position:absolute;left:16px;top:16px;padding:10px 14px;background:#f7edccdd;border:2px solid #a9b48b;border-radius:12px;font-size:12px;max-width:65%}.meters{position:absolute;top:61px;left:20px;width:145px;height:6px;background:#fcf4d3;border:1px solid #a9a171;border-radius:8px;overflow:hidden}.fuel{height:100%;width:100%;background:#d89047}.controls{position:absolute;bottom:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px}.driveGroup{display:flex;gap:8px}.driveBtn{min-width:85px;min-height:58px;font-size:12px;touch-action:none;user-select:none}.driveBtn.engaged{background:#b6c473}.quickActions{position:absolute;right:18px;top:16px;display:flex;gap:7px}.quickActions button{font-size:12px}.resume{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);z-index:4}.modal{position:absolute;inset:0;z-index:8;background:#2f473b8f;backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center}.modalInner{width:min(500px,90%);background:linear-gradient(#f8edc6,#e6d3a3);border:4px solid #997545;box-shadow:0 7px 0 #5c5c38;border-radius:22px;padding:28px;text-align:center}.modalInner h2{font-size:25px;margin:6px 0 14px}.modalInner p{font-size:13px;line-height:1.8;color:#73704c}.modalBtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.modalBtns button{font-size:12px}.loading{position:absolute;inset:0;z-index:20;background:#efe7c5;padding:25px;color:#8b442d}.home{position:absolute;inset:0;z-index:10;background:#c6ddc044;backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center}.homeCard{position:relative;text-align:center;padding:22px 50px 25px;border-radius:28px;background:#f3eccbe8;border:3px solid #b3ac80;box-shadow:0 8px 0 #7a8a60,0 20px 60px #526c5a33}.homeKicker{font-size:11px;letter-spacing:3px;color:#84936c}.homeCard h1{font-size:45px;color:#526c3e;margin:8px 0;letter-spacing:5px;text-shadow:0 3px #fff4bc}.homeFriends{display:flex;justify-content:center;align-items:end;height:190px;gap:0}.homeFriends img{width:140px;height:175px;object-fit:contain;filter:drop-shadow(0 6px 5px #6b794b2a)}.homeFriends img+img{height:190px}.homeCard>p:not(.homeKicker){font-size:13px;color:#7a805b;line-height:1.8}.homeCard button{font-size:18px;min-width:230px;min-height:55px}.homeCard small{display:block;margin-top:17px;font-size:10px;color:#949772;letter-spacing:2px}footer{height:28px;padding:7px 16px;display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#839270;background:#dfe5c9}.portraitTip,.portraitOverlay{display:none}
@media(max-height:530px){.topbar{height:47px;padding:2px max(9px,env(safe-area-inset-left))}.brand strong{font-size:15px}.brand small{display:none}.levelControls{gap:5px;font-size:10px}.levelControls select{font-size:10px;padding:6px;max-width:195px}.levelControls button{font-size:10px;padding:6px;min-height:40px}.stage{height:calc(100dvh - 47px);min-height:0}footer{display:none}.panelHeader{top:10px;left:12px;font-size:14px}.levelHint{top:33px;left:12px;max-width:46%;font-size:10px}.buildActions{top:8px;right:8px;gap:4px}.buildActions button{font-size:9px;padding:5px;min-width:44px;min-height:44px}.mapButton{top:58px;right:8px;min-height:44px;font-size:10px}.partList{bottom:7px;left:8px;right:103px;gap:5px}.partList button{min-width:56px;min-height:67px;max-width:82px;padding:40px 3px 3px;font-size:9px}.partList button canvas{width:51px;height:43px}.partList button[data-part=erase],.partList button[data-part=cockpit]{min-width:60px;font-size:10px}.start{bottom:12px;right:8px;width:86px;height:63px;font-size:14px;gap:4px}.selection{left:10px;bottom:86px;font-size:10px}.warning{right:10px;bottom:86px;font-size:10px;max-width:53%}.controls{bottom:9px;left:8px;right:8px;gap:6px}.driveGroup{gap:5px}.driveBtn{min-width:67px;min-height:49px;font-size:10px;padding:7px}.quickActions{top:8px;right:8px}.quickActions button{font-size:10px;min-height:44px}#statusText{left:8px;top:8px;padding:9px;font-size:10px}.meters{top:49px;left:10px}.homeCard{padding:12px 40px;display:grid;grid-template-columns:210px 160px;column-gap:18px;align-items:center}.homeKicker{grid-column:1;font-size:10px;margin:0}.homeCard h1{grid-column:1;font-size:32px;letter-spacing:2px;margin:3px 0}.homeFriends{grid-column:2;grid-row:1 / span 5;height:180px}.homeFriends img{width:94px;height:140px}.homeFriends img+img{height:158px}.homeCard>p:not(.homeKicker){grid-column:1;font-size:11px;margin:6px 0}.homeCard button{grid-column:1;min-width:0;min-height:47px;font-size:15px}.homeCard small{grid-column:1;font-size:8px;margin:9px 0}.modalInner{padding:17px}.modalInner h2{font-size:21px}.modalInner p{font-size:12px}.modalBtns button{min-height:44px}}


.start{white-space:nowrap;font-size:15px;padding:8px}.start span{display:none}

.starGoal{position:absolute;top:88px;left:22px;z-index:3;font-size:13px;color:#78632d;background:#f8edc9cf;border:1px solid #c1b482;padding:7px 12px;border-radius:9px;pointer-events:none}.tourButton{position:absolute;top:71px;right:112px;z-index:3;font-size:12px}.introOverlay{position:absolute;inset:0;pointer-events:none;z-index:5;border-top:15px solid #2e493c70;border-bottom:15px solid #2e493c70}.introOverlay #introCaption{position:absolute;left:50%;bottom:65px;transform:translateX(-50%);background:#f7edcce8;border:2px solid #b8ad7e;border-radius:12px;padding:12px 22px;font-size:14px;white-space:nowrap;color:#52623c}.introTrack{position:absolute;bottom:45px;left:30%;right:30%;height:4px;background:#f6edc77a;border-radius:3px;overflow:hidden}#introProgress{height:100%;background:#fff1ac;width:0}#skipIntro{position:absolute;bottom:10px;right:15px;pointer-events:auto;font-size:12px}.introOverlay~.home{z-index:10}
@media(max-height:530px){.starGoal{top:64px;left:12px;font-size:10px;padding:5px 8px}.tourButton{top:58px;right:91px;font-size:10px;min-height:44px}.introOverlay #introCaption{bottom:61px;font-size:11px;padding:9px 12px;max-width:90%;white-space:normal;text-align:center}.introTrack{bottom:52px}.introOverlay{border-width:9px}#skipIntro{bottom:5px;font-size:10px}}
.resume:active{transform:translate(-50%,-50%)} @media(max-height:530px){.partList button{min-height:62px}.partList{bottom:5px}}

@media(max-height:530px){.starGoal{left:auto;right:10px;top:112px;max-width:45%;text-align:right}}

/* Desktop: keep the scene readable on laptops, fullscreen and ultrawide monitors. */
html{min-height:100%;background:#263f35}body{min-height:100vh;min-height:100dvh}
#app{max-width:1920px;margin:0 auto;background:#d7dfbf;box-shadow:0 0 80px #20352a55}
#app:fullscreen{max-width:none;width:100%;height:100%;overflow:auto}
.stage{width:100%;height:calc(100vh - 90px);height:calc(100dvh - 90px)}
.controlHelp{position:absolute;bottom:104px;left:22px;max-width:60%;font-size:11px;color:#4a6242;background:#f6edcecf;padding:7px 10px;border-radius:8px;pointer-events:none}
#app[data-state=build] .controlHelp,#app[data-state=intro] .controlHelp{display:none}
#app[data-state=success] .controlHelp,#app[data-state=failed] .controlHelp{display:none}
.home:not(.hidden)~.controlHelp{display:none}
.levelControls button{white-space:nowrap}
@media(min-width:1100px) and (min-height:650px){
 .buildActions button{font-size:12px;min-width:56px}.partList button{font-size:13px;min-height:88px}
 .start{height:84px;font-size:17px}.driveBtn{font-size:14px;min-width:100px;min-height:64px}
 footer{font-size:11px}.homeCard small{font-size:12px}
}
@media(max-height:530px) and (orientation:landscape){
 .stage{height:calc(100vh - 47px);height:calc(100dvh - 47px)}
 .controlHelp{bottom:65px;left:10px;font-size:9px;padding:5px 8px}
 .brand{flex-shrink:0}.levelControls{min-width:0}.levelControls select{max-width:170px}
}

/* Locked portrait browsers get a complete 90-degree virtual landscape viewport.
   Native DOM hit testing includes this transform; no pointer-coordinate hacks are needed. */
@media(orientation:portrait) and (max-width:900px){
 html,body{width:100vw;height:100vh;height:100dvh;min-height:0;overflow:hidden}
 #app{position:fixed;left:100vw;top:0;width:100vh;width:100dvh;height:100vw;max-width:none;transform-origin:0 0;transform:rotate(90deg);overflow:hidden}
.topbar{height:47px;padding:2px max(9px,env(safe-area-inset-left))}.brand strong{font-size:15px}.brand small{display:none}.levelControls{gap:5px;font-size:10px}.levelControls select{font-size:10px;padding:6px;max-width:195px}.levelControls button{font-size:10px;padding:6px;min-height:40px}.stage{height:calc(100dvh - 47px);min-height:0}footer{display:none}.panelHeader{top:10px;left:12px;font-size:14px}.levelHint{top:33px;left:12px;max-width:46%;font-size:10px}.buildActions{top:8px;right:8px;gap:4px}.buildActions button{font-size:9px;padding:5px;min-width:44px;min-height:44px}.mapButton{top:58px;right:8px;min-height:44px;font-size:10px}.partList{bottom:7px;left:8px;right:103px;gap:5px}.partList button{min-width:56px;min-height:67px;max-width:82px;padding:40px 3px 3px;font-size:9px}.partList button canvas{width:51px;height:43px}.partList button[data-part=erase],.partList button[data-part=cockpit]{min-width:60px;font-size:10px}.start{bottom:12px;right:8px;width:86px;height:63px;font-size:14px;gap:4px}.selection{left:10px;bottom:86px;font-size:10px}.warning{right:10px;bottom:86px;font-size:10px;max-width:53%}.controls{bottom:9px;left:8px;right:8px;gap:6px}.driveGroup{gap:5px}.driveBtn{min-width:67px;min-height:49px;font-size:10px;padding:7px}.quickActions{top:8px;right:8px}.quickActions button{font-size:10px;min-height:44px}#statusText{left:8px;top:8px;padding:9px;font-size:10px}.meters{top:49px;left:10px}.homeCard{padding:12px 40px;display:grid;grid-template-columns:210px 160px;column-gap:18px;align-items:center}.homeKicker{grid-column:1;font-size:10px;margin:0}.homeCard h1{grid-column:1;font-size:32px;letter-spacing:2px;margin:3px 0}.homeFriends{grid-column:2;grid-row:1 / span 5;height:180px}.homeFriends img{width:94px;height:140px}.homeFriends img+img{height:158px}.homeCard>p:not(.homeKicker){grid-column:1;font-size:11px;margin:6px 0}.homeCard button{grid-column:1;min-width:0;min-height:47px;font-size:15px}.homeCard small{grid-column:1;font-size:8px;margin:9px 0}.modalInner{padding:17px}.modalInner h2{font-size:21px}.modalInner p{font-size:12px}.modalBtns button{min-height:44px}
.starGoal{top:64px;left:12px;font-size:10px;padding:5px 8px}.tourButton{top:58px;right:91px;font-size:10px;min-height:44px}.introOverlay #introCaption{bottom:61px;font-size:11px;padding:9px 12px;max-width:90%;white-space:normal;text-align:center}.introTrack{bottom:52px}.introOverlay{border-width:9px}#skipIntro{bottom:5px;font-size:10px}
.partList button{min-height:62px}.partList{bottom:5px}
.starGoal{left:auto;right:10px;top:112px;max-width:45%;text-align:right}

 .stage{height:calc(100vh - 47px);height:calc(100dvh - 47px)}
 .controlHelp{bottom:65px;left:10px;font-size:9px;padding:5px 8px}
 .brand{flex-shrink:0}.levelControls{min-width:0}.levelControls select{max-width:170px}

 .stage{width:100%;height:calc(100vw - 47px);min-height:0}
 .topbar{padding-left:max(9px,env(safe-area-inset-top));padding-right:max(9px,env(safe-area-inset-bottom))}
 .controlHelp{bottom:65px;left:10px;font-size:9px;padding:5px 8px}
 #fullscreenBtn{display:none}
}
/* A short 320px virtual screen still leaves all four grid rows above the parts tray. */
@media(orientation:portrait) and (max-width:350px){
 .panelHeader{font-size:12px;top:5px}.levelHint{display:none}
 .buildActions{display:grid;grid-template-columns:repeat(3,44px);gap:5px;right:8px}
 .tourButton,.mapButton{top:110px}.starGoal{top:166px;max-width:200px;font-size:9px}
 .partList button{min-height:52px;padding-top:31px}.partList button canvas{width:43px;height:35px}
 .partList button[data-part=erase],.partList button[data-part=cockpit]{padding:5px}
 .start{height:50px;bottom:9px}.selection,.warning{bottom:65px;font-size:9px}
 .homeCard{padding:6px 28px}.homeFriends{height:150px}.homeFriends img{height:120px}.homeFriends img+img{height:140px}
}
.waitingFriends{position:absolute;top:3px;left:0;right:0;display:flex;justify-content:center;align-items:end;height:42px;pointer-events:none}
.waitingFriends img{height:40px;width:32px;object-fit:contain}
.partList button[data-part=cockpit].unplaced{padding:46px 3px 4px;font-size:11px}
@media(max-height:530px), (orientation:portrait) and (max-width:900px){.waitingFriends{height:33px}.waitingFriends img{height:32px;width:26px}.partList button[data-part=cockpit].unplaced{padding:36px 2px 3px;font-size:9px}}
@media(orientation:portrait) and (max-width:350px){.waitingFriends{height:28px}.waitingFriends img{height:27px;width:22px}.partList button[data-part=cockpit].unplaced{padding-top:30px;font-size:8px}}

/* A separate one-shot balloon control, clear of the driving fingers. */
.ventAction{position:absolute;right:20px;bottom:104px;min-width:150px;min-height:76px;border-radius:22px;background:linear-gradient(#fff0bc,#e0b36e);font-size:16px;touch-action:manipulation;box-shadow:0 4px 0 #987243}
.damageText{position:absolute;left:20px;top:78px;padding:6px 10px;border-radius:8px;background:#fff1d2c9;color:#78533a;font-size:11px;pointer-events:none;max-width:62%}
@media(max-height:530px), (orientation:portrait) and (max-width:900px){.ventAction{right:10px;bottom:72px;min-width:135px;min-height:62px;font-size:13px}.damageText{left:10px;top:57px;font-size:9px;max-width:65%;padding:4px 7px}}

.fanControls{display:flex;gap:8px}.fanControl{white-space:pre-line;border-color:var(--fan-color);line-height:1.4}.fanControl.engaged{background:var(--fan-color);color:#fff;text-shadow:none}
@media(max-height:530px), (orientation:portrait) and (max-width:900px){.fanControls{gap:5px}.powerGroup .fanControl{min-width:64px;padding:5px;font-size:10px}}
@media(orientation:landscape) and (max-width:650px), (orientation:portrait) and (max-height:650px){.controls>.driveGroup:first-child .driveBtn{min-width:59px;padding:5px}.powerGroup .driveBtn{min-width:60px;padding:5px}.driveGroup,.fanControls{gap:5px}}

/* Sound controls live inside the rotated app, with native labelled sliders. */
.soundPanel{position:absolute;inset:0;z-index:1000;background:#203d3999;display:grid;place-items:center;padding:10px}
.soundCard{width:min(340px,95%);max-height:100%;overflow:auto;box-sizing:border-box;background:#fbf4df;border:2px solid #72917b;border-radius:18px;padding:16px;box-shadow:0 12px 48px #102d3955;display:flex;flex-direction:column;gap:4px}
.soundHeading{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.soundHeading strong{font-size:18px}
.soundCard label{display:flex;justify-content:space-between;font-weight:700;font-size:13px}.soundCard input{width:100%;height:44px;min-height:44px;margin:0;accent-color:#477b61;touch-action:auto}.soundCard button{min-height:44px}.soundCard small{font-size:11px;text-align:center;margin-top:4px;color:#527460}
@media(max-height:360px),(orientation:portrait) and (max-width:360px){.soundCard{padding:10px;gap:0}.soundHeading{margin:0}}