/**********************/
/** STANDARDIZED BUTTON SYSTEM **/
/** Base button - all shared properties **/

.btnUniversal {
  width: fit-content;
  min-width: 150px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: white;
  font-size: 28px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  padding: 12px 18px;
  line-height: 1.2;
  background-color: #3878c0;
  text-shadow: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.btnUniversal:active {
  transform: scale(0.96);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Icon first: height-capped slot, width follows the file’s aspect ratio */
.btnUniversal::before {
  content: '';
  display: block;
  flex: 0 0 auto;
  height: 1.27em;
  width: auto;
  max-height: 36px;
  max-width: 2.4em;
  aspect-ratio: var(--btn-icon-ratio, 1);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
}

/* Label: fill space after icon and center horizontally */
.btnUniversal::after {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}

/**
 * Text-only label (no icon column). Same height, font-size, and padding as base .btnUniversal;
 * width follows the label instead of min-width:150px + icon gutter.
 */
.btnUniversal.btnUniversal--textOnly {
  min-width: 0;
  width: max-content;
  justify-content: center;
}

.btnUniversal.btnUniversal--textOnly::before,
.btnUniversal.btnUniversal--textOnly::after {
  display: none;
  content: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/** Selected / pressed state for compact text-only toggles (e.g. top-bar mode chips) */
.btnUniversal.btnUniversal--textOnly.is-selected,
.btnUniversal.btnUniversal--textOnly[aria-pressed="true"] {
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.2);
  filter: brightness(1.08);
}

/**********************/
/** STANDARDIZED BUTTON VARIANTS (ID-based) **/
/** Each variant only changes: text, color, icon **/

/*****************/
/** PLAY BUTTON **/
/*****************/
#playButton.btnUniversal::after {
  content: "Play";
}

#playButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

#playButton.btnUniversal {
  background-color: var(--brettsBlue);
  border-color: var(--brettsBlue);
}

#playButton.btnUniversal::before,
#playButtonDisabled.btnUniversal::before,
#playAllButton.btnUniversal::before,
.btnUniversal.btnUniversalPlayIcon::before {
  background-image: url('/res/images/universalBtn/play-circle.webp');
  --btn-icon-ratio: 1;
  filter: brightness(0) invert(1);
}

/** Square play control — icon only, same 60px height as .btnUniversal */
.btnUniversal.btnUniversalPlayIcon {
  background-color: #8b5fbf;
  border-color: #5a2066;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  padding: 0;
  justify-content: center;
}

.btnUniversal.btnUniversalPlayIcon::after {
  content: none;
  display: none;
}

.btnUniversal.btnUniversalPlayIcon::before {
  margin-right: 0;
  max-width: 70%;
  max-height: 70%;
}

#playAllButton.btnUniversal::after {
  content: "Play";
}

#playAllButton.btnUniversal[data-lang="hi"]::after {
  content: "प्ले";
}

#playAllButton.btnUniversal {
  background-color: var(--brettsBlue);
  border-color: var(--brettsBlue);
}

#playButtonDisabled.btnUniversal::after {
  content: "Play";
}

#playButtonDisabled.btnUniversal {
  background-color: var(--brettsBlue);
  border-color: var(--brettsBlue);
}

/******************/
/** QUIZ BUTTON **/
/******************/
/** Based on play; aqua color **/
#quizButton.btnUniversal::after {
  content: "Quiz";
}

#quizButton.btnUniversal {
  background-color: #00bcd4; /* Aqua */
  border-color: #00838f; /* Darker aqua */
}

#quizButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/play-circle.webp');
  --btn-icon-ratio: 1;
  filter: brightness(0) invert(1);
}

/******************/
/** STUDY BUTTON **/
/******************/
#studyButton.btnUniversal::after {
  content: "Study";
}

#studyButton.btnUniversal[data-lang="hi"]::after {
  content: "अध्ययन";
}

#studyButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

#studyButton.btnUniversal {
  background-color: #00847d; /* Teal */
  border-color: #004a45; /* Darker teal */
}

#studyButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/study.webp');
  --btn-icon-ratio: 74 / 82;
}

/******************/
/** COMMON LETTERS FILTER (soundboard sbAlphabetHi1) **/
/** Label from JS (i18n); use .btnUniversal--textOnly in HTML **/
/******************/
#commonLettersFilterButton.btnUniversal {
  background-color: #6a4c93;
  border-color: #4a3270;
}

#commonLettersFilterButton.btnUniversal.active {
  outline: 4px solid var(--goldHighlight);
}

/******************/
/** CLOSE BUTTON **/
/******************/
#closeButton.btnUniversal::after {
  content: "Close";
}

#closeButton.btnUniversal[data-lang="hi"]::after {
  content: "बंद";
}

