/* .progress-bar {
  position: relative;
  width: 100%;
  height: 30px;
  border: 2px solid #000;
  border-radius: var(--pill-border-radius);
  background-color: #ddd;
}

.progress-fill {
  height: 100%;
  background-color: green;
  border-radius: var(--pill-border-radius) 0 0 var(--pill-border-radius);
}

.progress-marker {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: black;
}

.progress-marker:nth-child(2) {
  left: 25%;
}

.progress-marker:nth-child(3) {
  left: 50%;
}

.progress-marker:nth-child(4) {
  left: 75%;
} */

.lt-toggle-buttons-jp {
  text-align: center;
  margin-top: 20px;
}
.lt-toggle-button {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000;
  border: 1px solid #ccc;
  padding: 0 .4em;
  margin-left: .1em;
  margin-right: .1em;
  border-radius: 0;         /* match your desktop look */
  cursor: pointer;
  transition: background-color var(--theme-transition), 
              border-color var(--theme-transition), 
              color var(--theme-transition),
              opacity var(--theme-transition) !important;
  user-select: none;        /* optional: prevent text-select on click */
}

.lyrics-translations {
  text-align: center; 
  margin-top: 10px;
}

.lyrics-stanza {
  width: fit-content;
  margin: 15px auto 15px;
  padding: 3px;
  background: transparent;
  border-radius: var(--pill-border-radius);
}

.lyrics-stanza-none {
  width: fit-content;
  margin: 15px auto 15px;
  padding: 3px;
}

.lyrics-explanation {
  display: none;
  margin: 10px auto 10px;
  max-width: 500px;
  background: var(--light-mode-accent-background-color);
  padding: 4px;
  border-radius: var(--pill-border-radius);
  color: #9f9f9f;
  transition: background-color var(--theme-transition) ease,
              color var(--theme-transition) ease;
}

body.dark-mode .lyrics-explanation {
    background: var(--dark-mode-accent2-background-color);
    color: #858585;
}

.lyrics-explanation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lyrics-explanation li + li {
  margin-top: 0.25rem;
}

/* .lyrics-explanation-english {
  font-family: 'Raleway' sans-serif !important;
} */

hr.hr-lyrics-explanation {
  height: 1px;
  color: var(--light-mode-border-color);
  background: var(--light-mode-border-color);
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 0;
  border: 0;
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;
}

body.dark-mode hr.hr-lyrics-explanation {
  color: var(--dark-mode-border-color);
  background: var(--dark-mode-border-color);
}

.lt-highlight {
  background-color: var(--light-mode-active-background-color) !important;
  padding: 0 .2em;
  border-radius: 3px;
  transition: background-color var(--theme-transition) ease,
              color var(--theme-transition) ease;
}
body.dark-mode .lt-highlight {
  background-color: var(--dark-mode-active-background-color) !important;
}

.lt-option-button {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000;
  border: 1px solid #ccc;
  padding: 0 .8em;
  border-radius: 0;         /* match your desktop look */
  cursor: pointer;
  transition: background-color var(--theme-transition), 
              border-color var(--theme-transition), 
              color var(--theme-transition),
              opacity var(--theme-transition) !important;
  user-select: none;        /* optional: prevent text-select on click */
}
.lt-option-button:hover {
  background-color: #e0e0e0;
}
.lt-option-button.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.lt-option-button.correct {
  background-color: #d4edda;
  border-color:   #c3e6cb;
  color:          #155724;
  opacity: 1 !important;
}
.lt-option-button.incorrect {
  background-color: #f8d7da;
  border-color:   #f5c6cb;
  color:          #721c24;
  opacity: 1 !important;
}

.lt-test-options {
  list-style: none;
  padding: 0;
}
.lt-test-options li {
  margin: .5em 0;
}

.lt-quiz-next {
  display: inline-block;
  background-color: #f0f0f0;
  color: #000;
  border: 1px solid #ccc;
  padding: 0 .4em;
  margin-left: .1em;
  margin-right: .1em;
  border-radius: 0;         /* match your desktop look */
  cursor: pointer;
  transition: background-color var(--theme-transition), 
              border-color var(--theme-transition), 
              color var(--theme-transition),
              opacity var(--theme-transition) !important;
  user-select: none;        /* optional: prevent text-select on click */
}