/* ============================================================
   style.css  —  "Schande oder Wahrheit?"  (Beweis-Edition)
   ============================================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0; min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff; text-align: center; padding: 22px 18px 48px;
  display: flex; flex-direction: column; align-items: center;
  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 4px; opacity: 0.95; font-size: 0.95rem; }
.who { font-size: 0.82rem; opacity: 0.85; margin-bottom: 14px; font-weight: 700; }

.lvl-label { font-weight: 800; opacity: 0.95; margin-bottom: 8px; }
.levels { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.lvl-btn { --lc: #888; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 3px solid transparent; border-radius: 16px; cursor: pointer; padding: 10px 16px; min-width: 92px;
  font-weight: 800; font-size: 0.95rem; background: rgba(255,255,255,0.92); color: #2a0845; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.lvl-btn .lvl-emo { font-size: 1.5rem; }
.lvl-btn.active { border-color: #fff; box-shadow: 0 0 0 3px var(--lc), 0 6px 16px rgba(0,0,0,0.35); }

/* ---- Karten-Deal aus dem Stapel ---- */
.card-table { position: relative; width: min(90vw, 400px); min-height: 320px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; }

/* Der Stapel hinter der Karte (groß & deutlich gefächert) */
.deck { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.deck i {
  position: absolute; width: 84%; height: 234px; border-radius: 20px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 10px, rgba(255,255,255,0) 10px 20px),
    linear-gradient(150deg, #25103f, #531a5c);
  border: 3px solid rgba(255,255,255,0.6);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45);
  transition: transform 0.4s cubic-bezier(.3,1.4,.4,1);
}
.deck i:nth-child(1) { transform: translate(24px, 28px) rotate(9deg);  opacity: 0.5; }
.deck i:nth-child(2) { transform: translate(15px, 18px) rotate(6deg);  opacity: 0.66; }
.deck i:nth-child(3) { transform: translate(7px, 9px) rotate(3deg);    opacity: 0.83; }
.deck i:nth-child(4) { transform: translate(0, 0) rotate(0deg); }
.card-table.idle .deck { animation: floaty 3.2s ease-in-out infinite; }

/* Austeil-Fächer: beim Ziehen spreizen sich die Karten kurz auf */
.card-table.dealing .deck i:nth-child(1) { transform: translate(-64px, 12px) rotate(-22deg); }
.card-table.dealing .deck i:nth-child(2) { transform: translate(-26px, -8px) rotate(-9deg); }
.card-table.dealing .deck i:nth-child(3) { transform: translate(28px, -8px) rotate(9deg); }
.card-table.dealing .deck i:nth-child(4) { transform: translate(66px, 12px) rotate(22deg); }

