@font-face { font-family: 'CW Block'; src: url('../assets/fonts/DD-Block.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'CW Dick'; src: url('../assets/fonts/DD-Dick.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'CW Logo'; src: url('../assets/fonts/DD-Logo.ttf') format('truetype'); font-display: block; }

:root {
  --tisch: #18261f;        /* Kaffeehaus-Tisch, dunkles Grün */
  --tisch-2: #22362b;
  --tisch-3: #2c4537;
  --linie: #3a5546;
  --holz: #3a2516;
  --holz-hell: #6b4527;
  --holz-dunkel: #24160d;
  --messing: #d9b25a;
  --papier: #f2e4c4;
  --papier-2: #e2cd9c;
  --tinte: #2a1a12;
  --gold: #c99a3b;
  --gold-hell: #e8c46a;
  --gold-2: #8a6420;
  --blau: #2f6fb5;
  --blau-dunkel: #1b467e;
  --rot: #c3343c;
  --rot-dunkel: #7f1d24;
  --text: #f2e4c4;
  --text-leise: #b8a98a;
  --schatten: #070c09;
  --k: 2;                  /* Pixel-Zoom der Karten */
  --kb: calc(58px * var(--k));
  --kh: calc(72px * var(--k));

  /* Pixel-Rahmen (6x6, Ecke ausgespart) für border-image: 1 Rahmenpixel = 2 px */
  --rahmen-tinte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1h1v4h-1v1h-4v-1h-1v-4h1z' fill='%232a1a12'/%3E%3C/svg%3E");
  --rahmen-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1h1v4h-1v1h-4v-1h-1v-4h1z' fill='%23c99a3b'/%3E%3C/svg%3E");
  --rahmen-gold2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1h1v4h-1v1h-4v-1h-1v-4h1z' fill='%238a6420'/%3E%3C/svg%3E");
  --rahmen-gruen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h4v1h1v4h-1v1h-4v-1h-1v-4h1z' fill='%233a5546'/%3E%3C/svg%3E");
  /* Filz: 4x4-Pixelmuster, doppelt gezoomt */
  --filz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%2318261f'/%3E%3Crect width='1' height='1' fill='%231c2d24'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23152219'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
html { scrollbar-color: var(--gold-2) var(--tisch); caret-color: var(--gold); -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--tisch);
  background-image: var(--filz);
  background-size: 8px 8px;
  color: var(--text);
  font-family: 'CW Block', ui-monospace, monospace;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
body::before {   /* Licht der Hängelampe überm Tisch, dunkle Ränder */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 18%, rgba(255, 214, 140, .07) 0%, transparent 45%, rgba(0, 0, 0, .45) 100%);
}
#app { position: relative; z-index: 1; }
::selection { background: var(--gold); color: var(--tinte); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tisch); }
::-webkit-scrollbar-thumb { background: var(--gold-2); border: 2px solid var(--tisch); }
canvas, img.px { image-rendering: pixelated; image-rendering: crisp-edges; }
svg.ico { display: inline-block; vertical-align: middle; flex: none; }

.karte {
  width: var(--kb); height: var(--kh);
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 calc(2px * var(--k)) 0 rgba(0, 0, 0, .35));
  transform-style: preserve-3d;
}
.karte.dreht { animation: dreh 360ms steps(12) both; }
@keyframes dreh {
  0% { transform: rotateY(0) scale(1); }
  50% { transform: rotateY(90deg) scale(1.08); }
  100% { transform: rotateY(0) scale(1); }
}