/* Red Panda Inspired Flat Design Components */

/* Nunito Font Family - Self-hosted for privacy and performance */
/* Headings/Buttons: Weight 800, Body Text: Weight 500, Flashcard Content: Weight 700 */

/* Base font definition - Nunito 500 for all text */
* {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 500;
}

/* Headings and buttons - Nunito 800 (Extra Bold) */
h1, h2, h3, h4, h5, h6, 
.font-heading,
.game-button-primary,
.game-button-secondary, 
.game-button-tertiary,
.game-button-outline,
.game-button-success,
.game-button-warning,
.game-button-danger,
.desktop-response-button,
.flashcard-direction,
.flashcard-proficiency,
.flashcard-difficulty,
.breadcrumb-link,
.breadcrumb-current,
button,
input[type="submit"],
.btn {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 800;
}

/* Flashcard content - Nunito 700 (Bold) for better readability */
.flashcard-word,
.flashcard-word-small,
.flashcard-answer,
.flashcard-hint,
.flashcard-hint-small {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 700;
}

/* Color Variables for Red Panda Theme */
:root {
  --panda-red: #E74C3C;
  --panda-orange: #FF6B47;
  --panda-cream: #FFF8DC;
  --panda-white: #FFFFFF;
  --panda-warm-white: #FEFCF7; /* Warm off-white with slight cream tint */
  --panda-teal: #4ECDC4;
  --panda-dark: #2C3E50;
  --panda-shadow: #34495E;
  --panda-success: #27AE60;
  --panda-warning: #F39C12;
  --panda-rust-red: #B85450;
  --panda-orange-red: #D2691E;
  --panda-warm-border: #2A2A2A; /* Slightly warmer border */
  
  --titlebar-nav-height: 56px; /* Mobile titlebar height */
  --breadcrumb-nav-height: 36px; /* Mobile breadcrumb height */
  --header-height: calc(var(--titlebar-nav-height) + var(--breadcrumb-nav-height)); /* Total header height */
  --hero-headline-min-height: 450px; /* Desktop hero section minimum height */
  --panda-reviews-height: 470px; /* Desktop panda reviews section height */
  --scale-factor: 1; /* Mobile scale factor (no zoom) */
  
  --typewriter-headline-width-desktop: 1050px; /* ADJUST THIS for desktop width */
  --typewriter-headline-width-mobile: 80vw;  /* ADJUST THIS for mobile width */
  
  /* Difficulty Level Colors - Separate from main theme */
  --panda-difficulty-1: #10b981;  /* Green */
  --panda-difficulty-2: #059669;  /* Green */
  --panda-difficulty-3: #047857;  /* Green */
  --panda-difficulty-4: #f59e0b;  /* Yellow */
  --panda-difficulty-5: #d97706;  /* Yellow */
  --panda-difficulty-6: #b45309;  /* Yellow */
  --panda-difficulty-7: #ea580c;  /* Orange */
  --panda-difficulty-8: #dc2626;  /* Orange */
  --panda-difficulty-9: #b91c1c;  /* Red */
  --panda-difficulty-10: #991b1b; /* Red */
  
  /* Proficiency Level Colors - Red to Green gradient (0 = red, 9 = green) */
  --panda-proficiency-0: #dc2626;  /* Red - No knowledge */
  --panda-proficiency-1: #ea580c;  /* Red-Orange */
  --panda-proficiency-2: #f59e0b;  /* Orange */
  --panda-proficiency-3: #d97706;  /* Orange-Yellow */
  --panda-proficiency-4: #eab308;  /* Yellow */
  --panda-proficiency-5: #ca8a04;  /* Yellow-Green */
  --panda-proficiency-6: #65a30d;  /* Yellow-Green */
  --panda-proficiency-7: #16a34a;  /* Green */
  --panda-proficiency-8: #15803d;  /* Green */
  --panda-proficiency-9: #166534;  /* Dark Green - Mastered */
  
  /* Proficiency Change Button Colors */
  --panda-change-minus-3: #7f1d1d;  /* Dark Red - Huh?? */
  --panda-change-minus-2: #dc2626;  /* Red - Nope */
  --panda-change-minus-1: #fb923c;  /* Orange - Almost */
  --panda-change-plus-1: #a3e635;   /* Lime - Barely */
  --panda-change-plus-2: #22c55e;   /* Green - Got it */
  --panda-change-plus-3: #166534;   /* Dark Green - Easy */
  --panda-change-neutral: #fbbf24;  /* Yellow - Meh */
}

