/* ============================================================
   手机操作模式样式 —— 仅 index.html 加载
   原则：所有版式规则挂在 body[data-mobile] 下，
   导出图片时 onclone 移除该属性 → 自动还原 PC 版式，导出结果与 PC 完全一致。
   ============================================================ */

/* 站位格放置提示双文案切换（默认只显示 PC 拖拽提示；导出克隆中同理） */
.placement-hint-mobile { display: none; }
body[data-mobile] .placement-hint-pc { display: none; }
body[data-mobile] .placement-hint-mobile { display: inline; font-size: 11px; color: #666; }

/* ---------- 基础留白 ---------- */
body[data-mobile] { padding: 6px 6px 96px; }
body[data-mobile] .capture-zone { padding: 8px; }
body[data-mobile] header { flex-wrap: wrap; }
body[data-mobile] .title-input { font-size: 16px; min-width: 120px; }

/* ---------- 队伍区：横向滑动（隐藏滚动条 + 吸附整卡，触屏习惯更自然） ---------- */
body[data-mobile] .team-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(215px, 1fr);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;          /* Firefox */
    padding-bottom: 2px;
}
body[data-mobile] .team-grid::-webkit-scrollbar { display: none; } /* Chrome/Edge/Safari */
body[data-mobile] .team-grid > .slot { scroll-snap-align: start; }
/* 其余横滑区同样隐藏滚动条（纯手势滑动） */
body[data-mobile] .pet-grid-3,
body[data-mobile] .timeline-left-panel { scrollbar-width: none; }
body[data-mobile] .pet-grid-3::-webkit-scrollbar,
body[data-mobile] .timeline-left-panel::-webkit-scrollbar { display: none; }
body[data-mobile] .slot { min-height: 500px; }

/* ---------- 战斗区：站位矩阵在最上一排；下面三个宠物卡（图片+右侧竖排宝石）成一组，NOTE 在整组右侧 ----------
   注：手机模式下 .timeline-right-panel 由 mobile_mode.js 移入 .pet-grid-3，
   导出时 app.js onclone 会把它移回时间线容器，导出版式不变 ---------- */
body[data-mobile] .battle-layout-container {
    grid-template-columns: 1fr;
    grid-template-areas:
        "matrix"
        "pets";
    align-items: stretch;
}
body[data-mobile] .pet-panel-side { grid-area: pets; }
body[data-mobile] .hero-matrix-side { grid-area: matrix; }
body[data-mobile] .pet-grid-3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 196px) minmax(110px, 1fr);
    grid-template-rows: auto;
    column-gap: 6px;
    justify-content: start;
    align-items: stretch; /* 覆盖桌面 .pet-grid-3 的 align-items:center，让 NOTE 与宠物卡等高 */
    overflow-x: auto;
}
/* 画框保持 127×170 原生比例，禁止 flex 收缩 */
body[data-mobile] .pet-image-frame { flex-shrink: 0; }
/* 宝石保持卡内竖列（图片右侧，同桌面）；index.html 里的 #p-gems-* 空容器隐藏（桌面 .pet-gem-col 带 !important） */
body[data-mobile] .pet-grid-3 > .pet-gem-col { display: none !important; }
/* 宠物卡：图片 + 右侧宝石列，196px = 画框 130 + 宝石列 ~52 + 内边距 */
body[data-mobile] .pet-grid-3 > .pet-cell { grid-column: auto; width: 196px; min-width: 196px; }
body[data-mobile] .pet-grid-3 .timeline-right-panel {
    grid-row: 1;
    grid-column: 4;
    width: auto;
    min-width: 0;
    border-radius: 4px;
    display: flex;
}
body[data-mobile] .pet-grid-3 .timeline-notes-textarea { flex: 1; min-height: 0; height: auto; }
body[data-mobile] .pet-cell { padding: 5px; }
body[data-mobile] .pet-name-text { font-size: 11px; }
body[data-mobile] .pet-label-tag { font-size: 10px; }
body[data-mobile] .pet-gem-cell select { font-size: 9px; }
body[data-mobile] .matrix-column { height: 165px; }
body[data-mobile] .matrix-cell-half { height: calc((165px - 16px) / 2); }
body[data-mobile] .matrix-name { font-size: 13px; }

/* ---------- 时间线：备注换行到下方 ---------- */
body[data-mobile] .timeline-row-layout { flex-direction: column; }
body[data-mobile] .timeline-left-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body[data-mobile] .timeline-right-panel { min-width: 0; width: 100%; }
body[data-mobile] .timeline-right-panel .timeline-notes-textarea { min-height: 110px; }

