/* =========================================================================
   Spiel 4 · Reiter „Wo passt ein Agent?“ · Stile
   Nur Klassen mit Präfix g-agent-, nur Variablen aus tokens.css, eigene
   @keyframes ebenfalls mit Präfix g-agent- (jeweils einmalig, nie endlos).
   Handy zuerst gedacht: Spaltenknöpfe ≥ 56 px, Karte per Daumen ziehbar.
   Spalten: a = Agent macht’s · b = Agent bereitet vor, Mensch entscheidet ·
   c = Bleibt beim Menschen.
   ========================================================================= */

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

/* ---------- Kopf ---------- */
.g-agent-head{display:grid;justify-items:start;gap:var(--sp-2)}
.g-agent-h{margin-top:var(--sp-1);font-size:var(--fs-2xl);font-weight:var(--fw-bold);line-height:1.12;letter-spacing:-.012em;color:var(--tx-1);text-wrap:balance}
.g-agent-h:focus-visible{outline:none}
.g-agent-intro{max-width:60ch;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--tx-2);text-wrap:pretty}
.g-agent-prog{justify-self:stretch;margin-top:var(--sp-2)}

/* ---------- Stapel + Karte ---------- */
.g-agent-pile{position:relative;isolation:isolate;width:100%;max-width:560px;margin:0 auto;padding-bottom:14px}
.g-agent-pile::before,.g-agent-pile::after{content:"";position:absolute;left:0;right:0;top:0;bottom:14px;z-index:-1;border-radius:var(--r-lg);background:var(--sf-card);border:1.5px solid var(--line);box-shadow:var(--sh-soft);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.g-agent-pile::before{transform:translateY(7px) scale(.96)}
.g-agent-pile::after{z-index:-2;transform:translateY(14px) scale(.92)}
.g-agent-pile[data-left="2"]::before,.g-agent-pile[data-left="3"]::before,.g-agent-pile[data-left="3"]::after{opacity:1}

.g-agent-card{position:relative;display:grid;gap:6px;width:100%;padding:18px 22px 14px;border-radius:var(--r-lg);border:1.5px solid var(--line-strong);background:var(--sf-card);box-shadow:var(--sh-card);color:var(--tx-1);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  animation:g-agent-in var(--dur-2) var(--ease) both;transition:opacity var(--dur-1) var(--ease),border-color var(--dur-2) var(--ease)}
.g-agent-card.is-lifted{opacity:.28;animation:none}
.g-agent-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.g-agent-card-k{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-agent-grip{display:inline-flex;color:var(--tx-3)}
.g-agent-card-t{font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:1.2;letter-spacing:-.005em;text-wrap:balance}
.g-agent-card-c{font-size:var(--fs-md);line-height:1.45;color:var(--tx-2);text-wrap:pretty}
.g-agent-card-hint{display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:10px;border-top:1px solid var(--line);font-size:var(--fs-sm);font-weight:var(--fw-semi);line-height:1.3;color:var(--tx-3)}
.g-agent-card-hint .icon{width:16px;height:16px;margin-top:-2px;stroke-width:2.2}
@keyframes g-agent-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* Ziehbild (liegt während des Ziehens direkt in <body>) */
.g-agent-ghost{animation:none!important;transition:none!important;cursor:grabbing;box-shadow:var(--sh-pop)!important;will-change:transform,opacity}

/* Fertig-Karte: alle sortiert */
.g-agent-fin{display:grid;justify-items:center;gap:var(--sp-2);padding:var(--sp-5) var(--sp-5) var(--sp-5);border-radius:var(--r-lg);background:var(--sf-tint);color:var(--tx-petrol);text-align:center;animation:t-pop var(--dur-2) var(--ease) both}
.g-agent-fin-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ok-fill);color:var(--tx-inv)}
.g-agent-fin-i .icon{width:24px;height:24px;stroke-width:2.6}
.g-agent-fin-t{font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:1.2;color:var(--tx-1)}
.g-agent-fin-s{max-width:40ch;font-size:var(--fs-md);line-height:1.45;color:var(--tx-petrol);text-wrap:pretty}
.g-agent-fin .btn{margin-top:var(--sp-2);min-width:200px}

