/* Space-driven layouts: no device-name sniffing or save-state changes. */
html{scroll-padding-bottom:100px}
main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top))}
.game-layout>*,.fish-panels>*,.arena-top>div{min-width:0}
button,select{touch-action:manipulation}
.arena-top small{overflow-wrap:anywhere}
.route label{min-width:0;max-width:100%}
.route label select{max-width:100%}
.item-dialog{max-width:calc(100% - 24px);overscroll-behavior:contain}
.cloud-account-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Narrow outer displays and split-view windows keep the same five destinations. */
@media(max-width:719px){
 main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 .reef-tabs{position:fixed;inset:auto 0 0;margin:0;border-radius:16px 16px 0 0;min-height:72px;padding:4px max(6px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:#102f3bf5}
 .reef-tabs button{flex-direction:column;gap:2px;font-size:11px;padding:5px 2px;min-width:0}
 body[data-view=adventure] .game-layout{grid-template-columns:minmax(0,1fr)}
 body[data-view=adventure] .next-move{display:none}
 #named-equipment,#creature-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Open foldables and tablets: a useful side dock, not an enlarged phone card. */
@media(min-width:720px) and (min-height:560px){
 body[data-view=adventure] .game-layout{grid-template-columns:minmax(0,1fr) clamp(200px,25vw,270px);align-items:start}
 body[data-view=adventure] .fish-panels{display:flex;flex-direction:column}
 .next-move{position:sticky;top:12px}
 #upgrades button{flex-direction:column;gap:8px}
 #upgrades button b{color:var(--gold);font-size:12px}
 .next-move .quick-links{display:flex}
 .next-move .quick-links button{flex:1;min-width:80px}
 .reef-tabs{position:sticky;top:env(safe-area-inset-top);background:#102f3b}
}
/* Short landscape uses a navigation rail so the fight starts near the top. */
@media(max-height:559px) and (min-width:600px) and (orientation:landscape){
 main{padding-left:calc(88px + env(safe-area-inset-left));padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .reef-tabs{position:fixed;left:env(safe-area-inset-left);top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);right:auto;width:78px;min-height:0;margin:0;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(48px,1fr));gap:2px;padding:4px;border-radius:0 14px 14px 0;overflow-y:auto;background:#102f3b}
 .reef-tabs button{flex-direction:column;gap:1px;font-size:10px;padding:2px;min-height:48px}
 header{margin:0;min-height:48px}header h1{font-size:19px}
 .hero-strip{display:none}
 body[data-view=adventure] .game-layout{grid-template-columns:minmax(0,1fr)}
 body[data-view=adventure] .fish-panels{display:none}
 .arena-top{height:48px;min-height:48px;padding:4px 12px}
 #boss-hud{height:52px;min-height:52px}
 #boss-hud strong,#boss-hud span{line-height:14px;font-size:10px}
 .fight-help{top:2px}
 .battle-bottom{min-height:60px;padding:6px 12px}
 .action-notice{bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(max-width:319px){
 header{flex-wrap:wrap}header h1{font-size:16px}
 .reef-tabs button{font-size:9px}
 .battle-bottom{flex-wrap:wrap}#burst{width:100%;flex-basis:100%}
 #equipment,#named-equipment,#creature-list{grid-template-columns:1fr}
 .route{flex-wrap:wrap}.route>*{max-width:100%}
 .encounter-stop small{display:none}
}