/* Grundlayout */
body { font-family: sans-serif; margin: 0; overflow-x: hidden; }

/* ---------- Header ---------- */
header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  width: 100vw;
  max-width: 100%;
  height: 60px;
  box-sizing: border-box;
  overflow: hidden;
}
header img        { width: auto; height: 20px; max-width: 35%; }
header button     {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
  cursor: pointer;
  color: #0065ad;
  font-weight: bold;
}
header .left,
header .right     { display: flex; align-items: center; gap: 30px; }
header button i   { font-size: 1.5rem; color: inherit; }


/* Spiel pausieren Pause-Button ausblenden */
button#pause-btn {
	display:none;
}


/* ---------- Bildpaare-Board ---------- */
.bildpaare-board {
  width: 440px;
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-gap: 10px;
  margin: 20px auto 0;
  transition: opacity 0.15s;
}
.bildpaare-card {
  width: 100px; height: 100px;
  background: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  position: relative;
}
.bildpaare-card.flipped .card-inner { transform: rotateY(180deg); }
.card-inner {
  width: 100%; height: 100%;
  transition: transform 0.3s;
  transform-style: preserve-3d;
  position: relative;
}
.card-front, .card-back {
  position: absolute; width: 100%; height: 100%;
  backface-visibility: hidden; border-radius: 10px;
}
/*.card-front { background: #bbb; border: 1px solid #999; }*/
/* Vorderseite (= noch verdeckt) */
.card-front{
  background:#0065ad;              /* grauer Fond */
  border:1px solid #999;
  display:flex;                 /* Logo sauber zentrieren */
  align-items:center;
  justify-content:center;
}

/* Logo innerhalb der Vorderseite */
.card-front img{
  max-width:100%;                /* etwas Rand lassen */
  max-height:100%;
  /* Logo einfärben → BNN-Blau */
  /* funktioniert, weil SVG – der <path> erbt currentColor */
  color:#0065ad;
  /* falls dein bnn-logo.svg fix schwarz ist, nimm statt-dessen:
     filter: invert(29%) sepia(40%) saturate(2907%) hue-rotate(187deg) brightness(94%) contrast(102%);
     (gibt annähernd #0065ad)                                       */
}
.card-back  { transform: rotateY(180deg); }

.card-back{
  /* … bestehende Eigenschaften … */
  background-size: cover;
  background-position: center;
}

.bnn-logo          { color:#fff; }   /* gewünschte Logofarbe   */


#solveBtn { background: #167a9c; color: #fff; display: block; margin: 30px auto 0; }

#pause-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 20px;
  cursor: pointer;
}

/* ---------- Haupt-Steuerung ---------- */
.main-controls { text-align: center; }
#timer          { margin: 0 10px; font-size: 1rem; min-width: 90px; display: inline-block; }

/* ---------- Pop-ups (einheitliches Design) ---------- */
.popup, .settings-popup, .menu-popup, #pausePopup, #confirmPopup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: none;                             /* wird per JS umgeschaltet   */
  justify-content: center; align-items: center;
  background: rgba(0,0,0,0.60);              /* dunkler Overlay */
  backdrop-filter: blur(5px);                /* leichter Blur   */
  z-index: 2000;
}
.popup:not(.hidden),
.settings-popup:not(.hidden),
.menu-popup:not(.hidden),
#pausePopup:not(.hidden),
#confirmPopup:not(.hidden) {                 /* alle Popups aktiv */
  display: flex;
}

#menuPopup nav div, #helpPopup nav div, #settingsPopup nav div, #postGamePopup nav div {
    padding: 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}
#menuPopup nav {
	width: 100%;
	max-width: 100%;
}
#menuPopup nav div:hover, #helpPopup nav div:hover, #settingsPopup nav div:hover, #postGamePopup nav div:hover {
  background: #f0f0f0;
}

/* zentrischer weißer Kasten */
.popup-content {
  width: 85%; max-width: 380px;
  background: #fff;
  padding: 50px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  text-align: center;
  position: relative;
  display:flex; flex-direction:column; align-items:center;justify-content:center;
}

/* Close-X oben rechts (sofern vorhanden) */
.popup .close,
.settings-popup .close,
.menu-popup .close {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 1.8rem;
  cursor: pointer;
  color: #666;
}

/* Buttons, wie im Pause-Popup */
.btn, .main-btn, .saveHighscoreBtn {
  background: #0065ad;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 1.5rem;
}
.btn.primary        { background: #0065ad; }
.btn:not(.primary)  { background: #777;    }

.btn-row {           /* für Ja / Nein */
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ---------- Highscore-Liste ---------- */
#highscores      { text-align:center; margin-top:4rem; padding: 2rem 2rem 3rem 2rem; background-color: #0065ad; color: #fff;}
.highscore-table   { margin: 30px auto; text-align: center; }
.highscore-entry   { font-size: 15px; margin: 3px 0; }

/* ---------- Konfetti-Canvas ---------- */
canvas#confetti-canvas {
  pointer-events: none;
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 20;
}

/* ---------- Formulare ---------- */
input, textarea { font-size: 16px; padding: 3px 6px; }
label           { margin-top: 12px; }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .bildpaare-board { width: 96.5vw; grid-template-columns: repeat(4, 22vw); }
  .bildpaare-card  { width: 22vw; height: 22vw; }
  header img    { height: 18px; }
  .main-controls{ font-size: 15px; }
}