/* ============================================================================
   Kriegsraum-Skin — authentischer Clash-of-Clans-Kriegsbildschirm
   Namespace: kr-*  ·  wird NUR auf /kriegsraum geladen (base.html extra_head).
   Assets: /static/warroom/  (Texturen tex/*.png, Sterne star-*.svg, ribbon.svg,
   gold-frame.svg). Eigenständiger Game-Skin — bewusst NICHT das dunkle
   Corporate-Theme des restlichen Dashboards.
   ============================================================================ */

:root {
  --kr-wood:   url("/static/warroom/tex/wood.png");
  --kr-stone:  url("/static/warroom/tex/stone.png");
  --kr-parch:  url("/static/warroom/tex/parchment.png");
  --kr-gold-1: #ffe486;
  --kr-gold-2: #f0b429;
  --kr-gold-3: #a9710c;
  --kr-gold-line: #7a4d05;
  --kr-ink:    #2a1c0d;        /* dunkle Holz-Schrift */
  --kr-ink-2:  #5a3c18;
  --kr-cream:  #f6e7c8;        /* helle Schrift auf Holz */
  --kr-green:  #4e8a2c;
  --kr-green-d:#356018;
  --kr-red:    #b23a26;
  --kr-red-d:  #7e1b11;
  --kr-blue-row: #3a5170;      /* CWL-Tabellenzeile (CoC-blau) */
  --kr-font: 'Segoe UI', 'Trebuchet MS', system-ui, -apple-system, sans-serif;
}

/* ── Seiten-Wrapper: dunkler Stein-Boden über die volle Breite ───────────── */
.kr-root {
  --_pad: 14px;
  font-family: var(--kr-font);
  color: var(--kr-cream);
  background-color: #241d14;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(120,90,40,.30), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)),
    var(--kr-stone);
  background-size: auto, auto, 256px 256px;
  border-radius: 14px;
  padding: var(--_pad);
  margin: -4px 0 6px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 60px rgba(0,0,0,.45);
  -webkit-font-smoothing: antialiased;
}
.kr-root * { box-sizing: border-box; }

/* ── Tabs (Reiter, holz-/leisten-artig) ──────────────────────────────────── */
.kr-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  justify-content: center;
}
.kr-tab {
  font-family: var(--kr-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  color: #e9d9b4;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  padding: 10px 22px;
  border: 2px solid #2c1c0a;
  border-radius: 11px;
  cursor: pointer;
  background-color: #6b4621;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.30)),
    var(--kr-wood);
  background-size: auto, 220px 220px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .08s ease, filter .12s ease;
}
.kr-tab:hover { filter: brightness(1.08); }
.kr-tab:active { transform: translateY(1px); }
.kr-tab.is-active {
  color: #3a2407;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  border-color: var(--kr-gold-line);
  background-image:
    linear-gradient(180deg, var(--kr-gold-1), var(--kr-gold-2) 55%, var(--kr-gold-3));
  box-shadow: 0 3px 0 #6e4a08, inset 0 1px 0 rgba(255,255,255,.55), 0 0 14px rgba(240,180,40,.45);
}

/* ── Panels: [hidden] muss versteckt bleiben ─────────────────────────────── */
.kr-panel[hidden] { display: none !important; }
.kr-panel { display: block; }

/* ── Loading-Text (CWL) ──────────────────────────────────────────────────── */
.kr-loading {
  text-align: center;
  padding: 40px 12px;
  font-weight: 700;
  font-size: 16px;
  color: #e9d9b4;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  opacity: .9;
}
.kr-loading::after { content: ""; animation: kr-dots 1.2s steps(4,end) infinite; }
@keyframes kr-dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} 100%{content:""} }

