/* 
 * responsive.css - 响应式设计
 * 包含：不同屏幕尺寸的适配样式
 */

/* ========== 平板设备 (768px) ========== */
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }
  
  .main {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .keyboard-key {
    width: 55px;
    height: 55px;
    font-size: 1.3rem;
  }
}

/* ========== 手机设备 (600px) ========== */
@media (max-width: 600px) {
  /* 容器调整 */
  .container {
    padding: var(--spacing-sm);
  }
  
  .main {
    padding: var(--spacing-md) 15px;
    border-radius: var(--radius-lg);
  }
  
  /* 标题调整 */
  .title {
    font-size: 1.5rem;
  }
  
  .level {
    font-size: 1.5rem;
  }
  
  .digits-tip {
    font-size: 1rem;
  }
  
  /* 按钮调整 */
  .btn {
    padding: 12px 30px;
    font-size: 1rem;
  }
  
  /* 数字显示调整 */
  .number-row {
    font-size: 1.8rem;
  }
  
  .number-size-default .number-row { font-size: 2rem; }
  .number-size-20 .number-row { font-size: 1.8rem; }
  .number-size-40 .number-row { font-size: 1.5rem; }
  .number-size-60 .number-row { font-size: 1.2rem; }
  .number-size-80 .number-row { font-size: 1rem; }
  .number-size-100 .number-row { font-size: 0.9rem; }
  
  /* 输入框调整 */
  #userInput {
    font-size: 1.2rem;
    padding: 12px;
  }
  
  /* 虚拟键盘调整 */
  .keyboard-key {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .virtual-keyboard {
    max-width: 280px;
  }
  
  /* 弹窗调整 */
  .popup-message {
    padding: var(--spacing-md);
    width: 95%;
  }
  
  .popup-content {
    font-size: 1.1rem;
  }
  
  /* 游戏说明调整 */
  #gameDescText {
    font-size: 0.95rem;
  }
  
  /* 页脚调整 */
  .footer-links {
    flex-wrap: wrap;
    gap: 15px;
  }
}

/* ========== 小屏手机 (400px) ========== */
@media (max-width: 400px) {
  .header {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .header-nav {
    gap: 15px;
  }
  
  .nav-link {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
  
  .keyboard-key {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  
  .keyboard-row {
    gap: 8px;
  }
  
  .virtual-keyboard {
    gap: 8px;
  }
}

/* ========== 横屏模式优化 ========== */
@media (orientation: landscape) and (max-height: 600px) {
  .main {
    padding: var(--spacing-md);
  }
  
  .number {
    min-height: 80px;
    padding: var(--spacing-md);
  }
  
  .timer-area {
    margin-bottom: var(--spacing-md);
  }
  
  .game-desc {
    max-height: 150px;
    overflow-y: auto;
  }
}

/* ========== 深色模式（可选） ========== */
@media (prefers-color-scheme: dark) {
  /* 
   * 可以在这里添加深色模式的样式
   * 例如：调整背景色、文字颜色等
   */
}

/* ========== 高分辨率屏幕优化 ========== */
@media (min-width: 1440px) {
  .container {
    max-width: 700px;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .level {
    font-size: 2.2rem;
  }
}