/* Human-enemy rescue layout; for Natalie and Tornado's writer. */
.rescue{background:#242535}.rescue header{flex-wrap:wrap}.rescue header>a:last-child{font-size:13px}.rescue .controls{gap:12px}.rescue button{min-height:48px;min-width:48px}.rescue output{font:13px system-ui;color:#e0f4ff}.rescue .views{background:#090d26}.rescue #rescue-scene{display:block;width:100%;height:min(53vh,480px);min-height:260px;outline-offset:-4px}.rescue .note{max-width:85ch}.rescue :disabled{opacity:.6}.rescue .error{margin-top:16px}.rescue canvas:focus-visible{outline:3px solid #f4c46a}.rescue .walk-controls,.rescue .inventory-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.rescue [aria-pressed="true"]{background:#f4c46a;color:#172329}.rescue .inventory{margin-top:16px}.rescue .inventory h2{font-size:20px}.rescue #rescue-stock{font:15px system-ui}
@media(max-width:650px){.rescue #rescue-scene{height:380px}}
@media(max-height:360px){.rescue #rescue-scene{height:200px;min-height:0}}

.rescue #rescue-health{font:15px system-ui;color:#f2e4c4}

.rescue #rescue-ending{position:fixed;inset:0;z-index:10;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:20px}.rescue #rescue-ending[hidden]{display:none}.rescue #rescue-ending h2{font:clamp(24px,5vw,48px) system-ui}.rescue #rescue-ending a{color:#fff}

/* Keep the rescue ending link easy to activate after the parents are free. */
.rescue #rescue-ending a{display:flex;align-items:center;width:fit-content;min-width:44px;min-height:44px;padding:10px 8px;touch-action:manipulation}
.rescue #rescue-ending a:focus-visible{outline:3px solid #f4c46a;outline-offset:-3px}
@media(max-height:360px){.rescue #rescue-ending{gap:12px}}

/* Keep the existing Pause within reach while using lower rescue controls. */
.rescue .rescue-pause-bar{position:sticky;top:8px;z-index:2;width:fit-content;margin-bottom:12px}
.rescue .walk-controls button,.rescue .inventory-buttons button{scroll-margin-top:68px;scroll-margin-bottom:8px}

/* Keep the fixed ending stable while its controls receive keyboard and touch input. */
.rescue:has(#rescue-ending:not([hidden])){overflow:hidden}

/* Keep the existing item action beside Pause while selecting lower inventory. */
.rescue .rescue-pause-bar{display:flex;align-items:center;gap:8px;max-width:100%}
.rescue .rescue-pause-bar #rescue-use{font-size:14px;padding-inline:8px}

/* Keep passing content from showing through a disabled sticky action. */
.rescue .rescue-pause-bar{background:#242535}

/* Keep nearby collection beside Pause and Use after touch movement. */
.rescue .rescue-pause-bar{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);align-items:stretch;width:min(100%,430px)}
.rescue .rescue-pause-bar button,.rescue .rescue-pause-bar #rescue-use{min-width:0;font-size:14px;padding-inline:6px;overflow-wrap:normal}
.rescue .walk-controls button,.rescue .inventory-buttons button{scroll-margin-top:100px}

/* Keep the scene beside the existing direction pad on short screens. */
@media(max-height:360px){.rescue .rescue-play{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:8px;align-items:stretch}.rescue .rescue-play>.views{min-width:0}.rescue .rescue-play #rescue-scene{height:calc(100dvh - 108px);min-height:0}.rescue .rescue-play>.walk-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:center;margin-top:0}.rescue .rescue-play .walk-controls button{min-width:0;padding-inline:4px;font-size:14px}}

/* Reveal the whole two-row pad when reverse Tab reaches its lower row. */
@media(max-height:360px){.rescue .rescue-play .walk-controls button:nth-child(n+3){scroll-margin-top:156px}}

/* Keep current health and boss-hit progress beside the existing rescue actions. */
.rescue .rescue-pause-bar{row-gap:4px}
.rescue .rescue-pause-bar #rescue-health{grid-column:1/-1;margin:0;font:15px/20px system-ui}
.rescue .inventory-buttons button{scroll-margin-top:124px}
.rescue .walk-controls button{scroll-margin-top:calc(min(53vh,480px) + 100px)}
@media(max-width:650px) and (min-height:361px){.rescue .walk-controls button{scroll-margin-top:480px}}
@media(max-height:360px){.rescue .rescue-play #rescue-scene{height:calc(100dvh - 132px)}.rescue .rescue-play .walk-controls button{scroll-margin-top:124px}.rescue .rescue-play .walk-controls button:nth-child(n+3){scroll-margin-top:180px}}

/* Keep reset clear and reveal both movement rows when the upper row receives focus. */
.rescue #rescue-reset{scroll-margin-top:124px;scroll-margin-bottom:8px}
@media(max-height:360px){.rescue .rescue-play .walk-controls button:nth-child(-n+2){scroll-margin-bottom:64px}}

/* Keep complete live stock and feedback with the existing rescue actions. */
.rescue-console{display:contents}
.rescue .inventory-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rescue .inventory-buttons button{min-width:0;font:13px/16px system-ui;padding:6px}
.rescue .inventory-buttons #rescue-reset{grid-column:1/-1;width:fit-content}
.rescue .rescue-pause-bar{width:100%;max-width:650px}
.rescue .rescue-pause-bar #rescue-stock,.rescue .rescue-pause-bar #rescue-status{grid-column:1/-1;margin:0;white-space:normal}
.rescue .rescue-pause-bar #rescue-stock{font:15px/20px system-ui}
.rescue .rescue-pause-bar #rescue-status{font:13px/16px system-ui;min-height:32px}
.rescue #rescue-reset,.rescue .inventory-buttons button{scroll-margin-top:236px;scroll-margin-bottom:8px}
.rescue .walk-controls button{scroll-margin-top:calc(min(53vh,480px) + 204px)}
@media(max-width:650px) and (min-height:361px){.rescue .walk-controls button{scroll-margin-top:584px}}
@media(max-height:360px){
 .rescue .rescue-console{display:grid;grid-template-columns:minmax(0,1fr) 132px;grid-template-rows:auto 92px 44px;column-gap:8px;position:sticky;top:8px;z-index:2;background:#242535}
 .rescue .rescue-console>.rescue-pause-bar{grid-column:1/-1;grid-row:1;position:relative;top:auto;margin:0;max-width:none}
 .rescue .rescue-pause-bar{grid-template-columns:48px minmax(0,1.2fr) minmax(0,1fr);column-gap:6px;row-gap:2px}
 .rescue .rescue-pause-bar button,.rescue .rescue-pause-bar #rescue-use{min-height:44px;height:44px;padding:3px 4px;font:12px/13px system-ui}
 .rescue .rescue-pause-bar #rescue-health{font:13px/16px system-ui}
 .rescue .rescue-pause-bar #rescue-stock{font:12px/14px system-ui}
 .rescue .rescue-pause-bar #rescue-status{position:absolute;top:calc(100% + 2px);left:0;width:calc(100% - 140px);font:12px/14px system-ui;min-height:0;background:#242535;z-index:1}
 .rescue .rescue-play{display:contents}
 .rescue .rescue-play>.views{grid-column:1;grid-row:2/4}
 .rescue .rescue-play #rescue-scene{height:134px}
 .rescue .rescue-play>.walk-controls{grid-column:2;grid-row:2;align-content:start;gap:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
 .rescue .rescue-play .walk-controls button{min-height:44px;height:44px;font:12px/14px system-ui;padding:4px}
 .rescue .rescue-play .walk-controls button:nth-child(-n+2){scroll-margin-top:86px;scroll-margin-bottom:58px}
 .rescue .rescue-play .walk-controls button:nth-child(n+3){scroll-margin-top:134px;scroll-margin-bottom:6px}
 .rescue #rescue-reset,.rescue .inventory-buttons button{scroll-margin-top:146px;scroll-margin-bottom:8px}
 .rescue .rescue-console>.inventory{grid-column:2;grid-row:3;margin:0;min-width:0}
 .rescue .inventory h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
 .rescue .inventory-buttons{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;gap:0;margin:0}
 .rescue .inventory-buttons button{flex:0 0 100%;height:44px;min-height:44px;scroll-snap-align:start;scroll-margin:0;outline-offset:-4px;font:12px/14px system-ui;padding:4px}
 .rescue .inventory-buttons #rescue-reset{width:100%;scroll-margin:0}
 .rescue .rescue-console button:focus-visible{outline-offset:-4px}
}