/* 费用区与支付工作台：费用判定不变，只改善可见性与点选防误触 */
#page-battle .cost-bar .cost-card,
#page-battle .cost-bar .cost-card:hover,
#page-battle .cost-bar .cost-card.selected {
    margin-right: 0 !important;
}
#page-battle .cost-bar .cost-card {
    transform: none;
    flex: 0 0 48px;
}
#page-battle .cost-bar .cost-card.tapped,
#page-battle .cost-bar .cost-card.tapped:hover,
#page-battle .cost-bar .cost-card.tapped.selected {
    transform: rotate(90deg);
    margin-left: 10px !important;
    margin-right: 10px !important;
}
#page-battle .cost-bar .cost-card.payable {
    outline: 2px solid rgba(var(--brand-rgb), .55);
    outline-offset: 2px;
}
#page-battle .cost-bar .cost-card.dimmed { opacity: .42; }
@media (max-width: 900px) {
    #page-battle .cost-bar .cost-card { flex-basis: 42px; width: 42px; height: 58px; }
    #page-battle .cost-bar .cost-card.tapped { margin-left: 9px !important; margin-right: 9px !important; }
}
@media (max-width: 520px) {
    #page-battle .cost-bar .cost-card { flex-basis: 36px; width: 36px; height: 50px; }
    #page-battle .cost-bar .cost-card.tapped { margin-left: 8px !important; margin-right: 8px !important; }
}
/* 费用弹窗在窄屏使用更宽的卡片网格，避免卡名和选中态难辨 */
@media (max-width: 520px) {
    #cost-pay-panel { max-height: 88vh; }
    #cost-pay-grid { grid-template-columns: repeat(4, minmax(62px, 1fr)); gap: 8px; }
    .cp-tile .cp-name { font-size: 9px; }
    #cost-pay-actions button { min-height: 42px; }
}