/* ── Leerzustand ─────────────────────────────────────────────────────────── */
.kr-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  padding: 48px 16px;
  border-radius: 14px;
  color: var(--kr-ink);
  background-color: #caa86a;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12)),
    var(--kr-parch);
  background-size: auto, 256px 256px;
  border: 3px solid var(--kr-gold-3);
  box-shadow: inset 0 0 0 2px rgba(255,240,200,.4), 0 6px 18px rgba(0,0,0,.4);
}
.kr-empty-ico { font-size: 46px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.kr-empty-txt { font-weight: 800; font-size: 18px; letter-spacing: .03em; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

/* ════════════════════════════════════════════════════════════════════════
   STERNE (wichtigstes Visual)
   ════════════════════════════════════════════════════════════════════════ */
.kr-stars { display: inline-flex; align-items: center; gap: 1px; line-height: 0; }
.kr-star { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: middle; }
.kr-star--full { filter: drop-shadow(0 1px 1px rgba(90,60,0,.55)); }
.kr-star--empty { opacity: .9; }

/* ════════════════════════════════════════════════════════════════════════
   KAMPFBILDSCHIRM
   ════════════════════════════════════════════════════════════════════════ */
.kr-screen {
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--kr-gold-line);
  box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.3);
  background-color: #7a5026;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)), var(--kr-wood);
  background-size: auto, 240px 240px;
}

