/* =========================================== */
/*           SLIDE-OUT MENU STYLES           */
/* =========================================== */
/* --- Keep ALL slide-out menu styles --- */
.slide-menu {
  position: fixed !important;
  top: 0 !important;
  right: -300px !important;
  width: 300px !important;
  height: 100% !important;
  background-color: white !important;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
  z-index: 2000 !important;
  transition: transform 0.3s ease !important;
  overflow-y: auto !important;
  display: flex;
  flex-direction: column;
}

/* Smart Hint Tooltip */
.smart-hint {
  position: fixed; /* Changed to fixed for viewport-relative positioning */
  background-color: #2c3e50;
  color: white;
  padding: 13px 20px; /* 30% increase */
  border-radius: 8px;
  font-size: 20.8px; /* 30% increase */
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
}

.smart-hint.visible {
  opacity: 1;
  visibility: visible;
}

.smart-hint-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tooltip Arrow */
.smart-hint::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: #2c3e50 transparent transparent transparent;
}

/* Tooltip Arrow pointing up (for when tooltip is below the card) */
.smart-hint.tip-up::after {
  top: auto;
  bottom: 100%; /* At the top of the tooltip */
  border-color: transparent transparent #2c3e50 transparent;
}

.slide-menu.active {
  transform: translateX(-300px) !important;
}

/* Add top margin to all form groups in slide-out settings, except the first */
.slide-menu .settings-content .form-group {
  margin-top: 20px; /* Adjust this value for desired spacing */
}

/* Remove top margin from the very first form group (Layout) */
.slide-menu .settings-content .form-group:first-child {
  margin-top: 0;
}

.menu-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 1500 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.menu-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.menu-header {
  background: linear-gradient(135deg, #3060e4 0%, #02c8c8 100%);
  color: white;
  padding: 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

.menu-header h2 {
  /* This was h3 in your JS, changed to h2 for consistency if you prefer */
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.close-menu {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  transition: background-color 0.2s ease;
}

.close-menu:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.tab-scroll-container {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background-color: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 4px;
  flex-shrink: 0;
}

.tab-scroll-container::-webkit-scrollbar {
  display: none;
}

.menu-tabs {
  display: flex;
  min-width: 100%;
  position: relative;
}

.slide-tab {
  padding: 16px 20px;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
  color: #64748b;
  transition: color 0.2s ease;
  position: relative;
  z-index: 1;
  font-size: 15px;
}

.slide-tab.active {
  color: var(--menu-blue);
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: var(--menu-blue);
  border-radius: 3px 3px 0 0;
  transition: left 0.3s ease, width 0.3s ease;
}

.slide-content {
  padding: 20px 16px;
  display: none;
  animation: fadeIn 0.3s ease;
  flex-grow: 1;
  overflow-y: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.slide-content.active {
  display: block;
}

.settings-toggle {
  margin-top: 15px;
  margin-bottom: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 15px;
}

.settings-toggle-btn {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-toggle-btn .toggle-icon {
  transition: transform 0.3s ease;
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.settings-toggle-btn.expanded .toggle-icon {
  transform: rotate(180deg);
}

.settings-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0;
}

.settings-content.expanded {
  max-height: 600px;
  padding-top: 10px;
}

.slide-menu .form-group {
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.slide-menu .form-label {
  display: block;
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 6px;
  font-weight: 500;
}

.slide-menu .form-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background-color: white;
  font-size: 14px;
  font-family: inherit; /* Safari fix: inherit sans-serif font */
  color: #1f2937;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.slide-menu .btn {
  width: 100%;
  padding: 12px 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: var(--button-blue);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.slide-menu .btn:hover {
  background-color: var(--button-blue-hover);
}

.slide-menu .icon-controls {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.slide-menu .icon-button {
  flex: 1;
  padding: 8px 12px;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #4b5563;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  min-height: 60px;
  justify-content: center;
}

.slide-menu .icon-button.active {
  background-color: var(--button-blue);
  color: white;
  border-color: var(--button-blue);
}

.slide-menu .icon-button .icon-label {
  font-size: 11px;
  line-height: 1.2;
}

.slide-menu .icon-button svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* --- End Slide-Out Menu Styles --- */

/* =========================================== */
/*              BASE & LAYOUT STYLES           */
/* =========================================== */
:root {
  --desktop-menu-bar-height: 65px;
  --mobile-menu-bar-height: 60px;
  --menu-blue: #607bf1;
  --panel-blue: #e7eeff;
  --button-blue: #568bff;
  --button-blue-hover: #5178d9;
  --button-green: #16a34a;
  --button-green-hover: #15803d;
  --score-yellow: #333;
  --score-bg: rgba(255, 255, 255, 0.8);

  /* ========================================= */
  /*          CENTRAL COLOR PALETTE           */
  /* ========================================= */
/* Base colors - change these to experiment with different color schemes */
--color-blue-dark: #1564dc;
--color-blue-light: #70a7ef;
--color-orange-dark: #FFCD82;
--color-orange-light: #FFF3D6;
--color-green-dark: #16a34a;
--color-green-light: #86efac;
--color-purple-dark: #7c3aed;
--color-purple-light: #c4b5fd;
--color-teal-dark: #bd354e;
--color-teal-light: #fc95b4;
--color-face-down-dark: #FFCD82;
--color-face-down-light: #FFF3D6;
--color-matched-bg: #69D06D;
--color-matched-text: #19712C;

  /* ========================================= */
  /*        SEMANTIC COLOR ASSIGNMENTS        */
  /* ========================================= */
  /* These control which colors are used where - experiment by swapping the values */
  
  /* Face-down cards (the ? cards) */
  --facedown-card-primary: var(--color-face-down-dark);
  --facedown-card-secondary: var(--color-face-down-light);
  
  /* Practice Mode: Equations and Results */
  --practice-equation-primary: var(--color-blue-dark);
  --practice-equation-secondary: var(--color-blue-light);
  --practice-result-primary: var(--color-green-dark);
  --practice-result-secondary: var(--color-green-light);
  
  /* Match Equations Mode: Questions (visible) and Answers (hidden initially) */
  --match-eq-visible-primary: var(--color-blue-dark);
  --match-eq-visible-secondary: var(--color-blue-light);
  --match-eq-hidden-primary: var(--color-orange-dark);
  --match-eq-hidden-secondary: var(--color-orange-light);
  
/* Match Results Mode: Answers (visible) and Questions (hidden initially) */
--match-res-visible-primary: var(--color-purple-dark);
--match-res-visible-secondary: var(--color-purple-light);
--match-res-hidden-primary: var(--color-orange-dark);
--match-res-hidden-secondary: var(--color-orange-light);
  
/* Find Factors Mode: Questions (visible) and Factors (hidden initially) */
--find-factors-visible-primary: var(--color-teal-dark);
--find-factors-visible-secondary: var(--color-teal-light);
--find-factors-hidden-primary: var(--color-orange-dark);
--find-factors-hidden-secondary: var(--color-orange-light);
  
  /* Matched cards (same for all modes) */
  --matched-card-bg: var(--color-matched-bg);
  --matched-card-text: var(--color-matched-text);
}

html {
  height: 100%;
  background: transparent;
  transition: background 0.3s ease;
  overflow: hidden; /* Prevent body scrollbars */
}

body {
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 20px; /* Remove top padding */
  background: transparent;
  position: relative;
  transition: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent body scrollbars */
}

/* Safari fix: form elements don't inherit font-family by default */
select, input, textarea, button {
  font-family: inherit;
}

.times-tables-app-container {
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Allow container to grow */
  padding-top: calc(var(--desktop-menu-bar-height) + 10px); /* Add padding here */
  min-height: 0; /* Flexbox fix for overflow */
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

/* =========================================== */
/*           MENU BAR & DESKTOP STYLES         */
/* =========================================== */
.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #3060e4 0%, #02c8c8 100%);
  z-index: 1500;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: white;
  transition: background 0.3s ease;
}

.menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: var(--desktop-menu-bar-height);
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.menu-bar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.menu-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-logo {
  height: 45px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center center;
  position: relative;
  z-index: 1;
}

.mobile-mode-label {
  display: none;
}

.app-logo.emoji-active {
  transform: scale(1.4) translateY(1px) translateX(7px);
  z-index: 10;
}

.tab-buttons button {
  background: none;
  border: none;
  color: white;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  opacity: 0.7;
}

.tab-buttons button.active-tab {
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.tab-buttons button:hover:not(.active-tab) {
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 0.9;
}

.icon-button {
  background: none;
  border: none;
  color: white;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  width: 40px;
  height: 40px;
}

.icon-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.icon-button i,
.icon-button svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

#mobileMenuToggle {
  display: none;
  z-index: 1505;
}

body.no-scroll {
  overflow: hidden;
}

.settings-container {
  position: relative;
}

#settingsDropdown {
  position: absolute;
  top: calc(var(--desktop-menu-bar-height) - 10px);
  right: 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  padding: 10px;
  padding-bottom: 15px;
  z-index: 1510;
  display: none;
  flex-direction: column;
  gap: 5px;
  min-width: 220px;
  max-width: 300px;
}

#settingsDropdown.expanded {
  display: flex;
}

/* Styles for original settings buttons (Layout, Sound) - keep if they are still buttons */
#settingsDropdown button {
  background: none;
  border: none;
  color: #333;
  padding: 10px 15px;
  font-size: 15px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#settingsDropdown button:hover {
  background-color: #f0f0f0;
}

#settingsDropdown button i,
#settingsDropdown button svg {
  width: 20px;
  height: 20px;
  color: #555;
  stroke: currentColor;
  flex-shrink: 0;
}

#settingsDropdown button .setting-text {
  flex-grow: 1;
}
/* End styles for original settings buttons */

/* NEW/MODIFIED: Styling for the subscription display link if needed */
.subscription-display-link {
  /* Applied to the <a> tag */
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px; /* Space between icon and text block */
  cursor: pointer;
  width: 100%;
  padding: 10px 0; /* Adjust as needed for desktop */
  color: #333; /* Base text color */
  font-size: 15px;
  border-radius: 6px; /* For hover effect consistency */
  transition: background-color 0.2s ease;
}
.subscription-display-link:hover {
  background-color: #f0f0f0; /* Consistent hover with other buttons */
}

.subscription-display-link img {
  /* For desktopSubscriptionIcon and mobileSubscriptionIcon */
  width: 20px;
  height: 20px;
  flex-shrink: 0; /* Prevent icon from shrinking */
  object-fit: contain; /* Ensure aspect ratio is maintained */
}

.subscription-display-link #desktopSubscriptionText,
.subscription-display-link #mobileSubscriptionText {
  flex-grow: 1; /* Allow main text to take available space */
}

.subscription-display-link #desktopSubscriptionActionText,
.subscription-display-link #mobileSubscriptionActionText {
  color: #3b82f6; /* Blue color for "Subscribe" / "Manage" */
  font-weight: 500;
  margin-left: auto; /* Push to the right */
  white-space: nowrap; /* Prevent wrapping */
}
/* END NEW/MODIFIED */

#settingsDropdown .settings-section {
  border-top: 1px solid #eaeaea;
  margin-top: 8px;
  padding-top: 8px;
  width: 100%;
}

#settingsDropdown .settings-heading {
  font-size: 14px;
  color: #666;
  margin: 5px 0 10px 0;
  font-weight: 600;
  padding: 0 15px;
}

#settingsDropdown .settings-select {
  width: calc(100% - 30px);
  margin: 5px 15px 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background-color: white;
  font-size: 14px;
  font-family: inherit; /* Safari fix: inherit sans-serif font */
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: #333;
}

