/* Defence Preset (client/panels-defense.js): squads of 3 defence leaders, like the rally cards in the game's rust-and-gold look */
.df-intro { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(#2b3238, #1a1f23); border: 1px solid #56606a; }
.df-intro-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 50% 35%, #9aa3ab, #3e454c 80%); border: 2px solid #c8ced4; }
.df-intro b { display: block; font-size: 15px; } .df-intro small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.df-now { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: var(--muted); }
.df-now-heroes { display: flex; flex-wrap: wrap; gap: 5px; }
.df-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 12px; background: rgba(255,210,63,.14); border: 1px solid rgba(255,210,63,.45); color: #fff; font-weight: 700; }
.df-chip .df-face { border-radius: 50%; }
.df-squad { margin: 0 0 10px; border-radius: 12px; overflow: hidden; background: #1c1712; border: 1px solid #5a3c20; }
.df-head { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; background: linear-gradient(#8a6038, #5a3c20); }
.df-no { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 900; background: #2a1c10; border: 1px solid #e1bd8c; color: #ffd98a; }
.df-head b { font-size: 15px; color: #fff; text-shadow: 0 1px 0 #000; }
.df-arrow { width: 34px; height: 30px; min-height: 0; padding: 0; border-radius: 8px; font-weight: 900; font-size: 16px; background: linear-gradient(#f0b43c, #b07a18); border: 1px solid #ffe1a0; color: #2a1c10; }
.df-arrow[disabled] { background: #6b6b6b; border-color: #9a9a9a; color: #3a3a3a; }
.df-body { padding: 8px 10px 10px; }
.df-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.df-pow { font-weight: 800; color: #ffd98a; }
.df-st { font-weight: 800; color: var(--muted); }
.df-squad.defending { border-color: #e0b84c; box-shadow: 0 0 0 1px #e0b84c inset; } .df-squad.defending .df-st { color: #9ff0a4; }
.df-squad.outside .df-st { color: #ff7a6a; }
.df-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.df-slot { position: relative; min-height: 88px; padding: 6px 4px; border-radius: 10px; display: grid; justify-items: center; align-content: center; gap: 3px; background: linear-gradient(#3a2a18, #24180c); border: 1px dashed #8a6038; color: #fff; }
.df-slot.full { border-style: solid; background: linear-gradient(#c48a2e, #7a4f14); border-color: #ffd98a; }
.df-slot.on { box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255,217,138,.7); }
.df-slot.out { filter: grayscale(.7); }
.df-slot small { max-width: 100%; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-slot .df-face { border-radius: 8px; }
.df-lv { position: absolute; top: 3px; left: 4px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #000; }
.df-plus { font-size: 26px; font-weight: 300; color: #e1bd8c; }
.df-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin: -4px 0 12px; padding: 8px; border-radius: 0 0 12px 12px; background: #15110c; border: 1px solid #5a3c20; border-top: 0; max-height: 280px; overflow-y: auto; }
.df-hero { min-height: 0; padding: 5px 3px; border-radius: 10px; display: grid; justify-items: center; gap: 2px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #fff; }
.df-hero small { max-width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-hero.on { border-color: #ffd98a; } .df-hero .df-face { border-radius: 8px; }
.df-remove { background: rgba(224,87,76,.15); border-color: #8a3c3c; }
/* buffs: ⚔️ attack, 🛡️ defence, ❤️ health, per hero (mini, on the cards and in the hero list) and per squad */
.df-buffs { display: inline-flex; flex-wrap: wrap; gap: 4px; font-size: 12px; font-weight: 800; }
.df-buffs span { padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.35); white-space: nowrap; }
.df-buffs .atk { color: #ffb0a0; } .df-buffs .def { color: #a8d4ff; } .df-buffs .hp { color: #a8f0b0; }
.df-buffs.mini { gap: 2px; font-size: 9.5px; justify-content: center; } .df-buffs.mini span { padding: 0 3px; border-radius: 5px; }
.df-total { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.df-syn { padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #ffd98a; background: rgba(255,210,63,.14); border: 1px solid rgba(255,210,63,.45); }
.df-now .df-buffs { flex-basis: 100%; }