body {
      box-sizing: border-box;
    }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

    * {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    .glass-card {
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      background: rgba(255, 255, 255, 0.75);
      border-radius: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.35);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08), 
                  0 8px 24px rgba(0, 0, 0, 0.04),
                  inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    @media (prefers-color-scheme: dark) {
      .glass-card {
        background: rgba(19, 25, 41, 0.75);
        border: 1px solid rgba(100, 120, 160, 0.25);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 
                    0 8px 24px rgba(0, 0, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
    }

    .vocab-button {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 1.25rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      background: rgba(31, 41, 51, 0.85);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                  0 1px 3px rgba(0, 0, 0, 0.08),
                  inset 0 1px 0 rgba(255, 255, 255, 0.15);
      position: relative;
      overflow: hidden;
    }

    @media (prefers-color-scheme: dark) {
      .vocab-button {
        background: rgba(31, 41, 55, 0.85);
        border: 1px solid rgba(100, 120, 160, 0.25);
        color: #F9FAFB;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                    0 1px 3px rgba(0, 0, 0, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
    }

    .vocab-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .vocab-button:hover:not(:disabled)::before {
      opacity: 1;
    }

    .vocab-button:hover:not(:disabled) {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15),
                  0 4px 8px rgba(0, 0, 0, 0.1),
                  inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .vocab-button:active:not(:disabled) {
      transform: translateY(-1px) scale(0.98);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                  0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .vocab-button.correct {
      background: #10b981 !important;
      color: white !important;
      border-color: #059669 !important;
      pointer-events: none;
    }

    .vocab-button.incorrect {
      animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
      text-decoration: line-through;
      opacity: 0.5;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }

    .gap-slot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 5.5rem;
      min-height: 2.75rem;
      padding: 0.625rem 1.25rem;
      border-radius: 0.75rem;
      border: 2px solid rgba(31, 41, 51, 0.2);
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 500;
      margin: 0 0.375rem;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    @media (prefers-color-scheme: dark) {
      .gap-slot {
        border: 2px solid rgba(100, 140, 180, 0.4);
        background: rgba(20, 30, 50, 0.5);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
      }
    }

    .gap-slot.filled {
      border-style: solid;
      border-color: rgba(16, 185, 129, 0.5);
      background: rgba(209, 250, 229, 0.85);
      color: #065f46;
      animation: fillGap 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15),
                  inset 0 1px 0 rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
    }

    @media (prefers-color-scheme: dark) {
      .gap-slot.filled {
        border-color: rgba(16, 185, 129, 0.6);
        background: rgba(6, 95, 70, 0.3);
        color: #D1FAE5;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
    }

    @keyframes fillGap {
      0% {
        opacity: 0;
        transform: scale(0.9);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .progress-bar {
      height: 0.625rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.06);
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .progress-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      background: linear-gradient(90deg, #fbbf24, #f59e0b);
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3),
                  inset 0 1px 0 rgba(255, 255, 255, 0.3);
      position: relative;
    }

    .progress-fill::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
      animation: shimmer 2s infinite;
    }

    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    .next-button, .restart-button {
      animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
                  0 2px 6px rgba(0, 0, 0, 0.1),
                  inset 0 1px 0 rgba(255, 255, 255, 0.3);
      position: relative;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .next-button::before, .restart-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .next-button:hover::before, .restart-button:hover::before {
      opacity: 1;
    }

    .next-button:hover, .restart-button:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2),
                  0 4px 8px rgba(0, 0, 0, 0.12),
                  inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .next-button:active, .restart-button:active {
      transform: translateY(0) scale(0.99);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15),
                  0 1px 3px rgba(0, 0, 0, 0.1);
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .success-screen {
      animation: fadeIn 0.6s ease;
    }

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

    .round-transition {
      animation: fadeSlide 0.4s ease;
    }

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

    .vocab-button:focus-visible,
    .next-button:focus-visible,
    .restart-button:focus-visible {
      outline: 2px solid #f59e0b;
      outline-offset: 2px;
    }