/*
 * Soul-Link Tracker - Design-Tokens und Bausteine.
 *
 * Die Typfarben und -symbole stehen als Klassen (.t-fire, .t-water, ...) hier
 * und nicht als Inline-Style im Markup: die 18 Typen sind bekannt und fest, und
 * die Zellen der Tabelle rendern sie hundertfach.
 *
 * Typ-Symbole: duiker101/pokemon-type-svg-icons (MIT), eingefaerbt per CSS-Mask.
 */

:root {
  color-scheme: light;

  --accent: #3f6fb5;
  --ink: #1b2330;
  --ink-2: #4b5668;
  --ink-3: #5b6678;
  --ink-4: #6f7b8f;
  --label: #8b95a8;
  --label-2: #9aa3b4;
  --label-3: #aab3c2;

  --surface: #fff;
  --surface-2: #f7f9fc;
  --surface-3: #fafbfd;
  --surface-4: #f4f6fa;

  --line: #cfd7e3;
  --line-soft: #e8ecf3;
  --line-softer: #eef1f6;
  --line-row: #eaeef4;
  --line-cell: #e4e9f1;
  --line-input: #dfe4ec;

  /* Die *-row-Toene faerben die Tabellenzeilen. Sie liegen absichtlich ein Stueck
     kraeftiger als im Design-Handoff (#f5faf6 / #fdf6f5 / #fdfaf2): auf einem
     hellen Bildschirm waren die Originale kaum von Weiss zu unterscheiden. Weiter
     Richtung Flaechenfarbe (--*-bg) darf es nicht gehen, sonst konkurriert die
     Zeile mit den Status-Pills, die genau diese Toene tragen. */
  --good: #2f7745;
  --good-dark: #276b3c;
  --good-bg: #e7f3ea;
  --good-bg-2: #d9efe0;
  --good-row: #edf6ef;

  --bad: #b2413a;
  --bad-bg: #fbe8e6;
  --bad-row: #fceeed;

  --warn: #8a5f14;
  --warn-bg: #f7edd9;
  --warn-row: #faf3e4;
  --warn-bar: #c98f22;
  /* Die Zahl an einem 'vergeigt'-Zaehler - im Kopf wie in der Statistik. */
  --warn-stat: #c07a2c;

  --shadow-card: 0 2px 10px rgba(27, 35, 48, .05);
  --shadow-dialog: 0 24px 60px rgba(15, 20, 30, .4);
}

* { box-sizing: border-box; }

/* Die Ansichten und Dialoge tragen eigene display-Werte. Ohne diese beiden
   Regeln gewaennen sie gegen das hidden-Attribut und gegen die UA-Regel fuer
   geschlossene Dialoge - beide Views staenden untereinander und der Dialog
   bliebe nach dem Schliessen stehen. */
[hidden] { display: none !important; }
dialog:not([open]) { display: none; }

