/* ============================================================================
   CoC-Theme — generisch wiederverwendbare Clash-of-Clans-Stilelemente.
   Namespace: coc-*  ·  global in base.html geladen.
   Texturen + Sterne werden aus /static/warroom/ wiederverwendet.
   Verwendet von: /clan, /wars, /warlog, /capital, /kriegsraum.
   ============================================================================ */

:root {
  --coc-wood:   url("/static/warroom/tex/wood.webp");
  --coc-stone:  url("/static/warroom/tex/stone.webp");
  --coc-parch:  url("/static/warroom/tex/parchment.webp");
  --coc-gold-1: #ffe486;
  --coc-gold-2: #f0b429;
  --coc-gold-3: #a9710c;
  --coc-gold-line: #7a4d05;
  --coc-ink:    #2a1c0d;
  --coc-ink-2:  #5a3c18;
  --coc-cream:  #f6e7c8;
  --coc-blue:   #3a5170;
  --coc-blue-d: #1f2f48;
  --coc-blue-l: #4a679a;
  --coc-red:    #823525;
  --coc-red-d:  #4a1a10;
  --coc-red-l:  #b85040;
  --coc-green:  #4e8a2c;
  --coc-green-d:#356018;
  --coc-purple: #6f4ba8;
  --coc-purple-d: #3d2766;
  --coc-font: 'Segoe UI', 'Trebuchet MS', system-ui, -apple-system, sans-serif;
}

/* ── Seiten-Wrapper: Stein-Boden, voller Breite ──────────────────────────── */
.coc-root {
  font-family: var(--coc-font);
  color: var(--coc-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(--coc-stone);
  background-size: auto, auto, 256px 256px;
  border-radius: 14px;
  padding: 14px;
  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;
}
.coc-root * { box-sizing: border-box; }

/* ── Holz-Panel: goldgerahmter Container ─────────────────────────────────── */
.coc-panel {
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--coc-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(--coc-wood);
  background-size: auto, 240px 240px;
  margin-bottom: 18px;
}
.coc-panel + .coc-panel { margin-top: 18px; }

/* Header eines Panels (goldener Holz-Balken) */
.coc-panel-head {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background-color: #5e3d1c;
  background-image:
    linear-gradient(180deg, rgba(255,220,140,.18), rgba(0,0,0,.20)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  border-bottom: 3px solid var(--coc-gold-line);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.coc-panel-title {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.5);
}
.coc-panel-sub {
  font-weight: 700;
  font-size: 12px;
  color: #e9d9b4;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* ── Hero-Banner (Wappen + Name + Stats), wie In-Game-Clan-Kopf ──────────── */
.coc-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 20px 24px;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.10)),
    linear-gradient(180deg, rgba(110,160,210,.32), rgba(40,80,130,.50));
  border-bottom: 3px solid var(--coc-gold-line);
}
.coc-hero.is-compact {
  gap: 14px;
  padding: 12px 16px;
}
.coc-hero.is-compact .coc-hero-badge { width: 56px; height: 56px; }
.coc-hero.is-compact .coc-hero-badge-ph { font-size: 38px; }
.coc-hero.is-compact .coc-hero-level { width: 22px; height: 22px; min-width: 22px; font-size: 11px; }
.coc-hero.is-compact .coc-hero-name { font-size: 18px; margin-bottom: 2px; }
.coc-hero.is-compact .coc-hero-tag { font-size: 11px; margin-bottom: 6px; }
.coc-hero-badge {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.coc-hero-badge img { width: 100%; height: 100%; object-fit: contain; }
.coc-hero-badge-ph { font-size: 56px; }
.coc-hero-level {
  position: absolute;
  bottom: -2px; right: -4px;
  min-width: 28px; height: 28px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--coc-purple), var(--coc-purple-d));
  border: 2px solid #1d122f; border-radius: 50%;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.coc-hero-body { min-width: 0; }
