/* Anlehnung an das Inventar-Fenster von Minecraft: graue Panels mit Relief, eingelassene Slots */
:root {
  --page: #eef0f2;
  --ink: #1c1f22;
  --muted: #4d5359;
  --panel: #c6c6c6;
  --hi: #ffffff;
  --lo: #555555;
  --inset: #e6e6e6;
  --inset-hi: #ffffff;
  --inset-lo: #7a7a7a;
  --link: #0a5a85;
  --good: #2f9e55;
  --gold: #8a6200;
  --silver: #4f5961;
  --bronze: #8a4b1a;
  --bar: #b9d9c3;
  --line: #a8a8a8;
  --top: #2b2f33;
  --topink: #eef1f3;
  --outline: #1b1b1b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #202326;
    --ink: #e7eaed;
    --muted: #aab2b9;
    --panel: #383d42;
    --hi: #555c63;
    --lo: #16181a;
    --inset: #2a2e32;
    --inset-hi: #4a5158;
    --inset-lo: #121416;
    --link: #86c9ee;
    --good: #58d68a;
    --gold: #f2c14e;
    --silver: #cfd6dc;
    --bronze: #e0985f;
    --bar: #2f4a3a;
    --line: #464c52;
    --top: #15171a;
    --topink: #e7eaed;
    --outline: #0b0c0d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

a { color: var(--link); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  padding: .75rem 1.25rem;
  background: var(--top);
  color: var(--topink);
  border-bottom: 4px solid #000;
}
.brand { font-weight: 800; font-size: 1.25rem; color: inherit; text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.top nav a {
  color: inherit;
  text-decoration: none;
  padding: .3rem .8rem;
  border: 2px solid transparent;
}
.top nav a[aria-current="page"] {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
}

main { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: 1.75rem; margin: .25rem 0 1rem; line-height: 1.2; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.error { padding: 1rem; background: var(--inset); border: 2px solid var(--bronze); }

.panel {
  background: var(--panel);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  outline: 2px solid var(--outline);
  padding: 1rem;
}
.panel + .panel, .panel + .boards, .strip + .boards { margin-top: 1.5rem; }

.slot, .slots li, .strip div, select, input[type="search"] {
  background: var(--inset);
  border: 2px solid;
  border-color: var(--inset-lo) var(--inset-hi) var(--inset-hi) var(--inset-lo);
}

/* Startseite */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
  margin: 0;
}
.strip div { padding: .4rem .7rem; }
.strip dt { color: var(--muted); font-size: .85rem; }
.strip dd { margin: 0; font-size: 1.15rem; font-weight: 700; }
.online-now { margin: 1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.online-now a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; font-weight: 600; }

.boards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.25rem;
}
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.slots li { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem; }
.rank { min-width: 1.6rem; text-align: right; font-weight: 800; }
.r1 .rank { color: var(--gold); }
.r2 .rank { color: var(--silver); }
.r3 .rank { color: var(--bronze); }
.name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.val { font-weight: 600; white-space: nowrap; }
.head { display: block; image-rendering: pixelated; border: 0; flex: none; }

/* Bedienelemente */
.controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-bottom: .9rem; }
.controls label { display: flex; align-items: center; gap: .5rem; }
select, input[type="search"] { font: inherit; color: var(--ink); padding: .3rem .5rem; max-width: 100%; }

/* Tabellen */
.scroll { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: .4rem .6rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td.wrap { white-space: normal; }
.grid .num { text-align: right; }
.grid th { font-weight: 700; }
.grid th[data-s] { cursor: pointer; user-select: none; }
.grid th.sorted::after { content: attr(data-dir); }
.grid tbody tr:hover { background: var(--inset); }
.grid .who { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 600; }
.bars tbody tr {
  background-image: linear-gradient(90deg, var(--bar) var(--w, 0%), transparent var(--w, 0%));
}

/* Spielerseite */
.phead { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.phead h1 { margin: 0; }
.phead p { margin: .15rem 0 0; }
.dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; background: var(--good); border-radius: 50%; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .5rem; margin: 0 0 1.25rem; }
.fact { display: flex; flex-direction: column; padding: .5rem .75rem; text-decoration: none; color: var(--ink); }
.fact .l, .fact .rk { color: var(--muted); font-size: .85rem; }
.fact .v { font-size: 1.2rem; font-weight: 700; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -2px; position: relative; z-index: 1; }
.tabs button {
  font: inherit;
  color: var(--ink);
  background: var(--inset);
  padding: .4rem .8rem;
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--panel); font-weight: 700; border-bottom-color: var(--panel); }

.adv-group { margin: 0 0 1.25rem; }
.adv-group h3 { margin: 0 0 .4rem; font-size: 1rem; }
.adv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px; }
.adv-list li { padding: .25rem .5rem; background: var(--inset); border: 2px solid; border-color: var(--inset-lo) var(--inset-hi) var(--inset-hi) var(--inset-lo); }
.adv-list li.open { color: var(--muted); }
.adv-list .mark { display: inline-block; width: 1.2rem; font-weight: 800; }
.adv-list li.done .mark { color: var(--good); }

@media (max-width: 560px) {
  main { padding: .75rem; }
  .phead { flex-direction: column; align-items: flex-start; }
}