/* Dieselbe Familie wie quake.iltis.io: dunkel, Monospace, Kacheln, Scanlines.
   Der Akzent ist hier Gold statt Blau -- gleiches Haus, anderer Raum. Blau und
   Rot bleiben fuer die beiden Fraktionen reserviert und werden deshalb sonst
   nirgends als Akzent benutzt. Alles aus eigener Hand, keine fremde Quelle
   ausser der Schrift -- die CSP der Seite laesst nichts anderes zu. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root {
  --bg:      #0a0a0a;
  --panel:   rgba(255,255,255,0.035);
  --panel-2: rgba(255,255,255,0.055);
  --line:    rgba(255,255,255,0.08);
  --line-2:  rgba(255,255,255,0.14);
  --fg:      #e0e0e0;
  --dim:     rgba(255,255,255,0.42);
  --faint:   rgba(255,255,255,0.22);
  --accent:  #e5a33d;
  --accent-d: rgba(229,163,61,0.12);
  --ok:      #4ade80;
  --warn:    #fbbf24;
  --bad:     #f87171;
  --alliance: #60a5fa;
  --horde:    #f87171;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Muss sein, und zwar mit !important: das hidden-Attribut wirkt ueber
   "display: none" aus dem Browser-Stylesheet, und jede eigene display-Regel
   sticht das. Ohne diese Zeile staende das Registrierformular auch dann da,
   wenn der Server gar keine Registrierung anbietet. */
[hidden] { display: none !important; }

body {
  font-family: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  background-image: radial-gradient(1200px 500px at 50% -200px, rgba(229,163,61,0.10), transparent 70%);
  background-attachment: fixed;
}

/* Kein "overflow-x: hidden" am body. Das verdeckt einen Ueberlauf, statt ihn
   zu beheben, und klemmt nebenbei scrollWidth auf die Fensterbreite -- womit
   die naheliegende Messung nichts mehr findet. Was breit ist, muss schmal
   werden duerfen: min-width:0 in Flex- und Grid-Kindern, overflow-x:auto an
   den Tabellen, minmax(0,1fr) statt 1fr. */

.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
}

.wrap { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 1rem; }

.sprite { display: none; }
.i {
  width: 1.05em; height: 1.05em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.15em;
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

header { padding: 3rem 1rem 1.5rem; text-align: center; }
h1 {
  font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent);
}
.rune { color: var(--faint); font-weight: 300; }
.tag { color: var(--dim); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sep { color: var(--faint); }
.status { margin-top: 1rem; display: flex; gap: 0.6rem; align-items: center; justify-content: center; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.15rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--line-2); font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-up      { color: var(--ok);   border-color: rgba(74,222,128,0.35);  background: rgba(74,222,128,0.08); }
.pill-partial { color: var(--warn); border-color: rgba(251,191,36,0.35);  background: rgba(251,191,36,0.08); }
.pill-down    { color: var(--bad);  border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); }
.pill-unknown { color: var(--dim); }
/* Ein kurzer Puls bei jedem Zyklus -- so ist zu sehen, dass die Seite lebt,
   auch wenn sich keine Zahl geaendert hat. */
