/* 响应式设计 - 自适应手机和电脑版本 */

/* 基础响应式设置 */
* {
  box-sizing: border-box;
}

/* 手机端样式 (最大宽度 768px) */
@media (max-width: 768px) {
  /* 语言切换器 */
  .language-switcher {
    top: 10px;
    right: 10px;
    gap: 3px;
  }

  .lang-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  /* Admin按钮 */
  .admin-fab {
    left: 10px;
    bottom: 10px;
    padding: 8px 12px;
    font-size: 12px;
  }

  /* 地址输入页面 */
  .city-content {
    width: 95%;
    margin: 10px auto;
    padding: 15px;
  }

  .city-content img {
    width: 80%;
    margin-bottom: 20px;
  }

  .city-box {
    padding: 20px 15px;
  }

  .city-li {
    width: 100%;
    height: 45px;
    margin-top: 15px;
    line-height: 45px;
  }

  .city-li span {
    width: 80px;
    font-size: 0.9rem;
  }

  .city-li input {
    width: calc(100% - 80px);
    font-size: 16px; /* 防止iOS缩放 */
  }

  .cxyx {
    width: 80%;
    height: 45px;
    line-height: 45px;
    margin-top: 30px;
    font-size: 1rem;
  }

  /* 翻卡牌页面 */
  .cards-container {
    max-width: 100%;
    height: 70vh;
    padding: 10px;
  }

  .card {
    width: 300px;
    height: 450px;
  }

  .card-content {
    padding: 15px;
  }

  .card-name {
    font-size: 1.3rem;
  }

  .card-age {
    padding: 4px 10px;
    font-size: 0.8rem;
  }

  .card-tags {
    gap: 6px;
    margin-bottom: 12px;
  }

  .tag {
    padding: 3px 8px;
    font-size: 0.7rem;
  }

  .card-stats {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .card-actions {
    gap: 8px;
  }

  .action-btn {
    padding: 10px;
    font-size: 0.9rem;
  }

  .cards-controls {
    bottom: -60px;
    gap: 15px;
  }

  .control-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  /* 弹窗样式 */
  .modal-content {
    width: 95%;
    margin: 10px;
  }

  .modal-header {
    padding: 15px;
  }

  .modal-header h3 {
    font-size: 1.3rem;
  }

  .modal-body {
    padding: 15px;
  }

  .profile-preview {
    padding: 12px;
    gap: 12px;
  }

  .profile-preview img {
    width: 50px;
    height: 50px;
  }

  .profile-info h4 {
    font-size: 1.1rem;
  }

  .profile-info p {
    font-size: 0.8rem;
  }

  .modal-footer {
    padding: 15px;
    gap: 8px;
  }

  .btn-secondary,
  .btn-primary {
    padding: 10px;
    font-size: 0.9rem;
  }

  /* Admin弹窗 */
  .admin-panel {
    width: 95vw;
    max-height: 80vh;
  }

  .admin-header {
    padding: 12px 15px;
  }

  .admin-body {
    padding: 10px 15px;
  }

  .admin-section {
    margin-bottom: 15px;
  }

  .admin-section h4 {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .admin-row {
    margin: 8px 0;
  }

  .admin-row > span {
    width: 80px;
    font-size: 0.9rem;
  }

  .admin-row > input {
    padding: 6px 8px;
    font-size: 0.9rem;
  }

  .admin-footer {
    padding: 10px 15px;
    gap: 8px;
  }

  .admin-btn {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  /* 成功提示 */
  .toast {
    top: 10px;
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* 平板端样式 (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .cards-container {
    max-width: 500px;
  }

  .card {
    width: 400px;
    height: 550px;
  }

  .city-content {
    width: 80%;
  }

  .admin-panel {
    width: 80vw;
    max-width: 700px;
  }
}

/* 桌面端样式 (最小宽度 1025px) */
@media (min-width: 1025px) {
  .cards-container {
    max-width: 450px;
  }

  .card {
    width: 380px;
    height: 520px;
  }

  .city-content {
    width: 70%;
  }

  .admin-panel {
    width: 60vw;
    max-width: 800px;
  }
}

/* 大屏幕样式 (最小宽度 1440px) */
@media (min-width: 1440px) {
  .cards-container {
    max-width: 500px;
  }

  .card {
    width: 420px;
    height: 580px;
  }

  .city-content {
    width: 60%;
  }
}

/* 横屏手机样式 */
@media (max-width: 768px) and (orientation: landscape) {
  .cards-container {
    height: 60vh;
  }

  .card {
    width: 280px;
    height: 400px;
  }

  .card-content {
    padding: 12px;
  }

  .card-name {
    font-size: 1.2rem;
  }

  .card-stats {
    font-size: 0.75rem;
  }

  .cards-controls {
    bottom: -50px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .card:hover {
    transform: none;
  }

  .action-btn:hover {
    transform: none;
  }

  .control-btn:hover {
    transform: none;
  }

  .admin-btn:hover {
    filter: none;
  }

  /* 增加触摸目标大小 */
  .action-btn {
    min-height: 44px;
  }

  .control-btn {
    min-height: 44px;
  }

  .lang-btn {
    min-height: 44px;
  }

  .admin-fab {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .card {
    background: #1a1a1a;
    color: #ffffff;
  }

  .card-name {
    color: #ffffff;
  }

  .card-stats {
    color: #cccccc;
  }

  .modal-content {
    background: #1a1a1a;
    color: #ffffff;
  }

  .modal-header h3 {
    color: #ffffff;
  }

  .admin-panel {
    background: #1a1a1a;
    color: #ffffff;
  }

  .admin-section h4 {
    color: #ffffff;
  }

  .admin-row > span {
    color: #cccccc;
  }
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card.flipping {
    animation: none;
  }

  .loading-spinner {
    animation: none;
  }

  .toast {
    transition: none;
  }
}

/* 打印样式 */
@media print {
  .language-switcher,
  .admin-fab,
  .cards-controls,
  .modal,
  .toast {
    display: none !important;
  }

  .page {
    display: block !important;
  }

  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}