<title>Bedrock Society</title>
<link rel="icon" type="image/png" href="atlas/favicon.png">
<link rel="apple-touch-icon" href="atlas/favicon.png">
<style>
  @font-face { font-family: "ManaSeedTitle"; src: url("atlas/ManaSeedTitle.ttf"); }
  @font-face { font-family: "ManaSeedBody";  src: url("atlas/ManaSeedBody.ttf"); }

  /* Eine feste Welt: Holz, Pergament, Stein, Efeu - bewusst ohne Hell/Dunkel-Umschaltung */
  :root {
    --p: 3px;                                   /* ein "Pixel" der Oberflaeche */
    --nacht: #1a1512;
    --holz: #6b4424; --holz-hell: #9a6a3a; --holz-dunkel: #3a2414; --kontur: #1e120a;
    --pergament: #e9d8a6; --perg-hell: #f6ead0; --perg-dunkel: #c9ae78;
    --tinte: #3b2a1a; --tinte-blass: #7a5c3a; --tinte-aus: #b09a70;
    --gold: #e8b84a; --gold-dunkel: #a8741e;
    --tuch: #8a2a2a; --tuch-dunkel: #5a1818;
    /* Namen in Gesprächen: du selbst rot, Bewohner navyblau. Beide sind auf dem Pergament
       geprüft (Kontrast über 7:1) - ein helleres Rot wäre auf dem warmen Grund untergegangen. */
    --name-pc: #9c2b20; --name-npc: #1f3a6e;
    --kerbe: polygon(var(--p) 0, calc(100% - var(--p)) 0, 100% var(--p), 100% calc(100% - var(--p)),
                     calc(100% - var(--p)) 100%, var(--p) 100%, 0 calc(100% - var(--p)), 0 var(--p));
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  /* Alles passt ins Fenster, nichts scrollt: Start und Welt fuellen die Hoehe, Anmeldung und
     Schmiede werden bei Bedarf verkleinert (einpassen() in spiel.js) */
  html, body { margin: 0; height: 100%; overflow: hidden; background: var(--nacht); color: var(--tinte); }
  body {
    font: 16px/1.25 "ManaSeedBody", ui-monospace, Menlo, monospace;
    -webkit-font-smoothing: none; font-smooth: never;
    padding-block: 12px; padding-inline: 16px; display: flex; flex-direction: column;
    background:
      repeating-linear-gradient(90deg, transparent 0 45px, rgba(0,0,0,.18) 45px 48px),
      repeating-linear-gradient(0deg, #231b16 0 21px, #1a1512 21px 24px);
  }
  canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

  /* Holzrahmen um alles, Efeu als Pixel-Overlay */
  .rahmen {
    position: relative; margin: 0 auto; width: 100%; max-width: 820px; padding: 16px 20px 26px;
    flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column;
    background: repeating-linear-gradient(0deg, var(--holz) 0 15px, #5e3b1f 15px 18px);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--holz-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--holz-dunkel);
  }
  .efeu { position: absolute; pointer-events: none; z-index: 2; }
  main { display: grid; grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: 22px; align-items: start; }
  @media (max-width: 820px) { main { grid-template-columns: minmax(0, 1fr); } }
  .vorschau { position: sticky; top: 16px; min-width: 0; }
  main > section { min-width: 0; }
  @media (max-width: 820px) { .vorschau { position: static; } }

  h1 {
    font: clamp(18px, 5.2vw, 36px)/1.1 "ManaSeedTitle", ui-monospace, monospace; margin: 0 0 18px; text-align: center;
    color: var(--gold); text-shadow: var(--p) var(--p) 0 var(--kontur); letter-spacing: 1px; overflow-wrap: anywhere;
    margin-bottom: 12px;
  }

  /* Hinweis ueber den Rezepten: leer nimmt er keine Hoehe ein, damit nichts verrutscht */
  .werkbuchkopf { color: #e8b84a; font-size: 11px; text-align: center; }
  .werkbuchkopf:not(:empty) { padding: 2px 0 4px; }
  /* Buehne: Steinfassung, drinnen Pixel-Wiese (Canvas) */
  .buehne {
    position: relative; width: 100%; aspect-ratio: 1; max-width: 100%;
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    padding: 9px; background: #6b6b73;
    box-shadow: inset var(--p) var(--p) 0 #9a9aa2, inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 #45454c;
  }
  #haupt { width: 100%; height: 100%; border: var(--p) solid var(--kontur); transition: transform 90ms steps(2); }
  #haupt.pop { transform: scale(1.04); }
  .posenname, .laden {
    position: absolute; bottom: 18px; padding: 2px 8px 1px; font-size: 13px;
    background: var(--pergament); color: var(--tinte); border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
  }
  .posenname { left: 18px; }
  .laden { right: 18px; opacity: 0; }
  .laden.an { opacity: 1; }

  .richtungen { display: flex; gap: 8px; margin-top: 12px; }
  .richtungen figure { margin: 0; flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; color: var(--perg-dunkel); }
  .richtungen canvas {
    width: 100%; max-width: 100%; aspect-ratio: 1; height: auto; cursor: pointer;
    border: var(--p) solid var(--kontur); outline: var(--p) solid var(--holz-dunkel);
  }
  .richtungen figure.aktiv canvas { outline-color: var(--gold); }
  .richtungen figure.aktiv { color: var(--gold); }
  .richtungen figcaption { margin-top: 5px; text-shadow: 2px 2px 0 var(--kontur); }

  /* Pergament mit Tinte */
  .panel {
    background: var(--pergament); border: var(--p) solid var(--kontur); clip-path: var(--kerbe); padding: 10px 8px;
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .gruppe {
    display: inline-block; margin: 10px 0 4px -2px; padding: 3px 18px 2px 12px; font-size: 13px; letter-spacing: 1px;
    color: var(--gold); background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  }
  .gruppe:first-child { margin-top: 0; }
  .zeile {
    display: grid; grid-template-columns: minmax(0, 118px) 16px minmax(0, 1fr) 16px; align-items: center; gap: 4px;
    padding: 4px 8px; cursor: pointer; user-select: none; border: var(--p) solid transparent;
  }
  .zeile .name { color: var(--tinte-blass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zeile .wert { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinte); }
  .zeile .wert small { color: var(--tinte-blass); margin-left: 6px; font-size: 12px; }
  .zeile .pf { width: 9px; height: 12px; justify-self: center; background: transparent; }
  .zeile .pf[data-d="-1"] { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
  .zeile .pf[data-d="1"]  { clip-path: polygon(0 0, 0 100%, 100% 50%); }
  .zeile.aktiv {
    background: var(--perg-hell); border-color: var(--gold-dunkel); clip-path: var(--kerbe);
    box-shadow: inset 0 calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .zeile.aktiv .name { color: var(--tuch); }
  .zeile.aktiv .pf { background: var(--tuch); }
  .zeile.aus { cursor: default; }
  .zeile.aus .name, .zeile.aus .wert { color: var(--tinte-aus); }
  .zeile.unter .name { padding-left: 14px; }
  .zeile.blink .wert { animation: blink .25s steps(3); }
  @keyframes blink { from { color: var(--tuch); transform: translateX(var(--dx, 0)); } to { transform: none; } }

  .info {
    margin-top: 12px; min-height: 2.5em; font-size: 13px; color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur);
  }
  .tasten { margin-top: 8px; font-size: 13px; color: var(--perg-dunkel); line-height: 2; text-shadow: 2px 2px 0 var(--kontur); }
  kbd {
    display: inline-block; min-width: 22px; padding: 0 5px; text-align: center; font: inherit; text-shadow: none;
    color: var(--perg-hell); background: var(--holz-hell); border: 2px solid var(--kontur);
    box-shadow: inset 2px 2px 0 #c08a50, inset -2px -2px 0 var(--holz-dunkel);
  }
  /* Tastenübersicht: drei Spalten, je Gruppe eine Überschrift */
  /* Vier Spalten und etwas kleiner: die Uebersicht ist auf sieben Gruppen mit 47 Zeilen
     gewachsen (Zeichen im Dorfbuch, Was Gruppen sind) und ragte in drei Spalten heraus. */
  /* An die Fensterhoehe gekoppelt: bei 600 px Hoehe ragte die Uebersicht sonst 118 px
     heraus. Sieben Gruppen mit 47 Zeilen brauchen in einem flachen Fenster kleinere Schrift. */
  .tastenliste { flex: 1 1 auto; min-height: 0; column-count: 4; column-gap: 16px;
    font-size: clamp(8px, 1.45vh, 13px); }
  @media (max-width: 700px) { .tastenliste { column-count: 2; } }
  .tastengruppe { break-inside: avoid; margin: 0 0 7px; }
  .tastengruppe h4 { margin: 0 0 2px; font: inherit; font-size: 1.05em; letter-spacing: 1px; color: var(--tuch); }
  .tastenzeile { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 6px; align-items: baseline; }
  .tastenzeile span { color: var(--tinte-blass); }
  .tastenzeile kbd { min-width: 16px; padding: 0 3px; font-size: .92em; }

  /* Weltenliste auf dem Titelbildschirm: ein Kasten je Welt, wie ein Regalbrett */
  .weltenliste { display: flex; flex-direction: column; gap: 8px; width: min(560px, 100%); margin-bottom: 6px; }
  .leerhinweis { color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur); font-size: 15px; margin-bottom: 4px; }
  .weltzeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
    padding: 8px 12px; background: var(--pergament); color: var(--tinte);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .weltzeile.an { outline: var(--p) solid var(--gold-dunkel); outline-offset: -8px; }
  /* Jede Kachel bekommt ihren festen Platz: sonst raeumt das Raster die Knoepfe nach links
     und draengt den Weltnamen in die auto-Spalte rechts, wo ihn nichts mehr begrenzt. */
  .weltzeile b { grid-column: 1; grid-row: 1; font-weight: normal; font-size: 17px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .weltzeile small { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--tinte-blass);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .weltknoepfe { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  /* Wird es doch einmal zu eng, rutschen die Knoepfe unter den Namen statt ihn zu verdraengen */
  @media (max-width: 560px) {
    .weltzeile { grid-template-columns: minmax(0, 1fr); }
    .weltknoepfe { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  }
  .knopf.klein { font-size: 14px; padding: 6px 12px 5px; }
  /* Holzknoepfe: heller Text statt Gold - Gold auf Holzbraun war kaum zu lesen */
  .knopf.leise { background: var(--holz); color: var(--perg-hell); text-shadow: 2px 2px 0 var(--holz-dunkel);
    box-shadow: inset var(--p) var(--p) 0 var(--holz-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--holz-dunkel); }
  .namefeld { width: min(320px, 80%); margin: 0 auto 12px; display: block; font: inherit; padding: 6px 10px;
    background: var(--perg-hell); color: var(--tinte); border: var(--p) solid var(--kontur); }
  .fokus { color: var(--gold); }
  .fehler { color: #ff9a8a; }

  /* Holzknopf mit rotem Tuch */
  .knopf {
    font: 18px/1 "ManaSeedBody", ui-monospace, monospace; color: var(--gold); cursor: pointer;
    padding: 10px 18px 8px; background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 #b04040, inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--tuch-dunkel);
  }
  .knopf:hover { background: #9c3030; }
  .knopf:active { transform: translateY(2px); }
  .knopf:focus-visible { outline: var(--p) solid var(--gold); outline-offset: 2px; }
  #weiter { display: block; width: 100%; margin-top: 16px; font-size: 20px; }

  /* Bildschirme: Start, Anmeldung, Schmiede, Welt */
  .rahmen:not(.breit) { flex: 0 0 auto; margin-block: auto; }   /* volle Hoehe; zu hoch -> einpassen() verkleinert */
  .rahmen.breit { max-width: none; flex: 1 1 auto; }           /* Titel und Welt: ganzes Fenster */
  body.vollflaeche { padding: 0; }
  body.vollflaeche .rahmen.breit { padding: 10px 12px 12px; }
  .dorfform { display: flex; flex-direction: column; gap: 8px; }
  .dorfform input { font: inherit; color: var(--tinte); background: var(--perg-hell); border: var(--p) solid var(--kontur); padding: 6px 10px; }
  .dorfform input:focus-visible { outline: var(--p) solid var(--gold); }
  .dorfform .knopf { font-size: .85em; }
  .rahmen.breit > .bildschirm:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  /* Karte und Titelbild: groesstes 640:448-Feld, das in den freien Platz passt */
  .titelbild, .kartenfeld { flex: 1 1 auto; min-height: 0; container-type: size; display: grid; place-items: center; }
  .menue { width: min(100cqw - 12px, (100cqh - 12px) * 640 / 448); height: min(100cqh - 12px, (100cqw - 12px) * 448 / 640); }
  .titelbuehne, .karte { width: calc(100cqw - 12px); height: calc(100cqh - 12px); overflow: hidden; }   /* fuellen das Feld */
  .titelbuehne { position: relative; outline: var(--p) solid var(--kontur); box-shadow: 0 0 0 6px #45454c; }
  #titelkarte { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
  .titeltext {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(26,21,18,.62), rgba(26,21,18,.08));
    text-align: center; padding: 16px;
  }
  /* Das steinerne B: haengt an der Feldhoehe, damit Logo, Name und Knoepfe zusammen
     ins 640:448-Feld passen und nichts ueberlappt. */
  .titellogo {
    display: block; width: auto; height: clamp(56px, 30cqh, 196px); min-height: 0; flex: 0 1 auto;
    image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(26,21,18,.7)) drop-shadow(0 0 10px rgba(26,21,18,.5));
  }
  .spielname {
    font: clamp(22px, 5.2vw, 50px)/1 "ManaSeedTitle", ui-monospace, monospace; color: var(--gold);
    text-shadow: 4px 4px 0 var(--kontur), -2px -2px 0 var(--kontur), 2px -2px 0 var(--kontur), -2px 2px 0 var(--kontur);
  }
  .untertitel { font-size: clamp(14px, 2.2vw, 22px); color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur); }
  .titelknoepfe { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
  /* Nur die grossen Knoepfe direkt auf dem Titel ("Neue Welt"), nicht die kleinen in den
     Weltzeilen: drei Knoepfe mit je 240px Mindestbreite passen nicht in eine 560px-Zeile -
     der Weltname wurde dann auf null gequetscht und "Loeschen" ragte rechts heraus. */
  .titelknoepfe > .knopf { min-width: 240px; font-size: 20px; }
  /* Nur die zurueckhaltenden Knoepfe DIREKT auf dem Titelbild ("Zurueck"). Mit dem
     Nachfahren-Selektor traf diese Regel auch "Umbenennen" und "Loeschen" in den
     Weltzeilen - blasser Text auf blassem Pergament, praktisch unlesbar. Schon einmal
     passiert, damals mit .knopf.leise (siehe .knopf.zurueck weiter unten). */
  .titelknoepfe > .leise {
    background: none; border: 0; color: var(--perg-hell); font: 14px "ManaSeedBody", monospace; cursor: pointer;
    text-decoration: underline; text-shadow: 2px 2px 0 var(--kontur); padding: 6px;
  }
  .titelknoepfe > .leise:focus-visible { outline: 2px solid var(--gold); }
  .laedt { color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur); }

  .brief {
    position: relative; max-width: 620px; margin: 10px auto 6px; padding: 26px 26px 22px 26px;
    background: var(--pergament); color: var(--tinte); border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
    font-size: 17px; line-height: 1.5;
  }
  .brief .dname {
    position: absolute; top: 0; left: 14px; padding: 3px 18px 2px 12px; font-size: 13px; letter-spacing: 1px;
    color: var(--gold); background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  }
  .brief p { margin: 10px 0; }
  #anmeldeform { max-width: 760px; margin-top: 0; }
  .formzeile { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: flex-end; }
  .formzeile > div { flex: 1 1 220px; min-width: 0; }
  .biome { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
  .biome legend { padding: 0; margin-bottom: 6px; color: var(--tinte-blass); font-size: 14px; }
  .biomwahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 560px) { .biomwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .biom { position: relative; display: block; margin: 0 !important; cursor: pointer; text-align: center; font-size: 14px; color: var(--tinte) !important; }
  .biom input { position: absolute; opacity: 0; pointer-events: none; }
  .biom canvas { display: block; width: 100%; aspect-ratio: 640 / 448; border: var(--p) solid var(--kontur); image-rendering: auto; }
  .biom input:checked + canvas { outline: var(--p) solid var(--gold); outline-offset: 2px; }
  .biom input:focus-visible + canvas { outline: var(--p) solid var(--tuch); outline-offset: 2px; }
  .biome legend em { font-style: normal; color: var(--tuch); margin-left: 8px; }
  .biom span { display: block; margin-top: 6px; }
  .biom input:checked ~ span { color: var(--tuch); }
  .biomtext { margin-top: 6px; min-height: 1.3em; font-size: 14px; color: var(--tinte-blass); }
  .brief label { display: block; margin: 8px 0 4px; color: var(--tinte-blass); font-size: 14px; }
  .brief label em { font-style: normal; color: var(--tuch); }
  .brief input, .brief select {
    font: 18px "ManaSeedBody", ui-monospace, monospace; color: var(--tinte); background: var(--perg-hell);
    border: var(--p) solid var(--kontur); padding: 6px 10px; border-radius: 0;
  }
  .brief input { width: 100%; max-width: 320px; }
  .brief input:focus-visible, .brief select:focus-visible { outline: var(--p) solid var(--gold); }
  .brief .datum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .brief .knopf { margin-top: 18px; }
  .fehlertext { color: var(--tuch); font-size: 14px; margin-top: 6px; }
  .brief.klein { max-width: 460px; margin: 0; }
  .knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
  .knopfreihe .knopf { margin-top: 6px; font-size: 16px; }
  .knopf.hell { background: var(--holz-hell); color: var(--perg-hell); text-shadow: 2px 2px 0 var(--holz-dunkel);
    box-shadow: inset var(--p) var(--p) 0 #c08a50, inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--holz-dunkel); }
  .fragebild:not([hidden]) { display: grid !important; place-items: center; padding: 16px 0; }

  /* Welt: Kopfleiste (Uhr, Meldung, Ort) - Karte ODER ein Menue - darunter nur das Gespraech.
     Nichts liegt ueber etwas anderem; Hinweise haengen als Schild ueber der Figur. */
  #reise { gap: 8px; }
  .kopfleiste { flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; min-height: 42px; }
  .tafel, .menue, .dialog {
    background: var(--pergament); color: var(--tinte); border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .tafel { display: flex; align-items: center; gap: 10px; padding: 4px 12px 3px; white-space: nowrap; }
  .uhr canvas { width: 60px; height: 26px; border: 2px solid var(--kontur); image-rendering: pixelated; }
  .uhr .datumzeile { font-size: 13px; color: var(--tinte-blass); }
  .ortname { margin-left: auto; font-size: 14px; color: var(--tinte-blass); }
  /* Das Band hat immer denselben Platz - sonst misst sich die Karte bei jeder Meldung neu */
  .meldung {
    flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; justify-content: center; text-align: center;
    padding: 4px 14px 3px; font-size: 15px; color: var(--gold); background: var(--tuch);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    height: 42px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .meldung[hidden] { visibility: hidden; }
  .meldung + .ortname { margin-left: 0; }
  .schild.hinweis { color: var(--tinte); }
  .schild.hinweis kbd { margin: 0 5px 0 0; }
  .schild.fokusschild { left: 50%; top: 100%; transform: translate(-50%, -140%); color: var(--tinte-blass); }
  .karte { position: relative; display: grid; place-items: center;
    outline: var(--p) solid var(--kontur); box-shadow: 0 0 0 6px #45454c; background: #000; }
  #welt { display: block; }                                  /* Größe setzt kameraAnpassen: ganzzahliger Zoom */

  /* Menues im Kartenfeld: Pergament in Kartengroesse, Schrift waechst mit */
  .menue { position: relative; display: flex; flex-direction: column; padding: 30px 18px 10px; overflow: hidden;
    font-size: clamp(11px, 3.1cqh, 17px); }
  .menue .dname, .dialog .dname, .brief .dname {
    position: absolute; top: 0; left: 14px; padding: 3px 18px 2px 12px; font-size: 13px; letter-spacing: 1px;
    color: var(--gold); background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  }
  /* Im Fließtext genügt die Farbe; ein Fettdruck würde die Pixelschrift nur unruhig machen. */
  .n-pc { color: var(--name-pc); }
  .n-npc { color: var(--name-npc); }
  /* Im Namensschild des Sprechers steht die Schrift auf dunklem Tuch - dort braucht es
     hellere Töne, sonst verschwindet sie. */
  .dialog .dname.n-pc { color: #ffb0a0; }
  .dialog .dname.n-npc { color: #a8c8f0; }
  .menuefuss { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .8em; color: var(--tinte-blass); }
  .raster { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px;
    grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .fach { position: relative; min-height: 0; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); }
  .fach canvas { width: 100%; height: 100%; object-fit: contain; }
  .fach .anzahl { position: absolute; right: 4px; bottom: 2px; color: var(--tinte); text-shadow: 1px 1px 0 var(--perg-hell); }
  .fach { cursor: pointer; }
  .fach.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; background: var(--pergament); }
  .rezepte { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  /* ---- Fertigkeitsnetz (Indie, 15.10.: "wie in Anno 117") ----------------
     Zweige sind Straenge, Stufen sind Knoten, dazwischen Linien. Durchgezogen, wo der Weg
     offen ist; gepunktet, wo er gesperrt ist. Kein frei liegendes Netz: die UI-Regel sagt,
     nichts darf ueberlappen, und ein Kraeftegraph kann das nicht zusichern. */
  .skillleute { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
  .sperson { display: flex; align-items: center; gap: 4px; padding: 1px 6px; cursor: pointer;
    border: 2px solid var(--perg-dunkel); background: var(--perg-hell); font-size: .74em; }
  .sperson.an { border-color: var(--gold-dunkel); background: var(--pergament); }
  .sperson b { font-weight: normal; }
  .sperson .frei { color: #3c7a2a; }
  .sperson .plant { color: var(--tuch); }
  .szweig { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .szweig h3 { margin: 0 0 2px; font: inherit; font-size: .74em; letter-spacing: 1px; color: var(--tuch); }
  /* Gross genug, dass das Netz den Bildschirm fuellt: mit 26px blieben zwei Drittel leer,
     weil die alten Textkaesten wegfielen. Jetzt traegt jeder Knoten seinen Namen. */
  .sknoten { position: relative; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    border: 3px solid var(--perg-dunkel); background: var(--perg-hell);
    display: flex; align-items: center; justify-content: center; }
  .sknoten canvas { width: 32px; height: 32px; image-rendering: pixelated; }
  .sname { font-size: .68em; text-align: center; max-width: 9em; line-height: 1.15;
    margin: 1px 0 0; color: var(--tinte-blass); }
  .sknoten.hat + .sname, .szweig .sname.hat { color: var(--tinte); }
  .sknoten.hat { background: var(--gold); border-color: var(--gold-dunkel); }
  .sknoten.offen { background: var(--perg-hell); border-color: #3c7a2a; }
  .sknoten.zu { background: #6a6258; border-color: #4a443c; }
  .sknoten.an { outline: 2px solid var(--gold-dunkel); outline-offset: 2px; }
  .sknoten .srang { position: absolute; right: -4px; bottom: -4px; font-size: .66em;
    background: var(--pergament); border: 2px solid var(--perg-dunkel); border-radius: 50%;
    width: 15px; height: 15px; line-height: 13px; text-align: center; }
  .sknoten.ziel { box-shadow: 0 0 0 2px var(--tuch); }
  .slinie { width: 4px; height: 30px; background: var(--perg-dunkel); margin: 2px 0; }
  .slinie.zu { background: none; border-left: 4px dotted var(--perg-dunkel); width: 0; }
  .skillinfo { min-height: 2.1em; font-size: .76em; color: var(--tinte); margin-top: 2px; }
  .skillinfo b { font-weight: normal; color: var(--tuch); }
  .rezept { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-content: center; min-height: 0;
    overflow: hidden; padding: 2px 10px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .rezept canvas { grid-row: 1 / span 3; align-self: center; width: 2.6em; height: 2.6em; }
  .rezept b { font-weight: normal; }
  .rezept small { grid-column: 2 / span 2; font-size: .74em; color: var(--tinte-blass); line-height: 1.25; }
  .rezept small .fehlt { color: var(--tuch); }
  /* "fehlt noch" stand in --tinte-aus (#b09a70) auf --perg-hell (#f6ead0): Kontrast 2,28,
     unter der WCAG-Schwelle 3,0, die der Fall "design" prueft. Aufgefallen am 15.10., als
     die umverteilten Rezepte den Hinweis haeufiger zeigten - der Fehler war aber schon
     vorher da. Nur hier geaendert: --tinte-aus steht anderswo auf dunklerem Grund. */
  .rezept em { grid-column: 3; grid-row: 1; font-style: normal; font-size: .72em; color: #877043; }
  .rezept.geht em { color: #3c7a2a; }
  .rezept.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .tagebuchspalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; }
  .menue h2 { margin: 0 0 4px; font: inherit; font-size: .8em; letter-spacing: 1px; color: var(--tuch); }
  .meilensteine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .nachbar { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 2px 0; border-bottom: 2px solid var(--perg-dunkel); }
  .nachbar small { grid-column: 1; color: var(--tinte-blass); font-size: .72em; }
  .nachbar .herzen { grid-row: 1 / span 2; grid-column: 2; align-self: center; display: flex; gap: 2px; }
  .herzen i { width: 9px; height: 8px; background: var(--perg-dunkel);
    clip-path: polygon(0 25%, 25% 0, 50% 25%, 75% 0, 100% 25%, 100% 50%, 50% 100%, 0 50%); }
  .herzen i.an { background: #c83c50; }
  /* Meilensteine als Baum: je Kette eine Reihe, Stufen mit Strich verbunden */
  /* Die Ketten duerfen enger stehen und schrumpfen, wenn es viele werden - sonst scrollt
     die Tafel, sobald ein Meilenstein dazukommt. */
  .meilenbaum { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px;
    overflow: hidden; font-size: .94em; }
  .meilenbaum .mkette { flex: 0 1 auto; min-height: 0; }
  /* Chronik: ein Block je Abschnitt, die Nacht dunkler abgesetzt */
  .chronikblock { padding: 4px 8px; background: var(--perg-hell); border-left: var(--p) solid var(--perg-dunkel);
    display: flex; flex-direction: column; gap: 1px; }
  .chronikblock.nacht { border-left-color: var(--tuch); background: #e2cfa0; }
  .chronikblock b { font-weight: normal; font-size: .82em; color: var(--tuch); letter-spacing: 1px; }
  .chronikblock span { font-size: .72em; color: var(--tinte-blass); }
  .steuermehr { margin: 10px 0 0; font-size: .8em; color: var(--tinte-blass); }
  .mkette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
  .mstein { position: relative; display: flex; flex-direction: column; justify-content: center; margin-right: 14px;
    padding: 3px 9px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); color: var(--tinte-blass); }
  .mstein + .mstein::before { content: ""; position: absolute; left: -16px; top: 50%; width: 14px; height: 3px; background: var(--perg-dunkel); }
  .mstein b { font-weight: normal; font-size: .82em; }
  .mstein small { font-size: .66em; }
  .mstein.erreicht { color: var(--tinte); background: var(--pergament); border-color: var(--gold-dunkel); }
  .mstein.erreicht b::before { content: "✓ "; color: #3c7a2a; }
  .mstein.erreicht + .mstein::before { background: var(--gold-dunkel); }
  .mstein.offen { color: var(--tinte); border-color: var(--tuch); }

  /* Dorfbuch: Werte oben, links die Bewohner mit ihrer Aufgabe, rechts der Bericht des Morgens */
  .dorfwerte { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 8px; }
  .dwert { display: flex; flex-direction: column; min-width: 4.5em; font-size: .72em; color: var(--tinte-blass); }
  .dwert b { font-weight: normal; font-size: 1.5em; color: var(--tuch); }
  .dorfspalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
  .dorfleute { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
  /* Erste Spalte ist der Kopf, feste Breite - sonst wandert die Textspalte je Zeile.
     Einzeilig und flach, damit zehn Bewohner untereinander ins Feld passen: vorher stand
     die Aufgabe unter dem Namen, das kostete je Zeile eine zweite Textzeile - bei sechs
     Namen war das Feld voll. */
  /* Der Name bekommt seine natuerliche Breite, die Statuszeile den Rest und weicht zuerst:
     vorher war es umgekehrt (1fr fuer den Namen, auto fuer die Zeile), und eine lange
     Statuszeile drueckte den Namen auf 20 Pixel zusammen - gemessen am 14.10. */
  .dleute { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto;
    align-items: center; gap: 0 8px;
    padding: 1px 8px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .dkopf { grid-column: 1; grid-row: 1; width: 20px; height: 20px; image-rendering: pixelated;
    align-self: center; }
  .dkopf.leer { display: block; }
  .dleute b { grid-column: 2; grid-row: 1; font-weight: normal;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dleute small { grid-column: 3; grid-row: 1; font-size: .7em; color: var(--tinte-blass);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
  .dleute em { grid-column: 4; grid-row: 1; font-style: normal; font-size: .8em; color: var(--tuch); }
  .dleute.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  /* Wo jemand steckt: draußen hell, daheim gedämpft - auf einen Blick unterscheidbar */
  .dleute .dort { color: var(--tuch); }
  .dleute.wund b::after { content: " ✚"; color: var(--tuch); }
  /* Die eine Warnung, die über Leben und Tod des Dorfes entscheidet */
  .dwarnung { flex: 0 0 auto; margin-bottom: 6px; padding: 4px 10px; font-size: .78em; color: var(--perg-hell);
    background: var(--tuch); border: 2px solid var(--tuch-dunkel); text-shadow: 2px 2px 0 var(--tuch-dunkel); }
  .dorfbericht { font-size: .78em; line-height: 1.45; color: var(--tinte); overflow: hidden; }
  .dorfbericht div { padding: 2px 0; border-bottom: 2px solid var(--perg-dunkel); }

  /* Truhe und andere Ablagen: links was drinliegt, rechts die Taschen - man sieht
     beide Seiten und legt mit Enter hin und her (wie in Minecraft). */
  .ablagespalten { flex: 1 1 auto; min-height: 0; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .ablagespalten > div { display: flex; flex-direction: column; min-height: 0; gap: 4px; }
  .ablageraster { grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .fach.leer { opacity: .5; }

  /* Lager: oben die vier Vorräte, darunter was aus den Taschen hineinpasst */
  .lagerwerte { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 10px; }
  .lagerliste { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .lagerzeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 10px; padding: .35em .7em; background: var(--perg-hell);
    border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .lagerzeile canvas { width: 2em; height: 2em; }
  .lagerzeile b { font-weight: normal; }
  .lagerzeile small { grid-column: 2 / -1; font-size: .7em; color: var(--tinte-blass); }
  .lagerzeile em { font-style: normal; font-size: .8em; color: var(--tuch); }
  .lagerzeile.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .lagerleer { grid-column: 1 / -1; font-size: .8em; color: var(--tinte-blass); }

  .einstellungsliste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
  /* Auf dem Titelbild steht der Kasten fuer sich, nicht im Kartenfeld */
  .menue.imtitel { width: min(420px, 86%); max-height: 82%; font-size: 13px; padding: 26px 16px 12px; }
  .einstellkopf { margin: 8px 0 2px; font-size: .82em; letter-spacing: 1px; text-transform: uppercase;
    color: var(--tinte-blass); font-weight: normal; }
  .einstellkopf:first-child { margin-top: 0; }

  .wozu { display: block; margin-top: 2px; font-size: .78em; color: var(--tinte-blass); }

  .knopfreihe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  /* Nur die Rueckwege in Anmeldung, Schmiede und Einstellungen sind zurueckhaltend.
     Vorher stand hier .knopf.leise - das traf auch "Umbenennen" und "Loeschen" in der
     Weltenliste und machte deren Schrift blass auf blassem Grund. */
  .knopf.zurueck { background: transparent; color: var(--tinte-blass); box-shadow: none; }

  /* Auftragsbuch */
  .questliste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
  .quest { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 4px 10px;
    background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .quest b { font-weight: normal; }
  .quest .qart { font-style: normal; font-size: .68em; color: var(--tinte-blass);
    border: 2px solid var(--perg-dunkel); padding: 0 4px; margin-left: 6px; }
  .quest small { grid-column: 1; grid-row: 2; font-size: .72em; color: var(--tinte-blass); }
  .quest em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: .78em; color: var(--tinte-blass); }
  .quest.geht em { color: #3c7a2a; }
  .quest.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .qleer { font-size: .8em; color: var(--tinte-blass); }

  /* Faehigkeiten: die Zweige nebeneinander, vier Stufen untereinander. Die Spaltenzahl
     setzt skillsZeigen(), denn mit einem Haustier kommt ein vierter Zweig dazu - bei drei
     festen Spalten rutschte der vierte in eine zweite Reihe und war halb abgeschnitten. */
  .skillklassen { flex: 0 0 auto; font-size: .72em; color: var(--tinte-blass); padding-bottom: 8px; }
  .skillfeld { flex: 1 1 auto; min-height: 0; display: grid;
    grid-template-columns: repeat(var(--zweige, 3), minmax(0, 1fr)); gap: 12px; }
  .szweig { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .szweig h3 { margin: 0; font: inherit; font-size: .8em; letter-spacing: 1px; color: var(--tuch); }
  .sfeld { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 4px 10px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; opacity: .55; }
  .sfeld b { font-weight: normal; }
  .sfeld small { font-size: .68em; color: var(--tinte-blass); }
  .sfeld.offen { opacity: 1; }
  .sfeld.hat { opacity: 1; background: var(--pergament); border-color: var(--gold-dunkel); }
  .sfeld.hat b::before { content: "✓ "; color: #3c7a2a; }
  .sfeld.an { outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  /* Verschlossen: die letzte Stufe, zu der dem Dorf die Erkenntnis fehlt. Sie bleibt
     sichtbar - man soll wissen, dass es sie gibt - aber der Rahmen ist gestrichelt.
     Der Grund bleibt hell: auf var(--perg-dunkel) kam die blasse Tinte nur auf Kontrast
     2,8 und der Designtest schlug zu Recht an. */
  .sfeld.zu { opacity: 1; background: var(--pergament); border-style: dashed; border-color: var(--tinte-aus); }
  .sfeld.zu b { color: var(--tinte); }
  .sfeld.zu b::before { content: "· "; color: var(--tuch); }
  .sfeld.zu small { color: var(--tinte-blass); }

  /* Dorfkarte: die Parzellen der Karte, daneben wem was gehoert */
  .kartefeld { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .kartefeld canvas { width: 100%; height: auto; image-rendering: pixelated; border: var(--p) solid var(--kontur); }
  .kartelegende div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 3px 0; }
  .kartelegende i { width: 12px; height: 12px; border: 2px solid var(--kontur); }
  .kartelegende b { font-weight: normal; }
  .kartelegende small { grid-column: 2; font-size: .7em; color: var(--tinte-blass); }

  /* Kampf: Gruppe links, Bild in der Mitte, Monster rechts; darunter Befehle und Verlauf */
  /* Die Buehne oben ueber die ganze Breite, darunter Gruppe und Horde nebeneinander */
  .kampffeld { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .kampffeld canvas { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 24 / 10; height: auto;
    max-height: 46cqh; margin: 0 auto; image-rendering: pixelated; border: 2px solid var(--kontur); }
  .kseite { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
  .kseite h3 { margin: 0; font: inherit; font-size: .76em; letter-spacing: 1px; color: var(--tuch); }
  .kzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 3px 8px;
    background: var(--perg-hell); border: 2px solid var(--perg-dunkel); }
  .kzeile b { font-weight: normal; }
  .kzeile small { grid-column: 1; grid-row: 2; font-size: .68em; color: var(--tinte-blass); }
  .kzeile em { grid-column: 2; grid-row: 1; font-style: normal; font-size: .8em; }
  .kzeile .balken { grid-column: 1 / span 2; grid-row: 3; height: 6px; background: var(--perg-dunkel); }
  .kzeile .balken i { display: block; height: 100%; background: #3c7a2a; }
  .kzeile .balken.feind i { background: var(--tuch); }
  .kzeile.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .kzeile.ziel { border-color: var(--tuch); outline: 2px solid var(--tuch); outline-offset: -4px; }
  .kzeile.aus { opacity: .45; }
  .kampfunten { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; padding-top: 8px; }
  .kbefehle { display: flex; gap: 6px; }
  .kbefehl { flex: 1 1 0; padding: 3px 8px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .kbefehl b { display: block; font-weight: normal; }
  .kbefehl small { font-size: .66em; color: var(--tinte-blass); }
  .kbefehl.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .kbefehl.alle { flex: 0 0 auto; background: var(--pergament); border-color: var(--tuch); }
  .kbefehl.alle b { color: var(--tuch); }
  .klog { font-size: .78em; line-height: 1.45; color: var(--tinte-blass); align-self: end; }

  /* Namensschilder gehoeren zur Karte (wie die Figuren selbst) */
  .schild {
    position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
    padding: 1px 7px; font-size: 13px; background: var(--pergament); color: var(--tinte);
    border: 2px solid var(--kontur); clip-path: var(--kerbe);
  }
  .schild kbd { margin-left: 5px; min-width: 16px; padding: 0 3px; font-size: 11px; box-shadow: none; }

  /* Unterfeld: nur fuer das Gespraech; ohne Gespraech gehoert der Platz der Karte */
  .unterfeld { flex: 0 0 auto; display: flex; flex-direction: column; }
  .unterfeld > :not([hidden]) { flex: 1 1 auto; height: 132px; min-height: 0; }
  .menueknopf { font: inherit; font-size: 14px; cursor: pointer; }
  .menueknopf:focus-visible { outline: var(--p) solid var(--gold); }
  .menueknopf kbd { font-size: 11px; box-shadow: none; }
  .bauliste { display: flex; flex-direction: column; gap: 8px; }
  .baustoff { display: grid; grid-template-columns: auto minmax(0, 8em) minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px;
  /* Ein Balken fuer das gesamte Baumaterial - darueber, was man dabeihat */
  .baufortschritt { display: flex; align-items: center; gap: 10px; padding: 4px 10px; margin-bottom: 6px;
    background: var(--perg-hell); border: 2px solid var(--gold-dunkel); }
  .baufortschritt b { font-weight: normal; font-size: .9em; }
  .baufortschritt > span:last-child { margin-left: auto; font-size: .9em; }
    align-items: center; padding: .4em .7em; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .baustoff canvas { grid-row: 1 / span 2; width: 2.4em; height: 2.4em; }
  .baustoff b { font-weight: normal; }
  .baustoff small { grid-column: 2 / -1; font-size: .72em; color: var(--tinte-blass); }
  .baustoff.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .fortschritt { display: flex; gap: 3px; }
  .fortschritt i { flex: 1 1 0; max-width: 1.6em; height: .8em; background: var(--perg-dunkel); }
  .fortschritt i.an { background: #6a8a3a; }
  .bautext { margin: 10px 0 0; font-size: .8em; color: var(--tinte-blass); }
  .kurse { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .kurs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 8px;
    padding: .35em .6em; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; color: var(--tinte-aus); }
  .kurs.geht { color: var(--tinte); }
  .kurs.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .kurs .seite { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .kurs .seite b { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kurs canvas { width: 2em; height: 2em; flex: 0 0 auto; }
  .kurs .pfeil { color: var(--tuch); }
  .kurs small { grid-column: 1 / -1; font-size: .7em; color: var(--tinte-blass); }
  .reisespalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
  #sternkarte { width: 100%; height: 100%; min-height: 0; object-fit: contain; border: 2px solid var(--kontur); cursor: pointer; }
  .reiseseite { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 0; }
  .reiseinfo { display: grid; grid-template-columns: auto 1fr; gap: .3em 10px; margin: 0; font-size: .8em; }
  .reiseinfo dt { color: var(--tuch); } .reiseinfo dd { margin: 0; }
  #reiseknopf { font-size: .9em; }
  #reiseknopf:disabled { opacity: .45; cursor: default; }
  .menuespalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
  /* Zweispaltig, sobald es viele Punkte werden: mit "Bauprojekte" lief die einspaltige
     Liste 27 px über den Rahmen hinaus, und im Spiel scrollt nichts (UI-Regel). Die Spalten
     füllen sich von oben nach unten, damit die Reihenfolge lesbar bleibt. */
  .menueliste { display: grid; grid-auto-flow: column; gap: 6px 14px;
                grid-template-rows: repeat(8, auto); align-content: start; }
  .menuepunkt { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left;
    font: inherit; color: var(--tinte); cursor: pointer; padding: .3em .7em; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); }
  /* Fuenfzehn Punkte passen nur eng: vorher ragte die Spalte 16 px heraus */
  .menuepunkt { padding-block: 5px; font-size: .92em; }
  .menuepunkt.an, .menuepunkt:hover { color: var(--tuch); border-color: var(--gold-dunkel); }
  .menuepunkt.an > span:first-child::before { content: "▸ "; }
  .menuepunkt > span:first-child { white-space: nowrap; }
  .menuepunkt:focus-visible { outline: 2px solid var(--gold); }
  .menuepunkt kbd { font-size: .75em; box-shadow: none; }
  .regler { display: flex; align-items: center; gap: 2px; }
  .regler i { width: .5em; height: .9em; background: var(--perg-dunkel); }
  .regler i.an { background: var(--tuch); }
  .regler small { min-width: 3.2em; margin-left: 6px; text-align: right; font-size: .8em; color: var(--tinte-blass); }
  /* Enger gesetzt: die Liste kommt jetzt aus TASTENHILFE und ist auf zwoelf Zeilen
     gewachsen - mit den alten Abstaenden ragte das Menue 16 px aus dem Rahmen. */
  .steuerung dl { display: grid; grid-template-columns: auto 1fr; gap: .2em 10px; margin: 0; font-size: .74em; }
  .steuerung dt { white-space: nowrap; } .steuerung dd { margin: 0; color: var(--tinte-blass); }
  .steuerung kbd { font-size: .8em; box-shadow: none; min-width: 0; }
  .tastenreihe { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinte-blass); }
  .dialog { position: relative; overflow: hidden; padding: 24px 20px 10px; font-size: 16px; line-height: 1.4; }
  .dialog .wahl { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
  .dialog .wahl div { padding: 1px 8px; border: 2px solid var(--perg-dunkel); }
  .dialog .wahl div.an { background: var(--perg-hell); color: var(--tuch); border-color: var(--gold-dunkel); }
  .dialog .wahl div.an::before { content: "▸ "; }
  .dialog .dweiter { position: absolute; right: 16px; bottom: 6px; font-size: 12px; color: var(--tinte-blass); }
  .dialog .dweiter.an { animation: nicken 1s steps(2) infinite; }
  @keyframes nicken { 50% { transform: translateY(3px); } }
  @media (prefers-reduced-motion: reduce) { #haupt, .zeile.blink .wert { transition: none; animation: none; } }
  /* Der kleine Balken je Baustoff im Hausbaumenue */
  .fortschritt.klein { display: flex; gap: 1px; margin: 2px 0; }
  .fortschritt.klein i { width: 4px; height: 4px; background: var(--perg-dunkel); }
  .fortschritt.klein i.an { background: var(--gold-dunkel); }
  .baugruppe { font-size: 7px; letter-spacing: .5px; color: #8a7a5a; margin: 7px 0 2px 2px;
    text-transform: uppercase; }
  .baugruppe:first-child { margin-top: 0; }
  .baubalken { height: 4px; background: #2a2018; border: 1px solid #4a3a28; margin-top: 3px; }
  .baubalken i { display: block; height: 100%; background: #b08840; }
  .quest.geht .baubalken i { background: #7fb05a; }
</style>


<div class="rahmen breit" id="rahmen">
<h1 id="titel" data-t="Bedrock Society">Bedrock Society</h1>

<!-- Titelbild -->
<section id="start" class="bildschirm">
  <div class="titelbild"><div class="titelbuehne">
    <canvas id="titelkarte" width="640" height="448"></canvas>
    <div class="titeltext">
      <img class="titellogo" src="atlas/logo.png" alt="Bedrock Society" width="157" height="215">
      <div class="spielname" data-t="Bedrock Society">Bedrock Society</div>
      <div class="untertitel" data-t="Das Leben am Waldrand">Das Leben am Waldrand</div>
      <div class="titelknoepfe" id="titelknoepfe">
        <span class="laedt" id="startlaedt" data-t="Die Lichtung erwacht …">Die Lichtung erwacht …</span>
      </div>
    </div>
  </div></div>
</section>

<!-- Anmeldung: Name (Pflicht), Geburtstag, Biom -->
<section id="anmeldung" class="bildschirm" hidden>
  <form class="brief" id="anmeldeform" novalidate>
    <div class="dname" data-t="Ein neuer Anfang">Ein neuer Anfang</div>
    <p data-t="Irgendwo wartet eine Welt auf dich – noch ganz ohne Häuser. Wie heißt du?">Irgendwo wartet eine Welt auf dich – noch ganz ohne Häuser. Wie heißt du?</p>
    <div class="formzeile">
      <div>
        <label for="spielername"><span data-t="Dein Name">Dein Name</span> <em data-t="(Pflicht)">(Pflicht)</em></label>
        <input id="spielername" name="spielername" maxlength="16" autocomplete="off" spellcheck="false" required>
      </div>
      <div>
        <label for="gebtag" data-t="Geburtstag">Geburtstag</label>
        <div class="datum">
          <select id="gebtag" name="gebtag" aria-label="Tag"></select>
          <select id="gebmonat" name="gebmonat" aria-label="Monat"></select>
        </div>
      </div>
      <div>
        <label for="sprachwahl" data-t="Sprache">Sprache</label>
        <select id="sprachwahl" name="sprachwahl" aria-label="Sprache"></select>
      </div>
    </div>
    <div class="fehlertext" id="namefehler" hidden></div>
    <fieldset class="biome">
      <legend><span data-t="Wo möchtest du leben?">Wo möchtest du leben?</span> <em id="weltlos"></em></legend>
      <div class="biomwahl" id="biomwahl"></div>
      <div class="biomtext" id="biomtext"></div>
    </fieldset>
    <div class="knopfreihe">
      <button class="knopf zurueck" type="button" id="anmeldungZurueck" hidden data-t="◂ Zurück">◂ Zurück</button>
      <button class="knopf" type="submit" data-t="Weiter zur Figurenschmiede ▸">Weiter zur Figurenschmiede ▸</button>
    </div>
  </form>
</section>

<main id="schmiede" class="bildschirm" hidden>
  <section class="vorschau">
    <div class="buehne" id="buehne">
      <canvas id="haupt" width="384" height="384"></canvas>
      <span class="posenname" id="posenname"></span>
      <span class="laden" id="laden" data-t="lädt …">lädt …</span>
    </div>
    <div class="richtungen" id="richtungen"></div>
    <div class="knopfreihe">
      <button class="knopf zurueck" id="schmiedeZurueck" type="button" data-t="◂ Zurück">◂ Zurück</button>
      <button class="knopf" id="weiter" type="button" data-t="So soll es sein ▸">So soll es sein ▸</button>
    </div>
  </section>

  <section>
    <div class="panel" id="liste"></div>
    <div class="info" id="info"></div>
    <div class="tasten">
      <kbd>↑</kbd><kbd>↓</kbd> <span data-t="Eigenschaft">Eigenschaft</span>&nbsp; <kbd>←</kbd><kbd>→</kbd> <span data-t="Auswahl">Auswahl</span><br>
      <kbd>Z</kbd> <span data-t="Zufall">Zufall</span>&nbsp; <kbd>0</kbd> <span data-t="zurücksetzen">zurücksetzen</span>&nbsp; <kbd>Enter</kbd> <span data-t="weiter">weiter</span>
      <div class="fokus" id="fokus" hidden data-t="Einmal in die Seite klicken, dann reagieren die Pfeiltasten.">Einmal in die Seite klicken, dann reagieren die Pfeiltasten.</div>
    </div>
  </section>
</main>
<section id="reise" class="bildschirm" hidden>
  <div class="kopfleiste">
    <div class="tafel uhr" id="uhr"><canvas id="himmel" width="60" height="26"></canvas><span class="datumzeile" id="uhrdatum"></span></div>
    <div class="meldung" id="meldung" hidden></div>
    <div class="tafel ortname" id="ortname"></div>
    <button class="tafel menueknopf" id="menueknopf" type="button"><span data-t="Menü">Menü</span> <kbd>Esc</kbd></button>
  </div>
  <div class="kartenfeld">
    <div class="karte" id="karte">
      <canvas id="welt" width="640" height="448"></canvas>
      <div class="schild hinweis" id="hinweisschild" hidden></div>
      <div class="schild fokusschild" id="weltfokus" hidden data-t="Einmal in die Karte klicken">Einmal in die Karte klicken</div>
    </div>
    <div class="menue" id="dorfbuch" hidden>
      <div class="dname" data-t="Dorfbuch">Dorfbuch</div>
      <div class="dorfwerte" id="dorfwerte"></div>
      <div class="dwarnung" id="dorfwarnung" hidden></div>
      <div class="dorfspalten">
        <div class="dorfleute" id="dorfleute"></div>
        <div class="dorfbericht" id="dorfbericht"></div>
      </div>
      <div class="menuefuss"><span id="dorffuss"></span></div>
    </div>
    <div class="menue" id="quests" hidden>
      <div class="dname" data-t="Aufträge">Aufträge</div>
      <div class="questliste" id="questliste"></div>
      <div class="menuefuss"><span id="questfuss"></span></div>
    </div>
    <!-- Achtung: NICHT "bauliste" nennen - diese id hat das Bauplatz-Menue (weiter unten)
         schon fuer seine Baustoffliste. Zwei gleiche ids, und getElementById nimmt die
         erste: das Bauplatz-Menue schrieb seine Stoffe hierher und blieb selbst leer. -->
    <div class="menue" id="bauprojekte" hidden>
      <div class="dname" data-t="Bauprojekte">Bauprojekte</div>
      <div class="questliste" id="bauprojekteinhalt"></div>
      <div class="menuefuss"><span id="bauprojektefuss"></span></div>
    </div>
    <div class="menue" id="skills" hidden>
      <div class="dname" id="skillkopf" data-t="Fähigkeiten">Fähigkeiten</div>
      <!-- Bewohnerleiste: alle auf einmal, statt jede Person einzeln zu oeffnen (15.10.) -->
      <div class="skillleute" id="skillleute"></div>
      <div class="skillklassen" id="skillklassen"></div>
      <div class="skillfeld" id="skillfeld"></div>
      <!-- Was der gewaehlte Knoten kann - im Netz steht nur das Symbol -->
      <div class="skillinfo" id="skillinfo"></div>
      <div class="menuefuss"><span id="skillfuss"></span></div>
    </div>
    <div class="menue" id="dorfkarte" hidden>
      <div class="dname" data-t="Dorfkarte">Dorfkarte</div>
      <div class="kartefeld">
        <canvas id="kartebild" width="320" height="224"></canvas>
        <div class="kartelegende" id="kartelegende"></div>
      </div>
      <div class="menuefuss"><span id="kartefuss"></span></div>
    </div>
    <div class="menue" id="kampf" hidden>
      <div class="dname" id="kampfkopf" data-t="Kampf">Kampf</div>
      <div class="kampffeld">
        <canvas id="kampfbild" width="640" height="266"></canvas>
        <div class="kseite" id="kampfgruppe"></div>
        <div class="kseite" id="kampffeinde"></div>
      </div>
      <div class="kampfunten">
        <div class="kbefehle" id="kampfbefehle"></div>
        <div class="klog" id="kampflog"></div>
      </div>
      <div class="menuefuss"><span id="kampffuss"></span></div>
    </div>
    <div class="menue" id="taschen" hidden>
      <div class="dname" data-t="Taschen">Taschen</div>
      <div class="raster" id="taschenraster"></div>
      <div class="menuefuss"><span id="taschenwahl"></span><span id="taschenfrei"></span><span><kbd>I</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="ablage" hidden>
      <div class="dname" id="ablagename">Truhe</div>
      <div class="ablagespalten">
        <div><h2 id="ablagetitel"></h2><div class="raster ablageraster" id="ablageraster"></div></div>
        <div><h2 data-t="Deine Taschen">Deine Taschen</h2><div class="raster ablageraster" id="ablagetaschen"></div></div>
      </div>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> <span data-t="wählen">wählen</span> · <kbd>Enter</kbd> <span data-t="umlegen">umlegen</span></span><span id="ablagefuss"></span><span><kbd>Esc</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="lager" hidden>
      <div class="dname" data-t="Lager">Lager</div>
      <div class="lagerwerte" id="lagerwerte"></div>
      <div class="lagerliste" id="lagerliste"></div>
      <div class="menuefuss"><span id="lagerfuss"></span><span><kbd>G</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="werkbuch" hidden>
      <div class="dname" data-t="Werkbuch">Werkbuch</div>
      <!-- Steht nur da, wenn das Werkbuch an einem Tisch geoeffnet wurde (welt.js: amTisch) -->
      <div class="werkbuchkopf" id="werkbuchkopf"></div>
      <div class="rezepte" id="rezepte"></div>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="oder Klick wählen">oder Klick wählen</span> · <kbd>Enter</kbd> <span data-t="herstellen">herstellen</span></span><span id="werkbuchseite"></span><span><kbd>H</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="einstellungen" hidden>
      <div class="dname" data-t="Einstellungen">Einstellungen</div>
      <div class="einstellungsliste" id="einstellungsliste"></div>
    </div>
    <div class="menue" id="spielmenue" hidden>
      <div class="dname" data-t="Menü">Menü</div>
      <div class="menuespalten">
        <div class="menueliste" id="menueliste"></div>
        <div class="steuerung">
          <h2 data-t="Unterwegs">Unterwegs</h2>
          <!-- Wird aus TASTENHILFE erzeugt (welt.js): eine Quelle statt zweier, die
               auseinanderlaufen. Die vollständige Übersicht steht weiter unter ?. -->
          <dl id="steuerkurz"></dl>
          <p class="steuermehr"><kbd>?</kbd> <span data-t="alle Tasten">alle Tasten</span></p>
        </div>
      </div>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="wählen">wählen</span> · <kbd>←</kbd><kbd>→</kbd> <span data-t="Lautstärke">Lautstärke</span> · <kbd>Enter</kbd> <span data-t="los">los</span></span><span><kbd>Esc</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="bauplatz" hidden>
      <div class="dname" id="baukopf" data-t="Bauplatz">Bauplatz</div>
      <div class="bauliste" id="bauliste"></div>
      <p class="bautext" id="bautext"></p>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="oder Klick wählen">oder Klick wählen</span> · <kbd>Enter</kbd> <span data-t="abgeben">abgeben</span></span><span><kbd>Esc</kbd> <span data-t="fertig">fertig</span></span></div>
    </div>
    <div class="menue" id="handel" hidden>
      <div class="dname" id="handelkopf" data-t="Tauschen">Tauschen</div>
      <div class="kurse" id="handelliste"></div>
      <div class="menuefuss"><span id="handelfuss"></span><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="oder Klick wählen">oder Klick wählen</span> · <kbd>Enter</kbd> <span data-t="tauschen">tauschen</span> · <kbd>Esc</kbd> <span data-t="fertig">fertig</span></span></div>
    </div>
    <div class="menue" id="reisekarte" hidden>
      <div class="dname" data-t="Weltkarte">Weltkarte</div>
      <div class="reisespalten">
        <canvas id="sternkarte" width="640" height="448" aria-label="Welten in Reichweite"></canvas>
        <div class="reiseseite">
          <dl class="reiseinfo" id="reiseinfo"></dl>
          <button class="knopf" id="reiseknopf" type="button" data-t="Hinwandern ▸">Hinwandern ▸</button>
        </div>
      </div>
      <div class="menuefuss"><span data-t="Gold = hier leben Leute · Wege = in Reichweite">Gold = hier leben Leute · Wege = in Reichweite</span><span><kbd>←</kbd><kbd>→</kbd><kbd>↑</kbd><kbd>↓</kbd> <span data-t="Welt">Welt</span> · <kbd>Enter</kbd> <span data-t="los">los</span> · <kbd>Esc</kbd> <span data-t="bleiben">bleiben</span></span></div>
    </div>
    <div class="menue" id="tasten" hidden>
      <div class="dname" data-t="Tasten">Tasten</div>
      <div class="tastenliste" id="tastenliste"></div>
      <div class="menuefuss"><span data-t="Alles, was man drücken kann">Alles, was man drücken kann</span><span><kbd>?</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="meilen" hidden>
      <div class="dname" id="meilentitel" data-t="Meilensteine">Meilensteine</div>
      <div class="meilenbaum" id="meilenbaum"></div>
      <div class="menuefuss"><span id="meilenfuss"></span><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="Seite">Seite</span> · <kbd>←</kbd><kbd>→</kbd> <span data-t="blättern">blättern</span> · <kbd>J</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
  </div>
  <div class="unterfeld">
    <div class="dialog" id="dialog" hidden>
      <div class="dname" id="dname"></div>
      <div class="dtext" id="dtext"></div>
      <div class="wahl" id="dwahl" hidden></div>
      <div class="dweiter" id="dweiter" data-t="T ▼">T ▼</div>
    </div>

  </div>
</section>

<!-- Rueckfrage: ersetzt den aktuellen Bildschirm, liegt nie darueber -->
<section class="bildschirm fragebild" id="frage" hidden>
  <div class="brief klein" role="alertdialog" aria-labelledby="fragetext">
    <p id="fragetext"></p>
    <div class="knopfreihe" id="frageknoepfe"></div>
  </div>
</section>

</div>

<script src="js/sprache.js"></script>
<script src="js/texte_en.js"></script>
<script src="atlas/daten.js"></script>
<!-- Karten, Biome und Stuben. Der Ordner liegt seit dem 10.10. unter Assets/Bauten/;
     bundle_creator.py legt ihn im Buendel wieder flach als Assets/10_testmap/ ab. -->
<script src="Assets/10_testmap/testmap.js"></script>
<script src="Assets/10_testmap/biome.js"></script>
<script src="Assets/10_testmap/karten.js"></script>
<script src="Assets/10_testmap/innen.js"></script>
<!-- NACH den Datendateien und VOR schmiede.js: schmiede.js haelt window.ATLAS fest
     (const D = window.ATLAS), universum.js spaeter window.KARTEN. Wer ein ReGame erst
     danach anwendet, erreicht diese beiden nicht mehr. -->
<script src="js/regame.js"></script>
<script src="js/schmiede.js"></script>
<script src="js/welt.js"></script>
<script src="js/haus.js"></script>
<script src="js/dorf.js"></script>
<script src="js/nacht.js"></script>
<script src="js/felder.js"></script>
<script src="js/skills.js"></script>
<script src="js/quests.js"></script>
<script src="js/universum.js"></script>
<script src="js/bauen.js"></script>
<script src="js/regeln.js"></script>
<script src="js/szenen.js"></script>
<script src="js/einstellungen.js"></script>
<script src="js/geraeusche.js"></script>
<script src="js/spiel.js"></script>
<script src="js/trailer.js"></script>
