/* quizzes/gas-basics/gas.css */

.gasbasics-container {
  max-width: 900px;
  margin: 0 auto;
}

.gas-stage {
  margin-top: 1.5rem;
}

.gas-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .gas-grid {
    grid-template-columns: 1fr 1fr 1.2fr;
    align-items: flex-start;
  }
}

.gas-column h3 {
  margin-bottom: 0.5rem;
}

.gas-card-list,
.gas-pair-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gas-card {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
  background: rgba(255,255,255,0.9);
  font-size: 0.9rem;
}

.gas-card--cause {
  border-left: 4px solid var(--pf-accent, #3b22a3);
}

.gas-card--effect {
  border-left: 4px solid var(--pf-accent-soft, #f4c542);
}

.gas-card.is-selected {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

.gas-card.gas-card--used {
  opacity: 0.4;
  cursor: default;
}

.gas-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px dashed rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.95);
  font-size: 0.9rem;
}

.gas-pair__cause {
  flex: 1;
  font-weight: 500;
}

.gas-pair__arrow {
  flex: 0 0 auto;
  opacity: 0.7;
}

.gas-pair__effect {
  flex: 1;
}

.gas-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.gas-feedback {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/* STUFE 2 – Layout */

.gas-law-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* obere Reihe: Pool */
.gas-pair-pool-row {
  border-radius: 0.75rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.02);
}

.gas-pair-pool-row h3 {
  margin-bottom: 0.4rem;
}

.gas-pair-pool {
  min-height: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Säulen darunter */
.gas-law-columns {
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .gas-law-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gas-law-column {
  border-radius: 0.75rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.02);
}

.gas-law-title {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

/* Dropzones: großflächig, damit man nicht „pixelgenau“ treffen muss */
.gas-law-dropzone {
  min-height: 100px;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px dashed rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gas-law-dropzone.is-dragover {
  background: rgba(244, 197, 66, 0.15);
}

/* Draggable Paare */
.gas-pair {
  cursor: grab;
}

/* Erklärung unten */
.gas-laws-explainer {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 1rem;
}

.gas-law-explainer + .gas-law-explainer {
  margin-top: 0.75rem;
}

.gas-law-explainer h3 {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}


/* Stage 1 braucht einen relativen Kontext für den Linien-Layer */
.gas-stage--1 {
  position: relative;
}

/* Overlay-Layer für Verbindungs-Linien */
.gas-link-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Klicks gehen weiter zu den Karten */
}

/* SVG-Link-Elemente */
.gas-link {
  position: absolute;
  inset: 0;
}

.gas-link-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
}

/* Standardfarbe (kurz sichtbar) */
.gas-link .gas-link-line {
  stroke: rgba(0, 0, 0, 0.4);
}

/* Korrekte Verbindung → grün, volle Linie */
.gas-link--correct .gas-link-line {
  stroke: #0a8f3c;
  stroke-dasharray: none;
}

/* Falsche Verbindung → rot */
.gas-link--wrong .gas-link-line {
  stroke: #c62828;
}

/* Optional kleine „paired“-Optik auf den ursprünglichen Karten */
.gas-card.gas-card--paired {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.gas-stage--1 {
  position: relative;
}

.gas-stage1-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gas-solved h3 {
  margin-bottom: 0.25rem;
}

.gas-grid--stage1 {
  position: relative;
  display: grid;
  gap: 1rem;
}

/* links/rechts Anordnung */
@media (min-width: 800px) {
  .gas-grid--stage1 {
    grid-template-columns: 1fr 1fr;
  }
}


/* Karten-Zustände */
.gas-card.is-selected {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

.gas-card.gas-card--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Gelöste Paare oben */
.gas-pair-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gas-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.95);
  font-size: 0.9rem;
}

.gas-pair__cause,
.gas-pair__effect {
  flex: 1;
}


.gas-stage1-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gas-grid--stage1 {
  display: grid;
  gap: 1rem;
}

@media (min-width: 800px) {
  .gas-grid--stage1 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Karten-Zustände */
.gas-card.is-selected {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}

/* kurze Grün-/Rot-Flash-Animationen */
@keyframes gasFlashCorrect {
  0%   { background-color: #e8f5e9; border-color: #2e7d32; }
  50%  { background-color: #c8e6c9; border-color: #1b5e20; }
  100% { background-color: #ffffff; border-color: rgba(0,0,0,0.12); }
}

@keyframes gasFlashWrong {
  0%   { background-color: #ffebee; border-color: #c62828; }
  50%  { background-color: #ffcdd2; border-color: #b71c1c; }
  100% { background-color: #ffffff; border-color: rgba(0,0,0,0.12); }
}

.gas-card--flash-correct {
  animation: gasFlashCorrect 0.35s ease-out;
}

.gas-card--flash-wrong {
  animation: gasFlashWrong 0.35s ease-out;
}

.gas-card.gas-card--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* gelöste Paare oben */
.gas-pair-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gas-pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.95);
  font-size: 0.9rem;
}

.gas-pair__cause,
.gas-pair__effect {
  flex: 1;
}

.gas-pair__arrow {
  flex: 0 0 auto;
  opacity: 0.8;
}


.gas-pair {
  cursor: grab;
}

.gas-law-dropzone{
  min-height: 140px;
  padding: 12px;
  border: 2px dashed rgba(66,45,162,.35);
  border-radius: 14px;
  background: rgba(255,255,255,.6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gas-law-dropzone.is-dragover{
  border-color: rgba(66,45,162,.85);
  background: rgba(255,234,0,.20);
  box-shadow: 0 10px 24px rgba(17,24,39,.10);
}

.gas-pair{
  cursor: grab;
  user-select: none;
}

.gas-pair.is-dragging{
  opacity: .6;
  cursor: grabbing;
}


/* =================================================
   Embed / minimal mode (für iframe Einbettung)
   aktiv via ?minimal=true → <html class="pf-embed-minimal">
   ================================================= */

.pf-embed-minimal body{
  margin: 0;
  padding: 14px 0 18px;   /* oben/unten Luft, seitlich 0 */
  background: transparent; /* optional */
}

/* Der Haupt-Frame soll im Embed-Modus volle Breite nutzen */
.pf-embed-minimal .pf-tool-frame{
  max-width: none !important;
  margin: 0 !important;
}

/* Falls einzelne Tools zusätzlich eigene Container max-width setzen */
.pf-embed-minimal .gasbasics-container{
  max-width: none !important;
  margin: 0 !important;
}