/* 触屏与小屏专用调整。设计目标:iPhone SE 375x667 起步,直到桌面浏览器都顺手。 */

/* 触摸设备:增加按钮间距、禁止文本选中(避免长按触发系统菜单)、增大字号可读性 */
@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none;
    user-select: none;
  }

  /* 长按选中和右键菜单在游戏里几乎没用,但留给文本输入框 */
  input,
  textarea,
  .scene-desc {
    -webkit-user-select: text;
    user-select: text;
  }

  .ancient-btn,
  .small-btn,
  .tab-btn {
    min-height: 48px;
  }

  .small-btn {
    min-height: 38px;
  }
}

/* 横屏移动端:状态栏不能再粘顶,免得占太多视觉,改成可滚动 */
@media (orientation: landscape) and (max-height: 480px) {
  .scene-hero {
    aspect-ratio: 24 / 7;
  }

  .status-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    font-size: 11px;
  }

  .game-view {
    padding: 8px;
  }
}

/* 桌面: 双列对话/面板,场景图限高 */
@media (min-width: 700px) {
  .game-view {
    padding: 18px;
  }

  .status-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    font-size: 13px;
  }

  .scene-hero {
    aspect-ratio: auto;
    height: 280px;
  }

  .fighters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .combat-actions,
  .skill-actions,
  .item-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 大桌面: 选项分两列 */
@media (min-width: 980px) {
  .option-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 极小屏 (iPhone 5/SE 1代 320px) */
@media (max-width: 374px) {
  .game-title {
    font-size: 22px;
  }

  .scene-title {
    font-size: 19px;
  }

  .scene-desc {
    font-size: 14px;
    line-height: 1.6;
  }

  .ancient-btn {
    padding: 9px 10px;
    font-size: 14px;
  }

  .tab-btn {
    font-size: 11px;
    padding: 6px 2px;
  }

  .status-grid {
    font-size: 11px;
  }

  .npc-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
}

/* 防止战斗/输入页面的双击放大,iOS Safari 默认行为 */
input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px; /* iOS 不会缩放 16px 以上的输入框 */
}

/* 长场景滚动时保持 sticky 状态栏不抖动 */
@supports (height: 100dvh) {
  .app-shell {
    min-height: 100dvh;
  }
}

/* 高对比度偏好 */
@media (prefers-contrast: more) {
  .panel {
    background: rgba(255, 250, 235, 0.95);
  }
  .scene-desc {
    color: #1a1a1a;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .scene-hero {
    animation: none;
  }
}