* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: 'Pirata One';
  src: url('fonts/PirataOne-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg: #45131a;        /* getrocknetes Königinnen-Rot, entsättigt (Burton) */
  --bg-deep: #2b0b10;   /* Vertiefungen */
  --paper: #e9dfc9;     /* Pergament */
  --card: #f2ead8;      /* Kartenblatt, leicht gealtert */
  --ink: #26201c;       /* Tinte */
  --red: #9e2b33;       /* tiefes Crimson */
  --gold: #c9a24b;      /* Antik-Gold — nur sparsam */
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 50% 15%, #58202a, var(--bg) 55%, var(--bg-deep) 100%);
  color: var(--paper);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.screen {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);
  max-width: 480px;
  margin: 0 auto;
}
.screen.active { display: flex; }

h1, h2 {
  font-family: 'Pirata One', Georgia, serif;
  font-weight: 400;
  letter-spacing: 1.5px;
}

/* ---------- Home ---------- */

.home-header { text-align: center; margin-bottom: 22px; }
.home-header h1 { font-size: 3rem; color: var(--paper); text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.subtitle { opacity: 0.8; margin-top: 4px; }

#home-stats { width: 100%; margin-bottom: 24px; }
.empty { text-align: center; opacity: 0.85; font-style: italic; padding: 20px 0; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.tile {
  background: var(--bg-deep);
  border: 1px solid rgba(250, 243, 228, 0.22);
  border-radius: 12px;
  padding: 12px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tile strong { font-size: 1.3rem; color: var(--paper); }
.tile span { font-size: 0.72rem; opacity: 0.7; }

.reps-list {
  list-style: none;
  background: var(--bg-deep);
  border: 1px solid rgba(250, 243, 228, 0.22);
  border-radius: 12px;
  padding: 6px 16px;
  width: 100%;
}
.reps-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(250, 243, 228, 0.15);
}
.reps-list li:last-child { border-bottom: none; }
.reps-list strong { color: var(--paper); }

/* Buttons wie aufgelegte Spielkarten */
.btn-primary {
  font-family: 'Pirata One', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--red);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 18px 44px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink), 0 10px 18px rgba(0, 0, 0, 0.35);
  margin-bottom: 26px;
}
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

.btn-ghost {
  background: none;
  border: none;
  color: rgba(250, 243, 228, 0.55);
  font-size: 0.9rem;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Regelkarte ---------- */

.rules {
  width: 100%;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 16px 18px 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.rules h3 {
  font-family: 'Pirata One', Georgia, serif;
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 1.2rem;
  text-align: center;
  color: var(--red);
  margin-bottom: 10px;
}
.rules-suits {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-bottom: 10px;
}
.rules-suits li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}
.rules-suits .suit { font-size: 1.25rem; width: 1.3em; text-align: center; }
.suit.red { color: var(--red); }
.suit.black { color: var(--ink); }

.rules-values {
  border-top: 1px solid rgba(38, 32, 28, 0.2);
  padding-top: 9px;
  font-size: 0.88rem;
  text-align: center;
  line-height: 1.7;
}
.rules-values strong { color: var(--red); }

/* ---------- Install-Hilfe ---------- */

.install-help {
  width: 100%;
  margin-top: 16px;
  font-size: 0.88rem;
  color: rgba(250, 243, 228, 0.85);
}
.install-help summary {
  cursor: pointer;
  padding: 8px 0;
  text-align: center;
  color: rgba(250, 243, 228, 0.7);
  text-decoration: underline;
  list-style: none;
}
.install-help summary::-webkit-details-marker { display: none; }
.install-steps { padding: 6px 4px 0; line-height: 1.55; display: flex; flex-direction: column; gap: 8px; }
.install-steps strong { color: var(--paper); }
.icon-hint { opacity: 0.7; }

/* Läuft die App bereits installiert (standalone), ist die Anleitung überflüssig */
@media (display-mode: standalone) {
  .install-help { display: none; }
}

/* ---------- Countdown ---------- */

#screen-countdown { justify-content: center; gap: 40px; }

.shuffle-stage { position: relative; width: 140px; height: 190px; }
.mini-card {
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 12px;
  background-image: repeating-linear-gradient(45deg,
    rgba(158, 43, 51, 0.35) 0 8px, transparent 8px 16px);
}
.c1 { animation: shuf1 0.9s ease-in-out infinite; }
.c2 { animation: shuf2 0.9s ease-in-out infinite; }
.c3 { animation: shuf3 0.9s ease-in-out infinite; }

@keyframes shuf1 {
  0%, 100% { transform: translateX(0) rotate(-6deg); z-index: 3; }
  50%      { transform: translateX(-56px) rotate(-14deg); z-index: 1; }
}
@keyframes shuf2 {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50%      { transform: translateY(-22px) rotate(8deg); }
}
@keyframes shuf3 {
  0%, 100% { transform: translateX(0) rotate(7deg); z-index: 1; }
  50%      { transform: translateX(56px) rotate(15deg); z-index: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .c1, .c2, .c3 { animation: none; }
  #card-area { animation: none; }
}

#countdown-text {
  font-family: 'Pirata One', Georgia, serif;
  font-size: 4rem;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
  min-height: 1.2em;
}

/* ---------- Workout ---------- */

#screen-workout { justify-content: space-between; }

.workout-top { text-align: center; }

#timer {
  font-size: 4.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
#timer.urgent { color: var(--gold); }

#progress { opacity: 0.8; font-size: 1rem; margin-top: 2px; }

#card-area {
  width: min(78vw, 300px, 46dvh);
  cursor: pointer;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
  animation: deal 0.25s ease-out;
}
#card-area svg { display: block; width: 100%; height: auto; }

@keyframes deal {
  from { transform: translateY(16px) rotate(-3deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.tap-hint {
  font-size: 0.88rem;
  color: rgba(233, 223, 201, 0.6);
  text-align: center;
}

/* ---------- Ergebnis ---------- */

#screen-result { justify-content: center; gap: 22px; }
#screen-result h2 { font-size: 2.6rem; color: var(--paper); }

#result-stats { width: 100%; display: flex; flex-direction: column; gap: 16px; }

.score {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.score strong { font-size: 4rem; color: var(--gold); line-height: 1; }
.score span { opacity: 0.85; }

.total-reps { text-align: center; opacity: 0.85; }