/* ── Kopf: zwei Fahnen + Score ───────────────────────────────────────────── */
.kr-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.kr-banner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  padding: 16px 12px 18px;
  position: relative;
  min-width: 0;
}
/* helle Seite = wir (links) */
.kr-banner--us {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.10)),
    linear-gradient(180deg, rgba(110,160,210,.30), rgba(40,80,130,.45));
  border-right: 2px solid rgba(0,0,0,.35);
}
/* dunkle Seite = Gegner (rechts) */
.kr-banner--them {
  background-image:
    linear-gradient(225deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(150,60,45,.40), rgba(90,25,15,.55));
  border-left: 2px solid rgba(0,0,0,.35);
}
.kr-banner.is-lead { box-shadow: inset 0 0 26px rgba(255,210,80,.30); }
.kr-banner.is-lead::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--kr-gold-2), transparent);
  border-radius: 3px;
}
.kr-banner-badge {
  position: relative; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.kr-banner-badge img { width: 100%; height: 100%; object-fit: contain; }
.kr-badge-ph { font-size: 40px; }
.kr-banner-lvl {
  position: absolute; bottom: -4px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 35% 30%, #6f4ba8, #3d2766);
  border: 2px solid #1d122f; border-radius: 50%;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.kr-banner-name {
  font-weight: 800; font-size: 17px; line-height: 1.1;
  color: #fff; text-align: center;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.5);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Score (Mitte) ───────────────────────────────────────────────────────── */
.kr-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 16px;
  background:
    radial-gradient(80% 90% at 50% 35%, rgba(255,200,80,.14), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.50));
  min-width: 162px;
  box-shadow: inset 2px 0 4px rgba(0,0,0,.3), inset -2px 0 4px rgba(0,0,0,.3);
}
.kr-score-stars { display: flex; align-items: center; gap: 9px; }
.kr-score-side { display: flex; align-items: center; }
.kr-score-num {
  font-size: 46px; font-weight: 900; line-height: 1; color: #d7c096;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
.kr-score-side.is-lead .kr-score-num {
  color: #fff5d8;
  text-shadow: 0 0 14px rgba(255,205,70,1), 0 0 4px rgba(255,225,140,.9), 0 2px 0 #6e4a08;
}
.kr-score-star { width: 46px; height: 46px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,200,70,.5)); }
.kr-score-destr {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: #d9c69a;
  text-shadow: 0 1px 0 #000;
  font-variant-numeric: tabular-nums;
}
.kr-score-destr .is-lead { color: #ffe9b0; }
.kr-score-destr-sep { opacity: .5; }

/* ── Statusleiste (Ribbon) ───────────────────────────────────────────────── */
.kr-statebar {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  padding: 9px 14px;
  text-align: center;
  border-top: 2px solid rgba(0,0,0,.4);
  border-bottom: 2px solid rgba(0,0,0,.4);
}
.kr-statebar-txt { font-weight: 900; font-size: 18px; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0,0,0,.5); }
.kr-statebar-sub { font-weight: 700; font-size: 13px; color: rgba(255,255,255,.92); text-shadow: 0 1px 0 #000; }
.kr-statebar.is-prep   { background: linear-gradient(180deg, #c98a2a, #9c6310); }
.kr-statebar.is-battle { background: linear-gradient(180deg, #c7402f, #8a1f12); }
.kr-statebar.is-win    { background: linear-gradient(180deg, #5aa12f, #356018); }
.kr-statebar.is-win .kr-statebar-txt    { letter-spacing: .18em; }
.kr-statebar.is-loss   { background: linear-gradient(180deg, #b23a26, #6e1208); }
.kr-statebar.is-loss .kr-statebar-txt   { letter-spacing: .18em; }
.kr-statebar.is-draw   { background: linear-gradient(180deg, #7a6f5c, #4a4234); }

/* ── Info-Zeile ──────────────────────────────────────────────────────────── */
.kr-info {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(0,0,0,.22);
}
.kr-info-pill {
  font-weight: 700; font-size: 12.5px; color: #f3e4c2;
  padding: 4px 11px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,225,160,.30);
  border-radius: 999px;
  text-shadow: 0 1px 0 #000;
}

/* ════════════════════════════════════════════════════════════════════════
   SPIEGEL-MAP (Base-Liste)
   ════════════════════════════════════════════════════════════════════════ */
.kr-map { padding: 12px; }
.kr-map-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; margin-bottom: 10px; padding: 0 4px;
}
.kr-map-head-us, .kr-map-head-them {
  font-weight: 800; font-size: 12.5px; letter-spacing: .05em; color: #f0dcad;
  text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kr-map-head-us   { text-align: right; }
.kr-map-head-them { text-align: left; }
.kr-map-head-vs {
  font-weight: 900; font-size: 12px; color: #2a1c0d;
  background: linear-gradient(180deg, var(--kr-gold-1), var(--kr-gold-3));
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--kr-gold-line);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.kr-rows { display: flex; flex-direction: column; gap: 7px; }
.kr-row {
  display: grid; grid-template-columns: 1fr 30px 1fr; align-items: stretch; gap: 6px;
}
.kr-row-mid {
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px; color: #f3e4c2;
  text-shadow: 0 1px 0 #000;
}

/* eine Base-Karte */
.kr-base {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: 10px;
  background-color: #3f5170;
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.22));
  border: 2px solid rgba(0,0,0,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.3);
  min-width: 0;
}
.kr-base--us   { background-color: #3a5172; }          /* unsere Seite: blau */
.kr-base--them { background-color: #6e3b34; flex-direction: row-reverse; text-align: right; } /* Gegner: rot, gespiegelt */
.kr-base--them .kr-base-main { align-items: flex-end; }
.kr-base--empty { background: rgba(0,0,0,.15); border-style: dashed; border-color: rgba(255,255,255,.12); box-shadow: none; min-height: 50px; }

.kr-base-pos {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; color: #2a1c0d;
  background: linear-gradient(180deg, var(--kr-gold-1), var(--kr-gold-3));
  border: 1px solid var(--kr-gold-line); border-radius: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* TH-Icon */
.kr-th {
  position: relative; flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.kr-th img { width: 100%; height: 100%; object-fit: contain; }
.kr-th b {
  position: absolute; bottom: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  background: rgba(20,12,4,.92); border: 1px solid rgba(255,225,160,.5); border-radius: 4px;
  line-height: 1;
}
.kr-th--txt b {
  position: static; background: rgba(0,0,0,.4); font-size: 12px; min-width: 0; height: auto; padding: 2px 5px;
  border-radius: 5px; color: #f3e4c2;
}

.kr-base-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kr-base-name {
  font-weight: 800; font-size: 14px; color: #fff; text-decoration: none;
  text-shadow: 0 1px 0 #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.kr-base-name:hover { color: var(--kr-gold-1); text-decoration: underline; }
.kr-base-recv { display: flex; align-items: center; gap: 5px; }
.kr-base--them .kr-base-recv { flex-direction: row-reverse; }
.kr-base-recv .kr-stars { font-size: 13px; }
.kr-base-pct { font-size: 11px; font-weight: 700; color: #e7d2a0; text-shadow: 0 1px 0 #000; font-variant-numeric: tabular-nums; }
.kr-base-dash { font-size: 12px; color: rgba(255,255,255,.4); }
.kr-base-recv--none { min-height: 15px; }

/* Trefferfarbe der Karte nach erzieltem Stern (dezenter Rand links/rechts) */
.kr-base--us.wm-3star  { box-shadow: inset 3px 0 0 #ffcf3a, inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.3); }
.kr-base--us.wm-2star  { box-shadow: inset 3px 0 0 #d7a32b, inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.3); }
.kr-base--us.wm-1star  { box-shadow: inset 3px 0 0 #b07a1f, inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.3); }
.kr-base--them.wm-3star { box-shadow: inset -3px 0 0 #ffcf3a, inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.3); }
.kr-base--them.wm-2star { box-shadow: inset -3px 0 0 #d7a32b, inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.3); }
.kr-base--them.wm-1star { box-shadow: inset -3px 0 0 #b07a1f, inset 0 1px 0 rgba(255,255,255,.14), 0 2px 3px rgba(0,0,0,.3); }

/* ════════════════════════════════════════════════════════════════════════
   CWL — Gruppentabelle
   ════════════════════════════════════════════════════════════════════════ */
.kr-cwl-active { margin-bottom: 18px; }

.kr-cwl-group { margin-bottom: 18px; }
.kr-cwl-title, .kr-round-title {
  text-align: center; margin: 0 0 10px;
}
.kr-cwl-title span, .kr-round-title span {
  display: inline-block;
  font-weight: 900; font-size: 16px; letter-spacing: .06em; color: #fff;
  text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0,0,0,.5);
  padding: 7px 30px;
  background: linear-gradient(180deg, #c7402f, #8a1f12);
  border: 2px solid var(--kr-gold-2);
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
}

.kr-table {
  width: 100%; border-collapse: separate; border-spacing: 0 5px;
}
.kr-table thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #f0dcad; text-shadow: 0 1px 0 #000;
  padding: 2px 8px 4px; text-align: left;
}
.kr-th-rank  { width: 48px; text-align: center; }
.kr-th-badge { width: 34px; }
.kr-th-stars, .kr-th-destr { width: 80px; text-align: center; }

.kr-trow td {
  background-color: var(--kr-blue-row);
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.20));
  padding: 9px 8px;
  vertical-align: middle;
  border-top: 2px solid rgba(0,0,0,.35); border-bottom: 2px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.kr-trow td:first-child { border-left: 2px solid rgba(0,0,0,.35); border-radius: 9px 0 0 9px; }
.kr-trow td:last-child  { border-right: 2px solid rgba(0,0,0,.35); border-radius: 0 9px 9px 0; }
.kr-trow.zone-promo td { background-color: #2f6a36; }   /* Aufstieg = grün */
.kr-trow.zone-demo  td { background-color: #8a3a2c; }   /* Abstieg = rot */
.kr-trow.is-own td {
  background-color: #3f5a85;
  box-shadow: inset 0 0 0 2px var(--kr-gold-2), inset 0 1px 0 rgba(255,255,255,.18);
}
.kr-trow.is-own.zone-promo td { background-color: #357a40; }
.kr-trow.is-own.zone-demo  td { background-color: #9c4636; }

.kr-cell-rank { text-align: center; }
.kr-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px;
  font-weight: 900; font-size: 14px; color: #fff;
  text-shadow: 0 1px 0 #000;
}
.kr-cell-badge { text-align: center; }
.kr-cwl-badge { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.kr-cell-name { }
.kr-cwl-name { font-weight: 800; font-size: 15px; color: #fff; text-shadow: 0 1px 0 #000; }
.kr-cwl-wins { margin-left: 8px; font-size: 11px; font-weight: 700; color: #ffe9b0; opacity: .9; }
.kr-cell-stars, .kr-cell-destr { text-align: center; }

.kr-num-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 52px; padding: 4px 9px;
  font-weight: 800; font-size: 14px; color: #fff;
  background: rgba(20,14,6,.55);
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  text-shadow: 0 1px 0 #000;
  font-variant-numeric: tabular-nums;
}
.kr-star-mini { width: 14px; height: 14px; vertical-align: middle; }

.kr-legend {
  display: flex; gap: 16px; justify-content: center; margin-top: 10px;
  font-size: 12px; font-weight: 700; color: #e9d9b4; text-shadow: 0 1px 0 #000;
}
.kr-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.kr-dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.5); display: inline-block; }
.kr-dot--promo { background: #2f6a36; }
.kr-dot--demo  { background: #8a3a2c; }

/* ════════════════════════════════════════════════════════════════════════
   CWL — Runden-Übersicht (klickbare Matchups)
   ════════════════════════════════════════════════════════════════════════ */
.kr-cwl-rounds { display: flex; flex-direction: column; gap: 18px; }
.kr-round-wars { display: flex; flex-direction: column; gap: 8px; }

.kr-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  border-radius: 11px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,.45);
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.kr-match:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,.45); }
.kr-match:active { transform: translateY(0); }
.kr-match:focus-visible { outline: 3px solid var(--kr-gold-2); outline-offset: 2px; }
.kr-match.is-own { box-shadow: 0 0 0 2px var(--kr-gold-2), 0 3px 6px rgba(0,0,0,.4); }

.kr-match-side {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  font-weight: 800; font-size: 15px; color: #fff;
  text-shadow: 0 1px 0 #000;
  min-width: 0;
  background-color: #5a4a36;
  background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.22));
}
.kr-match-side--us   { justify-content: flex-end; text-align: right; }
.kr-match-side--them { justify-content: flex-start; text-align: left; }
.kr-match-side.is-win  { background-color: var(--kr-green); }
.kr-match-side.is-loss { background-color: var(--kr-red); }
.kr-match-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kr-match-badge { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

.kr-match-score {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.55));
}
.kr-match-num {
  font-weight: 900; font-size: 19px; color: #e7d2a0; min-width: 22px; text-align: center;
  text-shadow: 0 1px 0 #000; font-variant-numeric: tabular-nums;
}
.kr-match-num.is-win { color: #fff; text-shadow: 0 0 8px rgba(255,210,80,.8), 0 1px 0 #000; }
.kr-match-vs { font-weight: 800; color: rgba(255,255,255,.6); margin: 0 1px; }

/* ════════════════════════════════════════════════════════════════════════
   Drilldown + Zurück-Button
   ════════════════════════════════════════════════════════════════════════ */
.kr-drilldown { display: flex; flex-direction: column; gap: 12px; }
.kr-back {
  align-self: flex-start;
  font-family: var(--kr-font); font-weight: 800; font-size: 13.5px;
  color: #f3e4c2; text-shadow: 0 1px 0 #000;
  padding: 9px 16px;
  cursor: pointer;
  border: 2px solid #2c1c0a; border-radius: 9px;
  background-color: #6b4621;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.28)), var(--kr-wood);
  background-size: auto, 220px 220px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .08s ease, filter .12s ease;
}
.kr-back:hover { filter: brightness(1.08); }
.kr-back:active { transform: translateY(1px); }

/* ════════════════════════════════════════════════════════════════════════
   Responsive (Mobile)
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .kr-root { --_pad: 9px; border-radius: 10px; }
  .kr-tab { padding: 9px 16px; font-size: 13.5px; }

  .kr-banner { padding: 12px 6px 14px; gap: 5px; }
  .kr-banner-badge { width: 48px; height: 48px; }
  .kr-banner-name { font-size: 13px; }
  .kr-score { min-width: 0; padding: 8px 8px; }
  .kr-score-num { font-size: 34px; }
  .kr-score-star { width: 34px; height: 34px; }
  .kr-score-stars { gap: 6px; }
  .kr-statebar-txt { font-size: 15px; letter-spacing: .08em; }
  .kr-statebar { flex-direction: column; gap: 2px; }

  .kr-map { padding: 8px; }
  .kr-row { grid-template-columns: 1fr 20px 1fr; gap: 4px; }
  .kr-row-mid { font-size: 10px; }
  .kr-base { padding: 6px 7px; gap: 6px; }
  .kr-base--them { gap: 6px; }
  .kr-th { width: 34px; height: 34px; }
  .kr-base-pos { width: 20px; height: 20px; font-size: 11px; }
  .kr-base-name { font-size: 12.5px; }
  .kr-base-pct { font-size: 10px; }
  .kr-base-recv .kr-stars { font-size: 11px; }

  .kr-cwl-name { font-size: 13px; }
  .kr-cwl-wins { display: none; }
  .kr-table thead th { font-size: 10px; }
  .kr-th-stars, .kr-th-destr { width: 58px; }
  .kr-num-pill { min-width: 40px; font-size: 12.5px; padding: 3px 6px; }
  .kr-cwl-badge { width: 24px; height: 24px; }
  .kr-trow td { padding: 7px 5px; }

  .kr-match-side { font-size: 12.5px; padding: 9px 9px; gap: 6px; }
  .kr-match-badge { width: 24px; height: 24px; }
  .kr-match-num { font-size: 16px; min-width: 16px; }
  .kr-match-score { padding: 0 7px; }
}

@media (max-width: 380px) {
  .kr-match-name { font-size: 11px; }
  .kr-base-name { font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════════════
   UX-Politur 2026-06 (Audit): eigene Angriffe, Beschriftungen, Lade-Feedback,
   kontextabhängiger Leerzustand, CWL-Gegner-Links. Rein additiv, kr-*.
   ════════════════════════════════════════════════════════════════════════ */

/* Label „Zerstörung" unter dem Score */
.kr-score-destr-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #bfa97e; text-shadow: 0 1px 0 #000;
}

/* Mini-Legende über den Roster-Spalten */
.kr-map-legend {
  text-align: center;
  font-size: 11px; font-weight: 700; color: #e9d9b4; text-shadow: 0 1px 0 #000;
  opacity: .85;
  margin: -4px 0 9px;
}

/* Eigene Angriffe auf unserer Roster-Seite: Chips + „offen"-Status */
.kr-base-mine { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.kr-mine-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; color: #f3e4c2;
  padding: 2px 7px;
  background: rgba(22,14,6,.52);
  border: 1px solid rgba(255,225,160,.28);
  border-radius: 999px;
  text-shadow: 0 1px 0 #000;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.kr-mine-chip .kr-star-mini { width: 11px; height: 11px; }
.kr-mine-pct { color: #e7d2a0; font-weight: 700; }
.kr-mine-chip--open { color: #ffd9a8; border-color: rgba(255,170,90,.45); }

/* CWL-Standings: Gegnernamen als Links (Muster .kr-base-name) */
.kr-cwl-link { text-decoration: none; }
.kr-cwl-link:hover { color: var(--kr-gold-1); text-decoration: underline; }

/* Lade-Feedback Drilldown: Matchup-Karte dimmt + Gold-Spinner-Overlay */
.kr-match { position: relative; }
.kr-match.htmx-request { pointer-events: none; filter: brightness(.85); }
.kr-match.htmx-request::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,12,4,.45);
}
.kr-match.htmx-request::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 3px solid rgba(255,228,134,.35); border-top-color: var(--kr-gold-2);
  animation: kr-spin .7s linear infinite;
  z-index: 1;
}
@keyframes kr-spin { to { transform: rotate(360deg); } }

/* Lade-Feedback Zurück-Button: Punkte-Animation wie .kr-loading */
.kr-back.htmx-request { pointer-events: none; opacity: .75; }
.kr-back.htmx-request::after { content: ""; animation: kr-dots 1.2s steps(4,end) infinite; }

/* Leerzustand „Krieg"-Tab: Hinweis + CTA (Gold-Look wie .kr-tab.is-active) */
.kr-empty-sub { font-size: 13.5px; font-weight: 600; max-width: 46ch; }
.kr-empty-link { font-weight: 700; color: var(--kr-ink); text-decoration: underline; }
.kr-empty-link:hover { color: var(--kr-ink-2); }
.kr-empty-cta {
  font-family: var(--kr-font); font-weight: 800; font-size: 14px;
  color: #3a2407; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  padding: 10px 22px; cursor: pointer;
  border: 2px solid var(--kr-gold-line); border-radius: 10px;
  background-image: linear-gradient(180deg, var(--kr-gold-1), var(--kr-gold-2) 55%, var(--kr-gold-3));
  box-shadow: 0 3px 0 #6e4a08, inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .08s ease, filter .12s ease;
}
.kr-empty-cta:hover { filter: brightness(1.06); }
.kr-empty-cta:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .kr-mine-chip { font-size: 10px; padding: 2px 6px; }
  .kr-map-legend { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════
   A2 + C2 (2026-06): CWL-Gruppen-Scouting (Saison-Header, TH-Verteilung,
   Clan-Level) + „Du"-Markierung eigener Basen. Rein additiv, kr-*.
   ════════════════════════════════════════════════════════════════════════ */

/* CWL-Header: Saison + Status unter dem „Liga-Gruppe"-Titel */
.kr-cwl-sub {
  text-align: center;
  margin: -4px 0 10px;
  font-size: 12.5px; font-weight: 700; color: #e9d9b4;
  text-shadow: 0 1px 0 #000;
  opacity: .92;
}
.kr-cwl-sub-sep { opacity: .55; }

/* Clan-Level-Chip neben dem Namen in der Gruppentabelle */
.kr-cwl-lvl {
  margin-left: 8px;
  font-size: 10.5px; font-weight: 800; color: #d9c69a;
  padding: 1px 6px;
  background: rgba(20,14,6,.5);
  border: 1px solid rgba(255,225,160,.25);
  border-radius: 5px;
  text-shadow: 0 1px 0 #000;
  vertical-align: 1px;
  white-space: nowrap;
}

/* TH-Pill-Reihe (Saison-Kader) unter jeder Clan-Zeile (Optik: .kr-mine-chip) */
.kr-cwl-ths { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.kr-th-pill {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800; color: #f3e4c2;
  padding: 2px 7px;
  background: rgba(22,14,6,.52);
  border: 1px solid rgba(255,225,160,.28);
  border-radius: 999px;
  text-shadow: 0 1px 0 #000;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}
.kr-th-pill--avg {
  color: #3a2407; text-shadow: 0 1px 0 rgba(255,255,255,.4);
  background: linear-gradient(180deg, var(--kr-gold-1), var(--kr-gold-2) 60%, var(--kr-gold-3));
  border-color: var(--kr-gold-line);
}
.kr-th-pill--rest { opacity: .75; }

/* C2: eigene Base — Gold-Ring + Glow + „Du"-Badge. outline/filter statt
   box-shadow, damit die wm-*-Trefferkanten der Karte erhalten bleiben. */
.kr-base.kr-is-me {
  position: relative;
  outline: 2px solid var(--kr-gold-2);
  outline-offset: -2px;
  filter: drop-shadow(0 0 7px rgba(240,180,41,.5));
}
.kr-me-badge {
  position: absolute; top: -9px; left: 32px; z-index: 1;
  font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  color: #3a2407; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  padding: 1px 8px;
  background: linear-gradient(180deg, var(--kr-gold-1), var(--kr-gold-2) 60%, var(--kr-gold-3));
  border: 1px solid var(--kr-gold-line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
  line-height: 1.5;
}
.kr-base--them.kr-is-me .kr-me-badge { left: auto; right: 32px; }

@media (max-width: 560px) {
  .kr-cwl-sub { font-size: 11px; }
  .kr-cwl-lvl { display: none; }
  .kr-cwl-ths { gap: 3px; margin-top: 4px; }
  .kr-th-pill { font-size: 9.5px; padding: 2px 5px; }
  .kr-me-badge { font-size: 9px; left: 26px; }
  .kr-base--them.kr-is-me .kr-me-badge { right: 26px; }
}