*{box-sizing:border-box}body{margin:0;background:#e8e1cf;color:#302c29;font-family:'Segoe UI','Microsoft JhengHei',sans-serif;background-image:radial-gradient(#c9beaa 1px,transparent 1px);background-size:16px 16px}main{display:flex;justify-content:center;gap:44px;align-items:center;min-height:100vh;padding:24px}aside{width:220px}.eyebrow{font-size:10px;letter-spacing:3px;color:#777361}h1{font-size:62px;line-height:1.08;letter-spacing:4px;margin:24px 0;color:#265e5c}h1 span{display:block;font-size:15px;letter-spacing:2px;margin-top:18px}.intro{line-height:1.9;font-size:14px}.guide{border-top:2px solid #b9af96;margin-top:32px;padding-top:12px}h2{font-size:15px}p{font-size:13px;line-height:1.8}kbd{background:#faf4e5;border:1px solid #b7aa92;border-radius:4px;padding:2px 5px;font-size:11px}.legend{font-size:12px;line-height:2.5;margin-top:24px}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid #302c29;margin-right:10px}.orange{background:#ef9748}.pink{background:#ee8db4}.foot{color:#827968;font-size:11px;margin-top:24px}.cabinet{width:min(480px,100%);border:3px solid #302c29;border-radius:22px;background:#faf1da;overflow:hidden;box-shadow:8px 10px 0 #b7ab8e;flex-shrink:0}header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:3px solid #302c29}small{display:block;font-size:10px;letter-spacing:1px;color:#786f5e}header b{display:block;font-size:18px;color:#ad5545}button{font:inherit;cursor:pointer;border:2px solid #302c29;border-radius:10px;background:#f7e9cc;color:#302c29;padding:9px 14px;box-shadow:0 3px 0 #302c29}button:hover{background:#fff8e6}button:active{transform:translateY(2px);box-shadow:none}button:disabled{opacity:.45;cursor:default}.stage{position:relative}canvas{width:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:#294b5066;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.panel{width:100%;background:#faf1da;border:3px solid #302c29;border-radius:18px;padding:25px;text-align:center;box-shadow:6px 6px 0 #302c2930}.panel h2{font-size:30px;margin:5px 0 16px;color:#265e5c}.panel p{font-size:14px}.panel .primary{background:#2f7472;color:#fff5dd;width:100%;margin-top:12px;padding:13px}.choices{display:grid;gap:12px}.choices button{text-align:left;padding:14px}.choices strong{display:block;color:#265e5c}.choices span{font-size:12px;display:block;line-height:1.6;margin-top:5px}.toast{position:absolute;top:20%;left:10%;width:80%;text-align:center;font-weight:bold;color:#fff8dd;text-shadow:2px 2px #302c29;pointer-events:none;font-size:23px}footer{padding:10px 14px 14px;border-top:3px solid #302c29}.xp{height:5px;background:#d8cfb8;border-radius:5px;margin-bottom:12px}.xp span{display:block;height:100%;background:#65a59a}.controls{display:flex;align-items:center;gap:14px}.controls button{min-width:85px}.energy{flex:1}.energy div{height:9px;background:#d8cfb8;border-radius:6px;margin-top:5px;overflow:hidden}.energy span{height:100%;display:block;background:#d87f9c}.energy b{font-size:10px}.right h2{margin-top:28px}.route{border-left:2px solid #a1a78f;padding-left:16px;color:#7c7d69}.record{border-top:2px solid #b9af96;margin-top:28px;padding-top:18px;font-size:12px}.record b{display:block;font-size:24px;color:#265e5c;margin:5px 0 18px}#loadout{font-size:13px;line-height:2;color:#265e5c}@media(max-width:1050px){main{gap:22px}.right{display:none}}@media(max-width:750px){main{padding:10px}aside{display:none}.cabinet{width:min(480px,calc((100dvh - 140px)*.667))}.controls{gap:8px}.controls button{min-width:68px;padding:6px}.panel{padding:16px}.panel h2{font-size:24px}} 

#ability{font-size:11px;text-align:center;color:#743858;min-height:20px;margin-bottom:5px}.controls button.active{background:#efb5cf}.controls button.ready{background:#f1c86a;box-shadow:0 3px 0 #302c29,0 0 14px #db9b53}.legend .pink{border-radius:0;transform:rotate(45deg)}.cabinet{width:min(480px,calc((100dvh - 210px)*.667))}header b{font-size:16px}@media(max-width:750px){.cabinet{width:min(calc(100vw - 28px),calc((100dvh - 190px)*.667))}header{padding:8px 12px;height:56px}.overlay{padding:12px}.panel p{font-size:12px}.choices{gap:8px}.choices button{padding:10px}#ability{font-size:10px}}@media(max-height:620px){main{align-items:flex-start}.cabinet{width:280px}.panel h2{font-size:21px}.panel{padding:12px}.panel p{font-size:11px}.choices button{padding:6px}.choices span{font-size:10px}}

@media(min-width:751px){main{padding:16px}.cabinet{width:min(480px,calc((100dvh - 250px)*.667))}}@media(min-width:751px) and (max-height:800px){h1{font-size:50px;margin:18px 0}.guide{margin-top:20px}.legend{margin-top:16px}.foot{margin-top:16px}}
#stage-progress{font-size:10px;text-align:center;color:#265e5c;min-height:16px;margin-bottom:3px}.choices button:disabled{box-shadow:none}.panel .choices span{font-size:11px}.panel .choices button{padding:10px}.panel p{margin:10px 0}@media(min-width:751px){.cabinet{width:min(480px,calc((100dvh - 275px)*.667))}}@media(max-width:750px){.panel .choices button{padding:7px}.panel .choices strong{font-size:13px}.panel .choices span{font-size:10px}.panel p{font-size:11px}}

.overlay .panel{max-height:100%;overflow-y:auto}.overlay{padding:12px}.panel .choices{gap:8px}.panel .choices button{padding:8px}.panel .choices strong{font-size:14px}.panel .choices span{font-size:10px}.panel h2{font-size:24px;margin:5px 0 12px}.panel{padding:16px}

.bomb-control{width:100%;padding:4px;margin:3px 0 5px;font-size:11px;background:#f7ddb0}.bomb-control:disabled{opacity:.5}
@media(min-width:751px){.cabinet{width:min(480px,calc((100dvh - 305px)*.667))}}
.legend i{position:relative;width:15px;height:15px;vertical-align:middle;margin-right:12px}.legend .orange{background:radial-gradient(circle at 35% 65%,#fff0b1 0 12%,#ed953a 22% 58%,#a85829 65%);border:2px solid #78432a;box-shadow:0 -4px 5px #eca34b66}.legend .orange:after{content:'';position:absolute;inset:2px;border-bottom:1px solid #ffd47a;border-radius:50%}.legend .pink{background:linear-gradient(135deg,#ffe1ef 0 35%,#e77bb8 36% 70%,#b64982 71%);border:1.5px solid #733453;box-shadow:0 0 7px #e895c488}.legend .pink:after{content:'';position:absolute;inset:4px;background:#fff4fc;border:1px solid #ffcee8}
.backup-upload{display:block;border:2px solid #786e58;border-radius:8px;padding:10px;margin:12px 0;font-size:13px}.backup-upload input{display:block;width:100%;margin-top:8px}#backup-menu{margin-top:12px;width:100%}
.hangar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.hangar-grid button{padding:7px;text-align:left}.hangar-grid strong{display:block;font-size:12px}.hangar-grid span{font-size:10px;line-height:1.4;display:block}.hangar-grid .selected{background:#b4d3c5;border-color:#286661}#boss-challenges{width:100%;margin-top:10px}
.audio-slider{display:block;font-size:13px;text-align:left;margin:15px 0}.audio-slider input{width:100%;display:block;accent-color:#367c72}.audio-slider output{float:right}#audio-settings,#menu-audio{margin-top:10px}#menu-audio{width:100%}
/* Shared Playroom navigation, styled for the sky adventure. */
.playroom-header{height:70px;max-width:1120px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b9af96;font-size:11px;letter-spacing:2px}
.playroom-header a{display:flex;align-items:center;gap:10px;color:#265e5c;text-decoration:none;font-weight:700}
.playroom-header a:hover{color:#ad5545}.playroom-header a:focus-visible{outline:3px solid #265e5c;outline-offset:5px;border-radius:4px}
.playroom-header .brand-mark{display:grid;place-items:center;width:29px;height:29px;background:#265e5c;color:#faf2d8;font:20px serif;border-radius:5px}
.playroom-header .back{font-size:11px;font-weight:400;color:#786f5e;letter-spacing:1px}
.playroom-header .online{font-size:11px;letter-spacing:1px;color:#786f5e}.playroom-header .online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#5c8662;margin-right:7px}
main{min-height:calc(100dvh - 70px)}.cabinet{width:min(480px,calc((100dvh - 280px)*.667))}
@media(max-width:750px){.playroom-header{height:56px;padding:12px 16px}.playroom-header .online{display:none}.playroom-header .back{font-size:10px}main{min-height:calc(100dvh - 56px)}.cabinet{width:min(calc(100vw - 28px),calc((100dvh - 246px)*.667))}}
@media(max-height:620px){.cabinet{width:280px}}
/* Compact skill rail keeps controls outside the flight canvas. */
.cabinet{width:min(532px,calc((100dvh - 215px)*.667 + 52px))}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:stretch;background:#faf1da}
.flight-actions{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:10px 5px;border-left:2px solid #b9af96;background:#f4e8ce}
.flight-actions button{width:40px;min-height:48px;padding:4px 1px;border-radius:12px;box-shadow:0 2px 0 #302c29;background:#fff5df}
.flight-actions .action-icon{display:block;font-size:26px;line-height:29px;font-weight:700}.flight-actions small{font-size:8px;letter-spacing:0}
#absorb .action-icon{color:#b64982}#burst .action-icon{color:#267970}#bomb .action-icon{color:#a9642b}
.flight-actions button:focus-visible{outline:3px solid #267970;outline-offset:2px}
.flight-actions .energy{flex:none}.flight-actions .energy div{height:5px;margin:0;background:#d8cfb8}.flight-actions .energy span{background:#267970}
.cabinet footer{position:relative;padding:6px 12px 10px;padding-right:52px}#stage-progress{text-align:left;margin:0;min-height:14px}.xp{margin:5px 0 0;height:4px}#level{position:absolute;right:8px;top:9px;font-size:10px;color:#265e5c}
#ability{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:750px){.cabinet{width:min(calc(100vw - 24px),calc((100dvh - 188px)*.667 + 52px))}main{padding:10px}}
@media(max-height:620px){.cabinet{width:min(calc(100vw - 24px),332px)}}
/* Keep modal actions separated, including adjacent pause/confirm buttons. */
.overlay .panel>button{display:block;width:100%;margin:12px 0 0}
.overlay .panel .choices,.overlay .panel .hangar-grid{gap:12px}
.flight-actions svg.action-icon{width:28px;height:28px;margin:0 auto 2px;filter:drop-shadow(0 1px 0 #fff4df)}
.flight-actions button{background:linear-gradient(145deg,#fff9e9,#ead8ae);border-color:#79644d}
.flight-actions button.active{background:linear-gradient(145deg,#ffe7f4,#e5a2c5)}
.flight-actions button.ready{background:linear-gradient(145deg,#e8fff0,#aad8be)}
/* Tablet touch targets, safe areas, and landscape layout. */
button,a,input{touch-action:manipulation}
.overlay .panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(any-pointer:coarse){
 body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
 main{padding:12px;gap:0;align-items:center}main>aside{display:none}
 .playroom-header{height:56px;padding:10px 16px}.playroom-header .online{display:none}
 main{min-height:calc(100dvh - 56px)}
 .cabinet{width:min(calc(100vw - 32px),calc((100dvh - 210px - env(safe-area-inset-bottom))* .667 + 60px))}
 .stage{grid-template-columns:minmax(0,1fr) 60px}.flight-actions{padding:10px 6px;gap:12px}
 .flight-actions button{width:46px;min-height:52px}.cabinet header{height:56px;padding:8px 12px}.cabinet header button{min-width:44px;min-height:44px}
 .overlay .panel button{min-height:44px}.overlay .panel .hangar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .audio-slider input{min-height:44px}.backup-upload input{max-width:100%;min-height:44px}
}