/* Desktop header height overrides */
@media (min-width: 769px) {
  :root {
    --titlebar-nav-height: 78px; /* Desktop titlebar height */
    --breadcrumb-nav-height: 40px; /* Desktop breadcrumb height */
    --scale-factor: 0.8; /* Desktop scale factor (80% zoom) */
  }
}

/* Header styling with CSS variables */
.titlebar-nav {
  height: var(--titlebar-nav-height);
  display: flex;
  align-items: center;
}

.titlebar-nav .container {
  height: 100%;
  display: flex;
  align-items: center;
}

.titlebar-nav img {
  max-height: calc(var(--titlebar-nav-height) - 16px); /* Leave some padding */
}

/* Main content and common layout classes */
.main-content {
  padding-top: var(--header-height);
}

.page-container {
  min-height: calc(100vh - var(--header-height));
}

.notification-positioned {
  top: calc(var(--header-height) + 0.5rem);
}

.mobile-menu-positioned {
  top: calc(var(--titlebar-nav-height) + 0.25rem);
}

/* Hero headline section - Mobile: full screen minus header, Desktop: fixed height */
.hero-headline-section {
  height: calc(100vh - var(--header-height)); /* Mobile: full screen minus full header */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: Calculated height for hero section with minimum */
@media (min-width: 1024px) {
  .hero-headline-section {
    min-height: var(--hero-headline-min-height);
    height: calc(100vh / var(--scale-factor) - var(--header-height) - var(--panda-reviews-height));
  }
}

/* Panda Reviews section - responsive height */
.panda-hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop: Fixed height for Panda Reviews section */
@media (min-width: 1024px) {
  .panda-hero-section {
    height: var(--panda-reviews-height);
  }
  
  /* Remove padding on desktop since height is controlled */
  .panda-hero-section .relative {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Game Buttons - Minimal Flat Design with Thin Borders */
.game-button-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--panda-red);
  color: white;
  font-weight: bold;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
}

.game-button-primary:hover {
  background-color: var(--panda-orange);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  text-decoration: none;
}

.game-button-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

.game-button-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--panda-red);
  color: white;
  font-weight: bold;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
}

.game-button-secondary:hover {
  background-color: var(--panda-orange);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  text-decoration: none;
}

.game-button-secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

.game-button-tertiary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--panda-red);
  color: white;
  font-weight: bold;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
}

.game-button-tertiary:hover {
  background-color: var(--panda-orange);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  text-decoration: none;
}

.game-button-tertiary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

.game-button-success {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: black;
  font-weight: bold;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
}

.game-button-success:hover {
  background-color: var(--panda-orange);
  color: white;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  text-decoration: none;
}

.game-button-success:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

.game-button-warning {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--panda-warning);
  color: white;
  font-weight: bold;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
}

.game-button-warning:hover {
  background-color: var(--panda-orange);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  text-decoration: none;
}

.game-button-warning:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

.game-button-danger {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #dc2626;
  color: white;
  font-weight: bold;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
}

.game-button-danger:hover {
  background-color: var(--panda-orange);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  text-decoration: none;
}

.game-button-danger:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

/* Outline buttons for less emphasis */
.game-button-outline {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: var(--panda-dark);
  font-weight: 600;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
}

.game-button-outline:hover {
  background-color: var(--panda-orange);
  color: white;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  text-decoration: none;
}

.game-button-outline:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

/* Game Inputs */
.game-input {
  @apply px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-green-500 focus:ring-2 focus:ring-green-200 transition-all duration-200 bg-gray-50 focus:bg-white font-medium placeholder-gray-400;
}

.game-input:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
}

/* Game Cards */
.game-card {
  @apply bg-white rounded-2xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transform hover:scale-105 transition-all duration-200;
}

.game-card-interactive {
  @apply bg-white rounded-2xl shadow-lg border-2 border-gray-200 p-6 hover:shadow-xl hover:border-green-300 transform hover:scale-105 transition-all duration-200 cursor-pointer;
}

