/* === BxB shared UI primitives — loaded by every viewer page === */
/* ----- touch responsiveness（全局・无 media query）-----
touch-action: manipulation → 干掉浏览器 300ms 双击缩放检测延迟（iOS Safari /
旧 Android Chrome 上肉眼可感）。桌面无 touch，无副作用。
-webkit-tap-highlight-color: transparent → 去掉 iOS Safari 点击时的灰色闪光，
视觉延迟感消失。桌面无 webkit tap-highlight，无副作用。
注意： 不加 touch-action — link 走浏览器原生 navigation（不是 JS click handler），
300ms 延迟在原生导航上不存在。在 iPad Safari/Chrome 上反而有偶发 navigation 被
吞掉的 race bug，所以排除。 */
button, [onclick],
.ftog, .btog,
.char-item, .soul-item, .cr-item, .bg-item,
.toolbar-btn, .filter-toggle-btn, .f-reset-btn,
.lcs-opt, .lcs-trigger,
.om-opt, .om-btn,
.eb-btn, .eb-emblem,
.modal-close, .modal-overlay,
.btn-edit, .btn-revise-save, .btn-add-slot,
select, input[type=number] {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* 只去掉 tap-highlight 灰闪，保留默认 touch-action（让浏览器原生处理 link 导航） */
a {
-webkit-tap-highlight-color: transparent;
}
/* ----- filter bar ----- */
.filter-section { display: flex; flex-direction: column; gap: 3px; }
.filter-label { font-size: 10px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; }
.filter-toggles { display: flex; flex-wrap: wrap; gap: 3px; }
.ftog {
font-size: 11px; padding: 2px 7px; border-radius: 4px;
border: 1px solid var(--border); background: var(--bg3); color: var(--text2);
cursor: pointer; transition: all .1s; white-space: nowrap;
}
.ftog:hover { border-color: var(--accent); color: var(--text); }
.ftog.on { background: rgba(91,127,255,.25); border-color: #5b7fff; color: #7b9fff; font-weight: 700; }
/* 元素属性按钮的选中态配色（filter ftog 与 hensei enemy-bar eb-btn 共用） */
.ftog.elem-1.on, #enemy-bar .eb-btn.elem-1.on { background: rgba(255,85,51,.22); border-color: var(--fire); color: var(--fire); }
.ftog.elem-2.on, #enemy-bar .eb-btn.elem-2.on { background: rgba(51,136,255,.22); border-color: var(--water); color: var(--water); }
.ftog.elem-3.on, #enemy-bar .eb-btn.elem-3.on { background: rgba(68,204,102,.22); border-color: var(--wind); color: var(--wind); }
.ftog.elem-4.on, #enemy-bar .eb-btn.elem-4.on { background: rgba(255,204,0,.22); border-color: var(--light); color: var(--light); }
.ftog.elem-5.on, #enemy-bar .eb-btn.elem-5.on { background: rgba(170,85,255,.22); border-color: var(--dark); color: var(--dark); }
/* ----- bunrui toggle buttons (edit mode) ----- */
.bunrui-toggles { display: flex; flex-wrap: wrap; gap: 3px; }
.btog {
font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
background: var(--bg); border: 1px solid var(--border); color: var(--text2);
cursor: pointer; white-space: nowrap;
}
.btog.on { background: rgba(91,127,255,.25); border-color: #5b7fff; color: #7b9fff; }
/* ----- CHARA_TAG（魔剣特性）badge color classes — id ごとの専用配色 -----
新 tag 追加時はここに .bd-sp-{id} を追加（color と CHARA_TAG_COLOR を一致させる）。 */
.bd-sp-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; white-space: nowrap; }
.bd-sp-1 { background: rgba(80,180,255,.2); color: #60c0ff; border: 1px solid rgba(80,180,255,.35); }
.bd-sp-2 { background: rgba(180,80,255,.2); color: #c060ff; border: 1px solid rgba(180,80,255,.35); }
.bd-sp-3 { background: rgba(255,150,50,.2); color: #ff9a40; border: 1px solid rgba(255,150,50,.35); }
.bd-sp-4 { background: rgba(80,220,100,.2); color: #50d070; border: 1px solid rgba(80,220,100,.35); }
.bd-sp-5 { background: rgba(255,200,50,.2); color: #ffc840; border: 1px solid rgba(255,200,50,.35); }
.bd-sp-6 { background: rgba(255,130,180,.2); color: #ff85b7; border: 1px solid rgba(255,130,180,.35); }
.bd-sp-7 { background: rgba(232,75,75,.2); color: #e84a4a; border: 1px solid rgba(232,75,75,.35); }
.bd-sp-8 { background: rgba(95,215,160,.2); color: #5fd8a0; border: 1px solid rgba(95,215,160,.35); }
.bd-sp-9 { background: rgba(175,110,255,.2); color: #b070ff; border: 1px solid rgba(175,110,255,.35); }
.bd-sp-10 { background: rgba(45,180,130,.2); color: #2db383; border: 1px solid rgba(45,180,130,.35); }
.bd-sp-11 { background: rgba(224,17,95,.2); color: #e0115f; border: 1px solid rgba(224,17,95,.35); }
.bd-sp-12 { background: rgba(74,184,200,.2); color: #4ab8c8; border: 1px solid rgba(74,184,200,.35); }
.bd-sp-13 { background: rgba(68,136,221,.2); color: #4488dd; border: 1px solid rgba(68,136,221,.35); }
.bd-sp-14 { background: rgba(204,119,51,.2); color: #cc7733; border: 1px solid rgba(204,119,51,.35); }
.bd-dur-tag { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background: rgba(100,120,160,.2); color: #a0b0d0; border: 1px solid rgba(100,120,160,.3); white-space: nowrap; }
.bd-hit-tag { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 10px; background: rgba(140,140,160,.15); color: #9090b0; border: 1px solid rgba(140,140,160,.25); white-space: nowrap; }
/* ----- edit controls ----- */
.edit-input {
background: var(--bg); border: 1px solid var(--accent); border-radius: 4px;
color: var(--text); padding: 4px 8px; font-size: 13px; font-family: inherit;
}
.edit-input:focus { outline: none; border-color: #8aabff; }
.edit-input.stretch { flex: 1; min-width: 0; width: auto; }
.edit-select {
background: var(--bg3); border: 1px solid var(--accent); border-radius: 6px;
color: var(--text); padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.edit-textarea {
background: var(--bg); border: 1px solid var(--accent); border-radius: 4px;
color: var(--text); padding: 6px 8px; font-size: 13px; width: 100%;
min-height: 56px; resize: vertical; font-family: inherit; line-height: 1.6;
}
.edit-textarea:focus { outline: none; border-color: #8aabff; }
.edit-num-sm {
width: 100px;
background: var(--bg); border: 1px solid var(--accent); border-radius: 4px;
color: var(--text); padding: 3px 6px; font-size: 13px; text-align: right;
}
.edit-num-sm:focus { outline: none; border-color: #8aabff; }
.edit-ro { font-size: 12px; color: var(--text2); padding: 4px 0; line-height: 1.5; }
.edit-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.field-label { font-size: 11px; color: var(--text2); margin: 6px 0 3px; }
.field-label:first-child { margin-top: 0; }
/* ----- buttons ----- */
.btn-save { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 6px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-save:hover { opacity: .85; }
.btn-cancel { background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.btn-cancel:hover { color: var(--text); }
.btn-edit { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 4px 0; font-size: 11px; cursor: pointer; width: 84px; }
.btn-edit:hover { background: rgba(91,127,255,.1); }
.btn-add-slot { font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px dashed var(--border); background: transparent; color: var(--text2); cursor: pointer; }
.btn-add-slot:hover { border-color: var(--accent); color: var(--accent); }
.latent-rm-btn { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 13px; padding: 0 4px; line-height: 1; }
.latent-rm-btn:hover { color: #ff5555; }
/* mobile filter drawer toggle — desktop 由各页面自行 display:none/block 控制 */
.filter-toggle-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.filter-toggle-btn:hover { border-color: var(--accent); }
/* mobile toolbar small action button (crystals / bladegraph) */
.toolbar-btn { font-size: 11px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg3); color: var(--text2); cursor: pointer; white-space: nowrap; }
.toolbar-btn:hover { border-color: var(--accent); color: var(--text); }
/* skill 编辑卡片 删除（×）按钮：右上角 22×22 */
.btn-skill-tomb { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text2); font-size: 14px; line-height: 18px; cursor: pointer; padding: 0; }
.btn-skill-tomb:hover { background: rgba(255,80,80,0.15); border-color: #ff5050; color: #ff8080; }
.skill-edit-card.deleted .btn-skill-tomb { background: rgba(91,127,255,0.15); border-color: #5b7fff; color: #7b9fff; }
/* ----- skill edit card ----- */
.skill-edit-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; position: relative; }
.skill-edit-card.deleted { opacity: 0.45; }
.skill-edit-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.skill-edit-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 60px; }
/* ----- skill tags ----- */
.skill-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.skill-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.skill-name { font-weight: 600; font-size: 13px; color: var(--accent); flex: 1; min-width: 0; }
.skill-tags-right { display: flex; gap: 3px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.skill-effect-row { display: flex; align-items: flex-start; gap: 8px; }
.skill-effect { font-size: 13px; line-height: 1.6; color: var(--text); flex: 1; }
.skill-bairitu, .dm-skill-bairitu { flex-shrink: 0; font-size: 12px; color: var(--text2); white-space: nowrap; padding-top: 2px; }
.bunrui-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: rgba(91,127,255,.18); color: #7b9fff; border: 1px solid rgba(91,127,255,.35); white-space: nowrap; }
.scope-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.scope-self { background: rgba(120,120,120,.18); color: #999; border: 1px solid rgba(120,120,120,.3); }
.scope-all { background: rgba(60,180,100,.18); color: #4cbb6e; border: 1px solid rgba(60,180,100,.35); }
.scope-lim { background: rgba(255,180,40,.18); color: #ffb828; border: 1px solid rgba(255,180,40,.35); }
.scope-equip-s { background: rgba(100,160,255,.18); color: #80aaff; border: 1px solid rgba(100,160,255,.35); }
.scope-equip-a { background: rgba(80,220,140,.18); color: #50e080; border: 1px solid rgba(80,220,140,.35); }
.cond-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.cond-1 { background: rgba(255,200,40,.18); color: #ffd040; border: 1px solid rgba(255,200,40,.35); }
.cond-2 { background: rgba(255,80,80,.18); color: #ff6060; border: 1px solid rgba(255,80,80,.35); }
.cond-3 { background: rgba(160,80,255,.18); color: #b060ff; border: 1px solid rgba(160,80,255,.35); }
.cond-4 { background: rgba(255,130,40,.18); color: #ff9060; border: 1px solid rgba(255,130,40,.35); }
/* ----- badge base ----- */
.badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.badge.elem-1 { background: var(--fire); color: #fff; border: 1px solid rgba(0,0,0,.25); }
.badge.elem-2 { background: var(--water); color: #fff; border: 1px solid rgba(0,0,0,.25); }
.badge.elem-3 { background: var(--wind); color: #fff; border: 1px solid rgba(0,0,0,.25); }
.badge.elem-4 { background: var(--light); color: #000; border: 1px solid rgba(0,0,0,.25); }
.badge.elem-5 { background: var(--dark); color: #fff; border: 1px solid rgba(0,0,0,.25); }
.badge.elem-6 { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
.badge.weapon { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); }
/* rarity badge 着色（A / AA / S / SS）—— --ss / --s / --aa / --a base.css 由来 */
.badge.SS { background: var(--ss); color: #fff; }
.badge.S { background: var(--s); color: #fff; }
.badge.AA { background: var(--aa); color: #fff; }
.badge.A { background: var(--a); color: #fff; }
.badge.bunrui-sm { background: var(--bg3); color: var(--text2); border: 1px solid var(--border); font-size: 9px; }
/* ----- section ----- */
.section { margin-bottom: 20px; }
.section-title { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.no-results { text-align: center; color: var(--text2); padding: 40px 20px; font-size: 13px; }
/* ----- row badges (accordion list pages) ----- */
.row-badges { display: flex; gap: 3px; align-items: center; flex-shrink: 0; width: 104px; }
.row-bairitu { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; flex-shrink: 0; padding: 1px 6px; border-radius: 4px; background: rgba(91,127,255,.12); border: 1px solid rgba(91,127,255,.3); }
.row-name { flex: 1; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.row-bunrui { display: flex; gap: 3px; flex-shrink: 0; }
/* 移动端 row 左右分栏（crystal / bladegraph 共用） */
.bg-row-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.bg-row-left .row-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-row-right { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.expand-btn { background: none; border: none; color: var(--text2); font-size: 13px; cursor: pointer; padding: 2px 4px; flex-shrink: 0; line-height: 1; transition: transform .2s; }
.body-left { flex: 1; min-width: 0; }
.body-right { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.field-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.field-row:last-child { border-bottom: none; }
.field-key { color: var(--text2); font-size: 11px; min-width: 60px; flex-shrink: 0; padding-top: 2px; }
.field-val { font-size: 13px; flex: 1; line-height: 1.5; word-break: break-all; }
/* mobile: 倍率テキスト幅を 30% に制限・改行許可（左の効果文を圧迫しない）*/
@media (max-width: 900px) {
.skill-tags-right {
max-width: 40%;
}
.skill-bairitu, .dm-skill-bairitu {
max-width: 30%;
white-space: normal;
word-break: break-all;
text-align: right;
}
/* filter UI 长押し時のテキスト選択 / iOS コールアウト（コピー / 選択メニュー）を抑止。
対象：filter toggle (.ftog) / mobile 「絞り込み」展開ボタン / toolbar / sort dropdown など。
検索 input (type=text) と edit-mode select は除外（編集可能性を保持）。デスクトップは元のまま選択可能。 */
.ftog,
.filter-toggle-btn,
.toolbar-btn,
.f-reset-btn,
#filters select,
#em-sidebar select,
#emblem-sidebar select {
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
}