/* Solitär – eigene Farben (Tokens), Hell/Dunkel wie basis.css */
:root {
  --tisch1: #13603f;
  --tisch2: #0a3a27;
  --karte: #fdfdfb;
  --karte-rand: rgba(0, 0, 0, .22);
  --rot: #d42a2a;
  --schwarz: #1a1f2b;
  --ruecken1: #3d7bff;
  --ruecken2: #1d3f9a;
  --platz: rgba(255, 255, 255, .16);
  --platz-text: rgba(255, 255, 255, .28);
  --wahl: var(--kl-gold);
  --tipp: var(--akzent2);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --tisch1: #2b8a5b;
    --tisch2: #1c6a43;
    --platz: rgba(255, 255, 255, .22);
    --platz-text: rgba(255, 255, 255, .45);
  }
}

html, body { height: 100%; }
body { height: 100vh; height: 100dvh; overflow: hidden; }
#spiel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#leiste { padding: 5px 10px; font-size: 13px; gap: 12px; }
#leiste b { font-variant-numeric: tabular-nums; }

#tisch {
  flex: 1; position: relative; overflow: hidden; min-height: 0; touch-action: none;
  background: radial-gradient(ellipse at 50% 30%, var(--tisch1), var(--tisch2));
}

/* ---------- Plätze ---------- */
.platz {
  position: absolute; left: 0; top: 0; width: var(--w); height: var(--h);
  border-radius: calc(var(--w) * .1); border: 2px dashed var(--platz);
  display: flex; align-items: center; justify-content: center;
  color: var(--platz-text); font-weight: 800; font-size: calc(var(--w) * .42); cursor: pointer;
}
.platz.stapel { border-style: solid; }
.platz.stapel.leer::after { content: "↻"; font-size: calc(var(--w) * .55); }
.platz.stapel.aus::after { content: ""; }

/* ---------- Karten ---------- */
.karte {
  position: absolute; left: 0; top: 0; width: var(--w); height: var(--h);
  border-radius: calc(var(--w) * .1); background: var(--karte);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--karte-rand);
  transition: transform .2s ease, box-shadow .15s; will-change: transform; cursor: pointer;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
.karte.rot { color: var(--rot); }
.karte.schwarz { color: var(--schwarz); }
.vorne { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.ecke {
  position: absolute; left: 7%; right: 6%; top: 2%; display: flex; justify-content: space-between; align-items: flex-start;
  line-height: 1;
}
.ecke b { font-size: calc(var(--w) * .36); font-weight: 800; letter-spacing: -.06em; }
.ecke i { font-style: normal; font-size: calc(var(--w) * .32); margin-top: .04em; }
.mitte {
  position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; line-height: 1;
  font-size: calc(var(--w) * .62);
}
.vorne.bild .mitte {
  left: 14%; right: 14%; bottom: 8%; top: 36%; display: flex; align-items: center; justify-content: center;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: calc(var(--w) * .46);
  border-radius: calc(var(--w) * .07); border: 1.5px solid currentColor;
  background: color-mix(in srgb, currentColor 9%, var(--karte));
}
.hinten {
  position: absolute; inset: 0; border-radius: inherit; display: none;
  border: calc(var(--w) * .055) solid var(--karte);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, var(--ruecken1), var(--ruecken2));
}
.karte.zu .vorne { display: none; }
.karte.zu .hinten { display: block; }
.karte.zu { cursor: default; }

.karte.gewaehlt { box-shadow: 0 0 0 3px var(--wahl), 0 4px 10px rgba(0, 0, 0, .4); }
.karte.zieht { transition: none !important; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
.karte.fliegt { z-index: 900 !important; }
.karte.tipp, .platz.tipp { animation: tipp-puls .45s ease-in-out 4 alternate; }
@keyframes tipp-puls { to { box-shadow: 0 0 0 4px var(--tipp), 0 0 18px var(--tipp); } }
.karte.wackel { animation: wackel .3s; }
@keyframes wackel { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
#tisch.still .karte { transition: none !important; }

.kaskade { position: absolute; inset: 0; z-index: 2000; cursor: pointer; }

/* ---------- untere Leiste ---------- */
#unten {
  display: flex; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--kl-bg2); border-top: 1px solid var(--kl-linie);
}
.unten-knopf {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px; min-width: 0;
}
.unten-knopf .ik { font-size: 18px; line-height: 1.1; }
.unten-knopf .tx { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.unten-knopf.offen { box-shadow: 0 0 0 2px var(--kl-gold), 0 3px 0 rgba(0, 0, 0, .25); }

/* Vorschau-Bild (?vorschau) */
body.vorschau .kl-kopf, body.vorschau #leiste, body.vorschau #unten { display: none; }
.vorschau-titel {
  position: absolute; right: 18px; bottom: 16px; z-index: 3000; padding: 8px 20px; border-radius: 16px;
  background: var(--kl-bg2); color: var(--kl-text); font-weight: 900; font-size: 34px; box-shadow: var(--kl-schatten);
  border: 2px solid var(--kl-gold);
}

@media (prefers-reduced-motion: reduce) {
  .karte { transition: none; }
  .karte.tipp, .platz.tipp { animation-duration: .01s; }
}