/* AL60 Vier Gewinnt – Design V2 Override */

.al60-vg-wrap {
  --vg-primary:   var(--al60-primary, #1F6F5B);
  --vg-accent:    var(--al60-primary-dark, #145443);
  --vg-surface:   #FFFFFF;
  --vg-surface2:  #F4EFE6;
  --vg-border:    #D8D3C7;
  --vg-text:      #1F2933;
  --vg-text-soft: #4B5563;

  margin: 1rem auto;
}

/* Header: grüner Gradient */
.al60-vg-header {
  background: linear-gradient(135deg, var(--al60-primary) 0%, var(--al60-primary-dark) 100%);
  border-radius: 16px 16px 0 0;
}

/* Scoreboard-Werte */
.al60-vg-score-val,
.al60-vg-title {
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

/* Drop-Buttons: größere Touch-Ziele */
.al60-vg-col-btn {
  height: clamp(44px, 8vw, 56px);
  border-radius: 10px;
  font-size: 1.2rem;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}

.al60-vg-col-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.25);
  color: #fff;
  transform: translateY(-3px);
}

.al60-vg-col-btn:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 3px;
}

/* Aktionsbuttons (Neu starten etc.) */
.al60-vg-wrap button:not(.al60-vg-col-btn) {
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
}

.al60-vg-wrap button:not(.al60-vg-col-btn):focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 3px;
}

/* Statusmeldung / Win-Banner */
.al60-vg-status,
.al60-vg-result {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1F2933;
  background: #F4EFE6;
  border: 1px solid #D8D3C7;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  text-align: center;
}

@media (max-width: 480px) {
  .al60-vg-col-btn {
    height: 44px;
    font-size: 1rem;
  }
}