/* ======================================================================
   wiki-teile.css · Bausteine der Datenabschnitte des Wikis: Charaktere,
   Evolutions-Matrix, Gegner und Bosse, Wellen-Zeitleiste, Ereignisse,
   Dialoge (Suche, Vergleich) und Vergleichsleiste. Ergänzt wiki.css.
   ====================================================================== */
/* ---------- Charaktere ---------- */
.wk-pilots{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.wk-pilot>summary{flex-direction:column;gap:var(--s1);text-align:center}
.wk-pilot>summary{position:relative}
.wk-pilot .stage{display:flex;align-items:flex-end;height:116px}
.wk-pilot .e-bd{position:absolute;top:var(--s2);right:var(--s2)}
.ult{display:block;font-size:var(--fs-1);color:var(--accent-2)}

/* ---------- Evolutionen ---------- */
.wk-matrix .tabs{display:inline-flex;margin:var(--s2) 0 var(--s4)}
.wk-mx{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.wk-picks{display:grid;grid-template-columns:repeat(auto-fill,76px);gap:6px;justify-content:start}
.wk-pick{position:relative;display:grid;place-items:center;width:76px;height:76px;padding:0;cursor:pointer;background:var(--panel-2);
  border:3px solid var(--line);border-radius:var(--radius-sm)}
.wk-pick:hover{border-color:var(--accent)}
.wk-pick[aria-pressed="true"]{background:var(--panel-3);border-color:var(--accent-2);box-shadow:3px 3px 0 var(--shadow)}
.wk-pick .own{position:absolute;top:3px;right:3px;width:10px;height:10px;border:2px solid var(--edge)}
.wk-mxout{position:sticky;top:calc(var(--header-h) + var(--s4));padding:var(--s4);background:var(--panel-2);border:3px solid var(--edge);border-radius:var(--radius)}
.wk-recipe{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:var(--s1)}
.wk-recipe .op{align-self:center;margin-top:-28px;font:700 var(--fs-4) var(--font-pixel);color:var(--faint)}
.wk-fig{display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:92px;color:var(--text);text-align:center}
.wk-fig:hover{text-decoration:none}
.wk-fig .ic{display:grid;place-items:center;width:84px;height:84px;background:var(--panel);border:3px solid var(--line);border-radius:var(--radius-sm)}
.wk-fig:hover .ic{border-color:var(--accent)}
.wk-fig.evo .ic{border-color:var(--accent-2)}
.wk-fig b{font:700 var(--fs-1)/1.25 var(--font-pixel)}
.wk-evo-name{margin:var(--s3) 0 var(--s1);text-align:center;font:700 var(--fs-4) var(--font-pixel);color:var(--accent-2)}
.wk-evo-name .wk-new{margin-left:var(--s2);vertical-align:middle}
.wk-evo-desc{text-align:center}

/* ---------- Gegner, Bosse ---------- */
.wk-group{margin:var(--s5) 0 var(--s3);font-size:var(--fs-4);text-transform:uppercase;text-shadow:3px 3px 0 var(--edge)}
.wk-foes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.foe>summary{flex-direction:column;gap:var(--s1);text-align:center;position:relative}
.foe .art{display:flex;align-items:flex-end;justify-content:center;min-height:140px}
.foe .e-meta{justify-content:center}
.foe .e-bd{position:absolute;top:var(--s2);right:var(--s2)}
.wk-stats{grid-template-columns:repeat(4,auto 1fr)}
.wk-phases{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4);margin:var(--s3) 0}
.wk-phases figure{display:flex;flex-direction:column;align-items:center;gap:var(--s1);margin:0}
.wk-phases figcaption{font:700 var(--fs-1) var(--font-pixel);color:var(--accent-2);text-align:center}
/* Fähigkeit eines Minibosses (mit Grafik, z. B. Ranke oder untote Drohne) in dessen Beschreibung */
.wk-ability{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin:var(--s3) 0;padding:var(--s3);
  background:var(--panel-2);border:2px solid var(--line);border-radius:var(--radius)}
.wk-ability figure{display:flex;flex-direction:column;align-items:center;gap:var(--s1);flex:none;margin:0}
.wk-ability figcaption{font:700 var(--fs-1) var(--font-pixel);color:var(--accent-2);text-align:center}
.wk-ability > div{flex:1 1 220px}
.wk-ability p{margin:0 0 var(--s1)}
.wk-phases.big{justify-content:space-around}
.wk-gallery .card-head .more{margin-left:auto;font:700 var(--fs-2) var(--font-pixel)}
.wk-mbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
.wk-mbs a{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s2);color:var(--text);background:var(--panel-2);
  border:2px solid var(--line);border-radius:var(--radius-sm)}
