/* =========================================================================
 * 棋魂 · 移动端适配样式 (mobile.css)
 * 目标断点：<= 760px（手机竖屏），<= 520px（窄屏/小屏），<= 380px（极窄屏）
 * 设计原则：
 *   1. 触摸优先：所有按钮消除双击放大延迟、棋盘禁用浏览器手势，避免误触发
 *   2. 防止误操作：游戏区域内禁止文本选择、长按菜单、上下文弹窗
 *   3. 输入框字号 >= 16px，避免 iOS 输入时自动放大页面
 *   4. 单列堆叠：把双栏布局改成竖向滚动，侧栏（手牌/技能）放到棋盘下方
 *   5. 更大的命中区：手机端按钮最小 44px 高度，符合 Apple HIG / Material 规范
 * ========================================================================= */

:root {
  --mobile-tap-safe: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ========================= 统一的模块移除（手机端和电脑端一致） =========================
 * 棋魂好友版是精简版，不需要以下模块。这些规则无媒体查询，对所有视口生效，
 * 确保移动端和桌面端展示的模块保持一致——用户在手机上看到什么，桌面端也是同样的。
 */

/* 主页：隐藏装饰性副标/状态徽章（棋盘装饰图移到下面的桌面端规则里，
   桌面端要展示它来填补右侧空白）。 */
.jianghu-hero-copy > p:first-child,
.jianghu-hero-copy > div:last-child {
  display: none !important;
}

/* 棋盘装饰图：手机端始终隐藏，桌面端才显示，填补 hero 右侧的空白 */
.friends-board-preview {
  display: none !important;
}

/* ========================= 桌面端专属：补回装饰模块 =========================
 * 桌面端有足够横向空间，把模块填回去避免留空。
 */
@media (min-width: 761px) {
  /* hero 右侧的棋盘预览图：显示出来，吸睛又填补留空 */
  .friends-board-preview {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* 卡片的装饰大字/水印/角标：移动端和桌面端都不需要 */
.arena-entry > span[aria-hidden],
.arena-board-art,
.jianghu-mode-glyph,
.jianghu-mode-tag {
  display: none !important;
}

/* 好友版没有卡牌皮肤系统，对局页的「卡牌皮肤」按钮无论手机/电脑都隐藏 */
.hand-panel .card-collection-button,
.hand-panel [data-testid='open-card-skins'] {
  display: none !important;
}

/* ========================= 通用触摸优化 ========================= */
html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

button,
a,
[role='button'],
.jade-button,
.quiet-button,
.event-button,
.purchase-button {
  /* manipulation = 关闭双击放大延迟（保留 pinch zoom） */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea,
.event-input,
.arena-invitation input {
  /* iOS 在字号 < 16px 时会自动放大页面 */
  font-size: max(16px, 1em);
  touch-action: manipulation;
}

/* ========================= 游戏区：禁止误触 ========================= */
.game-shell,
.board-stage,
.board-display,
.board-orbit,
.action-cue,
.action-path,
.hand-panel,
.turn-clock,
.board-stage-heading,
.board-stage-footer {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 棋盘本身：禁止浏览器手势，让 JS 的 pointer/touch 事件独占
   （下子走的是 click + 拖拽瞄准，必须禁止页面滚动/缩放介入） */
.game-board,
.board-drag-aim,
.aim-guides,
.aim-outline,
.aim-cross {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 棋子点击态：去掉默认点击高亮，改为自定义悬停 */
.board-hit {
  -webkit-tap-highlight-color: transparent;
}

/* ========================= 顶层壳：减少边距 ========================= */
@media (max-width: 760px) {
  .game-shell {
    overflow-x: hidden;
  }

  .game-header {
    /* 让导航栏紧凑但不拥挤 */
    min-height: 56px;
    padding: 10px 14px;
    gap: 10px;
  }

  .brand-mark,
  .brand-seal {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .game-brand h1 {
    font-size: 19px;
    letter-spacing: 0.14em;
  }

  .game-brand p {
    display: none; /* 副标隐藏，给主标让位 */
  }

  .game-header [data-testid='match-status'] {
    font-size: 11px;
  }
}

/* ========================= 主页 event-header 重排 ========================= */
@media (max-width: 760px) {
  /* event-header 是 display:grid 的两列布局，桌面版会把 friends-identity 挤掉。
     手机端改成 flex 三行：brand + identity 一行，nav 单独一行 */
  .event-header {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    gap: 6px 12px !important;
  }

  /* 品牌区：占主行左边，让 logo + 主标舒服显示 */
  .event-header .game-brand {
    flex: 1 1 auto !important;
    min-width: 0;
    gap: 10px !important;
    order: 1;
  }

  /* 「1 已连接」徽章：放到主行右边，确保不被挤到屏外 */
  .event-header .friends-identity {
    flex: 0 0 auto !important;
    max-width: 50% !important;
    min-width: 0;
    font-size: 11px !important;
    padding: 2px 8px;
    border-radius: 999px;
    background: #1a2a23;
    border: 1px solid #c9c7a522;
    order: 2;
  }

  /* 导航条（玩法等）：独立成行 */
  .event-header .event-nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px dashed #c9c7a520;
  }

  /* 顶部 alert/event-feedback：单列堆叠，避免两个并排占满横向空间 */
  .event-feedback {
    display: flex !important;
    flex-direction: column;
    gap: 6px !important;
    padding: 8px 12px !important;
  }

  .event-feedback > * {
    max-width: none !important;
    width: 100% !important;
  }

  /* 修复顶部留空：event-feedback 在没消息时也会撑出 16px（8+0+8 padding），
     用 :empty 选择器在无消息时不占空间 */
  .event-feedback:empty {
    display: none !important;
  }
}

/* ========================= 主页：大厅列表 ========================= */
@media (max-width: 760px) {
  /* 顶部介绍区域：等比例缩小，让三张卡的入口按钮在首屏就能完整看到 */
  .arena-intro,
  .jianghu-hero {
    padding: 6px 16px 8px !important;
  }

  .arena-intro h2,
  .jianghu-hero h2 {
    font-size: clamp(20px, 6vw, 22px) !important;
    line-height: 1.2 !important;
    margin: 2px 0 4px !important;
  }

  .arena-intro h2 br,
  .jianghu-hero h2 br {
    display: none; /* 减少折行，更易读 */
  }

  .arena-intro p,
  .arena-entry-rule,
  .jianghu-intro {
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

  /* 顶部小标/棋馆状态徽章/棋盘装饰图的隐藏已挪到文件顶部的"统一模块移除"段，
     桌面端和手机端同时生效。 */

  /* 关键修复：打破"外层 flex 撑高 → grid 等分三行 → overflow:hidden"的链路。
     桌面端用 jianghu-lobby / jianghu-choices 的 flex:1 把大厅高度撑满，
     再让 grid-template-rows:repeat(3, minmax(0, 1fr)) 把 3 张卡强行各分 1/3，
     导致第一张卡(电脑练棋)的「挑战强力电脑」选项+底部按钮溢出 164px，
     被 .jianghu-mode 的 overflow:hidden 裁掉。手机端改成按内容自然撑开。 */
  .jianghu-lobby,
  .jianghu-choices {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .jianghu-modes {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 14px 10px !important;
  }

  /* 三张入口卡：单列堆叠，全宽（覆盖组件里的三列 grid） */
  .arena-entry,
  .arena-purchase-card,
  .arena-practice-card {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .arena-entry,
  .arena-purchase-card,
  .arena-practice-card,
  .jianghu-mode {
    grid-column: 1 / -1 !important;
    width: 100%;
    padding: 10px 14px !important;
    border-radius: 12px;
    min-height: auto !important;
    text-align: left;
  }

  /* 去掉 overflow:hidden，否则按钮即使按内容自然撑开也会被裁 */
  .jianghu-mode {
    overflow: visible !important;
  }

  /* 卡内标题、正文、按钮：等比例缩小 */
  .jianghu-mode h3,
  .arena-entry h2 {
    font-size: 18px !important;
    margin: 0 0 3px !important;
    line-height: 1.25 !important;
  }

  .jianghu-mode p,
  .arena-entry p {
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin: 0 0 4px !important;
  }

  .jianghu-mode-tag,
  .arena-mode {
    font-size: 10px !important;
  }

  /* 按钮：紧凑化，保留足够点击区 */
  .arena-entry .jade-button,
  .arena-practice-card .jade-button,
  .arena-purchase-card .purchase-button,
  .arena-wallet .purchase-button,
  .jianghu-mode-button {
    width: 100%;
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    gap: 8px !important;
  }

  /* 「今日，如何对弈？」区块的小标题 + 右侧「练棋·约战·匹配」：紧凑化 */
  .jianghu-modes-heading,
  .jianghu-modes-heading-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  .jianghu-modes-heading h2,
  .arena-intro + .jianghu-choices h2 {
    font-size: 16px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
}

  /* 让卡内的标题、正文、操作按钮形成垂直节奏 */
  .arena-entry,
  .jianghu-mode {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .arena-entry-copy {
    width: 100%;
  }

  .arena-entry h2,
  .jianghu-mode h3 {
    font-size: 22px !important;
    margin: 4px 0 6px !important;
    line-height: 1.3 !important;
  }

  .arena-entry p,
  .jianghu-mode p {
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 8px;
    color: #b0c1a5;
  }

  /* 隐藏背景大字 "练 / 约 / 弈" 装饰字与右上角水印：已挪到顶部"统一模块移除"段。 */

  /* 按钮：全宽，加大命中区，方便拇指点击 */
  .arena-entry .jade-button,
  .arena-practice-card .jade-button,
  .arena-purchase-card .purchase-button,
  .arena-wallet .purchase-button,
  .jianghu-mode-button {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    font-size: 13px;
    justify-content: space-between;
  }

  /* 房间码输入 + 按钮：在小屏堆叠 */
  .arena-invitation {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .arena-invitation label {
    flex: 1 1 100%;
  }

  .arena-invitation > button,
  .arena-invitation > a {
    width: 100%;
  }

  /* 房间号那行被裁断的问题 */
  .event-code {
    font-size: 16px !important;
    letter-spacing: 0.1em;
  }

  /* 隐藏装饰性大字号数字水印 */
  .arena-mode,
  .arena-match-clock,
  .arena-other-wallet {
    font-size: 11px;
  }
}

/* 极窄屏：再压缩 */
@media (max-width: 380px) {
  .game-header {
    padding: 8px 10px;
  }

  .game-brand h1 {
    font-size: 16px;
  }

  .arena-intro h2 {
    font-size: 20px !important;
  }

  .arena-entry h2 {
    font-size: 18px !important;
  }

  .arena-entry p,
  .arena-entry-rule {
    font-size: 11px;
  }
}

/* ========================= 对局页：手牌区（两张卡并排，去掉分页控件/卡牌皮肤） ========================= */
@media (max-width: 760px) {
  /* 「卡牌皮肤」按钮的隐藏已挪到顶部"统一模块移除"段，对桌面端和手机端同时生效。 */

  /* 玩家信息已经在头部 header / event-match-heading 里展示过，
     手机端直接把整个 .hand-owner 隐藏，腾出空间给卡牌 */
  .hand-panel .hand-owner {
    display: none !important;
  }

  /* 对手信息区：紧凑横条，放在 hand-panel 下方填空白 */
  :root .duelist.duelist-opponent.sidebar-opponent {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 8px 0 0 !important;
    padding: 8px 12px !important;
    background: rgba(20, 33, 30, 0.45) !important;
    border: 1px solid rgba(201, 199, 165, 0.18) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
  }

  /* 隐藏对手手牌扇形 + 重复的 duelist-label（label 文字与对手名重复） */
  .duelist.duelist-opponent.sidebar-opponent .opponent-card-fan,
  .duelist.duelist-opponent.sidebar-opponent .duelist-label {
    display: none !important;
  }

  /* identity 容器：紧凑横排 */
  .duelist.duelist-opponent.sidebar-opponent .opponent-identity {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }

  /* header 子容器（包含头像 + 名字/计数）：横排 */
  .duelist.duelist-opponent.sidebar-opponent header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 头像圆 36×36 */
  .duelist.duelist-opponent.sidebar-opponent .size-12 {
    flex: 0 0 auto !important;
    display: block !important; /* 覆盖桌面端 :root .sidebar-opponent .size-12{display:none} */
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  .duelist.duelist-opponent.sidebar-opponent .size-12 svg {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
  }

  /* 名字 + 手牌数 容器：竖排、占满剩余空间 */
  .duelist.duelist-opponent.sidebar-opponent header > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  /* 名字：突出 */
  .duelist.duelist-opponent.sidebar-opponent .opponent-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e4e5d8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  /* 「白方 · 手牌：2 张」状态行 */
  .duelist.duelist-opponent.sidebar-opponent .opponent-count {
    font-size: 10px !important;
    color: #8f9f95 !important;
    line-height: 1.3 !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* 明牌标记（revealed=true 时显示） */
  .duelist.duelist-opponent.sidebar-opponent .event-revealed {
    flex: 0 0 auto !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    background: rgba(229, 122, 75, 0.18) !important;
    color: #e57a4b !important;
    border-radius: 4px !important;
  }

  /* 对手区域还在桌面布局里占着 flex 网格的轨，所以把它的兄弟（hand-panel）
     强制占满整列，不留空白 */
  .game-sidebar {
    display: flex !important;
    flex-direction: column !important;
  }
  .game-sidebar > .hand-panel {
    flex: 1 1 auto !important;
  }

  /* 顶部标题块压缩成一行 */
  .hand-panel .hand-heading {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed #c9c7a522;
    grid-area: heading !important;
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .hand-panel .hand-heading h2 {
    font-size: 13px !important;
    letter-spacing: 0.08em;
    margin: 0 !important;
  }

  .hand-panel .hand-heading .section-kicker {
    display: none !important;
  }

  /* 手机宽度够放下两张卡，隐藏轮播导航、左右切换按钮、下拉 */
  .hand-page-controls {
    display: none !important;
  }

  /* 取消组件在 data-many=true 时把所有卡槽隐藏的规则 */
  .hand-panel[data-many='true'] .hand-card-slot {
    display: flex !important;
  }

  /* 关键：覆盖 :root .hand-card-slot { display:none }，
     让两张卡都进入 flex 流（不论 data-focused 状态） */
  :root .hand-card-slot,
  .hand-card-slot {
    display: flex !important;
  }

  /* 取消 [data-focused=true] 的强制绝对定位 + left:50%，让卡槽在 flex 流里自然排列 */
  .hand-card-slot[data-focused='true'] {
    position: relative !important;
    left: auto !important;
    margin-left: 0 !important;
    transform: none;
    --fan-angle: 0deg;
  }

  .hand-card-slot[data-focused='false'] {
    position: relative !important;
    left: auto !important;
    --fan-angle: 0deg;
  }

  /* 关键：手牌面板在手机上是单列布局，把 grid 模板覆盖为单列，
     让 .hand-fan 拿到整行宽度（而不是被塞进 158px 的右侧列） */
  .hand-panel {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      'owner'
      'heading'
      'fan'
      'actions' !important;
    grid-template-rows: auto auto auto auto !important;
    grid-auto-rows: 0 !important;
    row-gap: 4px !important;
    padding: 6px 8px 8px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* hand-fan：让两张卡居中并排，留出倾斜需要的左右余量 */
  .hand-fan {
    grid-area: fan !important;
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start !important;
    gap: 36px !important; /* 加大两张卡的左右间距，避免倾斜后边角相碰 */
    padding: 6px 6px 8px !important;
    margin: 0 !important;
    perspective: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
  }

  /* 卡槽：等比缩小（原 124px，按用户要求再缩 20% → 99px） */
  .hand-card-slot {
    flex: 0 0 auto !important;
    width: 99px !important;
    height: auto !important;
    min-width: 0;
    max-width: none !important;
    aspect-ratio: 5 / 7.6 !important;
    transform-origin: 50% 95% !important;
    transition: transform 0.25s ease;
  }

  /* 缩小 20% 后倾斜角度也变柔，避免两张卡在小尺寸下挤在一起 */
  .hand-card-slot:nth-of-type(1) {
    transform: rotate(-4.5deg) translateY(2px) !important;
  }
  .hand-card-slot:nth-of-type(2) {
    transform: rotate(4.5deg) translateY(2px) !important;
  }
  .hand-card-slot:nth-of-type(1):hover,
  .hand-card-slot:nth-of-type(2):hover {
    transform: rotate(0) translateY(-4px) scale(1.04) !important;
  }

  /* 卡牌本身：保持原本比例，去掉组件里负 margin 的扇形偏移 */
  .hand-card-slot .playing-card {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* 卡面下方的 "1 / 2 · 牌面详情" 状态行：手机上隐藏，腾出垂直空间 */
  .hand-card-slot .hand-card-status {
    display: none !important;
  }

  /* 隐藏 grid 内多余空行（page-controls / hand-instruction），避免它们撑高面板 */
  .hand-panel .hand-page-controls,
  .hand-panel .hand-instruction,
  .hand-panel .hand-reveal-status {
    display: none !important;
  }

  /* 让面板内部 grid 行按内容自然收缩 */
  .hand-panel {
    grid-template-rows: auto auto auto auto !important;
  }

  /* 卡面文字尺寸：随卡牌整体缩小 20%，等比降字号 */
  .hand-card-slot .card-topline {
    font-size: 7px;
  }

  .hand-card-slot .card-title {
    font-size: 11px !important;
    margin: 3px 0 !important;
  }

  .hand-card-slot .card-description {
    font-size: 7px !important;
    line-height: 1.35 !important;
  }

  .hand-card-slot .card-rule,
  .hand-card-slot .card-seal {
    transform: scale(0.6);
  }

  /* 卡面下方的 "1 / 2 · 牌面详情" 状态行：缩小到一行 */
  .hand-card-slot .hand-card-status {
    font-size: 7px;
    margin-top: 4px;
    line-height: 1.3;
  }

  .hand-card-slot .hand-detail-label {
    font-size: 7px;
  }

  /* 卡槽外层不允许溢出 */
  .hand-panel {
    overflow: visible;
  }
}

/* ========================= 对局页：棋盘 + 侧栏 ========================= */
/* 在 phone portrait 下，把 [board | sidebar] 的双栏改为单栏：
     order:  board → 步骤条 (action-path) → 当前技能 (action-cue) → 状态卡 → 玩家手牌 (hand-panel) → 回合提示
*/
@media (max-width: 760px) {
  /* 取消 .game-shell 的 min-height:100dvh 撑满，避免内容在 812px 屏上
     被 flex 推到中央后，下方出现一段空白。让内容按自然高度从顶部堆叠。 */
  .game-shell {
    min-height: 0 !important;
    display: block !important;
  }

  .game-layout {
    display: flex;
    flex-direction: column;
    padding: 8px 8px calc(20px + env(safe-area-inset-bottom, 0px));
    gap: 0; /* 棋盘与下方模块紧贴，靠 hand-panel 自带 padding 留白 */
    min-height: 0 !important;
  }

  /* 防止内部组件用 height:100% 把 sidebar 撑爆 */
  .game-sidebar,
  .hand-panel {
    min-height: 0 !important;
    height: auto !important;
  }

  /* 棋盘：占满宽度，留出顶部少量空间 */
  .board-main {
    width: 100%;
  }

  .board-stage {
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* 强制 board-stage 不要在桌面上有圆角阴影、限制外接尺寸 */
    background: transparent;
    border: none;
    box-shadow: none;
  }

  /* board-display：把内部可能存在的 padding/gap 清零，让棋盘撑满 */
  .board-display {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center;
  }

  /* 棋盘本身：铺满 viewport 宽度（减去 8px*2 layout padding），
     1:1 aspect-ratio 保证方形，每格 ~24-26px。
     注意：父级 .board-display/.board-stage 可能会把 height 拉高，
     所以同时用 height 强制覆盖。 */
  .game-board {
    width: calc(100vw - 16px) !important;
    height: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vw - 16px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
  }

  /* 防止 board-display 把 game-board 拉高 */
  .board-stage,
  .board-display {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vw - 16px) !important;
    flex: 0 0 auto !important;
  }

  /* board-orbit：装饰紧贴 game-board，不抢空间 */
  .board-orbit {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 棋盘 heading/footer：手机上隐藏，标题已在 event-match-heading 显示 */
  .board-stage-heading,
  .board-stage-footer {
    display: none !important;
  }

  .board-collection-button {
    padding: 7px 10px;
    font-size: 11px;
  }

  /* 棋盘周围的光晕/轨道：极窄屏关掉，省 GPU */
  .board-orbit::before,
  .board-orbit::after {
    width: 96%;
  }

  .board-orbit > span {
    font-size: 10px;
  }

  /* 侧栏：变成普通卡片，放在棋盘下面 */
  .game-sidebar {
    width: 100%;
    padding-top: 0;
    gap: 12px;
  }

  /* 回合时钟：占满一行 */
  .turn-clock,
  .opponent-row {
    width: 100%;
    min-width: 0;
  }

  /* 步骤条 (action-path)：让玩家随时看到当前到哪一步 */
  .action-path {
    margin-top: 0;
    padding: 8px 4px;
    font-size: 11px;
  }

  .action-path li {
    font-size: 11px;
  }

  /* 当前技能提示 (action-cue)：手机上做成显眼胶囊 */
  .action-cue {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 12px 10px;
    border-radius: 10px;
  }

  .action-cue-art {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
  }

  .action-cue-target {
    /* 右侧的 "目标" 区域：移到第二行，避免挤掉标题 */
    grid-column: 1 / -1;
    grid-row: 3;
    border-left: none;
    border-top: 1px dashed #c9bd8e24;
    padding-left: 0;
    padding-top: 6px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .action-cue-copy h3 {
    font-size: 14px;
  }

  .action-cue-copy p {
    font-size: 10px;
    line-height: 1.5;
  }

  /* 手牌面板：放到最底部；具体卡牌/卡槽排版由上面的"对局页：手牌区"区块处理 */
  .hand-panel {
    width: 100%;
    max-width: 100%;
    padding: 4px 8px 8px !important; /* 顶 padding 进一步压到 4，让手牌区紧贴棋盘 */
    border-radius: 10px;
    margin-top: 0 !important;
  }

  /* 侧栏：变成普通卡片，顶部 padding 归零，与棋盘之间不留空 */
  .game-sidebar {
    width: 100%;
    padding-top: 0 !important;
    margin-top: 0 !important;
    gap: 8px !important; /* 原 12 → 8 */
  }

  /* board-stage 与 game-sidebar 之间不留空：把 board-stage 的下外边距归零 */
  .board-stage {
    margin-bottom: 0 !important;
  }

  /* 弹窗：在手机上接近全屏 */
  [data-testid='board-skin-modal'] > div,
  [data-testid='match-review-modal'] > div,
  [data-testid='bean-ledger-dialog'] > div {
    width: 96vw;
    max-width: 96vw;
    max-height: 92dvh;
    padding: 16px 14px 14px;
    border-radius: 10px;
  }

  [data-testid='board-skin-modal'] > div > header {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  [data-testid='board-skin-modal'] h2 {
    font-size: 19px;
    letter-spacing: 0.1em;
  }

  /* 对局结束弹窗 */
  .bean-result,
  .bean-delivery {
    padding: 16px 14px;
  }

  .bean-result h2 {
    font-size: 22px;
  }

  /* 事件房内的小弹窗（认输、再来一局） */
  .viewport-modal .wardrobe,
  .viewport-modal .confirm-dialog {
    padding: 16px;
  }
}

/* 横屏手机：棋盘可以更宽 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .game-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .board-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .game-sidebar {
    flex: 0 0 280px;
    max-height: 100dvh;
    overflow-y: auto;
  }

  .game-board {
    max-width: min(100%, calc(100dvh - 60px)) !important;
  }
}

/* ========================= 触摸瞄准/下子：体验细节 ========================= */
@media (max-width: 760px) {
  /* 让瞄准准星更显眼 */
  .aim-cross,
  .aim-outline {
    stroke-width: 2.5 !important;
  }

  /* 拖拽过程中的引导线：透明度更高，避免误判 */
  .aim-guides {
    opacity: 0.85;
  }

  /* 下子点击区：原本 SVG 网格较密，手机上需要 32px+ 的最小热区。
     这里通过 CSS 给 hit 矩形加最小尺寸兜底，覆盖 JS 设的较小尺寸。 */
  .board-hit {
    min-width: 32px;
    min-height: 32px;
  }

  /* 棋盘悬停态：手机上 hover 不可靠，转用 :focus-visible 反馈 */
  .board-hit:focus-visible {
    outline: 2px solid #faf0bd;
    outline-offset: 1px;
  }
}

/* ========================= 对局页：融合顶栏（nav 第二行） =========================
 * 目的：把 .event-match-heading（包含 turn-clock / 对局信息 / 结束练棋）
 *       重塑为视觉上紧贴 nav.event-nav 的紧凑工具栏。DOM 结构不动，
 *       靠 CSS 把内部元素压缩成一行 + 把冗余文字/装饰隐藏。
 * 注意：.event-match-heading 与 .event-header 不是同一父元素，
 *       所以无法用 order 重排；这里直接把 heading 自身做紧凑。
 */
@media (max-width: 760px) {
  /* 整体：水平 flex 工具栏，视觉衔接 nav（同样的内边距、浅色边） */
  .event-content > .play-surface > .event-match-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 4px 14px !important;
    background: rgba(20, 33, 30, 0.45) !important;
    border-bottom: 1px solid rgba(201, 199, 165, 0.15) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 隐藏 heading 里的冗余文本（kicker / h2 标题 / event-match-turn 文字），
     注意：必须排除 .turn-clock，否则会把计时条一并隐藏 */
  .event-content > .play-surface > .event-match-heading > div:not(.turn-clock),
  .event-content > .play-surface > .event-match-heading > h2,
  .event-content > .play-surface > .event-match-heading .section-kicker,
  .event-content > .play-surface > .event-match-heading h2,
  .event-content > .play-surface > .event-match-heading .event-match-turn {
    display: none !important;
  }

  /* turn-clock：变成横向胶囊（仅图标 + timer + 进度条） */
  .event-match-heading .turn-clock {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* turn-clock 的装饰 SVG 圆圈：缩小到 18px 提示"计时中" */
  .event-match-heading .turn-clock > svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    color: #c9c7a5 !important;
  }

  /* turn-clock 的文字区（"你的回合 / 每回合 60 秒"）：
     owner（"你的回合"/"对手回合"）保留并放大显示，让玩家一眼看到轮谁下；
     hint（"每回合 60 秒"）冗余，隐藏。
     用 display:contents 让 .turn-clock-copy 的子元素直接成为 flex 子项。 */
  .event-match-heading .turn-clock-copy {
    display: contents !important;
  }
  .turn-clock-hint {
    display: none !important;
  }

  .event-match-heading .turn-clock-owner {
    display: inline-block !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    color: #faf0bd; /* 默认：黄色（玩家回合） */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 对手回合时（data-own-turn="false"）：owner 文字变灰 */
  .event-match-heading .turn-clock[data-own-turn='false'] .turn-clock-owner {
    color: #8f9f95 !important;
  }

  /* 紧急态（自己的回合时间快到）：owner + timer 都变红 */
  .event-match-heading .turn-clock[data-urgent='true'] .turn-clock-owner {
    color: #e57a4b !important;
  }

  /* timer：突出显示（等宽数字） */
  .turn-clock > strong,
  .event-match-heading .turn-clock > strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #faf0bd !important;
    font-variant-numeric: tabular-nums !important;
    flex: 0 0 auto !important;
  }

  /* 紧急态 timer 变红 */
  .turn-clock[data-urgent='true'] > strong,
  .event-match-heading .turn-clock[data-urgent='true'] > strong {
    color: #e57a4b !important;
  }

  /* 对手回合时 timer 灰（用 !important 压过基础规则的 #faf0bd） */
  .turn-clock[data-own-turn='false'] > strong,
  .event-match-heading .turn-clock[data-own-turn='false'] > strong {
    color: #8f9f95 !important;
  }

  /* 进度条：变成底部细线（高度 3px），覆盖默认的厚横条样式 */
  .event-match-heading .turn-clock-track {
    position: absolute !important;
    bottom: 2px !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    width: auto !important;
    height: 3px !important;
    background: rgba(201, 199, 165, 0.18) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
  }

  .event-match-heading .turn-clock-track > span {
    height: 100% !important;
    background: #d6bd82 !important;
    transition: width 0.5s linear !important;
  }

  /* turn-clock 紧急态（自己的回合时间快用完）：进度条变红 */
  .event-match-heading .turn-clock[data-urgent='true'] .turn-clock-track > span {
    background: #e57a4b !important;
  }

  /* 「对局信息」与「结束练棋」按钮：改成纯图标方形按钮
     （文字用 1px clip 隐藏，仍可被屏幕阅读器读到） */
  .event-match-heading [data-testid='open-match-details'],
  .event-match-heading button.quiet-button.action-exit,
  .event-match-heading button.quiet-button {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important; /* 隐藏内联文字 */
    color: #d8e1cc !important;
    background: rgba(201, 199, 165, 0.08) !important;
    border: 1px solid rgba(201, 199, 165, 0.2) !important;
  }

  /* 按钮里的 SVG：放大到 18px */
  .event-match-heading [data-testid='open-match-details'] > svg,
  .event-match-heading button.quiet-button > svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    color: inherit !important;
  }

  /* 按钮内非 svg 节点：sr-only 隐藏（无障碍保留） */
  .event-match-heading [data-testid='open-match-details'] > :not(svg),
  .event-match-heading button.quiet-button > :not(svg) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* 按下态：按钮给点反馈 */
  .event-match-heading [data-testid='open-match-details']:active,
  .event-match-heading button.quiet-button:active {
    background: rgba(201, 199, 165, 0.2) !important;
  }
}

/* ========================= 底部安全区（iPhone X 等带刘海机型） ========================= */
@supports (padding: max(0px)) {
  .arena-footer,
  .game-layout {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ========================= 减少动效（尊重系统设置） ========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================= v20：用户最终决策 =========================
 * 放在文件最末尾 + 用 :root 把 specificity 提到 ≥ 30，平/压过桌面端
 * `:root .game-shell :is(.quiet-button, ...){display:inline-flex}` 的 30
 * （specificity 相同时，document order 后定义胜出）。
 * - 对局信息 modal 按钮 + modal 本身：删除（不需要查看对战双方详情的入口）
 * - 结算结果标签「胜利/失败」：冗余，结算弹窗已有胜负标题
 * - 侧栏对手区 sidebar-opponent：删除，让下方手牌区上移填补空白 */
:root .event-match-heading [data-testid='open-match-details'],
:root [data-testid='match-details-modal'],
:root [data-testid='practice-result-outcome'],
:root .sidebar-opponent,
:root .duelist.duelist-opponent.sidebar-opponent {
  display: none !important;
}