.emote-controls{position:absolute;right:9px;bottom:16px;display:flex;flex-direction:column;gap:7px;z-index:3}
.emote-controls button{display:grid;place-items:center;width:35px;height:35px;padding:7px;border:1px solid #b2bc8b55;border-radius:9px;background:#233b2bd9;color:#aeb89a;box-shadow:0 2px 4px #0c251c22;touch-action:manipulation;transition:background .15s,transform .15s,opacity .15s}
.emote-controls button:hover{background:#354d37;color:#d0d6b8}.emote-controls button:active{transform:translateY(2px) scale(.94)}.emote-controls button:disabled{opacity:.45;cursor:default;filter:none}.emote-controls svg{display:block;width:21px;height:21px}
.emote-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}.emote-anchor{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}.emote-bubble{position:absolute;left:-22px;top:-22px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #d4d9ae99;border-radius:14px;background:#263e31ed;box-shadow:0 3px 8px #13251d44;color:#dbcaa0;animation:emote-rise 2s both;transform-origin:50% 90%}.emote-bubble svg{width:27px;height:27px}.emote-kind-0{color:#e2a3ac}.emote-kind-2{color:#b8d4ac}.emote-bubble::before,.emote-bubble::after{content:"";position:absolute;width:3px;height:3px;background:currentColor;opacity:0;animation:emote-spark 2s both;left:2px;top:14px}.emote-bubble::after{left:auto;right:2px;top:9px;animation-name:emote-spark-right}
@keyframes emote-rise{0%{opacity:0;transform:translateY(9px) scale(.65)}12%{opacity:1;transform:translateY(0) scale(1.08)}22%,70%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-15px) scale(1.12)}}
@keyframes emote-spark{0%,72%{opacity:0;transform:translate(0,0)}78%{opacity:.65}100%{opacity:0;transform:translate(-11px,-14px)}}
@keyframes emote-spark-right{0%,72%{opacity:0;transform:translate(0,0)}78%{opacity:.65}100%{opacity:0;transform:translate(12px,-12px)}}
@media(min-width:901px){.emote-controls{bottom:82px}}
@media(prefers-reduced-motion:reduce){.emote-controls button{transition:none}.emote-bubble{animation:emote-fade 2s both}.emote-bubble::before,.emote-bubble::after{display:none}}
@keyframes emote-fade{0%{opacity:0}10%,75%{opacity:1}100%{opacity:0}}
/* Shared smooth translucent speech cloud: no blur, masks or animated filters. */
.emote-controls{gap:4px;right:7px}
.emote-controls button{position:relative;width:42px;height:44px;padding:9px 10px 13px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#405444;opacity:.9}
.emote-controls button:hover,.emote-controls button:focus-visible{background:transparent;color:#334a39;opacity:1}
.emote-controls button:focus-visible{outline:1px solid #e4d7a2;outline-offset:1px;border-radius:12px}
.emote-controls button>svg:not(.emote-cloud){position:relative;z-index:1;width:22px;height:22px}
.emote-controls button>.emote-cloud,.emote-bubble>.emote-cloud{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.emote-bubble{left:-24px;top:-24px;width:48px;height:50px;border:0;border-radius:0;background:transparent;box-shadow:none;padding-bottom:8px;box-sizing:border-box;color:#68654a}
.emote-bubble>svg:not(.emote-cloud){position:relative;width:25px;height:25px;opacity:1}
.emote-kind-0{color:#b7727f}.emote-kind-2{color:#637e55}
.emote-anchor,.army-marker,.castle-alert,.effect-hint{transition:opacity .18s ease}
.map-obscured{opacity:.1!important}
button.map-obscured:hover,button.map-obscured:focus-visible{opacity:.95!important}
@media(prefers-reduced-motion:reduce){.emote-anchor,.army-marker,.castle-alert,.effect-hint{transition:none}}

.emote-controls svg,.emote-bubble svg{image-rendering:auto;shape-rendering:geometricPrecision}

/* Above actors, keep the sign readable; only other heroes trigger occlusion. */
.emote-bubble>.emote-cloud path:nth-child(2){fill-opacity:.8;stroke-opacity:.75}
.emote-bubble{color:#4f503a}.emote-bubble.emote-kind-0{color:#ac5c70}.emote-bubble.emote-kind-2{color:#4f7046}

/* Fade HUD before it covers the player; preserve hit areas and map layout. */
.map-overlay{transition:opacity .18s ease}
/* Camera reveals the northern edge before the hero approaches the HUD. */
.map-overlay.map-camera-edge{opacity:var(--map-camera-opacity,1)}
.map-overlay.map-camera-edge:focus-within{opacity:.95}
@media(hover:hover){.map-overlay.map-camera-edge:hover{opacity:.95}}
.map-overlay.map-near-hero,.map-overlay.map-near-hero:hover,.map-overlay.map-near-hero:focus-visible{opacity:.2!important}
@media(prefers-reduced-motion:reduce){.map-overlay{transition:none}}

/* Desktop and landscape tablets: signs along the left edge above the dash dock. */
@media (min-width:901px) and (hover:hover), (min-width:768px) and (orientation:landscape){
 .emote-controls{left:7px;right:auto;bottom:24px}
}

/* Quiet physical-key hints, outside the hit area and only for mouse/trackpad users. */
@media(hover:hover) and (pointer:fine){
 .emote-controls button::after{content:attr(aria-keyshortcuts);position:absolute;right:calc(100% + 8px);top:calc(50% - 2px);display:grid;place-items:center;box-sizing:border-box;width:27px;height:25px;border:1px solid #ebe9d494;border-bottom-width:3px;border-radius:6px;background:#f4f0de94;color:#405444;font:700 12px var(--ui,Arial,sans-serif);line-height:1;box-shadow:0 1px 2px #182d251a;opacity:0;transform:translateY(-50%);pointer-events:none;transition:opacity .14s ease}
 .emote-controls button:hover::after,.emote-controls button:focus-visible::after{opacity:1}
}
@media(min-width:901px) and (hover:hover) and (pointer:fine),(min-width:768px) and (orientation:landscape) and (hover:hover) and (pointer:fine){
 .emote-controls button::after{left:calc(100% + 8px);right:auto}
}
@media(prefers-reduced-motion:reduce){.emote-controls button::after{transition:none}}