#soundToggle #soundOnIcon,
#mobileSoundToggle #mobileSoundOnIcon {
  display: inline-block !important;
}
#soundToggle #soundOffIcon,
#mobileSoundToggle #mobileSoundOffIcon {
  display: none !important;
}
#soundToggle.sound-is-off #soundOnIcon,
#mobileSoundToggle.sound-is-off #mobileSoundOnIcon {
  display: none !important;
}
#soundToggle.sound-is-off #soundOffIcon,
#mobileSoundToggle.sound-is-off #mobileSoundOffIcon {
  display: inline-block !important;
}
#layoutToggle.layout-is-landscape #layoutIcon,
#mobileLayoutToggle.layout-is-landscape #mobileLayoutIcon {
  transform: rotate(90deg);
}
#layoutToggle #layoutIcon,
#mobileLayoutToggle #mobileLayoutIcon,
#layoutToggle.layout-is-landscape #layoutIcon,
#mobileLayoutToggle.layout-is-landscape #mobileLayoutIcon {
  transition: transform 0.3s ease;
}

.score {
  font-weight: 700;
  color: #333; /* Dark text for white score background */
  background-color: var(--score-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  padding: 5px 5px 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  min-width: 210px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.3s ease;
  transform: scale(1.2);
  transform-origin: center;
}

#scoreDisplay {
  margin-left: 5px;
  margin-right: 20px; /* Space between score element and settings icon */
}

#mobileScoreDisplay {
  margin-left: 0;
  margin-right: 5px;
}

.score.visible {
  display: flex !important; /* Ensure visibility override works */
}

.score-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.score-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* background-color has been removed to prevent fill effect */
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

/* Obsolete rules removed as SVG now handles its own styling */

.score-item-value {
  font-weight: 600;
  font-size: 15px;
}

.score-item-value.incorrect {
  color: #dc3545; /* Red for incorrect count on white background */
}

/* Score coin counter (replaces streak emoji) */
.score-coin-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-coin-icon {
  transition: transform 0.3s ease;
}

.score-coin-icon.streak-upgrade {
  animation: coinEarned 0.6s ease;
}

.score-coin-icon.streak-broken {
  animation: streakBroken 0.6s ease;
}

@keyframes coinEarned {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.8);
  }
  60% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes streakBroken {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.8) rotate(15deg);
    opacity: 0.5;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Score progress bar - dark bg matches overview pill style */
.score-progress-bar {
  position: relative;
  width: 70px;
  height: 28px;
  background-color: #06143B;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.score-progress-bar .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 14px;
  transition: width 0.3s ease;
}

.score-progress-bar .progress-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: normal;
  font-family: sans-serif;
  letter-spacing: 0.5px;
  color: white;
  z-index: 1;
}

.menu-panel-container {
  background-color: var(--panel-blue);
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out,
    border-top 0.4s ease-in-out;
  border-top-color: transparent;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
.menu-panel-container.visible {
  max-height: 650px;
  padding: 10px 20px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.menu-panel-container.visible.dropdown-open {
  overflow: visible;
}
.menu-panel {
  display: none;
  align-items: center;
  gap: 15px;
  min-height: 65px;
}
.menu-panel.visible {
  display: flex;
}

.table-selector {
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
  font-family: inherit; /* Safari fix: inherit sans-serif font */
  color: #333;
  font-weight: 500;
  background-color: white;
  min-width: 120px;
  flex-shrink: 1;
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  padding-right: 30px;
  line-height: normal;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
#practiceModeSelectUnique {
  min-width: 120px;
}
#gamesModeSelectUnique {
  min-width: 180px;
}

.play-button {
  padding: 8px 20px;
  color: white;
  background-color: var(--button-blue);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  min-width: 100px;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0 0;
  vertical-align: baseline;
}

.play-button:hover {
  background-color: var(--button-blue-hover);
}
#playAgainButtonUnique {
  background-color: var(--button-green);
}
#playAgainButtonUnique:hover {
  background-color: var(--button-green-hover);
}

/* =========================================== */
/*           COLOR SLIDER STYLES               */
/* =========================================== */
.color-slider-group {
  margin-top: 15px;
  padding: 0 15px;
  box-sizing: border-box;
}
.color-slider-label {
  display: block;
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 8px;
  font-weight: 500;
}
.color-slider-container {
  position: relative;
  margin-bottom: 10px;
  height: 30px;
}
.color-slider-track {
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(
    to right,
    hsl(0, 80%, 55%),
    hsl(30, 80%, 55%),
    hsl(60, 80%, 55%),
    hsl(90, 80%, 55%),
    hsl(120, 80%, 55%),
    hsl(150, 80%, 55%),
    hsl(180, 80%, 55%),
    hsl(210, 80%, 55%),
    hsl(240, 80%, 55%),
    hsl(270, 80%, 55%),
    hsl(300, 80%, 55%),
    hsl(330, 80%, 55%),
    hsl(360, 80%, 55%)
  );
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
              0 1px 2px rgba(0, 0, 0, 0.08);
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.color-slider-handle {
  position: absolute;
  width: 10px;
  height: 30px;
  border: 3px solid white;
  border-radius: 6px;
  background-color: #3498db;
  top: 50%;
  left: 66.67%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: grab;
  z-index: 10;
  transition: background-color 0.1s ease;
}
.color-slider-handle:active {
  cursor: grabbing;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* =========================================== */
/*           GRID & CARD STYLES                */
/* =========================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* Increased gap */
  position: relative;
  z-index: 50;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* NOTE: `contain: layout` was removed — it triggered a Safari paint bug
     on language-URL arrivals (/cn/, /jp/ etc.) where card background
     gradients (which use CSS custom properties via var()) rendered
     transparent until a resize or orientation toggle forced a repaint.
     The containment optimization isn't worth the broken initial paint. */
  flex-grow: 1; /* Allow grid to fill space */
  grid-auto-rows: minmax(0, 1fr); /* Make rows flexible */
  padding-bottom: 30px; /* Add padding to prevent cropping */
}

.grid.landscape {
  grid-template-columns: repeat(6, 1fr);
}

/* Chrome-specific grid fixes */
@supports (-webkit-appearance: none) {
  .grid {
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: 0 !important;
  }
}

/* Only apply grid display when Practice or Games tabs are active */
body:not([data-active-tab="progress"]) .grid {
  display: grid;
}

/* Force hide grid when Progress tab is active */
body[data-active-tab="progress"] .grid {
  display: none !important;
}

/* Ensure progress content shows when Progress tab is active */
body[data-active-tab="progress"] #progressTabContent {
  display: block !important;
}

.card {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  filter: grayscale(0%);
  transition: transform 0.4s ease-out;
  display: flex; /* Use flexbox for centering */
  flex-direction: column;
  justify-content: center;
  min-height: 0; /* Flexbox fix for overflow */
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 8px;
  display: flex; /* Ensure inner content can be centered */
  flex-direction: column;
  justify-content: center;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 3px solid white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.34);
  background-color: #fff;
  transition: opacity 0.3s ease;
  overflow: hidden;
  height: 100%; /* Ensure the front and back fill the card-inner */
}

.card-back {
  z-index: 1;
  opacity: 0;
}

/* NOTE: The actual .card-front background is defined later in this file
   (search: "Face-down cards"). A previous duplicate rule here used undefined
   CSS variables `--card-front-color-1/2`, which resolved to invalid-at-
   computed-value and caused Safari to paint cards transparent on language-
   URL arrivals (the later rule was ignored once Safari cached the invalid
   one on a composited layer). Removed — do not re-add. */

.card-front .card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(40px, 8vmin, 70px); /* Responsive width with min/max */
  height: clamp(40px, 8vmin, 70px); /* Responsive height with min/max */
  border-radius: 50%;
  color: #C43E00; /* colour of the ? character */
  font-size: clamp(24px, 5vmin, 40px); /* Responsive font size with min/max */
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin: 0;
  padding: 0;
  background: #ffffff;  /* colour of ? circle */
  background-size: 300% 100%;
  animation: animatedGradient 10s linear infinite;
  position: relative;
  z-index: 2; /* Sit above bubbles */
}

