:root {
  --primary-color: #003366;
  --primary-light: #66a3ff;
  --primary-lighter: #cce6ff;
  --primary-lightest: #e6f5ff;
  --accent-color: #66c2ff;
  --accent-hover: #3399ff;
  --success-color: #008000;
  --success-light: rgba(0,128,0,0.2);
  --error-color: #cc0000;
  --error-light: #ffcccc;
  --warning-color: #ffa500;
  --star-color: #ffd700;
  --background-gradient-start: #a5d3f2;
  --background-gradient-end: #e0f7ff;
  --white: #ffffff;
  --shadow: 0 4px 10px rgba(0,0,0,0.1);
  --shadow-strong: 0 4px 10px rgba(0,0,0,0.2);
  --border-radius-small: 8px;
  --border-radius-medium: 12px;
  --border-radius-large: 15px;
  --font-size-small: 1rem;
  --font-size-medium: 1.2rem;
  --font-size-large: 1.4rem;
  --font-size-xlarge: 1.8rem;
  --font-size-xxlarge: 2rem;
  --font-size-xxxlarge: 3rem;
  --transition-quick: 0.2s;
  --transition-standard: 0.3s;
  --spacing-small: 5px;
  --spacing-medium: 10px;
  --spacing-large: 20px;
  --spacing-xlarge: 30px;
  
  /* Math-specific colors */
  --math-background: #e8f4ff;
  --math-border: #2a93d5;
  --math-highlight: #a0d2f2;
}

/* Overall page styling */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, var(--background-gradient-start), var(--background-gradient-end));
  font-family: "Ubuntu", Arial, sans-serif;
  min-height: 100vh;
  color: var(--primary-color);
}

.hidden {
  display: none !important;
}

/* Screens: initial opacity zero with transition */
.screen {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* When a screen becomes active, it fades in and slides into place */
.screen.active {
  opacity: 1;
  animation: fadeInSlide 0.6s ease-out;
}

/* Fade-out class for transitioning out screens */
.fade-out {
  animation: fadeOutSlide 0.6s ease-out;
}

/* Keyframes for fading in and sliding up */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframes for fading out and sliding slightly up */
@keyframes fadeOutSlide {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Special animation for the final results screen */
#resultsScreen.active {
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Intro Screen */
#introScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh; 
  background-color: rgba(255,255,255,0.8);
  padding: 0 var(--spacing-large);
}

/* Title on the first page */
#introScreen h1 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-medium);
  font-size: var(--font-size-xxlarge);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Settings panel */
#gameSettings {
  background-color: var(--primary-lighter);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-large);
  margin-bottom: var(--spacing-large);
  width: 80%;
  max-width: 500px;
  box-shadow: var(--shadow);
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-medium);
}

.settings-row label {
  flex: 1;
  text-align: left;
  font-weight: bold;
}

.settings-row select, 
.settings-row input {
  flex: 1;
  padding: 8px;
  border-radius: var(--border-radius-small);
  border: 1px solid var(--primary-light);
  background-color: var(--white);
}

/* Instruction text with extra spacing below */
#introScreen h2 {
  color: var(--primary-color);
  margin-bottom: var(--spacing-xlarge);
  font-size: var(--font-size-large);
}

/* Container for words to memorize: bigger text, displayed in a row */
#wordsToMemorize {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-large);
  justify-content: center;
  margin-bottom: var(--spacing-large);
}
.introWord {
  font-size: var(--font-size-xxlarge);
  color: var(--primary-color);
  font-weight: bold;
  padding: var(--spacing-medium);
  background-color: var(--primary-lightest);
  border-radius: var(--border-radius-small);
  box-shadow: var(--shadow);
  transition: transform var(--transition-standard);
}
.introWord:hover {
  transform: scale(1.1);
  cursor: pointer;
  background-color: var(--primary-lighter);
}

/* Math-specific styling for intro words */
.introWord.math {
  font-family: 'Roboto Mono', monospace, sans-serif;
  background-color: var(--math-background);
  border: 2px solid var(--math-border);
  padding: var(--spacing-medium) var(--spacing-large);
  border-radius: var(--border-radius-medium);
}

.introWord.math:hover {
  background-color: var(--math-highlight);
  transform: scale(1.1);
}

.standard-button {
  background-color: var(--accent-color);
  border: none;
  border-radius: var(--border-radius-small);
  color: var(--white);
  padding: var(--spacing-medium) var(--spacing-large);
  cursor: pointer;
  font-size: var(--font-size-small);
  margin: var(--spacing-medium);
  transition: background-color var(--transition-standard), transform var(--transition-standard);
  box-shadow: var(--shadow);
  font-weight: bold;
}
.standard-button:hover {
  background-color: var(--accent-hover);
  transform: scale(1.05);
  box-shadow: var(--shadow-strong);
}
.standard-button:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.standard-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Timer display */
.timer-container {
  width: 50%;
  min-width: 250px;
  max-width: 700px;
  margin: 10px auto;
  background-color: var(--primary-lighter);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-medium);
  text-align: center;
  box-shadow: var(--shadow);
}

