/* Spider-Solitär – eigene Tokens, sonst basis.css */
:root {
  --tisch1: #11603f; --tisch2: #08382a;
  --karte-bg: #fffdf8; --karte-rand: rgba(0, 0, 0, .3);
  --rueck1: #3a6ff0; --rueck2: #1f3f9e; --rueck-muster: rgba(255, 255, 255, .16); --rueck-rand: rgba(255, 255, 255, .45);
  --f-pik: #18202f; --f-herz: #d8263b; --f-karo: #1c6ee0; --f-kreuz: #12884a;
  --platz: rgba(255, 255, 255, .25); --tipp: #ffd54a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --tisch1: #2e9a64; --tisch2: #1d7448; }
}
html, body { height: 100%; overflow: hidden; }
body { height: 100vh; height: 100dvh; min-height: 0; }

.kl-leiste { background: var(--kl-bg2); padding: 6px 8px; gap: 12px; font-size: 13px; }
#modus { color: var(--kl-gold); }

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

.werkzeug { display: flex; gap: 8px; justify-content: center; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--kl-bg2); border-top: 1px solid var(--kl-linie); }
.werkzeug .kl-knopf { flex: 1; max-width: 180px; white-space: nowrap; }

.karte { position: absolute; left: 0; top: 0; width: var(--kw); height: var(--kh); border-radius: calc(var(--kw) * .11);
  background: var(--karte-bg); border: 1px solid var(--karte-rand); box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: left .22s ease, top .22s ease; cursor: pointer; overflow: hidden; }
.karte.zieht { transition: none; box-shadow: 0 10px 20px rgba(0, 0, 0, .45); cursor: grabbing; }
#tisch.still .karte { transition: none; }
.karte .ecke { position: absolute; left: 6%; top: 1px; font-weight: 900; font-size: var(--kf); line-height: 1.05;
  letter-spacing: -.05em; white-space: nowrap; font-family: "Segoe UI", system-ui, Roboto, Arial, sans-serif; }
.karte .ecke i { font-style: normal; margin-left: 1px; }
.karte .mitte { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: calc(var(--kw) * .6); line-height: 1; font-weight: 800; }
.pik { color: var(--f-pik); } .herz { color: var(--f-herz); } .karo { color: var(--f-karo); } .kreuz { color: var(--f-kreuz); }

.karte.zu { cursor: default; border-color: var(--rueck-rand);
  background: repeating-linear-gradient(45deg, var(--rueck-muster) 0 3px, transparent 3px 7px), linear-gradient(160deg, var(--rueck1), var(--rueck2)); }
.karte.zu > * { display: none; }
.karte.vorrat { cursor: pointer; }

.platz { position: absolute; width: var(--kw); height: var(--kh); border-radius: calc(var(--kw) * .11);
  border: 2px dashed var(--platz); pointer-events: none; display: flex; align-items: center; justify-content: center;
  color: var(--platz); font-size: calc(var(--kw) * .4); font-weight: 900; }

.tipp, .tipp-ziel { outline: 3px solid var(--tipp); outline-offset: -2px; animation: puls .5s infinite alternate; }
@keyframes puls { to { outline-color: transparent; } }
.wackel { animation: wackel .3s; }
@keyframes wackel { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

.kaskade { position: fixed; inset: 0; z-index: 40; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .karte { transition: none; } .tipp, .tipp-ziel { animation: none; } }