/* 平板端适配 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    font-size: 16px;
  }

  .screen {
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .feature-card {
    padding: 28px 20px;
  }

  .feature-card .icon {
    font-size: 2.8em;
  }

  .char-display {
    font-size: 5em;
    max-width: 500px;
    margin: 0 auto 20px;
  }

  .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 500px;
    margin: 0 auto;
  }

  .option-btn {
    padding: 18px;
    font-size: 1.1em;
  }
}

/* 桌面端 (大于 1024px) */
@media (min-width: 1024px) {
  :root {
    font-size: 16px;
  }

  .screen {
    padding: 32px;
    max-width: 960px;
    margin: 0 auto;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .feature-card {
    padding: 32px 24px;
  }

  .feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-hover);
  }

  .feature-card .icon {
    font-size: 3em;
  }

  .char-display {
    font-size: 6em;
    max-width: 600px;
    margin: 0 auto 20px;
  }

  .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
  }

  .option-btn {
    padding: 20px;
    font-size: 1.2em;
  }

  .option-btn:hover:not(:disabled) {
    transform: translateY(-4px);
  }

  .card:hover {
    transform: scale(1.02);
  }

  .level-card:hover {
    transform: translateY(-4px);
  }
}