/* ═══ Für dich — Polaroid-Deck. Phone first, hell & minimal. ═══ */

:root{
  --bg:#eae7e2;
  --bg-lift:#f6f4f1;
  --paper:#fffefc;
  --fg:#1b1a19;
  --muted:#86837e;
  --plate:#d9d6d1;
  --line:rgba(27,26,25,.16);
  --card-w:min(80vw, 330px, calc((100svh - 150px) * 0.704));
  --ease:cubic-bezier(.2,.8,.25,1);
  --puls-dauer:2.4s;   /* Herz + Pfeil */
  --puls-herz:1.075;
  --puls-pfeil:6px;
  --puls-schwanz:-9deg;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  background-image:radial-gradient(115% 75% at 50% 22%, var(--bg-lift) 0%, var(--bg) 72%);
}

.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#confetti{position:fixed;inset:0;z-index:55;pointer-events:none}

/* ═══ Tisch ═══ */
.table{
  position:relative;
  height:100svh;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
}

/* ═══ Startbild ═══ */
.intro{
  grid-area:1/1;z-index:30;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  transition:opacity .7s ease,transform .7s var(--ease);
}
.intro.gone{opacity:0;transform:translateY(-10px);pointer-events:none}

.intro-line{
  font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(24px,7vw,30px);line-height:1.2;
  color:var(--fg);opacity:.8;margin:0;letter-spacing:-.01em;
}
.arrow{
  width:22px;height:auto;margin:20px 0 14px;
  color:var(--fg);opacity:.32;
  animation:bob var(--puls-dauer) ease-in-out infinite;
}
.arrow path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--puls-pfeil))}}

.heart-btn{
  background:none;border:0;padding:12px;cursor:pointer;
  color:var(--fg);line-height:0;
  transition:transform .2s var(--ease);
}
.heart-btn:active{transform:scale(.9)}
.heart{width:38px;height:auto;animation:beat var(--puls-dauer) ease-in-out infinite}
.heart path{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:fill .25s ease;
}
.heart-btn:active .heart path{fill:currentColor}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(var(--puls-herz))}}

/* Solange das Startbild steht, ruht alles dahinter */
.intro-open .deck,.intro-open .hint,.intro-open .count{
  opacity:0;pointer-events:none;
}
.deck,.hint,.count{transition:opacity .7s ease .15s}

/* ═══ Polaroid-Stapel ═══ */
.deck{
  position:relative;
  width:var(--card-w);
  aspect-ratio:1/1.42;
  grid-area:1/1;
  z-index:10;
  perspective:1200px;
}
.deck.done{pointer-events:none}

.poly{
  position:absolute;inset:0;
  will-change:transform;
  touch-action:none;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  background:var(--paper);
  border-radius:2px;
  /* unten breiter — das ist es, was ein Polaroid zum Polaroid macht */
  padding:12px 12px 52px;
  box-shadow:0 1px 2px rgba(27,26,25,.10),
             0 14px 30px -12px rgba(27,26,25,.28),
             inset 0 0 0 1px rgba(27,26,25,.05);
}
.poly img{-webkit-user-drag:none;user-drag:none}
.deck.grabbing,.deck.grabbing .poly{cursor:grabbing}
.poly.settling{transition:transform .62s var(--ease)}
.poly.gone{transition:transform .72s cubic-bezier(.22,.61,.31,1),opacity .72s cubic-bezier(.4,0,.7,1);opacity:0;pointer-events:none}

.frame{
  position:relative;width:100%;height:100%;
  background:var(--plate);
  overflow:hidden;
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame.empty img{display:none}
.frame.empty::after{
  content:attr(data-n);
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:Fraunces,Georgia,serif;font-size:36px;font-weight:300;
  color:rgba(27,26,25,.32);letter-spacing:.06em;
}

/* ═══ Hinweise ═══ */
.hint,.count{
  position:absolute;left:0;right:0;text-align:center;
  font-size:12.5px;letter-spacing:.04em;color:var(--muted);
  margin:0;z-index:12;transition:opacity .5s ease;
}
.hint{
  bottom:max(26px,env(safe-area-inset-bottom));
  font-size:clamp(15px,4.3vw,17px);letter-spacing:.01em;
  color:var(--fg);opacity:.68;
}
.count{top:max(22px,env(safe-area-inset-top));font-variant-numeric:tabular-nums;opacity:.6}
.hint.hide,.count.hide{opacity:0;pointer-events:none}
/* Die Anleitung geht langsam — sie hat ihre Arbeit getan */
.hint.hide{transition:opacity 1.8s ease .2s}

/* ═══ Die Frage ═══ */
.ask{
  grid-area:1/1;z-index:5;
  width:min(92vw,360px);
  text-align:center;
  opacity:0;transform:translateY(10px) scale(.97);
  pointer-events:none;
  transition:opacity .8s ease .15s,transform .8s var(--ease) .15s;
  max-height:100%;overflow-y:auto;
}
.ask.show{opacity:1;transform:none;pointer-events:auto}

.ask-kicker{
  font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:clamp(24px,7vw,30px);line-height:1.15;
  color:var(--fg);opacity:.75;
  margin:0 0 4px;letter-spacing:-.01em;
}
.ask-q{
  font-family:Fraunces,Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(30px,8.5vw,38px);line-height:1.1;
  margin:0 0 36px;letter-spacing:-.005em;color:var(--fg);opacity:.9;
}

.answers{display:flex;flex-direction:column;gap:10px}
.btn{
  font-family:inherit;font-size:16px;font-weight:500;
  padding:15px 20px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),background .2s,opacity .2s;
  width:100%;
}
.btn:active{transform:scale(.97)}
.btn-yes{background:var(--fg);color:#faf9f7;border-color:var(--fg)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-ghost:active{background:rgba(27,26,25,.05)}

.panel{display:flex;flex-direction:column;gap:12px;margin-top:6px}
/* ═══ Die Katze, die unten sitzt und wartet ═══ */
.cat{
  display:block;width:132px;height:auto;
  margin:36px auto 0;
  color:var(--fg);opacity:.42;
}
.cat path{
  fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.cat .fine{stroke-width:1.6}
.cat .nose{stroke-width:1.3;fill:currentColor}
.cat .tail{
  transform-box:view-box;transform-origin:66px 61px;
  animation:flick 1.5s ease-in-out infinite;
}
@keyframes flick{
  0%,58%,100%{transform:rotate(0deg)}
  72%{transform:rotate(var(--puls-schwanz))}
  86%{transform:rotate(calc(var(--puls-schwanz) * -.33))}
}

.done-msg{
  font-family:Fraunces,Georgia,serif;font-weight:300;
  font-size:23px;line-height:1.4;margin:0;color:var(--fg);
}