@import url(https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Orbitron:wght@400..900&display=swap);
body {
  font-family: "Lora", serif;
  color: white;
  background-color: darkslategray;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.numpad-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff;
}

.display {
  font-family: "Orbitron", sans-serif;
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;
  min-height: 40px;
  text-align: right;
  font-size: 1.8em;
  color: darkgreen;
  text-shadow: 0 0 8px lime, 0 0 16px #0f0, 0 0 2px #fff;
  overflow: hidden; /* In case numbers go beyond width */
  white-space: nowrap; /* Prevent numbers from wrapping */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.display.wrong {
    color: darkred;
    text-shadow: 0 0 8px red, 0 0 16px darkred, 0 0 2px #fff;
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.button {
  width: 70px;
  height: 70px;
  font-size: 1.5em;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  touch-action: manipulation;
}

.button:hover {
  background-color: #0056b3;
}

.button:active {
  background-color: #004085;
  transform: translateY(1px);
}

.enter {
  background-color: green;
}

.enter:hover {
  background-color: darkgreen;
}

.enter::before {
  content: "✔";
}

.back {
  background-color: darkgray;
}

.back:hover {
  background-color: gray;
}

.back::before {
  content: "←";
}

.hint {
    position: fixed;
    bottom: 10%;
    right: 20%;
    z-index: 1000;
}

.hint button {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    font-size: 1.5em;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.hint button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

[popover] a {
    color: rgb(123, 180, 255) 
}

[popover] a:hover {
    color: rgb(255, 255, 255);
}
[popover]:popover-open {
  opacity: 1;
}

[popover] {
  opacity: 0;
  position: fixed;
  top: 66%; /* 66% down from the top = lower third */
  transform: translateY(-50%);
  min-width: 300px;
  max-width: 90vw;

  background: rgba(40, 60, 80, 0.85);
  color: #fff;
  font-size: 1em;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  text-align: center;

  transition-property: opacity, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
  }
}

.popover-content {
  padding: 32px 24px;
}

[popover] .cancel-button {
  text-align: center;
  font-size: 1em;
  border: none;
  border-radius: 8px;
  background-color: #b22222;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
  float: right;
  margin-left: 16px;
}

.popover-option {
  justify-content: center;
  gap: 16px;
  margin-top: 16px;

  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  background-color: #4690e6;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.popover-option:hover {
  background-color: #d4eaff;
  color: black;
}

.cancel-button:hover {
  background-color: #8b1a1a;
}

.popover::backdrop {
  content: "";
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
  backdrop-filter: blur(2px); /* Optional: blur the background */
  pointer-events: none;
}