#closeButton.btnUniversal[data-exit-label]::after {
  content: attr(data-exit-label);
}

#closeButton.btnUniversal {
  background-color: #dc1a1a; /* Red */
  border-color: #8b1010; /* Darker red */
}

#closeButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/white-x.webp');
  --btn-icon-ratio: 1;
}

/******************/
/** CLEAR BUTTON **/
/******************/
#clearButton.btnUniversal::after {
  content: "Clear";
}

#clearButton.btnUniversal {
  background-color: #dc1a1a; /* Red */
  border-color: #8b1010; /* Darker red */
}

#clearButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/white-x.webp');
  --btn-icon-ratio: 1;
}

/**********************/
/** NEXT BUTTON **/
/**********************/
#nextButton.btnUniversal::after {
  content: "Next";
}

#nextButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

#nextButton.btnUniversal {
  background-color: #268d29; /* Green */
  border-color: #155017; /* Darker green */
}

#nextButton.btnUniversal::before {
  background-image: url('/res/images/ui/nav/play.webp');
  --btn-icon-ratio: 700 / 800;
  filter: brightness(0) invert(1);
}

/**********************/
/** SELECT BUTTON **/
/**********************/
#selectButton.btnUniversal::after {
  content: "Select";
}

#selectButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

#selectButton.btnUniversal {
  background: var(--goldHighlight);
  /* background: linear-gradient(135deg, #B8860B, var(--goldHighlight), #B8860B); */
  color: black;
  border: 3px solid rgb(140, 120, 77);
}

#selectButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/starDark.webp');
  --btn-icon-ratio: 800 / 757;
  opacity: 46%;
}

/**********************/
/** PAY BUTTON (shoppingPov) — same gold + star as Select; label from JS **/
/**********************/
#payBtn.btnUniversal {
  background: var(--goldHighlight);
  color: black;
  border: 3px solid rgb(140, 120, 77);
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

#payBtn.btnUniversal::before {
  background-image: url('/res/images/universalBtn/starDark.webp');
  --btn-icon-ratio: 800 / 757;
  opacity: 46%;
}

/**********************/
/** CHECK BUTTON **/
/**********************/
#checkButton.btnUniversal::after {
  content: "Check";
}

#checkButton.btnUniversal {
  background-color: #7b4f2d; /* Chocolate brown */
  border-color: #4a2f1a; /* Darker chocolate */
}

#checkButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/check.webp');
  --btn-icon-ratio: 1;
  filter: brightness(0) invert(1);
}

/**********************/
/** START BUTTON (global + in-app e.g. #wordSetStartBtn) **/
/**********************/
#startButton.btnUniversal::after,
#wordSetStartBtn.btnUniversal::after {
  content: "Start";
}

#startButton.btnUniversal[data-label]::after,
#wordSetStartBtn.btnUniversal[data-label]::after {
  content: attr(data-label);
}

#startButton.btnUniversal,
#wordSetStartBtn.btnUniversal {
  background-color: #28568e; /* Same as typing app Letters/Words buttons */
}

#startButton.btnUniversal::before,
#wordSetStartBtn.btnUniversal::before {
  background-image: url('/res/images/universalBtn/star.webp');
  --btn-icon-ratio: 800 / 757;
}

/* hideAndSpeak filter popup "Start" label: text from JS only (en/hi); use .btnUniversal--textOnly in app HTML */

/**********************/
/** READ BUTTON **/
/**********************/
#readButton.btnUniversal::after {
  content: "Read";
}

#readButton.btnUniversal {
  background-color: #8b5fbf; /* Darker purple */
  border-color: #5a2066; /* Darker purple border */
}

#readButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/speaker.webp');
  --btn-icon-ratio: 800 / 592;
}

/**********************/
/** HINT BUTTON **/
/**********************/
#hintButton.btnUniversal::after {
  content: "Hint";
}

#hintButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

#hintBtn.btnUniversal::after {
  content: "Note";
}

#hintButton.btnUniversal,
#hintBtn.btnUniversal {
  background-color: #fffacd; /* Pale Yellow */
  color: #61541f;
  border: 3px solid #8b6914;
}

#hintButton.btnUniversal:hover,
#hintBtn.btnUniversal:hover {
  background-color: #fff8dc;
  border-color: var(--goldHighlight);
  box-shadow: 0 2px 8px rgba(255, 226, 9, 0.3);
}

#hintButton.btnUniversal::before,
#hintBtn.btnUniversal::before {
  background-image: url('/res/images/universalBtn/lightbulb.webp');
  --btn-icon-ratio: 522 / 800;
}

/**************************/
/** CHOOSE LESSON BUTTON **/
/**************************/
#chooseLessonButton.btnUniversal::after {
  content: "Lessons";
}

