/* =========================================================
   AoE4 Clan Stats – "Feldzug-Logbuch"
   Display: Cinzel (gravierte Versalien) · Text: Inter · Zahlen: IBM Plex Mono
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#14110d; --bg2:#1b1610; --panel:#211b14; --panel2:#2a2219;
  --line:#3a3128; --line-soft:#2b2318;
  --ink:#ece2cc; --ink-dim:#bcae92; --muted:#8c7f68;
  --gold:#c8a24c; --gold-bright:#e3c074; --gold-deep:#9c7a2f;
  --win:#74b65a; --loss:#cb5a4b; --blue:#5b86c2;
  --r-bronze:#b06a3b; --r-silver:#9aa7b0; --r-gold:#d4a92b;
  --r-platinum:#49b3a6; --r-diamond:#5b9be0; --r-conqueror:#c8517a; --r-none:#6b6256;
  --radius:10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 80% -10%, #241d14 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #1d1813 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-bright); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:'IBM Plex Mono',monospace; font-size:.9em}
.display{font-family:Cinzel,Georgia,serif; letter-spacing:.02em}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.num{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums}

.wrap{max-width:1180px; margin:0 auto; padding:0 1.25rem}

/* ---------- Kopf ---------- */
.topbar{border-bottom:1px solid var(--line); background:linear-gradient(#1a150f,#14110d)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.4rem; padding-bottom:1.4rem}
.brand{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap}
.brand h1{font-family:Cinzel,serif; font-weight:700; font-size:1.6rem; margin:0; color:var(--gold);
  text-shadow:0 1px 0 #0c0a07}
.brand .tag{color:var(--ink-dim); font-size:.9rem}
.topbar .meta{text-align:right; font-size:12.5px; color:var(--muted); white-space:nowrap}
.topbar .meta a{margin-left:.8rem}

/* ---------- Hero / Feldzug-Summe ---------- */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{padding:2.2rem 1.25rem}
.hero .eyebrow{font-family:Cinzel,serif; text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color:var(--gold-deep); margin:0 0 1.1rem}
.totals{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.totals .cell{background:var(--panel); padding:1.15rem 1.25rem}
.totals .big{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:2rem; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.1}
.totals .lbl{font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:.35rem}
.totals .cell:first-child .big{color:var(--gold-bright)}

/* ---------- Navigation ---------- */
.nav{position:sticky; top:0; z-index:5; background:rgba(20,17,13,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; gap:.3rem; flex-wrap:wrap; padding:.55rem 1.25rem}
.nav a{color:var(--ink-dim); padding:.45rem .85rem; border-radius:6px; font-weight:600; font-size:.86rem;
  letter-spacing:.02em; text-decoration:none}
.nav a:hover{background:var(--panel); color:var(--ink)}

/* ---------- Sektionen ---------- */
section{padding:2.4rem 0; border-bottom:1px solid var(--line-soft)}
.sec-head{display:flex; align-items:center; gap:.9rem; margin:0 0 1.2rem}
.sec-head h2{font-family:Cinzel,serif; font-weight:600; font-size:1.25rem; margin:0; color:var(--ink)}
.sec-head .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--gold-deep),transparent)}
.sec-head .hint{color:var(--muted); font-size:.82rem}

/* ---------- Tabellen ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel)}
table.grid{width:100%; border-collapse:collapse; font-size:14px}
table.grid th, table.grid td{padding:.7rem .85rem; text-align:left; white-space:nowrap}
table.grid thead th{font-family:Cinzel,serif; font-weight:600; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--gold-deep); border-bottom:1px solid var(--line);
  background:#1d1710; position:sticky; top:0; cursor:pointer; user-select:none}
table.grid thead th.no-sort{cursor:default}
table.grid thead th[aria-sort]::after{content:'↕'; opacity:.35; margin-left:.35rem; font-size:.8em}
table.grid thead th[aria-sort="ascending"]::after{content:'↑'; opacity:.9}
table.grid thead th[aria-sort="descending"]::after{content:'↓'; opacity:.9}
table.grid tbody tr{border-bottom:1px solid var(--line-soft)}
table.grid tbody tr:last-child{border-bottom:none}
table.grid tbody tr:hover{background:#26201700}
table.grid tbody tr:hover td{background:#241e15}
.right{text-align:right!important} .center{text-align:center!important}
td.num,th.num{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; text-align:right}

/* Spielerzelle */
.pl{display:flex; align-items:center; gap:.6rem}
.pl img{width:30px; height:30px; border-radius:5px; background:#000; object-fit:cover; border:1px solid var(--line)}
.pl .nm{font-weight:600}
.pl .sub{font-size:11px; color:var(--muted)}
.flag{font-size:1.05em}

/* Winrate-Balken */
.wr{display:flex; align-items:center; gap:.5rem; justify-content:flex-end}
.wr .bar{width:54px; height:6px; border-radius:3px; background:#3a2f20; overflow:hidden}
.wr .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}

/* Civ-Chip */
.civ{display:inline-flex; align-items:center; gap:.4rem; font-size:13px}
.civ .dot{width:9px; height:9px; border-radius:50%; flex:none}

/* Rang-Badges */
.rank{display:inline-block; font-family:Cinzel,serif; font-size:.7rem; font-weight:600;
  letter-spacing:.04em; padding:.18rem .5rem; border-radius:4px; border:1px solid; white-space:nowrap}
.rank--bronze{color:var(--r-bronze); border-color:#5a3a23; background:#2a1d12}
.rank--silver{color:var(--r-silver); border-color:#475056; background:#1d2225}
.rank--gold{color:var(--r-gold); border-color:#5e4d16; background:#27210e}
.rank--platinum{color:var(--r-platinum); border-color:#1f4f49; background:#0f221f}
.rank--diamond{color:var(--r-diamond); border-color:#274964; background:#10202e}
.rank--conqueror{color:var(--r-conqueror); border-color:#5e2238; background:#27101a}
.rank--none,.rank--unranked{color:var(--r-none); border-color:#3a3128; background:#1d1810}
.streak{font-family:'IBM Plex Mono',monospace; font-weight:600}
.streak.pos{color:var(--win)} .streak.neg{color:var(--loss)}

/* ---------- Head-to-Head Matrix ---------- */
.matrix-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel)}
table.matrix{border-collapse:collapse; font-size:12.5px; min-width:max-content}
table.matrix th,table.matrix td{border:1px solid var(--line-soft); padding:.4rem .5rem; text-align:center}
table.matrix thead th{font-family:Cinzel,serif; font-weight:600; color:var(--gold-deep); font-size:.7rem;
  background:#1d1710; position:sticky; top:0}
table.matrix tbody th{font-weight:600; text-align:left; color:var(--ink); background:#1d1710;
  position:sticky; left:0; white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis}
table.matrix td.diag{background:repeating-linear-gradient(45deg,#1a140d,#1a140d 4px,#16110b 4px,#16110b 8px)}
table.matrix td.empty{color:#4d4636}
.cell-score{font-family:'IBM Plex Mono',monospace; font-weight:600; font-variant-numeric:tabular-nums}
td.lead{background:rgba(116,182,90,.13)} td.lead .cell-score{color:var(--win)}
td.trail{background:rgba(203,90,75,.13)} td.trail .cell-score{color:var(--loss)}
td.tie .cell-score{color:var(--ink-dim)}

/* ---------- Beste Teams ---------- */
.duo-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.7rem}
.duo{display:flex; align-items:center; gap:.8rem; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:.7rem .9rem}
.duo .names{flex:1; font-weight:600}
.duo .names .x{color:var(--muted); font-weight:400; margin:0 .35rem}
.duo .rec{font-family:'IBM Plex Mono',monospace; color:var(--ink-dim); font-size:13px}
.duo .wrpill{font-family:'IBM Plex Mono',monospace; font-weight:600; padding:.15rem .5rem; border-radius:5px;
  background:#241e15; border:1px solid var(--line)}

/* ---------- Result-Pille / Aktivität ---------- */
.res{display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; border-radius:4px;
  font-size:11px; font-weight:700; background:#2a2219; color:var(--muted)}
.res--win{background:rgba(116,182,90,.18); color:var(--win)}
.res--loss{background:rgba(203,90,75,.18); color:var(--loss)}
.feed{display:flex; flex-direction:column; gap:.5rem}
.match{display:grid; grid-template-columns:92px 1fr auto; gap:.9rem; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.6rem .9rem}
.match .when{font-size:12px; color:var(--muted); font-family:'IBM Plex Mono',monospace}
.match .where{font-size:12px; color:var(--muted)}
.match .who{display:flex; flex-wrap:wrap; gap:.4rem .8rem}
.match .who .p{display:inline-flex; align-items:center; gap:.35rem; font-size:13px}
.match .kindtag{font-size:11px; color:var(--gold-deep); font-family:Cinzel,serif; letter-spacing:.05em}

/* ---------- Empty / Hinweise ---------- */
.empty{text-align:center; padding:3rem 1rem; color:var(--ink-dim)}
.empty .display{color:var(--gold); font-size:1.4rem; margin-bottom:.6rem}
.callout{background:#211a12; border:1px solid var(--line); border-left:3px solid var(--gold-deep);
  border-radius:8px; padding:.9rem 1.1rem; color:var(--ink-dim); font-size:13.5px}
.btn{display:inline-block; background:var(--gold); color:#14110d; font-weight:700; padding:.6rem 1.1rem;
  border-radius:7px; text-decoration:none; font-family:Inter}
.btn:hover{background:var(--gold-bright); text-decoration:none}

/* ---------- Footer ---------- */
footer{padding:2rem 0 3rem; color:var(--muted); font-size:12.5px}
footer .wrap{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ---------- Resolver-Seite ---------- */
.resolve-page .wrap{max-width:880px; padding-top:2.5rem}
.resolve-page h1{color:var(--gold); font-size:1.7rem; margin:0 0 .3rem}
.resolve-form{display:flex; gap:.6rem; margin:1.2rem 0}
.resolve-form input[type=text]{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  padding:.7rem .9rem; border-radius:7px; font-size:15px}
.resolve-form button{background:var(--gold); border:none; color:#14110d; font-weight:700;
  padding:.7rem 1.3rem; border-radius:7px; cursor:pointer}
.resolve-page code.pid{color:var(--gold-bright); font-weight:600}
.resolve-page code.snippet{color:var(--ink-dim)}
.err{color:var(--loss)}
.lnk{color:var(--gold-bright)}

/* ---------- Responsive ---------- */
@media (max-width:780px){
  .totals{grid-template-columns:repeat(2,1fr)}
  .topbar .wrap{flex-direction:column; align-items:flex-start; gap:.5rem}
  .topbar .meta{text-align:left}
  .match{grid-template-columns:1fr; gap:.4rem}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} html{scroll-behavior:auto} }

/* ============ Erweiterungen: Awards, Chart, Spielerseite ============ */

/* verlinkte Spielernamen */
a.plink{color:inherit; text-decoration:none}
a.plink:hover{color:var(--gold-bright); text-decoration:underline}

/* ---------- Auszeichnungen ---------- */
.awards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:.7rem}
.award{display:flex; align-items:center; gap:.85rem; background:linear-gradient(#241d14,#1f1810);
  border:1px solid var(--line); border-radius:10px; padding:.8rem .9rem; text-decoration:none; color:var(--ink);
  transition:border-color .15s, transform .15s}
.award:hover{border-color:var(--gold-deep); transform:translateY(-1px); text-decoration:none}
.aw-seal{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-size:1.2rem; color:var(--gold-bright);
  background:radial-gradient(circle at 35% 30%, #3a2e18, #241c10);
  border:1px solid var(--gold-deep); box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.aw-body{display:flex; flex-direction:column; min-width:0}
.aw-title{font-family:Cinzel,serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-deep)}
.aw-winner{font-weight:700; font-size:1rem; color:var(--ink); line-height:1.2}
.aw-value{font-size:12.5px; color:var(--ink-dim)}
.aw-detail{color:var(--muted)}

/* ---------- Rating-Chart ---------- */
.chart{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:.8rem .6rem .4rem}
.chart-svg{width:100%; height:auto; display:block}
.chart-grid{stroke:var(--line-soft); stroke-width:1}
.chart-ylbl,.chart-xlbl{fill:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:10px}
.chart-legend{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem}
.chart-legend .lg{display:inline-flex; align-items:center; gap:.4rem; font-size:12.5px; color:var(--ink-dim)}
.chart-legend .lg-dot{width:10px; height:3px; border-radius:2px}

/* ---------- Spieler-Kopf ---------- */
.player-head{display:flex; align-items:center; gap:1.1rem; margin-bottom:1.4rem}
.ph-av{width:72px; height:72px; border-radius:12px; object-fit:cover; border:1px solid var(--line); background:#000}
.ph-av--ph{background:linear-gradient(135deg,#2a2219,#1c1610)}
.ph-id h1{font-family:Cinzel,serif; font-weight:700; font-size:1.8rem; margin:0; color:var(--gold)}
.ph-badges{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.ph-badge{display:inline-flex; align-items:center; gap:.35rem; background:var(--panel); border:1px solid var(--line);
  border-radius:7px; padding:.25rem .6rem; font-size:12px; color:var(--ink-dim)}
.ph-badge b{color:var(--ink)}
.ph-tiles{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-soft);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.ph-tiles .tile{background:var(--panel); padding:1rem 1.1rem}
.ph-tiles .big{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.5rem; color:var(--ink); line-height:1.1}
.ph-tiles .lbl{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:.3rem}

/* ---------- Zwei-Spalten-Layout ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem}

/* ---------- Breakdown-Liste (Civ/Map) ---------- */
.bd-list{display:flex; flex-direction:column; gap:.4rem}
.bd{display:grid; grid-template-columns:1fr 90px 38px 42px; align-items:center; gap:.7rem; font-size:13.5px}
.bd-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bd-bar{height:6px; border-radius:3px; background:#3a2f20; overflow:hidden}
.bd-bar i{display:block; height:100%}
.bd-val{color:var(--ink-dim); text-align:right}
.bd-wr{text-align:right; font-weight:600}

@media (max-width:780px){
  .ph-tiles{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr; gap:1rem}
  .player-head{flex-wrap:wrap}
}

/* ---------- Coach-Tipps ---------- */
.tips{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:.6rem}
.tip{display:flex; gap:.6rem; align-items:flex-start; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--gold-deep); border-radius:8px; padding:.7rem .9rem; font-size:13.5px; color:var(--ink-dim)}
.tip .tip-ic{flex:none; width:18px; height:18px; line-height:18px; text-align:center; border-radius:4px;
  font-size:11px; font-weight:700; background:#2a2219; color:var(--gold-bright)}
.tip--good{border-left-color:var(--win)} .tip--good .tip-ic{background:rgba(116,182,90,.18); color:var(--win)}
.tip--warn{border-left-color:var(--loss)} .tip--warn .tip-ic{background:rgba(203,90,75,.18); color:var(--loss)}
.tip--info{border-left-color:var(--gold-deep)}

/* Rating + Rang in einer Zelle */
#tbl-rank td.num{white-space:nowrap}
.rt-val{font-family:'IBM Plex Mono',monospace; margin-right:.3rem}
#tbl-rank .rank{vertical-align:middle}

/* Lokale Flaggen-Bilder statt Emoji */
.flag{width:21px;height:14px;border-radius:2px;object-fit:cover;vertical-align:-2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);margin-right:.15rem}
.ph-id h1 .flag{width:30px;height:20px;vertical-align:-3px;margin-right:.4rem}
.flag-code{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);background:#2a2219;border-radius:3px;padding:1px 4px;margin-right:.2rem;vertical-align:1px}

/* ---------- Zuletzt aktiv ---------- */
.active-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:.6rem}
.active-card{display:flex; align-items:center; gap:.7rem; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:.6rem .75rem; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s}
.active-card:hover{border-color:var(--gold-deep); transform:translateY(-1px); text-decoration:none}
.ac-av{width:40px; height:40px; border-radius:8px; object-fit:cover; border:1px solid var(--line); background:#000; flex:none}
.ac-av--ph{background:linear-gradient(135deg,#2a2219,#1c1610)}
.ac-body{display:flex; flex-direction:column; min-width:0}
.ac-name{display:flex; align-items:center; gap:.35rem; font-weight:700; font-size:14px; line-height:1.25}
.ac-dot{width:9px; height:9px; border-radius:50%; flex:none}
.ac-dot.is-on{background:#7ee787; box-shadow:0 0 0 2px rgba(126,231,135,.22)}
.ac-dot.is-off{background:#ff8a8a; box-shadow:0 0 0 2px rgba(255,138,138,.18)}
.ac-when{font-size:12.5px; color:var(--gold-deep); margin-top:1px}
.ac-meta{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.ac-w{color:var(--win)} .ac-l{color:var(--loss)}