.card.flipped .card-front {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.card.flipped .card-back {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}


.card-back .card-content {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1; /* Tighter line height for wrapped text */
  text-align: center;
  font-size: clamp(20px, 6vw, 48px);
  font-weight: 700;
  padding: 5px; /* Slightly reduce padding to maximize space */
  box-sizing: border-box;
  overflow-wrap: break-word; /* Allow long words to break */
  word-break: break-word; /* For better browser compatibility */
}

.card-back .card-content span {
  display: block; /* Change to block to allow wrapping */
  width: 100%; /* Take full width of the content area */
  transition: transform 0.3s ease, color 0.3s ease;
  transform: scale(1);
  color: inherit;
  white-space: normal; /* Ensure text wraps */
}


.card-back .card-content span.js-pulse-active {
  display: inline-block !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease !important;
  transform-origin: center center !important;
  transform: scale(1.7) !important;
}

.card-back.card-question .card-content span.js-pulse-active {
  color: white !important;
  text-shadow: none;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease !important;
}

.card-back.card-answer .card-content span.js-pulse-active {
  color: white !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease !important;
}

@keyframes animatedGradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

/* =========================================== */
/*           RISING BUBBLES EFFECT             */
/* =========================================== */

/* Bubbles hidden by default — shown when body.bubbles-enabled */
/* Uses .card-bubble / .cb* to avoid collision with aquarium .bubble class */
.card-bubble {
  display: none;
}

body.bubbles-enabled .card:not(.flipped):not(.matched) .card-bubble {
  display: block;
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(255,255,255,0.3));
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 3px rgba(255,255,255,0.4);
  z-index: 1;
  animation-name: bubbleRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Individual bubble sizes, positions, speeds, and offsets */
body.bubbles-enabled .cb1 { width: 10px; height: 10px; left: 15%; animation-duration: 5.5s; animation-delay: 0s; }
body.bubbles-enabled .cb2 { width: 6px;  height: 6px;  left: 40%; animation-duration: 7s;   animation-delay: -1.5s; }
body.bubbles-enabled .cb3 { width: 14px; height: 14px; left: 70%; animation-duration: 6s;   animation-delay: -3s; }
body.bubbles-enabled .cb4 { width: 8px;  height: 8px;  left: 55%; animation-duration: 8s;   animation-delay: -0.8s; }
body.bubbles-enabled .cb5 { width: 5px;  height: 5px;  left: 25%; animation-duration: 6.5s; animation-delay: -4s; }
body.bubbles-enabled .cb6 { width: 11px; height: 11px; left: 82%; animation-duration: 7.5s; animation-delay: -2.2s; }
body.bubbles-enabled .cb7 { width: 7px;  height: 7px;  left: 8%;  animation-duration: 5s;   animation-delay: -5s; }
body.bubbles-enabled .cb8 { width: 4px;  height: 4px;  left: 48%; animation-duration: 9s;   animation-delay: -6s; }

/* Rising animation — uses percentage-based `top` for vertical movement so
   bubbles scale to any card height. transform handles wobble/scale only. */
@keyframes bubbleRise {
  0%   { top: 105%; transform: translateX(0px) scale(0.6); opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { top: 40%;  transform: translateX(6px) scale(0.9); opacity: 0.95; }
  90%  { opacity: 0.7; }
  100% { top: -10%; transform: translateX(-4px) scale(1); opacity: 0; }
}

/* Hide bubbles on flipped and matched cards */
.card.flipped .card-bubble,
.card.matched .card-bubble {
  display: none !important;
}

.grid.preview-playing .card:not(.highlight-pair) {
  opacity: 0.4 !important;
  filter: grayscale(80%);
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}
.grid.preview-playing .card.highlight-pair {
  z-index: 10;
  opacity: 1 !important;
  filter: none !important;
  transition: all 0.3s ease;
  pointer-events: auto !important;
}
.grid.preview-playing .card.highlight-pair.dim-card {
  opacity: 1 !important;
  filter: none !important;
}
.card.fade-question {
  opacity: 0.3 !important;
  filter: grayscale(90%) !important;
  pointer-events: none !important;
  animation: fadeToGrey 0.4s forwards;
}
@keyframes fadeToGrey {
  0% {
    opacity: 1;
    filter: grayscale(0%);
  }
  to {
    opacity: 0.3;
    filter: grayscale(90%);
  }
}
.card.fade-question:hover {
  transform: none !important;
}
.card.fade-question:hover .card-front {
  background-color: #ededed !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
.card.matched {
  opacity: 1 !important;
  cursor: default;
}

.card.matched:hover .card-back {
  transform: none !important;
}
.card.matched:hover .card-content {
  transform: none !important;
  color: var(--matched-text) !important;
}
.card.matched:hover .card-content span {
  color: var(--matched-text) !important;
  transform: none !important;
}

.card.waiting-for-match .card-inner {
  animation: subtlePulse 0.5s infinite ease-in-out;
  box-shadow: 0 0 10px 4px rgba(255, 136, 0, 0.8);
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}
.card.waiting-for-match {
  z-index: 5;
}
@keyframes subtlePulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.card.initial-hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}
@keyframes cardFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.card.fade-in {
  animation: cardFadeIn 0.4s ease forwards;
  pointer-events: auto;
}
.card.card-mismatch-flash .card-inner .card-back,
.card.card-mismatch-flash .card-inner .card-front {
  animation: backgroundFlash 0.6s ease;
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}
.card.wobble {
  animation: shake 0.5s ease;
}
@keyframes backgroundFlash {
  0%,
  to {
    background-color: inherit;
  }
  50% {
    background-color: rgba(255, 200, 200, 0.8);
  }
}
.card:not(.flipped):not(.matched):not(.fade-question):hover .card-front {
  background-color: #f2d6b2;
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.15);
  transform: translateY(-3px);
  transition: all 0.2s ease;
}
.grid[data-mode="table"]:not(.preview-playing) .card.highlight-pair {
  opacity: 1 !important;
  filter: none;
  transform: scale(1.03);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
  z-index: 10;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease,
    filter 0.2s ease;
}

.card-content span:not(:hover) {
  transform: scale(1);
  color: inherit;
  transition: transform 0.3s ease, color 0.3s ease;
}
.grid.idle-highlight-active .card:not(.highlight-pair) {
  opacity: 0.4;
  filter: grayscale(80%);
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none;
}

/* =========================================== */
/*           OTHER UI ELEMENTS                 */
/* =========================================== */
.message {
  position: absolute;
  top: calc(var(--desktop-menu-bar-height) + 100px);
  left: 50%;
  transform: translateX(-50%);
  background: #fef3c7; /* Pastel amber */
  color: #1a1a1a; /* Black text */
  padding: 15px 25px;
  padding-right: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 1600;
  font-size: 18px;
  text-align: center;
  display: none;
  line-height: 1.5;
  max-width: 90%;
  border: 1px solid #fcd34d;
}

/* All message types use the same pastel amber style */
.message.message-success,
.message.message-info,
.message.message-warning {
  background: #fef3c7;
  border-color: #fcd34d;
}
.message-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  color: #e53e3e;
  font-size: 14px;
  transition: transform 0.2s, color 0.2s;
}
.message-close:hover {
  color: #c53030;
  animation: xPulse 0.8s infinite;
}
@keyframes xPulse {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}
.score-thumbs-up {
  opacity: 1;
  transition: opacity 0.3s ease;
  margin-right: 5px;
}
.score-thumbs-up.fade-out {
  opacity: 0;
}
@keyframes scorePulseSimple {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.score-pulse {
  animation: scorePulseSimple 0.7s ease;
}
@keyframes scoreRedFlash {
  0%,
  to {
    background-color: var(--score-bg);
  }
  50% {
    background-color: rgba(255, 100, 100, 0.9);
  }
}
@keyframes scoreTextRedFlash {
  0%,
  to {
    color: var(--score-yellow);
  }
  50% {
    color: #dc3545 !important;
  }
}
#scoreDisplay.score-red-flash,
#mobileScoreDisplay.score-red-flash {
  animation: scoreRedFlash 0.8s ease;
}
#scoreDisplay.score-text-red-flash,
#mobileScoreDisplay.score-text-red-flash {
  animation: scoreTextRedFlash 0.8s ease;
}
@keyframes highlight {
  0%,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.highlight-match {
  animation: highlight 1s ease;
}
@keyframes jiggleButton {
  0%,
  to {
    transform: rotate(0deg) scale(1);
  }
  10% {
    transform: rotate(-3deg) scale(1.05);
  }
  20% {
    transform: rotate(3deg) scale(1.1);
  }
  30% {
    transform: rotate(-2deg) scale(1.05);
  }
  40% {
    transform: rotate(2deg) scale(1);
  }
  50% {
    transform: rotate(0deg) scale(1.05);
  }
  60% {
    transform: rotate(-1deg) scale(1);
  }
  70% {
    transform: rotate(1deg) scale(1.02);
  }
  80% {
    transform: rotate(0deg) scale(1);
  }
}
.jiggle-button {
  animation: jiggleButton 1.5s ease;
}
.loading-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 15px 25px;
  border-radius: 8px;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-size: 16px;
}
.loading-indicator.visible {
  opacity: 1;
  visibility: visible;
}
.loading-dots::after {
  content: " .";
  animation: loadingDots 1s steps(5, end) infinite;
}
@keyframes loadingDots {
  0%,
  20% {
    color: transparent;
    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
  }
  40% {
    color: #fff;
    text-shadow: 0.25em 0 0 transparent, 0.5em 0 0 transparent;
  }
  60% {
    text-shadow: 0.25em 0 0 #fff, 0.5em 0 0 transparent;
  }
  80%,
  to {
    text-shadow: 0.25em 0 0 #fff, 0.5em 0 0 #fff;
  }
}

/* =========================================== */
/*           SLIDESHOW & MODALS                */
/* =========================================== */
.grid.hidden-for-slideshow {
  visibility: hidden;
  pointer-events: none;
}

#slideshowContainer {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #35419bb4;
  z-index: 1000;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
  margin-top: 0;
}
.slideshow-inner-container {
  width: 100%;
  height: 100%;
  max-width: 1000px;
  background-color: transparent;
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}
#slideshowQuestionCard .card-content span,
#slideshowAnswerCard .card-content span {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  transform: scale(1);
  color: inherit;
}
#slideshowQuestionCard .card-content span.js-pulse-active,
#slideshowAnswerCard .card-content span.js-pulse-active {
  display: inline-block !important;
  transition: transform 0.3s ease, color 0.3s ease;
  transform-origin: center center;
  transform: scale(1.8) !important;
}
#slideshowQuestionCard .card-content span.js-pulse-active {
  color: #3b82f6 !important;
}
#slideshowAnswerCard .card-content span.js-pulse-active {
  color: #22c55e !important;
}
.slideshow-content {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 30px;
  width: 100%;
  max-width: 800px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}
.slideshow-card {
  flex: 1;
  min-width: 250px;
  max-width: 380px;
  height: auto;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  padding: 40px 25px;
  box-sizing: border-box;
  text-align: center;
}
#slideshowQuestionCard {
  border-top: 6px solid #3b82f6;
}
#slideshowAnswerCard {
  border-top: 6px solid #22c55e;
}
.slideshow-card .card-type {
  font-size: 16px;
  color: #fff;
  padding: 6px 12px;
  border-radius: 14px;
  margin-bottom: 15px;
  display: inline-block;
}
#slideshowQuestionCard .card-type {
  background-color: #3b82f6;
}
#slideshowAnswerCard .card-type {
  background-color: #22c55e;
}

/* Enhanced slideshow card content - IMPROVED VERSION */
.slideshow-card .card-content {
  font-weight: 700;
  margin-bottom: 0;
  color: #333;
  width: 100%;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.slideshow-card .card-content span {
  text-align: center !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
  max-width: 100% !important;
  line-height: 1.2 !important;
}

/* Dynamic font sizing - no fixed sizes */
#slideshowQuestionCard .card-content {
  font-size: 48px; /* Base size, will be adjusted by JavaScript */
}
#slideshowAnswerCard .card-content {
  font-size: 120px; /* Base size, will be adjusted by JavaScript */
}

/* Language-specific slideshow adjustments */
html[lang="th"] .slideshow-card .card-content span,
html[lang="en"] .slideshow-card .card-content span,
html[lang="es"] .slideshow-card .card-content span,
html[lang="hi"] .slideshow-card .card-content span {
  font-weight: 300 !important;
  letter-spacing: 0.5px !important;
}

html[lang="zh"] .slideshow-card .card-content span,
html[lang="ja"] .slideshow-card .card-content span,
html[lang="ko"] .slideshow-card .card-content span {
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

/* Better responsive behavior for slideshow cards */
@media (max-width: 480px) {
  .slideshow-card .card-content {
    padding: 10px !important;
  }
  .slideshow-card {
    padding: 30px 15px;
    min-height: 250px;
  }
}

@media (max-width: 768px) {
  .slideshow-content {
    flex-direction: column;
    gap: 20px;
  }
  .slideshow-card {
    max-width: 100%;
  }
}

.slideshow-card .visual {
  font-size: 60px;
  font-weight: 500;
  margin-top: auto;
  padding-top: 15px;
  width: 100%;
  line-height: 1.4;
}
.slideshow-card .visual div {
  white-space: normal !important;
  word-wrap: break-word;
}
.slideshow-nav-btn {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 1010;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.slideshow-nav-btn:hover,
#slideshowClose:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Fix for dimming matched cards */
.card.matched.fade-question {
  opacity: 0.3 !important;
  filter: grayscale(90%) !important;
}
#slideshowPrev {
  top: 50%;
  transform: translateY(-50%);
  left: -25px;
}
#slideshowNext {
  top: 50%;
  transform: translateY(-50%);
  right: -25px;
}
#slideshowClose {
  top: 15px;
  right: 15px;
  transform: none;
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 1010;
}
.slideshow-nav-btn i,
.slideshow-nav-btn svg,
#slideshowClose i,
#slideshowClose svg {
  width: 42px;
  height: 42px;
  stroke: currentColor;
}

/* =========================================== */
/*           MODAL REFACTORING                 */
/* =========================================== */
/* Generic container for all modal overlays */
.modal-overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Generic content box for all modals */
.modal-content-box {
  background-color: #fff;
  max-width: 300px;
  width: calc(100% - 40px);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  text-align: center;
  padding-bottom: 15px;
  margin: 0 20px;
  z-index: 2001;
}

/* Specific overrides can still exist if needed */
#logoutConfirmationModal .modal-content-box,
#launchAnnouncementModal .modal-content-box,
#unlockPremiumModal .modal-content-box,
#shareCodeModal .modal-content-box,
#licenseManagementModal .modal-content-box {
  /* This selector is just an example if overrides were needed */
  /* In this case, they share the same properties as the base class */
}

.modal-image {
  width: 85%;
  height: auto;
  margin: 12px auto;
  margin-top: 50px;
  display: block;
}
.modal-text {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  padding: 0;
  margin-left: 30px;
  margin-right: 30px;
  margin-top: -5px;
  margin-bottom: 30px;
  line-height: 1.7;
}
.modal-button {
  background-color: var(--menu-blue);
  color: #fff;
  border: none;
  padding: 8px 25px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-bottom: 25px;
}
.modal-button:hover {
  background-color: #3045a3;
}
.welcome-text-container {
  margin-bottom: 30px;
  line-height: 1.5;
}
.welcome-title {
  font-size: 25px;
  font-weight: 700;
  color: #496edb;
  margin-bottom: 5px;
}
.welcome-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: #333;
  margin-bottom: 2px;
}
.welcome-copyright {
  font-size: 12px;
  font-weight: 400;
  color: #333;
}
#welcomeModal {
  cursor: pointer;
}
#startButton {
  background-image: linear-gradient(
    120deg,
    #4054b2,
    #6a80e0,
    #c040a0,
    #6a80e0,
    #4054b2
  );
  background-size: 300% 100%;
  color: #fff !important;
  transition: none;
}
#startButton:hover {
  background-image: linear-gradient(
    120deg,
    #4054b2,
    #6a80e0,
    #c040a0,
    #6a80e0,
    #4054b2
  );
  background-size: 300% 100%;
  filter: brightness(115%);
  transition: filter 0.3s ease;
}



