/* Entworfen fürs Stehen am Wegrand: große Flächen, hoher Kontrast, keine
   Handlung, für die man scrollen muss. Papierfarben wie die Karte, damit die
   Spielmarken die einzigen kräftigen Farben bleiben. */

:root {
  --bg: #e8ddc4;
  --ink: #2f281c;
  --muted: #6b5f4a;
  --line: #cdc09c;
  --card: #f6f1e2;
  --dark: #3a3226;
  --good: #1f7a4d;
  --bad: #a32020;
  --tap: 3rem;            /* Mindestgröße für Finger mit Handschuhen */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.hide { display: none !important; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.hint { color: var(--muted); font-size: .85rem; }

/* ---- Kopf ---- */

header {
  position: relative; z-index: 5;
  background: var(--dark); color: #f4f1ea;
  padding: calc(.5rem + env(safe-area-inset-top)) .9rem .5rem;
  display: flex; align-items: center; gap: .9rem; font-size: .9rem;
}
header .stat b { font-variant-numeric: tabular-nums; }
.queue {
  margin-left: auto; background: #7a6a4c; border-radius: 1rem;
  padding: .1rem .55rem; font-size: .75rem;
}
/* Der Weg zu den Regeln muss aus dem Spiel heraus zu finden sein. Wer im
   Gelaende steht und nicht weiss, was "weihen" bedeutet, sucht nicht erst
   im Gruppenchat nach einer Adresse. */
.hilfe {
  margin-left: auto; color: #bdb2a0; text-decoration: none;
  font-size: .8rem; border: 1px solid #5a4f3c; border-radius: 1rem;
  /* Grosszuegiger als es aussieht: getippt wird das im Gehen, mit Handschuh
     oder nassen Fingern. Die Umrandung sitzt enger als die Trefferflaeche. */
  padding: .4rem .7rem; white-space: nowrap;
}
.hilfe:active { background: #5a4f3c; color: #f4f1ea; }
/* Steht die Warteschlange daneben, hat die bereits nach rechts geschoben —
   dann klebt der Regel-Knopf direkt an ihr statt ein zweites Mal zu springen. */
.queue:not(.hide) + .hilfe { margin-left: 0; }
.doomtrack {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #241f17;
}
.doomtrack > i { display: block; height: 100%; width: 0; background: var(--bad); transition: width .6s; }

/* ---- Hauptbereich ---- */

main { position: absolute; inset: 0; top: 3.4rem; bottom: 3.6rem; }
main > section { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#map { position: absolute; inset: 0; }

/* ---- Ortsliste ---- */

#list { padding: .5rem; }
.row {
  display: flex; width: 100%; align-items: center; gap: .8rem; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: .5rem;
  padding: .7rem .8rem; margin-bottom: .45rem; min-height: var(--tap);
  font: inherit; color: inherit;
}
.row.near { border-color: var(--good); border-width: 2px; background: #f0f7ef; }
.row-main { flex: 1; min-width: 0; }
.row-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { color: var(--muted); font-size: .78rem; }
.row-dist { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.row-dist small { display: block; font-weight: 400; color: var(--muted); font-size: .72rem; }

/* ---- Ortszettel ---- */

.sheet {
  position: absolute; left: 0; right: 0; bottom: 3.6rem; z-index: 6;
  background: var(--card); border-top: 2px solid var(--line);
  border-radius: .9rem .9rem 0 0; padding: .9rem 1rem 1.1rem;
  max-height: 68%; overflow-y: auto;
  box-shadow: 0 -6px 24px rgba(47, 40, 28, .18);
}
.sheet h2 { margin: 0 2rem 0 0; font-size: 1.15rem; }
.sheet .sub { margin: .15rem 0 .8rem; color: var(--muted); font-size: .85rem; }
.sheet-close {
  position: absolute; top: .5rem; right: .6rem; width: 2.2rem; height: 2.2rem;
  border: 0; background: transparent; font-size: 1.6rem; line-height: 1; color: var(--muted);
}
.blocked {
  background: #f6e9c8; border-left: 3px solid #a86b00;
  padding: .6rem .7rem; margin: 0 0 .5rem; font-weight: 600;
}

/* ---- Handlungen ---- */

.acts { display: grid; gap: .5rem; }
.act {
  width: 100%; min-height: var(--tap); font: inherit; font-weight: 600;
  background: var(--dark); color: #f4f1ea; border: 0; border-radius: .5rem;
  padding: .8rem 1rem; text-align: left;
}
.act small { display: block; font-weight: 400; opacity: .75; font-size: .78rem; }
.act:active { background: #4a4132; }
.act.warn { background: #7a2c24; }

/* ---- Aufgabe ---- */

.task { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.task h3 { margin: 0 0 .3rem; font-size: .78rem; text-transform: uppercase;
           letter-spacing: .08em; color: var(--muted); }
.task input, .task select {
  width: 100%; font: inherit; padding: .7rem; margin: .5rem 0;
  border: 1px solid var(--line); border-radius: .45rem; background: #fff;
}
.task button {
  width: 100%; min-height: var(--tap); font: inherit; font-weight: 600;
  background: var(--dark); color: #f4f1ea; border: 0; border-radius: .5rem;
}

/* ---- Modal ---- */

.modal {
  position: fixed; inset: 0; z-index: 20; background: rgba(35, 30, 22, .72);
  display: flex; align-items: flex-end; justify-content: center; padding: 1rem;
}
.modal .card {
  background: var(--card); border-radius: .8rem; padding: 1.1rem;
  width: 100%; max-width: 34rem; max-height: 84vh; overflow-y: auto;
}
.enc-text { font-size: 1.02rem; line-height: 1.55; margin: 0 0 1rem; }
.rolls { color: var(--muted); font-size: .82rem; margin: 0 0 .6rem;
         font-variant-numeric: tabular-nums; }
.countdown { font-size: 2.6rem; font-weight: 700; text-align: center;
             font-variant-numeric: tabular-nums; margin: .3rem 0 .8rem; }
.bar { height: .5rem; background: var(--line); border-radius: .25rem; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--good); transition: width 1s linear; }

/* ---- Bruchstücke ---- */

#fragments { padding: 1rem; }
.frags { padding-left: 1.2rem; }
.frags li { margin-bottom: .8rem; line-height: 1.5; }
.frags li.unknown { color: var(--muted); font-style: italic; }

/* ---- Meldung ---- */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 4.4rem; z-index: 30; max-width: 90%;
  background: var(--dark); color: #f4f1ea; border-radius: .5rem;
  padding: .65rem .9rem; font-size: .9rem; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.toast.good { background: #1f6b45; }
.toast.bad { background: #7a2c24; }

/* ---- Reiter ---- */

nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  display: flex; background: var(--dark);
  padding-bottom: env(safe-area-inset-bottom);
}
nav button {
  flex: 1; min-height: 3.6rem; font: inherit; font-size: .9rem;
  background: transparent; color: #bdb2a0; border: 0;
}
nav button.on { color: #f4f1ea; box-shadow: inset 0 3px 0 #8a7440; }

/* ---- Ohne Einladung ---- */

.gate { padding: 3rem 1.5rem; text-align: center; }
.gate h1 { font-size: 1.4rem; }

/* ---- Begehungsmodus ----
   Deutlich als Vorbereitung erkennbar, nicht als Spiel. */
.survey-note {
  background: #f6e9c8; border-left: 3px solid #a86b00;
  padding: .7rem .8rem; margin: 0 0 .6rem; border-radius: .4rem;
}
.survey-note b { display: block; margin-bottom: .3rem; }
.survey-note p { margin: 0 0 .35rem; font-size: .88rem; }
.row.survey { border-style: dashed; background: #f3eeda; }
.todo { color: #a86b00; font-weight: 600; }
.coords {
  font: 13px/1.4 ui-monospace, monospace; color: var(--muted);
  margin: .2rem 0 .7rem;
}
a.act { display: block; text-decoration: none; }
.checklist { margin: .9rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--muted); }
.checklist li { margin-bottom: .3rem; }

/* ---- Fehleranzeige ----
   Liegt ueber allem und ist bewusst haesslich. Sie soll nicht uebersehen
   werden koennen, wenn jemand im Regen am Wegrand steht. */
#fehler {
  position: fixed; inset: auto 0 0 0; z-index: 999;
  background: #7a2c24; color: #fff;
  font: 12px/1.4 ui-monospace, monospace;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  max-height: 45vh; overflow-y: auto;
}
#fehler p { margin: 0 0 .4rem; word-break: break-word; }
/* ---- Begehungsbogen ---- */
/* Ausgefüllt wird im Stehen, oft einhändig. Große Zeilen, große Kästchen,
   keine Zielflächen unter 44 px. */
.bogen { display: flex; flex-direction: column; gap: .1rem; margin-top: .6rem; }
.bogen label.ja, .bogen label.nein {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .2rem; min-height: 44px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.bogen label.ja input, .bogen label.nein input {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; accent-color: var(--dark);
}
/* Rot heißt hier nicht "Fehler", sondern "das spricht gegen den Ort" —
   angehakt ist schlecht. Ohne den Unterschied hakt man im Gehen falsch. */
.bogen label.nein span { color: var(--bad); }
.bogen label.feld {
  display: flex; flex-direction: column; gap: .25rem;
  margin-top: .8rem; font-size: .85rem; color: #6b5f4a;
}
.bogen label.feld input, .bogen label.feld textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .6rem; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; width: 100%;
}
.bogen button[type=submit] { margin-top: 1rem; }
.bogen button[disabled] { opacity: .45; }

/* ---- Ortungsanzeige ---- */
/* Der Begehungsbogen fragt "GPS brauchbar?" — hier steht die Antwort.
   Grün heißt: Der Server würde diese Ortung als Nachweis annehmen. */
.gps { display: inline-flex; align-items: baseline; gap: .25rem; font-size: .7rem; }
.gps b { font-weight: 400; font-size: .7rem; font-variant-numeric: tabular-nums; opacity: .8; }
.gps.aus { color: #6b6152; }
.gps.gut { color: #4ad07f; }
.gps.schlecht { color: #e0a33c; }