@font-face { font-family: 'Archivo'; src: url('/fonts/archivo.woff') format('woff'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Bricolage'; src: url('/fonts/bricolage.woff') format('woff'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Hand'; src: url('/fonts/patrickhand.woff') format('woff'); font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/fonts/plexmono.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/fonts/plexmono-bold.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --paper: #F2EADB;
  --paper-2: #E7DCC7;
  --paper-3: #DCCDB2;
  --card: #FBF7EE;
  --ink: #1D1B18;
  --ink-2: #4A453D;
  --ink-3: #8A8275;
  --red: #E8432E;
  --red-d: #B92F1E;
  --yellow: #F7C531;
  --green: #2E9E62;
  --blue: #2F6FDE;
  --kraft: #C99A66;
  --kraft-d: #A7784A;
  --display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --text: 'Bricolage', 'Segoe UI', system-ui, sans-serif;
  --hand: 'Hand', 'Comic Sans MS', cursive;
  --mono: 'Plex', ui-monospace, Menlo, Consolas, monospace;
  --shadow: 5px 6px 0 var(--ink);
  --shadow-s: 3px 4px 0 var(--ink);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--text);
  font-variation-settings: 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* Farbchips in Anleitungen */
.chip {
  display: inline-flex; align-items: center; gap: .3em;
  background: var(--c); color: var(--ci);
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: .05em .55em .05em .35em;
  font-family: var(--display); font-weight: 800; font-stretch: 110%;
  letter-spacing: .02em; line-height: 1.25;
  box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap; vertical-align: .05em;
}
.chip svg { flex: none; }
.sfx { font-weight: 700; }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--red); color: #fff;
  font-family: var(--display); font-weight: 850; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: .03em;
  padding: .7em 1.3em;
  box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease, background .15s;
  user-select: none;
}
.btn:active { transform: translate(4px, 5px); box-shadow: 1px 1px 0 var(--ink); }
.btn[disabled] { background: var(--paper-3); color: var(--ink-3); box-shadow: 2px 2px 0 var(--ink-3); border-color: var(--ink-3); cursor: not-allowed; transform: none; }
.btn.yellow { background: var(--yellow); color: var(--ink); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ghost { background: var(--card); color: var(--ink); }

/* Sterne */
.stars { display: inline-flex; gap: .12em; }
.stars svg { width: 1em; height: 1em; }

.hazard {
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 18px, var(--ink) 18px 36px);
}

/* Avatare */
.av { display: block; width: 100%; height: 100%; overflow: visible; }
.av .av-eyes { animation: blink 5.5s infinite; transform-origin: 50% 46%; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }