/* Accessibility (accessibility.js sets the variables and classes on <html> before first paint) and quick-chat emotes. */
:root{--team-ally:#4682ff;--team-ally-light:#6199ff;--team-ally-dark:#1e50c8;--team-enemy:#dc4646;--team-enemy-light:#ff666c;--team-enemy-dark:#b41e1e;--ui-text-scale:1}
/* Team colours: unit health fills, level badges and keep bars. Later rules re-assert the special cases these overrides would otherwise beat. */
.hp-fill{background:var(--team-ally)}
.enemy .hp-fill{background:var(--team-enemy)}
.level{background:var(--team-ally-dark);border-color:var(--team-ally)}
.enemy .level{background:var(--team-enemy-dark);border-color:var(--team-enemy)}
.heal-flash .hp-fill{background:#64ff64}
.base-health .level{border-color:#c7a454}
.health label:first-child progress{accent-color:var(--team-ally)}
.health label:last-child progress{accent-color:var(--team-enemy)}
#hud .health progress::-webkit-progress-value,.live-base-summary progress::-webkit-progress-value{background:linear-gradient(var(--team-ally-light),var(--team-ally-dark))}
#hud .health label:last-child progress::-webkit-progress-value,.live-base-summary label:last-child progress::-webkit-progress-value{background:linear-gradient(var(--team-enemy-light),var(--team-enemy-dark))}
#hud .health progress::-moz-progress-bar,.live-base-summary progress::-moz-progress-bar{background:linear-gradient(var(--team-ally-light),var(--team-ally-dark))}
#hud .health label:last-child progress::-moz-progress-bar,.live-base-summary label:last-child progress::-moz-progress-bar{background:linear-gradient(var(--team-enemy-light),var(--team-enemy-dark))}
.accessibility-swatch{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:13px}
.accessibility-swatch i{display:inline-block;width:18px;height:12px;border-radius:3px;background:var(--team-ally)}
.accessibility-swatch i.enemy{background:var(--team-enemy);margin-left:10px}
/* Text size: UI content is zoomed; positioned shells and the 3D canvas keep their geometry.
   Desktops and touch laptops with a mouse or trackpad also draw the menus, popups and battle HUD 10% smaller (--desktop-ui-scale); phones and
   tablets keep full size. Scripts that place things from screen measurements divide by the element's currentCSSZoom (popup-dismiss, tap-bubble,
   unit-traits, sigil-road, army-drag, events-ui.css). The world map, the 3D canvas, projected markers and the battle tray (tray-scale.css) are not zoomed. */
@media (min-width:1100px) and (min-height:680px) and (any-pointer:fine){:root{--desktop-ui-scale:.9}}
dialog{zoom:var(--desktop-ui-scale,1)}
/* a dialog inside an already zoomed panel child does not shrink twice */
:is(#hud>header>*,#lobby-panel>header>*,#lobby-content>*,#home-resources>*,.coop-queue>*,#mode-gate>*,#account-bar>*,#home-tabs>*,#army-server-actions>*,#menu>*,#army-picker>*,#result>*,#world-action-dock>*) dialog{zoom:1}
html.ui-text-scaled dialog>*{zoom:var(--ui-text-scale)}
:is(#hud>header>*,#hud>.health>label,#battle-status,.server-battle-ui>header>*,.live-base-summary>label,.server-deck>*,.server-battle-message,#lobby-panel>header>*,#lobby-content>*,#home-resources>*,.coop-queue>*,#mode-gate>*,#account-bar>*,#home-tabs>*,#army-server-actions>*,#menu>*,#army-picker>*,#result>*,#world-action-dock>*){zoom:calc(var(--ui-text-scale,1) * var(--desktop-ui-scale,1))}
html.ui-text-scaled #hud>footer>*{zoom:var(--ui-text-scale)}
/* Reduced motion: set from the user's choice, or the system setting when "Follow system". */
html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html.reduce-motion #initial-loading .loading-gear{animation:none!important}
/* Emotes */
.emote-toggle{position:fixed;left:calc(12px + var(--safe-left,0px));top:58%;z-index:30;width:48px;height:48px;padding:0;display:grid;place-items:center;border-radius:50%;border:2px solid #c9a95a;background:#1d2a33eb;color:#ffe6a0;box-shadow:0 3px 8px #0008;pointer-events:auto;cursor:pointer}
.emote-toggle svg{width:26px;height:26px}
.emote-toggle[aria-expanded="true"]{background:#2d4250;border-color:#ffe6a0}
.emote-toggle.emote-cooldown{animation:emote-denied .35s ease}
.emote-wheel{position:fixed;left:calc(36px + var(--safe-left,0px));top:calc(58% + 24px);width:0;height:0;z-index:31;pointer-events:none}
.emote-wheel[hidden]{display:none}
.emote-wheel button{position:absolute;left:-26px;top:-26px;width:52px;height:52px;padding:0;display:grid;place-items:center;border-radius:50%;border:2px solid #c9a95a;background:#fff3d6;color:#3a2810;box-shadow:0 3px 7px #0009;pointer-events:auto;cursor:pointer;transform:rotate(var(--a)) translate(86px) rotate(calc(-1 * var(--a)));animation:emote-wheel-in .16s ease-out both}
.emote-wheel button:hover,.emote-wheel button:focus-visible{background:#ffe08a;outline:3px solid #fff;outline-offset:1px}
.emote-wheel button svg{width:28px;height:28px}
.emote-anchor{position:relative}
.emote-bubble{position:absolute;left:50%;top:calc(100% + 12px);z-index:40;display:flex;align-items:center;gap:6px;padding:6px 11px;border:2px solid #3b2a14;border-radius:14px;background:#fff8e6;color:#2a1d0e;font:800 15px/1.1 sans-serif;letter-spacing:0;white-space:nowrap;box-shadow:0 3px 9px #0008;pointer-events:none;transform:translateX(-50%);animation:emote-pop 2.5s ease-out both}
.emote-bubble::before{content:'';position:absolute;left:50%;bottom:100%;margin-left:-8px;border:8px solid transparent;border-bottom-color:#3b2a14}
.emote-bubble svg{width:22px;height:22px;flex:none}
.emote-bubble small{font-size:11px;font-weight:700;opacity:.7}
.emote-bubble.emote-other{background:#ffe9e2}
.emote-anchor:has(>.emote-self)>.emote-other{top:calc(100% + 56px)}
@keyframes emote-pop{0%{opacity:0;transform:translateX(-50%) scale(.3)}9%{opacity:1;transform:translateX(-50%) scale(1.15)}15%{transform:translateX(-50%) scale(1)}86%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
@keyframes emote-wheel-in{from{opacity:0;transform:rotate(var(--a)) translate(30px) rotate(calc(-1 * var(--a))) scale(.6)}}
@keyframes emote-denied{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
html.reduce-motion .emote-bubble,html.reduce-motion .emote-wheel button{animation:none!important}
@media (prefers-reduced-motion:reduce){.emote-bubble,.emote-wheel button{animation:none}}

/* Co-op icon signals stay beside the controls, away from the boss and troop fight. */
.emote-ping{position:fixed;left:calc(12px + var(--safe-left,0px));top:auto;bottom:calc(190px + var(--safe-bottom,0px));transform:none;border-color:#b99653;background:linear-gradient(#4e3c27,#241b13);color:#ffe2a2;max-width:190px;font-size:13px}.emote-ping.emote-self{bottom:calc(245px + var(--safe-bottom,0px))}.emote-ping::before{display:none}.emote-ping svg{width:34px;height:34px;flex:none}.emote-ping small{max-width:85px;overflow:hidden;text-overflow:ellipsis;font-size:11px}@media(max-height:500px){.emote-ping{bottom:110px;left:65px}.emote-ping.emote-self{bottom:165px}}


.emote-bubble.emote-ping{animation:none;opacity:1}.emote-bubble.emote-ping.emote-other,.emote-bubble.emote-ping.emote-self{background:linear-gradient(#4e3c27,#241b13);color:#ffe2a2}body .emote-anchor .emote-bubble.emote-ping.emote-other{top:auto}