/* Clan War Room — celebratory gradients, crisp data and screenshot-ready cards */
.page-tool--armies { background: radial-gradient(ellipse 60% 30% at 75% 8%,rgba(45,212,191,.16),transparent 72%),radial-gradient(ellipse 42% 26% at 12% 48%,rgba(56,189,248,.09),transparent 74%),var(--color-bg); }
.page-tool--armies .page-header__title--accent-red { color:#ffe19a; text-shadow:0 0 28px rgba(251,191,36,.2); }
.page-tool--armies .page-container--wide { max-width:1100px; }
.war-search,.war-panel { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(145deg,rgba(25,39,62,.94),rgba(12,19,36,.97)); border:1px solid rgba(148,163,184,.17); border-radius:24px; box-shadow:0 20px 55px rgba(0,0,0,.24); padding:clamp(16px,2.8vw,28px); }
.war-search::before,.war-panel::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:2px; opacity:.8; background:linear-gradient(90deg,transparent,#2dd4bf 30%,#fbbf24 68%,transparent); }
.war-search { margin-bottom:18px; background:linear-gradient(115deg,rgba(20,57,66,.78),rgba(19,29,51,.94) 55%,rgba(45,34,67,.65)); }
.war-search > label { display:block; font-weight:800; margin-bottom:10px; }
.war-search__row { display:grid; grid-template-columns:minmax(150px,1fr) auto auto; gap:9px; }
.war-search__row input { width:100%; min-width:0; padding:13px 15px; border-radius:13px; border:1px solid rgba(148,163,184,.23); background:rgba(9,15,30,.82); color:var(--color-text); font:inherit; direction:ltr; text-align:left; transition:border-color .2s,box-shadow .2s; }
.war-search__row input:focus { outline:none; border-color:#2dd4bf; box-shadow:0 0 0 3px rgba(45,212,191,.15),0 0 24px rgba(45,212,191,.11); }
.war-search__row button { font:inherit; cursor:pointer; }
.war-search__row .btn { white-space:nowrap; border-radius:13px; }
.war-search__row .btn:disabled { opacity:.6; cursor:wait; }
.war-save-button,.war-refresh-button { border:1px solid rgba(45,212,191,.26); background:linear-gradient(135deg,rgba(45,212,191,.15),rgba(56,189,248,.08)); color:#a7f3d0; border-radius:13px; padding:9px 14px; font-weight:800; transition:transform .2s,border-color .2s,box-shadow .2s; }
.war-save-button:hover,.war-refresh-button:hover { transform:translateY(-2px); border-color:rgba(45,212,191,.65); box-shadow:0 8px 24px rgba(45,212,191,.14); }
.war-search__hint { min-height:1.3em; margin:10px 0 0; color:var(--color-text-muted); font-size:.85rem; }
.war-search__hint--error { color:#fda4af; }
.war-room { display:grid; gap:17px; }
.war-panel { min-width:0; animation:warPanelEnter .55s cubic-bezier(.22,1,.36,1) both; }
.war-panel:nth-child(2) { animation-delay:90ms; }
.war-panel__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.war-panel__header h2 { margin:3px 0; font-size:clamp(1.12rem,2.5vw,1.45rem); letter-spacing:.01em; }
.war-panel__header p { margin:5px 0; color:var(--color-text-muted); font-size:.86rem; }
.war-eyebrow { display:inline-flex; align-items:center; gap:7px; color:#5eead4; font-size:.73rem; font-weight:900; letter-spacing:.1em; }
.war-eyebrow::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 12px #34d399; animation:warPulse 1.8s ease-in-out infinite; }
.war-refresh-button { width:44px; height:44px; font-size:1.55rem; line-height:1; }
.war-scoreboard { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:13px; align-items:center; }
.war-team { position:relative; isolation:isolate; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px 10px; padding:clamp(14px,2.4vw,22px); overflow:hidden; border:1px solid rgba(148,163,184,.17); border-radius:19px; background:linear-gradient(145deg,rgba(32,47,72,.76),rgba(14,21,38,.8)); transition:transform .3s,border-color .3s,box-shadow .3s; }
.war-team:hover { transform:translateY(-3px); border-color:rgba(148,163,184,.36); }
.war-team--home { border-color:rgba(45,212,191,.35); background:linear-gradient(135deg,rgba(13,148,136,.25),rgba(17,31,51,.86) 70%); box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 32px rgba(20,184,166,.08); }
.war-team--home:hover { box-shadow:inset 0 1px rgba(255,255,255,.06),0 14px 36px rgba(20,184,166,.14); }
.war-team__glow { position:absolute; z-index:-1; width:150px; height:130px; border-radius:50%; right:-65px; top:-78px; background:rgba(45,212,191,.21); filter:blur(35px); }
.war-team:not(.war-team--home) .war-team__glow { right:auto; left:-70px; background:rgba(129,140,248,.2); }
.war-team__side { color:var(--color-text-muted); font-size:.72rem; grid-column:1/-1; }
.war-team strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-heading); font-size:clamp(.98rem,2vw,1.3rem); }
.war-team small { color:rgba(203,213,225,.72); direction:ltr; text-align:right; overflow:hidden; text-overflow:ellipsis; font-size:.76rem; }
.war-team b { align-self:center; font-size:clamp(1.7rem,4vw,2.55rem); line-height:1; color:#fde68a; text-shadow:0 0 22px rgba(250,204,21,.3); }
.war-team > span:last-of-type { align-self:center; color:#dbeafe; font-variant-numeric:tabular-nums; }
.war-team__progress,.war-member__progress { grid-column:1/-1; height:7px; border-radius:99px; overflow:hidden; background:rgba(148,163,184,.13); }
.war-team__progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2dd4bf,#38bdf8); box-shadow:0 0 13px rgba(45,212,191,.62); transition:width .7s cubic-bezier(.22,1,.36,1); }
.war-team:not(.war-team--home) .war-team__progress span { background:linear-gradient(90deg,#818cf8,#c084fc); box-shadow:0 0 13px rgba(129,140,248,.55); }
.war-versus { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(251,191,36,.26); border-radius:50%; color:#fde68a; font-size:.69rem; font-weight:1000; background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(251,113,133,.12)); box-shadow:0 0 22px rgba(251,191,36,.08); }
.war-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:14px 0 22px; }
.war-stat { position:relative; min-width:0; display:grid; gap:8px; padding:13px; border:1px solid rgba(148,163,184,.13); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(15,23,42,.25)); transition:transform .2s,border-color .2s; }
.war-stat:hover { transform:translateY(-2px); border-color:rgba(45,212,191,.33); }
.war-stat span { color:var(--color-text-muted); font-size:.74rem; }
.war-stat strong { color:#f8fafc; font-family:var(--font-heading); font-size:clamp(.94rem,1.8vw,1.13rem); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.war-members__heading { display:flex; justify-content:space-between; align-items:end; gap:8px; margin:12px 0 10px; }
.war-members__heading h3 { font-size:1.05rem; margin:4px 0 0; }
.war-members__key { display:flex; align-items:center; gap:6px; color:var(--color-text-muted); font-size:.7rem; }
.war-members__key i { width:8px; height:8px; border-radius:50%; background:#fbbf24; box-shadow:0 0 9px #fbbf24; }
.war-member-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.war-member { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; align-items:center; gap:6px 9px; padding:11px; border:1px solid rgba(148,163,184,.13); border-radius:14px; background:linear-gradient(115deg,rgba(30,41,59,.5),rgba(14,21,38,.56)); animation:warMemberEnter .42s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--member-index,0)*22ms); transition:transform .22s,border-color .22s,background .22s; }
.war-member:hover { transform:translateY(-2px); border-color:rgba(56,189,248,.36); background:linear-gradient(115deg,rgba(30,64,82,.45),rgba(14,21,38,.65)); }
.war-member__position { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:#a5f3fc; background:linear-gradient(145deg,rgba(34,211,238,.16),rgba(56,189,248,.08)); border:1px solid rgba(34,211,238,.16); font-size:.72rem; direction:ltr; font-weight:800; }
.war-member strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.84rem; }
.war-member__attacks { justify-self:end; white-space:nowrap; font-size:.69rem; color:#6ee7b7; }
.war-member__attacks--left { color:#fde68a; }
.war-member__profile { display:inline-flex; align-items:center; justify-content:center; min-height:27px; padding:3px 8px; border:1px solid rgba(45,212,191,.24); border-radius:9px; color:#a7f3d0; background:linear-gradient(135deg,rgba(45,212,191,.13),rgba(56,189,248,.08)); text-decoration:none; font-size:.65rem; font-weight:800; white-space:nowrap; transition:transform .18s,border-color .18s,background .18s; }
.war-member__profile:hover,.war-member__profile:focus-visible { transform:translateY(-1px); border-color:rgba(45,212,191,.62); background:linear-gradient(135deg,rgba(45,212,191,.24),rgba(56,189,248,.14)); outline:none; }
.war-member__progress { height:4px; background:rgba(148,163,184,.15); }
.war-member__progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#fbbf24,#fb7185); transition:width .55s ease; }
.war-member small { grid-column:2/-1; color:var(--color-text-muted); font-size:.71rem; overflow-wrap:anywhere; }
.war-history { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.war-history-card { position:relative; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:14px; overflow:hidden; border:1px solid rgba(148,163,184,.14); border-radius:15px; background:linear-gradient(135deg,rgba(30,41,59,.54),rgba(13,20,37,.72)); transition:transform .22s,border-color .22s; }
.war-history-card:hover { transform:translateY(-2px); border-color:rgba(251,191,36,.32); }
.war-history-card > div:first-child { display:grid; min-width:0; gap:4px; }
.war-history-card > div:first-child strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.86rem; }
.war-history-card > div:first-child small { color:var(--color-text-muted); font-size:.7rem; }
.war-result { padding:5px 10px; border-radius:99px; font-size:.72rem; font-weight:800; background:rgba(148,163,184,.15); }
.war-result--win { color:#6ee7b7; background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(34,197,94,.09)); border:1px solid rgba(52,211,153,.18); }
.war-result--lose { color:#fda4af; background:linear-gradient(135deg,rgba(244,63,94,.2),rgba(225,29,72,.09)); border:1px solid rgba(251,113,133,.17); }
.war-history-card__score { grid-column:1/-1; display:flex; justify-content:space-between; gap:10px; padding-top:9px; border-top:1px solid rgba(148,163,184,.1); color:rgba(203,213,225,.83); font-size:.75rem; font-weight:700; direction:ltr; font-variant-numeric:tabular-nums; }
.war-empty { color:var(--color-text-muted); text-align:center; padding:16px; }
@keyframes warPulse { 50% { opacity:.48; box-shadow:0 0 4px #34d399; transform:scale(.82); } }
@keyframes warPanelEnter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes warMemberEnter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:680px) {
    .war-search__row { grid-template-columns:1fr 1fr; }
    .war-search__row input { grid-column:1/-1; }
    .war-search__row .btn { padding:10px; }
    .war-search__row .war-save-button { padding:8px; font-size:.78rem; }
    .war-scoreboard { gap:6px; }
    .war-team { padding:11px 9px; gap:6px; border-radius:15px; }
    .war-team strong { grid-column:1/-1; font-size:.8rem; white-space:normal; overflow:visible; overflow-wrap:anywhere; line-height:1.5; }
    .war-team small { grid-column:1/-1; min-width:0; font-size:.63rem; overflow-wrap:anywhere; }
    .war-team__side { font-size:.65rem; }
    .war-team b { font-size:1.5rem; }
    .war-versus { width:31px; height:31px; font-size:.62rem; }
    .war-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:18px; }
    .war-stat { padding:10px; }
    .war-member-list,.war-history { grid-template-columns:1fr; gap:6px; }
    .war-member { grid-template-columns:32px minmax(0,1fr) auto auto; padding:9px; gap:6px; }
    .war-members__heading h3 { font-size:.95rem; }
    .war-history-card { padding:11px; }
}
@media(max-width:360px) {
    .war-team__side { font-size:.58rem; }
    .war-team strong { font-size:.7rem; }
    .war-team small { font-size:.57rem; }
    .war-team > span:last-of-type { font-size:.74rem; }
    .war-versus { width:27px; height:27px; }
    .war-member__attacks { font-size:.61rem; }
    .war-member__profile { min-height:24px; padding:2px 6px; font-size:.59rem; }
}
@media(prefers-reduced-motion:reduce) {
    .war-search *, .war-room *, .war-search::before,.war-panel::before { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}