.wk-mbs a:hover{border-color:var(--accent);text-decoration:none}
.wk-mbs .art{display:flex;align-items:flex-end;height:140px}
.wk-mbs b{display:flex;align-items:center;gap:4px;font:700 var(--fs-2) var(--font-pixel)}

/* ---------- Wellen-Zeitleiste ---------- */
.wk-track{display:flex;gap:6px;overflow-x:auto;padding:var(--s1) 2px var(--s3);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.wk-wave{flex:0 0 92px;display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s2) var(--s1);cursor:pointer;scroll-snap-align:start;
  color:var(--text);background:var(--panel-2);border:3px solid var(--line);border-radius:var(--radius-sm)}
.wk-wave:hover{border-color:var(--accent)}
.wk-wave[aria-pressed="true"]{background:var(--panel-3);border-color:var(--accent-2);box-shadow:3px 3px 0 var(--shadow)}
.wk-wave .no{font:700 var(--fs-4) var(--font-pixel)}
.wk-wave .spr{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:64px}
.wk-wave .tags{display:flex;flex-direction:column;gap:2px;min-height:20px}
.wk-wave .tags i{padding:0 4px;font:700 var(--fs-1)/1.5 var(--font-pixel);font-style:normal;border:2px solid var(--edge);border-radius:var(--radius-sm)}
.t-ev{background:var(--accent-2);color:var(--accent-2-ink)} .t-mb{background:var(--c-epi);color:#fff} .t-boss{background:var(--c-myt);color:#fff}
.t-elite{background:var(--danger);color:#1b0503} .t-endless{background:var(--accent);color:var(--accent-ink)}
.wk-wave.boss{flex-basis:104px} .wk-wave.endless{flex-basis:104px}
.wk-wdet{padding:var(--s4);background:var(--panel-2);border:3px solid var(--edge);border-radius:var(--radius)}
.wk-wdet h3{margin:0 0 var(--s2);color:var(--accent-2)}
.wk-wdet .kv{margin-bottom:0}

/* ---------- Wellen-Ereignisse ---------- */
.wk-events{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s4)}
.wk-event .art{display:flex;align-items:flex-end;gap:var(--s1);height:96px;margin-bottom:var(--s3)}
.wk-event h2{font-size:var(--fs-4);margin-bottom:var(--s2)}
.wk-event p{margin:0}
.wk-more{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- Dialoge: Suche, Vergleich ---------- */
.wk-dlg{width:min(94vw,680px);max-height:calc(84 * var(--vh))}
.wk-dlg[open]{display:flex;flex-direction:column}
.wk-search{margin-top:calc(8 * var(--vh))}
.wk-sform,.wk-dhead{display:flex;align-items:center;gap:var(--s2);padding:var(--s3);background:var(--panel-3);border-bottom:3px solid var(--edge)}
.wk-sform>span{font-size:var(--fs-5);color:var(--dim)}
.wk-sform input{flex:1}
.wk-dhead h2{margin:0;font-size:var(--fs-4)}
.wk-x{flex:0 0 auto;margin-left:auto;min-width:44px;min-height:44px;cursor:pointer;color:var(--text);background:var(--panel-2);border:2px solid var(--edge);
  border-radius:var(--radius-sm);font:700 var(--fs-3) var(--font-pixel)}
.wk-x:hover{border-color:var(--accent)}
.wk-sres{flex:1;min-height:0;overflow:auto;margin:0;padding:var(--s2);list-style:none}
.wk-res{display:flex;align-items:center;gap:var(--s3);padding:6px var(--s2);color:var(--text);border-radius:var(--radius-sm)}
.wk-res:hover{text-decoration:none;background:var(--panel-2)}
.wk-res[aria-selected="true"]{background:var(--panel-3);box-shadow:inset 0 0 0 2px var(--accent-2)}
.wk-res .ic{flex:0 0 40px;display:grid;place-items:center;width:40px;height:40px;overflow:hidden}
.wk-res img.crop{width:40px;height:40px;object-fit:none;object-position:50% 0}
.wk-res .tx{min-width:0}
.wk-res b{display:block;font:700 var(--fs-3)/1.3 var(--font-pixel)}
.wk-res small{display:block;font-size:var(--fs-1);color:var(--dim)}
.wk-res .snip{color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-res mark{color:var(--accent-2-ink);background:var(--accent-2);border-radius:2px}
.wk-shead{padding:var(--s1) var(--s2);font:700 var(--fs-1) var(--font-pixel);text-transform:uppercase;color:var(--accent-2)}
.wk-snone{padding:var(--s5);text-align:center;color:var(--dim)}
.wk-shint{margin:0;padding:var(--s2) var(--s3);font-size:var(--fs-1);color:var(--faint);border-top:2px solid var(--line)}
.wk-cmp{width:min(96vw,1040px)}
.wk-dbody{overflow:auto;padding:var(--s4)}
.wk-cmpt{min-width:520px;table-layout:fixed}
.wk-cmpt th:first-child{width:120px}
.wk-cmpt thead th{vertical-align:top;text-transform:none;letter-spacing:0;background:var(--panel-2)}
.wk-cmpt td{vertical-align:top}
.wk-cmpt tr.lvh th{color:var(--accent-ink);background:var(--accent)}
.wk-cmpt td.best{color:var(--ok);font-weight:700;background:var(--xp-soft)}
.wk-cmphd{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-bottom:var(--s1);color:var(--text)}
.wk-cmphd b{max-width:100%;font:700 var(--fs-3) var(--font-pixel);overflow-wrap:anywhere;hyphens:auto}
.wk-cmpt thead .e-cls{margin:0 var(--s1)}

/* Vergleichsleiste */
.wk-tray{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  padding:var(--s2) clamp(var(--s4),4vw,var(--s6)) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--bg-2);
  border-top:3px solid var(--edge);box-shadow:inset 0 2px 0 var(--line),0 -4px 0 var(--shadow)}
.wk-tchip{display:inline-flex;align-items:center;gap:6px;padding:2px 2px 2px 6px;font:700 var(--fs-2) var(--font-pixel);background:var(--panel-2);
  border:2px solid var(--line);border-radius:var(--radius-sm)}
.wk-tchip button{min-width:32px;min-height:32px;cursor:pointer;color:var(--dim);background:none;border:0;font:inherit}
.wk-tchip button:hover{color:var(--danger)}
.wk-tact{display:flex;gap:var(--s2);margin-left:auto}
body.has-tray{padding-bottom:92px}


/* ---------- Mobil ---------- */
@media(max-width:900px){
  .wk-mx{grid-template-columns:1fr}
  .wk-mxout{position:static}
  .wk-stats{grid-template-columns:auto 1fr auto 1fr}
}
@media(max-width:600px){
  .wk-pilots,.wk-foes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-fig{width:88px}
  .wk-fig .ic{width:72px;height:72px}
  .wk-stats{grid-template-columns:auto 1fr}
  .wk-tray .flabel,.wk-tray>.faint{display:none}
  .wk-tact{margin-left:0;width:100%}
  body.has-tray{padding-bottom:120px}
  .wk-tact .btn{flex:1}
  .wk-dlg{width:100vw;max-width:100vw;max-height:100dvh;margin:0;border-radius:0}
  .wk-search{margin-top:0;height:100dvh}
  .wk-dbody{padding:var(--s2)}
  .wk-cmpt{min-width:460px}
  .wk-cmpt th:first-child{width:100px}
  .wk-cmphd b{font-size:var(--fs-2)}
}