body {
  margin: 0;
  background: #e6eaf1;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; }

h1, h2 { margin: 0; }

@keyframes dlgIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Typfarben -- */

.t-normal   { --type: #8f9296; --icon: url("icons/normal.svg"); }
.t-fire     { --type: #e0552f; --icon: url("icons/fire.svg"); }
.t-water    { --type: #2f7fd8; --icon: url("icons/water.svg"); }
.t-grass    { --type: #4f9c36; --icon: url("icons/grass.svg"); }
.t-electric { --type: #c99a0e; --icon: url("icons/electric.svg"); }
.t-ice      { --type: #3fa8c4; --icon: url("icons/ice.svg"); }
.t-fighting { --type: #c9542a; --icon: url("icons/fighting.svg"); }
.t-poison   { --type: #8a4bb0; --icon: url("icons/poison.svg"); }
.t-ground   { --type: #a17435; --icon: url("icons/ground.svg"); }
.t-flying   { --type: #6f92cf; --icon: url("icons/flying.svg"); }
.t-psychic  { --type: #d94f7a; --icon: url("icons/psychic.svg"); }
.t-bug      { --type: #7f8c28; --icon: url("icons/bug.svg"); }
.t-rock     { --type: #8f8354; --icon: url("icons/rock.svg"); }
.t-ghost    { --type: #6a4f8c; --icon: url("icons/ghost.svg"); }
.t-dragon   { --type: #4a5bc8; --icon: url("icons/dragon.svg"); }
.t-dark     { --type: #5c4c44; --icon: url("icons/dark.svg"); }
.t-steel    { --type: #6e8ea3; --icon: url("icons/steel.svg"); }
.t-fairy    { --type: #c96aa8; --icon: url("icons/fairy.svg"); }

.type-icon {
  display: block;
  background: #fff;
  mask-image: var(--icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.type-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 4px;
  border-radius: 5px;
  background: var(--type);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .03em;
}

.type-badge .type-icon { width: 10px; height: 10px; flex: 0 0 10px; }

/* ------------------------------------------------------------ Grundgeruest */

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(#eef1f6, #e2e7ef);
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 66px;
  padding: 0 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pokeball {
  position: relative;
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(#e8443c 0 49%, #1b2330 49% 55%, #fff 55% 100%);
}

.pokeball::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: #fff;
}

.brand-text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.brand-title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--label); }
.brand-sub.is-link { color: var(--accent); }

.head-stats { display: flex; align-items: center; gap: 20px; margin-left: auto; }

.head-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.head-stat b { font-size: 19px; font-weight: 800; line-height: 1; }
.head-stat span { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--label); }
.head-stat.good b { color: var(--good); }
.head-stat.bad b { color: var(--bad); }
.head-stat.warn b { color: var(--warn-stat); }

.error {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 22px;
  background: var(--bad-bg);
  border-bottom: 1px solid #eec9c5;
  color: #93302a;
  font-size: 13.5px;
  font-weight: 700;
}

/* -------------------------------------------------------------- Buttons -- */

.primary-button {
  padding: 10px 17px;
  border: 0;
  border-radius: 11px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.primary-button:hover { background: #2b3648; }

.ghost-button {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.ghost-button:hover { background: #eef2f8; }

.danger-button {
  padding: 10px 17px;
  border: 0;
  border-radius: 11px;
  background: var(--bad);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.danger-button:hover { background: #9b3831; }

.icon-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-cell);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-4);
  font-size: 15px;
  cursor: pointer;
}

.icon-button:hover { background: #f2f5f9; }

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--label);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.pixel-label {
  font-family: 'Silkscreen', monospace;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .08em;
}

.pixel-label.soft { color: var(--label); }
.muted-label { font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--label-2); }

.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; }

/* --------------------------------------------------------- Run-Uebersicht */

.home-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 26px 44px; }

.home { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }

.home-head { display: flex; align-items: flex-end; gap: 12px; }
.home-title { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.home-title h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.home-sub { font-size: 14px; font-weight: 600; color: #78849a; }

.run-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

.run-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 17px 18px;
  border: 1.5px solid var(--line-input);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.run-card.is-active { border-color: #8fbf9f; }
.run-card.is-failed { border-color: #e8c4c0; }

.run-card-head { display: flex; align-items: flex-start; gap: 7px; }

/* Umbenennen und Löschen stehen nicht im Design - sie sind bewusst klein und
   ohne Beschriftung, damit sie die Karte nicht vom Öffnen ablenken. */
.card-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-cell);
  border-radius: 8px;
  background: var(--surface);
  color: var(--label-2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.card-icon:hover { background: #f2f5f9; color: var(--ink-2); }
.card-icon.danger:hover { background: var(--bad-bg); border-color: #eec9c5; color: var(--bad); }
.run-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.run-card-title b { font-size: 19px; font-weight: 800; line-height: 1.1; }
.run-card-title span { font-size: 13px; font-weight: 700; color: var(--label); }

.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.tone-active { background: var(--good-bg); color: var(--good); }
.tone-paused { background: #f2f5f9; color: var(--ink-4); }
.tone-completed { background: #eef2fb; color: var(--accent); }
.tone-failed { background: var(--bad-bg); color: var(--bad); }

.run-progress { display: flex; flex-direction: column; gap: 5px; }
.run-progress > span:last-child { font-size: 12px; font-weight: 700; color: var(--label); }

.bar { display: flex; height: 8px; border-radius: 5px; background: var(--line-softer); overflow: hidden; }
.bar span { height: 100%; }
.bar .done { background: #3f8a52; }
.bar .lost { background: var(--warn-bar); }
.bar .dead { background: var(--bad); }

.chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border: 1px solid var(--line-input);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 700;
}

.chips.small .chip { gap: 7px; padding: 7px 12px; border-color: var(--line-soft); background: var(--surface-2); font-size: 13px; }
.chips.small .dot { width: 9px; height: 9px; flex-basis: 9px; }

.run-card .chip { gap: 6px; padding: 4px 10px 4px 7px; border: 0; background: var(--surface-4); font-size: 12.5px; }
.run-card .chip .dot { width: 8px; height: 8px; flex-basis: 8px; }

.run-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }

.open-button {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-radius: 10px;
  background: #eef2f8;
  color: #3c4658;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.open-button:hover { filter: brightness(.94); }
.run-card.is-active .open-button { background: var(--ink); color: #fff; }

.status-row { display: flex; align-items: center; gap: 6px; }
.status-row > .pixel-label { flex: 0 0 auto; font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--label-3); }

.status-button {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--line-cell);
  border-radius: 8px;
  background: var(--surface);
  color: var(--label);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}

.status-button:hover { filter: brightness(.97); }

/* Der gewaehlte Status traegt seine Farbe; die uebrigen bleiben blass, damit die
   Karte auf einen Blick sagt, wo der Run steht. */
.status-button.is-on.tone-active { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.status-button.is-on.tone-paused { border-color: var(--ink-4); background: #f2f5f9; color: var(--ink-4); }
.status-button.is-on.tone-completed { border-color: var(--accent); background: #eef2fb; color: var(--accent); }
.status-button.is-on.tone-failed { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }

.new-run-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 180px;
  padding: 24px;
  border: 2px dashed #c8d2e0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
}

.new-run-card:hover { border-color: var(--accent); background: var(--surface); }
.new-run-card b { font-size: 26px; font-weight: 800; color: var(--label); }
.new-run-card strong { font-size: 14.5px; font-weight: 800; color: var(--ink-3); }
.new-run-card span { font-size: 12.5px; font-weight: 600; color: var(--label-2); }

/* ------------------------------------------------------------ Statistik -- */

.stats-section { display: flex; flex-direction: column; gap: 13px; border-top: 1px solid #d8dfe9; padding-top: 22px; }
.stats-head { display: flex; align-items: center; gap: 10px; }
.stats-head h2 { font-size: 17px; font-weight: 800; }

/* 'Gesamt' ist ein einziger Block und bekommt die ganze Breite; pro Run und pro
   Variante kacheln nebeneinander. */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.stats-grid.is-single { grid-template-columns: 1fr; }
.stats-empty { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--label-2); }

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 17px 18px;
  border: 1.5px solid var(--line-input);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.stat-card-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.stat-card-head b { font-size: 17px; font-weight: 800; line-height: 1.1; }
.stat-card-head span { font-size: 12.5px; font-weight: 700; color: var(--label); }

.stat-counters { display: flex; gap: 22px; flex-wrap: wrap; }
.stat-counter { display: flex; flex-direction: column; gap: 2px; }
.stat-counter b { font-size: 21px; font-weight: 800; line-height: 1; }
.stat-counter span { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: var(--label); }
.stat-counter.good b { color: var(--good); }
.stat-counter.bad b { color: var(--bad); }
.stat-counter.warn b { color: var(--warn-stat); }

.stat-bars { display: flex; flex-direction: column; gap: 8px; }
.stat-foot { font-size: 11.5px; font-weight: 600; color: var(--label); }

.roster { display: flex; flex-direction: column; gap: 11px; border-top: 1px solid #d8dfe9; padding-top: 22px; }
.roster-head { display: flex; align-items: center; gap: 10px; }
.roster-head h2 { font-size: 17px; font-weight: 800; }
.roster-note { font-size: 13px; font-weight: 600; color: var(--label); margin-right: auto; }
.roster .ghost-button { background: var(--surface); }

/* -------------------------------------------------------------- Run-View */

.run-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 18px;
  padding: 18px 22px;
}

.table-column { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.table-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: auto; }

.filter-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.filter-button span { font-size: 11px; opacity: .65; }
.filter-button.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }

.location-search {
  width: 176px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  outline: none;
}

.location-search:focus { border-color: var(--accent); }
.location-search::placeholder { color: var(--label-2); font-weight: 700; }

.segmented { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #dfe5ee; }
.segmented button {
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-4);
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.segmented button.is-on { background: var(--surface); color: var(--ink); }

.segmented.small { padding: 2px; border-radius: 8px; background: var(--line-softer); }
.segmented.small button { padding: 5px 11px; border-radius: 6px; font-size: 11px; letter-spacing: .05em; color: #78849a; }
.segmented.small button.is-on { background: var(--ink); color: #fff; }

.table-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.table-scroll { flex: 1; min-height: 0; overflow: auto; }

.table-head, .table-row {
  display: grid;
  grid-template-columns: var(--cols, 56px 164px repeat(3, minmax(196px, 1fr)) 124px);
  min-width: var(--min, 932px);
}

.table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink);
  color: #fff;
}

.table-head > * {
  padding: 11px 14px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
}

.table-head > :first-child { padding: 11px 0; border-left: 0; text-align: center; }
.table-head .player-head { display: flex; align-items: center; gap: 8px; }
.table-head .player-head span { font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.table-head .dot { width: 8px; height: 8px; flex-basis: 8px; }

/* Die Klasse ist die Kategorie aus category(): team | box | tot | verloren | offen. */
.table-row { border-bottom: 1px solid var(--line-row); background: var(--surface); }
.table-row.is-tot { background: var(--bad-row); }
.table-row.is-verloren { background: var(--warn-row); }
.table-row.is-team { background: var(--good-row); }

.empty-hint { padding: 26px 18px; font-size: 13.5px; font-weight: 700; color: var(--label-2); }

.team-cell { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line-softer); }

.ball-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ball-button[disabled] { cursor: default; }

.ball {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  border: 2.5px solid #b8c1cf;
  border-radius: 50%;
  background: linear-gradient(#e9edf3 0 47%, #c8d0dc 47% 53%, #f7f9fc 53% 100%);
  overflow: hidden;
}

.ball::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border: 2.5px solid #b8c1cf;
  border-radius: 50%;
  background: #fff;
}

.ball-button.is-on .ball {
  border-color: var(--ink);
  background: linear-gradient(#e8443c 0 47%, #1b2330 47% 53%, #fff 53% 100%);
}

.ball-button.is-on .ball::after { border-color: var(--ink); }
.ball-button.can-toggle .ball { opacity: .75; }
.ball-button.is-full .ball { opacity: .3; }
.ball-button.is-locked .ball { opacity: .16; }
.ball-button.is-on .ball { opacity: 1; }

.loc-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 9px 14px; }
.loc-cell b { font-size: 15px; font-weight: 700; line-height: 1.15; }
.table-row.is-offen .loc-cell b { color: var(--label-2); }
.loc-cell span { font-size: 11.5px; font-weight: 700; color: var(--label-3); }
.loc-cell span.blamed { color: var(--bad); }

.pick-cell { display: flex; align-items: stretch; border-left: 1px solid var(--line-softer); }
.pick-cell.is-weak { box-shadow: inset 0 0 0 2px rgba(178, 65, 58, .4); }

.pick-button {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px 7px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.pick-button:hover { background: rgba(63, 111, 181, .06); }
.pick-button[disabled] { cursor: default; }
.pick-button[disabled]:hover { background: transparent; }

.sprite {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background-color: var(--surface-4);
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  overflow: hidden;
}

.sprite.is-empty { border: 1.5px dashed #cdd5e1; background-color: var(--surface-2); color: var(--label-3); font-size: 17px; font-weight: 800; }
.sprite.is-lost { border: 1px solid var(--line-soft); background-color: var(--surface-2); }
.sprite.is-team { background-color: #e9f2ec; }
.sprite.is-dead { background-color: #f3f0f0; filter: grayscale(1); opacity: .5; }

.pick-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pick-name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-name.is-empty { color: #a2acbc; }
.pick-name.is-dead { color: var(--bad); text-decoration: line-through; }
.pick-types { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.weak-note { font-size: 11.5px; font-weight: 800; color: var(--bad); }
.dupe-note { font-size: 12px; font-weight: 800; color: var(--warn-bar); }

.kill-button, .calc-button {
  flex: 0 0 30px;
  margin: 7px 7px 7px 0;
  border: 1px solid var(--line-cell);
  border-radius: 8px;
  background: var(--surface);
  color: var(--label-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.calc-button { margin-right: 4px; font-size: 13px; }
.kill-button:hover { background: var(--bad-bg); border-color: #eec9c5; color: var(--bad); }
.kill-button.is-dead { color: var(--bad); }
.calc-button:hover { background: #eef2fb; border-color: #bdcdea; color: var(--accent); }
.calc-button.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }

.state-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  border-left: 1px solid var(--line-softer);
}

.state-pill {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.cat-team { background: var(--good-bg-2); color: var(--good-dark); }
.cat-box { background: #eef2f8; color: var(--ink-2); }
.cat-tot { background: var(--bad-bg); color: var(--bad); }
.cat-verloren { background: var(--warn-bg); color: var(--warn); }
.cat-offen { background: var(--surface-4); color: var(--label); }

.state-action {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--label);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.state-action.is-warning { color: var(--bad); }

/* -------------------------------------------------------- Rechte Spalte -- */

.aside { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.cap-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 16px;
  border-radius: 14px;
  background: linear-gradient(150deg, #242e3f, #171d28);
  color: #fff;
  box-shadow: 0 3px 14px rgba(23, 29, 40, .22);
}

.cap-head { display: flex; align-items: center; gap: 8px; }
.cap-head .pixel-label { font-size: 9px; letter-spacing: .1em; color: rgba(255, 255, 255, .6); margin-right: auto; }

.cap-step {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.cap-step[disabled] { opacity: .35; cursor: default; }
.cap-value { font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }

.cap-leader-row { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.cap-leader-row .type-badge { padding: 3px 9px 3px 6px; border-radius: 6px; font-size: 10px; letter-spacing: .05em; }
.cap-leader-row .type-badge .type-icon { width: 12px; height: 12px; flex-basis: 12px; }
.cap-leader-row .type-badge.is-mixed { background: rgba(255, 255, 255, .22); }
.cap-leader { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .85); }

.cap-ticks { display: flex; gap: 3px; margin-top: 11px; }
.cap-tick { flex: 1; height: 10px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .16); cursor: pointer; }
.cap-tick.is-done { background: var(--type, rgba(255, 255, 255, .55)); }
.cap-tick.is-current { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.cap-foot { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .55); margin-top: 8px; }

.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fail-card { flex: 0 0 auto; }
.type-card { flex: 1; min-height: 0; overflow-y: auto; }

.card-head { display: flex; align-items: center; gap: 8px; }
.card-head .pixel-label { margin-right: auto; }
.card-note { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--label); }

.fail-row { display: flex; align-items: center; gap: 10px; }
.fail-row .dot { width: 9px; height: 9px; flex-basis: 9px; }
.fail-row .name { font-size: 14.5px; font-weight: 700; flex: 0 0 62px; }
.fail-row .bar { flex: 1; height: 13px; border-radius: 7px; }
.fail-row .tally { font-size: 12px; font-weight: 800; color: var(--ink-3); flex: 0 0 auto; }
.blame-line { font-size: 11.5px; font-weight: 600; color: var(--label); }

/* Das Pokémon aus der Tabelle, solange eines im Rechner liegt. */
.type-mon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1.5px solid #bdcdea;
  border-radius: 11px;
  background: #f5f8fd;
}

.type-mon .sprite { flex-basis: 36px; width: 36px; height: 36px; background-color: var(--surface); background-size: 34px 34px; }
.type-mon-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.type-mon-text b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 800; line-height: 1.1; }
.type-mon-text .dot { width: 9px; height: 9px; flex-basis: 9px; }
.type-mon-types { display: flex; gap: 4px; flex-wrap: wrap; }
.type-mon .icon-button { flex: 0 0 26px; width: 26px; height: 26px; font-size: 12px; }

/* Bei geladenem Pokémon stehen Angriff und Abwehr untereinander im selben Feld. */
.type-section { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.type-section:last-child { margin-bottom: 0; }
.type-plain { font-size: 12px; font-weight: 700; color: var(--label-2); }

.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.type-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1.5px solid var(--line-input);
  border-radius: 7px;
  background: var(--surface);
  color: #3c4658;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}

.type-chip .type-icon { width: 12px; height: 12px; flex: 0 0 12px; background: var(--type); }
.type-chip.is-on { border-color: var(--type); background: var(--type); color: #fff; box-shadow: 0 2px 6px rgba(27, 35, 48, .2); }
.type-chip.is-on .type-icon { background: #fff; }

.type-result { border-top: 1px solid var(--line-row); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.type-result-head { display: flex; align-items: center; gap: 7px; }
.type-result-head span { font-size: 13.5px; font-weight: 800; margin-right: auto; }

.bucket { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 6px; }
.bucket-badge { flex: 0 0 42px; text-align: center; padding: 3px 0; border-radius: 6px; font-size: 12px; font-weight: 800; }
.bucket-items { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.bucket-items .type-badge { padding: 3px 8px 3px 5px; border-radius: 6px; font-size: 10px; }
.bucket-items .type-badge .type-icon { width: 11px; height: 11px; flex-basis: 11px; }
.bucket.is-weak .type-badge { opacity: .62; }

.atk-4 { background: #dff0e4; color: #1e6b39; }
.atk-2 { background: var(--good-bg); color: var(--good); }
.atk-05, .atk-025 { background: #faf0dd; color: var(--warn); }
.atk-0 { background: var(--bad-bg); color: #a3342d; }
.def-4 { background: #f7dbd8; color: #93302a; }
.def-2 { background: var(--bad-bg); color: var(--bad); }
.def-05 { background: var(--good-bg); color: var(--good); }
.def-025 { background: #dff0e4; color: #1e6b39; }
.def-0 { background: #e6eefb; color: #2f5aa8; }

.team-check { margin-top: auto; border-top: 1px solid var(--line-row); padding-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row .dot { width: 9px; height: 9px; flex-basis: 9px; }
.check-row .name { font-size: 14px; font-weight: 700; flex: 0 0 60px; }
.check-mons { display: flex; gap: 3px; flex: 1; }
.check-mons span {
  display: block;
  width: 26px;
  height: 26px;
  background-size: 26px 26px;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.check-risk { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--label-2); flex: 0 0 auto; }
.check-risk.is-bad { color: var(--bad); }
.check-risk.is-link { color: var(--accent); }

/* -------------------------------------------------------------- Dialoge -- */

.dialog {
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
  color: var(--ink);
}

.dialog[open] { animation: dlgIn .16s ease-out; }
.dialog::backdrop { background: rgba(20, 26, 36, .5); }

.picker-dialog { width: 800px; max-width: calc(100vw - 80px); max-height: 82vh; display: flex; flex-direction: column; }
.small-dialog { width: 460px; max-width: calc(100vw - 80px); padding: 20px; display: flex; flex-direction: column; gap: 15px; }
#lost-dialog { width: 420px; gap: 14px; }

.dialog-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.dialog-titles { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.dialog-title { font-size: 17px; font-weight: 800; line-height: 1.1; }
.dialog-sub { font-size: 13px; font-weight: 600; color: var(--label); }
.picker-dialog .dialog-sub { font-size: 12px; }

.picker-search { padding: 12px 18px; border-bottom: 1px solid #f0f3f8; }

.dialog input[type="search"], .dialog input:not([type]) {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--line-input);
  border-radius: 10px;
  background: #fbfcfe;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}

.dialog input:focus { border-color: var(--accent); }

.picker-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px 14px; }

.picker-group { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.picker-group-head { display: flex; align-items: center; gap: 8px; }
.picker-group-head .pixel-label { color: var(--label); }
.picker-group-head .pixel-label.is-local { color: var(--good); }
.picker-group-head .rule { flex: 1; height: 1px; background: var(--line-softer); }
.picker-group-head .count { font-size: 11px; font-weight: 700; color: var(--label-3); }

.picker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.picker-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  border: 1.5px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.picker-option:hover { border-color: var(--accent); background: #f5f8fd; }
.picker-option.is-current { border-color: var(--accent); background: #eef4fd; }
.picker-option.is-dupe { border-color: #f0e2c4; background: #fffaf0; }
.picker-option img { width: 38px; height: 38px; flex: 0 0 38px; display: block; image-rendering: pixelated; }
.picker-option .option-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.picker-option .option-name { font-size: 14px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-option .option-meta { display: flex; gap: 3px; align-items: center; }
.picker-option .option-dex { font-size: 10.5px; font-weight: 700; color: var(--label-3); }
.picker-option .warn { margin-left: auto; font-size: 15px; color: var(--warn-bar); }

.picker-empty { padding: 22px 4px; font-size: 13.5px; font-weight: 700; color: var(--label-2); }
/* Nur im zweiten Suchdurchgang: was hier steht, passt nicht woertlich. */
.picker-hint { margin: 12px 0 0; font-size: 12.5px; font-weight: 700; color: var(--warn); }

.dialog-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-3);
}

.dialog-foot.plain { padding: 0; border: 0; background: transparent; }
.foot-note { font-size: 11.5px; font-weight: 700; color: var(--label-2); margin-right: auto; }
.dialog-foot .ghost-button, .dialog-actions .ghost-button { background: var(--surface); border-color: var(--line-cell); color: var(--ink-4); font-size: 13px; }
.dialog-foot .ghost-button:hover, .dialog-actions .ghost-button:hover { background: #f2f5f9; }

.dialog-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.dialog-actions.spread > :first-child { margin-right: auto; }

.culprit-block { display: flex; flex-direction: column; gap: 7px; }
.culprit-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 7px;
  border: 1.5px solid var(--line-cell);
  border-radius: 11px;
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.culprit-button:hover { border-color: var(--bad); background: var(--bad-row); }
.culprit-button .dot { width: 10px; height: 10px; flex-basis: 10px; }

.player-list { display: flex; flex-direction: column; gap: 7px; }
.player-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 11px; }
.player-row .name { font-size: 14.5px; font-weight: 700; flex: 1; }
.player-row .tally { font-size: 12px; font-weight: 700; color: var(--label-2); }
.player-row button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-cell);
  border-radius: 8px;
  background: var(--surface);
  color: var(--label-2);
  font-size: 13px;
  cursor: pointer;
}
.player-row button:hover { background: var(--bad-bg); border-color: #eec9c5; color: var(--bad); }

.player-form { display: flex; gap: 8px; }
.player-form input { flex: 1; font-size: 14px; }
.player-form .primary-button { padding: 10px 15px; border-radius: 10px; font-size: 13.5px; }

.run-form { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.choice-row { display: flex; gap: 7px; flex-wrap: wrap; }

.choice-button {
  padding: 9px 14px;
  border: 1.5px solid var(--line-input);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.choice-button.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }

body.saving .topbar { border-bottom-color: var(--accent); }

/* Unter 1100px passt die feste rechte Spalte nicht mehr neben die Tabelle. */
@media (max-width: 1100px) {
  .app { height: auto; min-height: 100vh; overflow: visible; }
  .run-layout { grid-template-columns: minmax(0, 1fr); }
  .table-card { min-height: 60vh; }
  .type-card { max-height: none; }
}