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

.btnUniversal {
  width: fit-content;
  min-width: 160px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  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);
}

/* Base icon setup - shared by all buttons (icons 15% larger) */
.btnUniversal::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 15px;
  transform: scale(1.27);
}

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

.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::before {
  content: "Play";
}

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

#playButton.btnUniversal::after,
#playButtonDisabled.btnUniversal::after,
#playAllButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/play-circle.webp');
  filter: brightness(0) invert(1);
  width: 1.32em;
  height: 1.32em;
}

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

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

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

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

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

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

#quizButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/play-circle.webp');
  filter: brightness(0) invert(1);
  width: 1.32em;
  height: 1.32em;
}

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

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

#studyButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/study.webp');
  width: 1.705em;
  height: 1.705em;
  transform: scale(1.04); /* ~18% smaller than base 1.27 */
}

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

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

#closeButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/white-x.webp');
  width: 1em;
  height: 1em;
}

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

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

#clearButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/white-x.webp');
  width: 1em;
  height: 1em;
}

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

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

#nextButton.btnUniversal::after {
  background-image: url('/res/images/ui/nav/play.webp');
  filter: brightness(0) invert(1);
  width: 1em;
  height: 1em;
}

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

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

#selectButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/starDark.webp');
  opacity: 46%;
  width: 1.2em;
  height: 1.2em;
}

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

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

#checkButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/check.webp');
  filter: brightness(0) invert(1);
  width: 1em;
  height: 1em;
}

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

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

#startButton.btnUniversal::after,
#wordSetStartBtn.btnUniversal::after {
  background-image: url('/res/images/universalBtn/star.webp');
  width: 1.2em;
  height: 1.2em;
}

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

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

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

#readButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/speaker.webp');
  width: 1.4em;
  height: 1.4em;
}

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

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

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

#hintButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/lightbulb.webp');
  width: 1.3em;
  height: 1.3em;
}

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

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

#chooseLessonButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/chooseLesson.webp');
  width: 1.2em;
  height: 1.2em;
}

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

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

#songsButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/play-circle.webp');
  filter: brightness(0) invert(1);
  width: 1.32em;
  height: 1.32em;
}

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

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

#easyButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/easy.webp');
  width: 1.3em;
  height: 1.3em;
}

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

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

#mediumButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/medium.webp');
  width: 1.3em;
  height: 1.3em;
}

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

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

#hardButton.btnUniversal::after {
  background-image: url('/res/images/universalBtn/hard.webp');
  width: 1.3em;
  height: 1.3em;
}

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

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

#popupDifficulty1.btnUniversal::after {
  background-image: url('/res/images/universalBtn/easy.webp');
  width: 1.3em;
  height: 1.3em;
}

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

#popupDifficulty2.btnUniversal::after {
  background-image: url('/res/images/universalBtn/medium.webp');
  width: 1.3em;
  height: 1.3em;
}

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

#popupDifficulty3.btnUniversal::after {
  background-image: url('/res/images/universalBtn/hard.webp');
  width: 1.3em;
  height: 1.3em;
}

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

#displayToggle.btnUniversal::after,
#displayToggle2.btnUniversal::after {
  display: none;
}

#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);
}
*/