/* ---------------------------------------------------------------------------
   Galgen - hangman.1337stuff.de

   Farbwelt: Nachtblau als Grund, Messing fuer das Holz des Galgens, Kalkweiss
   fuer die Figur und die Buchstaben. Rot und Salbei tragen ausschliesslich
   Spielinformation (Fehler, Treffer) und werden sonst nirgends verwendet.
--------------------------------------------------------------------------- */

:root {
  --nacht:      #1b1f2a;
  --nacht-hoch: #232838;
  --nacht-kante:#333a4e;
  --kalk:       #e8e4da;
  --kalk-still: #969db2;
  --messing:    #c89b3c;
  --glut:       #c4564b;
  --salbei:     #7fa383;

  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --schrift-fest: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;

  --rund: 3px;
  --spur: 0.14em;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nacht);
  color: var(--kalk);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--messing);
  color: var(--nacht);
  padding: 0.5rem 0.9rem;
}

:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
}

/* --- Kopf und Fuss ------------------------------------------------------- */

.kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--nacht-kante);
}

.marke {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.marke-wort {
  font-family: var(--schrift-fest);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--messing);
}

.marke-zusatz {
  font-size: 0.78rem;
  color: var(--kalk-still);
}

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.kopf-nav form { margin: 0; }

.spieler {
  font-family: var(--schrift-fest);
  font-size: 0.82rem;
  color: var(--kalk-still);
}

.fuss {
  margin-top: auto;
  padding: 1.5rem 1.25rem 2rem;
  border-top: 1px solid var(--nacht-kante);
  font-size: 0.78rem;
  color: var(--kalk-still);
  text-align: center;
}

main {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* --- Meldungen ----------------------------------------------------------- */

.meldungen {
  list-style: none;
  margin: 1rem auto 0;
  padding: 0 1.25rem;
  width: 100%;
  max-width: 56rem;
}

.meldung {
  border-left: 3px solid var(--kalk-still);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--nacht-hoch);
  font-size: 0.92rem;
}

.meldung-success { border-left-color: var(--salbei); }
.meldung-error   { border-left-color: var(--glut); }

/* --- Knoepfe und Formulare ----------------------------------------------- */

.knopf {
  font-family: var(--schrift-text);
  font-size: 0.88rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--nacht-kante);
  border-radius: var(--rund);
  background: var(--nacht-hoch);
  color: var(--kalk);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s, color 0.15s;
}

.knopf:hover { border-color: var(--messing); }

.knopf-haupt {
  background: var(--messing);
  border-color: var(--messing);
  color: var(--nacht);
  font-weight: 600;
}

.knopf-haupt:hover { filter: brightness(1.08); }

.knopf-still {
  background: none;
  border-color: transparent;
  color: var(--kalk-still);
  padding: 0.3rem 0.4rem;
}

.formular { max-width: 34rem; }
.formular-schmal { max-width: 24rem; margin: 0 auto; }

.formular-titel {
  font-family: var(--schrift-fest);
  font-size: 1.35rem;
  letter-spacing: var(--spur);
  margin: 1rem 0 0.4rem;
}

.formular-vorwort {
  color: var(--kalk-still);
  font-size: 0.92rem;
  margin-top: 0;
}

.feldgruppe { margin-bottom: 1.1rem; }

.feldgruppe label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--kalk-still);
  margin-bottom: 0.3rem;
}

.feldgruppe input,
.loesung-form input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: var(--nacht-hoch);
  border: 1px solid var(--nacht-kante);
  border-radius: var(--rund);
  color: var(--kalk);
  font-family: var(--schrift-fest);
  font-size: 1rem;
}

.hilfe { font-size: 0.78rem; color: var(--kalk-still); margin: 0.35rem 0 0; }
.hilfe ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.fehler { font-size: 0.82rem; color: var(--glut); margin: 0.35rem 0 0; }

