/* Custom styles for mobile-first, rounded, and colorful UI */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap");

/* Base body and background transition */
body {
  font-family: "Inter", sans-serif;
  background-color: #f0f4f8; /* Light gray-blue default background */
  transition: background-color 0.3s ease-in-out;
}

/* Specific flash classes (KEEPING for correct/incorrect feedback) */
.body-flash-green {
  background-color: #bbf7d0 !important; /* Green 200 */
  transition: none;
}
.body-flash-red {
  background-color: #fecaca !important; /* Red 200 */
  transition: none;
}

/* Prevent scrolling when game is active, with iOS fix */
body.no-scroll {
  overflow: hidden;
  position: fixed; /* Prevents scrolling on iOS */
  width: 100%;
  height: 100%;
}

/* Fact box base styles (no border style here) */
.fact-box-base {
  background-color: #eef2ff;
  border-color: #c7d2fe;
  border-width: 3px;
  transition: border-style 0.1s ease-in-out;
}

/* Explicit Border Styles for Alternation */
.fact-box-solid {
  border-style: solid !important;
}

.fact-box-dashed {
  border-style: dashed !important;
}

.game-card {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.btn-keyboard {
  transition: all 0.1s ease-out;
  transform: scale(1);
}
.btn-keyboard:active {
  transform: scale(0.95);
  box-shadow: none;
}
/* Animation for physical key presses */
.key-press-animation {
  transform: scale(0.95);
  box-shadow: none;
  filter: brightness(0.9);
}
.progress-bar {
  height: 10px;
  transition: width 0.1s linear;
}
.suggestion-btn {
  background-color: #3b82f6; /* Blue 500 */
  color: white;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Profile preview styles */
.profile-preview {
  color: #fff;
  transition: background-color 0.2s ease-in-out;
}
/* Style for the pencil icon button */
.edit-profile-btn {
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Semi-transparent white for visibility on color */
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mic button specific style */
.mic-btn {
  background-color: #9333ea; /* Purple */
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/* Style for disabled suggestions */
.disabled-suggestion {
  background-color: #e5e7eb; /* Gray 200 */
  color: #9ca3af; /* Gray 400 */
  cursor: not-allowed;
  opacity: 0.8;
  box-shadow: none;
}

#player-profiles {
  max-height: 400px;
}

/* Toast Notification Styles */
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  color: white;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background-color: #16a34a; /* Green 600 */
}

.toast-error {
  background-color: #dc2626; /* Red 600 */
}

/* Style for penalty flash in reward cell */
.reward-penalty-flash {
  background-color: #fecaca; /* Red 200 */
  border-radius: 0.75rem; /* Corresponds to rounded-xl */
}