/* =========================================================================
   Spiel 2 · Reiter „Wimmel mich ab“ · Einwand-Karten
   Nur Klassen mit Präfix g-einwand-, nur Variablen aus tokens.css, eigene
   @keyframes mit Präfix g-einwand-. Handy zuerst gedacht, Tippflächen ≥ var(--tap).
   Aufbau: Kopf (Titel, Zähler) · links die vier Sätze · rechts die Karte mit
           meiner Antwort · darunter der Abschluss.
   Handy: Sätze → Karte → Abschluss untereinander.
   ========================================================================= */

.g-einwand{display:flex;flex-direction:column;gap:var(--sp-5);min-height:calc(var(--game-min-h) - 2 * var(--stage-pad))}

/* ---------- Kopf ---------- */
.g-einwand-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6)}
.g-einwand-title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:-.01em;color:var(--tx-1)}
.g-einwand-intro{margin-top:var(--sp-2);max-width:64ch;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--tx-2);text-wrap:pretty}
.g-einwand-count{flex:none;width:200px;padding-bottom:var(--sp-1)}
.g-einwand-count-t{margin-bottom:var(--sp-2);text-align:right;font-size:var(--fs-md);font-weight:var(--fw-semi);line-height:1.3;color:var(--tx-3)}
.g-einwand-count-t b{color:var(--tx-1);font-weight:var(--fw-black)}

/* ---------- Spielfläche ---------- */
.g-einwand-body{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:"pick card" "end card";column-gap:var(--sp-6);row-gap:var(--sp-4);align-items:start}

/* ---------- Die vier Sätze ---------- */
.g-einwand-pick{grid-area:pick;min-width:0}
.g-einwand-pick-t{margin-bottom:var(--sp-3)}
.g-einwand-opts{display:grid;gap:var(--sp-2)}
.g-einwand-opt{min-height:60px;padding-right:12px}
.g-einwand-opt-t{flex:1;min-width:0;font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1.3}
.g-einwand-tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok-fill);color:var(--c-white);opacity:0;transform:scale(.4);
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease-spring)}
.g-einwand-tick .icon{width:15px;height:15px;stroke-width:2.8}
.g-einwand-opt.is-seen .g-einwand-tick{opacity:1;transform:none}
.g-einwand-opt.is-seen:not([aria-pressed="true"]){background:var(--sf-sunken)}

/* ---------- Karte mit meiner Antwort ---------- */
.g-einwand-card{grid-area:card;position:relative;min-width:0;min-height:410px;display:grid;perspective:1600px}
.g-einwand-card > *{grid-area:1 / 1;min-width:0}
.g-einwand-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:var(--sp-6);border:2px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--sf-sunken);text-align:center}
.g-einwand-empty p{max-width:30ch;font-size:var(--fs-lg);font-weight:var(--fw-semi);line-height:1.4;color:var(--tx-2);text-wrap:balance}
.g-einwand-empty-i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--sf-card);color:var(--tx-petrol);box-shadow:var(--sh-soft)}
.g-einwand-empty-i .icon{width:30px;height:30px;stroke-width:1.8}

.g-einwand-face{display:flex;flex-direction:column;padding:var(--sp-6);border-radius:var(--r-lg);background:var(--grad-hero);color:var(--tx-inv);box-shadow:var(--sh-card);transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.g-einwand-face.is-in{animation:t-fade-up var(--dur-2) var(--ease) both}
.g-einwand-face.is-turn{animation:g-einwand-turn var(--dur-3) var(--ease) both}
.g-einwand-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.g-einwand-said-k{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.14em;text-transform:uppercase;line-height:1.3;color:#8FD3F5}
.g-einwand-obj{margin:var(--sp-2) 0 var(--sp-5);font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.15;letter-spacing:-.01em;color:var(--tx-inv);text-wrap:balance}
.g-einwand-me{display:flex;align-items:center;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--line-inv);font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.2}
.g-einwand-me .av{box-shadow:0 0 0 2px var(--line-inv)}
.g-einwand-ans{max-width:62ch;margin:var(--sp-3) 0 var(--sp-5);font-size:var(--fs-xl);line-height:1.45;color:var(--tx-inv);text-wrap:pretty}
.g-einwand-q{margin-top:var(--sp-3);padding:2px 0 0 var(--sp-4);border-left:3px solid var(--c-sky);font-weight:var(--fw-bold)}
.g-einwand-why{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-inv);font-size:var(--fs-md);line-height:1.45;color:var(--tx-inv-2)}
.g-einwand-why b{color:var(--tx-inv);font-weight:var(--fw-bold)}

@keyframes g-einwand-turn{
  0%{opacity:.15;transform:rotateY(-80deg) scale(.97)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}

/* ---------- Abschluss ---------- */
.g-einwand-end{grid-area:end;align-self:start;padding:var(--sp-5);border-radius:var(--r-lg);background:var(--ok-bg)}
.g-einwand-end.is-in{animation:t-pop var(--dur-3) var(--ease) both}
.g-einwand-end-t{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:1.2;color:var(--ok)}
.g-einwand-end-i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ok);color:var(--tx-inv)}
.g-einwand-end-i .icon{width:18px;height:18px;stroke-width:2.6}
.g-einwand-end-p{margin-top:var(--sp-3);font-size:var(--fs-md);line-height:1.45;color:var(--tx-1);text-wrap:pretty}
.g-einwand-again{margin-top:var(--sp-4)}
.g-einwand-again .icon{margin-top:-3px}

/* ---------- Tablet ---------- */
@media (max-width:1060px){
  .g-einwand-body{grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:var(--sp-5)}
  .g-einwand-ans{font-size:var(--fs-lg)}
}

/* ---------- Handy: Sätze → Karte → Abschluss ---------- */
@media (max-width:760px){
  .g-einwand{gap:var(--sp-4)}
  .g-einwand-head{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .g-einwand-title{font-size:var(--fs-xl)}
  .g-einwand-intro{margin-top:var(--sp-1)}
  .g-einwand-count{width:auto;display:flex;align-items:center;gap:var(--sp-3);padding:0}
  .g-einwand-count-t{margin:0;text-align:left;white-space:nowrap}
  .g-einwand-bar{flex:1}

  .g-einwand-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"pick" "card" "end";row-gap:var(--sp-4)}
  .g-einwand-opt{min-height:56px}
  .g-einwand-opt-t{font-size:var(--fs-md)}

  .g-einwand-card{min-height:0}
  .g-einwand-empty{flex-direction:row;justify-content:flex-start;gap:var(--sp-3);padding:14px 16px;text-align:left}
  .g-einwand-empty p{font-size:var(--fs-md);text-wrap:pretty}
  .g-einwand-empty-i{flex:none;width:44px;height:44px}
  .g-einwand-empty-i .icon{width:22px;height:22px}
  .g-einwand-face{padding:var(--sp-5) 20px}
  .g-einwand-obj{font-size:var(--fs-xl);margin-bottom:var(--sp-4)}
  .g-einwand-ans{font-size:var(--fs-lg);margin-bottom:var(--sp-4)}
  .g-einwand-end{padding:var(--sp-4) 18px}
  .g-einwand-again{width:100%}
}