/* ============================================================
   MT2GOLD · konto.css — Anmeldekasten und Spielerbereich

   Bewusst klein: die Eingabefelder und der Knopf stehen schon in
   sections.css (.login-form) und components.css (.btn). Hier steht nur,
   was es dort noch nicht gibt — Meldungen, die Charaktertabelle und die
   zwei Zeilen fuer die Unterseite /konto/.
   ============================================================ */

/* Ohne diese Zeile bliebe „hidden“ wirkungslos, sobald ein Element per
   CSS ein display bekommt. Das ist die haeufigste Ursache dafuer, dass
   ein Anmeldekasten und die Antwort danach GLEICHZEITIG dastehen. */
[hidden] { display: none !important; }

/* ---------- Meldungen unter einem Formular ----------
   Farbe ALLEIN traegt die Aussage nicht: „schlecht“ bekommt zusaetzlich
   einen linken Balken und den Text selbst. Wer Rot und Gruen nicht
   unterscheidet — das ist ungefaehr jeder zwoelfte Mann — sieht es
   trotzdem. */
.form-meldung {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: var(--radius);
  border-left: 3px solid var(--haar-linie);
  background: rgba(6, 5, 4, 0.55);
  font-size: 0.86rem;
  line-height: 1.5;
}
.form-meldung.schlecht {
  border-left-color: #c0392b;
  color: #f0c9c3;
}
.form-meldung.gut {
  border-left-color: #4f9d5d;
  color: #cfe8d4;
}

/* ---------- Der Kasten in der Seitenspalte ---------- */
.zugang-drin { display: grid; gap: 12px; }
.zugang-drin .zugang-wer {
  /* Hier stand var(--schrift-titel, …) — diesen Namen gibt es in
     base.css nicht, die Zeile fiel also immer auf „inherit“ zurueck. */
  font-family: var(--font-display, inherit);
  font-size: 1.05rem;
  color: var(--gold-300);
}
.zugang-drin .zugang-wer strong { color: var(--paper); }

/* Ein Knopf, der wie ein Verweis aussieht. Abmelden ist kein Hauptweg
   und soll den goldenen Knopf daneben nicht ueberstrahlen. */
.knopf-schlicht {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gold-500);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.knopf-schlicht:hover { color: var(--gold-100); }

/* ---------- Die Kontoleiste im Seitenkopf ----------
   Sie steht auf JEDER Seite. Der Grund ist nicht Bequemlichkeit: wer sich
   auf einem fremden Rechner angemeldet hat, muss ueberall wieder hinaus-
   kommen — und nicht erst zurueck auf die Startseite finden muessen.

   Ohne JavaScript bleibt sie verborgen (das Merkmal „hidden“ steht im
   HTML). Das ist richtig so: ohne JavaScript gibt es hier auch keine
   Anmeldung, und ein Knopf, der nichts tut, ist schlimmer als keiner. */
.nav-konto { display: flex; align-items: center; gap: 8px; }
/* KEINE Versalien und kein gesperrter Satz, anders als bei den
   Menuepunkten daneben. Zwei Gruende, und der zweite ist der wichtigere:
   ein Kontoname liest sich als „KENNETH“ wie ein Ausruf. Und in Versalien
   mit 0.1em Sperrung braucht die Leiste rund 25 Pixel mehr — genau die,
   die auf einem 390 Pixel breiten Bildschirm die Menuetaste ueber den
   rechten Rand geschoben haben (nachgemessen: Menuetaste bis Pixel 395
   bei 390 Pixel Fensterbreite). */
.nav-konto a,
.nav-konto button {
  font-size: 0.78rem; font-weight: 500;
  white-space: nowrap;
}
.nav-konto .wer {
  color: var(--gold-300);
  /* Ein Kontoname darf 16 Zeichen lang sein. Ohne diese drei Zeilen
     schoebe „Kenneth-der-Erste“ auf einem 390 Pixel breiten Bildschirm
     die Menuetaste aus dem Bild. */
  max-width: 7rem;
  overflow: hidden; text-overflow: ellipsis;
}
.nav-konto .wer:hover { color: var(--gold-100); }
/* Ein senkrechter Strich zwischen Name und „Abmelden“ — sonst lesen sich
   die beiden bei den kleinen Versalien wie ein einziges Wort. */
.nav-konto .trenner { color: var(--paper-mute); font-size: 0.7rem; }

