/* Ausgelagert aus templates/invasion/warStyle.tpl (Inline-Block -> Datei, damit der Browser es cacht).
   Version haengt am rev in cfg/app.conf.php (assetVersion), also nach Aenderungen rev hochzaehlen. */
.iw-wrap{ max-width:860px; margin:0 auto 60px; padding:10px 8px; box-sizing:border-box; color:#dde6f0; font-size:13px; text-align:left; }
.iw-wrap *{ box-sizing:border-box; }
.iw-h1{ font-size:20px; font-weight:800; letter-spacing:.5px; margin:6px 0 12px; text-align:center; }
.iw-box{ background:linear-gradient(180deg, rgba(20,30,44,.92), rgba(11,17,26,.92)); border:1px solid #2f4a66; border-radius:8px; padding:12px 14px; margin:0 0 14px; }
.iw-box h3{ margin:0 0 8px; font-size:15px; }
.iw-info ul{ margin:4px 0 0 18px; padding:0; }
.iw-info li{ margin:3px 0; line-height:1.45; }
.iw-note{ padding:9px 12px; border-radius:6px; margin:0 0 12px; font-weight:bold; }
.iw-note--ok{ background:rgba(40,140,70,.35); border:1px solid #3fbf5f; }
.iw-note--err{ background:rgba(160,30,30,.4); border:1px solid #ff4a4a; }
.iw-muted{ color:#9fb0c2; }
.iw-card{ border:1px solid #2f4a66; border-radius:8px; padding:12px; margin:0 0 14px; background:rgba(0,0,0,.35); }
.iw-card--running{ border-color:#ff4a4a; box-shadow:0 0 10px rgba(255,60,60,.25); }
.iw-card__top{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.iw-status{ font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:12px; padding:2px 9px; border-radius:10px; background:#223347; }
.iw-card--running .iw-status{ background:#7a1c1c; }
.iw-vs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.iw-side{ text-align:center; padding:6px; border-radius:6px; }
.iw-side--me{ background:rgba(92,214,92,.10); outline:1px solid rgba(92,214,92,.45); }
.iw-ally{ display:inline-block; margin:2px 6px; vertical-align:top; max-width:130px; }
.iw-logo{ width:52px; height:52px; border-radius:8px; object-fit:cover; background:#101820; border:1px solid #445; display:inline-block; }
.iw-logo--none{ line-height:52px; font-size:22px; color:#789; }
.iw-tag{ font-weight:800; margin-top:3px; }
.iw-name{ font-size:11px; color:#9fb0c2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iw-badge{ display:inline-block; font-size:10px; padding:0 6px; border-radius:8px; background:#3a4f66; margin-top:2px; }
.iw-badge--invited{ background:#8a6d1c; }
.iw-x{ font-size:28px; font-weight:900; color:#ff4a4a; text-shadow:0 0 8px rgba(255,0,0,.6); }
.iw-goals{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.iw-goal{ border:1px solid #2a4460; border-radius:6px; padding:8px; }
.iw-goal--me{ border-color:#5cd65c; }
.iw-goal__hl{ font-weight:800; margin-bottom:4px; }
.iw-chip{ display:inline-block; padding:1px 9px; border-radius:10px; color:#fff; font-weight:800; font-size:11px; }
.iw-bar{ height:9px; border-radius:5px; background:#223; overflow:hidden; margin:6px 0 4px; }
.iw-bar > div{ height:9px; }
.iw-kv{ display:flex; justify-content:space-between; gap:8px; font-size:12px; }
.iw-reward{ margin-top:10px; font-size:12px; line-height:1.5; }
.iw-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.iw-btn{ padding:7px 14px; border-radius:6px; border:1px solid #3a5a7a; background:#1d3550; color:#fff; font-weight:800; cursor:pointer; font-size:12px; }
.iw-btn:hover{ filter:brightness(1.2); }
.iw-btn--go{ background:#1f5a2c; border-color:#3f8f52; }
.iw-btn--war{ background:#7a1c1c; border-color:#ff4a4a; font-size:14px; padding:9px 20px; }
.iw-btn[disabled]{ opacity:.45; cursor:default; filter:none; }
.iw-select{ padding:6px 8px; background:#0c1826; color:#dde6f0; border:1px solid #3a5a7a; border-radius:5px; max-width:100%; }
.iw-form label.iw-lbl{ display:block; font-weight:800; margin:12px 0 6px; }
.iw-opts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:8px; }
.iw-opt{ position:relative; border:1px solid #3a5a7a; border-radius:7px; padding:9px 10px; cursor:pointer; background:rgba(0,0,0,.3); display:block; }
.iw-opt input{ position:absolute; opacity:0; pointer-events:none; }
.iw-opt:hover{ border-color:#7fa6cc; }
.iw-opt.is-on{ border-color:#fff; box-shadow:0 0 0 1px #fff inset; }
.iw-opt__t{ font-weight:800; }
.iw-opt__s{ font-size:11px; color:#9fb0c2; margin-top:2px; }
.iw-diff{ border-width:2px; }
.iw-diff__val{ font-size:15px; font-weight:900; margin-top:4px; }
.iw-diff__rw{ font-size:11px; margin-top:3px; color:#cfe0f0; }
.iw-hist{ width:100%; border-collapse:collapse; font-size:12px; }
.iw-hist td{ padding:6px 5px; border-top:1px solid #243a52; vertical-align:middle; }
.iw-win{ color:#5cd65c; font-weight:800; }
.iw-lose{ color:#ff6a6a; font-weight:800; }
@media (max-width:640px){
  .iw-goals{ grid-template-columns:1fr; }
  .iw-vs{ grid-template-columns:1fr; }
  .iw-x{ text-align:center; }
}
/* Fruehere Invasionen (altes System, nur Ansicht) */
.iw-legacy-intro{ font-size:12px; margin:-4px 0 8px; }
.iw-legacy-date{ white-space:nowrap; font-size:11px; }
.iw-legacy-stats{ font-size:11px; color:#9fb0c2; margin-top:2px; }
.iw-legacy-dmg{ white-space:nowrap; text-align:right; }
.iw-legacy-res{ white-space:nowrap; text-align:right; }
.iw-legacy-link{ display:inline-block; margin-top:3px; font-size:11px; color:#58ccff; cursor:pointer; text-decoration:underline; }
.iw-legacy-link:hover, .iw-legacy-link:focus-visible{ color:#fff; outline:none; }