:root {
      --primary-color: #4caf50;
      --secondary-color: #ff9800;
      --error-color: #f44336;
      --background-color: #f0f8ff;
      --card-background: #ffffff;
      --text-main: #333333;
      --math-tag: #e3f2fd;
      --math-text: #1e88e5;
      --spelling-tag: #fce4ec;
      --spelling-text: #d81b60;
      --audio-color: #00bcd4;
    }

    body {
      font-family: 'Quicksand', sans-serif;
      background-color: var(--background-color);
      color: var(--text-main);
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      box-sizing: border-box;
    }

    .container {
      width: 100%;
      max-width: 500px;
    }

    .header-banner {
      background-color: var(--secondary-color);
      color: white;
      text-align: center;
      padding: 15px;
      border-radius: 16px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 24px;
    }

    .header-banner h1 {
      font-family: 'Fredoka One', cursive;
      margin: 0;
      font-size: 1.8rem;
    }

    .card {
      background: var(--card-background);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      margin-bottom: 20px;
    }

    .menu-title {
      font-family: 'Fredoka One', cursive;
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    .btn-difficulty {
      width: 100%;
      background-color: white;
      border: 3px solid #e0e0e0;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 12px;
      font-family: 'Quicksand', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .btn-difficulty[data-age="3-5"] {
      border-color: #2196f3;
      color: #2196f3;
    }

    .btn-difficulty[data-age="6-7"] {
      border-color: #4caf50;
      color: #4caf50;
    }

    .btn-difficulty[data-age="8-9"] {
      border-color: #9c27b0;
      color: #9c27b0;
    }

    .btn-difficulty:hover {
      transform: scale(1.02);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .progress-container {
      margin-bottom: 20px;
    }

    .progress-text {
      font-weight: 700;
      margin-bottom: 8px;
    }

    .progress-bar-bg {
      background-color: #e0e0e0;
      border-radius: 8px;
      height: 12px;
      width: 100%;
      overflow: hidden;
    }

    .progress-bar-fill {
      background-color: var(--primary-color);
      height: 100%;
      width: 0%;
      transition: width 0.3s ease;
    }

    .card-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .tag {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.85rem;
    }

    .tag.math {
      background-color: var(--math-tag);
      color: var(--math-text);
    }

    .tag.spelling {
      background-color: var(--spelling-tag);
      color: var(--spelling-text);
    }

    .tag.animal {
      background-color: #e8f5e9;
      color: #2e7d32;
    }

    .tag.general {
      background-color: #ede7f6;
      color: #651fff;
    }

    .btn-speak {
      background-color: var(--audio-color);
      color: white;
      border: none;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      transition: transform 0.2s;
    }

    .btn-speak:hover {
      transform: scale(1.1);
    }

    .btn-speak:active {
      transform: scale(0.95);
    }

    .question-text {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 24px;
    }

    .options-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .btn-option {
      background-color: transparent;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      padding: 16px;
      font-family: 'Quicksand', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: left;
    }

    .btn-option:hover:not(:disabled) {
      border-color: var(--primary-color);
      background-color: rgba(76, 175, 80, 0.04);
    }

    .btn-option.correct {
      background-color: var(--primary-color) !important;
      border-color: var(--primary-color) !important;
      color: white;
    }

    .btn-option.wrong {
      background-color: var(--error-color) !important;
      border-color: var(--error-color) !important;
      color: white;
    }

    .feedback-text {
      text-align: center;
      font-size: 1.3rem;
      font-weight: 700;
      margin-top: 16px;
      min-height: 30px;
    }

    .feedback-text.correct {
      color: var(--primary-color);
    }

    .feedback-text.wrong {
      color: var(--error-color);
    }

    .score-screen {
      text-align: center;
    }

    .score-screen .material-icons {
      font-size: 80px;
      color: var(--primary-color);
      margin-bottom: 12px;
    }

    .score-screen h2 {
      font-family: 'Fredoka One', cursive;
      margin: 0 0 8px 0;
    }

    .btn-restart {
      background-color: var(--secondary-color);
      color: white;
      border: none;
      border-radius: 24px;
      padding: 12px 32px;
      font-family: 'Quicksand', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
    }

    .hidden {
      display: none !important;
    }