#chooseLessonButton.btnUniversal {
  background-color: #3a5d75; /* Slightly brighter blue-grey */
  border-color: #2c4a5e;
}

#chooseLessonButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/chooseLesson.webp');
  --btn-icon-ratio: 208 / 200;
}

/**********************/
/** SONGS BUTTON (e.g. piano app) **/
/**********************/
#songsButton.btnUniversal::after {
  content: "Songs";
}

#songsButton.btnUniversal {
  background-color: var(--brettsBlue);
  border-color: var(--brettsBlue);
}

#songsButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/music-note.webp');
  --btn-icon-ratio: 1;
  filter: brightness(0) invert(1);
}

/**********************/
/** BACK BUTTON (hindiKeyboard) **/
/**********************/
#backButton.btnUniversal::after {
  content: "Back";
}

#backButton.btnUniversal {
  background-color: #3878c0;
  border-color: #2d5d94;
}

#backButton.btnUniversal::before {
  background-image: url('/res/images/ui/nav/play.webp');
  --btn-icon-ratio: 700 / 800;
  filter: brightness(0) invert(1);
  transform: scaleX(-1);
}

/**********************/
/** STOP / PLAY-ALL STOP (soundboard) **/
/**********************/
#playAllStopButton.btnUniversal::after {
  content: "Stop";
}

#playAllStopButton.btnUniversal[data-lang="hi"]::after {
  content: "बंद";
}

#playAllStopButton.btnUniversal {
  background-color: #dc1a1a;
  border-color: #8b1010;
}

#playAllStopButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/white-x.webp');
  --btn-icon-ratio: 1;
}

/**********************/
/** NEW LIST BUTTON (letterTracing) **/
/**********************/
#newListButton.btnUniversal::after {
  content: "New List";
}

#newListButton.btnUniversal {
  background-color: var(--brettsBlue);
  border-color: var(--brettsBlue);
}

#newListButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/play-circle.webp');
  --btn-icon-ratio: 1;
  filter: brightness(0) invert(1);
}

/**********************/
/** AKSHAR SENTENCE PLAY (highlightReader) — same as Play **/
/**********************/
#aksharSentencePlayButton.btnUniversal::after {
  content: "Play";
}

#aksharSentencePlayButton.btnUniversal {
  background-color: var(--brettsBlue);
  border-color: var(--brettsBlue);
}

#aksharSentencePlayButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/play-circle.webp');
  --btn-icon-ratio: 1;
  filter: brightness(0) invert(1);
}

/**********************/
/** END-GAME LESSONS (same as Choose Lesson) **/
/**********************/
#universalEndGameLessonsBtn.btnUniversal::after {
  content: "Lessons";
}

#universalEndGameLessonsBtn.btnUniversal {
  background-color: #3a5d75;
  border-color: #2c4a5e;
}

#universalEndGameLessonsBtn.btnUniversal::before {
  background-image: url('/res/images/universalBtn/chooseLesson.webp');
  --btn-icon-ratio: 208 / 200;
}

/**********************/
/** STUDY → EXIT MODE (familyTree study toggle) **/
/**********************/
#studyButton.btnUniversal.btnUniversal--exit::after {
  content: "Close";
}

#studyButton.btnUniversal.btnUniversal--exit[data-lang="hi"]::after {
  content: "बंद";
}

#studyButton.btnUniversal.btnUniversal--exit {
  background-color: #dc1a1a;
  border-color: #8b1010;
}

#studyButton.btnUniversal.btnUniversal--exit::before {
  background-image: url('/res/images/universalBtn/white-x.webp');
  --btn-icon-ratio: 1;
  filter: none;
}

/**********************/
/** EASY BUTTON **/
/**********************/
#easyButton.btnUniversal::after {
  content: "Easy";
}

#easyButton.btnUniversal {
  background-color: var(--goldHighlight); /* Light yellow - mathDrills easy */
  color: #000;
  border-color: #e6d635;
}

#easyButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/easy.webp');
  --btn-icon-ratio: 1;
}

#easyButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

/**********************/
/** MEDIUM BUTTON **/
/**********************/
#mediumButton.btnUniversal::after {
  content: "Medium";
}

#mediumButton.btnUniversal {
  background-color: #81D4FA; /* Light blue - mathDrills medium */
  color: #000;
  border-color: #4fc3f7;
}

#mediumButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/medium.webp');
  --btn-icon-ratio: 1;
}

#mediumButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

/**********************/
/***** HARD BUTTON ****/
/**********************/
#hardButton.btnUniversal::after {
  content: "Hard";
}

