/* Styles für die Spiele (aktuell: Blitz).
   Ergänzt app.css — nutzt dessen Variablen (--card, --ink, --primary,
   --accent, --success, --radius, --shadow) und definiert zusätzlich
   die vier kräftigen Kartenfarben. */

:root {
  --k-rot: #e63946;
  --k-rot-hell: #ff7a83;
  --k-blau: #1d7ae0;
  --k-blau-hell: #6cb6ff;
  --k-gruen: #23a455;
  --k-gruen-hell: #6fd995;
  --k-gelb: #f2b705;
  --k-gelb-hell: #ffd968;
  --k-wunsch: #6b4fd8;
  --karte-b: 76px;   /* Kartenbreite Hand (großes Touch-Ziel) */
  --karte-h: 110px;
}

/* ============ Rahmen ============ */

.blitz-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  position: relative;
}

.blitz-mitte {
  justify-content: flex-start;
  padding: 6px 10px 120px;
  gap: 12px;
}

/* ============ Modus-Auswahl ============ */

.blitz-modus-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 340px;
}

.blitz-modus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 20px;
  padding: 16px 22px;
  min-height: 68px;
}

.blitz-modus-icon { font-size: 30px; line-height: 1; }

.blitz-namenszeile {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.blitz-namensknopf {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  padding: 12px 20px;
  min-height: 60px;
  flex: 1;
}

/* ============ Spieltisch ============ */

.blitz-tisch {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.blitz-gegner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 14px;
  width: 100%;
  min-height: 82px;
}

.blitz-gegner-kopf { display: flex; align-items: center; flex-shrink: 0; }
.blitz-avatar { font-size: 40px; line-height: 1; }

.blitz-gegnerkarten {
  display: flex;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.blitz-gegnerkarten .blitz-karte { margin-left: -22px; }
.blitz-gegnerkarten .blitz-karte:first-child { margin-left: 0; }

.blitz-anzahl {
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  background: linear-gradient(180deg, #fff, #eef8e3);
  border-radius: 999px;
  min-width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

.blitz-gegner.blitz-warnung {
  animation: blitzPuls 0.9s ease-in-out infinite;
}

@keyframes blitzPuls {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 6px rgba(255, 192, 46, 0.55), var(--shadow); }
}

/* ---- Mitte: Ziehstapel | Ablage | Farbring ---- */

.blitz-tischmitte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 0;
  min-height: 170px;
}

.blitz-ablage .blitz-karte {
  --karte-b: 110px;
  --karte-h: 158px;
  transform: rotate(-3deg);
}

.blitz-ziehstapel {
  background: none;
  padding: 0;
  border-radius: 16px;
  position: relative;
}

.blitz-ziehstapel .blitz-karte { --karte-b: 74px; --karte-h: 108px; }

.blitz-ziehstapel.blitz-leuchtet {
  animation: blitzLeuchtet 1.1s ease-in-out infinite;
  border-radius: 18px;
}

@keyframes blitzLeuchtet {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 30, 0.7); }
  50% { box-shadow: 0 0 0 12px rgba(255, 138, 30, 0); }
}

.blitz-farbring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), var(--shadow);
  border: 4px solid #fff;
  flex-shrink: 0;
}

.blitz-farbring.blitz-gewuenscht {
  animation: blitzPuls 1.2s ease-in-out infinite;
}

/* ---- Wer ist dran ---- */

.blitz-dran {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
  line-height: 1;
  min-height: 40px;
}

.blitz-pfeil { animation: blitzWippt 1.2s ease-in-out infinite; }

@keyframes blitzWippt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---- Eigene Hand ---- */

