/* =========================================================================
   Spiel 3 · Reiter „Erklär’s mir“ · „Erklär’s mir wie …“
   Nur Klassen mit Präfix g-erklaer-, nur Variablen aus tokens.css.
   Handy zuerst gedacht, Tippflächen ≥ var(--tap). Bewegung über --dur-* (bei
   reduzierter Bewegung automatisch ~0).
   ========================================================================= */
.g-erklaer{display:flex;flex-direction:column;gap:var(--sp-5);min-height:calc(var(--game-min-h) - 2 * var(--stage-pad))}

/* ---------- Kopf: Titel links, Ziel + Zähler rechts ---------- */
.g-erklaer-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6)}
.g-erklaer-hl{max-width:640px;min-width:0}
.g-erklaer-goal{flex:none;width:290px;padding:12px 16px 12px;border-radius:var(--r-md);background:var(--sf-tint);transition:background-color var(--dur-3) var(--ease)}
.g-erklaer-task{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.3;color:var(--tx-petrol)}
.g-erklaer-meter{display:flex;align-items:center;gap:var(--sp-3);margin-top:8px}
.g-erklaer-meter .progress{flex:1 1 auto;background:var(--sf-card)}
.g-erklaer-count{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--tx-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.g-erklaer-goal.is-done{background:var(--ok-bg)}
.g-erklaer-goal.is-done .g-erklaer-task{color:var(--ok)}
.g-erklaer-title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:-.012em;color:var(--tx-1)}
.g-erklaer-intro{margin-top:var(--sp-2);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--tx-2);text-wrap:pretty}

/* ---------- Auswahlgruppen (echte Radioknöpfe) ---------- */
.g-erklaer-set{margin:0;padding:0;border:0;min-width:0}
.g-erklaer-lg{float:left;width:100%;margin:0 0 var(--sp-3);padding:0;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.12em;text-transform:uppercase;line-height:1.3;color:var(--tx-petrol)}
.g-erklaer-lg .pill{margin-left:var(--sp-2);letter-spacing:.04em;text-transform:none;vertical-align:1px}
.g-erklaer-lg + *{clear:both}
.g-erklaer-who,.g-erklaer-topic{position:relative;display:block;min-width:0;-webkit-tap-highlight-color:transparent}
.g-erklaer-in{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}

/* Wer hört zu? */
.g-erklaer-who-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.g-erklaer-who-card{position:relative;display:flex;align-items:center;gap:14px;height:100%;min-height:84px;padding:14px 16px 12px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--sf-card);color:var(--tx-1);
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.g-erklaer-who:hover .g-erklaer-who-card{border-color:var(--c-petrol);box-shadow:var(--sh-soft)}
.g-erklaer-who:active .g-erklaer-who-card{transform:scale(.985)}
.g-erklaer-in:checked + .g-erklaer-who-card{border-color:var(--c-petrol);background:var(--sf-tint);box-shadow:inset 0 0 0 1px var(--c-petrol)}
.g-erklaer-in:focus-visible + .g-erklaer-who-card,
.g-erklaer-in:focus-visible + .g-erklaer-t-card{outline:3px solid var(--focus-c);outline-offset:3px}
.g-erklaer-who-t{min-width:0}
.g-erklaer-who-n{display:block;font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1.2;hyphens:manual}
.g-erklaer-who-s{display:block;margin-top:3px;font-size:var(--fs-sm);line-height:1.3;color:var(--tx-3)}

/* Icons */
.g-erklaer-ico{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--sf-tint);color:var(--tx-petrol);
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-spring)}
.g-erklaer-svg{display:block;width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.g-erklaer-svg .g-erklaer-fill{fill:var(--sf-tint);transition:fill var(--dur-2) var(--ease)}
.g-erklaer-in:checked + .g-erklaer-who-card .g-erklaer-ico{background:var(--c-petrol);color:var(--tx-inv);transform:scale(1.04)}
.g-erklaer-in:checked + .g-erklaer-who-card .g-erklaer-fill{fill:var(--c-petrol)}

/* „Schon gehört“-Haken je Person (gilt für die aktuelle Frage) */
.g-erklaer-heard{position:absolute;top:-10px;right:-8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ok);color:var(--tx-inv);box-shadow:0 0 0 3px var(--sf-card);opacity:0;transform:scale(.4);
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease-spring)}
.g-erklaer-heard .icon{width:15px;height:15px;stroke-width:2.8}
.g-erklaer-who.is-heard .g-erklaer-heard{opacity:1;transform:none}