.wechsel { font-size: 0.85rem; color: var(--kalk-still); margin-top: 1.6rem; }

.zurueck {
  font-size: 0.8rem;
  color: var(--kalk-still);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.zurueck::before { content: "← "; }
.zurueck:hover { color: var(--messing); }

/* --- Lobby --------------------------------------------------------------- */

.lobby-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.lobby-stand { margin: 0; font-size: 0.95rem; color: var(--kalk-still); }
.lobby-stand strong { color: var(--kalk); }

.raumliste, .archiv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.karte {
  border: 1px solid var(--nacht-kante);
  border-radius: var(--rund);
  background: var(--nacht-hoch);
}

.karte a {
  display: block;
  padding: 1rem;
  text-decoration: none;
}

.karte-dran { border-left: 3px solid var(--messing); }

.karte-wort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  margin-bottom: 0.7rem;
}

.mini {
  font-family: var(--schrift-fest);
  font-size: 0.9rem;
  width: 1.05rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid var(--nacht-kante);
  color: var(--kalk-still);
}

.mini-offen { color: var(--kalk); border-bottom-color: var(--kalk-still); }
.mini-luecke { border-bottom: none; width: 0.5rem; }

.karte-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--kalk-still);
}

.karte-marke {
  margin-left: auto;
  color: var(--messing);
  letter-spacing: 0.06em;
}

.karte-marke-still { color: var(--kalk-still); opacity: 0.75; }

.abschnitt {
  font-family: var(--schrift-fest);
  font-size: 0.8rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--kalk-still);
  margin: 2.5rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--nacht-kante);
}

.archiv-zeile a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  text-decoration: none;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--nacht-kante);
}

.archiv-wort {
  font-family: var(--schrift-fest);
  letter-spacing: 0.1em;
}

.archiv-solved .archiv-wort { color: var(--salbei); }
.archiv-lost .archiv-wort { color: var(--glut); }
.archiv-status { color: var(--kalk-still); font-size: 0.8rem; }

.leerstand {
  border: 1px dashed var(--nacht-kante);
  border-radius: var(--rund);
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--kalk-still);
}

/* --- Raum ---------------------------------------------------------------- */

.raum-kopf { margin-bottom: 1.5rem; }

.raum-herkunft {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--kalk-still);
}

.hinweis { color: var(--messing); }

.urteil {
  font-family: var(--schrift-fest);
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--rund);
  margin: 0 0 1.5rem;
}

.urteil-geloest { background: rgba(127, 163, 131, 0.15); color: var(--salbei); }
.urteil-verloren { background: rgba(196, 86, 75, 0.15); color: var(--glut); }

.buehne {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.buehne-galgen { text-align: center; }

.galgen {
  width: 100%;
  max-width: 190px;
  height: auto;
  overflow: visible;
}

.teil {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.holz { stroke: var(--messing); }
.seil { stroke: var(--kalk-still); stroke-width: 3; }
.figur { stroke: var(--kalk); }

.galgen-verloren .figur { stroke: var(--glut); }

/* Nur das zuletzt hinzugekommene Teil zeichnet sich. */
.neu {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: zeichnen 0.65s ease-out forwards;
}

@keyframes zeichnen {
  to { stroke-dashoffset: 0; }
}

.leben {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 0;
  margin: 1rem 0 0.4rem;
}

.leben li {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--nacht-kante);
}

.leben .verbraucht { background: var(--glut); border-color: var(--glut); }

.leben-text { font-size: 0.75rem; color: var(--kalk-still); margin: 0; }

.wort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.35rem;
}

.feld {
  font-family: var(--schrift-fest);
  font-size: clamp(1.3rem, 5.5vw, 2rem);
  font-weight: 600;
  width: 1.5em;
  height: 1.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid var(--nacht-kante);
  color: transparent;
}

.feld-offen { color: var(--kalk); border-bottom-color: var(--messing); }
.feld-luecke { border-bottom: none; width: 0.6em; }

