.mqg-wrapper{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-user-select:none;
  user-select:none;
}

.mqg-game{
  box-sizing:border-box;
  width:100%;
  max-width:1080px;
  height:100%;
  max-height:1920px;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  background:#020617;
  color:#f9fafb;
}

/* Header: Aufgabe –80px– Zeit –80px– Punkte –80px– Gesamtzeit */
.mqg-header{
  display:flex;
  justify-content:center;
  align-items:center;
  column-gap:80px;
  padding:1rem 1.2rem;
  border-radius:999px;
  background:#0f172a;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
  margin-bottom:1.5rem;
  font-size:1.3rem;
}

.mqg-header > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
}

.mqg-step-label,
.mqg-timer-label,
.mqg-score-label{
  font-size:0.9rem;
  opacity:0.7;
}

.mqg-step-value,
.mqg-timer-value,
.mqg-score-value{
  font-weight:600;
  margin-top:0.1rem;
}

.mqg-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  position:relative;
}

.mqg-footer{
  margin-top:1.2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.mqg-footer-left{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.mqg-select-label{
  font-size:1rem;
  opacity:0.8;
}

.mqg-select{
  padding:0.4rem 0.8rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.5);
  background:#020617;
  color:#e5e7eb;
  font-size:1rem;
}

/* Panel & Buttons */

.mqg-panel{
  width:100%;
  max-width:900px;
  padding:2rem;
  background:#020617;
  border-radius:1.5rem;
  box-shadow:0 20px 60px rgba(15,23,42,0.8);
  border:1px solid rgba(148,163,184,0.25);
  text-align:center;
}

.mqg-panel-full{
  height:100%;
  display:flex;
  flex-direction:column;
}

.mqg-title{
  font-size:2.2rem;
  margin-bottom:1rem;
}

.mqg-text,
.mqg-question{
  font-size:1.4rem;
  margin-bottom:1.5rem;
}

.mqg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1rem 2.4rem;
  border-radius:999px;
  border:none;
  font-size:1.3rem;
  font-weight:600;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}

.mqg-btn-primary{
  background:#22c55e;
  color:#022c22;
  box-shadow:0 12px 30px rgba(34,197,94,0.45);
}

.mqg-btn-primary:active{
  transform:scale(0.97) translateY(1px);
  box-shadow:0 6px 16px rgba(34,197,94,0.35);
}

.mqg-btn-secondary{
  background:#0f172a;
  color:#e5e7eb;
  box-shadow:0 8px 20px rgba(15,23,42,0.7);
}

.mqg-btn-secondary:active{
  transform:scale(0.97) translateY(1px);
  box-shadow:0 4px 12px rgba(15,23,42,0.6);
}

.mqg-answers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
  margin-top:1rem;
}

.mqg-btn-answer{
  width:100%;
}

/* Info-Zeile */

.mqg-info-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.4rem;
  font-size:1.2rem;
  margin-bottom:1rem;
}

.mqg-label-inline{
  opacity:0.8;
}

.mqg-value-inline{
  font-weight:600;
}

/* Kreis-Tap-Feld */

.mqg-tap-field{
  flex:1;
  margin-top:1rem;
  border-radius:1.2rem;
  background:radial-gradient(circle at 10% 20%, #0f172a, #020617);
  position:relative;
  overflow:hidden;
}

.mqg-tap-target{
  position:absolute;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #f97316, #ea580c);
  box-shadow:0 14px 32px rgba(234,88,12,0.7);
  transform:translate(0,0);
  transition:transform 0.1s ease-out;
}

/* Stopp-Balken-Spiel */

.mqg-bar-field{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:1rem 0 1.5rem;
}

.mqg-bar-track{
  position:relative;
  width:100%;
  max-width:700px;
  height:32px;
  border-radius:999px;
  background:#020617;
  border:1px solid rgba(148,163,184,0.5);
  overflow:hidden;
}

.mqg-bar-safe{
  position:absolute;
  top:4px;
  bottom:4px;
  border-radius:999px;
  background:rgba(34,197,94,0.25);
}

.mqg-bar-indicator{
  position:absolute;
  top:3px;
  bottom:3px;
  width:40px;
  border-radius:999px;
  background:linear-gradient(90deg,#f97316,#ea580c);
  box-shadow:0 10px 25px rgba(234,88,12,0.6);
  transform:translateX(-50%);
}

/* Richtungs-Reaktions-Spiel */

.mqg-arrow-display{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:1rem 0;
}

.mqg-arrow-symbol{
  font-size:4rem;
}

.mqg-choice-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}

.mqg-btn-choice{
  width:100%;
}

/* Overlay */

.mqg-overlay{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  opacity:1;
  transition:opacity 0.2s ease;
}

.mqg-overlay.is-hidden{
  opacity:0;
}

.mqg-overlay-box{
  width:100%;
  max-width:600px;
  padding:2rem 2.4rem;
  background:#020617;
  border-radius:1.6rem;
  box-shadow:0 24px 60px rgba(15,23,42,0.9);
  text-align:center;
  border:1px solid rgba(148,163,184,0.28);
}

.mqg-overlay-title{
  font-size:2rem;
  margin-bottom:0.8rem;
}

.mqg-overlay-text{
  font-size:1.3rem;
  margin-bottom:1.5rem;
}

.mqg-overlay-btn{
  width:100%;
}

/* Responsiv / kleinere Auflösungen */
@media (max-width: 900px){
  .mqg-game{
    padding:1rem;
  }
  .mqg-panel{
    padding:1.4rem;
  }
  .mqg-title{
    font-size:1.7rem;
  }
  .mqg-text,
  .mqg-question{
    font-size:1.1rem;
  }
  .mqg-btn{
    font-size:1.05rem;
    padding:0.8rem 1.4rem;
  }
  .mqg-header{
    font-size:1rem;
    column-gap:40px;
  }
}