#hardButton.btnUniversal {
  background-color: #ff9e9e; /* Light red - mathDrills hard */
  color: #000;
  border-color: #e57373;
}

#hardButton.btnUniversal::before {
  background-image: url('/res/images/universalBtn/hard.webp');
  --btn-icon-ratio: 1;
}

#hardButton.btnUniversal[data-label]::after {
  content: attr(data-label);
}

/**********************/
/** POPUP DIFFICULTY (same preset as Easy/Medium/Hard) **/
/**********************/
#popupDifficulty1.btnUniversal::after,
#popupDifficulty2.btnUniversal::after,
#popupDifficulty3.btnUniversal::after {
  content: attr(data-label);
}

#popupDifficulty1.btnUniversal {
  background-color: var(--goldHighlight);
  color: #000;
  border-color: #e6d635;
}

#popupDifficulty1.btnUniversal::before {
  background-image: url('/res/images/universalBtn/easy.webp');
  --btn-icon-ratio: 1;
}

#popupDifficulty2.btnUniversal {
  background-color: #81D4FA;
  color: #000;
  border-color: #4fc3f7;
}

#popupDifficulty2.btnUniversal::before {
  background-image: url('/res/images/universalBtn/medium.webp');
  --btn-icon-ratio: 1;
}

#popupDifficulty3.btnUniversal {
  background-color: #ff9e9e;
  color: #000;
  border-color: #e57373;
}

#popupDifficulty3.btnUniversal::before {
  background-image: url('/res/images/universalBtn/hard.webp');
  --btn-icon-ratio: 1;
}

/**********************/
/** FACTOR TEACHER TOGGLE (Pairs / List) **/
/** Label from JS (i18n); use .btnUniversal--textOnly in HTML **/
/**********************/
#displayToggle.btnUniversal,
#displayToggle2.btnUniversal {
  background-color: #3878c0;
  border-color: #2d5d94;
}

#displayToggle.btnUniversal.active,
#displayToggle2.btnUniversal.active {
  background-color: #28568e;
  border-color: #213c72;
}

#displayToggle.btnUniversal:not(.active),
#displayToggle2.btnUniversal:not(.active) {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  opacity: 0.8;
}

#displayToggle.btnUniversal:not(.active):hover,
#displayToggle2.btnUniversal:not(.active):hover {
  opacity: 1;
  background-color: #fff;
}

/**********************/
/** OLD UNIVERSAL BUTTON SYSTEM (COMMENTED OUT) **/
/*


.btnUniversal.star::after {
  background-image: url('/res/images/universalBtn/star.webp');
}

.btnUniversal.prev::after {
  background-image: url('/res/images/ui/nav/prev.webp');
  filter: brightness(0) invert(1);
}

.btnUniversal.check::after {
  background-image: url('/res/images/universalBtn/check.webp');
}

.btnUniversal.gold.check::after {
  filter: brightness(0);
}

.btnUniversal.audio::after {
  background-image: url('/res/images/universalBtn/speaker.webp');
  scale: 140%;
}

.btnUniversal.lightbulb::after {
  background-image: url('/res/images/universalBtn/lightbulb.webp');
  scale: 130%;
}

.btnUniversal.refresh::after {
  background-image: url('/res/images/universalBtn/refresh.webp');
  scale: 140%;
}

.btnUniversal.red {
  background-color: var(--scoreCounterRed);
}

.btnUniversal.green {
  background-color: var(--scoreCounterGreen);
}

.btnUniversal.gold {
  background: linear-gradient(135deg, #B8860B, var(--goldHighlight), #B8860B);
  color: black;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.btnUniversal.white {
  background-color: #fff;
  color: #222;
  border: 1px solid #ddd;
  font-weight: 500;
}

.btnUniversal.white:hover:not(:disabled) {
  background-color: #f5f5f5;
}

.btnUniversal.white:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #e0e0e0;
}

.btnUniversal.paleYellow {
  background-color: #fffacd;
  color: #61541f;
  border: 2px solid #8b6914;
  font-weight: bold;
}

.btnUniversal.paleYellow:hover {
  background-color: #fff8dc;
  border-color: var(--goldHighlight);
  box-shadow: 0 2px 8px rgba(255, 226, 9, 0.3);
}

.btnUniversal.gradientOne {
  padding: 15px 36px 15px 30px;
  font-size: 44px;
  font-weight: bold;
  background: linear-gradient(135deg, #7c94f0 0%, #764ba2 50%, #7c94f0 100%);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease-in-out infinite;
  transition: all 0.3s ease;
}

.btnUniversal.gradientOne:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.btnUniversal.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btnUniversal.shadow {
  filter: drop-shadow(2px 2px 0px #000000c4);
}

.btnUniversal.scalePointNine {
  transform: scale(0.9);
}
*/