.game-card-interactive:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Game Progress Bars */
.game-progress-bar {
  @apply w-full bg-gray-200 rounded-full h-3 overflow-hidden;
}

.game-progress-fill {
  @apply h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full transition-all duration-500 shadow-sm;
}

/* Game Badges */
.game-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-purple-100 to-purple-200 text-purple-800 border border-purple-300;
}

.game-badge-success {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-green-100 to-green-200 text-green-800 border border-green-300;
}

.game-badge-warning {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-800 border border-yellow-300;
}

/* Game Links */
.game-link {
  @apply text-blue-600 hover:text-blue-800 font-medium underline decoration-2 decoration-blue-200 hover:decoration-blue-400 transition-all duration-200;
}

/* Game Checkboxes */
.game-checkbox {
  @apply w-5 h-5 text-green-600 bg-gray-100 border-2 border-gray-300 rounded focus:ring-green-500 focus:ring-2 hover:bg-green-50 transition-all duration-200;
}

/* Flashcard specific styles - Redesigned to match other cards */
.flashcard-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 380px;
  margin: 0 auto;
  perspective: 1000px;
  cursor: pointer;
}

/* Prevent overflow on mobile during swipe */
#flashcard-container {
  position: relative;
  /* Allow overflow for 3D transforms and dragging */
  overflow: visible;
}

/* Ensure body doesn't expand during drag on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    position: relative;
  }
  
  /* Prevent pull-to-refresh and overscroll */
  html, body {
    overscroll-behavior: none;
  }
  
  #flashcard-container {
    /* Prevent native touch actions but allow custom dragging */
    touch-action: pan-y pinch-zoom;
  }
}

.flashcard {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--panda-warm-white);
  border-radius: 1rem;
  border: 4px solid var(--panda-warm-border);
  padding: 2rem;
  box-shadow: 6px 6px 0px var(--panda-warm-border);
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.flashcard:hover {
  box-shadow: 8px 8px 0px var(--panda-warm-border);
}

.flashcard-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.flashcard-back {
  z-index: 1;
  transform: rotateY(180deg);
}

.flashcard-wrapper.flipped .flashcard-front {
  transform: rotateY(-180deg);
}

.flashcard-wrapper.flipped .flashcard-back {
  transform: rotateY(0deg);
}

/* Flashcard mascot corner - properly hidden during flip */
.flashcard-mascot {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
}

/* Hide front mascot when card is flipped */
.flashcard-wrapper.flipped .flashcard-front .flashcard-mascot {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) rotate(-10deg);
}

/* Hide back mascot when card is not flipped */
.flashcard-wrapper:not(.flipped) .flashcard-back .flashcard-mascot {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) rotate(10deg);
}

/* Show back mascot when card is flipped */
.flashcard-wrapper.flipped .flashcard-back .flashcard-mascot {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0deg);
}

/* Hover effects only for visible mascots */
.flashcard-wrapper:not(.flipped) .flashcard-front:hover .flashcard-mascot {
  transform: translateZ(0) scale(1.1) rotate(5deg);
}

.flashcard-wrapper.flipped .flashcard-back:hover .flashcard-mascot {
  transform: translateZ(0) scale(1.1) rotate(-5deg);
}

/* Flashcard badges and indicators - equidistant spacing */
.flashcard-direction {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: var(--panda-teal);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

.flashcard-proficiency {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

.flashcard-difficulty {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid var(--panda-warm-border);
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

/* Fix mirroring for center proficiency badge on back card */
.flashcard-back .flashcard-proficiency {
  transform: translateX(-50%) scaleX(-1);
}

/* Flashcard content areas */
.flashcard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem 1rem;
}

.flashcard-hint {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--panda-shadow);
  margin-bottom: 1rem;
}

.flashcard-hint-small {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--panda-shadow);
  margin-bottom: 0.5rem;
}

.flashcard-word {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--panda-dark);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  word-break: break-word;
}