.timer-bar {
  width: 100%;
  height: 10px;
  background-color: var(--primary-lightest);
  border-radius: 5px;
  overflow: hidden;
  margin-top: var(--spacing-small);
}

.timer-progress {
  height: 100%;
  width: 0%;
  background-color: var(--accent-color);
  transition: width 0.1s linear;
}

/* Scoreboard container */
#scoreboard {
  text-align: center;
  margin: 10px auto;
  font-size: var(--font-size-medium);
  background-color: var(--primary-lighter);
  border: 2px solid var(--primary-light);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-medium);
  width: 50%;
  min-width: 250px;
  max-width: 700px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}

.score-item {
  padding: var(--spacing-small);
  font-weight: bold;
}

/* The main container for the words */
#game-container {
  position: relative;
  width: 90%;
  height: 70vh;
  margin: var(--spacing-large) auto;
  border: 2px solid var(--primary-light);
  border-radius: var(--border-radius-large);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow);
  max-width: 1200px;
}

/* Word styling in the cloud */
.word {
  position: absolute;
  font-size: var(--font-size-large);
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  color: var(--primary-color);
  transition: transform var(--transition-quick);
  padding: var(--spacing-small);
  border-radius: var(--border-radius-small);
}
.word:hover {
  transform: scale(1.2);
}
.word:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Math-specific styling for words in the cloud */
.word.math {
  font-family: 'Roboto Mono', monospace, sans-serif;
  background-color: var(--math-background);
  border: 1px solid var(--math-border);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--border-radius-small);
}

.word.math:hover {
  background-color: var(--math-highlight);
  transform: scale(1.1);
}

/* Found word: green circle border & transparent green background */
.found {
  color: var(--success-color);
  border: 2px solid var(--success-color);
  background-color: var(--success-light);
  border-radius: 50%;
  padding: var(--spacing-medium);
  display: inline-block;
  font-weight: bold;
  animation: pulse 1s;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Incorrect word (shake animation in red), no popup in word cloud */
.incorrect {
  animation: shake 0.4s;
  color: #ff6666;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Drag & Drop Screen Styles */
#dragDropContainer {
  width: 90%;
  max-width: 800px;
  margin: var(--spacing-large) auto;
  text-align: center;
  padding: var(--spacing-medium);
  border: 2px dashed var(--primary-light);
  border-radius: var(--border-radius-medium);
  background-color: var(--primary-lightest);
  box-shadow: var(--shadow);
}

#dragDropMessage {
  margin-bottom: var(--spacing-large);
  color: var(--primary-color);
  font-size: var(--font-size-large);
  font-weight: bold;
}

/* Container for draggable words */
#wordsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-medium);
  justify-content: center;
  align-items: center;
  padding: var(--spacing-medium);
  margin-bottom: var(--spacing-large);
  border-radius: var(--border-radius-medium);
  background-color: var(--white);
  min-height: 60px; /* Reduced height */
  border: 1px solid var(--primary-light);
}

/* Individual draggable word style */
.draggableWord {
  padding: 8px 12px;
  background-color: var(--primary-lighter);
  border-radius: var(--border-radius-small);
  cursor: grab;
  user-select: none;
  font-weight: bold;
  color: var(--primary-color);
  box-shadow: var(--shadow);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
  margin: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.draggableWord:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-strong);
  background-color: var(--primary-light);
}

.draggableWord:active {
  cursor: grabbing;
}

/* Math-specific styling for draggable words */
.draggableWord.math {
  font-family: 'Roboto Mono', monospace, sans-serif;
  background-color: var(--math-background);
  border: 1px solid var(--math-border);
  padding: 8px 16px;
}

.draggableWord.math:hover {
  background-color: var(--math-highlight);
  transform: scale(1.05);
}

/* Container for drop zones */
#dropZonesContainer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-large);
  justify-content: center;
  margin-bottom: var(--spacing-large);
}