/* Bühne + fliegende/klappende Karte */
.card-stage { perspective: 1400px; width: 100%; }
.card-stage.reveal { animation: stagePop 0.6s ease-out; }
@keyframes stagePop { 0% { transform: scale(0.96); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }

.card-fly { width: 100%; }
.card-table.idle .card-fly { opacity: 0; }     /* vor dem ersten Ziehen: nur der Stapel */
.card-fly.flyin { animation: dealFly 0.85s cubic-bezier(.2,.8,.25,1) both; }
@keyframes dealFly {
  0%   { transform: translate(210px, 80px) scale(0.24) rotateZ(46deg); opacity: 0; }   /* von rechts unten, klein */
  16%  { opacity: 1; }
  46%  { transform: translate(-50px, -40px) scale(0.92) rotateZ(-14deg); }              /* Bogen nach links-oben */
  74%  { transform: translate(18px, -8px) scale(1.07) rotateZ(6deg); }                  /* leichtes Überschwingen */
  100% { transform: translate(0, 0) scale(1) rotateZ(0); }
}

.card3d {
  position: relative; width: 100%; min-height: 230px; transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2,1.25,.3,1);   /* Overshoot beim Aufklappen */
  transform: rotateY(0deg);
}
.card3d.flipped { transform: rotateY(180deg); }
.card3d.shuffling { animation: shuffle 0.7s ease-in-out infinite; }
@keyframes shuffle {
  0%,100% { transform: rotateY(0) rotateZ(0) scale(1); }
  25% { transform: rotateY(-10deg) rotateZ(-3deg) scale(1.02); }
  50% { transform: rotateY(10deg) rotateZ(3deg) scale(1.03); }
  75% { transform: rotateY(-5deg) rotateZ(-1.5deg) scale(1.02); }
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 22px; padding: 22px 20px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.face.back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 10px, rgba(255,255,255,0) 10px 20px),
    linear-gradient(150deg, #2a0845, #6a0572);
  border: 4px solid rgba(255,255,255,0.85);
}
/* wandernder Schimmer auf der Rückseite */
.face.back::after {
  content: ""; position: absolute; top: -60%; left: -30%; width: 50%; height: 220%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: rotate(18deg) translateX(-220%); pointer-events: none;
  animation: backShimmer 3.6s ease-in-out infinite;
}
@keyframes backShimmer { 0% { transform: rotate(18deg) translateX(-220%); } 60%, 100% { transform: rotate(18deg) translateX(340%); } }
/* 🃏 pulsiert ruhig im Leerlauf, hektisch nur beim Spannungsaufbau */
.suspense { font-size: 3.2rem; min-height: 3.4rem; animation: susIdle 2.6s ease-in-out infinite; }
.card3d.shuffling .suspense { animation: susPulse 0.45s ease-in-out infinite alternate; }
@keyframes susIdle { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes susPulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.18); opacity: 1; } }
.back-title { font-size: 1.5rem; font-weight: 900; letter-spacing: 1px; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }

.face.front {
  transform: rotateY(180deg);
  background: var(--cardcol, #444); color: #fff;
  border: 4px solid rgba(255,255,255,0.35);
}
/* Holo-Folie: regenbogen-Schimmer wandert über die aufgedeckte Karte */
.face.front::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,0,128,0) 18%, rgba(255,0,128,0.40), rgba(255,210,0,0.40), rgba(0,255,170,0.40),
    rgba(0,170,255,0.40), rgba(180,0,255,0.40), rgba(255,0,128,0) 82%);
  background-size: 250% 250%;
  mix-blend-mode: soft-light; opacity: 0;
}
.card3d.flipped .face.front::before { opacity: 1; animation: holo 3.6s linear infinite; }
@keyframes holo { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* Glanz-Streifen wischt beim Aufdecken einmal über die Karte */
.face.front::after {
  content: ""; position: absolute; top: -60%; left: -30%; width: 50%; height: 220%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: rotate(18deg) translateX(-220%); pointer-events: none;
}
.card3d.flipped .face.front::after { animation: shine 0.85s ease-out 0.18s; }
@keyframes shine { to { transform: rotate(18deg) translateX(320%); } }
/* sanftes Dauerleuchten der aufgedeckten Karte */
.card3d.flipped .face.front { animation: glow 1.7s ease-in-out 0.6s infinite alternate; }
@keyframes glow { from { box-shadow: 0 16px 40px rgba(0,0,0,0.45); } to { box-shadow: 0 16px 52px rgba(0,0,0,0.45), 0 0 30px 5px rgba(255,255,255,0.5); } }

.card-type { font-size: 0.95rem; font-weight: 900; letter-spacing: 1.5px; padding: 6px 16px; border-radius: 999px; background: rgba(0,0,0,0.34); }
.card-text { font-size: 1.4rem; font-weight: 800; line-height: 1.35; text-shadow: 0 2px 6px rgba(0,0,0,0.4); }
/* Stempel-Effekt: Typ knallt rein; Frage ploppt danach (bei jedem Flip neu) */
.card3d.flipped .card-type { animation: stamp 0.5s cubic-bezier(.2,.9,.2,1) 0.22s both; }
.card3d.flipped .card-text { animation: textIn 0.5s ease-out 0.42s both; }
@keyframes stamp {
  0%   { transform: scale(2.4) rotate(-12deg); opacity: 0; }
  55%  { transform: scale(0.86) rotate(3deg);  opacity: 1; }
  75%  { transform: scale(1.09) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes textIn { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.draw-btn { border: none; border-radius: 999px; padding: 16px 40px; font-size: 1.25rem; font-weight: 900; cursor: pointer; color: #6a0572; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.draw-btn:active { transform: scale(0.96); }

/* ---- Antwort / Beweis ---- */
.after { width: min(88vw, 380px); margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
#answer-input { width: 100%; border: none; border-radius: 14px; padding: 12px; font-size: 1rem; resize: vertical; font-family: inherit; }
.send-btn { border: none; border-radius: 999px; padding: 13px 22px; font-size: 1.05rem; font-weight: 900; cursor: pointer; background: linear-gradient(180deg,#06d6a0,#039e76); color: #042b22; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.send-btn:active { transform: scale(0.97); }
.send-btn:disabled { opacity: 0.6; }
.proof-hint { font-size: 0.85rem; opacity: 0.95; margin: 0; }
.proof-pick { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pick-btn { border: none; border-radius: 14px; padding: 14px 18px; font-weight: 800; font-size: 1rem; cursor: pointer; background: rgba(255,255,255,0.92); color: #2a0845; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.pick-btn:active { transform: scale(0.96); }
.proof-preview { display: flex; justify-content: center; }
.proof-thumb { max-width: 100%; max-height: 240px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.after-msg { margin-top: 14px; min-height: 1.4em; font-weight: 800; }

.links { margin-top: 22px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.link { color: #fff; font-weight: 800; text-decoration: none; opacity: 0.95; border-bottom: 2px solid rgba(255,255,255,0.6); padding-bottom: 2px; }
.as-btn { background: none; border: none; border-bottom: 2px solid rgba(255,255,255,0.6); cursor: pointer; font-size: 1rem; }

/* ---- Modals ---- */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.66); display: flex; align-items: center; justify-content: center; padding: 18px; }
.modal-card { width: 100%; max-width: 420px; background: linear-gradient(160deg, #241b35, #1d1d2b); border: 2px solid rgba(255,255,255,0.18); border-radius: 20px; padding: 22px; text-align: left; box-shadow: 0 16px 50px rgba(0,0,0,0.55); max-height: 90vh; overflow-y: auto; }
.modal-wide { max-width: 460px; }
.modal-card h2 { margin: 0 0 10px; text-align: center; }
.modal-card input[type=text] { width: 100%; padding: 12px; border: none; border-radius: 10px; font-size: 1rem; margin-bottom: 8px; }
.hint { font-size: 0.85rem; opacity: 0.85; margin: 6px 0; }
.privacy { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 12px; margin: 12px 0; font-size: 0.86rem; line-height: 1.45; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 0.9rem; cursor: pointer; }
.consent input { width: 22px; height: 22px; accent-color: #06d6a0; flex: none; }
.modal-card .send-btn { width: 100%; margin-top: 6px; }

/* Meine Beiträge */
.mine-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.mine-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.07); border-radius: 12px; padding: 10px; }
.mine-txt { flex: 1; font-size: 0.9rem; line-height: 1.35; }
.mine-q { opacity: 0.7; font-size: 0.8rem; }
.mine-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }
.btn-danger { border: none; background: rgba(255,80,120,0.92); color: #fff; border-radius: 10px; padding: 9px 12px; font-weight: 800; cursor: pointer; flex: none; }

/* Vollbild Medien */
.media-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.media-content img, .media-content video { max-width: 100%; max-height: 88vh; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.media-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.92); color: #2a0845; font-size: 1.3rem; font-weight: 900; }

.hidden { display: none !important; }