/* ---------- Kontoübersicht: die drei Zahlen ---------- */
.konto-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.konto-zahl {
  border: var(--line);
  border-radius: var(--radius);
  background: rgba(6, 5, 4, 0.45);
  padding: 12px 14px;
}
.konto-zahl dt {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gold-500);
}
.konto-zahl dd {
  margin-top: 5px;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  color: var(--paper);
}
.konto-zahl dd small {
  font-family: inherit; font-size: 0.78rem; color: var(--paper-dim);
}

/* ---------- Charaktertabelle ---------- */
.char-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.char-tabelle th,
.char-tabelle td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--haar-linie);
}
.char-tabelle th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-500);
  white-space: nowrap;
}
.char-tabelle td:first-child { color: var(--paper); font-weight: 500; }
.char-tabelle tr:last-child td { border-bottom: none; }

/* Auf breiten Bildschirmen darf die Tabelle notfalls seitlich rollen. */
.tabelle-rollt { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Dieselbe Tabelle als Karten, sobald es eng wird ----------
   VORHER stand hier nur „dann rollt sie eben seitlich“. Auf einem 390
   Pixel breiten Bildschirm heisst das: von sieben Spalten sind zwei zu
   sehen, und man muss waagerecht wischen, um die eigene Stufe zu finden.
   Eine Tabelle, die man wegschieben muss, ist keine Tabelle mehr.

   Deshalb wird ab hier jede ZEILE zu einer Karte und jede ZELLE zu einem
   Paar aus Beschriftung und Wert. Die Beschriftung kommt aus dem Merkmal
   data-spalte, das konto.js beim Bauen mitgibt — die Kopfzeile selbst
   wird ausgeblendet. Es bleibt EINE Tabelle im HTML: derselbe Inhalt,
   dieselbe Vorlesereihenfolge, nur anders angeordnet. */
@media (max-width: 640px) {
  .char-tabelle thead { display: none; }
  .char-tabelle,
  .char-tabelle tbody,
  .char-tabelle tr,
  .char-tabelle td { display: block; width: 100%; }
  .char-tabelle tr {
    border: var(--line);
    border-radius: var(--radius);
    background: rgba(6, 5, 4, 0.45);
    padding: 4px 12px 8px;
    margin-bottom: 10px;
  }
  .char-tabelle td {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(96, 83, 69, 0.28);
  }
  .char-tabelle tr td:last-child { border-bottom: none; }
  .char-tabelle td::before {
    content: attr(data-spalte);
    flex: 0 0 auto;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--gold-500);
  }
  /* Der Name traegt seine Beschriftung nicht — er ist die Ueberschrift
     der Karte und steht allein oben drueber. */
  .char-tabelle td:first-child {
    font-size: 1.02rem;
    padding-top: 10px;
  }
  .char-tabelle td:first-child::before { content: none; }
}

@media (max-width: 760px) {
  /* Auf dem Handy sind Menue und „Jetzt spielen“ hinter der Menuetaste
     verborgen — die Kontoleiste NICHT. Sie rueckt statt dessen nach
     rechts, direkt neben die Menuetaste. */
  .nav-inner { gap: 12px; }
  .nav-konto { margin-left: auto; }
  .nav-konto .wer { max-width: 5rem; }
}

/* Auf sehr schmalen Geräten wird der Schriftzug kleiner.
   NACHGEMESSEN, nicht geschätzt: bei 390 Pixeln Fensterbreite bleiben
   nach den Rändern 358 Pixel. Davon nahm der Schriftzug allein 148 —
   38 Prozent. Zusammen mit der Kontoleiste und der Menuetaste stand die
   Menuetaste danach bis Pixel 395, also 5 Pixel ausserhalb des Bildes.

   WARUM DIESE ZEILEN IN konto.css STEHEN und nicht bei den übrigen
   Kopfleisten-Stilen in components.css: Sie sind erst nötig geworden,
   weil die Kontoleiste dazugekommen ist. Wer die Leiste eines Tages
   wieder ausbaut, findet hier auch gleich die Zeilen, die dann wieder
   weg können. */
@media (max-width: 430px) {
  .logo-word { font-size: 1.02rem; letter-spacing: 0.12em; }
  .logo-mark { width: 9px; height: 16px; }
}

/* ---------- Formular auf der Unterseite ---------- */
.konto-formular { max-width: 26rem; }
.konto-formular .btn { margin-top: 14px; }

/* Die Charaktertabelle im Spielerbereich verlinkt seit 08.08.2026 auf die
   öffentlichen Profile. Ohne eigene Regel wären das die blassen
   Grundfarben-Verweise -- in einer Tabelle sieht das aus wie ein Fehler. */
.char-tabelle a { color: var(--gold-300); text-decoration: none; }
.char-tabelle a:hover { color: var(--gold-100); text-decoration: underline; }