:root {

  --primary-color: #58cc02;

  --secondary-color: #ff4b4b;

  --tertiary-color: #1cb0f6;

  --background-color: #fff;

  --text-color: #3c3c3c;

  --translation-color: #777;

  --light-gray: #f7f7f7;

  --medium-gray: #e5e5e5;

  --dark-gray: #afafaf;

  --header-height: 60px;

  --footer-height: 50px;

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

  --japanese-font: 'Noto Sans JP', sans-serif;

  --border-radius: 12px;

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

  --animation-timing: 0.3s ease;

}



* {

  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.5s 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);

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

}



.controls {

  display: flex;

  gap: 15px;

}



.control-button {

  background: none;

  border: none;

  font-size: 24px;

  cursor: pointer;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background-color var(--animation-timing);

}



.control-button:hover {

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

}



/* 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 var(--animation-timing);

}



.screen.active {

  display: block;

}



/* Story Selection Screen */

#storySelectionScreen {

  text-align: center;

  padding: 40px 0;

}



#storySelectionScreen h1 {

  font-size: 2.5rem;

  color: var(--primary-color);

  margin-bottom: 1rem;

}



#storySelectionScreen p {

  font-size: 1.2rem;

  margin-bottom: 2rem;

}



.story-grid {

  display: grid;

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

  gap: 20px;

}



.story-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;

  overflow: hidden;

}



.story-card:hover {

  transform: translateY(-5px);

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

}



.story-icon {

  font-size: 2.5rem;

  margin-bottom: 15px;

  position: relative;

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

}



.story-title-card {

  font-weight: 600;

  font-size: 1.1rem;

  margin-bottom: 8px;

}



.story-description {

  font-size: 0.9rem;

  color: var(--dark-gray);

}



.story-length {

  margin-top: 10px;

  font-size: 0.85rem;

  color: var(--tertiary-color);

}



.story-difficulty {

  display: inline-block;

  margin-top: 5px;

  padding: 3px 8px;

  border-radius: 12px;

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

}



.difficulty-beginner {

  background-color: #e6f7e6;

  color: #2a9d2a;

}



.difficulty-intermediate {

  background-color: #fff2e6;

  color: #ff8c00;

}



.difficulty-advanced {

  background-color: #ffe6e6;

  color: #d9534f;

}



/* Story Reading Screen */

.reading-header {

  display: flex;

  align-items: center;

  margin-bottom: 30px;

  gap: 20px;

}



.story-title {

  margin: 0;

  font-size: 1.8rem;

  color: var(--primary-color);

  flex-grow: 1;

  text-align: center;

}



.story-container {

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

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

  padding: 40px 30px;

  margin-bottom: 30px;

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

  min-height: 300px;

  position: relative;

}



.sentence-container {

  position: relative;

}



.sentence {

  margin-bottom: 30px;

  opacity: 0;

  transform: translateY(20px);

  animation: fadeInUp 0.8s forwards;

}



.japanese-text {

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

  font-size: 1.6rem;

  line-height: 1.8;

  margin-bottom: 10px;

  color: var(--text-color);

}



.translation-text {

  font-size: 1.2rem;

  line-height: 1.6;

  color: var(--translation-color);

  font-style: italic;

}



.reading-footer {

  display: flex;

  justify-content: flex-end;

  padding: 15px 0;

}



.speed-control {

  display: flex;

  align-items: center;

  gap: 10px;

}



.slider {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  height: 8px;

  border-radius: 4px;

  background: var(--medium-gray);

  outline: none;

  opacity: 0.8;

  transition: opacity 0.2s;

}



.slider:hover {

  opacity: 1;

}



.slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: var(--tertiary-color);

  cursor: pointer;

}



.slider::-moz-range-thumb {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: var(--tertiary-color);

  cursor: pointer;

}



/* Word Prompt */

.word-prompt {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 100;

  animation: fadeIn 0.3s ease;

}



.word-prompt.hidden {

  display: none;

}



.word-prompt-content {

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

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

  padding: 30px;

  width: 90%;

  max-width: 500px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

  text-align: center;

  animation: scaleIn 0.3s ease;

}



.word-prompt-content h3 {

  margin-bottom: 20px;

  font-size: 1.5rem;

  color: var(--primary-color);

}



.word-options {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 15px;

  margin-bottom: 20px;

}



.word-option {

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

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

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

  padding: 15px 10px;

  cursor: pointer;

  transition: all 0.2s ease;

  font-size: 1.2rem;

  display: flex;

  align-items: center;

  justify-content: center;

}



.word-option:hover {

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

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

}



.word-option.selected {

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

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

}



.word-option.correct {

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

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

}



.word-option.incorrect {

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

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

}



.word-text {

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

}



.prompt-feedback {

  margin-top: 20px;

  padding: 15px;

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

  font-weight: 600;

  display: none;

}



.prompt-feedback.correct {

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

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

  color: var(--primary-color);

  display: block;

}



.prompt-feedback.incorrect {

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

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

  color: var(--secondary-color);

  display: block;

}



/* Settings Modal */

.modal {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 100;

  animation: fadeIn 0.3s ease;

}



.modal.hidden {

  display: none;

}



.modal-content {

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

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

  width: 90%;

  max-width: 500px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

  animation: scaleIn 0.3s ease;

  overflow: hidden;

}



.modal-header {

  padding: 20px;

  border-bottom: 1px solid var(--medium-gray);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.modal-header h3 {

  margin: 0;

  color: var(--text-color);

}



.close-button {

  background: none;

  border: none;

  font-size: 24px;

  cursor: pointer;

  color: var(--dark-gray);

}



.modal-body {

  padding: 20px;

}



.setting-group {

  margin-bottom: 25px;

}



.setting-group label {

  display: block;

  margin-bottom: 8px;

  font-weight: 600;

}



.setting-control {

  display: flex;

  align-items: center;

  gap: 10px;

}



.setting-description {

  margin-top: 8px;

  font-size: 0.9rem;

  color: var(--dark-gray);

}



.modal-footer {

  padding: 15px 20px;

  border-top: 1px solid var(--medium-gray);

  text-align: right;

}



/* Completion Screen */

#completionScreen {

  text-align: center;

  padding: 40px 0;

}



#completionScreen h2 {

  color: var(--primary-color);

  margin-bottom: 30px;

}



.completion-container {

  margin: 30px 0;

}



.score-display {

  margin-bottom: 30px;

}



.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;

}



.completion-details {

  font-size: 1.2rem;

  margin-top: 20px;

  line-height: 1.8;

}



.completion-buttons {

  display: flex;

  justify-content: center;

  gap: 20px;

  margin-top: 40px;

}



/* 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-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;

  }

  to {

    opacity: 1;

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes scaleIn {

  from {

    opacity: 0;

    transform: scale(0.9);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}



@keyframes highlightText {

  0% {

    background-color: transparent;

  }

  30% {

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

  }

  100% {

    background-color: transparent;

  }

}



/* Japanese-specific styles */

.japanese-text {

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

}



.furigana {

  display: block;

  font-size: 0.5em;

  text-align: center;

  color: var(--tertiary-color);

}



.kanji-container {

  display: inline-block;

  vertical-align: middle;

  position: relative;

  line-height: 1.5;

}



/* Responsive Design */

@media (max-width: 600px) {

  .story-grid {

    grid-template-columns: 1fr;

  }



  .word-options {

    grid-template-columns: 1fr;

  }



  .completion-buttons {

    flex-direction: column;

  }



  .japanese-text {

    font-size: 1.4rem;

  }



  .translation-text {

    font-size: 1rem;

  }



  .story-container {

    padding: 30px 20px;

  }

}