:root{
  --bg:        #FBF3EE;
  --bg-2:      #F4E1DE;
  --card:      #FFFCFA;
  --card-back: #FFF7F4;
  --ink:       #3A2A2E;
  --ink-soft:  #8A7076;
  --rose:      #B23A5B;
  --rose-soft: #E9C4CE;
  --gold:      #C39A4E;
  --line:      #F0DEDA;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  user-select:none;
}
html,body{height:100%; overflow:hidden;}
body{
  margin:0;
  font-family:"Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:radial-gradient(125% 85% at 50% 8%, var(--bg-2) 0%, var(--bg) 58%), var(--bg);
  height:100dvh;
  display:flex; flex-direction:column;
  overscroll-behavior:none;
}

.hearts{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
.hearts span{position:absolute; bottom:-40px; color:var(--rose-soft); opacity:0; animation:rise linear infinite;}
@keyframes rise{
  0%{transform:translateY(0) scale(.8) rotate(0); opacity:0;}
  12%{opacity:.7;} 85%{opacity:.3;}
  100%{transform:translateY(-115dvh) scale(1.1) rotate(20deg); opacity:0;}
}

.stage{
  position:relative; z-index:1;
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:
    calc(env(safe-area-inset-top) + 16px) 18px
    calc(env(safe-area-inset-bottom) + 14px);
}

.deck{
  position:relative;
  width:min(100%, 380px);
  height:min(72dvh, 560px);
  perspective:1500px;
}

/* --- Karte --- */
.card{
  position:absolute; inset:0;
  will-change:transform;
  transition:transform .55s cubic-bezier(.2,.8,.25,1), opacity .45s ease;
  touch-action:none;
}
.card.dragging{transition:none;}
.card.gone{transition:transform .5s cubic-bezier(.4,0,.5,1), opacity .5s ease; opacity:0; pointer-events:none;}

.card-inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.3,.9,.25,1);
}
.card.flipped .card-inner{transform:rotateY(180deg);}

/* Nur die sichtbare Seite darf Tipps annehmen. backface-visibility
   blendet die abgewandte Seite aus, hält sie aber trefferbar –
   sonst käme man nie ans Bild auf der Rückseite. */
.card:not(.flipped) .back{pointer-events:none;}
.card.flipped .front{pointer-events:none;}

.face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:28px;
  border:1px solid var(--line);
  box-shadow:0 26px 50px -30px rgba(93,42,55,.55), 0 2px 6px -2px rgba(93,42,55,.12);
  padding:66px 30px 60px;
  display:flex; flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.front{background:var(--card);}