.flashcard-word-small {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--panda-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.flashcard-answer {
  font-size: 2rem;
  font-weight: bold;
  color: var(--panda-red);
  margin-bottom: 1rem;
  line-height: 1.2;
  word-break: break-word;
}

.flashcard-tap-hint {
  font-size: 1rem;
  font-weight: 600;
  color: var(--panda-red);
  margin-top: auto;
}


/* Back side specific layouts */
.flashcard-question-reminder {
  background-color: rgba(0,0,0,0.05);
  padding: 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  border: 2px solid rgba(0,0,0,0.1);
}

.flashcard-answer-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* Difficulty indicators */
.difficulty-indicator {
  @apply inline-flex items-center justify-center rounded-full text-xs font-semibold;
  display: inline-block;
  min-width: 35px !important; /* Fixed width to ensure "10" aligns with single digits */
}

.difficulty-1, .difficulty-2, .difficulty-3 {
  @apply bg-green-100 text-green-800 border border-green-300;
}

.difficulty-4, .difficulty-5, .difficulty-6 {
  @apply bg-yellow-100 text-yellow-800 border border-yellow-300;
}

.difficulty-7, .difficulty-8 {
  @apply bg-orange-100 text-orange-800 border border-orange-300;
}

.difficulty-9, .difficulty-10 {
  @apply bg-red-100 text-red-800 border border-red-300;
}

/* Proficiency indicators - Red to Green gradient (0 = red, 9 = green) */
.proficiency-indicator {
  @apply inline-flex items-center justify-center rounded-full text-xs font-semibold;
  min-width: 35px !important; /* Fixed width to ensure consistent alignment */
}

.proficiency-0, .proficiency-1 {
  @apply bg-red-100 text-red-800 border border-red-300;
}

.proficiency-2, .proficiency-3 {
  @apply bg-orange-100 text-orange-800 border border-orange-300;
}

.proficiency-4, .proficiency-5, .proficiency-6 {
  @apply bg-yellow-100 text-yellow-800 border border-yellow-300;
}

.proficiency-7, .proficiency-8, .proficiency-9 {
  @apply bg-green-100 text-green-800 border border-green-300;
}

/* Progress bar backgrounds - Individual difficulty colors */
.difficulty-1 {
  background-color: var(--panda-difficulty-1) !important;
}

.difficulty-2 {
  background-color: var(--panda-difficulty-2) !important;
}

.difficulty-3 {
  background-color: var(--panda-difficulty-3) !important;
}

.difficulty-4 {
  background-color: var(--panda-difficulty-4) !important;
}

.difficulty-5 {
  background-color: var(--panda-difficulty-5) !important;
}

.difficulty-6 {
  background-color: var(--panda-difficulty-6) !important;
}

.difficulty-7 {
  background-color: var(--panda-difficulty-7) !important;
}

.difficulty-8 {
  background-color: var(--panda-difficulty-8) !important;
}

.difficulty-9 {
  background-color: var(--panda-difficulty-9) !important;
}

.difficulty-10 {
  background-color: var(--panda-difficulty-10) !important;
}

/* Progress bar backgrounds - Individual proficiency colors (Red to Green) */
.proficiency-0 {
  background-color: var(--panda-proficiency-0) !important;
}

.proficiency-1 {
  background-color: var(--panda-proficiency-1) !important;
}

.proficiency-2 {
  background-color: var(--panda-proficiency-2) !important;
}

.proficiency-3 {
  background-color: var(--panda-proficiency-3) !important;
}

.proficiency-4 {
  background-color: var(--panda-proficiency-4) !important;
}

.proficiency-5 {
  background-color: var(--panda-proficiency-5) !important;
}

.proficiency-6 {
  background-color: var(--panda-proficiency-6) !important;
}

.proficiency-7 {
  background-color: var(--panda-proficiency-7) !important;
}

.proficiency-8 {
  background-color: var(--panda-proficiency-8) !important;
}

.proficiency-9 {
  background-color: var(--panda-proficiency-9) !important;
}

/* Animated mascot */
.mascot {
  @apply w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-full flex items-center justify-center shadow-lg transform transition-all duration-300;
}

.mascot:hover {
  transform: scale(1.1) rotate(5deg);
}

.mascot-happy {
  animation: bounce 1s ease-out 1;
}

.mascot-happy:hover {
  animation: bounce 0.6s ease-out 1;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-15px,0);
  }
  70% {
    transform: translate3d(0,-8px,0);
  }
  90% {
    transform: translate3d(0,-2px,0);
  }
}