/* Individual drop zone style */
.dropZone {
  width: 120px;
  height: 40px;
  border: 2px dashed var(--primary-light);
  border-radius: var(--border-radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  transition: background-color var(--transition-standard);
  /* Ensure the drop zone is large enough for words */
  padding: var(--spacing-small);
  margin: var(--spacing-small);
}

/* Math-specific styling for drop zones */
.dropZone.math {
  width: 140px; /* Etwas breiter für Mathe-Aufgaben */
  background-color: rgba(232, 244, 255, 0.3);
  border: 2px dashed var(--math-border);
}

/* Ensure draggable words remain centered when in a drop zone */
.dropZone .draggableWord {
  margin: 0 auto;
  position: relative;
  top: 0;
  left: 0;
  transform: none;
}

.dropZone.highlight {
  background-color: var(--primary-lighter);
  border-style: solid;
}

/* When a word is correctly placed */
.dropZone.correct {
  background-color: var(--success-light);
  border: 2px solid var(--success-color);
}

/* When a word is incorrectly placed */
.dropZone.incorrect {
  background-color: var(--error-light);
  border: 2px solid var(--error-color);
  animation: shake 0.4s;
}

/* Style for word when being dragged */
.dragging {
  opacity: 0.5;
  transform: scale(1.1);
}

/* Second challenge container */
#typeWordsContainer {
  width: 90%;
  margin: var(--spacing-large) auto;
  text-align: center;
  padding: var(--spacing-medium);
  border: 2px dashed var(--primary-light);
  border-radius: var(--border-radius-medium);
  background-color: var(--primary-lightest);
  box-shadow: var(--shadow);
  max-width: 700px;
}
#typeWordsContainer h3 {
  margin-bottom: var(--spacing-small);
  color: var(--success-color);
  font-weight: bold;
}
#wordInputs {
  margin: var(--spacing-medium) auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-small);
}
#wordInputs input {
  padding: 8px;
  font-size: var(--font-size-small);
  width: 200px;
  text-align: center;
  border: 2px solid var(--primary-light);
  border-radius: var(--border-radius-small);
  outline: none;
  transition: background-color var(--transition-standard), border var(--transition-standard);
}

/* Math-specific styling for input fields */
#wordInputs input.math-input {
  font-family: 'Roboto Mono', monospace, sans-serif;
  border: 2px solid var(--math-border);
  background-color: rgba(232, 244, 255, 0.2);
  width: 220px; /* Etwas breiter für Mathe-Aufgaben */
}

/* Container for stars + final text */
#starsContainer {
  margin: var(--spacing-medium) 0;
  font-size: var(--font-size-xlarge);
  color: var(--star-color);
}

/* Orange & bold text for the final message */
.orangeText {
  color: var(--warning-color);
  font-weight: bold;
  font-size: var(--font-size-medium);
}

/* Game Results display */
#gameResults {
  width: 90%;
  max-width: 500px;
  margin: var(--spacing-large) auto;
  background-color: var(--primary-lightest);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-large);
  box-shadow: var(--shadow);
  text-align: center;
  border: 2px solid var(--primary-light);
}

#gameResults h3 {
  text-align: center;
  margin-top: 0;
  color: var(--success-color);
  font-size: var(--font-size-large);
}

/* Stars in results */
.stars-container {
  margin: 15px 0;
  font-size: 2rem;
}

.star {
  color: var(--star-color);
  margin: 0 2px;
}

.star-empty {
  color: #d0d0d0;
  margin: 0 2px;
}

/* Points description text */
.points-description {
  margin: 8px 0;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* Custom Red Popup (modal) for second challenge mistakes only */
#customPopup {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: var(--spacing-medium);
}
#popupContent {
  background-color: var(--error-light);
  color: var(--error-color);
  border: 2px solid var(--error-color);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-large);
  text-align: center;
  width: 250px;
  box-shadow: var(--shadow-strong);
  position: relative;
}
#popupClose {
  float: right;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--error-color);
  background: none;
  border: none;
}
#popupClose:hover {
  color: #ff0000;
}
.big-smiley {
  font-size: var(--font-size-xxxlarge);
  margin: var(--spacing-medium) 0;
}

/* MEDIA QUERIES for better mobile responsiveness */
@media (max-width: 768px) {
  #gameSettings {
    width: 90%;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-row label,
  .settings-row select,
  .settings-row input {
    width: 100%;
    margin-bottom: var(--spacing-small);
  }

  #scoreboard {
    width: 90%;
    font-size: var(--font-size-small);
    padding: 8px;
    flex-direction: column;
  }

  .timer-container {
    width: 90%;
  }
  
  #dropZonesContainer {
    gap: 10px;
  }
  
  .dropZone {
    width: 100px;
    height: 35px;
  }
  
  /* Make math drop zones responsive on mobile */
  .dropZone.math {
    width: 120px;
  }
  
  /* Adjust math input width on mobile */
  #wordInputs input.math-input {
    width: 180px;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.6rem;
  }
  h2 {
    font-size: 1.1rem;
    margin-bottom: 15px;
  }
  #game-container {
    height: 50vh;
  }
  .word {
    font-size: 1.1rem; 
  }
  .introWord {
    font-size: 1.4rem;
  }
  #wordInputs input {
    width: 80%;
  }
  
  .draggableWord {
    font-size: 0.9rem;
    padding: 8px;
  }
}