/* kooperation.css — Oberfläche für die Kooperationsspiele.
   Baut auf core/base.css + live/live.css + Theme-Tokens auf.
   Nur ergänzende, bereichseigene Klassen (Prefix .coop-…). */

/* ---- Hero / Startgitter ---- */
.coop-hero{ max-width:820px; margin:1.2rem auto 1.6rem; text-align:center; }
.coop-hero h1{ color:var(--navy); margin:.2rem 0; font-size:clamp(1.5rem,5vw,2.2rem); }
.coop-hero p{ color:var(--muted); margin:.4rem auto; max-width:60ch; }

/* nutzt .tool-grid / .tool-card aus live.css; eigene Akzentfarbe je Karte */
.coop-card__icon{ font-size:2.2rem; }

/* ---- Spiel-Kopf mit Zurück + Lehrkraft-Hinweis ---- */
.coop-top{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.8rem; }
.coop-top .spacer{ flex:1; }
.coop-top strong{ color:var(--navy); }

/* ---- Lehrkraft-Hinweis (einblendbar) ---- */
.coop-hint{ background:var(--soft); border-left:4px solid var(--accent); border-radius:var(--radius-sm);
  padding:.7rem .9rem; margin:.6rem 0 1rem; color:var(--ink); }
.coop-hint h3{ margin:.1rem 0 .3rem; font-size:1rem; color:var(--navy); }
.coop-hint[hidden]{ display:none; }

/* ---- Setup-/Steuer-Panel ---- */
.coop-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin:0 0 1rem; }
.coop-panel h2{ margin:.1rem 0 .6rem; color:var(--navy); font-size:1.2rem; }
.coop-field{ display:flex; flex-direction:column; gap:.3rem; margin:.6rem 0; }
.coop-field label{ font-weight:700; }
.coop-row{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* ---- Rundenkopf / Punktezeile ---- */
.coop-scoreline{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin:.4rem 0 1rem;
  font-weight:800; color:var(--navy); }
.coop-scoreline .pill{ background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.2rem .8rem; }
.coop-scoreline .score{ color:var(--accent); }
.coop-round-of{ color:var(--muted); font-weight:700; }

/* ---- Großer Spielinhalt (Beamer) ---- */
.coop-stage{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow); padding:1.2rem 1.3rem; margin:0 0 1rem; }
.coop-bigword{ font-size:clamp(1.8rem,7vw,3.4rem); font-weight:900; color:var(--navy);
  text-align:center; letter-spacing:.01em; line-height:1.1; margin:.4rem 0; }
.coop-sub{ text-align:center; color:var(--muted); margin:.2rem 0 .6rem; }

/* ---- Tabu-/Begriffslisten ---- */
.coop-taboo{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.6rem 0; }
.coop-taboo .chip{ background:color-mix(in srgb,var(--bad) 12%,transparent); border:1.5px solid var(--bad);
  color:var(--bad); border-radius:var(--radius-pill); padding:.35rem .8rem; font-weight:700; }
.coop-taboo__lbl{ width:100%; text-align:center; color:var(--muted); font-weight:700; font-size:.85rem; }

/* ---- Timer-Ring (Text) ---- */
.coop-timer{ font-variant-numeric:tabular-nums; font-weight:900; font-size:clamp(1.6rem,6vw,2.6rem);
  color:var(--accent); text-align:center; }
.coop-timer.low{ color:var(--bad); }

/* ---- Tipp-/Schätzfeld der Spieler ---- */
.coop-guess{ max-width:420px; margin:1rem auto; text-align:center; }
.coop-guess input[type=number],.coop-guess input[type=text]{ font-size:1.4rem; text-align:center; width:100%; }
.coop-guess .unit{ color:var(--muted); font-weight:700; }

/* ---- Konsens-Rangliste / Drag-Liste ---- */
.coop-rank{ list-style:none; padding:0; margin:1rem 0; display:flex; flex-direction:column; gap:.5rem; }
.coop-rank li{ display:flex; align-items:center; gap:.6rem; background:var(--panel); border:1.5px solid var(--line);
  border-radius:var(--radius-btn); box-shadow:var(--shadow); padding:.55rem .7rem; }
.coop-rank li .no{ font-weight:900; color:var(--accent); min-width:1.6rem; text-align:center; }
.coop-rank li .txt{ flex:1; font-weight:700; }
.coop-rank li .mv{ display:flex; gap:.3rem; }
.coop-rank li .mv button{ min-width:44px; padding:.3rem .5rem; background:var(--soft); }

/* ---- Annäherungs-/Konsensbalken ---- */
.coop-consensus{ display:flex; align-items:center; gap:.6rem; margin:.8rem 0; }
.coop-consensus .track{ flex:1; height:22px; background:var(--soft); border:1px solid var(--line);
  border-radius:var(--radius-pill); overflow:hidden; }
.coop-consensus .fill{ height:100%; width:0; border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--bad),var(--warn),var(--ok)); transition:width .5s var(--ease); }
.coop-consensus .val{ font-weight:900; color:var(--navy); min-width:3.2rem; text-align:right; }

/* ---- Wortketten-Liste ---- */
.coop-chain{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; justify-content:center; align-items:center; }
.coop-chain .link{ background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:.4rem .9rem; font-weight:700; animation:pop var(--dur) var(--ease); }
.coop-chain .link.head{ background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:var(--accent);
  color:var(--navy); }
.coop-chain .arrow{ color:var(--muted); font-weight:900; }
.coop-chain .empty{ color:var(--muted); font-style:italic; }

/* ---- Ergebnis / Sieg ---- */
.coop-result{ text-align:center; padding:1rem; }
.coop-result .big{ font-size:clamp(2rem,8vw,3.4rem); font-weight:900; color:var(--accent); }
.coop-result .lbl{ color:var(--muted); font-weight:700; }
.coop-win-banner{ background:color-mix(in srgb,var(--ok) 16%,transparent); border:1.5px solid var(--ok);
  border-radius:var(--radius-card); padding:1rem; text-align:center; font-weight:800; color:var(--navy); margin:1rem 0; }

/* ---- Reduced motion: keine Pop-Animationen ---- */
@media (prefers-reduced-motion: reduce){
  .coop-chain .link,.person-chip{ animation:none!important; }
}