.coc-hero-name {
  font-weight: 800; font-size: 26px; line-height: 1.1; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.5);
  margin-bottom: 4px;
  word-break: break-word;
}
.coc-hero-tag {
  font-family: Consolas, monospace; font-size: 12px;
  color: #e9d9b4; opacity: .8;
  margin-bottom: 10px;
}
.coc-hero-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.coc-hero-desc {
  font-size: 12px; color: #e9d9b4; opacity: .85;
  margin-top: 8px; max-width: 60ch;
}
.coc-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 10px 16px;
  align-items: center;
}
.coc-hero-stat {
  text-align: center;
  padding: 6px 10px;
  min-width: 64px;
}
.coc-hero-stat-val {
  font-weight: 800; font-size: 22px; line-height: 1;
  color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.5);
}
.coc-hero-stat-val.is-green { color: #b6f08d; }
.coc-hero-stat-val.is-red   { color: #ffb3a5; }
.coc-hero-stat-val.is-gold  { color: var(--coc-gold-1); }
.coc-hero-stat-lbl {
  font-size: 11px; font-weight: 700;
  color: #e9d9b4; opacity: .85;
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: 2px;
}

/* ── Pille (kleines Info-Etikett, holz-/gold-look) ────────────────────────── */
.coc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--coc-ink);
  background: linear-gradient(180deg, #f8e6b0, #d9a83e);
  border: 1.5px solid var(--coc-gold-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.coc-pill.is-green { background: linear-gradient(180deg, #b6f08d, #4e8a2c); color: #1a2e0a; border-color: #2c5410; }
.coc-pill.is-red   { background: linear-gradient(180deg, #ffb3a5, #b23a26); color: #3a0f08; border-color: #7e1b11; }
.coc-pill.is-blue  { background: linear-gradient(180deg, #a8c8f0, #4a679a); color: #0f1c33; border-color: #1f2f48; }
.coc-pill.is-purple{ background: linear-gradient(180deg, #c8a8e6, var(--coc-purple)); color: #1a0f33; border-color: var(--coc-purple-d); }
.coc-pill.is-dark  { background: linear-gradient(180deg, #5a4528, #2a1c0d); color: #f6e7c8; border-color: #1a0f05; text-shadow: 0 1px 0 #000; }

/* ── Ribbon: Ergebnis-Bänder (Sieg/Niederlage/Unentschieden) ─────────────── */
.coc-ribbon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px;
  font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  border: 2px solid rgba(0,0,0,.45);
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.coc-ribbon.is-win  { background: linear-gradient(180deg, #6dba38, var(--coc-green-d)); }
.coc-ribbon.is-loss { background: linear-gradient(180deg, #d54a30, var(--coc-red-d)); }
.coc-ribbon.is-tie  { background: linear-gradient(180deg, var(--coc-gold-1), var(--coc-gold-3)); color: var(--coc-ink); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.coc-ribbon.is-cwl  { background: linear-gradient(180deg, #c8a8e6, var(--coc-purple-d)); }
.coc-ribbon.is-prep { background: linear-gradient(180deg, #f5b75a, #a85a1c); }
.coc-ribbon.is-live { background: linear-gradient(180deg, #d54a30, #7e1b11); animation: coc-pulse 1.6s ease-in-out infinite; }

@keyframes coc-pulse {
  0%, 100% { box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 rgba(213,74,48,0); }
  50%      { box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18), 0 0 16px rgba(255,90,60,.7); }
}

/* ── Reihe: CWL-blau (links/us) bzw. -rot (rechts/them) ──────────────────── */
.coc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 2px solid rgba(0,0,0,.4);
  border-radius: 11px;
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.10);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  min-height: 44px;
}
.coc-row.is-blue {
  background-image:
    linear-gradient(180deg, var(--coc-blue-l), var(--coc-blue));
}
.coc-row.is-red {
  background-image:
    linear-gradient(180deg, var(--coc-red-l), var(--coc-red));
}
.coc-row.is-gold {
  background-image:
    linear-gradient(180deg, var(--coc-gold-1), var(--coc-gold-3));
  color: var(--coc-ink); text-shadow: 0 1px 0 rgba(255,255,255,.4);
  border-color: var(--coc-gold-line);
}
.coc-row.is-dimmed { filter: saturate(.4) brightness(.85); opacity: .85; }

/* Rang-Marker links auf der Reihe (Quadrat mit Goldrand) */
.coc-row-rank {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  color: var(--coc-ink);
  background: linear-gradient(180deg, var(--coc-gold-1), var(--coc-gold-2));
  border: 2px solid var(--coc-gold-line);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.coc-row-name { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coc-row-name a, .coc-row-name a:visited { color: inherit; text-decoration: none; }
.coc-row-name a:hover { color: var(--coc-gold-1); text-decoration: underline; }
.coc-row-meta { font-size: 11px; opacity: .8; font-weight: 600; }
.coc-row-val { font-weight: 800; font-size: 15px; flex-shrink: 0; }

/* ── TH-Icon-Container, einheitlich gerahmt ──────────────────────────────── */
.coc-th {
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.coc-th img {
  width: 30px; height: 30px; object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
.coc-th b {
  font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.5);
  padding: 1px 5px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.15);
  text-shadow: 0 1px 0 #000;
}

/* ── Section-Titel (Holz-Balken mit goldenem Schriftzug) ─────────────────── */
.coc-section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 10px;
  padding: 8px 16px;
  background-color: #5e3d1c;
  background-image:
    linear-gradient(180deg, rgba(255,220,140,.18), rgba(0,0,0,.20)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  border: 2px solid var(--coc-gold-line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 0 rgba(0,0,0,.3);
  color: var(--coc-gold-1);
  font-weight: 800; font-size: 15px; letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
}
.coc-section-title-sub {
  margin-left: auto;
  font-size: 12px; font-weight: 700; color: #e9d9b4; opacity: .8;
  text-transform: none; letter-spacing: 0;
}

/* ── Stat-Grid (innere Zahlen-Kacheln, z. B. Capital Stats) ──────────────── */
.coc-stat-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: 14px 16px;
}
.coc-stat-grid.is-compact {
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  padding: 8px 10px;
}
.coc-stat {
  padding: 10px 12px;
  background-color: rgba(0,0,0,.32);
  border: 2px solid rgba(255,220,140,.20);
  border-radius: 8px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.coc-stat.is-compact { padding: 6px 8px; border-width: 1.5px; border-radius: 6px; }
.coc-stat-lbl {
  font-size: 11px; font-weight: 700; color: #e9d9b4;
  text-transform: uppercase; letter-spacing: .04em; opacity: .85;
}
.coc-stat.is-compact .coc-stat-lbl { font-size: 9px; letter-spacing: .03em; }
.coc-stat-val {
  font-size: 22px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.5);
  line-height: 1.15; margin-top: 2px;
}
.coc-stat.is-compact .coc-stat-val { font-size: 16px; line-height: 1.1; margin-top: 1px; }
.coc-stat-val.is-gold  { color: var(--coc-gold-1); }
.coc-stat-val.is-green { color: #b6f08d; }
.coc-stat-val.is-blue  { color: #a8c8f0; }
.coc-stat-val.is-red   { color: #ffb3a5; }

/* ── Liste (gruppiert, mit Goldlinien zwischen Zeilen) ───────────────────── */
.coc-list { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }

/* ── Wars-Historie: kompaktes Versus-Band ────────────────────────────────── */
.coc-vs-band {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  gap: 14px; align-items: center;
  padding: 10px 16px;
  border-radius: 10px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.10);
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.coc-vs-band + .coc-vs-band { margin-top: 6px; }
.coc-vs-side {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.coc-vs-side.is-right { justify-content: flex-end; }
.coc-vs-name {
  font-weight: 800; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coc-vs-name a, .coc-vs-name a:visited { color: inherit; text-decoration: none; }
.coc-vs-name a:hover { color: var(--coc-gold-1); }
.coc-vs-sub { font-size: 11px; color: #e9d9b4; opacity: .8; }
.coc-vs-score {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 18px;
  padding: 4px 10px;
  background: rgba(0,0,0,.4);
  border-radius: 8px;
  border: 1px solid rgba(255,220,140,.2);
}
.coc-vs-score img { width: 18px; height: 18px; }
.coc-vs-meta {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; color: #e9d9b4; opacity: .85;
}

/* ── Filter-Leiste (Suchfeld + TH-Chips, im Holz-Stil) ───────────────────── */
.coc-filter {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px;
  align-items: center;
  background-color: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,220,140,.15);
}
.coc-filter input[type="text"] {
  flex: 1; min-width: 200px;
  padding: 7px 12px;
  background: #2a1c0d;
  color: var(--coc-cream);
  border: 2px solid var(--coc-gold-line);
  border-radius: 7px;
  font-family: var(--coc-font); font-size: 13px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.coc-filter input[type="text"]:focus {
  outline: none; border-color: var(--coc-gold-1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 2px rgba(240,180,40,.4);
}
.coc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.coc-chip {
  padding: 5px 11px;
  font-size: 11px; font-weight: 700;
  color: #e9d9b4;
  background: linear-gradient(180deg, #6b4621, #3d2710);
  border: 1.5px solid #1a0f05;
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  transition: filter .08s ease;
}
.coc-chip:hover { filter: brightness(1.12); }
.coc-chip.is-active {
  color: var(--coc-ink); text-shadow: 0 1px 0 rgba(255,255,255,.4);
  background: linear-gradient(180deg, var(--coc-gold-1), var(--coc-gold-2));
  border-color: var(--coc-gold-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ── Tabellen-Look (für die Roster-Tabelle innerhalb eines coc-panel) ─────── */
.coc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 5px;
  padding: 8px 14px 14px;
}
.coc-table thead th {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--coc-gold-1); opacity: .85;
  text-align: left;
  padding: 4px 8px;
  text-shadow: 0 1px 0 #000;
}
.coc-table thead th.c-c { text-align: center; }
.coc-table thead th.c-r { text-align: right; }
.coc-table tbody tr {
  background-image:
    linear-gradient(180deg, var(--coc-blue-l), var(--coc-blue));
  color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5);
  box-shadow: 0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.10);
}
.coc-table tbody tr.is-alt {
  background-image:
    linear-gradient(180deg, #4f5c75, #2c3850);
}
.coc-table tbody tr.is-dimmed { filter: saturate(.4) brightness(.85); opacity: .85; }
.coc-table tbody td {
  padding: 7px 8px;
  font-size: 13px; font-weight: 600;
  border-top: 1px solid rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(0,0,0,.35);
}
.coc-table.is-compact { border-spacing: 0 3px; padding: 6px 10px 10px; }
.coc-table.is-compact thead th { font-size: 10px; padding: 2px 6px; }
.coc-table.is-compact tbody td { padding: 4px 6px; font-size: 12px; }
.coc-table tbody td:first-child {
  border-left: 2px solid rgba(0,0,0,.45);
  border-top-left-radius: 9px; border-bottom-left-radius: 9px;
}
.coc-table tbody td:last-child {
  border-right: 2px solid rgba(0,0,0,.45);
  border-top-right-radius: 9px; border-bottom-right-radius: 9px;
}
.coc-table td.c-c { text-align: center; }
.coc-table td.c-r { text-align: right; }
.coc-table td.c-rank { text-align: center; font-weight: 800; color: var(--coc-gold-1); }
.coc-table .coc-cell-name a, .coc-table .coc-cell-name a:visited { color: #fff; text-decoration: none; font-weight: 700; }
.coc-table .coc-cell-name a:hover { color: var(--coc-gold-1); text-decoration: underline; }
.coc-table .coc-cell-tag {
  font-size: 11px; font-family: Consolas, monospace;
  color: #e9d9b4; opacity: .65; display: block;
  margin-top: 1px;
}

/* Spenden-Balken — schmaler Streifen unter Spendenzahlen */
.coc-don-bar {
  height: 4px; border-radius: 2px;
  background: rgba(0,0,0,.4);
  margin-top: 2px;
  overflow: hidden;
}
.coc-don-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--coc-gold-1), var(--coc-gold-2));
}

/* Sterne (klein, inline) */
.coc-stars { display: inline-flex; align-items: center; gap: 1px; line-height: 0; vertical-align: middle; }
.coc-stars img { width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgba(90,60,0,.55)); }
.coc-stars.is-lg img { width: 22px; height: 22px; }

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

/* Details/Summary im CoC-Look (für Capital-Seasons) */
.coc-details { margin-bottom: 12px; }
.coc-details.is-compact > summary { padding: 7px 12px; font-size: 13px; gap: 8px; }
.coc-details.is-compact .coc-details-arrow { font-size: 11px; }
.coc-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px;
  background-color: #5e3d1c;
  background-image:
    linear-gradient(180deg, rgba(255,220,140,.18), rgba(0,0,0,.20)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  border: 3px solid var(--coc-gold-line);
  border-radius: 12px;
  color: #fff; text-shadow: 0 1px 0 #000;
  font-weight: 800;
  box-shadow: 0 2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.coc-details > summary::-webkit-details-marker { display: none; }
.coc-details > summary::marker { display: none; }
.coc-details[open] > summary {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom: 2px solid var(--coc-gold-line);
}
.coc-details-arrow {
  display: inline-block;
  transition: transform .15s ease;
  font-size: 14px; color: var(--coc-gold-1);
}
.coc-details[open] > summary .coc-details-arrow { transform: rotate(90deg); }
.coc-details-body {
  border: 3px solid var(--coc-gold-line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background-color: #7a5026;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)), var(--coc-wood);
  background-size: auto, 240px 240px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* Responsive Anpassungen */
@media (max-width: 760px) {
  .coc-hero { grid-template-columns: auto 1fr; padding: 14px 16px; }
  .coc-hero-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .coc-hero-name { font-size: 22px; }
  .coc-vs-band {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px; padding: 10px 12px;
  }
  .coc-vs-band > :nth-child(3) { grid-column: 1 / -1; order: 99; }
}

/* ============================================================================
   SITEWIDE-RESKIN (2026-06-03) — macht die KOMPLETTE Website Clash-of-Clans-
   artig, wie der Kriegsraum. Lädt nach style.css → überschreibt Hülle +
   generische Primitive. Keine Template-Änderungen nötig.
   Strategie: (1) Design-Tokens auf CoC-Palette ummappen (recoloriert alles),
   (2) Navbar/Hintergrund/Cards/Buttons/Formulare/Tabellen texturieren+prägen.
   CoC ist eine warme Dunkelwelt → gilt bewusst für beide data-theme-Werte.
   ============================================================================ */

/* ── (1) Token-Remap — beide Themes auf warmes Holz/Stein/Gold ───────────── */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --c-bg:      #1f160d;
  --c-surface: #5e3d1c;
  --c-card:    #7a5026;
  --c-card2:   #6b4621;
  --c-border:  #7a4d05;
  --c-border2: rgba(0,0,0,.28);
  --c-text:    #f6e7c8;
  --c-muted:   #d8c7a0;
  --c-dim:     #b09b74;
  --c-gold:    #f5c542;
  --c-gold-d:  #a9710c;
  --shadow:    0 8px 24px rgba(0,0,0,.5);
  /* Akzentfarben: helle CoC-Pastelltöne (analog .coc-stat-val.is-*) statt der
     alten Dunkel-Theme-Akzente — rot #e84545 hatte auf Karten-Holz nur 1.8:1. */
  --c-red:    #ffb3a5;
  --c-green:  #b6f08d;
  --c-blue:   #a8c8f0;
  --c-purple: #c8a8e6;
  --c-orange: #f5b75a;
}

/* Gegenregel: var(--c-green) dient bei [data-copy].copied (style.css) als
   VOLLFLÄCHIGER Hintergrund — heller Pastell-BG braucht dunklen Text statt weiß. */
[data-copy].copied { color: #1a2e0a; text-shadow: none; }

/* ── (2a) Steinboden-Welt (fix, torch-lit Vignette oben) ─────────────────── */
body {
  background-color: #1f160d;
  background-image:
    radial-gradient(120% 70% at 50% -8%, rgba(150,110,50,.32), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.42)),
    var(--coc-stone);
  background-size: auto, auto, 256px 256px;
  background-attachment: fixed;
  color: var(--coc-cream);
  -webkit-font-smoothing: antialiased;
}

/* ── (2b) Navbar = Holzbalken mit goldener Unterkante ────────────────────── */
.navbar {
  background-color: #5e3d1c;
  background-image:
    linear-gradient(180deg, rgba(255,220,140,.16), rgba(0,0,0,.32)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  border-bottom: 3px solid var(--coc-gold-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,220,140,.22),
    0 3px 0 rgba(0,0,0,.32),
    0 7px 20px rgba(0,0,0,.55);
}
.navbar-brand { color: #fff; }
.navbar-brand .brand-name {
  color: var(--coc-gold-1);
  font-weight: 800; letter-spacing: .02em;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(240,180,40,.45);
}
.navbar-brand img { background: rgba(0,0,0,.3); border: 1px solid var(--coc-gold-line); }
.nav-link {
  color: #e9d9b4; font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.nav-link:hover { color: #fff; background: rgba(0,0,0,.24); }
.nav-link.active {
  color: var(--coc-ink);
  background: linear-gradient(180deg, var(--coc-gold-1), var(--coc-gold-2));
  border: 1.5px solid var(--coc-gold-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.navbar-user .username { color: var(--coc-cream); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.navbar-user .avatar { border: 2px solid var(--coc-gold-line); }

/* ── (2c) Cards = goldgerahmte Holzpaneele ───────────────────────────────── */
.card {
  background-color: #7a5026;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  border: 3px solid var(--coc-gold-line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.25);
}
.card-header {
  background-color: #5e3d1c;
  background-image:
    linear-gradient(180deg, rgba(255,220,140,.16), rgba(0,0,0,.22)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  border-bottom: 3px solid var(--coc-gold-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.3);
}
.card-title { color: #fff; letter-spacing: .02em; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.5); }

/* ── (2d) Buttons = Gold-Bevel / Stein-Ghost ─────────────────────────────── */
.btn { border-radius: 10px; font-weight: 800; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.btn-gold, .btn-primary {
  background: linear-gradient(180deg, #ffe486 0%, #f0b429 48%, #d9920f 100%);
  color: #3a2606;
  border: 1.5px solid var(--coc-gold-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #7a4d05, 0 5px 10px rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover, .btn-primary:hover { filter: brightness(1.06); }
.btn-gold:active, .btn-primary:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #7a4d05;
}
.btn-ghost {
  color: var(--coc-cream);
  background: linear-gradient(180deg, #6b4621, #3d2710);
  border: 1.5px solid #1a0f05;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.35);
}
.btn-ghost:hover { background: linear-gradient(180deg, #7a5026, #4a300f); filter: none; }

/* ── (2e) Formularfelder = versenktes Holz mit Goldrahmen ────────────────── */
.select,
.input-group input,
input[type="text"],
input[type="number"],
.navbar-search-input,
.navbar-select {
  background: #2a1c0d;
  color: var(--coc-cream);
  border: 2px solid var(--coc-gold-line);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.select:focus,
.input-group input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
.navbar-search-input:focus {
  outline: none;
  border-color: var(--coc-gold-1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 2px rgba(240,180,40,.35);
}
.select option, .select optgroup { background: #2a1c0d; color: var(--coc-cream); }
.navbar-search-input::placeholder { color: #b09b74; }

/* ── (2f) Überschriften = geprägtes Gold ─────────────────────────────────── */
h1, h2, h3 {
  color: var(--coc-gold-1);
  text-shadow: 0 1px 0 #000, 0 2px 4px rgba(0,0,0,.4);
  letter-spacing: .02em;
}

/* ── (2g) Daten-Tabellen = CoC-getönt (Lesbarkeit bleibt) ────────────────── */
table.dt th {
  color: var(--coc-gold-1);
  text-transform: uppercase; letter-spacing: .04em;
  background: rgba(0,0,0,.28);
  border-bottom-color: var(--coc-gold-line) !important;
  text-shadow: 0 1px 0 #000;
}
table.dt td { border-bottom-color: rgba(0,0,0,.32) !important; }
table.dt tbody tr:hover td { background: rgba(240,180,40,.10); }

/* ── (2h) Footer = Holzbalken mit Goldkante ──────────────────────────────── */
.footer {
  border-top: 3px solid var(--coc-gold-line);
  background-color: #4a300f;
  background-image:
    linear-gradient(180deg, rgba(255,220,140,.10), rgba(0,0,0,.30)),
    var(--coc-wood);
  background-size: auto, 240px 240px;
  color: #d8c7a0;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  box-shadow: inset 0 2px 0 rgba(0,0,0,.3);
}

/* ── (2i) Kleinkram angleichen: code, Badges, Stat-Boxen ─────────────────── */
code {
  background: rgba(0,0,0,.35);
  color: var(--coc-gold-1);
  border: 1px solid rgba(255,220,140,.18);
}
.badge { border-radius: 999px; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.stat-box {
  background: rgba(0,0,0,.3);
  border: 2px solid rgba(255,220,140,.18);
  border-radius: 8px;
}
.stat-val { color: #fff; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.5); }
.page-meta { color: #c9b78e; }

/* Scrollbar im Holz-Look (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8a5e2c, #4a300f);
  border-radius: 8px; border: 2px solid rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a9710c, #5e3d1c); }

/* ── (2j) Landing-Hero = blaues In-Game-Clan-Banner mit Goldrahmen ───────── */
.lp-hero {
  background-color: #2f456a;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.10)),
    linear-gradient(180deg, rgba(110,160,210,.42), rgba(36,72,120,.62));
  border: 3px solid var(--coc-gold-line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.25);
}
.lp-name { text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.5); }
.lp-pill {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,220,140,.28);
  color: #e9d9b4;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.lp-badge { filter: drop-shadow(0 4px 14px rgba(0,0,0,.55)); }

/* ── (2k) Tastatur-Fokus sitewide sichtbar machen (Gold, wie .kr-match) ──── */
a:focus-visible, button:focus-visible, summary:focus-visible,
select:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--coc-gold-2);
  outline-offset: 2px;
}
/* Abgerundete Outline nur dort, wo das Element selbst keinen eigenen Radius
   mitbringt (Buttons/Inputs behalten ihre Form, Links bekommen weiche Ecken). */
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { border-radius: 4px; }

/* ============================================================================
   LESBARKEIT (2026-06-03) — mehr Kontrast + Mindestgrößen für Kleintext auf
   der Holz/Stein-Textur (nachgezogen nach dem Sitewide-Reskin: zu kleine /
   zu kontrastarme Sekundärtexte).
   ============================================================================ */
/* (a) Muted/Dim-Töne global aufhellen — Haupthebel für Kontrast auf Holz */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --c-muted: #ece0c4;   /* vorher #d8c7a0 */
  --c-dim:   #d0bd96;   /* vorher #b09b74 — war auf Holz/Blau zu schwach */
}

/* (b) Tags & Untertitel: helles Cream, volle Deckkraft, Schatten zur Trennung */
.lp-tag, .coc-hero-tag, .clan-hero-tag {
  color: #f0e4c8;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.lp-desc, .coc-hero-desc { color: #efe3c6; opacity: 1; }
.lp-pill { color: #f3e8cd; }
.coc-vs-sub, .coc-row-meta, .coc-hero-stat-lbl,
.coc-section-title-sub, .coc-stat-lbl, .stat-sub { opacity: 1; }

/* (c) Mini-Labels (waren 9–10px) auf min. 11px + voll deckend */
.stat-lbl, .hs-lbl, .raid-stat-lbl, .quick-desc,
.player-league-sub, .wm-header-sub, .wm-score-destr, .wm-chip { font-size: 11px; }
.wm-chip-stars, .wm-chip-pct { font-size: 10.5px; }
.coc-stat-lbl { font-size: 11px; letter-spacing: .03em; }

/* (d) Schwache Weiß-Transparenzen auf Textur anheben */
.wm-chip-pct { color: rgba(255,255,255,.82); }
.wm-sec-label, .wm-pos, .wm-noatt, .hero-max, .unit-max { color: #d8c7a0; }

/* (e) Generische Muted-Texte auf Holz: feiner Schatten trennt sie vom Grund */
.text-muted, .page-meta, .readonly dt { text-shadow: 0 1px 1px rgba(0,0,0,.4); }

/* (f) Bestenlisten — Text schwebte direkt auf nacktem Holz (schlecht lesbar).
       Dunkle, eingelassene Zeilen-Backings (wie die CoC-Zeilen) + helle Namen.
       Greift auf /leveling, /hall-of-fame und den Landing-Top-Listen. */
.leaderboard { padding: 4px; }
.leaderboard li {
  background: rgba(20,12,5,.60);
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3);
}
.leaderboard li:last-child { margin-bottom: 0; border-bottom: none; }
.leaderboard .name {
  color: #fff; font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.leaderboard .value { color: var(--coc-gold-1); text-shadow: 0 1px 0 #000; }
.leaderboard .rank { background: rgba(0,0,0,.42); color: #f0e4c8; }
.leaderboard li:nth-child(1) .rank {
  background: linear-gradient(180deg, var(--coc-gold-1), var(--coc-gold-2)); color: var(--coc-ink);
}
.leaderboard li:nth-child(2) .rank {
  background: linear-gradient(180deg, #e8e8f0, #9aa0b5); color: #1a1f2e;
}
.leaderboard li:nth-child(3) .rank {
  background: linear-gradient(180deg, #e0a85a, #a9710c); color: #2a1c0d;
}

/* (g) Kriegs-Band-Mitte: Zerstörungs-% + Datum waren inline 10px/opacity:.7
       → unlesbar. Jetzt klare, helle Klassen. (wars.html + warlog.html) */
.coc-vs-destr {
  font-size: 12.5px; font-weight: 700; color: #fff;
  letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
.coc-vs-when { font-size: 11px; color: #e7d8b6; }

/* (h) Capital-Statzeile (NUR /capital): war über die volle Breite gezogen mit
       9px-Labels/16px-Werten → kompakter zentrierter Block + größere Schrift */
.coc-stat-grid.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.coc-stat.is-compact { padding: 10px 12px; }
.coc-stat.is-compact .coc-stat-lbl { font-size: 12px; letter-spacing: .03em; }
.coc-stat.is-compact .coc-stat-val { font-size: 22px; margin-top: 2px; }

/* (h2) Capital-Tabelle (NUR /capital): 10px-Header / 12px-Zeilen waren zu klein
       und kontrastarm. Größere, hellere Schrift + höhere Zeilen zum Scannen. */
.coc-table.is-compact thead th { font-size: 12.5px; padding: 5px 8px; opacity: 1; }
.coc-table.is-compact tbody td { font-size: 15px; padding: 9px 9px; }
.coc-table.is-compact td.c-rank { font-size: 15px; }

/* (i) Spielerprofil — Helden-Ausrüstung + Truppen-Grid (player.html/me.html):
       Namen 9–10px, „/XX"-Suffix 9px, Karten wood-auf-wood → unlesbar.
       Wie oben: dunklere Kacheln + größere/hellere Schrift + volle Namen (2 Z.) */
.hero-card, .unit-card {
  background: rgba(22,14,6,.52);
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.hero-card.hero-maxed { border-color: rgba(120,225,140,.6); }
.unit-card.unit-maxed { border-color: rgba(120,225,140,.5); background: rgba(48,98,48,.42); }
.hero-name, .unit-name {
  color: #f1e6cc;
  display: block !important;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: clip;
}
.hero-name { font-size: 11px; line-height: 1.2; min-height: 26px; }
.unit-name { font-size: 10.5px; line-height: 1.2; min-height: 25px; }
.hero-max  { font-size: 12px; color: #ddca9f; font-weight: 600; }
.unit-max  { font-size: 11px; color: #ddca9f; font-weight: 600; }
.unit-lvl  { font-size: 16px; }
.unit-card { width: 92px; }
.heroes-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }

/* ============================================================================
   UX-PASS PHASE 2 (2026-06-09) — Lesbarkeit Warlog/Events, Sortier-Indikator,
   Touch-Targets, prefers-reduced-motion. (Audit 2026-06-09)
   ============================================================================ */

/* (a) /warlog: VS-Bänder lagen als Holz-auf-Stein da — dunkles, eingelassenes
       Backing wie .leaderboard li / .hero-card, Kleintext wird wieder lesbar. */
.coc-vs-band {
  background-color: rgba(22,14,6,.52);
  background-image: none;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3);
}

/* (b) /events: Gold-Countdown-Zahlen lagen nackt auf der Holz-Karte
       → dasselbe dunkle Backing + Schatten. (Klasse .countdown nur dort.) */
.countdown {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(22,14,6,.52);
  border: 1px solid rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow: 0 1px 0 #000;
}

/* (c) Sortierbare Tabellen (sort-table.js auf /clan + /analytics):
       Cursor-Affordance + Pfeil-Indikator über th[aria-sort]. */
table.sortable th[data-sort] { cursor: pointer; user-select: none; }
th[aria-sort="ascending"]::after  { content: " ▲"; color: var(--coc-gold-1); font-size: .75em; }
th[aria-sort="descending"]::after { content: " ▼"; color: var(--coc-gold-1); font-size: .75em; }

/* (d) Mobile: Filterchips (/clan, /bases, /search) auf ~44px Touch-Target.
       .chip/.search-chip leben in style.css — coc-theme lädt danach, Override ok. */
@media (max-width: 680px) {
  .coc-chip, .chip, .search-chip { padding: 10px 14px; }
}

/* (e) prefers-reduced-motion: Animationen/Übergänge praktisch abschalten
       (coc-pulse, kr-dots, Hover-Transitions; Chart.js regelt stats-charts.js). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}