/**
 * 移动端 / 窄屏 UI 优化
 * 挂在样式表最后，覆盖桌面布局
 */

/* ===== 安全区与基础 ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overscroll-behavior-y: none;
}
#app {
  min-height: 100dvh;
  min-height: 100vh;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* 触控：减少悬停依赖，增大热区 */
@media (hover: none) and (pointer: coarse) {
  .card:hover {
    transform: none;
  }
  .card.selected {
    transform: translateY(-16px) scale(1.05);
  }
  .btn,
  .nav-link,
  .title-link,
  .jiguan-chip,
  .jinnang-chip,
  .meta-tab,
  .codex-tab,
  .title-mode-card {
    min-height: 40px;
  }
  .nav-link {
    padding: 8px 12px;
  }
}

/* ===== 平板 ≤1100：右侧构筑改为底栏 ===== */
@media (max-width: 1100px) {
  .battle-desktop {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr auto;
  }
  .battle-side.right {
    display: flex !important;
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 120px;
    overflow: auto;
    gap: 8px;
    padding: 10px 12px;
  }
  .battle-side.right .side-block {
    flex: 1 1 140px;
    min-width: 120px;
  }
  .battle-side.right .side-kicker {
    margin-bottom: 4px;
    font-size: 10px;
  }
}

/* ===== 手机 ≤780 ===== */
@media (max-width: 780px) {
  :root {
    --card-w: 52px;
    --card-h: 74px;
    --header-h: 50px;
  }

  /* 顶栏 */
  .app-header {
    height: auto;
    min-height: var(--header-h);
    padding: 6px 10px;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    gap: 8px;
    align-items: center;
  }
  .brand-seal {
    width: 30px;
    height: 30px;
  }
  .brand-name {
    font-size: 15px;
    letter-spacing: 3px;
  }
  .brand-tag {
    display: none;
  }
  .header-nav {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .header-nav::-webkit-scrollbar {
    display: none;
  }
  .header-nav .nav-link {
    flex-shrink: 0;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(212, 175, 55, 0.15);
  }

  /* 内容区 */
  .content-shell {
    padding: 12px 12px max(16px, env(safe-area-inset-bottom, 0px));
    width: 100%;
  }
  .section-title {
    font-size: 22px;
    letter-spacing: 2px;
  }
  .section-head {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
  }
  .btn-row.end {
    position: sticky;
    bottom: 0;
    z-index: 6;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent, rgba(8, 10, 14, 0.92) 30%);
    margin-top: auto;
  }
  .sticky-actions {
    gap: 8px;
  }
  .sticky-actions .btn {
    flex: 1;
    min-width: 0;
  }

  /* 标题页 */
  #screen-title .title-layout {
    padding: 12px 14px 20px;
    gap: 16px;
    min-height: 0;
  }
  #screen-title .title-kicker {
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  #screen-title .title-kicker-line {
    max-width: 28px;
  }
  #screen-title .title-brand-row {
    gap: 12px;
    margin-bottom: 12px;
  }
  #screen-title .title-seal {
    width: 56px !important;
    height: 56px !important;
  }
  #screen-title .title-main {
    font-size: 40px !important;
    letter-spacing: 8px !important;
    text-indent: 8px !important;
    margin-bottom: 4px !important;
  }
  #screen-title .title-sub {
    font-size: 12px;
    letter-spacing: 0.5px;
    max-width: none;
  }
  #screen-title .title-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    max-width: none;
    margin-bottom: 14px;
  }
  #screen-title .stat-card {
    padding: 8px 4px;
  }
  #screen-title .stat-card span {
    font-size: 9px;
    letter-spacing: 0;
  }
  #screen-title .stat-card strong {
    font-size: 16px;
  }
  .title-cta-block {
    width: 100%;
    margin-bottom: 12px;
  }
  .title-cta-main {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }
  .title-modes {
    grid-template-columns: 1fr !important;
    max-width: none !important;
    gap: 8px;
    margin-bottom: 12px;
  }
  .title-mode-card {
    padding: 12px;
  }
  .title-mode-card .mode-ico {
    width: 44px;
    height: 44px;
  }
  .title-links {
    gap: 10px;
  }
  .title-link-group {
    gap: 6px;
  }
  .title-link {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.06);
  }
  .title-side {
    max-width: none !important;
  }
  .title-side-panel {
    padding: 14px 12px;
  }
  .path-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
  }
  .path-list span {
    text-align: left;
  }
  #screen-title .sect-icons {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
  #screen-title .sect-icon {
    width: 40px;
    height: 40px;
  }

  /* ===== 战斗：竖向牌桌 ===== */
  #screen-battle {
    overflow: hidden;
  }
  .battle-desktop {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: unset;
    grid-template-rows: unset;
    height: 100%;
    min-height: 0;
    padding: 6px 6px 0;
    gap: 6px;
  }

  /* 顶部信息：可折叠高度 */
  .battle-side.left {
    order: 1;
    flex: 0 0 auto;
    max-height: 26vh;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .battle-side.left .race-desc {
    display: none;
  }
  .battle-side.left .side-block.grow {
    display: none; /* 手机藏战报，减负 */
  }
  .battle-side.left .btn-block {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .battle-side.left #btn-battle-menu {
    padding: 8px;
    font-size: 12px;
  }
  .side-title {
    font-size: 15px;
  }
  .side-sub {
    font-size: 11px;
  }
  .score-race {
    gap: 6px;
  }
  .race-row {
    padding: 6px 8px;
  }
  .race-vs {
    font-size: 9px;
    letter-spacing: 2px;
  }
  .race-tip {
    font-size: 10px;
    margin-top: 2px;
  }
  .resource-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  .res-cell {
    padding: 5px 4px;
  }
  .res-label {
    font-size: 9px;
  }
  .res-value {
    font-size: 12px;
  }
  .battle-info-row {
    max-height: 52px;
    overflow: auto;
  }
  .battle-info-row .chip {
    font-size: 10px;
    padding: 3px 7px;
  }

  /* 中央牌桌 */
  .battle-table {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .table-frame-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 4px !important;
    border-radius: 12px !important;
  }
  .table-felt {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px !important;
    border-radius: 12px !important;
    gap: 4px;
    overflow: hidden;
  }
  .enemy-area {
    flex-shrink: 0;
  }
  .enemy-portrait {
    width: 36px !important;
    height: 36px !important;
  }
  .enemy-cards {
    min-height: 36px;
  }
  .card-back {
    width: 28px !important;
    height: 40px !important;
    margin-left: -14px;
  }
  .table-area {
    flex: 1;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .last-play .card.table-card,
  .card.table-card {
    width: 48px;
    height: 68px;
    margin-left: -16px;
  }
  .last-play-info,
  .battle-phase {
    font-size: 11px;
    line-height: 1.3;
  }

  /* 机关托盘：更扁 */
  .util-tray {
    flex-shrink: 0;
    margin-top: 0;
    padding: 6px 8px 8px;
    max-height: 28vh;
    overflow-y: auto;
  }
  .util-sub {
    display: none;
  }
  .util-title {
    font-size: 11px;
  }
  .util-meta {
    font-size: 10px;
  }
  .jiguan-chip,
  .jinnang-chip {
    min-height: 36px;
    padding: 4px 8px 4px 4px;
    font-size: 11px;
  }
  .jiguan-chip .chip-desc {
    display: none;
  }
  .chip-icon {
    width: 24px !important;
    height: 24px !important;
  }

  /* 手牌 + 操作：贴底固定 */
  .hand-area {
    order: 4;
    flex-shrink: 0;
    border-radius: 14px 14px 0 0;
    padding: 8px 8px max(10px, env(safe-area-inset-bottom, 0px));
    margin: 0 -2px;
    border-bottom: none;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    z-index: 8;
  }
  .hand-toolbar {
    margin-bottom: 2px;
    font-size: 11px;
    gap: 6px;
  }
  .hand-hint {
    font-size: 11px;
    min-height: 16px;
  }
  .hand-cards {
    padding: 14px 8px 6px;
    min-height: calc(var(--card-h) + 28px);
    justify-content: flex-start;
  }
  .card {
    margin-left: -20px;
    border-width: 1.5px;
  }
  .card .rank {
    font-size: 18px;
  }
  .card .suit {
    font-size: 20px;
  }
  .card.selected {
    transform: translateY(-14px) scale(1.06);
  }
  .action-bar {
    gap: 6px;
    padding-top: 6px;
    flex-wrap: nowrap;
  }
  .action-bar .btn {
    flex: 1;
    min-width: 0 !important;
    padding: 12px 6px !important;
    font-size: 13px !important;
    letter-spacing: 1px;
    border-radius: 10px;
  }
  #btn-draw {
    min-width: 0 !important;
    flex: 0.85;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
  .btn-with-icon .btn-ico {
    width: 16px;
    height: 16px;
  }

  /* 右侧构筑：手牌上方横条 */
  .battle-side.right {
    order: 3;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: 72px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .battle-side.right .side-block {
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 70vw;
  }
  .battle-side.right .build-list {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .battle-side.right .hotkeys {
    display: none; /* 手机以触控为主 */
  }

  /* 选角 / 商店 / 图鉴 */
  .char-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .char-card {
    min-height: 0;
  }
  .shop-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .mode-grid {
    grid-template-columns: 1fr !important;
  }
  .help-grid {
    grid-template-columns: 1fr !important;
  }
  .codex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .codex-card-desc {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    min-height: 2.6em !important;
    font-size: 11px !important;
  }
  .meta-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .meta-item {
    flex-direction: column;
  }
  .meta-item-side {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .guide-card {
    width: calc(100vw - 20px) !important;
    max-height: min(72vh, 480px);
  }
  .save-modal-card {
    width: calc(100vw - 16px);
    max-height: 85dvh;
  }
  .cast-fx-card,
  .achieve-popup-card {
    max-width: calc(100vw - 24px);
  }

  /* 外框减弱 */
  .shell-outer-frame {
    opacity: 0.2;
  }
  .shell-content-frame {
    display: none !important;
  }
}

/* ===== 极窄屏 ≤420 ===== */
@media (max-width: 420px) {
  :root {
    --card-w: 46px;
    --card-h: 66px;
  }
  #screen-title .title-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .battle-side.left {
    max-height: 30vh;
  }
  .card {
    margin-left: -16px;
  }
  .card .rank {
    font-size: 16px;
  }
  .card .suit {
    font-size: 18px;
  }
  .action-bar .btn {
    padding: 11px 4px !important;
    font-size: 12px !important;
  }
  .codex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 横屏手机：压缩竖向，给手牌更多宽 */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .battle-side.left {
    max-height: 22vh;
  }
  .battle-side.left .side-block:first-child,
  .util-sub,
  .race-tip {
    display: none;
  }
  .hand-area {
    padding-top: 4px;
  }
  .hand-cards {
    min-height: calc(var(--card-h) + 16px);
    padding-top: 10px;
  }
  .util-tray {
    max-height: 20vh;
  }
}