/* Response button animations */
.response-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border) !important;
}

.response-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border) !important;
}

/* Fade transition for cards */
.card-fade-out {
  animation: fadeOut 0.6s ease-out;
}

.card-fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Response buttons animations */
.buttons-slide-in {
  animation: slideInFromTop 0.8s ease-out;
}

.buttons-fade-out {
  animation: buttonsFadeOut 0.4s ease-out forwards;
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  60% {
    opacity: 0.7;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes buttonsFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Legacy animations - keeping for backwards compatibility */
.success-pop {
  animation: fadeOut 0.6s ease-out;
}

.error-shake {
  animation: fadeOut 0.6s ease-out;
}

/* Proficiency update shake animation */
.proficiency-update-shake {
  animation: proficiencyShake 0.6s ease-out;
}

@keyframes proficiencyShake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px);
  }
  40% {
    transform: translateX(3px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

/* Loading states */
.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Game-like navigation */
.game-nav {
  @apply bg-white shadow-sm border-b-2 border-gray-100;
}

.game-nav-item {
  @apply px-4 py-2 text-gray-700 hover:text-green-600 font-medium transition-all duration-200 border-b-2 border-transparent hover:border-green-300;
}

.game-nav-item.active {
  @apply text-green-600 border-green-500;
}

/* Episode cards */
.episode-card {
  @apply bg-white rounded-2xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transform hover:scale-105 transition-all duration-200 cursor-pointer;
}

.episode-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Dual Range Slider */
.range-slider-container {
  position: relative;
}

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 5px;
  background: transparent;
  outline: none;
  position: absolute;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--panda-red);
  border: 2px solid #000000;
  cursor: pointer;
  pointer-events: all;
  box-shadow: none;
  z-index: 3;
  position: relative;
}

.range-slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--panda-red);
  border: 2px solid #000000;
  cursor: pointer;
  pointer-events: all;
  box-shadow: none;
  z-index: 3;
  position: relative;
  -moz-appearance: none;
}

.range-track {
  height: 8px;
  background: #d1d5db;
  border-radius: 5px;
  border: 2px solid var(--panda-warm-border);
  position: relative;
  margin: 8px 0;
  z-index: 1;
}

/* Touch support for mobile devices */
@media (pointer: coarse) {
  .range-slider::-webkit-slider-thumb {
    height: 28px;
    width: 28px;
    border: 2px solid #000000;
    box-shadow: none;
  }
  
  .range-slider::-moz-range-thumb {
    height: 28px;
    width: 28px;
    border: 2px solid #000000;
    box-shadow: none;
  }
  
  .range-track {
    height: 12px;
    margin: 12px 0;
  }
}

