/* Keep the screenshot's map/action label slightly nearer the lower HUD. */
.field-bottom #action-label{transform:translateY(8px)}

/* Potion duration above active skill/status durations. Both groups grow upward,
   away from the lower controls; timer columns never shrink when digits change. */
.field-status-stack{position:absolute;left:24px;bottom:240px;width:max-content;max-width:min(760px,calc(100vw - 48px));pointer-events:none}
.field-status-stack #toast{width:max-content;top:auto;bottom:calc(100% + 8px);left:0;right:auto;max-width:min(340px,calc(100vw - 48px))}
#buff-chip{position:static;display:flex;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:8px;max-width:min(760px,calc(100vw - 48px));padding:0;border:0;background:none;pointer-events:none}
.status-group{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:100%}
.status-group-label{font-size:9px;font-weight:600;line-height:12px;letter-spacing:.08em;color:#c6d5df;text-shadow:0 1px 3px #061116,0 0 5px #061116}
.status-potions .status-group-label{color:#e9d89a}
.status-group-items{display:flex;flex-wrap:wrap;gap:5px;min-width:0;max-width:100%}
#buff-chip .buff-status{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;gap:6px;padding:6px 9px;font-size:12px;line-height:17px;border-color:#90b8cf80;background:#142530f0;color:#e1edf4;box-shadow:0 2px 7px #0004}
#buff-chip .buff-status i{flex:0 0 15px;font-size:16px;text-align:center;color:#c8d6f1}
#buff-chip .buff-status b{min-width:0;font-weight:500;overflow-wrap:anywhere}
#buff-chip .buff-status time{flex:0 0 calc(4ch + 1em);width:calc(4ch + 1em);min-width:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:#fff0bd}
#buff-chip .status-potions .buff-status,#buff-chip .buff-haste{background:#292c18f2;border-color:#c5b56d99;color:#ece5b8}
#buff-chip .status-potions .buff-status i,#buff-chip .buff-haste i{color:#e4d49a}
#buff-chip .buff-aura{border-color:var(--aura-color);color:var(--aura-color)}
#buff-chip .buff-poison{border-color:#a6ba65;color:#d5e3ac}
/* Avoid the old pulse fading the very information the player needs to read. */
#buff-chip .buff-status.expiring{animation:status-expiry-v75 .8s ease-in-out infinite;color:#fff2d1}
@keyframes status-expiry-v75{50%{border-color:var(--status-color,#f3c982);box-shadow:0 0 0 1px var(--status-glow,#f3c98255)}}
@media(max-width:760px){
 .field-bottom #action-label{transform:translateY(6px)}
 .field-status-stack{left:12px;bottom:284px;max-width:calc(100vw - 24px)}
 .field-status-stack #toast{max-width:calc(100vw - 24px)}
 #buff-chip{max-width:100%;gap:6px}
 #buff-chip .buff-status{font-size:10px;line-height:15px;padding:4px 6px;gap:4px}
 #buff-chip .buff-status i{flex-basis:12px;font-size:13px}
 .status-group-label{font-size:8px;line-height:10px;letter-spacing:.04em}
 .status-group{gap:3px}
 .status-group-items{gap:4px}
}
@media(prefers-reduced-motion:reduce){#buff-chip .buff-status.expiring{animation:none;border-color:var(--status-color,#f3c982)}}
/* A short landscape screen cannot fit the old two-storey 239px footer plus
   two duration groups. Keep health/shield and every action side-by-side. */
@media(min-width:540px) and (max-height:500px){
 footer{height:140px;grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr);grid-template-rows:1fr;gap:8px;padding:8px 12px 16px}
 footer .character{grid-column:1;grid-row:1;width:auto;min-width:0;padding:7px;gap:6px}
 footer .portrait,footer .battle-log{display:none}
 footer .quickbar{grid-column:2;grid-row:1;width:auto;min-width:0;padding:7px 9px}
 footer .wallet{margin-bottom:4px}
 footer .wallet b{font-size:14px}
 footer .accessory-quick{padding:3px 6px}
 footer .quickbuttons{gap:4px}
 footer .quickbuttons button{height:45px}
 footer .quickbuttons button>span{font-size:18px;line-height:21px}
 footer .quickbuttons small{font-size:8px}
 footer .commandbar{margin-top:4px}
 footer .commandbar button{font-size:8px;padding:4px 2px}
 footer .commandbar kbd{display:none}
 .field-bottom{bottom:140px;padding:4px 12px}
 .field-bottom #action-label{transform:translateY(6px);font-size:8px;padding:5px 7px}
 .field-bottom button{font-size:9px;padding:6px}
 .field-status-stack{left:12px;bottom:182px;max-width:calc(100vw - 24px)}
 #buff-chip{max-width:100%;gap:4px}
 .status-group{gap:2px}
 .status-group-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .status-group-items{gap:3px}
 #buff-chip .buff-status{font-size:9px;line-height:13px;padding:3px 5px;gap:4px}
 #buff-chip .buff-status i{flex-basis:12px;font-size:12px}
 #buff-chip .buff-status time{flex-basis:calc(3ch + 1em);width:calc(3ch + 1em)}
}

/* Conditional aura effects stay with the live combat values below EXP. */
.combat-stats #aura-stat{flex-basis:100%;margin-top:3px;color:#b8c5b0;line-height:1.35;overflow-wrap:anywhere}
.inventory-stats .evasion-stat small{display:block;margin-top:5px;font-size:9px;line-height:1.4;color:#94a482}
.inventory-aura-stat{margin:9px 0 0;color:#b8c5b0;font-size:11px;line-height:1.5}

/* Role colors come directly from the three existing illusion aura definitions.
   Do not recolor aura chips, harmful poison, backgrounds, geometry or order.
   This specificity wins over haste/icon/timer and the expiry text override on
   PC and compact layouts; the expiry border keeps the same category color. */
#buff-chip .buff-status.buff-semantic{--status-glow:color-mix(in srgb,var(--status-color) 33.333333%,transparent);border-color:var(--status-color);color:var(--status-color)}
#buff-chip .buff-status.buff-semantic i,
#buff-chip .buff-status.buff-semantic b,
#buff-chip .buff-status.buff-semantic time{color:inherit}

/* One gentle attention pulse per denied return attempt, never per countdown tick.
   Only opacity changes; the existing toast position and dimensions stay intact. */
#toast.show.return-cooldown-pulse{animation:return-cooldown-notice-pulse 900ms ease-in-out 1}
@keyframes return-cooldown-notice-pulse{0%,100%{opacity:1}45%{opacity:.78}}
/* Reduced motion keeps text fully visible and briefly emphasizes the outline. */
@media(prefers-reduced-motion:reduce){
 #toast.show.return-cooldown-pulse{animation-name:return-cooldown-notice-emphasis}
}
@keyframes return-cooldown-notice-emphasis{0%,100%{outline:1px solid #e8d39a00;outline-offset:2px}45%{outline:1px solid #e8d39a66;outline-offset:2px}}