/* ---------- Spalten ---------- */
.g-agent-zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-3);align-items:stretch}
.g-agent-zbtn{appearance:none;display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:68px;padding:12px 14px 10px 12px;border:0;border-radius:var(--r-md) var(--r-md) 0 0;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.22;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.g-agent-zbtn:active:not([disabled]){transform:scale(.985)}
.g-agent-zbtn[disabled]{cursor:default}
.g-agent-zbtn.is-nudge{animation:g-agent-nudge var(--dur-3) var(--ease) 1}
.g-agent-zbtn[data-zone="b"].is-nudge{animation-delay:calc(var(--dur-2) * .2)}
.g-agent-zbtn[data-zone="c"].is-nudge{animation-delay:calc(var(--dur-2) * .4)}
@keyframes g-agent-nudge{0%,100%{transform:none}35%{transform:translateY(-5px)}70%{transform:translateY(1px)}}

.g-agent-zi{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;color:var(--tx-inv)}
.g-agent-zi .icon{width:20px;height:20px}
.g-agent-zl{flex:1;min-width:0}
.g-agent-zn{flex:none;display:grid;place-items:center;min-width:30px;height:30px;padding:3px 8px 0;border-radius:var(--r-pill);background:var(--sf-card);font-size:var(--fs-sm);font-weight:var(--fw-black);line-height:1}
.g-agent-zn.is-bump{animation:g-agent-bump var(--dur-3) var(--ease-spring) 1}
@keyframes g-agent-bump{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}

.g-agent-mine{display:none}
.g-agent-zcol{display:flex;flex-direction:column;gap:var(--sp-2);min-height:184px;padding:var(--sp-3);border-top:2px solid var(--c-white);border-radius:0 0 var(--r-md) var(--r-md);transition:box-shadow var(--dur-2) var(--ease)}
.g-agent-zcol-h{display:none}
.g-agent-zlist{flex:1;list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.g-agent-empty{flex:1;display:grid;place-items:center;min-height:60px;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--tx-3)}

/* Farben je Spalte (Knopf, Spalte, Auflösung) */
.g-agent-zbtn[data-zone="a"],.g-agent-zcol[data-zone="a"],.g-agent-rcol[data-z="a"]{background:var(--sf-tint);color:var(--tx-petrol)}
.g-agent-zbtn[data-zone="b"],.g-agent-zcol[data-zone="b"],.g-agent-rcol[data-z="b"]{background:var(--sf-violet);color:var(--tx-violet)}
.g-agent-zbtn[data-zone="c"],.g-agent-zcol[data-zone="c"],.g-agent-rcol[data-z="c"]{background:var(--sf-sunken);color:var(--tx-1)}
[data-zone="a"] .g-agent-zi,[data-z="a"] .g-agent-zi{background:var(--c-petrol)}
[data-zone="b"] .g-agent-zi,[data-z="b"] .g-agent-zi{background:var(--tx-violet)}
[data-zone="c"] .g-agent-zi,[data-z="c"] .g-agent-zi{background:var(--c-ink)}

/* Einsortierte Karten */
.g-agent-chip{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;min-height:var(--tap);padding:10px 12px 8px 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--sf-card);box-shadow:var(--sh-soft);color:var(--tx-1);font-size:var(--fs-md);font-weight:var(--fw-semi);line-height:1.3;text-align:left;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease)}
.g-agent-chip > .icon{width:16px;height:16px;color:var(--tx-3);margin-top:-2px}
.g-agent-chip.is-lifted{opacity:.28;animation:none}
.g-agent-new{animation:t-pop var(--dur-2) var(--ease) both}

/* Hover nur mit Maus (kein „hängender“ Hover nach Tippen auf dem Handy) */
@media (hover:hover){
  .g-agent-card:hover{border-color:var(--c-petrol)}
  .g-agent-zbtn:hover:not([disabled]){box-shadow:inset 0 0 0 2px var(--c-petrol)}
  .g-agent-chip:hover{border-color:var(--c-petrol)}
}

/* Während des Ziehens: Ziele zeigen */
.g-agent.is-dragging .g-agent-zcol{box-shadow:inset 0 0 0 2px var(--line-strong)}
.g-agent .g-agent-zbtn.is-over,.g-agent .g-agent-zcol.is-over{box-shadow:inset 0 0 0 3px var(--c-petrol)}

