/* Blockwelt — Grundstil (Koordinator).
   Module dürfen eigene <style>-Blöcke anhängen; Klassen tragen das Präfix bw-.
   Farbvariablen hier sind für ALLE gedacht.

   ══ VARIABLEN-VERTRAG (T11, 06.09.2026, Entwurf B „Sandstein und Glut") ══════
   Diese Namen sind die gemeinsame Sprache für stil.css, hud.js, menue.js und
   inventar.js. Wer eine Fläche, einen Rahmen oder eine Schrift braucht, nimmt
   den Namen — keine festen Hex-Werte mehr in den Modulen.

   FLÄCHEN     --bw-tafel          HUD-Fläche, MIT Alpha: das HUD liegt über dem
                                   Spielbild und muss durchscheinen
               --bw-fenster-grund  Fenster-Fläche, fast deckend
               --bw-tooltip-grund  Tooltip-Fläche
   KANTEN      --bw-rahmen         Rahmen hell (Sandkante)
               --bw-rahmen-dunkel  Rahmen dunkel
               --bw-licht-kante    Lichtkante oben  (als inset)
               --bw-schatten-kante Schattenkante unten (als inset)
               --bw-tief           Farbe des harten Schlagschattens
   SCHRIFT     --bw-text           Text
               --bw-text2          zweitrangiger Text
               --bw-mut            gedämpfter Text
               --bw-kopf           Überschriften
               --bw-textschatten   harter Umriss, Radius 0 (s. u.)
               --bw-pixel          Press Start 2P · --bw-schrift  Nunito
   AKZENT      --bw-gold           Akzent, gewähltes Fach
               --bw-gold-schwach   dasselbe mit Alpha, für Glühen
   FÄCHER      --bw-slot · --bw-slot-bd · --bw-slot-hover
   KNÖPFE      --bw-knopf · --bw-knopf-bd · --bw-knopf-tief · --bw-knopf-tx
   ZUSTÄNDE    --bw-leben · --bw-mana · --bw-good · --bw-bad · --bw-blau
   WELT        --bw-licht          Welt-Tönung, Standard = Tag.
                                   hud.js setzt sie je Tick aus der Himmelsfarbe.

   ── Wie die Tönung eingemischt wird ──────────────────────────────────────────
   NICHT über color-mix: das mischt auch die Alpha-Kanäle und macht die Tafel
   undurchsichtiger, als sie sein soll — genau das, was das HUD zur Wand macht.
   Stattdessen liegt die Tönung als eigene Schicht ÜBER der Fläche:

       background: linear-gradient(var(--bw-licht), var(--bw-licht)), var(--bw-tafel);

   Die Fläche behält ihr Alpha, die Welt scheint weiter durch, und --bw-licht
   regelt allein die Tönung. Gilt gleich für Tafeln, Fächer und Knöpfe.

   ── Zwei Regeln, die man leicht verletzt ─────────────────────────────────────
   1. --bw-textschatten hat Radius 0. Pixelschrift ist NUR ohne Weichzeichner
      scharf; ein weicher Schatten auf Schrift macht sie matschig.
   2. Spaltentitel und andere layoutbestimmende Beschriftungen NICHT in
      Pixelschrift setzen. Sie ist deutlich breiter: allein „Accessories" wurde
      darin ~30 px breiter und schob das Handwerk-Fenster über das HUD.
      Pixelschrift trägt Fenstertitel — für den Rest gesperrte Versalien.        */
:root{
  /* ── Schriften ─────────────────────────────────────────────────────────── */
  --bw-pixel:"Press Start 2P","Courier New",ui-monospace,monospace;
  --bw-schrift:Nunito,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bw-textschatten:1px 1px 0 rgba(0,0,0,.85);

  /* ── Welt-Tönung (Standard: Tag) ───────────────────────────────────────── */
  --bw-licht:rgba(255,236,200,.10);
  --bw-licht-kante:rgba(255,255,255,.42);
  --bw-schatten-kante:rgba(0,0,0,.34);

  /* ── Flächen ───────────────────────────────────────────────────────────── */
  --bw-tafel:rgba(78,60,44,.86);
  --bw-fenster-grund:rgba(74,57,42,.95);
  --bw-tooltip-grund:#4a3524;        /* deckendes dunkles Holz, warm (T4 06.09.) */

  /* ── Kanten ────────────────────────────────────────────────────────────── */
  --bw-rahmen:#d9bd88;
  --bw-rahmen-dunkel:#8a6c46;
  --bw-tief:#2e2216;

  /* ── Schrift ───────────────────────────────────────────────────────────── */
  --bw-text:#fdf3e2;
  --bw-text2:#f0dcc0;
  --bw-mut:#d8c1a0;
  --bw-kopf:#ffd9a0;

  /* ── Akzent ────────────────────────────────────────────────────────────── */
  --bw-gold:#f5a55f;
  --bw-gold-schwach:rgba(245,165,95,.55);

  /* ── Fächer ────────────────────────────────────────────────────────────── */
  --bw-slot:rgba(146,116,84,.55);
  --bw-slot-bd:#c2a274;
  --bw-slot-hover:rgba(184,150,110,.80);

  /* ── Knöpfe: helle Glut mit dunkler Schrift (Handschrift der Landingpage).
        Weiß auf mittlerem Orange kam nur auf 4,18:1 — mit dieser Paarung
        sind es gemessene 7,4:1. ─────────────────────────────────────────── */
  --bw-knopf:#e8933f;
  --bw-knopf-bd:#ffc48a;
  --bw-knopf-tief:#7a3d12;
  --bw-knopf-tx:#2e1a08;

  /* ── Zustände ──────────────────────────────────────────────────────────── */
  --bw-leben:#ff6472;
  --bw-mana:#6fb4ff;
  --bw-good:#9adf8c;
  --bw-bad:#ff9a7a;
  --bw-blau:#9ec8f0;

  /* ── Altnamen — BRÜCKE, bis T13 hud.js und menue.js umgezogen hat ───────
        Sie zeigen auf die Rollen oben, damit heute nichts bricht. Nach dem
        Umzug ersatzlos streichen. ACHTUNG: menue.js definiert --bw-rahmen,
        --bw-titelschrift und --bw-textschrift bei sich selbst noch einmal;
        weil sein <style> später in die Seite kommt, gewinnt SEIN Wert
        (#4a5f86 blau) über den Sand hier. Diese drei Zeilen in menue.js
        gehören beim Umzug gelöscht. */
  --bw-panel:var(--bw-tafel);
  --bw-panel2:var(--bw-fenster-grund);
  --bw-bd:var(--bw-rahmen);
  --bw-tx:var(--bw-text);
  --bw-titelschrift:var(--bw-pixel);
  --bw-textschrift:var(--bw-schrift);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#1a120c;color:var(--bw-text);
  font:14px/1.45 var(--bw-schrift);-webkit-user-select:none;user-select:none;overscroll-behavior:none}
