:root {

  --primary-color: #58cc02;

  --secondary-color: #ff4b4b;

  --tertiary-color: #1cb0f6;

  --background-color: #fff;

  --text-color: #3c3c3c;

  --light-gray: #f7f7f7;

  --medium-gray: #e5e5e5;

  --dark-gray: #afafaf;

  --header-height: 60px;

  --footer-height: 50px;

  --primary-font: 'Nunito', sans-serif;

  --border-radius: 12px;

  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: var(--primary-font);

  color: var(--text-color);

  background-color: var(--light-gray);

  line-height: 1.6;

  min-height: 100vh;

}



#app {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



/* Header Styles */

.app-header {

  background-color: var(--background-color);

  box-shadow: var(--box-shadow);

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 10;

}



.progress-container {

  height: 8px;

  background-color: var(--medium-gray);

}



.progress-bar {

  height: 100%;

  background-color: var(--primary-color);

  width: 0%;

  transition: width 0.3s ease;

}



.header-content {

  height: var(--header-height);

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 20px;

}



.logo {

  font-size: 24px;

  font-weight: 700;

  color: var(--primary-color);

}



.user-stats {

  display: flex;

  gap: 20px;

}



.streak, .points {

  display: flex;

  align-items: center;

  gap: 5px;

  font-weight: 600;

}



/* Main Content Area */

main {

  flex: 1;

  padding: calc(var(--header-height) + 20px) 20px var(--footer-height);

  max-width: 800px;

  margin: 0 auto;

  width: 100%;

}



.screen {

  display: none;

  animation: fadeIn 0.3s ease;

}



.screen.active {

  display: block;

}



/* Home Screen */

#homeScreen {

  text-align: center;

  padding: 40px 0;

}



#homeScreen h1 {

  font-size: 2.5rem;

  color: var(--primary-color);

  margin-bottom: 1rem;

}



#homeScreen p {

  font-size: 1.2rem;

  margin-bottom: 2rem;

}



/* Exercise Selection Screen */

#exerciseScreen h2 {

  text-align: center;

  margin-bottom: 30px;

}



.exercise-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 20px;

}



.exercise-card {

  background-color: var(--background-color);

  border-radius: var(--border-radius);

  box-shadow: var(--box-shadow);

  padding: 20px;

  text-align: center;

  cursor: pointer;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.exercise-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

}



.exercise-icon {

  font-size: 2rem;

  margin-bottom: 10px;

}



.exercise-title {

  font-weight: 600;

  margin-bottom: 5px;

}



.exercise-description {

  font-size: 0.9rem;

  color: var(--dark-gray);

}



.exercise-progress {

  margin-top: 10px;

  height: 8px;

  background-color: var(--medium-gray);

  border-radius: 4px;

  overflow: hidden;

}



.exercise-progress-bar {

  height: 100%;

  background-color: var(--primary-color);

}



/* Activity Screen */

.activity-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}



.activity-progress {

  font-weight: 600;

}



#activityContainer {

  background-color: var(--background-color);

  border-radius: var(--border-radius);

  padding: 30px;

  margin-bottom: 20px;

  box-shadow: var(--box-shadow);

}



.activity-controls {

  display: flex;

  justify-content: center;

  gap: 20px;

}



/* Multiple Choice Activity */

.activity {

  animation: fadeIn 0.3s ease;

}