/* ---------- Auflösung ---------- */
.g-agent-res{animation:t-fade-up var(--dur-2) var(--ease) both}
.g-agent-res-head{display:grid;justify-items:start;gap:var(--sp-2)}
.g-agent-res-h{font-size:var(--fs-3xl);line-height:1.08;letter-spacing:-.018em}
.g-agent-score{color:var(--tx-petrol)}
.g-agent-res-s{max-width:56ch;font-size:var(--fs-lg);line-height:1.45;color:var(--tx-2);text-wrap:pretty}
.g-agent-rcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);align-items:start}
.g-agent-rcol{padding:var(--sp-4);border-radius:var(--r-lg);animation:t-fade-up var(--dur-3) var(--ease) both}
.g-agent-rcol:nth-child(2){animation-delay:calc(var(--dur-2) * .27)}
.g-agent-rcol:nth-child(3){animation-delay:calc(var(--dur-2) * .54)}
.g-agent-rcol-h{display:flex;align-items:center;gap:var(--sp-3)}
.g-agent-rcol-h h4{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.2}
.g-agent-rcol-r{margin-top:var(--sp-3);font-size:var(--fs-md);line-height:1.45;text-wrap:pretty}
.g-agent-rlist{list-style:none;display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.g-agent-rcard{display:grid;justify-items:start;gap:6px;padding:14px 16px 12px;border-radius:var(--r-sm);border-left:4px solid var(--ok-fill);background:var(--sf-card);box-shadow:var(--sh-soft);color:var(--tx-1)}
.g-agent-rcard.is-diff{border-left-color:var(--hint)}
.g-agent-rcard-t{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.3}
.g-agent-rcard-w{font-size:var(--fs-md);line-height:1.45;color:var(--tx-2);text-wrap:pretty}
.g-agent-rcard .pill{margin-top:2px;white-space:normal}
.g-agent-rcard .pill .icon{width:14px;height:14px;stroke-width:2.6;margin-top:-2px}
.g-agent-note{display:flex;gap:8px;margin-top:4px;padding:10px 12px 8px;border-radius:var(--r-xs);background:var(--sf-sunken);font-size:var(--fs-md);line-height:1.4;color:var(--tx-2)}
.g-agent-note .icon{width:16px;height:16px;margin-top:1px;color:var(--tx-petrol)}
.g-agent-res-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.g-agent-res-foot .icon{margin-top:-3px;transition:transform var(--dur-2) var(--ease)}
.g-agent-res-foot .is-open .icon{transform:rotate(180deg)}

/* Zuerst nur die Abweichungen */
.g-agent-diff{display:grid;gap:var(--sp-3)}
.g-agent-dlist{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:0;gap:var(--sp-3)}
.g-agent-dlist .g-agent-rcard{background:var(--hint-bg);box-shadow:none;padding:16px 18px 14px}
.g-agent-rcard-z{display:flex;flex-wrap:wrap;gap:6px}
.g-agent-dlist .g-agent-rcard-z .pill--hint{background:var(--sf-card)}

/* Alle Begründungen (aufklappbar) */
.g-agent-all{display:grid;gap:var(--sp-3);animation:t-fade-up var(--dur-2) var(--ease) both}

/* ---------- Handy ---------- */
@media (max-width:760px){
  .g-agent-view{gap:var(--sp-4)}
  .g-agent-h{font-size:var(--fs-xl);line-height:1.18}
  .g-agent-card{padding:16px 16px 12px}
  .g-agent-zones{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-2)}
  .g-agent-zbtn{min-height:56px;padding:10px 12px 8px 10px;border-radius:var(--r-md)}
  .g-agent-zones.is-full .g-agent-zbtn{display:none}
  .g-agent-zones.is-full .g-agent-mine{margin-top:0}
  .g-agent-mine{display:block;margin-top:var(--sp-4)}
  .g-agent-mine[hidden]{display:none}
  .g-agent-zcol{min-height:0;padding:10px 10px 10px;border-top:0;border-radius:var(--r-md)}
  .g-agent-zcol.is-empty{display:none}
  .g-agent-zcol-h{display:block;padding:0 4px;font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1.3}
  .g-agent-res-h{font-size:var(--fs-2xl)}
  .g-agent-res-s{font-size:var(--fs-base)}
  .g-agent-rcols{grid-template-columns:minmax(0,1fr)}
  .g-agent-rcol{padding:var(--sp-4) 12px 12px}
  .g-agent-res-foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .g-agent-rcol,.g-agent-zbtn.is-nudge{animation-delay:0s!important}
}