/* Durak — Lobby und Runden-Erstellen auf kleinen Screens (Issue #11).
   Wird NACH app.css geladen; alle Regeln in einem Media-Query fuer
   Screens <= 600px, damit das Desktop-Erscheinungsbild unveraendert
   bleibt und diese Datei moeglichst konfliktfrei neben anderen
   CSS-Arbeiten existieren kann. */

@media (max-width: 600px) {
  /* ---------- Formulare: einspaltig, vollbreite, thumb-tauglich ---------- */

  .form-grid {
    grid-template-columns: 1fr; /* eine Spalte, keine zweispaltigen Paare */
    gap: 0;
  }

  input[type="text"],
  input[type="number"],
  select {
    width: 100%;
    max-width: none;      /* app.css begrenzt auf 260px — auf dem Phone zu klein */
    min-height: 44px;     /* Touch-Ziel groesse (WCAG 2.5.5) */
    font-size: 1rem;      /* >= 16px: verhindert den iOS-Autozoom beim Fokus */
  }

  label {
    font-size: 0.95rem;
    margin: 0.55rem 0 0.2rem; /* etwas mehr Luft zwischen Feldern */
  }

  /* Primaere CTAs (Erstellen / Beitreten) unterhalb der Felder,
     vollbreit und in Daumenhoehe — Reihenfolge im HTML stimmt bereits. */
  .lobby-create form > p {
    margin: 1rem 0 0.2rem;
  }
  .lobby-create .btn,
  .lobby-list .btn,
  .lobby-join .btn {
    width: 100%;
    min-height: 44px;
    margin-top: 0.4rem;
  }

  /* ---------- Fehler-/Hinweistexte: lesbar und kontrastreich ---------- */

  .hint,
  .form-grid .hint {
    font-size: 1rem;            /* >= 16px auf dem Phone */
    color: var(--ink);          /* kontraststaerker als das gedimmte --ink-dim */
  }
  label.check { font-size: 1rem; }

  #flash {
    width: calc(100vw - 1.5rem); /* Toasts fast volle Breite => gut lesbar */
  }
  .toast { font-size: 1rem; }

  /* ---------- Rundenliste: kompakt, Join-Code gut sichtbar ---------- */

  .round-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.15rem 0.6rem;
    padding: 0.55rem 0.2rem;
  }
  .round-list .spacer { display: none; } /* im Grid-Layout nicht benoetigt */
  .round-list li strong {
    overflow-wrap: anywhere; /* lange Rundennamen umbrechen statt ueberlaufen */
  }
  .round-list .code-pill {
    justify-self: end;
    font-size: 1rem;           /* Code auf einen Blick ablesbar (auch zum Abtippen) */
    padding: 0.15rem 0.5rem;
  }
  .round-list .meta {
    grid-column: 1 / -1;       /* Meta-Zeile unter Name + Code */
    font-size: 0.9rem;
  }
  .round-list li form {
    grid-column: 1 / -1;       /* "Beitreten" direkt unter der Zeile, vollbreit */
  }

  /* ---------- "Per Code beitreten": Stapeln statt Zeile ---------- */

  .lobby-join form.inline {
    display: flex;
    flex-direction: column;    /* Eingabe oben, Button darunter in Daumenhoehe */
    align-items: stretch;
    gap: 0.6rem;
  }
  .lobby-join form.inline label { margin: 0; }

  /* Code-Eingabe wie ein Code-Pill setzen: Monospace, GROSS, zentriert.
     Das Inline-JS im Formular normalisiert den Wert vor dem Absenden. */
  .code-input {
    text-transform: uppercase;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-align: center;
    font-size: 1.15rem;
  }
}