/* Battle QoL 2 (battle-qol-2.js): deploy-area edge hint, card cost glow, enemy-wave edge warning, results MVP strip. */
.qol-edges{position:absolute;pointer-events:none;z-index:7}
.qol-edges[hidden],.qol-edge[hidden]{display:none!important}
/* Q0 deploy-area edge hint: team-colour glow fading inward, masked at its ends, with a white chevron pointing outward. */
.qol-edge{position:absolute;opacity:.62}
.qol-edge.strong{opacity:1}
.qol-edge-left{left:0;width:64px}.qol-edge-right{right:0;width:64px}.qol-edge-top{top:0;height:64px}.qol-edge-bottom{bottom:0;height:64px}
.qol-edge-glow{position:absolute;inset:0;--qol-dir:90deg;--qol-mask:180deg;background:linear-gradient(var(--qol-dir),rgba(var(--qol-rgb),.9) 0,rgba(var(--qol-rgb),.55) 22%,rgba(var(--qol-rgb-light),.2) 58%,rgba(var(--qol-rgb),0) 100%);-webkit-mask:linear-gradient(var(--qol-mask),#0000,#000 28%,#000 72%,#0000);mask:linear-gradient(var(--qol-mask),#0000,#000 28%,#000 72%,#0000);animation:qol-edge-pulse 1.5s ease-in-out infinite alternate}
.qol-edge-right .qol-edge-glow{--qol-dir:270deg}.qol-edge-top .qol-edge-glow{--qol-dir:180deg;--qol-mask:90deg}.qol-edge-bottom .qol-edge-glow{--qol-dir:0deg;--qol-mask:90deg}
@keyframes qol-edge-pulse{from{opacity:.68}to{opacity:1}}
/* Q3 enemy-wave edge warning: short enemy-colour edge glow plus round portraits of the push (tap to look there). */
.qol-wave{position:absolute;opacity:0;transition:opacity .25s ease-out}
.qol-wave.on{opacity:1}
.qol-wave-left,.qol-wave-right{width:40px;height:150px;margin-top:-75px}.qol-wave-left{left:0}.qol-wave-right{right:0}
.qol-wave-top,.qol-wave-bottom{height:40px;width:150px;margin-left:-75px}.qol-wave-top{top:0}.qol-wave-bottom{bottom:0}
.qol-wave-glow{position:absolute;inset:0;--qol-dir:90deg;--qol-mask:180deg;background:linear-gradient(var(--qol-dir),rgba(var(--qol-rgb),.8),rgba(var(--qol-rgb),0));-webkit-mask:linear-gradient(var(--qol-mask),#0000,#000 30%,#000 70%,#0000);mask:linear-gradient(var(--qol-mask),#0000,#000 30%,#000 70%,#0000)}
.qol-wave-right .qol-wave-glow{--qol-dir:270deg}.qol-wave-top .qol-wave-glow{--qol-dir:180deg;--qol-mask:90deg}.qol-wave-bottom .qol-wave-glow{--qol-dir:0deg;--qol-mask:90deg}
.qol-wave-portraits{position:absolute;display:flex;align-items:center;justify-content:center;touch-action:none}
.qol-wave-left .qol-wave-portraits,.qol-wave-right .qol-wave-portraits{flex-direction:column;top:50%;transform:translateY(-50%)}
.qol-wave-left .qol-wave-portraits{left:5px}.qol-wave-right .qol-wave-portraits{right:5px}
.qol-wave-top .qol-wave-portraits,.qol-wave-bottom .qol-wave-portraits{left:50%;transform:translateX(-50%)}
.qol-wave-top .qol-wave-portraits{top:5px}.qol-wave-bottom .qol-wave-portraits{bottom:5px}
.qol-wave-portraits img{display:block;box-sizing:border-box;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid #f0c14a;background:#1a1010;box-shadow:0 0 12px rgba(var(--qol-rgb),.85),0 0 0 3px #7a1a12,0 3px 6px #0009}
.qol-wave-left .qol-wave-portraits img+img,.qol-wave-right .qol-wave-portraits img+img{margin-top:-11px}
.qol-wave-top .qol-wave-portraits img+img,.qol-wave-bottom .qol-wave-portraits img+img{margin-left:-11px}
.qol-wave.on .qol-wave-portraits{animation:qol-wave-in .32s cubic-bezier(.2,.9,.3,1.25) both}
.qol-wave.on .qol-wave-portraits.selectable{pointer-events:auto;cursor:pointer}
@keyframes qol-wave-in{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
/* Q1 card cost glow: a soft gold rim on cards you can play now; a card one gold short fills toward the next gold. */
:root #hud #hand .card.cost-ready:not(.selected),.server-deck .live-card.cost-ready:not(.selected){border-color:#3a2306;box-shadow:inset 0 1px 0 #ffffff33,0 0 0 1px #10142a,0 0 0 3px #ffe27a,0 0 16px 5px #ffcf4d99}
#hud #hand .card.cost-ready::before,.server-deck .live-card.cost-ready::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 14px #ffcf4daa;animation:qol-rim-pulse 1.6s ease-in-out infinite alternate}
@keyframes qol-rim-pulse{from{opacity:.45}to{opacity:1}}
.card .qol-cost-fill{position:absolute;left:0;right:0;bottom:0;z-index:1;height:var(--next-gold,0%);display:none;pointer-events:none;border-radius:0 0 7px 7px;background:linear-gradient(180deg,#ffd76ab3 0,#ffcf4d59 35%,#ffcf4d26);border-top:3px solid #fff6c8;box-shadow:0 -4px 12px #ffd76a;transition:height .12s linear}
.card.cost-near .qol-cost-fill{display:block}
.card.cost-near .card-afford{opacity:0!important}
html.reduce-motion .qol-edge-glow,html.reduce-motion .qol-wave.on .qol-wave-portraits,html.reduce-motion .card.cost-ready::before{animation:none}
html.reduce-motion .card .qol-cost-fill{transition:none}
@media (prefers-reduced-motion:reduce){.qol-edge-glow,.qol-wave.on .qol-wave-portraits,.card.cost-ready::before{animation:none!important}.card .qol-cost-fill{transition:none}}
/* Q4 results MVP: crown chip on the top damage dealer's reward card and a strip of every deployed unit with its damage. */
.result-mvp-chip{position:absolute;right:-8px;top:-15px;z-index:3;display:flex;align-items:center;gap:4px;height:28px;box-sizing:border-box;padding:0 10px 0 6px;border:2px solid #3a2306;border-radius:14px;background:radial-gradient(ellipse 90% 60% at 50% 0,#fff6d2,#fff0 70%),linear-gradient(180deg,#ffd75a,#f2a92a);box-shadow:0 2px 0 #0007,0 0 12px #ffcf4d99;color:#3a2306;font:900 14px/1 var(--wr-font-display,'Rubik',system-ui,sans-serif);letter-spacing:.02em;pointer-events:none}
.result-mvp-chip[hidden]{display:none}
.result-mvp-chip svg{width:18px;height:14px;flex:none}
.result-mvp-strip{display:flex;justify-content:space-around;align-items:center;gap:2px;box-sizing:border-box;width:min(296px,calc(100vw - 32px));min-height:56px;margin:6px auto 0;padding:5px 6px;border-radius:10px;background:linear-gradient(180deg,#252c48,#161b2e);border:2px solid #e8b445;box-shadow:0 0 0 1px #10142a,0 3px 8px #0008}
.result-mvp-strip[hidden]{display:none}
.result-mvp-unit{flex:1 1 0;max-width:50px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.result-mvp-unit button{all:unset;cursor:pointer;display:block;line-height:0;border-radius:50%}
.result-mvp-unit button:focus-visible{outline:2px solid #ffe27a;outline-offset:2px}
.result-mvp-unit img{display:block;width:30px;height:30px;box-sizing:border-box;border-radius:50%;object-fit:cover;object-position:50% 20%;background:#10142a;border:2px solid #10142a;box-shadow:0 0 0 1px #8b93b8}
.result-mvp-unit.mvp img{box-shadow:0 0 0 2px #ffcf4d,0 0 8px #ffcf4d}
.result-mvp-bar{all:unset;cursor:pointer;display:block;width:100%;height:6px;padding:4px 0;margin:-4px 0;background-clip:content-box}
.result-mvp-bar i{display:block;height:6px;border-radius:3px;background:#0b0e1c}
.result-mvp-bar i b{display:block;height:100%;min-width:3px;border-radius:3px;background:linear-gradient(180deg,#ff9a8a,#e03a2c)}
.result-mvp-unit.mvp .result-mvp-bar i b{background:linear-gradient(180deg,#ffeaa6,#f2a92a)}
.combat-result.reveal-staged .result-mvp-strip{animation:result-fade .4s .85s both}
/* the bar is a <button> too: undo the portrait button reset (all:unset) above so it keeps its full width */
.result-mvp-unit .result-mvp-bar{display:block;width:100%;height:6px;padding:4px 0;margin:-4px 0;background-clip:content-box}
/* healing stacks after the damage part in green (damage + healing = the unit's share of the top total) */
.result-mvp-bar i{display:flex;overflow:hidden}
.result-mvp-bar i b{flex:none}
.result-mvp-bar i b+b{border-top-left-radius:0;border-bottom-left-radius:0}
.result-mvp-bar i b.heal{background:linear-gradient(180deg,#b6f59a,#3fae2a)!important;box-shadow:inset 1px 0 0 #0b0e1c88}
.result-mvp-bar i b:has(+b){border-top-right-radius:0;border-bottom-right-radius:0}