/* Modul-Spezialoptik 395_selbstverbesserung — Rest deckt assets/css/style.css ab */

/* Rechenzeile: einzeilige Formeln — auf dem Handy scrollen statt umbrechen (Muster aus 140) */
.rechenzeile{display:block;background:#fff;color:#DC143C;font-family:'Courier New',monospace;
  font-size:.88rem;line-height:1.7;padding:.5rem .7rem;border-radius:6px;margin-top:.5rem;
  border:1px solid #eee;overflow-x:auto;white-space:pre;max-width:100%;-webkit-overflow-scrolling:touch}

/* Die Selbstverbesserungs-Schleife als 4 Karten */
.kreislauf{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1rem 0}
.kreis-schritt{min-width:0;background:#fff;border:2px solid #0047AB;border-radius:8px;padding:.8rem;text-align:center}
.kreis-schritt .nr{display:inline-flex;width:32px;height:32px;border-radius:50%;background:#DC143C;
  color:#fff;font-weight:700;align-items:center;justify-content:center;margin-bottom:.4rem}
.kreis-zurueck{text-align:center;color:#0047AB;font-weight:600;margin:.3rem 0 1rem 0}

/* Experiment-Karten mit Lernkurve */
.experimente{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1rem 0}
.experiment{min-width:0;background:#fff;border:2px solid #0047AB;border-radius:8px;padding:1rem}
.experiment.grau{border-color:#888}
.lernkurve{display:flex;align-items:flex-end;gap:3px;height:120px;background:#f8f9fa;
  border:1px solid #dee2e6;border-radius:6px;padding:6px;margin-top:.8rem}
.lernkurve .balken{flex:1;min-width:2px;background:#DC143C;border-radius:2px 2px 0 0;transition:height .3s ease}
.lernkurve.grau .balken{background:#999}
.lernkurve:empty::before{content:'Noch kein Training — drück den Knopf!';color:#999;font-size:.8rem;align-self:center;margin:auto}
.kurven-status{font-size:.85rem;color:#666;margin-top:.4rem;font-family:'Courier New',monospace;overflow-x:auto;white-space:nowrap}

/* Spielbrett Tic-Tac-Toe (Touchziele >= 44px) */
.ttt-brett{display:grid;grid-template-columns:repeat(3,minmax(64px,80px));gap:6px;justify-content:center;margin:1rem auto}
.ttt-zelle{aspect-ratio:1;min-height:44px;font-size:1.8rem;font-weight:700;background:#fff;
  border:2px solid #0047AB;border-radius:8px;cursor:pointer;color:#DC143C;
  display:flex;align-items:center;justify-content:center;font-family:inherit}
.ttt-zelle.o{color:#0047AB}
.ttt-zelle:disabled{cursor:default;opacity:1}
.ttt-status{text-align:center;font-weight:600;margin:.6rem 0}
.stand-zeile{text-align:center;color:#666;font-size:.9rem;margin-top:.4rem}

/* Q-Blick: das komplette "Denken" der KI als 9 Zahlen */
.q-blick{display:grid;grid-template-columns:repeat(3,minmax(56px,72px));gap:4px;justify-content:center;margin:.6rem auto}
.q-zelle{aspect-ratio:1;min-width:0;display:flex;align-items:center;justify-content:center;
  font-family:'Courier New',monospace;font-size:.75rem;border:1px dashed #bbb;border-radius:6px;background:#fff}
.q-zelle.pos{background:#e8f5e9;color:#155724;border-color:#28a745;border-style:solid}
.q-zelle.neg{background:#fdecea;color:#a02020;border-color:#DC143C;border-style:solid}
.q-zelle.belegt{background:#f0f0f0;color:#555;font-size:1.1rem;font-family:inherit}

@media (max-width:600px){
  .lernkurve{height:90px}
  .ttt-brett{grid-template-columns:repeat(3,minmax(56px,1fr));max-width:260px}
}