/* ---------- 英雄池与筛选条：卡片固定 110px，不随窗口宽度拉伸 ---------- */
body[data-mobile] .character-pool {
    grid-template-columns: repeat(auto-fill, 110px);
    justify-content: center;
    gap: 8px;
}
/* 池卡 padding 为 content-box，会溢出 110px 轨道互相压叠 → 改 border-box */
body[data-mobile] .pool-card { box-sizing: border-box; width: 100%; }
body[data-mobile] .pool-element-filter { gap: 4px; }
body[data-mobile] .pool-filter-btn { padding: 7px 9px; }

/* ---------- 弹窗 / 选择器：面板给定宽，网格用固定 px 轨道（不用 1fr，列数随宽度自适应但卡片大小恒定） ---------- */
body[data-mobile] .team-data-modal-panel { min-width: 0; width: 88vw; padding: 18px; }
body[data-mobile] .gem-picker-panel { width: fit-content; max-width: 92vw; }
body[data-mobile] .pet-picker-panel { width: 94vw; }  /* 卡片选择器复用此面板类 */
body[data-mobile] .gem-picker-grid { display: grid; grid-template-columns: repeat(4, 52px); justify-content: center; }
body[data-mobile] .pet-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, 108px); justify-content: center; }
body[data-mobile] .card-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, 130px); justify-content: center; }

/* ---------- hover-only 操作的触屏替代：清除按钮常显 ---------- */
body[data-mobile] .matrix-cell.filled .matrix-cell-clear { display: block; }
body[data-mobile] .pet-clear-btn { opacity: 0.85; }
body[data-mobile] .gear-clear-btn { opacity: 0.85; }
body[data-mobile] .timeline-action-del-btn { opacity: 0.9; }
/* 触屏无 hover，禁用 tooltip 气泡避免粘滞 */
body[data-mobile] [data-tooltip]:hover::after { content: none; }

/* ---------- 点选-落点交互态 ---------- */
body[data-mobile] .mobile-pick-selected {
    outline: 3px solid var(--accent, #2dd4bf);
    outline-offset: -1px;
    box-shadow: 0 0 14px rgba(var(--accent-rgb, 45, 212, 191), 0.7);
}
body[data-mobile] .matrix-column.mobile-drop-hint {
    box-shadow: inset 0 0 0 2px rgba(255, 184, 108, 0.65);
}
body[data-mobile] .matrix-cell.mobile-drop-hint { cursor: pointer; }
body[data-mobile].mobile-placing .matrix-column { cursor: pointer; }

/* ---------- 触控手感 ---------- */
body[data-mobile] .pool-card,
body[data-mobile] .matrix-cell,
body[data-mobile] .hero-avatar-box,
body[data-mobile] .slot,
body[data-mobile] .pet-cell,
body[data-mobile] .gear-cell {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- 左侧浮动条 → 底部横条 ---------- */
body[data-mobile] .side-actions {
    left: 50%;
    top: auto;
    bottom: 8px;
    transform: translateX(-50%);
    flex-direction: row;
    align-items: center;
    max-width: calc(100vw - 12px);
    padding: 2px 4px;
    border-radius: 14px;
    border-left: 1px solid #3a3a42;
}
body[data-mobile] .side-actions .side-collapse-btn { display: none !important; }
body[data-mobile] .side-actions .side-div {
    width: 1px; height: auto; margin: 6px 2px;
    background: linear-gradient(180deg, transparent, #3a3a42 20%, #3a3a42 80%, transparent);
}
body[data-mobile] .side-actions .menu-row-btn,
body[data-mobile] .side-actions .fab-btn,
body[data-mobile] .side-actions .theme-floater .theme-menu-btn {
    flex-direction: column;
    gap: 2px;
    margin: 1px;
    padding: 6px 8px;
    align-self: center;
}
body[data-mobile] .side-actions span { font-size: 10px; }
body[data-mobile] .side-actions .theme-floater .theme-menu-btn { padding: 6px 8px; }
/* 下拉面板改为向上弹出并水平居中 */
body[data-mobile] .side-actions .floater-panel,
body[data-mobile] .side-actions .theme-floater .theme-panel {
    top: auto;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(8px) scale(0.98);
    transform-origin: center bottom;
}
body[data-mobile] .side-actions .floater-panel.open,
body[data-mobile] .side-actions .theme-floater .theme-panel.open {
    transform: translateX(-50%);
}

/* ---------- 待放置提示条（capture-zone 之外，不进导出图） ---------- */
#mobile-pending-bar {
    position: fixed;
    left: 50%;
    bottom: 74px;
    transform: translateX(-50%) translateY(8px);
    z-index: 940;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 92vw;
    padding: 8px 12px;
    background: var(--bg-panel, #222);
    border: 1px solid var(--accent, #2dd4bf);
    border-radius: 10px;
    color: var(--text, #eee);
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
#mobile-pending-bar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
#mobile-pending-bar .mpb-name { font-weight: 700; color: var(--accent, #2dd4bf); }
#mobile-pending-bar .mpb-cancel {
    margin-left: 4px;
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}