:root{font-family:system-ui,"Noto Sans TC",sans-serif;color:#f6fbff;background:#071827}*{box-sizing:border-box}body{margin:0;background:#071827}.app{width:min(100%,760px);min-height:100svh;margin:auto;padding:12px}.topbar{display:grid;grid-template-columns:58px minmax(0,1fr)120px;gap:10px;align-items:center}.topbar h1{margin:0;font-size:clamp(1.05rem,3vw,1.5rem)}.home-link,.return{width:48px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:#f7d76b;color:#162335;font-size:1.55rem;text-decoration:none}.home-link{grid-template-columns:16px 28px;width:58px}.home-link img{width:28px;height:28px}.locale{display:grid;gap:3px;font-size:.72rem}.locale select{min-height:32px;border-radius:8px}.main-screen{display:grid;gap:14px;margin-top:14px}.cover{width:min(100%,520px);justify-self:center;border-radius:18px}.main-screen h2,.main-screen p{margin:0}.primary,.secondary{min-height:48px;border:0;border-radius:12px;font-weight:800;padding:10px 16px}.primary{background:#ffd66a;color:#182033}.secondary{background:#17465b;color:#fff}.stage-screen{min-height:calc(100svh - 24px);display:grid;grid-template-rows:48px 44px minmax(0,1fr) 56px;gap:10px}.stage-copy{display:flex;justify-content:space-between;align-items:center}.stage-rail{display:grid;grid-auto-flow:column;grid-auto-columns:264px;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:max(24px,calc((100% - 264px)/2));touch-action:pan-x}.stage-card{height:190px;scroll-snap-align:center;border:2px solid #528fb0;border-radius:18px;background:linear-gradient(145deg,#193e5c,#0d263f);color:#fff;padding:16px;text-align:left;display:grid;align-content:space-between}.stage-card.selected{border-color:#ffd66a;box-shadow:0 0 22px #ffd66a66}.battle-shell{position:fixed;inset:0;width:100vw;height:var(--wp-mobile-vh,100dvh);display:grid;grid-template-rows:minmax(0,1fr) 56px;overflow:hidden;background:#071827}.battle-canvas{min-height:0;display:grid;grid-template-rows:52px 46px minmax(0,1fr) 58px;overflow:hidden}.battle-hud,.objective,.flight-row{display:flex;align-items:center;gap:10px;padding:6px 10px;min-width:0}.battle-hud strong{flex:1;text-align:center}.objective{justify-content:space-between;background:#12344a;font-size:.82rem}.route-field{position:relative;min-height:0;overflow:hidden;background:#0b3044}.skyport-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.flight,.dock{position:absolute;z-index:2;width:72px;height:72px;background-size:contain;background-position:center;background-repeat:no-repeat;touch-action:none}.flight{left:45%;top:44%;background-image:url('../../assets/animal-skyport-dispatch-airship-cargo.webp');filter:drop-shadow(0 4px 5px #001);cursor:grab}.dock{width:92px;height:92px}.dock img{width:100%;height:100%;object-fit:contain}.cargo{left:5%;top:12%}.passenger{right:5%;top:12%}.repair{left:calc(50% - 46px);bottom:4%}.route-line{position:absolute;z-index:1;height:5px;background:#7af2e7;border-radius:8px;transform-origin:left center;opacity:0;box-shadow:0 0 10px #7af2e7}.feedback{position:absolute;z-index:3;left:50%;top:12px;transform:translateX(-50%);background:#071827dd;border-radius:10px;padding:7px 12px;font-weight:800;white-space:nowrap}.ad-reserve{height:56px;min-height:56px;background:#031017;border-top:1px solid #28506b;pointer-events:none}.result{position:fixed;inset:0;z-index:5;display:grid;place-content:center;gap:12px;padding:28px;text-align:center;background:#061521ee}.result>*{margin:0}.hidden{display:none!important}@media(min-width:641px){.battle-canvas,.battle-shell>.ad-reserve{width:min(100%,960px);justify-self:center}}@media(max-height:500px){.battle-canvas{grid-template-rows:44px 38px minmax(0,1fr) 48px}.flight-row{font-size:.75rem}.flight,.dock{transform:scale(.78)}}
.weather-zone{position:absolute;inset:12% 18%;z-index:1;width:64%;height:64%;object-fit:contain;opacity:.78;pointer-events:none}
.battle-canvas{grid-template-rows:52px 54px minmax(0,1fr) 58px}.objective{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:20px 24px;align-items:center;column-gap:10px;padding:5px 10px;background:#12344a;font-size:.78rem;min-width:0;overflow:hidden}.objective #resourceText{white-space:nowrap;font-size:.72rem}.objective #flightTask{grid-column:1/-1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff3ad;font-size:.78rem}@media(max-height:500px){.battle-canvas{grid-template-rows:44px 48px minmax(0,1fr) 48px}.objective{grid-template-rows:18px 20px;font-size:.72rem}.objective #flightTask{font-size:.7rem}}
.result-rewards{display:grid;grid-template-columns:repeat(3,minmax(74px,1fr));gap:8px;max-width:420px}.result-rewards span{display:grid;place-items:center;min-height:48px;padding:8px 6px;border:1px solid #6ca8b6;border-radius:10px;background:#10364c;color:#dffbff;font-weight:800;font-size:.76rem;line-height:1.2}
.stage-screen{grid-template-rows:48px 44px auto minmax(0,1fr) 56px}.contract-choice{display:flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid #4d94a7;border-radius:12px;background:#10364c;color:#e4fbff;font-size:.8rem;font-weight:700}.contract-choice input{inline-size:20px;block-size:20px;accent-color:#f7d76b}
.contract-row{display:grid;grid-template-columns:minmax(0,1fr) 136px;gap:8px;align-items:stretch;min-height:64px;height:64px}.contract-choice{min-width:0;overflow:hidden}.contract-choice span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.insurance-btn{width:136px;min-height:0;padding:8px 10px;font-size:.78rem}.insurance-btn.is-confirming{color:#162335;background:#f7d76b;box-shadow:0 0 0 3px #f7d76b44}.insurance-btn:disabled{opacity:.62}
@media(max-height:500px){.route-field .repair{left:auto;right:4%;bottom:3%}.route-field .flight{top:34%}}

/* A readable task card and named docks prevent late-shift rules from becoming guesswork. */
.objective{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;justify-content:initial}
.objective #flightTask{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff0ae;font-size:.74rem}
.dock-label{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);min-width:max-content;padding:2px 5px;border-radius:5px;background:#061521dd;color:#fff;font-size:.63rem;font-weight:800;pointer-events:none}
.dock-target-badge{position:absolute;left:50%;top:-12px;transform:translateX(-50%);min-width:max-content;padding:3px 8px;border:2px solid #fff4b7;border-radius:999px;background:#f7d76b;color:#162335;font-size:.6rem;font-weight:1000;line-height:1;box-shadow:0 0 12px #f7d76bcc;pointer-events:none}
.dock:not(.is-target):not(.is-alternate) .dock-target-badge{display:none}
.dock.is-target{filter:drop-shadow(0 0 8px #f7d76b)}
.dock.is-target .dock-label{background:#f7d76b;color:#162335}
.dock.is-alternate{filter:drop-shadow(0 0 8px #72e9ff)}
.dock.is-alternate .dock-target-badge{border-color:#bff8ff;background:#17647a;color:#fff;box-shadow:0 0 12px #72e9ff99}
.dock.is-alternate .dock-label{background:#17647a;color:#fff}
.flight:focus-visible,.dock:focus-visible{outline:4px solid #fff4b7;outline-offset:3px;border-radius:14px}.dock.is-keyboard-choice{filter:drop-shadow(0 0 10px #7af2e7)}
.battle-canvas{grid-template-rows:52px 76px minmax(0,1fr) 58px}
.objective #flightTask{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:16px 16px;gap:2px;min-width:0;white-space:normal;line-height:1.22}
.task-destination{color:#fff;font-size:.76rem;white-space:nowrap}
.task-steps{min-width:0;color:#fff0ae;font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-height:500px){.battle-canvas{grid-template-rows:44px 58px minmax(0,1fr) 48px}.objective #flightTask{grid-template-rows:14px 14px}.dock-label{bottom:1px;font-size:.52rem}.dock-target-badge{top:-8px;padding:2px 6px;font-size:.5rem}}

/* Keep the current flight's destination visible without asking the player to decode its art. */
.flight::after{content:attr(data-destination);position:absolute;left:50%;top:-24px;transform:translateX(-50%);min-width:max-content;padding:3px 7px;border:2px solid #fff4b7;border-radius:999px;background:#f7d76b;color:#162335;font-size:.58rem;font-weight:1000;line-height:1;box-shadow:0 0 12px #f7d76bcc;pointer-events:none}

/* Result is a bounded substate of the logical Battle canvas. */
.battle-canvas{position:relative}
.battle-live{display:contents}
.result{position:absolute;inset:0}
.leave-confirm{position:absolute;inset:0;z-index:6;display:grid;place-content:center;gap:12px;padding:28px;text-align:center;background:#061521f2}.leave-confirm>*{margin:0}.leave-confirm button{width:min(100%,320px)}
.route-line.is-guidance{height:3px;background:repeating-linear-gradient(90deg,#ffe980 0 12px,transparent 12px 20px);box-shadow:0 0 12px #ffe980;animation:skyport-guidance 1.1s linear infinite}
.route-trace,.route-challenges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.route-trace{z-index:7;overflow:visible}.route-trace polyline{fill:none;stroke:#fff176;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px #45f4ff)}.route-trace.invalid polyline{stroke:#ff5472;filter:drop-shadow(0 0 8px #ff3159)}.route-challenges{z-index:5}.route-barrier{position:absolute;height:9px;border:2px solid #ff9bad;border-radius:999px;background:repeating-linear-gradient(90deg,#ff365f 0 12px,#7d1737 12px 20px);box-shadow:0 0 5px #25020c,0 0 15px #ff3159;transform-origin:left center}.route-barrier::before,.route-barrier::after{content:'';position:absolute;top:50%;width:16px;aspect-ratio:1;translate:0 -50%;border:3px solid #ffd1d9;border-radius:50%;background:#a21f43;box-shadow:0 0 10px #ff3159}.route-barrier::before{left:-8px}.route-barrier::after{right:-8px}.route-beacon{position:absolute;translate:-50% -50%;display:grid;place-items:center;width:clamp(28px,6.5%,46px);aspect-ratio:1;border:3px solid #63fff0;border-radius:50%;background:#074e63ee;box-shadow:0 0 15px #49ffe6;color:#fff176;font-size:clamp(11px,2.6vw,16px);font-weight:1000}.route-beacon.passed{border-color:#fff176;background:#356d4dee;box-shadow:0 0 20px #fff176}.route-beacon::before{content:attr(data-order)}
.route-challenges{z-index:1}.route-line{z-index:3}.flight,.dock{z-index:4}.route-trace{z-index:5}
@keyframes skyport-guidance{to{background-position:20px 0}}

/* Feedback is event-only; the two-line task card owns persistent instruction. */
.feedback{width:min(310px,calc(100% - 24px));color:#fff;line-height:1.25;text-align:center;white-space:normal;overflow-wrap:anywhere;pointer-events:none}
.feedback:empty{display:none}
.stage-card small{display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--text-muted);font-size:.72rem}.stage-card .stage-medals{color:#fde68a;font-weight:800;white-space:nowrap}

/* Stage and Battle reserve ownership is external to each responsive Canvas. */
.stage-screen{grid-template-rows:48px 44px auto minmax(0,1fr);background:linear-gradient(180deg,rgba(4,20,34,.82),rgba(4,20,34,.9)),url('../../assets/animal-skyport-dispatch-cover.webp') center 38%/cover no-repeat}
@media(min-width:641px){.battle-canvas,.battle-shell>.ad-reserve{width:min(100%,920px);max-width:920px;justify-self:center}}

/* The geometrically centered card stays visibly selected, even while locked. */
.stage-card.centered{border-color:#ffd66a;box-shadow:0 0 22px #ffd66a66}

/* Short landscape uses a native landscape envelope so Stage controls remain
   readable while the Canvas still owns the complete 334px safe height. */
@media(max-height:500px) and (min-aspect-ratio:3/2){
  .stage-screen{grid-template-rows:40px 30px 50px minmax(0,1fr);gap:6px;padding:8px 0}
  .stage-screen>.return{width:44px;height:40px}
  .stage-copy{font-size:.86rem}
  .contract-row{height:50px;min-height:50px}
  .contract-choice{padding:5px 9px;font-size:.7rem}
  .insurance-btn{font-size:.7rem}
  .stage-rail>.stage-card{height:122px!important;min-height:122px!important;max-height:122px!important;padding:10px;font-size:.78rem}
}

/* Keep localized Battle actions readable inside the fixed logical footer. */
.flight-row{justify-content:center;text-align:center;background:#0b2638;border-top:1px solid #285b71}
#flightHint{min-width:0;overflow:hidden;font-size:.76rem;line-height:1.25;color:#dffcff;font-weight:800;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* Main owns the only sound control; protected Stage/Battle canvases stay free of floating UI. */
.topbar{grid-template-columns:58px minmax(0,1fr) 44px 120px;gap:8px}
.topbar h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main-sound-toggle{width:44px;height:44px;margin:0;border:1px solid #6ca8b6;border-radius:12px;background:#17465b;color:#fff;font:800 1.1rem/1 system-ui;cursor:pointer}
.main-sound-toggle:focus-visible{outline:3px solid #fff4b7;outline-offset:2px}