/* Compact hunting HUD: a stable header anchor and content-sized, readable effects.
   The transparent status lane has a definite width, so intrinsic flex sizing
   cannot collapse the name between an icon and the non-shrinking timer. */
@media(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #game-ui .field-gold{top:calc(51px + env(safe-area-inset-top));max-width:calc(100vw - var(--safe-left,12px) - var(--safe-right,12px) - 188px);font-size:12px;line-height:20px;gap:4px}
 #game-ui .field-gold b{flex:0 1 auto}
 #game-ui #manual-reward-badge{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
 #game-ui .field-status-stack{width:calc(100% - var(--safe-left,12px) - var(--safe-right,12px));max-width:calc(100% - var(--safe-left,12px) - var(--safe-right,12px));--status-top-clearance:calc(212px + env(safe-area-inset-top));--status-bottom-clearance:50px;display:flex;flex-direction:column;max-height:max(28px,calc(100dvh - var(--hud-height,168px) - var(--status-bottom-clearance) - var(--status-top-clearance)))}
 #game-ui #buff-chip{width:100%;max-width:100%;min-height:0;max-height:100%;flex:0 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;padding:0;gap:7px}
 /* The actual manual badge height takes its own row; only buffs may scroll. */
 #game-ui .field-status-stack #manual-reward-hud{flex:0 0 auto;min-width:0}
 #game-ui .status-group{width:100%;min-width:0;max-width:100%;gap:4px;flex:0 0 auto}
 #game-ui .status-group-label{font-size:10px;line-height:14px;letter-spacing:0}
 #game-ui .status-group-items{width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px;overflow:visible;padding:0;pointer-events:none}
 #game-ui #buff-chip .buff-status{display:flex;flex:0 1 auto;width:max-content;max-width:100%;min-width:0;align-items:center;gap:6px;padding:5px 8px;font-size:12px;line-height:17px;white-space:normal;pointer-events:auto}
 #game-ui #buff-chip .buff-status i{flex:0 0 14px;font-size:15px}
 #game-ui #buff-chip .buff-status b{flex:0 1 auto;width:auto;min-width:0;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
 #game-ui #buff-chip .buff-status time{flex:0 0 auto;width:auto;min-width:3.5ch;margin-left:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
 #game-ui:has(#battle-messages:not(:empty)):not(:has(.character-story.story-cinematic:not([hidden]))):not(:has(#pause-overlay:not([hidden]))):not(:has(#journal:not([hidden]))) .field-status-stack{--status-bottom-clearance:122px}
}
/* On phones the upper-body portrait sits above the dialogue's left edge.
   Both sentences keep the full readable width rather than a narrow side rail.
   The entire composition is lifted clear of the browser/home-indicator edge. */
@media(max-width:760px) and (orientation:portrait){
 #game-ui .character-story.story-cinematic{--story-bottom:max(48px,8dvh,calc(env(safe-area-inset-bottom) + 32px));--story-portrait-width:clamp(108px,32vw,144px);left:var(--safe-left,12px);right:var(--safe-right,12px);bottom:var(--story-bottom);transform:none;width:auto;min-height:0;padding:18px 20px 20px;cursor:default}
 #game-ui .story-cinematic #story-portrait{left:16px;top:auto;bottom:calc(100% - 4px);width:var(--story-portrait-width);height:calc(var(--story-portrait-width) * 1.25);pointer-events:none}
 #game-ui .story-cinematic .story-copy{max-height:calc(100dvh - env(safe-area-inset-top) - var(--story-bottom) - var(--story-portrait-width) * 1.25 - 56px);overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;padding-right:2px}
 #game-ui .story-cinematic .story-heading{gap:5px 10px;margin-bottom:11px;padding-right:34px;line-height:1.5}
 #game-ui .story-cinematic .story-heading strong{font-size:19px}
 #game-ui .story-cinematic .story-heading span{font-size:12px}
 #game-ui .story-cinematic .story-copy p{font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
 #game-ui .story-cinematic .story-copy p+p{margin-top:4px}
 #game-ui .story-cinematic #story-dismiss{top:7px;right:7px;width:44px;height:44px}
 #game-ui .character-story:not(.story-cinematic){padding-left:108px}
 #game-ui .character-story:not(.story-cinematic) #story-portrait{left:6px;bottom:10px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 /* Keep wrapped effects left of the centered target HP even on short screens. */
 #game-ui .field-gold{max-width:28%}
 #game-ui .field-status-stack{width:calc(50% - min(102.5px,15vw) - var(--safe-left,12px) - 12px);max-width:calc(50% - min(102.5px,15vw) - var(--safe-left,12px) - 12px);--status-top-clearance:calc(96px + env(safe-area-inset-top));--status-bottom-clearance:50px}
 #game-ui:has(#battle-messages:not(:empty)):not(:has(.character-story.story-cinematic:not([hidden]))):not(:has(#pause-overlay:not([hidden]))):not(:has(#journal:not([hidden]))) .field-status-stack{--status-bottom-clearance:50px}
 #game-ui .status-group-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font-size:9px;line-height:12px}
 #game-ui #buff-chip{gap:5px}
 #game-ui #buff-chip .buff-status{font-size:11px;line-height:16px;padding:4px 7px}
 #game-ui .character-story.story-cinematic{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));width:auto;max-width:780px;margin-inline:auto;transform:none;bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));padding-left:172px;min-height:126px}
 #game-ui .story-cinematic #story-portrait{left:16px;bottom:10px;width:132px;height:165px}
 #game-ui .story-cinematic .story-copy{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 88px);overflow-y:auto;overscroll-behavior-y:contain}
}

/* The smallest landscape viewport keeps a complete chip rather than spending
   its only visible row on a group caption. Potion/effect order is unchanged. */
@media(orientation:landscape) and (max-height:360px) and (max-width:1100px){
 #game-ui .status-group-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* A short portrait with browser/safe-area chrome has no room for two full-width
   overlay bands. Give messages the right lane and effects the left, as on the
   existing short-landscape HUD, rather than growing buffs across target HP. */
@media(max-width:760px) and (orientation:portrait) and (max-height:640px){
 #game-ui #battle-messages{left:auto;width:calc(50% - var(--safe-right,12px) - 8px)}
 #game-ui:has(#battle-messages:not(:empty)):not(:has(.character-story.story-cinematic:not([hidden]))):not(:has(#pause-overlay:not([hidden]))):not(:has(#journal:not([hidden]))) .field-status-stack{bottom:calc(var(--hud-height,168px) + 50px);--status-bottom-clearance:50px;width:calc(50% - var(--safe-left,12px) - 8px);max-width:calc(50% - var(--safe-left,12px) - 8px)}
 #game-ui .status-group-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}