/* Worum geht’s? */
.g-erklaer-topic-row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3)}
.g-erklaer-t-card{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:3px 20px 0 15px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:var(--sf-card);color:var(--tx-petrol);font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.2;
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.g-erklaer-t-card .icon{margin-top:-3px}
.g-erklaer-topic:hover .g-erklaer-t-card{border-color:var(--c-petrol)}
.g-erklaer-topic:active .g-erklaer-t-card{transform:scale(.98)}
.g-erklaer-in:checked + .g-erklaer-t-card{background:var(--c-petrol);border-color:var(--c-petrol);color:var(--tx-inv)}

/* ---------- Gespräch ---------- */
.g-erklaer-talk{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--sp-5) var(--sp-6);padding:var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-5);border-radius:var(--r-lg);background:var(--sf-sunken)}
.g-erklaer-stack{display:grid;min-width:0}
.g-erklaer-stack > *{grid-area:1 / 1;min-width:0}

/* Weicher Wechsel: Altes blendet kurz aus, Neues danach ein. Alle Varianten liegen
   übereinander, damit die Fläche beim Wechsel nicht springt. */
.g-erklaer-fx{opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),visibility 0s linear var(--dur-1)}
.g-erklaer-fx.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur-2) var(--ease) var(--dur-1),transform var(--dur-2) var(--ease) var(--dur-1),visibility 0s linear 0s}

/* Porträt links */
.g-erklaer-pp{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.g-erklaer-ico--lg{width:88px;height:88px;background:var(--sf-card);box-shadow:var(--sh-soft)}
.g-erklaer-ico--lg .g-erklaer-svg{width:62px;height:62px;stroke-width:1.8}
.g-erklaer-ico--lg .g-erklaer-fill{fill:var(--sf-card)}
.g-erklaer-ico--none{background:transparent;box-shadow:none;color:var(--tx-3)}
.g-erklaer-pp-n{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.2;color:var(--tx-1)}
.g-erklaer-pp-s{margin-top:2px;font-size:var(--fs-sm);line-height:1.35;color:var(--tx-3)}
.g-erklaer-focus-k{font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--tx-3)}
.g-erklaer-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-2)}
.g-erklaer-tags li{padding:5px 11px 3px;border-radius:var(--r-pill);background:var(--sf-card);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-sm);font-weight:var(--fw-semi);line-height:1.25;color:var(--tx-petrol)}

/* Sprechblasen rechts */
.g-erklaer-chat{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3)}
.g-erklaer-q,.g-erklaer-a{width:fit-content;max-width:100%}
.g-erklaer-q{align-self:flex-start;padding:11px 18px 9px;border-radius:18px 18px 18px 6px;background:var(--sf-card);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-base);font-weight:var(--fw-semi);line-height:1.35;color:var(--tx-1)}
.g-erklaer-a{align-self:flex-end;max-width:min(100%,680px);padding:15px 22px 13px;border-radius:22px 22px 6px 22px;background:var(--c-petrol);color:var(--tx-inv);font-size:var(--fs-lg);line-height:1.5;text-wrap:pretty;box-shadow:var(--sh-soft)}
.g-erklaer-q-who,.g-erklaer-a-who{display:block;margin-bottom:3px;font-size:var(--fs-xs);font-weight:var(--fw-black);letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.g-erklaer-q-who{color:var(--tx-3)}
.g-erklaer-a-who{color:var(--tx-inv-3)}
.g-erklaer-a--muted{background:var(--sf-card);color:var(--tx-2);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.g-erklaer-a--muted .g-erklaer-a-who{color:var(--tx-3)}

/* ---------- Erfolg direkt unter der Antwort ---------- */
.g-erklaer-win{grid-column:1 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);background:var(--ok-bg)}
.g-erklaer-win.is-in{animation:t-pop var(--dur-3) var(--ease) both}
.g-erklaer-win-i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ok);color:var(--tx-inv)}
.g-erklaer-win-i .icon{width:20px;height:20px;stroke-width:2.6}
.g-erklaer-win-t{flex:1 1 280px;min-width:0}
.g-erklaer-win-h{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.2;color:var(--ok)}
.g-erklaer-moral{margin-top:2px;font-size:var(--fs-md);font-weight:var(--fw-semi);line-height:1.4;color:var(--tx-1);text-wrap:pretty}
.g-erklaer-again{flex:none}
.g-erklaer-again .icon{margin-top:-3px}