/* =========================================== */
/*           LOGOUT MODAL STYLES               */
/* =========================================== */
@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.05); 
  }
}

.logout-modal-pulse {
  animation: pulse 2s infinite;
}

/* Logout modal specific hover effects */
#logoutConfirmationModal button:hover {
  transform: translateY(-1px);
}

#logoutConfirmationModal .modal-content button[onclick="confirmLogout()"]:hover {
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
  transform: translateY(-2px);
}

/* Custom Game Mode Dropdown Styles */
.custom-game-mode-dropdown {
    position: relative;
    min-width: 180px;
}

.custom-game-mode-dropdown .dropdown-selected {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 15px;
    background-color: white;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    height: 40px;
}

.custom-game-mode-dropdown .selected-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
}

.custom-game-mode-dropdown .dropdown-arrow {
    transition: transform 0.2s;
}

.custom-game-mode-dropdown .dropdown-options {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-top: 0px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1050;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
}

.custom-game-mode-dropdown .dropdown-option {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 15px;
    color: #333;
}

.custom-game-mode-dropdown .dropdown-selected:hover {
    border-color: #a5b4fc;
}

.custom-game-mode-dropdown .dropdown-option:hover {
    background-color: #f9fafb;
}

.game-mode-bullet {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Game mode progress bar - dark bg matches overview pill style */
.game-mode-progress-bar {
    position: relative;
    width: 60px;
    height: 28px;
    background-color: #06143B;
    border-radius: 14px;
    margin-left: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.game-mode-progress-bar .progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 14px;
    transition: width 0.3s ease;
}

.game-mode-progress-bar .progress-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: normal;
    font-family: sans-serif;
    letter-spacing: 0.5px;
    color: white;
    z-index: 1;
}

/* When progress is high (>50%), text should be white for contrast */
.game-mode-progress-bar.high-progress .progress-text {
    color: white;
}

#custom-games-mode-dropdown-mobile .dropdown-selected {
    padding: 0 12px;
    font-size: 14px;
    height: 40px;
    border: 1px solid #d1d5db;
    background-color: white;
}

#custom-games-mode-dropdown-mobile .dropdown-options {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 2100; /* Higher z-index for mobile */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
}

#custom-games-mode-dropdown-mobile .dropdown-option {
    padding: 10px 12px;
    font-size: 14px;
}

/* Wider form elements in mobile games/play slide-out panel to accommodate progress bars */
#games-content .form-group {
    padding-left: 10px;
    padding-right: 10px;
}

#games-content .form-select,
#games-content .btn,
#games-content .custom-game-mode-dropdown {
    width: 100%;
    box-sizing: border-box;
}

/* =========================================== */
/*           RESPONSIVE STYLES START           */
/* =========================================== */
@media (max-width: 768px) {
  body {
    /* This padding is now handled by the .times-tables-app-container */
  }
  .card-front .card-content {
    /* Using vmin units now, so this is no longer needed */
  }

  .card {
    /* The fixed height is now removed, the grid controls the height */
  }

  .menu-bar {
    height: var(--mobile-menu-bar-height);
    padding: 0 10px;
  }
  .menu-bar .app-logo {
    height: 35px;
  }
  .app-logo.emoji-active {
    transform: scale(1.5) translateY(1px) translateX(7px);
    z-index: 10;
  }
  .menu-bar .tab-buttons.desktop-tabs {
    display: none;
  }
  .menu-bar #scoreDisplay {
    display: none;
  }
  .menu-bar #settingsToggleBtn {
    display: none;
  }
  .mobile-mode-label {
    display: inline-block;
    margin-left: -6px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    opacity: 0.9;
  }
  #settingsDropdown {
    display: none !important;
  }
  .menu-bar #mobileMenuToggle {
    display: flex;
  }
  .menu-panel-container {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    margin: 0 !important;
    display: none !important;
  }
  .menu-panel {
    display: none !important;
  }
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid.landscape {
    grid-template-columns: repeat(4, 1fr);
  }
  .message {
    top: calc(var(--mobile-menu-bar-height) + 80px);
  }
  #slideshowContainer {
    margin-top: var(--mobile-menu-bar-height);
  }
  .slideshow-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px;
    max-width: 95%;
    width: 100%;
  }
  .slideshow-inner-container {
    justify-content: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .slideshow-card {
    min-width: 90%;
    max-width: 450px;
    min-height: 240px;
  }
  #slideshowQuestionCard .card-content {
    font-size: 30px;
  }
  #slideshowAnswerCard .card-content {
    font-size: 110px;
  }
  .slideshow-card .visual {
    font-size: 20px;
  }
  .slideshow-nav-btn {
    width: 50px;
    height: 50px;
  }
  .slideshow-nav-btn i,
  .slideshow-nav-btn svg {
    width: 36px;
    height: 36px;
  }
  #slideshowPrev {
    left: 5px;
    right: auto;
  }
  #slideshowNext {
    right: 5px;
    left: auto;
  }
  #slideshowClose {
    top: 10px;
    right: 10px;
  }
  .game-instruction-modal {
    align-items: center;
  }
  .modal-content {
    width: 85%;
    max-width: 450px;
    margin-top: 0;
  }
  .modal-text {
    font-size: 16px;
  }
  .modal-button {
    padding: 8px 20px;
    font-size: 14px;
  }
  /* Mobile speed slider styles removed */
  .color-slider-track {
    height: 26px;
    border-radius: 13px;
  }
  .color-slider-handle {
    height: 34px;
    width: 12px;
    border-width: 3px;
    border-radius: 7px;
  }

  /* Ensure mobile subscription link inside form-group styling is consistent */
  #mobileSubscriptionLink {
    background-color: #f9fafb !important; /* Match previous button background */
    border: 1px solid #d1d5db !important; /* Match previous button border */
    border-radius: 6px !important; /* Match previous button radius */
    padding: 10px 12px !important; /* Match previous button padding */
    /* Other styles like gap, align-items are already inline */
  }
  #mobileSubscriptionLink:hover {
    background-color: #f3f4f6 !important; /* Lighter hover like other buttons */
  }
}
@media (max-width: 480px) {
  body {
    /* This padding is now handled by the .times-tables-app-container */
  }
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid.landscape {
    grid-template-columns: repeat(4, 1fr);
  }
  .menu-bar {
    padding: 0 8px;
  }
  #slideshowAnswerCard .card-content {
    font-size: 90px;
  }
  .modal-content {
    width: 70%;
  }
  .modal-text {
    font-size: 14px;
    margin-left: 15px;
    margin-right: 15px;
  }
  .modal-image {
    width: 75%;
    margin-top: 40px;
  }
  .modal-button {
    padding: 7px 18px;
    font-size: 13px;
  }
  .message {
    font-size: 15px;
    padding: 10px 15px;
    padding-right: 35px;
  }
  .message-close {
    width: 14px;
    height: 14px;
    font-size: 12px;
  }
  .menu-panel-container {
    max-height: 0 !important;
    display: none !important;
  }
  .menu-panel {
    display: none !important;
  }
}

/* === New Mobile Slide Menu Setting Button Styles === */
/* These are for the Layout and Sound buttons in the slide-out menu */
.slide-menu .slide-menu-setting-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background-color: #f9fafb;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.slide-menu .slide-menu-setting-btn:hover {
  background-color: #f3f4f6;
}
.slide-menu .slide-menu-setting-btn i {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
}
.slide-menu
  .slide-menu-setting-btn.layout-is-landscape
  #slide-practice-layout-icon,
.slide-menu
  .slide-menu-setting-btn.layout-is-landscape
  #slide-games-layout-icon {
  transform: rotate(90deg);
}
.slide-menu #slide-practice-layout-icon,
.slide-menu #slide-games-layout-icon {
  transition: transform 0.3s ease;
}
.slide-menu #slide-practice-sound-off-icon,
.slide-menu #slide-games-sound-off-icon {
  display: none !important;
}
.slide-menu #slide-practice-sound-on-icon,
.slide-menu #slide-games-sound-on-icon {
  display: inline-block !important;
}
.slide-menu .slide-menu-setting-btn.sound-is-off #slide-practice-sound-on-icon,
.slide-menu .slide-menu-setting-btn.sound-is-off #slide-games-sound-on-icon {
  display: none !important;
}
.slide-menu .slide-menu-setting-btn.sound-is-off #slide-practice-sound-off-icon,
.slide-menu .slide-menu-setting-btn.sound-is-off #slide-games-sound-off-icon {
  display: inline-block !important;
}
/* === End New Styles === */


/* Custom Voice Dropdown Styles */
.voice-flag-icon {
  width: 18px;
  height: auto;
  margin-right: 8px;
  vertical-align: -2px; /* Slightly adjust alignment for SVGs */
  border-radius: 2px;
}

.custom-voice-dropdown .dropdown-selected:hover {
  border-color: #a5b4fc; /* Light blue border on hover */
}
.custom-voice-dropdown .dropdown-option:last-child {
  border-bottom: none;
}

/* --- Grid Tab Layout Styles --- */
.tab-grid-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

/* 5-tab layout: 3 tabs on top, 2 on bottom */
.tab-grid-container.tab-grid-5 {
  grid-template-columns: repeat(3, 1fr);
}

.tab-grid-container.tab-grid-5 .tab-grid-button:nth-child(5),
.tab-grid-container.tab-grid-5 .tab-grid-button:nth-child(6) {
  /* Last row buttons span more space for visual balance */
}

/* Make 4th button (Rewards) span center position */
.tab-grid-container.tab-grid-5 .tab-grid-button:nth-child(5) {
  grid-column: 1 / 2;
}

.tab-grid-container.tab-grid-5 .tab-grid-button:nth-child(6) {
  grid-column: 3 / 4;
}

.tab-grid-button {
  position: relative;
  z-index: 10;
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
  background: none;
  border: none;
  outline: none;
  color: #64748b;
  font-size: 14px;
}

.tab-grid-button i,
.tab-grid-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.tab-grid-button span {
  font-size: 12px;
}

.tab-grid-button.active {
  color: #3b82f6;
  font-weight: 500;
}

.tab-grid-indicator {
  position: absolute;
  background-color: #d6e7fd;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

/* Diagonal stripe animation for game wins */
.win-shine-effect {
  position: relative;
  overflow: hidden;
}

.win-shine-effect::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.9) 48%,
    rgba(255, 255, 255, 0.9) 52%,
    transparent 60%
  );
  transform: translateY(-100%);
  animation: diagonal-stripe 1.5s ease-in-out;
  z-index: 1000;
  pointer-events: none;
}

@keyframes diagonal-stripe {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Global modal spacing for all screen sizes */
@media (max-width: 768px) {
  .modal-content {
    width: calc(100% - 60px);
    margin: 0 30px;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: calc(100% - 80px);
    margin: 0 40px;
  }
}

/* Ensure no scaling happens */
.card-content span {
  transform: scale(1) !important;
  transition: color 0.2s ease;
}

/* Color for × symbol in equations - more specific */
.card-question .card-content span .times-symbol {
  color: rgb(255, 255, 255) !important;
  font-weight: 200 !important;
  font-size: 0.7em !important;
  display: inline !important;
  margin: 0 -0.3em !important;
  padding: 0 !important;
}

/* Color for = symbol in equations - same as × symbol */
.card-question .card-content span .equals-symbol {
  color: rgb(255, 255, 255) !important;
  font-weight: 200 !important;
  font-size: 0.7em !important;
  display: inline !important;
  margin: 0 -0.3em !important;
  padding: 0 !important;
}

/* Make times symbol grey on matched cards */
.card.matched .card-content span .times-symbol {
  color: var(--matched-text) !important;
}

/* Make equals symbol grey on matched cards */
.card.matched .card-content span .equals-symbol {
  color: var(--matched-text) !important;
}

/* Matched cards get the same shadow as other cards */
.card.matched .card-front,
.card.matched .card-back {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.34) !important;
}


