/* ============================================================
   style.css  —  "Shot oder nicht?"
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; color: #fff; text-align: center; padding: 24px 18px 40px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; align-items: center; justify-content: 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.7rem; text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.subtitle { margin: 0 0 26px; opacity: 0.95; font-size: 0.95rem; }

.result { min-height: 130px; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 420px; margin-bottom: 22px; }
.box {
  width: 100%; border-radius: 20px; padding: 22px 20px; font-weight: 900; line-height: 1.35;
  box-shadow: 0 12px 34px rgba(0,0,0,0.4); animation: pop 0.45s ease;
}
.box.ja   { background: linear-gradient(180deg,#06d6a0,#039e76); color: #042b22; font-size: 1.8rem; }
.box.nein { background: linear-gradient(180deg,#9aa0a6,#6b7177); color: #1a1a1a; font-size: 1.5rem; }
.box.sassy{ background: linear-gradient(180deg,#ffd23f,#ff8c42); color: #2a0845; font-size: 1.2rem; }
.box .em { font-size: 2.6rem; display: block; margin-bottom: 6px; }
.thinking { font-size: 1.6rem; font-weight: 800; opacity: 0.95; animation: blink 0.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
@keyframes pop { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.06);opacity:1} 100%{transform:scale(1)} }

.ask-btn {
  border: none; border-radius: 999px; padding: 17px 34px; font-size: 1.2rem; font-weight: 900; cursor: pointer;
  color: #6a0572; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.ask-btn:active { transform: scale(0.96); }
.ask-btn:disabled { opacity: 0.6; }