/* ---------- Tablet ---------- */
@media (max-width:1060px){
  .g-erklaer-talk{grid-template-columns:190px minmax(0,1fr);gap:var(--sp-5)}
  .g-erklaer-who-card{gap:12px;padding:12px 12px 10px}
  .g-erklaer-ico{width:46px;height:46px}
  .g-erklaer-svg{width:34px;height:34px}
}

/* ---------- Handy ---------- */
@media (max-width:760px){
  .g-erklaer{gap:var(--sp-5)}
  .g-erklaer-title{font-size:var(--fs-xl)}
  .g-erklaer-intro{margin-top:6px}
  .g-erklaer-head{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .g-erklaer-goal{width:auto;padding:10px 14px}
  /* Reihenfolge am Handy: Person → Antwort → Frage (Antwort direkt unter dem Daumen) */
  .g-erklaer-head{order:0}
  .g-erklaer-set--who{order:1}
  .g-erklaer-talk{order:2}
  .g-erklaer-set--topic{order:3}

  .g-erklaer-who-row{gap:var(--sp-2)}
  .g-erklaer-who-card{flex-direction:column;justify-content:flex-start;gap:var(--sp-2);min-height:0;padding:var(--sp-3) 4px 10px;text-align:center}
  .g-erklaer-who-s{display:none}
  .g-erklaer-who-n{font-size:15px;line-height:1.2;hyphens:manual}
  .g-erklaer-ico{width:48px;height:48px}
  .g-erklaer-svg{width:35px;height:35px}
  .g-erklaer-heard{right:-5px}

  .g-erklaer-topic-row{flex-direction:column;gap:var(--sp-2)}
  .g-erklaer-t-card{width:100%;min-height:52px}

  .g-erklaer-talk{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-md)}
  .g-erklaer-pp{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--sp-3);row-gap:var(--sp-3)}
  .g-erklaer-ico--lg{width:56px;height:56px}
  .g-erklaer-ico--lg .g-erklaer-svg{width:40px;height:40px;stroke-width:2}
  .g-erklaer-focus{grid-column:1 / -1}
  .g-erklaer-focus-k{display:inline;margin-right:var(--sp-2)}
  .g-erklaer-tags{display:inline-flex;margin-top:0;vertical-align:middle}
  .g-erklaer-chat{justify-content:flex-start}
  /* Am Handy: solange niemand gewählt ist, nur den kleinen Leerzustand zeigen (keine große leere Fläche).
     Ab der ersten Wahl liegen alle Antworten übereinander, damit die Fragen darunter nicht springen. */
  .g-erklaer-talk--empty .g-erklaer-fx:not(.is-on){display:none}
  .g-erklaer-pp--none{align-self:start}
  .g-erklaer-q{font-size:var(--fs-md)}
  .g-erklaer-a{font-size:var(--fs-base);padding:13px 16px 11px;border-radius:20px 20px 6px 20px}

  .g-erklaer-win{padding:var(--sp-4)}
  .g-erklaer-win-t{flex-basis:200px}
  .g-erklaer-again{width:100%}
}