/* Mobile Hamburger Menu */
.hamburger-icon {
  width: 20px;
  height: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Ensure mobile menu is hidden on desktop */
@media (min-width: 768px) {
  .mobile-menu-dropdown {
    display: none !important;
  }
}

.hamburger-line {
  width: 100%;
  height: 2px;
  background-color: var(--panda-dark);
  border-radius: 1px;
  transition: all 0.3s ease;
}

.hamburger-icon.active .hamburger-line:nth-child(1) {
  transform: translate(0px, 7px) rotate(45deg);
}

.hamburger-icon.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-icon.active .hamburger-line:nth-child(3) {
  transform: translate(0px, -7px) rotate(-45deg);
}

.mobile-menu-dropdown {
  animation: slideDown 0.3s ease-out;
}

.mobile-menu-dropdown.hiding {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Responsive design helpers */
@media (max-width: 640px) {
  .game-button-primary,
  .game-button-secondary,
  .game-button-tertiary,
  .game-button-outline,
  .game-button-success,
  .game-button-warning,
  .game-button-danger {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    min-height: 44px; /* iOS recommended minimum */
  }
  
  .flashcard-wrapper {
    height: 320px;
  }
  
  .flashcard {
    height: 320px;
    padding: 1.5rem;
  }
  
  .flashcard-word {
    font-size: 2rem;
  }
  
  .flashcard-answer {
    font-size: 1.5rem;
  }
  
  .flashcard-word-small {
    font-size: 1.125rem;
  }
  
  .flashcard-mascot {
    bottom: 0.75rem;
    right: 0.75rem;
  }
  
  .flashcard-mascot img {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .flashcard-difficulty,
  .flashcard-direction {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* Prevent mascot cutoff */
  .mascot-happy {
    margin-top: 1rem;
  }
  
  /* Ensure proper spacing for mobile */
  .max-w-6xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Prevent horizontal scroll */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Authentication Form Styles */
.auth-input {
  /* Remove default focus styles */
  outline: none !important;
  
  /* Custom focus styles - just change border color, keep shadow */
  &:focus {
    border-color: var(--panda-orange) !important;
    box-shadow: 3px 3px 0px var(--panda-warm-border) !important;
    background-color: var(--panda-white) !important;
  }
  
  /* Remove any ring styles */
  &:focus-visible {
    outline: none !important;
    border-color: var(--panda-orange) !important;
    box-shadow: 3px 3px 0px var(--panda-warm-border) !important;
  }
}

/* Icon styles */
.auth-icon {
  color: var(--panda-dark) !important;
}

/* Label spacing */
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  margin-bottom: 0.5rem;
  display: block;
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  position: relative;
  width: 100%;
  background-color: var(--panda-white);
  border-bottom: 3px solid var(--panda-warm-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: var(--breadcrumb-nav-height);
  display: flex;
  align-items: center;
}

.breadcrumb-nav:hover {
  height: calc(var(--breadcrumb-nav-height) + 10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.breadcrumb-container {
  width: 100%;
  padding: 0 1.5rem;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.breadcrumb-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.breadcrumb-list {
  white-space: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-link {
  transition: all 0.2s ease;
  font-weight: 600;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  display: inline-block;
}

.breadcrumb-link:hover {
  background-color: var(--panda-orange);
  color: white !important;
  text-decoration: none;
}

.breadcrumb-current {
  color: var(--panda-dark);
  font-weight: 700;
  padding: 0.25rem 0.5rem;
}

.breadcrumb-separator {
  color: var(--panda-shadow);
  flex-shrink: 0;
  margin: 0 0.5rem;
}

/* Mobile breadcrumb adjustments */
@media (max-width: 768px) {
  .breadcrumb-nav {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s ease;
  }
  
  .breadcrumb-nav:hover {
    height: var(--breadcrumb-nav-height); /* No hover effect on mobile */
  }
  
  .breadcrumb-container {
    padding: 0 0.25rem;
  }
  
  .breadcrumb-list {
    font-size: 0.8rem;
    gap: 0;
  }
  
  .breadcrumb-link {
    padding: 0.125rem 0.125rem;
    font-size: 0.8rem;
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .breadcrumb-current {
    padding: 0.125rem 0.125rem;
    font-size: 0.8rem;
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .breadcrumb-separator {
    margin: 0 0.0625rem;
  }
  
  .breadcrumb-separator svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* Example Icon Styles */
.example-icon-front,
.example-icon-back {
  z-index: 45; /* Above card content but below overlay */
  transition: all 0.3s ease;
  /* Create new stacking context to isolate from card 3D transforms */
  transform-style: flat;
  will-change: transform;
  /* Ensure icon stays in 2D space separate from card's 3D context */
  transform: translateZ(0);
  opacity: 1;
  visibility: visible;
}

.example-icon-front:hover,
.example-icon-back:hover {
  /* Use composite transform to avoid conflicts */
  transform: translateZ(0) scale(1.1);
  box-shadow: 3px 3px 0px var(--panda-warm-border);
}

/* Hide front example icon when card is flipped */
.flashcard-wrapper.flipped .flashcard-front .example-icon-front {
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0) scale(0.8) rotate(-10deg);
}

/* Hide back example icon when card is not flipped */
.flashcard-wrapper:not(.flipped) .flashcard-back .example-icon-back {
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0) scale(0.8) rotate(10deg);
}

/* Show back example icon when card is flipped */
.flashcard-wrapper.flipped .flashcard-back .example-icon-back {
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
}

/* Hover effects only for visible example icons */
.flashcard-wrapper:not(.flipped) .flashcard-front:hover .example-icon-front {
  transform: translateZ(0) scale(1.1);
}

.flashcard-wrapper.flipped .flashcard-back:hover .example-icon-back {
  transform: translateZ(0) scale(1.1);
}

/* Ensure example icons don't conflict with mascot positioning */
.flashcard-mascot {
  bottom: 1rem;
  right: 1rem;
  z-index: 40;
  /* Apply same isolation to mascot */
  transform-style: flat;
  will-change: transform;
  transform: translateZ(0);
}

/* Example tooltip styles for desktop */
.example-tooltip {
  font-family: inherit;
  white-space: pre-line;
}

/* Audio Icon Styles - Same behavior as example icons */
.audio-icon-front,
.audio-icon-back {
  z-index: 45; /* Above card content but below overlay */
  transition: all 0.3s ease;
  /* Create new stacking context to isolate from card 3D transforms */
  transform-style: flat;
  will-change: transform;
  /* Ensure icon stays in 2D space separate from card's 3D context */
  transform: translateZ(0);
  opacity: 1;
  visibility: visible;
}

.audio-icon-front:hover,
.audio-icon-back:hover {
  /* Use composite transform to avoid conflicts */
  transform: translateZ(0) scale(1.1);
  box-shadow: 3px 3px 0px var(--panda-warm-border);
}

/* Hide front audio icon when card is flipped */
.flashcard-wrapper.flipped .flashcard-front .audio-icon-front {
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0) scale(0.8) rotate(-10deg);
}

/* Hide back audio icon when card is not flipped */
.flashcard-wrapper:not(.flipped) .flashcard-back .audio-icon-back {
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0) scale(0.8) rotate(10deg);
}

/* Show back audio icon when card is flipped */
.flashcard-wrapper.flipped .flashcard-back .audio-icon-back {
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
}

/* Hover effects only for visible audio icons */
.flashcard-wrapper:not(.flipped) .flashcard-front:hover .audio-icon-front {
  transform: translateZ(0) scale(1.1);
}

.flashcard-wrapper.flipped .flashcard-back:hover .audio-icon-back {
  transform: translateZ(0) scale(1.1);
}

/* Mobile adjustments for example and audio icons */
@media (max-width: 768px) {
  .example-icon-front,
  .example-icon-back,
  .audio-icon-front,
  .audio-icon-back {
    bottom: 0.75rem;
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
  }
  
  /* Ensure icon clicks don't trigger card drag on mobile */
  .example-icon-back,
  .audio-icon-back {
    z-index: 60; /* Higher than dragging card */
    touch-action: manipulation;
  }
}

/* Flashcard Navigation System Styles */

/* Prevent horizontal scroll during drag */
body.dragging-card {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* Mobile Swipe Bins */
.swipe-bin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  border: 3px solid black;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
  border-radius: 0.75rem;
  z-index: 30; /* Below dragging card but above other elements */
  pointer-events: none; /* Prevent bins from blocking card interaction */
}

.swipe-bin.visible {
  opacity: 1;
  pointer-events: auto; /* Allow interaction when visible */
}

.swipe-bin.active {
  transform: scale(1.2);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
}

/* Left side bins */
.swipe-bin-left {
  position: fixed;
  left: 0.5rem;
  bottom: 20%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}

.swipe-bin-left .swipe-bin {
  position: relative;
  width: 60px;
  height: 90px;
}

/* Right side bins */
.swipe-bin-right {
  position: fixed;
  right: 0.5rem;
  bottom: 20%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}

.swipe-bin-right .swipe-bin {
  position: relative;
  width: 60px;
  height: 90px;
}

/* Bottom bins */
.swipe-bin-bottom {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 10;
  pointer-events: none;
}

.swipe-bin-bottom .swipe-bin {
  position: relative;
  width: 120px;
  height: 70px;
}

/* Card dragging state */
.flashcard-wrapper.dragging {
  will-change: transform;
  transform: translateZ(0); /* Create GPU layer */
  z-index: 50; /* Higher than bins */
}

.flashcard-wrapper.fading-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Mobile-specific adjustments for bins */
@media (max-width: 768px) {
  .swipe-bin {
    font-size: 1.25rem;
  }
  
  .swipe-bin-left .swipe-bin,
  .swipe-bin-right .swipe-bin {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Thicker borders for mobile buttons ONLY */
  .game-button-primary,
  .game-button-secondary,
  .game-button-tertiary,
  .game-button-outline,
  .game-button-success,
  .game-button-warning,
  .game-button-danger {
    border-width: 3px; /* Increase from 2px */
    box-shadow: 5px 5px 0px var(--panda-warm-border); /* Increase shadow */
  }
  
  .game-button-primary:hover,
  .game-button-secondary:hover,
  .game-button-tertiary:hover,
  .game-button-outline:hover,
  .game-button-success:hover,
  .game-button-warning:hover,
  .game-button-danger:hover {
    box-shadow: 7px 7px 0px var(--panda-warm-border); /* Increase hover shadow */
  }
}

/* Desktop Button Styles */
.desktop-buttons-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  transition: opacity 0.3s ease;
}

.desktop-buttons-left,
.desktop-buttons-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: -400px; /* Align with card top */
  height: 400px; /* Match card height */
  justify-content: space-between;
}

.desktop-buttons-left {
  left: -140px;
}

.desktop-buttons-right {
  right: -140px;
}

.desktop-buttons-bottom {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}

.desktop-response-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  color: white;
  font-weight: bold;
  border-radius: 0.75rem;
  border: 3px solid black;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 4px 4px 0px var(--panda-warm-border);
  cursor: pointer;
  min-width: 120px;
}

.desktop-buttons-left .desktop-response-button,
.desktop-buttons-right .desktop-response-button {
  flex: 1;
  width: 120px;
}

.desktop-buttons-bottom .desktop-response-button {
  min-width: 140px;
  height: 60px;
}

.desktop-response-button:hover {
  background-color: var(--panda-orange) !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--panda-warm-border);
}

.desktop-response-button:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--panda-warm-border);
}

/* Simple Desktop Zoom - Clean and Simple */
@media (min-width: 769px) {
  body {
    zoom: var(--scale-factor);
  }
}

/* Base dialog styling for all screen sizes */
dialog {
  margin: auto; /* Use browser's native centering */
  width: calc(100% - 2rem); /* Mobile: full width minus 1rem margin on each side */
  max-width: 28rem; /* Desktop: max-width of 28rem (448px, same as max-w-md) */
}

/* Dialog backdrop styling for all screen sizes */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

  
  /* Compensate for thin borders by making them thicker on desktop */
  .game-button-primary,
  .game-button-secondary,
  .game-button-tertiary,
  .game-button-outline,
  .game-button-success,
  .game-button-warning,
  .game-button-danger,
  .desktop-response-button {
    border-width: 3px; /* Increase from 2px */
    box-shadow: 5px 5px 0px var(--panda-warm-border); /* Increase shadow */
  }
  
  .game-button-primary:hover,
  .game-button-secondary:hover,
  .game-button-tertiary:hover,
  .game-button-outline:hover,
  .game-button-success:hover,
  .game-button-warning:hover,
  .game-button-danger:hover,
  .desktop-response-button:hover {
    box-shadow: 7px 7px 0px var(--panda-warm-border); /* Increase hover shadow */
  }
  
  /* Ensure body doesn't create horizontal scrollbars */
  html {
    overflow-x: hidden;
  }

/* Typewriter Effect Animation */

/* Target the specific h1 with typewriter effect */
h1.typewriter-headline {
  width: var(--typewriter-headline-width-desktop, 800px) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* Desktop: spans inline */
.typewriter-first-line,
.typewriter-second-line {
  display: inline;
  font-weight: inherit; /* Ensure spans inherit bold from h1 */
}

.typewriter-first-line::after {
  content: ' ';
}

.typewriter-text::after {
  content: '|';
  color: var(--panda-red);
  animation: typewriter-blink 1s infinite;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  h1.typewriter-headline {
    width: var(--typewriter-headline-width-mobile, 80vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Mobile: first line centered, second line left aligned */
  .typewriter-first-line {
    display: block;
    text-align: center;
    font-weight: inherit; /* Keep bold on mobile */
  }
  
  .typewriter-first-line::after {
    content: '';
  }
  
  .typewriter-second-line {
    display: block;
    text-align: left;
    font-weight: inherit; /* Keep bold on mobile */
  }
}

@keyframes typewriter-blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Keep cursor always blinking - remove the typing/deleting overrides for consistent blinking */