/* Troop HUD (src/ui/troop-hud.js): standards over the troops, the selection
   panel and the strip of selected troops. Bronze, gold and cloth, in the
   HD Remaster's parchment palette. */

/* ---- Standards over the troops ------------------------------------------- */
.tb-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.tb{position:absolute;left:0;top:0;will-change:transform;--tb-colour:#b3261e;--tb-life:1}
.tb-inner{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;
 animation:tb-in .32s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 2px 2px #000a)}
.tb.tb-out .tb-inner{animation:tb-out .26s ease-in both}
@keyframes tb-in{from{opacity:0;transform:translate(-50%,-80%) scale(.6)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
@keyframes tb-out{to{opacity:0;transform:translate(-50%,-85%) scale(.75)}}

.tb-standard{position:relative;width:30px;height:34px;display:flex;justify-content:center}
.tb-finial{position:absolute;top:-3px;left:-4px;right:-4px;height:4px;border-radius:3px;
 background:linear-gradient(#fff4c4,#d9a93c 45%,#7a5410);box-shadow:0 1px 1px #0008}
.tb-finial:before,.tb-finial:after{content:'';position:absolute;top:-2px;width:7px;height:7px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#fff6cf,#e2b347 45%,#6d4a0c)}
.tb-finial:before{left:-3px}.tb-finial:after{right:-3px}
.tb-cloth{position:absolute;top:0;width:30px;height:34px;display:flex;align-items:flex-start;justify-content:center;padding-top:3px;
 clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);transform-origin:50% 0;
 background:linear-gradient(90deg,#0003,#fff2 30%,#0000 60%,#0004),linear-gradient(var(--tb-colour),color-mix(in srgb,var(--tb-colour) 55%,#000));
 animation:tb-wave 3.2s ease-in-out infinite}
.tb-cloth:after{content:'';position:absolute;inset:0;clip-path:inherit;box-shadow:inset 0 0 0 1.5px #f1d48a88}
@keyframes tb-wave{0%,100%{transform:skewY(0) scaleX(1)}35%{transform:skewY(-2.5deg) scaleX(.96)}70%{transform:skewY(1.5deg) scaleX(.99)}}
.tb-icon{width:22px;height:22px;object-fit:contain;filter:sepia(.35) contrast(1.15) drop-shadow(0 1px 1px #000)}

.tb-plate{position:relative;margin-top:2px;display:flex;align-items:center;gap:4px;padding:2px 4px 2px 3px;min-width:66px;height:15px;border-radius:8px;
 background:linear-gradient(#3b2f1e,#17110a);box-shadow:0 0 0 1px #b38d45,inset 0 1px 0 #ffffff1a;transition:box-shadow .25s}
.tb-count{min-width:16px;font:700 10px/1 PraetoriansTimes,Georgia,serif;color:#f6dc95;text-align:center;text-shadow:0 1px 1px #000}
.tb-bars{flex:1;display:flex;flex-direction:column;gap:1px}
.tb-bar{position:relative;height:6px;border-radius:3px;overflow:hidden;background:#0d0a06;box-shadow:inset 0 0 0 1px #0007}
.tb-bar[hidden]{display:none}
.tb-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.tb-hp .tb-trail{background:#ffe2b0;transition:width .8s cubic-bezier(.3,0,.2,1) .35s}
.tb-hp .tb-fill{transition:width .22s ease-out;
 background:linear-gradient(hsl(calc(var(--tb-life) * 105) 85% 62%),hsl(calc(var(--tb-life) * 105) 80% 36%))}
.tb-st{height:3px}
.tb-st .tb-fill{background:linear-gradient(#a6e4ff,#2b79d1);transition:width .3s ease-out}

.tb[data-side="enemy"] .tb-plate{box-shadow:0 0 0 1px #9c4a32,inset 0 1px 0 #ffffff1a}
.tb.tb-sel .tb-plate{box-shadow:0 0 0 1px #ffe08a,0 0 8px 1px #ffcf5a99,inset 0 1px 0 #ffffff2a}
.tb.tb-sel .tb-standard{animation:tb-bob 2.4s ease-in-out infinite}
@keyframes tb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* In combat (melee or shooting): crossed swords and an ember glow. */
.tb.tb-fight .tb-plate{box-shadow:0 0 0 1px #ff9a4a,0 0 8px 1px #ff4a1a99,inset 0 1px 0 #ffffff2a;animation:tb-fight 1.3s ease-in-out infinite}
.tb.tb-fight.tb-sel .tb-plate{box-shadow:0 0 0 1px #ffe08a,0 0 9px 2px #ff6a2acc,inset 0 1px 0 #ffffff2a}
@keyframes tb-fight{50%{filter:brightness(1.25)}}
.tb-standard:before{content:'';position:absolute;left:-15px;top:9px;width:14px;height:14px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s cubic-bezier(.2,1.6,.4,1);
 background:url('../assets/hd/interface/UnitKillsIcon.png') center/contain no-repeat;filter:drop-shadow(0 0 2px #ff5a1a) drop-shadow(0 1px 1px #000)}
.tb.tb-fight .tb-standard:before{opacity:1;transform:scale(1)}
.tb.tb-low .tb-hp .tb-fill{animation:tb-pulse .9s ease-in-out infinite}
@keyframes tb-pulse{50%{filter:brightness(1.7) saturate(1.3)}}
.tb.tb-tired .tb-st .tb-fill{animation:tb-blink .7s steps(2) infinite}
@keyframes tb-blink{50%{opacity:.25}}
.tb-inner.tb-hit .tb-standard{animation:tb-shake .32s ease-out}
.tb-inner.tb-hit .tb-cloth{filter:brightness(1.6) drop-shadow(0 0 4px #ff3a1a)}
@keyframes tb-shake{20%{transform:translateX(-2px) rotate(-3deg)}45%{transform:translateX(2px) rotate(2deg)}70%{transform:translateX(-1px)}}
.tb-pop{position:absolute;left:50%;top:-6px;font:700 13px/1 PraetoriansTimes,Georgia,serif;color:#ffd667;text-shadow:0 0 3px #000,0 1px 1px #000;
 white-space:nowrap;animation:tb-pop 1.35s ease-out forwards}
.tb-pop:before{content:'⚔ '}
@keyframes tb-pop{from{opacity:0;transform:translate(-50%,6px) scale(.7)}20%{opacity:1;transform:translate(-50%,-4px) scale(1.15)}to{opacity:0;transform:translate(-50%,-26px) scale(1)}}

/* ---- Selection: one troop (the HD Remaster's layout) ---------------------- */
#selectionInfo{position:absolute;left:6.4%;top:23%;display:flex;align-items:flex-start;gap:calc(12 * var(--hd-px));color:#30230f;font-family:PraetoriansTimes,'Times New Roman',serif}
#selectionInfo[hidden]{display:none}
.sel-portrait{position:relative;flex:none;display:flex;flex-direction:column;gap:calc(2 * var(--hd-px));--sel-life:1}
#selectionInfo #selectionPortrait{display:block;width:calc(96 * var(--hd-px));height:calc(96 * var(--hd-px));object-fit:contain;border:0;border-radius:calc(3 * var(--hd-px));
 background:#3a3226;box-shadow:0 0 0 calc(2 * var(--hd-px)) #2a2116,0 0 0 calc(4 * var(--hd-px)) #a88f62,0 calc(3 * var(--hd-px)) calc(6 * var(--hd-px)) #0007}
.sel-mini{position:relative;display:block;width:calc(100 * var(--hd-px));height:calc(6 * var(--hd-px));margin:0 calc(-2 * var(--hd-px));background:#111;
 box-shadow:0 0 0 calc(1 * var(--hd-px)) #2a2116;overflow:hidden}
.sel-mini:first-of-type{margin-top:calc(5 * var(--hd-px))}
.sel-mini[hidden]{display:none}
.sel-mini b{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .25s ease-out}
.sel-mini-hp b{background:linear-gradient(hsl(calc(var(--sel-life) * 105) 85% 58%),hsl(calc(var(--sel-life) * 105) 80% 38%))}
.sel-mini-st b{background:linear-gradient(#a8ecff,#2b9fd8)}
.sel-portrait.sel-low .sel-mini-hp b{animation:tb-pulse .9s ease-in-out infinite}
.sel-main{display:flex;flex-direction:column;gap:calc(1 * var(--hd-px));min-width:0}
#selectionInfo .sel-title{margin:0 0 calc(2 * var(--hd-px));font:700 calc(19 * var(--hd-px))/1.15 PraetoriansTimes,'Times New Roman',serif;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;color:#2c2010}
.sel-count{font:inherit;color:inherit}
.sel-count.sel-losses{color:#7a2414}
.sel-line{margin:0;font:700 calc(15 * var(--hd-px))/1.25 PraetoriansTimes,'Times New Roman',serif;text-transform:uppercase;white-space:nowrap;
 text-shadow:0 0 calc(1 * var(--hd-px)) #000,0 calc(1 * var(--hd-px)) calc(1 * var(--hd-px)) #000a}
.sel-line b{font-weight:700}
.sel-hp{color:#a5ec68}
.sel-row{display:flex;gap:calc(42 * var(--hd-px))}
.sel-st{color:#7fd6f2}
.sel-st[hidden]{display:none}
.sel-st.sel-tired{animation:tb-blink .7s steps(2) infinite}
.sel-kills{color:#30230f;text-shadow:none}
.sel-abilities{display:flex;flex-wrap:wrap;gap:calc(5 * var(--hd-px));margin-top:calc(5 * var(--hd-px))}
.sel-abilities:empty{display:none}
.sel-ability{position:relative;width:calc(54 * var(--hd-px));height:calc(54 * var(--hd-px));padding:0;border:0;cursor:pointer;
 background:url('../assets/hd/interface/IconUtil_Base_01.png') center/100% 100% no-repeat;filter:drop-shadow(0 calc(2 * var(--hd-px)) calc(2 * var(--hd-px)) #0007)}
.sel-ability::before{content:'';position:absolute;inset:7%;background:url('../assets/hd/interface/IconUtil_Activated_01.png') center/100% 100% no-repeat;opacity:0}
.sel-ability.sel-auto::before,.sel-ability.sel-active::before{opacity:1}
.sel-ability::after{content:'';position:absolute;inset:6%;background:var(--art) center/contain no-repeat}
.sel-ability:hover{filter:brightness(1.12) drop-shadow(0 0 calc(4 * var(--hd-px)) #fff6)}
.sel-ability.sel-off{filter:grayscale(1) brightness(.65);cursor:default}

/* ---- Selection: several troops ------------------------------------------- */
#selectionStrip{position:absolute;left:6.4%;top:23%;right:30%;display:flex;flex-direction:column;gap:calc(6 * var(--hd-px));pointer-events:auto}
#selectionStrip[hidden]{display:none}
.ss-cards{display:flex;flex-wrap:wrap;gap:calc(4 * var(--hd-px));max-height:calc(118 * var(--hd-px));overflow:hidden}
.sc{position:relative;width:calc(56 * var(--hd-px));height:calc(48 * var(--hd-px));padding:0;border:0;border-radius:calc(2 * var(--hd-px));cursor:pointer;
 background:#2c2418;box-shadow:0 0 0 calc(1 * var(--hd-px)) #1a140c,0 0 0 calc(2 * var(--hd-px)) #9b8357;
 transition:transform .15s,box-shadow .15s;animation:sc-in .25s ease-out both;--sc-life:1}
.sc:hover{transform:translateY(calc(-2 * var(--hd-px)));box-shadow:0 0 0 calc(1 * var(--hd-px)) #1a140c,0 0 0 calc(2 * var(--hd-px)) #fff1c2,0 0 calc(6 * var(--hd-px)) #ffe29a99}
@keyframes sc-in{from{opacity:0;transform:scale(.8)}}
.sc-icon{position:absolute;left:calc(2 * var(--hd-px));top:calc(2 * var(--hd-px));width:calc(42 * var(--hd-px));height:calc(44 * var(--hd-px));object-fit:cover;border-radius:calc(1 * var(--hd-px))}
.sc-count{position:absolute;left:calc(2 * var(--hd-px));bottom:calc(1 * var(--hd-px));min-width:calc(16 * var(--hd-px));padding:0 calc(2 * var(--hd-px));
 background:#000b;color:#f6dc95;font:700 calc(10 * var(--hd-px))/1.25 PraetoriansTimes,Georgia,serif;text-align:center}
.sc-bars{position:absolute;right:calc(2 * var(--hd-px));top:calc(2 * var(--hd-px));bottom:calc(2 * var(--hd-px));display:flex;gap:calc(1 * var(--hd-px))}
.sc-bar{position:relative;width:calc(5 * var(--hd-px));background:#0d0a06;overflow:hidden}
.sc-bar[hidden]{display:none}
.sc-bar b{position:absolute;left:0;right:0;bottom:0;transition:height .3s ease-out}
.sc-hp b{background:linear-gradient(90deg,hsl(calc(var(--sc-life) * 105) 80% 58%),hsl(calc(var(--sc-life) * 105) 75% 36%))}
.sc-st b{background:linear-gradient(90deg,#a8ecff,#2b9fd8)}
.sc.sc-low{box-shadow:0 0 0 calc(1 * var(--hd-px)) #1a140c,0 0 0 calc(2 * var(--hd-px)) #d9573a}
.sc.sc-fighting:after{content:'';position:absolute;inset:calc(-3 * var(--hd-px));pointer-events:none;
 box-shadow:0 0 calc(6 * var(--hd-px)) calc(1 * var(--hd-px)) #ff5a2a;animation:sc-fight 1.1s ease-in-out infinite}
@keyframes sc-fight{50%{opacity:.25}}
.ss-abilities .sel-ability{width:calc(42 * var(--hd-px));height:calc(42 * var(--hd-px))}

/* Honour: points and the bar of experience towards the next one. */
#honourProgress{display:block;height:100%;width:0;background:linear-gradient(#ffe27a,#c9921d);transition:width .4s ease-out}

/* A village's or a centurion's level line and recruitment queue (7 slots). */
.sel-level{color:#30230f;text-shadow:none}
.sel-level[hidden],.sel-kills[hidden],.sel-count[hidden]{display:none}
.sel-queue{display:flex;gap:calc(3 * var(--hd-px));margin-top:calc(6 * var(--hd-px))}
.sel-queue[hidden]{display:none}
.sel-slot{position:relative;width:calc(44 * var(--hd-px));height:calc(44 * var(--hd-px));padding:0;border:0;cursor:pointer;background:#1c160d;
 box-shadow:0 0 0 calc(1 * var(--hd-px)) #12100a,0 0 0 calc(2 * var(--hd-px)) #8f7a52}
.sel-slot:disabled{cursor:default;opacity:.55}
.sel-slot-full{background:var(--art) center/cover no-repeat,#1c160d}
.sel-slot-full:first-child{box-shadow:0 0 0 calc(1 * var(--hd-px)) #12100a,0 0 0 calc(2 * var(--hd-px)) #c8322a}
.sel-slot-full:hover{filter:brightness(1.15)}
.sel-slot-bar{position:absolute;left:0;bottom:calc(-5 * var(--hd-px));height:calc(3 * var(--hd-px));width:0;background:linear-gradient(#a8ecff,#2b9fd8);transition:width .3s linear}