.back{
  background:
    radial-gradient(90% 60% at 50% 0%, #FFF1EE 0%, var(--card-back) 70%),
    var(--card-back);
  transform:rotateY(180deg);
  justify-content:center;
}

/* Papierstruktur + Rahmenlinie */
.face::before{
  content:""; position:absolute; inset:14px;
  border-radius:18px;
  border:1px solid rgba(195,154,78,.22);
  pointer-events:none;
}

/* --- Inhalte --- */
.eyebrow{
  position:absolute; top:34px; left:26px; right:26px; margin:0;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:600; text-align:center;
}
.frage{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(25px, 6.6vw, 32px);
  line-height:1.3; text-align:center;
  margin:18px 0; color:var(--ink);
  overflow-y:auto; scrollbar-width:none;
}
.frage::-webkit-scrollbar{display:none;}

.loesung{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(20px, 5.2vw, 25px);
  line-height:1.48; text-align:center;
  color:var(--ink); margin:14px 0;
  overflow-y:auto; scrollbar-width:none;
}
.loesung::-webkit-scrollbar{display:none;}
.notiz{
  font-size:14px; line-height:1.6; text-align:center;
  color:var(--ink-soft); font-style:italic;
  margin:0 0 6px;
}

/* Bild als Lösung */
.bild-rahmen{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  margin:4px 0 12px;
}
.bild{
  max-width:100%; max-height:100%;
  border-radius:14px; object-fit:contain;
  border:1px solid var(--line);
  box-shadow:0 14px 30px -18px rgba(93,42,55,.65);
  -webkit-user-drag:none; pointer-events:none;
}
.bildtext{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:17px; line-height:1.45; text-align:center;
  color:var(--ink-soft); font-style:italic; margin:0;
}

/* --- Karte, die überquillt --------------------------------------
   Ein endloses Band: die Zeilen steigen langsam auf, tauchen unten
   aus dem Papier auf und lösen sich oben wieder darin auf.
   Beides passiert innerhalb der Karte – nichts ragt darüber hinaus. */
.ueberlauf{
  position:absolute;
  top:30px; left:26px; right:26px; bottom:30px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.ueberlauf.mit-geschenk{bottom:58px;}
.ueberlauf-inner{
  animation:rollen 70s linear infinite;
  will-change:transform;
}
.card:not(.flipped) .ueberlauf-inner{animation-play-state:paused;}
@keyframes rollen{
  from{transform:translateY(0);}
  to{transform:translateY(-50%);}
}
.ueberlauf p{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(19px, 4.9vw, 23px);
  line-height:1.5; text-align:center;
  color:var(--ink);
  margin:0 0 22px;   /* gleichmäßiger Abstand = nahtloses Band */
}

.zierde{
  position:absolute; bottom:30px; left:0; right:0; margin:0;
  display:flex; justify-content:center; color:var(--rose-soft);
}

/* Geschenk-Hinweis, dezent am Kartenfuß */
.geschenk{
  position:absolute; bottom:28px; left:28px; right:28px; margin:0;
  display:flex; align-items:center; justify-content:center; gap:9px;
  color:var(--gold);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  text-align:center;
}
.geschenk svg{flex:none;}

/* Titelkarte */
.titel{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; font-size:clamp(38px, 11vw, 52px);
  line-height:1.05; text-align:center; margin:0 0 16px;
}
.intro-text{
  text-align:center; color:var(--ink-soft);
  font-size:15.5px; line-height:1.65; margin:0;
}
.datum{
  position:absolute; top:34px; left:26px; right:26px; margin:0;
  text-align:center; font-size:11px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
}

/* Briefkarte */
.brief{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(18px, 4.6vw, 21px); line-height:1.6;
  color:var(--ink); overflow-y:auto; scrollbar-width:none;
}
.brief::-webkit-scrollbar{display:none;}
.brief p{margin:0 0 15px;}
.sign{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-style:italic; font-size:21px; color:var(--rose);
  text-align:right; margin-top:14px;
}

/* --- Hinweiszeile --- */
.hint{
  height:40px; margin-top:12px;   /* fest, damit der Stapel nicht springt */
  justify-content:center;
  font-size:12.5px; letter-spacing:.1em;
  color:var(--ink-soft); opacity:.75;
  display:flex; align-items:center; gap:8px;
  transition:opacity .4s ease;
}
.hint.hidden{opacity:0;}
.hint .pulse{animation:nudge 2.4s ease-in-out infinite;}
@keyframes nudge{
  0%,100%{transform:translateX(0); opacity:.6;}
  50%{transform:translateX(6px); opacity:1;}
}

.restart{
  position:absolute; bottom:calc(env(safe-area-inset-bottom) + 10px);
  left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); opacity:0; pointer-events:none;
  transition:opacity .6s ease; cursor:pointer; background:none; border:0;
  font-family:inherit; padding:10px 16px;
}
.restart.show{opacity:.5; pointer-events:auto;}

/* --- Richtig / Falsch, unter dem Stapel --- */
.urteil{
  font-family:inherit; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; cursor:pointer;
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--rose-soft); background:transparent;
  color:var(--rose);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.urteil.falsch{border-color:var(--line); color:var(--ink-soft);}
.urteil:active{background:var(--rose-soft); color:var(--ink);}

/* --- Glücksrad ------------------------------------------------
   Legt sich über den Stapel. Ein Dreh pro richtiger Antwort;
   das getroffene Segment fällt danach weg.                     */
.rad-blende{
  position:fixed; inset:0; z-index:60;
  display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:22px;
  padding:
    calc(env(safe-area-inset-top) + 56px) 22px
    calc(env(safe-area-inset-bottom) + 28px);
  background:radial-gradient(120% 80% at 50% 18%, #FFF2EE 0%, var(--bg) 66%), var(--bg);
  opacity:0; transition:opacity .35s ease;
  touch-action:none;
}
.rad-blende.offen{display:flex;}
.rad-blende.sichtbar{opacity:1;}

.rad-titel{
  margin:0; font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(28px, 8vw, 38px); line-height:1.1;
  color:var(--rose); text-align:center;
}

.rad-buehne{position:relative; width:min(80vw, 320px); flex:none;}
/* Der Schatten liegt auf einem eigenen Kreis dahinter, nicht auf dem <svg>:
   iOS Safari zeichnet filter:drop-shadow auf einem SVG als Rechteck der
   Elementbox – beim Drehen sah man deshalb einen Kasten um das Rad. */
.rad-buehne::before{
  content:""; position:absolute; inset:4%; z-index:0;
  border-radius:50%;
  box-shadow:0 18px 34px -6px rgba(93,42,55,.32);
}
.rad-scheibe{
  position:relative; z-index:1;
  display:block; width:100%; height:auto;
  aspect-ratio:1 / 1;        /* Safari leitet height:auto bei SVG nicht immer sauber ab */
}
/* Gedreht wird die Gruppe im SVG, nicht das <svg> selbst.
   Beim Element wäre der Drehpunkt die Mitte der CSS-Box – die liegt bei
   krummen Pixelmaßen ein Stück neben dem Radmittelpunkt, und das Rad eiert.
   Im viewBox liegt der Drehpunkt exakt auf (100,100), also mittig.

   easeOutCubic läuft gleichmäßig aus. Der x-Wert des zweiten Kontrollpunkts
   muss über dem des ersten liegen, sonst steht die Kurve zwischendrin fast
   still und das Rad ruckelt in Winkelstufen weiter. */
.rad-scheibe text{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:19px; font-weight:600;
  fill:var(--ink);
}
.rad-dreh{
  transform-box:view-box;
  transform-origin:100px 100px;
  transition:transform var(--rad-dauer, 3800ms) cubic-bezier(.33, 1, .68, 1);
}
/* Zeiger sitzt oben und zeigt nach innen */
.rad-zeiger{
  position:absolute; top:-10px; left:50%; z-index:2;
  width:0; height:0; transform:translateX(-50%);
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:20px solid var(--rose);
  filter:drop-shadow(0 3px 4px rgba(93,42,55,.35));
}

.rad-fuss{
  margin:0; min-height:52px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.rad-treffer{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(22px, 6vw, 28px); line-height:1.25; color:var(--ink);
}
.rad-tipp{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  animation:atmen 2.6s ease-in-out infinite;
}
@keyframes atmen{0%,100%{opacity:.45;} 50%{opacity:.95;}}


@media (prefers-reduced-motion:reduce){
  .hearts{display:none;}
  *{animation-duration:.01ms !important;}
}