body {
  font-family: Arial, sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  margin:0;
  padding:10px;
  background:#f5f5f5;
    background-image: url(andres-dallimonti-ypsFFH-XRv0-unsplash.jpeg);
    background-size: cover;
    background-position: center center;
}

.quiz-box {
  background:white;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  padding:30px;
  text-align:center;
  width:100%;
  max-width:600px;
  box-sizing:border-box;
}

.acronym {
  font-size:60px;
  font-weight:bold;
  margin-bottom:20px;
  font-family: Consolas, "Courier New", monospace;
}

.meaning {
  font-size:4vw;
  color:#333;
  margin-bottom:20px;
  word-wrap:break-word;
  min-height:3em;
}

/* Instant blur for Next */
.meaning.blurred {
  filter: blur(5px);
  transition: none;
  pointer-events: none; /* disable clicks while blurred */
}

/* Slow reveal */
.meaning.revealed {
  filter: blur(0);
  transition: filter 0.5s ease;
  pointer-events: auto; /* enable clicks when revealed */
}

/* Add spacing between multiple meanings */
.meaning div {
  margin-bottom: 0.5em;
}

/* Style Learn more links */
.meaning a {
  font-size:0.8em;
  text-decoration:none;
  color:#0077cc;
}

.meaning a:hover {
  text-decoration:underline;
}

button {
  background:#0077cc;
  color:white;
  border:none;
  border-radius:8px;
  padding:12px 20px;
  margin:5px;
  font-size:4vw;
  cursor:pointer;
  transition: background 0.2s ease;
  width:45%;
  max-width:160px;
}

button:hover { background:#005fa3; }

.title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 1.5rem;
}

@media (min-width: 600px) {
  .acronym { font-size:60px; }
  .meaning { font-size:20px; }
  button { font-size:16px; }
}