canvas#spiel{display:block;position:fixed;inset:0;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}
#ui{position:fixed;inset:0;pointer-events:none;z-index:10}
#ui>*{pointer-events:auto}
#ui .bw-durchlass{pointer-events:none}          /* HUD-Teile, die Klicks durchlassen sollen */
#fehler{position:fixed;top:8px;left:8px;z-index:1000;max-width:min(720px,92vw);max-height:40vh;overflow:auto;margin:0;padding:8px 10px;
  background:rgba(120,0,0,.9);color:#fff;border:2px solid #ff8080;border-radius:3px;font:12px/1.35 var(--bw-schrift);white-space:pre-wrap;pointer-events:auto}

/* ══ Gemeinsame Bausteine ══════════════════════════════════════════════════
   Harte Kanten, 2-px-Rahmen, Licht oben und Schatten unten als inset, harter
   Schlagschatten statt Weichzeichner. */
.bw-fenster{position:absolute;padding:12px 14px;border-radius:3px;color:var(--bw-text);
  border:2px solid var(--bw-rahmen);
  background:linear-gradient(var(--bw-licht),var(--bw-licht)),var(--bw-fenster-grund);
  box-shadow:inset 0 2px 0 var(--bw-licht-kante),inset 0 -2px 0 var(--bw-schatten-kante),
             0 4px 0 var(--bw-tief),0 10px 22px rgba(0,0,0,.45)}
.bw-fenster h2{margin:0 0 10px;font:11px/1.6 var(--bw-pixel);letter-spacing:.5px;
  color:var(--bw-kopf);text-shadow:0 2px 0 var(--bw-tief)}

.bw-knopf{cursor:pointer;font:700 13px/1.3 var(--bw-schrift);padding:5px 11px;border-radius:2px;
  border:2px solid var(--bw-knopf-bd);color:var(--bw-knopf-tx);
  background:linear-gradient(var(--bw-licht),var(--bw-licht)),var(--bw-knopf);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 var(--bw-knopf-tief);
  transition:transform .05s,filter .12s}
.bw-knopf:hover{filter:brightness(1.12);border-color:var(--bw-rahmen)}
.bw-knopf:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.25)}
.bw-knopf.gut{border-color:var(--bw-good)}
.bw-knopf.schlecht{border-color:var(--bw-bad)}
.bw-knopf:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}

.bw-eingabe{border-radius:2px;border:2px solid var(--bw-slot-bd);background:rgba(0,0,0,.22);
  color:var(--bw-text);padding:5px 8px;font:14px/1.4 var(--bw-schrift);
  -webkit-user-select:text;user-select:text}
.bw-eingabe::placeholder{color:var(--bw-mut)}

.bw-slot{width:44px;height:44px;border-radius:2px;position:relative;display:inline-flex;
  align-items:center;justify-content:center;border:2px solid var(--bw-slot-bd);
  background:linear-gradient(var(--bw-licht),var(--bw-licht)),var(--bw-slot);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.20),inset 0 -2px 0 rgba(0,0,0,.30)}
.bw-slot:hover{background:var(--bw-slot-hover);border-color:var(--bw-gold)}
.bw-slot.gewaehlt{border-color:var(--bw-gold);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.30),0 0 0 2px var(--bw-gold-schwach),0 0 14px var(--bw-gold-schwach)}
.bw-slot .anzahl{position:absolute;right:3px;bottom:1px;font-size:11px;color:#fff;text-shadow:var(--bw-textschatten)}

.bw-tooltip{position:fixed;z-index:60;pointer-events:none;padding:8px 10px;max-width:280px;
  font-size:12.5px;border-radius:3px;border:2px solid var(--bw-rahmen);color:var(--bw-text);
  background:linear-gradient(var(--bw-licht),var(--bw-licht)),var(--bw-tooltip-grund);
  box-shadow:0 4px 0 var(--bw-tief),0 10px 20px rgba(0,0,0,.5)}
.bw-tooltip b{display:block;margin-bottom:3px}

.bw-mut{color:var(--bw-mut)}
.bw-gut{color:var(--bw-good)}.bw-schlecht{color:var(--bw-bad)}.bw-gold{color:var(--bw-gold)}
.bw-leiste{height:12px;border-radius:2px;overflow:hidden;background:rgba(0,0,0,.45);
  border:2px solid var(--bw-slot-bd)}
.bw-leiste>i{display:block;height:100%;background:var(--bw-good)}
.bw-zentriert{left:50%;top:50%;transform:translate(-50%,-50%)}