/* --- Zug ----------------------------------------------------------------- */

.zug-titel {
  font-family: var(--schrift-fest);
  font-size: 0.8rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 0.9rem;
}

.tastatur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.taste {
  font-family: var(--schrift-fest);
  font-size: 1.05rem;
  padding: 0.65rem 0;
  background: var(--nacht-hoch);
  color: var(--kalk);
  border: 1px solid var(--nacht-kante);
  border-radius: var(--rund);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}

.taste:hover:not(:disabled) {
  border-color: var(--messing);
  transform: translateY(-1px);
}

.taste:disabled { cursor: default; }
.taste-hit  { color: var(--salbei); border-color: rgba(127, 163, 131, 0.4); opacity: 0.7; }
.taste-miss { color: var(--glut); border-color: rgba(196, 86, 75, 0.35);
              opacity: 0.55; text-decoration: line-through; }

.loesung summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--kalk-still);
}

.loesung summary:hover { color: var(--messing); }

.loesung-warnung {
  font-size: 0.8rem;
  color: var(--glut);
  margin: 0.6rem 0 0.5rem;
}

.loesung-form { display: flex; gap: 0.5rem; }
.loesung-form input { flex: 1; }

.gesperrt {
  border: 1px solid var(--nacht-kante);
  border-radius: var(--rund);
  padding: 0.9rem 1rem;
  color: var(--kalk-still);
  font-size: 0.9rem;
  text-align: center;
}

/* --- Verlauf ------------------------------------------------------------- */

.verlauf { margin-top: 2.5rem; }

.verlauf-titel {
  font-family: var(--schrift-fest);
  font-size: 0.8rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--kalk-still);
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--nacht-kante);
}

.verlauf-liste { list-style: none; margin: 0; padding: 0; }

.verlauf-liste li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--kalk-still);
}

.verlauf-zeichen {
  font-family: var(--schrift-fest);
  font-weight: 700;
  letter-spacing: 0.08em;
  min-width: 1.6rem;
}

.treffer .verlauf-zeichen { color: var(--salbei); }
.fehler .verlauf-zeichen { color: var(--glut); text-decoration: line-through; }
.verlauf-wann { margin-left: auto; font-size: 0.78rem; opacity: 0.8; }

.leer { color: var(--kalk-still); font-size: 0.9rem; }

/* --- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 620px) {
  .buehne {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .galgen { max-width: 150px; }
  .wort { justify-content: center; }
  .lobby-kopf { flex-direction: column; align-items: stretch; }
  .knopf-haupt { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .neu { animation: none; stroke-dashoffset: 0; }
  .taste:hover:not(:disabled) { transform: none; }
}

/* ---------------------------------------------------------------------------
   Erweiterungen: Regeln, hervorgehobene Wortlösung, Verwaltung
--------------------------------------------------------------------------- */

/* --- Regeln auf der Lobby ------------------------------------------------ */

.regeln {
  border: 1px solid var(--nacht-kante);
  border-left: 3px solid var(--messing);
  border-radius: var(--rund);
  background: var(--nacht-hoch);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
}

.regeln-titel {
  font-family: var(--schrift-fest);
  font-size: 0.78rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--messing);
  margin: 0 0 0.7rem;
}

.regeln-liste {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  color: var(--kalk-still);
}

.regeln-liste li { margin-bottom: 0.35rem; }
.regeln-liste li:last-child { margin-bottom: 0; }
.regeln-liste b { color: var(--kalk); font-weight: 600; }

/* --- Wortlösung: eigener Block statt Aufklappmenü ------------------------ */

.zug-hinweis {
  font-size: 0.85rem;
  color: var(--kalk-still);
  margin: 0 0 0.8rem;
}

.loesung {
  border: 1px solid rgba(200, 155, 60, 0.35);
  border-radius: var(--rund);
  background: linear-gradient(180deg, rgba(200, 155, 60, 0.07), transparent);
  padding: 1.1rem 1.25rem 1.25rem;
}

