body {
  font-family: Arial, sans-serif;
  margin: 0; padding: 0;
  background: #fff;
  color: #4b0082;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
.hidden { display: none !important; }

.auth-bar { display: flex; justify-content: flex-end; padding: 10px 20px; background: #f5f5f5; border-bottom: 1px solid #ddd; }
#auth-container { display: flex; gap: 10px; }
#user-profile { display: flex; align-items: center; gap: 10px; }

.google-sign-in-button, .sign-out-button {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  font-size: 14px; font-weight: 500; background: #fff; color: #5f6368;
  border: 1px solid #dadce0; border-radius: 6px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(60,64,67,.3);
}
.google-sign-in-button:hover { background: #f7f8f8; }
.sign-out-button { background: #eee; color: #4b0082; border: 1px solid #4b0082; }

.profile-image { width: 32px; height: 32px; border-radius: 50%; display: none; }
.profile-image[src] { display: inline-block; }
.profile-name { font-size: .9rem; font-weight: bold; color: #4b0082; }

.main-content { max-width: 600px; margin: 40px auto; padding: 0 20px; text-align: center; }
h1 { font-size: 2rem; margin-bottom: 20px; }
.welcome-back { font-size: 1.2rem; color: #228B22; margin-bottom: 15px; font-weight: bold; }
.score, .loading-message { margin-bottom: 10px; }
.score { font-size: 1rem; }
.loading-message { font-style: italic; color: #228B22; }

.question { font-size: 1.3rem; margin-bottom: 15px; }
.question-image { display: block; margin: 10px auto; max-width: 100%; max-height: 250px; border-radius: 12px; }
.question-image.hidden { display: none !important; }

.hint { font-style: italic; margin: 10px 0; color: #228B22; }

.answer-input { width: 80%; padding: 10px; font-size: 1.1rem; border: none; border-bottom: 2px solid #4b0082;
  background: transparent; color: #4b0082; outline: none; margin-top: 10px; }
.submit-msg { font-size: .8rem; color: #4b0082; margin-top: 5px; opacity: .7; }

.wrong-answers { text-align: center; margin: 10px 0; color: red; }

.give-up-button { display: block; margin: 20px auto; font-size: .85rem; color: red; background: none; border: none;
  text-decoration: underline; cursor: pointer; }

.site-footer { text-align: center; background: #f5f5f5; border-top: 1px solid #ddd; padding: 10px 0;
  font-size: .8rem; margin-top: 40px; }
.site-footer a { color: #4b0082; text-decoration: none; margin: 0 6px; }
.site-footer a:hover { text-decoration: underline; }