/* Keep camp preparation readable for keyboard focus and retained touch hover. */
body.game-mode .camp-commands button:not(.camp-primary):is(:hover,:focus-visible):not(:disabled){background:#355168;color:#fff9df;border-color:#9fe4df}

/* The narrow end of the landscape template keeps utility targets separate
   and gives command descriptions their full line without reducing body text. */
@media(min-width:480px) and (max-width:500px) and (max-height:500px){
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .game-menu-button{width:44px;min-width:44px;padding:4px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .game-menu-button>span{display:none}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .battle-command{padding:3px 5px;gap:6px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .battle-command .icon{display:none}
}

/* Empty party slots share the compact board's columns. Their labels wrap
   inside each card while the native return row keeps its reserved space. */
@media(min-width:480px) and (max-width:700px) and (max-height:500px){
 body.game-mode .roster-console:not(.storage-console) .roster-row--empty>span:nth-child(3){min-width:0;flex:1}
 body.game-mode .roster-console:not(.storage-console) .roster-row--empty strong{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.1}
}

/* Preparation keeps move and lead review one step from departure. */
body.game-mode .habitat-console__preview>.habitat-party{min-height:44px;font:600 14px/1.3 var(--body);white-space:normal}

/* Both basic capsules fit the short landscape list without a hidden throw.
   Additional earned capsules retain the existing scrolling list. */
@media(min-width:480px) and (max-width:700px) and (max-height:500px){
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-options{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(64px,max-content);gap:7px;overflow-y:auto;touch-action:pan-y}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-card{display:grid;grid-template-columns:minmax(0,1fr) 76px;min-width:0;min-height:64px;height:auto;padding:4px 6px;gap:5px;align-items:center}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-card>.capture-orb{display:none}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-card>span{min-width:0}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-card strong{font:700 14px/1.15 var(--body);white-space:normal}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-card small{font:500 12px/1.15 var(--body);white-space:normal}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-card>b{font:700 20px/1.1 var(--body);white-space:normal}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .action-area.capture-area:not(.visitor-capture) .capture-card>b small{display:block;font:500 10px/1.15 var(--body)}
}

/* Explain the existing automatic departure recovery beside the launch. */
body.game-mode .departure-recovery{display:block;margin:12px 0;padding:12px;border:1px solid #e3bb77;border-left:4px solid #ffda91;background:#273a50;color:#fff7e5;text-align:left}
body.game-mode .departure-recovery strong{display:block;font:700 16px/1.35 var(--body);color:#ffe0a0}
body.game-mode .departure-recovery p,body.game-mode .departure-recovery span{display:block;font:500 14px/1.45 var(--body);color:#edf3f1;margin:5px 0 0;overflow-wrap:anywhere}

/* One optional field note leaves the last exchange and four commands intact. */
body.game-mode .battle-coach-tip{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:100%;padding:5px 9px;background:#26394e;border:1px solid #93c8c0;color:#fff4d8;text-align:left}
body.game-mode .battle-coach-tip strong{font:600 19px/1.15 Pixelify,monospace;overflow-wrap:anywhere}
body.game-mode .battle-coach-tip>span{flex:none;font:700 13px/1.3 var(--body);color:#ffe0a0;white-space:nowrap}
body.game-mode .battle-coach-tip:is(:hover,:focus-visible){background:#355168;border-color:#ffe0a0;color:#fff9df}
body.game-mode .battle-coach-link{display:none}
body.game-mode .battle-lesson p{font:500 16px/1.55 var(--body);color:#f0f5f2;overflow-wrap:anywhere}
body.game-mode .battle-lesson p.battle-lesson-cost{font-size:14px;color:#cbe8e3;border-left:3px solid #a7ddd3;padding-left:12px}
body.game-mode .battle-lesson>.button{min-height:44px;margin:6px 8px 0 0;white-space:normal}

/* A factual look back and one next-build idea, with longer goals optional. */
body.game-mode :is(.ending-observation,.ending-build-plan){margin:16px 0 0;padding:14px;border:1px solid #7aaba7;border-left:4px solid #a6dfd4;background:#26384d;text-align:left;color:#f4f5ed}
body.game-mode .ending-build-plan{border-left-color:#ffda91;background:linear-gradient(115deg,#304a5e,#29364e)}
body.game-mode :is(.ending-observation,.ending-build-plan)>span{display:block;font:700 12px/1.35 var(--body);color:#ffe0a0;letter-spacing:.06em}
body.game-mode .ending-build-plan h2{font:600 26px/1.15 Pixelify,monospace;color:#fff2d3;margin:8px 0}
body.game-mode :is(.ending-observation,.ending-build-plan,.ending-scope,.ending-long-goal,.build-connection) p{font:500 14px/1.55 var(--body);color:#edf3f2;margin:8px 0;overflow-wrap:anywhere}
body.game-mode :is(.ending-build-plan,.build-connection) .button{min-height:44px;max-width:100%;white-space:normal;margin-top:6px}
body.game-mode :is(.ending-scope,.ending-long-goal,.build-connection){margin:12px 0 0;border:1px solid #799da4;background:#233247;color:#eef5ef;text-align:left}
body.game-mode :is(.ending-scope,.ending-long-goal,.build-connection)>summary{display:list-item;box-sizing:border-box;min-height:44px;padding:11px 12px;cursor:pointer;font:600 14px/1.45 var(--body);color:#ffe0a0;overflow-wrap:anywhere}
body.game-mode :is(.ending-scope,.ending-long-goal)>p,body.game-mode .build-connection>div{padding:0 12px 10px}
body.game-mode .ending-long-goal .replay-plan{margin:0;border:0;background:transparent}
body.game-mode .build-connection{margin:0 0 12px}
@media(max-width:375px),(max-height:500px){body.game-mode .battle-coach-tip strong{font-size:17px}}
@media(max-height:500px){
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-commands:has(>.battle-coach-tip){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-commands>.battle-coach-tip{display:none}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-commands:has(>.battle-coach-tip)>.battle-command-grid{grid-column:1;grid-row:1}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-message:has(.battle-coach-link){display:grid;grid-template-columns:8px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 44px;gap:4px 6px;padding:8px}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-message:has(.battle-coach-link)>p{grid-column:2;grid-row:1;min-height:0;max-height:100%;margin:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;align-self:stretch;justify-content:flex-start}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-message:has(.battle-coach-link)>.message-diamond{grid-column:1;grid-row:1}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-message:has(.battle-coach-link)>.message-next{display:none}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-message>.battle-coach-link{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;min-width:0;padding:4px 6px;border:1px solid #a3c8bd;background:#26394e;color:#ffe0a0;font:600 13px/1.25 var(--body);text-align:left;overflow-wrap:anywhere}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-message>.battle-coach-link:is(:hover,:focus-visible){background:#355168;border-color:#ffe0a0;color:#fff9df}
}
@media(min-width:480px) and (max-width:600px) and (max-height:500px){
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-commands:has(>.battle-coach-tip){grid-template-columns:150px minmax(0,1fr)}
 body.game-mode[data-screen=battle][data-battle-format=singles] .battle-commands:has(>.battle-coach-tip)>.battle-command-grid{grid-column:2}
}

/* In short landscape the health cards flank the field. The arena can use the
   clear centre lane instead of shrinking actors below both side cards. */
@media (min-width:480px) and (max-width:700px) and (max-height:500px){
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles]{--arena-side-inset:200px;--arena-compact-landscape:1;--arena-landscape-center-lane:1}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .game-hud{height:44px;justify-content:flex-end}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .game-hud__place{display:none}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .game-hud [data-action=fullscreen]{display:none}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .battle-heading>div:first-child{width:96px;max-width:96px;min-width:0}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-shell .battle-heading .run-info-button{width:96px;min-width:96px;max-width:96px;padding:3px 4px;font-size:11px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .health-plate{width:clamp(156px,calc(50vw - 96px),188px);padding:4px 8px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .health-plate:is(.enemy,.player){top:55px;bottom:auto}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .plate-top{gap:4px;margin-bottom:4px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .plate-top>div{min-width:0;flex:1}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .plate-top strong{font-size:20px;line-height:1.1}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .plate-top .level{font-size:10px;flex:none}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .plate-top .level b{font-size:12px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .plate-types{gap:4px;margin-top:3px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .plate-types .type-tag{font-size:9px;padding:2px 3px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .health-row{gap:4px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .health-row>span{font-size:12px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .health-row small{font-size:14px;min-width:50px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .health-track{height:8px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .health-plate .xp-track{height:3px;margin-top:3px}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-field-strip{left:243px;right:auto;top:10px;bottom:auto;width:clamp(60px,calc(100vw - 441px),125px);max-width:none;min-height:44px;height:44px;padding:0;transform:none;gap:0}
 body.game-mode[data-screen=battle]:has(.battle-shell)[data-battle-format=singles] .battle-field-strip button{min-width:0;min-height:44px;height:44px;flex:1;width:100%;padding:4px 6px;font:600 11px/1.3 var(--body);white-space:normal}
}

/* Preparation comes before committing a reward. On portrait phones the
   existing supply actions stay within reach while the detailed cards scroll. */
@media (max-width:700px) and (min-height:501px){
 body.game-mode .game-loot .game-window__body{scroll-padding-top:76px}
 body.game-mode .game-loot .game-window__body:has(>.game-loot-tools>.reroll-rewards){scroll-padding-top:128px}
 body.game-mode .game-loot .game-loot-tools{position:sticky;top:-1px;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 10px;padding:6px 0;background:#222a40;border-top:1px solid #789da5;border-bottom:1px solid #789da5;box-shadow:0 -14px 0 #222a40,0 5px 0 #222a40}
 body.game-mode .game-loot .game-loot-tools>.button{min-width:0;min-height:44px;padding:4px 2px;font:700 12px/1.25 var(--body);white-space:normal}
 body.game-mode .game-loot .game-loot-tools>.button>.icon{display:none}
 body.game-mode .game-loot .game-loot-tools>.reroll-rewards{grid-column:1/-1}
}

/* Two pending orders share a row, leaving the four companions room to read.
   HP and its exact number share a row too; target and turn controls stay44px. */
@media (min-width:480px) and (max-width:700px) and (max-height:500px){
 body.game-mode[data-screen=battle][data-battle-format=doubles]{--game-dock-height:132px;--arena-compact-double-scale:1}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-commands.action-area:not(.double-replacements){height:132px;max-height:132px}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .battle-message{height:132px;max-height:132px}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-actor-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:4px;align-items:stretch}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-actor-tabs>button{height:100%;min-height:44px;min-width:0;padding:3px;gap:2px;justify-content:center;overflow:auto}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-actor-tabs strong{font:600 17px/1.05 Pixelify,monospace;white-space:normal;overflow-wrap:anywhere}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-actor-tabs small{font:500 12px/1.15 var(--body);white-space:normal;overflow-wrap:anywhere}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-health{height:58px;min-height:58px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:19px 12px 14px;gap:1px 3px;padding:3px 6px}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-health>div>small{grid-column:2;grid-row:2;justify-self:end}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-health-types{grid-column:1/-1;grid-row:2;padding-right:30px;min-width:0}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-health-types i{font-size:9px;line-height:1.2}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-health-track{grid-column:1;grid-row:3;height:6px;margin:0;align-self:center}
 body.game-mode[data-screen=battle][data-battle-format=doubles] .double-health .double-health-value{grid-column:2;grid-row:3;align-self:center;white-space:nowrap;font:600 12px/1.15 var(--body);margin:0}
}