/* =========================================== */
/*              ORGANIZED CARD COLORS          */
/* =========================================== */
/* Safari paint bug workaround: card gradients use inline hex colors
   instead of var(--...) because Safari fails to repaint chained CSS
   custom properties in linear-gradient() after a fixed-position overlay
   (the language launch modal) is inserted/removed during card setup.
   Reproduced on /cn/, /jp/ etc. where cards rendered transparent until
   a window resize or orientation toggle forced a layout recalc.
   If you need to change the palette, update both here and the :root
   semantic vars at the top of this file. */

/* Face-down cards (the "?" cards) — facedown-card (orange) */
.card-front {
  border: 3px solid white;
  background: linear-gradient(135deg, #FFCD82 0%, #FFF3D6 100%);
}

/* ========================================= */
/*           PRACTICE MODE COLORS            */
/* ========================================= */
/* Equation cards in Practice mode — practice-equation (blue) */
body[data-active-tab="practice"] .card.flipped .card-back.card-question {
  background: linear-gradient(135deg, #1564dc 0%, #70a7ef 100%) !important;
  color: white !important;
}

/* Result cards in Practice mode — practice-result (green) */
body[data-active-tab="practice"] .card.flipped .card-back.card-answer {
  background: linear-gradient(135deg, #16a34a 0%, #86efac 100%) !important;
  color: white !important;
}

/* ========================================= */
/*          MATCH EQUATIONS MODE COLORS     */
/* ========================================= */
/* Question cards (visible) in Match Equations mode — match-eq-visible (blue) */
body[data-mode="findResults"] .card.flipped .card-back.card-question {
  background: linear-gradient(135deg, #1564dc 0%, #70a7ef 100%) !important;
  color: white !important;
}

/* Answer cards (hidden initially) in Match Equations mode — match-eq-hidden (orange) */
body[data-mode="findResults"] .card.flipped .card-back.card-answer {
  background: linear-gradient(135deg, #FFCD82 0%, #FFF3D6 100%) !important;
  color: #1e1b19 !important;
}

/* ========================================= */
/*          MATCH RESULTS MODE COLORS       */
/* ========================================= */
/* Answer cards (visible) in Match Results mode — match-res-visible (purple) */
body[data-mode="findEquations"] .card.flipped .card-back.card-answer {
  background: linear-gradient(135deg, #7c3aed 0%, #c4b5fd 100%) !important;
  color: white !important;
}

/* Question cards (hidden initially) in Match Results mode — match-res-hidden (orange) */
body[data-mode="findEquations"] .card.flipped .card-back.card-question {
  background: linear-gradient(135deg, #FFCD82 0%, #FFF3D6 100%) !important;
  color: #1e1b19 !important;
}

/* ========================================= */
/*          FIND FACTORS MODE COLORS        */
/* ========================================= */
/* Question cards (visible) in Find Factors mode — find-factors-visible (teal/pink) */
body[data-mode="findFactors"] .card.flipped .card-back.card-question {
  background: linear-gradient(135deg, #bd354e 0%, #fc95b4 100%) !important;
  color: white !important;
}

/* Factor cards (hidden initially) in Find Factors mode — find-factors-hidden (orange) */
body[data-mode="findFactors"] .card.flipped .card-back.card-answer {
  background: linear-gradient(135deg, #FFCD82 0%, #FFF3D6 100%) !important;
  color: #1e1b19 !important;
}

/* ========================================= */
/*       WAITING-FOR-MATCH CARD COLORS      */
/* ========================================= */
/* Pulsing card colors when waiting for match in game modes */
body[data-mode="findResults"] .card.waiting-for-match.flipped .card-back.card-answer,
body[data-mode="findEquations"] .card.waiting-for-match.flipped .card-back.card-question,
body[data-mode="findFactors"] .card.waiting-for-match.flipped .card-back.card-answer {
  background: linear-gradient(135deg, #FFCD82 0%, #FFF3D6 100%) !important;
  border: 3px solid white !important;
}

/* Black text for waiting-for-match cards */
body[data-mode="findResults"] .card.waiting-for-match.flipped .card-back.card-answer .card-content,
body[data-mode="findResults"] .card.waiting-for-match.flipped .card-back.card-answer .card-content span,
body[data-mode="findEquations"] .card.waiting-for-match.flipped .card-back.card-question .card-content,
body[data-mode="findEquations"] .card.waiting-for-match.flipped .card-back.card-question .card-content span,
body[data-mode="findFactors"] .card.waiting-for-match.flipped .card-back.card-answer .card-content,
body[data-mode="findFactors"] .card.waiting-for-match.flipped .card-back.card-answer .card-content span {
  color: black !important;
}

/* Override pulse-active text color for waiting-for-match cards */
body[data-mode="findResults"] .card.waiting-for-match .card-back.card-answer .card-content span.js-pulse-active,
body[data-mode="findEquations"] .card.waiting-for-match .card-back.card-question .card-content span.js-pulse-active,
body[data-mode="findFactors"] .card.waiting-for-match .card-back.card-answer .card-content span.js-pulse-active {
  color: black !important;
}

/* ========================================= */
/*             MATCHED CARD COLORS          */
/* ========================================= */
/* Matched cards (same appearance in all modes) - High specificity to override mode colors */
.card.matched.flipped .card-back.card-question,
.card.matched.flipped .card-back.card-answer,
body[data-active-tab="practice"] .card.matched.flipped .card-back.card-question,
body[data-active-tab="practice"] .card.matched.flipped .card-back.card-answer,
body[data-mode="findResults"] .card.matched.flipped .card-back.card-question,
body[data-mode="findResults"] .card.matched.flipped .card-back.card-answer,
body[data-mode="findEquations"] .card.matched.flipped .card-back.card-question,
body[data-mode="findEquations"] .card.matched.flipped .card-back.card-answer,
body[data-mode="findFactors"] .card.matched.flipped .card-back.card-question,
body[data-mode="findFactors"] .card.matched.flipped .card-back.card-answer {
  background: var(--matched-card-bg) !important;
  animation: none !important;
}

.card.matched .card-content {
  color: var(--matched-card-text) !important;
  opacity: 0.9 !important;
  filter: grayscale(0%) !important;
}

.card.matched .card-front,
.card.matched .card-back {
  border: 3px solid white !important;
}

/* Remove waiting-for-match effects from matched cards */
.card.matched .card-inner {
  box-shadow: none !important;
  animation: none !important;
}

/* Disable hover effects on matched cards */
.card.matched:hover .card-content span {
  color: var(--matched-card-text) !important;
  transform: none !important;
  transition: none !important;
}

.card.matched:hover .card-back {
  transform: none !important;
}

.card.matched:hover .card-front {
  transform: none !important;
  background-color: var(--matched-card-bg) !important;
}

/* Make matched cards slightly faded */
.card.matched {
  opacity: 0.95 !important;
  filter: grayscale(0%) !important;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* General text colors for all cards */
.card-question .card-content,
.card-answer .card-content {
  color: white !important;
}

/* Override: Dark text for all orange cards (face-down "?" and flipped content) */
body[data-mode="findResults"] .card:not(.matched).flipped .card-back.card-answer .card-content,
body[data-mode="findResults"] .card:not(.matched).flipped .card-back.card-answer .card-content span,
body[data-mode="findEquations"] .card:not(.matched).flipped .card-back.card-question .card-content,
body[data-mode="findEquations"] .card:not(.matched).flipped .card-back.card-question .card-content span,
body[data-mode="findFactors"] .card:not(.matched).flipped .card-back.card-answer .card-content,
body[data-mode="findFactors"] .card:not(.matched).flipped .card-back.card-answer .card-content span {
  color: #1e1b19 !important;
}

/* Welcome Modal Slides */
.welcome-slides-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 350px;
  max-height: 70vh; /* Prevent slides from being too tall */
  overflow-y: auto; /* Allow scrolling if content is too tall */
}

.welcome-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.welcome-slide.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
  visibility: visible;
}

.welcome-slide.prev {
  transform: translateX(-100%);
}

/* Welcome Choice Buttons - Enhanced Design */
.welcome-choice-btn {
  border: none !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  border-radius: 16px !important;
  padding: 20px 18px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 12px !important;
}

.welcome-choice-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.welcome-choice-btn:hover::before {
  opacity: 1;
}

.welcome-choice-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
}

.welcome-choice-btn:active {
  transform: translateY(-1px) scale(1.01) !important;
  transition: all 0.1s ease !important;
}

/* Enhanced icon containers */
.welcome-choice-btn .icon-container {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}

.welcome-choice-btn:hover .icon-container {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Try It Out button - Green theme */
#welcomeTryBtn .icon-container {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

#welcomeTryBtn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
}

/* Sign In button - Blue theme */
#welcomeSignInBtn .icon-container {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

#welcomeSignInBtn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
}

/* Enhanced text styling */
.welcome-choice-btn .text-content {
  flex: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

.welcome-choice-btn .main-text {
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.welcome-choice-btn .sub-text {
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

.welcome-choice-btn:hover .main-text {
  color: #111827 !important;
}

.welcome-choice-btn:hover .sub-text {
  color: #4b5563 !important;
}

/* Icon styling */
.welcome-choice-btn i {
  width: 24px !important;
  height: 24px !important;
  color: white !important;
  stroke-width: 2.5 !important;
}

/* Welcome Back Button */
.welcome-back-btn {
  background: none;
  border: 2px solid #e5e7eb;
  color: #6b7280;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.welcome-back-btn:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.welcome-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.welcome-continue-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Focus styles for the input */
#welcomeUnlockCodeInput:focus {
  outline: none;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile responsive adjustments */
@media (max-height: 750px) and (min-width: 481px) {
  .welcome-slides-container {
    min-height: 350px;
  }
}

@media (max-height: 650px) and (min-width: 481px) {
  .welcome-slides-container {
    min-height: 320px;
  }
  
  .welcome-continue-btn {
    padding: 12px 24px;
    font-size: 15px;
  }
}

@media (max-height: 550px) {
  .welcome-slides-container {
    min-height: 280px;
  }
  
  .welcome-slide {
    padding: 10px 0;
  }
  
  .welcome-continue-btn {
    padding: 10px 20px;
    font-size: 14px;
    margin: 15px auto 5px;
  }
}

/* =========================================== */
/*         IMPROVED WELCOME MODAL STYLES      */
/* =========================================== */



#welcomeModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  box-sizing: border-box;
}

/* Styling for the logo on the first welcome slide */
.welcome-slide-logo {
  display: block;
  width: 290px;
  max-width: 40%;
  margin: 20px auto 4px auto; /* Added top/bottom margin for buffer */
}

/* Floating player mascot that overlaps the top of the welcome modal.
   Roughly the top 30% of the head sits above the modal top edge
   (helmet dome + antenna); the rest of the character is inside the
   modal. object-fit:contain shows the full image (body intact). */
.welcome-player-frame {
  position: absolute;
  top: -68px;
  left: 50%;
  transform: translateX(-50%);
  width: 224px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
  /* Mascot drops in with a spring bounce after the modal settles, so
     the modal and mascot don't appear together. */
  animation: welcomePlayerIn 650ms cubic-bezier(0.34, 1.56, 0.64, 1) 350ms both;
}

.welcome-player-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Modal itself fades + scales in. Keyed off the modal-content-box so the
   overlay background can stay instant. */
#welcomeModal .modal-content-box {
  animation: welcomeModalIn 350ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes welcomeModalIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes welcomePlayerIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-60px) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(8px) scale(1.06);
  }
  85% {
    transform: translateX(-50%) translateY(-2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

#welcomeModal .modal-content-box {
  background: white; /* Give it a solid background now */
  border-radius: 24px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  overflow: visible; /* Allow the floating player frame to protrude above */
  width: 100%;
  max-width: 500px; /* <-- This is now the standard width for all slides */
  max-height: 95vh;
  position: relative;
  top: 48px; /* Shift modal down so the protruding mascot looks visually centered */
  display: flex;
  flex-direction: column; /* Ensure it's a column layout */
  margin: 0 auto;
}

/* Reserve space at the top of the slide stack so the slide title sits
   just below the visible character (m logo area), not below the image
   bounding box bottom. The image content occupies roughly the top 80%
   of its bounding box and the rest is transparent, so the title lives
   in that transparent zone — visually close to the body, with ~20px
   breathing room above the title. */
#welcomeModal .welcome-slides-container {
  padding-top: 135px;
}

/* Gap between welcome-left-column (title) and welcome-right-column
   (buttons) on slide 1. Combined with the 20px above the title from
   padding-top, this centers the title in the space between the mascot
   bottom and the top button. */
#welcomeSlide1 {
  gap: 12px;
}

/* Close Button */
#welcomeModal .modal-close {
  display: none;
}

#welcomeModal .modal-close:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #374151;
}

/* Right Section is now the ONLY section */
.welcome-right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: auto; /* Remove old min-width */
}

.welcome-right-section.full-width {
  border-radius: 24px !important;
  min-width: 400px;
  max-width: 600px;
  position: relative !important;
  width: 100% !important;
  margin-left: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Slides Container */
.welcome-slides-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: auto;
  max-height: 70vh;
}

.welcome-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

.welcome-slide.active {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  position: relative;
  height: auto;
}

.welcome-slide.prev {
  transform: translateX(-100%);
}

/* Slide Headers */
.slide-header,
#welcomeModal h2 {
  text-align: center;
  margin-bottom: 15px;
}

.slide-title,
#welcomeModal h2 {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1.2;
}

.slide-subtitle,
#welcomeModal p {
  font-size: 16px;
  color: #6b7280;
  font-weight: 500;
  line-height: 1.4;
}

/* Choice Buttons */
.welcome-option-btn,
.welcome-choice-btn {
  background: white !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto 12px auto !important;
}

.welcome-option-btn::before,
.welcome-choice-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(16, 185, 129, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.welcome-option-btn:hover,
.welcome-choice-btn:hover {
  border-color: #3b82f6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
  background: white !important;
}

.welcome-option-btn:hover::before,
.welcome-choice-btn:hover::before {
  opacity: 1;
}

.welcome-option-btn .icon-container,
.choice-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

#welcomeTryBtn .icon-container,
.choice-icon.green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

#welcomeSignInBtn .icon-container,
.choice-icon.blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

.welcome-option-btn .icon-container i,
.choice-icon i {
  width: 24px;
  height: 24px;
  color: white;
  stroke-width: 2.5;
}

.welcome-option-btn .text-content,
.choice-content {
  flex: 1;
  z-index: 1;
}

.welcome-option-btn .main-text,
.choice-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.welcome-option-btn .sub-text,
.choice-description {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  line-height: 1.3;
}

/* Back Button */
.welcome-back-btn,
.back-btn {
  background: none;
  border: 2px solid #e5e7eb;
  color: #6b7280;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 5px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  font-weight: 500;
  order: 10;
}

.welcome-back-btn:hover,
.back-btn:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.welcome-back-btn i,
.back-btn i {
  width: 14px;
  height: 14px;
}

.welcome-content {
  text-align: center;
  margin-bottom: 32px;
  padding-left: 20px;
  padding-right: 20px;
}

.welcome-info-box {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border: 2px solid #16a34a;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  color: #166534;
  text-align: center;
}

.welcome-info-box .info-title {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 16px;
}

.welcome-info-box .info-content {
  font-size: 14px;
  line-height: 1.7;
}

/* Form Elements */
.form-group {
  margin-bottom: 20px;
}

#welcomeUnlockCodeInput,
.form-input {
  width: 100%; /* Change from calc(100% - 40px) */
  padding: 16px 32px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
  font-family: monospace;
  transition: all 0.2s ease;
  margin: 0 0 12px 0; /* Remove left/right margins */
  box-sizing: border-box;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#welcomeUnlockCodeInput:focus,
.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-hint {
  font-size: 15px;
  color: #6b7280;
  text-align: center;
  margin-top: 8px;
  font-weight: 500;
}

#welcomeSignInError,
.error-message {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  margin: 15px 0;
  display: none;
}

#welcomeSlide2Trial .slide-header {
  margin-bottom: 8px; /* Even less space under title */
}

#welcomeSlide2Trial .welcome-info-box {
  margin-bottom: 40px; /* Add margin beneath green feature box */
}

/* Primary Button */
.welcome-continue-btn,
.primary-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: 2px solid transparent;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 0 0;
  box-sizing: border-box;
}