.pulse { animation: pulse 0.6s ease-out; }
@keyframes pulse { from { box-shadow: 0 0 0 0 currentColor; opacity: 0.85; } to { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.dim { color: var(--dim); font-size: 0.85rem; }

/* ── Kacheln ───────────────────────────────────────────────────────────── */

.tiles {
  display: grid; gap: 0.75rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.tile {
  display: flex; align-items: center; gap: 0.75rem; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.9rem 1rem; color: var(--accent);
}
.tile > div { display: flex; flex-direction: column; min-width: 0; }
.tile strong { font-size: 1.5rem; color: var(--fg); line-height: 1.2; }
.tile span { font-size: 0.75rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.07em; }

/* ── Karten ────────────────────────────────────────────────────────────── */

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.25rem; margin-bottom: 1rem; min-width: 0;
}
.card h2 {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); font-weight: 500; margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.count { color: var(--dim); letter-spacing: 0; text-transform: none; }

.cols { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Anleitung ─────────────────────────────────────────────────────────── */

.steps { list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; padding: 0 0 1.1rem 2.2rem; position: relative; }
.steps > li:last-child { padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0.15rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--accent-d); color: var(--accent);
  display: grid; place-items: center; font-size: 0.75rem;
}
.steps h3 { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.2rem; }
.steps p { font-size: 0.9rem; color: rgba(255,255,255,0.72); }
.hint { margin-top: 0.5rem; font-size: 0.82rem !important; color: var(--dim) !important; }

code {
  font-family: inherit; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 0.05rem 0.35rem; color: var(--accent); font-size: 0.88em;
}
.copyrow {
  display: flex; gap: 0.5rem; align-items: center; margin: 0.6rem 0 0; min-width: 0;
}
.copyrow code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 0.4rem 0.6rem; }

.btn, .btn-ghost {
  font: inherit; font-size: 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-radius: 6px; padding: 0.4rem 0.8rem;
  background: var(--accent-d); border: 1px solid rgba(229,163,61,0.35); color: var(--accent);
}
.btn-ghost { background: var(--panel-2); border-color: var(--line-2); color: var(--dim); }
.btn:hover, .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn[disabled] { opacity: 0.5; cursor: progress; }

/* ── Formular ──────────────────────────────────────────────────────────── */

.fields { display: grid; gap: 0.75rem; margin: 0.9rem 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fields label {
  display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim);
}
.fields input {
  font: inherit; font-size: 0.95rem; min-width: 0;
  background: rgba(0,0,0,0.35); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 0.45rem 0.6rem; color: var(--fg);
}
.fields input:focus { outline: none; border-color: var(--accent); }
.msg { margin-top: 0.75rem; font-size: 0.88rem; }
.msg-ok  { color: var(--ok); }
.msg-bad { color: var(--bad); }

/* ── Tabellen ──────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th {
  text-align: left; font-weight: 500; color: var(--dim); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.07em; padding: 0 0.6rem 0.4rem 0;
  border-bottom: 1px solid var(--line);
}
td { padding: 0.35rem 0.6rem 0.35rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
.lvl { color: var(--accent); }
.f-alliance { color: var(--alliance); }
.f-horde    { color: var(--horde); }
.empty { color: var(--dim); font-size: 0.88rem; padding: 0.4rem 0; }

/* ── Kurve ─────────────────────────────────────────────────────────────── */

.range { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; }
.range button {
  font: inherit; font-size: 0.75rem; cursor: pointer; border-radius: 5px;
  padding: 0.15rem 0.6rem; background: transparent;
  border: 1px solid var(--line-2); color: var(--dim);
}
.range button.active { color: var(--accent); border-color: rgba(229,163,61,0.45); background: var(--accent-d); }
.chart { min-width: 0; }
.chart svg { width: 100%; height: 150px; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .lbl  { fill: var(--faint); font-size: 9px; font-family: inherit; }
.chart .bar  { fill: var(--accent); opacity: 0.8; }

/* ── Protokoll ─────────────────────────────────────────────────────────── */

.events { list-style: none; font-size: 0.85rem; max-height: 280px; overflow-y: auto; }
.events li { display: flex; gap: 0.6rem; padding: 0.2rem 0; min-width: 0; }
.events time { color: var(--faint); flex-shrink: 0; font-size: 0.78rem; }
.events span { min-width: 0; overflow-wrap: anywhere; }
.e-up, .e-login { color: var(--ok); }
.e-down { color: var(--bad); }
.e-logout { color: var(--dim); }
.e-level, .e-account { color: var(--accent); }

/* ── Fraktionen ────────────────────────────────────────────────────────── */

.bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--panel-2); }
.bar-a { background: var(--alliance); }
.bar-h { background: var(--horde); }
.legend { margin-top: 0.6rem; font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-a { background: var(--alliance); }
.dot-h { background: var(--horde); }

footer { padding: 2rem 1rem 3rem; text-align: center; }
footer p { margin-bottom: 0.3rem; }

/* ── Download ──────────────────────────────────────────────────────────── */

.fields-one { grid-template-columns: minmax(0, 1fr); max-width: 22rem; }
@media (min-width: 620px) { .fields-one { grid-template-columns: minmax(0, 1fr); } }

.dl-row {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.9rem 0 0.2rem; min-width: 0;
}
.dl-row a { text-decoration: none; }
/* Die Pruefsumme ist 64 Zeichen. Auf dem Handy darf sie umbrechen statt die
   Karte aufzuziehen -- deshalb anywhere und min-width:0. */
.dl-sum {
  font-size: 0.7rem; color: var(--faint); min-width: 0;
  overflow-wrap: anywhere; background: none; border: none; padding: 0;
}