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

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

/* Keep the combat-rescue continuation easy to activate after exploration. */
.combat #combat-rescue-link a{display:flex;align-items:center;width:fit-content;min-width:44px;min-height:44px;padding:10px 8px;touch-action:manipulation}
.combat #combat-rescue-link a:focus-visible{outline:3px solid #f4c46a;outline-offset:-3px}

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

/* Keep the existing selected-item action beside Pause after movement and selection. */
.combat .combat-pause-bar{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px;max-width:100%}
.combat .combat-pause-bar #combat-use{min-width:0;max-width:210px;white-space:normal;font-size:14px;line-height:1.35;padding:8px 10px}
.combat #combat-reset,.combat #combat-collect,.combat .walk-controls button,.combat .inventory-buttons button{scroll-margin-top:84px;scroll-margin-bottom:8px}
@media(max-height:360px){.combat main{display:flex;flex-direction:column}.combat .combat-pause-bar{order:-1;align-self:flex-start}}

/* Keep nearby collection beside the existing Pause and Use after movement. */
.combat .combat-pause-bar{grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr)}
.combat .combat-pause-bar #combat-collect{min-width:0;max-width:210px;white-space:normal;font-size:14px;line-height:1.35;padding:8px 10px}
.combat #combat-reset,.combat .walk-controls button,.combat .inventory-buttons button{scroll-margin-top:112px;scroll-margin-bottom:8px}

/* Keep player and enemy health beside the existing combat actions. */
.combat .combat-pause-bar{row-gap:4px}
.combat .combat-pause-bar #combat-health{grid-column:1/-1;margin:0;font:15px/20px system-ui}
.combat #combat-reset,.combat .walk-controls button,.combat .inventory-buttons button{scroll-margin-top:180px;scroll-margin-bottom:8px}

/* Keep the scene and whole direction pad together during combat play. */
.combat #combat-scene{scroll-margin-top:132px;scroll-margin-bottom:76px}
@media(max-height:360px){
 .combat .combat-pause-bar{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);width:min(100%,430px)}
 .combat .combat-pause-bar button,.combat .combat-pause-bar #combat-use,.combat .combat-pause-bar #combat-collect{min-width:0;font-size:14px;padding:8px 6px;line-height:1.35;white-space:normal}
 .combat .combat-play{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:8px;align-items:stretch}
 .combat .combat-play>.views{min-width:0}
 .combat .combat-play #combat-scene{height:calc(100dvh - 128px);min-height:0;scroll-margin-top:118px;scroll-margin-bottom:8px}
 .combat .combat-play>.walk-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:center;margin-top:0}
 .combat .combat-play .walk-controls button{min-width:0;padding-inline:4px;font-size:14px;scroll-margin-top:118px;scroll-margin-bottom:8px}
 .combat .combat-play .walk-controls button:nth-child(-n+2){scroll-margin-bottom:64px}
 .combat .combat-play .walk-controls button:nth-child(n+3){scroll-margin-top:174px}
}

/* Clear both pad rows under the short-screen health and action bar. */
@media(max-height:360px){
 .combat .combat-pause-bar{row-gap:2px}
 .combat .combat-pause-bar button,.combat .combat-pause-bar #combat-use,.combat .combat-pause-bar #combat-collect{padding-block:4px;line-height:1.3}
 .combat .combat-play .walk-controls button{min-height:44px}
}

/* Keep the lower pad row visible when the upper row is revealed. */
@media(max-height:360px){.combat .combat-play>.walk-controls{row-gap:0}}

/* Reserve a visible direction row when keyboard play keeps the scene at the page top. */
@media(min-height:361px){.combat .combat-play>.walk-controls{position:sticky;bottom:8px;z-index:1;width:fit-content;background:#242535}}

/* Align the short scene and pad below the health/action bar when its canvas receives focus. */
@media(max-height:360px){.combat .combat-play{scroll-margin-top:118px;scroll-margin-bottom:8px}}

/* Keep the existing live combat message beside health and actions. */
.combat .combat-pause-bar #combat-status{grid-column:1/-1;min-height:32px;margin:0;max-width:100%;font:13px/16px system-ui;white-space:normal;overflow-wrap:anywhere}
.combat #combat-scene{scroll-margin-top:164px}
@media(max-height:360px){
 .combat .combat-pause-bar #combat-status{position:absolute;top:calc(100% + 2px);left:0;width:calc(100% - 140px);min-height:0;padding:0;background:#242535}
 .combat .combat-play #combat-scene{scroll-margin-top:118px}
}

/* Give the longer completion message room above its continuation target. */
@media(max-height:360px){.combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar #combat-status{width:100%}}

/* Keep existing stock with health and actions, with real space for short-screen feedback. */
.combat .combat-pause-bar #combat-stock{grid-column:1/-1;margin:0;font:15px/20px system-ui}
.combat #combat-reset,.combat .inventory-buttons button,.combat #combat-rescue-link a{scroll-margin-top:236px;scroll-margin-bottom:8px}
@media(min-height:361px){.combat #combat-scene{scroll-margin-top:212px}}
@media(max-height:360px){
 .combat header{padding-block:4px}
 .combat header .brand{font-size:16px;line-height:1.1}
 .combat header .brand span{margin-top:4px}
 .combat main{padding-top:8px}
 .combat h1{font-size:24px;scroll-margin-top:184px;scroll-margin-bottom:8px}
 .combat .combat-pause-bar{margin-bottom:60px}
 .combat .combat-pause-bar #combat-stock{font:13px/16px system-ui}
 .combat .combat-play{align-items:start;scroll-margin-top:146px;scroll-margin-bottom:6px}
 .combat .combat-play>.views{margin-top:4px}
 .combat .combat-play #combat-scene{height:calc(100dvh - 156px);scroll-margin-top:150px;scroll-margin-bottom:6px}
 .combat .combat-play>.walk-controls{align-content:start}
 .combat .combat-play .walk-controls button:nth-child(-n+2){scroll-margin-top:146px;scroll-margin-bottom:50px}
 .combat .combat-play .walk-controls button:nth-child(n+3){scroll-margin-top:190px;scroll-margin-bottom:6px}
 .combat #combat-reset,.combat .inventory-buttons button,.combat #combat-rescue-link a{scroll-margin-top:184px;scroll-margin-bottom:8px}
}

/* Reserve the entire pad under the longer completed-fight message. */
@media(max-height:360px){
 .combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar{row-gap:0}
 .combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar button{height:44px;min-height:44px;line-height:18px}
 .combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar #combat-health{font:13px/16px system-ui}
 .combat:has(#combat-rescue-link:not([hidden])) .combat-play{position:sticky;top:152px}
}

/* Separate completed health and stock glyphs while keeping the full pad clear. */
@media(max-height:360px){
 .combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar{top:0;row-gap:2px}
 .combat:has(#combat-rescue-link:not([hidden])) .combat-play{top:148px}
 .combat:has(#combat-rescue-link:not([hidden])) #combat-rescue-link{position:relative;z-index:1}
}

/* Keep completed controls inset and fit the two feedback text rows above the pad. */
@media(max-height:360px){
 .combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar{top:8px}
 .combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar #combat-stock{font:12px/16px system-ui}
 .combat:has(#combat-rescue-link:not([hidden])) .combat-pause-bar #combat-status{font:12px/14px system-ui}
 .combat:has(#combat-rescue-link:not([hidden])) .combat-play{top:152px}
}

/* Keep the continuation readable when it passes over the completed scene. */
@media(max-height:360px){.combat:has(#combat-rescue-link:not([hidden])) #combat-rescue-link a{background:#25464e;color:#fff0d4}}