.blitz-hand {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 8px 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.blitz-hand::-webkit-scrollbar { height: 6px; }
.blitz-hand::-webkit-scrollbar-thumb { background: rgba(45, 74, 34, 0.25); border-radius: 999px; }

/* ============ Karten ============ */

.blitz-karte {
  width: var(--karte-b);
  height: var(--karte-h);
  min-width: var(--karte-b);
  border-radius: 14px;
  border: 3px solid #fff;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
}

.blitz-karte-klein { --karte-b: 40px; --karte-h: 58px; border-radius: 9px; border-width: 2px; }

.blitz-karte .blitz-gross {
  font-size: calc(var(--karte-h) * 0.52);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.blitz-karte .blitz-eck {
  position: absolute;
  top: 4px;
  left: 7px;
  font-size: calc(var(--karte-h) * 0.17);
  font-weight: 900;
  opacity: 0.9;
  pointer-events: none;
}

.blitz-karte[data-farbe='rot']   { background: linear-gradient(160deg, var(--k-rot-hell), var(--k-rot)); }
.blitz-karte[data-farbe='blau']  { background: linear-gradient(160deg, var(--k-blau-hell), var(--k-blau)); }
.blitz-karte[data-farbe='gruen'] { background: linear-gradient(160deg, var(--k-gruen-hell), var(--k-gruen)); }
.blitz-karte[data-farbe='gelb']  { background: linear-gradient(160deg, var(--k-gelb-hell), var(--k-gelb)); color: #5a3d00; text-shadow: none; }
.blitz-karte[data-farbe='wunsch'] {
  background:
    conic-gradient(from 0deg, var(--k-rot), var(--k-gelb), var(--k-gruen), var(--k-blau), var(--k-rot));
}

.blitz-farbring[data-farbe='rot']   { background: var(--k-rot); }
.blitz-farbring[data-farbe='blau']  { background: var(--k-blau); }
.blitz-farbring[data-farbe='gruen'] { background: var(--k-gruen); }
.blitz-farbring[data-farbe='gelb']  { background: var(--k-gelb); }
.blitz-farbring[data-farbe='wunsch'] {
  background: conic-gradient(from 0deg, var(--k-rot), var(--k-gelb), var(--k-gruen), var(--k-blau), var(--k-rot));
}

/* Rückseite */
.blitz-rueck {
  background: linear-gradient(160deg, #4b5d7a, #223046);
  color: #ffd968;
}
.blitz-rueck .blitz-gross { font-size: calc(var(--karte-h) * 0.4); }

/* Spielbar = leuchtet und steht etwas höher; nicht spielbar = grau und tot */
.blitz-legbar {
  cursor: pointer;
  transform: translateY(-8px);
  box-shadow: 0 0 0 3px var(--gold), 0 8px 16px rgba(45, 90, 40, 0.3);
}
.blitz-legbar:active { transform: translateY(-2px) scale(0.96); }

.blitz-tot {
  filter: grayscale(0.85) brightness(0.9);
  opacity: 0.55;
  cursor: default;
}

/* ============ Overlays (Farbwunsch, Übergabe) ============ */

.blitz-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 45, 20, 0.72);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 20px;
}

.blitz-farbwahl {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.blitz-farbwahl-titel { font-size: 54px; line-height: 1; }

.blitz-farbwahl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.blitz-farbfeld {
  width: 108px;
  height: 108px;
  border-radius: 20px;
  border: 4px solid #fff;
  box-shadow: var(--shadow);
}
.blitz-farbfeld:active { transform: scale(0.94); }
.blitz-farbfeld[data-farbe='rot']   { background: linear-gradient(160deg, var(--k-rot-hell), var(--k-rot)); }
.blitz-farbfeld[data-farbe='blau']  { background: linear-gradient(160deg, var(--k-blau-hell), var(--k-blau)); }
.blitz-farbfeld[data-farbe='gruen'] { background: linear-gradient(160deg, var(--k-gruen-hell), var(--k-gruen)); }
.blitz-farbfeld[data-farbe='gelb']  { background: linear-gradient(160deg, var(--k-gelb-hell), var(--k-gelb)); }

/* Übergabe zwischen zwei Spielern — niemand soll die fremden Karten sehen */
.blitz-uebergabe { background: rgba(15, 35, 15, 0.94); }
.blitz-uebergabe-icon { font-size: 96px; animation: blitzWippt 1.6s ease-in-out infinite; }
.blitz-uebergabe-wer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 62px;
  line-height: 1;
}
.blitz-weiter { font-size: 40px; min-width: 160px; min-height: 84px; }

/* ============ „Blitz!"-Ruf ============ */

.blitz-ruf {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 150px;
  pointer-events: none;
  z-index: 80;
  animation: blitzRufAn 1.4s ease-out forwards;
}

@keyframes blitzRufAn {
  0% { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  25% { transform: scale(1.25) rotate(6deg); opacity: 1; }
  60% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ============ Ende + Abklatsch-Ritual ============ */

.blitz-ende, .blitz-abschluss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
}

.blitz-ende-kopf { display: flex; justify-content: center; }
.blitz-ende-zeichen { font-size: 72px; line-height: 1; }

.blitz-abklatsch {
  font-size: 74px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff3c9, var(--gold));
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.6), 0 8px 18px rgba(200, 150, 0, 0.4);
  animation: blitzKlatschAn 1.4s ease-in-out infinite;
}

@keyframes blitzKlatschAn {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50% { transform: scale(1.07) rotate(3deg); }
}

.blitz-abklatsch.geklatscht { animation: none; transform: scale(0.9); }

.blitz-nochmal-hoeren { align-self: center; }

.blitz-abschluss-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}

/* Kleine Geräte: Karten etwas schmaler, aber immer noch ≥ 64px Touch-Ziel */
@media (max-width: 380px) {
  :root { --karte-b: 66px; --karte-h: 96px; }
  .blitz-ablage .blitz-karte { --karte-b: 96px; --karte-h: 138px; }
}