/* Mahjong – eigene Farben der Steine (Steine bleiben in Hell und Dunkel elfenbeinfarben) */
:root {
  --akzent: #2fa36b;
  --mj-stein: #fffaf0;
  --mj-stein2: #ebe0c6;
  --mj-rand: #b89b62;
  --mj-seite: #d8bf8a;
  --mj-seite2: #9c7a3c;
  --mj-blau: #1f5fbf;
  --mj-rot: #c62d2d;
  --mj-gruen: #17874a;
  --mj-gold: #e3a400;
  --mj-orange: #f07a12;
  --mj-lila: #7b3fc4;
  --mj-rosa: #e0569b;
  --mj-cyan: #1597c4;
  --mj-dunkel: #2a2117;
  --mj-wahl: #ffd54a;
  --mj-tipp: #38e1c6;
  --mj-gesperrt: rgba(40, 30, 10, .16);
  --mj-tisch1: #145c3f;
  --mj-tisch2: #0b3526;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --mj-tisch1: #2f8a62; --mj-tisch2: #1c6446; }
}
html, body { height: 100%; overflow: hidden; }
body { height: 100vh; height: 100dvh; min-height: 0; }
.mj-info { padding: 6px 10px; gap: 12px; font-size: 13px; }
.mj-info #mj-form { color: var(--kl-text); }
#mj-feld { flex: 1; min-height: 0; position: relative;
  background: radial-gradient(ellipse at 50% 40%, var(--mj-tisch1), var(--mj-tisch2)); }
#mj-brett { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; cursor: pointer; }
.mj-unten { display: flex; gap: 8px; justify-content: center; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--kl-bg2); border-top: 1px solid var(--kl-linie); }
.mj-unten .kl-knopf { flex: 1; max-width: 160px; padding: 10px 6px; font-size: 15px; white-space: nowrap; }
.mj-unten small { font-size: 10px; opacity: .7; vertical-align: middle; }
.mj-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mj-wahl .kl-knopf { padding: 10px 6px; font-size: 14px; }
.mj-wahl .kl-knopf span { display: block; font-size: 11px; font-weight: 600; opacity: .75; margin-top: 2px; }
.mj-wahl .tag { grid-column: 1 / -1; }
.kl-kopf .kl-knopf.klein { padding: 6px 9px; }
@media (max-width: 360px) { .mj-unten .kl-knopf { font-size: 13px; } .mj-info { gap: 8px; font-size: 12px; } }
/* Vorschau-Modus für vorschau.png */
body.vorschau .kl-kopf, body.vorschau .mj-info, body.vorschau .mj-unten { display: none; }
.mj-schild { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 180px; color: #fff; text-align: center;
  font: 900 34px/1.1 "Segoe UI", system-ui, sans-serif; text-shadow: 0 3px 8px rgba(0, 0, 0, .5); pointer-events: none; }
.mj-schild span { display: block; font-size: 15px; font-weight: 700; opacity: .9; margin-top: 8px; }
.mj-schild i { display: block; font-style: normal; font-size: 54px; margin-bottom: 6px; }