/* ============================================================
   style.css  —  "Höher oder Tiefer?"
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; color: #fff; text-align: center; padding: 22px 18px 40px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; align-items: center; user-select: none;
  background: linear-gradient(160deg, #00b4d8, #0077b6);
}
body.theme-neon   { background: linear-gradient(160deg, #f706cf, #7b2ff7, #00f5d4); }
body.theme-sunset { background: linear-gradient(160deg, #ff8c42, #ff5d8f, #6a0572); }
body.theme-ocean  { background: linear-gradient(160deg, #00b4d8, #0077b6, #023e8a); }
body.theme-party  { background: linear-gradient(160deg, #f9d423, #ff4e50, #6a0572); }

h1 { margin: 0 0 4px; font-size: 1.6rem; text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.subtitle { margin: 0 0 14px; opacity: 0.95; font-size: 0.9rem; line-height: 1.4; max-width: 360px; }
.streaks { display: flex; gap: 18px; font-weight: 800; margin-bottom: 14px; }
.streaks b { color: #ffd23f; }

.card-stage { perspective: 1000px; margin-bottom: 20px; }
.card {
  width: 150px; height: 210px; border-radius: 18px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 14px 36px rgba(0,0,0,0.4); position: relative;
}
.card.flip { animation: flip 0.4s ease; }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.card .rank { font-size: 4.2rem; font-weight: 900; color: #2a0845; line-height: 1; }
.card .suit { font-size: 2.6rem; color: #2a0845; margin-top: 4px; }
.card .rank.red, .card .suit.red { color: #e2243b; }

.buttons { display: flex; gap: 14px; }
.hl-btn {
  border: none; border-radius: 16px; padding: 16px 24px; font-size: 1.15rem; font-weight: 900; cursor: pointer;
  color: #2a0845; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.hl-btn.up { background: linear-gradient(180deg,#06d6a0,#039e76); color: #042b22; }
.hl-btn.down { background: linear-gradient(180deg,#ffd23f,#ff8c42); }
.hl-btn:active { transform: scale(0.96); }
.hl-btn:disabled { opacity: 0.45; }

.msg { margin-top: 18px; min-height: 1.6em; font-size: 1.15rem; font-weight: 800; text-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.msg.g { color: #b8ffd9; } .msg.l { color: #ffd0dc; } .msg.n { color: #fff; }

.over { margin-top: 8px; }
.strafe {
  display: inline-block; background: rgba(0,0,0,0.32); border: 2px solid rgba(255,255,255,0.5);
  border-radius: 16px; padding: 16px 22px; font-weight: 800; font-size: 1.1rem; line-height: 1.4; margin-bottom: 14px; animation: pop 0.4s ease;
}
.strafe b { color: #ffd23f; font-size: 1.3rem; display: block; margin-top: 4px; }
@keyframes pop { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.08);opacity:1} 100%{transform:scale(1)} }
.again-btn {
  display: block; margin: 0 auto; border: none; border-radius: 999px; padding: 14px 30px;
  font-size: 1.1rem; font-weight: 900; cursor: pointer; color: #6a0572; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.again-btn:active { transform: scale(0.96); }
.hidden { display: none !important; }