.welcome-continue-btn:hover,
.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.welcome-continue-btn:disabled,
.primary-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.welcome-continue-btn i,
.primary-btn i {
  width: 18px;
  height: 18px;
}

/* Welcome Back Slide */
.welcome-back-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.welcome-back-content .welcome-slide-logo {
  width: auto;
  max-width: 200px;
  max-height: 160px;
  height: auto;
  object-fit: contain;
  margin-bottom: 16px;
}

.welcome-back-subtitle {
  color: #6b7280;
  font-size: 16px;
  margin-bottom: 24px;
}

.welcome-back-go-btn {
  max-width: 280px;
  font-size: 18px !important;
  padding: 18px 36px !important;
}

/* Success Elements */
.success-icon {
  width: 64px;
  height: 64px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #16a34a;
}

.success-icon i {
  width: 32px;
  height: 32px;
}

#welcomePersonalizedContent {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0 35px 0;
  color: #1e40af;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
  #welcomeModal {
      padding: 25px; /* Increased from 15px for more space */
  }

  #welcomeModal .modal-content-box {
    /* Keep max-width:500px from the base rule so width doesn't jump
       when crossing the 768px breakpoint. */
    max-height: 95vh;
    min-height: auto;
    height: auto;
    margin: 0 auto;
    overflow-y: visible; /* Let the floating player mascot protrude above */
  }

  /* The old mobile rules for .welcome-left-section and .welcome-right-section are no longer needed */
  .welcome-right-section {
    min-width: auto;
    flex: 1;
    border-radius: 0 0 24px 24px;
  }

  /* Scale the mascot down on tablet/phone so it doesn't overflow the viewport. */
  #welcomeModal .modal-content-box {
    top: 40px;
  }
  .welcome-player-frame {
    top: -54px;
    width: 176px;
    height: 189px;
  }
  .welcome-player-image {
    width: 100%;
    height: 100%;
  }
  /* Title positioned ~20px below the visible character body (within the
     image's transparent bottom region), with ~20px breathing room above. */
  #welcomeModal .welcome-slides-container {
    padding-top: 110px;
  }
}

@media (max-width: 768px) {
  #welcomeModal .modal-image,
  .welcome-brand-logo {
    width: 120px;
    height: 120px;
    margin-bottom: 16px;
  }
  
  .welcome-title,
  .welcome-brand-content h1 {
    font-size: 24px;
  }
  
  .welcome-subtitle,
  .welcome-brand-tagline {
    font-size: 14px;
  }
  
  .welcome-right-section {
    min-width: auto;
    flex: 1;
    border-radius: 0 0 24px 24px;
  }
  
  .welcome-slide {
    padding: 24px 20px 30px; /* Replaced 6vh with fixed value */
    justify-content: center;
}
  
  .slide-title,
  #welcomeModal h2 {
    font-size: 22px;
  }
  
  .welcome-option-btn,
  .welcome-choice-btn {
    padding: 16px 20px !important;
    gap: 12px !important;
  }
  
  .welcome-option-btn .icon-container,
  .choice-icon {
    width: 40px;
    height: 40px;
  }
  
  .welcome-option-btn .icon-container i,
  .choice-icon i {
    width: 20px;
    height: 20px;
  }
  
  .welcome-option-btn .main-text,
  .choice-title {
    font-size: 16px;
  }
  
  .welcome-option-btn .sub-text,
  .choice-description {
    font-size: 13px;
  }

  .welcome-copyright,
  .welcome-brand-copyright {
      margin-bottom: 10px !important;
  }
  .welcome-copyright,
  .welcome-brand-copyright {
    margin-bottom: -15px !important;
  }
}

@media (max-width: 480px) {
  #welcomeModal {
      padding: 20px; /* Increased from 10px for more space */
      align-items: center;
      justify-content: center;
  }

  #welcomeModal .modal-content-box {
    /* Keep max-width:500px from the base rule so width doesn't jump
       when crossing the 480px breakpoint. */
    max-height: 80vh;
    border-radius: 20px;
    min-height: auto;
    margin: 0 auto;
    overflow-y: visible; /* Let the floating player mascot protrude above */
  }

.welcome-slides-container {
  min-height: 250px;
  max-height: 60vh;
  align-items: center;
  justify-content: center;
}

  .welcome-slide {
    padding: 15px 16px 20px; /* Replaced 5vh with fixed value */
      justify-content: center;
  }

  .slide-title,
  #welcomeModal h2 {
      font-size: 20px;
      margin-bottom: 15px;
  }

  .slide-subtitle,
  #welcomeModal p {
      font-size: 14px;
      margin-bottom: 20px;
  }

  .welcome-option-btn,
  .welcome-choice-btn {
      padding: 14px 16px !important;
      gap: 10px !important;
      margin-bottom: 10px !important;
  }

  .slide-header {
      margin-bottom: 20px;
  }
}

/* Extra small screens and short screens */
@media (max-width: 360px), (max-height: 600px) {
  #welcomeModal {
      padding: 16px; /* Increased from 8px for more space */
  }

  #welcomeModal .modal-content {
      max-height: 98vh;
      border-radius: 16px;
  }

  .welcome-left-section {
      padding: 15px 16px 10px;
  }

  #welcomeModal .modal-image,
  .welcome-brand-logo {
      width: 60px;
      height: 60px;
      margin-bottom: 12px;
  }

  .welcome-title,
  .welcome-brand-content h1 {
      font-size: 20px;
      margin-bottom: 6px;
  }

  .welcome-subtitle,
  .welcome-brand-tagline {
      font-size: 13px;
      margin-bottom: 4px;
  }

  .welcome-slides-container {
    min-height: 200px;
    max-height: 55vh;
    align-items: center;
    justify-content: center;
}

  .welcome-slide {
      padding: 12px 14px 8px;
  }

  .slide-title {
      font-size: 18px;
      margin-bottom: 12px;
  }

  .slide-subtitle {
      font-size: 13px;
      margin-bottom: 16px;
  }

  .welcome-option-btn,
  .welcome-choice-btn {
      padding: 12px 14px !important;
      gap: 8px !important;
      margin-bottom: 8px !important;
  }

  .welcome-option-btn .icon-container,
  .choice-icon {
      width: 36px;
      height: 36px;
  }

  .welcome-option-btn .icon-container i,
  .choice-icon i {
      width: 18px;
      height: 18px;
  }

  .welcome-option-btn .main-text,
  .choice-title {
      font-size: 15px;
  }

  .welcome-option-btn .sub-text,
  .choice-description {
      font-size: 12px;
  }
}

/* Extra small screens and short screens */
@media (max-width: 360px), (max-height: 600px) {
  #welcomeModal {
      padding: 16px; /* Increased from 8px for more space */
  }

  #welcomeModal .modal-content-box {
      max-height: 98vh;
      border-radius: 16px;
  }

  /* Mascot scaled further down on tiny/short screens. */
  #welcomeModal .modal-content-box {
    top: 32px;
  }
  .welcome-player-frame {
    top: -44px;
    width: 144px;
    height: 154px;
  }
  .welcome-player-image {
    width: 100%;
    height: 100%;
  }
  /* Title positioned ~20px below the visible character body (within the
     image's transparent bottom region), with ~20px breathing room above. */
  #welcomeModal .welcome-slides-container {
    padding-top: 90px;
  }

  .welcome-left-section {
      padding: 15px 16px 10px;
  }

  #welcomeModal .modal-image,
  .welcome-brand-logo {
      width: 60px;
      height: 60px;
      margin-bottom: 12px;
  }

  .welcome-title,
  .welcome-brand-content h1 {
      font-size: 20px;
      margin-bottom: 6px;
  }

  .welcome-subtitle,
  .welcome-brand-tagline {
      font-size: 13px;
      margin-bottom: 4px;
  }

  .welcome-slides-container {
    min-height: 200px;
    max-height: 55vh;
    align-items: center;
    justify-content: center;
}

  .welcome-slide {
      padding: 12px 14px 8px;
  }

  .slide-title {
      font-size: 18px;
      margin-bottom: 12px;
  }

  .slide-subtitle {
      font-size: 13px;
      margin-bottom: 16px;
  }

  .welcome-option-btn,
  .welcome-choice-btn {
      padding: 12px 14px !important;
      gap: 8px !important;
      margin-bottom: 8px !important;
  }

  .welcome-option-btn .icon-container,
  .choice-icon {
      width: 36px;
      height: 36px;
  }

  .welcome-option-btn .icon-container i,
  .choice-icon i {
      width: 18px;
      height: 18px;
  }

  .welcome-option-btn .main-text,
  .choice-title {
      font-size: 15px;
  }

  .welcome-option-btn .sub-text,
  .choice-description {
      font-size: 12px;
  }
}

