/* FACKELPFAD, Schmiede-Fassung. Layout, Lagen, Tippflächen, Rechtsseiten.
   Farben und Schrift kommen aus marke.css (Gestalter). Fehlt die Datei, greifen
   die Ersatzwerte hier, damit das Spiel trotzdem läuft.

   Fassung VINTAGE (Expedition, 1920er), gestaltet am 06.09.2026 gegen frontend-design
   und game-ui-ux, siehe MARKE.md „Herkunft der Entscheidungen". Regeln, die hier
   eingebaut sind:
   - Alles sieht gedruckt aus, nicht gerendert: Rahmen aus zwei dünnen Linien, Ecken
     fast scharf, Farbflächen um 2 bis 3 Punkte gegen die Kontur versetzt (Druckversatz),
     Papierkorn über allem, keine Verläufe, kein Glimmen, kein Schlagschatten.
   - Jede Fläche mit Text hat eine ECHTE background-color, damit der Kontrast messbar
     bleibt und nicht gegen das Dunkel dahinter gerechnet wird.
   - Asymmetrie ist gewollt: Etikett oben links, Siegel als Stempel rechts, Text linksbündig. */
:root{
  --hintergrund: var(--farbe-hintergrund, #1c1511);
  --flaeche: var(--farbe-flaeche, #2a211a);
  --text: var(--farbe-text, #e3d3b0);
  --gedaempft: var(--farbe-text-gedaempft, #c4b08a);
  --akzent: var(--farbe-akzent, #b9953f);
  --akzent-text: var(--farbe-akzent-text, #1c1511);
  --erfolg: var(--farbe-erfolg, #6fafa3);
  --warnung: var(--farbe-warnung, #d9a24a);
  --fehler: var(--farbe-fehler, #d86e5e);
  --fackel: var(--farbe-fackel, #c8742b);
  --stein: var(--farbe-stein, #5c4a3a);
  --sand: var(--farbe-sand, #c2a878);
  --messing: var(--farbe-gold, #b9953f);
  --messing-schatten: var(--messing-tief, #7a6128);
  --rot: var(--stempelrot, #9e3b2e);
  --tinte-farbe: var(--tinte, #120d0a);
  --knopf: var(--farbe-knopf, #3a2e24);
  --knopf-tief: var(--farbe-knopf-tief, #221a14);
  --titelschrift: var(--schrift-titel, "Rockwell", "Roboto Slab", "Courier New", serif);
  --textschrift: var(--schrift-text, "Futura", "Avenir Next", "Trebuchet MS", Roboto, sans-serif);
  --schmalschrift: var(--schrift-schmal, "Futura", "Avenir Next Condensed", "Arial Narrow", sans-serif);
  --r-karte: var(--radius-karte, 2px);
  --r-knopf: var(--radius-knopf, 2px);
  --rand: var(--rand-leise, rgba(185,149,63,.32));
  --linie: var(--rand-gold, rgba(185,149,63,.6));
  --kante: var(--kante-stein, rgba(0,0,0,.5));
  /* Hochkant bekommt das Steuerkreuz, was nach dem quadratischen Brett an Höhe
     übrig bleibt: Höhe minus Breite minus Kopf, Anzeige und Abstände. */
  --kreuz: clamp(52px, calc((var(--vh) - var(--vw) - 118px) / 3), 76px);
  --vh: 100vh;
  --vw: 100vw;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{height:100%; -webkit-text-size-adjust:100%; touch-action:manipulation}
body{
  margin:0; position:fixed; inset:0; height:var(--vh); overflow:hidden;
  background:var(--hintergrund); color:var(--text);
  font-family:var(--textschrift); font-size:16px; line-height:1.5;
  -webkit-user-select:none; user-select:none; overscroll-behavior:none;
  touch-action:manipulation;
}
button{font-family:inherit; touch-action:manipulation; cursor:pointer}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
[hidden]{display:none !important}

#app{position:absolute; inset:0}
/* Das Papierkorn liegt über allem, auch über dem Brett und über jeder Einblendung.
   Es nimmt keine Berührung an. So sieht jeder Bildschirm aus wie ein Abzug, nicht wie ein Rendering. */
#app::after{content:""; position:absolute; inset:0; z-index:95; pointer-events:none; background-image:var(--koernung, none)}

/* ---------- Bildschirme ---------- */
.bildschirm{
  position:absolute; inset:0; background-color:var(--hintergrund);
  padding:calc(8px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
          calc(8px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}
/* Jedes Menü ist eine alte Aufnahme: dunkle Ecken, in der Mitte etwas heller */
.bildschirm.menue{
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:flex; flex-direction:column; align-items:center;
  background-image:radial-gradient(ellipse 110% 85% at 50% 42%, rgba(0,0,0,0) 45%, var(--vignette, rgba(0,0,0,.5)) 100%);
}
@media (min-height: 1000px){ .bildschirm.menue{padding-top:calc(5vh + env(safe-area-inset-top))} }

/* Karte: eine Tafel aus Leder mit einem gedruckten Rahmen aus zwei Linien.
   Kein Schatten, keine Rundung, die innere Linie sitzt 4 Punkte innen wie bei einem Etikett. */
.karte{
  width:100%; max-width:560px; background-color:var(--flaeche); color:var(--text);
  border-radius:var(--r-karte); padding:22px 20px 20px; margin:0 auto 12px;
  border:1px solid var(--linie);
  box-shadow:inset 0 0 0 4px var(--flaeche), inset 0 0 0 5px var(--rand);
}
.karte.mittig{margin-top:auto; margin-bottom:auto}
.karte p{margin:8px 0}
.klein{font-size:13px; color:var(--gedaempft)}
h2{font-family:var(--titelschrift); font-size:var(--groesse-titel, 24px); font-weight:700; margin:0 0 12px; color:var(--messing); letter-spacing:.03em; line-height:1.15}
h2::after{content:""; display:block; width:44px; height:2px; background:var(--messing); margin-top:8px; opacity:.75}
h3{font-family:var(--titelschrift); font-size:18px; font-weight:700; margin:18px 0 6px; color:var(--messing); letter-spacing:.02em}

/* ---------- Titelseite: ein Plakat, gesetzt und gedruckt ---------- */
#b-titel{padding-bottom:calc(4px + env(safe-area-inset-bottom))}
.titelkopf{
  position:absolute; z-index:2;
  top:calc(4px + env(safe-area-inset-top)); right:calc(4px + env(safe-area-inset-right));
}
.titelbuehne{
  width:100%; max-width:560px; margin:auto 0; padding-top:6px;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"etikett" "siegel" "rest";
  align-items:start;
}
/* Das Etikett: die Wortmarke in einem Rahmen aus zwei Linien, leicht schief wie aufgeklebt.
   Die innere Linie sitzt versetzt (Druckversatz). */
.etikett{
  grid-area:etikett; justify-self:start; position:relative; max-width:calc(100% - 52px);
  padding:10px 16px 12px 14px; border:1px solid var(--messing);
  transform:rotate(-1.2deg); transform-origin:left bottom; margin:8px 0 0 2px;
}
.etikett::after{content:""; position:absolute; inset:4px; border:1px solid var(--messing); opacity:.7; transform:translate(3px, 2px); pointer-events:none}
/* Die Wortmarke: lebender Text aus texte.js in einer Egyptienne, angelaufenes Messing,
   dahinter der rote Druckversatz der zweiten Farbe. Kein Verlauf, kein Glimmen. */
h1.titel{
  font-family:var(--titelschrift); font-weight:700; font-size:var(--groesse-wortmarke, clamp(28px, 10vw, 64px)); line-height:1;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; margin:0; padding:2px 0 0;
  color:var(--messing); text-shadow:2px 2px 0 var(--rot);
}
.unter{
  font-family:var(--schmalschrift); font-stretch:condensed; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gedaempft); margin:8px 0 0;
}
/* Das Siegel: ein Stempel, rechts, schief, mit dem Rand knapp über dem Etikett */
.siegel{grid-area:siegel; position:relative; width:var(--siegel, min(58vw, 30vh, 480px)); height:var(--siegel, min(58vw, 30vh, 480px)); justify-self:end; margin:-6px -2% 0 0; transform:rotate(var(--siegel-neigung, -7deg))}
.siegel-bild{display:block; width:100%; height:100%}
.titelrest{grid-area:rest; width:100%; display:flex; flex-direction:column; align-items:flex-start; margin-top:4px}
.einleitung{max-width:38ch; margin:0; font-size:16px; line-height:1.5; color:var(--text)}
.titelknoepfe{width:100%; max-width:380px; margin:16px 0 0}
.nebenzeile{display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; margin-top:8px}
.nebenzeile .textknopf{flex:0 0 auto; white-space:nowrap; padding:8px 2px}
.trenner{width:1px; height:14px; background:var(--messing); opacity:.55; flex:0 0 auto}
.rechtszeile{display:flex; justify-content:flex-start; gap:18px; flex:0 0 auto; width:100%; max-width:560px; padding-top:8px}
.rechtszeile .textknopf{font-size:13px; padding:8px 2px; flex:0 0 auto; text-decoration:none; color:var(--gedaempft)}

/* Kurze Telefone hochkant (iPhone SE): der Stempel gibt etwas ab, damit nichts unter den Rand rutscht */
@media (orientation: portrait) and (max-height: 700px){
  :root{--siegel:min(52vw, 27vh, 480px)}
  .einleitung{font-size:15px}
  .titelknoepfe{margin-top:12px}
  .knopf.haupt.gross{min-height:54px}
}
/* Tablet hochkant: dasselbe Plakat, nur größer. Der Stempel darf hier wachsen (bis 620 Punkte),
   Etikett und Text bekommen mehr Luft, damit die Fläche gefüllt ist statt ein Band in der Mitte. */
@media (orientation: portrait) and (min-width: 700px){
  :root{--siegel:min(56vw, 42vh, 620px); --groesse-wortmarke:clamp(28px, calc((100vw - 140px) / var(--wortmarke-em, 7.3)), 84px)}
  .titelbuehne{max-width:760px}
  .etikett{padding:14px 22px 16px 20px}
  .siegel{margin-top:-14px}
  .titelrest{margin-top:8px}
  .rechtszeile{max-width:760px}
}
/* Quer (Telefon und Tablet): zwei Spalten, Etikett und Text links, der Stempel rechts daneben. */
@media (orientation: landscape){
  .titelbuehne{
    grid-template-columns:minmax(0, 11fr) minmax(0, 9fr); grid-template-areas:"etikett siegel" "rest siegel";
    column-gap:clamp(12px, 3vw, 40px); align-items:center; max-width:1120px; padding-top:0;
    --siegel:min(40vw, 62vh, 560px);
  }
  .etikett{align-self:end; margin-top:0}
  .siegel{align-self:center; margin:0 -1% 0 0}
  .titelrest{align-self:start}
  h1.titel{font-size:clamp(24px, calc((min(100vw, 1120px) * .55 - 90px) / var(--wortmarke-em, 7.3)), 72px)}
  .einleitung{max-width:44ch}
  .rechtszeile{max-width:1120px}
}
@media (min-width: 700px) and (orientation: portrait){
  .einleitung{font-size:18px; max-width:40ch}
  .titelknoepfe{max-width:420px; margin-top:22px}
  .knopf.haupt.gross{min-height:64px; font-size:19px}
  .knopf{min-height:56px}
  .unter{font-size:15px}
  .textknopf{font-size:16px}
}
@media (orientation: landscape) and (min-width: 1000px){
  .titelbuehne{--siegel:min(38vw, 68vh, 600px)}
  .einleitung{font-size:18px}
  .titelknoepfe{max-width:420px; margin-top:22px}
  .knopf.haupt.gross{min-height:64px; font-size:19px}
  .knopf{min-height:56px}
  .unter{font-size:15px}
  .textknopf{font-size:16px}
}
@media (orientation: landscape) and (max-height: 480px){
  .titelbuehne{--siegel:min(34vw, 78vh, 480px); column-gap:12px}
  h1.titel{font-size:clamp(24px, calc((min(100vw, 1120px) * .55 - 90px) / var(--wortmarke-em, 7.3)), 44px)}
  .einleitung{font-size:14px; max-width:48ch}
  .unter{margin-top:4px; font-size:12px}
  .titelknoepfe{margin-top:8px}
  .knopf.haupt.gross{min-height:50px}
  .knopf{min-height:48px; margin-top:6px}
  .nebenzeile{margin-top:2px}
  .rechtszeile{padding-top:0}
}

/* ---------- Knöpfe: gedruckte Etiketten ---------- */
/* Stein-Knopf: Lederfläche mit einer inneren Rahmenlinie, wie ein geprägtes Etikett. */
.knopf{
  display:block; width:100%; min-height:52px; margin:10px 0 0; padding:12px 16px; position:relative;
  background-color:var(--knopf); color:var(--text); border:1px solid rgba(0,0,0,.55);
  border-radius:var(--r-knopf); font-family:var(--titelschrift); font-size:16px; font-weight:700; letter-spacing:.03em;
  box-shadow:inset 0 0 0 3px var(--knopf), inset 0 0 0 4px var(--rand), 0 2px 0 var(--kante);
  transition:transform var(--dauer, 160ms), box-shadow var(--dauer, 160ms);
}
.knopf:active{transform:translateY(2px); box-shadow:inset 0 0 0 3px var(--knopf), inset 0 0 0 4px var(--fackel), 0 0 0 var(--kante)}
.knopf:disabled{opacity:.45}
/* Der Hauptknopf: Messing, ein gedruckter Rahmen mit vier Eckmarken, die Papierkontur
   um drei Punkte versetzt wie beim Mehrfarbdruck. */
.knopf.haupt{
  background-color:var(--akzent); color:var(--akzent-text); border-color:var(--tinte-farbe);
  text-transform:uppercase; letter-spacing:.12em;
  background-image:linear-gradient(var(--tinte-farbe), var(--tinte-farbe)), linear-gradient(var(--tinte-farbe), var(--tinte-farbe)),
                   linear-gradient(var(--tinte-farbe), var(--tinte-farbe)), linear-gradient(var(--tinte-farbe), var(--tinte-farbe));
  background-repeat:no-repeat; background-size:5px 5px;
  background-position:7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
  box-shadow:inset 0 0 0 3px var(--akzent), inset 0 0 0 4px rgba(18,13,10,.75), 0 3px 0 var(--messing-schatten);
}
.knopf.haupt::after{content:""; position:absolute; inset:-1px; border:1px solid var(--text); opacity:.8; transform:translate(3px, 3px); pointer-events:none; border-radius:var(--r-knopf)}
.knopf.haupt:active{transform:translateY(2px); box-shadow:inset 0 0 0 3px var(--akzent), inset 0 0 0 4px rgba(18,13,10,.75), 0 1px 0 var(--messing-schatten)}
.knopf.haupt:active::after{transform:translate(1px, 1px)}
.knopf.haupt.gross{min-height:58px; font-size:17px}
.reihe{display:flex; gap:10px}
.reihe .knopf{flex:1 1 0}
.reihe.klein{margin-top:12px}
.textknopf{
  flex:1 1 0; min-height:48px; background:transparent; border:0; color:var(--gedaempft);
  font-size:15px; padding:8px 10px; border-radius:var(--r-knopf); letter-spacing:.01em;
  text-decoration:underline; text-decoration-color:var(--rand); text-decoration-thickness:1px; text-underline-offset:5px;
}
.textknopf:active{color:var(--messing); text-decoration-color:var(--messing)}
.ikonknopf{
  width:48px; height:48px; flex:0 0 48px; padding:0; display:inline-flex; align-items:center;
  justify-content:center; background:transparent; color:var(--gedaempft);
  border:1px solid transparent; border-radius:var(--r-knopf);
}
.ikonknopf:active{color:var(--messing); border-color:var(--rand); background-color:var(--flaeche)}
.ikonknopf .ikon{width:22px; height:22px}
.ikon{width:18px; height:18px; fill:currentColor; pointer-events:none; flex:0 0 auto}
button .ikon{pointer-events:none}
:focus-visible{outline:2px solid var(--messing); outline-offset:3px}

/* ---------- Tabellen und Listen ---------- */
table.punkte{width:100%; border-collapse:collapse; margin-top:10px; font-size:15px; font-variant-numeric:tabular-nums}
table.punkte td{padding:8px 2px; border-bottom:1px solid var(--rand); vertical-align:baseline}
table.punkte td:last-child{text-align:right; font-family:var(--titelschrift); font-size:16px; color:var(--text); white-space:nowrap}
table.punkte tr.summe td{border-top:2px solid var(--messing); border-bottom:none; font-weight:700; font-size:17px; color:var(--messing); padding-top:10px}
table.punkte tr.summe td:last-child{font-size:21px}
table.punkte td .klein{margin-left:6px}
ul.regeln{list-style:none; padding:0; margin:6px 0 14px; font-size:15px; line-height:1.5}
ul.regeln li{position:relative; padding-left:18px; margin-bottom:10px}
ul.regeln li::before{content:""; position:absolute; left:2px; top:.64em; width:5px; height:5px; background:var(--messing); opacity:.85}
.eingabe{
  width:100%; min-height:48px; padding:10px 4px; font-size:17px; font-family:inherit;
  margin:6px 0; border:0; border-bottom:1px solid var(--messing); border-radius:0;
  background:transparent; color:var(--text); -webkit-user-select:text; user-select:text;
}
.eingabe::placeholder{color:var(--gedaempft)}
.eingabe:focus{outline:none; border-bottom-width:2px}

/* ---------- Einweisung ---------- */
#ew-schritt{font-family:var(--schmalschrift); color:var(--messing); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px}
#ew-bild{display:block; width:100%; max-width:400px; height:auto; margin:10px auto 12px; border-radius:var(--r-karte); background:var(--hintergrund); border:1px solid var(--rand); box-shadow:0 0 0 3px var(--flaeche), 0 0 0 4px var(--rand)}
#b-einweisung .reihe{margin-top:8px}

/* ---------- Ebene geschafft, Ende, Bestenliste ---------- */
#ebene-mitnahme, #liste-hinweis{margin-top:4px}
#ende-best{color:var(--messing); font-family:var(--titelschrift); font-weight:700; font-size:17px; margin-top:12px}
#ende-best:empty{display:none}
/* Der Sieg ist das einzige Mal, dass die Kammer warm wird: Ockerschein von oben, die Tafel
   bekommt einen Messingrahmen. Hook für den Baumeister: Klasse „sieg" auf #b-ende. Solange
   sie fehlt, erkennt das Gerüst den Sieg an der Punktetafel, die nur dann vier Zeilen hat. */
#b-ende.sieg{background-image:radial-gradient(ellipse 100% 50% at 50% 0%, rgba(200,116,43,.26), rgba(200,116,43,0) 70%), radial-gradient(ellipse 110% 85% at 50% 42%, rgba(0,0,0,0) 45%, var(--vignette, rgba(0,0,0,.5)) 100%)}
#b-ende.sieg .karte{border-color:var(--messing); box-shadow:inset 0 0 0 4px var(--flaeche), inset 0 0 0 5px var(--messing)}
#b-ende.sieg h2{font-size:32px}
#b-ende:has(#ende-tabelle tr:nth-child(3)){background-image:radial-gradient(ellipse 100% 50% at 50% 0%, rgba(200,116,43,.26), rgba(200,116,43,0) 70%), radial-gradient(ellipse 110% 85% at 50% 42%, rgba(0,0,0,0) 45%, var(--vignette, rgba(0,0,0,.5)) 100%)}
#b-ende:has(#ende-tabelle tr:nth-child(3)) .karte{border-color:var(--messing); box-shadow:inset 0 0 0 4px var(--flaeche), inset 0 0 0 5px var(--messing)}
#b-ende:has(#ende-tabelle tr:nth-child(3)) h2{font-size:32px}

/* ---------- Impressum und Datenschutz ---------- */
#b-impressum p, #b-datenschutz p{line-height:1.55}
#impressum-herausgeber{margin-top:4px}
/* Der Platzhalter ist der Riegel (Eiserne Regel 8): ein roter Stempel, schief aufgedrückt.
   Er sieht nie aus wie eine Anschrift. */
#impressum-zeilen{display:inline-block; margin:14px 0 6px; padding:8px 14px; border:2px solid var(--fehler); color:var(--fehler); transform:rotate(-1.5deg); font-family:var(--titelschrift); font-weight:700}
#impressum-zeilen p{margin:4px 0}
#impressum-hinweis{color:var(--fehler); font-size:14px; margin:14px 0 6px; padding-left:12px; border-left:3px solid var(--fehler)}

/* ---------- Spiel, hochkant ---------- */
#b-spiel{
  display:grid; gap:6px; overflow:hidden;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"kopf" "hud" "brett" "steuer";
  background-image:radial-gradient(ellipse 110% 85% at 50% 45%, rgba(0,0,0,0) 50%, var(--vignette, rgba(0,0,0,.5)) 100%);
}
.kopf{grid-area:kopf; display:flex; gap:2px; align-items:center; min-width:0}
.ebenenname{
  flex:1 1 auto; min-width:0; text-align:center; font-family:var(--titelschrift); font-weight:700;
  font-size:15px; letter-spacing:.04em; color:var(--sand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Die Anzeigenleiste ist EINE Fläche (Mikes Dashboard-Regel): eine Instrumentenleiste aus
   Leder mit Messingkanten oben und unten, innen durch Messingstriche geteilt, die Werte in
   der Egyptienne, die Fackel als Messgerät mit Teilstrichen. */
.hud{
  grid-area:hud; display:flex; min-width:0; min-height:38px;
  background-color:var(--flaeche); border:1px solid var(--rand); border-top:2px solid var(--messing); border-bottom:2px solid var(--messing);
  border-radius:var(--r-karte); overflow:hidden;
}
.chip{
  flex:1 1 0; min-width:0; min-height:34px; display:inline-flex; align-items:center; justify-content:center;
  gap:4px; padding:0 4px; border-left:1px solid var(--rand);
  font-size:15px; white-space:nowrap; overflow:hidden;
}
.chip:first-child{border-left:0}
.chip .ikon{width:14px; height:14px; color:var(--messing)}
.chip b{font-family:var(--titelschrift); font-weight:700; font-size:15px; color:var(--text); font-variant-numeric:tabular-nums}
.chip.leer b{color:var(--gedaempft)}
.chip.leer .ikon{opacity:.5}
.chip.punkte{flex-grow:1.7}
.chip.fackel{flex-grow:1.4}
.chip.fackel .ikon{color:var(--fackel)}
.chip .balken{position:relative; flex:1 1 auto; height:9px; min-width:18px; background:var(--tinte-farbe); border:1px solid var(--rand); overflow:hidden}
.chip .balken i{display:block; height:100%; width:100%; background-color:var(--fackel); transition:width var(--dauer, 160ms)}
.chip .balken::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(20% - 1px), rgba(18,13,10,.85) calc(20% - 1px), rgba(18,13,10,.85) 20%); pointer-events:none}
.chip.fackel.knapp .balken i{background-color:var(--fehler); animation:blink .6s infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.4}}
.chip.leben .herz{color:var(--fehler); width:13px; height:13px}
.chip.leben .herz.weg{color:var(--stein)}
@media (max-width:340px){ .hud{flex-wrap:wrap} .chip{flex-basis:30%} }

.brettraum{grid-area:brett; position:relative; min-height:0; min-width:0; display:flex; align-items:center; justify-content:center}
/* Der Brettrahmen: ein gedruckter Rahmen aus zwei Linien um die Aufnahme. */
#brett{
  display:block; border-radius:var(--r-karte); background:var(--hintergrund); touch-action:none;
  border:1px solid var(--rand);
  box-shadow:0 0 0 3px var(--hintergrund), 0 0 0 4px var(--linie);
}
.meldung{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  max-width:calc(100% - 20px); padding:7px 14px; border-radius:var(--r-knopf);
  background-color:var(--flaeche); color:var(--text); font-size:14px; line-height:1.35;
  border:1px solid var(--linie); text-align:center; pointer-events:none;
}
.meldung:empty{display:none}
/* Die Einblendung ist eine Titelkarte quer über das Brett: Lederband, zwei Messinglinien.
   Sie liegt im unteren Drittel, unter der Übersichtskarte (oben rechts auf dem Brett) und
   über der Meldung, damit sie nichts verdeckt, was der Spieler gerade braucht. */
.banner{
  position:absolute; left:0; right:0; top:auto; bottom:15%; width:auto;
  text-align:center; background-color:var(--flaeche);
  border-top:2px solid var(--messing); border-bottom:2px solid var(--messing);
  box-shadow:inset 0 3px 0 var(--flaeche), inset 0 4px 0 var(--rand), inset 0 -3px 0 var(--flaeche), inset 0 -4px 0 var(--rand);
  padding:16px 16px 14px; pointer-events:none; animation:auftauchen var(--dauer-einblendung, 220ms) ease-out;
}
.banner .btitel{font-family:var(--titelschrift); font-weight:700; font-size:clamp(17px,4.6vw,24px); letter-spacing:.1em; color:var(--messing); margin-bottom:4px; line-height:1.2}
.banner .btext{font-size:14px; color:var(--text)}
@keyframes auftauchen{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:translateY(0)}}

/* Steuerkreuz und Taten: geprägte Etiketten aus Leder mit Messingrahmen innen.
   Die Mitte (Warten) ist die Vertiefung, gedrückt sinkt eine Taste, der Rahmen wird Ocker. */
.steuer{grid-area:steuer; display:flex; gap:14px; align-items:center; justify-content:center; min-width:0}
.kreuz{display:grid; grid-template-columns:repeat(3, var(--kreuz)); grid-template-rows:repeat(3, var(--kreuz)); gap:5px}
.kreuz .leer{visibility:hidden}
.richtung{
  width:var(--kreuz); height:var(--kreuz); padding:0; display:flex; align-items:center; justify-content:center;
  background-color:var(--knopf); color:var(--text); border:1px solid rgba(0,0,0,.55); border-radius:var(--r-knopf);
  box-shadow:inset 0 0 0 3px var(--knopf), inset 0 0 0 4px var(--rand), 0 2px 0 var(--kante);
}
.richtung .ikon{width:36%; height:36%}
.richtung.mitte{background-color:var(--knopf-tief); color:var(--gedaempft); box-shadow:inset 0 0 0 3px var(--knopf-tief), inset 0 0 0 4px var(--rand), inset 0 3px 6px rgba(0,0,0,.6)}
.richtung:active{
  background-color:var(--knopf-tief); color:var(--warnung); transform:translateY(1px);
  box-shadow:inset 0 0 0 3px var(--knopf-tief), inset 0 0 0 4px var(--fackel), 0 0 0 var(--kante);
}
.taten{display:flex; flex-direction:column; gap:8px; width:min(160px, 40vw)}
.tat{
  min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 10px 6px 12px;
  background-color:var(--knopf); color:var(--text); border:1px solid rgba(0,0,0,.55); border-left-width:4px; border-radius:var(--r-knopf);
  font-family:var(--titelschrift); font-size:15px; font-weight:700; white-space:nowrap;
  box-shadow:inset 0 0 0 3px var(--knopf), inset 0 0 0 4px var(--rand), 0 2px 0 var(--kante);
}
.tat .ikon{width:16px; height:16px; color:var(--messing)}
#k-dynamit{border-left-color:var(--warnung)}
#k-schuss{border-left-color:var(--fehler)}
#k-warten{border-left-color:var(--sand)}
.tat:disabled{opacity:.4; box-shadow:inset 0 0 0 3px var(--knopf), inset 0 0 0 4px var(--rand)}
.tat:active{background-color:var(--knopf-tief); color:var(--warnung); transform:translateY(2px); box-shadow:inset 0 0 0 3px var(--knopf-tief), inset 0 0 0 4px var(--fackel)}
#k-warten{display:none}   /* hochkant sitzt Warten in der Mitte des Kreuzes */

/* ---------- Schleier: Pause, Zähler, Rückfrage ---------- */
.schleier{
  position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background-color:var(--schleier, rgba(28,21,17,.86)); padding:16px;
}
.schleier .klein-karte{max-width:380px; margin:0; text-align:center}
.schleier .klein-karte h2::after{margin-left:auto; margin-right:auto}
.schleier .klein-karte .reihe{margin-top:4px}
.zaehler .zahl{
  font-family:var(--titelschrift); font-weight:700; font-size:120px; color:var(--messing); line-height:1;
  min-width:140px; text-align:center; text-shadow:4px 4px 0 var(--rot);
}
#dialog{position:fixed; z-index:60}

/* ---------- Spiel, quer: Steuerung links und rechts neben dem Brett ---------- */
@media (orientation: landscape){
  #b-spiel{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"kopf hud hud" "links brett rechts";
    gap:8px;
  }
  .kopf{grid-area:kopf}
  .ebenenname{display:none}
  .hud{grid-area:hud; align-self:center}
  .steuer{display:contents}
  .kreuz{grid-area:links; align-self:center}
  .taten{grid-area:rechts; align-self:center; width:clamp(96px, 18vw, 160px)}
  #k-warten{display:flex}
  .richtung.mitte{visibility:hidden}
  :root{--kreuz:clamp(48px, 14vmin, 72px)}
}
@media (orientation: landscape) and (max-height: 420px){
  .bildschirm{padding-top:calc(4px + env(safe-area-inset-top)); padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  #b-spiel{gap:6px}
  .hud{min-height:34px}
  .chip{min-height:30px; font-size:13px}
  .chip b{font-size:14px}
}

@media (prefers-reduced-motion: reduce){
  .chip.fackel.knapp .balken i{animation:none; opacity:1}
  .banner{animation:none}
}