.activity-prompt {

  margin-bottom: 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.prompt-text {

  font-size: 1.5rem;

  font-weight: 600;

}



.audio-button button {

  background-color: var(--tertiary-color);

  border: none;

  color: white;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  font-size: 1.2rem;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background-color 0.2s ease;

}



.audio-button button:hover {

  background-color: #0b9bd9;

}



.options-container {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 15px;

}



.option {

  background-color: var(--light-gray);

  border: 2px solid var(--medium-gray);

  border-radius: var(--border-radius);

  padding: 15px;

  cursor: pointer;

  transition: all 0.2s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



.option:hover {

  border-color: var(--tertiary-color);

}



.option.selected {

  border-color: var(--tertiary-color);

  background-color: rgba(28, 176, 246, 0.1);

}



.option.correct {

  border-color: var(--primary-color);

  background-color: rgba(88, 204, 2, 0.1);

}



.option.incorrect {

  border-color: var(--secondary-color);

  background-color: rgba(255, 75, 75, 0.1);

}



/* Matching Activity */

.matching-container {

  display: flex;

  justify-content: space-between;

  gap: 20px;

}



.matching-left, .matching-right {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.matching-item {

  background-color: var(--light-gray);

  border: 2px solid var(--medium-gray);

  border-radius: var(--border-radius);

  padding: 15px;

  cursor: pointer;

  transition: all 0.2s ease;

  text-align: center;

}



.matching-item:hover {

  border-color: var(--tertiary-color);

}



.matching-item.selected {

  border-color: var(--tertiary-color);

  background-color: rgba(28, 176, 246, 0.1);

}



.matching-item.matched {

  border-color: var(--primary-color);

  background-color: rgba(88, 204, 2, 0.1);

  cursor: not-allowed;

}



/* Typing Activity */

.typing-container {

  margin-top: 20px;

}



.typing-input {

  width: 100%;

  padding: 15px;

  font-size: 1.2rem;

  border: 2px solid var(--medium-gray);

  border-radius: var(--border-radius);

  font-family: var(--primary-font);

  transition: border-color 0.2s ease;

}



.typing-input:focus {

  outline: none;

  border-color: var(--tertiary-color);

}



.typing-input.correct {

  border-color: var(--primary-color);

  background-color: rgba(88, 204, 2, 0.1);

}



.typing-input.incorrect {

  border-color: var(--secondary-color);

  background-color: rgba(255, 75, 75, 0.1);

}



/* Feedback */

.feedback {

  margin-top: 20px;

  padding: 15px;

  border-radius: var(--border-radius);

  display: none;

}



.feedback.correct {

  background-color: rgba(88, 204, 2, 0.1);

  border: 1px solid var(--primary-color);

  color: var(--primary-color);

  display: block;

}



.feedback.incorrect {

  background-color: rgba(255, 75, 75, 0.1);

  border: 1px solid var(--secondary-color);

  color: var(--secondary-color);

  display: block;

}



/* Results Screen */

#resultsScreen {

  text-align: center;

  padding: 40px 0;

}



.results-container {

  margin: 30px 0;

}



.score-display {

  margin-bottom: 20px;

}



.score-circle {

  width: 150px;

  height: 150px;

  border-radius: 50%;

  border: 10px solid var(--primary-color);

  margin: 0 auto 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 2.5rem;

  font-weight: 700;

}



.results-details {

  font-size: 1.2rem;

  margin-top: 20px;

}



/* Footer */

.app-footer {

  background-color: var(--background-color);

  padding: 15px;

  text-align: center;

  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: var(--footer-height);

}



/* Buttons */

.btn {

  padding: 12px 24px;

  font-family: var(--primary-font);

  font-weight: 700;

  border: none;

  border-radius: var(--border-radius);

  cursor: pointer;

  transition: background-color 0.2s ease, transform 0.1s ease;

}



.btn:active {

  transform: scale(0.98);

}



.btn-primary {

  background-color: var(--primary-color);

  color: white;

}



.btn-primary:hover {

  background-color: #4ba601;

}



.btn-secondary {

  background-color: var(--tertiary-color);

  color: white;

}



.btn-secondary:hover {

  background-color: #0b9bd9;

}



.btn-secondary:disabled {

  background-color: var(--dark-gray);

  cursor: not-allowed;

}



.btn-back {

  background-color: transparent;

  color: var(--text-color);

  padding: 8px 16px;

}



.btn-back:hover {

  background-color: var(--light-gray);

}



/* Animations */

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Responsive Design */

@media (max-width: 600px) {

  .exercise-grid {

    grid-template-columns: 1fr;

  }



  .options-container {

    grid-template-columns: 1fr;

  }



  .matching-container {

    flex-direction: column;

  }



  .activity-controls {

    flex-direction: column;

  }



  .btn {

    width: 100%;

  }

}



/* Japanese-specific styles */

.japanese-text {

  font-family: 'Noto Sans JP', var(--primary-font);

}



.furigana {

  display: block;

  font-size: 0.7em;

  text-align: center;

  color: var(--dark-gray);

}



.kanji-container {

  display: inline-block;

  vertical-align: middle;

}