/* Landscape orientation - keep horizontal layout */
@media (max-height: 600px) and (min-width: 769px) {
  #welcomeModal .modal-content-box {
      max-height: 85vh;
      flex-direction: row;
  }

  .welcome-left-section {
      padding: 20px;
      border-radius: 24px 0 0 24px;
  }

  #welcomeModal .modal-image,
  .welcome-brand-logo {
      width: 80px;
      height: 80px;
      margin-bottom: 12px;
  }

  .welcome-title,
  .welcome-brand-content h1 {
      font-size: 20px;
  }

  .welcome-slide {
      padding: 20px 24px;
  }

  .slide-title,
  #welcomeModal h2 {
      font-size: 24px;
  }

  .welcome-right-section {
      border-radius: 0 24px 24px 0;
  }
}

/* Animation classes */
@keyframes slideInRight {
  from {
      opacity: 0;
      transform: translateX(100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
      opacity: 0;
      transform: translateX(-100%);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.slide-enter-right {
  animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-enter-left {
  animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reverse Factors Toggle States */

/* Default State: Show OFF icon (arrow-right-left), hide ON icon */
#reverseFactorsToggle #reverseFactorsOnIcon,
#slide-reverse-factors-toggle #slide-reverse-factors-on-icon {
  display: none !important;
}

#reverseFactorsToggle #reverseFactorsOffIcon,
#slide-reverse-factors-toggle #slide-reverse-factors-off-icon {
  display: inline !important;
  /* The "opacity: 0.3;" line has been removed from here */
}

/* Active State: When the button has the .reverse-factors-on class... */
/* Show ON icon (arrow-left-right), hide OFF icon */
#reverseFactorsToggle.reverse-factors-on #reverseFactorsOnIcon,
#slide-reverse-factors-toggle.reverse-factors-on #slide-reverse-factors-on-icon {
  display: inline !important;
  opacity: 1;
}

#reverseFactorsToggle.reverse-factors-on #reverseFactorsOffIcon,
#slide-reverse-factors-toggle.reverse-factors-on #slide-reverse-factors-off-icon {
  display: none !important;
}

/* === New Styles for Skip Operators Toggle === */

/* --- Desktop Toggle --- */
/* Default State: Skipping is OFF, so show the "speaking" icon */
#skipOperatorsToggle #skipOperatorsOnIcon { display: none !important; }
#skipOperatorsToggle #skipOperatorsOffIcon { display: inline-block !important; }

/* Active State: When .skip-operators-on class is added, show the "muted" icon */
#skipOperatorsToggle.skip-operators-on #skipOperatorsOnIcon { display: inline-block !important; }
#skipOperatorsToggle.skip-operators-on #skipOperatorsOffIcon { display: none !important; }


/* --- Mobile Toggle --- */
/* Default State: Skipping is OFF */
#slide-skip-operators-toggle #slide-skip-operators-on-icon { display: none !important; }
#slide-skip-operators-toggle #slide-skip-operators-off-icon { display: inline-block !important; }

/* Active State: Skipping is ON */
#slide-skip-operators-toggle.skip-operators-on #slide-skip-operators-on-icon { display: inline-block !important; }
#slide-skip-operators-toggle.skip-operators-on #slide-skip-operators-off-icon { display: none !important; }


/* --- Bubbles Toggle (Desktop) --- */
/* Default State: Bubbles OFF — show the "off" icon */
#bubblesToggle #bubblesOnIcon { display: none !important; }
#bubblesToggle #bubblesOffIcon { display: inline-block !important; }

/* Active State: Bubbles ON — show the "on" icon */
#bubblesToggle.bubbles-on #bubblesOnIcon { display: inline-block !important; }
#bubblesToggle.bubbles-on #bubblesOffIcon { display: none !important; }

/* --- Bubbles Toggle (Mobile) --- */
/* Default State: Bubbles OFF */
#slide-bubbles-toggle #slide-bubbles-on-icon { display: none !important; }
#slide-bubbles-toggle #slide-bubbles-off-icon { display: inline-block !important; }

/* Active State: Bubbles ON */
#slide-bubbles-toggle.bubbles-on #slide-bubbles-on-icon { display: inline-block !important; }
#slide-bubbles-toggle.bubbles-on #slide-bubbles-off-icon { display: none !important; }


/* Mobile Voice Dropdown Styling */
.custom-voice-dropdown-mobile {
  width: 100%;
  position: relative;
}

.dropdown-selected-mobile {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  background-color: white;
  color: #1f2937;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  min-height: 20px;
}

.selected-voice-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-flag-icon {
  width: 16px;
  height: 12px;
  border-radius: 2px;
}

.dropdown-options-mobile {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-option-mobile {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #1f2937;
  background-color: white;
  font-size: 14px;
}

.dropdown-option-mobile:hover:not(.disabled) {
  background-color: #f9fafb;
}

.dropdown-option-mobile.disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.dropdown-option-mobile.selected {
  background-color: #eff6ff;
}

.dropdown-arrow {
  transition: transform 0.2s;
  color: #6b7280;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
}

/* Mobile Language Dropdown Styling */
.custom-language-dropdown-mobile {
  width: 100%;
  position: relative;
}

.selected-language-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-flag-icon {
  width: 16px;
  height: 12px;
  border-radius: 2px;
}

/* Reuse the same dropdown styling for language */
.custom-language-dropdown-mobile .dropdown-selected-mobile,
.custom-language-dropdown-mobile .dropdown-options-mobile,
.custom-language-dropdown-mobile .dropdown-option-mobile {
  /* Inherits all the styling from voice dropdown */
}

/* Visual indicator for shared answer cards in mixed mode */
.card[data-answer-value] .card-back::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: linear-gradient(45deg, #10b981, #059669);
  border-radius: 50%;
  opacity: 0.7;
}

.card[data-answer-value] .card-back:hover::after {
  opacity: 1;
  transform: scale(1.2);
  transition: all 0.2s ease;
}

/* Language font weight adjustment */
html[lang="th"] .card-content,
html[lang="th"] .card-content span,
html[lang="th"] .slideshow-card .card-content,
html[lang="th"] .slideshow-card .card-content span,
html[lang="vi"] .card-content,
html[lang="vi"] .card-content span,
html[lang="vi"] .slideshow-card .card-content,
html[lang="vi"] .slideshow-card .card-content span,
html[lang="ar"] .card-content,
html[lang="ar"] .card-content span,
html[lang="ar"] .slideshow-card .card-content,
html[lang="ar"] .slideshow-card .card-content span,
html[lang="en"] .card-content,
html[lang="en"] .card-content span,
html[lang="en"] .slideshow-card .card-content,
html[lang="en"] .slideshow-card .card-content span,
html[lang="es"] .card-content,
html[lang="es"] .card-content span,
html[lang="es"] .slideshow-card .card-content,
html[lang="es"] .slideshow-card .card-content span,
html[lang="cy"] .card-content,
html[lang="cy"] .card-content span,
html[lang="cy"] .slideshow-card .card-content,
html[lang="cy"] .slideshow-card .card-content span,
html[lang="hi"] .card-content,
html[lang="hi"] .card-content span,
html[lang="hi"] .slideshow-card .card-content,
html[lang="hi"] .slideshow-card .card-content span,
html[lang="ja"] .card-content,
html[lang="ja"] .card-content span,
html[lang="ja"] .slideshow-card .card-content,
html[lang="ja"] .slideshow-card .card-content span,
html[lang="ko"] .card-content,
html[lang="ko"] .card-content span,
html[lang="ko"] .slideshow-card .card-content,
html[lang="ko"] .slideshow-card .card-content span {
  font-weight: 400 !important;
}

/* Ensure numbers are not bold in cards for specific languages */
html[lang="th"] .card-question .card-content span,
html[lang="th"] .card-answer .card-content span,
html[lang="vi"] .card-question .card-content span,
html[lang="vi"] .card-answer .card-content span,
html[lang="ar"] .card-question .card-content span,
html[lang="ar"] .card-answer .card-content span,
html[lang="en"] .card-question .card-content span,
html[lang="en"] .card-answer .card-content span,
html[lang="es"] .card-question .card-content span,
html[lang="es"] .card-answer .card-content span,
html[lang="cy"] .card-question .card-content span,
html[lang="cy"] .card-answer .card-content span,
html[lang="hi"] .card-question .card-content span,
html[lang="hi"] .card-answer .card-content span {
  font-weight: 300 !important;
}

/* Achievement emoji animations */
@keyframes achievementBounce {
  0%, 100% { 
    transform: translateY(-50%) scale(1); 
  }
  50% { 
    transform: translateY(-50%) scale(1.2); 
  }
}

.achievement-emoji {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}


.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  color: #333;
  font-size: 24px;
  transition: transform 0.2s, color 0.2s;
  z-index: 10;
}

/* =========================================== */
/*      MOBILE LANDSCAPE WELCOME MODAL         */
/* =========================================== */

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #welcomeModal .modal-content-box {
    flex-direction: row;
    /* Keep max-width:500px from the base rule so width is consistent. */
    max-height: 95vh;
    padding: 10px;
  }

  .welcome-slides-container {
    display: flex;
    flex: 1;
    min-height: 0;
  }

  .welcome-slide {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    height: 100%;
  }

  .welcome-left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 15px;
  }

  .welcome-right-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 15px;
  }

  .welcome-slide-logo {
    max-width: 120px;
    height: auto;
    margin: 0;
  }

  #welcome-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
  }

  .welcome-choice-btn {
    width: 100%;
    max-width: 250px;
  }
}

/* ============================================
   PLAY SLIDER (Play/Games tab onboarding)
   ps- prefix to avoid conflicts
   ============================================ */
#playSliderOverlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: psOverlayFadeIn 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.ps-card,
.ps-card * { box-sizing: border-box; }
.ps-card {
  position: relative;
  width: calc(100% - 24px);
  max-width: 320px;
  height: 480px;
  max-height: calc(100% - 24px);
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid rgba(0,0,0,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 40px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Nunito', Arial, sans-serif;
  color: #1a1a2e;
  animation: psCardScaleIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes psOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes psCardScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.ps-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 10;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: none;
  color: #6b7280;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ps-close:hover { background: rgba(0,0,0,0.1); }

/* Slides viewport & track */
.ps-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}
.ps-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ps-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
}
.ps-slide::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.ps-emoji { font-size: 32px; margin-bottom: 8px; line-height: 1.2; }
.ps-title {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.ps-body {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
  margin-bottom: 12px;
}
.ps-body strong { color: #1a1a2e; font-weight: 700; }

/* Controls */
.ps-controls {
  flex-shrink: 0;
  padding: 8px 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ps-dots { display: flex; gap: 8px; }
.ps-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.ps-dot.ps-active { background: #4E81EE; box-shadow: 0 0 8px rgba(78,129,238,0.5); }
.ps-btn-row { display: flex; gap: 10px; width: 100%; }
.ps-btn {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  min-height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
  -webkit-tap-highlight-color: transparent;
}
.ps-btn:active { transform: scale(0.96); }
.ps-btn-primary {
  background: linear-gradient(135deg, #4E81EE, #3a6fd8);
  color: #fff;
}
.ps-btn-primary:hover { box-shadow: 0 4px 18px rgba(78,129,238,0.45); }
.ps-btn-green {
  background: linear-gradient(135deg, #2ECC71, #27ae60);
  color: #fff;
}
.ps-btn-green:hover { box-shadow: 0 4px 18px rgba(46,204,113,0.45); }
.ps-btn-ghost {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
}
.ps-btn-ghost:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ps-btn-full { width: 100%; }
.ps-btn-flex1 { flex: 1; }
.ps-btn-flex15 { flex: 1.5; }

/* Checkbox */
.ps-dontshow {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ps-checkbox {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid #d1d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.ps-checkbox.ps-checked {
  background: #4E81EE;
  border-color: #4E81EE;
}
.ps-checkbox svg {
  width: 11px; height: 11px;
  opacity: 0;
  transition: opacity 0.2s;
}
.ps-checkbox.ps-checked svg { opacity: 1; }
.ps-dontshow-label {
  font-size: 12px;
  color: #9ca3af;
  user-select: none;
}

/* Slide 1: Card grid demo */
.ps-grid-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 220px;
  margin: auto;
}
.ps-gc {
  position: relative;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
  overflow: hidden;
}
.ps-gc-blue {
  background: linear-gradient(180deg, #5a9cf5, #4E81EE);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 3px 8px rgba(78,129,238,0.3);
}
.ps-gc-orange {
  background: linear-gradient(180deg, #fde8c8, #fbd5a0);
  color: #1a1a2e;
  border: 2px solid rgba(245,158,11,0.2);
  box-shadow: 0 3px 8px rgba(245,158,11,0.2);
}
.ps-gc-qmark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #e8713a;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.ps-gc-revealed {
  animation: ps-pulse-orange 1s ease-in-out infinite;
}
@keyframes ps-pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0px rgba(245,158,11,0.15), 0 3px 8px rgba(245,158,11,0.2); }
  50% { box-shadow: 0 0 0 3px rgba(245,158,11,0.25), 0 3px 12px rgba(245,158,11,0.3); }
}
.ps-gc-green {
  background: linear-gradient(180deg, #5cd97f, #2ECC71) !important;
  border-color: rgba(255,255,255,0.3) !important;
  box-shadow: 0 3px 8px rgba(46,204,113,0.3) !important;
  color: #1a5e30 !important;
  animation: none !important;
}
.ps-gc-green .ps-gc-qmark,
.ps-gc-green .ps-gc-numcircle {
  background: rgba(255,255,255,0.5);
  color: #1a5e30;
}
.ps-cursor {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

/* Slide 2: Pill bars */
.ps-games-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 6px;
}
.ps-game-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ps-game-label {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a2e;
}
.ps-game-hint {
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.3;
}
.ps-game-hint strong { color: #6b7280; font-weight: 700; }
.ps-pill {
  width: 70%;
  height: 18px;
  border-radius: 50px;
  background: rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}
.ps-pill-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 50px;
  width: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 1.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.ps-pill-fill.ps-blue { background: linear-gradient(90deg, #4E81EE, #6a9bf5); }
.ps-pill-fill.ps-purple { background: linear-gradient(90deg, #9B59B6, #b07cc9); }
.ps-pill-fill.ps-red { background: linear-gradient(90deg, #E74C3C, #f06050); }
.ps-pill-text {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.ps-games-footer {
  font-size: 13px;
  color: #6b7280;
  margin-top: 10px;
}

/* Slide 3: Coin demo */
.ps-coin-demo {
  background: #f3f4f6;
  border-radius: 10px;
  width: 100%;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-height: 100px;
  position: relative;
  overflow: hidden;
}
.ps-streak {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.ps-coin-reward {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #f59e0b;
  opacity: 0;
  transform: translateY(10px) scale(0.8);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  min-height: 28px;
}
.ps-coin-reward.ps-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ps-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ps-sparkle {
  position: absolute;
  font-size: 14px;
  opacity: 0;
  animation: ps-sparkle-pop 0.6s ease-out forwards;
}
@keyframes ps-sparkle-pop {
  0% { opacity: 0; transform: scale(0.3) translateY(0); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5) translateY(-30px); }
}
/* END PLAY SLIDER */

/* ══════════════════════════════════════════════
   PRACTICE SLIDER (Practice tab onboarding)
   ══════════════════════════════════════════════ */
/* Reset scoped to card */
.pt-card, .pt-card * { box-sizing: border-box; }
/* Overlay */
.pt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ptOverlayFadeIn 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Card */
.pt-card {
  position: relative;
  width: calc(100% - 24px);
  max-width: 320px;
  height: 480px;
  max-height: calc(100% - 24px);
  border-radius: 20px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 40px rgba(0,0,0,0.08);
  font-family: 'Nunito', Arial, sans-serif;
  color: #1a1a2e;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ptCardScaleIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes ptOverlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ptCardScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #playSliderOverlay,
  .ps-card,
  .pt-overlay,
  .pt-card { animation: none; }
}
/* Close */
.pt-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 10;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  border: none;
  color: #6b7280;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.pt-close:hover { background: rgba(0,0,0,0.1); }
/* Viewport & track */
.pt-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  width: 100%;
}
.pt-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pt-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pt-slide::-webkit-scrollbar { display: none; }
.pt-slide-emoji { font-size: 32px; margin-bottom: 6px; line-height: 1.2; }
.pt-slide-title {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 6px;
}
.pt-slide-body {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
  margin-bottom: 10px;
}
.pt-slide-body strong { color: #1a1a2e; font-weight: 700; }
/* Controls */
.pt-controls {
  flex-shrink: 0;
  padding: 0 24px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pt-dots { display: flex; gap: 8px; }
.pt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.pt-dot.pt-active { background: #4E81EE; box-shadow: 0 0 8px rgba(78,129,238,0.5); }
.pt-nav { display: flex; gap: 10px; width: 100%; }
.pt-btn {
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  min-height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
  -webkit-tap-highlight-color: transparent;
  flex: 1;
}
.pt-btn:active { transform: scale(0.96); }
.pt-btn-primary {
  background: linear-gradient(135deg, #4E81EE, #3a6fd8);
  color: #fff;
}
.pt-btn-primary:hover { box-shadow: 0 4px 18px rgba(78,129,238,0.45); }
.pt-btn-green {
  background: linear-gradient(135deg, #2ECC71, #27ae60);
  color: #fff;
}
.pt-btn-green:hover { box-shadow: 0 4px 18px rgba(46,204,113,0.45); }
.pt-btn-ghost {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
}
.pt-btn-ghost:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
/* Checkbox */
.pt-dontshow {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pt-checkbox {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid #d1d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.pt-checkbox.pt-checked {
  background: #4E81EE;
  border-color: #4E81EE;
}
.pt-checkbox svg {
  width: 11px; height: 11px;
  opacity: 0;
  transition: opacity 0.2s;
}
.pt-checkbox.pt-checked svg { opacity: 1; }
.pt-dontshow-label {
  font-size: 12px;
  color: #9ca3af;
  user-select: none;
}
/* ── Slide 1: Hover-to-Highlight Grid ── */
.pt-grid-demo {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin: auto;
}
.pt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: 100%;
}
.pt-gc {
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.35);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.pt-gc-default {
  background: linear-gradient(160deg, #c4cfe0, #a8b8ce);
}
.pt-gc-q-active {
  background: linear-gradient(160deg, #5a9cf5, #4E81EE) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(78,129,238,0.4);
}
.pt-gc-a-active {
  background: linear-gradient(160deg, #5cd97f, #2ECC71) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.5) !important;
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(46,204,113,0.4);
}
.pt-cursor {
  position: absolute;
  width: 20px; height: 20px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.25));
  transition: left 0.55s cubic-bezier(0.4,0,0.2,1), top 0.55s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
}
@keyframes pt-cursor-click {
  0%,100% { transform: scale(1); }
  50% { transform: scale(0.82); }
}
.pt-cursor-click { animation: pt-cursor-click 0.2s ease; }
.pt-speaker-float {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
@keyframes pt-speaker-pop {
  0% { opacity: 0; transform: scale(0.7) translateY(0); }
  30% { opacity: 1; transform: scale(1.15) translateY(-6px); }
  100% { opacity: 0; transform: scale(0.9) translateY(-18px); }
}
.pt-speaker-anim { animation: pt-speaker-pop 0.7s ease forwards; }
/* ── Slide 2: Auto-Play Demo ── */
.pt-autoplay-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 220px;
  margin: auto;
}
.pt-autoplay-cards {
  display: flex;
  gap: 10px;
  width: 100%;
}
.pt-ap-card {
  flex: 1;
  height: 72px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  position: relative;
}
.pt-ap-q { background: linear-gradient(180deg, #5a9cf5, #4E81EE); }
.pt-ap-a { background: linear-gradient(180deg, #5cd97f, #2ECC71); }
.pt-ap-playbtn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4E81EE, #3a6fd8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  box-shadow: 0 2px 8px rgba(78,129,238,0.3);
}
@keyframes pt-speaker-pulse {
  0%,100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
.pt-speaker {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 14px;
  opacity: 0.4;
}
.pt-speaker-active { animation: pt-speaker-pulse 0.6s ease 2; }
/* ── Slide 3: Toggle Cards/Slides ── */
.pt-toggle-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 240px;
  margin: auto;
}
.pt-toggle-pill {
  display: flex;
  background: #f0f0f4;
  border-radius: 20px;
  overflow: hidden;
  font-family: 'Fredoka', 'Nunito', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.pt-toggle-opt {
  padding: 5px 14px;
  color: #9ca3af;
  transition: background 0.35s, color 0.35s;
  border-radius: 20px;
}
.pt-toggle-opt.pt-tog-active {
  background: #4E81EE;
  color: #fff;
}
.pt-view-area {
  width: 100%;
  height: 120px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.pt-mini-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: #dce4f0;
  border-radius: 10px;
  transition: opacity 0.4s;
}
.pt-mini-gc {
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
}
.pt-mini-gc-q { background: linear-gradient(160deg, #5a9cf5, #4E81EE); }
.pt-mini-gc-a { background: linear-gradient(160deg, #5cd97f, #2ECC71); }
.pt-mini-grid.pt-grid-dimmed { opacity: 0.35; }
.pt-slide-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 6px;
  padding: 14px 10px;
  align-items: stretch;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.pt-slide-overlay-card {
  flex: 1;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 700;
}
.pt-so-q {
  border: 2.5px solid #4E81EE;
  font-size: 18px;
  color: #1a1a2e;
}
.pt-so-a {
  border: 2.5px solid #2ECC71;
  font-size: 26px;
  color: #2ECC71;
}
/* END PRACTICE SLIDER */

/* ─── Language Launch Modal ─────────────────────────────────────────────
   Shown briefly when a URL-driven language or voice change occurs
   (e.g. /jp/ → Japanese + Keiko). Auto-dismisses after ~2.5s. Click
   anywhere dismisses early. Purely informational — not blocking.
─────────────────────────────────────────────────────────────────────── */
.lang-launch-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9999;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.25s ease-out;
  font-family: 'Nunito', Arial, sans-serif;
}
.lang-launch-modal.visible { opacity: 1; }
.lang-launch-modal.dismissing { opacity: 0; pointer-events: none; }

.lang-launch-modal__card {
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  padding: 16px 28px 16px 16px;
  min-width: 280px;
  max-width: 85vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.25s ease-out;
}
.lang-launch-modal.visible .lang-launch-modal__card {
  transform: translateY(0) scale(1);
}

.lang-launch-modal__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #e7e7f0;
}
.lang-launch-modal__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lang-launch-modal__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lang-launch-modal__voice-name {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.1;
}

.lang-launch-modal__lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-launch-modal__lang-name {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a2e;
}

.lang-launch-modal__flag {
  width: 28px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  object-fit: cover;
}

.lang-launch-modal__label {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .lang-launch-modal,
  .lang-launch-modal__card {
    transition: none;
  }
}
/* END LANGUAGE LAUNCH MODAL */