.loesung-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.loesung-marke {
  font-family: var(--schrift-fest);
  font-size: 0.68rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--nacht);
  background: var(--messing);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
}

.loesung-titel {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0;
}

.loesung-text {
  font-size: 0.85rem;
  color: var(--kalk-still);
  margin: 0 0 0.9rem;
}

.loesung-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.loesung-form input {
  flex: 1 1 12rem;
  min-width: 0;
}

.knopf-wagnis {
  background: var(--messing);
  border-color: var(--messing);
  color: var(--nacht);
  font-weight: 600;
  white-space: nowrap;
}

.knopf-wagnis:hover { filter: brightness(1.08); }

/* --- Fußzeile ------------------------------------------------------------ */

.spruch { font-style: italic; }

/* --- Verwaltung ---------------------------------------------------------- */

.verwaltung { max-width: 46rem; }

.warnhinweis {
  border-left: 3px solid var(--messing);
  background: var(--nacht-hoch);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  color: var(--kalk-still);
  border-radius: var(--rund);
}

.passwort-box {
  border: 1px solid var(--messing);
  border-radius: var(--rund);
  background: var(--nacht-hoch);
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}

.passwort-kopf { margin: 0 0 0.5rem; font-size: 0.88rem; }

.passwort-wert {
  font-family: var(--schrift-fest);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--messing);
  margin: 0 0 0.5rem;
  user-select: all;
  word-break: break-all;
}

.passwort-hinweis { margin: 0; font-size: 0.78rem; color: var(--kalk-still); }

.code-form { margin-bottom: 1.2rem; }

.code-felder {
  display: flex;
  gap: 0.7rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.code-felder .feldgruppe { flex: 1 1 12rem; margin-bottom: 0; }
.code-felder .knopf { white-space: nowrap; }

.codeliste, .spielerliste { list-style: none; margin: 0; padding: 0; }

.codezeile, .spielerzeile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--nacht-kante);
  font-size: 0.87rem;
}

.codezeile form, .spielerzeile form { margin: 0; }
.codezeile-aus { opacity: 0.45; }

.code-wert {
  font-family: var(--schrift-fest);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--messing);
  min-width: 8rem;
  user-select: all;
}

.code-notiz { color: var(--kalk-still); flex: 1 1 8rem; }
.code-zahl { display: block; font-size: 0.75rem; opacity: 0.75; }
.code-aktionen { display: flex; gap: 0.3rem; margin-left: auto; }

.knopf-warnung { color: var(--glut); }

.spieler-name { flex: 1 1 10rem; }
.spieler-datum { color: var(--kalk-still); font-size: 0.78rem; }
.spielerzeile form { margin-left: auto; }

.spieler-marke {
  font-family: var(--schrift-fest);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kalk-still);
  border: 1px solid var(--nacht-kante);
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

.spieler-marke-warn { color: var(--messing); border-color: rgba(200, 155, 60, 0.4); }

/* --- Handy: größere Tippflächen ------------------------------------------ */

@media (max-width: 620px) {
  .taste { padding: 0.85rem 0; font-size: 1.15rem; }
  .tastatur { grid-template-columns: repeat(auto-fit, minmax(2.9rem, 1fr)); }
  .knopf { padding: 0.7rem 1.1rem; }
  .knopf-still { padding: 0.45rem 0.5rem; }
  .loesung-form { flex-direction: column; }
  .loesung-form input, .knopf-wagnis { width: 100%; }
  .code-felder { flex-direction: column; align-items: stretch; }
  .codezeile, .spielerzeile { align-items: flex-start; }
  .code-aktionen, .spielerzeile form { margin-left: 0; }
  .kopf { flex-wrap: wrap; gap: 0.5rem; }
  .kopf-nav { gap: 0.4rem; }
}