body { font-family: sans-serif; margin: 0; overflow-x: hidden;}
table { border-collapse: collapse; margin: 20px auto; width: 90%; max-width: 400px; }
td {
  width: 10%; height: 40px;
  border: 1px solid #000; font-size: 20px; font-weight: bold;
  text-align: center; cursor: pointer;
}

/* Schriftgröße von Font Awesome-Icons im Header anpassen */
header button i {
  font-size: 1.5rem;   /* oder z.B. 1.2em */
  color: inherit;    /* erbt die Button-Farbe */
}

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

/* Sudoku-Gitter: innen dünn, innen 3×3-Block-Grenzen dick, außen dick */
table#sudoku {
  border-collapse: collapse;
  margin: 20px auto 0;
  width: 90%;
  max-width: 400px;
}

/* alle Zellen dünn umranden */
table#sudoku td {
  width: 10%;
  height: 40px;
  border: 1px solid #000;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

/* innen dick: 3×3-Block-Grenzen */
table#sudoku td.thick-border-right {
  border-right: 3px solid #000;
}
table#sudoku td.thick-border-bottom {
  border-bottom: 3px solid #000;
}

/* außen dick: komplette Außengrenze */
table#sudoku tr:first-child td {
  border-top: 3px solid #000;
}
table#sudoku tr:last-child td {
  border-bottom: 3px solid #000;
}
table#sudoku td:first-child {
  border-left: 3px solid #000;
}
table#sudoku td:last-child {
  border-right: 3px solid #000;
}

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

/*.highlight { background-color: #dbeaf6; }*/
.selected { background-color: #f0e68c; }
.correct { color: #28b307; }
.incorrect { color: #ff0000; }
.number-pad { text-align: center; margin-top: 20px; }
.number-pad button {
  width: 50px; height: 50px; font-size: 20px;
  margin: 5px; justify-content: center; align-items: center;
  border: 0.5px solid #aaa; border-radius: 4px;
  color: #fff;
  background-color: #0065ad;
  font-weight: 900;
}

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

/* Header Design */
header {
  /*background-color: #e0e0e0;*/
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;				/* engerer Innenabstand */
  width: 100vw;				/* nie breiter als der Viewport */
  max-width: 100%;			/* sicherheitshalber */
  height: 60px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Logo */
header img {
  width: auto;
  height: 20px;          /* etwas kleiner */
  max-width: 35%;        /* passt sich an */
}
/* Links/Icons statt Buttons */
header button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 18px;       /* Icon-Größe */
  cursor: pointer;
  /*color: #000;*/
  color: #0065ad;
  font-weight: bold;
}
/* Abstand in den Icon-Gruppen */
header .left,
header .right {
  display: flex;
  align-items: center;
  gap: 30px;              /* etwas weniger Abstand */
}
/* ---------- 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;
}


/* Mobile-Optimierung */
@media (max-width: 600px) {
  header {
    padding: 20px;
  }
  header img {
    height: 18px;
  }
  /*header .left,
  header .right {
    gap: 20px;
  }*/
}